@sanity/ui 3.3.5 → 3.4.0

package/dist/index.mjs

@@ -1,12 +1,17 @@
 import { X as getTheme_v2 } from "./_chunks/theme.mjs";
 import { $ as responsiveInputPaddingStyle, A as useMediaIndex, At as parseColor, B as _cardColorStyle, C as BoundaryElementContext, Ct as isHTMLTextAreaElement, D as Grid, Dt as hexToRgb, E as Inline, Et as createColorTheme, F as _ResizeObserver, Ft as studioTheme, G as SpanWithTextOverflow, H as Flex, I as useCustomValidity, J as textInputBaseStyle, K as responsiveRadiusStyle, L as useClickOutsideEvent, M as useGlobalKeyDown, Mt as rgbToHsl, N as useElementSize, Nt as rgba, O as usePrefersReducedMotion, Ot as hslToRgb, P as _elementSizeObserver, Pt as screen, Q as responsiveInputPaddingIconRightStyle, R as Card, S as isRecord, St as isHTMLSelectElement, T as KBD, Tt as EMPTY_RECORD, U as Text, V as Spinner, W as Box, X as textInputRepresentationStyle, Y as textInputFontSizeStyle, Z as textInputRootStyle, _ as usePortal, _t as containsOrEqualsElement, a as MenuDivider, at as useRootTheme, b as LayerProvider, bt as isHTMLElement, c as Tooltip, ct as responsiveTextFont, d as useDelayedState, dt as _fillCSSObject, et as focusRingBorderStyle, f as TextInput, ft as _getArrayProp, g as Portal, gt as _isEnterToClickElement, h as PortalProvider, ht as rem, i as MenuGroup, it as ThemeColorProvider, j as useMatchMedia, jt as rgbToHex, k as usePrefersDark, kt as multiply, l as useTooltipDelayGroup, lt as responsiveTextAlignStyle, m as Popover, mt as _responsive, n as Tab, nt as useTheme, o as Menu, ot as ThemeProvider, p as Stack, pt as _getResponsiveSpace, q as responsivePaddingStyle, r as MenuItem, rt as useTheme_v2, s as Hotkeys, st as createGlobalScopedContext, t as TabList, tt as focusRingStyle, u as TooltipDelayGroupContext, ut as responsiveFont, v as Layer, vt as isHTMLAnchorElement, w as Arrow, wt as EMPTY_ARRAY, x as useBoundaryElement, xt as isHTMLInputElement, y as useLayer, yt as isHTMLButtonElement, z as Button } from "./_chunks/tabList.mjs";
 import { c } from "react-compiler-runtime";
