@sanity/ui 3.1.14 → 3.3.0

package/dist/index.js

@@ -570,32 +570,33 @@ const StyledBreadcrumbs = styledComponents.styled.ol.withConfig({
   displayName: "ExpandButton",
   componentId: "sc-1es8h8q-1"
 })`appearance:none;margin:-4px;`, Breadcrumbs = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(29);
-  let children, maxLength, restProps, separator, t0;
+  const $ = reactCompilerRuntime.c(30);
+  let children, gap, maxLength, restProps, separator, t0;
   $[0] !== props ? ({
     children,
+    gap,
     maxLength,
     separator,
     space: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = children, $[2] = maxLength, $[3] = restProps, $[4] = separator, $[5] = t0) : (children = $[1], maxLength = $[2], restProps = $[3], separator = $[4], t0 = $[5]);
-  const spaceRaw = t0 === void 0 ? 2 : t0;
-  let t1;
-  $[6] !== spaceRaw ? (t1 = _visualEditing._getArrayProp(spaceRaw), $[6] = spaceRaw, $[7] = t1) : t1 = $[7];
-  const space = t1, [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null);
+  } = props, $[0] = props, $[1] = children, $[2] = gap, $[3] = maxLength, $[4] = restProps, $[5] = separator, $[6] = t0) : (children = $[1], gap = $[2], maxLength = $[3], restProps = $[4], separator = $[5], t0 = $[6]);
+  const t1 = gap === void 0 ? t0 === void 0 ? 2 : t0 : gap;
   let t2;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setOpen(!1), $[8] = t2) : t2 = $[8];
-  const collapse = t2;
+  $[7] !== t1 ? (t2 = _visualEditing._getArrayProp(t1), $[7] = t1, $[8] = t2) : t2 = $[8];
+  const space = t2, [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null);
   let t3;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => setOpen(!0), $[9] = t3) : t3 = $[9];
-  const expand = t3;
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => setOpen(!1), $[9] = t3) : t3 = $[9];
+  const collapse = t3;
   let t4;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => [expandElementRef.current, popoverElementRef.current], $[10] = t4) : t4 = $[10], _visualEditing.useClickOutsideEvent(collapse, t4);
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => setOpen(!0), $[10] = t4) : t4 = $[10];
+  const expand = t4;
   let t5;
-  $[11] !== children ? (t5 = react.Children.toArray(children).filter(react.isValidElement), $[11] = children, $[12] = t5) : t5 = $[12];
-  const rawItems = t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => [expandElementRef.current, popoverElementRef.current], $[11] = t5) : t5 = $[11], _visualEditing.useClickOutsideEvent(collapse, t5);
   let t6;
-  $[13] !== maxLength || $[14] !== open || $[15] !== rawItems || $[16] !== space ? (t6 = {
+  $[12] !== children ? (t6 = react.Children.toArray(children).filter(react.isValidElement), $[12] = children, $[13] = t6) : t6 = $[13];
+  const rawItems = t6;
+  let t7;
+  $[14] !== maxLength || $[15] !== open || $[16] !== rawItems || $[17] !== space ? (t7 = {
     collapse,
     expand,
     expandElementRef,
@@ -604,19 +605,19 @@ const StyledBreadcrumbs = styledComponents.styled.ol.withConfig({
     popoverElementRef,
     rawItems,
     space
-  }, $[13] = maxLength, $[14] = open, $[15] = rawItems, $[16] = space, $[17] = t6) : t6 = $[17];
-  const items = useItems(t6);
-  let t7;
-  if ($[18] !== items || $[19] !== separator || $[20] !== space) {
-    let t82;
-    $[22] !== separator || $[23] !== space ? (t82 = (item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+  }, $[14] = maxLength, $[15] = open, $[16] = rawItems, $[17] = space, $[18] = t7) : t7 = $[18];
+  const items = useItems(t7);
+  let t8;
+  if ($[19] !== items || $[20] !== separator || $[21] !== space) {
+    let t92;
+    $[23] !== separator || $[24] !== space ? (t92 = (item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted: !0, children: "/" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { as: "li", children: item })
-    ] }, itemIndex), $[22] = separator, $[23] = space, $[24] = t82) : t82 = $[24], t7 = items.map(t82), $[18] = items, $[19] = separator, $[20] = space, $[21] = t7;
+    ] }, itemIndex), $[23] = separator, $[24] = space, $[25] = t92) : t92 = $[25], t8 = items.map(t92), $[19] = items, $[20] = separator, $[21] = space, $[22] = t8;
   } else
