@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

package/src/core/constants.ts

@@ -77,3 +77,9 @@ export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | '
   bottom: 'top',
   left: 'right',
 }
+
+export const Z_OFFSETS = {
+  dialog: 600,
+  popover: 400,
+  tooltip: 200,
+}

package/src/core/hooks/useClickOutside.test.tsx

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import {MutableRefObject, useEffect, useRef, useState} from 'react'
+import {type MutableRefObject, useEffect, useRef, useState} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutside} from './useClickOutside'
 
@@ -16,7 +15,7 @@ describe('useClickOutside', () => {
    */
   it('calls the handler when clicking outside of the array of elements', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
@@ -45,7 +44,7 @@ describe('useClickOutside', () => {
 
   it('the elements array flattens nested arrays one level deep', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
@@ -74,7 +73,7 @@ describe('useClickOutside', () => {
 
   it('it can set a boundary to scope outside click events', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
@@ -114,7 +113,7 @@ describe('useClickOutside', () => {
      * Thus it makes sense to unit test it to ensure it works as expected and we don't accidentally break backwards compatibility.
      */
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = (props: {open?: true}) => {
       const {open = false} = props
@@ -155,7 +154,7 @@ describe('useClickOutside', () => {
      * Since we don't want people to use the `setElement` pattern, test that userland can handle dynamically changing elements arrays
      */
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = (props: {open?: true}) => {
       const {open = false} = props
@@ -199,7 +198,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -229,7 +228,7 @@ describe('useClickOutside', () => {
      * If a mixture of refs and state is used it can appear like it's working correctly,
      * but this is a side-effect, not an indication it's safe.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
@@ -254,7 +253,7 @@ describe('useClickOutside', () => {
     /**
      * Unrelated state updates can create the same false impression of safety.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
@@ -306,7 +305,7 @@ describe('useClickOutside', () => {
 
       return elements
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
@@ -337,7 +336,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -368,7 +367,7 @@ describe('useClickOutside', () => {
      * If a mixture of refs and state is used it can appear like it's working correctly,
      * but this is a side-effect, not an indication it's safe.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
@@ -398,7 +397,7 @@ describe('useClickOutside', () => {
     /**
      * Unrelated state updates can create the same false impression of safety.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
@@ -451,7 +450,7 @@ describe('useClickOutside', () => {
 
       return element
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)

package/src/core/hooks/useClickOutside.ts

@@ -2,14 +2,10 @@ import {useEffect, useRef, useState} from 'react'
 
 import {EMPTY_ARRAY} from '../constants'
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
 function _getElements(

package/src/core/hooks/useClickOutsideEvent.test.tsx

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {useRef} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutsideEvent} from './useClickOutsideEvent'
 
@@ -13,7 +12,7 @@ describe('useClickOutsideEvent', () => {
 
   it('calls the handler when clicking outside of the array of elements', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -42,7 +41,7 @@ describe('useClickOutsideEvent', () => {
 
   it('the elements array flattens nested arrays one level deep', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -76,7 +75,7 @@ describe('useClickOutsideEvent', () => {
 
   it('it can set a boundary to scope outside click events', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)

package/src/core/hooks/useClickOutsideEvent.ts

@@ -3,19 +3,13 @@ import {useEffectEvent} from 'use-effect-event'
 
 import {EMPTY_ARRAY} from '../constants'
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-/**
- * @public
- */
+/** @public */
 export function useClickOutsideEvent(
   listener: ClickOutsideEventListener | false | undefined,
   elementsArg: () => ClickOutsideEventElements = () => EMPTY_ARRAY,

package/src/core/hooks/useDelayed.test.ts

@@ -1,6 +1,5 @@
-/** @jest-environment jsdom */
-
 import {act, renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useDelayedState} from './useDelayedState'
 
@@ -16,7 +15,7 @@ describe('useDelayedState', () => {
   })
 
   it('should update state after delay if delay is provided', async () => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
     const {result} = renderHook(() => useDelayedState(false))
     const [, setState] = result.current
 
@@ -25,12 +24,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
     expect(result.current[0]).toBe(false)
 
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
 
     expect(result.current[0]).toBe(true)
@@ -56,12 +55,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
 
-    jest.advanceTimersByTime(500)
+    vi.advanceTimersByTime(500)
 
     act(() => {
       setState(false)
     })
-    jest.advanceTimersByTime(600)
+    vi.advanceTimersByTime(600)
     // Even after 1.1 seconds, the state should continue being false, because it was cancelled by a next setState call
     expect(result.current[0]).toBe(false)
   })

package/src/core/hooks/useDelayedState.ts

@@ -1,4 +1,4 @@
-import {SetStateAction, useCallback, useRef, useState} from 'react'
+import {type SetStateAction, useCallback, useRef, useState} from 'react'
 
 /**
  * @beta

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -11,7 +11,7 @@ export default function ExampleStory() {
   return (
     <Box padding={[3, 4, 5]}>
       <Container width={1}>
-        <Stack space={4}>
+        <Stack gap={4}>
           <Grid columns={[1, 2, 3]}>
             <Card ref={setElement} tone="transparent">
               <Text>rect</Text>

package/src/core/hooks/useElementSize.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
 
-import {_elementSizeObserver, ElementSize} from '../observers/elementSizeObserver'
+import {_elementSizeObserver, type ElementSize} from '../observers/elementSizeObserver'
 
 /**
  * Subscribe to the size of a DOM element.

package/src/core/hooks/useForwardedRef.ts

@@ -1,4 +1,4 @@
-import {ForwardedRef, MutableRefObject, useImperativeHandle, useRef} from 'react'
+import {type ForwardedRef, type MutableRefObject, useImperativeHandle, useRef} from 'react'
 
 /**
  * @beta

package/src/core/hooks/useMatchMedia.ts

@@ -1,4 +1,4 @@
-import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
+import {useCallback, useDebugValue, useSyncExternalStore} from 'react'
 
 /**
  * Efficiently subscribes to `window.matchMedia` queries
@@ -11,36 +11,18 @@ export function useMatchMedia(
   mediaQueryString: `(${string})`,
   getServerSnapshot?: () => boolean,
 ): boolean {
-  const {subscribe, getSnapshot} = useMemo(() => {
-    /**
-     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
-     * we don't want to eagerly instantiate it to ensure it's only created when actually used
-     */
-    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-    const getMatchMedia = (): MediaQueryList => {
-      if (!MEDIA_QUERY_CACHE) {
-        // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
-        // the `window` global is available and we're in a browser environment
-        MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)
-      }
-
-      return MEDIA_QUERY_CACHE
-    }
-
-    return {
-      subscribe: (onStoreChange: () => void): (() => void) => {
-        const matchMedia = getMatchMedia()
-
-        matchMedia.addEventListener('change', onStoreChange)
-
-        return () => matchMedia.removeEventListener('change', onStoreChange)
-      },
-      getSnapshot: () => getMatchMedia().matches,
-    }
-  }, [mediaQueryString])
-
   useDebugValue(mediaQueryString)
 
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+  return useSyncExternalStore(
+    useCallback(
+      (onStoreChange) => {
+        const media = window.matchMedia(mediaQueryString)
+        media.addEventListener('change', onStoreChange)
+        return () => media.removeEventListener('change', onStoreChange)
+      },
+      [mediaQueryString],
+    ),
+    () => window.matchMedia(mediaQueryString).matches,
+    getServerSnapshot,
+  )
 }

package/src/core/hooks/useMediaIndex/__workshop__/test.tsx

@@ -5,7 +5,7 @@ export default function TestStory() {
 
   return (
     <Card padding={[3, 4, 5]}>
-      <Stack space={2}>
+      <Stack gap={2}>
         <Text weight="medium">The current media index is {mediaIndex}.</Text>
         <Text muted>Try resizing the browser.</Text>
       </Stack>

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,13 +1,10 @@
 /** @jest-environment node */
 
-import {buildTheme} from '@sanity/ui/theme'
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
-import {ThemeProvider} from '../../_compat'
 import {useMediaIndex} from './useMediaIndex'
 
-const theme = buildTheme()
-
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -16,21 +13,9 @@ function Log() {
 
 describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
-    expect(
-      renderToStaticMarkup(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toBe('mediaIndex: 0')
+    expect(renderToStaticMarkup(<Log />)).toBe('mediaIndex: 0')
   })
   it(`SSR to markup for hydration doesn't throw`, () => {
-    expect(
-      renderToString(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
+    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
   })
 })

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,13 +1,14 @@
+import {type Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
 import {useMemo, useSyncExternalStore} from 'react'
 
-import {useTheme_v2} from '../../_compat'
+const media = Object.values(BREAKPOINTS)
 
 /**
  * @internal
  */
 export interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 type MediaQueryMinWidth = `(min-width: ${number}px)`
@@ -17,17 +18,17 @@ type MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQ
 
 function _getMediaQuery(media: number[], index: number): MediaQuery {
   if (index === 0) {
-    return `screen and (max-width: ${media[index] - 1}px)`
+    return `screen and (max-width: ${media[index + 1] - 1}px)`
   }
 
-  if (index === media.length) {
-    return `screen and (min-width: ${media[index - 1]}px)`
+  if (index === media.length - 1) {
+    return `screen and (min-width: ${media[index]}px)`
   }
 
-  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+  return `screen and (min-width: ${media[index]}px) and (max-width: ${media[index + 1] - 1}px)`
 }
 
-function _createMediaStore(media: number[]): _MediaStore {
+function _createMediaStore(): _MediaStore {
   const mediaLen = media.length
   let sizes: {mq: MediaQueryList; index: number}[]
 
@@ -50,7 +51,7 @@ function _createMediaStore(media: number[]): _MediaStore {
 
   const getSnapshot = () => {
     for (const {index, mq} of getSizes()) {
-      if (mq.matches) return index
+      if (mq.matches) return index as Breakpoint
     }
 
     return 0
@@ -86,7 +87,7 @@ function _createMediaStore(media: number[]): _MediaStore {
  *
  * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
  */
-function getServerSnapshot() {
+function getServerSnapshot(): Breakpoint {
   return 0
 }
 
@@ -94,9 +95,8 @@ function getServerSnapshot() {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useMediaIndex(): number {
-  const {media} = useTheme_v2()
-  const store = useMemo(() => _createMediaStore(media), [media])
+export function useMediaIndex(): Breakpoint {
+  const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/core/hooks/usePrefersDark.hydration.test.tsx

@@ -1,10 +1,10 @@
-/** @jest-environment jsdom */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 
@@ -20,8 +20,8 @@ describe('usePrefersDark SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +31,7 @@ describe('usePrefersDark SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

package/src/core/hooks/usePrefersDark.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,10 +1,10 @@
-/** @jest-environment jsdom */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 
@@ -20,8 +20,8 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +31,7 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

package/src/core/hooks/usePrefersReducedMotion.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 

package/src/core/middleware/origin.ts

@@ -1,4 +1,4 @@
-import {Middleware} from '@floating-ui/react-dom'
+import type {Middleware} from '@floating-ui/react-dom'
 
 /**
  * Custom floating-ui middleware which calculates transform-origin X + Y offsets

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,31 +1,44 @@
-import {_selectable, composeClassNames, SelectableStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {_composeClassNames, _selectable, type SelectableStyleProps} from '@sanity/ui/css'
 
-import {Props, SelectableTone} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {ComponentType, Props, SelectableTone} from '../../types'
+import {Box, type BoxOwnProps} from '../box'
 
 /** @internal */
-export interface SelectableProps extends BoxProps, SelectableStyleProps {
-  disabled?: boolean
-  href?: string
-  tone?: SelectableTone
-  type?: 'button'
-}
+export const DEFAULT_SELECTABLE_ELEMENT = 'button'
+
+/** @internal */
+export type SelectableOwnProps = BoxOwnProps &
+  SelectableStyleProps & {
+    disabled?: boolean
+    href?: string
+    tone?: SelectableTone
+    type?: 'button'
+  }
+
+/** @internal */
+export type SelectableElementType = 'button' | 'a' | ComponentType
+
+/** @internal */
+export type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<
+  SelectableOwnProps,
+  E
+>
 
 /** @internal */
-export const Selectable = forwardRef(function Selectable(
-  props: Props<SelectableProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
+  props: SelectableProps<E>,
 ) {
-  const {className, radius, tone, ...restProps} = props
+  const {
+    as = DEFAULT_SELECTABLE_ELEMENT,
+    className,
+    radius,
+    tone,
+    ...rest
+  } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
 
   return (
-    <Box
-      {...restProps}
-      className={composeClassNames(className, _selectable({radius, tone}))}
-      ref={ref}
-    />
+    <Box {...rest} as={as} className={_composeClassNames(className, _selectable({radius, tone}))} />
   )
-})
+}
 
-Selectable.displayName = 'ForwardRef(Selectable)'
+Selectable.displayName = 'Selectable'

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,10 +1,10 @@
 import {Avatar, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,10 +1,10 @@
 import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -10,11 +10,11 @@ import {Avatar} from '../avatar'
 import {AvatarStack} from '../avatarStack'
 
 export default function WithinButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
 
   return (
     <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
+      <Stack gap={1} paddingX={4} paddingY={[5, 6, 7]}>
         <Button disabled={disabled} padding={1}>
           <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>