@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

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 } 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 { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, _getArrayProp, EMPTY_ARRAY, useElementSize, useResponsiveProp, Box, Text, useCustomValidity, BoundaryElementContext, Code, _ResizeObserver, useDelayedState, TooltipDelayGroupContext, _isEnterToClickElement, Card, EMPTY_RECORD, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Layer, Grid, LayerProvider, isRecord, Selectable } from "./_chunks-es/_visual-editing.js";
+import { Arrow, CardProvider, DEFAULT_ARROW_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_CODE_ELEMENT, DEFAULT_ELEMENT_QUERY_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_POPOVER_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, ElementQuery, Hotkeys, KBD, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Spinner, Tab, TabList, ThemeColorProvider, ThemeProvider, Tooltip, _elementSizeObserver, _getResponsiveProp, useCard, 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 { CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ToggleArrowRightIcon } from "@sanity/icons";
+import { useState, useRef, useEffect, useImperativeHandle, Children, isValidElement, Fragment, cloneElement, Component, useReducer, useCallback, useMemo, 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, vars, treeItem, _compileTheme, _compileSystem } from "@sanity/ui/css";
+import { label, textOverflow, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, container as container$1, heading, srOnly, vars, radio, radioInput, radioPresentation, select, _inputElement, selectPresentation, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, _inputPresentation, breadcrumbs, dialogCard, dialogLayout, dialogHeader, dialogContent, dialogFooter, dialog, dialogContainer, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, toast, toastLayer, treeItem } 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;
@@ -60,6 +60,18 @@ function focusLastDescendant(element) {
   }
   return !1;
 }
+function _isScrollable(el) {
+  if (!(el instanceof Element)) return !1;
+  const style = window.getComputedStyle(el);
+  return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
+}
+function useArrayProp(val, defaultVal) {
+  const $ = c(3);
+  let t0;
+  $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getArrayProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
+  const [t1, setCache] = useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
+  return hash !== cachedHash && setCache([_getArrayProp(val, defaultVal), hash]), cachedVal;
+}
 function _getElements(element, elementsArg) {
   const ret = [element];
   for (const el of elementsArg)
@@ -115,6 +127,322 @@ function useForwardedRef(ref) {
   let t0;
   return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], useImperativeHandle(ref, t0), innerRef;
 }
