@sanity/ui 1.1.0 → 1.2.1

package/dist/index.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;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
@@ -5262,6 +5262,18 @@ class ErrorBoundary extends Component {
     return this.props.children;
   }
 }
+function getLayerContext(contextValue) {
+  if (!isRecord(contextValue) || contextValue.version !== 0) {
+    throw new Error("the context value is not compatible");
+  }
+  if (!contextValue) {
+    throw new Error("components using `useLayer()` should be wrapped in a <LayerProvider>.");
+  }
+  if (contextValue.version === 0) {
+    return contextValue;
+  }
+  throw new Error("could not get layer context");
+}
 const key$5 = Symbol.for("@sanity/ui/context/layer");
 globalScope[key$5] = globalScope[key$5] || createContext(null);
 const LayerContext = globalScope[key$5];
@@ -5270,57 +5282,215 @@ function useLayer() {
   if (!value) {
     throw new Error("useLayer(): missing context value");
   }
-  if (!isRecord(value) || value.version !== 0) {
-    throw new Error("useLayer(): the context value is not compatible");
+  try {
+    return getLayerContext(value);
+  } catch (err) {
+    if (err instanceof Error) {
+      throw new Error("useLayer(): ".concat(err.message));
+    } else {
+      throw new Error("useLayer(): ".concat(err));
+    }
   }
-  return value;
+}
+function _raf(fn) {
+  const frameId = requestAnimationFrame(fn);
+  return () => {
+    cancelAnimationFrame(frameId);
+  };
+}
+function _raf2(fn) {
+  let innerDispose = null;
+  const outerDispose = _raf(() => {
+    innerDispose = _raf(fn);
+  });
+  return () => {
+    if (innerDispose) innerDispose();
+    outerDispose();
+  };
+}
+function _isEnterToClickElement(element) {
+  return isHTMLAnchorElement(element) || isHTMLButtonElement(element);
+}
+function isHTMLElement(node) {
+  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
+}
+function isHTMLAnchorElement(element) {
+  return isHTMLElement(element) && element.nodeName === "A";
+}
+function isHTMLInputElement(element) {
+  return isHTMLElement(element) && element.nodeName === "INPUT";
+}
+function isHTMLButtonElement(element) {
+  return isHTMLElement(element) && element.nodeName === "BUTTON";
+}
+function isHTMLSelectElement(element) {
+  return isHTMLElement(element) && element.nodeName === "SELECT";
+}
+function isHTMLTextAreaElement(element) {
+  return isHTMLElement(element) && element.nodeName === "TEXTAREA";
+}
+function containsOrEqualsElement(element, node) {
+  return element.contains(node) || element === node;
+}
+function _hasFocus(element) {
+  return Boolean(document.activeElement) && element.contains(document.activeElement);
+}
+function isFocusable(element) {
+  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null) {
+    return true;
+  }
+  if (isHTMLAnchorElement(element)) {
+    return Boolean(element.href) && element.rel !== "ignore";
+  }
+  if (isHTMLInputElement(element)) {
+    return element.type !== "hidden" && element.type !== "file" && !element.disabled;
+  }
+  if (isHTMLButtonElement(element) || isHTMLSelectElement(element) || isHTMLTextAreaElement(element)) {
+    return !element.disabled;
+  }
+  return false;
+}
+function attemptFocus(element) {
+  if (!isFocusable(element)) {
+    return false;
+  }
+  try {
+    element.focus();
+  } catch (_) {}
+  return document.activeElement === element;
+}
+function focusFirstDescendant(element) {
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
+    if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child))) {
+      return true;
+    }
+  }
+  return false;
+}
+function focusLastDescendant(element) {
+  for (let i = element.childNodes.length - 1; i >= 0; i--) {
+    const child = element.childNodes[i];
+    if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child))) {
+      return true;
+    }
+  }
+  return false;
+}
+function _isScrollable(el) {
+  if (!(el instanceof Element)) return false;
+  const style = window.getComputedStyle(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;
-  const parent = useContext(LayerContext);
+  const parentContextValue = useContext(LayerContext);
+  const parent = parentContextValue && getLayerContext(parentContextValue);
+  const parentRegisterChild = parent == null ? void 0 : parent.registerChild;
+  const parentLevel = (_a = parent == null ? void 0 : parent.level) != null ? _a : 0;
+  const level = parentLevel + 1;
   const zOffset = useArrayProp(zOffsetProp);
   const maxMediaIndex = zOffset.length - 1;
   const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex);
   const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
+  const [, setChildLayers] = useState({});
   const [size, setSize] = useState(0);
-  const registerChild = useCallback(() => {
-    setSize(v => v + 1);
-    return () => setSize(v => v - 1);
-  }, []);
-  const parentRegisterChild = parent == null ? void 0 : parent.registerChild;
-  useEffect(() => {
-    if (!parentRegisterChild) return;
-    return parentRegisterChild();
+  const isTopLayer = size === 0;
+  const registerChild = useCallback(childLevel => {
+    const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
+    if (childLevel !== void 0) {
+      setChildLayers(state => {
+        var _a2;
+        const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0;
+        const nextState = {
+          ...state,
+          [childLevel]: prevLen + 1
+        };
+        setSize(Object.keys(nextState).length);
+        return nextState;
+      });
+    } else {
+      setSize(v => v + 1);
+    }
+    return () => {
+      if (childLevel !== void 0) {
+        setChildLayers(state => {
+          const nextState = {
+            ...state
+          };
+          if (nextState[childLevel] === 1) {
+            delete nextState[childLevel];
+            setSize(Object.keys(nextState).length);
+          } else {
+            nextState[childLevel] -= 1;
+          }
+          return nextState;
+        });
+      } else {
+        setSize(v => v - 1);
+      }
+      parentDispose == null ? void 0 : parentDispose();
+    };
   }, [parentRegisterChild]);
+  useEffect(() => parentRegisterChild == null ? void 0 : parentRegisterChild(level), [level, parentRegisterChild]);
   const value = useMemo(() => ({
     version: 0,
-    isTopLayer: size === 0,
+    isTopLayer,
+    level,
     registerChild,
     size,
     zIndex
-  }), [size, registerChild, zIndex]);
+  }), [isTopLayer, level, registerChild, size, zIndex]);
   return /* @__PURE__ */jsx(LayerContext.Provider, {
     value,
     children
   });
 }
