@sanity/ui 0.37.20 → 0.37.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.20",
+  "version": "0.37.21",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -19,7 +19,7 @@
   "license": "MIT",
   "scripts": {
     "build": "run-s build:microbundle",
-    "build:microbundle": "microbundle --format modern,esm,cjs --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --no-compress --tsconfig tsconfig.lib.json",
+    "build:microbundle": "microbundle --format modern,esm,cjs --jsx React.createElement --jsxImportSource react --no-compress --tsconfig tsconfig.lib.json",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
     "prebuild": "yarn clean",
@@ -30,20 +30,20 @@
     "watch:es": "tsc --preserveWatchOutput -w --module ES6 --outDir lib/esm --project tsconfig.lib.json --rootDir src --target ES6"
   },
   "dependencies": {
-    "@juggle/resize-observer": "^3.4.0",
-    "@popperjs/core": "^2.11.6",
-    "@reach/auto-id": "^0.17.0",
-    "@sanity/color": "^2.1.14",
-    "@sanity/icons": "^1.3.4",
+    "@juggle/resize-observer": "^3.3.1",
+    "@popperjs/core": "^2.11.5",
+    "@reach/auto-id": "^0.16.0",
+    "@sanity/color": "^2.1.11",
+    "@sanity/icons": "^1.3.1",
     "framer-motion": "6.3.0",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
-    "react-popper": "^2.3.0",
+    "react-popper": "^2.2.5",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.17.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@types/refractor": "^3.0.2",
     "react": "^17.0.2",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "707079756d209432e82fc886b87e8eb641be9b0d"
+  "gitHead": "4f7ef1d42b0b536e746ac2670c113a24148c6fdc"
 }

package/src/__workshop__/color/overview.tsx