+const DEFAULT_LABEL_ELEMENT = "div";
+function Label(props) {
+  const $ = c(28);
+  let accent, align, children, className, rest, t0, t1, t2, t3, textOverflowProp;
+  $[0] !== props ? ({
+    accent,
+    align,
+    as: t0,
+    children,
+    className,
+    muted: t1,
+    size: t2,
+    textOverflow: textOverflowProp,
+    weight: t3,
+    ...rest
+  } = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = children, $[4] = className, $[5] = rest, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = textOverflowProp) : (accent = $[1], align = $[2], children = $[3], className = $[4], rest = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9], textOverflowProp = $[10]);
+  const Element2 = t0 === void 0 ? DEFAULT_LABEL_ELEMENT : t0, muted = t1 === void 0 ? !1 : t1, size = t2 === void 0 ? 1 : t2, weight = t3 === void 0 ? "regular" : t3;
+  let t4;
+  $[11] !== accent || $[12] !== align || $[13] !== className || $[14] !== muted || $[15] !== size || $[16] !== weight ? (t4 = label({
+    className,
+    accent,
+    align,
+    muted,
+    size,
+    weight
+  }), $[11] = accent, $[12] = align, $[13] = className, $[14] = muted, $[15] = size, $[16] = weight, $[17] = t4) : t4 = $[17];
+  let t5;
+  $[18] !== textOverflowProp ? (t5 = textOverflow({
+    textOverflow: textOverflowProp
+  }), $[18] = textOverflowProp, $[19] = t5) : t5 = $[19];
+  let t6;
+  $[20] !== children || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx("span", { className: t5, children }), $[20] = children, $[21] = t5, $[22] = t6) : t6 = $[22];
+  let t7;
+  return $[23] !== Element2 || $[24] !== rest || $[25] !== t4 || $[26] !== t6 ? (t7 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Label", ...rest, className: t4, children: t6 }), $[23] = Element2, $[24] = rest, $[25] = t4, $[26] = t6, $[27] = t7) : t7 = $[27], t7;
+}
+const DEFAULT_AVATAR_ELEMENT = "span";
+function Avatar(props) {
+  const $ = c(51), t0 = props;
+  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, className, initials, onImageLoadError, rest, src, t1, t2, t3, t4, title;
+  $[0] !== t0 ? ({
+    __unstable_hideInnerStroke,
+    as: t1,
+    className,
+    color: t2,
+    src,
+    title,
+    initials,
+    onImageLoadError,
+    arrowPosition: arrowPositionProp,
+    animateArrowFrom,
+    status: t3,
+    size: t4,
+    ...rest
+  } = t0, $[0] = t0, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = className, $[5] = initials, $[6] = onImageLoadError, $[7] = rest, $[8] = src, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], className = $[4], initials = $[5], onImageLoadError = $[6], rest = $[7], src = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], title = $[13]);
+  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "magenta" : t2, sizeProp = t4 === void 0 ? 1 : t4, size = useResponsiveProp(sizeProp), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = useState(!1);
+  let t5, t6;
+  $[14] !== arrowPosition || $[15] !== arrowPositionProp ? (t5 = () => {
+    if (arrowPosition === arrowPositionProp)
+      return;
+    const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
+    return () => cancelAnimationFrame(raf);
+  }, t6 = [arrowPosition, arrowPositionProp], $[14] = arrowPosition, $[15] = arrowPositionProp, $[16] = t5, $[17] = t6) : (t5 = $[16], t6 = $[17]), useEffect(t5, t6);
+  let t7, t8;
+  $[18] !== src ? (t7 = () => {
+    src && setImageError(!1);
+  }, t8 = [src], $[18] = src, $[19] = t7, $[20] = t8) : (t7 = $[19], t8 = $[20]), useEffect(t7, t8);
+  let t9;
+  $[21] !== onImageLoadError ? (t9 = () => {
+    setImageError(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
+  }, $[21] = onImageLoadError, $[22] = t9) : t9 = $[22];
+  const handleImageError = t9;
+  let t10, t11;
+  $[23] !== size ? (t11 = Object.values(size).map(_temp$4), $[23] = size, $[24] = t11) : t11 = $[24], t10 = t11;
+  const initialsSize = t10, t12 = __unstable_hideInnerStroke ? "" : void 0;
+  let t13;
+  $[25] !== className || $[26] !== color || $[27] !== sizeProp ? (t13 = avatar({
+    className,
+    color,
+    size: sizeProp
+  }), $[25] = className, $[26] = color, $[27] = sizeProp, $[28] = t13) : t13 = $[28];
+  const t14 = imageError ? "" : void 0;
+  let t15;
+  $[29] === Symbol.for("react.memo_cache_sentinel") ? (t15 = avatarArrow(), $[29] = t15) : t15 = $[29];
+  let t16;
+  $[30] !== color ? (t16 = /* @__PURE__ */ jsx("span", { className: t15, children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[30] = color, $[31] = t16) : t16 = $[31];
+  let t17;
+  $[32] === Symbol.for("react.memo_cache_sentinel") ? (t17 = avatarInitials(), $[32] = t17) : t17 = $[32];
+  let t18;
+  $[33] !== initials || $[34] !== initialsSize ? (t18 = /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: t17, display: "flex", justifyContent: "center", position: "absolute", inset: 0, children: /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: initialsSize, weight: "medium", children: initials }) }), $[33] = initials, $[34] = initialsSize, $[35] = t18) : t18 = $[35];
+  let t19;
+  $[36] !== handleImageError || $[37] !== initials || $[38] !== src ? (t19 = src && /* @__PURE__ */ jsxs(Box, { className: avatarImage(), inset: 0, position: "absolute", children: [
+    /* @__PURE__ */ jsx("img", { alt: initials, onError: handleImageError, src }),
+    /* @__PURE__ */ jsx("span", { className: avatarImageOutline() })
+  ] }), $[36] = handleImageError, $[37] = initials, $[38] = src, $[39] = t19) : t19 = $[39];
+  let t20;
+  return $[40] !== Element2 || $[41] !== arrowPosition || $[42] !== rest || $[43] !== t12 || $[44] !== t13 || $[45] !== t14 || $[46] !== t16 || $[47] !== t18 || $[48] !== t19 || $[49] !== title ? (t20 = /* @__PURE__ */ jsxs(Element2, { "data-hide-inner-stroke": t12, "data-ui": "Avatar", ...rest, "aria-label": title, className: t13, "data-arrow-position": arrowPosition, "data-image-error": t14, title, children: [
+    t16,
+    t18,
+    t19
+  ] }), $[40] = Element2, $[41] = arrowPosition, $[42] = rest, $[43] = t12, $[44] = t13, $[45] = t14, $[46] = t16, $[47] = t18, $[48] = t19, $[49] = title, $[50] = t20) : t20 = $[50], t20;
+}
+function _temp$4(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
+const DEFAULT_AVATAR_COUNTER_ELEMENT = "div";
+function AvatarCounter(props) {
+  const $ = c(19), t0 = props;
+  let className, count, rest, t1, t2;
+  $[0] !== t0 ? ({
+    as: t1,
+    className,
+    count,
+    size: t2,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = count, $[3] = rest, $[4] = t1, $[5] = t2) : (className = $[1], count = $[2], rest = $[3], t1 = $[4], t2 = $[5]);
+  const as = t1 === void 0 ? DEFAULT_AVATAR_COUNTER_ELEMENT : t1, size = useResponsiveProp(t2 === void 0 ? 1 : t2);
+  let t3, t4;
+  $[6] !== size ? (t4 = Object.values(size).map(_temp$3), $[6] = size, $[7] = t4) : t4 = $[7], t3 = t4;
+  const labelSize = t3;
+  let t5;
+  $[8] !== className || $[9] !== size ? (t5 = avatarCounter({
+    className,
+    size
+  }), $[8] = className, $[9] = size, $[10] = t5) : t5 = $[10];
+  let t6;
+  $[11] !== count || $[12] !== labelSize ? (t6 = /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: labelSize, weight: "medium", children: count }), $[11] = count, $[12] = labelSize, $[13] = t6) : t6 = $[13];
+  let t7;
+  return $[14] !== as || $[15] !== rest || $[16] !== t5 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsx(Box, { "data-ui": "AvatarCounter", ...rest, alignItems: "center", as, className: t5, display: "flex", flex: "none", justifyContent: "center", paddingX: 2, sizing: "border", children: t6 }), $[14] = as, $[15] = rest, $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18], t7;
+}
+function _temp$3(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
+const DEFAULT_AVATAR_STACK_ELEMENT = "div";
+function AvatarStack(props) {
+  const $ = c(20), t0 = props;
+  let childrenProp, className, rest, t1, t2, t3;
+  $[0] !== t0 ? ({
+    as: t1,
+    children: childrenProp,
+    className,
+    maxLength: t2,
+    size: t3,
+    ...rest
+  } = t0, $[0] = t0, $[1] = childrenProp, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3) : (childrenProp = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6]);
+  const as = t1 === void 0 ? DEFAULT_AVATAR_STACK_ELEMENT : t1, maxLengthProp = t2 === void 0 ? 4 : t2, sizeProp = t3 === void 0 ? 1 : t3, children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0), size = useResponsiveProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = Box, t4 = "AvatarStack", t5 = "center";
+  let t6;
+  $[7] !== className || $[8] !== size ? (t6 = avatarStack({
+    className,
+    size
+  }), $[7] = className, $[8] = size, $[9] = t6) : t6 = $[9];
+  const t7 = "flex", t8 = "flex-start", t9 = len === 0 && /* @__PURE__ */ jsx(AvatarCounter, { count: len, size }), t10 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size });
+  let t11;
+  $[10] !== size ? (t11 = (child, childIndex) => /* @__PURE__ */ jsx(Fragment, { children: cloneElement(child, {
+    size
+  }) }, String(childIndex)), $[10] = size, $[11] = t11) : t11 = $[11];
+  const t12 = visibleChildren.map(t11);
+  let t13;
+  return $[12] !== T0 || $[13] !== as || $[14] !== rest || $[15] !== t10 || $[16] !== t12 || $[17] !== t6 || $[18] !== t9 ? (t13 = /* @__PURE__ */ jsxs(T0, { "data-ui": t4, ...rest, alignItems: t5, as, className: t6, display: t7, justifyContent: t8, children: [
+    t9,
+    t10,
+    t12
+  ] }), $[12] = T0, $[13] = as, $[14] = rest, $[15] = t10, $[16] = t12, $[17] = t6, $[18] = t9, $[19] = t13) : t13 = $[19], t13;
+}
+const DEFAULT_BADGE_ELEMENT = "span";
+function Badge(props) {
+  const $ = c(22), t0 = props;
+  let children, className, rest, t1, t2, t3, t4, t5;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    className,
+    fontSize: t2,
+    padding: t3,
+    radius: t4,
+    tone: t5,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5) : (children = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8]);
+  const as = t1 === void 0 ? DEFAULT_BADGE_ELEMENT : t1, fontSize = t2 === void 0 ? 1 : t2, padding = t3 === void 0 ? 1 : t3, radius = t4 === void 0 ? 2 : t4, tone = t5 === void 0 ? "default" : t5;
+  let t6;
+  $[9] !== className || $[10] !== tone ? (t6 = badge({
+    className,
+    tone
+  }), $[9] = className, $[10] = tone, $[11] = t6) : t6 = $[11];
+  let t7;
+  $[12] !== children || $[13] !== fontSize ? (t7 = /* @__PURE__ */ jsx(Text, { size: fontSize, children }), $[12] = children, $[13] = fontSize, $[14] = t7) : t7 = $[14];
+  let t8;
+  return $[15] !== as || $[16] !== padding || $[17] !== radius || $[18] !== rest || $[19] !== t6 || $[20] !== t7 ? (t8 = /* @__PURE__ */ jsx(Box, { "data-ui": "Badge", ...rest, as, className: t6, display: "inline-flex", maxWidth: "fill", padding, radius, children: t7 }), $[15] = as, $[16] = padding, $[17] = radius, $[18] = rest, $[19] = t6, $[20] = t7, $[21] = t8) : t8 = $[21], t8;
+}
+const DEFAULT_CHECKBOX_ELEMENT = "input";
+function Checkbox(props) {
+  const $ = c(30), t0 = props;
+  let checked, className, customValidity, disabled, forwardedRef, indeterminate, readOnly, rest, style, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    customValidity,
+    readOnly,
+    ref: forwardedRef,
+    style,
+    ...rest
+  } = t0, $[0] = t0, $[1] = checked, $[2] = className, $[3] = customValidity, $[4] = disabled, $[5] = forwardedRef, $[6] = indeterminate, $[7] = readOnly, $[8] = rest, $[9] = style, $[10] = t1) : (checked = $[1], className = $[2], customValidity = $[3], disabled = $[4], forwardedRef = $[5], indeterminate = $[6], readOnly = $[7], rest = $[8], style = $[9], t1 = $[10]);
+  const Element2 = t1 === void 0 ? DEFAULT_CHECKBOX_ELEMENT : t1, ref = useRef(null);
+  let t2;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[11] = t2) : t2 = $[11], useImperativeHandle(forwardedRef, t2);
+  let t3, t4;
+  $[12] !== indeterminate ? (t3 = () => {
+    ref.current && (ref.current.indeterminate = indeterminate || !1);
+  }, t4 = [indeterminate], $[12] = indeterminate, $[13] = t3, $[14] = t4) : (t3 = $[13], t4 = $[14]), useEffect(t3, t4), useCustomValidity(ref, customValidity);
+  let t5;
+  $[15] !== className ? (t5 = checkbox({
+    className
+  }), $[15] = className, $[16] = t5) : t5 = $[16];
+  let t6;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t6 = checkboxInput(), $[17] = t6) : t6 = $[17];
+  const t7 = customValidity ? "" : void 0, t8 = disabled || readOnly;
+  let t9;
+  $[18] !== Element2 || $[19] !== checked || $[20] !== readOnly || $[21] !== rest || $[22] !== t7 || $[23] !== t8 ? (t9 = /* @__PURE__ */ jsx(Element2, { ...rest, checked, className: t6, "data-invalid": t7, disabled: t8, type: "checkbox", readOnly, ref }), $[18] = Element2, $[19] = checked, $[20] = readOnly, $[21] = rest, $[22] = t7, $[23] = t8, $[24] = t9) : t9 = $[24];
+  let t10;
+  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t10 = /* @__PURE__ */ jsxs("span", { className: checkboxPresentation(), children: [
+    /* @__PURE__ */ jsx(CheckmarkIcon, {}),
+    /* @__PURE__ */ jsx(RemoveIcon, {})
+  ] }), $[25] = t10) : t10 = $[25];
+  let t11;
+  return $[26] !== style || $[27] !== t5 || $[28] !== t9 ? (t11 = /* @__PURE__ */ jsxs("span", { className: t5, "data-ui": "Checkbox", style, children: [
+    t9,
+    t10
+  ] }), $[26] = style, $[27] = t5, $[28] = t9, $[29] = t11) : t11 = $[29], t11;
+}
+const DEFAULT_CONTAINER_ELEMENT = "div";
+function Container(props) {
+  const $ = c(12), t0 = props;
+  let className, rest, t1, t2;
+  $[0] !== t0 ? ({
+    as: t1,
+    className,
+    width: t2,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = rest, $[3] = t1, $[4] = t2) : (className = $[1], rest = $[2], t1 = $[3], t2 = $[4]);
+  const as = t1 === void 0 ? DEFAULT_CONTAINER_ELEMENT : t1, width = t2 === void 0 ? 2 : t2;
+  let t3;
+  $[5] !== className || $[6] !== width ? (t3 = container$1({
+    className,
+    width
+  }), $[5] = className, $[6] = width, $[7] = t3) : t3 = $[7];
+  let t4;
+  return $[8] !== as || $[9] !== rest || $[10] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { "data-ui": "Container", ...rest, as, className: t3 }), $[8] = as, $[9] = rest, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
+}
+const DEFAULT_HEADING_ELEMENT = "div";
+function Heading(props) {
+  const $ = c(30), t0 = props;
+  let align, children, className, flex, rest, t1, t2, t3, t4, t5, textOverflowProp;
+  $[0] !== t0 ? ({
+    accent: t1,
+    align,
+    as: t2,
+    children,
+    className,
+    flex,
+    muted: t3,
+    size: t4,
+    textOverflow: textOverflowProp,
+    weight: t5,
+    ...rest
+  } = t0, $[0] = t0, $[1] = align, $[2] = children, $[3] = className, $[4] = flex, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = t5, $[11] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], flex = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], t5 = $[10], textOverflowProp = $[11]);
+  const accent = t1 === void 0 ? !1 : t1, Element2 = t2 === void 0 ? DEFAULT_HEADING_ELEMENT : t2, muted = t3 === void 0 ? !1 : t3, size = t4 === void 0 ? 2 : t4, weight = t5 === void 0 ? "regular" : t5;
+  let t6;
+  $[12] !== accent || $[13] !== align || $[14] !== className || $[15] !== flex || $[16] !== muted || $[17] !== size || $[18] !== weight ? (t6 = heading({
+    className,
+    accent,
+    align,
+    flex,
+    muted,
+    size,
+    weight
+  }), $[12] = accent, $[13] = align, $[14] = className, $[15] = flex, $[16] = muted, $[17] = size, $[18] = weight, $[19] = t6) : t6 = $[19];
+  let t7;
+  $[20] !== textOverflowProp ? (t7 = textOverflow({
+    textOverflow: textOverflowProp
+  }), $[20] = textOverflowProp, $[21] = t7) : t7 = $[21];
+  let t8;
+  $[22] !== children || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsx("span", { className: t7, children }), $[22] = children, $[23] = t7, $[24] = t8) : t8 = $[24];
+  let t9;
+  return $[25] !== Element2 || $[26] !== rest || $[27] !== t6 || $[28] !== t8 ? (t9 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Heading", ...rest, className: t6, children: t8 }), $[25] = Element2, $[26] = rest, $[27] = t6, $[28] = t8, $[29] = t9) : t9 = $[29], t9;
+}
+const DEFAULT_INLINE_ELEMENT = "div";
+function Inline(props) {
+  const $ = c(11), t0 = props;
+  let children, gap, rest, space, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    gap,
+    space,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = gap, $[3] = rest, $[4] = space, $[5] = t1) : (children = $[1], gap = $[2], rest = $[3], space = $[4], t1 = $[5]);
+  const as = t1 === void 0 ? DEFAULT_INLINE_ELEMENT : t1, t2 = gap ?? space;
+  let t3;
+  return $[6] !== as || $[7] !== children || $[8] !== rest || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "Inline", ...rest, alignItems: "center", as, display: "flex", gap: t2, flexWrap: "wrap", children }), $[6] = as, $[7] = children, $[8] = rest, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
+}
+function BoundaryElementProvider(props) {
+  const $ = c(5), {
+    children,
+    element
+  } = props;
+  let t0, t1;
+  $[0] !== element ? (t1 = {
+    version: 0,
+    element
+  }, $[0] = element, $[1] = t1) : t1 = $[1], t0 = t1;
+  const value = t0;
+  let t2;
+  return $[2] !== children || $[3] !== value ? (t2 = /* @__PURE__ */ jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t2) : t2 = $[4], t2;
+}
 class ErrorBoundary extends Component {
   state = {
     error: null
@@ -142,6 +470,336 @@ class ErrorBoundary extends Component {
     return this.props.children;
   }
 }
+const DEFAULT_SR_ONLY_ELEMENT = "span";
+function SrOnly(props) {
+  const $ = c(12), t0 = props;
+  let children, className, rest, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    className,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1) : (children = $[1], className = $[2], rest = $[3], t1 = $[4]);
+  const Element2 = t1 === void 0 ? DEFAULT_SR_ONLY_ELEMENT : t1;
+  let t2;
+  $[5] !== className ? (t2 = srOnly({
+    className
+  }), $[5] = className, $[6] = t2) : t2 = $[6];
+  let t3;
+  return $[7] !== Element2 || $[8] !== children || $[9] !== rest || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(Element2, { "data-ui": "SrOnly", ...rest, "aria-hidden": !0, className: t2, children }), $[7] = Element2, $[8] = children, $[9] = rest, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
+}
+const DEFAULT_VIRTUAL_LIST_ELEMENT = "div";
+function VirtualList(props) {
+  const $ = c(58), t0 = props;
+  let forwardedRef, getItemKey, onChange, renderItem, rest, t1, t2, t3;
+  $[0] !== t0 ? ({
+    as: t1,
+    gap: t2,
+    getItemKey,
+    items: t3,
+    onChange,
+    renderItem,
+    ref: forwardedRef,
+    ...rest
+  } = t0, $[0] = t0, $[1] = forwardedRef, $[2] = getItemKey, $[3] = onChange, $[4] = renderItem, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3) : (forwardedRef = $[1], getItemKey = $[2], onChange = $[3], renderItem = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8]);
+  const as = t1 === void 0 ? DEFAULT_VIRTUAL_LIST_ELEMENT : t1, gap = t2 === void 0 ? 0 : t2;
+  let t4;
+  $[9] !== t3 ? (t4 = t3 === void 0 ? [] : t3, $[9] = t3, $[10] = t4) : t4 = $[10];
+  const items = t4, ref = useRef(null), wrapperRef = useRef(null), [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), [itemHeight, setItemHeight] = useState(-1), [gapValue, setGapValue] = useState(0);
+  let t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[11] = t5) : t5 = $[11], useImperativeHandle(forwardedRef, t5);
+  let t6, t7;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => {
+    if (!ref.current)
+      return;
+    const scrollEl = findScrollable(ref.current.parentNode);
+    if (scrollEl) {
+      if (!(scrollEl instanceof HTMLElement))
+        return;
+      const handleScroll = () => {
+        setScrollTop(scrollEl.scrollTop);
+      };
+      scrollEl.addEventListener("scroll", handleScroll, {
+        passive: !0
+      });
+      const ro = new _ResizeObserver((entries) => {
+        setScrollHeight(entries[0].contentRect.height);
+      });
+      return ro.observe(scrollEl), handleScroll(), () => {
+        scrollEl.removeEventListener("scroll", handleScroll), ro.unobserve(scrollEl), ro.disconnect();
+      };
+    }
+    const handleScroll_0 = () => {
+      setScrollTop(window.scrollY);
+    }, handleResize = () => {
+      setScrollHeight(window.innerHeight);
+    };
+    return window.addEventListener("scroll", handleScroll_0, {
+      passive: !0
+    }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
+      window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
+    };
+  }, t7 = [], $[12] = t6, $[13] = t7) : (t6 = $[12], t7 = $[13]), useEffect(t6, t7);
+  const len = items.length, height = itemHeight ? len * (itemHeight + gapValue) - gapValue : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
+  let t8, t9;
+  $[14] !== fromIndex || $[15] !== gapValue || $[16] !== itemHeight || $[17] !== onChange || $[18] !== scrollHeight || $[19] !== scrollTop || $[20] !== toIndex ? (t8 = () => {
+    onChange?.({
+      fromIndex,
+      gap: gapValue,
+      itemHeight,
+      scrollHeight,
+      scrollTop,
+      toIndex
+    });
+  }, t9 = [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex], $[14] = fromIndex, $[15] = gapValue, $[16] = itemHeight, $[17] = onChange, $[18] = scrollHeight, $[19] = scrollTop, $[20] = toIndex, $[21] = t8, $[22] = t9) : (t8 = $[21], t9 = $[22]), useEffect(t8, t9);
+  let t10;
+  bb0: {
+    if (!renderItem || items.length === 0) {
+      t10 = null;
+      break bb0;
+    }
+    if (itemHeight === -1) {
+      let t113;
+      $[23] === Symbol.for("react.memo_cache_sentinel") ? (t113 = (el) => el ? setItemHeight(el.offsetHeight) : void 0, $[23] = t113) : t113 = $[23];
+      let t122;
+      $[24] !== items[0] || $[25] !== renderItem ? (t122 = renderItem(items[0]), $[24] = items[0], $[25] = renderItem, $[26] = t122) : t122 = $[26];
+      let t132;
+      $[27] !== t122 ? (t132 = /* @__PURE__ */ jsx(Box, { ref: t113, insetTop: 0, insetLeft: 0, insetRight: 0, position: "absolute", children: t122 }, 0), $[27] = t122, $[28] = t132) : t132 = $[28];
+      let t142;
+      $[29] === Symbol.for("react.memo_cache_sentinel") ? (t142 = (el_0) => el_0 ? setGapValue(el_0.offsetHeight) : void 0, $[29] = t142) : t142 = $[29];
+      const t15 = vars.space[gap];
+      let t16;
+      $[30] !== t15 ? (t16 = /* @__PURE__ */ jsx("div", { ref: t142, style: {
+        height: t15
+      } }), $[30] = t15, $[31] = t16) : t16 = $[31];
+      let t17;
+      $[32] !== t132 || $[33] !== t16 ? (t17 = [/* @__PURE__ */ jsxs(Fragment$1, { children: [
+        t132,
+        t16
+      ] })], $[32] = t132, $[33] = t16, $[34] = t17) : t17 = $[34], t10 = t17;
+      break bb0;
+    }
+    let t112;
+    if ($[35] !== fromIndex || $[36] !== gapValue || $[37] !== getItemKey || $[38] !== itemHeight || $[39] !== items || $[40] !== renderItem || $[41] !== toIndex) {
+      let t122;
+      $[43] !== fromIndex || $[44] !== gapValue || $[45] !== getItemKey || $[46] !== itemHeight || $[47] !== renderItem ? (t122 = (item, _itemIndex) => {
+        const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
+        return /* @__PURE__ */ jsx(Box, { insetLeft: 0, insetRight: 0, position: "absolute", style: {
+          top: itemIndex * (itemHeight + gapValue) - gapValue
+        }, children: node }, key);
+      }, $[43] = fromIndex, $[44] = gapValue, $[45] = getItemKey, $[46] = itemHeight, $[47] = renderItem, $[48] = t122) : t122 = $[48], t112 = items.slice(fromIndex, toIndex).map(t122), $[35] = fromIndex, $[36] = gapValue, $[37] = getItemKey, $[38] = itemHeight, $[39] = items, $[40] = renderItem, $[41] = toIndex, $[42] = t112;
+    } else
+      t112 = $[42];
+    t10 = t112;
+  }
+  const children = t10;
+  let t11, t12;
+  $[49] !== height ? (t12 = {
+    height
+  }, $[49] = height, $[50] = t12) : t12 = $[50], t11 = t12;
+  const wrapperStyle = t11;
+  let t13;
+  $[51] !== children || $[52] !== wrapperStyle ? (t13 = /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[51] = children, $[52] = wrapperStyle, $[53] = t13) : t13 = $[53];
+  let t14;
+  return $[54] !== as || $[55] !== rest || $[56] !== t13 ? (t14 = /* @__PURE__ */ jsx(Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: t13 }), $[54] = as, $[55] = rest, $[56] = t13, $[57] = t14) : t14 = $[57], t14;
+}
+function findScrollable(parentNode) {
+  let _scrollEl = parentNode;
+  for (; _scrollEl && !_isScrollable(_scrollEl); )
+    _scrollEl = _scrollEl.parentNode;
+  return _scrollEl;
+}
+const DEFAULT_RADIO_ELEMENT = "input";
+function Radio(props) {
+  const $ = c(25), t0 = props;
+  let className, customValidity, disabled, forwardedRef, readOnly, rest, style, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    className,
+    disabled,
+    style,
+    customValidity,
+    readOnly,
+    ref: forwardedRef,
+    ...rest
+  } = t0, $[0] = t0, $[1] = className, $[2] = customValidity, $[3] = disabled, $[4] = forwardedRef, $[5] = readOnly, $[6] = rest, $[7] = style, $[8] = t1) : (className = $[1], customValidity = $[2], disabled = $[3], forwardedRef = $[4], readOnly = $[5], rest = $[6], style = $[7], t1 = $[8]);
+  const Element2 = t1 === void 0 ? DEFAULT_RADIO_ELEMENT : t1, ref = useRef(null);
+  let t2;
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[9] = t2) : t2 = $[9], useImperativeHandle(forwardedRef, t2), useCustomValidity(ref, customValidity);
+  let t3;
+  $[10] !== className ? (t3 = radio({
+    className
+  }), $[10] = className, $[11] = t3) : t3 = $[11];
+  let t4;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t4 = radioInput(), $[12] = t4) : t4 = $[12];
+  const t5 = customValidity ? "" : void 0, t6 = !disabled && readOnly ? "" : void 0, t7 = disabled || readOnly;
+  let t8;
+  $[13] !== Element2 || $[14] !== readOnly || $[15] !== rest || $[16] !== t5 || $[17] !== t6 || $[18] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t4, "data-invalid": t5, "data-read-only": t6, disabled: t7, readOnly, ref, type: "radio" }), $[13] = Element2, $[14] = readOnly, $[15] = rest, $[16] = t5, $[17] = t6, $[18] = t7, $[19] = t8) : t8 = $[19];
+  let t9;
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx("span", { className: radioPresentation() }), $[20] = t9) : t9 = $[20];
+  let t10;
+  return $[21] !== style || $[22] !== t3 || $[23] !== t8 ? (t10 = /* @__PURE__ */ jsxs("div", { className: t3, "data-ui": "Radio", style, children: [
+    t8,
+    t9
+  ] }), $[21] = style, $[22] = t3, $[23] = t8, $[24] = t10) : t10 = $[24], t10;
+}
+const DEFAULT_SELECT_ELEMENT = "select";
+function Select(props) {
+  const $ = c(38), t0 = props;
+  let children, customValidity, disabled, forwardedRef, gap, readOnly, rest, t1, t2, t3, t4, t5, t6;
+  $[0] !== t0 ? ({
+    as: t1,
+    border: t2,
+    children,
+    customValidity,
+    disabled,
+    fontSize: t3,
+    gap,
+    padding: t4,
+    radius: t5,
+    readOnly,
+    ref: forwardedRef,
+    space: t6,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = forwardedRef, $[5] = gap, $[6] = readOnly, $[7] = rest, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = t6) : (children = $[1], customValidity = $[2], disabled = $[3], forwardedRef = $[4], gap = $[5], readOnly = $[6], rest = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], t6 = $[13]);
+  const Element2 = t1 === void 0 ? DEFAULT_SELECT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, fontSize = t3 === void 0 ? 2 : t3, padding = t4 === void 0 ? 3 : t4, radius = t5 === void 0 ? 1 : t5, space = t6 === void 0 ? 2 : t6, ref = useRef(null);
+  let t7;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[14] = t7) : t7 = $[14], useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
+  const t8 = gap ?? space;
+  let t9;
+  $[15] !== border || $[16] !== fontSize || $[17] !== padding || $[18] !== radius || $[19] !== t8 ? (t9 = select({
+    border,
+    fontSize,
+    padding,
+    radius,
+    gap: t8
+  }), $[15] = border, $[16] = fontSize, $[17] = padding, $[18] = radius, $[19] = t8, $[20] = t9) : t9 = $[20];
+  let t10;
+  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _inputElement(), $[21] = t10) : t10 = $[21];
+  const t11 = disabled || readOnly;
+  let t12;
+  $[22] !== Element2 || $[23] !== children || $[24] !== rest || $[25] !== t11 ? (t12 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t10, disabled: t11, ref, children }), $[22] = Element2, $[23] = children, $[24] = rest, $[25] = t11, $[26] = t12) : t12 = $[26];
+  let t13;
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t13 = selectPresentation(), $[27] = t13) : t13 = $[27];
+  let t14;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[28] = t14) : t14 = $[28];
+  let t15;
+  $[29] !== fontSize ? (t15 = /* @__PURE__ */ jsx(Text, { size: fontSize, children: t14 }), $[29] = fontSize, $[30] = t15) : t15 = $[30];
+  let t16;
+  $[31] !== padding || $[32] !== t15 ? (t16 = /* @__PURE__ */ jsx("span", { className: t13, children: /* @__PURE__ */ jsx(Box, { as: "span", display: "inline-block", padding, children: t15 }) }), $[31] = padding, $[32] = t15, $[33] = t16) : t16 = $[33];
+  let t17;
+  return $[34] !== t12 || $[35] !== t16 || $[36] !== t9 ? (t17 = /* @__PURE__ */ jsxs("div", { "data-ui": "Select", className: t9, "data-icon-right": "", children: [
+    t12,
+    t16
+  ] }), $[34] = t12, $[35] = t16, $[36] = t9, $[37] = t17) : t17 = $[37], t17;
+}
+const DEFAULT_SWITCH_ELEMENT = "input";
+function Switch(props) {
+  const $ = c(31), t0 = props;
+  let checked, className, disabled, forwardedRef, indeterminate, readOnly, rest, style, t1;
+  $[0] !== t0 ? ({
+    as: t1,
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    readOnly,
+    ref: forwardedRef,
+    style,
+    ...rest
+  } = t0, $[0] = t0, $[1] = checked, $[2] = className, $[3] = disabled, $[4] = forwardedRef, $[5] = indeterminate, $[6] = readOnly, $[7] = rest, $[8] = style, $[9] = t1) : (checked = $[1], className = $[2], disabled = $[3], forwardedRef = $[4], indeterminate = $[5], readOnly = $[6], rest = $[7], style = $[8], t1 = $[9]);
+  const Element2 = t1 === void 0 ? DEFAULT_SWITCH_ELEMENT : t1, ref = useRef(null);
+  let t2;
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[10] = t2) : t2 = $[10], useImperativeHandle(forwardedRef, t2);
+  let t3, t4;
+  $[11] !== indeterminate ? (t3 = () => {
+    ref.current && (ref.current.indeterminate = indeterminate || !1);
+  }, t4 = [indeterminate], $[11] = indeterminate, $[12] = t3, $[13] = t4) : (t3 = $[12], t4 = $[13]), useEffect(t3, t4);
+  let t5;
+  $[14] !== className ? (t5 = _switch({
+    className
+  }), $[14] = className, $[15] = t5) : t5 = $[15];
+  const t6 = checked ? "" : void 0, t7 = indeterminate ? "" : void 0, t8 = indeterminate !== !0 && checked;
+  let t9;
+  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t9 = _switchElement(), $[16] = t9) : t9 = $[16];
+  const t10 = disabled ? "" : void 0, t11 = !disabled && readOnly ? "" : void 0, t12 = disabled || readOnly;
+  let t13;
+  $[17] !== Element2 || $[18] !== rest || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t8 ? (t13 = /* @__PURE__ */ jsx(Element2, { ...rest, checked: t8, className: t9, "data-disabled": t10, "data-read-only": t11, disabled: t12, type: "checkbox", ref }), $[17] = Element2, $[18] = rest, $[19] = t10, $[20] = t11, $[21] = t12, $[22] = t8, $[23] = t13) : t13 = $[23];
+  let t14;
+  $[24] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsxs("span", { "aria-hidden": !0, className: _switchPresentation(), children: [
+    /* @__PURE__ */ jsx("span", { className: _switchTrack() }),
+    /* @__PURE__ */ jsx("span", { className: _switchThumb() })
+  ] }), $[24] = t14) : t14 = $[24];
+  let t15;
+  return $[25] !== style || $[26] !== t13 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7 ? (t15 = /* @__PURE__ */ jsxs(Box, { className: t5, "data-checked": t6, "data-indeterminate": t7, "data-ui": "Switch", display: "inline-block", position: "relative", style, children: [
+    t13,
+    t14
+  ] }), $[25] = style, $[26] = t13, $[27] = t5, $[28] = t6, $[29] = t7, $[30] = t15) : t15 = $[30], t15;
+}
+const DEFAULT_TEXT_AREA_ELEMENT = "textarea";
+function TextArea(props) {
+  const $ = c(34), t0 = props;
+  let __unstable_disableFocusRing, customValidity, forwardedRef, gap, readOnly, rest, t1, t2, t3, t4, t5, t6, t7;
+  $[0] !== t0 ? ({
+    __unstable_disableFocusRing,
+    as: t1,
+    border: t2,
+    customValidity,
+    disabled: t3,
+    fontSize: t4,
+    gap,
+    padding: t5,
+    radius: t6,
+    readOnly,
+    ref: forwardedRef,
+    space: t7,
+    ...rest
+  } = t0, $[0] = t0, $[1] = __unstable_disableFocusRing, $[2] = customValidity, $[3] = forwardedRef, $[4] = gap, $[5] = readOnly, $[6] = rest, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5, $[12] = t6, $[13] = t7) : (__unstable_disableFocusRing = $[1], customValidity = $[2], forwardedRef = $[3], gap = $[4], readOnly = $[5], rest = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], t5 = $[11], t6 = $[12], t7 = $[13]);
+  const Element2 = t1 === void 0 ? DEFAULT_TEXT_AREA_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, padding = t5 === void 0 ? 3 : t5, radius = t6 === void 0 ? 2 : t6, space = t7 === void 0 ? 3 : t7, ref = useRef(null);
+  let t8;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[14] = t8) : t8 = $[14], useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
+  const t9 = gap ?? space;
+  let t10;
+  $[15] !== border || $[16] !== fontSize || $[17] !== padding || $[18] !== radius || $[19] !== t9 ? (t10 = textArea({
+    border,
+    fontSize,
+    padding,
+    radius,
+    gap: t9
+  }), $[15] = border, $[16] = fontSize, $[17] = padding, $[18] = radius, $[19] = t9, $[20] = t10) : t10 = $[20];
+  const t11 = customValidity ? "" : void 0, t12 = !disabled && readOnly ? "" : void 0;
+  let t13;
+  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t13 = _inputElement(), $[21] = t13) : t13 = $[21];
+  const t14 = __unstable_disableFocusRing ? "" : void 0;
+  let t15;
+  $[22] !== Element2 || $[23] !== disabled || $[24] !== readOnly || $[25] !== rest || $[26] !== t14 ? (t15 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t13, "data-no-focus-ring": t14, disabled, readOnly, ref }), $[22] = Element2, $[23] = disabled, $[24] = readOnly, $[25] = rest, $[26] = t14, $[27] = t15) : t15 = $[27];
+  let t16;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx("span", { className: _inputPresentation() }), $[28] = t16) : t16 = $[28];
+  let t17;
+  return $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t15 ? (t17 = /* @__PURE__ */ jsxs("span", { className: t10, "data-invalid": t11, "data-read-only": t12, "data-ui": "TextArea", children: [
+    t15,
+    t16
+  ] }), $[29] = t10, $[30] = t11, $[31] = t12, $[32] = t15, $[33] = t17) : t17 = $[33], t17;
+}
+function TooltipDelayGroupProvider(props) {
+  const $ = c(9), {
+    children,
+    delay
+  } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0;
+  let t0;
+  const t1 = isGroupActive ? 1 : openDelay;
+  let t2;
+  $[0] !== closeDelay || $[1] !== openTooltipId || $[2] !== setIsGroupActive || $[3] !== setOpenTooltipId || $[4] !== t1 ? (t2 = {
+    setIsGroupActive,
+    openTooltipId,
+    setOpenTooltipId,
+    openDelay: t1,
+    closeDelay
+  }, $[0] = closeDelay, $[1] = openTooltipId, $[2] = setIsGroupActive, $[3] = setOpenTooltipId, $[4] = t1, $[5] = t2) : t2 = $[5], t0 = t2;
+  const value = t0;
+  let t3;
+  return $[6] !== children || $[7] !== value ? (t3 = /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
+}
 function AutocompleteOption(props) {
   const $ = c(11), {
     children,
@@ -165,7 +823,6 @@ function AutocompleteOption(props) {
   let t2;
   return $[5] !== children || $[6] !== handleClick || $[7] !== handleKeyDown || $[8] !== id || $[9] !== selected ? (t2 = /* @__PURE__ */ jsx("li", { "aria-selected": selected, "data-ui": "AutocompleteOption", id, role: "option", onClick: handleClick, onKeyDown: handleKeyDown, children }), $[5] = children, $[6] = handleClick, $[7] = handleKeyDown, $[8] = id, $[9] = selected, $[10] = t2) : t2 = $[10], t2;
 }
-AutocompleteOption.displayName = "AutocompleteOption";
 function autocompleteReducer(state, msg) {
   return msg.type === "input/change" ? {
     ...state,
@@ -255,7 +912,7 @@ function Autocomplete(props) {
     value: value_0
   }) => /* @__PURE__ */ jsx(Card, { as: "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) }), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
   useImperativeHandle(forwardedRef, () => inputElementRef.current);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useResponsiveProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -379,7 +1036,7 @@ function Autocomplete(props) {
         "aria-label": "Clear",
         onFocus: handleClearButtonFocus
       };
-  }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = useMemo(() => padding.map((v_0) => v_0 === 0 ? 0 : v_0 === 1 || v_0 === 2 ? 1 : v_0 - 2), [padding]), openButtonPadding = useMemo(() => padding.map((v_1) => Math.max(v_1 - 1, 0)), [padding]), openButtonProps = useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = useCallback((event_4) => {
+  }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = useMemo(() => Object.fromEntries(Object.entries(padding).map(([key, value_1]) => value_1 === 0 ? [key, 0] : value_1 === 1 ? [key, 1] : value_1 === 2 ? [key, 1] : [key, value_1 - 2])), [padding]), openButtonPadding = useMemo(() => Object.values(padding).map((v_0) => Math.max(v_0 - 1, 0)), [padding]), openButtonProps = useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = useCallback((event_4) => {
     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();
@@ -405,7 +1062,6 @@ function Autocomplete(props) {
     ] })
   );
 }
-Autocomplete.displayName = "Autocomplete";
 const DEFAULT_BREADCRUMBS_ELEMENT = "nav";
 function Breadcrumbs(props) {
   const {
@@ -432,12 +1088,13 @@ function Breadcrumbs(props) {
     }
     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: breadcrumbs({
+    className
+  }), 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)) });
 }
-Breadcrumbs.displayName = "Breadcrumbs";
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
@@ -486,7 +1143,7 @@ function DialogCard(props) {
   let t8;
   $[29] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => [ref.current], $[29] = t8) : t8 = $[29], useClickOutsideEvent(t7, t8);
   let t9;
-  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t9 = dialogCardRoot(), $[30] = t9) : t9 = $[30];
+  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t9 = dialogCard(), $[30] = t9) : t9 = $[30];
   let t10;
   $[31] === Symbol.for("react.memo_cache_sentinel") ? (t10 = dialogLayout(), $[31] = t10) : t10 = $[31];
   let t11;
