@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+import type {AvatarColor} from '@sanity/ui/theme'
 import {AvatarSize} from '@sanity/ui/theme'
 import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
 import {Display as BoxDisplay} from '@sanity/ui/css'
@@ -5,17 +6,18 @@ import {BoxHeight} from '@sanity/ui/css'
 import {BoxOverflow} from '@sanity/ui/css'
 import {BoxSizing} from '@sanity/ui/css'
 import type {BoxStyleProps} from '@sanity/ui/css'
+import {Breakpoint} from '@sanity/ui/css'
 import type {ButtonStyleProps} from '@sanity/ui/css'
-import {CardContextValue as CardContextValue_2} from './types'
 import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} from 'react'
 import type {ComponentClass} from 'react'
 import type {ComponentProps} from 'react'
-import {ComponentType as ComponentType_2} from 'react'
+import type {ComponentType as ComponentType_2} from 'react'
 import {ContainerStyleProps} from '@sanity/ui/css'
+import type {ContainerWidth} from '@sanity/ui/theme'
 import {Context} from 'react'
 import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
+import type {CSSObject} from '@sanity/ui/theme'
 import type {DisplayStyleProps} from '@sanity/ui/css'
 import {ElementType as ElementType_2} from 'react'
 import {ErrorInfo} from 'react'
@@ -23,14 +25,14 @@ import type {ExoticComponent} from 'react'
 import {FlexAlign} from '@sanity/ui/css'
 import {FlexDirection} from '@sanity/ui/css'
 import {FlexJustify} from '@sanity/ui/css'
-import {FlexStyleProps} from '@sanity/ui/css'
+import type {FlexStyleProps} from '@sanity/ui/css'
 import {FlexValue} from '@sanity/ui/css'
 import {FlexWrap} from '@sanity/ui/css'
-import {FontCodeSize} from '@sanity/ui/theme'
-import {FontHeadingSize} from '@sanity/ui/theme'
-import {FontLabelSize} from '@sanity/ui/theme'
+import type {FontCodeSize} from '@sanity/ui/theme'
+import type {FontHeadingSize} from '@sanity/ui/theme'
+import type {FontLabelSize} from '@sanity/ui/theme'
 import {FontStyleProps} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
+import type {FontTextSize} from '@sanity/ui/theme'
 import {ForwardedRef} from 'react'
 import type {FunctionComponent} from 'react'
 import {GapStyleProps} from '@sanity/ui/css'
@@ -43,7 +45,7 @@ import {GridItemColumnStart} from '@sanity/ui/css'
 import {GridItemRow} from '@sanity/ui/css'
 import {GridItemRowEnd} from '@sanity/ui/css'
 import {GridItemRowStart} from '@sanity/ui/css'
