@sanity/ui 2.8.8 → 2.8.10-canary.0

package/dist/index.js

@@ -32,7 +32,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];
@@ -118,7 +118,7 @@ function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
 function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = react.useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
+  const __perf_hash__ = react.useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val]);
   return react.useMemo(
     () => _getArrayProp(val, defaultVal),
     // Improve performance: Keep object identify for a given hash of the value
@@ -173,7 +173,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();
@@ -192,8 +192,7 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
 }
 function useCustomValidity(ref, customValidity) {
   react.useEffect(() => {
-    var _a;
-    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
+    ref.current?.setCustomValidity(customValidity || "");
   }, [customValidity, ref]);
 }
 var resizeObservers = [], hasActiveObservations = function() {
@@ -243,7 +242,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) {
@@ -526,8 +525,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 = react.useRef(null);
@@ -569,9 +567,9 @@ const ThemeContext = createGlobalScopedContext(
 function ThemeProvider(props) {
   const parentTheme = react.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 = react.useMemo(() => rootTheme ? {
     version: 0,
     theme: rootTheme,
@@ -649,8 +647,7 @@ function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
 }
 function border(props) {
-  var _a, _b;
-  const { card, media } = theme.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 } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$border,
@@ -658,8 +655,7 @@ function border(props) {
   );
 }
 function borderTop(props) {
-  var _a, _b;
-  const { card, media } = theme.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 } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderTop,
@@ -667,8 +663,7 @@ function borderTop(props) {
   );
 }
 function borderRight(props) {
-  var _a, _b;
-  const { card, media } = theme.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 } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderRight,
@@ -676,8 +671,7 @@ function borderRight(props) {
   );
 }
 function borderBottom(props) {
-  var _a, _b;
-  const { card, media } = theme.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 } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderBottom,
@@ -685,8 +679,7 @@ function borderBottom(props) {
   );
 }
 function borderLeft(props) {
-  var _a, _b;
-  const { card, media } = theme.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 } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderLeft,
@@ -1914,7 +1907,7 @@ function _cardColorStyle(base, color, checkered = !1) {
 function buttonBaseStyles(props) {
   const { $width } = props, { style } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
-    ${style == null ? void 0 : style.button};
+    ${style?.button};
 
     -webkit-font-smoothing: inherit;
     appearance: none;
@@ -1957,7 +1950,6 @@ function combineBoxShadow(...boxShadows) {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a;
   const { $mode } = props, { button, color: baseColor, style } = theme.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)"
@@ -1995,7 +1987,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 = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
@@ -2131,7 +2123,6 @@ function cardBaseStyle(props) {
   `;
 }
 function cardColorStyle(props) {
-  var _a;
   const { $checkered, $focusRing, $muted } = props, { card, color, style } = theme.getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
   return styledComponents.css`
     color-scheme: ${color._dark ? "dark" : "light"};
@@ -2217,7 +2208,7 @@ function cardColorStyle(props) {
       }
     }
 
-    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+    ${style?.card?.root}
   `;
 }
 const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
@@ -2710,8 +2701,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 ? {
@@ -2893,10 +2883,7 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
-  const theme2 = useTheme_v2(), { children, media = theme2.media, ...restProps } = props, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => {
-    var _a;
-    return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  const theme2 = useTheme_v2(), { children, media = theme2.media, ...restProps } = props, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const setRef = react.useCallback((el) => {
     ref.current = el, setElement(el);
@@ -2914,11 +2901,8 @@ const ElementQuery = react.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 react.Component {
-  constructor() {
-    super(...arguments), __publicField(this, "state", { error: null });
-  }
+  state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };
   }
@@ -2928,7 +2912,7 @@ class ErrorBoundary extends react.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__ */ jsxRuntime.jsx(Code, { children: message });
     }
     return this.props.children;
@@ -3033,24 +3017,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 = react.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] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.useCallback(
+  const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = react.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] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.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]
   );
-  react.useEffect(() => parentRegisterChild == null ? void 0 : parentRegisterChild(level), [level, parentRegisterChild]);
+  react.useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
   const value = react.useMemo(
     () => ({
       version: 0,
@@ -3068,11 +3050,11 @@ LayerProvider.displayName = "LayerProvider";
 const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
   const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
   react.useImperativeHandle(forwardedRef, () => ref.current), react.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 = react.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);
     },
@@ -3102,8 +3084,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 ? reactDom.createPortal(children, portalElement) : null;
 }
 Portal.displayName = "Portal";
@@ -3243,7 +3224,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
     );
 }
@@ -3286,7 +3267,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     } = props, { zIndex } = useLayer(), margins = react.useMemo(
       () => marginsProp || DEFAULT_POPOVER_MARGINS,
       [marginsProp]
-    ), x = (xProp != null ? xProp : 0) + margins[3], y = (yProp != null ? yProp : 0) + margins[0], rootStyle2 = react.useMemo(
+    ), x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], rootStyle2 = react.useMemo(
       () => ({
         left: x,
         originX,
@@ -3342,7 +3323,6 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const Popover = react.memo(
   react.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,
@@ -3352,9 +3332,9 @@ const Popover = react.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,
@@ -3364,7 +3344,7 @@ const Popover = react.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,
@@ -3373,12 +3353,12 @@ const Popover = react.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 = react.useRef(null), arrowRef = react.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 = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
     react.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
@@ -3413,7 +3393,7 @@ const Popover = react.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,
@@ -3454,7 +3434,7 @@ const Popover = react.memo(
       middleware,
       placement: placementProp,
       whileElementsMounted: reactDom$1.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 = react.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 = react.useCallback((arrowEl) => {
       arrowRef.current = arrowEl;
     }, []), setFloating = react.useCallback(
       (node) => {
@@ -3464,7 +3444,7 @@ const Popover = react.memo(
     ), setReference = react.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]
@@ -3524,6 +3504,10 @@ const Popover = react.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 styledComponents.css`
     position: relative;
@@ -4159,8 +4143,7 @@ const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(C
     event.preventDefault(), event.stopPropagation();
   }, []), handleClearClick = react.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 = react.useMemo(
@@ -4388,7 +4371,7 @@ function useTooltipDelayGroup() {
   return react.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 = react.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 = react.useMemo(
     () => ({
       isGroupActive,
       setIsGroupActive,
@@ -4406,15 +4389,14 @@ TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
 `, Tooltip = react.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,
@@ -4426,7 +4408,7 @@ const Root$a = styledComponents.styled(Layer)`
     ...restProps
   } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
   react.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, middleware = react.useMemo(() => {
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
     const ret = [];
     return ret.push(
       reactDom$1.flip({
@@ -4446,7 +4428,7 @@ const Root$a = styledComponents.styled(Layer)`
     middleware,
     placement: placementProp,
     whileElementsMounted: reactDom$1.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 = react.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 = react.useCallback(
+  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.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 = react.useCallback(
     (open, immediate) => {
       if (isInsideGroup)
         if (open) {
@@ -4462,40 +4444,34 @@ const Root$a = styledComponents.styled(Layer)`
     [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]
   ), handleBlur = react.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 = react.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 = react.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 = react.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 = react.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 = react.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 }), react.useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
@@ -4512,7 +4488,7 @@ const Root$a = styledComponents.styled(Layer)`
   }, [handleIsOpenChange, showTooltip]), react.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]);
@@ -4527,7 +4503,7 @@ const Root$a = styledComponents.styled(Layer)`
     },
     [refs]
   ), childRef = react.useRef(null);
-  react.useImperativeHandle(childProp == null ? void 0 : childProp.ref, () => childRef.current);
+  react.useImperativeHandle(childProp?.ref, () => childRef.current);
   const child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
     onBlur: handleBlur,
     onFocus: handleFocus,
@@ -4750,17 +4726,15 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     },
     [onBlur, onQueryChange, relatedElements]
   ), handleRootFocus = react.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 = react.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 = react.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];
@@ -4774,12 +4748,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;
       }
     },