@@ -509,7 +1166,6 @@ function DialogCard(props) {
   let t16;
   return $[47] !== as || $[48] !== rest || $[49] !== t15 ? (t16 = /* @__PURE__ */ jsx(Card, { ...rest, as, className: t9, display: "flex", ref, children: t15 }), $[47] = as, $[48] = rest, $[49] = t15, $[50] = t16) : t16 = $[50], t16;
 }
-DialogCard.displayName = "DialogCard";
 const DialogContext = createGlobalScopedContext("@sanity/ui/context/dialog", {
   version: 0
 });
@@ -545,7 +1201,7 @@ function Dialog(props) {
     tone,
     ...rest
   } = t0, $[0] = t0, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = className, $[5] = contentRef, $[6] = footer, $[7] = header, $[8] = id, $[9] = onActivate, $[10] = onClickOutside, $[11] = onClose, $[12] = onFocus, $[13] = portalProp, $[14] = rest, $[15] = scheme, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = tone) : (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], className = $[4], contentRef = $[5], footer = $[6], header = $[7], id = $[8], onActivate = $[9], onClickOutside = $[10], onClose = $[11], onFocus = $[12], portalProp = $[13], rest = $[14], scheme = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21], t7 = $[22], tone = $[23]);
-  const autoFocus = t1 === void 0 ? !0 : t1, hideCloseButton = t2 === void 0 ? !1 : t2, _animate = t3 === void 0 ? !1 : t3, cardRadiusProp = t4 === void 0 ? 4 : t4, padding = t5 === void 0 ? 3 : t5, cardShadow = t6 === void 0 ? 4 : t6, width = t7 === void 0 ? 0 : t7, positionProp = _positionProp ?? context.position ?? "fixed", zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), position = useArrayProp(positionProp), zOffset = useArrayProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
+  const autoFocus = t1 === void 0 ? !0 : t1, hideCloseButton = t2 === void 0 ? !1 : t2, _animate = t3 === void 0 ? !1 : t3, cardRadiusProp = t4 === void 0 ? 4 : t4, padding = t5 === void 0 ? 3 : t5, cardShadow = t6 === void 0 ? 4 : t6, width = t7 === void 0 ? 0 : t7, positionProp = _positionProp ?? context.position ?? "fixed", zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useResponsiveProp(cardRadiusProp), position = useResponsiveProp(positionProp), zOffset = useResponsiveProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
   let t8;
   $[24] !== onFocus ? (t8 = (event) => {
     onFocus?.(event);
@@ -578,7 +1234,9 @@ 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 = dialog({
+    className
+  }), $[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];
@@ -587,7 +1245,7 @@ function Dialog(props) {
   let t14;
   $[33] !== autoFocus || $[34] !== cardRadius || $[35] !== cardShadow || $[36] !== children || $[37] !== contentRef || $[38] !== footer || $[39] !== header || $[40] !== hideCloseButton || $[41] !== id || $[42] !== onClickOutside || $[43] !== onClose || $[44] !== portalProp || $[45] !== scheme || $[46] !== tone || $[47] !== width ? (t14 = /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, tone, width, children }), $[33] = autoFocus, $[34] = cardRadius, $[35] = cardShadow, $[36] = children, $[37] = contentRef, $[38] = footer, $[39] = header, $[40] = hideCloseButton, $[41] = id, $[42] = onClickOutside, $[43] = onClose, $[44] = portalProp, $[45] = scheme, $[46] = tone, $[47] = width, $[48] = t14) : t14 = $[48];
   let t15;
-  $[49] !== t14 || $[50] !== width ? (t15 = /* @__PURE__ */ jsx(Container, { align: "center", className: t13, "data-ui": "DialogCard", direction: "column", display: "flex", justify: "center", width, children: t14 }), $[49] = t14, $[50] = width, $[51] = t15) : t15 = $[51];
+  $[49] !== t14 || $[50] !== width ? (t15 = /* @__PURE__ */ jsx(Container, { alignItems: "center", className: t13, "data-ui": "DialogCard", flexDirection: "column", display: "flex", justifyContent: "center", width, children: t14 }), $[49] = t14, $[50] = width, $[51] = t15) : t15 = $[51];
   let t16;
   $[52] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[52] = t16) : t16 = $[52];
   let t17;
