@sanity/ui 2.9.0-canary.6 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.9.0-canary.6",
+  "version": "2.9.0",
   "keywords": [
     "sanity",
     "ui",
@@ -51,6 +51,32 @@
     "src",
     "theme.js"
   ],
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "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",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "prepare": "husky install",
+    "prepack": "pnpm build",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -84,7 +110,7 @@
     "@sanity/icons": "^3.4.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
-    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
+    "react-compiler-runtime": "19.0.0-beta-df7b47d-20241124",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -96,24 +122,24 @@
     "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.11.7",
-    "@sanity/prettier-config": "^1.0.2",
+    "@sanity/pkg-utils": "^6.11.11",
+    "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.16",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-mdx-gfm": "^8.4.5",
+    "@storybook/addon-storysource": "^8.4.5",
+    "@storybook/addon-themes": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
@@ -128,7 +154,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "babel-plugin-react-compiler": "beta",
+    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "commitizen": "^4.3.0",
     "cypress": "^13.13.2",
     "cypress-real-events": "^1.13.0",
@@ -140,9 +166,9 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-compiler": "beta",
+    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.11.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
@@ -153,57 +179,38 @@
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
-    "react-compiler-runtime": "beta",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^24.0.0",
     "start-server-and-test": "^2.0.5",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.5",
     "styled-components": "^6.1.13",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.5.3",
-    "vite": "^5.4.2",
+    "typescript": "5.6.3",
+    "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "react-is": "^18",
+    "react": "^18 || >=19.0.0-0",
+    "react-dom": "^18 || >=19.0.0-0",
+    "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.12.3",
   "engines": {
     "node": ">=14.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
+  "pnpm": {
+    "overrides": {
+      "conventional-changelog-conventionalcommits": ">= 8.0.0"
+    }
+  },
   "esm.sh": {
     "bundle": false
-  },
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "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",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

package/src/core/__workshop__/constants.ts

@@ -14,11 +14,11 @@ import {
   TextAlign,
   TextInputType,
 } from '@sanity/ui'
-import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0': 0,
-  '1 (default)': 1,
+  '1': 1,
   '2': 2,
   '3': 3,
 }
@@ -31,6 +31,7 @@ export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {
 export const WORKSHOP_BADGE_TONE_OPTIONS: {[key: string]: BadgeTone} = {
   Default: 'default',
   Primary: 'primary',
+  Suggest: 'suggest',
   Positive: 'positive',
   Caution: 'caution',
   Critical: 'critical',
@@ -51,7 +52,9 @@ export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign
 
 export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
   Default: 'default',
+  Neutral: 'neutral',
   Primary: 'primary',
+  Suggest: 'suggest',
   Positive: 'positive',
   Caution: 'caution',
   Critical: 'critical',
@@ -60,22 +63,24 @@ export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
 export const WORKSHOP_CARD_AS_OPTIONS: {
   [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
 } = {
-  'DIV (default)': 'div',
-  'BUTTON': 'button',
-  'SPAN': 'span',
-  'OL': 'ol',
-  'PRE': 'pre',
-  'UL': 'ul',
+  DIV: 'div',
+  BUTTON: 'button',
+  SPAN: 'span',
+  OL: 'ol',
+  PRE: 'pre',
+  UL: 'ul',
 }
 
 export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
-  Default: 'default',
-  Inherit: 'inherit',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
+  'Inherit': 'inherit',
+  'Transparent': 'transparent',
+  'Default': 'default',
+  'Neutral': 'neutral',
+  'Primary (deprecated)': 'primary',
+  'Suggest': 'suggest',
+  'Positive': 'positive',
+  'Caution': 'caution',
+  'Critical': 'critical',
 }
 
 export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
@@ -132,7 +137,7 @@ export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} =
 export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
   '0': 0,
   '1': 1,
-  '2 (default)': 2,
+  '2': 2,
   '3': 3,
   '4': 4,
 }
@@ -203,7 +208,7 @@ export const WORKSHOP_SPACE_OPTIONS = {
   '9': 9,
 }
 
-export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorSpotKey} = {
+export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorAvatarColorKey} = {
   Gray: 'gray',
   Blue: 'blue',
   Purple: 'purple',
@@ -254,25 +259,16 @@ export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} =
 export const WORKSHOP_TEXT_SIZE_OPTIONS = {
   '0': 0,
   '1': 1,
-  '2 (default)': 2,
+  '2': 2,
   '3': 3,
   '4': 4,
 }
 
 export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
