@sanity/ui 3.0.0-static.32 → 3.0.0-static.34

package/dist/index.cjs

@@ -1,12 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), _visualEditing = require("./_chunks-cjs/_visual-editing.cjs"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), react = require("react"), compilerRuntime = require("react/compiler-runtime"), css = require("@sanity/ui/css"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer");
-const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslToRgb = theme.hslToRgb, multiply = theme.multiply, parseColor = theme.parseColor, rgbToHex = theme.rgbToHex, rgbToHsl = theme.rgbToHsl, rgba = theme.rgba, screen = theme.screen;
-function _responsive(media, values, callback) {
-  return (values?.map(callback) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : {
-    [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement
-  });
-}
+var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), react = require("react"), _visualEditing = require("./_chunks-cjs/_visual-editing.cjs"), compilerRuntime = require("react/compiler-runtime"), css = require("@sanity/ui/css"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer");
 function _raf(fn) {
   const frameId = requestAnimationFrame(fn);
   return () => {
@@ -322,14 +316,11 @@ function Breadcrumbs(props) {
     children,
     className,
     expandButton: expandButtonProps,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    gap: _gapProp,
-    gapX = props.gap ?? props.space ?? 2,
-    gapY = props.gap ?? props.space ?? 2,
+    gap = 2,
+    gapX,
+    gapY,
     maxLength,
     separator,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    space: _spaceProp,
     ...rest
   } = props, [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
   _visualEditing.useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
@@ -343,7 +334,7 @@ function Breadcrumbs(props) {
   }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems]);
   return /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: css.breadcrumbs({
     className
-  }), gapX, gapY, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+  }), gap, 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)) });
@@ -464,7 +455,7 @@ function DialogCard(props) {
     t19
   ] }), $[55] = as, $[56] = rest, $[57] = t12, $[58] = t18, $[59] = t19, $[60] = t20) : t20 = $[60], t20;
 }
-const DialogContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context/dialog", {
+const DialogContext = _visualEditing.createGlobalScopedContext("@sanity/ui/v3/dialog", {
   version: 0
 });
 function useDialog() {
@@ -572,49 +563,43 @@ function DialogProvider(props) {
   return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
 }
 function MenuButton(props) {
-  const $ = compilerRuntime.c(63), {
+  const $ = compilerRuntime.c(57), {
     __unstable_disableRestoreFocusOnClose: t0,
-    boundaryElement: deprecated_boundaryElement,
     button: buttonProp,
     id,
     menu: menuProp,
     onClose,
     onOpen,
-    placement: deprecated_placement,
-    popoverScheme: deprecated_popoverScheme,
-    portal: t1,
     popover,
-    popoverRadius: deprecated_popoverRadius,
-    preventOverflow: deprecated_preventOverflow,
     ref: forwardedRef
-  } = props, disableRestoreFocusOnClose = t0 === void 0 ? !1 : t0, deprecated_portal = t1 === void 0 ? !0 : t1, [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), [buttonElement, setButtonElement] = react.useState(null);
-  let t2;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[0] = t2) : t2 = $[0];
-  const [menuElements, setChildMenuElements] = react.useState(t2), openRef = react.useRef(open);
-  let t3, t4;
-  $[1] !== onOpen || $[2] !== open ? (t3 = () => {
+  } = props, disableRestoreFocusOnClose = t0 === void 0 ? !1 : t0, [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), [buttonElement, setButtonElement] = react.useState(null);
+  let t1;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
+  const [menuElements, setChildMenuElements] = react.useState(t1), openRef = react.useRef(open);
+  let t2, t3;
+  $[1] !== onOpen || $[2] !== open ? (t2 = () => {
     onOpen && open && !openRef.current && onOpen();
-  }, t4 = [onOpen, open], $[1] = onOpen, $[2] = open, $[3] = t3, $[4] = t4) : (t3 = $[3], t4 = $[4]), react.useEffect(t3, t4);
-  let t5, t6;
-  $[5] !== onClose || $[6] !== open ? (t5 = () => {
+  }, t3 = [onOpen, open], $[1] = onOpen, $[2] = open, $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), react.useEffect(t2, t3);
+  let t4, t5;
+  $[5] !== onClose || $[6] !== open ? (t4 = () => {
     onClose && !open && openRef.current && onClose();
-  }, t6 = [onClose, open], $[5] = onClose, $[6] = open, $[7] = t5, $[8] = t6) : (t5 = $[7], t6 = $[8]), react.useEffect(t5, t6);
-  let t7, t8;
-  $[9] !== open ? (t7 = () => {
+  }, t5 = [onClose, open], $[5] = onClose, $[6] = open, $[7] = t4, $[8] = t5) : (t4 = $[7], t5 = $[8]), react.useEffect(t4, t5);
+  let t6, t7;
+  $[9] !== open ? (t6 = () => {
     openRef.current = open;
-  }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), react.useEffect(t7, t8);
-  let t9;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
+  }, t7 = [open], $[9] = open, $[10] = t6, $[11] = t7) : (t6 = $[10], t7 = $[11]), react.useEffect(t6, t7);
+  let t8;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => {
     setOpen(_temp$4), setShouldFocus(null);
-  }, $[12] = t9) : t9 = $[12];
-  const handleButtonClick = t9;
-  let t10;
-  $[13] !== open ? (t10 = (event) => {
+  }, $[12] = t8) : t8 = $[12];
+  const handleButtonClick = t8;
+  let t9;
+  $[13] !== open ? (t9 = (event) => {
     open && event.preventDefault();
-  }, $[13] = open, $[14] = t10) : t10 = $[14];
-  const handleMouseDown = t10;
-  let t11;
-  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (event_0) => {
+  }, $[13] = open, $[14] = t9) : t9 = $[14];
+  const handleMouseDown = t9;
+  let t10;
+  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (event_0) => {
     if (event_0.key === "ArrowDown" || event_0.key === "Enter" || event_0.key === " ") {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("first");
       return;
@@ -623,10 +608,10 @@ function MenuButton(props) {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("last");
       return;
     }
-  }, $[15] = t11) : t11 = $[15];
-  const handleButtonKeyDown = t11;
-  let t12;
-  $[16] !== buttonElement || $[17] !== menuElements ? (t12 = (event_1) => {
+  }, $[15] = t10) : t10 = $[15];
+  const handleButtonKeyDown = t10;
+  let t11;
+  $[16] !== buttonElement || $[17] !== menuElements ? (t11 = (event_1) => {
     const target = event_1.target;
     if (target instanceof Node && !(buttonElement && (target === buttonElement || buttonElement.contains(target)))) {
       for (const el of menuElements)
@@ -634,15 +619,15 @@ function MenuButton(props) {
           return;
       setOpen(!1);
     }
-  }, $[16] = buttonElement, $[17] = menuElements, $[18] = t12) : t12 = $[18];
-  const handleMenuClickOutside = t12;
-  let t13;
-  $[19] !== buttonElement || $[20] !== disableRestoreFocusOnClose ? (t13 = () => {
+  }, $[16] = buttonElement, $[17] = menuElements, $[18] = t11) : t11 = $[18];
+  const handleMenuClickOutside = t11;
+  let t12;
+  $[19] !== buttonElement || $[20] !== disableRestoreFocusOnClose ? (t12 = () => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, $[19] = buttonElement, $[20] = disableRestoreFocusOnClose, $[21] = t13) : t13 = $[21];
-  const handleMenuEscape = t13;
-  let t14;
-  $[22] !== menuElements ? (t14 = (event_2) => {
+  }, $[19] = buttonElement, $[20] = disableRestoreFocusOnClose, $[21] = t12) : t12 = $[21];
+  const handleMenuEscape = t12;
+  let t13;
+  $[22] !== menuElements ? (t13 = (event_2) => {
     const target_0 = event_2.relatedTarget;
     if (target_0 instanceof Node) {
       for (const el_0 of menuElements)
@@ -650,18 +635,18 @@ function MenuButton(props) {
           return;
       setOpen(!1);
     }
-  }, $[22] = menuElements, $[23] = t14) : t14 = $[23];
-  const handleBlur = t14;
-  let t15;
-  $[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t15 = () => {
+  }, $[22] = menuElements, $[23] = t13) : t13 = $[23];
+  const handleBlur = t13;
+  let t14;
+  $[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t14 = () => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, $[24] = buttonElement, $[25] = disableRestoreFocusOnClose, $[26] = t15) : t15 = $[26];
-  const handleItemClick = t15;
+  }, $[24] = buttonElement, $[25] = disableRestoreFocusOnClose, $[26] = t14) : t14 = $[26];
+  const handleItemClick = t14;
+  let t15;
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t15 = (el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), $[27] = t15) : t15 = $[27];
+  const registerElement = t15;
   let t16;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t16 = (el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), $[27] = t16) : t16 = $[27];
