npm - @sanity/ui - Versions diffs - 2.0.0-beta.4 → 2.0.0-beta.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/index.cjs.mjs +1 -0
package/dist/index.d.ts +69 -30
package/dist/index.esm.js +417 -302
package/dist/index.esm.js.map +1 -1
package/dist/index.js +417 -301
package/dist/index.js.map +1 -1
package/package.json +1 -1
package/src/core/constants.ts +18 -0
package/src/core/middleware/origin.ts +47 -0
package/src/core/primitives/popover/popover.tsx +67 -13
package/src/core/primitives/popover/popoverCard.tsx +26 -15
package/src/core/primitives/tooltip/tooltip.tsx +46 -56
package/src/core/primitives/tooltip/tooltipCard.tsx +104 -0
package/src/core/{primitives/tooltip → utils/conditionalWrapper}/conditionalWrapper.tsx +3 -0
package/src/core/utils/conditionalWrapper/index.ts +1 -0
package/src/core/utils/index.ts +1 -0

package/dist/index.js CHANGED Viewed

@@ -11,8 +11,8 @@ var styled = require('styled-components');
 var icons = require('@sanity/icons');
 var Refractor = require('react-refractor');
 var reactDom$1 = require('@floating-ui/react-dom');
-var reactDom = require('react-dom');
 var framerMotion = require('framer-motion');
