@sanity/ui 1.7.4 → 1.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -3795,13 +3795,13 @@ function responsiveInputPaddingIconRightStyle(props) {
3795
3795
  $iconRight: true
3796
3796
  });
3797
3797
  }
3798
- var __freeze$B = Object.freeze;
3799
- var __defProp$C = Object.defineProperty;
3800
- var __template$B = (cooked, raw) => __freeze$B(__defProp$C(cooked, "raw", {
3801
- value: __freeze$B(raw || cooked.slice())
3798
+ var __freeze$D = Object.freeze;
3799
+ var __defProp$E = Object.defineProperty;
3800
+ var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", {
3801
+ value: __freeze$D(raw || cooked.slice())
3802
3802
  }));
3803
- var _a$B, _b$m, _c$d;
3804
- const ROOT_STYLE = styled.css(_a$B || (_a$B = __template$B(["\n &:not([hidden]) {\n display: flex;\n }\n\n align-items: center;\n"])));
3803
+ var _a$D, _b$m, _c$d;
3804
+ const ROOT_STYLE = styled.css(_a$D || (_a$D = __template$D(["\n &:not([hidden]) {\n display: flex;\n }\n\n align-items: center;\n"])));
3805
3805
  function textInputRootStyle() {
3806
3806
  return ROOT_STYLE;
3807
3807
  }
@@ -3814,7 +3814,7 @@ function textInputBaseStyle(props) {
3814
3814
  } = props;
3815
3815
  const font = theme.sanity.fonts.text;
3816
3816
  const color = theme.sanity.color.input;
3817
- 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);
3817
+ return styled.css(_b$m || (_b$m = __template$D(["\n appearance: none;\n background: none;\n border: 0;\n border-radius: 0;\n outline: none;\n width: 100%;\n box-sizing: border-box;\n font-family: ", ";\n font-weight: ", ";\n margin: 0;\n position: relative;\n z-index: 1;\n display: block;\n\n /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: var(--input-fg-color) !important;\n transition: background-color 5000s;\n transition-delay: 86400s /* 24h */;\n }\n\n /* &:is(textarea) */\n &[data-as='textarea'] {\n resize: none;\n }\n\n color: var(--input-fg-color);\n\n &::placeholder {\n color: var(--input-placeholder-color);\n }\n\n &[data-scheme='", "'][data-tone='", "'] {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n\n /* enabled */\n &:not(:invalid):not(:disabled):not(:read-only) {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* disabled */\n &:not(:invalid):disabled {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* invalid */\n &:invalid {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n\n /* readOnly */\n &:read-only {\n --input-fg-color: ", ";\n --input-placeholder-color: ", ";\n }\n }\n "])), font.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);
3818
3818
  }
3819
3819
  function textInputFontSizeStyle(props) {
3820
3820
  const {
@@ -3845,7 +3845,7 @@ function textInputRepresentationStyle(props) {
3845
3845
  input
3846
3846
  } = theme.sanity;
3847
3847
  const color = theme.sanity.color.input;
3848
- 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({
3848
+ return styled.css(_c$d || (_c$d = __template$D(["\n --input-box-shadow: none;\n\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: block;\n pointer-events: none;\n z-index: 0;\n\n background-color: var(--card-bg-color);\n box-shadow: var(--input-box-shadow);\n\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n\n &[data-scheme='", "'][data-tone='", "'] {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n\n /* enabled */\n *:not(:disabled) + &[data-border] {\n --input-box-shadow: ", ";\n }\n\n /* invalid */\n *:not(:disabled):invalid + & {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n\n &[data-border] {\n --input-box-shadow: ", ";\n }\n }\n\n /* focused */\n *:not(:disabled):focus + & {\n &[data-border] {\n --input-box-shadow: ", ";\n }\n\n &:not([data-border]) {\n --input-box-shadow: ", ";\n }\n }\n\n /* disabled */\n *:disabled + & {\n --card-bg-color: ", " !important;\n --card-fg-color: ", " !important;\n\n &[data-border] {\n --input-box-shadow: ", ";\n }\n }\n\n /* readOnly */\n *:read-only + & {\n --card-bg-color: ", " !important;\n --card-fg-color: ", " !important;\n }\n\n /* hovered */\n @media (hover: hover) {\n *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n --card-bg-color: ", ";\n --card-fg-color: ", ";\n }\n\n *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n --input-box-shadow: ", ";\n }\n }\n }\n "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
3849
3849
  color: color.default.enabled.border,
3850
3850
  width: input.border.width
3851
3851
  }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
@@ -3914,12 +3914,12 @@ function responsiveShadowStyle(props) {
3914
3914
  } = theme.sanity;
3915
3915
  return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow]));
3916
3916
  }
3917
- var __freeze$A = Object.freeze;
3918
- var __defProp$B = Object.defineProperty;
3919
- var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
3920
- value: __freeze$A(raw || cooked.slice())
3917
+ var __freeze$C = Object.freeze;
3918
+ var __defProp$D = Object.defineProperty;
3919
+ var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", {
3920
+ value: __freeze$C(raw || cooked.slice())
3921
3921
  }));
3922
- var _a$A, _b$l, _c$c;
3922
+ var _a$C, _b$l, _c$c;
3923
3923
  function textBaseStyle(props) {
3924
3924
  const {
3925
3925
  $accent,
@@ -3929,16 +3929,16 @@ function textBaseStyle(props) {
3929
3929
  const {
3930
3930
  weights
3931
3931
  } = theme.sanity.fonts.text;
3932
- 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);
3932
+ return styled.css(_c$c || (_c$c = __template$C(["\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$C || (_a$C = __template$C(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_b$l || (_b$l = __template$C(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family, weights.bold);
3933
3933
  }
3934
- var __freeze$z = Object.freeze;
3935
- var __defProp$A = Object.defineProperty;
3936
- var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
3937
- value: __freeze$z(raw || cooked.slice())
3934
+ var __freeze$B = Object.freeze;
3935
+ var __defProp$C = Object.defineProperty;
3936
+ var __template$B = (cooked, raw) => __freeze$B(__defProp$C(cooked, "raw", {
3937
+ value: __freeze$B(raw || cooked.slice())
3938
3938
  }));
3939
- var _a$z;
3939
+ var _a$B;
3940
3940
  const Root$E = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
3941
- 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"])));
3941
+ const SpanWithTextOverflow$2 = styled__default.default.span(_a$B || (_a$B = __template$B(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
3942
3942
  const Text = react.forwardRef(function Text2(props, ref) {
3943
3943
  const {
3944
3944
  accent = false,
@@ -4231,12 +4231,12 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
4231
4231
  })]
4232
4232
  });
4233
4233
  });
4234
- var __freeze$y = Object.freeze;
4235
- var __defProp$z = Object.defineProperty;
4236
- var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
4237
- value: __freeze$y(raw || cooked.slice())
4234
+ var __freeze$A = Object.freeze;
4235
+ var __defProp$B = Object.defineProperty;
4236
+ var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
4237
+ value: __freeze$A(raw || cooked.slice())
4238
4238
  }));
4239
- var _a$y;
4239
+ var _a$A;
4240
4240
  function _responsiveAvatarCounterSizeStyle(props) {
4241
4241
  const {
4242
4242
  theme
@@ -4259,7 +4259,7 @@ function _avatarCounterBaseStyle(props) {
4259
4259
  const {
4260
4260
  theme
4261
4261
  } = props;
4262
- 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]));
4262
+ return styled.css(_a$A || (_a$A = __template$A(["\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n user-select: none;\n color: inherit;\n color: var(--card-fg-color);\n background: var(--card-bg-color);\n box-shadow:\n 0 0 0 1px var(--card-bg-color),\n inset 0 0 0 1.5px var(--card-hairline-hard-color);\n padding: 0 ", ";\n\n &:not([hidden]) {\n display: flex;\n }\n "])), rem(theme.sanity.space[2]));
4263
4263
  }