-  const registerElement = t16;
-  let t17;
-  $[28] !== buttonElement || $[29] !== handleBlur || $[30] !== handleItemClick || $[31] !== handleMenuClickOutside || $[32] !== handleMenuEscape || $[33] !== id || $[34] !== menuProp || $[35] !== shouldFocus ? (t17 = menuProp && react.cloneElement(menuProp, {
+  $[28] !== buttonElement || $[29] !== handleBlur || $[30] !== handleItemClick || $[31] !== handleMenuClickOutside || $[32] !== handleMenuEscape || $[33] !== id || $[34] !== menuProp || $[35] !== shouldFocus ? (t16 = menuProp && react.cloneElement(menuProp, {
     "aria-labelledby": id,
     onBlurCapture: handleBlur,
     onClickOutside: handleMenuClickOutside,
@@ -670,17 +655,17 @@ function MenuButton(props) {
     originElement: buttonElement,
     registerElement,
     shouldFocus
-  }), $[28] = buttonElement, $[29] = handleBlur, $[30] = handleItemClick, $[31] = handleMenuClickOutside, $[32] = handleMenuEscape, $[33] = id, $[34] = menuProp, $[35] = shouldFocus, $[36] = t17) : t17 = $[36];
-  const menu = t17;
-  let t18;
+  }), $[28] = buttonElement, $[29] = handleBlur, $[30] = handleItemClick, $[31] = handleMenuClickOutside, $[32] = handleMenuEscape, $[33] = id, $[34] = menuProp, $[35] = shouldFocus, $[36] = t16) : t16 = $[36];
+  const menu = t16;
+  let t17;
   bb0: {
     if (!buttonProp) {
-      t18 = null;
+      t17 = null;
       break bb0;
     }
-    const t192 = buttonProp.props.selected ?? open;
-    let t202;
-    $[37] !== buttonProp || $[38] !== handleMouseDown || $[39] !== id || $[40] !== open || $[41] !== t192 ? (t202 = react.cloneElement(buttonProp, {
+    const t182 = buttonProp.props.selected ?? open;
+    let t192;
+    $[37] !== buttonProp || $[38] !== handleMouseDown || $[39] !== id || $[40] !== open || $[41] !== t182 ? (t192 = react.cloneElement(buttonProp, {
       "data-ui": "MenuButton",
       id,
       onClick: handleButtonClick,
@@ -689,30 +674,24 @@ function MenuButton(props) {
       "aria-haspopup": !0,
       "aria-expanded": open,
       ref: setButtonElement,
-      selected: t192
-    }), $[37] = buttonProp, $[38] = handleMouseDown, $[39] = id, $[40] = open, $[41] = t192, $[42] = t202) : t202 = $[42], t18 = t202;
+      selected: t182
+    }), $[37] = buttonProp, $[38] = handleMouseDown, $[39] = id, $[40] = open, $[41] = t182, $[42] = t192) : t192 = $[42], t17 = t192;
   }
-  const button = t18;
-  let t19, t20;
-  $[43] !== buttonElement ? (t19 = () => buttonElement, t20 = [buttonElement], $[43] = buttonElement, $[44] = t19, $[45] = t20) : (t19 = $[44], t20 = $[45]), react.useImperativeHandle(forwardedRef, t19, t20);
-  let t21, t22;
-  $[46] !== popover ? (t22 = popover || {}, $[46] = popover, $[47] = t22) : t22 = $[47];
-  let t23;
-  $[48] !== deprecated_boundaryElement || $[49] !== deprecated_placement || $[50] !== deprecated_popoverRadius || $[51] !== deprecated_popoverScheme || $[52] !== deprecated_portal || $[53] !== deprecated_preventOverflow || $[54] !== t22 ? (t23 = {
-    boundaryElement: deprecated_boundaryElement,
+  const button = t17;
+  let t18, t19;
+  $[43] !== buttonElement ? (t18 = () => buttonElement, t19 = [buttonElement], $[43] = buttonElement, $[44] = t18, $[45] = t19) : (t18 = $[44], t19 = $[45]), react.useImperativeHandle(forwardedRef, t18, t19);
+  let t20, t21;
+  $[46] !== popover ? (t21 = popover || {}, $[46] = popover, $[47] = t21) : t21 = $[47];
+  let t22;
+  $[48] !== t21 ? (t22 = {
     overflow: "auto",
-    placement: deprecated_placement,
-    portal: deprecated_portal,
-    preventOverflow: deprecated_preventOverflow,
-    radius: deprecated_popoverRadius,
-    scheme: deprecated_popoverScheme,
-    ...t22
-  }, $[48] = deprecated_boundaryElement, $[49] = deprecated_placement, $[50] = deprecated_popoverRadius, $[51] = deprecated_popoverScheme, $[52] = deprecated_portal, $[53] = deprecated_preventOverflow, $[54] = t22, $[55] = t23) : t23 = $[55], t21 = t23;
-  const popoverProps = t21;
+    ...t21
+  }, $[48] = t21, $[49] = t22) : t22 = $[49], t20 = t22;
+  const popoverProps = t20;
+  let t23;
+  $[50] !== button ? (t23 = button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[50] = button, $[51] = t23) : t23 = $[51];
   let t24;
-  $[56] !== button ? (t24 = button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[56] = button, $[57] = t24) : t24 = $[57];
-  let t25;
-  return $[58] !== menu || $[59] !== open || $[60] !== popoverProps || $[61] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t24 }), $[58] = menu, $[59] = open, $[60] = popoverProps, $[61] = t24, $[62] = t25) : t25 = $[62], t25;
+  return $[52] !== menu || $[53] !== open || $[54] !== popoverProps || $[55] !== t23 ? (t24 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t23 }), $[52] = menu, $[53] = open, $[54] = popoverProps, $[55] = t23, $[56] = t24) : t24 = $[56], t24;
 }
 function _temp$4(v) {
   return !v;
@@ -852,7 +831,7 @@ function _temp$3() {
   return !0;
 }
 const subscribe = () => () => {
-}, ToastContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context/toast", null), DEFAULT_TOAST_LAYER_ELEMENT = "ul";
+}, ToastContext = _visualEditing.createGlobalScopedContext("@sanity/ui/v3/toast", null), DEFAULT_TOAST_LAYER_ELEMENT = "ul";
 function ToastLayer(props) {
   const $ = compilerRuntime.c(11), {
     as: t0,
@@ -871,7 +850,7 @@ function ToastLayer(props) {
     zIndex
   }, $[1] = zIndex, $[2] = t4) : t4 = $[2];
   let t5;
-  return $[3] !== as || $[4] !== children || $[5] !== gap || $[6] !== padding || $[7] !== paddingX || $[8] !== paddingY || $[9] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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;
+  return $[3] !== as || $[4] !== children || $[5] !== gap || $[6] !== padding || $[7] !== paddingX || $[8] !== paddingY || $[9] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Grid, { as, className: t3, "data-ui": "ToastProvider", padding, paddingX, paddingY, gap, gridTemplateColumns: 1, style: t4, children }), $[3] = as, $[4] = children, $[5] = gap, $[6] = padding, $[7] = paddingX, $[8] = paddingY, $[9] = t4, $[10] = t5) : t5 = $[10], t5;
 }
 let toastId = 0;
 function generateToastId() {
@@ -994,40 +973,39 @@ function _focusItemElement(el) {
     firstChild && firstChild instanceof HTMLElement && firstChild.focus();
   }
 }
