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

package/dist/index.cjs

@@ -376,7 +376,7 @@ function Autocomplete(props) {
     dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
   }, [openButtonProps, dispatchOpen]), openButtonNode = react.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Button, { "aria-label": "Open", disabled: expanded, display: "block", fontSize, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = react.useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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 && _visualEditing.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 = react.useCallback((event_5) => {
     event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, [listFocused]), content2 = react.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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 = react.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: react.cloneElement(renderOption(option_0), {
       disabled: loading,
@@ -421,11 +421,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__ */ jsxRuntime.jsx(_visualEditing.Popover, { constrainSize: !0, content: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(_visualEditing.Popover, { constrainSize: !0, content: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(_visualEditing.Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: css.composeClassNames(className, css.breadcrumbs()), gapX, gapY, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: css._composeClassNames(className, css.breadcrumbs()), gapX, gapY, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": !0, as: "li", children: separator || /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted: !0, children: "/" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { as: "li", children: item })
   ] }, itemIndex)) });
@@ -571,7 +571,7 @@ function Dialog(props) {
   }, $[26] = boundaryElement, $[27] = portalElement, $[28] = t9) : t9 = $[28];
   const handleRootClick = t9;
   let t10;
-  $[29] !== className ? (t10 = css.composeClassNames(className, css.dialog()), $[29] = className, $[30] = t10) : t10 = $[30];
+  $[29] !== className ? (t10 = css._composeClassNames(className, css.dialog()), $[29] = className, $[30] = t10) : t10 = $[30];
   const t11 = animate ? "" : void 0;
   let t12;
   $[31] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: preDivRef, tabIndex: 0 }), $[31] = t12) : t12 = $[31];
@@ -781,7 +781,7 @@ function Skeleton(props) {
     };
   }, t3 = [delay], $[6] = delay, $[7] = t2, $[8] = t3) : (t2 = $[7], t3 = $[8]), react.useEffect(t2, t3);
   let t4;
-  $[9] !== className || $[10] !== radius ? (t4 = css.composeClassNames(className, css.skeleton({
+  $[9] !== className || $[10] !== radius ? (t4 = css._composeClassNames(className, css.skeleton({
     radius
   })), $[9] = className, $[10] = radius, $[11] = t4) : t4 = $[11];
   const t5 = animated ? "" : void 0, t6 = visible ? "" : void 0;
@@ -800,7 +800,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 = css.composeClassNames(className, css.codeSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = css._composeClassNames(className, css.codeSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -818,7 +818,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 = css.composeClassNames(className, css.headingSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = css._composeClassNames(className, css.headingSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -836,7 +836,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 = css.composeClassNames(className, css.labelSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = css._composeClassNames(className, css.labelSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -854,7 +854,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 = css.composeClassNames(className, css.textSkeleton({
+  $[4] !== className || $[5] !== size ? (t2 = css._composeClassNames(className, css.textSkeleton({
     size
   })), $[4] = className, $[5] = size, $[6] = t2) : t2 = $[6];
   let t3;
@@ -863,15 +863,17 @@ function TextSkeleton(props) {
 TextSkeleton.displayName = "TextSkeleton";
 const DEFAULT_TAB_PANEL_ELEMENT = "div";
 function TabPanel(props) {
-  const $ = reactCompilerRuntime.c(8), t0 = props;
-  let rest, t1;
+  const $ = reactCompilerRuntime.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__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(_visualEditing.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 = {
@@ -932,7 +934,7 @@ function Toast(props) {
   let t10;
   $[19] !== description || $[20] !== transition ? (t10 = description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(_visualEditing.Flex, { flex: 1, overflowX: "auto", padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Stack, { space: 3, children: [
+  $[22] !== t10 || $[23] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Flex, { flex: 1, overflowX: "auto", padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Stack, { gap: 3, children: [
     t9,
     t10
   ] }) }), $[22] = t10, $[23] = t9, $[24] = t11) : t11 = $[24];
@@ -1386,42 +1388,28 @@ function TreeItem(props) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text }) })
   ] });
-  return href ? /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...rest, as: "li", className: css.composeClassNames(className, css.treeItem()), onClick: handleClick, ref: rootRef, role: "none", children: [
+  return href ? /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...rest, as: "li", className: css._composeClassNames(className, css.treeItem()), onClick: handleClick, ref: rootRef, role: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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(${css.vars.space[2]} * ${tree.level})`
     }, children: content2 }),
     /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...rest, "aria-expanded": expanded, className: css.composeClassNames(className, css.treeItem()), onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...rest, "aria-expanded": expanded, className: css._composeClassNames(className, css.treeItem()), onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
     /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Selectable, { as: "button", "data-pressed": selected ? "" : void 0, "data-ui": "TreeItem__box", radius, style: {
-      paddingLeft: `calc(var(--space-2) * ${tree.level})`
+      paddingLeft: `calc(${css.vars.space[2]} * ${tree.level})`
     }, children: content2 }),
     /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }) })
   ] });
 }
 TreeItem.displayName = "TreeItem";
-function StyleTags(props) {
-  const $ = reactCompilerRuntime.c(10), {
-    theme: themeProp
-  } = props;
+function StyleTags() {
+  const $ = reactCompilerRuntime.c(2);
   let t0;
-  $[0] !== themeProp ? (t0 = themeProp ?? theme.buildTheme_v3(), $[0] = themeProp, $[1] = t0) : t0 = $[1];
-  const theme$1 = t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-theme", precedence: "theme", children: css._compileTheme() }), $[0] = t0) : t0 = $[0];
   let t1;
-  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-palette", precedence: "palette", children: css._compilePalette() }), $[2] = t1) : t1 = $[2];
-  let t2;
-  $[3] !== theme$1 ? (t2 = css._compileTheme({
-    v3: theme$1
-  }), $[3] = theme$1, $[4] = t2) : t2 = $[4];
-  let t3;
-  $[5] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("style", { href: "sanity-system", precedence: "system", children: css._compileSystem() }), $[7] = t4) : t4 = $[7];
-  let t5;
-  return $[8] !== t3 ? (t5 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    t1,
-    t3,
-    t4
-  ] }), $[8] = t3, $[9] = t5) : t5 = $[9], t5;
+  return $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t0,
+    /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-system", precedence: "system", children: css._compileSystem() })
+  ] }), $[1] = t1) : t1 = $[1], t1;
 }
 StyleTags.displayName = "StyleTags";
 exports.Arrow = _visualEditing.Arrow;