function useBoxProps(styleProps, placeholderSelectors) {
  return useMemo(() => {
    // Split the resulting style object into ui-box-compatible props and the rest
    const {
      matchedProps: { selectors: actualSelectors = {}, ...matchedProps },
      remainingProps
    } = splitBoxProps(styleProps)

    /** @type {import('ui-box').EnhancerProps['selectors']} */
    const selectors = {}

    // Swap out pseudo selector placeholders for their actual css selector strings
    for (const k of Object.keys(actualSelectors)) {
      const key = k in placeholderSelectors ? placeholderSelectors[k] : k
      selectors[key] = actualSelectors[k]
    }

    const result = { ...matchedProps }
    if (!isEqual({}, remainingProps)) {
      result.style = remainingProps
    }

    if (!isEqual({}, selectors)) {
      result.selectors = selectors
    }

    return result
  }, [styleProps, placeholderSelectors])
}
Split up the style props into box-ready props (selectors + spreadable props)