-const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context/tree", null), DEFAULT_TREE_ELEMENT = "div";
+const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/v3/tree", null), DEFAULT_TREE_ELEMENT = "div";
 function Tree(props) {
-  const $ = compilerRuntime.c(39), t0 = props;
-  let children, forwardedRef, gap, onFocus, rest, t1;
+  const $ = compilerRuntime.c(38), t0 = props;
+  let children, forwardedRef, onFocus, rest, t1;
   $[0] !== t0 ? ({
     children,
-    gap,
-    space: t1,
+    gap: t1,
     onFocus,
     ref: forwardedRef,
     ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = forwardedRef, $[3] = gap, $[4] = onFocus, $[5] = rest, $[6] = t1) : (children = $[1], forwardedRef = $[2], gap = $[3], onFocus = $[4], rest = $[5], t1 = $[6]);
-  const space = t1 === void 0 ? 1 : t1, ref = react.useRef(null), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement);
+  } = t0, $[0] = t0, $[1] = children, $[2] = forwardedRef, $[3] = onFocus, $[4] = rest, $[5] = t1) : (children = $[1], forwardedRef = $[2], onFocus = $[3], rest = $[4], t1 = $[5]);
+  const gap = t1 === void 0 ? 1 : t1, ref = react.useRef(null), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement);
   let t2, t3;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[7] = t3) : t3 = $[7], t2 = t3;
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[6] = t3) : t3 = $[6], t2 = t3;
   const path = t2;
   let t4;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t4 = [], $[8] = t4) : t4 = $[8];
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = [], $[7] = t4) : t4 = $[7];
   const [itemElements, setItemElements] = react.useState(t4);
   let t5;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = {}, $[9] = t5) : t5 = $[9];
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t5 = {}, $[8] = t5) : t5 = $[8];
   const [state, setState] = react.useState(t5), stateRef = react.useRef(state);
   let t6;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[10] = t6) : t6 = $[10], react.useImperativeHandle(forwardedRef, t6);
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[9] = t6) : t6 = $[9], react.useImperativeHandle(forwardedRef, t6);
   let t7, t8;
-  $[11] !== focusedElement ? (t7 = () => {
+  $[10] !== focusedElement ? (t7 = () => {
     focusedElementRef.current = focusedElement;
-  }, t8 = [focusedElement], $[11] = focusedElement, $[12] = t7, $[13] = t8) : (t7 = $[12], t8 = $[13]), react.useEffect(t7, t8);
+  }, t8 = [focusedElement], $[10] = focusedElement, $[11] = t7, $[12] = t8) : (t7 = $[11], t8 = $[12]), react.useEffect(t7, t8);
   let t10, t9;
-  $[14] !== state ? (t9 = () => {
+  $[13] !== state ? (t9 = () => {
     stateRef.current = state;
-  }, t10 = [state], $[14] = state, $[15] = t10, $[16] = t9) : (t10 = $[15], t9 = $[16]), react.useEffect(t9, t10);
+  }, t10 = [state], $[13] = state, $[14] = t10, $[15] = t9) : (t10 = $[14], t9 = $[15]), react.useEffect(t9, t10);
   let t11;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (element, path_0, expanded, selected) => (setState((s) => ({
+  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (element, path_0, expanded, selected) => (setState((s) => ({
     ...s,
     [path_0]: {
       element,
@@ -1040,10 +1018,10 @@ function Tree(props) {
       };
       return delete newState[path_0], newState;
     });
-  }), $[17] = t11) : t11 = $[17];
+  }), $[16] = t11) : t11 = $[16];
   const registerItem = t11;
   let t12;
-  $[18] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (path_1, expanded_0) => {
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (path_1, expanded_0) => {
     setState((s_1) => {
       const itemState = s_1[path_1];
       return itemState ? {
@@ -1054,25 +1032,25 @@ function Tree(props) {
         }
       } : s_1;
     });
-  }, $[18] = t12) : t12 = $[18];
+  }, $[17] = t12) : t12 = $[17];
   const setExpanded = t12;
   let t13;
   const t14 = focusedElement || itemElements[0] || null;
   let t15;
-  $[19] !== space || $[20] !== state || $[21] !== t14 ? (t15 = {
+  $[18] !== gap || $[19] !== state || $[20] !== t14 ? (t15 = {
     version: 0,
     focusedElement: t14,
+    gap,
     level: 0,
     path,
     registerItem,
     setExpanded,
     setFocusedElement,
-    space,
     state
-  }, $[19] = space, $[20] = state, $[21] = t14, $[22] = t15) : t15 = $[22], t13 = t15;
+  }, $[18] = gap, $[19] = state, $[20] = t14, $[21] = t15) : t15 = $[21], t13 = t15;
   const contextValue = t13;
   let t16;