-import { CheckmarkIcon, ChevronDownIcon, CloseIcon, RemoveIcon, SpinnerIcon, ToggleArrowRightIcon } from "@sanity/icons";
+import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 import { Children, Component, Fragment, Suspense, cloneElement, forwardRef, isValidElement, lazy, startTransition, useContext, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import ReactIs from "react-is";
 import { css, keyframes, styled } from "styled-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { SpinnerIcon } from "@sanity/icons/Spinner";
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
+import { RemoveIcon } from "@sanity/icons/Remove";
 import { AnimatePresence, motion } from "motion/react";
+import { CloseIcon } from "@sanity/icons/Close";
+import { ToggleArrowRightIcon } from "@sanity/icons/ToggleArrowRight";
 /**
 * @internal
 */
@@ -108,7 +113,7 @@ const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
 })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), LabelComponent = forwardRef(function(props, ref) {
 	let $ = c(26), accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
 	$[0] === props ? (accent = $[1], align = $[2], childrenProp = $[3], restProps = $[4], t0 = $[5], t1 = $[6], textOverflow = $[7], weight = $[8]) : ({accent, align, children: childrenProp, muted: t0, size: t1, textOverflow, weight, ...restProps} = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = childrenProp, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = textOverflow, $[8] = weight);
-	let muted = t0 === void 0 ? !1 : t0, size = t1 === void 0 ? 2 : t1, children = childrenProp;
+	let muted = t0 !== void 0 && t0, size = t1 === void 0 ? 2 : t1, children = childrenProp;
 	if (textOverflow === "ellipsis") {
 		let t2;
 		$[9] === children ? t2 = $[10] : (t2 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t2), children = t2;
@@ -637,10 +642,10 @@ function inputElementStyles(props) {
 }
 const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledCheckbox",
-	componentId: "sc-mje2ol-0"
+	componentId: "sc-eqpl40-0"
 })(checkboxBaseStyles), Input$4 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-mje2ol-1"
+	componentId: "sc-eqpl40-1"
 })(inputElementStyles), Checkbox = forwardRef(function(props, forwardedRef) {
 	let $ = c(25), checked, className, customValidity, disabled, indeterminate, readOnly, restProps, style;
 	$[0] === props ? (checked = $[1], className = $[2], customValidity = $[3], disabled = $[4], indeterminate = $[5], readOnly = $[6], restProps = $[7], style = $[8]) : ({checked, className, disabled, indeterminate, customValidity, readOnly, style, ...restProps} = props, $[0] = props, $[1] = checked, $[2] = className, $[3] = customValidity, $[4] = disabled, $[5] = indeterminate, $[6] = readOnly, $[7] = restProps, $[8] = style);
@@ -795,7 +800,7 @@ const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
 })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), HeadingComponent = forwardRef(function(props, ref) {
 	let $ = c(26), align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
 	$[0] === props ? (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]) : ({accent: t0, align, children: childrenProp, muted: t1, size: t2, textOverflow, weight, ...restProps} = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight);
-	let accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size = t2 === void 0 ? 2 : t2, children = childrenProp;
+	let accent = t0 !== void 0 && t0, muted = t1 !== void 0 && t1, size = t2 === void 0 ? 2 : t2, children = childrenProp;
 	if (textOverflow === "ellipsis") {
 		let t3;
 		$[9] === children ? t3 = $[10] : (t3 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t3), children = t3;
@@ -1159,13 +1164,13 @@ const selectStyle = {
 	iconBox: iconBoxStyle
 }, StyledSelect = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledSelect",
-	componentId: "sc-a3ltm7-0"
+	componentId: "sc-gi1uze-0"
 })(selectStyle.root), Input$2 = /* @__PURE__ */ styled.select.withConfig({
 	displayName: "Input",
-	componentId: "sc-a3ltm7-1"
+	componentId: "sc-gi1uze-1"
 })(selectStyle.input), IconBox = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "IconBox",
-	componentId: "sc-a3ltm7-2"
+	componentId: "sc-gi1uze-2"
 })(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
 	let $ = c(38), children, customValidity, disabled, gap, readOnly, restProps, t0, t1, t2, t3;
 	$[0] === props ? (children = $[1], customValidity = $[2], disabled = $[3], gap = $[4], readOnly = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10]) : ({children, customValidity, disabled, fontSize: t0, gap, padding: t1, radius: t2, readOnly, space: t3, ...restProps} = props, $[0] = props, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = gap, $[5] = readOnly, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3);