-import {GridStyleProps} from '@sanity/ui/css'
+import type {GridStyleProps} from '@sanity/ui/css'
 import {HeadingStyleProps} from '@sanity/ui/css'
 import {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
 import {HSL as HSL_2} from '@sanity/ui/theme'
@@ -66,7 +68,7 @@ import {Radius} from '@sanity/ui/theme'
 import {RadiusStyleProps} from '@sanity/ui/css'
 import {ReactElement} from 'react'
 import {ReactNode} from 'react'
-import {ReactPortal} from 'react'
+import type {ReactPortal} from 'react'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
 import {rem} from '@sanity/ui/css'
@@ -80,18 +82,17 @@ import {screen as screen_3} from '@sanity/ui/theme'
 import {SelectStyleProps} from '@sanity/ui/css'
 import {ShadowStyleProps} from '@sanity/ui/css'
 import {SkeletonStyleProps} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 import {TextAlign} from '@sanity/ui/css'
 import {TextAreaStyleProps} from '@sanity/ui/css'
 import {TextOverflowStyleProps} from '@sanity/ui/css'
 import {TextStyleProps} from '@sanity/ui/css'
 import {Theme as Theme_2} from '@sanity/ui/theme'
 import {Theme_v2} from '@sanity/ui/theme'
-import {Theme_v3} from '@sanity/ui/theme'
 import {ThemeAvatar} from '@sanity/ui/theme'
 import {ThemeBoxShadow} from '@sanity/ui/theme'
 import {ThemeColor} from '@sanity/ui/theme'
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import type {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {ThemeColorBase} from '@sanity/ui/theme'
 import {ThemeColorBuilderOpts} from '@sanity/ui/theme'
 import {ThemeColorButton} from '@sanity/ui/theme'
@@ -119,7 +120,7 @@ import {ThemeColorSolid} from '@sanity/ui/theme'
 import {ThemeColorSolidTone} from '@sanity/ui/theme'
 import {ThemeColorSpot} from '@sanity/ui/theme'
 import {ThemeColorSpotKey} from '@sanity/ui/theme'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {ThemeColorSyntax as ThemeColorSyntax_2} from '@sanity/ui/theme'
 import {ThemeColorToneKey} from '@sanity/ui/theme'
 import {ThemeFont as ThemeFont_2} from '@sanity/ui/theme'
@@ -381,7 +382,7 @@ export declare interface AvatarOwnProps {
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  color?: ThemeColorAvatarColorKey
+  color?: AvatarColor
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: ResponsiveProp<AvatarSize>
@@ -538,6 +539,7 @@ export declare type BoxElementType =
   | 'article'
   | 'aside'
   | 'blockquote'
+  | 'body'
   | 'button'
   | 'details'
   | 'div'
@@ -547,6 +549,7 @@ export declare type BoxElementType =
   | 'figcaption'
   | 'footer'
   | 'form'
+  | 'html'
   | 'iframe'
   | 'kbd'
   | 'label'
@@ -635,7 +638,7 @@ export declare type ButtonOwnProps = ButtonStyleProps &
     'data-ui'?: string
     'disabled'?: boolean
     'fontSize'?: ResponsiveProp<FontTextSize>
-    'mode'?: ButtonMode
+    'mode'?: ThemeColorButtonModeKey_2
     'icon'?: ElementType_2 | ReactNode
     'iconRight'?: ElementType_2 | ReactNode
     'justify'?: FlexStyleProps['justify']
@@ -650,7 +653,7 @@ export declare type ButtonOwnProps = ButtonStyleProps &
     'text'?: ReactNode
     'textOverflow'?: TextOwnProps['textOverflow']
     'textWeight'?: TextOwnProps['weight']
-    'tone'?: ButtonTone
+    'tone'?: ThemeColorStateToneKey
     'width'?: ResponsiveProp<Width>
   }
 
@@ -1666,7 +1669,7 @@ export declare interface LayerProviderProps {
  */
 export declare interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 /**
@@ -1987,7 +1990,7 @@ export declare type PopoverProps<E extends PopoverElementType = PopoverElementTy
 export declare type PopoverUpdateCallback = () => void
 
 /** @public */
-export declare type PopoverWidth = number | 'auto'
+export declare type PopoverWidth = Exclude<ContainerWidth, 'auto'>
 
 /** @public */
 export declare function Portal(props: PortalProps): ReactPortal | null
@@ -2432,7 +2435,7 @@ export declare type StackProps<E extends StackElementType = StackElementType> =
 export declare type Styles = ThemeStyles
 
 /** @beta */
-export declare function StyleTags(props: {theme?: Theme_v3}): ReactNode
+export declare function StyleTags(): ReactNode
 
 export declare namespace StyleTags {
   var displayName: string
@@ -2524,7 +2527,7 @@ export declare type TabOwnProps = {
   'label'?: ReactNode
   'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
-  'tone'?: ButtonTone
+  'tone'?: ThemeColorStateToneKey
 }
 
 /** @public */
@@ -3166,7 +3169,7 @@ export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T
 /** @public */
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
-export declare function useCard(): CardContextValue_2 | null
+export declare function useCard(): CardContextValue | null
 
 /**
  * @public
@@ -3264,7 +3267,7 @@ export declare function useMatchMedia(
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useMediaIndex(): number
+export declare function useMediaIndex(): Breakpoint
 
 /** @public */
 export declare function usePortal(): PortalContextValue

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import type {AvatarColor} from '@sanity/ui/theme'
 import {AvatarSize} from '@sanity/ui/theme'
 import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
 import {Display as BoxDisplay} from '@sanity/ui/css'
@@ -5,17 +6,18 @@ import {BoxHeight} from '@sanity/ui/css'
 import {BoxOverflow} from '@sanity/ui/css'
 import {BoxSizing} from '@sanity/ui/css'
 import type {BoxStyleProps} from '@sanity/ui/css'
+import {Breakpoint} from '@sanity/ui/css'
 import type {ButtonStyleProps} from '@sanity/ui/css'
-import {CardContextValue as CardContextValue_2} from './types'
 import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} from 'react'
 import type {ComponentClass} from 'react'
 import type {ComponentProps} from 'react'
-import {ComponentType as ComponentType_2} from 'react'
+import type {ComponentType as ComponentType_2} from 'react'
 import {ContainerStyleProps} from '@sanity/ui/css'
+import type {ContainerWidth} from '@sanity/ui/theme'
 import {Context} from 'react'
 import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
+import type {CSSObject} from '@sanity/ui/theme'
 import type {DisplayStyleProps} from '@sanity/ui/css'
 import {ElementType as ElementType_2} from 'react'
 import {ErrorInfo} from 'react'
@@ -23,14 +25,14 @@ import type {ExoticComponent} from 'react'
 import {FlexAlign} from '@sanity/ui/css'
 import {FlexDirection} from '@sanity/ui/css'
 import {FlexJustify} from '@sanity/ui/css'
-import {FlexStyleProps} from '@sanity/ui/css'
+import type {FlexStyleProps} from '@sanity/ui/css'
 import {FlexValue} from '@sanity/ui/css'
 import {FlexWrap} from '@sanity/ui/css'
-import {FontCodeSize} from '@sanity/ui/theme'
-import {FontHeadingSize} from '@sanity/ui/theme'
-import {FontLabelSize} from '@sanity/ui/theme'
+import type {FontCodeSize} from '@sanity/ui/theme'
+import type {FontHeadingSize} from '@sanity/ui/theme'
+import type {FontLabelSize} from '@sanity/ui/theme'
 import {FontStyleProps} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
+import type {FontTextSize} from '@sanity/ui/theme'
 import {ForwardedRef} from 'react'
 import type {FunctionComponent} from 'react'
 import {GapStyleProps} from '@sanity/ui/css'
@@ -43,7 +45,7 @@ import {GridItemColumnStart} from '@sanity/ui/css'
 import {GridItemRow} from '@sanity/ui/css'
 import {GridItemRowEnd} from '@sanity/ui/css'
 import {GridItemRowStart} from '@sanity/ui/css'
-import {GridStyleProps} from '@sanity/ui/css'
+import type {GridStyleProps} from '@sanity/ui/css'
 import {HeadingStyleProps} from '@sanity/ui/css'
 import {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
 import {HSL as HSL_2} from '@sanity/ui/theme'
@@ -66,7 +68,7 @@ import {Radius} from '@sanity/ui/theme'
 import {RadiusStyleProps} from '@sanity/ui/css'
 import {ReactElement} from 'react'
 import {ReactNode} from 'react'
-import {ReactPortal} from 'react'
+import type {ReactPortal} from 'react'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
 import {rem} from '@sanity/ui/css'
@@ -80,18 +82,17 @@ import {screen as screen_3} from '@sanity/ui/theme'
 import {SelectStyleProps} from '@sanity/ui/css'
 import {ShadowStyleProps} from '@sanity/ui/css'
 import {SkeletonStyleProps} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 import {TextAlign} from '@sanity/ui/css'
 import {TextAreaStyleProps} from '@sanity/ui/css'
 import {TextOverflowStyleProps} from '@sanity/ui/css'
 import {TextStyleProps} from '@sanity/ui/css'
 import {Theme as Theme_2} from '@sanity/ui/theme'
 import {Theme_v2} from '@sanity/ui/theme'
-import {Theme_v3} from '@sanity/ui/theme'
 import {ThemeAvatar} from '@sanity/ui/theme'
 import {ThemeBoxShadow} from '@sanity/ui/theme'
 import {ThemeColor} from '@sanity/ui/theme'
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import type {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {ThemeColorBase} from '@sanity/ui/theme'
 import {ThemeColorBuilderOpts} from '@sanity/ui/theme'
 import {ThemeColorButton} from '@sanity/ui/theme'
@@ -119,7 +120,7 @@ import {ThemeColorSolid} from '@sanity/ui/theme'
 import {ThemeColorSolidTone} from '@sanity/ui/theme'
 import {ThemeColorSpot} from '@sanity/ui/theme'
 import {ThemeColorSpotKey} from '@sanity/ui/theme'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {ThemeColorSyntax as ThemeColorSyntax_2} from '@sanity/ui/theme'
 import {ThemeColorToneKey} from '@sanity/ui/theme'
 import {ThemeFont as ThemeFont_2} from '@sanity/ui/theme'
@@ -381,7 +382,7 @@ export declare interface AvatarOwnProps {
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  color?: ThemeColorAvatarColorKey
+  color?: AvatarColor
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: ResponsiveProp<AvatarSize>
@@ -538,6 +539,7 @@ export declare type BoxElementType =
   | 'article'
   | 'aside'
   | 'blockquote'
+  | 'body'
   | 'button'
   | 'details'
   | 'div'
@@ -547,6 +549,7 @@ export declare type BoxElementType =
   | 'figcaption'
   | 'footer'
   | 'form'
+  | 'html'
   | 'iframe'
   | 'kbd'
   | 'label'
@@ -635,7 +638,7 @@ export declare type ButtonOwnProps = ButtonStyleProps &
     'data-ui'?: string
     'disabled'?: boolean
     'fontSize'?: ResponsiveProp<FontTextSize>
-    'mode'?: ButtonMode
+    'mode'?: ThemeColorButtonModeKey_2
     'icon'?: ElementType_2 | ReactNode
     'iconRight'?: ElementType_2 | ReactNode
     'justify'?: FlexStyleProps['justify']
@@ -650,7 +653,7 @@ export declare type ButtonOwnProps = ButtonStyleProps &
     'text'?: ReactNode
     'textOverflow'?: TextOwnProps['textOverflow']
     'textWeight'?: TextOwnProps['weight']
-    'tone'?: ButtonTone
+    'tone'?: ThemeColorStateToneKey
     'width'?: ResponsiveProp<Width>
   }
 
@@ -1666,7 +1669,7 @@ export declare interface LayerProviderProps {
  */
 export declare interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 /**
@@ -1987,7 +1990,7 @@ export declare type PopoverProps<E extends PopoverElementType = PopoverElementTy
 export declare type PopoverUpdateCallback = () => void
 
 /** @public */
-export declare type PopoverWidth = number | 'auto'
+export declare type PopoverWidth = Exclude<ContainerWidth, 'auto'>
 
 /** @public */
 export declare function Portal(props: PortalProps): ReactPortal | null
@@ -2432,7 +2435,7 @@ export declare type StackProps<E extends StackElementType = StackElementType> =
 export declare type Styles = ThemeStyles
 
 /** @beta */
-export declare function StyleTags(props: {theme?: Theme_v3}): ReactNode
+export declare function StyleTags(): ReactNode
 
 export declare namespace StyleTags {
   var displayName: string
@@ -2524,7 +2527,7 @@ export declare type TabOwnProps = {
   'label'?: ReactNode
   'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
-  'tone'?: ButtonTone
+  'tone'?: ThemeColorStateToneKey
 }
 
 /** @public */
@@ -3166,7 +3169,7 @@ export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T
 /** @public */
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
-export declare function useCard(): CardContextValue_2 | null
+export declare function useCard(): CardContextValue | null
 
 /**
  * @public
@@ -3264,7 +3267,7 @@ export declare function useMatchMedia(
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useMediaIndex(): number
+export declare function useMediaIndex(): Breakpoint
 
 /** @public */
 export declare function usePortal(): PortalContextValue

package/dist/index.js

@@ -1,11 +1,11 @@
-import { createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, buildTheme_v3 } from "@sanity/ui/theme";
+import { createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1 } from "@sanity/ui/theme";
 import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Container, Layer, Grid, LayerProvider, isRecord, Selectable } from "./_chunks-es/_visual-editing.js";
 import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, CardProvider, Checkbox, DEFAULT_ARROW_ELEMENT, DEFAULT_AVATAR_COUNTER_ELEMENT, DEFAULT_AVATAR_ELEMENT, DEFAULT_AVATAR_STACK_ELEMENT, DEFAULT_BADGE_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_CHECKBOX_ELEMENT, DEFAULT_CODE_ELEMENT, DEFAULT_CONTAINER_ELEMENT, DEFAULT_ELEMENT_QUERY_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HEADING_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_INLINE_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LABEL_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_POPOVER_ELEMENT, DEFAULT_RADIO_ELEMENT, DEFAULT_SELECT_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_SR_ONLY_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_SWITCH_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TEXT_AREA_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, DEFAULT_VIRTUAL_LIST_ELEMENT, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _getArrayProp, _isScrollable, useCard, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.js";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { ChevronDownIcon, CloseIcon, ToggleArrowRightIcon } from "@sanity/icons";
 import { useState, useRef, useEffect, useImperativeHandle, Component, useReducer, useCallback, useMemo, cloneElement, Children, isValidElement, Fragment, useContext, useSyncExternalStore, startTransition, memo, useId } from "react";
 import { c } from "react-compiler-runtime";
-import { composeClassNames, breadcrumbs, dialogCardRoot, dialogLayout, dialogHeader, dialogContent, dialogFooter, dialog, dialogContainer, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, toast, toastLoadingBar, toastLoadingBarMask, toastLoadingBarProgress, toastLayer, treeItem, _compilePalette, _compileTheme, _compileSystem } from "@sanity/ui/css";
+import { _composeClassNames, breadcrumbs, dialogCardRoot, dialogLayout, dialogHeader, dialogContent, dialogFooter, dialog, dialogContainer, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, toast, toastLoadingBar, toastLoadingBarMask, toastLoadingBarProgress, toastLayer, vars, treeItem, _compileTheme, _compileSystem } from "@sanity/ui/css";
 import { px, rem } from "@sanity/ui/css";
 import { motion, AnimatePresence } from "framer-motion";
 const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1;
@@ -383,7 +383,7 @@ function Autocomplete(props) {
     dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
   }, [openButtonProps, dispatchOpen]), openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Open", disabled: expanded, display: "block", fontSize, icon: ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsx(TextInput, { ...rest, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", as, border, clearButton, customValidity, disabled, fontSize, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = useCallback((event_5) => {
     event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, [listFocused]), content2 = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
+  }, [listFocused]), content2 = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", gap: 1, id: listBoxId, ref: listBoxElementRef, role: "listbox", children: filteredOptions.map((option_0) => {
     const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
     return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: cloneElement(renderOption(option_0), {
       disabled: loading,
@@ -428,11 +428,11 @@ function Breadcrumbs(props) {
     const len = rawItems.length;
     if (maxLength && len > maxLength) {
       const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
-      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsx(Popover, { constrainSize: !0, content: /* @__PURE__ */ jsx(Stack, { as: "ol", overflow: "auto", space: gapY, children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, padding: 2, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", padding: 0, text: "\u2026", ...expandButtonProps, onClick: open ? collapse : expand, ref: expandElementRef, selected: open }) }, "button"), ...rawItems.slice(len - afterLength)];
+      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsx(Popover, { constrainSize: !0, content: /* @__PURE__ */ jsx(Stack, { as: "ol", gap: gapY, overflow: "auto", children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, padding: 2, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", padding: 0, text: "\u2026", ...expandButtonProps, onClick: open ? collapse : expand, ref: expandElementRef, selected: open }) }, "button"), ...rawItems.slice(len - afterLength)];
     }
     return rawItems;
   }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems]);
-  return /* @__PURE__ */ jsx(Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: composeClassNames(className, breadcrumbs()), gapX, gapY, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: _composeClassNames(className, breadcrumbs()), gapX, gapY, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
     itemIndex > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, as: "li", children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) }),
     /* @__PURE__ */ jsx(Box, { as: "li", children: item })
   ] }, itemIndex)) });
@@ -578,7 +578,7 @@ function Dialog(props) {
   }, $[26] = boundaryElement, $[27] = portalElement, $[28] = t9) : t9 = $[28];
   const handleRootClick = t9;
   let t10;
-  $[29] !== className ? (t10 = composeClassNames(className, dialog()), $[29] = className, $[30] = t10) : t10 = $[30];
+  $[29] !== className ? (t10 = _composeClassNames(className, dialog()), $[29] = className, $[30] = t10) : t10 = $[30];
   const t11 = animate ? "" : void 0;
   let t12;
   $[31] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }), $[31] = t12) : t12 = $[31];