@@ -599,7 +1257,6 @@ function Dialog(props) {
   let t18;
   return $[66] !== portalProp || $[67] !== t17 ? (t18 = /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: t17 }), $[66] = portalProp, $[67] = t17, $[68] = t18) : t18 = $[68], t18;
 }
-Dialog.displayName = "Dialog";
 function DialogProvider(props) {
   const $ = c(6), {
     children,
@@ -616,7 +1273,6 @@ function DialogProvider(props) {
   let t2;
   return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
 }
-DialogProvider.displayName = "DialogProvider";
 function MenuButton(props) {
   const $ = c(63), {
     __unstable_disableRestoreFocusOnClose: t0,
@@ -763,7 +1419,6 @@ function MenuButton(props) {
 function _temp$2(v) {
   return !v;
 }
-MenuButton.displayName = "MenuButton";
 const DEFAULT_SKELETON_ELEMENT = "div";
 function Skeleton(props) {
   const $ = c(17), t0 = props;
@@ -788,14 +1443,14 @@ 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 = skeleton({
+    className,
     radius
-  })), $[9] = className, $[10] = radius, $[11] = t4) : t4 = $[11];
+  }), $[9] = className, $[10] = radius, $[11] = t4) : t4 = $[11];
   const t5 = animated ? "" : void 0, t6 = visible ? "" : void 0;
   let t7;
   return $[12] !== rest || $[13] !== t4 || $[14] !== t5 || $[15] !== t6 ? (t7 = /* @__PURE__ */ jsx(Box, { "data-ui": "Skeleton", ...rest, className: t4, "data-animated": t5, "data-visible": t6 }), $[12] = rest, $[13] = t4, $[14] = t5, $[15] = t6, $[16] = t7) : t7 = $[16], t7;
 }