-const Root$m = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const Root$m = styled.div({
+  position: "relative"
+});
 const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
   const {
     children,
+    onActivate,
+    onFocus,
     style = EMPTY_RECORD,
     ...restProps
   } = props;
   const {
-    zIndex
+    zIndex,
+    isTopLayer
   } = useLayer();
+  const lastFocusedRef = useRef(null);
+  const forwardedRef = useForwardedRef(ref);
+  const isTopLayerRef = useRef(isTopLayer);
+  useEffect(() => {
+    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer;
+    if (becameTopLayer) {
+      onActivate == null ? void 0 : onActivate({
+        activeElement: lastFocusedRef.current
+      });
+    }
+    isTopLayerRef.current = isTopLayer;
+  }, [isTopLayer, onActivate]);
+  const handleFocus = useCallback(event => {
+    onFocus == null ? void 0 : onFocus(event);
+    const rootElement = forwardedRef.current;
+    const target = document.activeElement;
+    if (!isTopLayer || !rootElement || !target) return;
+    if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
+      lastFocusedRef.current = target;
+    }
+  }, [forwardedRef, isTopLayer, onFocus]);
   return /* @__PURE__ */jsx(Root$m, {
     ...restProps,
     "data-ui": "Layer",
-    ref,
+    onFocus: handleFocus,
+    ref: forwardedRef,
     style: {
       ...style,
       zIndex
@@ -5427,7 +5597,7 @@ function PortalProvider(props) {
     children
   });
 }
-const Root$l = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
+const Root$l = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
 const SrOnly = forwardRef(function SrOnly2(props, ref) {
   const {
     as,
@@ -5441,95 +5611,8 @@ const SrOnly = forwardRef(function SrOnly2(props, ref) {
     children
   });
 });
-function _raf(fn) {
-  const frameId = requestAnimationFrame(fn);
-  return () => {
-    cancelAnimationFrame(frameId);
-  };
-}
-function _raf2(fn) {
-  let innerDispose = null;
-  const outerDispose = _raf(() => {
-    innerDispose = _raf(fn);
-  });
-  return () => {
-    if (innerDispose) innerDispose();
-    outerDispose();
-  };
-}
-function _isEnterToClickElement(element) {
-  return isHTMLAnchorElement(element) || isHTMLButtonElement(element);
-}
-function isHTMLElement(node) {
-  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
-}
-function isHTMLAnchorElement(element) {
-  return isHTMLElement(element) && element.nodeName === "A";
-}
-function isHTMLInputElement(element) {
-  return isHTMLElement(element) && element.nodeName === "INPUT";
-}
-function isHTMLButtonElement(element) {
-  return isHTMLElement(element) && element.nodeName === "BUTTON";
-}
-function isHTMLSelectElement(element) {
-  return isHTMLElement(element) && element.nodeName === "SELECT";
-}
-function isHTMLTextAreaElement(element) {
-  return isHTMLElement(element) && element.nodeName === "TEXTAREA";
-}
-function _hasFocus(element) {
-  return Boolean(document.activeElement) && element.contains(document.activeElement);
-}
-function isFocusable(element) {
-  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null) {
-    return true;
-  }
-  if (isHTMLAnchorElement(element)) {
-    return Boolean(element.href) && element.rel !== "ignore";
-  }
-  if (isHTMLInputElement(element)) {
-    return element.type !== "hidden" && element.type !== "file" && !element.disabled;
-  }
-  if (isHTMLButtonElement(element) || isHTMLSelectElement(element) || isHTMLTextAreaElement(element)) {
-    return !element.disabled;
-  }
-  return false;
-}
-function attemptFocus(element) {
-  if (!isFocusable(element)) {
-    return false;
-  }
-  try {
-    element.focus();
-  } catch (_) {}
-  return document.activeElement === element;
-}
-function focusFirstDescendant(element) {
-  for (let i = 0; i < element.childNodes.length; i++) {
-    const child = element.childNodes[i];
-    if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child))) {
-      return true;
-    }
-  }
-  return false;
-}
-function focusLastDescendant(element) {
-  for (let i = element.childNodes.length - 1; i >= 0; i--) {
-    const child = element.childNodes[i];
-    if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child))) {
-      return true;
-    }
-  }
-  return false;
-}
-function _isScrollable(el) {
-  if (!(el instanceof Element)) return false;
-  const style = window.getComputedStyle(el);
-  return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
-}
-const Root$k = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const ItemWrapper = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+const Root$k = styled.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const ItemWrapper = styled.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const {
     as = "div",
@@ -5718,9 +5801,9 @@ function size(options) {
     }
   };
 }