4264
4264
  const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
4265
4265
  const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
@@ -4286,13 +4286,13 @@ function childrenToElementArray(children) {
4286
4286
  const childrenArray = Array.isArray(children) ? children : [children];
4287
4287
  return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node === "string");
4288
4288
  }
4289
- var __freeze$x = Object.freeze;
4290
- var __defProp$y = Object.defineProperty;
4291
- var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
4292
- value: __freeze$x(raw || cooked.slice())
4289
+ var __freeze$z = Object.freeze;
4290
+ var __defProp$A = Object.defineProperty;
4291
+ var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
4292
+ value: __freeze$z(raw || cooked.slice())
4293
4293
  }));
4294
- var _a$x;
4295
- 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"])));
4294
+ var _a$z;
4295
+ const BASE_STYLES = styled.css(_a$z || (_a$z = __template$z(["\n white-space: nowrap;\n\n & > div {\n vertical-align: top;\n\n &:not([hidden]) {\n display: inline-block;\n }\n }\n"])));
4296
4296
  function avatarStackStyle() {
4297
4297
  return BASE_STYLES;
4298
4298
  }
@@ -4415,12 +4415,12 @@ const Box = react.forwardRef(function Box2(props, ref) {
4415
4415
  children: props.children
4416
4416
  });
4417
4417
  });
4418
- var __freeze$w = Object.freeze;
4419
- var __defProp$x = Object.defineProperty;
4420
- var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
4421
- value: __freeze$w(raw || cooked.slice())
4418
+ var __freeze$y = Object.freeze;
4419
+ var __defProp$z = Object.defineProperty;
4420
+ var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
4421
+ value: __freeze$y(raw || cooked.slice())
4422
4422
  }));
4423
- var _a$w, _b$k, _c$b;
4423
+ var _a$y, _b$k, _c$b;
4424
4424
  function labelBaseStyle(props) {
4425
4425
  const {
4426
4426
  $accent,
@@ -4430,16 +4430,16 @@ function labelBaseStyle(props) {
4430
4430
  const {
4431
4431
  fonts
4432
4432
  } = theme.sanity;
4433
- 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);
4433
+ return styled.css(_c$b || (_c$b = __template$y(["\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$y || (_a$y = __template$y(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_b$k || (_b$k = __template$y(["\n color: var(--card-muted-fg-color);\n "]))), fonts.code.family);
4434
4434
  }
4435
- var __freeze$v = Object.freeze;
4436
- var __defProp$w = Object.defineProperty;
4437
- var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
4438
- value: __freeze$v(raw || cooked.slice())
4435
+ var __freeze$x = Object.freeze;
4436
+ var __defProp$y = Object.defineProperty;
4437
+ var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
4438
+ value: __freeze$x(raw || cooked.slice())
4439
4439
  }));
4440
- var _a$v;
4440
+ var _a$x;
4441
4441
  const Root$z = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
4442
- 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"])));
4442
+ const SpanWithTextOverflow$1 = styled__default.default.span(_a$x || (_a$x = __template$x(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
4443
4443
  const Label = react.forwardRef(function Label2(props, ref) {
4444
4444
  const {
4445
4445
  accent,
@@ -4539,14 +4539,14 @@ const Flex = react.forwardRef(function Flex2(props, ref) {
4539
4539
  ref
4540
4540
  });
4541
4541
  });
4542
- var __freeze$u = Object.freeze;
4543
- var __defProp$v = Object.defineProperty;
4544
- var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
4545
- value: __freeze$u(raw || cooked.slice())
4542
+ var __freeze$w = Object.freeze;
4543
+ var __defProp$x = Object.defineProperty;
4544
+ var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
4545
+ value: __freeze$w(raw || cooked.slice())
4546
4546
  }));
4547
- var _a$u, _b$j;
4548
- 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"])));
4549
- 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);
4547
+ var _a$w, _b$j;
4548
+ const rotate$1 = styled.keyframes(_a$w || (_a$w = __template$w(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
4549
+ const Root$w = styled__default.default(Text)(_b$j || (_b$j = __template$w(["\n & > span > svg {\n animation: ", " 500ms linear infinite;\n }\n"])), rotate$1);
4550
4550
  const Spinner = react.forwardRef(function Spinner2(props, ref) {
4551
4551
  return /* @__PURE__ */jsxRuntime.jsx(Root$w, {
4552
4552
  "data-ui": "Spinner",
@@ -4584,14 +4584,14 @@ function _colorVarsStyle(base, color) {
4584
4584
  "--card-hairline-hard-color": color.border
4585
4585
  };
4586
4586
  }
4587
- var __freeze$t = Object.freeze;
4588
- var __defProp$u = Object.defineProperty;
4589
- var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
4590
- value: __freeze$t(raw || cooked.slice())
4587
+ var __freeze$v = Object.freeze;
4588
+ var __defProp$w = Object.defineProperty;
4589
+ var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
4590
+ value: __freeze$v(raw || cooked.slice())
4591
4591
  }));
4592
- var _a$t;
4592
+ var _a$v;
4593
4593
  function buttonBaseStyles() {
4594
- 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 "])));
4594
+ return styled.css(_a$v || (_a$v = __template$v(["\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 "])));
4595
4595
  }
4596
4596
  const buttonTheme = {
4597
4597
  border: {
@@ -4639,14 +4639,14 @@ function buttonColorStyles(props) {
4639
4639
  }
4640
4640
  }, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
4641
4641
  }
4642
- var __freeze$s = Object.freeze;
4643
- var __defProp$t = Object.defineProperty;
4644
- var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
4645
- value: __freeze$s(raw || cooked.slice())
4642
+ var __freeze$u = Object.freeze;
4643
+ var __defProp$v = Object.defineProperty;
4644
+ var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
4645
+ value: __freeze$u(raw || cooked.slice())
4646
4646
  }));
4647
- var _a$s;
4647
+ var _a$u;
4648
4648
  const Root$v = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
4649
- 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"])));
4649
+ const LoadingBox = styled__default.default.div(_a$u || (_a$u = __template$u(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--card-bg-color);\n border-radius: inherit;\n z-index: 1;\n box-shadow: inherit;\n"])));
4650
4650
  const Button = react.forwardRef(function Button2(props, ref) {
4651
4651
  const {
4652
4652
  children,
@@ -4739,12 +4739,12 @@ const Button = react.forwardRef(function Button2(props, ref) {
4739
4739
  })]
4740
4740
  });
4741
4741
  });
4742
- var __freeze$r = Object.freeze;
4743
- var __defProp$s = Object.defineProperty;
4744
- var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
4745
- value: __freeze$r(raw || cooked.slice())
4742
+ var __freeze$t = Object.freeze;
4743
+ var __defProp$u = Object.defineProperty;
4744
+ var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
4745
+ value: __freeze$t(raw || cooked.slice())
4746
4746
  }));
4747
- var _a$r, _b$i, _c$a;
4747
+ var _a$t, _b$i, _c$a;
4748
4748
  function cardStyle(props) {
4749
4749
  return [cardBaseStyle(props), cardColorStyle(props)];
4750
4750
  }
@@ -4754,7 +4754,7 @@ function cardBaseStyle(props) {
4754
4754
  theme
4755
4755
  } = props;
4756
4756
  const space = theme.sanity.space;