-  $[23] !== itemElements ? (t16 = (event) => {
+  $[22] !== itemElements ? (t16 = (event) => {
     if (focusedElementRef.current) {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -1131,27 +1109,26 @@ function Tree(props) {
         return;
       }
     }
-  }, $[23] = itemElements, $[24] = t16) : t16 = $[24];
+  }, $[22] = itemElements, $[23] = t16) : t16 = $[23];
   const handleKeyDown = t16;
   let t17;
-  $[25] !== onFocus ? (t17 = (event_0) => {
+  $[24] !== onFocus ? (t17 = (event_0) => {
     setFocusedElement(event_0.target), onFocus?.(event_0);
-  }, $[25] = onFocus, $[26] = t17) : t17 = $[26];
+  }, $[24] = onFocus, $[25] = t17) : t17 = $[25];
   const handleFocus = t17;
   let t18;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t18 = () => {
+  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t18 = () => {
     if (!ref.current)
       return;
     const _itemElements = Array.from(ref.current.querySelectorAll('[data-ui="TreeItem"]'));
     setItemElements(_itemElements);
-  }, $[27] = t18) : t18 = $[27];
+  }, $[26] = t18) : t18 = $[26];
   let t19;
-  $[28] !== children ? (t19 = [children], $[28] = children, $[29] = t19) : t19 = $[29], react.useEffect(t18, t19);
-  const t20 = gap ?? space;
+  $[27] !== children ? (t19 = [children], $[27] = children, $[28] = t19) : t19 = $[28], react.useEffect(t18, t19);
+  let t20;
+  $[29] !== children || $[30] !== gap || $[31] !== handleFocus || $[32] !== handleKeyDown || $[33] !== rest ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "data-ui": "Tree", ...rest, gap, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", children }), $[29] = children, $[30] = gap, $[31] = handleFocus, $[32] = handleKeyDown, $[33] = rest, $[34] = t20) : t20 = $[34];
   let t21;
-  $[30] !== children || $[31] !== handleFocus || $[32] !== handleKeyDown || $[33] !== rest || $[34] !== t20 ? (t21 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "data-ui": "Tree", ...rest, gap: t20, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", children }), $[30] = children, $[31] = handleFocus, $[32] = handleKeyDown, $[33] = rest, $[34] = t20, $[35] = t21) : t21 = $[35];
-  let t22;
-  return $[36] !== contextValue || $[37] !== t21 ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t21 }), $[36] = contextValue, $[37] = t21, $[38] = t22) : t22 = $[38], t22;
+  return $[35] !== contextValue || $[36] !== t20 ? (t21 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t20 }), $[35] = contextValue, $[36] = t20, $[37] = t21) : t21 = $[37], t21;
 }
 function useTree() {
   const tree = react.useContext(TreeContext);
@@ -1159,7 +1136,7 @@ function useTree() {
     throw new Error("Tree: missing context value");
   return tree;
 }
-const TreeGroup = react.memo(function(props) {
+const TreeGroup = function(props) {
   const $ = compilerRuntime.c(9), t0 = props;
   let children, rest, t1;
   $[0] !== t0 ? ({
@@ -1169,8 +1146,8 @@ const TreeGroup = react.memo(function(props) {
   } = t0, $[0] = t0, $[1] = children, $[2] = rest, $[3] = t1) : (children = $[1], rest = $[2], t1 = $[3]);
   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__ */ jsxRuntime.jsx(_visualEditing.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;
-}), DEFAULT_TREE_ITEM_ELEMENT = "a";
+  return $[4] !== children || $[5] !== rest || $[6] !== t2 || $[7] !== tree.gap ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "data-ui": "TreeGroup", ...rest, hidden: t2, marginTop: tree.gap, role: "group", gap: tree.gap, children }), $[4] = children, $[5] = rest, $[6] = t2, $[7] = tree.gap, $[8] = t3) : t3 = $[8], t3;
+}, DEFAULT_TREE_ITEM_ELEMENT = "a";
 function TreeItem(props) {
   const {
     children,
@@ -1396,60 +1373,6 @@ function findScrollable(parentNode) {
     _scrollEl = _scrollEl.parentNode;
   return _scrollEl;
 }
-function useArrayProp(val, defaultVal) {
-  const $ = compilerRuntime.c(3);
-  let t0;
-  $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_visualEditing._getArrayProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
-  const [t1, setCache] = react.useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
-  return hash !== cachedHash && setCache([_visualEditing._getArrayProp(val, defaultVal), hash]), cachedVal;
-}
-function _getElements(element, elementsArg) {
-  const ret = [element];
-  for (const el of elementsArg)
-    Array.isArray(el) ? ret.push(...el) : ret.push(el);
-  return ret.filter(Boolean);
-}
-function useClickOutside(listener, t0, boundaryElement) {
-  const $ = compilerRuntime.c(12), elementsArg = t0 === void 0 ? _visualEditing.EMPTY_ARRAY : t0, [element, setElement] = react.useState(null);
-  let t1;
-  $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
-  const [elements, setElements] = react.useState(t1), elementsRef = react.useRef(elements);
-  let t2, t3;
-  $[3] !== element || $[4] !== elementsArg ? (t2 = () => {
-    const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
-    if (prevElements.length !== nextElements.length) {
-      setElements(nextElements), elementsRef.current = nextElements;
-      return;
-    }
-    for (const el of prevElements)
-      if (!nextElements.includes(el)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
-      }
-    for (const el_0 of nextElements)
-      if (!prevElements.includes(el_0)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
-      }
-  }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), react.useEffect(t2, t3);
-  let t4, t5;
-  return $[7] !== boundaryElement || $[8] !== elements || $[9] !== listener ? (t4 = () => {
-    if (!listener)
-      return;
-    const handleWindowMouseDown = (evt) => {
-      const target = evt.target;
-      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
-        for (const el_1 of elements)
-          if (target === el_1 || el_1.contains(target))
-            return;
-        listener(evt);
-      }
-    };
-    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
-      window.removeEventListener("mousedown", handleWindowMouseDown);
-    };
-  }, t5 = [boundaryElement, listener, elements], $[7] = boundaryElement, $[8] = elements, $[9] = listener, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), react.useEffect(t4, t5), setElement;
-}
 const _elementSizeObserver = _createElementSizeObserver();
 function _createElementRectValueListener() {
   return {
@@ -1497,20 +1420,11 @@ function useElementSize(element) {
       return _elementSizeObserver.subscribe(element, setSize);
   }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.useEffect(t0, t1), size;
 }
-function useElementRect(element) {
-  return useElementSize(element)?._contentRect || null;
-}
-function useForwardedRef(ref) {
-  const $ = compilerRuntime.c(1), innerRef = react.useRef(null);
-  let t0;
-  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], react.useImperativeHandle(ref, t0), innerRef;
-}
 const DEFAULT_LABEL_ELEMENT = "div";
 function Label(props) {
-  const $ = compilerRuntime.c(28);
-  let accent, align, children, className, rest, t0, t1, t2, t3, textOverflowProp;
+  const $ = compilerRuntime.c(26);
+  let align, children, className, rest, t0, t1, t2, t3, textOverflowProp;
   $[0] !== props ? ({
-    accent,
     align,
     as: t0,
     children,
@@ -1520,30 +1434,29 @@ function Label(props) {
     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]);
+  } = props, $[0] = props, $[1] = align, $[2] = children, $[3] = className, $[4] = rest, $[5] = t0, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], rest = $[4], t0 = $[5], t1 = $[6], t2 = $[7], t3 = $[8], textOverflowProp = $[9]);
   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 = css.label({
+  $[10] !== align || $[11] !== className || $[12] !== muted || $[13] !== size || $[14] !== weight ? (t4 = css.label({
     className,
-    accent,
     align,
     muted,
     size,
     weight
-  }), $[11] = accent, $[12] = align, $[13] = className, $[14] = muted, $[15] = size, $[16] = weight, $[17] = t4) : t4 = $[17];
+  }), $[10] = align, $[11] = className, $[12] = muted, $[13] = size, $[14] = weight, $[15] = t4) : t4 = $[15];
   let t5;