-Skeleton.displayName = "Skeleton";
 const DEFAULT_CODE_SKELETON_ELEMENT = "div";
 function CodeSkeleton(props) {
   const $ = c(10), t0 = props;
@@ -807,13 +1462,13 @@ 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 = codeSkeleton({
+    className,
     size
-  })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
+  }), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
   return $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Skeleton, { ...rest, className: t2 }), $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
-CodeSkeleton.displayName = "CodeSkeleton";
 const DEFAULT_HEADING_SKELETON_ELEMENT = "div";
 function HeadingSkeleton(props) {
   const $ = c(10), t0 = props;
@@ -825,13 +1480,13 @@ 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 = headingSkeleton({
+    className,
     size
-  })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
+  }), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
   return $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Skeleton, { ...rest, className: t2 }), $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
-HeadingSkeleton.displayName = "HeadingSkeleton";
 const DEFAULT_LABEL_SKELETON_ELEMENT = "div";
 function LabelSkeleton(props) {
   const $ = c(10), t0 = props;
@@ -843,13 +1498,13 @@ 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 = labelSkeleton({
+    className,
     size
-  })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
+  }), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
   return $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Skeleton, { ...rest, className: t2 }), $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
-LabelSkeleton.displayName = "LabelSkeleton";
 const DEFAULT_TEXT_SKELETON_ELEMENT = "div";
 function TextSkeleton(props) {
   const $ = c(10), t0 = props;
@@ -861,13 +1516,13 @@ 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 = textSkeleton({
+    className,
     size
-  })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
+  }), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
   return $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Skeleton, { ...rest, className: t2 }), $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