-    t7 = $[21];
-  let t8;
-  return $[25] !== ref || $[26] !== restProps || $[27] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(StyledBreadcrumbs, { "data-ui": "Breadcrumbs", ...restProps, ref, children: t7 }), $[25] = ref, $[26] = restProps, $[27] = t7, $[28] = t8) : t8 = $[28], t8;
+    t8 = $[22];
+  let t9;
+  return $[26] !== ref || $[27] !== restProps || $[28] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(StyledBreadcrumbs, { "data-ui": "Breadcrumbs", ...restProps, ref, children: t8 }), $[26] = ref, $[27] = restProps, $[28] = t8, $[29] = t9) : t9 = $[29], t9;
 });
 Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
 function useItems(t0) {
@@ -638,7 +639,7 @@ function useItems(t0) {
       let t3;
       $[11] !== afterLength || $[12] !== beforeLength || $[13] !== len || $[14] !== rawItems ? (t3 = rawItems.slice(beforeLength - 1, len - afterLength), $[11] = afterLength, $[12] = beforeLength, $[13] = len, $[14] = rawItems, $[15] = t3) : t3 = $[15];
       let t4;
-      $[16] !== space || $[17] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ol", overflow: "auto", padding: space, space, children: t3 }), $[16] = space, $[17] = t3, $[18] = t4) : t4 = $[18];
+      $[16] !== space || $[17] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ol", overflow: "auto", padding: space, gap: space, children: t3 }), $[16] = space, $[17] = t3, $[18] = t4) : t4 = $[18];
       const t5 = open ? collapse : expand;
       let t6;
       $[19] !== expandElementRef || $[20] !== open || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: t5, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }), $[19] = expandElementRef, $[20] = open, $[21] = t5, $[22] = t6) : t6 = $[22];
@@ -1514,36 +1515,37 @@ function _focusItemElement(el) {
   }
 }
 const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context/tree", null), Tree = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(37);
-  let children, onFocus, restProps, t0;
+  const $ = reactCompilerRuntime.c(38);
+  let children, gap, onFocus, restProps, t0;
   $[0] !== props ? ({
     children,
+    gap,
     space: t0,
     onFocus,
     ...restProps
-  } = props, $[0] = props, $[1] = children, $[2] = onFocus, $[3] = restProps, $[4] = t0) : (children = $[1], onFocus = $[2], restProps = $[3], t0 = $[4]);
-  const space = t0 === void 0 ? 1 : t0, ref = react.useRef(null), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement);
+  } = props, $[0] = props, $[1] = children, $[2] = gap, $[3] = onFocus, $[4] = restProps, $[5] = t0) : (children = $[1], gap = $[2], onFocus = $[3], restProps = $[4], t0 = $[5]);
+  const spacing = gap === void 0 ? t0 === void 0 ? 1 : t0 : gap, ref = react.useRef(null), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement);
   let t1;
-  $[5] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[5] = t1) : t1 = $[5];
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[6] = t1) : t1 = $[6];
   const path = t1;
   let t2;
-  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[6] = t2) : t2 = $[6];
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[7] = t2) : t2 = $[7];
   const [itemElements, setItemElements] = react.useState(t2);
   let t3;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[7] = t3) : t3 = $[7];
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[8] = t3) : t3 = $[8];
   const [state, setState] = react.useState(t3), stateRef = react.useRef(state);
   let t4;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[8] = t4) : t4 = $[8], react.useImperativeHandle(forwardedRef, t4);
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[9] = t4) : t4 = $[9], react.useImperativeHandle(forwardedRef, t4);
   let t5, t6;
-  $[9] !== focusedElement ? (t5 = () => {
+  $[10] !== focusedElement ? (t5 = () => {
     focusedElementRef.current = focusedElement;
-  }, t6 = [focusedElement], $[9] = focusedElement, $[10] = t5, $[11] = t6) : (t5 = $[10], t6 = $[11]), react.useEffect(t5, t6);
+  }, t6 = [focusedElement], $[10] = focusedElement, $[11] = t5, $[12] = t6) : (t5 = $[11], t6 = $[12]), react.useEffect(t5, t6);
   let t7, t8;
