@sanity/ui 4.0.0-static.23 → 4.0.0-static.25

package/exports/css/index.css

@@ -0,0 +1 @@
+/* this file is used to support importing `@sanity/ui/css/index.css` in dev mode */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.23",
+  "version": "4.0.0-static.25",
   "keywords": [
     "react",
     "ui",
@@ -105,9 +105,9 @@
       },
       "main",
       {
-        "name": "static",
+        "name": "v4",
         "channel": "static",
-        "prerelease": true
+        "prerelease": "static"
       }
     ],
     "extends": "@sanity/semantic-release-preset"
@@ -148,7 +148,7 @@
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^5.0.1",
     "@vitest/browser": "^3.2.4",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "browserslist-config-baseline": "^0.5.0",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",

package/src/core/Root.tsx

@@ -1,7 +1,7 @@
 import {box, root, type RootStyleProps} from '@sanity/ui/css'
 import {useCallback, useImperativeHandle, useRef, useState} from 'react'
 
-import {Box, type BoxOwnProps} from './primitives/box/box'
+import {Box, type BoxOwnProps} from './primitives/box/Box'
 import {RootProvider} from './RootProvider'
 import type {Props} from './types'
 

package/src/core/RootProvider.tsx

@@ -1,11 +1,11 @@
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import type {ReactNode} from 'react'
 
-import {ToastProvider} from './components/toast/toastProvider'
-import {CardProvider} from './primitives/card/cardProvider'
-import {LayerProvider} from './primitives/layer/layerProvider'
-import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
-import {PortalProvider} from './utils/portal/portalProvider'
+import {ToastProvider} from './components/toast/ToastProvider'
+import {CardProvider} from './primitives/card/CardProvider'
+import {LayerProvider} from './primitives/layer/LayerProvider'
+import {BoundaryElementProvider} from './utils/boundaryElement/BoundaryElementProvider'
+import {PortalProvider} from './utils/portal/PortalProvider'
 
 /** @public */
 export interface RootProviderProps {

package/src/core/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'boundary',
       title: 'Boundary',
-      component: lazy(() => import('./boundary')),
+      component: lazy(() => import('./Boundary')),
     },
   ],
 }

package/src/core/components/autocomplete/{autocomplete.tsx → Autocomplete.tsx}

@@ -22,16 +22,16 @@ import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_raf} from '../../helpers/animation'
 import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {Box, type BoxOwnProps} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
-import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/textInput'
+import {Box, type BoxOwnProps} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Popover, type PopoverProps} from '../../primitives/popover/Popover'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {AnimatedSpinnerIcon} from '../../primitives/spinner/AnimatedSpinnerIcon'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
+import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/TextInput'
 import type {ComponentType, Props} from '../../types'
-import {AutocompleteOption} from './autocompleteOption'
+import {AutocompleteOption} from './AutocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
   AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,

package/src/core/components/autocomplete/__workshop__/index.ts

@@ -8,32 +8,32 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
     {
       name: 'custom',
       title: 'Custom',
-      component: lazy(() => import('./custom')),
+      component: lazy(() => import('./Custom')),
     },
     {
       name: 'async',
       title: 'Async',
-      component: lazy(() => import('./async')),
+      component: lazy(() => import('./Async')),
     },
     {
       name: 'constrained-height',
       title: 'Constrained height',
-      component: lazy(() => import('./constrainedHeight')),
+      component: lazy(() => import('./ConstrainedHeight')),
     },
     {
       name: 'focus-and-blur',
       title: 'Focus and blur',
-      component: lazy(() => import('./focusAndBlur')),
+      component: lazy(() => import('./FocusAndBlur')),
     },
     {
       name: 'fullscreen',
       title: 'Fullscreen',
-      component: lazy(() => import('./fullscreen')),
+      component: lazy(() => import('./Fullscreen')),
     },
   ],
 }

package/src/core/components/autocomplete/types.ts

@@ -1,4 +1,4 @@
-import type {ButtonProps} from '../../primitives/button/button'
+import type {ButtonProps} from '../../primitives/button/Button'
 
 /** @public */
 export type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>

package/src/core/components/breadcrumbs/{breadcrumbs.tsx → Breadcrumbs.tsx}

