@sanity/ui 3.1.1 → 3.1.3

package/dist/index.js

@@ -214,7 +214,7 @@ function autocompleteReducer(state, msg) {
   } : state;
 }
 const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "Home", "End", "PageUp", "PageDown", "Meta", "Tab", "CapsLock"], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(180);
+  const $ = reactCompilerRuntime.c(181);
   let customValidity, disabled, filterOptionProp, icon, id, loading, onBlur, onChange, onFocus, onQueryChange, onSelect, openButton, openOnFocus, optionsProp, prefix, readOnly, relatedElements, renderOptionProp, renderPopover, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, valueProp;
   $[0] !== props ? ({
     border: t0,
@@ -270,24 +270,29 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     } = t112;
     return /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) });
   }, $[33] = fontSize, $[34] = paddingProp, $[35] = t10) : t10 = $[35];
-  const renderOption = typeof renderOptionProp == "function" ? renderOptionProp : t10, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), [inputElement, setInputElement] = react.useState(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
-  let t11, t12;
-  $[36] !== inputElement ? (t11 = () => inputElement, t12 = [inputElement], $[36] = inputElement, $[37] = t11, $[38] = t12) : (t11 = $[37], t12 = $[38]), react.useImperativeHandle(inputElementRef, t11, t12);
-  let t13, t14;
-  $[39] !== inputElement ? (t13 = () => inputElement, t14 = [inputElement], $[39] = inputElement, $[40] = t13, $[41] = t14) : (t13 = $[40], t14 = $[41]), react.useImperativeHandle(forwardedRef, t13, t14);
+  const renderOption = typeof renderOptionProp == "function" ? renderOptionProp : t10, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), [inputElement, _setInputElement] = react.useState(null);
+  let t11;
+  $[36] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (node) => {
+    react.startTransition(() => _setInputElement(node));
+  }, $[36] = t11) : t11 = $[36];
+  const setInputElement = t11, listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
+  let t12, t13;
+  $[37] !== inputElement ? (t12 = () => inputElement, t13 = [inputElement], $[37] = inputElement, $[38] = t12, $[39] = t13) : (t12 = $[38], t13 = $[39]), react.useImperativeHandle(inputElementRef, t12, t13);
+  let t14, t15;
+  $[40] !== inputElement ? (t14 = () => inputElement, t15 = [inputElement], $[40] = inputElement, $[41] = t14, $[42] = t15) : (t14 = $[41], t15 = $[42]), react.useImperativeHandle(forwardedRef, t14, t15);
   const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : _visualEditing.EMPTY_ARRAY, padding = _visualEditing._getArrayProp(paddingProp);
-  let t15;
-  $[42] !== options || $[43] !== value ? (t15 = value !== null ? options.find((o) => o.value === value) : void 0, $[42] = options, $[43] = value, $[44] = t15) : t15 = $[44];
-  const currentOption = t15;
   let t16;
-  if ($[45] !== filterOption || $[46] !== options || $[47] !== query) {
-    let t172;
-    $[49] !== filterOption || $[50] !== query ? (t172 = (option) => query ? filterOption(query, option) : !0, $[49] = filterOption, $[50] = query, $[51] = t172) : t172 = $[51], t16 = options.filter(t172), $[45] = filterOption, $[46] = options, $[47] = query, $[48] = t16;
-  } else
-    t16 = $[48];
-  const filteredOptions = t16, filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null;
+  $[43] !== options || $[44] !== value ? (t16 = value !== null ? options.find((o) => o.value === value) : void 0, $[43] = options, $[44] = value, $[45] = t16) : t16 = $[45];
+  const currentOption = t16;
   let t17;
