@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/src/stories/useFocusZone.stories.tsx

@@ -1,663 +0,0 @@
-import React, {useCallback, useRef, useState} from 'react'
-import {Meta} from '@storybook/react'
-import styled, {createGlobalStyle} from 'styled-components'
-
-import {Box, BaseStyles, Button, Flash, theme, ThemeProvider} from '..'
-import {Direction, FocusKeys} from '../behaviors/focusZone'
-import {themeGet} from '@styled-system/theme-get'
-import {useFocusZone} from '../hooks/useFocusZone'
-import {useTheme} from '../ThemeProvider'
-import {ButtonDanger, ButtonPrimary} from '../Button'
-
-export default {
-  title: 'Hooks/useFocusZone',
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider theme={theme}>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ]
-} as Meta
-
-// NOTE: the below styles are solely intended as a visual aid for
-// this Storybook story, but they're not recommended for a real site!
-const HelperGlobalStyling = createGlobalStyle`
-  *:focus {
-    outline: 2px solid ${themeGet('colors.border.info')} !important;
-  }
-`
-
-const MarginButton = styled(Button)`
-  margin: ${themeGet('space.1')};
-`
-
-export const BasicFocusZone = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const [fzEnabled, setFzEnabled] = useState(true)
-  const {containerRef} = useFocusZone({disabled: !fzEnabled}, [fzEnabled])
-
-  const ToggleButton = fzEnabled ? ButtonDanger : ButtonPrimary
-  const toggleFz = useCallback(() => {
-    setFzEnabled(!fzEnabled)
-  }, [fzEnabled])
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <ToggleButton onClick={toggleFz} sx={{mb: 3}}>
-          {fzEnabled ? 'Disable' : 'Enable'} Focus Zone
-        </ToggleButton>
-        <MarginButton>Apple</MarginButton>
-        <MarginButton>Banana</MarginButton>
-        <MarginButton>Cantaloupe</MarginButton>
-        <Box
-          borderColor="gray.5"
-          ref={containerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>Use Up Arrow, Down Arrow, Home, and End to move focus within this box.</strong>
-          <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <MarginButton>Durian</MarginButton>
-            <MarginButton>Elderberry</MarginButton>
-            <MarginButton>Fig</MarginButton>
-          </Box>
-        </Box>
-        <MarginButton>Kiwi</MarginButton>
-        <MarginButton>Lemon</MarginButton>
-        <MarginButton>Mango</MarginButton>
-      </Box>
-    </>
-  )
-}
-
-export const FocusOutBehavior = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const {containerRef: containerRef1} = useFocusZone({
-    focusOutBehavior: 'stop',
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
-  })
-  const {containerRef: containerRef2} = useFocusZone({
-    focusOutBehavior: 'wrap',
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
-  })
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <MarginButton>Apple</MarginButton>
-        <MarginButton>Banana</MarginButton>
-        <MarginButton>Cantaloupe</MarginButton>
-        <Box
-          borderColor="gray.5"
-          ref={containerRef1 as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>
-            Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends.
-          </strong>
-
-          <Box display="flex" flexDirection="row" alignItems="flex-start">
-            <MarginButton>Durian</MarginButton>
-            <MarginButton>Elderberry</MarginButton>
-            <MarginButton>Fig</MarginButton>
-          </Box>
-        </Box>
-        <Box
-          borderColor="gray.5"
-          ref={containerRef2 as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular.</strong>
-
-          <Box display="flex" flexDirection="row" alignItems="flex-start">
-            <MarginButton>Grapefruit</MarginButton>
-            <MarginButton>Honeydew</MarginButton>
-            <MarginButton>Jackfruit</MarginButton>
-          </Box>
-        </Box>
-        <MarginButton>Kiwi</MarginButton>
-        <MarginButton>Lemon</MarginButton>
-        <MarginButton>Mango</MarginButton>
-      </Box>
-    </>
-  )
-}
-
-function getSiblingIndex(element: Element) {
-  let child: Element | null = element
-  let i = 0
-  while ((child = child.previousElementSibling) != null) {
-    ++i
-  }
-  return i
-}
-
-export const CustomFocusMovement = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const containerRef = useRef<HTMLElement>(null)
-
-  const getNextFocusable = useCallback(
-    (direction: Direction, from: Element | undefined, event: KeyboardEvent): HTMLElement | undefined => {
-      const toEnd = direction === 'start' || direction === 'end'
-      if (from && containerRef.current) {
-        const currentIndex = getSiblingIndex(from)
-        let nextIndex = currentIndex
-        if (['End', 'ArrowRight'].includes(event.key)) {
-          while (nextIndex % 3 !== 2) {
-            nextIndex += 1
-            if (!toEnd) {
-              break
-            }
-          }
-        }
-        if (['Home', 'ArrowLeft'].includes(event.key)) {
-          while (nextIndex % 3 !== 0) {
-            nextIndex -= 1
-            if (!toEnd) {
-              break
-            }
-          }
-        }
-        if (event.key === 'ArrowUp') {
-          while (nextIndex - 3 >= 0) {
-            nextIndex -= 3
-            if (!toEnd) {
-              break
-            }
-          }
-        }
-        if (event.key === 'ArrowDown') {
-          while (nextIndex + 3 < 9) {
-            nextIndex += 3
-            if (!toEnd) {
-              break
-            }
-          }
-        }
-        return containerRef.current.children[nextIndex] as HTMLElement
-      }
-    },
-    [containerRef]
-  )
-
-  useFocusZone({containerRef, getNextFocusable})
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <MarginButton>Apple</MarginButton>
-
-        <Box borderColor="gray.5" m={4} p={4} borderWidth="1px" borderStyle="solid" borderRadius={2}>
-          <strong>Use arrow keys to move focus within this box.</strong>
-          <Box
-            display="grid"
-            ref={containerRef as React.RefObject<HTMLDivElement>}
-            gridTemplateRows="1fr 1fr 1fr"
-            gridTemplateColumns="1fr 1fr 1fr"
-          >
-            <MarginButton>Banana</MarginButton>
-            <MarginButton>Cantaloupe</MarginButton>
-            <MarginButton>Durian</MarginButton>
-            <MarginButton>Elderberry</MarginButton>
-            <MarginButton>Fig</MarginButton>
-            <MarginButton>Grapefruit</MarginButton>
-            <MarginButton>Honeydew</MarginButton>
-            <MarginButton>Jackfruit</MarginButton>
-            <MarginButton>Kiwi</MarginButton>
-          </Box>
-        </Box>
-        <MarginButton>Lemon</MarginButton>
-        <MarginButton>Mango</MarginButton>
-      </Box>
-    </>
-  )
-}
-
-export const FocusInStrategy = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const {containerRef: firstContainerRef} = useFocusZone({
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusInStrategy: 'first'
-  })
-
-  const {containerRef: closestContainerRef} = useFocusZone({
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusInStrategy: 'closest'
-  })
-
-  const {containerRef: prevContainerRef} = useFocusZone({
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusInStrategy: 'previous'
-  })
-
-  const customContainerRef = useRef<HTMLElement>(null)
-  const customStrategy = React.useCallback(() => {
-    if (customContainerRef.current) {
-      const buttons = Array.from(customContainerRef.current.querySelectorAll('button'))
-      return buttons[Math.floor(Math.random() * 3)]
-    }
-  }, [customContainerRef])
-
-  useFocusZone({
-    containerRef: customContainerRef,
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusInStrategy: customStrategy
-  })
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <MarginButton>Apple</MarginButton>
-        <MarginButton>Banana</MarginButton>
-        <MarginButton>Cantaloupe</MarginButton>
-        <Box
-          borderColor="gray.5"
-          ref={firstContainerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>&ldquo;First&rdquo; strategy (focus first focusable element)</strong>
-          <Box display="flex" flexDirection="row" alignItems="flex-start">
-            <MarginButton>Banana</MarginButton>
-            <MarginButton>Cantaloupe</MarginButton>
-            <MarginButton>Durian</MarginButton>
-          </Box>
-        </Box>
-        <Box
-          borderColor="gray.5"
-          ref={closestContainerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>&ldquo;Closest&rdquo; strategy (focus first or last depending on focus direction)</strong>
-          <Box display="flex" flexDirection="row" alignItems="flex-start">
-            <MarginButton>Elderberry</MarginButton>
-            <MarginButton>Fig</MarginButton>
-            <MarginButton>Grapefruit</MarginButton>
-          </Box>
-        </Box>
-        <Box
-          borderColor="gray.5"
-          ref={prevContainerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>&ldquo;Previous&rdquo; strategy (most recently focused element)</strong>
-          <Box display="flex" flexDirection="row" alignItems="flex-start">
-            <MarginButton>Honeydew</MarginButton>
-            <MarginButton>Jackfruit</MarginButton>
-            <MarginButton>Kiwi</MarginButton>
-          </Box>
-        </Box>
-        <Box
-          borderColor="gray.5"
-          ref={customContainerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>&ldquo;Custom&rdquo; strategy (choose randomly for this example)</strong>
-          <Box display="flex" flexDirection="row" alignItems="flex-start">
-            <MarginButton>Lemon</MarginButton>
-            <MarginButton>Mango</MarginButton>
-            <MarginButton>Nectarine</MarginButton>
-          </Box>
-        </Box>
-        <MarginButton>Orange</MarginButton>
-        <MarginButton>Papaya</MarginButton>
-      </Box>
-    </>
-  )
-}
-
-export const SpecialSituations = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const {containerRef: vContainerRef} = useFocusZone({
-    bindKeys:
-      FocusKeys.ArrowVertical |
-      FocusKeys.JK |
-      FocusKeys.WS |
-      FocusKeys.Tab |
-      FocusKeys.PageUpDown |
-      FocusKeys.HomeAndEnd
-  })
-  const {containerRef: hContainerRef} = useFocusZone({focusOutBehavior: 'wrap', bindKeys: FocusKeys.ArrowHorizontal})
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash sx={{mb: 3}}>
-          This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in
-          different situations. Focus treatment within your component should be evaluated for your particular UX using
-          the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard">ARIA guidelines</a>.
-        </Flash>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <MarginButton>Apple</MarginButton>
-        <MarginButton>Banana</MarginButton>
-        <MarginButton>Cantaloupe</MarginButton>
-        <Box
-          borderColor="gray.5"
-          ref={vContainerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab</strong>
-          <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <input style={{width: '250px'}} type="text" defaultValue="Printable characters won't move focus" />
-            <MarginButton>Regular button</MarginButton>
-            <select>
-              <option>Down arrow invokes dropdown</option>
-              <option>Unless Cmd (mac)/Ctrl (Windows)</option>
-              <option>Is held</option>
-            </select>
-            <textarea
-              style={{width: '250px', height: '95px'}}
-              defaultValue="Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
-            ></textarea>
-          </Box>
-        </Box>
-        <Box
-          borderColor="gray.5"
-          ref={hContainerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.</strong>
-
-          <Box display="flex" flexDirection="row" alignItems="center">
-            <MarginButton>Grapefruit</MarginButton>
-            <input
-              style={{width: '300px'}}
-              type="text"
-              defaultValue="Left/Right only work at beginning/end of input."
-            />
-            <MarginButton>Jackfruit</MarginButton>
-          </Box>
-        </Box>
-        <MarginButton>Kiwi</MarginButton>
-        <MarginButton>Lemon</MarginButton>
-        <MarginButton>Mango</MarginButton>
-      </Box>
-    </>
-  )
-}
-
-export const ChangingSubtree = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const {containerRef} = useFocusZone({bindKeys: FocusKeys.ArrowVertical})
-
-  const [buttonCount, setButtonCount] = useState(3)
-  const removeButton = useCallback(() => {
-    setButtonCount(buttonCount - 1)
-  }, [setButtonCount, buttonCount])
-
-  const addButton = useCallback(() => {
-    setButtonCount(buttonCount + 1)
-  }, [setButtonCount, buttonCount])
-
-  const buttons: JSX.Element[] = []
-  for (let i = 0; i < buttonCount; ++i) {
-    buttons.push(
-      <div>
-        <MarginButton key={`button${i}`}>{i + 1}</MarginButton>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash sx={{mb: 3}}>
-          This story demonstrates that focusZone is consistent even when the container&rsquo;s subtree changes.
-        </Flash>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <MarginButton>Apple</MarginButton>
-        <MarginButton>Banana</MarginButton>
-        <MarginButton>Cantaloupe</MarginButton>
-        <Box
-          borderColor="gray.5"
-          ref={containerRef as React.RefObject<HTMLDivElement>}
-          m={4}
-          p={4}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>Bound keys: Arrow Up and Arrow Down</strong>
-          <Box display="flex" flexDirection="column" alignItems="flex-start">
-            {buttons}
-          </Box>
-        </Box>
-        <Box display="flex" flexDirection="row">
-          <MarginButton onClick={removeButton}>Remove Button</MarginButton>
-          <MarginButton onClick={addButton}>Add Button</MarginButton>
-        </Box>
-      </Box>
-    </>
-  )
-}
-
-export const NestedZones = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const outerContainerRef = useRef<HTMLElement>(null)
-  const innerContainerRef = useRef<HTMLElement>(null)
-
-  useFocusZone({
-    containerRef: outerContainerRef,
-    bindKeys: FocusKeys.ArrowVertical
-  })
-
-  useFocusZone({
-    containerRef: innerContainerRef,
-    bindKeys: FocusKeys.ArrowHorizontal
-  })
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <MarginButton>Apple</MarginButton>
-        <MarginButton>Banana</MarginButton>
-        <Box
-          borderColor="gray.5"
-          m={4}
-          p={4}
-          ref={outerContainerRef as React.RefObject<HTMLDivElement>}
-          borderWidth="1px"
-          borderStyle="solid"
-          borderRadius={2}
-        >
-          <strong>Bound keys: Arrow Up and Arrow Down</strong>
-          <br />
-          <MarginButton>Cantaloupe</MarginButton>
-          <Box
-            borderColor="gray.5"
-            m={4}
-            p={4}
-            ref={innerContainerRef as React.RefObject<HTMLDivElement>}
-            borderWidth="1px"
-            borderStyle="solid"
-            borderRadius={2}
-          >
-            <strong>Additional Bound keys: Arrow Left and Arrow Right</strong>
-            <Box display="flex" id="list" flexDirection="column" alignItems="flex-start">
-              <MarginButton>Durian</MarginButton>
-              <MarginButton>Elderberry</MarginButton>
-              <MarginButton>Fig</MarginButton>
-              <MarginButton>Grapefruit</MarginButton>
-            </Box>
-          </Box>
-          <MarginButton>Honeydew</MarginButton>
-        </Box>
-        <MarginButton>Jackfruit</MarginButton>
-        <MarginButton>Kiwi</MarginButton>
-      </Box>
-    </>
-  )
-}
-
-export const ActiveDescendant = () => {
-  // Display each key press in the top-right corner of the page as a visual aid
-  const [lastKey, setLastKey] = useState('none')
-  const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    setLastKey(event.key)
-  }, [])
-
-  const containerRef = useRef<HTMLElement>(null)
-  const controllingElementRef = useRef<HTMLElement>(null)
-  const {theme: themeFromContext} = useTheme()
-
-  useFocusZone({
-    containerRef,
-    activeDescendantFocus: controllingElementRef,
-    bindKeys: FocusKeys.ArrowVertical,
-    onActiveDescendantChanged: (current, previous) => {
-      if (current) {
-        current.style.outline = `2px solid ${themeFromContext?.colors.border.info}`
-      }
-      if (previous) {
-        previous.style.outline = ''
-      }
-    },
-    focusableElementFilter: elem => elem instanceof HTMLButtonElement
-  })
-
-  return (
-    <>
-      <HelperGlobalStyling />
-      <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash sx={{mb: 3}}>
-          This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an
-          active element. Below, you can focus the input box then use the up/down arrow keys to change the active
-          descendant (dark blue outline).
-        </Flash>
-        <Box position="absolute" right={5} top={2}>
-          Last key pressed: {lastKey}
-        </Box>
-        <MarginButton>Apple</MarginButton>
-        <MarginButton>Banana</MarginButton>
-        <MarginButton>Cantaloupe</MarginButton>
-        <Box borderColor="gray.5" m={4} p={4} borderWidth="1px" borderStyle="solid" borderRadius={2}>
-          <strong>Bound keys: Arrow Up and Arrow Down</strong>
-          <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <input
-              ref={controllingElementRef as React.RefObject<HTMLInputElement>}
-              type="text"
-              defaultValue="Focus remains here."
-              aria-controls="list"
-            />
-            <Box
-              display="flex"
-              id="list"
-              flexDirection="column"
-              alignItems="flex-start"
-              ref={containerRef as React.RefObject<HTMLDivElement>}
-            >
-              <MarginButton>Durian</MarginButton>
-              <MarginButton>Elderberry</MarginButton>
-              <MarginButton>Fig</MarginButton>
-              <MarginButton>Grapefruit</MarginButton>
-            </Box>
-          </Box>
-        </Box>
-        <MarginButton>Honeydew</MarginButton>
-        <MarginButton>Jackfruit</MarginButton>
-        <MarginButton>Kiwi</MarginButton>
-      </Box>
-    </>
-  )
-}

package/src/sx.ts

@@ -1,24 +0,0 @@
-import css, {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
-import {ThemeColorPaths, ThemeShadowPaths} from './theme'
-import {ColorProps, ShadowProps} from 'styled-system'
-import merge from 'deepmerge'
-
-export type BetterCssProperties = {
-  [K in keyof SystemCssProperties]: K extends keyof ColorProps
-    ? ThemeColorPaths | SystemCssProperties[K]
-    : K extends keyof ShadowProps
-    ? ThemeShadowPaths | SystemCssProperties[K]
-    : SystemCssProperties[K]
-}
-
-export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject
-
-export interface SxProp {
-  sx?: BetterSystemStyleObject
-}
-
-const sx = (props: SxProp) => css(props.sx)
-
-export default sx
-
-export {merge}