@@ -11,12 +11,12 @@ import {
 } from 'react'
 
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
-import {Box} from '../../primitives/box/box'
-import {Button, type ButtonProps} from '../../primitives/button/button'
-import {Flex} from '../../primitives/flex/flex'
-import {Popover} from '../../primitives/popover/popover'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Button, type ButtonProps} from '../../primitives/button/Button'
+import {Flex} from '../../primitives/flex/Flex'
+import {Popover} from '../../primitives/popover/Popover'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
 
 /** @beta */

package/src/core/components/breadcrumbs/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
   ],
 }

package/src/core/components/dialog/{dialog.tsx → Dialog.tsx}

@@ -12,13 +12,13 @@ import {isHTMLElement} from '../../helpers/element'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {Container} from '../../primitives/container/container'
-import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/layer'
+import {Container} from '../../primitives/container/Container'
+import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/Layer'
 import type {ComponentType, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
-import {Portal} from '../../utils/portal/portal'
+import {Portal} from '../../utils/portal/Portal'
 import {usePortal} from '../../utils/portal/usePortal'
-import {DialogCard} from './dialogCard'
+import {DialogCard} from './DialogCard'
 import {isTargetWithinScope} from './isTargetWithinScope'
 import type {DialogPosition} from './types'
 import {useDialog} from './useDialog'

package/src/core/components/dialog/{dialogCard.tsx → DialogCard.tsx}

@@ -21,12 +21,12 @@ import {
 import {focusFirstDescendant} from '../../helpers/focus'
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
 import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
-import {Box} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
 import {useLayer} from '../../primitives/layer/useLayer'
-import {Text} from '../../primitives/text/text'
+import {Text} from '../../primitives/text/Text'
 import type {Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {usePortal} from '../../utils/portal/usePortal'

package/src/core/components/dialog/{dialogProvider.tsx → DialogProvider.tsx}

@@ -1,7 +1,7 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 import {type ReactNode, useMemo} from 'react'
 
-import {DialogContext, type DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './DialogContext'
 import type {DialogPosition} from './types'
 
 /**

package/src/core/components/dialog/__workshop__/{panes.tsx → Panes.tsx}

@@ -79,6 +79,10 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
                     <MenuItem text="Item 3" />
                   </Menu>
                 }
+                popover={{
+                  modal: true,
+                  portal: true,
+                }}
               />
             </Box>
           </Dialog>

package/src/core/components/dialog/__workshop__/index.ts

@@ -5,16 +5,16 @@ const scope: WorkshopScope = {
   name: 'components/dialog',
   title: 'Dialog',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
-    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
-    {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
-    {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
-    {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
-    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
-    {name: 'panes', title: 'Panes', component: lazy(() => import('./panes'))},
-    {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
-    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'nested', title: 'Nested', component: lazy(() => import('./Nested'))},
+    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./OnScroll'))},
+    {name: 'layering', title: 'Layering', component: lazy(() => import('./Layering'))},
+    {name: 'position', title: 'Position', component: lazy(() => import('./Position'))},
+    {name: 'provider', title: 'Provider', component: lazy(() => import('./Provider'))},
+    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./AutoFocus'))},
+    {name: 'panes', title: 'Panes', component: lazy(() => import('./Panes'))},
+    {name: 'activate', title: 'Activate', component: lazy(() => import('./Activate'))},
+    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./Wrapped'))},
   ],
 }
 

package/src/core/components/dialog/useDialog.ts

@@ -1,11 +1,11 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {DialogContext, type DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './DialogContext'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export function useDialog(): DialogContextValue {
-  return useContext(DialogContext)
+  return use(DialogContext)
 }

package/src/core/components/hotkeys/{hotkeys.tsx → Hotkeys.tsx}

@@ -1,8 +1,8 @@
 import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import {Box} from '../../primitives/box/box'
-import {KBD} from '../../primitives/kbd/kbd'
+import {Box} from '../../primitives/box/Box'
+import {KBD} from '../../primitives/kbd/Kbd'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/hotkeys/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/components/menu/{menu.test.tsx → Menu.test.tsx}

@@ -5,7 +5,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 import {useMenu} from './useMenu'
 
 describe('components/menu', () => {

package/src/core/components/menu/{menu.tsx → Menu.tsx}

@@ -4,11 +4,11 @@ import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'reac
 
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
 import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
-import {Box} from '../../primitives/box/box'
+import {Box} from '../../primitives/box/Box'
 import {useLayer} from '../../primitives/layer/useLayer'
-import {Stack} from '../../primitives/stack/stack'
+import {Stack} from '../../primitives/stack/Stack'
 import type {ComponentType, Props} from '../../types'
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 import {useMenuController} from './useMenuController'
 
 /** @public */
@@ -139,10 +139,6 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
       onItemMouseEnter: handleItemMouseEnter,
       onItemMouseLeave: handleItemMouseLeave,
       registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
     }),
     [
       activeElement,

package/src/core/components/menu/{menuButton.tsx → MenuButton.tsx}

@@ -13,10 +13,10 @@ import {
   useState,
 } from 'react'
 
-import type {ButtonProps} from '../../primitives/button/button'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
+import type {ButtonProps} from '../../primitives/button/Button'
+import {Popover, type PopoverProps} from '../../primitives/popover/Popover'
 import type {Props} from '../../types'
-import type {MenuProps} from './menu'
+import type {MenuProps} from './Menu'
 
 /** @public */
 export type MenuButtonProps = {

package/src/core/components/menu/{menuGroup.tsx → MenuGroup.tsx}

@@ -13,13 +13,13 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box} from '../../primitives/box/box'
-import {Flex} from '../../primitives/flex/flex'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Flex} from '../../primitives/flex/Flex'
+import {Popover, type PopoverProps} from '../../primitives/popover/Popover'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
+import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './Menu'
 import {useMenu} from './useMenu'
 
 /** @public */

package/src/core/components/menu/{menuItem.tsx → MenuItem.tsx}

@@ -19,12 +19,12 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box} from '../../primitives/box/box'
-import {Flex} from '../../primitives/flex/flex'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Flex} from '../../primitives/flex/Flex'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {Hotkeys} from '../hotkeys/hotkeys'
+import {Hotkeys} from '../hotkeys/Hotkeys'
 import {useMenu} from './useMenu'
 
 /** @public */
@@ -133,7 +133,6 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       {...rest}
       as={as}
       data-pressed={pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       radius={radius}
       disabled={disabled}
@@ -142,6 +141,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
       role={role}
+      selected={active}
       tabIndex={-1}
       tone={tone}
       type={as === 'button' ? 'button' : undefined}

package/src/core/components/menu/__workshop__/index.ts

@@ -8,82 +8,82 @@ const scope: WorkshopScope = {
     {
       name: 'menu-button',
       title: 'MenuButton',
-      component: lazy(() => import('./menuButton')),
+      component: lazy(() => import('./MenuButton')),
     },
     {
       name: 'nested-menu-items',
       title: 'Nested MenuItems',
-      component: lazy(() => import('./nestedMenu')),
+      component: lazy(() => import('./NestedMenu')),
     },
     {
       name: 'custom-menu-item',
       title: 'Custom MenuItem',
-      component: lazy(() => import('./customMenuItem')),
+      component: lazy(() => import('./CustomMenuItem')),
     },
     {
       name: 'groups',
       title: 'Groups',
-      component: lazy(() => import('./groups')),
+      component: lazy(() => import('./Groups')),
     },
     {
       name: 'menu-group-right',
       title: 'Menu group (right)',
-      component: lazy(() => import('./menuGroupRight')),
+      component: lazy(() => import('./MenuGroupRight')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
     {
       name: 'selected-item',
       title: 'Selected item',
-      component: lazy(() => import('./selectedItem')),
+      component: lazy(() => import('./SelectedItem')),
     },
     {
       name: 'closable',
       title: 'Closeable',
-      component: lazy(() => import('./closableMenuButton')),
+      component: lazy(() => import('./ClosableMenuButton')),
     },
     {
       name: 'without-arrow',
       title: 'Without arrow',
-      component: lazy(() => import('./withoutArrow')),
+      component: lazy(() => import('./WithoutArrow')),
     },
     {
       name: 'constrained-in-boundary',
       title: 'Constrained in boundary',
-      component: lazy(() => import('./constrainedInBoundary')),
+      component: lazy(() => import('./ConstrainedInBoundary')),
     },
     {
       name: 'as-component',
       title: 'As component',
-      component: lazy(() => import('./asComponent')),
+      component: lazy(() => import('./AsComponent')),
     },
     {
       name: 'disable-focus-on-close',
       title: 'Disable focus on close',
-      component: lazy(() => import('./disableFocusOnClose')),
+      component: lazy(() => import('./DisableFocusOnClose')),
     },
     {
       name: 'menu-button-with-on-close',
       title: 'MenuButton with on close',
-      component: lazy(() => import('./onCloseMenuButton')),
+      component: lazy(() => import('./OnCloseMenuButton')),
     },
     {
       name: 'shouldFocus',
       title: 'Menu with shouldFocus',
-      component: lazy(() => import('./shouldFocus')),
+      component: lazy(() => import('./ShouldFocus')),
     },
     {
       name: 'avatar',
       title: 'Avatar menu',
-      component: lazy(() => import('./avatarMenu')),
+      component: lazy(() => import('./AvatarMenu')),
     },
     {
       name: 'custom-selected-state',
       title: 'Custom selected state',
-      component: lazy(() => import('./customSelectedState')),
+      component: lazy(() => import('./CustomSelectedState')),
     },
   ],
 }

package/src/core/components/menu/useMenu.ts

@@ -1,10 +1,10 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 
 export function useMenu(): MenuContextValue {
-  const value = useContext(MenuContext)
+  const value = use(MenuContext)
 
   if (!value) {
     throw new Error('useMenu(): missing context value')

package/src/core/components/tab/{tab.tsx → Tab.tsx}

@@ -10,7 +10,7 @@ import {
   useRef,
 } from 'react'
 
-import {Button} from '../../primitives/button/button'
+import {Button} from '../../primitives/button/Button'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/tab/{tabList.tsx → TabList.tsx}

@@ -7,9 +7,9 @@ import {
   useState,
 } from 'react'
 
-import {Flex, type FlexOwnProps} from '../../primitives/flex/flex'
+import {Flex, type FlexOwnProps} from '../../primitives/flex/Flex'
 import type {ComponentType, Props} from '../../types'
-import type {TabProps} from './tab'
+import type {TabProps} from './Tab'
 
 /** @public */
 export const DEFAULT_TAB_LIST_ELEMENT = 'div'

package/src/core/components/tab/{tabPanel.tsx → TabPanel.tsx}

@@ -1,4 +1,4 @@
-import {Box, type BoxOwnProps} from '../../primitives/box/box'
+import {Box, type BoxOwnProps} from '../../primitives/box/Box'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/tab/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
   ],
 }

package/src/core/components/toast/{toast.test.tsx → Toast.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {ToastContext} from './toastContext'
+import {ToastContext} from './ToastContext'
 import type {ToastContextValue} from './types'
 import {useToast} from './useToast'
 

package/src/core/components/toast/{toast.tsx → Toast.tsx}

@@ -4,12 +4,12 @@ import {motion, type Variant, type Variants} from 'framer-motion'
 import {type ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Card} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
 
 /** @internal */

package/src/core/components/toast/{toastLayer.tsx → ToastLayer.tsx}

@@ -1,6 +1,6 @@
 import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
-import {Grid} from '../../primitives/grid/grid'
+import {Grid} from '../../primitives/grid/Grid'
 import {useLayer} from '../../primitives/layer/useLayer'
 import type {ComponentType, Props} from '../../types'
 

package/src/core/components/toast/{toastProvider.tsx → ToastProvider.tsx}

@@ -3,10 +3,10 @@ import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../primitives/layer/layerProvider'
-import {Toast} from './toast'
-import {ToastContext} from './toastContext'
-import {ToastLayer, type ToastLayerProps} from './toastLayer'
+import {LayerProvider} from '../../primitives/layer/LayerProvider'
+import {Toast} from './Toast'
+import {ToastContext} from './ToastContext'
+import {ToastLayer, type ToastLayerProps} from './ToastLayer'
 import {generateToastId} from './toastState'
 import type {ToastContextValue, ToastParams} from './types'