@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.21

package/dist/index.js

@@ -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
@@ -21,8 +21,42 @@ function _interopDefaultCompat(e) {
 var ReactIs__default = /*#__PURE__*/_interopDefaultCompat(ReactIs);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 var Refractor__default = /*#__PURE__*/_interopDefaultCompat(Refractor);
+const createColorTheme = theme.createColorTheme;
+const hexToRgb = theme.hexToRgb;
+const hslToRgb = theme.hslToRgb;
+const multiply = theme.multiply;
+const parseColor = theme.parseColor;
+const rgbToHex = theme.rgbToHex;
+const rgbToHsl = theme.rgbToHsl;
+const rgba = theme.rgba;
+const screen = theme.screen;
+const studioTheme = theme.buildTheme();
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
+const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity";
+const POPOVER_MOTION_PROPS = {
+  initial: {
+    opacity: 0.5,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+    scale: 0.97,
+    willChange: "transform"
+  },
+  animate: {
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, null, 1],
+    scale: 1
+  },
+  exit: {
+    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
+    opacity: [null, null, 0],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, 0, 0],
+    scale: 0.97
+  },
+  transition: {
+    duration: 0.4,
+    type: "spring"
+  }
+};
 function _fillCSSObject(keys, value) {
   return keys.reduce((style, key) => {
     style[key] = value;
@@ -1481,13 +1515,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;
 }
@@ -1501,7 +1535,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 {
@@ -1528,7 +1562,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      *:not(:invalid):disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      *:invalid:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:not(:invalid):read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      *:invalid: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        *:invalid:not(:disabled):not(:read-only):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        *:invalid:not(:disabled):not(:read-only):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({
@@ -1542,12 +1576,18 @@ function textInputRepresentationStyle(props) {
     focusRing: input.text.focusRing
   }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     focusRing: input.text.focusRing
-  }), color.input.default.disabled.bg, color.input.default.disabled.fg, focusRingBorderStyle({
+  }), color.input.default.disabled.bg, color.input.default.disabled.fg, color.input.default.disabled.fg, focusRingBorderStyle({
     color: color.input.default.disabled.border,
     width: input.border.width
-  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
+  }), color.input.invalid.disabled.bg, color.input.invalid.disabled.fg, color.input.invalid.disabled.fg, focusRingBorderStyle({
+    color: color.input.invalid.disabled.border,
+    width: input.border.width
+  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.invalid.readOnly.bg, color.input.invalid.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, color.input.invalid.hovered.bg, color.input.invalid.hovered.fg, focusRingBorderStyle({
     color: color.input.default.hovered.border,
     width: input.border.width
+  }), focusRingBorderStyle({
+    color: color.input.invalid.hovered.border,
+    width: input.border.width
   }));
 }
 function responsiveMarginStyle(props) {
@@ -1602,12 +1642,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,
@@ -1616,16 +1656,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,
@@ -1647,7 +1687,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,
@@ -1806,7 +1846,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);
@@ -1862,7 +1902,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",
@@ -1931,12 +1971,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,
@@ -1956,9 +1996,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,
@@ -1971,7 +2011,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,
@@ -1987,13 +2027,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;
 }
@@ -2012,7 +2052,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,
@@ -2027,7 +2067,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,
@@ -2049,7 +2089,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",
@@ -2080,7 +2120,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,
@@ -2114,12 +2154,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,
@@ -2128,16 +2168,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,
@@ -2155,7 +2195,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,
@@ -2184,7 +2224,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,
@@ -2196,7 +2236,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,
@@ -2205,12 +2245,11 @@ const Badge = react.forwardRef(function Badge2(props, ref) {
     ref,
     children: /* @__PURE__ */jsxRuntime.jsx(Text, {
       size: fontSize,
-      weight: "medium",
       children
     })
   });
 });
