@sanity/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/sanity-ui.esm.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88, _templateObject89, _templateObject90;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88, _templateObject89;
 
 const _excluded = ["color", "layer"],
       _excluded2 = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"],
@@ -21,8 +21,8 @@ const _excluded = ["color", "layer"],
       _excluded19 = ["children", "style"],
       _excluded20 = ["children", "zOffset"],
       _excluded21 = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"],
-      _excluded22 = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "availableHeight", "availableWidth", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "referenceWidth", "scheme", "shadow", "strategy", "tone", "width", "x", "y"],
-      _excluded23 = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "constrainSize", "content", "disabled", "fallbackPlacements", "matchReferenceWidth", "open", "overflow", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "scheme", "shadow", "tether", "tetherOffset", "tone", "width", "zOffset"],
+      _excluded22 = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "availableHeight", "availableWidth", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "referenceWidth", "scheme", "shadow", "strategy", "style", "tone", "width", "x", "y"],
+      _excluded23 = ["__unstable_margins", "arrow", "boundaryElement", "children", "constrainSize", "content", "disabled", "fallbackPlacements", "matchReferenceWidth", "open", "overflow", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "scheme", "shadow", "tone", "width", "zOffset"],
       _excluded24 = ["className", "disabled", "style", "customValidity", "readOnly"],
       _excluded25 = ["children", "customValidity", "disabled", "fontSize", "padding", "radius", "readOnly", "space"],
       _excluded26 = ["as", "space"],
@@ -71,7 +71,7 @@ import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css,
 import { white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
-import { flip, offset, shift, arrow, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 const EMPTY_ARRAY = [];
@@ -5113,13 +5113,14 @@ function cardColorStyle(props) {
   } = theme.sanity;
   const {
     base,
-    card
+    card,
+    dark
   } = theme.sanity.color;
   const border = {
     width: 0,
     color: "var(--card-border-color)"
   };
-  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
+  return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
     base,
     border,
     focusRing
@@ -6187,7 +6188,82 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
     })
   }));
 });
-const Root$j = styled.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+const DEFAULT_POPOVER_DISTANCE = 4;
+const DEFAULT_POPOVER_PADDING = 4;
+const DEFAULT_POPOVER_ARROW_WIDTH = 27;
+const DEFAULT_POPOVER_ARROW_HEIGHT = 11;
+const DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0];
+
+function size(scope) {
+  const {
+    padding = 0
+  } = scope;
+  return {
+    name: "@sanity/ui/size",
+
+    async fn(args) {
+      const {
+        placement,
+        rects
+      } = args;
+      const {
+        floating,
+        reference
+      } = rects;
+      const overflow = await detectOverflow(args, {
+        altBoundary: true,
+        boundary: scope.boundaryElement || void 0,
+        elementContext: "floating",
+        padding,
+        rootBoundary: "viewport"
+      });
+      let maxWidth = Infinity;
+      let maxHeight = Infinity;
+
+      if (placement.includes("top")) {
+        maxWidth = floating.width - (overflow.left + overflow.right);
+        maxHeight = floating.height - overflow.top - padding;
+      }
+
+      if (placement.includes("right")) {
+        maxWidth = floating.width - overflow.right - padding;
+        maxHeight = floating.height - (overflow.top + overflow.bottom);
+      }
+
+      if (placement.includes("bottom")) {
+        maxWidth = floating.width - (overflow.left + overflow.right);
+        maxHeight = floating.height - overflow.bottom - padding;
+      }
+
+      if (placement.includes("left")) {
+        maxWidth = floating.width - overflow.left - padding;
+        maxHeight = floating.height - (overflow.top + overflow.bottom);
+      }
+
+      if (scope.constrainSize) {
+        scope.setAvailableWidth(maxWidth);
+        scope.setAvailableHeight(maxHeight);
+      }
+
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(reference.width);
+      }
+
+      if (!floating.width || !floating.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+
+      return {};
+    }
+
+  };
+}
+
+const Root$j = styled.div(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
 const BorderPath = styled.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
 const ShapePath = styled.path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
@@ -6196,8 +6272,8 @@ const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
   }, props), {}, {
     ref,
     children: /* @__PURE__ */jsxs("svg", {
-      width: "27",
-      height: "11",
+      width: DEFAULT_POPOVER_ARROW_WIDTH,
+      height: DEFAULT_POPOVER_ARROW_HEIGHT,
       viewBox: "0 0 27 11",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -6215,7 +6291,13 @@ function popoverCardStyle(props) {
     $boundaryWidth
   } = props;
   return {
-    maxWidth: $boundaryWidth ? "".concat($boundaryWidth - 16, "px") : "calc(100% - 16px)"
+    "&:not([hidden])": {
+      display: "flex"
+    },
+    flexDirection: "column",
+    width: "max-content",
+    minWidth: "min-content",
+    maxWidth: typeof $boundaryWidth === "number" ? "".concat($boundaryWidth - DEFAULT_POPOVER_PADDING * 2, "px") : void 0
   };
 }
 
@@ -6239,8 +6321,9 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     scheme,
     shadow,
     strategy,
+    style,
     tone,
-    width,
+    width = "auto",
     x: xProp,
     y: yProp
   } = props,
@@ -6249,33 +6332,29 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     zIndex
   } = useLayer();