-  $[52] !== onBlur || $[53] !== onQueryChange || $[54] !== relatedElements ? (t17 = (event) => {
+  if ($[46] !== filterOption || $[47] !== options || $[48] !== query) {
+    let t182;
+    $[50] !== filterOption || $[51] !== query ? (t182 = (option) => query ? filterOption(query, option) : !0, $[50] = filterOption, $[51] = query, $[52] = t182) : t182 = $[52], t17 = options.filter(t182), $[46] = filterOption, $[47] = options, $[48] = query, $[49] = t17;
+  } else
+    t17 = $[49];
+  const filteredOptions = t17, filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null;
+  let t18;
+  $[53] !== onBlur || $[54] !== onQueryChange || $[55] !== relatedElements ? (t18 = (event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -304,27 +309,27 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
         type: "root/blur"
       }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
     }, 0);
-  }, $[52] = onBlur, $[53] = onQueryChange, $[54] = relatedElements, $[55] = t17) : t17 = $[55];
-  const handleRootBlur = t17;
-  let t18;
-  $[56] === Symbol.for("react.memo_cache_sentinel") ? (t18 = (event_0) => {
+  }, $[53] = onBlur, $[54] = onQueryChange, $[55] = relatedElements, $[56] = t18) : t18 = $[56];
+  const handleRootBlur = t18;
+  let t19;
+  $[57] === Symbol.for("react.memo_cache_sentinel") ? (t19 = (event_0) => {
     const listBoxElement = listBoxElementRef.current, focusedElement = event_0.target instanceof HTMLElement ? event_0.target : null, listFocused_0 = listBoxElement?.contains(focusedElement) || !1;
     listFocused_0 !== listFocusedRef.current && (listFocusedRef.current = listFocused_0, dispatch({
       type: "root/setListFocused",
       listFocused: listFocused_0
     }));
-  }, $[56] = t18) : t18 = $[56];
-  const handleRootFocus = t18;
-  let t19;
-  $[57] !== onChange || $[58] !== onQueryChange || $[59] !== onSelect ? (t19 = (v) => {
+  }, $[57] = t19) : t19 = $[57];
+  const handleRootFocus = t19;
+  let t20;
+  $[58] !== onChange || $[59] !== onQueryChange || $[60] !== onSelect ? (t20 = (v) => {
     dispatch({
       type: "value/change",
       value: v
     }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, $[57] = onChange, $[58] = onQueryChange, $[59] = onSelect, $[60] = t19) : t19 = $[60];
-  const handleOptionSelect = t19;
-  let t20;
-  $[61] !== activeValue || $[62] !== filteredOptions || $[63] !== filteredOptionsLen || $[64] !== onQueryChange ? (t20 = (event_1) => {
+  }, $[58] = onChange, $[59] = onQueryChange, $[60] = onSelect, $[61] = t20) : t20 = $[61];
+  const handleOptionSelect = t20;
+  let t21;
+  $[62] !== activeValue || $[63] !== filteredOptions || $[64] !== filteredOptionsLen || $[65] !== onQueryChange ? (t21 = (event_1) => {
     if (event_1.key === "ArrowDown") {
       if (event_1.preventDefault(), !filteredOptionsLen)
         return;
@@ -358,58 +363,58 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       inputElementRef.current?.focus();
       return;
     }
-  }, $[61] = activeValue, $[62] = filteredOptions, $[63] = filteredOptionsLen, $[64] = onQueryChange, $[65] = t20) : t20 = $[65];
-  const handleRootKeyDown = t20;
-  let t21;
-  $[66] !== onQueryChange ? (t21 = (event_2) => {
+  }, $[62] = activeValue, $[63] = filteredOptions, $[64] = filteredOptionsLen, $[65] = onQueryChange, $[66] = t21) : t21 = $[66];
+  const handleRootKeyDown = t21;
+  let t22;
+  $[67] !== onQueryChange ? (t22 = (event_2) => {
     const nextQuery = event_2.currentTarget.value;
     dispatch({
       type: "input/change",
       query: nextQuery
     }), onQueryChange && onQueryChange(nextQuery);
-  }, $[66] = onQueryChange, $[67] = t21) : t21 = $[67];
-  const handleInputChange = t21;
-  let t22;
-  $[68] !== currentOption || $[69] !== renderValue || $[70] !== value ? (t22 = () => {
+  }, $[67] = onQueryChange, $[68] = t22) : t22 = $[68];
+  const handleInputChange = t22;
+  let t23;
+  $[69] !== currentOption || $[70] !== renderValue || $[71] !== value ? (t23 = () => {
     dispatch({
       type: "root/open",
       query: value ? renderValue(value, currentOption) : ""
     });
-  }, $[68] = currentOption, $[69] = renderValue, $[70] = value, $[71] = t22) : t22 = $[71];
-  const dispatchOpen = t22;
-  let t23;
-  $[72] !== dispatchOpen || $[73] !== focused || $[74] !== onFocus || $[75] !== openOnFocus ? (t23 = (event_3) => {
+  }, $[69] = currentOption, $[70] = renderValue, $[71] = value, $[72] = t23) : t23 = $[72];
+  const dispatchOpen = t23;
+  let t24;
+  $[73] !== dispatchOpen || $[74] !== focused || $[75] !== onFocus || $[76] !== openOnFocus ? (t24 = (event_3) => {
     focused || (dispatch({
       type: "input/focus"
     }), onFocus && onFocus(event_3), openOnFocus && dispatchOpen());
-  }, $[72] = dispatchOpen, $[73] = focused, $[74] = onFocus, $[75] = openOnFocus, $[76] = t23) : t23 = $[76];
-  const handleInputFocus = t23;
-  let t24;
-  $[77] === Symbol.for("react.memo_cache_sentinel") ? (t24 = () => {
-    popoverMouseWithinRef.current = !0;
-  }, $[77] = t24) : t24 = $[77];
-  const handlePopoverMouseEnter = t24;
+  }, $[73] = dispatchOpen, $[74] = focused, $[75] = onFocus, $[76] = openOnFocus, $[77] = t24) : t24 = $[77];
+  const handleInputFocus = t24;
   let t25;
   $[78] === Symbol.for("react.memo_cache_sentinel") ? (t25 = () => {
-    popoverMouseWithinRef.current = !1;
+    popoverMouseWithinRef.current = !0;
   }, $[78] = t25) : t25 = $[78];