+var reactDom = require('react-dom');
 function _interopDefaultCompat(e) {
   return e && typeof e === 'object' && 'default' in e ? e : {
     default: e
@@ -33,6 +33,24 @@ const screen = theme.screen;
 const studioTheme = theme.buildTheme();
 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;
@@ -1491,13 +1509,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 = styled.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 = styled.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;
 }
@@ -1511,7 +1529,7 @@ function textInputBaseStyle(props) {
     color,
     font
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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 {
@@ -1538,7 +1556,7 @@ function textInputRepresentationStyle(props) {
     color,
     input
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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({
@@ -1612,12 +1630,12 @@ function responsiveShadowStyle(props) {
   } = theme.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,
@@ -1626,16 +1644,16 @@ function labelBaseStyle(props) {
   const {
     font
   } = theme.getTheme_v2(props.theme);
-  return styled.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 && styled.css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$m || (_b$m = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return styled.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 && styled.css(_a$E || (_a$E = __template$E(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.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__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$2 = styled__default.default.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__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
+const SpanWithTextOverflow$2 = styled__default.default.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 = react.forwardRef(function Label2(props, ref) {
   const {
     accent,
@@ -1657,7 +1675,7 @@ const Label = react.forwardRef(function Label2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsxRuntime.jsx(Root$D, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$C, {
     "data-ui": "Label",
     ...restProps,
     $accent: accent,
@@ -1816,7 +1834,7 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$C = styled__default.default.div(responsiveAvatarSizeStyle, avatarStyle.root);
+const Root$B = styled__default.default.div(responsiveAvatarSizeStyle, avatarStyle.root);
 const Arrow$1 = styled__default.default.div(avatarStyle.arrow);
 const BgStroke = styled__default.default.ellipse(avatarStyle.bgStroke);
 const Stroke = styled__default.default.ellipse(avatarStyle.stroke);
@@ -1872,7 +1890,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
     if (s === 3) return 5;
     return 0;
   }), [size]);
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$C, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$B, {
     as,
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Avatar",
@@ -1941,12 +1959,12 @@ const Avatar = react.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,
@@ -1966,9 +1984,9 @@ function _avatarCounterBaseStyle(props) {
   const {
     space
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+const Root$A = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
   const {
     count,
@@ -1981,7 +1999,7 @@ const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
     if (s === 3) return 5;
     return 0;
   }), [size]);
-  return /* @__PURE__ */jsxRuntime.jsx(Root$B, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$A, {
     $size: size,
     "data-ui": "AvatarCounter",
     ref,
@@ -1997,13 +2015,13 @@ function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
   return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.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 = styled.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 = styled.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;
 }
@@ -2022,7 +2040,7 @@ function responsiveAvatarStackSizeStyle(props) {
     };
   });
 }
-const Root$A = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
+const Root$z = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
 const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
   const {
     children: childrenProp,
@@ -2037,7 +2055,7 @@ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$A, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$z, {
     "data-ui": "AvatarStack",
     ...restProps,
     ref,
@@ -2059,7 +2077,7 @@ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
     }, String(childIndex)))]
   });
 });
-const Root$z = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
+const Root$y = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 const Box = react.forwardRef(function Box2(props, ref) {
   const {
     as: asProp = "div",
@@ -2090,7 +2108,7 @@ const Box = react.forwardRef(function Box2(props, ref) {
     sizing,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$z, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$y, {
     "data-as": typeof asProp === "string" ? asProp : void 0,
     "data-ui": "Box",
     ...restProps,
@@ -2124,12 +2142,12 @@ const Box = react.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,
@@ -2138,16 +2156,16 @@ function textBaseStyle(props) {
   const {
     font
   } = theme.getTheme_v2(props.theme);
-  return styled.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 && styled.css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$y(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
+  return styled.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 && styled.css(_a$A || (_a$A = __template$A(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.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__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$1 = styled__default.default.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__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const SpanWithTextOverflow$1 = styled__default.default.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 = react.forwardRef(function Text2(props, ref) {
   const {
     accent = false,
@@ -2165,7 +2183,7 @@ const Text = react.forwardRef(function Text2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsxRuntime.jsx(Root$y, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$x, {
     "data-ui": "Text",
     ...restProps,
     $accent: accent,
@@ -2194,7 +2212,7 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$x = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
+const Root$w = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
 const Badge = react.forwardRef(function Badge2(props, ref) {
   const {
     children,
@@ -2206,7 +2224,7 @@ const Badge = react.forwardRef(function Badge2(props, ref) {
     tone = "default",
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$x, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$w, {
     "data-ui": "Badge",
     ...restProps,
     $tone: tone,
@@ -2220,7 +2238,7 @@ const Badge = react.forwardRef(function Badge2(props, ref) {
     })
   });
 });
-const Root$w = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
+const Root$v = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
 const Flex = react.forwardRef(function Flex2(props, ref) {
   const {
     align,
@@ -2231,7 +2249,7 @@ const Flex = react.forwardRef(function Flex2(props, ref) {
     wrap,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$w, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$v, {
     "data-ui": "Flex",
     ...restProps,
     $align: useArrayProp(align),
@@ -2243,16 +2261,16 @@ const Flex = react.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 = styled.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__default.default(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 = styled.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__default.default(Text)(_b$k || (_b$k = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 const Spinner = react.forwardRef(function Spinner2(props, ref) {
-  return /* @__PURE__ */jsxRuntime.jsx(Root$v, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$u, {
     "data-ui": "Spinner",
     ...props,
     ref,
@@ -2330,12 +2348,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
@@ -2343,7 +2361,7 @@ function buttonBaseStyles(props) {
   const {
     style
   } = theme.getTheme_v2(props.theme);
-  return styled.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" && styled.css(_a$v || (_a$v = __template$v(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
+  return styled.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" && styled.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++) {
@@ -2398,14 +2416,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__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled__default.default.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__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
+const LoadingBox = styled__default.default.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 = react.forwardRef(function Button2(props, ref) {
   const {
     children,
@@ -2457,7 +2475,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
     paddingLeft,
     paddingRight
   }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$u, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$t, {
     "data-ui": "Button",
     ...restProps,
     $mode: mode,
@@ -2503,12 +2521,12 @@ const Button = react.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)];
 }
@@ -2519,7 +2537,7 @@ function cardBaseStyle(props) {
   const {
     space
   } = theme.getTheme_v2(props.theme);
-  return styled.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 && styled.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 styled.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 && styled.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;
@@ -2536,7 +2554,7 @@ function cardColorStyle(props) {
     width: card.border.width,
     color: "var(--card-border-color)"
   };
-  return styled.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 styled.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
@@ -2546,7 +2564,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__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
+const Root$s = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Card = react.forwardRef(function Card2(props, ref) {
   const {
     __unstable_checkered: checkered = false,
@@ -2571,7 +2589,7 @@ const Card = react.forwardRef(function Card2(props, ref) {
   return /* @__PURE__ */jsxRuntime.jsx(ThemeColorProvider, {
     scheme,
     tone,
-    children: /* @__PURE__ */jsxRuntime.jsx(Root$t, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Root$s, {
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
@@ -2596,14 +2614,14 @@ const Card = react.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 styled.css(_a$s || (_a$s = __template$s(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return styled.css(_a$u || (_a$u = __template$u(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   const {
@@ -2614,7 +2632,7 @@ function inputElementStyles(props) {
   const {
     focusRing
   } = input.checkbox;
-  return styled.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 styled.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({
@@ -2647,7 +2665,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__default.default.div(checkboxBaseStyles);
+const Root$r = styled__default.default.div(checkboxBaseStyles);
 const Input$5 = styled__default.default.input(inputElementStyles);
 const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
   const {
@@ -2667,7 +2685,7 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$s, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$r, {
     className,
     "data-ui": "Checkbox",
     style,
@@ -2685,12 +2703,12 @@ const Checkbox = react.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: theme$1
@@ -2812,9 +2830,9 @@ function codeSyntaxHighlightingStyle(_ref2) {
   };
 }
 function codeBaseStyle() {
-  return styled.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 styled.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__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
+const Root$q = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = react.forwardRef(function Code2(props, ref) {
   const {
     children,
@@ -2825,7 +2843,7 @@ const Code = react.forwardRef(function Code2(props, ref) {
   } = props;
   const language = typeof languageProp === "string" ? languageProp : void 0;
   const registered = language ? Refractor__default.default.hasLanguage(language) : false;
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$r, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$q, {
     "data-ui": "Code",
     ...restProps,
     $size: useArrayProp(size),
@@ -2856,14 +2874,14 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$q = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
+const Root$p = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 const Container = react.forwardRef(function Container2(props, ref) {
   const {
     as,
     width = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$q, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$p, {
     "data-ui": "Container",
     ...restProps,
     $width: useArrayProp(width),
@@ -2871,7 +2889,7 @@ const Container = react.forwardRef(function Container2(props, ref) {
     ref
   });
 });
-const Root$p = styled__default.default(Box)(responsiveGridStyle);
+const Root$o = styled__default.default(Box)(responsiveGridStyle);
 const Grid = react.forwardRef(function Grid2(props, ref) {
   const {
     as,
@@ -2886,7 +2904,7 @@ const Grid = react.forwardRef(function Grid2(props, ref) {
     children,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$p, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$o, {
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Grid",
     ...restProps,
@@ -2903,12 +2921,12 @@ const Grid = react.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,
@@ -2917,16 +2935,16 @@ function headingBaseStyle(props) {
   const {
     font
   } = theme.getTheme_v2(props.theme);
-  return styled.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 && styled.css(_a$q || (_a$q = __template$q(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$g || (_b$g = __template$q(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return styled.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 && styled.css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.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__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled__default.default.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__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
+const SpanWithTextOverflow = styled__default.default.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 = react.forwardRef(function Heading2(props, ref) {
   const {
     accent = false,
@@ -2944,7 +2962,7 @@ const Heading = react.forwardRef(function Heading2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsxRuntime.jsx(Root$o, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$n, {
     "data-ui": "Heading",
     ...restProps,
     $accent: accent,
@@ -2985,7 +3003,7 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$n = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
+const Root$m = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
 const Inline = react.forwardRef(function Inline2(props, ref) {
   const {
     as,
@@ -2996,7 +3014,7 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
   const children = react.useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsxRuntime.jsx("div", {
     children: child
   }, idx)), [childrenProp]);
-  return /* @__PURE__ */jsxRuntime.jsx(Root$n, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$m, {
     "data-ui": "Inline",
     ...restProps,
     $space: useArrayProp(space),
@@ -3005,16 +3023,16 @@ const Inline = react.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 styled.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 styled.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__default.default.kbd(responsiveRadiusStyle, kbdStyle);
+const Root$l = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = react.forwardRef(function KBD2(props, ref) {
   const {
     children,
@@ -3023,7 +3041,7 @@ const KBD = react.forwardRef(function KBD2(props, ref) {
     radius = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$m, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$l, {
     "data-ui": "KBD",
     ...restProps,
     $radius: useArrayProp(radius),
@@ -3040,6 +3058,45 @@ const KBD = react.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;
@@ -3094,20 +3151,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__default.default.div(_ref3 => {
+var _a$p, _b$f, _c$7;
+const Root$k = styled__default.default.div(_ref4 => {
   let {
     $w: w
-  } = _ref3;
-  return styled.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 styled.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__default.default.path(_b$f || (_b$f = __template$n(["\n  stroke: var(--card-shadow-outline-color);\n"])));
-const ShapePath = styled__default.default.path(_c$7 || (_c$7 = __template$n(["\n  fill: var(--card-bg-color);\n"])));
+const StrokePath = styled__default.default.path(_b$f || (_b$f = __template$p(["\n  stroke: var(--card-shadow-outline-color);\n"])));
+const ShapePath = styled__default.default.path(_c$7 || (_c$7 = __template$p(["\n  fill: var(--card-bg-color);\n"])));
 const Arrow = react.forwardRef(function Arrow2(props, ref) {
   const {
     width: w,
@@ -3143,7 +3200,7 @@ const Arrow = react.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__ */jsxRuntime.jsx(Root$l, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$k, {
     ...restProps,
     $w: w,
     ref,
@@ -3201,6 +3258,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) {
@@ -3250,8 +3318,8 @@ const ElementQuery = react.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,
@@ -3480,7 +3548,7 @@ function LayerProvider(props) {
     children
   });
 }
-const Root$k = styled__default.default.div({
+const Root$j = styled__default.default.div({
   position: "relative"
 });
 const LayerChildren = react.forwardRef(function LayerChildren2(props, ref) {
@@ -3516,7 +3584,7 @@ const LayerChildren = react.forwardRef(function LayerChildren2(props, ref) {
       lastFocusedRef.current = target;
     }
   }, [forwardedRef, isTopLayer, onFocus]);
-  return /* @__PURE__ */jsxRuntime.jsx(Root$k, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$j, {
     ...restProps,
     "data-ui": "Layer",
     onFocus: handleFocus,
@@ -3627,19 +3695,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__default.default.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__default.default.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 = react.forwardRef(function SrOnly2(props, ref) {
   const {
     as,
     children
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$j, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$i, {
     "aria-hidden": true,
     as,
     "data-ui": "SrOnly",
@@ -3647,14 +3715,14 @@ const SrOnly = react.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__default.default.div(_a$l || (_a$l = __template$l(["\n  position: relative;\n"])));
-const ItemWrapper = styled__default.default.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__default.default.div(_a$n || (_a$n = __template$n(["\n  position: relative;\n"])));
+const ItemWrapper = styled__default.default.div(_b$e || (_b$e = __template$n(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
   const {
     as = "div",
@@ -3760,7 +3828,7 @@ const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
   const wrapperStyle = react.useMemo(() => ({
     height
   }), [height]);
-  return /* @__PURE__ */jsxRuntime.jsx(Root$i, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$h, {
     as,
     "data-ui": "VirtualList",
     ...restProps,
@@ -3878,17 +3946,17 @@ function calcMaxWidth(params) {
   }
   return Math.min(currentWidth != null ? currentWidth : Infinity, (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2);
 }
-const Root$h = styled__default.default(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__default.default(framerMotion.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 = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
+    animate,
     arrow,
     arrowRef,
     arrowX,
@@ -3896,6 +3964,8 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     children,
     padding,
     placement,
+    originX,
+    originY,
     overflow,
     radius,
     scheme,
@@ -3915,20 +3985,22 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
   const x = (xProp != null ? xProp : 0) + margins[3];
   const y = (yProp != null ? yProp : 0) + margins[0];
   const rootStyle = react.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 = react.useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
     right: void 0,
     bottom: void 0
   }), [arrowX, arrowY]);
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$h, {
+  return /* @__PURE__ */jsxRuntime.jsxs(MotionCard$1, {
     "data-ui": "Popover",
     ...restProps,
     "data-placement": placement,
@@ -3939,6 +4011,7 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     sizing: "border",
     style: rootStyle,
     tone,
+    ...(animate ? POPOVER_MOTION_PROPS : {}),
     children: [/* @__PURE__ */jsxRuntime.jsx(Flex, {
       "data-ui": "Popover__wrapper",
       direction: "column",
@@ -3961,7 +4034,7 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = react.memo(react.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
@@ -3969,6 +4042,7 @@ const Popover = react.memo(react.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,
@@ -4056,13 +4130,13 @@ const Popover = react.memo(react.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;
@@ -4096,13 +4170,16 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
         padding: DEFAULT_POPOVER_PADDING
       }));
     }
+    if (animate) {
+      ret.push(origin);
+    }
     ret.push(reactDom$1.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,
@@ -4119,6 +4196,8 @@ const Popover = react.memo(react.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 = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
@@ -4161,6 +4240,7 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     children: /* @__PURE__ */jsxRuntime.jsx(PopoverCard, {
       ...restProps,
       __unstable_margins: margins,
+      animate,
       arrow: arrowProp,
       arrowRef: setArrow,
       arrowX,
@@ -4173,6 +4253,8 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
       ref: setFloating,
       scheme,
       shadow,
+      originX,
+      originY,
       strategy,
       tone,
       width: matchReferenceWidth ? referenceWidthRef.current : width,
@@ -4182,23 +4264,31 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
     })
   });
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [open && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
-        __unstable_name: typeof portal === "string" ? portal : void 0,
+    children: [/* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
+      condition: animate,
+      wrapper: children => /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
+        children
+      }),
+      children: open && /* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
+        condition: !!portal,
+        wrapper: children => /* @__PURE__ */jsxRuntime.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 styled.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 styled.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 {
@@ -4206,7 +4296,7 @@ function inputElementStyle(props) {
     input
   } = theme.getTheme_v2(props.theme);
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return styled.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 styled.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({
@@ -4251,27 +4341,27 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
     }), /* @__PURE__ */jsxRuntime.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 styled.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 styled.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
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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({
@@ -4314,7 +4404,7 @@ function iconBoxStyle(props) {
   const {
     color
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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,
@@ -4398,24 +4488,24 @@ const Stack = react.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 styled.css(_a$i || (_a$i = __template$i(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function switchInputStyles() {
-  return styled.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 styled.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
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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);
 }
@@ -4423,7 +4513,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.getTheme_v2(props.theme);
-  return styled.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 styled.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 {
@@ -4439,7 +4529,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 styled.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 && styled.css(_e$2 || (_e$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_f$2 || (_f$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return styled.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 && styled.css(_e$2 || (_e$2 = __template$j(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_f$2 || (_f$2 = __template$j(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 const Root$d = styled__default.default.span(switchBaseStyles);
 const Input$2 = styled__default.default.input(switchInputStyles);
@@ -4483,14 +4573,14 @@ const Switch = react.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__default.default.span(textInputRootStyle);
-const InputRoot$1 = styled__default.default.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__default.default.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__default.default.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation$1 = styled__default.default.div(responsiveRadiusStyle, textInputRepresentationStyle);
 const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
@@ -4534,30 +4624,30 @@ const TextArea = react.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__default.default(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled__default.default.span(_a$g || (_a$g = __template$g(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot = styled__default.default.span(_a$h || (_a$h = __template$h(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Prefix = styled__default.default(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__default.default(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__default.default.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled__default.default.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$g(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$g(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$g(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$h(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
+const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$h(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$h(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const TextInputClearButton = styled__default.default(Button)({
   "&:not([hidden])": {
     display: "block"
@@ -4725,17 +4815,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;
@@ -4755,6 +4834,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__default.default(framerMotion.motion(Card))(_a$g || (_a$g = __template$g([""])));
+const TooltipCard = react.memo(react.forwardRef(function TooltipCard2(props, ref) {
+  const {
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    ...restProps
+  } = props;
+  const rootStyle = react.useMemo(() => ({
+    originX,
+    originY,
+    ...style
+  }), [originX, originY, style]);
+  const arrowStyle = react.useMemo(() => ({
+    left: arrowX !== null ? arrowX : void 0,
+    top: arrowY !== null ? arrowY : void 0,
+    right: void 0,
+    bottom: void 0
+  }), [arrowX, arrowY]);
+  return /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.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] || react.createContext(null);
 const TooltipDelayGroupContext = globalScope[key$4];
@@ -4791,19 +4927,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__default.default(Layer)(_a$f || (_a$f = __template$f(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref6 => {
+const Root$a = styled__default.default(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 = react.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,
@@ -4818,7 +4955,6 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     shadow = 2,
     zOffset = layer.tooltip.zOffset,
     delay,
-    animate = false,
     ...restProps
   } = props;
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
@@ -4854,8 +4990,11 @@ const Tooltip = react.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,
@@ -4869,12 +5008,8 @@ const Tooltip = react.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 = react.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 = react.useId();
   const [isOpen, setIsOpen] = useDelayedState(false);
   const delayGroupContext = useTooltipDelayGroup();
@@ -4996,53 +5131,33 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   }, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
   if (!child) return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
-  const root = /* @__PURE__ */jsxRuntime.jsx(Root$a, {
+  const tooltip = /* @__PURE__ */jsxRuntime.jsx(Root$a, {
     "data-ui": "Tooltip",
     ...restProps,
     ref: setFloating,
     style: floatingStyles,
     zOffset,
     $maxWidth: tooltipWidth,
-    children: /* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
-      condition: animate,
-      wrapper: children => /* @__PURE__ */jsxRuntime.jsx(framerMotion.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__ */jsxRuntime.jsxs(Card, {
-        "data-ui": "Tooltip__card",
-        "data-placement": placement,
-        padding,
-        radius,
-        scheme,
-        shadow,
-        children: [content, arrowProp && /* @__PURE__ */jsxRuntime.jsx(Arrow, {
-          ref: setArrow,
-          style: arrowStyle,
-          width: DEFAULT_TOOLTIP_ARROW_WIDTH,
-          height: DEFAULT_TOOLTIP_ARROW_HEIGHT,
-          radius: DEFAULT_TOOLTIP_ARROW_RADIUS
-        })]
-      })
+    children: /* @__PURE__ */jsxRuntime.jsx(TooltipCard, {
+      ...restProps,
+      animate,
+      arrow: arrowProp,
+      arrowRef: setArrow,
+      arrowX,
+      arrowY,
+      originX,
+      originY,
+      padding,
+      placement,
+      radius,
+      ref: setFloating,
+      scheme,
+      shadow,
+      children: content
     })
   });
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [child, /* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
+    children: [/* @__PURE__ */jsxRuntime.jsx(ConditionalWrapper, {
       condition: animate,
       wrapper: children => /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
         children
@@ -5053,9 +5168,9 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
           __unstable_name: typeof portalProp === "string" ? portalProp : void 0,
           children
         }),
-        children: root
+        children: tooltip
       })
-    })]
+    }), child]
   });
 });
 var __freeze$e = Object.freeze;
@@ -5212,10 +5327,10 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     query,
     value
   } = state;
-  const defaultRenderOption = react.useCallback(_ref7 => {
+  const defaultRenderOption = react.useCallback(_ref8 => {
     let {
       value: value2
-    } = _ref7;
+    } = _ref8;
     return /* @__PURE__ */jsxRuntime.jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -5674,10 +5789,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: theme$1
-  } = _ref8;
+  } = _ref9;
   const {
     color
   } = theme.getTheme_v2(theme$1);
@@ -6751,15 +6866,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = styled.keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = styled.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 = styled.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 = styled.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 : styled.css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -7144,12 +7259,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
             initial: false,
-            children: state.map(_ref11 => {
+            children: state.map(_ref12 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref11;
+              } = _ref12;
               return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
                 animate: {
                   opacity: 1,
@@ -7657,6 +7772,7 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Code = Code;
 exports.CodeSkeleton = CodeSkeleton;
+exports.ConditionalWrapper = ConditionalWrapper;
 exports.Container = Container;
 exports.Dialog = Dialog;
 exports.DialogContext = DialogContext;