-  'Regular (default)': '',
-  'Medium': 'medium',
-  'Semibold': 'semibold',
-  'Bold': 'bold',
-}
-
-export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
-  Default: 'default',
-  Transparent: 'transparent',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
+  Regular: '',
+  Medium: 'medium',
+  Semibold: 'semibold',
+  Bold: 'bold',
 }
 
 export const WORKSHOP_TOAST_STATUS_OPTIONS: {

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

@@ -17,7 +17,6 @@ import {
   useMemo,
   useReducer,
   useRef,
-  useState,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
@@ -185,22 +184,21 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION
 
   // Element refs
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const [resultsPopoverElement, setResultsPopoverElement] = useState<HTMLDivElement | null>(null)
-  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
+  const rootElementRef = useRef<HTMLDivElement | null>(null)
+  const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
+  const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
   const valueRef = useRef(value)
   const valuePropRef = useRef(valueProp)
-  const [popoverMouseWithin, setPopoverMouseWithin] = useState(false)
+  const popoverMouseWithinRef = useRef(false)
 
   // Forward ref to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElement,
-    [inputElement],
+    () => inputElementRef.current,
   )
 
   const listBoxId = `${id}-listbox`
@@ -224,13 +222,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
         // closes the results in certain situations):
         // - Do not handle blur if the mouse is within the popover
-        if (popoverMouseWithin) {
+        if (popoverMouseWithinRef.current) {
           return
         }
 
         const elements: HTMLElement[] = (relatedElements || []).concat(
-          rootElement ? [rootElement] : [],
-          resultsPopoverElement ? [resultsPopoverElement] : [],
+          rootElementRef.current ? [rootElementRef.current] : [],
+          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
         )
 
         let focusInside = false
@@ -246,20 +244,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
         if (focusInside === false) {
           dispatch({type: 'root/blur'})
-          setPopoverMouseWithin(false)
+          popoverMouseWithinRef.current = false
           if (onQueryChange) onQueryChange(null)
           if (onBlur) onBlur(event)
         }
       }, 0)
     },
-    [
-      onBlur,
-      onQueryChange,
-      popoverMouseWithin,
-      relatedElements,
-      resultsPopoverElement,
-      rootElement,
-    ],
+    [onBlur, onQueryChange, relatedElements],
   )
 
   const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
@@ -278,7 +269,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (v: string) => {
       dispatch({type: 'value/change', value: v})
 
-      setPopoverMouseWithin(false)
+      popoverMouseWithinRef.current = false
 
       if (onSelect) onSelect(v)
 
@@ -287,9 +278,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       if (onChange) onChange(v)
       if (onQueryChange) onQueryChange(null)
 
-      inputElement?.focus()
+      inputElementRef.current?.focus()
     },
-    [onSelect, onChange, onQueryChange, inputElement],
+    [onChange, onSelect, onQueryChange],
   )
 
   const handleRootKeyDown = useCallback(
@@ -333,9 +324,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (event.key === 'Escape') {
         dispatch({type: 'root/escape'})
-        setPopoverMouseWithin(false)
+        popoverMouseWithinRef.current = false
         if (onQueryChange) onQueryChange(null)
-        inputElement?.focus()
+        inputElementRef.current?.focus()
 
         return
       }
@@ -347,12 +338,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         (listEl === target || listEl?.contains(target)) &&
         !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)
       ) {
-        inputElement?.focus()
+        inputElementRef.current?.focus()
 
         return
       }
     },
-    [activeValue, filteredOptions, filteredOptionsLen, inputElement, onQueryChange],
+    [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],
   )
 
   const handleInputChange = useCallback(
@@ -386,11 +377,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   )
 
   const handlePopoverMouseEnter = useCallback(() => {
-    setPopoverMouseWithin(true)
+    popoverMouseWithinRef.current = true
   }, [])
 
   const handlePopoverMouseLeave = useCallback(() => {
-    setPopoverMouseWithin(false)
+    popoverMouseWithinRef.current = false
   }, [])
 
   const handleClearButtonClick = useCallback(() => {
@@ -398,8 +389,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     valueRef.current = ''
     if (onChange) onChange('')
     if (onQueryChange) onQueryChange(null)
-    inputElement?.focus()
-  }, [inputElement, onChange, onQueryChange])
+    inputElementRef.current?.focus()
+  }, [onChange, onQueryChange])
 
   const handleClearButtonFocus = useCallback(() => {
     dispatch({type: 'input/focus'})
@@ -491,9 +482,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       if (openButtonProps.onClick) openButtonProps.onClick(event)
 
-      _raf(() => inputElement?.focus())
+      _raf(() => inputElementRef.current?.focus())
     },
-    [dispatchOpen, openButtonProps, inputElement],
+    [openButtonProps, dispatchOpen],
   )
 
   const openButtonNode = useMemo(
@@ -563,7 +554,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       prefix={prefix}
       radius={radius}
       readOnly={readOnly}
-      ref={setInputElement}
+      ref={inputElementRef}
       role="combobox"
       spellCheck={false}
       suffix={suffix || openButtonNode}
@@ -575,10 +566,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
       if (event.key === 'Tab') {
-        if (listFocused) inputElement?.focus()
+        if (listFocused) inputElementRef.current?.focus()
       }
     },