-  $[12] !== state ? (t7 = () => {
+  $[13] !== state ? (t7 = () => {
     stateRef.current = state;
-  }, t8 = [state], $[12] = state, $[13] = t7, $[14] = t8) : (t7 = $[13], t8 = $[14]), react.useEffect(t7, t8);
+  }, t8 = [state], $[13] = state, $[14] = t7, $[15] = t8) : (t7 = $[14], t8 = $[15]), react.useEffect(t7, t8);
   let t9;
-  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t9 = (element, path_0, expanded, selected) => (setState((s) => ({
+  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t9 = (element, path_0, expanded, selected) => (setState((s) => ({
     ...s,
     [path_0]: {
       element,
@@ -1556,10 +1558,10 @@ const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context
       };
       return delete newState[path_0], newState;
     });
-  }), $[15] = t9) : t9 = $[15];
+  }), $[16] = t9) : t9 = $[16];
   const registerItem = t9;
   let t10;
-  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (path_1, expanded_0) => {
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (path_1, expanded_0) => {
     setState((s_1) => {
       const itemState = s_1[path_1];
       return itemState ? {
@@ -1570,10 +1572,10 @@ const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context
         }
       } : s_1;
     });
-  }, $[16] = t10) : t10 = $[16];
+  }, $[17] = t10) : t10 = $[17];
   const setExpanded = t10, t11 = focusedElement || itemElements[0] || null;
   let t12;
-  $[17] !== space || $[18] !== state || $[19] !== t11 ? (t12 = {
+  $[18] !== spacing || $[19] !== state || $[20] !== t11 ? (t12 = {
     version: 0,
     focusedElement: t11,
     level: 0,
@@ -1581,12 +1583,13 @@ const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context
     registerItem,
     setExpanded,
     setFocusedElement,
-    space,
+    gap: spacing,
+    space: spacing,
     state
-  }, $[17] = space, $[18] = state, $[19] = t11, $[20] = t12) : t12 = $[20];
+  }, $[18] = spacing, $[19] = state, $[20] = t11, $[21] = t12) : t12 = $[21];
   const contextValue = t12;
   let t13;
-  $[21] !== itemElements ? (t13 = (event) => {
+  $[22] !== itemElements ? (t13 = (event) => {
     if (focusedElementRef.current) {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -1645,26 +1648,26 @@ const TreeContext = _visualEditing.createGlobalScopedContext("@sanity/ui/context
         return;
       }
     }
-  }, $[21] = itemElements, $[22] = t13) : t13 = $[22];
+  }, $[22] = itemElements, $[23] = t13) : t13 = $[23];
   const handleKeyDown = t13;
   let t14;
-  $[23] !== onFocus ? (t14 = (event_0) => {
+  $[24] !== onFocus ? (t14 = (event_0) => {
     setFocusedElement(event_0.target), onFocus?.(event_0);
-  }, $[23] = onFocus, $[24] = t14) : t14 = $[24];
+  }, $[24] = onFocus, $[25] = t14) : t14 = $[25];
   const handleFocus = t14;
   let t15;
-  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t15 = () => {
+  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t15 = () => {
     if (!ref.current)
       return;
     const _itemElements = Array.from(ref.current.querySelectorAll('[data-ui="TreeItem"]'));
     setItemElements(_itemElements);
-  }, $[25] = t15) : t15 = $[25];
+  }, $[26] = t15) : t15 = $[26];
   let t16;
-  $[26] !== children ? (t16 = [children], $[26] = children, $[27] = t16) : t16 = $[27], react.useEffect(t15, t16);
+  $[27] !== children ? (t16 = [children], $[27] = children, $[28] = t16) : t16 = $[28], react.useEffect(t15, t16);
   let t17;
