@sanity/ui 2.1.15-canary.6 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.1.15-canary.6",
+  "version": "2.2.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",
+    "prepublishOnly": "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"
@@ -93,7 +119,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "6.8.20-canary.0",
+    "@sanity/pkg-utils": "^6.8.18",
     "@sanity/semantic-release-preset": "^4.1.7",
     "@sanity/ui-workshop": "^2.0.13",
     "@storybook/addon-a11y": "^8.0.8",
@@ -123,7 +149,6 @@
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
-    "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601",
     "commitizen": "^4.3.0",
     "cypress": "^13.10.0",
     "cypress-real-events": "^1.12.0",
@@ -135,7 +160,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-c8b3f72-20240517",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "http-server": "^14.1.1",
@@ -146,11 +171,11 @@
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.0",
     "prettier-plugin-packagejson": "^2.5.0",
-    "react": "19.0.0-rc-6d3110b4d9-20240531",
-    "react-dom": "19.0.0-rc-6d3110b4d9-20240531",
-    "react-is": "19.0.0-rc-6d3110b4d9-20240531",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.5",
     "semantic-release": "^23.1.1",
@@ -163,11 +188,12 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
-    "react": ">=19.0.0-rc",
-    "react-dom": ">=19.0.0-rc",
-    "react-is": ">=19.0.0-rc",
-    "styled-components": "^6.1"
+    "react": "^18",
+    "react-dom": "^18",
+    "react-is": "^18",
+    "styled-components": "^5.2 || ^6"
   },
+  "packageManager": "pnpm@9.1.3",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -176,29 +202,5 @@
   },
   "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/components/autocomplete/autocomplete.tsx

@@ -13,14 +13,13 @@ import {
   forwardRef,
   useCallback,
   useEffect,
-  useImperativeHandle,
   useMemo,
   useReducer,
   useRef,
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {
   Box,
   BoxProps,
@@ -120,7 +119,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       | 'type'
       | 'value'
     >,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
+  ref: Ref<HTMLInputElement>,
 ) {
   const {
     border = true,
@@ -192,11 +191,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const valuePropRef = useRef(valueProp)
   const popoverMouseWithinRef = useRef(false)
 
-  // Forward ref to parent
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => inputElementRef.current,
-  )
+  const forwardedRef = useForwardedRef(ref)
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
@@ -437,6 +432,14 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     }
   }, [activeValue, filteredOptions])
 