@@ -788,7 +788,7 @@ function Skeleton(props) {
     };
   }, t3 = [delay], $[6] = delay, $[7] = t2, $[8] = t3) : (t2 = $[7], t3 = $[8]), useEffect(t2, t3);
   let t4;
-  $[9] !== className || $[10] !== radius ? (t4 = composeClassNames(className, skeleton({
+  $[9] !== className || $[10] !== radius ? (t4 = _composeClassNames(className, skeleton({
     radius
   })), $[9] = className, $[10] = radius, $[11] = t4) : t4 = $[11];
   const t5 = animated ? "" : void 0, t6 = visible ? "" : void 0;
@@ -807,7 +807,7 @@ function CodeSkeleton(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = rest, $[3] = t1) : (className = $[1], rest = $[2], t1 = $[3]);
   const size = t1 === void 0 ? 2 : t1;
   let t2;
-  $[4] !== className || $[5] !== size ? (t2 = composeClassNames(className, codeSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = _composeClassNames(className, codeSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -825,7 +825,7 @@ function HeadingSkeleton(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = rest, $[3] = t1) : (className = $[1], rest = $[2], t1 = $[3]);
   const size = t1 === void 0 ? 2 : t1;
   let t2;
-  $[4] !== className || $[5] !== size ? (t2 = composeClassNames(className, headingSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = _composeClassNames(className, headingSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -843,7 +843,7 @@ function LabelSkeleton(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = rest, $[3] = t1) : (className = $[1], rest = $[2], t1 = $[3]);
   const size = t1 === void 0 ? 2 : t1;
   let t2;
-  $[4] !== className || $[5] !== size ? (t2 = composeClassNames(className, labelSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = _composeClassNames(className, labelSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -861,7 +861,7 @@ function TextSkeleton(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = rest, $[3] = t1) : (className = $[1], rest = $[2], t1 = $[3]);
   const size = t1 === void 0 ? 2 : t1;
   let t2;
-  $[4] !== className || $[5] !== size ? (t2 = composeClassNames(className, textSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = _composeClassNames(className, textSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -870,15 +870,17 @@ function TextSkeleton(props) {
 TextSkeleton.displayName = "TextSkeleton";
 const DEFAULT_TAB_PANEL_ELEMENT = "div";
 function TabPanel(props) {
-  const $ = c(8), t0 = props;
-  let rest, t1;
+  const $ = c(10), t0 = props;
+  let children, rest, t1, tabIndex;
   $[0] !== t0 ? ({
     as: t1,
+    children,
+    tabIndex,
     ...rest
-  } = t0, $[0] = t0, $[1] = rest, $[2] = t1) : (rest = $[1], t1 = $[2]);
-  const as = t1 === void 0 ? DEFAULT_TAB_PANEL_ELEMENT : t1, t2 = props.tabIndex === void 0 ? 0 : props.tabIndex;
+  } = t0, $[0] = t0, $[1] = children, $[2] = rest, $[3] = t1, $[4] = tabIndex) : (children = $[1], rest = $[2], t1 = $[3], tabIndex = $[4]);
+  const as = t1 === void 0 ? DEFAULT_TAB_PANEL_ELEMENT : t1, t2 = tabIndex === void 0 ? 0 : tabIndex;
   let t3;
-  return $[3] !== as || $[4] !== props.children || $[5] !== rest || $[6] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "TabPanel", ...rest, as, role: "tabpanel", tabIndex: t2, children: props.children }), $[3] = as, $[4] = props.children, $[5] = rest, $[6] = t2, $[7] = t3) : t3 = $[7], t3;
+  return $[5] !== as || $[6] !== children || $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "TabPanel", ...rest, as, role: "tabpanel", tabIndex: t2, children }), $[5] = as, $[6] = children, $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
 TabPanel.displayName = "TabPanel";
 const DEFAULT_TOAST_ELEMENT = "li", ROLES = {
@@ -939,7 +941,7 @@ function Toast(props) {
   let t10;
   $[19] !== description || $[20] !== transition ? (t10 = description && /* @__PURE__ */ jsx(MotionText, { muted: !0, size: 1, variants: content, transition, children: description }), $[19] = description, $[20] = transition, $[21] = t10) : t10 = $[21];
   let t11;
-  $[22] !== t10 || $[23] !== t9 ? (t11 = /* @__PURE__ */ jsx(Flex, { flex: 1, overflowX: "auto", padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+  $[22] !== t10 || $[23] !== t9 ? (t11 = /* @__PURE__ */ jsx(Flex, { flex: 1, overflowX: "auto", padding: 3, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
     t9,
     t10
   ] }) }), $[22] = t10, $[23] = t9, $[24] = t11) : t11 = $[24];
@@ -1393,42 +1395,28 @@ function TreeItem(props) {
     ] }),
     /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text }) })
   ] });
-  return href ? /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...rest, as: "li", className: composeClassNames(className, treeItem()), onClick: handleClick, ref: rootRef, role: "none", children: [
+  return href ? /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...rest, as: "li", className: _composeClassNames(className, treeItem()), onClick: handleClick, ref: rootRef, role: "none", children: [
     /* @__PURE__ */ jsx(Selectable, { "aria-expanded": expanded, as: linkAs, "data-pressed": selected ? "" : void 0, "data-ui": "TreeItem__box", href, radius, ref: treeitemRef, role: "treeitem", tabIndex, style: {
-      paddingLeft: `calc(var(--space-2) * ${tree.level})`
+      paddingLeft: `calc(${vars.space[2]} * ${tree.level})`
     }, children: content2 }),
     /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...rest, "aria-expanded": expanded, className: composeClassNames(className, treeItem()), onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
+  ] }) : /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...rest, "aria-expanded": expanded, className: _composeClassNames(className, treeItem()), onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
     /* @__PURE__ */ jsx(Selectable, { as: "button", "data-pressed": selected ? "" : void 0, "data-ui": "TreeItem__box", radius, style: {
-      paddingLeft: `calc(var(--space-2) * ${tree.level})`
+      paddingLeft: `calc(${vars.space[2]} * ${tree.level})`
     }, children: content2 }),
     /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
   ] });
 }
 TreeItem.displayName = "TreeItem";