-  $[28] !== children || $[29] !== handleFocus || $[30] !== handleKeyDown || $[31] !== restProps || $[32] !== space ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "data-ui": "Tree", ...restProps, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", space, children }), $[28] = children, $[29] = handleFocus, $[30] = handleKeyDown, $[31] = restProps, $[32] = space, $[33] = t17) : t17 = $[33];
+  $[29] !== children || $[30] !== handleFocus || $[31] !== handleKeyDown || $[32] !== restProps || $[33] !== spacing ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "data-ui": "Tree", ...restProps, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", gap: spacing, children }), $[29] = children, $[30] = handleFocus, $[31] = handleKeyDown, $[32] = restProps, $[33] = spacing, $[34] = t17) : t17 = $[34];
   let t18;
-  return $[34] !== contextValue || $[35] !== t17 ? (t18 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t17 }), $[34] = contextValue, $[35] = t17, $[36] = t18) : t18 = $[36], t18;
+  return $[35] !== contextValue || $[36] !== t17 ? (t18 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t17 }), $[35] = contextValue, $[36] = t17, $[37] = t18) : t18 = $[37], t18;
 });
 Tree.displayName = "ForwardRef(Tree)";
 function treeItemRootStyle() {
@@ -1775,7 +1778,7 @@ function TreeGroup(props) {
   } = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0) : (children = $[1], restProps = $[2], t0 = $[3]);
   const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
   let t2;
