@sanity/ui 1.7.3 → 1.7.4

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
@@ -983,7 +981,7 @@ function isHex(str) {
 function parseHsl(str) {
   const res = HSL_RE.exec(str);
   if (!res) {
-    throw new Error("parseHsl: string is not a HSL color: \"".concat(str, "\""));
+    throw new Error('parseHsl: string is not a HSL color: "'.concat(str, '"'));
   }
   return {
     h: parseInt(res[1]),
@@ -1006,7 +1004,7 @@ function parseColor(color) {
   if (color.startsWith("hsl(")) {
     return hslToRgb(parseHsl(color));
   }
-  throw new Error("parseColor: unexpected color format: \"".concat(color, "\""));
+  throw new Error('parseColor: unexpected color format: "'.concat(color, '"'));
 }
 function rgba(color, a) {
   const rgb = parseColor(color);
@@ -3797,7 +3795,13 @@ function responsiveInputPaddingIconRightStyle(props) {
     $iconRight: true
   });
 }
-const ROOT_STYLE = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
+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$B, _b$m, _c$d;
+const ROOT_STYLE = styled.css(_a$B || (_a$B = __template$B(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
@@ -3810,7 +3814,7 @@ function textInputBaseStyle(props) {
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  return styled.css(_b$m || (_b$m = __template$B(["\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.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -3841,7 +3845,7 @@ function textInputRepresentationStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return styled.css(_c$d || (_c$d = __template$B(["\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.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
@@ -3910,6 +3914,12 @@ function responsiveShadowStyle(props) {
   } = theme.sanity;
   return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow]));
 }
+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$A, _b$l, _c$c;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -3919,10 +3929,16 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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: 0 0 0 1px var(--card-bg-color), 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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return styled.css(_c$c || (_c$c = __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    }\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    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
+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$z;
 const Root$E = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$2 = styled__default.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const SpanWithTextOverflow$2 = 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,
@@ -4215,6 +4231,12 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
     })]
   });
 });