-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,
@@ -2221,7 +2260,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),
@@ -2233,16 +2272,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,
@@ -2253,6 +2292,7 @@ function _cardColorStyle(base, color) {
   let checkered = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return {
     // from base
+    "--card-backdrop-color": base.backdrop,
     "--card-focus-ring-color": base.focusRing,
     "--card-shadow-outline-color": base.shadow.outline,
     "--card-shadow-umbra-color": base.shadow.umbra,
@@ -2320,12 +2360,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
@@ -2333,7 +2373,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++) {
@@ -2388,14 +2428,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,
@@ -2447,7 +2487,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,
@@ -2471,16 +2511,13 @@ const Button = react.forwardRef(function Button2(props, ref) {
         children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
           children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
-        }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
-          flex: iconRight ? 1 : void 0,
-          children: /* @__PURE__ */jsxRuntime.jsx(Text, {
-            muted,
-            align: textAlign,
-            size: fontSize,
-            textOverflow: "ellipsis",
-            weight: button.textWeight,
-            children: text
-          })
+        }), text && /* @__PURE__ */jsxRuntime.jsx(Text, {
+          muted,
+          align: textAlign,
+          size: fontSize,
+          textOverflow: "ellipsis",
+          weight: button.textWeight,
+          children: text
         }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
           size: fontSize,
           children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
@@ -2493,12 +2530,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)];
 }
@@ -2509,7 +2546,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;
@@ -2526,7 +2563,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
@@ -2536,7 +2573,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,
@@ -2561,7 +2598,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",
@@ -2586,14 +2623,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 {
@@ -2604,7 +2641,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({
@@ -2637,7 +2674,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 {
@@ -2657,7 +2694,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,
@@ -2675,12 +2712,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
@@ -2802,9 +2839,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,
@@ -2815,7 +2852,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),
@@ -2846,14 +2883,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),
@@ -2861,7 +2898,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,
@@ -2876,7 +2913,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,
@@ -2893,12 +2930,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,
@@ -2907,16 +2944,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    & 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    }\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, font.heading.weights.bold);
 }
-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,
@@ -2934,7 +2971,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,
@@ -2975,7 +3012,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,
@@ -2986,7 +3023,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),
@@ -2995,16 +3032,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    &: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,
@@ -3013,7 +3050,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),
@@ -3030,6 +3067,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;
@@ -3084,20 +3160,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,
@@ -3133,7 +3209,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,
@@ -3191,6 +3267,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) {
@@ -3240,8 +3327,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,
@@ -3470,7 +3557,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) {
@@ -3506,7 +3593,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,
@@ -3617,19 +3704,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",
@@ -3637,14 +3724,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",
@@ -3750,7 +3837,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,
@@ -3868,17 +3955,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  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
+    animate,
     arrow,
     arrowRef,
     arrowX,
@@ -3886,6 +3973,8 @@ const PopoverCard = react.memo(react.forwardRef(function PopoverCard2(props, ref
     children,
     padding,
     placement,
+    originX,
+    originY,
     overflow,
     radius,
     scheme,
@@ -3905,20 +3994,23 @@ 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,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [strategy, style, width, x, y, zIndex]);
+  }), [animate, 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,
@@ -3929,6 +4021,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",
@@ -3951,7 +4044,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
@@ -3959,6 +4052,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,
@@ -4046,13 +4140,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;
@@ -4086,13 +4180,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,
@@ -4109,6 +4206,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;
   }, []);
@@ -4151,6 +4250,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,
@@ -4163,6 +4263,8 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
       ref: setFloating,
       scheme,
       shadow,
+      originX,
+      originY,
       strategy,
       tone,
       width: matchReferenceWidth ? referenceWidthRef.current : width,
@@ -4172,23 +4274,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 {
@@ -4196,7 +4306,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({
@@ -4241,27 +4351,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({
@@ -4304,7 +4414,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,
@@ -4321,7 +4431,7 @@ const Select = react.forwardRef(function Select2(props, forwardedRef) {
     disabled,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     readOnly,
     space = 3,
     ...restProps
@@ -4388,32 +4498,32 @@ 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\n    input:checked[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);
+  }), 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, color.input.default.readOnly.fg, color.input.default.readOnly.bg);
 }
 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 {
@@ -4429,7 +4539,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.05);\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);
@@ -4473,14 +4583,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) {
@@ -4524,30 +4634,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"
@@ -4715,17 +4825,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;
@@ -4745,6 +4844,64 @@ 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(["\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
+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,
+    willChange: animate ? "transform" : void 0,
+    ...style
+  }), [animate, 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];
@@ -4781,19 +4938,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,
@@ -4808,7 +4966,6 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     shadow = 2,
     zOffset = layer.tooltip.zOffset,
     delay,
-    animate = false,
     ...restProps
   } = props;
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
@@ -4844,8 +5001,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,
@@ -4859,12 +5019,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();
@@ -4986,53 +5142,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
@@ -5043,9 +5179,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;
@@ -5202,10 +5338,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,
@@ -5664,10 +5800,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);
@@ -5696,7 +5832,7 @@ function responsiveDialogPositionStyle(props) {
   }));
 }
 function animationDialogStyle(props) {
-  if (!props.animate) return styled.css(_a$c || (_a$c = __template$c([""])));
+  if (!props.$animate) return styled.css(_a$c || (_a$c = __template$c([""])));
   return styled.css(_b$7 || (_b$7 = __template$c(["\n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    animation: fadeIn 200ms ease-out;\n    // Animates the dialog card.\n    & > [data-ui='DialogCard'] {\n      animation: zoomIn 200ms ease-out;\n    }\n  "])));
 }
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
@@ -5919,6 +6055,7 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
     __unstable_name: portalProp,
     children: /* @__PURE__ */jsxRuntime.jsxs(Root$7, {
       ...restProps,
+      $animate: animate,
       $padding: padding,
       $position: position,
       "aria-labelledby": labelId,
@@ -5931,7 +6068,6 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
       ref,
       role: "dialog",
       zOffset,
-      animate,
       children: [/* @__PURE__ */jsxRuntime.jsx("div", {
         ref: preDivRef,
         tabIndex: 0
@@ -6335,6 +6471,9 @@ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
     setOpen(v => !v);
     setShouldFocus(null);
   }, []);
+  const handleMouseDown = react.useCallback(event => {
+    if (open) event.preventDefault();
+  }, [open]);
   const handleButtonKeyDown = react.useCallback(event => {
     if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -6418,11 +6557,12 @@ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
     id,
     onClick: handleButtonClick,
     onKeyDown: handleButtonKeyDown,
+    onMouseDown: handleMouseDown,
     "aria-haspopup": true,
     "aria-expanded": open,
     ref: setButtonRef,
     selected: open
-  }) : null, [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]);
+  }) : null, [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef]);
   const popoverProps = react.useMemo(() => ({
     boundaryElement: deprecated_boundaryElement,
     overflow: "auto",
@@ -6737,15 +6877,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);
@@ -6977,13 +7117,19 @@ const STATUS_CARD_TONE = {
   success: "positive",
   info: "primary"
 };
+const BUTTON_TONE = {
+  error: "critical",
+  warning: "caution",
+  success: "positive",
+  info: "primary"
+};
 const ROLES = {
   error: "alert",
   warning: "alert",
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled__default.default(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n"])));
+const Root$2 = styled__default.default(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TextBox = styled__default.default(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
@@ -6996,6 +7142,7 @@ function Toast(props) {
     ...restProps
   } = props;
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
+  const buttonTone = status ? BUTTON_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
   return /* @__PURE__ */jsxRuntime.jsx(Root$2, {
     "data-ui": "Toast",
@@ -7029,6 +7176,7 @@ function Toast(props) {
           icon: icons.CloseIcon,
           mode: "bleed",
           padding: 2,
+          tone: buttonTone,
           onClick: onClose,
           style: {
             verticalAlign: "top"
@@ -7130,20 +7278,22 @@ 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,
+                  opacity: [0, 1, 1],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
                   y: 0,
                   scale: 1
                 },
                 exit: {
-                  opacity: 0,
+                  opacity: [1, 1, 0],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
                   scale: 0.5,
                   transition: {
                     duration: 0.2
@@ -7151,8 +7301,10 @@ function ToastProvider(props) {
                 },
                 initial: {
                   opacity: 0,
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
                   y: 32,
-                  scale: 0.25
+                  scale: 0.25,
+                  willChange: "transform"
                 },
                 layout: "position",
                 transition: {
@@ -7629,222 +7781,6 @@ const TreeItem = react.memo(function TreeItem2(props) {
     })]
   });
 });
-Object.defineProperty(exports, 'COLOR_CONFIG_BLEND_KEYS', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_BLEND_KEYS;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_CARD_KEYS', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_CARD_KEYS;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_CARD_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_CARD_TONES;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_STATE_KEYS', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_STATE_KEYS;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_STATE_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_STATE_TONES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_BLEND_MODES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_BLEND_MODES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_BUTTON_MODES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_BUTTON_MODES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_CARD_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_CARD_TONES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_STATES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_STATES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_STATE_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_STATE_TONES;
-  }
-});
-Object.defineProperty(exports, 'buildTheme', {
-  enumerable: true,
-  get: function () {
-    return theme.buildTheme;
-  }
-});
-Object.defineProperty(exports, 'createColorTheme', {
-  enumerable: true,
-  get: function () {
-    return theme.createColorTheme;
-  }
-});
-Object.defineProperty(exports, 'hexToRgb', {
-  enumerable: true,
-  get: function () {
-    return theme.hexToRgb;
-  }
-});
-Object.defineProperty(exports, 'hslToRgb', {
-  enumerable: true,
-  get: function () {
-    return theme.hslToRgb;
-  }
-});
-Object.defineProperty(exports, 'isColorBlendModeValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorBlendModeValue;
-  }
-});
-Object.defineProperty(exports, 'isColorButtonMode', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorButtonMode;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigBaseKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigBaseKey;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigBaseTone', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigBaseTone;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigBlendKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigBlendKey;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigStateKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigStateKey;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigStateTone', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigStateTone;
-  }
-});
-Object.defineProperty(exports, 'isColorHueKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorHueKey;
-  }
-});
-Object.defineProperty(exports, 'isColorOpacityValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorOpacityValue;
-  }
-});
-Object.defineProperty(exports, 'isColorTintKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorTintKey;
-  }
-});
-Object.defineProperty(exports, 'isColorTokenValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorTokenValue;
-  }
-});
-Object.defineProperty(exports, 'isColorValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorValue;
-  }
-});
-Object.defineProperty(exports, 'multiply', {
-  enumerable: true,
-  get: function () {
-    return theme.multiply;
-  }
-});
-Object.defineProperty(exports, 'parseColor', {
-  enumerable: true,
-  get: function () {
-    return theme.parseColor;
-  }
-});
-Object.defineProperty(exports, 'parseTokenKey', {
-  enumerable: true,
-  get: function () {
-    return theme.parseTokenKey;
-  }
-});
-Object.defineProperty(exports, 'parseTokenValue', {
-  enumerable: true,
-  get: function () {
-    return theme.parseTokenValue;
-  }
-});
-Object.defineProperty(exports, 'rgbToHex', {
-  enumerable: true,
-  get: function () {
-    return theme.rgbToHex;
-  }
-});
-Object.defineProperty(exports, 'rgbToHsl', {
-  enumerable: true,
-  get: function () {
-    return theme.rgbToHsl;
-  }
-});
-Object.defineProperty(exports, 'rgba', {
-  enumerable: true,
-  get: function () {
-    return theme.rgba;
-  }
-});
-Object.defineProperty(exports, 'rgbaToRGBA', {
-  enumerable: true,
-  get: function () {
-    return theme.rgbaToRGBA;
-  }
-});
-Object.defineProperty(exports, 'screen', {
-  enumerable: true,
-  get: function () {
-    return theme.screen;
-  }
-});
-Object.defineProperty(exports, 'studioTheme', {
-  enumerable: true,
-  get: function () {
-    return theme.defaultTheme;
-  }
-});
 exports.Arrow = Arrow;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