-  return $[4] !== children || $[5] !== restProps || $[6] !== t1 || $[7] !== tree.space ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.space, $[8] = t2) : t2 = $[8], t2;
+  return $[4] !== children || $[5] !== restProps || $[6] !== t1 || $[7] !== tree.gap ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.gap, role: "group", gap: tree.gap, children }), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.gap, $[8] = t2) : t2 = $[8], t2;
 }
 const StyledTreeItem = /* @__PURE__ */ styledComponents.styled.li.withConfig({
   displayName: "StyledTreeItem",
@@ -1790,8 +1793,8 @@ const StyledTreeItem = /* @__PURE__ */ styledComponents.styled.li.withConfig({
   componentId: "sc-iiskig-2"
 })`& > svg{transition:transform 100ms;}`;
 function TreeItem(props) {
-  const $ = reactCompilerRuntime.c(113);
-  let IconComponent, children, href, idProp, linkAs, muted, onClick, restProps, t0, t1, t2, t3, t4, text, weight;
+  const $ = reactCompilerRuntime.c(114);
+  let IconComponent, children, gap, href, idProp, linkAs, muted, onClick, restProps, t0, t1, t2, t3, t4, text, weight;
   $[0] !== props ? ({
     children,
     expanded: t0,
@@ -1804,16 +1807,17 @@ function TreeItem(props) {
     onClick,
     padding: t2,
     selected: t3,
+    gap,
     space: t4,
     text,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = href, $[4] = idProp, $[5] = linkAs, $[6] = muted, $[7] = onClick, $[8] = restProps, $[9] = t0, $[10] = t1, $[11] = t2, $[12] = t3, $[13] = t4, $[14] = text, $[15] = weight) : (IconComponent = $[1], children = $[2], href = $[3], idProp = $[4], linkAs = $[5], muted = $[6], onClick = $[7], restProps = $[8], t0 = $[9], t1 = $[10], t2 = $[11], t3 = $[12], t4 = $[13], text = $[14], weight = $[15]);
-  const expandedProp = t0 === void 0 ? !1 : t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 2 : t2, selected = t3 === void 0 ? !1 : t3, space = t4 === void 0 ? 2 : t4, [rootElement, _setRootElement] = react.useState(null);
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = gap, $[4] = href, $[5] = idProp, $[6] = linkAs, $[7] = muted, $[8] = onClick, $[9] = restProps, $[10] = t0, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = text, $[16] = weight) : (IconComponent = $[1], children = $[2], gap = $[3], href = $[4], idProp = $[5], linkAs = $[6], muted = $[7], onClick = $[8], restProps = $[9], t0 = $[10], t1 = $[11], t2 = $[12], t3 = $[13], t4 = $[14], text = $[15], weight = $[16]);
+  const expandedProp = t0 === void 0 ? !1 : t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 2 : t2, selected = t3 === void 0 ? !1 : t3, spacing = gap === void 0 ? t4 === void 0 ? 2 : t4 : gap, [rootElement, _setRootElement] = react.useState(null);
   let t5;
-  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (node) => {
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (node) => {
     react.startTransition(() => _setRootElement(node));
-  }, $[16] = t5) : t5 = $[16];
+  }, $[17] = t5) : t5 = $[17];
   const setRootElement = t5, treeitemRef = react.useRef(null), tree = useTree(), {
     path,
     registerItem,
@@ -1821,89 +1825,89 @@ function TreeItem(props) {
     setFocusedElement
   } = tree, _id = react.useId(), id = idProp || _id;
   let t6, t7;
-  if ($[17] !== id || $[18] !== path) {
+  if ($[18] !== id || $[19] !== path) {
     const itemPath = path.concat([id || ""]);
-    t6 = itemPath, t7 = itemPath.join("/"), $[17] = id, $[18] = path, $[19] = t6, $[20] = t7;
+    t6 = itemPath, t7 = itemPath.join("/"), $[18] = id, $[19] = path, $[20] = t6, $[21] = t7;
   } else
-    t6 = $[19], t7 = $[20];
+    t6 = $[20], t7 = $[21];
   let t8;
-  $[21] !== t6 || $[22] !== t7 ? (t8 = [t6, t7], $[21] = t6, $[22] = t7, $[23] = t8) : t8 = $[23];
+  $[22] !== t6 || $[23] !== t7 ? (t8 = [t6, t7], $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
   const [itemPath_0, itemKey] = t8, itemState = tree.state[itemKey], focused = tree.focusedElement === rootElement, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1, t9 = tree.level + 1;
   let t10;
-  $[24] !== itemPath_0 || $[25] !== t9 || $[26] !== tree ? (t10 = {
+  $[25] !== itemPath_0 || $[26] !== t9 || $[27] !== tree ? (t10 = {
     ...tree,
     level: t9,
     path: itemPath_0
-  }, $[24] = itemPath_0, $[25] = t9, $[26] = tree, $[27] = t10) : t10 = $[27];
+  }, $[25] = itemPath_0, $[26] = t9, $[27] = tree, $[28] = t10) : t10 = $[28];
   const contextValue = t10;
   let t11;
-  $[28] !== expanded || $[29] !== itemKey || $[30] !== onClick || $[31] !== rootElement || $[32] !== setExpanded || $[33] !== setFocusedElement ? (t11 = (event) => {
+  $[29] !== expanded || $[30] !== itemKey || $[31] !== onClick || $[32] !== rootElement || $[33] !== setExpanded || $[34] !== setFocusedElement ? (t11 = (event) => {
     onClick && onClick(event);
     const target = event.target;
     target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootElement));
-  }, $[28] = expanded, $[29] = itemKey, $[30] = onClick, $[31] = rootElement, $[32] = setExpanded, $[33] = setFocusedElement, $[34] = t11) : t11 = $[34];
+  }, $[29] = expanded, $[30] = itemKey, $[31] = onClick, $[32] = rootElement, $[33] = setExpanded, $[34] = setFocusedElement, $[35] = t11) : t11 = $[35];
   const handleClick = t11;
   let t12;
-  $[35] !== focused || $[36] !== rootElement ? (t12 = (event_0) => {
+  $[36] !== focused || $[37] !== rootElement ? (t12 = (event_0) => {
     focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
-  }, $[35] = focused, $[36] = rootElement, $[37] = t12) : t12 = $[37];
+  }, $[36] = focused, $[37] = rootElement, $[38] = t12) : t12 = $[38];
   const handleKeyDown = t12;
   let t13, t14;
-  $[38] !== expanded || $[39] !== itemKey || $[40] !== registerItem || $[41] !== rootElement || $[42] !== selected ? (t13 = () => {
+  $[39] !== expanded || $[40] !== itemKey || $[41] !== registerItem || $[42] !== rootElement || $[43] !== selected ? (t13 = () => {
     if (rootElement)
       return registerItem(rootElement, itemKey, expanded, selected);
-  }, t14 = [expanded, itemKey, registerItem, rootElement, selected], $[38] = expanded, $[39] = itemKey, $[40] = registerItem, $[41] = rootElement, $[42] = selected, $[43] = t13, $[44] = t14) : (t13 = $[43], t14 = $[44]), react.useEffect(t13, t14);
+  }, t14 = [expanded, itemKey, registerItem, rootElement, selected], $[39] = expanded, $[40] = itemKey, $[41] = registerItem, $[42] = rootElement, $[43] = selected, $[44] = t13, $[45] = t14) : (t13 = $[44], t14 = $[45]), react.useEffect(t13, t14);
   const t15 = IconComponent || children ? "visible" : "hidden";
   let t16;
-  $[45] !== t15 ? (t16 = {
+  $[46] !== t15 ? (t16 = {
     visibility: t15,
     pointerEvents: "none"
-  }, $[45] = t15, $[46] = t16) : t16 = $[46];
+  }, $[46] = t15, $[47] = t16) : t16 = $[47];
   let t17;
-  $[47] !== IconComponent || $[48] !== fontSize || $[49] !== muted || $[50] !== weight ? (t17 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }), $[47] = IconComponent, $[48] = fontSize, $[49] = muted, $[50] = weight, $[51] = t17) : t17 = $[51];
+  $[48] !== IconComponent || $[49] !== fontSize || $[50] !== muted || $[51] !== weight ? (t17 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }), $[48] = IconComponent, $[49] = fontSize, $[50] = muted, $[51] = weight, $[52] = t17) : t17 = $[52];
   let t18;