-  const handlePopoverMouseLeave = t25;
+  const handlePopoverMouseEnter = t25;
   let t26;
-  $[79] !== onChange || $[80] !== onQueryChange ? (t26 = () => {
+  $[79] === Symbol.for("react.memo_cache_sentinel") ? (t26 = () => {
+    popoverMouseWithinRef.current = !1;
+  }, $[79] = t26) : t26 = $[79];
+  const handlePopoverMouseLeave = t26;
+  let t27;
+  $[80] !== onChange || $[81] !== onQueryChange ? (t27 = () => {
     dispatch({
       type: "root/clear"
     }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, $[79] = onChange, $[80] = onQueryChange, $[81] = t26) : t26 = $[81];
-  const handleClearButtonClick = t26;
-  let t27;
-  $[82] === Symbol.for("react.memo_cache_sentinel") ? (t27 = () => {
+  }, $[80] = onChange, $[81] = onQueryChange, $[82] = t27) : t27 = $[82];
+  const handleClearButtonClick = t27;
+  let t28;
+  $[83] === Symbol.for("react.memo_cache_sentinel") ? (t28 = () => {
     dispatch({
       type: "input/focus"
     });
-  }, $[82] = t27) : t27 = $[82];
-  const handleClearButtonFocus = t27;
-  let t28, t29;
-  $[83] !== valueProp ? (t28 = () => {
+  }, $[83] = t28) : t28 = $[83];
+  const handleClearButtonFocus = t28;
+  let t29, t30;
+  $[84] !== valueProp ? (t29 = () => {
     if (valueProp !== valuePropRef.current) {
       valuePropRef.current = valueProp, valueProp !== void 0 && (dispatch({
         type: "value/change",
@@ -421,16 +426,16 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       type: "value/change",
       value: valueProp || null
     }));
-  }, t29 = [valueProp], $[83] = valueProp, $[84] = t28, $[85] = t29) : (t28 = $[84], t29 = $[85]), react.useEffect(t28, t29);
-  let t30, t31;
-  $[86] !== focused ? (t30 = () => {
+  }, t30 = [valueProp], $[84] = valueProp, $[85] = t29, $[86] = t30) : (t29 = $[85], t30 = $[86]), react.useEffect(t29, t30);
+  let t31, t32;
+  $[87] !== focused ? (t31 = () => {
     !focused && valueRef.current && dispatch({
       type: "root/setActiveValue",
       value: valueRef.current
     });
-  }, t31 = [focused], $[86] = focused, $[87] = t30, $[88] = t31) : (t30 = $[87], t31 = $[88]), react.useEffect(t30, t31);
-  let t32, t33;
-  $[89] !== activeValue || $[90] !== filteredOptions ? (t32 = () => {
+  }, t32 = [focused], $[87] = focused, $[88] = t31, $[89] = t32) : (t31 = $[88], t32 = $[89]), react.useEffect(t31, t32);
+  let t33, t34;
+  $[90] !== activeValue || $[91] !== filteredOptions ? (t33 = () => {
     const listElement = listBoxElementRef.current;
     if (!listElement)
       return;
@@ -443,95 +448,95 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
         focusFirstDescendant(activeItemElement);
       }
     }
-  }, t33 = [activeValue, filteredOptions], $[89] = activeValue, $[90] = filteredOptions, $[91] = t32, $[92] = t33) : (t32 = $[91], t33 = $[92]), react.useEffect(t32, t33);
-  let t34;
+  }, t34 = [activeValue, filteredOptions], $[90] = activeValue, $[91] = filteredOptions, $[92] = t33, $[93] = t34) : (t33 = $[92], t34 = $[93]), react.useEffect(t33, t34);
+  let t35;
   bb0: {
     if (!loading && !disabled && value) {
-      let t352;
-      $[93] === Symbol.for("react.memo_cache_sentinel") ? (t352 = {
+      let t362;
+      $[94] === Symbol.for("react.memo_cache_sentinel") ? (t362 = {
         "aria-label": "Clear",
         onFocus: handleClearButtonFocus
-      }, $[93] = t352) : t352 = $[93], t34 = t352;
+      }, $[94] = t362) : t362 = $[94], t35 = t362;
       break bb0;
     }
-    t34 = void 0;
+    t35 = void 0;
   }
-  const clearButton = t34, openButtonBoxPadding = padding.map(_temp$3), openButtonPadding = padding.map(_temp2$1), openButtonProps = typeof openButton == "object" ? openButton : _visualEditing.EMPTY_RECORD;
-  let t35;
-  $[94] !== dispatchOpen || $[95] !== openButtonProps ? (t35 = (event_4) => {
-    dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
-  }, $[94] = dispatchOpen, $[95] = openButtonProps, $[96] = t35) : t35 = $[96];
-  const handleOpenClick = t35;
+  const clearButton = t35, openButtonBoxPadding = padding.map(_temp$3), openButtonPadding = padding.map(_temp2$1), openButtonProps = typeof openButton == "object" ? openButton : _visualEditing.EMPTY_RECORD;
   let t36;
-  $[97] !== disabled || $[98] !== expanded || $[99] !== fontSize || $[100] !== handleOpenClick || $[101] !== openButton || $[102] !== openButtonBoxPadding || $[103] !== openButtonPadding || $[104] !== openButtonProps || $[105] !== readOnly ? (t36 = !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Button, { "aria-label": "Open", disabled: expanded, fontSize, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, $[97] = disabled, $[98] = expanded, $[99] = fontSize, $[100] = handleOpenClick, $[101] = openButton, $[102] = openButtonBoxPadding, $[103] = openButtonPadding, $[104] = openButtonProps, $[105] = readOnly, $[106] = t36) : t36 = $[106];
-  const openButtonNode = t36;
+  $[95] !== dispatchOpen || $[96] !== openButtonProps ? (t36 = (event_4) => {
+    dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
+  }, $[95] = dispatchOpen, $[96] = openButtonProps, $[97] = t36) : t36 = $[97];
+  const handleOpenClick = t36;
   let t37;
+  $[98] !== disabled || $[99] !== expanded || $[100] !== fontSize || $[101] !== handleOpenClick || $[102] !== openButton || $[103] !== openButtonBoxPadding || $[104] !== openButtonPadding || $[105] !== openButtonProps || $[106] !== readOnly ? (t37 = !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Button, { "aria-label": "Open", disabled: expanded, fontSize, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, $[98] = disabled, $[99] = expanded, $[100] = fontSize, $[101] = handleOpenClick, $[102] = openButton, $[103] = openButtonBoxPadding, $[104] = openButtonPadding, $[105] = openButtonProps, $[106] = readOnly, $[107] = t37) : t37 = $[107];
+  const openButtonNode = t37;
+  let t38;
   bb1: {
     if (query === null) {
       if (value !== null) {
-        let t382;
-        $[107] !== currentOption || $[108] !== renderValue || $[109] !== value ? (t382 = renderValue(value, currentOption), $[107] = currentOption, $[108] = renderValue, $[109] = value, $[110] = t382) : t382 = $[110], t37 = t382;
+        let t392;
+        $[108] !== currentOption || $[109] !== renderValue || $[110] !== value ? (t392 = renderValue(value, currentOption), $[108] = currentOption, $[109] = renderValue, $[110] = value, $[111] = t392) : t392 = $[111], t38 = t392;
         break bb1;
       }
-      t37 = "";
+      t38 = "";
       break bb1;
     }
-    t37 = query;
+    t38 = query;
   }
-  const inputValue = t37;
-  let t38;
-  $[111] !== listFocused ? (t38 = (event_5) => {
-    event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, $[111] = listFocused, $[112] = t38) : t38 = $[112];
-  const handleListBoxKeyDown = t38;
+  const inputValue = t38;
   let t39;
+  $[112] !== listFocused ? (t39 = (event_5) => {
+    event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
+  }, $[112] = listFocused, $[113] = t39) : t39 = $[113];
+  const handleListBoxKeyDown = t39;
+  let t40;
   bb2: {
     if (filteredOptions.length === 0) {
-      t39 = null;
+      t40 = null;
       break bb2;
     }
-    let t402;
-    if ($[113] !== activeValue || $[114] !== currentOption || $[115] !== filteredOptions || $[116] !== handleOptionSelect || $[117] !== id || $[118] !== listFocused || $[119] !== loading || $[120] !== renderOption) {
-      let t413;
-      $[122] !== activeValue || $[123] !== currentOption || $[124] !== handleOptionSelect || $[125] !== id || $[126] !== listFocused || $[127] !== loading || $[128] !== renderOption ? (t413 = (option_0) => {
+    let t412;
+    if ($[114] !== activeValue || $[115] !== currentOption || $[116] !== filteredOptions || $[117] !== handleOptionSelect || $[118] !== id || $[119] !== listFocused || $[120] !== loading || $[121] !== renderOption) {
+      let t423;
+      $[123] !== activeValue || $[124] !== currentOption || $[125] !== handleOptionSelect || $[126] !== id || $[127] !== listFocused || $[128] !== loading || $[129] !== renderOption ? (t423 = (option_0) => {
         const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
         return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: react.cloneElement(renderOption(option_0), {
           disabled: loading,
           selected: active,
           tabIndex: listFocused && active ? 0 : -1
         }) }, option_0.value);
-      }, $[122] = activeValue, $[123] = currentOption, $[124] = handleOptionSelect, $[125] = id, $[126] = listFocused, $[127] = loading, $[128] = renderOption, $[129] = t413) : t413 = $[129], t402 = filteredOptions.map(t413), $[113] = activeValue, $[114] = currentOption, $[115] = filteredOptions, $[116] = handleOptionSelect, $[117] = id, $[118] = listFocused, $[119] = loading, $[120] = renderOption, $[121] = t402;
+      }, $[123] = activeValue, $[124] = currentOption, $[125] = handleOptionSelect, $[126] = id, $[127] = listFocused, $[128] = loading, $[129] = renderOption, $[130] = t423) : t423 = $[130], t412 = filteredOptions.map(t423), $[114] = activeValue, $[115] = currentOption, $[116] = filteredOptions, $[117] = handleOptionSelect, $[118] = id, $[119] = listFocused, $[120] = loading, $[121] = renderOption, $[122] = t412;
     } else
-      t402 = $[121];
-    let t412;
-    $[130] !== listBoxId || $[131] !== t402 ? (t412 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: t402 }), $[130] = listBoxId, $[131] = t402, $[132] = t412) : t412 = $[132];
+      t412 = $[122];
     let t422;
-    $[133] !== handleListBoxKeyDown || $[134] !== listBox || $[135] !== t412 ? (t422 = /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: t412 }), $[133] = handleListBoxKeyDown, $[134] = listBox, $[135] = t412, $[136] = t422) : t422 = $[136], t39 = t422;
+    $[131] !== listBoxId || $[132] !== t412 ? (t422 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: t412 }), $[131] = listBoxId, $[132] = t412, $[133] = t422) : t422 = $[133];
+    let t432;
+    $[134] !== handleListBoxKeyDown || $[135] !== listBox || $[136] !== t422 ? (t432 = /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: t422 }), $[134] = handleListBoxKeyDown, $[135] = listBox, $[136] = t422, $[137] = t432) : t432 = $[137], t40 = t432;
   }
