@sanity/ui 2.0.0-beta.4 → 2.0.0-beta.6

package/dist/index.esm.js

@@ -1,13 +1,12 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from '@sanity/ui/theme';
 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';
-import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { AnimatePresence, motion } from 'framer-motion';
 const createColorTheme = createColorTheme$1;
 const hexToRgb = hexToRgb$1;
 const hslToRgb = hslToRgb$1;
@@ -18,8 +17,370 @@ const rgbToHsl = rgbToHsl$1;
 const rgba = rgba$1;
 const screen = screen$1;
 const studioTheme = buildTheme();
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+var reactIs = {
+  exports: {}
+};
+var reactIs_development = {};
+
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+  if (hasRequiredReactIs_development) return reactIs_development;
+  hasRequiredReactIs_development = 1;
+  if (process.env.NODE_ENV !== "production") {
+    (function () {
+      // ATTENTION
+      // When adding new symbols to this file,
+      // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+      // The Symbol used to tag the ReactElement-like types.
+      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+      var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+      var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+      var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+      var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+      var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+      var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+      var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+      var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+      var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+      var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+      var REACT_MEMO_TYPE = Symbol.for('react.memo');
+      var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+      var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+
+      // -----------------------------------------------------------------------------
+
+      var enableScopeAPI = false; // Experimental Create Event Handle API.
+      var enableCacheElement = false;
+      var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+      var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+      // stuff. Intended to enable React core members to more easily debug scheduling
+      // issues in DEV builds.
+
+      var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+      var REACT_MODULE_REFERENCE;
+      {
+        REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+      }
+      function isValidElementType(type) {
+        if (typeof type === 'string' || typeof type === 'function') {
+          return true;
+        } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+        if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
+          return true;
+        }
+        if (typeof type === 'object' && type !== null) {
+          if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
+          // This needs to include all possible module reference object
+          // types supported by any Flight configuration anywhere since
+          // we don't know which Flight build this will end up being used
+          // with.
+          type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+            return true;
+          }
+        }
+        return false;
+      }
+      function typeOf(object) {
+        if (typeof object === 'object' && object !== null) {
+          var $$typeof = object.$$typeof;
+          switch ($$typeof) {
+            case REACT_ELEMENT_TYPE:
+              var type = object.type;
+              switch (type) {
+                case REACT_FRAGMENT_TYPE:
+                case REACT_PROFILER_TYPE:
+                case REACT_STRICT_MODE_TYPE:
+                case REACT_SUSPENSE_TYPE:
+                case REACT_SUSPENSE_LIST_TYPE:
+                  return type;
+                default:
+                  var $$typeofType = type && type.$$typeof;
+                  switch ($$typeofType) {
+                    case REACT_SERVER_CONTEXT_TYPE:
+                    case REACT_CONTEXT_TYPE:
+                    case REACT_FORWARD_REF_TYPE:
+                    case REACT_LAZY_TYPE:
+                    case REACT_MEMO_TYPE:
+                    case REACT_PROVIDER_TYPE:
+                      return $$typeofType;
+                    default:
+                      return $$typeof;
+                  }
+              }
+            case REACT_PORTAL_TYPE:
+              return $$typeof;
+          }
+        }
+        return undefined;
+      }
+      var ContextConsumer = REACT_CONTEXT_TYPE;
+      var ContextProvider = REACT_PROVIDER_TYPE;
+      var Element = REACT_ELEMENT_TYPE;
+      var ForwardRef = REACT_FORWARD_REF_TYPE;
+      var Fragment = REACT_FRAGMENT_TYPE;
+      var Lazy = REACT_LAZY_TYPE;
+      var Memo = REACT_MEMO_TYPE;
+      var Portal = REACT_PORTAL_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
+      var StrictMode = REACT_STRICT_MODE_TYPE;
+      var Suspense = REACT_SUSPENSE_TYPE;
+      var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false;
+      var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
+
+      function isAsyncMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+          }
+        }
+        return false;
+      }
+      function isConcurrentMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+            hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
+
+            console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+          }
+        }
+        return false;
+      }
+      function isContextConsumer(object) {
+        return typeOf(object) === REACT_CONTEXT_TYPE;
+      }
+      function isContextProvider(object) {
+        return typeOf(object) === REACT_PROVIDER_TYPE;
+      }
+      function isElement(object) {
+        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+      }
+      function isForwardRef(object) {
+        return typeOf(object) === REACT_FORWARD_REF_TYPE;
+      }
+      function isFragment(object) {
+        return typeOf(object) === REACT_FRAGMENT_TYPE;
+      }
+      function isLazy(object) {
+        return typeOf(object) === REACT_LAZY_TYPE;
+      }
+      function isMemo(object) {
+        return typeOf(object) === REACT_MEMO_TYPE;
+      }
+      function isPortal(object) {
+        return typeOf(object) === REACT_PORTAL_TYPE;
+      }
+      function isProfiler(object) {
+        return typeOf(object) === REACT_PROFILER_TYPE;
+      }
+      function isStrictMode(object) {
+        return typeOf(object) === REACT_STRICT_MODE_TYPE;
+      }
+      function isSuspense(object) {
+        return typeOf(object) === REACT_SUSPENSE_TYPE;
+      }
+      function isSuspenseList(object) {
+        return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+      }
+      reactIs_development.ContextConsumer = ContextConsumer;
+      reactIs_development.ContextProvider = ContextProvider;
+      reactIs_development.Element = Element;
+      reactIs_development.ForwardRef = ForwardRef;
+      reactIs_development.Fragment = Fragment;
+      reactIs_development.Lazy = Lazy;
+      reactIs_development.Memo = Memo;
+      reactIs_development.Portal = Portal;
+      reactIs_development.Profiler = Profiler;
+      reactIs_development.StrictMode = StrictMode;
+      reactIs_development.Suspense = Suspense;
+      reactIs_development.SuspenseList = SuspenseList;
+      reactIs_development.isAsyncMode = isAsyncMode;
+      reactIs_development.isConcurrentMode = isConcurrentMode;
+      reactIs_development.isContextConsumer = isContextConsumer;
+      reactIs_development.isContextProvider = isContextProvider;
+      reactIs_development.isElement = isElement;
+      reactIs_development.isForwardRef = isForwardRef;
+      reactIs_development.isFragment = isFragment;
+      reactIs_development.isLazy = isLazy;
+      reactIs_development.isMemo = isMemo;
+      reactIs_development.isPortal = isPortal;
+      reactIs_development.isProfiler = isProfiler;
+      reactIs_development.isStrictMode = isStrictMode;
+      reactIs_development.isSuspense = isSuspense;
+      reactIs_development.isSuspenseList = isSuspenseList;
+      reactIs_development.isValidElementType = isValidElementType;
+      reactIs_development.typeOf = typeOf;
+    })();
+  }
+  return reactIs_development;
+}
+var reactIs_production_min = {};
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production_min;
+function requireReactIs_production_min() {
+  if (hasRequiredReactIs_production_min) return reactIs_production_min;
+  hasRequiredReactIs_production_min = 1;
+  var b = Symbol.for("react.element"),
+    c = Symbol.for("react.portal"),
+    d = Symbol.for("react.fragment"),
+    e = Symbol.for("react.strict_mode"),
+    f = Symbol.for("react.profiler"),
+    g = Symbol.for("react.provider"),
+    h = Symbol.for("react.context"),
+    k = Symbol.for("react.server_context"),
+    l = Symbol.for("react.forward_ref"),
+    m = Symbol.for("react.suspense"),
+    n = Symbol.for("react.suspense_list"),
+    p = Symbol.for("react.memo"),
+    q = Symbol.for("react.lazy"),
+    t = Symbol.for("react.offscreen"),
+    u;
+  u = Symbol.for("react.module.reference");
+  function v(a) {
+    if ("object" === typeof a && null !== a) {
+      var r = a.$$typeof;
+      switch (r) {
+        case b:
+          switch (a = a.type, a) {
+            case d:
+            case f:
+            case e:
+            case m:
+            case n:
+              return a;
+            default:
+              switch (a = a && a.$$typeof, a) {
+                case k:
+                case h:
+                case l:
+                case q:
+                case p:
+                case g:
+                  return a;
+                default:
+                  return r;
+              }
+          }
+        case c:
+          return r;
+      }
+    }
+  }
+  reactIs_production_min.ContextConsumer = h;
+  reactIs_production_min.ContextProvider = g;
+  reactIs_production_min.Element = b;
+  reactIs_production_min.ForwardRef = l;
+  reactIs_production_min.Fragment = d;
+  reactIs_production_min.Lazy = q;
+  reactIs_production_min.Memo = p;
+  reactIs_production_min.Portal = c;
+  reactIs_production_min.Profiler = f;
+  reactIs_production_min.StrictMode = e;
+  reactIs_production_min.Suspense = m;
+  reactIs_production_min.SuspenseList = n;
+  reactIs_production_min.isAsyncMode = function () {
+    return !1;
+  };
+  reactIs_production_min.isConcurrentMode = function () {
+    return !1;
+  };
+  reactIs_production_min.isContextConsumer = function (a) {
+    return v(a) === h;
+  };
+  reactIs_production_min.isContextProvider = function (a) {
+    return v(a) === g;
+  };
+  reactIs_production_min.isElement = function (a) {
+    return "object" === typeof a && null !== a && a.$$typeof === b;
+  };
+  reactIs_production_min.isForwardRef = function (a) {
+    return v(a) === l;
+  };
+  reactIs_production_min.isFragment = function (a) {
+    return v(a) === d;
+  };
+  reactIs_production_min.isLazy = function (a) {
+    return v(a) === q;
+  };
+  reactIs_production_min.isMemo = function (a) {
+    return v(a) === p;
+  };
+  reactIs_production_min.isPortal = function (a) {
+    return v(a) === c;
+  };
+  reactIs_production_min.isProfiler = function (a) {
+    return v(a) === f;
+  };
+  reactIs_production_min.isStrictMode = function (a) {
+    return v(a) === e;
+  };
+  reactIs_production_min.isSuspense = function (a) {
+    return v(a) === m;
+  };
+  reactIs_production_min.isSuspenseList = function (a) {
+    return v(a) === n;
+  };
+  reactIs_production_min.isValidElementType = function (a) {
+    return "string" === typeof a || "function" === typeof a || a === d || a === f || a === e || a === m || a === n || a === t || "object" === typeof a && null !== a && (a.$$typeof === q || a.$$typeof === p || a.$$typeof === g || a.$$typeof === h || a.$$typeof === l || a.$$typeof === u || void 0 !== a.getModuleId) ? !0 : !1;
+  };
+  reactIs_production_min.typeOf = v;
+  return reactIs_production_min;
+}
+if (process.env.NODE_ENV === 'production') {
+  reactIs.exports = requireReactIs_production_min();
+} else {
+  reactIs.exports = requireReactIs_development();
+}
+var reactIsExports = reactIs.exports;
+var ReactIs = /*@__PURE__*/getDefaultExportFromCjs(reactIsExports);
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
+const POPOVER_MOTION_PROPS = {
+  initial: {
+    opacity: 0.5,
+    scale: 0.97
+  },
+  animate: {
+    opacity: 1,
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.97
+  },
+  transition: {
+    duration: 0.4,
+    type: "spring"
+  }
+};
 function _fillCSSObject(keys, value) {
   return keys.reduce((style, key) => {
     style[key] = value;
@@ -511,7 +872,7 @@ var gatherActiveObservationsAtDepth = function (depth) {
     });
   });
 };