@@ -1297,7 +1302,7 @@ const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
 })(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = forwardRef(function(props, forwardedRef) {
 	let $ = c(35), __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
 	$[0] === props ? (__unstable_disableFocusRing = $[1], customValidity = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], weight = $[9]) : ({border: t0, customValidity, disabled: t1, fontSize: t2, padding: t3, radius: t4, weight, __unstable_disableFocusRing, ...restProps} = props, $[0] = props, $[1] = __unstable_disableFocusRing, $[2] = customValidity, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = weight);
-	let border = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSize = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = useRef(null), rootTheme = useRootTheme(), t5;
+	let border = t0 === void 0 || t0, disabled = t1 !== void 0 && t1, fontSize = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = useRef(null), rootTheme = useRootTheme(), t5;
 	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
 	let t6 = rootTheme.scheme, t7 = rootTheme.tone, t8;
 	$[11] === fontSize ? t8 = $[12] : (t8 = _getArrayProp(fontSize), $[11] = fontSize, $[12] = t8);
@@ -1365,13 +1370,13 @@ TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 */
 const StyledAutocomplete = styled.div.withConfig({
 	displayName: "StyledAutocomplete",
-	componentId: "sc-890276-0"
+	componentId: "sc-hv7uk8-0"
 })`line-height:0;`, ListBox = styled(Box).withConfig({
 	displayName: "ListBox",
-	componentId: "sc-890276-1"
+	componentId: "sc-hv7uk8-1"
 })`& > ul{list-style:none;padding:0;margin:0;}`, rotate = keyframes`from{transform:rotate(0deg);}to{transform:rotate(360deg);}`, AnimatedSpinnerIcon = styled(SpinnerIcon).withConfig({
 	displayName: "AnimatedSpinnerIcon",
-	componentId: "sc-890276-2"
+	componentId: "sc-hv7uk8-2"
 })`animation:${rotate} 500ms linear infinite;`;
 function AutocompleteOption(props) {
 	let $ = c(11), { children, id, onSelect, selected, value } = props, t0;
@@ -1455,7 +1460,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 ], 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 = forwardRef(function(props, forwardedRef) {
 	let $ = c(181), 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 ? (customValidity = $[1], disabled = $[2], filterOptionProp = $[3], icon = $[4], id = $[5], loading = $[6], onBlur = $[7], onChange = $[8], onFocus = $[9], onQueryChange = $[10], onSelect = $[11], openButton = $[12], openOnFocus = $[13], optionsProp = $[14], prefix = $[15], readOnly = $[16], relatedElements = $[17], renderOptionProp = $[18], renderPopover = $[19], restProps = $[20], suffix = $[21], t0 = $[22], t1 = $[23], t2 = $[24], t3 = $[25], t4 = $[26], t5 = $[27], t6 = $[28], valueProp = $[29]) : ({border: t0, customValidity, disabled, filterOption: filterOptionProp, fontSize: t1, icon, id, listBox: t2, loading, onBlur, onChange, onFocus, onQueryChange, onSelect, openButton, openOnFocus, options: optionsProp, padding: t3, popover: t4, prefix, radius: t5, readOnly, relatedElements, renderOption: renderOptionProp, renderPopover, renderValue: t6, suffix, value: valueProp, ...restProps} = props, $[0] = props, $[1] = customValidity, $[2] = disabled, $[3] = filterOptionProp, $[4] = icon, $[5] = id, $[6] = loading, $[7] = onBlur, $[8] = onChange, $[9] = onFocus, $[10] = onQueryChange, $[11] = onSelect, $[12] = openButton, $[13] = openOnFocus, $[14] = optionsProp, $[15] = prefix, $[16] = readOnly, $[17] = relatedElements, $[18] = renderOptionProp, $[19] = renderPopover, $[20] = restProps, $[21] = suffix, $[22] = t0, $[23] = t1, $[24] = t2, $[25] = t3, $[26] = t4, $[27] = t5, $[28] = t6, $[29] = valueProp);
-	let border = t0 === void 0 ? !0 : t0, fontSize = t1 === void 0 ? 2 : t1, listBox = t2 === void 0 ? EMPTY_RECORD : t2, paddingProp = t3 === void 0 ? 3 : t3, popover = t4 === void 0 ? EMPTY_RECORD : t4, radius = t5 === void 0 ? 2 : t5, renderValue = t6 === void 0 ? DEFAULT_RENDER_VALUE : t6, t7 = valueProp || null, t8 = valueProp || null, t9;
+	let border = t0 === void 0 || t0, fontSize = t1 === void 0 ? 2 : t1, listBox = t2 === void 0 ? EMPTY_RECORD : t2, paddingProp = t3 === void 0 ? 3 : t3, popover = t4 === void 0 ? EMPTY_RECORD : t4, radius = t5 === void 0 ? 2 : t5, renderValue = t6 === void 0 ? DEFAULT_RENDER_VALUE : t6, t7 = valueProp || null, t8 = valueProp || null, t9;
 	$[30] !== t7 || $[31] !== t8 ? (t9 = {
 		activeValue: t7,
 		focused: !1,
@@ -1491,7 +1496,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 	let currentOption = t16, t17;
 	if ($[46] !== filterOption || $[47] !== options || $[48] !== query) {
 		let t18;
-		$[50] !== filterOption || $[51] !== query ? (t18 = (option) => query ? filterOption(query, option) : !0, $[50] = filterOption, $[51] = query, $[52] = t18) : t18 = $[52], t17 = options.filter(t18), $[46] = filterOption, $[47] = options, $[48] = query, $[49] = t17;
+		$[50] !== filterOption || $[51] !== query ? (t18 = (option) => !query || filterOption(query, option), $[50] = filterOption, $[51] = query, $[52] = t18) : t18 = $[52], t17 = options.filter(t18), $[46] = filterOption, $[47] = options, $[48] = query, $[49] = t17;
 	} else t17 = $[49];
 	let filteredOptions = t17, filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, t18;
 	$[53] !== onBlur || $[54] !== onQueryChange || $[55] !== relatedElements ? (t18 = (event) => {
@@ -1951,29 +1956,29 @@ function useDialog() {
 	return useContext(DialogContext);
 }
 function isTargetWithinScope(boundaryElement, portalElement, target) {
-	return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
+	return !boundaryElement || !portalElement || containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
 const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
 	displayName: "StyledDialog",
-	componentId: "sc-7l6kmb-0"
+	componentId: "sc-r9i1m3-0"
 })(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container).withConfig({
 	displayName: "DialogContainer",
-	componentId: "sc-7l6kmb-1"
+	componentId: "sc-r9i1m3-1"
 })`&:not([hidden]){display:flex;}width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;`, DialogCardRoot = styled(Card).withConfig({
 	displayName: "DialogCardRoot",
-	componentId: "sc-7l6kmb-2"
+	componentId: "sc-r9i1m3-2"
 })`&:not([hidden]){display:flex;}width:100%;min-height:0;max-height:100%;overflow:hidden;overflow:clip;`, DialogLayout = styled(Flex).withConfig({
 	displayName: "DialogLayout",
-	componentId: "sc-7l6kmb-3"
+	componentId: "sc-r9i1m3-3"
 })`flex:1;min-height:0;width:100%;`, DialogHeader = styled(Box).withConfig({
 	displayName: "DialogHeader",
-	componentId: "sc-7l6kmb-4"
+	componentId: "sc-r9i1m3-4"
 })`position:relative;z-index:2;`, DialogContent = styled(Box).withConfig({
 	displayName: "DialogContent",
-	componentId: "sc-7l6kmb-5"
+	componentId: "sc-r9i1m3-5"
 })`position:relative;z-index:1;overflow:auto;outline:none;`, DialogFooter = styled(Box).withConfig({
 	displayName: "DialogFooter",
-	componentId: "sc-7l6kmb-6"
+	componentId: "sc-r9i1m3-6"
 })`position:relative;z-index:3;`, DialogCard = forwardRef(function(props, forwardedRef) {
 	let $ = c(44), { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, children, contentRef: forwardedContentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: radiusProp, scheme, shadow: shadowProp, width: widthProp } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, t0;
 	$[0] === radiusProp ? t0 = $[1] : (t0 = _getArrayProp(radiusProp), $[0] = radiusProp, $[1] = t0);
@@ -2069,7 +2074,7 @@ DialogCard.displayName = "ForwardRef(DialogCard)";
 const Dialog = forwardRef(function(props, ref) {
 	let $ = c(70), dialog = useDialog(), { layer } = useTheme_v2(), _positionProp, _zOffsetProp, children, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5, t6;
 	$[0] === props ? (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], contentRef = $[4], footer = $[5], header = $[6], id = $[7], onActivate = $[8], onClickOutside = $[9], onClose = $[10], onFocus = $[11], portalProp = $[12], restProps = $[13], scheme = $[14], t0 = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21]) : ({__unstable_autoFocus: t0, __unstable_hideCloseButton: t1, cardRadius: t2, cardShadow: t3, children, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, padding: t4, portal: portalProp, position: _positionProp, scheme, width: t5, zOffset: _zOffsetProp, animate: t6, ...restProps} = props, $[0] = props, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = contentRef, $[5] = footer, $[6] = header, $[7] = id, $[8] = onActivate, $[9] = onClickOutside, $[10] = onClose, $[11] = onFocus, $[12] = portalProp, $[13] = restProps, $[14] = scheme, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6);
-	let autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 === void 0 ? !1 : t6, positionProp = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, t7;
+	let autoFocus = t0 === void 0 || t0, hideCloseButton = t1 !== void 0 && t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 !== void 0 && t6, positionProp = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = !usePrefersReducedMotion() && _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, t7;
 	$[22] === cardRadiusProp ? t7 = $[23] : (t7 = _getArrayProp(cardRadiusProp), $[22] = cardRadiusProp, $[23] = t7);
 	let cardRadius = t7, t8;
 	$[24] === paddingProp ? t8 = $[25] : (t8 = _getArrayProp(paddingProp), $[24] = paddingProp, $[25] = t8);
@@ -2189,7 +2194,7 @@ DialogProvider.displayName = "DialogProvider";
 * @public
 */
 const MenuButton = forwardRef(function(props, forwardedRef) {
-	let $ = c(62), { __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 } = props, disableRestoreFocusOnClose = t0 === void 0 ? !1 : t0, deprecated_portal = t1 === void 0 ? !0 : t1, [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), [buttonElement, setButtonElement] = useState(null), t2;
+	let $ = c(62), { __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 } = props, disableRestoreFocusOnClose = t0 !== void 0 && t0, deprecated_portal = t1 === void 0 || t1, [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), [buttonElement, setButtonElement] = useState(null), t2;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[0] = t2) : t2 = $[0];
 	let [menuElements, setChildMenuElements] = useState(t2), openRef = useRef(open), t3, t4;
 	$[1] !== onOpen || $[2] !== open ? (t3 = () => {
@@ -2307,7 +2312,7 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 })(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
 	let $ = c(16), delay, radius, restProps, t0;
 	$[0] === props ? (delay = $[1], radius = $[2], restProps = $[3], t0 = $[4]) : ({animated: t0, delay, radius, ...restProps} = props, $[0] = props, $[1] = delay, $[2] = radius, $[3] = restProps, $[4] = t0);
-	let animated = t0 === void 0 ? !1 : t0, [visible, setVisible] = useState(!delay), t1, t2;
+	let animated = t0 !== void 0 && t0, [visible, setVisible] = useState(!delay), t1, t2;
 	$[5] === delay ? (t1 = $[6], t2 = $[7]) : (t1 = () => {
 		if (!delay) return;
 		let timeout = setTimeout(() => {
@@ -2319,7 +2324,7 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 	}, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2), useEffect(t1, t2);
 	let t3;
 	$[8] === radius ? t3 = $[9] : (t3 = _getArrayProp(radius), $[8] = radius, $[9] = t3);
-	let t4 = delay ? visible : !0, t5;
+	let t4 = !delay || visible, t5;
 	return $[10] !== animated || $[11] !== ref || $[12] !== restProps || $[13] !== t3 || $[14] !== t4 ? (t5 = /* @__PURE__ */ jsx(StyledSkeleton$1, {
 		...restProps,
 		$animated: animated,
@@ -2909,7 +2914,7 @@ function useTree() {
 function TreeGroup(props) {
 	let $ = c(9), children, restProps, t0;
 	$[0] === props ? (children = $[1], restProps = $[2], t0 = $[3]) : ({children, expanded: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0);
-	let expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded, t2;
+	let expanded = t0 !== void 0 && t0, tree = useTree(), t1 = !expanded, t2;
 	return $[4] !== children || $[5] !== restProps || $[6] !== t1 || $[7] !== tree.gap ? (t2 = /* @__PURE__ */ jsx(Stack, {
 		as: "ul",
 		"data-ui": "TreeGroup",
@@ -2923,13 +2928,13 @@ function TreeGroup(props) {
 }
 const StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
 	displayName: "StyledTreeItem",
-	componentId: "sc-v9loy0-0"
+	componentId: "sc-arsnlr-0"
 })(treeItemRootStyle, treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled(Box).attrs({ forwardedAs: "a" }).withConfig({
 	displayName: "TreeItemBox",
-	componentId: "sc-v9loy0-1"
+	componentId: "sc-arsnlr-1"
 })(treeItemBoxStyle), ToggleArrowText = styled(Text).withConfig({
 	displayName: "ToggleArrowText",
-	componentId: "sc-v9loy0-2"
+	componentId: "sc-arsnlr-2"
 })`& > svg{transition:transform 100ms;}`;
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
@@ -2938,7 +2943,7 @@ const StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
 function TreeItem(props) {
 	let $ = c(114), IconComponent, children, gap, href, idProp, linkAs, muted, onClick, restProps, t0, t1, t2, t3, t4, text, weight;
 	$[0] === props ? (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]) : ({children, expanded: t0, fontSize: t1, href, icon: IconComponent, id: idProp, linkAs, muted, onClick, padding: t2, selected: t3, gap, space: t4, text, weight, ...restProps} = 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);
-	let 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] = useState(null), t5;
+	let expandedProp = t0 !== void 0 && t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 2 : t2, selected = t3 !== void 0 && t3, spacing = gap === void 0 ? t4 === void 0 ? 2 : t4 : gap, [rootElement, _setRootElement] = useState(null), t5;
 	$[17] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (node) => {
 		startTransition(() => _setRootElement(node));
 	}, $[17] = t5) : t5 = $[17];