-  const content2 = t39;
-  let t40;
+  const content2 = t40;
+  let t41;
   bb3: {
     if (renderPopover) {
-      const t413 = !expanded;
-      let t422;
-      $[137] !== content2 || $[138] !== handlePopoverMouseEnter || $[139] !== handlePopoverMouseLeave || $[140] !== inputElement || $[141] !== renderPopover || $[142] !== t413 ? (t422 = /* @__PURE__ */ jsxRuntime.jsx(RenderPopover, { content: content2, hidden: t413, inputElement, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, resultsPopoverElementRef, renderPopover }), $[137] = content2, $[138] = handlePopoverMouseEnter, $[139] = handlePopoverMouseLeave, $[140] = inputElement, $[141] = renderPopover, $[142] = t413, $[143] = t422) : t422 = $[143], t40 = t422;
+      const t423 = !expanded;
+      let t432;
+      $[138] !== content2 || $[139] !== handlePopoverMouseEnter || $[140] !== handlePopoverMouseLeave || $[141] !== inputElement || $[142] !== renderPopover || $[143] !== t423 ? (t432 = /* @__PURE__ */ jsxRuntime.jsx(RenderPopover, { content: content2, hidden: t423, inputElement, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, resultsPopoverElementRef, renderPopover }), $[138] = content2, $[139] = handlePopoverMouseEnter, $[140] = handlePopoverMouseLeave, $[141] = inputElement, $[142] = renderPopover, $[143] = t423, $[144] = t432) : t432 = $[144], t41 = t432;
       break bb3;
     }
     if (filteredOptionsLen === 0) {
-      t40 = null;
+      t41 = null;
       break bb3;
     }
-    let t412;
-    $[144] !== content2 || $[145] !== expanded || $[146] !== handlePopoverMouseEnter || $[147] !== handlePopoverMouseLeave || $[148] !== inputElement || $[149] !== popover || $[150] !== radius ? (t412 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElement, ...popover }), $[144] = content2, $[145] = expanded, $[146] = handlePopoverMouseEnter, $[147] = handlePopoverMouseLeave, $[148] = inputElement, $[149] = popover, $[150] = radius, $[151] = t412) : t412 = $[151], t40 = t412;
+    let t422;
+    $[145] !== content2 || $[146] !== expanded || $[147] !== handlePopoverMouseEnter || $[148] !== handlePopoverMouseLeave || $[149] !== inputElement || $[150] !== popover || $[151] !== radius ? (t422 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElement, ...popover }), $[145] = content2, $[146] = expanded, $[147] = handlePopoverMouseEnter, $[148] = handlePopoverMouseLeave, $[149] = inputElement, $[150] = popover, $[151] = radius, $[152] = t422) : t422 = $[152], t41 = t422;
   }