4757
- 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]));
4757
+ return styled.css(_b$i || (_b$i = __template$t(["\n ", "\n\n &[data-as='button'] {\n -webkit-font-smoothing: inherit;\n appearance: none;\n outline: none;\n font: inherit;\n text-align: inherit;\n border: 0;\n width: stretch;\n }\n\n /* &:is(a) */\n &[data-as='a'] {\n outline: none;\n text-decoration: none;\n }\n\n /* &:is(pre) */\n &[data-as='pre'] {\n font: inherit;\n }\n "])), $checkered && styled.css(_a$t || (_a$t = __template$t(["\n background-size: ", "px ", "px;\n background-position: 50% 50%;\n background-image: var(--card-bg-image);\n "])), space[3], space[3]));
4758
4758
  }
4759
4759
  function cardColorStyle(props) {
4760
4760
  var _a2, _b2;
@@ -4775,7 +4775,7 @@ function cardColorStyle(props) {
4775
4775
  width: 0,
4776
4776
  color: "var(--card-border-color)"
4777
4777
  };
4778
- 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({
4778
+ return styled.css(_c$a || (_c$a = __template$t(["\n color-scheme: ", ";\n\n ", "\n\n background-color: var(--card-bg-color);\n color: var(--card-fg-color);\n\n /* &:is(button) */\n &[data-as='button'] {\n --card-focus-ring-box-shadow: none;\n\n cursor: default;\n box-shadow: var(--card-focus-ring-box-shadow);\n\n &:disabled {\n ", "\n }\n\n &:not(:disabled) {\n &[data-pressed] {\n ", "\n }\n\n &[data-selected] {\n ", "\n }\n\n @media (hover: hover) {\n &:not([data-pressed]):not([data-selected]) {\n &[data-hovered],\n &:hover {\n ", "\n }\n\n &:active {\n ", "\n }\n }\n }\n\n &:focus {\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({
4779
4779
  base,
4780
4780
  border,
4781
4781
  focusRing
@@ -4835,14 +4835,14 @@ const Card = react.forwardRef(function Card2(props, ref) {
4835
4835
  })
4836
4836
  });
4837
4837
  });
4838
- var __freeze$q = Object.freeze;
4839
- var __defProp$r = Object.defineProperty;
4840
- var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
4841
- value: __freeze$q(raw || cooked.slice())
4838
+ var __freeze$s = Object.freeze;
4839
+ var __defProp$t = Object.defineProperty;
4840
+ var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
4841
+ value: __freeze$s(raw || cooked.slice())
4842
4842
  }));
4843
- var _a$q, _b$h;
4843
+ var _a$s, _b$h;
4844
4844
  function checkboxBaseStyles() {
4845
- return styled.css(_a$q || (_a$q = __template$q(["\n position: relative;\n display: inline-block;\n "])));
4845
+ return styled.css(_a$s || (_a$s = __template$s(["\n position: relative;\n display: inline-block;\n "])));
4846
4846
  }