-  $[52] !== IconComponent || $[53] !== expanded || $[54] !== fontSize || $[55] !== muted || $[56] !== weight ? (t18 = !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: {
+  $[53] !== IconComponent || $[54] !== expanded || $[55] !== fontSize || $[56] !== muted || $[57] !== weight ? (t18 = !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: {
     transform: expanded ? "rotate(90deg)" : void 0
-  } }) }), $[52] = IconComponent, $[53] = expanded, $[54] = fontSize, $[55] = muted, $[56] = weight, $[57] = t18) : t18 = $[57];
+  } }) }), $[53] = IconComponent, $[54] = expanded, $[55] = fontSize, $[56] = muted, $[57] = weight, $[58] = t18) : t18 = $[58];
   let t19;
-  $[58] !== space || $[59] !== t16 || $[60] !== t17 || $[61] !== t18 ? (t19 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { marginRight: space, style: t16, children: [
+  $[59] !== spacing || $[60] !== t16 || $[61] !== t17 || $[62] !== t18 ? (t19 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { marginRight: spacing, style: t16, children: [
     t17,
     t18
-  ] }), $[58] = space, $[59] = t16, $[60] = t17, $[61] = t18, $[62] = t19) : t19 = $[62];
+  ] }), $[59] = spacing, $[60] = t16, $[61] = t17, $[62] = t18, $[63] = t19) : t19 = $[63];
   let t20;
-  $[63] !== fontSize || $[64] !== muted || $[65] !== text || $[66] !== weight ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text }) }), $[63] = fontSize, $[64] = muted, $[65] = text, $[66] = weight, $[67] = t20) : t20 = $[67];
+  $[64] !== fontSize || $[65] !== muted || $[66] !== text || $[67] !== weight ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text }) }), $[64] = fontSize, $[65] = muted, $[66] = text, $[67] = weight, $[68] = t20) : t20 = $[68];
   let t21;
-  $[68] !== padding || $[69] !== t19 || $[70] !== t20 ? (t21 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Flex, { padding, children: [
+  $[69] !== padding || $[70] !== t19 || $[71] !== t20 ? (t21 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Flex, { padding, children: [
     t19,
     t20
-  ] }), $[68] = padding, $[69] = t19, $[70] = t20, $[71] = t21) : t21 = $[71];
+  ] }), $[69] = padding, $[70] = t19, $[71] = t20, $[72] = t21) : t21 = $[72];
   const content2 = t21;
   if (href) {
     const t222 = selected ? "" : void 0;
     let t232;
-    $[72] !== content2 || $[73] !== expanded || $[74] !== href || $[75] !== linkAs || $[76] !== tabIndex || $[77] !== tree.level ? (t232 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content2 }), $[72] = content2, $[73] = expanded, $[74] = href, $[75] = linkAs, $[76] = tabIndex, $[77] = tree.level, $[78] = t232) : t232 = $[78];
+    $[73] !== content2 || $[74] !== expanded || $[75] !== href || $[76] !== linkAs || $[77] !== tabIndex || $[78] !== tree.level ? (t232 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content2 }), $[73] = content2, $[74] = expanded, $[75] = href, $[76] = linkAs, $[77] = tabIndex, $[78] = tree.level, $[79] = t232) : t232 = $[79];
     let t242;