-  const results = t40, t41 = loading && AnimatedSpinnerIcon, t42 = suffix || openButtonNode;
-  let t43;
-  $[152] !== activeItemId || $[153] !== border || $[154] !== clearButton || $[155] !== customValidity || $[156] !== disabled || $[157] !== expanded || $[158] !== fontSize || $[159] !== handleClearButtonClick || $[160] !== handleInputChange || $[161] !== handleInputFocus || $[162] !== icon || $[163] !== id || $[164] !== inputValue || $[165] !== listBoxId || $[166] !== padding || $[167] !== prefix || $[168] !== radius || $[169] !== readOnly || $[170] !== restProps || $[171] !== t41 || $[172] !== t42 ? (t43 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border, clearButton, customValidity, disabled, fontSize, icon, iconRight: t41, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: setInputElement, role: "combobox", spellCheck: !1, suffix: t42, value: inputValue }), $[152] = activeItemId, $[153] = border, $[154] = clearButton, $[155] = customValidity, $[156] = disabled, $[157] = expanded, $[158] = fontSize, $[159] = handleClearButtonClick, $[160] = handleInputChange, $[161] = handleInputFocus, $[162] = icon, $[163] = id, $[164] = inputValue, $[165] = listBoxId, $[166] = padding, $[167] = prefix, $[168] = radius, $[169] = readOnly, $[170] = restProps, $[171] = t41, $[172] = t42, $[173] = t43) : t43 = $[173];
+  const results = t41, t42 = loading && AnimatedSpinnerIcon, t43 = suffix || openButtonNode;
   let t44;