-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 Root$j = styled.div(_templateObject32 || (_templateObject32 = _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(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const ShapePath = styled.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
   return /* @__PURE__ */jsx(Root$j, {
     "data-ui": "Popover__arrow",
@@ -5755,7 +5838,7 @@ function popoverCardStyle(props) {
   };
 }
 const Root$i = memo(styled(Card)(popoverCardStyle));
-const PopoverContainer = memo(styled(Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  max-height: inherit;\n  max-width: inherit;\n"]))));
+const PopoverContainer = memo(styled(Container)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  max-height: inherit;\n  max-width: inherit;\n"]))));
 const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -6007,7 +6090,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
 }));
 Popover.displayName = "Popover";
 function radioBaseStyle() {
-  return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
+  return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
 }
 function inputElementStyle(props) {
   const {
@@ -6019,7 +6102,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
+  return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
@@ -6061,14 +6144,14 @@ const Radio = forwardRef(function Radio2(props, forwardedRef) {
   });
 });
 function rootStyle() {
-  return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
+  return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
 }
 function inputColorStyle(props) {
   const {
@@ -6079,7 +6162,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6123,7 +6206,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
+  return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
 }
 const selectStyle = {
   root: rootStyle,
@@ -6211,10 +6294,10 @@ const Stack = forwardRef(function Stack2(props, ref) {
   });
 });
 function switchBaseStyles() {
-  return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function switchInputStyles() {
-  return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
+  return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
 }
 function switchRepresentationStyles(props) {
   const {
@@ -6225,7 +6308,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing
   }), color.positive.enabled.bg, color.positive.enabled.fg, color.default.hovered.bg, color.default.hovered.fg, color.positive.hovered.bg, color.positive.hovered.fg, color.default.disabled.bg, color.default.disabled.fg);
 }
@@ -6236,7 +6319,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
+  return css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
 }
 function switchThumbStyles(props) {
   const {
@@ -6253,7 +6336,7 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 const Root$e = styled.span(switchBaseStyles);
 const Input$2 = styled.input(switchInputStyles);
@@ -6298,7 +6381,7 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
   });
 });
 const Root$d = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot$1 = styled.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle);
 const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