-    [inputElement, listFocused],
+    [listFocused],
   )
 
   const content = useMemo(() => {
@@ -644,11 +635,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         {
           content,
           hidden: !expanded,
-          inputElement,
+          inputElement: inputElementRef.current,
           onMouseEnter: handlePopoverMouseEnter,
           onMouseLeave: handlePopoverMouseLeave,
         },
-        {current: resultsPopoverElement},
+        resultsPopoverElementRef,
       )
     }
 
@@ -670,8 +661,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
         radius={radius}
-        ref={setResultsPopoverElement}
-        referenceElement={inputElement}
+        ref={resultsPopoverElementRef}
+        referenceElement={inputElementRef.current}
         {...popover}
       />
     )
@@ -681,11 +672,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
-    inputElement,
     popover,
     radius,
     renderPopover,
-    resultsPopoverElement,
   ])
 
   return (
@@ -694,7 +683,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
       onKeyDown={handleRootKeyDown}
-      ref={setRootElement}
+      ref={rootElementRef}
     >
       {input}
       {results}

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

@@ -1,4 +1,13 @@
-import {Children, forwardRef, Fragment, isValidElement, useCallback, useRef, useState} from 'react'
+import {
+  Children,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {useArrayProp, useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
@@ -30,43 +39,46 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])
 
-  const rawItems = Children.toArray(children).filter(isValidElement)
+  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
-  let items = rawItems
-  const len = rawItems.length
+  const items = useMemo(() => {
+    const len = rawItems.length
 
-  if (maxLength && rawItems.length > maxLength) {
-    const beforeLength = Math.ceil(maxLength / 2)
-    const afterLength = Math.floor(maxLength / 2)
+    if (maxLength && len > maxLength) {
+      const beforeLength = Math.ceil(maxLength / 2)
+      const afterLength = Math.floor(maxLength / 2)
 
-    items = [
-      ...rawItems.slice(0, beforeLength - 1),
-      <Popover
-        constrainSize
-        content={
-          <Stack as="ol" overflow="auto" padding={space} space={space}>
-            {rawItems.slice(beforeLength - 1, len - afterLength)}
-          </Stack>
-        }
-        key="button"
-        open={open}
-        placement="top"
-        portal
-        ref={popoverElementRef}
-      >
-        <ExpandButton
-          fontSize={1}
-          mode="bleed"
-          onClick={open ? collapse : expand}
-          padding={1}
-          ref={expandElementRef}
-          selected={open}
-          text="…"
-        />
-      </Popover>,
-      ...rawItems.slice(len - afterLength),
-    ]
-  }
+      return [
+        ...rawItems.slice(0, beforeLength - 1),
+        <Popover
+          constrainSize
+          content={
+            <Stack as="ol" overflow="auto" padding={space} space={space}>
+              {rawItems.slice(beforeLength - 1, len - afterLength)}
+            </Stack>
+          }
+          key="button"
+          open={open}
+          placement="top"
+          portal
+          ref={popoverElementRef}
+        >
+          <ExpandButton
+            fontSize={1}
+            mode="bleed"
+            onClick={open ? collapse : expand}
+            padding={1}
+            ref={expandElementRef}
+            selected={open}
+            text="…"
+          />
+        </Popover>,
+        ...rawItems.slice(len - afterLength),
+      ]
+    }
+
+    return rawItems
+  }, [collapse, expand, maxLength, open, rawItems, space])
 
   return (
     <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>

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

@@ -241,7 +241,7 @@ const DialogCard = forwardRef(function DialogCard(
         <DialogLayout direction="column">
           {showHeader && (
             <DialogHeader>
-              <Flex align="center" padding={3}>
+              <Flex align="flex-start" padding={3}>
                 <Box flex={1} padding={2}>
                   {header && (
                     <Text id={labelId} size={1} weight="semibold">

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

@@ -1,5 +1,6 @@
-import {SearchIcon} from '@sanity/icons'
+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'
 
@@ -12,11 +13,9 @@ export default function TonesStory() {
       <Box padding={[4, 5, 6]}>
         <Card radius={3} shadow={3} tone={parentTone}>
           <Menu>
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Default" tone="default" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Primary" tone="primary" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Positive" tone="positive" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Caution" tone="caution" />
-            <MenuItem disabled={disabled} icon={SearchIcon} text="Critical" tone="critical" />
+            {THEME_COLOR_STATE_TONES.map((tone) => (
+              <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />
+            ))}
           </Menu>
         </Card>
       </Box>