-  return $[174] !== handleRootBlur || $[175] !== handleRootFocus || $[176] !== handleRootKeyDown || $[177] !== results || $[178] !== t43 ? (t44 = /* @__PURE__ */ jsxRuntime.jsxs(StyledAutocomplete, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
-    t43,
+  $[153] !== activeItemId || $[154] !== border || $[155] !== clearButton || $[156] !== customValidity || $[157] !== disabled || $[158] !== expanded || $[159] !== fontSize || $[160] !== handleClearButtonClick || $[161] !== handleInputChange || $[162] !== handleInputFocus || $[163] !== icon || $[164] !== id || $[165] !== inputValue || $[166] !== listBoxId || $[167] !== padding || $[168] !== prefix || $[169] !== radius || $[170] !== readOnly || $[171] !== restProps || $[172] !== t42 || $[173] !== t43 ? (t44 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border, clearButton, customValidity, disabled, fontSize, icon, iconRight: t42, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: setInputElement, role: "combobox", spellCheck: !1, suffix: t43, value: inputValue }), $[153] = activeItemId, $[154] = border, $[155] = clearButton, $[156] = customValidity, $[157] = disabled, $[158] = expanded, $[159] = fontSize, $[160] = handleClearButtonClick, $[161] = handleInputChange, $[162] = handleInputFocus, $[163] = icon, $[164] = id, $[165] = inputValue, $[166] = listBoxId, $[167] = padding, $[168] = prefix, $[169] = radius, $[170] = readOnly, $[171] = restProps, $[172] = t42, $[173] = t43, $[174] = t44) : t44 = $[174];
+  let t45;
+  return $[175] !== handleRootBlur || $[176] !== handleRootFocus || $[177] !== handleRootKeyDown || $[178] !== results || $[179] !== t44 ? (t45 = /* @__PURE__ */ jsxRuntime.jsxs(StyledAutocomplete, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
+    t44,
     results
-  ] }), $[174] = handleRootBlur, $[175] = handleRootFocus, $[176] = handleRootKeyDown, $[177] = results, $[178] = t43, $[179] = t44) : t44 = $[179], t44;
+  ] }), $[175] = handleRootBlur, $[176] = handleRootFocus, $[177] = handleRootKeyDown, $[178] = results, $[179] = t44, $[180] = t45) : t45 = $[180], t45;
 });
 function RenderPopover({
   renderPopover,
@@ -1785,7 +1790,7 @@ const StyledTreeItem = /* @__PURE__ */ styledComponents.styled.li.withConfig({
   componentId: "sc-iiskig-2"
 })`& > svg{transition:transform 100ms;}`;
 function TreeItem(props) {
-  const $ = reactCompilerRuntime.c(112);
+  const $ = reactCompilerRuntime.c(113);
   let IconComponent, children, href, idProp, linkAs, muted, onClick, restProps, t0, t1, t2, t3, t4, text, weight;
   $[0] !== props ? ({
     children,
@@ -1804,96 +1809,101 @@ function TreeItem(props) {
     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), treeitemRef = react.useRef(null), tree = useTree(), {
+  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);
+  let t5;
+  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (node) => {
+    react.startTransition(() => _setRootElement(node));
+  }, $[16] = t5) : t5 = $[16];
+  const setRootElement = t5, treeitemRef = react.useRef(null), tree = useTree(), {
     path,
     registerItem,
     setExpanded,
     setFocusedElement
   } = tree, _id = react.useId(), id = idProp || _id;
-  let t5, t6;
-  if ($[16] !== id || $[17] !== path) {
+  let t6, t7;
+  if ($[17] !== id || $[18] !== path) {
     const itemPath = path.concat([id || ""]);
-    t5 = itemPath, t6 = itemPath.join("/"), $[16] = id, $[17] = path, $[18] = t5, $[19] = t6;
+    t6 = itemPath, t7 = itemPath.join("/"), $[17] = id, $[18] = path, $[19] = t6, $[20] = t7;
   } else
-    t5 = $[18], t6 = $[19];
-  let t7;
-  $[20] !== t5 || $[21] !== t6 ? (t7 = [t5, t6], $[20] = t5, $[21] = t6, $[22] = t7) : t7 = $[22];
-  const [itemPath_0, itemKey] = t7, 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, t8 = tree.level + 1;
-  let t9;
-  $[23] !== itemPath_0 || $[24] !== t8 || $[25] !== tree ? (t9 = {
+    t6 = $[19], t7 = $[20];
+  let t8;
+  $[21] !== t6 || $[22] !== t7 ? (t8 = [t6, t7], $[21] = t6, $[22] = t7, $[23] = t8) : t8 = $[23];
+  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 = {
     ...tree,
-    level: t8,
+    level: t9,
     path: itemPath_0
-  }, $[23] = itemPath_0, $[24] = t8, $[25] = tree, $[26] = t9) : t9 = $[26];
-  const contextValue = t9;
-  let t10;
-  $[27] !== expanded || $[28] !== itemKey || $[29] !== onClick || $[30] !== rootElement || $[31] !== setExpanded || $[32] !== setFocusedElement ? (t10 = (event) => {
+  }, $[24] = itemPath_0, $[25] = t9, $[26] = tree, $[27] = t10) : t10 = $[27];
+  const contextValue = t10;
+  let t11;
+  $[28] !== expanded || $[29] !== itemKey || $[30] !== onClick || $[31] !== rootElement || $[32] !== setExpanded || $[33] !== 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));
-  }, $[27] = expanded, $[28] = itemKey, $[29] = onClick, $[30] = rootElement, $[31] = setExpanded, $[32] = setFocusedElement, $[33] = t10) : t10 = $[33];
-  const handleClick = t10;
-  let t11;
-  $[34] !== focused || $[35] !== rootElement ? (t11 = (event_0) => {
+  }, $[28] = expanded, $[29] = itemKey, $[30] = onClick, $[31] = rootElement, $[32] = setExpanded, $[33] = setFocusedElement, $[34] = t11) : t11 = $[34];
+  const handleClick = t11;
+  let t12;
+  $[35] !== focused || $[36] !== rootElement ? (t12 = (event_0) => {
     focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
-  }, $[34] = focused, $[35] = rootElement, $[36] = t11) : t11 = $[36];
-  const handleKeyDown = t11;
-  let t12, t13;
-  $[37] !== expanded || $[38] !== itemKey || $[39] !== registerItem || $[40] !== rootElement || $[41] !== selected ? (t12 = () => {
+  }, $[35] = focused, $[36] = rootElement, $[37] = t12) : t12 = $[37];
+  const handleKeyDown = t12;
+  let t13, t14;
+  $[38] !== expanded || $[39] !== itemKey || $[40] !== registerItem || $[41] !== rootElement || $[42] !== selected ? (t13 = () => {
     if (rootElement)
       return registerItem(rootElement, itemKey, expanded, selected);
-  }, t13 = [expanded, itemKey, registerItem, rootElement, selected], $[37] = expanded, $[38] = itemKey, $[39] = registerItem, $[40] = rootElement, $[41] = selected, $[42] = t12, $[43] = t13) : (t12 = $[42], t13 = $[43]), react.useEffect(t12, t13);
-  const t14 = IconComponent || children ? "visible" : "hidden";
-  let t15;
-  $[44] !== t14 ? (t15 = {
-    visibility: t14,
-    pointerEvents: "none"
-  }, $[44] = t14, $[45] = t15) : t15 = $[45];
+  }, 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);
+  const t15 = IconComponent || children ? "visible" : "hidden";
   let t16;