4847
4847
  function inputElementStyles(props) {
4848
4848
  const {
@@ -4854,7 +4854,7 @@ function inputElementStyles(props) {
4854
4854
  input,
4855
4855
  radius
4856
4856
  } = theme.sanity;
4857
- 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({
4857
+ return styled.css(_b$h || (_b$h = __template$s(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n outline: none;\n opacity: 0;\n z-index: 1;\n padding: 0;\n margin: 0;\n\n & + span {\n position: relative;\n display: block;\n height: ", ";\n width: ", ";\n box-sizing: border-box;\n box-shadow: ", ";\n border-radius: ", ";\n line-height: 1;\n background-color: ", ";\n\n & > svg {\n display: block;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n\n & > path {\n vector-effect: non-scaling-stroke;\n stroke-width: 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({
4858
4858
  color: color.default.enabled.border,
4859
4859
  width: input.border.width
4860
4860
  }), rem(radius[2]), color.default.enabled.bg, focusRingStyle({
@@ -4911,12 +4911,12 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
4911
4911
  })]
4912
4912
  });
4913
4913
  });
4914
- var __freeze$p = Object.freeze;
4915
- var __defProp$q = Object.defineProperty;
4916
- var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
4917
- value: __freeze$p(raw || cooked.slice())
4914
+ var __freeze$r = Object.freeze;
4915
+ var __defProp$s = Object.defineProperty;
4916
+ var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
4917
+ value: __freeze$r(raw || cooked.slice())
4918
4918
  }));
4919
- var _a$p;
4919
+ var _a$r;
4920
4920
  function codeSyntaxHighlightingStyle(_ref20) {
4921
4921
  let {
4922
4922
  theme
@@ -5034,7 +5034,7 @@ function codeSyntaxHighlightingStyle(_ref20) {
5034
5034
  };
5035
5035
  }
5036
5036
  function codeBaseStyle() {
5037
- 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);
5037
+ return styled.css(_a$r || (_a$r = __template$r(["\n color: var(--card-code-fg-color);\n\n & code {\n font-family: inherit;\n\n &.refractor .token {\n ", "\n }\n }\n\n & a {\n color: inherit;\n text-decoration: underline;\n border-radius: 1px;\n }\n\n & svg {\n /* Certain popular CSS libraries changes the defaults for SVG display */\n /* Make sure SVGs are rendered as inline elements */\n display: inline;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), codeSyntaxHighlightingStyle);
5038
5038
  }
5039
5039
  const Root$s = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
5040
5040
  const Code = react.forwardRef(function Code2(props, ref) {
@@ -5128,28 +5128,28 @@ const Grid = react.forwardRef(function Grid2(props, ref) {
5128
5128
  children
5129
5129
  });
5130
5130
  });
5131
- var __freeze$o = Object.freeze;
5132
- var __defProp$p = Object.defineProperty;
5133
- var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
5134
- value: __freeze$o(raw || cooked.slice())
5131
+ var __freeze$q = Object.freeze;
5132
+ var __defProp$r = Object.defineProperty;
5133
+ var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
5134
+ value: __freeze$q(raw || cooked.slice())
5135
5135
  }));
5136
- var _a$o, _b$g, _c$9;
5136
+ var _a$q, _b$g, _c$9;
5137
5137
  function headingBaseStyle(props) {
5138
5138
  const {
5139
5139
  $accent,
5140
5140
  $muted,
5141
5141
  theme
5142
5142
  } = props;
5143
- 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);
5143
+ return styled.css(_c$9 || (_c$9 = __template$q(["\n ", "\n\n ", "\n\n & code {\n font-family: ", ";\n border-radius: 1px;\n }\n\n & a {\n text-decoration: none;\n border-radius: 1px;\n color: var(--card-link-color);\n outline: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n &:focus {\n box-shadow:\n 0 0 0 1px var(--card-bg-color),\n 0 0 0 3px var(--card-focus-ring-color);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n }\n\n & svg {\n /* Certain popular CSS libraries changes the defaults for SVG display */\n /* Make sure SVGs are rendered as inline elements */\n display: inline;\n }\n\n & [data-sanity-icon] {\n vertical-align: baseline;\n }\n "])), $accent && styled.css(_a$q || (_a$q = __template$q(["\n color: var(--card-accent-fg-color);\n "]))), $muted && styled.css(_b$g || (_b$g = __template$q(["\n color: var(--card-muted-fg-color);\n "]))), theme.sanity.fonts.code.family);
5144
5144
  }
5145
- var __freeze$n = Object.freeze;
5146
- var __defProp$o = Object.defineProperty;
5147
- var __template$n = (cooked, raw) => __freeze$n(__defProp$o(cooked, "raw", {
5148
- value: __freeze$n(raw || cooked.slice())
5145
+ var __freeze$p = Object.freeze;
5146
+ var __defProp$q = Object.defineProperty;
5147
+ var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
5148
+ value: __freeze$p(raw || cooked.slice())
5149
5149
  }));
5150
- var _a$n;
5150
+ var _a$p;
5151
5151
  const Root$p = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
5152
- 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"])));
5152
+ const SpanWithTextOverflow = styled__default.default.span(_a$p || (_a$p = __template$p(["\n display: block;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n overflow: clip;\n"])));
5153
5153
  const Heading = react.forwardRef(function Heading2(props, ref) {
5154
5154
  const {
5155
5155
  accent = false,
@@ -5227,14 +5227,14 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
5227
5227
  children
5228
5228
  });
5229
5229
  });
5230
- var __freeze$m = Object.freeze;
5231
- var __defProp$n = Object.defineProperty;
5232
- var __template$m = (cooked, raw) => __freeze$m(__defProp$n(cooked, "raw", {
5233
- value: __freeze$m(raw || cooked.slice())
5230
+ var __freeze$o = Object.freeze;
5231
+ var __defProp$p = Object.defineProperty;
5232
+ var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
5233
+ value: __freeze$o(raw || cooked.slice())
5234
5234
  }));
5235
- var _a$m;
5235
+ var _a$o;
5236
5236
  function kbdStyle() {
5237
- 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 "])));
5237
+ return styled.css(_a$o || (_a$o = __template$o(["\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 "])));
5238
5238
  }
5239
5239
  const Root$n = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
5240
5240
  const KBD = react.forwardRef(function KBD2(props, ref) {
@@ -5339,8 +5339,8 @@ const ElementQuery = react.forwardRef(function ElementQuery2(props, ref) {
5339
5339
  children
5340
5340
  });
5341
5341
  });
5342
- var __defProp$m = Object.defineProperty;
5343
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp$m(obj, key, {
5342
+ var __defProp$o = Object.defineProperty;
5343
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp$o(obj, key, {
5344
5344
  enumerable: true,
5345
5345
  configurable: true,
5346
5346
  writable: true,
@@ -5716,13 +5716,13 @@ function PortalProvider(props) {
5716
5716
  children
5717
5717
  });
5718
5718
  }
5719
- var __freeze$l = Object.freeze;
5720
- var __defProp$l = Object.defineProperty;
5721
- var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
5722
- value: __freeze$l(raw || cooked.slice())
5719
+ var __freeze$n = Object.freeze;
5720
+ var __defProp$n = Object.defineProperty;
5721
+ var __template$n = (cooked, raw) => __freeze$n(__defProp$n(cooked, "raw", {
5722
+ value: __freeze$n(raw || cooked.slice())
5723
5723
  }));
5724
- var _a$l;
5725
- 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"])));
5724
+ var _a$n;
5725
+ const Root$l = styled__default.default.div(_a$n || (_a$n = __template$n(["\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n overflow: hidden;\n overflow: clip;\n"])));
5726
5726
  const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
5727
5727
  const {
5728
5728
  as,
@@ -5736,14 +5736,14 @@ const SrOnly = react.forwardRef(function SrOnly2(props, ref) {
5736
5736
  children
5737
5737
  });
5738
5738
  });
5739
- var __freeze$k = Object.freeze;
5740
- var __defProp$k = Object.defineProperty;
5741
- var __template$k = (cooked, raw) => __freeze$k(__defProp$k(cooked, "raw", {
5742
- value: __freeze$k(raw || cooked.slice())
5739
+ var __freeze$m = Object.freeze;
5740
+ var __defProp$m = Object.defineProperty;
5741
+ var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
5742
+ value: __freeze$m(raw || cooked.slice())
5743
5743
  }));
5744
- var _a$k, _b$f;
5745
- const Root$k = styled__default.default.div(_a$k || (_a$k = __template$k(["\n position: relative;\n"])));
5746
- const ItemWrapper = styled__default.default.div(_b$f || (_b$f = __template$k(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
5744
+ var _a$m, _b$f;
5745
+ const Root$k = styled__default.default.div(_a$m || (_a$m = __template$m(["\n position: relative;\n"])));
5746
+ const ItemWrapper = styled__default.default.div(_b$f || (_b$f = __template$m(["\n position: absolute;\n left: 0;\n right: 0;\n"])));
5747
5747
  const VirtualList = react.forwardRef(function VirtualList2(props, ref) {
5748
5748
  const {
5749
5749
  as = "div",
@@ -5952,15 +5952,15 @@ function calcMaxWidth(params) {
5952
5952
  }
5953
5953
  return Math.min(currentWidth != null ? currentWidth : Infinity, (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2);
5954
5954
  }
5955
- var __freeze$j = Object.freeze;
5956
- var __defProp$j = Object.defineProperty;
5957
- var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
5958
- value: __freeze$j(raw || cooked.slice())
5955
+ var __freeze$l = Object.freeze;
5956
+ var __defProp$l = Object.defineProperty;
5957
+ var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
5958
+ value: __freeze$l(raw || cooked.slice())
5959
5959
  }));
5960
- var _a$j, _b$e, _c$8;
5961
- 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);
5962
- const BorderPath = styled__default.default.path(_b$e || (_b$e = __template$j(["\n fill: var(--card-shadow-outline-color);\n"])));
5963
- const ShapePath = styled__default.default.path(_c$8 || (_c$8 = __template$j(["\n fill: var(--card-bg-color);\n"])));
5960
+ var _a$l, _b$e, _c$8;
5961
+ const Root$j = styled__default.default.div(_a$l || (_a$l = __template$l(["\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);
5962
+ const BorderPath = styled__default.default.path(_b$e || (_b$e = __template$l(["\n fill: var(--card-shadow-outline-color);\n"])));
5963
+ const ShapePath = styled__default.default.path(_c$8 || (_c$8 = __template$l(["\n fill: var(--card-bg-color);\n"])));
5964
5964
  const PopoverArrow = react.forwardRef(function PopoverArrow2(props, ref) {
5965
5965
  return /* @__PURE__ */jsxRuntime.jsx(Root$j, {
5966
5966
  "data-ui": "Popover__arrow",
@@ -6290,14 +6290,14 @@ const Popover = react.memo(react.forwardRef(function Popover2(props, ref) {
6290
6290
  });
6291
6291
  }));
6292
6292
  Popover.displayName = "Popover";
6293
- var __freeze$i = Object.freeze;
6294
- var __defProp$i = Object.defineProperty;
6295
- var __template$i = (cooked, raw) => __freeze$i(__defProp$i(cooked, "raw", {
6296
- value: __freeze$i(raw || cooked.slice())
6293
+ var __freeze$k = Object.freeze;
6294
+ var __defProp$k = Object.defineProperty;
6295
+ var __template$k = (cooked, raw) => __freeze$k(__defProp$k(cooked, "raw", {
6296
+ value: __freeze$k(raw || cooked.slice())
6297
6297
  }));
6298
- var _a$i, _b$d;
6298
+ var _a$k, _b$d;
6299
6299
  function radioBaseStyle() {
6300
- 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 "])));
6300
+ return styled.css(_a$k || (_a$k = __template$k(["\n position: relative;\n\n &:not([hidden]) {\n display: inline-block;\n }\n\n &[data-read-only] {\n outline: 1px solid red;\n }\n "])));
6301
6301
  }
6302
6302
  function inputElementStyle(props) {
6303
6303
  const {
@@ -6309,7 +6309,7 @@ function inputElementStyle(props) {
6309
6309
  } = theme.sanity;
6310
6310
  const color = theme.sanity.color.input;
6311
6311
  const dist = (input.radio.size - input.radio.markSize) / 2;
6312
- 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({
6312
+ return styled.css(_b$d || (_b$d = __template$k(["\n appearance: none;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n height: 100%;\n width: 100%;\n outline: none;\n z-index: 1;\n padding: 0;\n margin: 0;\n border-radius: ", ";\n border: none;\n\n /* enabled */\n & + span {\n display: block;\n position: relative;\n height: ", ";\n width: ", ";\n border-radius: ", ";\n background: ", ";\n box-shadow: ", ";\n\n &::after {\n content: '';\n position: absolute;\n top: ", ";\n left: ", ";\n height: ", ";\n width: ", ";\n border-radius: ", ";\n background: ", ";\n opacity: 0;\n }\n }\n\n /* focused */\n &:not(:disabled):focus + span {\n box-shadow: ", ";\n }\n\n &:not(:disabled):focus:not(:focus-visible) + span {\n box-shadow: ", ";\n }\n\n &:checked + span::after {\n opacity: 1;\n }\n\n /* 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({
6313
6313
  color: color.default.enabled.border,
6314
6314
  width: input.border.width
6315
6315
  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
@@ -6350,21 +6350,21 @@ const Radio = react.forwardRef(function Radio2(props, forwardedRef) {
6350
6350
  }), /* @__PURE__ */jsxRuntime.jsx("span", {})]
6351
6351
  });
6352
6352
  });
6353
- var __freeze$h = Object.freeze;
6354
- var __defProp$h = Object.defineProperty;
6355
- var __template$h = (cooked, raw) => __freeze$h(__defProp$h(cooked, "raw", {
6356
- value: __freeze$h(raw || cooked.slice())
6353
+ var __freeze$j = Object.freeze;
6354
+ var __defProp$j = Object.defineProperty;
6355
+ var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
6356
+ value: __freeze$j(raw || cooked.slice())
6357
6357
  }));
6358
- var _a$h, _b$c, _c$7, _d$5;
6358
+ var _a$j, _b$c, _c$7, _d$5;
6359
6359
  function rootStyle() {
6360
- 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 "])));
6360
+ return styled.css(_a$j || (_a$j = __template$j(["\n position: relative;\n width: stretch;\n\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
6361
6361
  }
6362
6362
  function inputBaseStyle(props) {
6363
6363
  const {
6364
6364
  theme
6365
6365
  } = props;
6366
6366
  const font = theme.sanity.fonts.text;
6367
- 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);
6367
+ return styled.css(_b$c || (_b$c = __template$j(["\n -webkit-font-smoothing: antialiased;\n appearance: none;\n border: 0;\n font-family: ", ";\n color: inherit;\n width: 100%;\n outline: none;\n margin: 0;\n\n &:disabled {\n opacity: 1;\n }\n "])), font.family);
6368
6368
  }
6369
6369
  function inputColorStyle(props) {
6370
6370
  const {
@@ -6375,7 +6375,7 @@ function inputColorStyle(props) {
6375
6375
  input
6376
6376
  } = theme.sanity;
6377
6377
  const color = theme.sanity.color.input;
6378
- 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({
6378
+ return styled.css(_c$7 || (_c$7 = __template$j(["\n /* enabled */\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n\n /* hovered */\n @media (hover: hover) {\n &:not(:disabled):hover {\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n }\n }\n\n /* focused */\n &:not(:disabled):focus {\n box-shadow: ", ";\n }\n\n /* read-only */\n &[data-read-only] {\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n }\n\n /* disabled */\n &:not([data-read-only]):disabled {\n background-color: ", ";\n color: ", ";\n box-shadow: ", ";\n }\n "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
6379
6379
  color: color.default.enabled.border,
6380
6380
  width: input.border.width
6381
6381
  }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6419,7 +6419,7 @@ function iconBoxStyle(props) {
6419
6419
  theme
6420
6420
  } = props;
6421
6421
  const color = theme.sanity.color.input;
6422
- 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);
6422
+ return styled.css(_d$5 || (_d$5 = __template$j(["\n pointer-events: none;\n position: absolute;\n top: 0;\n right: 0;\n\n /* enabled */\n --card-fg-color: ", ";\n\n /* hover */\n @media (hover: hover) {\n select:not(disabled):not(:read-only):hover + && {\n --card-fg-color: ", ";\n }\n }\n\n /* disabled */\n select:disabled + && {\n --card-fg-color: ", ";\n }\n\n /* read-only */\n select[data-read-only] + && {\n --card-fg-color: ", ";\n }\n "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
6423
6423
  }
6424
6424
  const selectStyle = {
6425
6425
  root: rootStyle,
@@ -6506,17 +6506,17 @@ const Stack = react.forwardRef(function Stack2(props, ref) {
6506
6506
  ref
6507
6507
  });
6508
6508
  });
6509
- var __freeze$g = Object.freeze;
6510
- var __defProp$g = Object.defineProperty;
6511
- var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
6512
- value: __freeze$g(raw || cooked.slice())
6509
+ var __freeze$i = Object.freeze;
6510
+ var __defProp$i = Object.defineProperty;
6511
+ var __template$i = (cooked, raw) => __freeze$i(__defProp$i(cooked, "raw", {
6512
+ value: __freeze$i(raw || cooked.slice())
6513
6513
  }));
6514
- var _a$g, _b$b, _c$6, _d$4, _e$2, _f$2, _g;
6514
+ var _a$i, _b$b, _c$6, _d$4, _e$2, _f$2, _g;
6515
6515
  function switchBaseStyles() {
6516
- return styled.css(_a$g || (_a$g = __template$g(["\n position: relative;\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
6516
+ return styled.css(_a$i || (_a$i = __template$i(["\n position: relative;\n &:not([hidden]) {\n display: inline-block;\n }\n "])));
6517
6517
  }
6518
6518
  function switchInputStyles() {
6519
- 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 "])));
6519
+ return styled.css(_b$b || (_b$b = __template$i(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n opacity: 0;\n height: 100%;\n width: 100%;\n outline: none;\n padding: 0;\n margin: 0;\n\n /* Place the input element above the representation element */\n z-index: 1;\n "])));
6520
6520
  }
6521
6521
  function switchRepresentationStyles(props) {
6522
6522
  const {
@@ -6527,7 +6527,7 @@ function switchRepresentationStyles(props) {
6527
6527
  input
6528
6528
  } = theme.sanity;
6529
6529
  const color = theme.sanity.color.button.default;
6530
- 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({
6530
+ return styled.css(_c$6 || (_c$6 = __template$i(["\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n --switch-box-shadow: none;\n\n &:not([hidden]) {\n display: block;\n }\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n\n /* Make sure it\u2019s not possible to interact with the wrapper element */\n pointer-events: none;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n box-shadow: var(--switch-box-shadow);\n border-radius: inherit;\n }\n\n /* Focus styles */\n input:focus + && {\n --switch-box-shadow: ", ";\n }\n\n input:focus:not(:focus-visible) + && {\n --switch-box-shadow: none;\n }\n\n input:checked + && {\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n }\n\n @media (hover: hover) {\n input:not(:disabled):hover + && {\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n }\n\n input:not(:disabled):checked:hover + && {\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n }\n }\n\n input:not([data-read-only]):disabled + && {\n --switch-bg-color: ", ";\n --switch-fg-color: ", ";\n }\n "])), color.default.enabled.bg, color.default.enabled.fg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
6531
6531
  focusRing
6532
6532
  }), 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);
6533
6533
  }
@@ -6538,7 +6538,7 @@ function switchTrackStyles(props) {
6538
6538
  const {
6539
6539
  input
6540
6540
  } = theme.sanity;
6541
- 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));
6541
+ return styled.css(_d$4 || (_d$4 = __template$i(["\n &:not([hidden]) {\n display: block;\n }\n background-color: var(--switch-bg-color);\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
6542
6542
  }
6543
6543
  function switchThumbStyles(props) {
6544
6544
  const {
@@ -6555,7 +6555,7 @@ function switchThumbStyles(props) {
6555
6555
  const checkedOffset = trackWidth - trackPadding * 2 - size;
6556
6556
  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
6557
6557
  const checked = $indeterminate !== true && props.$checked === true;
6558
- 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));
6558
+ return styled.css(_g || (_g = __template$i(["\n &:not([hidden]) {\n display: block;\n }\n position: absolute;\n left: ", ";\n top: ", ";\n height: ", ";\n width: ", ";\n border-radius: ", ";\n transition-property: transform;\n transition-duration: ", "ms;\n transition-timing-function: ", ";\n background: var(--switch-fg-color);\n transform: translate3d(0, 0, 0);\n\n ", "\n\n ", "\n "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && styled.css(_e$2 || (_e$2 = __template$i(["\n transform: translate3d(", "px, 0, 0);\n "])), checkedOffset), $indeterminate && styled.css(_f$2 || (_f$2 = __template$i(["\n transform: translate3d(", "px, 0, 0);\n "])), indeterminateOffset));
6559
6559
  }
6560
6560
  const Root$e = styled__default.default.span(switchBaseStyles);
6561
6561
  const Input$2 = styled__default.default.input(switchInputStyles);
@@ -6599,14 +6599,14 @@ const Switch = react.forwardRef(function Switch2(props, forwardedRef) {
6599
6599
  })]
6600
6600
  });
6601
6601
  });
6602
- var __freeze$f = Object.freeze;
6603
- var __defProp$f = Object.defineProperty;
6604
- var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
6605
- value: __freeze$f(raw || cooked.slice())
6602
+ var __freeze$h = Object.freeze;
6603
+ var __defProp$h = Object.defineProperty;
6604
+ var __template$h = (cooked, raw) => __freeze$h(__defProp$h(cooked, "raw", {
6605
+ value: __freeze$h(raw || cooked.slice())
6606
6606
  }));
6607
- var _a$f;
6607
+ var _a$h;
6608
6608
  const Root$d = styled__default.default.span(textInputRootStyle);
6609
- 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"])));
6609
+ const InputRoot$1 = styled__default.default.span(_a$h || (_a$h = __template$h(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6610
6610
  const Input$1 = styled__default.default.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6611
6611
  const Presentation$1 = styled__default.default.div(responsiveRadiusStyle, textInputRepresentationStyle);
6612
6612
  const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
@@ -6650,30 +6650,30 @@ const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
6650
6650
  })
6651
6651
  });
6652
6652
  });
6653
- var __freeze$e = Object.freeze;
6654
- var __defProp$e = Object.defineProperty;
6655
- var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
6656
- value: __freeze$e(raw || cooked.slice())
6653
+ var __freeze$g = Object.freeze;
6654
+ var __defProp$g = Object.defineProperty;
6655
+ var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
6656
+ value: __freeze$g(raw || cooked.slice())
6657
6657
  }));
6658
- var _a$e, _b$a, _c$5, _d$3, _e$1, _f$1;
6658
+ var _a$g, _b$a, _c$5, _d$3, _e$1, _f$1;
6659
6659
  const CLEAR_BUTTON_BOX_STYLE = {
6660
6660
  zIndex: 2
6661
6661
  };
6662
6662
  const Root$c = styled__default.default(Card).attrs({
6663
6663
  forwardedAs: "span"
6664
6664
  })(textInputRootStyle);
6665
- 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"])));
6665
+ const InputRoot = styled__default.default.span(_a$g || (_a$g = __template$g(["\n flex: 1;\n min-width: 0;\n display: block;\n position: relative;\n"])));
6666
6666
  const Prefix = styled__default.default(Card).attrs({
6667
6667
  forwardedAs: "span"
6668
- })(_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"])));
6668
+ })(_b$a || (_b$a = __template$g(["\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n"])));
6669
6669
  const Suffix = styled__default.default(Card).attrs({
6670
6670
  forwardedAs: "span"
6671
- })(_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"])));
6671
+ })(_c$5 || (_c$5 = __template$g(["\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n & > span {\n display: block;\n margin: -1px;\n }\n"])));
6672
6672
  const Input = styled__default.default.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
6673
6673
  const Presentation = styled__default.default.span(responsiveRadiusStyle, textInputRepresentationStyle);
6674
- const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$e(["\n position: absolute;\n top: 0;\n left: 0;\n"])));
6675
- const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$e(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
6676
- 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"])));
6674
+ const LeftBox = styled__default.default(Box)(_d$3 || (_d$3 = __template$g(["\n position: absolute;\n top: 0;\n left: 0;\n"])));
6675
+ const RightBox = styled__default.default(Box)(_e$1 || (_e$1 = __template$g(["\n position: absolute;\n top: 0;\n right: 0;\n"])));
6676
+ const RightCard = styled__default.default(Card)(_f$1 || (_f$1 = __template$g(["\n background-color: transparent;\n position: absolute;\n top: 0;\n right: 0;\n"])));
6677
6677
  const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
6678
6678
  const {
6679
6679
  border = true,
@@ -6818,15 +6818,15 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
6818
6818
  }), suffixNode]
6819
6819
  });
6820
6820
  });
6821
- var __freeze$d = Object.freeze;
6822
- var __defProp$d = Object.defineProperty;
6823
- var __template$d = (cooked, raw) => __freeze$d(__defProp$d(cooked, "raw", {
6824
- value: __freeze$d(raw || cooked.slice())
6821
+ var __freeze$f = Object.freeze;
6822
+ var __defProp$f = Object.defineProperty;
6823
+ var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
6824
+ value: __freeze$f(raw || cooked.slice())
6825
6825
  }));
6826
- var _a$d, _b$9, _c$4;
6827
- 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"])));
6828
- const Border = styled__default.default.path(_b$9 || (_b$9 = __template$d(["\n fill: var(--card-shadow-outline-color);\n"])));
6829
- const Shape = styled__default.default.path(_c$4 || (_c$4 = __template$d(["\n fill: var(--card-bg-color);\n"])));
6826
+ var _a$f, _b$9, _c$4;
6827
+ const Root$b = styled__default.default.div(_a$f || (_a$f = __template$f(["\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"])));
6828
+ const Border = styled__default.default.path(_b$9 || (_b$9 = __template$f(["\n fill: var(--card-shadow-outline-color);\n"])));
6829
+ const Shape = styled__default.default.path(_c$4 || (_c$4 = __template$f(["\n fill: var(--card-bg-color);\n"])));
6830
6830
  const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
6831
6831
  const {
6832
6832
  ...restProps
@@ -6847,13 +6847,13 @@ const TooltipArrow = react.forwardRef(function TooltipArrow2(props, ref) {
6847
6847
  })
6848
6848
  });
6849
6849
  });
6850
- var __freeze$c = Object.freeze;
6851
- var __defProp$c = Object.defineProperty;
6852
- var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
6853
- value: __freeze$c(raw || cooked.slice())
6850
+ var __freeze$e = Object.freeze;
6851
+ var __defProp$e = Object.defineProperty;
6852
+ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
6853
+ value: __freeze$e(raw || cooked.slice())
6854
6854
  }));
6855
- var _a$c;
6856
- const Root$a = styled__default.default(Layer)(_a$c || (_a$c = __template$c(["\n pointer-events: none;\n"])));
6855
+ var _a$e;
6856
+ const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n pointer-events: none;\n"])));
6857
6857
  const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
6858
6858
  var _a2, _b, _c;
6859
6859
  const boundaryElementContext = useBoundaryElement();
@@ -7014,16 +7014,16 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
7014
7014
  })]
7015
7015
  });
7016
7016
  });
7017
- var __freeze$b = Object.freeze;
7018
- var __defProp$b = Object.defineProperty;
7019
- var __template$b = (cooked, raw) => __freeze$b(__defProp$b(cooked, "raw", {
7020
- value: __freeze$b(raw || cooked.slice())
7017
+ var __freeze$d = Object.freeze;
7018
+ var __defProp$d = Object.defineProperty;
7019
+ var __template$d = (cooked, raw) => __freeze$d(__defProp$d(cooked, "raw", {
7020
+ value: __freeze$d(raw || cooked.slice())
7021
7021
  }));
7022
- var _a$b, _b$8, _c$3, _d$2;
7023
- const Root$9 = styled__default.default.div(_a$b || (_a$b = __template$b(["\n line-height: 0;\n"])));
7024
- 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"])));
7025
- 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"])));
7026
- const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_d$2 || (_d$2 = __template$b(["\n animation: ", " 500ms linear infinite;\n"])), rotate);
7022
+ var _a$d, _b$8, _c$3, _d$2;
7023
+ const Root$9 = styled__default.default.div(_a$d || (_a$d = __template$d(["\n line-height: 0;\n"])));
7024
+ const ListBox = styled__default.default(Box)(_b$8 || (_b$8 = __template$d(["\n & > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n"])));
7025
+ const rotate = styled.keyframes(_c$3 || (_c$3 = __template$d(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"])));
7026
+ const AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)(_d$2 || (_d$2 = __template$d(["\n animation: ", " 500ms linear infinite;\n"])), rotate);
7027
7027
  function AutocompleteOption(props) {
7028
7028
  const {
7029
7029
  children,
@@ -7547,14 +7547,14 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
7547
7547
  });
7548
7548
  });
7549
7549
  const Autocomplete = InnerAutocomplete;
7550
- var __freeze$a = Object.freeze;
7551
- var __defProp$a = Object.defineProperty;
7552
- var __template$a = (cooked, raw) => __freeze$a(__defProp$a(cooked, "raw", {
7553
- value: __freeze$a(raw || cooked.slice())
7550
+ var __freeze$c = Object.freeze;
7551
+ var __defProp$c = Object.defineProperty;
7552
+ var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
7553
+ value: __freeze$c(raw || cooked.slice())
7554
7554
  }));
7555
- var _a$a, _b$7;
7556
- 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"])));
7557
- const ExpandButton = styled__default.default(Button)(_b$7 || (_b$7 = __template$a(["\n appearance: none;\n margin: -4px;\n"])));
7555
+ var _a$c, _b$7;
7556
+ const Root$8 = styled__default.default.ol(_a$c || (_a$c = __template$c(["\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"])));
7557
+ const ExpandButton = styled__default.default(Button)(_b$7 || (_b$7 = __template$c(["\n appearance: none;\n margin: -4px;\n"])));
7558
7558
  const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
7559
7559
  const {
7560
7560
  children,
@@ -7664,23 +7664,23 @@ const DialogContext = globalScope[key$3];
7664
7664
  function useDialog() {
7665
7665
  return react.useContext(DialogContext);
7666
7666
  }
7667
- var __freeze$9 = Object.freeze;
7668
- var __defProp$9 = Object.defineProperty;
7669
- var __template$9 = (cooked, raw) => __freeze$9(__defProp$9(cooked, "raw", {
7670
- value: __freeze$9(raw || cooked.slice())
7667
+ var __freeze$b = Object.freeze;
7668
+ var __defProp$b = Object.defineProperty;
7669
+ var __template$b = (cooked, raw) => __freeze$b(__defProp$b(cooked, "raw", {
7670
+ value: __freeze$b(raw || cooked.slice())
7671
7671
  }));
7672
- var _a$9, _b$6, _c$2, _d$1, _e, _f;
7672
+ var _a$b, _b$6, _c$2, _d$1, _e, _f;
7673
7673
  function isTargetWithinScope(boundaryElement, portalElement, target) {
7674
7674
  if (!boundaryElement || !portalElement) return true;
7675
7675
  return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
7676
7676
  }
7677
7677
  const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
7678
- 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"])));
7679
- 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"])));
7680
- const DialogLayout = styled__default.default(Flex)(_c$2 || (_c$2 = __template$9(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
7681
- 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"])));
7682
- const DialogContent = styled__default.default(Box)(_e || (_e = __template$9(["\n position: relative;\n z-index: 1;\n overflow: auto;\n outline: none;\n"])));
7683
- 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"])));
7678
+ const DialogContainer = styled__default.default(Container)(_a$b || (_a$b = __template$b(["\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"])));
7679
+ const DialogCardRoot = styled__default.default(Card)(_b$6 || (_b$6 = __template$b(["\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"])));
7680
+ const DialogLayout = styled__default.default(Flex)(_c$2 || (_c$2 = __template$b(["\n flex: 1;\n min-height: 0;\n width: 100%;\n"])));
7681
+ const DialogHeader = styled__default.default(Card)(_d$1 || (_d$1 = __template$b(["\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"])));
7682
+ const DialogContent = styled__default.default(Box)(_e || (_e = __template$b(["\n position: relative;\n z-index: 1;\n overflow: auto;\n outline: none;\n"])));
7683
+ const DialogFooter = styled__default.default(Box)(_f || (_f = __template$b(["\n position: relative;\n z-index: 3;\n border-top: 1px solid var(--card-hairline-soft-color);\n"])));
7684
7684
  const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
7685
7685
  var _a2;
7686
7686
  const {
@@ -7924,14 +7924,14 @@ function DialogProvider(props) {
7924
7924
  children
7925
7925
  });
7926
7926
  }
7927
- var __freeze$8 = Object.freeze;
7928
- var __defProp$8 = Object.defineProperty;
7929
- var __template$8 = (cooked, raw) => __freeze$8(__defProp$8(cooked, "raw", {
7930
- value: __freeze$8(raw || cooked.slice())
7927
+ var __freeze$a = Object.freeze;
7928
+ var __defProp$a = Object.defineProperty;
7929
+ var __template$a = (cooked, raw) => __freeze$a(__defProp$a(cooked, "raw", {
7930
+ value: __freeze$a(raw || cooked.slice())
7931
7931
  }));
7932
- var _a$8, _b$5;
7933
- const Root$6 = styled__default.default.kbd(_a$8 || (_a$8 = __template$8(["\n &:not([hidden]) {\n display: block;\n }\n font: inherit;\n"])));
7934
- const Key = styled__default.default(KBD)(_b$5 || (_b$5 = __template$8(["\n &:not([hidden]) {\n display: block;\n }\n"])));
7932
+ var _a$a, _b$5;
7933
+ const Root$6 = styled__default.default.kbd(_a$a || (_a$a = __template$a(["\n &:not([hidden]) {\n display: block;\n }\n font: inherit;\n"])));
7934
+ const Key = styled__default.default(KBD)(_b$5 || (_b$5 = __template$a(["\n &:not([hidden]) {\n display: block;\n }\n"])));
7935
7935
  const Hotkeys = react.forwardRef(function Hotkeys2(props, ref) {
7936
7936
  const {
7937
7937
  fontSize,
@@ -8152,13 +8152,13 @@ function useMenuController(props) {
8152
8152
  setRootElement
8153
8153
  };
8154
8154
  }
8155
- var __freeze$7 = Object.freeze;
8156
- var __defProp$7 = Object.defineProperty;
8157
- var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
8158
- value: __freeze$7(raw || cooked.slice())
8155
+ var __freeze$9 = Object.freeze;
8156
+ var __defProp$9 = Object.defineProperty;
8157
+ var __template$9 = (cooked, raw) => __freeze$9(__defProp$9(cooked, "raw", {
8158
+ value: __freeze$9(raw || cooked.slice())
8159
8159
  }));
8160
- var _a$7;
8161
- const Root$5 = styled__default.default(Box)(_a$7 || (_a$7 = __template$7(["\n outline: none;\n overflow: auto;\n"])));
8160
+ var _a$9;
8161
+ const Root$5 = styled__default.default(Box)(_a$9 || (_a$9 = __template$9(["\n outline: none;\n overflow: auto;\n"])));
8162
8162
  const Menu = react.forwardRef(function Menu2(props, ref) {
8163
8163
  const {
8164
8164
  children,
@@ -8391,21 +8391,21 @@ const MenuButton = react.forwardRef(function MenuButton2(props, ref) {
8391
8391
  children: button || /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {})
8392
8392
  });
8393
8393
  });
8394
- var __freeze$6 = Object.freeze;
8395
- var __defProp$6 = Object.defineProperty;
8396
- var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
8397
- value: __freeze$6(raw || cooked.slice())
8394
+ var __freeze$8 = Object.freeze;
8395
+ var __defProp$8 = Object.defineProperty;
8396
+ var __template$8 = (cooked, raw) => __freeze$8(__defProp$8(cooked, "raw", {
8397
+ value: __freeze$8(raw || cooked.slice())
8398
8398
  }));
8399
- var _a$6;
8400
- 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"])));
8401
- var __freeze$5 = Object.freeze;
8402
- var __defProp$5 = Object.defineProperty;
8403
- var __template$5 = (cooked, raw) => __freeze$5(__defProp$5(cooked, "raw", {
8404
- value: __freeze$5(raw || cooked.slice())
8399
+ var _a$8;
8400
+ const MenuDivider = styled__default.default.hr(_a$8 || (_a$8 = __template$8(["\n height: 1px;\n border: 0;\n background: var(--card-hairline-soft-color);\n margin: 0;\n"])));
8401
+ var __freeze$7 = Object.freeze;
8402
+ var __defProp$7 = Object.defineProperty;
8403
+ var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
8404
+ value: __freeze$7(raw || cooked.slice())
8405
8405
  }));
8406
- var _a$5, _b$4;
8406
+ var _a$7, _b$4;
8407
8407
  function selectableBaseStyle() {
8408
- 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 "])));
8408
+ return styled.css(_a$7 || (_a$7 = __template$7(["\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 "])));
8409
8409
  }
8410
8410
  function selectableColorStyle(props) {
8411
8411
  var _a2, _b2;
@@ -8419,7 +8419,7 @@ function selectableColorStyle(props) {
8419
8419
  selectable
8420
8420
  } = theme.sanity.color;
8421
8421
  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
8422
- 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);
8422
+ return styled.css(_b$4 || (_b$4 = __template$7(["\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);
8423
8423
  }
8424
8424
  const Selectable = styled__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
8425
8425
  function useMenu() {
@@ -8681,15 +8681,15 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
8681
8681
  })]
8682
8682
  });
8683
8683
  });
8684
- var __freeze$4 = Object.freeze;
8685
- var __defProp$4 = Object.defineProperty;
8686
- var __template$4 = (cooked, raw) => __freeze$4(__defProp$4(cooked, "raw", {
8687
- value: __freeze$4(raw || cooked.slice())
8684
+ var __freeze$6 = Object.freeze;
8685
+ var __defProp$6 = Object.defineProperty;
8686
+ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
8687
+ value: __freeze$6(raw || cooked.slice())
8688
8688
  }));
8689
- var _a$4, _b$3, _c$1, _d;
8690
- 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"])));
8691
- 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);
8692
- 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 => {
8689
+ var _a$6, _b$3, _c$1, _d;
8690
+ const keyframe = styled.keyframes(_a$6 || (_a$6 = __template$6(["\n 0% {\n background-position: 100%;\n }\n 100% {\n background-position: -100%;\n }\n"])));
8691
+ const animation = styled.css(_b$3 || (_b$3 = __template$6(["\n background-image: linear-gradient(\n to right,\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-to),\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-from),\n var(--card-skeleton-color-from)\n );\n background-position: 100%;\n background-size: 200% 100%;\n background-attachment: fixed;\n animation-name: ", ";\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n animation-duration: 2000ms;\n"])), keyframe);
8692
+ const skeletonStyle = styled.css(_d || (_d = __template$6(["\n opacity: ", ";\n transition: opacity 200ms ease-in;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n ", "\n }\n\n @media screen and (prefers-reduced-motion: reduce) {\n background-color: var(--card-skeleton-color-from);\n }\n"])), _ref24 => {
8693
8693
  let {
8694
8694
  $visible
8695
8695
  } = _ref24;
@@ -8698,7 +8698,7 @@ const skeletonStyle = styled.css(_d || (_d = __template$4(["\n opacity: ", ";\n
8698
8698
  let {
8699
8699
  $animated
8700
8700
  } = _ref25;
8701
- return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$4(["\n background-color: var(--card-skeleton-color-from);\n "])));
8701
+ return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$6(["\n background-color: var(--card-skeleton-color-from);\n "])));
8702
8702
  });
8703
8703
  const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
8704
8704
  const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
@@ -8799,6 +8799,13 @@ const CodeSkeleton = react.forwardRef(function TextSkeleton5(props, ref) {
8799
8799
  $style: "code"
8800
8800
  });
8801
8801
  });
8802
+ var __freeze$5 = Object.freeze;
8803
+ var __defProp$5 = Object.defineProperty;
8804
+ var __template$5 = (cooked, raw) => __freeze$5(__defProp$5(cooked, "raw", {
8805
+ value: __freeze$5(raw || cooked.slice())
8806
+ }));
8807
+ var _a$5;
8808
+ const CustomButton = styled__default.default(Button)(_a$5 || (_a$5 = __template$5(["\n max-width: 100%;\n"])));
8802
8809
  const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
8803
8810
  const {
8804
8811
  icon,
@@ -8832,7 +8839,7 @@ const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
8832
8839
  elementRef.current = el;
8833
8840
  ref.current = el;
8834
8841
  };
8835
- return /* @__PURE__ */jsxRuntime.jsx(Button, {
8842
+ return /* @__PURE__ */jsxRuntime.jsx(CustomButton, {
8836
8843
  "data-ui": "Tab",
8837
8844
  ...restProps,
8838
8845
  "aria-selected": selected ? "true" : "false",
@@ -8852,9 +8859,16 @@ const Tab = react.forwardRef(function Tab2(props, forwardedRef) {
8852
8859
  type: "button"
8853
8860
  });
8854
8861
  });
8862
+ var __freeze$4 = Object.freeze;
8863
+ var __defProp$4 = Object.defineProperty;
8864
+ var __template$4 = (cooked, raw) => __freeze$4(__defProp$4(cooked, "raw", {
8865
+ value: __freeze$4(raw || cooked.slice())
8866
+ }));
8867
+ var _a$4;
8855
8868
  function _isReactElement(node) {
8856
8869
  return Boolean(node);
8857
8870
  }
8871
+ const CustomInline = styled__default.default(Inline)(_a$4 || (_a$4 = __template$4(["\n & > div {\n display: inline-block;\n vertical-align: middle;\n max-width: 100%;\n box-sizing: border-box;\n }\n"])));
8858
8872
  const TabList = react.forwardRef(function TabList2(props, ref) {
8859
8873
  const {
8860
8874
  children: childrenProp,
@@ -8879,7 +8893,7 @@ const TabList = react.forwardRef(function TabList2(props, ref) {
8879
8893
  setFocusedIndex(prevIndex => (prevIndex + 1) % numTabs);
8880
8894
  }
8881
8895
  }, [numTabs]);
8882
- return /* @__PURE__ */jsxRuntime.jsx(Inline, {
8896
+ return /* @__PURE__ */jsxRuntime.jsx(CustomInline, {
8883
8897
  "data-ui": "TabList",
8884
8898
  ...restProps,
8885
8899
  onKeyDown: handleKeyDown,