-TextSkeleton.displayName = "TextSkeleton";
 const DEFAULT_TAB_PANEL_ELEMENT = "div";
 function TabPanel(props) {
   const $ = c(10), t0 = props;
@@ -882,7 +1537,6 @@ function TabPanel(props) {
   let 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 = {
   error: "alert",
   warning: "alert",
@@ -898,82 +1552,68 @@ const DEFAULT_TOAST_ELEMENT = "li", ROLES = {
   warning: "caution",
   success: "positive",
   info: "neutral"
-}, LONG_ENOUGH_BUT_NOT_TOO_LONG = 1e3 * 60 * 60 * 24 * 24;
+};
 function Toast(props) {
-  const $ = c(53), t0 = props;
-  let closable, description, duration, onClose, rest, status, t1, t2, title, updatedAt;
-  $[0] !== t0 ? ({
-    as: t1,
-    closable,
-    description,
-    duration,
-    onClose,
-    radius: t2,
-    title,
-    status,
-    updatedAt,
-    ...rest
-  } = t0, $[0] = t0, $[1] = closable, $[2] = description, $[3] = duration, $[4] = onClose, $[5] = rest, $[6] = status, $[7] = t1, $[8] = t2, $[9] = title, $[10] = updatedAt) : (closable = $[1], description = $[2], duration = $[3], onClose = $[4], rest = $[5], status = $[6], t1 = $[7], t2 = $[8], title = $[9], updatedAt = $[10]);
+  const $ = c(40), t0 = props;
+  let closable, description, onClose, rest, status, t1, t2, title;
+  if ($[0] !== t0) {
+    const {
+      as: t32,
+      closable: t42,
+      description: t52,
+      duration,
+      onClose: t62,
+      radius: t72,
+      title: t82,
+      status: t92,
+      updatedAt,
+      ...t102
+    } = t0;
+    t1 = t32, closable = t42, description = t52, onClose = t62, t2 = t72, title = t82, status = t92, rest = t102, $[0] = t0, $[1] = closable, $[2] = description, $[3] = onClose, $[4] = rest, $[5] = status, $[6] = t1, $[7] = t2, $[8] = title;
+  } else
+    closable = $[1], description = $[2], onClose = $[3], rest = $[4], status = $[5], t1 = $[6], t2 = $[7], title = $[8];
   const as = t1 === void 0 ? DEFAULT_TOAST_ELEMENT : t1, radius = t2 === void 0 ? 3 : t2, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status", visualDuration = usePrefersReducedMotion() ? 0 : 0.26;
   let t3;
-  $[11] !== visualDuration ? (t3 = visualDuration ? {
+  $[9] !== visualDuration ? (t3 = visualDuration ? {
     type: "spring",
     visualDuration,
     bounce: 0.25
   } : {
     duration: 0
-  }, $[11] = visualDuration, $[12] = t3) : t3 = $[12];
-  const transition = t3, hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG;
+  }, $[9] = visualDuration, $[10] = t3) : t3 = $[10];
+  const transition = t3;
   let t4;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t4 = ["hidden", "initial"], $[13] = t4) : t4 = $[13];
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t4 = ["hidden", "initial"], $[11] = t4) : t4 = $[11];
   const initial = t4;
   let t5;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t5 = ["visible", "slideIn"], $[14] = t5) : t5 = $[14];
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t5 = ["visible", "slideIn"], $[12] = t5) : t5 = $[12];
   const animate = t5;
   let t6;