-  $[46] !== IconComponent || $[47] !== fontSize || $[48] !== muted || $[49] !== weight ? (t16 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }), $[46] = IconComponent, $[47] = fontSize, $[48] = muted, $[49] = weight, $[50] = t16) : t16 = $[50];
+  $[45] !== t15 ? (t16 = {
+    visibility: t15,
+    pointerEvents: "none"
+  }, $[45] = t15, $[46] = t16) : t16 = $[46];
   let t17;
-  $[51] !== IconComponent || $[52] !== expanded || $[53] !== fontSize || $[54] !== muted || $[55] !== weight ? (t17 = !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: {
-    transform: expanded ? "rotate(90deg)" : void 0
-  } }) }), $[51] = IconComponent, $[52] = expanded, $[53] = fontSize, $[54] = muted, $[55] = weight, $[56] = t17) : t17 = $[56];
+  $[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];
   let t18;
-  $[57] !== space || $[58] !== t15 || $[59] !== t16 || $[60] !== t17 ? (t18 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { marginRight: space, style: t15, children: [
-    t16,
-    t17
-  ] }), $[57] = space, $[58] = t15, $[59] = t16, $[60] = t17, $[61] = t18) : t18 = $[61];
+  $[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: {
+    transform: expanded ? "rotate(90deg)" : void 0
+  } }) }), $[52] = IconComponent, $[53] = expanded, $[54] = fontSize, $[55] = muted, $[56] = weight, $[57] = t18) : t18 = $[57];
   let t19;
-  $[62] !== fontSize || $[63] !== muted || $[64] !== text || $[65] !== weight ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text }) }), $[62] = fontSize, $[63] = muted, $[64] = text, $[65] = weight, $[66] = t19) : t19 = $[66];
+  $[58] !== space || $[59] !== t16 || $[60] !== t17 || $[61] !== t18 ? (t19 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Box, { marginRight: space, style: t16, children: [
+    t17,
+    t18
+  ] }), $[58] = space, $[59] = t16, $[60] = t17, $[61] = t18, $[62] = t19) : t19 = $[62];
   let t20;
-  $[67] !== padding || $[68] !== t18 || $[69] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Flex, { padding, children: [
-    t18,
-    t19
-  ] }), $[67] = padding, $[68] = t18, $[69] = t19, $[70] = t20) : t20 = $[70];
-  const content2 = 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];
+  let t21;
+  $[68] !== padding || $[69] !== t19 || $[70] !== t20 ? (t21 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Flex, { padding, children: [
+    t19,
+    t20
+  ] }), $[68] = padding, $[69] = t19, $[70] = t20, $[71] = t21) : t21 = $[71];
+  const content2 = t21;
   if (href) {
-    const t212 = selected ? "" : void 0;
-    let t222;
-    $[71] !== content2 || $[72] !== expanded || $[73] !== href || $[74] !== linkAs || $[75] !== tabIndex || $[76] !== tree.level ? (t222 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content2 }), $[71] = content2, $[72] = expanded, $[73] = href, $[74] = linkAs, $[75] = tabIndex, $[76] = tree.level, $[77] = t222) : t222 = $[77];
+    const t222 = selected ? "" : void 0;
     let t232;
-    $[78] !== children || $[79] !== expanded ? (t232 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }), $[78] = children, $[79] = expanded, $[80] = t232) : t232 = $[80];
+    $[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];
     let t242;
-    $[81] !== contextValue || $[82] !== t232 ? (t242 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t232 }), $[81] = contextValue, $[82] = t232, $[83] = t242) : t242 = $[83];
+    $[79] !== children || $[80] !== expanded ? (t242 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }), $[79] = children, $[80] = expanded, $[81] = t242) : t242 = $[81];
     let t252;
-    return $[84] !== handleClick || $[85] !== id || $[86] !== itemKey || $[87] !== restProps || $[88] !== t212 || $[89] !== t222 || $[90] !== t242 ? (t252 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItem, { "data-selected": t212, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: setRootElement, role: "none", children: [
-      t222,
-      t242
-    ] }), $[84] = handleClick, $[85] = id, $[86] = itemKey, $[87] = restProps, $[88] = t212, $[89] = t222, $[90] = t242, $[91] = t252) : t252 = $[91], t252;
+    $[82] !== contextValue || $[83] !== t242 ? (t252 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t242 }), $[82] = contextValue, $[83] = t242, $[84] = t252) : t252 = $[84];
+    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: [
+      t232,
+      t252
+    ] }), $[85] = handleClick, $[86] = id, $[87] = itemKey, $[88] = restProps, $[89] = t222, $[90] = t232, $[91] = t252, $[92] = t262) : t262 = $[92], t262;
   }
-  const t21 = selected ? "" : void 0;
-  let t22;
-  $[92] !== content2 || $[93] !== tree.level ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content2 }), $[92] = content2, $[93] = tree.level, $[94] = t22) : t22 = $[94];
+  const t22 = selected ? "" : void 0;
   let t23;
-  $[95] !== children || $[96] !== expanded ? (t23 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }), $[95] = children, $[96] = expanded, $[97] = t23) : t23 = $[97];
+  $[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];
   let t24;
-  $[98] !== contextValue || $[99] !== t23 ? (t24 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t23 }), $[98] = contextValue, $[99] = t23, $[100] = t24) : t24 = $[100];
+  $[96] !== children || $[97] !== expanded ? (t24 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }), $[96] = children, $[97] = expanded, $[98] = t24) : t24 = $[98];
   let t25;
-  return $[101] !== expanded || $[102] !== handleClick || $[103] !== handleKeyDown || $[104] !== id || $[105] !== itemKey || $[106] !== restProps || $[107] !== t21 || $[108] !== t22 || $[109] !== t24 || $[110] !== tabIndex ? (t25 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTreeItem, { "data-selected": t21, "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: [
-    t22,
-    t24
-  ] }), $[101] = expanded, $[102] = handleClick, $[103] = handleKeyDown, $[104] = id, $[105] = itemKey, $[106] = restProps, $[107] = t21, $[108] = t22, $[109] = t24, $[110] = tabIndex, $[111] = t25) : t25 = $[111], t25;
+  $[99] !== contextValue || $[100] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t24 }), $[99] = contextValue, $[100] = t24, $[101] = t25) : t25 = $[101];
+  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: [
+    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;
 }
 TreeItem.displayName = "TreeItem";
 exports.Arrow = _visualEditing.Arrow;