@sanity/ui 2.8.8 → 2.8.10-canary.0

package/dist/index.esm.js

@@ -37,7 +37,7 @@ function rem(pixelValue) {
   return pixelValue === 0 ? 0 : `${pixelValue / 16}rem`;
 }
 function _responsive(media, values, callback) {
-  return ((values == null ? void 0 : values.map(callback)) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : { [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement });
+  return (values?.map(callback) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : { [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement });
 }
 function _getArrayProp(val, defaultVal) {
   return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
@@ -123,7 +123,7 @@ function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
 function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
+  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val]);
   return useMemo(
     () => _getArrayProp(val, defaultVal),
     // Improve performance: Keep object identify for a given hash of the value
@@ -178,7 +178,7 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
     const target = evt.target;
     if (!(target instanceof Node))
       return;
-    const resolvedBoundaryElement = boundaryElement == null ? void 0 : boundaryElement();
+    const resolvedBoundaryElement = boundaryElement?.();
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
       return;
     const elements = elementsArg().flat();
@@ -197,8 +197,7 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
 }
 function useCustomValidity(ref, customValidity) {
   useEffect(() => {
-    var _a;
-    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
+    ref.current?.setCustomValidity(customValidity || "");
   }, [customValidity, ref]);
 }
 var resizeObservers = [], hasActiveObservations = function() {
@@ -248,7 +247,7 @@ var freeze = function(obj) {
   var _a;
   if (obj instanceof Element)
     return !0;
-  var scope = (_a = obj == null ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  var scope = (_a = obj?.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
   return !!(scope && obj instanceof scope.Element);
 }, isReplacedElement = function(target) {
   switch (target.tagName) {
@@ -531,8 +530,7 @@ function useElementSize(element) {
   }, [element]), size2;
 }
 function useElementRect(element) {
-  const elementSize = useElementSize(element);
-  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
+  return useElementSize(element)?._contentRect || null;
 }
 function useForwardedRef(ref) {
   const innerRef = useRef(null);
@@ -574,9 +572,9 @@ const ThemeContext = createGlobalScopedContext(
 function ThemeProvider(props) {
   const parentTheme = useContext(ThemeContext), {
     children,
-    scheme = (parentTheme == null ? void 0 : parentTheme.scheme) || "light",
-    theme: rootTheme = (parentTheme == null ? void 0 : parentTheme.theme) || null,
-    tone = (parentTheme == null ? void 0 : parentTheme.tone) || "default"
+    scheme = parentTheme?.scheme || "light",
+    theme: rootTheme = parentTheme?.theme || null,
+    tone = parentTheme?.tone || "default"
   } = props, themeContext = useMemo(() => rootTheme ? {
     version: 0,
     theme: rootTheme,
@@ -654,8 +652,7 @@ function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
 }
 function border(props) {
-  var _a, _b;
-  const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$border,
@@ -663,8 +660,7 @@ function border(props) {
   );
 }
 function borderTop(props) {
-  var _a, _b;
-  const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderTop,
@@ -672,8 +668,7 @@ function borderTop(props) {
   );
 }
 function borderRight(props) {
-  var _a, _b;
-  const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderRight,
@@ -681,8 +676,7 @@ function borderRight(props) {
   );
 }
 function borderBottom(props) {
-  var _a, _b;
-  const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderBottom,
@@ -690,8 +684,7 @@ function borderBottom(props) {
   );
 }
 function borderLeft(props) {
-  var _a, _b;
-  const { card, media } = getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderLeft,
@@ -1919,7 +1912,7 @@ function _cardColorStyle(base, color, checkered = !1) {
 function buttonBaseStyles(props) {
   const { $width } = props, { style } = getTheme_v2(props.theme);
   return css`
-    ${style == null ? void 0 : style.button};
+    ${style?.button};
 
     -webkit-font-smoothing: inherit;
     appearance: none;
@@ -1962,7 +1955,6 @@ function combineBoxShadow(...boxShadows) {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a;
   const { $mode } = props, { button, color: baseColor, style } = getTheme_v2(props.theme), shadow = props.$mode === "ghost", mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border2 = {
     width: button.border.width,
     color: "var(--card-border-color)"
@@ -2000,7 +1992,7 @@ function buttonColorStyles(props) {
         "&[data-selected]": _cardColorStyle(baseColor, color.pressed)
       }
     },
-    (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.root
+    style?.button?.root
   ].filter(Boolean);
 }
 const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div`
@@ -2136,7 +2128,6 @@ function cardBaseStyle(props) {
   `;
 }
 function cardColorStyle(props) {
-  var _a;
   const { $checkered, $focusRing, $muted } = props, { card, color, style } = getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
   return css`
     color-scheme: ${color._dark ? "dark" : "light"};
@@ -2222,7 +2213,7 @@ function cardColorStyle(props) {
       }
     }
 
-    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+    ${style?.card?.root}
   `;
 }
 const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
@@ -2715,8 +2706,7 @@ KBD.displayName = "ForwardRef(KBD)";
 const origin = {
   name: "@sanity/ui/origin",
   fn({ middlewareData, placement, rects }) {
-    var _a, _b;
-    const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = ((_a = middlewareData.shift) == null ? void 0 : _a.x) || 0, shiftY = ((_b = middlewareData.shift) == null ? void 0 : _b.y) || 0;
+    const [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = middlewareData.shift?.x || 0, shiftY = middlewareData.shift?.y || 0;
     if (floatingWidth <= 0 || floatingHeight <= 0)
       return {};
     const isVerticalPlacement = ["bottom", "top"].includes(side), { originX, originY } = isVerticalPlacement ? {
@@ -2898,10 +2888,7 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = forwardRef(function(props, forwardedRef) {
-  const theme = useTheme_v2(), { children, media = theme.media, ...restProps } = props, ref = useRef(null), [element, setElement] = useState(null), elementSize = useElementSize(element), width = useMemo(() => {
-    var _a;
-    return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]), max = useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  const theme = useTheme_v2(), { children, media = theme.media, ...restProps } = props, ref = useRef(null), [element, setElement] = useState(null), elementSize = useElementSize(element), width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
   useImperativeHandle(forwardedRef, () => ref.current);
   const setRef = useCallback((el) => {
     ref.current = el, setElement(el);
@@ -2919,11 +2906,8 @@ const ElementQuery = forwardRef(function(props, forwardedRef) {
   );
 });
 ElementQuery.displayName = "ForwardRef(ElementQuery)";
-var __defProp = Object.defineProperty, __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key2] = value, __publicField = (obj, key2, value) => __defNormalProp(obj, key2 + "", value);
 class ErrorBoundary extends Component {
-  constructor() {
-    super(...arguments), __publicField(this, "state", { error: null });
-  }
+  state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };
   }
@@ -2933,7 +2917,7 @@ class ErrorBoundary extends Component {
   render() {
     const { error } = this.state;
     if (error) {
-      const message = typeof (error == null ? void 0 : error.message) == "string" ? error.message : "Error";
+      const message = typeof error?.message == "string" ? error.message : "Error";
       return /* @__PURE__ */ jsx(Code, { children: message });
     }
     return this.props.children;
@@ -3038,24 +3022,22 @@ function _isScrollable(el) {
   return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
 }
 function LayerProvider(props) {
-  var _a;
-  const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent == null ? void 0 : parent.registerChild, level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = useState({}), [size2, setSize] = useState(0), isTopLayer = size2 === 0, registerChild = useCallback(
+  const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = useState({}), [size2, setSize] = useState(0), isTopLayer = size2 === 0, registerChild = useCallback(
     (childLevel) => {
-      const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
+      const parentDispose = parentRegisterChild?.(childLevel);
       return childLevel !== void 0 ? setChildLayers((state) => {
-        var _a2;
-        const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0, nextState = { ...state, [childLevel]: prevLen + 1 };
+        const prevLen = state[childLevel] ?? 0, nextState = { ...state, [childLevel]: prevLen + 1 };
         return setSize(Object.keys(nextState).length), nextState;
       }) : setSize((v) => v + 1), () => {
         childLevel !== void 0 ? setChildLayers((state) => {
           const nextState = { ...state };
           return nextState[childLevel] === 1 ? (delete nextState[childLevel], setSize(Object.keys(nextState).length)) : nextState[childLevel] -= 1, nextState;
-        }) : setSize((v) => v - 1), parentDispose == null || parentDispose();
+        }) : setSize((v) => v - 1), parentDispose?.();
       };
     },
     [parentRegisterChild]
   );
-  useEffect(() => parentRegisterChild == null ? void 0 : parentRegisterChild(level), [level, parentRegisterChild]);
+  useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
   const value = useMemo(
     () => ({
       version: 0,
@@ -3073,11 +3055,11 @@ LayerProvider.displayName = "LayerProvider";
 const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(function(props, forwardedRef) {
   const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer);
   useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => {
-    isTopLayerRef.current !== isTopLayer && isTopLayer && (onActivate == null || onActivate({ activeElement: lastFocusedRef.current })), isTopLayerRef.current = isTopLayer;
+    isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
   }, [isTopLayer, onActivate]);
   const handleFocus = useCallback(
     (event) => {
-      onFocus == null || onFocus(event);
+      onFocus?.(event);
       const rootElement = ref.current, target = document.activeElement;
       !isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
     },
@@ -3107,8 +3089,7 @@ function usePortal() {
   return value;
 }
 function Portal(props) {
-  var _a;
-  const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || ((_a = portal.elements) == null ? void 0 : _a.default);
+  const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
   return portalElement ? createPortal(children, portalElement) : null;
 }
 Portal.displayName = "Portal";
@@ -3248,7 +3229,7 @@ function calcMaxWidth(params) {
   const { boundaryWidth, currentWidth } = params;
   if (!(currentWidth === void 0 && boundaryWidth === void 0))
     return Math.min(
-      currentWidth != null ? currentWidth : 1 / 0,
+      currentWidth ?? 1 / 0,
       (boundaryWidth || 1 / 0) - DEFAULT_POPOVER_PADDING * 2
     );
 }
@@ -3291,7 +3272,7 @@ const MotionCard$1 = styled(motion(Card))`
     } = props, { zIndex } = useLayer(), margins = useMemo(
       () => marginsProp || DEFAULT_POPOVER_MARGINS,
       [marginsProp]
-    ), x = (xProp != null ? xProp : 0) + margins[3], y = (yProp != null ? yProp : 0) + margins[0], rootStyle2 = useMemo(
+    ), x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], rootStyle2 = useMemo(
       () => ({
         left: x,
         originX,
@@ -3347,7 +3328,6 @@ const MotionCard$1 = styled(motion(Card))`
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const Popover = memo(
   forwardRef(function(props, forwardedRef) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = !1,
@@ -3357,9 +3337,9 @@ const Popover = memo(
       constrainSize = !1,
       content,
       disabled,
-      fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
+      fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
       matchReferenceWidth,
-      floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -3369,7 +3349,7 @@ const Popover = memo(
       portal,
       preventOverflow = !0,
       radius: radiusProp = 3,
-      referenceBoundary = (_d = props.boundaryElement) != null ? _d : boundaryElementContext.element,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
@@ -3378,12 +3358,12 @@ const Popover = memo(
       zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
-    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
+    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
     useImperativeHandle(
       forwardedRef,
       () => ref.current
     );
-    const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0, width = calcCurrentWidth({
+    const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
       container,
       mediaIndex,
       width: widthArrayProp
@@ -3418,7 +3398,7 @@ const Popover = memo(
             const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
             matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(
               availableWidth,
-              _maxWidth != null ? _maxWidth : 1 / 0
+              _maxWidth ?? 1 / 0
             )}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
           },
           boundaryElement: floatingBoundary || void 0,
@@ -3459,7 +3439,7 @@ const Popover = memo(
       middleware,
       placement: placementProp,
       whileElementsMounted: autoUpdate
-    }), referenceHidden = (_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden, arrowX = (_g = middlewareData.arrow) == null ? void 0 : _g.x, arrowY = (_h = middlewareData.arrow) == null ? void 0 : _h.y, originX = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originX, originY = (_j = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _j.originY, setArrow = useCallback((arrowEl) => {
+    }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = useCallback((arrowEl) => {
       arrowRef.current = arrowEl;
     }, []), setFloating = useCallback(
       (node) => {
@@ -3469,7 +3449,7 @@ const Popover = memo(
     ), setReference = useCallback(
       (node) => {
         refs.setReference(node);
-        const childRef = childProp == null ? void 0 : childProp.ref;
+        const childRef = getElementRef(childProp);
         typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node);
       },
       [childProp, refs]
@@ -3529,6 +3509,10 @@ const Popover = memo(
   })
 );
 Popover.displayName = "Memo(ForwardRef(Popover))";
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+}
 function radioBaseStyle() {
   return css`
     position: relative;
@@ -4164,8 +4148,7 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled(Card).attrs({ forw
     event.preventDefault(), event.stopPropagation();
   }, []), handleClearClick = useCallback(
     (event) => {
-      var _a;
-      event.preventDefault(), event.stopPropagation(), onClear && onClear(), (_a = ref.current) == null || _a.focus();
+      event.preventDefault(), event.stopPropagation(), onClear && onClear(), ref.current?.focus();
     },
     [onClear, ref]
   ), prefixNode = useMemo(
@@ -4393,7 +4376,7 @@ function useTooltipDelayGroup() {
   return useContext(TooltipDelayGroupContext);
 }
 function TooltipDelayGroupProvider(props) {
-  const { children, delay } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelay = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, value = useMemo(
+  const { children, delay } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0, value = useMemo(
     () => ({
       isGroupActive,
       setIsGroupActive,
@@ -4411,15 +4394,14 @@ TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 const Root$a = styled(Layer)`
   pointer-events: none;
 `, Tooltip = forwardRef(function(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
     animate: _animate = !1,
     arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
+    boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a = props.placement) != null ? _a : "bottom"],
+    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
     padding = 2,
     placement: placementProp = "bottom",
     portal: portalProp,
@@ -4431,7 +4413,7 @@ const Root$a = styled(Layer)`
     ...restProps
   } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
   useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, middleware = useMemo(() => {
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = useMemo(() => {
     const ret = [];
     return ret.push(
       flip({
@@ -4451,7 +4433,7 @@ const Root$a = styled(Layer)`
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate
-  }), arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x, arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y, originX = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originX, originY = (_g = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _g.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback(
+  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback(
     (open, immediate) => {
       if (isInsideGroup)
         if (open) {
@@ -4467,40 +4449,34 @@ const Root$a = styled(Layer)`
     [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]
   ), handleBlur = useCallback(
     (e) => {
-      var _a2, _b2;
-      handleIsOpenChange(!1), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onBlur) == null || _b2.call(_a2, e);
+      handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
     },
-    [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
+    [childProp?.props, handleIsOpenChange]
   ), handleClick = useCallback(
     (e) => {
-      var _a2, _b2;
-      handleIsOpenChange(!1, !0), (_b2 = childProp == null ? void 0 : (_a2 = childProp.props).onClick) == null || _b2.call(_a2, e);
+      handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e);
     },
-    [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
+    [childProp?.props, handleIsOpenChange]
   ), handleContextMenu = useCallback(
     (e) => {
-      var _a2, _b2;
-      handleIsOpenChange(!1, !0), (_b2 = childProp == null ? void 0 : (_a2 = childProp.props).onContextMenu) == null || _b2.call(_a2, e);
+      handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e);
     },
-    [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
+    [childProp?.props, handleIsOpenChange]
   ), handleFocus = useCallback(
     (e) => {
-      var _a2, _b2;
-      handleIsOpenChange(!0), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onFocus) == null || _b2.call(_a2, e);
+      handleIsOpenChange(!0), childProp?.props?.onFocus?.(e);
     },
-    [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
+    [childProp?.props, handleIsOpenChange]
   ), handleMouseEnter = useCallback(
     (e) => {
-      var _a2, _b2;
-      handleIsOpenChange(!0), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onMouseEnter) == null || _b2.call(_a2, e);
+      handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e);
     },
-    [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
+    [childProp?.props, handleIsOpenChange]
   ), handleMouseLeave = useCallback(
     (e) => {
-      var _a2, _b2;
-      handleIsOpenChange(!1), (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onMouseLeave) == null || _b2.call(_a2, e);
+      handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e);
     },
-    [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
+    [childProp?.props, handleIsOpenChange]
   );
   useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip }), useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
@@ -4517,7 +4493,7 @@ const Root$a = styled(Layer)`
   }, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
     const availableWidths = [
       ...boundaryElement ? [boundaryElement.offsetWidth] : [],
-      (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth
+      portalElement?.offsetWidth || document.body.offsetWidth
     ];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
   }, [boundaryElement, portalElement]);
@@ -4532,7 +4508,7 @@ const Root$a = styled(Layer)`
     },
     [refs]
   ), childRef = useRef(null);
-  useImperativeHandle(childProp == null ? void 0 : childProp.ref, () => childRef.current);
+  useImperativeHandle(childProp?.ref, () => childRef.current);
   const child = useMemo(() => childProp ? cloneElement(childProp, {
     onBlur: handleBlur,
     onFocus: handleFocus,
@@ -4755,17 +4731,15 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     },
     [onBlur, onQueryChange, relatedElements]
   ), handleRootFocus = useCallback((event) => {
-    const listBoxElement = listBoxElementRef.current, focusedElement = event.target instanceof HTMLElement ? event.target : null, listFocused2 = (listBoxElement == null ? void 0 : listBoxElement.contains(focusedElement)) || !1;
+    const listBoxElement = listBoxElementRef.current, focusedElement = event.target instanceof HTMLElement ? event.target : null, listFocused2 = listBoxElement?.contains(focusedElement) || !1;
     listFocused2 !== listFocusedRef.current && (listFocusedRef.current = listFocused2, dispatch({ type: "root/setListFocused", listFocused: listFocused2 }));
   }, []), handleOptionSelect = useCallback(
     (v) => {
-      var _a;
-      dispatch({ type: "value/change", value: v }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), (_a = inputElementRef.current) == null || _a.focus();
+      dispatch({ type: "value/change", value: v }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
     },
     [onChange, onSelect, onQueryChange]
   ), handleRootKeyDown = useCallback(
     (event) => {
-      var _a, _b;
       if (event.key === "ArrowDown") {
         if (event.preventDefault(), !filteredOptionsLen) return;
         const activeOption = filteredOptions.find((o) => o.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
@@ -4779,12 +4753,12 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
         return;
       }
       if (event.key === "Escape") {
-        dispatch({ type: "root/escape" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), (_a = inputElementRef.current) == null || _a.focus();
+        dispatch({ type: "root/escape" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
         return;
       }
       const target = event.target, listEl = listBoxElementRef.current;
-      if ((listEl === target || listEl != null && listEl.contains(target)) && !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)) {
-        (_b = inputElementRef.current) == null || _b.focus();
+      if ((listEl === target || listEl?.contains(target)) && !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)) {
+        inputElementRef.current?.focus();
         return;
       }
     },
@@ -4810,8 +4784,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   }, []), handlePopoverMouseLeave = useCallback(() => {
     popoverMouseWithinRef.current = !1;
   }, []), handleClearButtonClick = useCallback(() => {
-    var _a;
-    dispatch({ type: "root/clear" }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), (_a = inputElementRef.current) == null || _a.focus();
+    dispatch({ type: "root/clear" }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
   }, [onChange, onQueryChange]), handleClearButtonFocus = useCallback(() => {
     dispatch({ type: "input/focus" });
   }, []);
@@ -4850,10 +4823,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     [openButton]
   ), handleOpenClick = useCallback(
     (event) => {
-      dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event), _raf(() => {
-        var _a;
-        return (_a = inputElementRef.current) == null ? void 0 : _a.focus();
-      });
+      dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event), _raf(() => inputElementRef.current?.focus());
     },
     [openButtonProps, dispatchOpen]
   ), openButtonNode = useMemo(
@@ -4916,8 +4886,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     }
   ), handleListBoxKeyDown = useCallback(
     (event) => {
-      var _a;
-      event.key === "Tab" && listFocused && ((_a = inputElementRef.current) == null || _a.focus());
+      event.key === "Tab" && listFocused && inputElementRef.current?.focus();
     },
     [listFocused]
   ), content = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(
@@ -5172,7 +5141,6 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
   position: relative;
   z-index: 3;
 `, DialogCard = forwardRef(function(props, forwardedRef) {
-  var _a;
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -5188,7 +5156,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     scheme,
     shadow: shadowProp,
     width: widthProp
-  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), contentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
+  } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), contentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
   return useImperativeHandle(forwardedRef, () => ref.current), useImperativeHandle(
     forwardedContentRef,
     () => contentRef.current
@@ -5230,7 +5198,6 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
 });
 DialogCard.displayName = "ForwardRef(DialogCard)";
 const Dialog = forwardRef(function(props, ref) {
-  var _a;
   const dialog = useDialog(), { layer } = useTheme_v2(), {
     __unstable_autoFocus: autoFocus = !0,
     __unstable_hideCloseButton: hideCloseButton = !1,
@@ -5253,9 +5220,9 @@ const Dialog = forwardRef(function(props, ref) {
     zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
     animate: _animate = !1,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = useCallback(
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = useCallback(
     (event) => {
-      onFocus == null || onFocus(event);
+      onFocus?.(event);
       const target = event.target, cardElement = cardRef.current;
       if (cardElement && target === preDivRef.current) {
         focusLastDescendant(cardElement);
@@ -5466,8 +5433,7 @@ function useMenuController(props) {
     },
     [setActiveIndex]
   ), handleItemMouseLeave = useCallback(() => {
-    var _a;
-    setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
+    setActiveIndex(-2), rootElementRef.current?.focus();
   }, [rootElementRef, setActiveIndex]);
   return useEffect(() => {
     if (!mounted) return;
@@ -5489,8 +5455,7 @@ function useMenuController(props) {
         }
         return;
       }
-      const element = elementsRef.current[activeIndex] || null;
-      element == null || element.focus();
+      (elementsRef.current[activeIndex] || null)?.focus();
     });
     return () => cancelAnimationFrame(rafId);
   }, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
@@ -5678,20 +5643,17 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
       shouldFocus
     ]
   ), menu = menuProp && cloneElement(menuProp, menuProps), ref = useRef(null), button = useMemo(
-    () => {
-      var _a;
-      return buttonProp && cloneElement(buttonProp, {
-        "data-ui": "MenuButton",
-        id,
-        onClick: handleButtonClick,
-        onKeyDown: handleButtonKeyDown,
-        onMouseDown: handleMouseDown,
-        "aria-haspopup": !0,
-        "aria-expanded": open,
-        ref,
-        selected: (_a = buttonProp.props.selected) != null ? _a : open
-      });
-    },
+    () => buttonProp && cloneElement(buttonProp, {
+      "data-ui": "MenuButton",
+      id,
+      onClick: handleButtonClick,
+      onKeyDown: handleButtonKeyDown,
+      onMouseDown: handleMouseDown,
+      "aria-haspopup": !0,
+      "aria-expanded": open,
+      ref,
+      selected: buttonProp.props.selected ?? open
+    }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]
   );
   useImperativeHandle(
@@ -5756,7 +5718,6 @@ function selectableBaseStyle() {
   `;
 }
 function selectableColorStyle(props) {
-  var _a;
   const { $tone } = props, { color, style } = getTheme_v2(props.theme), tone = color.selectable[$tone];
   return css`
     ${_cardColorStyle(color, tone.enabled)}
@@ -5825,7 +5786,7 @@ function selectableColorStyle(props) {
       }
     }
 
-    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+    ${style?.card?.root}
   `;
 }
 const Selectable = styled(Box)(
@@ -5872,17 +5833,17 @@ function MenuGroup(props) {
   ), handleMenuKeyDown = useCallback(
     (event) => {
       event.key === "ArrowLeft" && (event.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
-        rootElement == null || rootElement.focus();
+        rootElement?.focus();
       }));
     },
     [rootElement]
   ), handleClick = useCallback(
     (event) => {
-      onClick == null || onClick(event), setShouldFocus("first"), setOpen(!0);
+      onClick?.(event), setShouldFocus("first"), setOpen(!0);
     },
     [onClick]
   ), handleChildItemClick = useCallback(() => {
-    setOpen(!1), onItemClick == null || onItemClick();
+    setOpen(!1), onItemClick?.();
   }, [onItemClick]), handleMenuMouseEnter = useCallback(() => setWithinMenu(!0), []);
   useEffect(() => mount(rootElement), [mount, rootElement]), useEffect(() => {
     active || setOpen(!1);
@@ -6385,8 +6346,7 @@ function ToastProvider(props) {
     [prefersReducedMotion]
   ), value = useMemo(() => ({ version: 0, push: (params) => {
     const setState = (state2) => startTransition(() => _setState(state2)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
-      var _a;
-      const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
+      const timeoutId = toastsRef.current[id]?.timeoutId;
       setState((prevState) => {
         const idx = prevState.findIndex((t) => t.id === id);
         if (idx > -1) {
@@ -6448,7 +6408,6 @@ function useToast() {
   return value;
 }
 function _findPrevItemElement(state, itemElements, focusedElement) {
-  var _a;
   const idx = itemElements.indexOf(focusedElement), els = itemElements.slice(0, idx), len = els.length;
   for (let i = len - 1; i >= 0; i -= 1) {
     const itemKey = els[i].getAttribute("data-tree-key");
@@ -6461,7 +6420,7 @@ function _findPrevItemElement(state, itemElements, focusedElement) {
     for (let j = 0; j < segments.length; j += 1) {
       p.push(segments[j]);
       const k = p.join("/");
-      if (!((_a = state[k]) != null && _a.expanded)) {
+      if (!state[k]?.expanded) {
         expanded = !1;
         break;
       }
@@ -6472,7 +6431,6 @@ function _findPrevItemElement(state, itemElements, focusedElement) {
   return null;
 }
 function _findNextItemElement(state, itemElements, focusedElement) {
-  var _a;
   const idx = itemElements.indexOf(focusedElement), els = itemElements.slice(idx), len = itemElements.length;
   for (let i = 1; i < len; i += 1) {
     if (!els[i])
@@ -6487,7 +6445,7 @@ function _findNextItemElement(state, itemElements, focusedElement) {
     for (let j = 0; j < segments.length; j += 1) {
       p.push(segments[j]);
       const k = p.join("/");
-      if (!((_a = state[k]) != null && _a.expanded)) {
+      if (!state[k]?.expanded) {
         expanded = !1;
         break;
       }
@@ -6545,7 +6503,6 @@ const TreeContext = createGlobalScopedContext(
       [focusedElement, itemElements, path, registerItem, setExpanded, space, state]
     ), handleKeyDown = useCallback(
       (event) => {
-        var _a;
         if (focusedElementRef.current) {
           if (event.key === "ArrowDown") {
             event.preventDefault();
@@ -6590,7 +6547,7 @@ const TreeContext = createGlobalScopedContext(
             event.preventDefault();
             const focusedKey = focusedElementRef.current.getAttribute("data-tree-key");
             if (!focusedKey) return;
-            (_a = stateRef.current[focusedKey]) != null && _a.expanded || setState((s) => {
+            stateRef.current[focusedKey]?.expanded || setState((s) => {
               const itemState = s[focusedKey];
               return itemState ? { ...s, [focusedKey]: { ...itemState, expanded: !0 } } : s;
             });
@@ -6601,7 +6558,7 @@ const TreeContext = createGlobalScopedContext(
       [itemElements]
     ), handleFocus = useCallback(
       (event) => {
-        setFocusedElement(event.target), onFocus == null || onFocus(event);
+        setFocusedElement(event.target), onFocus?.(event);
       },
       [onFocus]
     );
@@ -6756,7 +6713,7 @@ const TreeGroup = memo(function(props) {
     text,
     weight,
     ...restProps
-  } = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = useMemo(
+  } = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = useMemo(
     () => ({ ...tree, level: tree.level + 1, path: itemPath }),
     [itemPath, tree]
   ), handleClick = useCallback(
@@ -6768,10 +6725,7 @@ const TreeGroup = memo(function(props) {
     [expanded, itemKey, onClick, setExpanded, setFocusedElement]
   ), handleKeyDown = useCallback(
     (event) => {
-      if (focused && event.key === "Enter") {
-        const el = treeitemRef.current || rootRef.current;
-        el == null || el.click();
-      }
+      focused && event.key === "Enter" && (treeitemRef.current || rootRef.current)?.click();
     },
     [focused]
   );