@@ -19,7 +19,7 @@ const clipboard = {
 
 export default function ColorOverviewStory(): React.ReactElement {
   return (
-    <Grid columns={[1, 1, 2, 3]} gapX={[4, 4, 5]} gapY={[5, 5, 6]} padding={[4, 5, 6]}>
+    <Grid columns={[1, 1, 2, 3]} gapX={[3, 4, 5]} gapY={[4, 5, 6]} padding={[3, 4, 5]}>
       {COLOR_HUES.map((hueKey) => (
         <ColorHuePreview tints={hues[hueKey]} hueKey={hueKey} key={hueKey} />
       ))}
@@ -32,7 +32,7 @@ function ColorHuePreview(props: {hueKey: string; tints: ColorTints}) {
 
   return (
     <Box>
-      <Heading as="h2" size={1}>
+      <Heading as="h2" size={[1, 1, 2]}>
         {ucfirst(hueKey)}
       </Heading>
 
@@ -78,20 +78,22 @@ function ColorTintPreview(props: {tint: ColorValue}) {
       as="button"
       onClick={handleClick}
       radius={2}
-      style={{
-        ['--card-bg-color' as any]: tint.hex,
-        ['--card-fg-color' as any]: hsl.l < 50 ? white.hex : black.hex,
-        cursor: 'pointer',
-      }}
+      style={
+        {
+          '--card-bg-color': tint.hex,
+          '--card-fg-color': hsl.l < 50 ? white.hex : black.hex,
+          cursor: 'pointer',
+        } as any
+      }
     >
       <Flex padding={3}>
         <Box flex={1}>
-          <Code size={1} style={{color: 'inherit'}}>
+          <Code size={[1, 1, 2]} style={{color: 'inherit'}}>
             {tint.title}
           </Code>
         </Box>
         <Box>
-          <Code size={1} style={{color: 'inherit'}}>
+          <Code size={[1, 1, 2]} style={{color: 'inherit'}}>
             {tint.hex}
           </Code>
         </Box>

package/src/components/autocomplete/__workshop__/async.tsx

@@ -1,11 +1,11 @@
-import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
+import {LinkIcon} from '@sanity/icons'
 import {
   Autocomplete,
   BaseAutocompleteOption,
   Box,
+  Button,
   Card,
   Code,
-  Flex,
   LayerProvider,
   Stack,
   Text,
@@ -88,7 +88,6 @@ export default function AsyncStory() {
           <Autocomplete
             disabled={loadingCurrentRef}
             filterOption={filterOption}
-            icon={value ? EarthAmericasIcon : SearchIcon}
             id="async"
             loading={loading}
             onChange={setValue}
@@ -96,6 +95,11 @@ export default function AsyncStory() {
             openButton={{onClick: handleOpenButtonClick}}
             options={options}
             placeholder="Search"
+            prefix={
+              <Box padding={1}>
+                <Button disabled={!value} icon={LinkIcon} mode="bleed" padding={2} />
+              </Box>
+            }
             radius={1}
             renderOption={renderOption}
             renderValue={renderValue}
@@ -136,19 +140,13 @@ function AsyncOption(props: {
       selected={selected}
       tabIndex={tabIndex}
     >
-      <Flex gap={3}>
-        <Text>
-          <EarthAmericasIcon />
+      {loading && (
+        <Text muted>
+          <>Loading…</>
         </Text>
+      )}
 
-        {loading && (
-          <Text muted>
-            <>Loading…</>
-          </Text>
-        )}
-
-        {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
-      </Flex>
+      {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
     </Card>
   )
 }

package/src/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -8,9 +8,7 @@ import {
   Text,
 } from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
-import {Popover} from '../../../primitives'
 import countries from '../__fixtures__/countries'
-import {AutocompleteProps} from '../autocomplete'
 import {ExampleOption} from './types'
 
 export default function ConstrainedHeightStory() {
@@ -73,38 +71,6 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
 
   const options = countries.map((item) => ({value: item.code, title: item.name}))
 
-  const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
-    (
-      popoverProps: {
-        content: React.ReactElement | null
-        hidden: boolean
-        inputElement: HTMLInputElement | null
-        onMouseEnter: () => void
-        onMouseLeave: () => void
-      },
-      popoverRef: React.Ref<HTMLDivElement>
-    ) => {
-      const {hidden, inputElement, ...restProps} = popoverProps
-
-      if (hidden) return null
-
-      return (
-        <Popover
-          {...restProps}
-          arrow={false}
-          constrainSize
-          matchReferenceWidth
-          open
-          placement="bottom"
-          radius={1}
-          ref={popoverRef}
-          referenceElement={inputElement}
-        />
-      )
-    },
-    []
-  )
-
   return (
     <Stack space={3}>
       <Text size={1} weight="medium">
@@ -118,10 +84,8 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           openButton
           options={options}
           placeholder="Search"
-          // popover={{allowedAutoPlacements: ['bottom-start', 'top-start']}}
           radius={1}
           renderOption={renderOption}
-          renderPopover={renderPopover}
           renderValue={renderValue}
           value={value}
         />

package/src/components/autocomplete/autocomplete.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useForwardedRef, useArrayProp} from '../../hooks'
+import {useForwardedRef, useResponsiveProp} from '../../hooks'
 import {Box, BoxProps, Button, Card, PopoverProps, Stack, Text, TextInput} from '../../primitives'
 import {AnimatedSpinnerIcon, ListBox, ResultsPopover, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
@@ -175,7 +175,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const popoverMouseWithinRef = useRef(false)
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useArrayProp(paddingProp)
+  const padding = useResponsiveProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value]

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -7,7 +7,7 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import {useArrayProp, useClickOutside} from '../../hooks'
+import {useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
 
@@ -27,8 +27,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>
 ) {
-  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = useArrayProp(spaceRaw)
+  const {children, maxLength, separator, space = 2, ...restProps} = props
   const [open, setOpen] = useState(false)
   const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)

package/src/components/dialog/dialog.tsx

@@ -2,7 +2,7 @@ import {CloseIcon} from '@sanity/icons'
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
-import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
+import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
@@ -138,14 +138,11 @@ const DialogCard = forwardRef(function DialogCard(
     id,
     onClickOutside,
     onClose,
-    radius: radiusProp,
+    radius,
     scheme,
-    shadow: shadowProp,
-    width: widthProp,
+    shadow,
+    width,
   } = props
-  const radius = useArrayProp(radiusProp)
-  const shadow = useArrayProp(shadowProp)
-  const width = useArrayProp(widthProp)
   const forwardedRef = useForwardedRef(ref)
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const localContentRef = useRef<HTMLDivElement | null>(null)
@@ -258,7 +255,7 @@ export const Dialog = forwardRef(function Dialog(
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius: cardRadiusProp = 3,
+    cardRadius = 3,
     cardShadow = 4,
     children,
     contentRef,
@@ -267,19 +264,14 @@ export const Dialog = forwardRef(function Dialog(
     id,
     onClickOutside,
     onClose,
-    padding: paddingProp = 4,
+    padding = 4,
     portal,
-    position: positionProp = dialog.position || 'fixed',
+    position = dialog.position || 'fixed',
     scheme,
-    width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
+    width = 0,
+    zOffset = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
     ...restProps
   } = props
-  const cardRadius = useArrayProp(cardRadiusProp)
-  const padding = useArrayProp(paddingProp)
-  const position = useArrayProp(positionProp)
-  const width = useArrayProp(widthProp)
-  const zOffset = useArrayProp(zOffsetProp)
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)

package/src/components/dialog/styles.ts

@@ -1,12 +1,12 @@
 import {CSSObject} from 'styled-components'
-import {_responsive, ThemeProps} from '../../styles'
+import {getResponsiveProp, responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
 
 /**
  * @internal
  */
 export interface ResponsiveDialogPositionStyleProps {
-  $position: DialogPosition[]
+  $position: DialogPosition | DialogPosition[]
 }
 
 export function dialogStyle({theme}: ThemeProps): CSSObject {
@@ -24,7 +24,7 @@ export function dialogStyle({theme}: ThemeProps): CSSObject {
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: color.shadow.umbra,
+    background: color.shadow.penumbra,
   }
 }
 
@@ -34,5 +34,5 @@ export function responsiveDialogPositionStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$position, (position) => ({'&&': {position}}))
+  return responsive(media, getResponsiveProp(props.$position), (position) => ({'&&': {position}}))
 }

package/src/components/hotkeys/hotkeys.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
 
 /**
@@ -34,8 +33,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.Ref<HTMLElement>
 ) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 1, ...restProps} = props
-  const space = useArrayProp(spaceProp)
+  const {fontSize, keys, padding, radius, space = 1, ...restProps} = props
 
   if (!keys || keys.length === 0) {
     return <></>

package/src/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -8,19 +8,11 @@ import {
   Menu,
   MenuButton,
   MenuItem,
+  PopoverProps,
   SelectableTone,
   Text,
 } from '@sanity/ui'
-import React, {useState} from 'react'
-import {MenuButtonProps} from '../menuButton'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-  placement: 'bottom',
-  portal: true,
-  // preventOverflow: true,
-  // width: 1,
-}
+import React, {useMemo, useState} from 'react'
 
 const items: {tone: SelectableTone; message: string}[] = [
   {
@@ -96,6 +88,17 @@ const items: {tone: SelectableTone; message: string}[] = [
 export default function ConstrainedInBoundaryStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
+  const popoverProps: PopoverProps = useMemo(
+    () => ({
+      constrainSize: true,
+      placement: 'bottom',
+      portal: true,
+      preventOverflow: true,
+      width: 1,
+    }),
+    []
+  )
+
   return (
     <Box height="fill" padding={[4, 5, 6]} sizing="border">
       <Card height="fill" shadow={1}>
@@ -126,7 +129,7 @@ export default function ConstrainedInBoundaryStory() {
                         })}
                       </Menu>
                     }
-                    popover={POPOVER_PROPS}
+                    popover={popoverProps}
                   />
                 </BoundaryElementProvider>
               </Box>

package/src/components/menu/__workshop__/groups.tsx

@@ -129,7 +129,7 @@ export default function GroupsStory() {
                   />
                 </Menu>
               }
-              // popover={{constrainSize: true, portal: true, preventOverflow: true}}
+              popover={{constrainSize: true, portal: true, preventOverflow: true}}
             />
           </LayerProvider>
 

package/src/components/menu/menuGroup.tsx

@@ -1,7 +1,6 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import React, {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {SelectableTone} from '../../types/selectable'
@@ -37,7 +36,7 @@ export function MenuGroup(
     icon,
     onClick,
     padding = 3,
-    popover,
+    popover = {},
     radius = 2,
     space = 3,
     text,
@@ -164,7 +163,7 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={useArrayProp(radius)}
+        $radius={radius}
         $tone={tone}
         onClick={handleClick}
         onKeyDown={handleKeyDown}

package/src/components/menu/menuItem.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp, useForwardedRef} from '../../hooks'
+import {useForwardedRef} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
@@ -118,13 +118,13 @@ export const MenuItem = forwardRef(function MenuItem(
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
+      $radius={radius}
       $tone={tone}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
       onMouseLeave={onItemMouseLeave}
+      padding={0}
       ref={setRef}
       role="menuitem"
       tabIndex={-1}

package/src/components/skeleton/skeleton.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef, useEffect, useState} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
@@ -45,13 +44,5 @@ export const Skeleton = forwardRef(function Skeleton(
     }
   }, [delay])
 
-  return (
-    <Root
-      {...restProps}
-      $animated={animated}
-      $radius={useArrayProp(radius)}
-      $visible={visible}
-      ref={ref}
-    />
-  )
+  return <Root {...restProps} $animated={animated} $radius={radius} $visible={visible} ref={ref} />
 })

package/src/components/skeleton/textSkeleton.tsx

@@ -1,7 +1,7 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {_responsive} from '../../styles'
+import {useResponsiveProp} from '../../hooks'
+import {responsive} from '../../styles'
 import {Theme, ThemeFontKey} from '../../theme'
 import {Skeleton, SkeletonProps} from './skeleton'
 
@@ -10,7 +10,7 @@ const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>(
     const {media} = theme.sanity
     const font = theme.sanity.fonts[$style]
 
-    const styles = _responsive(media, $size, (sizeIndex) => {
+    const styles = responsive(media, $size, (sizeIndex) => {
       const fontSize = font.sizes[sizeIndex]
       const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
 
@@ -63,7 +63,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useResponsiveProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="text" />
 })
@@ -78,7 +78,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useResponsiveProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="label" />
 })
@@ -93,7 +93,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useResponsiveProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
 })
@@ -108,7 +108,7 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useResponsiveProp(size)
 
   return <Root {...restProps} $size={$size} ref={ref} $style="code" />
 })

package/src/hooks/index.ts

@@ -1,9 +1,8 @@
-export * from './useArrayProp'
 export * from './useClickOutside'
 export * from './useElementRect'
-export * from './useElementSize'
 export * from './useGlobalKeyDown'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './useForwardedRef'
 export * from './useCustomValidity'
+export * from './useResponsiveProp'

package/src/hooks/useElementRect/useElementRect.ts

@@ -1,11 +1,23 @@
-import {useElementSize} from '../useElementSize'
+import {useEffect, useState} from 'react'
 
 /**
  * Subscribe to the rect of a DOM element.
- * @deprecated Use `useElementSize` instead
+ * @beta
  */
 export function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {
-  const elementSize = useElementSize(element)
+  const [rect, setRect] = useState<DOMRectReadOnly | null>(null)
 
-  return elementSize?._contentRect || null
+  useEffect(() => {
+    if (!element) return undefined
+
+    const ro = new ResizeObserver((entries) => {
+      setRect(entries[0].contentRect)
+    })
+
+    ro.observe(element)
+
+    return () => ro.disconnect()
+  }, [element])
+
+  return rect
 }

package/src/hooks/useResponsiveProp.ts

@@ -0,0 +1,10 @@
+import {useMemo} from 'react'
+import {getResponsiveProp} from '../styles'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useResponsiveProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+  return useMemo(() => getResponsiveProp(val, defaultVal), [defaultVal, val])
+}

package/src/index.ts

@@ -2,7 +2,6 @@ export * from './primitives'
 export * from './components'
 export * from './helpers'
 export * from './hooks'
-export * from './observers'
 export * from './styles'
 export * from './theme'
 export * from './types'

package/src/primitives/_selectable/selectable.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import {responsiveBorderStyle, ResponsiveBorderStyleProps} from '../../styles/border'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
 import {Box} from '../box'
 import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
@@ -6,8 +7,6 @@ import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from '.
 /**
  * @internal
  */
-export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  selectableBaseStyle,
-  selectableColorStyle
-)
+export const Selectable = styled(Box)<
+  SelectableStyleProps & ResponsiveRadiusStyleProps & ResponsiveBorderStyleProps
+>(responsiveBorderStyle, responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle)