@sanity/ui 2.15.7 → 2.15.9

package/exports/_visual-editing.ts

@@ -2,30 +2,30 @@
  * These are internal exports for usage in `@sanity/visual-editing` and `@sanity/insert-menu`,
  * which are used in environments where the regular `@sanity/ui` export is far too heavy due to imports from refractor and more.
  */
-export {Box} from '../src/core/primitives/box/box'
-export {Button} from '../src/core/primitives/button/button'
-export {Card} from '../src/core/primitives/card/card'
-export {Flex} from '../src/core/primitives/flex/flex'
-export {Grid} from '../src/core/primitives/grid/grid'
+export {studioTheme} from '../src/core/_compat'
 export {Hotkeys} from '../src/core/components/hotkeys/hotkeys'
-export {isHTMLAnchorElement, isHTMLElement} from '../src/core/helpers/element'
-export {LayerProvider} from '../src/core/utils/layer/layerProvider'
 export {Menu} from '../src/core/components/menu/menu'
 export {MenuDivider} from '../src/core/components/menu/menuDivider'
 export {MenuGroup} from '../src/core/components/menu/menuGroup'
 export {MenuItem, type MenuItemProps} from '../src/core/components/menu/menuItem'
+export {Tab} from '../src/core/components/tab/tab'
+export {TabList} from '../src/core/components/tab/tabList'
+export {isHTMLAnchorElement, isHTMLElement} from '../src/core/helpers/element'
+export {usePrefersDark} from '../src/core/hooks/usePrefersDark'
+export {Box} from '../src/core/primitives/box/box'
+export {Button} from '../src/core/primitives/button/button'
+export {Card} from '../src/core/primitives/card/card'
+export {Flex} from '../src/core/primitives/flex/flex'
+export {Grid} from '../src/core/primitives/grid/grid'
 export {Popover} from '../src/core/primitives/popover/popover'
-export {Portal} from '../src/core/utils/portal/portal'
-export {PortalProvider} from '../src/core/utils/portal/portalProvider'
 export {Spinner} from '../src/core/primitives/spinner/spinner'
 export {Stack} from '../src/core/primitives/stack/stack'
-export {studioTheme} from '../src/core/_compat'
-export {Tab} from '../src/core/components/tab/tab'
-export {TabList} from '../src/core/components/tab/tabList'
 export {Text} from '../src/core/primitives/text/text'
 export {TextInput} from '../src/core/primitives/textInput/textInput'
-export {ThemeProvider} from '../src/core/theme/themeProvider'
 export {Tooltip} from '../src/core/primitives/tooltip/tooltip'
-export type {PopoverMargins} from '../src/core/types/popover'
-export {usePrefersDark} from '../src/core/hooks/usePrefersDark'
+export {ThemeProvider} from '../src/core/theme/themeProvider'
 export {useTheme_v2} from '../src/core/theme/useTheme'
+export type {PopoverMargins} from '../src/core/types/popover'
+export {LayerProvider} from '../src/core/utils/layer/layerProvider'
+export {Portal} from '../src/core/utils/portal/portal'
+export {PortalProvider} from '../src/core/utils/portal/portalProvider'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.15.7",
+  "version": "2.15.9",
   "keywords": [
     "sanity",
     "ui",
@@ -70,7 +70,7 @@
     "dev": "run-p storybook:dev workshop:dev",
     "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "lint": "eslint .",
     "pkg:build": "pkg build --strict",
     "pkg:check": "pkg --strict",
     "prepare": "husky install",
@@ -120,7 +120,7 @@
     "@sanity/icons": "^3.7.0",
     "csstype": "^3.1.3",
     "framer-motion": "^12.5.0",
-    "react-compiler-runtime": "19.0.0-beta-3229e95-20250315",
+    "react-compiler-runtime": "19.0.0-beta-e993439-20250328",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -131,24 +131,25 @@
     "@babel/preset-typescript": "^7.26.0",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@sanity/pkg-utils": "^7.1.0",
+    "@eslint/js": "^9.23.0",
+    "@sanity/pkg-utils": "^7.1.1",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.31",
-    "@storybook/addon-a11y": "^8.6.4",
-    "@storybook/addon-docs": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
-    "@storybook/addon-mdx-gfm": "^8.6.4",
-    "@storybook/addon-storysource": "^8.6.4",
-    "@storybook/addon-themes": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/manager-api": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/test": "^8.6.4",
-    "@storybook/theming": "^8.6.4",
+    "@sanity/ui-workshop": "^2.0.33",
+    "@storybook/addon-a11y": "^8.6.8",
+    "@storybook/addon-docs": "^8.6.8",
+    "@storybook/addon-essentials": "^8.6.8",
+    "@storybook/addon-interactions": "^8.6.8",
+    "@storybook/addon-links": "^8.6.8",
+    "@storybook/addon-mdx-gfm": "^8.6.8",
+    "@storybook/addon-storysource": "^8.6.8",
+    "@storybook/addon-themes": "^8.6.8",
+    "@storybook/blocks": "^8.6.8",
+    "@storybook/manager-api": "^8.6.8",
+    "@storybook/react": "^8.6.8",
+    "@storybook/react-vite": "^8.6.8",
+    "@storybook/test": "^8.6.8",
+    "@storybook/theming": "^8.6.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -156,28 +157,30 @@
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "babel-plugin-react-compiler": "19.0.0-beta-3229e95-20250315",
+    "babel-plugin-react-compiler": "19.0.0-beta-e993439-20250328",
     "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",
+    "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-3229e95-20250315",
+    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250328",
     "eslint-plugin-react-hooks": "experimental",
-    "eslint-plugin-storybook": "^0.11.4",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
@@ -193,12 +196,13 @@
     "refractor": "^4.9.0",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.3",
-    "start-server-and-test": "^2.0.10",
-    "storybook": "^8.6.4",
-    "styled-components": "^6.1.15",
+    "start-server-and-test": "^2.0.11",
+    "storybook": "^8.6.8",
+    "styled-components": "^6.1.16",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.2",
-    "vite": "^5.4.14",
+    "typescript-eslint": "^8.28.0",
+    "vite": "^5.4.15",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {

package/src/core/_compat.ts

@@ -2,22 +2,24 @@
 
 import {
   type BaseTheme as _BaseTheme,
-  type ThemeBoxShadow,
+  buildTheme,
   type HSL as _HSL,
   type PartialThemeColorBuilderOpts,
   type RGB as _RGB,
   type RootTheme as _RootTheme,
-  type ThemeStyles,
   type Theme as _Theme,
   type ThemeAvatar,
+  type ThemeBoxShadow,
   type ThemeColor,
   type ThemeColorBase,
   type ThemeColorBuilderOpts,
   type ThemeColorButton,
   type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
   type ThemeColorButtonStates,
   type ThemeColorButtonTones,
   type ThemeColorCard,
+  type ThemeColorCardState,
   type ThemeColorGenericState,
   type ThemeColorInput,
   type ThemeColorInputState,
@@ -29,6 +31,7 @@ import {
   type ThemeColorSchemeKey as _ThemeColorSchemeKey,
   type ThemeColorSchemes,
   type ThemeColorSelectable,
+  type ThemeColorSelectableState,
   type ThemeColorSelectableStates,
   type ThemeColorSolid,
   type ThemeColorSolidTone,
@@ -38,17 +41,14 @@ import {
   type ThemeColorToneKey,
   type ThemeFont as _ThemeFont,
   type ThemeFontKey as _ThemeFontKey,
+  type ThemeFonts as _ThemeFonts,
   type ThemeFontSize as _ThemeFontSize,
   type ThemeFontWeight as _ThemeFontWeight,
   type ThemeFontWeightKey as _ThemeFontWeightKey,
-  type ThemeFonts as _ThemeFonts,
   type ThemeInput,
   type ThemeLayer as _ThemeLayer,
   type ThemeShadow as _ThemeShadow,
-  type ThemeColorButtonState,
-  type ThemeColorCardState,
-  type ThemeColorSelectableState,
-  buildTheme,
+  type ThemeStyles,
 } from '@sanity/ui/theme'
 
 /**
@@ -166,9 +166,11 @@ export {
   type ThemeColorBase,
   type ThemeColorBuilderOpts,
   type ThemeColorButton,
+  type ThemeColorButtonState,
   type ThemeColorButtonStates,
   type ThemeColorButtonTones,
   type ThemeColorCard,
+  type ThemeColorCardState,
   type ThemeColorGenericState,
   type ThemeColorInput,
   type ThemeColorInputState,
@@ -179,6 +181,7 @@ export {
   type ThemeColorScheme,
   type ThemeColorSchemes,
   type ThemeColorSelectable,
+  type ThemeColorSelectableState,
   type ThemeColorSelectableStates,
   type ThemeColorSolid,
   type ThemeColorSolidTone,
@@ -186,9 +189,6 @@ export {
   type ThemeColorSpotKey,
   type ThemeColorToneKey,
   type ThemeInput,
-  type ThemeColorButtonState,
-  type ThemeColorCardState,
-  type ThemeColorSelectableState,
 }
 
 import {
@@ -197,9 +197,9 @@ import {
   hslToRgb as _hslToRgb,
   multiply as _multiply,
   parseColor as _parseColor,
+  rgba as _rgba,
   rgbToHex as _rgbToHex,
   rgbToHsl as _rgbToHsl,
-  rgba as _rgba,
   screen as _screen,
 } from '@sanity/ui/theme'
 

package/src/core/components/autocomplete/__mocks__/apiStore.ts

@@ -1,4 +1,4 @@
-import countries from '../__fixtures__/countries'
+import countries from './countries'
 
 export const countriesStore = {
   search(

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

@@ -11,6 +11,7 @@ import {
   Text,
 } from '@sanity/ui'
 import {useCallback, useEffect, useRef, useState} from 'react'
+
 import {countriesStore} from '../__mocks__/apiStore'
 
 export default function AsyncStory() {

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

@@ -9,8 +9,9 @@ import {
   Text,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
+
 import {Popover} from '../../../primitives'
-import countries from '../__fixtures__/countries'
+import countries from '../__mocks__/countries'
 import {AutocompleteProps} from '../autocomplete'
 import {ExampleOption} from './types'
 

package/src/core/components/autocomplete/__workshop__/custom.tsx

@@ -1,12 +1,13 @@
 import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
+
 import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_SIZE_OPTIONS,
 } from '../../../__workshop__/constants'
-import countries from '../__fixtures__/countries'
+import countries from '../__mocks__/countries'
 import {ExampleOption} from './types'
 
 export default function CustomStory() {

package/src/core/components/autocomplete/__workshop__/example.tsx

@@ -3,13 +3,14 @@ import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useMemo, useState} from 'react'
+
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_SIZE_OPTIONS,
 } from '../../../__workshop__/constants'
-import countries from '../__fixtures__/countries'
+import countries from '../__mocks__/countries'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',

package/src/core/components/autocomplete/__workshop__/fullscreen.tsx

@@ -19,6 +19,7 @@ import {
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
 import {countriesStore} from '../__mocks__/apiStore'
 
 export default function Fullscreen() {

package/src/core/components/autocomplete/autocomplete.styles.tsx

@@ -1,5 +1,6 @@
 import {SpinnerIcon} from '@sanity/icons'
-import {styled, keyframes} from 'styled-components'
+import {keyframes, styled} from 'styled-components'
+
 import {Box} from '../../primitives'
 
 /**

package/src/core/components/autocomplete/autocomplete.tsx

@@ -1,15 +1,15 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {
   ChangeEvent,
+  cloneElement,
   ElementType,
   FocusEvent,
+  forwardRef,
   HTMLProps,
   KeyboardEvent,
   MouseEvent,
   ReactNode,
   Ref,
-  cloneElement,
-  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -17,6 +17,7 @@ import {
   useReducer,
   useRef,
 } from 'react'
+
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
 import {useArrayProp} from '../../hooks'

package/src/core/components/autocomplete/autocompleteOption.tsx

@@ -1,4 +1,5 @@
 import {useCallback} from 'react'
+
 import {_isEnterToClickElement} from '../../helpers'
 
 export interface AutocompleteOptionProps {

package/src/core/components/breadcrumbs/__workshop__/example.tsx

@@ -28,24 +28,31 @@ export default function Example() {
         space={2}
       >
         <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Root</a>
         </Text>
         <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Category A</a>
         </Text>
         <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Category B</a>
         </Text>
         <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Category C</a>
         </Text>
         <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Category D</a>
         </Text>
         <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Category E</a>
         </Text>
         <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a href="#">Category F</a>
         </Text>
         <Text size={1}>Item</Text>

package/src/core/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,4 +1,5 @@
 import {styled} from 'styled-components'
+
 import {Button} from '../../primitives'
 
 export const StyledBreadcrumbs = styled.ol`

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from 'react'
+
 import {useArrayProp, useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'

package/src/core/components/dialog/__workshop__/activate.tsx

@@ -1,5 +1,6 @@
 import {useState} from 'react'
-import {Stack, Flex, Button, Text} from '../../../primitives'
+
+import {Button, Flex, Stack, Text} from '../../../primitives'
 import {Layer, LayerProvider} from '../../../utils'
 import {Menu, MenuButton, MenuItem} from '../../menu'
 import {Dialog} from '../dialog'

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -1,5 +1,6 @@
 import {useCallback, useState} from 'react'
 import {styled} from 'styled-components'
+
 import {Box, Button, Card, Flex} from '../../../primitives'
 import {BoundaryElementProvider, PortalProvider} from '../../../utils'
 import {Menu, MenuButton, MenuItem} from '../../menu'

package/src/core/components/dialog/__workshop__/position.tsx

@@ -1,6 +1,7 @@
 import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
 import {Box, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
 import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PositionStory() {

package/src/core/components/dialog/__workshop__/props.tsx

@@ -1,6 +1,7 @@
 import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
+
 import {WORKSHOP_WIDTH_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {

package/src/core/components/dialog/__workshop__/wrapped.tsx

@@ -1,7 +1,5 @@
+import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@sanity/ui'
 import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-import {Box, Button} from '../../../primitives'
-import {LayerProvider, useLayer} from '../../../utils'
-import {Dialog, DialogProps} from '../dialog'
 
 export default function WrappedStory() {
   return (

package/src/core/components/dialog/dialog.tsx

@@ -2,6 +2,7 @@ import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
+
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -404,6 +405,7 @@ export const Dialog = forwardRef(function Dialog(
         role="dialog"
         zOffset={zOffset}
       >
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div ref={preDivRef} tabIndex={0} />
         <DialogCard
           __unstable_autoFocus={autoFocus}
@@ -423,6 +425,7 @@ export const Dialog = forwardRef(function Dialog(
         >
           {children}
         </DialogCard>
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div ref={postDivRef} tabIndex={0} />
       </StyledDialog>
     </Portal>

package/src/core/components/dialog/dialogProvider.tsx

@@ -1,4 +1,5 @@
 import {useMemo} from 'react'
+
 import {DialogPosition} from '../../types'
 import {DialogContext, DialogContextValue} from './dialogContext'
 

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

@@ -1,5 +1,6 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {css} from 'styled-components'
+
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
 

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

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {DialogContext, DialogContextValue} from './dialogContext'
 
 /**

package/src/core/components/hotkeys/hotkeys.tsx

@@ -1,5 +1,6 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
+
 import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
 import {Radius} from '../../types'

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -8,6 +8,7 @@ const CustomLink = forwardRef(function CustomLink(
   const {children, req, ...restProps} = props
 
   return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
     <a data-required={req} {...restProps} href="#" ref={ref}>
       {children}
     </a>

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -1,4 +1,5 @@
 import {UsersIcon} from '@sanity/icons'
+
 import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
 import {Hotkeys} from '../../hotkeys'
 import {Menu} from '../menu'

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

@@ -12,6 +12,7 @@ import {
   Text,
 } from '@sanity/ui'
 import {useState} from 'react'
+
 import {MenuButtonProps} from '../menuButton'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {

package/src/core/components/menu/__workshop__/customSelectedState.tsx

@@ -1,5 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {useSelect} from '@sanity/ui-workshop'
+
 import {Box, Button} from '../../../primitives'
 import {Menu} from '../menu'
 import {MenuButton} from '../menuButton'

package/src/core/components/menu/__workshop__/menuButton.tsx

@@ -13,6 +13,7 @@ import {
 } from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useMemo} from 'react'
+
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function MenuButtonStory() {

package/src/core/components/menu/__workshop__/shouldFocus.tsx

@@ -1,5 +1,6 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {Fragment, useCallback, useState} from 'react'
+
 import {Button, Flex, Popover} from '../../../primitives'
 import {LayerProvider} from '../../../utils'
 import {Menu} from '../menu'

package/src/core/components/menu/__workshop__/tones.tsx

@@ -2,6 +2,7 @@ import {CubeIcon} from '@sanity/icons'
 import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function TonesStory() {

package/src/core/components/menu/menu.test.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'
+
 import {render} from '../../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'

package/src/core/components/menu/menu.tsx

@@ -1,5 +1,6 @@
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
+
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'

package/src/core/components/menu/menuButton.tsx

@@ -3,12 +3,13 @@ import {
   cloneElement,
   forwardRef,
   useCallback,
-  useMemo,
-  useState,
   useEffect,
-  useRef,
   useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
 } from 'react'
+
 import {Popover, PopoverProps} from '../../primitives'
 import {Placement, Radius} from '../../types'
 import {MenuProps} from './menu'

package/src/core/components/menu/menuGroup.tsx

@@ -1,6 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import {isValidElement, useCallback, useEffect, 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'