-  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = ["hidden", "slideOut"], $[15] = t6) : t6 = $[15];
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t6 = ["hidden", "slideOut"], $[13] = t6) : t6 = $[13];
   const exit = t6;
   let t7;
-  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t7 = toast(), $[16] = t7) : t7 = $[16];
-  const t8 = hasDuration ? "" : void 0;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = toast(), $[14] = t7) : t7 = $[14];
+  let t8;
+  $[15] !== title ? (t8 = title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }), $[15] = title, $[16] = t8) : t8 = $[16];
   let t9;
-  $[17] !== title ? (t9 = title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }), $[17] = title, $[18] = t9) : t9 = $[18];
+  $[17] !== description || $[18] !== transition ? (t9 = description && /* @__PURE__ */ jsx(MotionText, { muted: !0, size: 1, variants: content, transition, children: description }), $[17] = description, $[18] = transition, $[19] = t9) : t9 = $[19];
   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];
+  $[20] !== t8 || $[21] !== t9 ? (t10 = /* @__PURE__ */ jsx(Flex, { flex: 1, overflowX: "auto", padding: 3, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    t8,
+    t9
+  ] }) }), $[20] = t8, $[21] = t9, $[22] = t10) : t10 = $[22];
   let t11;
-  $[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];
-  let t12;
-  $[25] !== buttonTone || $[26] !== closable || $[27] !== onClose ? (t12 = closable && /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Button, { as: "button", icon: CloseIcon, mode: "bleed", padding: 2, tone: buttonTone, onClick: onClose, style: {
+  $[23] !== buttonTone || $[24] !== closable || $[25] !== onClose ? (t11 = closable && /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Button, { as: "button", icon: CloseIcon, mode: "bleed", padding: 2, tone: buttonTone, onClick: onClose, style: {
     verticalAlign: "top"
-  } }) }), $[25] = buttonTone, $[26] = closable, $[27] = onClose, $[28] = t12) : t12 = $[28];
+  } }) }), $[23] = buttonTone, $[24] = closable, $[25] = onClose, $[26] = t11) : t11 = $[26];
+  let t12;
+  $[27] !== t10 || $[28] !== t11 || $[29] !== transition ? (t12 = /* @__PURE__ */ jsxs(MotionFlex, { align: "flex-start", variants: content, transition, children: [
+    t10,
+    t11
+  ] }), $[27] = t10, $[28] = t11, $[29] = transition, $[30] = t12) : t12 = $[30];
   let t13;