-function StyleTags(props) {
-  const $ = c(10), {
-    theme: themeProp
-  } = props;
+function StyleTags() {
+  const $ = c(2);
   let t0;
-  $[0] !== themeProp ? (t0 = themeProp ?? buildTheme_v3(), $[0] = themeProp, $[1] = t0) : t0 = $[1];
-  const theme = t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("style", { href: "sanity-theme", precedence: "theme", children: _compileTheme() }), $[0] = t0) : t0 = $[0];
   let t1;
-  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx("style", { href: "sanity-palette", precedence: "palette", children: _compilePalette() }), $[2] = t1) : t1 = $[2];
-  let t2;
-  $[3] !== theme ? (t2 = _compileTheme({
-    v3: theme
-  }), $[3] = theme, $[4] = t2) : t2 = $[4];
-  let t3;
-  $[5] !== t2 ? (t3 = /* @__PURE__ */ jsx("style", { href: "sanity-theme", precedence: "theme", children: t2 }), $[5] = t2, $[6] = t3) : t3 = $[6];
-  let t4;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx("style", { href: "sanity-system", precedence: "system", children: _compileSystem() }), $[7] = t4) : t4 = $[7];
-  let t5;
-  return $[8] !== t3 ? (t5 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    t1,
-    t3,
-    t4
-  ] }), $[8] = t3, $[9] = t5) : t5 = $[9], t5;
+  return $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    t0,
+    /* @__PURE__ */ jsx("style", { href: "sanity-system", precedence: "system", children: _compileSystem() })
+  ] }), $[1] = t1) : t1 = $[1], t1;
 }
 StyleTags.displayName = "StyleTags";
 export {