@sanity/ui 3.0.9 → 3.0.11-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.9",
+  "version": "3.0.11-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -60,32 +60,6 @@
     "exports",
     "src"
   ],
-  "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 .",
-    "prepack": "pnpm build",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "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"
@@ -156,7 +130,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^22.18.0",
+    "@types/node": "^22.18.1",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.8",
     "@types/react-is": "^19.0.0",
@@ -169,13 +143,13 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-formatter-compact": "^8.40.0",
+    "eslint-formatter-gha": "^1.6.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-edac0dde-20250723",
+    "eslint-plugin-react-hooks": "6.0.0-rc.2",
+    "eslint-plugin-react-hooks-with-use-effect-event": "npm:eslint-plugin-react-hooks@0.0.0-experimental-edac0dde-20250723",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
@@ -197,7 +171,7 @@
     "semantic-release": "^24.2.7",
     "start-server-and-test": "^2.0.13",
     "storybook": "^8.6.14",
-    "styled-components": "^6.1.19",
+    "styled-components": "npm:@sanity/styled-components@^6.1.22",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.41.0",
@@ -210,25 +184,37 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.9",
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "$@types/react",
-      "@types/react-dom": "$@types/react-dom",
-      "@types/react-is": "$@types/react-is",
-      "conventional-changelog-conventionalcommits": ">= 8.0.0",
-      "react": "$react",
-      "react-dom": "$react-dom",
-      "react-is": "$react-is"
-    }
-  },
   "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 --cache .",
+    "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/components/autocomplete/autocomplete.tsx

@@ -16,6 +16,7 @@ import {
   useMemo,
   useReducer,
   useRef,
+  useState,
 } from 'react'
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
@@ -189,6 +190,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
   const listBoxElementRef = useRef<HTMLDivElement | null>(null)
+  // Element refs that need to be accessed during render
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
@@ -196,10 +199,17 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const valuePropRef = useRef(valueProp)
   const popoverMouseWithinRef = useRef(false)
 
-  // Forward ref to parent
+  // Forward inputElement state to inputElementRef
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    inputElementRef,
+    () => inputElement,
+    [inputElement],
+  )
+  // Forward inputElement to parent
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
-    () => inputElementRef.current,
+    () => inputElement,
+    [inputElement],
   )
 
   const listBoxId = `${id}-listbox`
@@ -529,40 +539,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     return query
   }, [currentOption, query, renderValue, value])
 
-  const input = (
-    <TextInput
-      {...restProps}
-      aria-activedescendant={activeItemId}
-      aria-autocomplete="list"
-      aria-expanded={expanded}
-      aria-owns={listBoxId}
-      autoCapitalize="off"
-      autoComplete="off"
-      autoCorrect="off"
-      border={border}
-      clearButton={clearButton}
-      customValidity={customValidity}
-      disabled={disabled}
-      fontSize={fontSize}
-      icon={icon}
-      iconRight={loading && AnimatedSpinnerIcon}
-      id={id}
-      inputMode="search"
-      onChange={handleInputChange}
-      onClear={handleClearButtonClick}
-      onFocus={handleInputFocus}
-      padding={padding}
-      prefix={prefix}
-      radius={radius}
-      readOnly={readOnly}
-      ref={inputElementRef}
-      role="combobox"
-      spellCheck={false}
-      suffix={suffix || openButtonNode}
-      value={inputValue}
-    />
-  )
-
   const handleListBoxKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       // If the focus is currently in the list, move focus to the input element
@@ -632,15 +608,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const results = useMemo(() => {
     if (renderPopover) {
-      return renderPopover(
-        {
-          content,
-          hidden: !expanded,
-          inputElement: inputElementRef.current,
-          onMouseEnter: handlePopoverMouseEnter,
-          onMouseLeave: handlePopoverMouseLeave,
-        },
-        resultsPopoverElementRef,
+      return (
+        <RenderPopover
+          content={content}
+          hidden={!expanded}
+          inputElement={inputElement}
+          onMouseEnter={handlePopoverMouseEnter}
+          onMouseLeave={handlePopoverMouseLeave}
+          resultsPopoverElementRef={resultsPopoverElementRef}
+          renderPopover={renderPopover}
+        />
       )
     }
 
@@ -663,7 +640,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         portal
         radius={radius}
         ref={resultsPopoverElementRef}
-        referenceElement={inputElementRef.current}
+        referenceElement={inputElement}
         {...popover}
       />
     )
@@ -673,6 +650,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     filteredOptionsLen,
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
+    inputElement,
     popover,
     radius,
     renderPopover,
@@ -686,12 +664,66 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       onKeyDown={handleRootKeyDown}
       ref={rootElementRef}
     >
-      {input}
+      <TextInput
+        {...restProps}
+        aria-activedescendant={activeItemId}
+        aria-autocomplete="list"
+        aria-expanded={expanded}
+        aria-owns={listBoxId}
+        autoCapitalize="off"
+        autoComplete="off"
+        autoCorrect="off"
+        border={border}
+        clearButton={clearButton}
+        customValidity={customValidity}
+        disabled={disabled}
+        fontSize={fontSize}
+        icon={icon}
+        iconRight={loading && AnimatedSpinnerIcon}
+        id={id}
+        inputMode="search"
+        onChange={handleInputChange}
+        onClear={handleClearButtonClick}
+        onFocus={handleInputFocus}
+        padding={padding}
+        prefix={prefix}
+        radius={radius}
+        readOnly={readOnly}
+        ref={setInputElement}
+        role="combobox"
+        spellCheck={false}
+        suffix={suffix || openButtonNode}
+        value={inputValue}
+      />
       {results}
     </StyledAutocomplete>
   )
 })
 