-  $[18] !== textOverflowProp ? (t5 = css.textOverflow({
+  $[16] !== textOverflowProp ? (t5 = css.textOverflow({
     textOverflow: textOverflowProp
-  }), $[18] = textOverflowProp, $[19] = t5) : t5 = $[19];
+  }), $[16] = textOverflowProp, $[17] = t5) : t5 = $[17];
   let t6;
-  $[20] !== children || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t5, children }), $[20] = children, $[21] = t5, $[22] = t6) : t6 = $[22];
+  $[18] !== children || $[19] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t5, children }), $[18] = children, $[19] = t5, $[20] = t6) : t6 = $[20];
   let t7;
-  return $[23] !== Element2 || $[24] !== rest || $[25] !== t4 || $[26] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "Label", ...rest, className: t4, children: t6 }), $[23] = Element2, $[24] = rest, $[25] = t4, $[26] = t6, $[27] = t7) : t7 = $[27], t7;
+  return $[21] !== Element2 || $[22] !== rest || $[23] !== t4 || $[24] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "Label", ...rest, className: t4, children: t6 }), $[21] = Element2, $[22] = rest, $[23] = t4, $[24] = t6, $[25] = t7) : t7 = $[25], t7;
 }
 const DEFAULT_AVATAR_ELEMENT = "span";
 function Avatar(props) {
-  const $ = compilerRuntime.c(51), t0 = props;
-  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, className, initials, onImageLoadError, rest, src, t1, t2, t3, t4, title;
+  const $ = compilerRuntime.c(50), t0 = props;
+  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, className, initials, onImageLoadError, rest, src, t1, t2, t3, title;
   $[0] !== t0 ? ({
     __unstable_hideInnerStroke,
     as: t1,
@@ -1555,56 +1468,55 @@ function Avatar(props) {
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
-    status: t3,
-    size: t4,
+    size: t3,
     ...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 = _visualEditing.useResponsiveProp(sizeProp), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = react.useState(!1);
-  let t5, t6;
-  $[14] !== arrowPosition || $[15] !== arrowPositionProp ? (t5 = () => {
+  } = 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] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], className = $[4], initials = $[5], onImageLoadError = $[6], rest = $[7], src = $[8], t1 = $[9], t2 = $[10], t3 = $[11], title = $[12]);
+  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "magenta" : t2, sizeProp = t3 === void 0 ? 1 : t3, size = _visualEditing.useResponsiveProp(sizeProp), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = react.useState(!1);
+  let t4, t5;
+  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t4 = () => {
     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]), react.useEffect(t5, t6);
-  let t7, t8;
-  $[18] !== src ? (t7 = () => {
+  }, t5 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t4, $[16] = t5) : (t4 = $[15], t5 = $[16]), react.useEffect(t4, t5);
+  let t6, t7;
+  $[17] !== src ? (t6 = () => {
     src && setImageError(!1);
-  }, t8 = [src], $[18] = src, $[19] = t7, $[20] = t8) : (t7 = $[19], t8 = $[20]), react.useEffect(t7, t8);
-  let t9;
-  $[21] !== onImageLoadError ? (t9 = () => {
+  }, t7 = [src], $[17] = src, $[18] = t6, $[19] = t7) : (t6 = $[18], t7 = $[19]), react.useEffect(t6, t7);
+  let t8;
+  $[20] !== onImageLoadError ? (t8 = () => {
     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$1), $[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 = css.avatar({
+  }, $[20] = onImageLoadError, $[21] = t8) : t8 = $[21];
+  const handleImageError = t8;
+  let t9, t10;
+  $[22] !== size ? (t10 = Object.values(size).map(_temp$1), $[22] = size, $[23] = t10) : t10 = $[23], t9 = t10;
+  const initialsSize = t9, t11 = __unstable_hideInnerStroke ? "" : void 0;
+  let t12;
+  $[24] !== className || $[25] !== color || $[26] !== sizeProp ? (t12 = css.avatar({
     className,
     color,
     size: sizeProp
-  }), $[25] = className, $[26] = color, $[27] = sizeProp, $[28] = t13) : t13 = $[28];
-  const t14 = imageError ? "" : void 0;
+  }), $[24] = className, $[25] = color, $[26] = sizeProp, $[27] = t12) : t12 = $[27];
+  const t13 = imageError ? "" : void 0;
+  let t14;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = css.avatarArrow(), $[28] = t14) : t14 = $[28];
   let t15;
-  $[29] === Symbol.for("react.memo_cache_sentinel") ? (t15 = css.avatarArrow(), $[29] = t15) : t15 = $[29];
+  $[29] !== color ? (t15 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t14, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.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 }) }) }), $[29] = color, $[30] = t15) : t15 = $[30];
   let t16;
-  $[30] !== color ? (t16 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t15, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.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];
+  $[31] === Symbol.for("react.memo_cache_sentinel") ? (t16 = css.avatarInitials(), $[31] = t16) : t16 = $[31];
   let t17;
-  $[32] === Symbol.for("react.memo_cache_sentinel") ? (t17 = css.avatarInitials(), $[32] = t17) : t17 = $[32];
+  $[32] !== initials || $[33] !== initialsSize ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { alignItems: "center", as: "span", className: t16, display: "flex", justifyContent: "center", position: "absolute", inset: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { align: "center", as: "span", size: initialsSize, weight: "medium", children: initials }) }), $[32] = initials, $[33] = initialsSize, $[34] = t17) : t17 = $[34];
   let t18;