-    $[79] !== children || $[80] !== expanded ? (t242 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }), $[79] = children, $[80] = expanded, $[81] = t242) : t242 = $[81];
+    $[80] !== children || $[81] !== expanded ? (t242 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }), $[80] = children, $[81] = expanded, $[82] = t242) : t242 = $[82];
     let t252;
-    $[82] !== contextValue || $[83] !== t242 ? (t252 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t242 }), $[82] = contextValue, $[83] = t242, $[84] = t252) : t252 = $[84];
+    $[83] !== contextValue || $[84] !== t242 ? (t252 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t242 }), $[83] = contextValue, $[84] = t242, $[85] = t252) : t252 = $[85];
     let t262;
-    return $[85] !== handleClick || $[86] !== id || $[87] !== itemKey || $[88] !== restProps || $[89] !== t222 || $[90] !== t232 || $[91] !== t252 ? (t262 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItem, { "data-selected": t222, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: setRootElement, role: "none", children: [
+    return $[86] !== handleClick || $[87] !== id || $[88] !== itemKey || $[89] !== restProps || $[90] !== t222 || $[91] !== t232 || $[92] !== t252 ? (t262 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItem, { "data-selected": t222, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: setRootElement, role: "none", children: [
       t232,
       t252
-    ] }), $[85] = handleClick, $[86] = id, $[87] = itemKey, $[88] = restProps, $[89] = t222, $[90] = t232, $[91] = t252, $[92] = t262) : t262 = $[92], t262;
+    ] }), $[86] = handleClick, $[87] = id, $[88] = itemKey, $[89] = restProps, $[90] = t222, $[91] = t232, $[92] = t252, $[93] = t262) : t262 = $[93], t262;
   }
   const t22 = selected ? "" : void 0;
   let t23;
-  $[93] !== content2 || $[94] !== tree.level ? (t23 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content2 }), $[93] = content2, $[94] = tree.level, $[95] = t23) : t23 = $[95];
+  $[94] !== content2 || $[95] !== tree.level ? (t23 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content2 }), $[94] = content2, $[95] = tree.level, $[96] = t23) : t23 = $[96];
   let t24;
-  $[96] !== children || $[97] !== expanded ? (t24 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }), $[96] = children, $[97] = expanded, $[98] = t24) : t24 = $[98];
+  $[97] !== children || $[98] !== expanded ? (t24 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }), $[97] = children, $[98] = expanded, $[99] = t24) : t24 = $[99];
   let t25;
-  $[99] !== contextValue || $[100] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t24 }), $[99] = contextValue, $[100] = t24, $[101] = t25) : t25 = $[101];
+  $[100] !== contextValue || $[101] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t24 }), $[100] = contextValue, $[101] = t24, $[102] = t25) : t25 = $[102];
   let t26;
-  return $[102] !== expanded || $[103] !== handleClick || $[104] !== handleKeyDown || $[105] !== id || $[106] !== itemKey || $[107] !== restProps || $[108] !== t22 || $[109] !== t23 || $[110] !== t25 || $[111] !== tabIndex ? (t26 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItem, { "data-selected": t22, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
+  return $[103] !== expanded || $[104] !== handleClick || $[105] !== handleKeyDown || $[106] !== id || $[107] !== itemKey || $[108] !== restProps || $[109] !== t22 || $[110] !== t23 || $[111] !== t25 || $[112] !== tabIndex ? (t26 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItem, { "data-selected": t22, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
     t23,
     t25
-  ] }), $[102] = expanded, $[103] = handleClick, $[104] = handleKeyDown, $[105] = id, $[106] = itemKey, $[107] = restProps, $[108] = t22, $[109] = t23, $[110] = t25, $[111] = tabIndex, $[112] = t26) : t26 = $[112], t26;
+  ] }), $[103] = expanded, $[104] = handleClick, $[105] = handleKeyDown, $[106] = id, $[107] = itemKey, $[108] = restProps, $[109] = t22, $[110] = t23, $[111] = t25, $[112] = tabIndex, $[113] = t26) : t26 = $[113], t26;
 }
 TreeItem.displayName = "TreeItem";
 exports.Arrow = _visualEditing.Arrow;