-  const margins = useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp]);
+  const margins = useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]);
   const referenceWidth = referenceWidthProp ? referenceWidthProp - margins[1] - margins[3] : void 0;
   const x = (xProp != null ? xProp : 0) + margins[3];
   const y = (yProp != null ? yProp : 0) + margins[0];
-  const maxWidth = availableWidth ? Math.min(availableWidth - 8, referenceWidth || Infinity) : void 0;
-  const rootStyle = useMemo(() => ({
+  const rootStyle = useMemo(() => _objectSpread({
     position: strategy,
     top: y,
     left: x,
     zIndex,
     width: referenceWidth,
-    maxWidth: referenceWidth ? void 0 : maxWidth
-  }), [referenceWidth, maxWidth, strategy, x, y, zIndex]);
-  const wrapperStyle = useMemo(() => ({
-    minHeight: 25,
-    maxHeight: availableHeight ? availableHeight - 8 : void 0
-  }), [availableHeight]);
+    maxWidth: availableWidth,
+    maxHeight: availableHeight
+  }, style), [availableHeight, availableWidth, referenceWidth, strategy, style, x, y, zIndex]);
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
   const arrowStyle = useMemo(() => {
-    const style = {
+    const style2 = {
       left: arrowX !== null ? arrowX : void 0,
       top: arrowY !== null ? arrowY : void 0,
       right: void 0,
       bottom: void 0
     };
-    if (staticSide) style[staticSide] = -27;
-    return style;
+    if (staticSide) style2[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH;
+    return style2;
   }, [arrowX, arrowY, staticSide]);
   return /* @__PURE__ */jsxs(Root$i, _objectSpread(_objectSpread({}, restProps), {}, {
     $boundaryWidth: boundaryWidth,
@@ -6287,13 +6366,13 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     shadow,
     style: rootStyle,
     tone,
-    $width: width,
-    children: [/* @__PURE__ */jsx(Box, {
+    children: [/* @__PURE__ */jsx(Container, {
       "data-ui": "Popover__wrapper",
+      flex: 1,
       overflow,
       padding,
       sizing: "border",
-      style: wrapperStyle,
+      width,
       children
     }), arrow && /* @__PURE__ */jsx(PopoverArrow, {
       ref: arrowRef,
@@ -6302,33 +6381,14 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   }));
 }));
 PopoverCard.displayName = "PopoverCard";
-
-function size(scope) {
-  return size$2({
-    apply(args) {
-      if (scope.constrainSize) {
-        scope.setAvailableWidth(args.availableWidth);
-        scope.setAvailableHeight(args.availableHeight);
-      }
-
-      if (scope.matchReferenceWidth) {
-        scope.setReferenceWidth(args.rects.reference.width);
-      }
-    },
-
-    boundary: scope.boundaryElement || void 0
-  });
-}
-
 const Popover = memo(forwardRef(function Popover2(props, ref) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
 
   const theme = useTheme();
   const boundaryElementContext = useBoundaryElement();
 
   const {
     __unstable_margins: margins,
-    allowedAutoPlacements,
     arrow: arrowProp = true,
     boundaryElement = boundaryElementContext.element,
     children: childProp,
@@ -6338,7 +6398,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     fallbackPlacements,
     matchReferenceWidth: matchReferenceWidthProp,
     open,
-    overflow = props.constrainSize ? "auto" : void 0,
+    overflow = props.constrainSize ? "auto" : "hidden",
     padding: paddingProp,
     placement: placementProp = "bottom",
     portal,
@@ -6347,10 +6407,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     referenceElement,
     scheme,
     shadow: shadowProp = 3,
-    tether,
-    tetherOffset,
     tone = "inherit",
-    width: widthProp = void 0,
+    width: widthProp = "auto",
     zOffset: zOffsetProp = (_a = theme.sanity.layer) == null ? void 0 : _a.popover.zOffset
   } = props,
         restProps = _objectWithoutProperties(props, _excluded23);
@@ -6374,38 +6432,47 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       ret.push(flip({
         boundary: boundaryElement || void 0,
         fallbackPlacements,
-        padding: 8,
+        padding: DEFAULT_POPOVER_PADDING,
         rootBoundary
       }));
     }
 
-    ret.push(size({
-      boundaryElement,
-      constrainSize,
-      matchReferenceWidth: matchReferenceWidthProp,
-      setAvailableHeight,
-      setAvailableWidth,
-      setReferenceWidth
-    }));
+    if (constrainSize || matchReferenceWidthProp) {
+      ret.push(size({
+        boundaryElement,
+        constrainSize,
+        matchReferenceWidth: matchReferenceWidthProp,
+        padding: DEFAULT_POPOVER_PADDING,
+        setAvailableHeight,
+        setAvailableWidth,
+        setReferenceWidth
+      }));
+    }
+
     ret.push(offset({
-      mainAxis: arrowProp ? 4 : 0
+      mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0
     }));
 
     if (preventOverflow) {
       ret.push(shift({
         boundary: boundaryElement || void 0,
         rootBoundary,
-        padding: 8
+        padding: DEFAULT_POPOVER_PADDING
       }));
     }
 
     if (arrowProp) {
       ret.push(arrow({
         element: arrowRef,
-        padding: 4
+        padding: DEFAULT_POPOVER_PADDING
       }));
     }
 
+    ret.push(hide({
+      boundary: boundaryElement || void 0,
+      padding: DEFAULT_POPOVER_PADDING,
+      strategy: "referenceHidden"
+    }));
     return ret;
   }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, matchReferenceWidthProp, preventOverflow]);
   const {
@@ -6421,8 +6488,9 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     placement: placementProp,
     whileElementsMounted: autoUpdate
   });
-  const arrowX = (_c = middlewareData.arrow) == null ? void 0 : _c.x;
-  const arrowY = (_d = middlewareData.arrow) == null ? void 0 : _d.y;
+  const referenceHidden = (_c = middlewareData.hide) == null ? void 0 : _c.referenceHidden;
+  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
+  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
@@ -6464,7 +6532,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       arrowY,
       availableWidth: constrainSize ? availableWidth : void 0,
       availableHeight: constrainSize ? availableHeight : void 0,
-      boundaryWidth: boundarySize == null ? void 0 : boundarySize.width,
+      boundaryWidth: preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0,
+      hidden: referenceHidden,
       overflow,
       padding,
       placement,
@@ -7208,9 +7277,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
 });
 const Root$9 = styled.div(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
 const ListBox = styled(Box)(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const ResultsPopover = styled(Popover)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  &[data-popper-reference-hidden='true'] {\n    display: none;\n  }\n"])));
-const rotate = keyframes(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled(SpinnerIcon)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+const rotate = keyframes(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const AnimatedSpinnerIcon = styled(SpinnerIcon)(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
 
 function AutocompleteOption(props) {
   const {
@@ -7742,7 +7810,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       return null;
     }
 
-    return /* @__PURE__ */jsx(ResultsPopover, _objectSpread({
+    return /* @__PURE__ */jsx(Popover, _objectSpread({
       __unstable_margins: AUTOCOMPLETE_POPOVER_MARGINS,
       arrow: false,
       constrainSize: true,
@@ -7769,8 +7837,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   });
 });
 const Autocomplete = InnerAutocomplete;
-const Root$8 = styled.ol(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
-const ExpandButton = styled(Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
+const Root$8 = styled.ol(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
+const ExpandButton = styled(Button)(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
 const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   const {
     children,
@@ -7889,12 +7957,12 @@ function useDialog() {
 }
 
 const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-const DialogContainer = styled(Container)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-const DialogCardRoot = styled(Card)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n"])));
-const DialogLayout = styled(Flex)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled(Card)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
-const DialogContent = styled(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled(Box)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
+const DialogContainer = styled(Container)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+const DialogCardRoot = styled(Card)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n"])));
+const DialogLayout = styled(Flex)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
+const DialogHeader = styled(Card)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
+const DialogContent = styled(Box)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
+const DialogFooter = styled(Box)(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
 const DialogCard = forwardRef(function DialogCard2(props, ref) {
   const {
     __unstable_autoFocus: autoFocus,
@@ -8106,8 +8174,8 @@ function DialogProvider(props) {
   });
 }
 
-const Root$6 = styled.kbd(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
-const Key = styled(KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
+const Root$6 = styled.kbd(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+const Key = styled(KBD)(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
   const {
     fontSize,
@@ -8378,7 +8446,7 @@ function useMenuController(props) {
   };
 }
 
-const Root$5 = styled(Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
+const Root$5 = styled(Box)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
 const Menu = forwardRef(function Menu2(props, ref) {
   const {
     children,
@@ -8612,10 +8680,10 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     children: button || /* @__PURE__ */jsx(Fragment, {})
   }));
 });
-const MenuDivider = styled.hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+const MenuDivider = styled.hr(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
 
 function selectableBaseStyle() {
-  return css(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return css(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 
 function selectableColorStyle(props) {
@@ -8631,7 +8699,7 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
+  return css(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
 }
 
 const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
@@ -8903,9 +8971,9 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     }))]
   }));
 });
-const keyframe = keyframes(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref23 => {
+const keyframe = keyframes(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
+const animation = css(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
+const skeletonStyle = css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref23 => {
   let {
     $visible
   } = _ref23;
@@ -8914,7 +8982,7 @@ const skeletonStyle = css(_templateObject81 || (_templateObject81 = _taggedTempl
   let {
     $animated
   } = _ref24;
-  return $animated ? animation : css(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
+  return $animated ? animation : css(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
 const Skeleton = forwardRef(function Skeleton2(props, ref) {
@@ -9142,8 +9210,8 @@ const ROLES = {
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled(Card)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
-const TextBox = styled(Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
+const Root$2 = styled(Card)(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
+const TextBox = styled(Flex)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
 
 function Toast(props) {
   const {
@@ -9201,8 +9269,8 @@ function Toast(props) {
 const key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || createContext(null);
 const ToastContext = globalScope[key$1];
-const Root$1 = styled(Layer)(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
-const ToastContainer = styled.div(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
+const Root$1 = styled(Layer)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
+const ToastContainer = styled.div(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
 let toastId = 0;
 
 function ToastProvider(props) {
@@ -9619,7 +9687,7 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
 Tree.displayName = "Tree";
 
 function treeItemRootStyle() {
-  return css(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
+  return css(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
 }
 
 function treeItemRootColorStyle(props) {
@@ -9633,7 +9701,7 @@ function treeItemRootColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n    /* <div role=\"none\"><a data-ui=\"TreeItem__box\" role=\"treeitem\" tabIndex=\"0\"></div> */\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    /* <div role=\"treeitem\" tabIndex=\"0\"><div data-ui=\"TreeItem__box\"></div> */\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
+  return css(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n    /* <div role=\"none\"><a data-ui=\"TreeItem__box\" role=\"treeitem\" tabIndex=\"0\"></div> */\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    /* <div role=\"treeitem\" tabIndex=\"0\"><div data-ui=\"TreeItem__box\"></div> */\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
 }
 
 function treeItemBoxStyle(props) {
@@ -9644,7 +9712,7 @@ function treeItemBoxStyle(props) {
   const {
     space
   } = theme.sanity;
-  return css(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
+  return css(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
 }
 
 function useTree() {
@@ -9680,7 +9748,7 @@ const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
 const TreeItemBox = styled(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle);
-const ToggleArrowText = styled(Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
+const ToggleArrowText = styled(Text)(_templateObject89 || (_templateObject89 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
 const TreeItem = memo(function TreeItem2(props) {
   const {
     children,