-  $[33] !== initials || $[34] !== initialsSize ? (t18 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { alignItems: "center", as: "span", className: t17, display: "flex", justifyContent: "center", position: "absolute", inset: 0, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(_visualEditing.Box, { className: css.avatarImage(), inset: 0, position: "absolute", children: [
+  $[35] !== handleImageError || $[36] !== initials || $[37] !== src ? (t18 = src && /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { className: css.avatarImage(), inset: 0, position: "absolute", children: [
     /* @__PURE__ */ jsxRuntime.jsx("img", { alt: initials, onError: handleImageError, src }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.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__ */ jsxRuntime.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;
+  ] }), $[35] = handleImageError, $[36] = initials, $[37] = src, $[38] = t18) : t18 = $[38];
+  let t19;
+  return $[39] !== Element2 || $[40] !== arrowPosition || $[41] !== rest || $[42] !== t11 || $[43] !== t12 || $[44] !== t13 || $[45] !== t15 || $[46] !== t17 || $[47] !== t18 || $[48] !== title ? (t19 = /* @__PURE__ */ jsxRuntime.jsxs(Element2, { "data-hide-inner-stroke": t11, "data-ui": "Avatar", ...rest, "aria-label": title, className: t12, "data-arrow-position": arrowPosition, "data-image-error": t13, title, children: [
+    t15,
+    t17,
+    t18
+  ] }), $[39] = Element2, $[40] = arrowPosition, $[41] = rest, $[42] = t11, $[43] = t12, $[44] = t13, $[45] = t15, $[46] = t17, $[47] = t18, $[48] = title, $[49] = t19) : t19 = $[49], t19;
 }
 function _temp$1(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
@@ -1670,28 +1582,29 @@ function AvatarStack(props) {
 }
 const DEFAULT_BADGE_ELEMENT = "span";
 function Badge(props) {
-  const $ = compilerRuntime.c(22), t0 = props;
-  let children, className, rest, t1, t2, t3, t4, t5;
+  const $ = compilerRuntime.c(24), t0 = props;
+  let children, className, rest, t1, t2, t3, t4, t5, t6;
   $[0] !== t0 ? ({
     as: t1,
     children,
     className,
-    fontSize: t2,
-    padding: t3,
-    radius: t4,
-    tone: t5,
+    flex: t2,
+    fontSize: t3,
+    padding: t4,
+    radius: t5,
+    tone: t6,
     ...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 = css.badge({
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5, $[9] = t6) : (children = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8], t6 = $[9]);
+  const as = t1 === void 0 ? DEFAULT_BADGE_ELEMENT : t1, flex = t2 === void 0 ? "none" : t2, fontSize = t3 === void 0 ? 1 : t3, padding = t4 === void 0 ? 1 : t4, radius = t5 === void 0 ? 2 : t5, tone = t6 === void 0 ? "default" : t6;
+  let t7;
+  $[10] !== className || $[11] !== tone ? (t7 = css.badge({
     className,
     tone
-  }), $[9] = className, $[10] = tone, $[11] = t6) : t6 = $[11];
-  let t7;
-  $[12] !== children || $[13] !== fontSize ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, children }), $[12] = children, $[13] = fontSize, $[14] = t7) : t7 = $[14];
+  }), $[10] = className, $[11] = tone, $[12] = t7) : t7 = $[12];
   let t8;
-  return $[15] !== as || $[16] !== padding || $[17] !== radius || $[18] !== rest || $[19] !== t6 || $[20] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "Badge", ...rest, as, className: t6, display: "flex", maxWidth: "fill", padding, radius, width: "min", children: t7 }), $[15] = as, $[16] = padding, $[17] = radius, $[18] = rest, $[19] = t6, $[20] = t7, $[21] = t8) : t8 = $[21], t8;
+  $[13] !== children || $[14] !== fontSize ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, children }), $[13] = children, $[14] = fontSize, $[15] = t8) : t8 = $[15];
+  let t9;
+  return $[16] !== as || $[17] !== flex || $[18] !== padding || $[19] !== radius || $[20] !== rest || $[21] !== t7 || $[22] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "Badge", ...rest, as, className: t7, flex, display: "flex", maxWidth: "fill", padding, radius, width: "min", children: t8 }), $[16] = as, $[17] = flex, $[18] = padding, $[19] = radius, $[20] = rest, $[21] = t7, $[22] = t8, $[23] = t9) : t9 = $[23], t9;
 }
 const DEFAULT_CHECKBOX_ELEMENT = "input";
 function Checkbox(props) {
@@ -1768,55 +1681,52 @@ function Code(props) {
 }
 const DEFAULT_HEADING_ELEMENT = "div";
 function Heading(props) {
-  const $ = compilerRuntime.c(30), t0 = props;
-  let align, children, className, flex, rest, t1, t2, t3, t4, t5, textOverflowProp;
+  const $ = compilerRuntime.c(28), t0 = props;
+  let align, children, className, flex, rest, t1, t2, t3, t4, textOverflowProp;
   $[0] !== t0 ? ({
-    accent: t1,
     align,
-    as: t2,
+    as: t1,
     children,
     className,
     flex,
-    muted: t3,
-    size: t4,
+    muted: t2,
+    size: t3,
     textOverflow: textOverflowProp,
-    weight: t5,
+    weight: t4,
     ...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 = css.heading({
+  } = t0, $[0] = t0, $[1] = align, $[2] = children, $[3] = className, $[4] = flex, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], flex = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], textOverflowProp = $[10]);
+  const Element2 = t1 === void 0 ? DEFAULT_HEADING_ELEMENT : t1, muted = t2 === void 0 ? !1 : t2, size = t3 === void 0 ? 2 : t3, weight = t4 === void 0 ? "regular" : t4;
+  let t5;
+  $[11] !== align || $[12] !== className || $[13] !== flex || $[14] !== muted || $[15] !== size || $[16] !== weight ? (t5 = css.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 = css.textOverflow({
+  }), $[11] = align, $[12] = className, $[13] = flex, $[14] = muted, $[15] = size, $[16] = weight, $[17] = t5) : t5 = $[17];
+  let t6;
+  $[18] !== textOverflowProp ? (t6 = css.textOverflow({
     textOverflow: textOverflowProp
-  }), $[20] = textOverflowProp, $[21] = t7) : t7 = $[21];
+  }), $[18] = textOverflowProp, $[19] = t6) : t6 = $[19];
+  let t7;
+  $[20] !== children || $[21] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t6, children }), $[20] = children, $[21] = t6, $[22] = t7) : t7 = $[22];
   let t8;