-  $[29] !== t11 || $[30] !== t12 || $[31] !== transition ? (t13 = /* @__PURE__ */ jsxs(MotionFlex, { align: "flex-start", variants: content, transition, children: [
-    t11,
-    t12
-  ] }), $[29] = t11, $[30] = t12, $[31] = transition, $[32] = t13) : t13 = $[32];
-  let t14;
-  $[33] !== cardTone || $[34] !== duration || $[35] !== hasDuration || $[36] !== onClose || $[37] !== radius || $[38] !== transition || $[39] !== updatedAt || $[40] !== visualDuration ? (t14 = hasDuration && /* @__PURE__ */ jsxs(MotionBox, { className: toastLoadingBar(), variants: content, transition, children: [
-    /* @__PURE__ */ jsx(Card, { className: toastLoadingBarMask(), tone: cardTone, radius }),
-    /* @__PURE__ */ jsx(MotionCard, { className: toastLoadingBarProgress(), tone: cardTone, initial: {
-      scaleX: 0
-    }, animate: {
-      scaleX: 1
-    }, transition: {
-      delay: visualDuration,
-      duration: duration / 1e3,
-      ease: "linear"
-    }, onAnimationComplete: onClose }, `progress-${updatedAt}`)
-  ] }), $[33] = cardTone, $[34] = duration, $[35] = hasDuration, $[36] = onClose, $[37] = radius, $[38] = transition, $[39] = updatedAt, $[40] = visualDuration, $[41] = t14) : t14 = $[41];
-  let t15;
-  return $[42] !== as || $[43] !== cardTone || $[44] !== radius || $[45] !== rest || $[46] !== role || $[47] !== t13 || $[48] !== t14 || $[49] !== t8 || $[50] !== transition || $[51] !== visualDuration ? (t15 = /* @__PURE__ */ jsxs(MotionCard, { as, className: t7, "data-ui": "Toast", role, ...rest, "data-has-duration": t8, custom: visualDuration, radius, shadow: 2, tone: cardTone, layout: "position", variants: container, initial, animate, exit, transition, position: "relative", children: [
-    t13,
-    t14
-  ] }), $[42] = as, $[43] = cardTone, $[44] = radius, $[45] = rest, $[46] = role, $[47] = t13, $[48] = t14, $[49] = t8, $[50] = transition, $[51] = visualDuration, $[52] = t15) : t15 = $[52], t15;
+  return $[31] !== as || $[32] !== cardTone || $[33] !== radius || $[34] !== rest || $[35] !== role || $[36] !== t12 || $[37] !== transition || $[38] !== visualDuration ? (t13 = /* @__PURE__ */ jsx(MotionCard, { as, className: t7, "data-ui": "Toast", role, ...rest, custom: visualDuration, radius, shadow: 2, tone: cardTone, layout: "position", variants: container, initial, animate, exit, transition, position: "relative", children: t12 }), $[31] = as, $[32] = cardTone, $[33] = radius, $[34] = rest, $[35] = role, $[36] = t12, $[37] = transition, $[38] = visualDuration, $[39] = t13) : t13 = $[39], t13;
 }
-Toast.displayName = "Toast";
 const container = {
   initial: {
     y: 32,
@@ -1011,7 +1651,7 @@ const container = {
   visible: {
     opacity: 1
   }
-}, MotionCard = motion.create(Card), MotionFlex = motion.create(Flex), MotionText = motion.create(Text), MotionBox = motion.create(Box);
+}, MotionCard = motion.create(Card), MotionFlex = motion.create(Flex), MotionText = motion.create(Text);
 function useMounted() {
   return useSyncExternalStore(subscribe, _temp$1, _temp2);
 }
@@ -1043,7 +1683,6 @@ function ToastLayer(props) {
   let t5;
   return $[3] !== as || $[4] !== children || $[5] !== gap || $[6] !== padding || $[7] !== paddingX || $[8] !== paddingY || $[9] !== t4 ? (t5 = /* @__PURE__ */ jsx(Grid, { as, className: t3, "data-ui": "ToastProvider", padding, paddingX, paddingY, gap, columns: 1, style: t4, children }), $[3] = as, $[4] = children, $[5] = gap, $[6] = padding, $[7] = paddingX, $[8] = paddingY, $[9] = t4, $[10] = t5) : t5 = $[10], t5;
 }
-ToastLayer.displayName = "ToastLayer";
 let toastId = 0;
 function generateToastId() {
   return String(toastId++);
@@ -1101,7 +1740,6 @@ function _temp(t0) {
   } = t0;
   return /* @__PURE__ */ jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title, duration: params_0.duration, updatedAt }, id_0);
 }
-ToastProvider.displayName = "ToastProvider";
 function useToast() {
   const value = useContext(ToastContext);
   if (!value)
@@ -1323,7 +1961,6 @@ function Tree(props) {
   let t22;
   return $[36] !== contextValue || $[37] !== t21 ? (t22 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t21 }), $[36] = contextValue, $[37] = t21, $[38] = t22) : t22 = $[38], t22;
 }
-Tree.displayName = "Tree";
 function useTree() {
   const tree = useContext(TreeContext);
   if (!tree)
@@ -1341,9 +1978,7 @@ const TreeGroup = memo(function(props) {
   const expanded = t1 === void 0 ? !1 : t1, tree = useTree(), t2 = !expanded;
   let t3;
   return $[4] !== children || $[5] !== rest || $[6] !== t2 || $[7] !== tree.space ? (t3 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...rest, hidden: t2, marginTop: tree.space, role: "group", gap: tree.space, children }), $[4] = children, $[5] = rest, $[6] = t2, $[7] = tree.space, $[8] = t3) : t3 = $[8], t3;
-});
-TreeGroup.displayName = "TreeGroup";
-const DEFAULT_TREE_ITEM_ELEMENT = "a";
+}), DEFAULT_TREE_ITEM_ELEMENT = "a";
 function TreeItem(props) {
   const {
     children,
@@ -1395,30 +2030,22 @@ 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: treeItem({
+    className
+  }), 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(${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: treeItem({
+    className
+  }), 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(${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() {
-  const $ = c(2);
-  let 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;
-  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 {
   Arrow,
   Autocomplete,
@@ -1516,7 +2143,6 @@ export {
   Spinner,
   SrOnly,
   Stack,
-  StyleTags,
   Switch,
   Tab,
   TabList,
@@ -1538,6 +2164,7 @@ export {
   _ResizeObserver,
   _elementSizeObserver,
   _getArrayProp,
+  _getResponsiveProp,
   _hasFocus,
   _isEnterToClickElement,
   _isScrollable,
@@ -1583,6 +2210,7 @@ export {
   usePortal,
   usePrefersDark,
   usePrefersReducedMotion,
+  useResponsiveProp,
   useRootTheme,
   useTheme,
   useTheme_v2,