@@ -6348,18 +6431,18 @@ const CLEAR_BUTTON_BOX_STYLE = {
 const Root$c = styled(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled.span(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot = styled.span(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Prefix = styled(Card).attrs({
   forwardedAs: "span"
-})(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
 const Suffix = styled(Card).attrs({
   forwardedAs: "span"
-})(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
 const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled(Box)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled(Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const LeftBox = styled(Box)(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
+const RightBox = styled(Box)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const RightCard = styled(Card)(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6504,9 +6587,9 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
-const Root$b = styled.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.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 Border = styled.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled.path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+const Root$b = styled.div(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.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 Border = styled.path(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const Shape = styled.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
   const {
     ...restProps
@@ -6527,7 +6610,7 @@ const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
     })
   });
 });
-const Root$a = styled(Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+const Root$a = styled(Layer)(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
   var _a, _b, _c;
   const boundaryElementContext = useBoundaryElement();
@@ -6689,10 +6772,10 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     })]
   });
 });
-const Root$9 = styled.div(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
-const ListBox = styled(Box)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\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 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 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 {
     children,
@@ -7216,8 +7299,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,
@@ -7327,14 +7410,19 @@ const DialogContext = globalScope[key$3];
 function useDialog() {
   return useContext(DialogContext);
 }
+function isTargetWithinScope(boundaryElement, portalElement, target) {
+  if (!boundaryElement || !portalElement) return true;
+  return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
+}
 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) {
+  var _a;
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -7345,11 +7433,15 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
     id,
     onClickOutside,
     onClose,
+    portal: portalProp,
     radius: radiusProp,
     scheme,
     shadow: shadowProp,
     width: widthProp
   } = props;
+  const portal = usePortal();
+  const portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element;
+  const boundaryElement = useBoundaryElement().element;
   const radius = useArrayProp(radiusProp);
   const shadow = useArrayProp(shadowProp);
   const width = useArrayProp(widthProp);
@@ -7371,16 +7463,24 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   }, [autoFocus, forwardedRef]);
   useGlobalKeyDown(useCallback(event => {
     if (!isTopLayer || !onClose) return;
+    const target = document.activeElement;
+    if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+      return;
+    }
     if (event.key === "Escape") {
       event.preventDefault();
       event.stopPropagation();
       onClose();
     }
-  }, [isTopLayer, onClose]));
-  useClickOutside(useCallback(() => {
+  }, [boundaryElement, isTopLayer, onClose, portalElement]));
+  useClickOutside(useCallback(event => {
     if (!isTopLayer || !onClickOutside) return;
+    const target = event.target;
+    if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+      return;
+    }
     onClickOutside();
-  }, [isTopLayer, onClickOutside]), [rootElement]);
+  }, [boundaryElement, isTopLayer, onClickOutside, portalElement]), [rootElement]);
   const setRef = useCallback(el => {
     setRootElement(el);
     forwardedRef.current = el;
@@ -7434,7 +7534,7 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   });
 });
 const Dialog = forwardRef(function Dialog2(props, ref) {
-  var _a;
+  var _a, _b;
   const dialog = useDialog();
   const theme = useTheme();
   const {
@@ -7447,16 +7547,21 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
     footer,
     header,
     id,
+    onActivate,
     onClickOutside,
     onClose,
+    onFocus,
     padding: paddingProp = 4,
-    portal,
+    portal: portalProp,
     position: positionProp = dialog.position || "fixed",
     scheme,
     width: widthProp = 0,
     zOffset: zOffsetProp = dialog.zOffset || ((_a = theme.sanity.layer) == null ? void 0 : _a.dialog.zOffset),
     ...restProps
   } = props;
+  const portal = usePortal();
+  const portalElement = portalProp ? ((_b = portal.elements) == null ? void 0 : _b[portalProp]) || null : portal.element;
+  const boundaryElement = useBoundaryElement().element;
   const cardRadius = useArrayProp(cardRadiusProp);
   const padding = useArrayProp(paddingProp);
   const position = useArrayProp(positionProp);
@@ -7465,24 +7570,44 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
   const preDivRef = useRef(null);
   const postDivRef = useRef(null);
   const cardRef = useRef(null);
+  const focusedElementRef = useRef(null);
   const handleFocus = useCallback(event => {
+    onFocus == null ? void 0 : onFocus(event);
     const target = event.target;
     const cardElement = cardRef.current;
-    if (!cardElement) {
-      return;
-    }
-    if (target === preDivRef.current) {
+    if (cardElement && target === preDivRef.current) {
       focusLastDescendant(cardElement);
       return;
     }
-    if (target === postDivRef.current) {
+    if (cardElement && target === postDivRef.current) {
       focusFirstDescendant(cardElement);
       return;
     }
-  }, []);
+    if (isHTMLElement(event.target)) {
+      focusedElementRef.current = event.target;
+    }
+  }, [onFocus]);
   const labelId = "".concat(id, "_label");
+  const rootClickTimeoutRef = useRef();
+  const handleRootClick = useCallback(() => {
+    if (rootClickTimeoutRef.current) {
+      clearTimeout(rootClickTimeoutRef.current);
+    }
+    rootClickTimeoutRef.current = setTimeout(() => {
+      const activeElement = document.activeElement;
+      if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
+        const target = focusedElementRef.current;
+        if (!target || !document.body.contains(target)) {
+          const cardElement = cardRef.current;
+          if (cardElement) focusFirstDescendant(cardElement);
+          return;
+        }
+        target.focus();
+      }
+    }, 0);
+  }, [boundaryElement, portalElement]);
   return /* @__PURE__ */jsx(Portal, {
-    __unstable_name: portal,
+    __unstable_name: portalProp,
     children: /* @__PURE__ */jsxs(Root$7, {
       ...restProps,
       $padding: padding,
@@ -7491,6 +7616,8 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
       "aria-modal": true,
       "data-ui": "Dialog",
       id,
+      onActivate,
+      onClick: handleRootClick,
       onFocus: handleFocus,
       ref,
       role: "dialog",
@@ -7507,6 +7634,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
         id,
         onClickOutside,
         onClose,
+        portal: portalProp,
         radius: cardRadius,
         ref: cardRef,
         scheme,
@@ -7536,8 +7664,8 @@ function DialogProvider(props) {
     children
   });
 }
-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,
@@ -7758,7 +7886,7 @@ function useMenuController(props) {
     setRootElement
   };
 }
-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,
@@ -7985,9 +8113,9 @@ 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) {
   var _a, _b;
@@ -8001,7 +8129,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);
 function useMenu() {
@@ -8263,9 +8391,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"])), _ref24 => {
+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"])), _ref24 => {
   let {
     $visible
   } = _ref24;
@@ -8274,7 +8402,7 @@ const skeletonStyle = css(_templateObject81 || (_templateObject81 = _taggedTempl
   let {
     $animated
   } = _ref25;
-  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) {
@@ -8491,8 +8619,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 {
     closable,
@@ -8552,8 +8680,8 @@ function useMounted() {
 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) {
   const {
@@ -8914,7 +9042,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) {
   const {
@@ -8927,7 +9055,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) {
   const {
@@ -8937,7 +9065,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() {
   const tree = useContext(TreeContext);
@@ -8968,7 +9096,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,
@@ -9115,5 +9243,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTree };
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTree };
 //# sourceMappingURL=index.esm.js.map