-  $[22] !== children || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Element2, { "data-ui": "Heading", ...rest, className: t6, children: t8 }), $[25] = Element2, $[26] = rest, $[27] = t6, $[28] = t8, $[29] = t9) : t9 = $[29], t9;
+  return $[23] !== Element2 || $[24] !== rest || $[25] !== t5 || $[26] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "Heading", ...rest, className: t5, children: t7 }), $[23] = Element2, $[24] = rest, $[25] = t5, $[26] = t7, $[27] = t8) : t8 = $[27], t8;
 }
 const DEFAULT_INLINE_ELEMENT = "div";
 function Inline(props) {
-  const $ = compilerRuntime.c(11), t0 = props;
-  let children, gap, rest, space, t1;
+  const $ = compilerRuntime.c(10), t0 = props;
+  let children, gap, rest, 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__ */ jsxRuntime.jsx(_visualEditing.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;
+  } = t0, $[0] = t0, $[1] = children, $[2] = gap, $[3] = rest, $[4] = t1) : (children = $[1], gap = $[2], rest = $[3], t1 = $[4]);
+  const as = t1 === void 0 ? DEFAULT_INLINE_ELEMENT : t1;
+  let t2;
+  return $[5] !== as || $[6] !== children || $[7] !== gap || $[8] !== rest ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "data-ui": "Inline", ...rest, alignItems: "center", as, display: "flex", gap, flexWrap: "wrap", children }), $[5] = as, $[6] = children, $[7] = gap, $[8] = rest, $[9] = t2) : t2 = $[9], t2;
 }
 const DEFAULT_RADIO_ELEMENT = "input";
 function Radio(props) {
@@ -1854,8 +1764,8 @@ function Radio(props) {
 }
 const DEFAULT_SELECT_ELEMENT = "select";
 function Select(props) {
-  const $ = compilerRuntime.c(38), t0 = props;
-  let children, customValidity, disabled, forwardedRef, gap, readOnly, rest, t1, t2, t3, t4, t5, t6;
+  const $ = compilerRuntime.c(37), t0 = props;
+  let children, customValidity, disabled, forwardedRef, readOnly, rest, t1, t2, t3, t4, t5, t6;
   $[0] !== t0 ? ({
     as: t1,
     border: t2,
@@ -1863,44 +1773,42 @@ function Select(props) {
     customValidity,
     disabled,
     fontSize: t3,
-    gap,
-    padding: t4,
-    radius: t5,
+    gap: t4,
+    padding: t5,
+    radius: t6,
     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 = react.useRef(null);
+  } = t0, $[0] = t0, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = forwardedRef, $[5] = readOnly, $[6] = rest, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5, $[12] = t6) : (children = $[1], customValidity = $[2], disabled = $[3], forwardedRef = $[4], readOnly = $[5], rest = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], t5 = $[11], t6 = $[12]);
+  const Element2 = t1 === void 0 ? DEFAULT_SELECT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, fontSize = t3 === void 0 ? 2 : t3, gap = t4 === void 0 ? 2 : t4, padding = t5 === void 0 ? 3 : t5, radius = t6 === void 0 ? 1 : t6, ref = react.useRef(null);
   let t7;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[14] = t7) : t7 = $[14], react.useImperativeHandle(forwardedRef, t7), _visualEditing.useCustomValidity(ref, customValidity);
-  const t8 = gap ?? space;
-  let t9;
-  $[15] !== border || $[16] !== fontSize || $[17] !== padding || $[18] !== radius || $[19] !== t8 ? (t9 = css.select({
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[13] = t7) : t7 = $[13], react.useImperativeHandle(forwardedRef, t7), _visualEditing.useCustomValidity(ref, customValidity);
+  let t8;
+  $[14] !== border || $[15] !== fontSize || $[16] !== gap || $[17] !== padding || $[18] !== radius ? (t8 = css.select({
     border,
     fontSize,
+    gap,
     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 = css._inputElement(), $[21] = t10) : t10 = $[21];
-  const t11 = disabled || readOnly;
+    radius
+  }), $[14] = border, $[15] = fontSize, $[16] = gap, $[17] = padding, $[18] = radius, $[19] = t8) : t8 = $[19];
+  let t9;
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t9 = css._inputElement(), $[20] = t9) : t9 = $[20];
+  const t10 = disabled || readOnly;
+  let t11;
+  $[21] !== Element2 || $[22] !== children || $[23] !== rest || $[24] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t9, disabled: t10, ref, children }), $[21] = Element2, $[22] = children, $[23] = rest, $[24] = t10, $[25] = t11) : t11 = $[25];
   let t12;
-  $[22] !== Element2 || $[23] !== children || $[24] !== rest || $[25] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t10, disabled: t11, ref, children }), $[22] = Element2, $[23] = children, $[24] = rest, $[25] = t11, $[26] = t12) : t12 = $[26];
+  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t12 = css.selectPresentation(), $[26] = t12) : t12 = $[26];
   let t13;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t13 = css.selectPresentation(), $[27] = t13) : t13 = $[27];
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[27] = t13) : t13 = $[27];
   let t14;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[28] = t14) : t14 = $[28];
+  $[28] !== fontSize ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, children: t13 }), $[28] = fontSize, $[29] = t14) : t14 = $[29];
   let t15;
-  $[29] !== fontSize ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, children: t14 }), $[29] = fontSize, $[30] = t15) : t15 = $[30];
+  $[30] !== padding || $[31] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t12, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { as: "span", display: "inline-block", padding, children: t14 }) }), $[30] = padding, $[31] = t14, $[32] = t15) : t15 = $[32];
   let t16;