@@ -4805,8 +4779,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   }, []), handlePopoverMouseLeave = react.useCallback(() => {
     popoverMouseWithinRef.current = !1;
   }, []), handleClearButtonClick = react.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 = react.useCallback(() => {
     dispatch({ type: "input/focus" });
   }, []);
@@ -4845,10 +4818,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     [openButton]
   ), handleOpenClick = react.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 = react.useMemo(
@@ -4911,8 +4881,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     }
   ), handleListBoxKeyDown = react.useCallback(
     (event) => {
-      var _a;
-      event.key === "Tab" && listFocused && ((_a = inputElementRef.current) == null || _a.focus());
+      event.key === "Tab" && listFocused && inputElementRef.current?.focus();
     },
     [listFocused]
   ), content = react.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
@@ -5167,7 +5136,6 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
   position: relative;
   z-index: 3;
 `, DialogCard = react.forwardRef(function(props, forwardedRef) {
-  var _a;
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -5183,7 +5151,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     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 = react.useRef(null), contentRef = react.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 = react.useRef(null), contentRef = react.useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
   return react.useImperativeHandle(forwardedRef, () => ref.current), react.useImperativeHandle(
     forwardedContentRef,
     () => contentRef.current
@@ -5225,7 +5193,6 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
 });
 DialogCard.displayName = "ForwardRef(DialogCard)";
 const Dialog = react.forwardRef(function(props, ref) {
-  var _a;
   const dialog = useDialog(), { layer } = useTheme_v2(), {
     __unstable_autoFocus: autoFocus = !0,
     __unstable_hideCloseButton: hideCloseButton = !1,
@@ -5248,9 +5215,9 @@ const Dialog = react.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 = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.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 = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback(
     (event) => {
-      onFocus == null || onFocus(event);
+      onFocus?.(event);
       const target = event.target, cardElement = cardRef.current;
       if (cardElement && target === preDivRef.current) {
         focusLastDescendant(cardElement);
@@ -5461,8 +5428,7 @@ function useMenuController(props) {
     },
     [setActiveIndex]
   ), handleItemMouseLeave = react.useCallback(() => {
-    var _a;
-    setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
+    setActiveIndex(-2), rootElementRef.current?.focus();
   }, [rootElementRef, setActiveIndex]);
   return react.useEffect(() => {
     if (!mounted) return;
@@ -5484,8 +5450,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]), {
@@ -5673,20 +5638,17 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
       shouldFocus
     ]
   ), menu = menuProp && react.cloneElement(menuProp, menuProps), ref = react.useRef(null), button = react.useMemo(
-    () => {
-      var _a;
-      return buttonProp && react.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 && react.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]
   );
   react.useImperativeHandle(
@@ -5751,7 +5713,6 @@ function selectableBaseStyle() {
   `;
 }
 function selectableColorStyle(props) {
-  var _a;
   const { $tone } = props, { color, style } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
   return styledComponents.css`
     ${_cardColorStyle(color, tone.enabled)}
@@ -5820,7 +5781,7 @@ function selectableColorStyle(props) {
       }
     }
 
-    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+    ${style?.card?.root}
   `;
 }
 const Selectable = styledComponents.styled(Box)(
@@ -5867,17 +5828,17 @@ function MenuGroup(props) {
   ), handleMenuKeyDown = react.useCallback(
     (event) => {
       event.key === "ArrowLeft" && (event.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
-        rootElement == null || rootElement.focus();
+        rootElement?.focus();
       }));
     },
     [rootElement]
   ), handleClick = react.useCallback(
     (event) => {
-      onClick == null || onClick(event), setShouldFocus("first"), setOpen(!0);
+      onClick?.(event), setShouldFocus("first"), setOpen(!0);
     },
     [onClick]
   ), handleChildItemClick = react.useCallback(() => {
-    setOpen(!1), onItemClick == null || onItemClick();
+    setOpen(!1), onItemClick?.();
   }, [onItemClick]), handleMenuMouseEnter = react.useCallback(() => setWithinMenu(!0), []);
   react.useEffect(() => mount(rootElement), [mount, rootElement]), react.useEffect(() => {
     active || setOpen(!1);
@@ -6380,8 +6341,7 @@ function ToastProvider(props) {
     [prefersReducedMotion]
   ), value = react.useMemo(() => ({ version: 0, push: (params) => {
     const setState = (state2) => react.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) {
@@ -6443,7 +6403,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");
@@ -6456,7 +6415,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;
       }
@@ -6467,7 +6426,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])
@@ -6482,7 +6440,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;
       }
@@ -6540,7 +6498,6 @@ const TreeContext = createGlobalScopedContext(
       [focusedElement, itemElements, path, registerItem, setExpanded, space, state]
     ), handleKeyDown = react.useCallback(
       (event) => {
-        var _a;
         if (focusedElementRef.current) {
           if (event.key === "ArrowDown") {
             event.preventDefault();
@@ -6585,7 +6542,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;
             });
@@ -6596,7 +6553,7 @@ const TreeContext = createGlobalScopedContext(
       [itemElements]
     ), handleFocus = react.useCallback(
       (event) => {
-        setFocusedElement(event.target), onFocus == null || onFocus(event);
+        setFocusedElement(event.target), onFocus?.(event);
       },
       [onFocus]
     );
@@ -6751,7 +6708,7 @@ const TreeGroup = react.memo(function(props) {
     text,
     weight,
     ...restProps
-  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.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 = react.useMemo(
+  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.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 = react.useMemo(
     () => ({ ...tree, level: tree.level + 1, path: itemPath }),
     [itemPath, tree]
   ), handleClick = react.useCallback(
@@ -6763,10 +6720,7 @@ const TreeGroup = react.memo(function(props) {
     [expanded, itemKey, onClick, setExpanded, setFocusedElement]
   ), handleKeyDown = react.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]
   );