@@ -7859,6 +7795,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;
@@ -7921,8 +7858,11 @@ exports._raf2 = _raf2;
 exports._responsive = _responsive;
 exports.attemptFocus = attemptFocus;
 exports.containsOrEqualsElement = containsOrEqualsElement;
+exports.createColorTheme = createColorTheme;
 exports.focusFirstDescendant = focusFirstDescendant;
 exports.focusLastDescendant = focusLastDescendant;
+exports.hexToRgb = hexToRgb;
+exports.hslToRgb = hslToRgb;
 exports.isFocusable = isFocusable;
 exports.isHTMLAnchorElement = isHTMLAnchorElement;
 exports.isHTMLButtonElement = isHTMLButtonElement;
@@ -7930,12 +7870,19 @@ exports.isHTMLElement = isHTMLElement;
 exports.isHTMLInputElement = isHTMLInputElement;
 exports.isHTMLSelectElement = isHTMLSelectElement;
 exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
+exports.multiply = multiply;
+exports.parseColor = parseColor;
 exports.rem = rem;
 exports.responsiveCodeFontStyle = responsiveCodeFontStyle;
 exports.responsiveHeadingFont = responsiveHeadingFont;
 exports.responsiveLabelFont = responsiveLabelFont;
 exports.responsiveTextAlignStyle = responsiveTextAlignStyle;
 exports.responsiveTextFont = responsiveTextFont;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsl = rgbToHsl;
+exports.rgba = rgba;
+exports.screen = screen;
+exports.studioTheme = studioTheme;
 exports.useArrayProp = useArrayProp;
 exports.useBoundaryElement = useBoundaryElement;
 exports.useClickOutside = useClickOutside;