+  const setRef = useCallback(
+    (el: HTMLInputElement | null) => {
+      inputElementRef.current = el
+      forwardedRef.current = el
+    },
+    [forwardedRef],
+  )
+
   const clearButton = useMemo(() => {
     if (!loading && !disabled && value) {
       return {
@@ -546,7 +549,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       prefix={prefix}
       radius={radius}
       readOnly={readOnly}
-      ref={inputElementRef}
+      ref={setRef}
       role="combobox"
       spellCheck={false}
       suffix={suffix || openButtonNode}

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

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
@@ -8,7 +8,13 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {useArrayProp, useClickOutside, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
+import {
+  useArrayProp,
+  useClickOutside,
+  useForwardedRef,
+  useGlobalKeyDown,
+  usePrefersReducedMotion,
+} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
@@ -145,13 +151,13 @@ const DialogFooter = styled(Box)`
 
 const DialogCard = forwardRef(function DialogCard(
   props: DialogCardProps,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
     children,
-    contentRef: forwardedContentRef,
+    contentRef,
     footer,
     header,
     id,
@@ -169,29 +175,23 @@ const DialogCard = forwardRef(function DialogCard(
   const radius = useArrayProp(radiusProp)
   const shadow = useArrayProp(shadowProp)
   const width = useArrayProp(widthProp)
-  const ref = useRef<HTMLDivElement | null>(null)
+  const forwardedRef = useForwardedRef(ref)
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const contentRef = useRef<HTMLDivElement | null>(null)
+  const localContentRef = useRef<HTMLDivElement | null>(null)
   const layer = useLayer()
   const {isTopLayer} = layer
   const labelId = `${id}_label`
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
-    forwardedContentRef,
-    () => contentRef.current,
-  )
-
   useEffect(() => {
     if (!autoFocus) return
 
     // On mount: focus the first focusable element
-    if (ref.current) {
-      focusFirstDescendant(ref.current)
+    if (forwardedRef.current) {
+      focusFirstDescendant(forwardedRef.current)
     }
-  }, [autoFocus, ref])
+  }, [autoFocus, forwardedRef])
 
   useGlobalKeyDown(
     useCallback(
@@ -234,10 +234,22 @@ const DialogCard = forwardRef(function DialogCard(
     [rootElement],
   )
 
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    setRootElement(el)
-    ref.current = el
-  }, [])
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      setRootElement(el)
+      forwardedRef.current = el
+    },
+    [forwardedRef],
+  )
+
+  const setContentRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      localContentRef.current = el
+      if (typeof contentRef === 'function') contentRef(el)
+      else if (contentRef) contentRef.current = el
+    },
+    [contentRef],
+  )
 
   return (
     <DialogContainer data-ui="DialogCard" width={width}>
@@ -269,7 +281,7 @@ const DialogCard = forwardRef(function DialogCard(
             </DialogHeader>
           )}
 
-          <DialogContent flex={1} ref={contentRef} tabIndex={-1}>
+          <DialogContent flex={1} ref={setContentRef} tabIndex={-1}>
             {children}
           </DialogContent>
 

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

@@ -1,6 +1,6 @@
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
+import {forwardRef, useCallback, useEffect, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useClickOutside, useGlobalKeyDown} from '../../hooks'
+import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
@@ -41,7 +41,7 @@ const Root = styled(Box)`
  */
 export const Menu = forwardRef(function Menu(
   props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children,
@@ -62,9 +62,7 @@ export const Menu = forwardRef(function Menu(
     ...restProps
   } = props
 
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  const forwardedRef = useForwardedRef(ref)
 
   const {isTopLayer} = useLayer()
 
@@ -82,9 +80,9 @@ export const Menu = forwardRef(function Menu(
   const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
       setRootElement(el)
-      ref.current = el
+      forwardedRef.current = el
     },
-    [setRootElement],
+    [forwardedRef, setRootElement],
   )
 
   // Trigger `onItemSelect` when active index changes

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

@@ -4,13 +4,11 @@ import {
   isValidElement,
   useCallback,
   useEffect,
-  useImperativeHandle,
   useMemo,
-  useRef,
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
@@ -78,12 +76,11 @@ export const MenuItem = forwardRef(function MenuItem(
   } = menu
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
   useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
 
+  const ref = useForwardedRef(forwardedRef)
+
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       if (disabled) return
@@ -108,10 +105,13 @@ export const MenuItem = forwardRef(function MenuItem(
 
   const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
 
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setRootElement(el)
-  }, [])
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      ref.current = el
+      setRootElement(el)
+    },
+    [ref],
+  )
 
   return (
     <Selectable

package/src/core/components/tab/tab.tsx

@@ -1,5 +1,6 @@
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useCallback, useEffect, useRef} from 'react'
 import {styled} from 'styled-components'
+import {useForwardedRef} from '../../hooks'
 import {Button} from '../../primitives'
 import {ButtonTone} from '../../types'
 
@@ -48,14 +49,9 @@ export const Tab = forwardRef(function Tab(
     selected,
     ...restProps
   } = props
-  const ref = useRef<HTMLButtonElement | null>(null)
+  const elementRef = useRef<HTMLButtonElement | null>(null)
   const focusedRef = useRef(false)
 
-  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
   const handleBlur = useCallback(() => {
     focusedRef.current = false
   }, [])
@@ -68,13 +64,20 @@ export const Tab = forwardRef(function Tab(
     [onFocus],
   )
 
+  const ref = useForwardedRef(forwardedRef)
+
   useEffect(() => {
     if (focused && !focusedRef.current) {
-      if (ref.current) ref.current.focus()
+      if (elementRef.current) elementRef.current.focus()
       focusedRef.current = true
     }
   }, [focused])
 
+  const setRef = (el: HTMLButtonElement | null) => {
+    elementRef.current = el
+    ref.current = el
+  }
+
   return (
     <CustomButton
       data-ui="Tab"
@@ -88,7 +91,7 @@ export const Tab = forwardRef(function Tab(
       onBlur={handleBlur}
       onFocus={handleFocus}
       padding={padding}
-      ref={ref}
+      ref={setRef}
       role="tab"
       selected={selected}
       tabIndex={selected ? 0 : -1}

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

@@ -1,13 +1,5 @@
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useForwardedRef} from '../../hooks'
 import {Stack} from '../../primitives'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
@@ -29,10 +21,10 @@ export const Tree = memo(
   forwardRef(function Tree(
     props: TreeProps &
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-    forwardedRef: React.ForwardedRef<HTMLDivElement>,
+    ref: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {
     const {children, space = 1, onFocus, ...restProps} = props
-    const ref = useRef<HTMLDivElement | null>(null)
+    const forwardedRef = useForwardedRef(ref)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
     const focusedElementRef = useRef(focusedElement)
     const path: string[] = useMemo(() => [], [])
@@ -40,11 +32,6 @@ export const Tree = memo(
     const [state, setState] = useState<TreeState>({})
     const stateRef = useRef(state)
 
-    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
-      forwardedRef,
-      () => ref.current,
-    )
-
     useEffect(() => {
       focusedElementRef.current = focusedElement
     }, [focusedElement])
@@ -207,13 +194,13 @@ export const Tree = memo(
     )
 
     useEffect(() => {
-      if (!ref.current) return
+      if (!forwardedRef.current) return
       const _itemElements = Array.from(
-        ref.current.querySelectorAll('[data-ui="TreeItem"]'),
+        forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]'),
       ) as HTMLElement[]
 
       setItemElements(_itemElements)
-    }, [children, ref])
+    }, [children, forwardedRef])
 
     return (
       <TreeContext.Provider value={contextValue}>
@@ -223,7 +210,7 @@ export const Tree = memo(
           {...restProps}
           onFocus={handleFocus}
           onKeyDown={handleKeyDown}
-          ref={ref}
+          ref={forwardedRef}
           role="tree"
           space={space}
         >

package/src/core/hooks/useArrayProp.ts

@@ -12,5 +12,14 @@ export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  return useMemo(() => _getArrayProp(val, defaultVal), [defaultVal, val])
+  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
+  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
+
+  return useMemo(
+    () => _getArrayProp(val, defaultVal),
+
+    // Improve performance: Keep object identify for a given hash of the value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [__perf_hash__],
+  )
 }

package/src/core/hooks/useForwardedRef.ts

@@ -1,19 +1,21 @@
-import {useImperativeHandle, useRef} from 'react'
+import {useRef} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 /**
  * @beta
- * @deprecated use `useImperativeHandle` instead
- * @example
- * ```diff
- * -const ref = useForwardedRef(forwardedRef)
- * +const ref = useRef(null)
- * +useImperativeHandle(forwardedRef, () => ref.current)
- * ```
  */
 export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
   const innerRef = useRef<T | null>(null)
 
-  useImperativeHandle(ref, () => innerRef.current!)
+  useIsomorphicEffect(() => {
+    if (!ref) return
+
+    if (typeof ref === 'function') {
+      ref(innerRef.current)
+    } else {
+      ref.current = innerRef.current
+    }
+  })
 
   return innerRef
 }

package/src/core/hooks/useIsomorphicEffect.ts

@@ -2,6 +2,5 @@ import {useEffect, useLayoutEffect} from 'react'
 
 /**
  * @beta
- * @deprecated use `useLayoutEffect` instead, or `useEffect` if possible
  */
 export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

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

@@ -12,6 +12,7 @@ export default function PropsStory() {
   const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
   const border = useBoolean('Border', false, 'Props')
   const checkered = useBoolean('Checkered', false, 'Props')
+  const muted = useBoolean('Muted', false, 'Props')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
@@ -24,6 +25,7 @@ export default function PropsStory() {
         __unstable_checkered={checkered}
         as={as}
         border={border}
+        muted={muted}
         onClick={useAction('onClick')}
         padding={padding}
         radius={radius}

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

@@ -36,6 +36,7 @@ export interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
+  muted?: boolean
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
@@ -67,6 +68,7 @@ export const Card = forwardRef(function Card(
     borderRight,
     borderBottom,
     borderLeft,
+    muted,
     pressed,
     radius = 0,
     scheme,
@@ -96,6 +98,7 @@ export const Card = forwardRef(function Card(
         $borderLeft={useArrayProp(borderLeft)}
         $checkered={checkered}
         $focusRing={focusRing}
+        $muted={muted}
         $radius={useArrayProp(radius)}
         $shadow={useArrayProp(shadow)}
         $tone={tone}

package/src/core/primitives/card/styles.ts

@@ -49,7 +49,7 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 }
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing} = props
+  const {$checkered, $focusRing, $muted} = props
   const {card, color, style} = getTheme_v2(props.theme)
   const border = {width: card.border.width, color: 'var(--card-border-color)'}
 
@@ -58,7 +58,7 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
 
     ${_cardColorStyle(color, color, $checkered)}
 
-    background-color: var(--card-bg-color);
+    background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
     color: var(--card-fg-color);
 
     /* &:is(button) */

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

@@ -6,5 +6,6 @@ import {ThemeColorToneKey} from '@sanity/ui/theme'
 export interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
+  $muted: boolean
   $tone: ThemeColorToneKey
 }

package/src/core/primitives/checkbox/checkbox.tsx

@@ -1,7 +1,7 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
+import {forwardRef, useEffect} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
+import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {checkboxBaseStyles, inputElementStyles} from './styles'
 
 /**
@@ -34,21 +34,16 @@ export const Checkbox = forwardRef(function Checkbox(
     style,
     ...restProps
   } = props
-  const ref = useRef<HTMLInputElement | null>(null)
+  const ref = useForwardedRef(forwardedRef)
 
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
+  useCustomValidity(ref, customValidity)
 
   useEffect(() => {
     if (ref.current) {
       // Set the indeterminate state
       ref.current.indeterminate = indeterminate || false
     }
-  }, [indeterminate])
-
-  useCustomValidity(ref, customValidity)
+  }, [indeterminate, ref])
 
   return (
     <Root className={className} data-ui="Checkbox" style={style}>