-var process = function () {
+var process$1 = function () {
   var depth = 0;
   gatherActiveObservationsAtDepth(depth);
   while (hasActiveObservations()) {
@@ -592,7 +953,7 @@ var Scheduler = function () {
     queueResizeObserver(function () {
       var elementsHaveResized = false;
       try {
-        elementsHaveResized = process();
+        elementsHaveResized = process$1();
       } finally {
         scheduled = false;
         timeout = until - time();
@@ -1478,13 +1839,13 @@ function responsiveInputPaddingIconRightStyle(props) {
     $iconRight: true
   });
 }
-var __freeze$D = Object.freeze;
-var __defProp$E = Object.defineProperty;
-var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", {
-  value: __freeze$D(raw || cooked.slice())
+var __freeze$F = Object.freeze;
+var __defProp$G = Object.defineProperty;
+var __template$F = (cooked, raw) => __freeze$F(__defProp$G(cooked, "raw", {
+  value: __freeze$F(raw || cooked.slice())
 }));
-var _a$D, _b$n, _c$c;
-const ROOT_STYLE = css(_a$D || (_a$D = __template$D(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
+var _a$F, _b$n, _c$c;
+const ROOT_STYLE = css(_a$F || (_a$F = __template$F(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
@@ -1498,7 +1859,7 @@ function textInputBaseStyle(props) {
     color,
     font
   } = getTheme_v2(props.theme);
-  return css(_b$n || (_b$n = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.text.family, $weight && font.text.weights[$weight] || font.text.weights.regular, $scheme, $tone, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.disabled.fg, color.input.default.disabled.placeholder, color.input.invalid.enabled.fg, color.input.invalid.enabled.placeholder, color.input.default.readOnly.fg, color.input.default.readOnly.placeholder);
+  return css(_b$n || (_b$n = __template$F(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.text.family, $weight && font.text.weights[$weight] || font.text.weights.regular, $scheme, $tone, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.disabled.fg, color.input.default.disabled.placeholder, color.input.invalid.enabled.fg, color.input.invalid.enabled.placeholder, color.input.default.readOnly.fg, color.input.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -1525,7 +1886,7 @@ function textInputRepresentationStyle(props) {
     color,
     input
   } = getTheme_v2(props.theme);
-  return css(_c$c || (_c$c = __template$D(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  return css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
   }), color.input.invalid.enabled.bg, color.input.invalid.enabled.fg, focusRingBorderStyle({
@@ -1599,12 +1960,12 @@ function responsiveShadowStyle(props) {
   } = getTheme_v2(props.theme);
   return _responsive(media, props.$shadow, index => shadowStyle(shadow[index], card.shadow.outline));
 }
-var __freeze$C = Object.freeze;
-var __defProp$D = Object.defineProperty;
-var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", {
-  value: __freeze$C(raw || cooked.slice())
+var __freeze$E = Object.freeze;
+var __defProp$F = Object.defineProperty;
+var __template$E = (cooked, raw) => __freeze$E(__defProp$F(cooked, "raw", {
+  value: __freeze$E(raw || cooked.slice())
 }));
-var _a$C, _b$m, _c$b;
+var _a$E, _b$m, _c$b;
 function labelBaseStyle(props) {
   const {
     $accent,
@@ -1613,16 +1974,16 @@ function labelBaseStyle(props) {
   const {
     font
   } = getTheme_v2(props.theme);
-  return css(_c$b || (_c$b = __template$C(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$m || (_b$m = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return css(_c$b || (_c$b = __template$E(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$E || (_a$E = __template$E(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$m || (_b$m = __template$E(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
 }
-var __freeze$B = Object.freeze;
-var __defProp$C = Object.defineProperty;
-var __template$B = (cooked, raw) => __freeze$B(__defProp$C(cooked, "raw", {
-  value: __freeze$B(raw || cooked.slice())
+var __freeze$D = Object.freeze;
+var __defProp$E = Object.defineProperty;
+var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", {
+  value: __freeze$D(raw || cooked.slice())
 }));
-var _a$B;
-const Root$D = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$2 = styled.span(_a$B || (_a$B = __template$B(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+var _a$D;
+const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
+const SpanWithTextOverflow$2 = styled.span(_a$D || (_a$D = __template$D(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const Label = forwardRef(function Label2(props, ref) {
   const {
     accent,
@@ -1644,7 +2005,7 @@ const Label = forwardRef(function Label2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$D, {
+  return /* @__PURE__ */jsx(Root$C, {
     "data-ui": "Label",
     ...restProps,
     $accent: accent,
@@ -1803,7 +2164,7 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$C = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
+const Root$B = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
 const Arrow$1 = styled.div(avatarStyle.arrow);
 const BgStroke = styled.ellipse(avatarStyle.bgStroke);
 const Stroke = styled.ellipse(avatarStyle.stroke);
@@ -1859,7 +2220,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     if (s === 3) return 5;
     return 0;
   }), [size]);
-  return /* @__PURE__ */jsxs(Root$C, {
+  return /* @__PURE__ */jsxs(Root$B, {
     as,
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Avatar",
@@ -1928,12 +2289,12 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     })]
   });
 });
-var __freeze$A = Object.freeze;
-var __defProp$B = Object.defineProperty;
-var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
-  value: __freeze$A(raw || cooked.slice())
+var __freeze$C = Object.freeze;
+var __defProp$D = Object.defineProperty;
+var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", {
+  value: __freeze$C(raw || cooked.slice())
 }));
-var _a$A;
+var _a$C;
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     avatar,
@@ -1953,9 +2314,9 @@ function _avatarCounterBaseStyle(props) {
   const {
     space
   } = getTheme_v2(props.theme);
-  return css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(space[2]));
+  return css(_a$C || (_a$C = __template$C(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(space[2]));
 }
-const Root$B = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
   const {
     count,
@@ -1968,7 +2329,7 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
     if (s === 3) return 5;
     return 0;
   }), [size]);
-  return /* @__PURE__ */jsx(Root$B, {
+  return /* @__PURE__ */jsx(Root$A, {
     $size: size,
     "data-ui": "AvatarCounter",
     ref,
@@ -1982,15 +2343,15 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
 });
 function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
-  return childrenArray.filter(node => isElement$1(node) || isFragment(node) || typeof node === "string");
+  return childrenArray.filter(node => reactIsExports.isElement(node) || reactIsExports.isFragment(node) || typeof node === "string");
 }
-var __freeze$z = Object.freeze;
-var __defProp$A = Object.defineProperty;
-var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
-  value: __freeze$z(raw || cooked.slice())
+var __freeze$B = Object.freeze;
+var __defProp$C = Object.defineProperty;
+var __template$B = (cooked, raw) => __freeze$B(__defProp$C(cooked, "raw", {
+  value: __freeze$B(raw || cooked.slice())
 }));
-var _a$z;
-const BASE_STYLES = css(_a$z || (_a$z = __template$z(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+var _a$B;
+const BASE_STYLES = css(_a$B || (_a$B = __template$B(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 function avatarStackStyle() {
   return BASE_STYLES;
 }
@@ -2009,7 +2370,7 @@ function responsiveAvatarStackSizeStyle(props) {
     };
   });
 }
-const Root$A = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
+const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
 const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const {
     children: childrenProp,
@@ -2024,7 +2385,7 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxs(Root$A, {
+  return /* @__PURE__ */jsxs(Root$z, {
     "data-ui": "AvatarStack",
     ...restProps,
     ref,
@@ -2046,7 +2407,7 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
     }, String(childIndex)))]
   });
 });
-const Root$z = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
+const Root$y = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 const Box = forwardRef(function Box2(props, ref) {
   const {
     as: asProp = "div",
@@ -2077,7 +2438,7 @@ const Box = forwardRef(function Box2(props, ref) {
     sizing,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$z, {
+  return /* @__PURE__ */jsx(Root$y, {
     "data-as": typeof asProp === "string" ? asProp : void 0,
     "data-ui": "Box",
     ...restProps,
@@ -2111,12 +2472,12 @@ const Box = forwardRef(function Box2(props, ref) {
     children: props.children
   });
 });
-var __freeze$y = Object.freeze;
-var __defProp$z = Object.defineProperty;
-var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
-  value: __freeze$y(raw || cooked.slice())
+var __freeze$A = Object.freeze;
+var __defProp$B = Object.defineProperty;
+var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
+  value: __freeze$A(raw || cooked.slice())
 }));
-var _a$y, _b$l, _c$a;
+var _a$A, _b$l, _c$a;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -2125,16 +2486,16 @@ function textBaseStyle(props) {
   const {
     font
   } = getTheme_v2(props.theme);
-  return css(_c$a || (_c$a = __template$y(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: var(--card-icon-color);\n\n      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\n    }\n  "])), $accent && css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$l || (_b$l = __template$y(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
+  return css(_c$a || (_c$a = __template$A(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: var(--card-icon-color);\n\n      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\n    }\n  "])), $accent && css(_a$A || (_a$A = __template$A(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$l || (_b$l = __template$A(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
 }
-var __freeze$x = Object.freeze;
-var __defProp$y = Object.defineProperty;
-var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
-  value: __freeze$x(raw || cooked.slice())
+var __freeze$z = Object.freeze;
+var __defProp$A = Object.defineProperty;
+var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
+  value: __freeze$z(raw || cooked.slice())
 }));
-var _a$x;
-const Root$y = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$1 = styled.span(_a$x || (_a$x = __template$x(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+var _a$z;
+const Root$x = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const SpanWithTextOverflow$1 = styled.span(_a$z || (_a$z = __template$z(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const Text = forwardRef(function Text2(props, ref) {
   const {
     accent = false,
@@ -2152,7 +2513,7 @@ const Text = forwardRef(function Text2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$y, {
+  return /* @__PURE__ */jsx(Root$x, {
     "data-ui": "Text",
     ...restProps,
     $accent: accent,
@@ -2181,7 +2542,7 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$x = styled(Box)(responsiveRadiusStyle, badgeStyle);
+const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle);
 const Badge = forwardRef(function Badge2(props, ref) {
   const {
     children,
@@ -2193,7 +2554,7 @@ const Badge = forwardRef(function Badge2(props, ref) {
     tone = "default",
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$x, {
+  return /* @__PURE__ */jsx(Root$w, {
     "data-ui": "Badge",
     ...restProps,
     $tone: tone,
@@ -2202,12 +2563,11 @@ const Badge = forwardRef(function Badge2(props, ref) {
     ref,
     children: /* @__PURE__ */jsx(Text, {
       size: fontSize,
-      weight: "medium",
       children
     })
   });
 });
-const Root$w = styled(Box)(flexItemStyle, responsiveFlexStyle);
+const Root$v = styled(Box)(flexItemStyle, responsiveFlexStyle);
 const Flex = forwardRef(function Flex2(props, ref) {
   const {
     align,
@@ -2218,7 +2578,7 @@ const Flex = forwardRef(function Flex2(props, ref) {
     wrap,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$w, {
+  return /* @__PURE__ */jsx(Root$v, {
     "data-ui": "Flex",
     ...restProps,
     $align: useArrayProp(align),
@@ -2230,16 +2590,16 @@ const Flex = forwardRef(function Flex2(props, ref) {
     ref
   });
 });
-var __freeze$w = Object.freeze;
-var __defProp$x = Object.defineProperty;
-var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
-  value: __freeze$w(raw || cooked.slice())
+var __freeze$y = Object.freeze;
+var __defProp$z = Object.defineProperty;
+var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
+  value: __freeze$y(raw || cooked.slice())
 }));
-var _a$w, _b$k;
-const rotate$1 = keyframes(_a$w || (_a$w = __template$w(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const Root$v = styled(Text)(_b$k || (_b$k = __template$w(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+var _a$y, _b$k;
+const rotate$1 = keyframes(_a$y || (_a$y = __template$y(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const Root$u = styled(Text)(_b$k || (_b$k = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 const Spinner = forwardRef(function Spinner2(props, ref) {
-  return /* @__PURE__ */jsx(Root$v, {
+  return /* @__PURE__ */jsx(Root$u, {
     "data-ui": "Spinner",
     ...props,
     ref,
@@ -2250,6 +2610,7 @@ function _cardColorStyle(base, color) {
   let checkered = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return {
     // from base
+    "--card-backdrop-color": base.backdrop,
     "--card-focus-ring-color": base.focusRing,
     "--card-shadow-outline-color": base.shadow.outline,
     "--card-shadow-umbra-color": base.shadow.umbra,
@@ -2317,12 +2678,12 @@ function _cardColorStyle(base, color) {
     "--card-hairline-hard-color": color.border
   };
 }
-var __freeze$v = Object.freeze;
-var __defProp$w = Object.defineProperty;
-var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
-  value: __freeze$v(raw || cooked.slice())
+var __freeze$x = Object.freeze;
+var __defProp$y = Object.defineProperty;
+var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
+  value: __freeze$x(raw || cooked.slice())
 }));
-var _a$v, _b$j;
+var _a$x, _b$j;
 function buttonBaseStyles(props) {
   const {
     $width
@@ -2330,7 +2691,7 @@ function buttonBaseStyles(props) {
   const {
     style
   } = getTheme_v2(props.theme);
-  return css(_b$j || (_b$j = __template$v(["\n    ", ";\n\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n    vertical-align: top;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), style == null ? void 0 : style.button, $width === "fill" && css(_a$v || (_a$v = __template$v(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
+  return css(_b$j || (_b$j = __template$x(["\n    ", ";\n\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n    vertical-align: top;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), style == null ? void 0 : style.button, $width === "fill" && css(_a$x || (_a$x = __template$x(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 function combineBoxShadow() {
   for (var _len = arguments.length, boxShadows = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -2385,14 +2746,14 @@ function buttonColorStyles(props) {
     }
   }, (_a2 = style == null ? void 0 : style.button) == null ? void 0 : _a2.root].filter(Boolean);
 }
-var __freeze$u = Object.freeze;
-var __defProp$v = Object.defineProperty;
-var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
-  value: __freeze$u(raw || cooked.slice())
+var __freeze$w = Object.freeze;
+var __defProp$x = Object.defineProperty;
+var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
+  value: __freeze$w(raw || cooked.slice())
 }));
-var _a$u;
-const Root$u = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_a$u || (_a$u = __template$u(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+var _a$w;
+const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
+const LoadingBox = styled.div(_a$w || (_a$w = __template$w(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
 const Button = forwardRef(function Button2(props, ref) {
   const {
     children,
@@ -2444,7 +2805,7 @@ const Button = forwardRef(function Button2(props, ref) {
     paddingLeft,
     paddingRight
   }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
-  return /* @__PURE__ */jsxs(Root$u, {
+  return /* @__PURE__ */jsxs(Root$t, {
     "data-ui": "Button",
     ...restProps,
     $mode: mode,
@@ -2467,7 +2828,7 @@ const Button = forwardRef(function Button2(props, ref) {
         gap: space,
         children: [icon && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+          children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
         }), text && /* @__PURE__ */jsx(Box, {
           flex: iconRight ? 1 : void 0,
           children: /* @__PURE__ */jsx(Text, {
@@ -2480,7 +2841,7 @@ const Button = forwardRef(function Button2(props, ref) {
           })
         }), iconRight && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+          children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
         })]
       })
     }), children && /* @__PURE__ */jsx(Box, {
@@ -2490,12 +2851,12 @@ const Button = forwardRef(function Button2(props, ref) {
     })]
   });
 });
-var __freeze$t = Object.freeze;
-var __defProp$u = Object.defineProperty;
-var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
-  value: __freeze$t(raw || cooked.slice())
+var __freeze$v = Object.freeze;
+var __defProp$w = Object.defineProperty;
+var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
+  value: __freeze$v(raw || cooked.slice())
 }));
-var _a$t, _b$i, _c$9;
+var _a$v, _b$i, _c$9;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -2506,7 +2867,7 @@ function cardBaseStyle(props) {
   const {
     space
   } = getTheme_v2(props.theme);
-  return css(_b$i || (_b$i = __template$t(["\n    ", "\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: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return css(_b$i || (_b$i = __template$v(["\n    ", "\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: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$v || (_a$v = __template$v(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _a2;
@@ -2523,7 +2884,7 @@ function cardColorStyle(props) {
     width: card.border.width,
     color: "var(--card-border-color)"
   };
-  return css(_c$9 || (_c$9 = __template$t(["\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            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &: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            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus-visible {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), color._dark ? "dark" : "light", _cardColorStyle(color, color, $checkered), _cardColorStyle(color, color.selectable.default.disabled, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), _cardColorStyle(color, color.selectable.default.selected, $checkered), _cardColorStyle(color, color.selectable.default.hovered, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), $focusRing ? focusRingStyle({
+  return css(_c$9 || (_c$9 = __template$v(["\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            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &: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            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus-visible {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), color._dark ? "dark" : "light", _cardColorStyle(color, color, $checkered), _cardColorStyle(color, color.selectable.default.disabled, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), _cardColorStyle(color, color.selectable.default.selected, $checkered), _cardColorStyle(color, color.selectable.default.hovered, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), $focusRing ? focusRingStyle({
     base: color,
     border,
     focusRing: card.focusRing
@@ -2533,7 +2894,7 @@ function cardColorStyle(props) {
     focusRing: card.focusRing
   }) : void 0, (_a2 = style == null ? void 0 : style.card) == null ? void 0 : _a2.root);
 }
-const Root$t = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
+const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Card = forwardRef(function Card2(props, ref) {
   const {
     __unstable_checkered: checkered = false,
@@ -2552,13 +2913,13 @@ const Card = forwardRef(function Card2(props, ref) {
     tone: toneProp = "default",
     ...restProps
   } = props;
-  const as = isValidElementType(asProp) ? asProp : "div";
+  const as = reactIsExports.isValidElementType(asProp) ? asProp : "div";
   const rootTheme = useRootTheme();
   const tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
   return /* @__PURE__ */jsx(ThemeColorProvider, {
     scheme,
     tone,
-    children: /* @__PURE__ */jsx(Root$t, {
+    children: /* @__PURE__ */jsx(Root$s, {
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
@@ -2583,14 +2944,14 @@ const Card = forwardRef(function Card2(props, ref) {
     })
   });
 });
-var __freeze$s = Object.freeze;
-var __defProp$t = Object.defineProperty;
-var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
-  value: __freeze$s(raw || cooked.slice())
+var __freeze$u = Object.freeze;
+var __defProp$v = Object.defineProperty;
+var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
+  value: __freeze$u(raw || cooked.slice())
 }));
-var _a$s, _b$h;
+var _a$u, _b$h;
 function checkboxBaseStyles() {
-  return css(_a$s || (_a$s = __template$s(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return css(_a$u || (_a$u = __template$u(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   const {
@@ -2601,7 +2962,7 @@ function inputElementStyles(props) {
   const {
     focusRing
   } = input.checkbox;
-  return css(_b$h || (_b$h = __template$s(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 1.5px !important;\n        }\n      }\n    }\n\n    &:checked + span {\n      background: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    /* focus */\n    &:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    /* focus when checked - uses a different offset */\n    &:not(:disabled):focus:focus-visible&:checked + span {\n      box-shadow: ", ";\n    }\n\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked + span {\n      background-color: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    &:disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &:disabled&:checked + span {\n      background-color: ", ";\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &[data-read-only]&:checked + span {\n      background-color: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
+  return css(_b$h || (_b$h = __template$u(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 1.5px !important;\n        }\n      }\n    }\n\n    &:checked + span {\n      background: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    /* focus */\n    &:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    /* focus when checked - uses a different offset */\n    &:not(:disabled):focus:focus-visible&:checked + span {\n      box-shadow: ", ";\n    }\n\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked + span {\n      background-color: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    &:disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &:disabled&:checked + span {\n      background-color: ", ";\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &[data-read-only]&:checked + span {\n      background-color: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
   }), rem(radius[2]), color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
@@ -2634,7 +2995,7 @@ function inputElementStyles(props) {
     color: color.input.default.readOnly.border
   }), color.input.default.readOnly.fg, color.input.default.readOnly.muted.bg);
 }
-const Root$s = styled.div(checkboxBaseStyles);
+const Root$r = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
 const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
   const {
@@ -2654,7 +3015,7 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxs(Root$s, {
+  return /* @__PURE__ */jsxs(Root$r, {
     className,
     "data-ui": "Checkbox",
     style,
@@ -2672,12 +3033,12 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
     })]
   });
 });
-var __freeze$r = Object.freeze;
-var __defProp$s = Object.defineProperty;
-var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
-  value: __freeze$r(raw || cooked.slice())
+var __freeze$t = Object.freeze;
+var __defProp$u = Object.defineProperty;
+var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
+  value: __freeze$t(raw || cooked.slice())
 }));
-var _a$r;
+var _a$t;
 function codeSyntaxHighlightingStyle(_ref2) {
   let {
     theme
@@ -2799,9 +3160,9 @@ function codeSyntaxHighlightingStyle(_ref2) {
   };
 }
 function codeBaseStyle() {
-  return css(_a$r || (_a$r = __template$r(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
+  return css(_a$t || (_a$t = __template$t(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
 }
-const Root$r = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
+const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = forwardRef(function Code2(props, ref) {
   const {
     children,
@@ -2812,7 +3173,7 @@ const Code = forwardRef(function Code2(props, ref) {
   } = props;
   const language = typeof languageProp === "string" ? languageProp : void 0;
   const registered = language ? Refractor.hasLanguage(language) : false;
-  return /* @__PURE__ */jsxs(Root$r, {
+  return /* @__PURE__ */jsxs(Root$q, {
     "data-ui": "Code",
     ...restProps,
     $size: useArrayProp(size),
@@ -2843,14 +3204,14 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$q = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
+const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 const Container = forwardRef(function Container2(props, ref) {
   const {
     as,
     width = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$q, {
+  return /* @__PURE__ */jsx(Root$p, {
     "data-ui": "Container",
     ...restProps,
     $width: useArrayProp(width),
@@ -2858,7 +3219,7 @@ const Container = forwardRef(function Container2(props, ref) {
     ref
   });
 });
-const Root$p = styled(Box)(responsiveGridStyle);
+const Root$o = styled(Box)(responsiveGridStyle);
 const Grid = forwardRef(function Grid2(props, ref) {
   const {
     as,
@@ -2873,7 +3234,7 @@ const Grid = forwardRef(function Grid2(props, ref) {
     children,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$p, {
+  return /* @__PURE__ */jsx(Root$o, {
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Grid",
     ...restProps,
@@ -2890,12 +3251,12 @@ const Grid = forwardRef(function Grid2(props, ref) {
     children
   });
 });
-var __freeze$q = Object.freeze;
-var __defProp$r = Object.defineProperty;
-var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
-  value: __freeze$q(raw || cooked.slice())
+var __freeze$s = Object.freeze;
+var __defProp$t = Object.defineProperty;
+var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
+  value: __freeze$s(raw || cooked.slice())
 }));
-var _a$q, _b$g, _c$8;
+var _a$s, _b$g, _c$8;
 function headingBaseStyle(props) {
   const {
     $accent,
@@ -2904,16 +3265,16 @@ function headingBaseStyle(props) {
   const {
     font
   } = getTheme_v2(props.theme);
-  return css(_c$8 || (_c$8 = __template$q(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$q || (_a$q = __template$q(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$q(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
 }
-var __freeze$p = Object.freeze;
-var __defProp$q = Object.defineProperty;
-var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
-  value: __freeze$p(raw || cooked.slice())
+var __freeze$r = Object.freeze;
+var __defProp$s = Object.defineProperty;
+var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
+  value: __freeze$r(raw || cooked.slice())
 }));
-var _a$p;
-const Root$o = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled.span(_a$p || (_a$p = __template$p(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+var _a$r;
+const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
+const SpanWithTextOverflow = styled.span(_a$r || (_a$r = __template$r(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const Heading = forwardRef(function Heading2(props, ref) {
   const {
     accent = false,
@@ -2931,7 +3292,7 @@ const Heading = forwardRef(function Heading2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$o, {
+  return /* @__PURE__ */jsx(Root$n, {
     "data-ui": "Heading",
     ...restProps,
     $accent: accent,
@@ -2972,7 +3333,7 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$n = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
+const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
 const Inline = forwardRef(function Inline2(props, ref) {
   const {
     as,
@@ -2983,7 +3344,7 @@ const Inline = forwardRef(function Inline2(props, ref) {
   const children = useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsx("div", {
     children: child
   }, idx)), [childrenProp]);
-  return /* @__PURE__ */jsx(Root$n, {
+  return /* @__PURE__ */jsx(Root$m, {
     "data-ui": "Inline",
     ...restProps,
     $space: useArrayProp(space),
@@ -2992,16 +3353,16 @@ const Inline = forwardRef(function Inline2(props, ref) {
     children
   });
 });
-var __freeze$o = Object.freeze;
-var __defProp$p = Object.defineProperty;
-var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
-  value: __freeze$o(raw || cooked.slice())
+var __freeze$q = Object.freeze;
+var __defProp$r = Object.defineProperty;
+var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
+  value: __freeze$q(raw || cooked.slice())
 }));
-var _a$o;
+var _a$q;
 function kbdStyle() {
-  return css(_a$o || (_a$o = __template$o(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$q || (_a$q = __template$q(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
-const Root$m = styled.kbd(responsiveRadiusStyle, kbdStyle);
+const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
   const {
     children,
@@ -3010,7 +3371,7 @@ const KBD = forwardRef(function KBD2(props, ref) {
     radius = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$m, {
+  return /* @__PURE__ */jsx(Root$l, {
     "data-ui": "KBD",
     ...restProps,
     $radius: useArrayProp(radius),
@@ -3027,6 +3388,45 @@ const KBD = forwardRef(function KBD2(props, ref) {
     })
   });
 });
+const origin = {
+  name: "@sanity/ui/origin",
+  fn(_ref3) {
+    let {
+      middlewareData,
+      placement,
+      rects
+    } = _ref3;
+    var _a, _b;
+    const [side] = placement.split("-");
+    const floatingWidth = rects.floating.width;
+    const floatingHeight = rects.floating.height;
+    const shiftX = ((_a = middlewareData.shift) == null ? void 0 : _a.x) || 0;
+    const shiftY = ((_b = middlewareData.shift) == null ? void 0 : _b.y) || 0;
+    if (floatingWidth <= 0 || floatingHeight <= 0) {
+      return {};
+    }
+    const isVerticalPlacement = ["bottom", "top"].includes(side);
+    const {
+      originX,
+      originY
+    } = isVerticalPlacement ? {
+      originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
+      originY: side === "bottom" ? 0 : 1
+    } : {
+      originX: side === "left" ? 1 : 0,
+      originY: clamp(0.5 - shiftY / floatingHeight, 0, 1)
+    };
+    return {
+      data: {
+        originX,
+        originY
+      }
+    };
+  }
+};
+function clamp(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
 function moveTowardsLength(movingPoint, targetPoint, amount) {
   const width = targetPoint.x - movingPoint.x;
   const height = targetPoint.y - movingPoint.y;
@@ -3081,20 +3481,20 @@ function compileCommands(cmds) {
     return "";
   }).join(" ");
 }
-var __freeze$n = Object.freeze;
-var __defProp$o = Object.defineProperty;
-var __template$n = (cooked, raw) => __freeze$n(__defProp$o(cooked, "raw", {
-  value: __freeze$n(raw || cooked.slice())
+var __freeze$p = Object.freeze;
+var __defProp$q = Object.defineProperty;
+var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
+  value: __freeze$p(raw || cooked.slice())
 }));
-var _a$n, _b$f, _c$7;
-const Root$l = styled.div(_ref3 => {
+var _a$p, _b$f, _c$7;
+const Root$k = styled.div(_ref4 => {
   let {
     $w: w
-  } = _ref3;
-  return css(_a$n || (_a$n = __template$n(["\n    position: absolute;\n    width: ", "px;\n    height: ", "px;\n\n    :empty + & {\n      display: none;\n    }\n\n    & > svg {\n      display: block;\n      line-height: 0;\n      transform-origin: ", "px ", "px;\n    }\n\n    [data-placement^='top'] > & {\n      bottom: -", "px;\n\n      & > svg {\n        transform: rotate(0);\n      }\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  "])), w, w, w / 2, w / 2, w, w, w, w);
+  } = _ref4;
+  return css(_a$p || (_a$p = __template$p(["\n    position: absolute;\n    width: ", "px;\n    height: ", "px;\n\n    :empty + & {\n      display: none;\n    }\n\n    & > svg {\n      display: block;\n      line-height: 0;\n      transform-origin: ", "px ", "px;\n    }\n\n    [data-placement^='top'] > & {\n      bottom: -", "px;\n\n      & > svg {\n        transform: rotate(0);\n      }\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  "])), w, w, w / 2, w / 2, w, w, w, w);
 });
-const StrokePath = styled.path(_b$f || (_b$f = __template$n(["\n  stroke: var(--card-shadow-outline-color);\n"])));
-const ShapePath = styled.path(_c$7 || (_c$7 = __template$n(["\n  fill: var(--card-bg-color);\n"])));
+const StrokePath = styled.path(_b$f || (_b$f = __template$p(["\n  stroke: var(--card-shadow-outline-color);\n"])));
+const ShapePath = styled.path(_c$7 || (_c$7 = __template$p(["\n  fill: var(--card-bg-color);\n"])));
 const Arrow = forwardRef(function Arrow2(props, ref) {
   const {
     width: w,
@@ -3130,7 +3530,7 @@ const Arrow = forwardRef(function Arrow2(props, ref) {
   const path = compileCommands(cmds);
   const strokePath = "".concat(path);
   const fillPath = "".concat(path, " M ").concat(w, " -1 M 0 -1 Z");
-  return /* @__PURE__ */jsx(Root$l, {
+  return /* @__PURE__ */jsx(Root$k, {
     ...restProps,
     $w: w,
     ref,
@@ -3188,6 +3588,17 @@ function useBoundaryElement() {
   }
   return value || DEFAULT_VALUE;
 }
+function ConditionalWrapper(_ref5) {
+  let {
+    children,
+    condition,
+    wrapper
+  } = _ref5;
+  if (!condition) {
+    return children;
+  }
+  return wrapper(children);
+}
 function findMaxBreakpoints(media, width) {
   const ret = [];
   for (let i = 0; i < media.length; i += 1) {
@@ -3237,8 +3648,8 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
     children
   });
 });
-var __defProp$n = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$n(obj, key, {
+var __defProp$p = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$p(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
@@ -3467,7 +3878,7 @@ function LayerProvider(props) {
     children
   });
 }
-const Root$k = styled.div({
+const Root$j = styled.div({
   position: "relative"
 });
 const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
@@ -3503,7 +3914,7 @@ const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
       lastFocusedRef.current = target;
     }
   }, [forwardedRef, isTopLayer, onFocus]);
-  return /* @__PURE__ */jsx(Root$k, {
+  return /* @__PURE__ */jsx(Root$j, {
     ...restProps,
     "data-ui": "Layer",
     onFocus: handleFocus,
@@ -3614,19 +4025,19 @@ function PortalProvider(props) {
     children
   });
 }
-var __freeze$m = Object.freeze;
-var __defProp$m = Object.defineProperty;
-var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
-  value: __freeze$m(raw || cooked.slice())
+var __freeze$o = Object.freeze;
+var __defProp$o = Object.defineProperty;
+var __template$o = (cooked, raw) => __freeze$o(__defProp$o(cooked, "raw", {
+  value: __freeze$o(raw || cooked.slice())
 }));
-var _a$m;
-const Root$j = styled.div(_a$m || (_a$m = __template$m(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n  overflow: clip;\n"])));
+var _a$o;
+const Root$i = styled.div(_a$o || (_a$o = __template$o(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const SrOnly = forwardRef(function SrOnly2(props, ref) {
   const {
     as,
     children
   } = props;
-  return /* @__PURE__ */jsx(Root$j, {
+  return /* @__PURE__ */jsx(Root$i, {
     "aria-hidden": true,
     as,
     "data-ui": "SrOnly",
@@ -3634,14 +4045,14 @@ const SrOnly = forwardRef(function SrOnly2(props, ref) {
     children
   });
 });
-var __freeze$l = Object.freeze;
-var __defProp$l = Object.defineProperty;
-var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
-  value: __freeze$l(raw || cooked.slice())
+var __freeze$n = Object.freeze;
+var __defProp$n = Object.defineProperty;
+var __template$n = (cooked, raw) => __freeze$n(__defProp$n(cooked, "raw", {
+  value: __freeze$n(raw || cooked.slice())
 }));
-var _a$l, _b$e;
-const Root$i = styled.div(_a$l || (_a$l = __template$l(["\n  position: relative;\n"])));
-const ItemWrapper = styled.div(_b$e || (_b$e = __template$l(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+var _a$n, _b$e;
+const Root$h = styled.div(_a$n || (_a$n = __template$n(["\n  position: relative;\n"])));
+const ItemWrapper = styled.div(_b$e || (_b$e = __template$n(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const {
     as = "div",
@@ -3747,7 +4158,7 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const wrapperStyle = useMemo(() => ({
     height
   }), [height]);
-  return /* @__PURE__ */jsx(Root$i, {
+  return /* @__PURE__ */jsx(Root$h, {
     as,
     "data-ui": "VirtualList",
     ...restProps,
@@ -3865,17 +4276,17 @@ function calcMaxWidth(params) {
   }
   return Math.min(currentWidth != null ? currentWidth : Infinity, (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2);
 }
-const Root$h = styled(Card)({
-  "&:not([hidden])": {
-    display: "flex"
-  },
-  flexDirection: "column",
-  width: "max-content",
-  minWidth: "min-content"
-});
+var __freeze$m = Object.freeze;
+var __defProp$m = Object.defineProperty;
+var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
+  value: __freeze$m(raw || cooked.slice())
+}));
+var _a$m;
+const MotionCard$1 = styled(motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n"])));
 const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
+    animate,
     arrow,
     arrowRef,
     arrowX,
@@ -3883,6 +4294,8 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     children,
     padding,
     placement,
+    originX,
+    originY,
     overflow,
     radius,
     scheme,
@@ -3902,20 +4315,22 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const x = (xProp != null ? xProp : 0) + margins[3];
   const y = (yProp != null ? yProp : 0) + margins[0];
   const rootStyle = useMemo(() => ({
+    left: x,
+    originX,
+    originY,
     position: strategy,
     top: y,
-    left: x,
     width,
     zIndex,
     ...style
-  }), [strategy, style, width, x, y, zIndex]);
+  }), [originX, originY, strategy, style, width, x, y, zIndex]);
   const arrowStyle = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
     right: void 0,
     bottom: void 0
   }), [arrowX, arrowY]);
-  return /* @__PURE__ */jsxs(Root$h, {
+  return /* @__PURE__ */jsxs(MotionCard$1, {
     "data-ui": "Popover",
     ...restProps,
     "data-placement": placement,
@@ -3926,6 +4341,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     sizing: "border",
     style: rootStyle,
     tone,
+    ...(animate ? POPOVER_MOTION_PROPS : {}),
     children: [/* @__PURE__ */jsx(Flex, {
       "data-ui": "Popover__wrapper",
       direction: "column",
@@ -3948,7 +4364,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = memo(forwardRef(function Popover2(props, ref) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const {
     container,
     layer
@@ -3956,6 +4372,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   const boundaryElementContext = useBoundaryElement();
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
+    animate = false,
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext.element,
     children: childProp,
@@ -4043,13 +4460,13 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref4) {
+        apply(_ref6) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref4;
+          } = _ref6;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -4083,13 +4500,16 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
         padding: DEFAULT_POPOVER_PADDING
       }));
     }
+    if (animate) {
+      ret.push(origin);
+    }
     ret.push(hide({
       boundary: referenceBoundary || void 0,
       padding: DEFAULT_POPOVER_PADDING,
       strategy: "referenceHidden"
     }));
     return ret;
-  }, [arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]);
+  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]);
   const {
     x,
     y,
@@ -4106,6 +4526,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   const referenceHidden = (_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden;
   const arrowX = (_g = middlewareData.arrow) == null ? void 0 : _g.x;
   const arrowY = (_h = middlewareData.arrow) == null ? void 0 : _h.y;
+  const originX = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originX;
+  const originY = (_j = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _j.originY;
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
@@ -4148,6 +4570,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     children: /* @__PURE__ */jsx(PopoverCard, {
       ...restProps,
       __unstable_margins: margins,
+      animate,
       arrow: arrowProp,
       arrowRef: setArrow,
       arrowX,
@@ -4160,6 +4583,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       ref: setFloating,
       scheme,
       shadow,
+      originX,
+      originY,
       strategy,
       tone,
       width: matchReferenceWidth ? referenceWidthRef.current : width,
@@ -4169,23 +4594,31 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     })
   });
   return /* @__PURE__ */jsxs(Fragment, {
-    children: [open && /* @__PURE__ */jsx(Fragment, {
-      children: portal ? /* @__PURE__ */jsx(Portal, {
-        __unstable_name: typeof portal === "string" ? portal : void 0,
+    children: [/* @__PURE__ */jsx(ConditionalWrapper, {
+      condition: animate,
+      wrapper: children => /* @__PURE__ */jsx(AnimatePresence, {
+        children
+      }),
+      children: open && /* @__PURE__ */jsx(ConditionalWrapper, {
+        condition: !!portal,
+        wrapper: children => /* @__PURE__ */jsx(Portal, {
+          __unstable_name: typeof portal === "string" ? portal : void 0,
+          children
+        }),
         children: popover
-      }) : popover
+      })
     }), child]
   });
 }));
 Popover.displayName = "Popover";
-var __freeze$k = Object.freeze;
-var __defProp$k = Object.defineProperty;
-var __template$k = (cooked, raw) => __freeze$k(__defProp$k(cooked, "raw", {
-  value: __freeze$k(raw || cooked.slice())
+var __freeze$l = Object.freeze;
+var __defProp$l = Object.defineProperty;
+var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
+  value: __freeze$l(raw || cooked.slice())
 }));
-var _a$k, _b$d;
+var _a$l, _b$d;
 function radioBaseStyle() {
-  return css(_a$k || (_a$k = __template$k(["\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(_a$l || (_a$l = __template$l(["\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 {
@@ -4193,7 +4626,7 @@ function inputElementStyle(props) {
     input
   } = getTheme_v2(props.theme);
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_b$d || (_b$d = __template$k(["\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    /* customValidity */\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      &::after {\n        background: ", ";\n      }\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.input.default.enabled.bg, focusRingBorderStyle({
+  return css(_b$d || (_b$d = __template$l(["\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    /* customValidity */\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      &::after {\n        background: ", ";\n      }\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.input.default.enabled.bg, focusRingBorderStyle({
     color: color.input.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.input.default.enabled.fg, focusRingStyle({
@@ -4238,27 +4671,27 @@ const Radio = forwardRef(function Radio2(props, forwardedRef) {
     }), /* @__PURE__ */jsx("span", {})]
   });
 });
-var __freeze$j = Object.freeze;
-var __defProp$j = Object.defineProperty;
-var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
-  value: __freeze$j(raw || cooked.slice())
+var __freeze$k = Object.freeze;
+var __defProp$k = Object.defineProperty;
+var __template$k = (cooked, raw) => __freeze$k(__defProp$k(cooked, "raw", {
+  value: __freeze$k(raw || cooked.slice())
 }));
-var _a$j, _b$c, _c$6, _d$5;
+var _a$k, _b$c, _c$6, _d$5;
 function rootStyle() {
-  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$k || (_a$k = __template$k(["\n    position: relative;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
     font
   } = getTheme_v2(props.theme);
-  return css(_b$c || (_b$c = __template$j(["\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.text.family);
+  return css(_b$c || (_b$c = __template$k(["\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.text.family);
 }
 function inputColorStyle(props) {
   const {
     color,
     input
   } = getTheme_v2(props.theme);
-  return css(_c$6 || (_c$6 = __template$j(["\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.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  return css(_c$6 || (_c$6 = __template$k(["\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.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
   }), color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
@@ -4301,7 +4734,7 @@ function iconBoxStyle(props) {
   const {
     color
   } = getTheme_v2(props.theme);
-  return css(_d$5 || (_d$5 = __template$j(["\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.input.default.enabled.fg, color.input.default.hovered.fg, color.input.default.disabled.fg, color.input.default.readOnly.fg);
+  return css(_d$5 || (_d$5 = __template$k(["\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.input.default.enabled.fg, color.input.default.hovered.fg, color.input.default.disabled.fg, color.input.default.readOnly.fg);
 }
 const selectStyle = {
   root: rootStyle,
@@ -4318,7 +4751,7 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
     disabled,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     readOnly,
     space = 3,
     ...restProps
@@ -4385,24 +4818,24 @@ const Stack = forwardRef(function Stack2(props, ref) {
     ref
   });
 });
-var __freeze$i = Object.freeze;
-var __defProp$i = Object.defineProperty;
-var __template$i = (cooked, raw) => __freeze$i(__defProp$i(cooked, "raw", {
-  value: __freeze$i(raw || cooked.slice())
+var __freeze$j = Object.freeze;
+var __defProp$j = Object.defineProperty;
+var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
+  value: __freeze$j(raw || cooked.slice())
 }));
-var _a$i, _b$b, _c$5, _d$4, _e$2, _f$2, _g;
+var _a$j, _b$b, _c$5, _d$4, _e$2, _f$2, _g;
 function switchBaseStyles() {
-  return css(_a$i || (_a$i = __template$i(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function switchInputStyles() {
-  return css(_b$b || (_b$b = __template$i(["\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(_b$b || (_b$b = __template$j(["\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 {
     color,
     input
   } = getTheme_v2(props.theme);
-  return css(_c$5 || (_c$5 = __template$i(["\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\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return css(_c$5 || (_c$5 = __template$j(["\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\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing: input.switch.focusRing
   }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg);
 }
@@ -4410,7 +4843,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = getTheme_v2(props.theme);
-  return css(_d$4 || (_d$4 = __template$i(["\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(_d$4 || (_d$4 = __template$j(["\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 {
@@ -4426,7 +4859,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(_g || (_g = __template$i(["\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    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_e$2 || (_e$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_f$2 || (_f$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return css(_g || (_g = __template$j(["\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    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_e$2 || (_e$2 = __template$j(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_f$2 || (_f$2 = __template$j(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 const Root$d = styled.span(switchBaseStyles);
 const Input$2 = styled.input(switchInputStyles);
@@ -4470,14 +4903,14 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
     })]
   });
 });
-var __freeze$h = Object.freeze;
-var __defProp$h = Object.defineProperty;
-var __template$h = (cooked, raw) => __freeze$h(__defProp$h(cooked, "raw", {
-  value: __freeze$h(raw || cooked.slice())
+var __freeze$i = Object.freeze;
+var __defProp$i = Object.defineProperty;
+var __template$i = (cooked, raw) => __freeze$i(__defProp$i(cooked, "raw", {
+  value: __freeze$i(raw || cooked.slice())
 }));
-var _a$h;
+var _a$i;
 const Root$c = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_a$h || (_a$h = __template$h(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot$1 = styled.span(_a$i || (_a$i = __template$i(["\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) {
@@ -4521,30 +4954,30 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
     })
   });
 });
-var __freeze$g = Object.freeze;
-var __defProp$g = Object.defineProperty;
-var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
-  value: __freeze$g(raw || cooked.slice())
+var __freeze$h = Object.freeze;
+var __defProp$h = Object.defineProperty;
+var __template$h = (cooked, raw) => __freeze$h(__defProp$h(cooked, "raw", {
+  value: __freeze$h(raw || cooked.slice())
 }));
-var _a$g, _b$a, _c$4, _d$3, _e$1, _f$1;
+var _a$h, _b$a, _c$4, _d$3, _e$1, _f$1;
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
 const Root$b = styled(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled.span(_a$g || (_a$g = __template$g(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot = styled.span(_a$h || (_a$h = __template$h(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Prefix = styled(Card).attrs({
   forwardedAs: "span"
-})(_b$a || (_b$a = __template$g(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_b$a || (_b$a = __template$h(["\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"
-})(_c$4 || (_c$4 = __template$g(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_c$4 || (_c$4 = __template$h(["\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)(_d$3 || (_d$3 = __template$g(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled(Box)(_e$1 || (_e$1 = __template$g(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled(Card)(_f$1 || (_f$1 = __template$g(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const LeftBox = styled(Box)(_d$3 || (_d$3 = __template$h(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
+const RightBox = styled(Box)(_e$1 || (_e$1 = __template$h(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const RightCard = styled(Card)(_f$1 || (_f$1 = __template$h(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const TextInputClearButton = styled(Button)({
   "&:not([hidden])": {
     display: "block"
@@ -4619,13 +5052,13 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
       padding,
       children: /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+        children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
       })
     }), !$hasClearButton && iconRight && /* @__PURE__ */jsx(RightBox, {
       padding,
       children: /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+        children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
       })
     })]
   }), [__unstable_disableFocusRing, border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
@@ -4712,17 +5145,6 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
-function ConditionalWrapper(_ref5) {
-  let {
-    children,
-    condition,
-    wrapper
-  } = _ref5;
-  if (!condition) {
-    return children;
-  }
-  return wrapper(children);
-}
 const DEFAULT_TOOLTIP_ARROW_WIDTH = 15;
 const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6;
 const DEFAULT_TOOLTIP_ARROW_RADIUS = 2;
@@ -4742,6 +5164,63 @@ const DEFAULT_FALLBACK_PLACEMENTS = {
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
 };
+var __freeze$g = Object.freeze;
+var __defProp$g = Object.defineProperty;
+var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
+  value: __freeze$g(raw || cooked.slice())
+}));
+var _a$g;
+const MotionCard = styled(motion(Card))(_a$g || (_a$g = __template$g([""])));
+const TooltipCard = memo(forwardRef(function TooltipCard2(props, ref) {
+  const {
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    ...restProps
+  } = props;
+  const rootStyle = useMemo(() => ({
+    originX,
+    originY,
+    ...style
+  }), [originX, originY, style]);
+  const arrowStyle = useMemo(() => ({
+    left: arrowX !== null ? arrowX : void 0,
+    top: arrowY !== null ? arrowY : void 0,
+    right: void 0,
+    bottom: void 0
+  }), [arrowX, arrowY]);
+  return /* @__PURE__ */jsxs(MotionCard, {
+    "data-ui": "Tooltip__card",
+    ...restProps,
+    "data-placement": placement,
+    padding,
+    radius,
+    ref,
+    scheme,
+    shadow,
+    style: rootStyle,
+    ...(animate ? POPOVER_MOTION_PROPS : {}),
+    children: [children, arrow && /* @__PURE__ */jsx(Arrow, {
+      ref: arrowRef,
+      style: arrowStyle,
+      width: DEFAULT_TOOLTIP_ARROW_WIDTH,
+      height: DEFAULT_TOOLTIP_ARROW_HEIGHT,
+      radius: DEFAULT_TOOLTIP_ARROW_RADIUS
+    })]
+  });
+}));
+TooltipCard.displayName = "TooltipCard";
 const key$4 = Symbol.for("@sanity/ui/context/tooltipDelayGroup");
 globalScope[key$4] = globalScope[key$4] || createContext(null);
 const TooltipDelayGroupContext = globalScope[key$4];
@@ -4778,19 +5257,20 @@ var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
   value: __freeze$f(raw || cooked.slice())
 }));
 var _a$f;
-const Root$a = styled(Layer)(_a$f || (_a$f = __template$f(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref6 => {
+const Root$a = styled(Layer)(_a$f || (_a$f = __template$f(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref7 => {
   let {
     $maxWidth
-  } = _ref6;
+  } = _ref7;
   return $maxWidth;
 });
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement();
   const {
     layer
   } = useTheme_v2();
   const {
+    animate = false,
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
     children: childProp,
@@ -4805,7 +5285,6 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     shadow = 2,
     zOffset = layer.tooltip.zOffset,
     delay,
-    animate = false,
     ...restProps
   } = props;
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
@@ -4841,8 +5320,11 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
         padding: DEFAULT_TOOLTIP_PADDING
       }));
     }
+    if (animate) {
+      ret.push(origin);
+    }
     return ret;
-  }, [arrowProp, boundaryElement, fallbackPlacements]);
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements]);
   const {
     floatingStyles,
     placement,
@@ -4856,12 +5338,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   });
   const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
   const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
-  const arrowStyle = useMemo(() => ({
-    left: arrowX !== null ? arrowX : void 0,
-    top: arrowY !== null ? arrowY : void 0,
-    right: void 0,
-    bottom: void 0
-  }), [arrowX, arrowY]);
+  const originX = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originX;
+  const originY = (_g = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _g.originY;
   const tooltipId = useId();
   const [isOpen, setIsOpen] = useDelayedState(false);
   const delayGroupContext = useTooltipDelayGroup();
@@ -4983,53 +5461,33 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   }, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
   if (!child) return /* @__PURE__ */jsx(Fragment, {});
   if (disabled) return child;
-  const root = /* @__PURE__ */jsx(Root$a, {
+  const tooltip = /* @__PURE__ */jsx(Root$a, {
     "data-ui": "Tooltip",
     ...restProps,
     ref: setFloating,
     style: floatingStyles,
     zOffset,
     $maxWidth: tooltipWidth,
-    children: /* @__PURE__ */jsx(ConditionalWrapper, {
-      condition: animate,
-      wrapper: children => /* @__PURE__ */jsx(motion.div, {
-        initial: {
-          opacity: 0.5,
-          scale: 0.95
-        },
-        animate: {
-          opacity: 1,
-          scale: 1
-        },
-        exit: {
-          opacity: 0,
-          scale: 0.95
-        },
-        transition: {
-          duration: 0.3,
-          type: "spring"
-        },
-        children
-      }),
-      children: /* @__PURE__ */jsxs(Card, {
-        "data-ui": "Tooltip__card",
-        "data-placement": placement,
-        padding,
-        radius,
-        scheme,
-        shadow,
-        children: [content, arrowProp && /* @__PURE__ */jsx(Arrow, {
-          ref: setArrow,
-          style: arrowStyle,
-          width: DEFAULT_TOOLTIP_ARROW_WIDTH,
-          height: DEFAULT_TOOLTIP_ARROW_HEIGHT,
-          radius: DEFAULT_TOOLTIP_ARROW_RADIUS
-        })]
-      })
+    children: /* @__PURE__ */jsx(TooltipCard, {
+      ...restProps,
+      animate,
+      arrow: arrowProp,
+      arrowRef: setArrow,
+      arrowX,
+      arrowY,
+      originX,
+      originY,
+      padding,
+      placement,
+      radius,
+      ref: setFloating,
+      scheme,
+      shadow,
+      children: content
     })
   });
   return /* @__PURE__ */jsxs(Fragment, {
-    children: [child, /* @__PURE__ */jsx(ConditionalWrapper, {
+    children: [/* @__PURE__ */jsx(ConditionalWrapper, {
       condition: animate,
       wrapper: children => /* @__PURE__ */jsx(AnimatePresence, {
         children
@@ -5040,9 +5498,9 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
           __unstable_name: typeof portalProp === "string" ? portalProp : void 0,
           children
         }),
-        children: root
+        children: tooltip
       })
-    })]
+    }), child]
   });
 });
 var __freeze$e = Object.freeze;
@@ -5199,10 +5657,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref7 => {
+  const defaultRenderOption = useCallback(_ref8 => {
     let {
       value: value2
-    } = _ref7;
+    } = _ref8;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -5661,10 +6119,10 @@ var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
   value: __freeze$c(raw || cooked.slice())
 }));
 var _a$c, _b$7;
-function dialogStyle(_ref8) {
+function dialogStyle(_ref9) {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   const {
     color
   } = getTheme_v2(theme);
@@ -6404,7 +6862,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     registerElement,
     shouldFocus
   }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]);
-  const menu = isElement$1(menuProp) ? cloneElement(menuProp, menuProps) : null;
+  const menu = reactIsExports.isElement(menuProp) ? cloneElement(menuProp, menuProps) : null;
   const setButtonRef = useCallback(el => {
     if (typeof ref === "function") {
       ref(el);
@@ -6413,7 +6871,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     }
     setButtonElement(el);
   }, [ref]);
-  const button = useMemo(() => isElement$1(buttonProp) ? cloneElement(buttonProp, {
+  const button = useMemo(() => reactIsExports.isElement(buttonProp) ? cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -6600,7 +7058,7 @@ function MenuGroup(props) {
         padding,
         children: [icon && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+          children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
         }), /* @__PURE__ */jsx(Box, {
           flex: 1,
           children: /* @__PURE__ */jsx(Text, {
@@ -6703,7 +7161,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
       ...paddingProps,
       children: [icon && /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+        children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
       }), text && /* @__PURE__ */jsx(Box, {
         flex: 1,
         children: /* @__PURE__ */jsx(Text, {
@@ -6721,7 +7179,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
         }
       }), iconRight && /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+        children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
       })]
     }), children && /* @__PURE__ */jsx(Box, {
       as: "span",
@@ -6738,15 +7196,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = css(_b$3 || (_b$3 = __template$6(["\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(_d || (_d = __template$6(["\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"])), _ref9 => {
+const skeletonStyle = css(_d || (_d = __template$6(["\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"])), _ref10 => {
   let {
     $visible
-  } = _ref9;
+  } = _ref10;
   return $visible ? 1 : 0;
-}, _ref10 => {
+}, _ref11 => {
   let {
     $animated
-  } = _ref10;
+  } = _ref11;
   return $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -7131,12 +7589,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref11 => {
+            children: state.map(_ref12 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref11;
+              } = _ref12;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -7630,5 +8088,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Arrow, 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, TooltipDelayGroupContext, TooltipDelayGroupProvider, 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, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
+export { Arrow, Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, ConditionalWrapper, 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, TooltipDelayGroupContext, TooltipDelayGroupProvider, 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, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map