+function RenderPopover({
+  renderPopover,
+  content,
+  hidden,
+  inputElement,
+  onMouseEnter,
+  onMouseLeave,
+  resultsPopoverElementRef,
+}: {
+  renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>
+  resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]
+} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {
+  return renderPopover(
+    {
+      content,
+      hidden,
+      inputElement,
+      onMouseEnter,
+      onMouseLeave,
+    },
+    resultsPopoverElementRef,
+  )
+}
+
 InnerAutocomplete.displayName = 'ForwardRef(Autocomplete)'
 
 /**

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

@@ -32,18 +32,16 @@ describe('components/menu', () => {
           [],
         )
 
-        const value: MenuContextValue = useMemo(
-          () => ({
-            version: 0.0,
-            activeElement: null,
-            activeIndex: 0,
-            mount: (element: HTMLElement | null) => () => console.log(element),
-            onItemClick: () => undefined,
-            onItemMouseEnter: handleItemMouseEnter,
-            onItemMouseLeave: handleItemMouseLeave,
-            onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: handleItemMouseLeave,
-          }),
+        const value = useMemo(
+          () =>
+            ({
+              version: 2,
+              activeElement: null,
+              mount: (element: HTMLElement | null) => () => console.log(element),
+              onItemClick: () => undefined,
+              onItemMouseEnter: handleItemMouseEnter,
+              onItemMouseLeave: handleItemMouseLeave,
+            }) satisfies MenuContextValue,
           [handleItemMouseEnter, handleItemMouseLeave],
         )
 
@@ -58,8 +56,7 @@ describe('components/menu', () => {
 
       const contextValue = log.mock.calls[0][0]
 
-      expect(contextValue.version).toBe(0.0)
-      expect(contextValue.activeIndex).toBe(0)
+      expect(contextValue.version).toBe(2)
       expect(typeof contextValue.mount).toBe('function')
       expect(typeof contextValue.onItemClick).toBe('function')
       expect(typeof contextValue.onItemMouseEnter).toBe('function')

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

@@ -128,26 +128,21 @@ export const Menu = forwardRef(function Menu(
     ),
   )
 
-  const value: MenuContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      activeElement,
-      activeIndex,
-      mount,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      onItemMouseEnter: handleItemMouseEnter,
-      onItemMouseLeave: handleItemMouseLeave,
-      registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
-    }),
+  const value = useMemo(
+    () =>
+      ({
+        version: 2,
+        activeElement,
+        mount,
+        onClickOutside,
+        onEscape,
+        onItemClick,
+        onItemMouseEnter: handleItemMouseEnter,
+        onItemMouseLeave: handleItemMouseLeave,
+        registerElement,
+      }) satisfies MenuContextValue,
     [
       activeElement,
-      activeIndex,
       mount,
       handleItemMouseEnter,
       handleItemMouseLeave,

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

@@ -1,26 +1,15 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 
 export interface MenuContextValue {
-  version: 0.0
+  version: 2
   activeElement: HTMLElement | null
-  activeIndex: number
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
-  onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
-  onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void
-
-  /**
-   * @deprecated Use `onItemMouseEnter` instead
-   */
-  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
-
-  /**
-   * @deprecated Use `onItemMouseLeave` instead
-   */
-  onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
 }
 
 export const MenuContext = createGlobalScopedContext<MenuContextValue | null>(

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

@@ -69,7 +69,7 @@ export function MenuGroup(
     onItemMouseEnter: _onItemMouseEnter,
     registerElement,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)

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

@@ -76,8 +76,8 @@ export const MenuItem = forwardRef(function MenuItem(
     onItemMouseEnter: _onItemMouseEnter,
     onItemMouseLeave: _onItemMouseLeave,
   } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)

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

@@ -12,8 +12,8 @@ export function useMenu(): MenuContextValue {
 
   // NOTE: This check is for future-compatiblity
   // - If the value is not an object, it’s not compatible with the current version
-  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
+  // - If the value is an object, but doesn’t have `version: 2`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 2) {
     throw new Error('useMenu(): the context value is not compatible')
   }
 

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

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {_getFocusableElements, _sortElements} from './helpers'
 
@@ -29,12 +29,12 @@ export function useMenuController(props: {
   const elementsRef = useRef<HTMLElement[]>([])
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  const mounted = Boolean(rootElementRef.current)
+  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
     activeIndexRef.current = nextActiveIndex
+    setActiveElement(elementsRef.current[nextActiveIndex] || null)
   }, [])
 
   const mount = useCallback(
@@ -183,7 +183,7 @@ export function useMenuController(props: {
 
   // Set focus on the currently active element
   useEffect(() => {
-    if (!mounted) return
+    if (!rootElementRef.current) return
 
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
@@ -218,7 +218,7 @@ export function useMenuController(props: {
     })
 
     return () => cancelAnimationFrame(rafId)
-  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
+  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
 
   return {
     activeElement,

package/src/core/components/tree/treeItem.tsx

@@ -1,6 +1,6 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
+import {memo, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {Box, BoxProps, Flex, Text} from '../../primitives'
@@ -65,18 +65,20 @@ export const TreeItem = memo(function TreeItem(
     weight,
     ...restProps
   } = props
-  const rootRef = useRef<HTMLLIElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLLIElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
   const _id = useId()
   const id = idProp || _id
-  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
-  const itemKey = itemPath.join('/')
+  const [itemPath, itemKey] = useMemo(() => {
+    const itemPath = path.concat([id || ''])
+    return [itemPath, itemPath.join('/')]
+  }, [id, path])
   const itemState = tree.state[itemKey]
-  const focused = tree.focusedElement === rootRef.current
+  const focused = tree.focusedElement === rootElement
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
+  const tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],
@@ -95,28 +97,28 @@ export const TreeItem = memo(function TreeItem(
       ) {
         event.stopPropagation()
         setExpanded(itemKey, !expanded)
-        setFocusedElement(rootRef.current)
+        setFocusedElement(rootElement)
       }
     },
-    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
+    [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement],
   )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootRef.current
+        const el = treeitemRef.current || rootElement
 
         el?.click()
       }
     },
-    [focused],
+    [focused, rootElement],
   )
 
   useEffect(() => {
-    if (!rootRef.current) return
+    if (!rootElement) return
 
-    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
-  }, [expanded, itemPath, registerItem, selected])
+    return registerItem(rootElement, itemKey, expanded, selected)
+  }, [expanded, itemKey, registerItem, rootElement, selected])
 
   const content = (
     <Flex padding={padding}>
@@ -155,7 +157,7 @@ export const TreeItem = memo(function TreeItem(
         data-ui="TreeItem"
         {...restProps}
         onClick={handleClick}
-        ref={rootRef}
+        ref={setRootElement}
         role="none"
       >
         <TreeItemBox
@@ -188,7 +190,7 @@ export const TreeItem = memo(function TreeItem(
       aria-expanded={expanded}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={rootRef}
+      ref={setRootElement}
       role="treeitem"
       tabIndex={tabIndex}
     >

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

@@ -441,7 +441,7 @@ describe('useClickOutside', () => {
     const useBoundaryElementFromRef = (ref: React.MutableRefObject<HTMLElement | null>) => {
       const [element, setElement] = useState(() => ref.current)
 
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks-with-use-effect-event/exhaustive-deps
       useEffect(() => {
         // If the ref has mutated since the last render, update the state and schedule a re-render
         if (ref.current !== element) {

package/src/core/lib/createGlobalScopedContext.ts

@@ -25,7 +25,9 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
    * Prevent errors about re-renders on React SSR on Next.js App Router
    */
   if (typeof document === 'undefined') {
-    return createContext<ContextType>(defaultValue)
+    const context = createContext<ContextType>(defaultValue)
+    context.displayName = key
+    return context
   }
 
   globalScope[symbol] = globalScope[symbol] || createContext<T>(defaultValue)

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

@@ -77,6 +77,7 @@ export const Avatar = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
 
+  // eslint-disable-next-line no-warning-comments
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
   const _sizeRem = avatarSize.size

package/src/core/primitives/card/card.tsx

@@ -83,6 +83,7 @@ export const Card = forwardRef(function Card(
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
+  // eslint-disable-next-line no-warning-comments
   // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>

package/src/core/primitives/popover/types.ts

@@ -1,6 +1,7 @@
 /** @beta */
 export type PopoverUpdateCallback = () => void
 
-/** @public */
+// eslint-disable-next-line no-warning-comments
 // todo: remove `auto` from PopoverWidth
+/** @public */
 export type PopoverWidth = number | 'auto'

package/src/core/styles/font/responsiveFont.ts

@@ -17,6 +17,7 @@ export function responsiveFont(
   const {family, sizes, weights} = font[fontKey]
   const fontWeight = ($weight && weights[$weight]) || weights.regular
 
+  // eslint-disable-next-line no-warning-comments
   // @todo: make this configurable
   const defaultSize = sizes[2]
 
@@ -48,6 +49,7 @@ export function responsiveFont(
     },
   }
 
+  // eslint-disable-next-line no-warning-comments
   // @TODO fix the real condition that is causing $size to be undefined sometimes
   if (!$size) {
     // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it

package/src/core/theme/__workshop__/canvas.tsx

@@ -124,6 +124,7 @@ function Color(props: {color: ThemeColorCard_v2; tone: CardTone}) {
 
         {/* {features.muted && <ColorMuted color={color.muted} />} */}
 
+        {/* eslint-disable-next-line no-warning-comments */}
         {/* @todo: remove use of `muted` here */}
         {features.selectable && <ColorSelectable color={color.selectable || color.muted} />}