+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$y;
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     theme
@@ -4237,7 +4259,7 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return styled.css(_a$y || (_a$y = __template$y(["\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 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
 const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
@@ -4264,7 +4286,13 @@ function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
   return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node === "string");
 }
-const BASE_STYLES = styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+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$x;
+const BASE_STYLES = styled.css(_a$x || (_a$x = __template$x(["\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;
 }
@@ -4387,6 +4415,12 @@ const Box = react.forwardRef(function Box2(props, ref) {
     children: props.children
   });
 });
+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$w, _b$k, _c$b;
 function labelBaseStyle(props) {
   const {
     $accent,
@@ -4396,10 +4430,16 @@ function labelBaseStyle(props) {
   const {
     fonts
   } = theme.sanity;
-  return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
+  return styled.css(_c$b || (_c$b = __template$w(["\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$w || (_a$w = __template$w(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$k || (_b$k = __template$w(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
 }
+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$v;
 const Root$z = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled__default.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const SpanWithTextOverflow$1 = styled__default.default.span(_a$v || (_a$v = __template$v(["\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,
@@ -4499,8 +4539,14 @@ const Flex = react.forwardRef(function Flex2(props, ref) {
     ref
   });
 });
-const rotate$1 = styled.keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const Root$w = styled__default.default(Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+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$u, _b$j;
+const rotate$1 = styled.keyframes(_a$u || (_a$u = __template$u(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const Root$w = styled__default.default(Text)(_b$j || (_b$j = __template$u(["\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$w, {
     "data-ui": "Spinner",
@@ -4538,8 +4584,14 @@ function _colorVarsStyle(base, color) {
     "--card-hairline-hard-color": color.border
   };
 }
+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$t;
 function buttonBaseStyles() {
-  return styled.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\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\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  "])));
+  return styled.css(_a$t || (_a$t = __template$t(["\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\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  "])));
 }
 const buttonTheme = {
   border: {
@@ -4547,7 +4599,7 @@ const buttonTheme = {
   }
 };
 function buttonColorStyles(props) {
-  var _a, _b;
+  var _a2, _b;
   const {
     $mode,
     theme
@@ -4585,10 +4637,16 @@ function buttonColorStyles(props) {
       },
       "&[data-selected]": _colorVarsStyle(base, color.pressed)
     }
-  }, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.button) == null ? void 0 : _b.root].filter(Boolean);
+  }, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
 }
+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$s;
 const Root$v = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled__default.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\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 LoadingBox = styled__default.default.div(_a$s || (_a$s = __template$s(["\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,
@@ -4681,6 +4739,12 @@ const Button = react.forwardRef(function Button2(props, ref) {
     })]
   });
 });
+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$r, _b$i, _c$a;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -4690,10 +4754,10 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\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: 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(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\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$r(["\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: 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$r || (_a$r = __template$r(["\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 _a, _b;
+  var _a2, _b2;
   const {
     $checkered,
     $focusRing,
@@ -4711,7 +4775,7 @@ function cardColorStyle(props) {
     width: 0,
     color: "var(--card-border-color)"
   };
-  return styled.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
+  return styled.css(_c$a || (_c$a = __template$r(["\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 {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
     base,
     border,
     focusRing
@@ -4719,7 +4783,7 @@ function cardColorStyle(props) {
     base,
     border,
     focusRing
-  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
+  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
 }
 const Root$u = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Card = react.forwardRef(function Card2(props, ref) {
@@ -4771,8 +4835,14 @@ const Card = react.forwardRef(function Card2(props, ref) {
     })
   });
 });
+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$q, _b$h;
 function checkboxBaseStyles() {
-  return styled.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return styled.css(_a$q || (_a$q = __template$q(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   const {
@@ -4784,7 +4854,7 @@ function inputElementStyles(props) {
     input,
     radius
   } = theme.sanity;
-  return styled.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\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: 2 !important;\n        }\n      }\n    }\n\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 > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\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$q(["\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: 2 !important;\n        }\n      }\n    }\n\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 > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), rem(radius[2]), color.default.enabled.bg, focusRingStyle({
@@ -4841,6 +4911,12 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
     })]
   });
 });
+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$p;
 function codeSyntaxHighlightingStyle(_ref20) {
   let {
     theme
@@ -4958,7 +5034,7 @@ function codeSyntaxHighlightingStyle(_ref20) {
   };
 }
 function codeBaseStyle() {
-  return styled.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\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$p || (_a$p = __template$p(["\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$s = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = react.forwardRef(function Code2(props, ref) {
@@ -5052,16 +5128,28 @@ const Grid = react.forwardRef(function Grid2(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 _a$o, _b$g, _c$9;
 function headingBaseStyle(props) {
   const {
     $accent,
     $muted,
     theme
   } = props;
-  return styled.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\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: 0 0 0 1px var(--card-bg-color), 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(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  return styled.css(_c$9 || (_c$9 = __template$o(["\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$o || (_a$o = __template$o(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$g || (_b$g = __template$o(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
 }
+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 _a$n;
 const Root$p = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled__default.default.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const SpanWithTextOverflow = styled__default.default.span(_a$n || (_a$n = __template$n(["\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,
@@ -5139,8 +5227,14 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
     children
   });
 });
+var __freeze$m = Object.freeze;
+var __defProp$n = Object.defineProperty;
+var __template$m = (cooked, raw) => __freeze$m(__defProp$n(cooked, "raw", {
+  value: __freeze$m(raw || cooked.slice())
+}));
+var _a$m;
 function kbdStyle() {
-  return styled.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$m || (_a$m = __template$m(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 const Root$n = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = react.forwardRef(function KBD2(props, ref) {
@@ -5245,12 +5339,23 @@ const ElementQuery = react.forwardRef(function ElementQuery2(props, ref) {
     children
   });
 });
+var __defProp$m = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$m(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 class ErrorBoundary extends react.Component {
   constructor() {
     super(...arguments);
-    this.state = {
+    __publicField(this, "state", {
       error: null
-    };
+    });
   }
   static getDerivedStateFromError(error) {
     return {
@@ -5611,7 +5716,13 @@ function PortalProvider(props) {
     children
   });
 }
-const Root$l = styled__default.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n  overflow: clip;\n"])));
+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$l;
+const Root$l = styled__default.default.div(_a$l || (_a$l = __template$l(["\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,
@@ -5625,8 +5736,14 @@ const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
     children
   });
 });
-const Root$k = styled__default.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const ItemWrapper = styled__default.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+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$k, _b$f;
+const Root$k = styled__default.default.div(_a$k || (_a$k = __template$k(["\n  position: relative;\n"])));
+const ItemWrapper = styled__default.default.div(_b$f || (_b$f = __template$k(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
   const {
     as = "div",
@@ -5835,9 +5952,15 @@ function calcMaxWidth(params) {
   }
   return Math.min(currentWidth != null ? currentWidth : Infinity, (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2);
 }
-const Root$j = styled__default.default.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
-const BorderPath = styled__default.default.path(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const ShapePath = styled__default.default.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+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$j, _b$e, _c$8;
+const Root$j = styled__default.default.div(_a$j || (_a$j = __template$j(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
+const BorderPath = styled__default.default.path(_b$e || (_b$e = __template$j(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const ShapePath = styled__default.default.path(_c$8 || (_c$8 = __template$j(["\n  fill: var(--card-bg-color);\n"])));
 const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
   return /* @__PURE__ */jsxRuntime.jsx(Root$j, {
     "data-ui": "Popover__arrow",
@@ -6167,8 +6290,14 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
   });
 }));
 Popover.displayName = "Popover";
+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$i, _b$d;
 function radioBaseStyle() {
-  return styled.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
+  return styled.css(_a$i || (_a$i = __template$i(["\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 {
@@ -6180,7 +6309,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return styled.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
+  return styled.css(_b$d || (_b$d = __template$i(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
@@ -6221,15 +6350,21 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
     }), /* @__PURE__ */jsxRuntime.jsx("span", {})]
   });
 });
+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$h, _b$c, _c$7, _d$5;
 function rootStyle() {
-  return styled.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$h || (_a$h = __template$h(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return styled.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
+  return styled.css(_b$c || (_b$c = __template$h(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
 }
 function inputColorStyle(props) {
   const {
@@ -6240,7 +6375,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return styled.css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return styled.css(_c$7 || (_c$7 = __template$h(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6284,7 +6419,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return styled.css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
+  return styled.css(_d$5 || (_d$5 = __template$h(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
 }
 const selectStyle = {
   root: rootStyle,
@@ -6371,11 +6506,17 @@ const Stack = react.forwardRef(function Stack2(props, ref) {
     ref
   });
 });
+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, _b$b, _c$6, _d$4, _e$2, _f$2, _g;
 function switchBaseStyles() {
-  return styled.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$g || (_a$g = __template$g(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function switchInputStyles() {
-  return styled.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
+  return styled.css(_b$b || (_b$b = __template$g(["\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 {
@@ -6386,7 +6527,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return styled.css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return styled.css(_c$6 || (_c$6 = __template$g(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing
   }), color.positive.enabled.bg, color.positive.enabled.fg, color.default.hovered.bg, color.default.hovered.fg, color.positive.hovered.bg, color.positive.hovered.fg, color.default.disabled.bg, color.default.disabled.fg);
 }
@@ -6397,7 +6538,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return styled.css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
+  return styled.css(_d$4 || (_d$4 = __template$g(["\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 {
@@ -6414,7 +6555,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(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return styled.css(_g || (_g = __template$g(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_e$2 || (_e$2 = __template$g(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_f$2 || (_f$2 = __template$g(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 const Root$e = styled__default.default.span(switchBaseStyles);
 const Input$2 = styled__default.default.input(switchInputStyles);
@@ -6458,8 +6599,14 @@ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
     })]
   });
 });
+var __freeze$f = Object.freeze;
+var __defProp$f = Object.defineProperty;
+var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
+  value: __freeze$f(raw || cooked.slice())
+}));
+var _a$f;
 const Root$d = styled__default.default.span(textInputRootStyle);
-const InputRoot$1 = styled__default.default.span(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot$1 = styled__default.default.span(_a$f || (_a$f = __template$f(["\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) {
@@ -6503,24 +6650,30 @@ const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
     })
   });
 });
+var __freeze$e = Object.freeze;
+var __defProp$e = Object.defineProperty;
+var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
+  value: __freeze$e(raw || cooked.slice())
+}));
+var _a$e, _b$a, _c$5, _d$3, _e$1, _f$1;
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
 const Root$c = styled__default.default(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
-const InputRoot = styled__default.default.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot = styled__default.default.span(_a$e || (_a$e = __template$e(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Prefix = styled__default.default(Card).attrs({
   forwardedAs: "span"
-})(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\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$e(["\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"
-})(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_c$5 || (_c$5 = __template$e(["\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)(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled__default.default(Box)(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled__default.default(Card)(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["\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$e(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
+const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$e(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$e(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
   const {
     border = true,
@@ -6558,11 +6711,11 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     event.stopPropagation();
   }, []);
   const handleClearClick = react.useCallback(event => {
-    var _a;
+    var _a2;
     event.preventDefault();
     event.stopPropagation();
     if (onClear) onClear();
-    (_a = ref.current) == null ? void 0 : _a.focus();
+    (_a2 = ref.current) == null ? void 0 : _a2.focus();
   }, [onClear, ref]);
   const prefixNode = react.useMemo(() => prefix && /* @__PURE__ */jsxRuntime.jsx(Prefix, {
     borderTop: true,
@@ -6665,9 +6818,15 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     }), suffixNode]
   });
 });
-const Root$b = styled__default.default.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-const Border = styled__default.default.path(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled__default.default.path(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
+var __freeze$d = Object.freeze;
+var __defProp$d = Object.defineProperty;
+var __template$d = (cooked, raw) => __freeze$d(__defProp$d(cooked, "raw", {
+  value: __freeze$d(raw || cooked.slice())
+}));
+var _a$d, _b$9, _c$4;
+const Root$b = styled__default.default.div(_a$d || (_a$d = __template$d(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+const Border = styled__default.default.path(_b$9 || (_b$9 = __template$d(["\n  fill: var(--card-shadow-outline-color);\n"])));
+const Shape = styled__default.default.path(_c$4 || (_c$4 = __template$d(["\n  fill: var(--card-bg-color);\n"])));
 const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
   const {
     ...restProps
@@ -6688,9 +6847,15 @@ const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
     })
   });
 });
-const Root$a = styled__default.default(Layer)(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+var __freeze$c = Object.freeze;
+var __defProp$c = Object.defineProperty;
+var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
+  value: __freeze$c(raw || cooked.slice())
+}));
+var _a$c;
+const Root$a = styled__default.default(Layer)(_a$c || (_a$c = __template$c(["\n  pointer-events: none;\n"])));
 const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
@@ -6704,7 +6869,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     portal,
     scheme,
     shadow = 2,
-    zOffset = (_a = theme.sanity.layer) == null ? void 0 : _a.tooltip.zOffset,
+    zOffset = (_a2 = theme.sanity.layer) == null ? void 0 : _a2.tooltip.zOffset,
     ...restProps
   } = props;
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
@@ -6849,10 +7014,16 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     })]
   });
 });
-const Root$9 = styled__default.default.div(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  line-height: 0;\n"])));
-const ListBox = styled__default.default(Box)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const rotate = styled.keyframes(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+var __freeze$b = Object.freeze;
+var __defProp$b = Object.defineProperty;
+var __template$b = (cooked, raw) => __freeze$b(__defProp$b(cooked, "raw", {
+  value: __freeze$b(raw || cooked.slice())
+}));
+var _a$b, _b$8, _c$3, _d$2;
+const Root$9 = styled__default.default.div(_a$b || (_a$b = __template$b(["\n  line-height: 0;\n"])));
+const ListBox = styled__default.default(Box)(_b$8 || (_b$8 = __template$b(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+const rotate = styled.keyframes(_c$3 || (_c$3 = __template$b(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_d$2 || (_d$2 = __template$b(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
 function AutocompleteOption(props) {
   const {
     children,
@@ -7376,8 +7547,14 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
   });
 });
 const Autocomplete = InnerAutocomplete;
-const Root$8 = styled__default.default.ol(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
-const ExpandButton = styled__default.default(Button)(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
+var __freeze$a = Object.freeze;
+var __defProp$a = Object.defineProperty;
+var __template$a = (cooked, raw) => __freeze$a(__defProp$a(cooked, "raw", {
+  value: __freeze$a(raw || cooked.slice())
+}));
+var _a$a, _b$7;
+const Root$8 = styled__default.default.ol(_a$a || (_a$a = __template$a(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
+const ExpandButton = styled__default.default(Button)(_b$7 || (_b$7 = __template$a(["\n  appearance: none;\n  margin: -4px;\n"])));
 const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
   const {
     children,
@@ -7487,19 +7664,25 @@ const DialogContext = globalScope[key$3];
 function useDialog() {
   return react.useContext(DialogContext);
 }
+var __freeze$9 = Object.freeze;
+var __defProp$9 = Object.defineProperty;
+var __template$9 = (cooked, raw) => __freeze$9(__defProp$9(cooked, "raw", {
+  value: __freeze$9(raw || cooked.slice())
+}));
+var _a$9, _b$6, _c$2, _d$1, _e, _f;
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   if (!boundaryElement || !portalElement) return true;
   return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
 const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-const DialogContainer = styled__default.default(Container)(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
-const DialogCardRoot = styled__default.default(Card)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n  overflow: clip;\n"])));
-const DialogLayout = styled__default.default(Flex)(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled__default.default(Card)(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
-const DialogContent = styled__default.default(Box)(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled__default.default(Box)(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
+const DialogContainer = styled__default.default(Container)(_a$9 || (_a$9 = __template$9(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+const DialogCardRoot = styled__default.default(Card)(_b$6 || (_b$6 = __template$9(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const DialogLayout = styled__default.default(Flex)(_c$2 || (_c$2 = __template$9(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
+const DialogHeader = styled__default.default(Card)(_d$1 || (_d$1 = __template$9(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
+const DialogContent = styled__default.default(Box)(_e || (_e = __template$9(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
+const DialogFooter = styled__default.default(Box)(_f || (_f = __template$9(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
 const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
-  var _a;
+  var _a2;
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -7517,7 +7700,7 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
     width: widthProp
   } = props;
   const portal = usePortal();
-  const portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element;
+  const portalElement = portalProp ? ((_a2 = portal.elements) == null ? void 0 : _a2[portalProp]) || null : portal.element;
   const boundaryElement = useBoundaryElement().element;
   const radius = useArrayProp(radiusProp);
   const shadow = useArrayProp(shadowProp);
@@ -7611,7 +7794,7 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
   });
 });
 const Dialog = react.forwardRef(function Dialog2(props, ref) {
-  var _a, _b;
+  var _a2, _b2;
   const dialog = useDialog();
   const theme = useTheme();
   const {
@@ -7633,11 +7816,11 @@ const Dialog = react.forwardRef(function Dialog2(props, ref) {
     position: positionProp = dialog.position || "fixed",
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || ((_a = theme.sanity.layer) == null ? void 0 : _a.dialog.zOffset),
+    zOffset: zOffsetProp = dialog.zOffset || ((_a2 = theme.sanity.layer) == null ? void 0 : _a2.dialog.zOffset),
     ...restProps
   } = props;
   const portal = usePortal();
-  const portalElement = portalProp ? ((_b = portal.elements) == null ? void 0 : _b[portalProp]) || null : portal.element;
+  const portalElement = portalProp ? ((_b2 = portal.elements) == null ? void 0 : _b2[portalProp]) || null : portal.element;
   const boundaryElement = useBoundaryElement().element;
   const cardRadius = useArrayProp(cardRadiusProp);
   const padding = useArrayProp(paddingProp);
@@ -7741,8 +7924,14 @@ function DialogProvider(props) {
     children
   });
 }
-const Root$6 = styled__default.default.kbd(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
-const Key = styled__default.default(KBD)(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
+var __freeze$8 = Object.freeze;
+var __defProp$8 = Object.defineProperty;
+var __template$8 = (cooked, raw) => __freeze$8(__defProp$8(cooked, "raw", {
+  value: __freeze$8(raw || cooked.slice())
+}));
+var _a$8, _b$5;
+const Root$6 = styled__default.default.kbd(_a$8 || (_a$8 = __template$8(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+const Key = styled__default.default(KBD)(_b$5 || (_b$5 = __template$8(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
   const {
     fontSize,
@@ -7963,7 +8152,13 @@ function useMenuController(props) {
     setRootElement
   };
 }
-const Root$5 = styled__default.default(Box)(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
+var __freeze$7 = Object.freeze;
+var __defProp$7 = Object.defineProperty;
+var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
+  value: __freeze$7(raw || cooked.slice())
+}));
+var _a$7;
+const Root$5 = styled__default.default(Box)(_a$7 || (_a$7 = __template$7(["\n  outline: none;\n  overflow: auto;\n"])));
 const Menu = react.forwardRef(function Menu2(props, ref) {
   const {
     children,
@@ -8196,12 +8391,24 @@ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
     children: button || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {})
   });
 });
-const MenuDivider = styled__default.default.hr(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+var __freeze$6 = Object.freeze;
+var __defProp$6 = Object.defineProperty;
+var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
+  value: __freeze$6(raw || cooked.slice())
+}));
+var _a$6;
+const MenuDivider = styled__default.default.hr(_a$6 || (_a$6 = __template$6(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+var __freeze$5 = Object.freeze;
+var __defProp$5 = Object.defineProperty;
+var __template$5 = (cooked, raw) => __freeze$5(__defProp$5(cooked, "raw", {
+  value: __freeze$5(raw || cooked.slice())
+}));
+var _a$5, _b$4;
 function selectableBaseStyle() {
-  return styled.css(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return styled.css(_a$5 || (_a$5 = __template$5(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
-  var _a, _b;
+  var _a2, _b2;
   const {
     $tone,
     theme
@@ -8212,7 +8419,7 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return styled.css(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b = (_a = theme.sanity.styles) == null ? void 0 : _a.card) == null ? void 0 : _b.root);
+  return styled.css(_b$4 || (_b$4 = __template$5(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
 }
 const Selectable = styled__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -8474,9 +8681,15 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
     })]
   });
 });
-const keyframe = styled.keyframes(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = styled.css(_templateObject78 || (_templateObject78 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = styled.css(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref24 => {
+var __freeze$4 = Object.freeze;
+var __defProp$4 = Object.defineProperty;
+var __template$4 = (cooked, raw) => __freeze$4(__defProp$4(cooked, "raw", {
+  value: __freeze$4(raw || cooked.slice())
+}));
+var _a$4, _b$3, _c$1, _d;
+const keyframe = styled.keyframes(_a$4 || (_a$4 = __template$4(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
+const animation = styled.css(_b$3 || (_b$3 = __template$4(["\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$4(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref24 => {
   let {
     $visible
   } = _ref24;
@@ -8485,7 +8698,7 @@ const skeletonStyle = styled.css(_templateObject79 || (_templateObject79 = _tagg
   let {
     $animated
   } = _ref25;
-  return $animated ? animation : styled.css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
+  return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$4(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
 const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
@@ -8690,6 +8903,12 @@ const TabPanel = react.forwardRef(function TabPanel2(props, ref) {
     children: props.children
   });
 });
+var __freeze$3 = Object.freeze;
+var __defProp$3 = Object.defineProperty;
+var __template$3 = (cooked, raw) => __freeze$3(__defProp$3(cooked, "raw", {
+  value: __freeze$3(raw || cooked.slice())
+}));
+var _a$3, _b$2;
 const STATUS_CARD_TONE = {
   error: "critical",
   warning: "caution",
@@ -8702,8 +8921,8 @@ const ROLES = {
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled__default.default(Card)(_templateObject81 || (_templateObject81 = _taggedTemplateLiteral(["\n  pointer-events: all;\n"])));
-const TextBox = styled__default.default(Flex)(_templateObject82 || (_templateObject82 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
+const Root$2 = styled__default.default(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n"])));
+const TextBox = styled__default.default(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
     closable,
@@ -8763,8 +8982,14 @@ function useMounted() {
 const key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || react.createContext(null);
 const ToastContext = globalScope[key$1];
-const Root$1 = styled__default.default(Layer)(_templateObject83 || (_templateObject83 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
-const ToastContainer = styled__default.default.div(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
+var __freeze$2 = Object.freeze;
+var __defProp$2 = Object.defineProperty;
+var __template$2 = (cooked, raw) => __freeze$2(__defProp$2(cooked, "raw", {
+  value: __freeze$2(raw || cooked.slice())
+}));
+var _a$2, _b$1;
+const Root$1 = styled__default.default(Layer)(_a$2 || (_a$2 = __template$2(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
+const ToastContainer = styled__default.default.div(_b$1 || (_b$1 = __template$2(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
 let toastId = 0;
 function ToastProvider(props) {
   const {
@@ -8781,8 +9006,8 @@ function ToastProvider(props) {
     const id = params.id || String(toastId++);
     const duration = params.duration || 5e3;
     const dismiss = () => {
-      var _a;
-      const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
+      var _a2;
+      const timeoutId = (_a2 = toastsRef.current[id]) == null ? void 0 : _a2.timeoutId;
       setState(prevState => {
         const idx = prevState.findIndex(t => t.id === id);
         if (idx > -1) {
@@ -9130,8 +9355,14 @@ const Tree = react.memo(react.forwardRef(function Tree2(props, ref) {
   });
 }));
 Tree.displayName = "Tree";
+var __freeze$1 = Object.freeze;
+var __defProp$1 = Object.defineProperty;
+var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", {
+  value: __freeze$1(raw || cooked.slice())
+}));
+var _a$1, _b, _c;
 function treeItemRootStyle() {
-  return styled.css(_templateObject85 || (_templateObject85 = _taggedTemplateLiteral(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
+  return styled.css(_a$1 || (_a$1 = __template$1(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
 }
 function treeItemRootColorStyle(props) {
   const {
@@ -9144,7 +9375,7 @@ function treeItemRootColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return styled.css(_templateObject86 || (_templateObject86 = _taggedTemplateLiteral(["\n    /* <div role=\"none\"><a data-ui=\"TreeItem__box\" role=\"treeitem\" tabIndex=\"0\"></div> */\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    /* <div role=\"treeitem\" tabIndex=\"0\"><div data-ui=\"TreeItem__box\"></div> */\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
+  return styled.css(_b || (_b = __template$1(['\n    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */\n    &[role=\'none\'] {\n      & > [role=\'treeitem\'] {\n        ', "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", '\n        }\n      }\n    }\n\n    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */\n    &[role=\'treeitem\'] {\n      & > [data-ui=\'TreeItem__box\'] {\n        ', "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
 }
 function treeItemBoxStyle(props) {
   const {
@@ -9154,7 +9385,7 @@ function treeItemBoxStyle(props) {
   const {
     space
   } = theme.sanity;
-  return styled.css(_templateObject87 || (_templateObject87 = _taggedTemplateLiteral(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
+  return styled.css(_c || (_c = __template$1(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
 }
 function useTree() {
   const tree = react.useContext(TreeContext);
@@ -9181,11 +9412,17 @@ const TreeGroup = react.memo(function TreeGroup2(props) {
     children
   });
 });
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
+  value: __freeze(raw || cooked.slice())
+}));
+var _a;
 const Root = react.memo(styled__default.default.li(treeItemRootStyle, treeItemRootColorStyle));
 const TreeItemBox = styled__default.default(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle);
-const ToggleArrowText = styled__default.default(Text)(_templateObject88 || (_templateObject88 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
+const ToggleArrowText = styled__default.default(Text)(_a || (_a = __template(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
 const TreeItem = react.memo(function TreeItem2(props) {
   const {
     children,