-  $[31] !== padding || $[32] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t13, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsxs("div", { "data-ui": "Select", className: t9, "data-icon-right": "", children: [
-    t12,
-    t16
-  ] }), $[34] = t12, $[35] = t16, $[36] = t9, $[37] = t17) : t17 = $[37], t17;
+  return $[33] !== t11 || $[34] !== t15 || $[35] !== t8 ? (t16 = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-ui": "Select", className: t8, "data-icon-right": "", children: [
+    t11,
+    t15
+  ] }), $[33] = t11, $[34] = t15, $[35] = t8, $[36] = t16) : t16 = $[36], t16;
 }
 const DEFAULT_SKELETON_ELEMENT = "div";
 function Skeleton(props) {
@@ -2068,8 +1976,8 @@ function Switch(props) {
 }
 const DEFAULT_TEXT_AREA_ELEMENT = "textarea";
 function TextArea(props) {
-  const $ = compilerRuntime.c(34), t0 = props;
-  let __unstable_disableFocusRing, customValidity, forwardedRef, gap, readOnly, rest, t1, t2, t3, t4, t5, t6, t7;
+  const $ = compilerRuntime.c(33), t0 = props;
+  let __unstable_disableFocusRing, customValidity, forwardedRef, readOnly, rest, t1, t2, t3, t4, t5, t6, t7;
   $[0] !== t0 ? ({
     __unstable_disableFocusRing,
     as: t1,
@@ -2077,39 +1985,37 @@ function TextArea(props) {
     customValidity,
     disabled: t3,
     fontSize: t4,
-    gap,
-    padding: t5,
-    radius: t6,
+    gap: t5,
+    padding: t6,
+    radius: t7,
     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 = react.useRef(null);
+  } = t0, $[0] = t0, $[1] = __unstable_disableFocusRing, $[2] = customValidity, $[3] = forwardedRef, $[4] = readOnly, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = t5, $[11] = t6, $[12] = t7) : (__unstable_disableFocusRing = $[1], customValidity = $[2], forwardedRef = $[3], readOnly = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], t5 = $[10], t6 = $[11], t7 = $[12]);
+  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, gap = t5 === void 0 ? 3 : t5, padding = t6 === void 0 ? 3 : t6, radius = t7 === void 0 ? 2 : t7, ref = react.useRef(null);
   let t8;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[14] = t8) : t8 = $[14], react.useImperativeHandle(forwardedRef, t8), _visualEditing.useCustomValidity(ref, customValidity);
-  const t9 = gap ?? space;
-  let t10;
-  $[15] !== border || $[16] !== fontSize || $[17] !== padding || $[18] !== radius || $[19] !== t9 ? (t10 = css.textArea({
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[13] = t8) : t8 = $[13], react.useImperativeHandle(forwardedRef, t8), _visualEditing.useCustomValidity(ref, customValidity);
+  let t9;
+  $[14] !== border || $[15] !== fontSize || $[16] !== gap || $[17] !== padding || $[18] !== radius ? (t9 = css.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 = css._inputElement(), $[21] = t13) : t13 = $[21];
-  const t14 = __unstable_disableFocusRing ? "" : void 0;
+    gap
+  }), $[14] = border, $[15] = fontSize, $[16] = gap, $[17] = padding, $[18] = radius, $[19] = t9) : t9 = $[19];
+  const t10 = customValidity ? "" : void 0, t11 = !disabled && readOnly ? "" : void 0;
+  let t12;
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t12 = css._inputElement(), $[20] = t12) : t12 = $[20];
+  const t13 = __unstable_disableFocusRing ? "" : void 0;
+  let t14;
+  $[21] !== Element2 || $[22] !== disabled || $[23] !== readOnly || $[24] !== rest || $[25] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t12, "data-no-focus-ring": t13, disabled, readOnly, ref }), $[21] = Element2, $[22] = disabled, $[23] = readOnly, $[24] = rest, $[25] = t13, $[26] = t14) : t14 = $[26];
   let t15;
-  $[22] !== Element2 || $[23] !== disabled || $[24] !== readOnly || $[25] !== rest || $[26] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.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];
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: css._inputPresentation() }), $[27] = t15) : t15 = $[27];
   let t16;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: css._inputPresentation() }), $[28] = t16) : t16 = $[28];
-  let t17;
-  return $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t15 ? (t17 = /* @__PURE__ */ jsxRuntime.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;
+  return $[28] !== t10 || $[29] !== t11 || $[30] !== t14 || $[31] !== t9 ? (t16 = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: t9, "data-invalid": t10, "data-read-only": t11, "data-ui": "TextArea", children: [
+    t14,
+    t15
+  ] }), $[28] = t10, $[29] = t11, $[30] = t14, $[31] = t9, $[32] = t16) : t16 = $[32], t16;
 }
 function TooltipDelayGroupProvider(props) {
   const $ = compilerRuntime.c(9), {
@@ -2249,7 +2155,7 @@ function Root(props) {
     tone: t4,
     ...rest
   } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = height, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4) : (children = $[1], className = $[2], forwardedRef = $[3], height = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9]);
-  const as = t1 === void 0 ? DEFAULT_ROOT_ELEMENT : t1, overflow = t2 === void 0 ? "hidden" : t2, scheme = t3 === void 0 ? "light" : t3, tone = t4 === void 0 ? "transparent" : t4, ref = react.useRef(null);
+  const as = t1 === void 0 ? DEFAULT_ROOT_ELEMENT : t1, overflow = t2 === void 0 ? "hidden" : t2, scheme = t3 === void 0 ? "light" : t3, tone = t4 === void 0 ? "default" : t4, ref = react.useRef(null);
   let t5;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], react.useImperativeHandle(forwardedRef, t5);
   const [portalElement, setPortalElement] = react.useState(null), [boundaryElement, setBoundaryElement] = react.useState(null);
@@ -2332,8 +2238,6 @@ exports.Tab = _visualEditing.Tab;
 exports.TabList = _visualEditing.TabList;
 exports.Text = _visualEditing.Text;
 exports.TextInput = _visualEditing.TextInput;
-exports.ThemeColorProvider = _visualEditing.ThemeColorProvider;
-exports.ThemeProvider = _visualEditing.ThemeProvider;
 exports.Tooltip = _visualEditing.Tooltip;
 exports.TooltipDelayGroupContext = _visualEditing.TooltipDelayGroupContext;
 exports._getArrayProp = _visualEditing._getArrayProp;
@@ -2358,22 +2262,7 @@ exports.usePortal = _visualEditing.usePortal;
 exports.usePrefersDark = _visualEditing.usePrefersDark;
 exports.usePrefersReducedMotion = _visualEditing.usePrefersReducedMotion;
 exports.useResponsiveProp = _visualEditing.useResponsiveProp;
-exports.useRootTheme = _visualEditing.useRootTheme;
-exports.useTheme = _visualEditing.useTheme;
-exports.useTheme_v2 = _visualEditing.useTheme_v2;
 exports.useTooltipDelayGroup = _visualEditing.useTooltipDelayGroup;
-Object.defineProperty(exports, "px", {
-  enumerable: !0,
-  get: function() {
-    return css.px;
-  }
-});
-Object.defineProperty(exports, "rem", {
-  enumerable: !0,
-  get: function() {
-    return css.rem;
-  }
-});
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.AvatarCounter = AvatarCounter;
@@ -2448,26 +2337,12 @@ exports._hasFocus = _hasFocus;
 exports._isScrollable = _isScrollable;
 exports._raf = _raf;
 exports._raf2 = _raf2;
-exports._responsive = _responsive;
 exports.attemptFocus = attemptFocus;
-exports.createColorTheme = createColorTheme;
 exports.focusFirstDescendant = focusFirstDescendant;
 exports.focusLastDescendant = focusLastDescendant;
-exports.hexToRgb = hexToRgb;
-exports.hslToRgb = hslToRgb;
 exports.isFocusable = isFocusable;
-exports.multiply = multiply;
-exports.parseColor = parseColor;
-exports.rgbToHex = rgbToHex;
-exports.rgbToHsl = rgbToHsl;
-exports.rgba = rgba;
-exports.screen = screen;
-exports.useArrayProp = useArrayProp;
-exports.useClickOutside = useClickOutside;
 exports.useDialog = useDialog;
-exports.useElementRect = useElementRect;
 exports.useElementSize = useElementSize;
-exports.useForwardedRef = useForwardedRef;
 exports.useToast = useToast;
 exports.useTree = useTree;
 //# sourceMappingURL=index.cjs.map