@sanity/ui 2.0.3 → 2.0.5

package/dist/index.esm.js

@@ -53,14 +53,14 @@ function _fillCSSObject(keys, value) {
 function rem(pixelValue) {
   if (pixelValue === 0)
     return 0;
-  return "".concat(pixelValue / 16, "rem");
+  return `${pixelValue / 16}rem`;
 }
 function _responsive(media, values, callback) {
   const statements = (values == null ? void 0 : values.map(callback)) || [];
   return statements.map((statement, mediaIndex) => {
     if (mediaIndex === 0)
       return statement;
-    return { ["@media screen and (min-width: ".concat(media[mediaIndex - 1], "px)")]: statement };
+    return { [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement };
   });
 }
 function _getArrayProp(val, defaultVal) {
@@ -131,21 +131,21 @@ function fontSize(size) {
   const customIconOffset = (capHeight - customIconSize) / 2;
   return {
     fontSize: rem(fontSize2),
-    lineHeight: "calc(".concat(lineHeight, " / ").concat(fontSize2, ")"),
+    lineHeight: `calc(${lineHeight} / ${fontSize2})`,
     letterSpacing: rem(letterSpacing),
-    transform: "translateY(".concat(rem(descenderHeight), ")"),
+    transform: `translateY(${rem(descenderHeight)})`,
     "&:before": {
-      marginTop: "calc(".concat(rem(0 - negHeight), " - 1px)")
+      marginTop: `calc(${rem(0 - negHeight)} - 1px)`
     },
     "&:after": {
       marginBottom: "-1px"
     },
     "& svg:not([data-sanity-icon])": {
-      fontSize: "calc(".concat(customIconSize, " / 16 * 1rem)"),
+      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
       margin: rem(customIconOffset)
     },
     "& [data-sanity-icon]": {
-      fontSize: "calc(".concat(iconSize, " / 16 * 1rem)"),
+      fontSize: `calc(${iconSize} / 16 * 1rem)`,
       margin: rem(iconOffset)
     }
   };
@@ -175,7 +175,7 @@ function responsiveTextFont(props) {
 }
 
 function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
+  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val]);
   return useMemo(
     () => _getArrayProp(val, defaultVal),
     // Improve performance: Keep object identify for a given hash of the value
@@ -897,12 +897,12 @@ function useTheme_v2() {
 const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
 function _getMediaQuery(media, index) {
   if (index === 0) {
-    return "screen and (max-width: ".concat(media[index] - 1, "px)");
+    return `screen and (max-width: ${media[index] - 1}px)`;
   }
   if (index === media.length) {
-    return "screen and (min-width: ".concat(media[index - 1], "px)");
+    return `screen and (min-width: ${media[index - 1]}px)`;
   }
-  return "screen and (min-width: ".concat(media[index - 1], "px) and (max-width: ").concat(media[index] - 1, "px)");
+  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
 }
 function _createMediaStore(media) {
   const mediaLen = media.length;
@@ -1027,9 +1027,9 @@ function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
 }
 function border(props) {
-  var _a, _b;
+  var _a;
   const { card, media } = getTheme_v2(props.theme);
-  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
+  const borderStyle = `${((_a = card.border) == null ? void 0 : _a.width) ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$border,
@@ -1037,9 +1037,9 @@ function border(props) {
   );
 }
 function borderTop(props) {
-  var _a, _b;
+  var _a;
   const { card, media } = getTheme_v2(props.theme);
-  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
+  const borderStyle = `${((_a = card.border) == null ? void 0 : _a.width) ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderTop,
@@ -1047,9 +1047,9 @@ function borderTop(props) {
   );
 }
 function borderRight(props) {
-  var _a, _b;
+  var _a;
   const { card, media } = getTheme_v2(props.theme);
-  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
+  const borderStyle = `${((_a = card.border) == null ? void 0 : _a.width) ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderRight,
@@ -1057,9 +1057,9 @@ function borderRight(props) {
   );
 }
 function borderBottom(props) {
-  var _a, _b;
+  var _a;
   const { card, media } = getTheme_v2(props.theme);
-  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
+  const borderStyle = `${((_a = card.border) == null ? void 0 : _a.width) ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderBottom,
@@ -1067,9 +1067,9 @@ function borderBottom(props) {
   );
 }
 function borderLeft(props) {
-  var _a, _b;
+  var _a;
   const { card, media } = getTheme_v2(props.theme);
-  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
+  const borderStyle = `${((_a = card.border) == null ? void 0 : _a.width) ?? 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderLeft,
@@ -1187,7 +1187,7 @@ function responsiveFlexItemStyle(props) {
 }
 
 function focusRingBorderStyle(border) {
-  return "inset 0 0 0 ".concat(border.width, "px ").concat(border.color);
+  return `inset 0 0 0 ${border.width}px ${border.color}`;
 }
 function focusRingStyle(opts) {
   const { base, border, focusRing } = opts;
@@ -1195,10 +1195,10 @@ function focusRingStyle(opts) {
   const focusRingInsetWidth = 0 - focusRing.offset;
   const bgColor = base ? base.bg : "var(--card-bg-color)";
   return [
-    focusRingInsetWidth > 0 && "inset 0 0 0 ".concat(focusRingInsetWidth, "px var(--card-focus-ring-color)"),
+    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
     border && focusRingBorderStyle(border),
-    focusRingInsetWidth < 0 && "0 0 0 ".concat(0 - focusRingInsetWidth, "px ").concat(bgColor),
-    focusRingOutsetWidth > 0 && "0 0 0 ".concat(focusRingOutsetWidth, "px var(--card-focus-ring-color)")
+    focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
+    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`
   ].filter(Boolean).join(",");
 }
 
@@ -1256,13 +1256,13 @@ function responsiveGridAutoColsStyle(props) {
 function responsiveGridColumnsStyle(props) {
   const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$columns, (columns) => ({
-    gridTemplateColumns: columns && "repeat(".concat(columns, ",minmax(0,1fr));")
+    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`
   }));
 }
 function responsiveGridRowsStyle(props) {
   const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$rows, (rows) => ({
-    gridTemplateRows: rows && "repeat(".concat(rows, ",minmax(0,1fr));")
+    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`
   }));
 }
 function responsiveGridGapStyle(props) {
@@ -1306,7 +1306,7 @@ function responsiveGridItemRowStyle(props) {
   const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$row, (row) => {
     if (typeof row === "number") {
-      return { gridRow: "span ".concat(row, " / span ").concat(row) };
+      return { gridRow: `span ${row} / span ${row}` };
     }
     return { gridRow: GRID_ITEM_ROW[row] };
   });
@@ -1325,7 +1325,7 @@ function responsiveGridItemColumnStyle(props) {
   const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$column, (column) => {
     if (typeof column === "number") {
-      return { gridColumn: "span ".concat(column, " / span ").concat(column) };
+      return { gridColumn: `span ${column} / span ${column}` };
     }
     return { gridColumn: GRID_ITEM_COLUMN[column] };
   });
@@ -1377,18 +1377,84 @@ function responsiveInputPaddingIconRightStyle(props) {
   return responsiveInputPaddingStyle({ ...props, $iconRight: true });
 }
 
-var __freeze$F = Object.freeze;
-var __defProp$G = Object.defineProperty;
-var __template$F = (cooked, raw) => __freeze$F(__defProp$G(cooked, "raw", { value: __freeze$F(raw || cooked.slice()) }));
-var _a$F, _b$n, _c$c;
-const ROOT_STYLE = css(_a$F || (_a$F = __template$F(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
+const ROOT_STYLE = css`
+  &:not([hidden]) {
+    display: flex;
+  }
+
+  align-items: center;
+`;
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
 function textInputBaseStyle(props) {
   const { $scheme, $tone, $weight } = props;
   const { color, font } = getTheme_v2(props.theme);
-  return css(_b$n || (_b$n = __template$F(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.text.family, $weight && font.text.weights[$weight] || font.text.weights.regular, $scheme, $tone, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.disabled.fg, color.input.default.disabled.placeholder, color.input.invalid.enabled.fg, color.input.invalid.enabled.placeholder, color.input.default.readOnly.fg, color.input.default.readOnly.placeholder);
+  return css`
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: ${font.text.family};
+    font-weight: ${$weight && font.text.weights[$weight] || font.text.weights.regular};
+    margin: 0;
+    position: relative;
+    z-index: 1;
+    display: block;
+
+    /* NOTE: This is a hack to disable Chrome’s autofill styles */
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-text-fill-color: var(--input-fg-color) !important;
+      transition: background-color 5000s;
+      transition-delay: 86400s /* 24h */;
+    }
+
+    /* &:is(textarea) */
+    &[data-as='textarea'] {
+      resize: none;
+    }
+
+    color: var(--input-fg-color);
+
+    &::placeholder {
+      color: var(--input-placeholder-color);
+    }
+
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --input-fg-color: ${color.input.default.enabled.fg};
+      --input-placeholder-color: ${color.input.default.enabled.placeholder};
+
+      /* enabled */
+      &:not(:invalid):not(:disabled):not(:read-only) {
+        --input-fg-color: ${color.input.default.enabled.fg};
+        --input-placeholder-color: ${color.input.default.enabled.placeholder};
+      }
+
+      /* disabled */
+      &:not(:invalid):disabled {
+        --input-fg-color: ${color.input.default.disabled.fg};
+        --input-placeholder-color: ${color.input.default.disabled.placeholder};
+      }
+
+      /* invalid */
+      &:invalid {
+        --input-fg-color: ${color.input.invalid.enabled.fg};
+        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};
+      }
+
+      /* readOnly */
+      &:read-only {
+        --input-fg-color: ${color.input.default.readOnly.fg};
+        --input-placeholder-color: ${color.input.default.readOnly.placeholder};
+      }
+    }
+  `;
 }
 function textInputFontSizeStyle(props) {
   const { font, media } = getTheme_v2(props.theme);
@@ -1403,28 +1469,131 @@ function textInputFontSizeStyle(props) {
 function textInputRepresentationStyle(props) {
   const { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props;
   const { color, input } = getTheme_v2(props.theme);
-  return css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:not(:invalid):disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      *:invalid:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:not(:invalid):read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      *:invalid:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  return css`
+    --input-box-shadow: none;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    pointer-events: none;
+    z-index: 0;
+
+    background-color: var(--card-bg-color);
+    box-shadow: var(--input-box-shadow);
+
+    border-top-left-radius: ${$hasPrefix ? 0 : void 0};
+    border-bottom-left-radius: ${$hasPrefix ? 0 : void 0};
+    border-top-right-radius: ${$hasSuffix ? 0 : void 0};
+    border-bottom-right-radius: ${$hasSuffix ? 0 : void 0};
+
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --card-bg-color: ${color.input.default.enabled.bg};
+      --card-fg-color: ${color.input.default.enabled.fg};
+
+      /* enabled */
+      *:not(:disabled) + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
-  }), color.input.invalid.enabled.bg, color.input.invalid.enabled.fg, focusRingBorderStyle({
+  })};
+      }
+
+      /* invalid */
+      *:not(:disabled):invalid + & {
+        --card-bg-color: ${color.input.invalid.enabled.bg};
+        --card-fg-color: ${color.input.invalid.enabled.fg};
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
     color: color.input.invalid.enabled.border,
     width: input.border.width
-  }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
+  })};
+        }
+      }
+
+      /* focused */
+      *:not(:disabled):focus + & {
+        &[data-border] {
+          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
     border: { color: color.input.default.enabled.border, width: input.border.width },
     focusRing: input.text.focusRing
-  }), $unstableDisableFocusRing ? void 0 : focusRingStyle({ focusRing: input.text.focusRing }), color.input.default.disabled.bg, color.input.default.disabled.fg, color.input.default.disabled.fg, focusRingBorderStyle({
+  })};
+        }
+
+        &:not([data-border]) {
+          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({ focusRing: input.text.focusRing })};
+        }
+      }
+
+      /* disabled */
+      *:not(:invalid):disabled + & {
+        --card-bg-color: ${color.input.default.disabled.bg} !important;
+        --card-fg-color: ${color.input.default.disabled.fg} !important;
+        --card-icon-color: ${color.input.default.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
     color: color.input.default.disabled.border,
     width: input.border.width
-  }), color.input.invalid.disabled.bg, color.input.invalid.disabled.fg, color.input.invalid.disabled.fg, focusRingBorderStyle({
+  })};
+        }
+      }
+
+      *:invalid:disabled + & {
+        --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+        --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+        --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
     color: color.input.invalid.disabled.border,
     width: input.border.width
-  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.invalid.readOnly.bg, color.input.invalid.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, color.input.invalid.hovered.bg, color.input.invalid.hovered.fg, focusRingBorderStyle({
+  })};
+        }
+      }
+
+      /* readOnly */
+      *:not(:invalid):read-only + & {
+        --card-bg-color: ${color.input.default.readOnly.bg} !important;
+        --card-fg-color: ${color.input.default.readOnly.fg} !important;
+      }
+
+      *:invalid:read-only + & {
+        --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+        --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
+      }
+
+      /* hovered */
+      @media (hover: hover) {
+        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+          --card-bg-color: ${color.input.default.hovered.bg};
+          --card-fg-color: ${color.input.default.hovered.fg};
+        }
+
+        *:invalid:not(:disabled):not(:read-only):hover + & {
+          --card-bg-color: ${color.input.invalid.hovered.bg};
+          --card-fg-color: ${color.input.invalid.hovered.fg};
+        }
+
+        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
     color: color.input.default.hovered.border,
     width: input.border.width
-  }), focusRingBorderStyle({
+  })};
+        }
+
+        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
     color: color.input.invalid.hovered.border,
     width: input.border.width
-  }));
+  })};
+        }
+      }
+    }
+  `;
 }
 
 function responsiveMarginStyle(props) {
@@ -1468,16 +1637,16 @@ function responsiveRadiusStyle(props) {
 }
 
 function toBoxShadow(shadow, color) {
-  return "".concat(shadow.map(rem).join(" "), " ").concat(color);
+  return `${shadow.map(rem).join(" ")} ${color}`;
 }
 function shadowStyle(shadow, outlineWidth = 1) {
   if (!shadow)
     return EMPTY_RECORD;
-  const outline = "0 0 0 ".concat(rem(outlineWidth), " var(--card-shadow-outline-color)");
+  const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`;
   const umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)");
   const penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)");
   const ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
-  return { boxShadow: "".concat(outline, ", ").concat(umbra, ", ").concat(penumbra, ", ").concat(ambient) };
+  return { boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}` };
 }
 function responsiveShadowStyle(props) {
   const { card, media, shadow } = getTheme_v2(props.theme);
@@ -1488,22 +1657,50 @@ function responsiveShadowStyle(props) {
   );
 }
 
-var __freeze$E = Object.freeze;
-var __defProp$F = Object.defineProperty;
-var __template$E = (cooked, raw) => __freeze$E(__defProp$F(cooked, "raw", { value: __freeze$E(raw || cooked.slice()) }));
-var _a$E, _b$m, _c$b;
 function labelBaseStyle(props) {
   const { $accent, $muted } = props;
   const { font } = getTheme_v2(props.theme);
-  return css(_c$b || (_c$b = __template$E(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$E || (_a$E = __template$E(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$m || (_b$m = __template$E(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return css`
+    text-transform: uppercase;
+
+    ${$accent && css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted && css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `;
 }
 
-var __freeze$D = Object.freeze;
-var __defProp$E = Object.defineProperty;
-var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", { value: __freeze$D(raw || cooked.slice()) }));
-var _a$D;
 const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$2 = styled.span(_a$D || (_a$D = __template$D(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const SpanWithTextOverflow$2 = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`;
 const Label = forwardRef(function Label2(props, ref) {
   const {
     accent,
@@ -1586,8 +1783,8 @@ function avatarRootStyle(props) {
   const { $color } = props;
   const { avatar } = getTheme_v2(props.theme);
   return {
-    "--avatar-bg-color": "var(--card-avatar-".concat($color, "-bg-color)"),
-    "--avatar-fg-color": "var(--card-avatar-".concat($color, "-fg-color)"),
+    "--avatar-bg-color": `var(--card-avatar-${$color}-bg-color)`,
+    "--avatar-fg-color": `var(--card-avatar-${$color}-fg-color)`,
     backgroundColor: "var(--avatar-bg-color)",
     position: "relative",
     boxSizing: "border-box",
@@ -1711,7 +1908,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     animateArrowFrom || arrowPositionProp || "inside"
   );
   const [imageFailed, setImageFailed] = useState(false);
-  const imageId = "avatar-image-".concat(elementId);
+  const imageId = `avatar-image-${elementId}`;
   useEffect(() => {
     if (arrowPosition === arrowPositionProp)
       return void 0;
@@ -1762,7 +1959,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
             fill: color
           }
         ) }) }),
-        !imageFailed && src && /* @__PURE__ */ jsxs(Image, { viewBox: "0 0 ".concat(_sizeRem, " ").concat(_sizeRem), fill: "none", children: [
+        !imageFailed && src && /* @__PURE__ */ jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx(
             "image",
             {
@@ -1772,7 +1969,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
               onError: handleImageError
             }
           ) }) }),
-          /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: "url(#".concat(imageId, ")") }),
+          /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
           !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(
             BgStroke,
             {
@@ -1800,10 +1997,6 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
   );
 });
 
-var __freeze$C = Object.freeze;
-var __defProp$D = Object.defineProperty;
-var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", { value: __freeze$C(raw || cooked.slice()) }));
-var _a$C;
 function _responsiveAvatarCounterSizeStyle(props) {
   const { avatar, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size) => {
@@ -1819,7 +2012,23 @@ function _responsiveAvatarCounterSizeStyle(props) {
 }
 function _avatarCounterBaseStyle(props) {
   const { space } = getTheme_v2(props.theme);
-  return css(_a$C || (_a$C = __template$C(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(space[2]));
+  return css`
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    user-select: none;
+    color: inherit;
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
+    box-shadow:
+      0 0 0 1px var(--card-bg-color),
+      inset 0 0 0 1px var(--card-hairline-hard-color);
+    padding: 0 ${rem(space[2])};
+
+    &:not([hidden]) {
+      display: flex;
+    }
+  `;
 }
 const Root$A = styled.div(
   _responsiveAvatarCounterSizeStyle,
@@ -1850,11 +2059,17 @@ function childrenToElementArray(children) {
   );
 }
 
-var __freeze$B = Object.freeze;
-var __defProp$C = Object.defineProperty;
-var __template$B = (cooked, raw) => __freeze$B(__defProp$C(cooked, "raw", { value: __freeze$B(raw || cooked.slice()) }));
-var _a$B;
-const BASE_STYLES = css(_a$B || (_a$B = __template$B(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+const BASE_STYLES = css`
+  white-space: nowrap;
+
+  & > div {
+    vertical-align: top;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  }
+`;
 function avatarStackStyle() {
   return BASE_STYLES;
 }
@@ -1971,26 +2186,83 @@ const Box = forwardRef(function Box2(props, ref) {
   );
 });
 
-var __freeze$A = Object.freeze;
-var __defProp$B = Object.defineProperty;
-var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", { value: __freeze$A(raw || cooked.slice()) }));
-var _a$A, _b$l, _c$a;
 function textBaseStyle(props) {
   const { $accent, $muted } = props;
   const { font } = getTheme_v2(props.theme);
-  return css(_c$a || (_c$a = __template$A(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: var(--card-icon-color);\n\n      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\n    }\n  "])), $accent && css(_a$A || (_a$A = __template$A(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$l || (_b$l = __template$A(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
+  return css`
+    color: var(--card-fg-color);
+
+    ${$accent && css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted && css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+      background-color: var(--card-code-bg-color);
+      color: var(--card-code-fg-color);
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+      color: var(--card-link-color);
+      outline: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &:focus {
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    & strong {
+      font-weight: ${font.text.weights.bold};
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+      color: var(--card-icon-color);
+
+      & path {
+        vector-effect: non-scaling-stroke !important;
+      }
+    }
+  `;
 }
 
-var __freeze$z = Object.freeze;
-var __defProp$A = Object.defineProperty;
-var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", { value: __freeze$z(raw || cooked.slice()) }));
-var _a$z;
 const Root$x = styled.div(
   responsiveTextFont,
   responsiveTextAlignStyle,
   textBaseStyle
 );
-const SpanWithTextOverflow$1 = styled.span(_a$z || (_a$z = __template$z(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const SpanWithTextOverflow$1 = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`;
 const Text = forwardRef(function Text2(props, ref) {
   const {
     accent = false,
@@ -2025,8 +2297,8 @@ const Text = forwardRef(function Text2(props, ref) {
 function badgeStyle(props) {
   const { $tone } = props;
   return {
-    "--card-bg-color": "var(--card-badge-".concat($tone, "-bg-color)"),
-    "--card-fg-color": "var(--card-badge-".concat($tone, "-fg-color)"),
+    "--card-bg-color": `var(--card-badge-${$tone}-bg-color)`,
+    "--card-fg-color": `var(--card-badge-${$tone}-fg-color)`,
     backgroundColor: "var(--card-bg-color)",
     cursor: "default",
     "&:not([hidden])": {
@@ -2087,12 +2359,20 @@ const Flex = forwardRef(function Flex2(props, ref) {
   );
 });
 
-var __freeze$y = Object.freeze;
-var __defProp$z = Object.defineProperty;
-var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", { value: __freeze$y(raw || cooked.slice()) }));
-var _a$y, _b$k;
-const rotate$1 = keyframes(_a$y || (_a$y = __template$y(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const Root$u = styled(Text)(_b$k || (_b$k = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+const rotate$1 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Root$u = styled(Text)`
+  & > span > svg {
+    animation: ${rotate$1} 500ms linear infinite;
+  }
+`;
 const Spinner = forwardRef(function Spinner2(props, ref) {
   return /* @__PURE__ */ jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsx(SpinnerIcon, {}) });
 });
@@ -2127,7 +2407,7 @@ function _cardColorStyle(base, color, checkered = false) {
     "--card-avatar-cyan-bg-color": color.avatar.cyan.bg,
     "--card-avatar-cyan-fg-color": color.avatar.cyan.fg,
     "--card-bg-color": color.bg,
-    "--card-bg-image": checkered ? "repeating-conic-gradient(".concat(color.bg, " 0% 25%, ").concat(color.muted.bg, " 0% 50%)") : void 0,
+    "--card-bg-image": checkered ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)` : void 0,
     "--card-border-color": color.border,
     "--card-badge-default-bg-color": color.badge.default.bg,
     "--card-badge-default-dot-color": color.badge.default.dot,
@@ -2169,20 +2449,54 @@ function _cardColorStyle(base, color, checkered = false) {
   };
 }
 
-var __freeze$x = Object.freeze;
-var __defProp$y = Object.defineProperty;
-var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", { value: __freeze$x(raw || cooked.slice()) }));
-var _a$x, _b$j;
 function buttonBaseStyles(props) {
   const { $width } = props;
   const { style } = getTheme_v2(props.theme);
-  return css(_b$j || (_b$j = __template$x(["\n    ", ";\n\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n    vertical-align: top;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), style == null ? void 0 : style.button, $width === "fill" && css(_a$x || (_a$x = __template$x(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
+  return css`
+    ${style == null ? void 0 : style.button};
+
+    -webkit-font-smoothing: inherit;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    border: 0;
+    outline: none;
+    user-select: none;
+    text-decoration: none;
+    border: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    white-space: nowrap;
+    text-align: left;
+    position: relative;
+    vertical-align: top;
+
+    ${$width === "fill" && css`
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
+
+    & > span {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      border-radius: inherit;
+    }
+
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+  `;
 }
 function combineBoxShadow(...boxShadows) {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a2;
+  var _a;
   const { $mode } = props;
   const { button, color: baseColor, style } = getTheme_v2(props.theme);
   const shadow = props.$mode === "ghost";
@@ -2226,16 +2540,25 @@ function buttonColorStyles(props) {
         "&[data-selected]": _cardColorStyle(baseColor, color.pressed)
       }
     },
-    (_a2 = style == null ? void 0 : style.button) == null ? void 0 : _a2.root
+    (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.root
   ].filter(Boolean);
 }
 
-var __freeze$w = Object.freeze;
-var __defProp$x = Object.defineProperty;
-var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", { value: __freeze$w(raw || cooked.slice()) }));
-var _a$w;
 const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_a$w || (_a$w = __template$w(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+const LoadingBox = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--card-bg-color);
+  border-radius: inherit;
+  z-index: 1;
+  box-shadow: inherit;
+`;
 const Button = forwardRef(function Button2(props, ref) {
   const {
     children,
@@ -2331,24 +2654,134 @@ const Button = forwardRef(function Button2(props, ref) {
   );
 });
 
-var __freeze$v = Object.freeze;
-var __defProp$w = Object.defineProperty;
-var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", { value: __freeze$v(raw || cooked.slice()) }));
-var _a$v, _b$i, _c$9;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
 function cardBaseStyle(props) {
   const { $checkered } = props;
   const { space } = getTheme_v2(props.theme);
-  return css(_b$i || (_b$i = __template$v(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$v || (_a$v = __template$v(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return css`
+    ${$checkered && css`
+      background-size: ${space[3]}px ${space[3]}px;
+      background-position: 50% 50%;
+      background-image: var(--card-bg-image);
+    `}
+
+    &[data-as='button'] {
+      -webkit-font-smoothing: inherit;
+      appearance: none;
+      outline: none;
+      font: inherit;
+      text-align: inherit;
+      border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      outline: none;
+      text-decoration: none;
+    }
+
+    /* &:is(pre) */
+    &[data-as='pre'] {
+      font: inherit;
+    }
+  `;
 }
 function cardColorStyle(props) {
-  var _a2;
+  var _a;
   const { $checkered, $focusRing } = props;
   const { card, color, style } = getTheme_v2(props.theme);
   const border = { width: card.border.width, color: "var(--card-border-color)" };
-  return css(_c$9 || (_c$9 = __template$v(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus-visible {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus-visible {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), color._dark ? "dark" : "light", _cardColorStyle(color, color, $checkered), _cardColorStyle(color, color.selectable.default.disabled, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), _cardColorStyle(color, color.selectable.default.selected, $checkered), _cardColorStyle(color, color.selectable.default.hovered, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), $focusRing ? focusRingStyle({ base: color, border, focusRing: card.focusRing }) : void 0, _cardColorStyle(color, color.selectable.default.disabled, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), _cardColorStyle(color, color.selectable.default.selected, $checkered), _cardColorStyle(color, color.selectable.default.hovered, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), $focusRing ? focusRingStyle({ base: color, border, focusRing: card.focusRing }) : void 0, (_a2 = style == null ? void 0 : style.card) == null ? void 0 : _a2.root);
+  return css`
+    color-scheme: ${color._dark ? "dark" : "light"};
+
+    ${_cardColorStyle(color, color, $checkered)}
+
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
+
+    /* &:is(button) */
+    &[data-as='button'] {
+      --card-focus-ring-box-shadow: none;
+
+      cursor: default;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &:disabled {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not(:disabled) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border, focusRing: card.focusRing }) : void 0};
+        }
+      }
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      cursor: pointer;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &[data-disabled] {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border, focusRing: card.focusRing }) : void 0};
+        }
+      }
+    }
+
+    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+  `;
 }
 
 const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
@@ -2401,35 +2834,125 @@ const Card = forwardRef(function Card2(props, ref) {
   ) });
 });
 
-var __freeze$u = Object.freeze;
-var __defProp$v = Object.defineProperty;
-var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", { value: __freeze$u(raw || cooked.slice()) }));
-var _a$u, _b$h;
 function checkboxBaseStyles() {
-  return css(_a$u || (_a$u = __template$u(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return css`
+    position: relative;
+    display: inline-block;
+  `;
 }
 function inputElementStyles(props) {
   const { color, input, radius } = getTheme_v2(props.theme);
   const { focusRing } = input.checkbox;
-  return css(_b$h || (_b$h = __template$u(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 1.5px !important;\n        }\n      }\n    }\n\n    &:checked + span {\n      background: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    /* focus */\n    &:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    /* focus when checked - uses a different offset */\n    &:not(:disabled):focus:focus-visible&:checked + span {\n      box-shadow: ", ";\n    }\n\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked + span {\n      background-color: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    &:disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &:disabled&:checked + span {\n      background-color: ", ";\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &[data-read-only]&:checked + span {\n      background-color: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
+  return css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    opacity: 0;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+
+    & + span {
+      position: relative;
+      display: block;
+      height: ${rem(input.checkbox.size)};
+      width: ${rem(input.checkbox.size)};
+      box-sizing: border-box;
+      box-shadow: ${focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
-  }), rem(radius[2]), color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  })};
+      border-radius: ${rem(radius[2])};
+      line-height: 1;
+      background-color: ${color.input.default.enabled.bg};
+
+      & > svg {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        height: 100%;
+        width: 100%;
+
+        & > path {
+          vector-effect: non-scaling-stroke;
+          stroke-width: 1.5px !important;
+        }
+      }
+    }
+
+    &:checked + span {
+      background: ${color.input.default.enabled.fg};
+      box-shadow: ${focusRingBorderStyle({
     color: color.input.default.enabled.fg,
     width: input.border.width
-  }), color.input.default.enabled.bg, focusRingStyle({ focusRing }), focusRingStyle({ focusRing: { width: 1, offset: 1 } }), color.input.invalid.enabled.border, focusRingBorderStyle({
+  })};
+      color: ${color.input.default.enabled.bg};
+    }
+
+    /* focus */
+    &:not(:disabled):focus:focus-visible + span {
+      box-shadow: ${focusRingStyle({ focusRing })};
+    }
+
+    /* focus when checked - uses a different offset */
+    &:not(:disabled):focus:focus-visible&:checked + span {
+      box-shadow: ${focusRingStyle({ focusRing: { width: 1, offset: 1 } })};
+    }
+
+    &[data-error] + span {
+      background-color: ${color.input.invalid.enabled.border};
+      box-shadow: ${focusRingBorderStyle({
     width: input.border.width,
     color: color.input.invalid.enabled.muted.bg
-  }), color.input.default.disabled.fg, color.input.invalid.enabled.muted.bg, color.input.default.enabled.bg, focusRingStyle({
+  })};
+      color: ${color.input.default.disabled.fg};
+    }
+    &[data-error]&:checked + span {
+      background-color: ${color.input.invalid.enabled.muted.bg};
+      color: ${color.input.default.enabled.bg};
+    }
+    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
+      box-shadow: ${focusRingStyle({
     border: { width: input.border.width, color: color.input.invalid.readOnly.muted.bg },
     focusRing: { width: 1, offset: 1 }
-  }), color.input.default.disabled.bg, focusRingBorderStyle({
+  })};
+    }
+
+    &:disabled + span {
+      background-color: ${color.input.default.disabled.bg};
+      box-shadow: ${focusRingBorderStyle({
     width: input.border.width,
     color: color.input.default.disabled.border
-  }), color.input.default.disabled.fg, color.input.default.disabled.muted.bg, color.input.default.readOnly.bg, focusRingBorderStyle({
+  })};
+      color: ${color.input.default.disabled.fg};
+    }
+    &:disabled&:checked + span {
+      background-color: ${color.input.default.disabled.muted.bg};
+    }
+
+    &[data-read-only] + span {
+      background-color: ${color.input.default.readOnly.bg};
+      box-shadow: ${focusRingBorderStyle({
     width: input.border.width,
     color: color.input.default.readOnly.border
-  }), color.input.default.readOnly.fg, color.input.default.readOnly.muted.bg);
+  })};
+      color: ${color.input.default.readOnly.fg};
+    }
+
+    &[data-read-only]&:checked + span {
+      background-color: ${color.input.default.readOnly.muted.bg};
+    }
+
+    &:checked + span > svg:first-child {
+      opacity: 1;
+    }
+    &:indeterminate + span > svg:last-child {
+      opacity: 1;
+    }
+  `;
 }
 
 const Root$r = styled.div(checkboxBaseStyles);
@@ -2473,10 +2996,6 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
   ] });
 });
 
-var __freeze$t = Object.freeze;
-var __defProp$u = Object.defineProperty;
-var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", { value: __freeze$t(raw || cooked.slice()) }));
-var _a$t;
 function codeSyntaxHighlightingStyle({ theme }) {
   const {
     color: { syntax: color }
@@ -2521,7 +3040,33 @@ function codeSyntaxHighlightingStyle({ theme }) {
   };
 }
 function codeBaseStyle() {
-  return css(_a$t || (_a$t = __template$t(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
+  return css`
+    color: var(--card-code-fg-color);
+
+    & code {
+      font-family: inherit;
+
+      &.refractor .token {
+        ${codeSyntaxHighlightingStyle}
+      }
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: underline;
+      border-radius: 1px;
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `;
 }
 
 const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
@@ -2591,22 +3136,70 @@ const Grid = forwardRef(function Grid2(props, ref) {
   );
 });
 
-var __freeze$s = Object.freeze;
-var __defProp$t = Object.defineProperty;
-var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", { value: __freeze$s(raw || cooked.slice()) }));
-var _a$s, _b$g, _c$8;
 function headingBaseStyle(props) {
   const { $accent, $muted } = props;
   const { font } = getTheme_v2(props.theme);
-  return css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & 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 && css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.heading.weights.bold);
+  return css`
+    ${$accent && css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted && css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+      color: var(--card-link-color);
+      outline: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &:focus {
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    & strong {
+      font-weight: ${font.heading.weights.bold};
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `;
 }
 
-var __freeze$r = Object.freeze;
-var __defProp$s = Object.defineProperty;
-var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", { value: __freeze$r(raw || cooked.slice()) }));
-var _a$r;
 const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled.span(_a$r || (_a$r = __template$r(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`;
 const Heading = forwardRef(function Heading2(props, ref) {
   const {
     accent = false,
@@ -2655,8 +3248,8 @@ function inlineSpaceStyle(props) {
   return _responsive(media, props.$space, (spaceIndex) => {
     const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex]);
     return {
-      margin: "-".concat(_space, " 0 0 -").concat(_space),
-      "& > div": { padding: "".concat(_space, " 0 0 ").concat(_space) }
+      margin: `-${_space} 0 0 -${_space}`,
+      "& > div": { padding: `${_space} 0 0 ${_space}` }
     };
   });
 }
@@ -2681,12 +3274,22 @@ const Inline = forwardRef(function Inline2(props, ref) {
   );
 });
 
-var __freeze$q = Object.freeze;
-var __defProp$r = Object.defineProperty;
-var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", { value: __freeze$q(raw || cooked.slice()) }));
-var _a$q;
 function kbdStyle() {
-  return css(_a$q || (_a$q = __template$q(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css`
+    --card-bg-color: var(--card-kbd-bg-color);
+    --card-border-color: var(--card-kbd-border-color);
+    --card-fg-color: var(--card-kbd-fg-color);
+
+    box-shadow: inset 0 0 0 1px var(--card-border-color);
+    background: var(--card-bg-color);
+    font: inherit;
+
+    vertical-align: top;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `;
 }
 const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
@@ -2769,24 +3372,70 @@ function getRoundedCommands(points) {
 function compileCommands(cmds) {
   return cmds.map((n, idx) => {
     if (n.type === "point") {
-      return "".concat(idx === 0 ? "M" : "L", " ").concat(n.x, " ").concat(n.y);
+      return `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}`;
     }
     if (n.type === "curve") {
-      return "C ".concat(n.startControl.x, " ").concat(n.startControl.y, " ").concat(n.endControl.x, " ").concat(n.endControl.y, " ").concat(n.curveEnd.x, " ").concat(n.curveEnd.y);
+      return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`;
     }
-    return "";
+    return ``;
   }).join(" ");
 }
 
-var __freeze$p = Object.freeze;
-var __defProp$q = Object.defineProperty;
-var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", { value: __freeze$p(raw || cooked.slice()) }));
-var _a$p, _b$f, _c$7;
 const Root$k = styled.div(
-  ({ $w: w }) => css(_a$p || (_a$p = __template$p(["\n    position: absolute;\n    width: ", "px;\n    height: ", "px;\n\n    :empty + & {\n      display: none;\n    }\n\n    & > svg {\n      display: block;\n      line-height: 0;\n      transform-origin: ", "px ", "px;\n    }\n\n    [data-placement^='top'] > & {\n      bottom: -", "px;\n\n      & > svg {\n        transform: rotate(0);\n      }\n    }\n\n    [data-placement^='right'] > & {\n      left: -", "px;\n\n      & > svg {\n        transform: rotate(90deg);\n      }\n    }\n\n    [data-placement^='left'] > & {\n      right: -", "px;\n\n      & > svg {\n        transform: rotate(-90deg);\n      }\n    }\n\n    [data-placement^='bottom'] > & {\n      top: -", "px;\n\n      & > svg {\n        transform: rotate(180deg);\n      }\n    }\n  "])), w, w, w / 2, w / 2, w, w, w, w)
+  ({ $w: w }) => css`
+    position: absolute;
+    width: ${w}px;
+    height: ${w}px;
+
+    :empty + & {
+      display: none;
+    }
+
+    & > svg {
+      display: block;
+      line-height: 0;
+      transform-origin: ${w / 2}px ${w / 2}px;
+    }
+
+    [data-placement^='top'] > & {
+      bottom: -${w}px;
+
+      & > svg {
+        transform: rotate(0);
+      }
+    }
+
+    [data-placement^='right'] > & {
+      left: -${w}px;
+
+      & > svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    [data-placement^='left'] > & {
+      right: -${w}px;
+
+      & > svg {
+        transform: rotate(-90deg);
+      }
+    }
+
+    [data-placement^='bottom'] > & {
+      top: -${w}px;
+
+      & > svg {
+        transform: rotate(180deg);
+      }
+    }
+  `
 );
-const StrokePath = styled.path(_b$f || (_b$f = __template$p(["\n  stroke: var(--card-shadow-outline-color);\n"])));
-const ShapePath = styled.path(_c$7 || (_c$7 = __template$p(["\n  fill: var(--card-bg-color);\n"])));
+const StrokePath = styled.path`
+  stroke: var(--card-shadow-outline-color);
+`;
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`;
 const Arrow = forwardRef(function Arrow2(props, ref) {
   const { width: w, height: h, radius = 0, ...restProps } = props;
   const { card } = useTheme_v2();
@@ -2819,9 +3468,9 @@ const Arrow = forwardRef(function Arrow2(props, ref) {
   ];
   const cmds = getRoundedCommands(points);
   const path = compileCommands(cmds);
-  const strokePath = "".concat(path);
-  const fillPath = "".concat(path, " M ").concat(w, " -1 M 0 -1 Z");
-  return /* @__PURE__ */ jsx(Root$k, { ...restProps, $w: w, ref, children: /* @__PURE__ */ jsxs("svg", { width: w, height: w, viewBox: "0 0 ".concat(w, " ").concat(w), children: [
+  const strokePath = `${path}`;
+  const fillPath = `${path} M ${w} -1 M 0 -1 Z`;
+  return /* @__PURE__ */ jsx(Root$k, { ...restProps, $w: w, ref, children: /* @__PURE__ */ jsxs("svg", { width: w, height: w, viewBox: `0 0 ${w} ${w}`, children: [
     /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { x: 0, y: strokeWidth, width: w, height: w, fill: "white" }) }),
     /* @__PURE__ */ jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
     /* @__PURE__ */ jsx(ShapePath, { d: fillPath })
@@ -2892,10 +3541,7 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
   const forwardedRef = useForwardedRef(ref);
   const [element, setElement] = useState(null);
   const elementSize = useElementSize(element);
-  const width = useMemo(() => {
-    var _a;
-    return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]);
+  const width = useMemo(() => (elementSize == null ? void 0 : elementSize.border.width) ?? window.innerWidth, [elementSize]);
   const max = useMemo(() => findMaxBreakpoints(media, width), [media, width]);
   const min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
   const setRef = useCallback(
@@ -2918,17 +3564,8 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
   );
 });
 
-var __defProp$p = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 class ErrorBoundary extends Component {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "state", { error: null });
-  }
+  state = { error: null };
   static getDerivedStateFromError(error) {
     return { error };
   }
@@ -2971,9 +3608,9 @@ function useLayer() {
     return getLayerContext(value);
   } catch (err) {
     if (err instanceof Error) {
-      throw new Error("useLayer(): ".concat(err.message));
+      throw new Error(`useLayer(): ${err.message}`);
     } else {
-      throw new Error("useLayer(): ".concat(err));
+      throw new Error(`useLayer(): ${err}`);
     }
   }
 }
@@ -3076,12 +3713,11 @@ function _isScrollable(el) {
 }
 
 function LayerProvider(props) {
-  var _a;
   const { children, zOffset: zOffsetProp = 0 } = props;
   const parentContextValue = useContext(LayerContext);
   const parent = parentContextValue && getLayerContext(parentContextValue);
   const parentRegisterChild = parent == null ? void 0 : parent.registerChild;
-  const parentLevel = (_a = parent == null ? void 0 : parent.level) != null ? _a : 0;
+  const parentLevel = (parent == null ? void 0 : parent.level) ?? 0;
   const level = parentLevel + 1;
   const zOffset = useArrayProp(zOffsetProp);
   const maxMediaIndex = zOffset.length - 1;
@@ -3095,8 +3731,7 @@ function LayerProvider(props) {
       const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
       if (childLevel !== void 0) {
         setChildLayers((state) => {
-          var _a2;
-          const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0;
+          const prevLen = state[childLevel] ?? 0;
           const nextState = { ...state, [childLevel]: prevLen + 1 };
           setSize(Object.keys(nextState).length);
           return nextState;
@@ -3261,22 +3896,27 @@ function PortalProvider(props) {
   return /* @__PURE__ */ jsx(PortalContext.Provider, { value, children });
 }
 
-var __freeze$o = Object.freeze;
-var __defProp$o = Object.defineProperty;
-var __template$o = (cooked, raw) => __freeze$o(__defProp$o(cooked, "raw", { value: __freeze$o(raw || cooked.slice()) }));
-var _a$o;
-const Root$i = styled.div(_a$o || (_a$o = __template$o(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const Root$i = styled.div`
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  overflow: hidden;
+  overflow: clip;
+`;
 const SrOnly = forwardRef(function SrOnly2(props, ref) {
   const { as, children } = props;
   return /* @__PURE__ */ jsx(Root$i, { "aria-hidden": true, as, "data-ui": "SrOnly", ref, children });
 });
 
-var __freeze$n = Object.freeze;
-var __defProp$n = Object.defineProperty;
-var __template$n = (cooked, raw) => __freeze$n(__defProp$n(cooked, "raw", { value: __freeze$n(raw || cooked.slice()) }));
-var _a$n, _b$e;
-const Root$h = styled.div(_a$n || (_a$n = __template$n(["\n  position: relative;\n"])));
-const ItemWrapper = styled.div(_b$e || (_b$e = __template$n(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+const Root$h = styled.div`
+  position: relative;
+`;
+const ItemWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+`;
 const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const { as = "div", gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps } = props;
   const { space } = useTheme_v2();
@@ -3444,16 +4084,23 @@ function calcMaxWidth(params) {
     return void 0;
   }
   return Math.min(
-    currentWidth != null ? currentWidth : Infinity,
+    currentWidth ?? Infinity,
     (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2
   );
 }
 
-var __freeze$m = Object.freeze;
-var __defProp$m = Object.defineProperty;
-var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", { value: __freeze$m(raw || cooked.slice()) }));
-var _a$m;
-const MotionCard$1 = styled(motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
+const MotionCard$1 = styled(motion(Card))`
+  &:not([hidden]) {
+    display: flex;
+  }
+  flex-direction: column;
+  width: max-content;
+  min-width: min-content;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
+`;
 const PopoverCard = memo(
   forwardRef(function PopoverCard2(props, ref) {
     const {
@@ -3485,8 +4132,8 @@ const PopoverCard = memo(
       () => marginsProp || DEFAULT_POPOVER_MARGINS,
       [marginsProp]
     );
-    const x = (xProp != null ? xProp : 0) + margins[3];
-    const y = (yProp != null ? yProp : 0) + margins[0];
+    const x = (xProp ?? 0) + margins[3];
+    const y = (yProp ?? 0) + margins[0];
     const rootStyle = useMemo(
       () => ({
         left: x,
@@ -3545,7 +4192,7 @@ PopoverCard.displayName = "PopoverCard";
 
 const Popover = memo(
   forwardRef(function Popover2(props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f;
     const { container, layer } = useTheme_v2();
     const boundaryElementContext = useBoundaryElement();
     const {
@@ -3557,9 +4204,9 @@ const Popover = memo(
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
+      fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
       matchReferenceWidth,
-      floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -3569,7 +4216,7 @@ const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary = (_d = props.boundaryElement) != null ? _d : boundaryElementContext.element,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
@@ -3581,7 +4228,7 @@ const Popover = memo(
     } = props;
     const prefersReducedMotion = usePrefersReducedMotion();
     const animate = prefersReducedMotion ? false : _animate;
-    const boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border;
+    const boundarySize = (_a = useElementSize(boundaryElement)) == null ? void 0 : _a.border;
     const padding = useArrayProp(paddingProp);
     const radius = useArrayProp(radiusProp);
     const shadow = useArrayProp(shadowProp);
@@ -3614,13 +4261,13 @@ const Popover = memo(
       const referenceWidth = referenceWidthRef.current;
       if (matchReferenceWidth) {
         if (referenceWidth !== void 0) {
-          floatingElement.style.width = "".concat(referenceWidth, "px");
+          floatingElement.style.width = `${referenceWidth}px`;
         }
       } else if (width !== void 0) {
-        floatingElement.style.width = "".concat(width, "px");
+        floatingElement.style.width = `${width}px`;
       }
       if (typeof maxWidth === "number") {
-        floatingElement.style.maxWidth = "".concat(maxWidth, "px");
+        floatingElement.style.maxWidth = `${maxWidth}px`;
       }
     }, [width, forwardedRef, matchReferenceWidth, maxWidth, open]);
     const middleware = useMemo(() => {
@@ -3644,16 +4291,16 @@ const Popover = memo(
               const _currentWidth = widthRef.current;
               const _maxWidth = maxWidthRef.current;
               if (matchReferenceWidth) {
-                elements.floating.style.width = "".concat(referenceWidth, "px");
+                elements.floating.style.width = `${referenceWidth}px`;
               } else if (_currentWidth !== void 0) {
-                elements.floating.style.width = "".concat(_currentWidth, "px");
+                elements.floating.style.width = `${_currentWidth}px`;
               }
               if (constrainSize) {
-                elements.floating.style.maxWidth = "".concat(Math.min(
+                elements.floating.style.maxWidth = `${Math.min(
                   availableWidth,
-                  _maxWidth != null ? _maxWidth : Infinity
-                ), "px");
-                elements.floating.style.maxHeight = "".concat(availableHeight, "px");
+                  _maxWidth ?? Infinity
+                )}px`;
+                elements.floating.style.maxHeight = `${availableHeight}px`;
               }
             },
             boundaryElement: floatingBoundary || void 0,
@@ -3708,11 +4355,11 @@ const Popover = memo(
       placement: placementProp,
       whileElementsMounted: autoUpdate
     });
-    const referenceHidden = (_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden;
-    const arrowX = (_g = middlewareData.arrow) == null ? void 0 : _g.x;
-    const arrowY = (_h = middlewareData.arrow) == null ? void 0 : _h.y;
-    const originX = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originX;
-    const originY = (_j = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _j.originY;
+    const referenceHidden = (_b = middlewareData.hide) == null ? void 0 : _b.referenceHidden;
+    const arrowX = (_c = middlewareData.arrow) == null ? void 0 : _c.x;
+    const arrowY = (_d = middlewareData.arrow) == null ? void 0 : _d.y;
+    const originX = (_e = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _e.originX;
+    const originY = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originY;
     const setArrow = useCallback((arrowEl) => {
       arrowRef.current = arrowEl;
     }, []);
@@ -3807,29 +4454,114 @@ const Popover = memo(
 );
 Popover.displayName = "Popover";
 
-var __freeze$l = Object.freeze;
-var __defProp$l = Object.defineProperty;
-var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", { value: __freeze$l(raw || cooked.slice()) }));
-var _a$l, _b$d;
 function radioBaseStyle() {
-  return css(_a$l || (_a$l = __template$l(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
+  return css`
+    position: relative;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+
+    &[data-read-only] {
+      outline: 1px solid red;
+    }
+  `;
 }
 function inputElementStyle(props) {
   const { color, input } = getTheme_v2(props.theme);
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_b$d || (_b$d = __template$l(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* customValidity */\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.input.default.enabled.bg, focusRingBorderStyle({
+  return css`
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+    border-radius: ${rem(input.radio.size / 2)};
+    border: none;
+
+    /* enabled */
+    & + span {
+      display: block;
+      position: relative;
+      height: ${rem(input.radio.size)};
+      width: ${rem(input.radio.size)};
+      border-radius: ${rem(input.radio.size / 2)};
+      background: ${color.input.default.enabled.bg};
+      box-shadow: ${focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
-  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.input.default.enabled.fg, focusRingStyle({
+  })};
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: ${rem(dist)};
+        left: ${rem(dist)};
+        height: ${rem(input.radio.markSize)};
+        width: ${rem(input.radio.markSize)};
+        border-radius: ${rem(input.radio.markSize / 2)};
+        background: ${color.input.default.enabled.fg};
+        opacity: 0;
+      }
+    }
+
+    /* focused */
+    &:not(:disabled):focus + span {
+      box-shadow: ${focusRingStyle({
     border: { width: input.border.width, color: color.input.default.enabled.border },
     focusRing: input.radio.focusRing
-  }), focusRingBorderStyle({
+  })};
+    }
+
+    &:not(:disabled):focus:not(:focus-visible) + span {
+      box-shadow: ${focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
-  }), color.input.invalid.enabled.border, focusRingBorderStyle({
+  })};
+    }
+
+    &:checked + span::after {
+      opacity: 1;
+    }
+
+    /* customValidity */
+    &[data-error] + span {
+      background-color: ${color.input.invalid.enabled.border};
+      box-shadow: ${focusRingBorderStyle({
     width: input.border.width,
     color: color.input.invalid.enabled.muted.bg
-  }), color.input.invalid.enabled.muted.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg, color.input.default.readOnly.border, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.disabled.border);
+  })};
+      &::after {
+        background: ${color.input.invalid.enabled.muted.bg};
+      }
+    }
+
+    /* read only */
+    &[data-read-only] + span {
+      box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
+      background: ${color.input.default.readOnly.bg};
+
+      &::after {
+        background: ${color.input.default.readOnly.border};
+      }
+    }
+
+    /* disabled */
+    &:not([data-read-only]):disabled + span {
+      box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
+      background: ${color.input.default.disabled.bg};
+
+      &::after {
+        background: ${color.input.default.disabled.border};
+      }
+    }
+  `;
 }
 
 const Root$g = styled.div(radioBaseStyle);
@@ -3855,35 +4587,86 @@ const Radio = forwardRef(function Radio2(props, forwardedRef) {
   ] });
 });
 
-var __freeze$k = Object.freeze;
-var __defProp$k = Object.defineProperty;
-var __template$k = (cooked, raw) => __freeze$k(__defProp$k(cooked, "raw", { value: __freeze$k(raw || cooked.slice()) }));
-var _a$k, _b$c, _c$6, _d$5;
 function rootStyle() {
-  return css(_a$k || (_a$k = __template$k(["\n    position: relative;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css`
+    position: relative;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `;
 }
 function inputBaseStyle(props) {
   const { font } = getTheme_v2(props.theme);
-  return css(_b$c || (_b$c = __template$k(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.text.family);
+  return css`
+    -webkit-font-smoothing: antialiased;
+    appearance: none;
+    border: 0;
+    font-family: ${font.text.family};
+    color: inherit;
+    width: 100%;
+    outline: none;
+    margin: 0;
+
+    &:disabled {
+      opacity: 1;
+    }
+  `;
 }
 function inputColorStyle(props) {
   const { color, input } = getTheme_v2(props.theme);
-  return css(_c$6 || (_c$6 = __template$k(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  return css`
+    /* enabled */
+    background-color: ${color.input.default.enabled.bg};
+    color: ${color.input.default.enabled.fg};
+    box-shadow: ${focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
-  }), color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
+  })};
+
+    /* hovered */
+    @media (hover: hover) {
+      &:not(:disabled):hover {
+        background-color: ${color.input.default.hovered.bg};
+        color: ${color.input.default.hovered.fg};
+        box-shadow: ${focusRingBorderStyle({
     color: color.input.default.hovered.border,
     width: input.border.width
-  }), focusRingStyle({
+  })};
+      }
+    }
+
+    /* focused */
+    &:not(:disabled):focus {
+      box-shadow: ${focusRingStyle({
     border: { width: input.border.width, color: color.input.default.enabled.border },
     focusRing: input.select.focusRing
-  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, focusRingBorderStyle({
+  })};
+    }
+
+    /* read-only */
+    &[data-read-only] {
+      background-color: ${color.input.default.readOnly.bg};
+      color: ${color.input.default.readOnly.fg};
+      box-shadow: ${focusRingBorderStyle({
     color: color.input.default.readOnly.border,
     width: input.border.width
-  }), color.input.default.disabled.bg, color.input.default.disabled.fg, focusRingBorderStyle({
+  })};
+    }
+
+    /* disabled */
+    &:not([data-read-only]):disabled {
+      background-color: ${color.input.default.disabled.bg};
+      color: ${color.input.default.disabled.fg};
+      box-shadow: ${focusRingBorderStyle({
     color: color.input.default.disabled.border,
     width: input.border.width
-  }));
+  })};
+    }
+  `;
 }
 function textSize(size) {
   return { fontSize: rem(size.fontSize), lineHeight: rem(size.lineHeight) };
@@ -3908,7 +4691,32 @@ function inputStyle() {
 }
 function iconBoxStyle(props) {
   const { color } = getTheme_v2(props.theme);
-  return css(_d$5 || (_d$5 = __template$k(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.fg, color.input.default.hovered.fg, color.input.default.disabled.fg, color.input.default.readOnly.fg);
+  return css`
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    /* enabled */
+    --card-fg-color: ${color.input.default.enabled.fg};
+
+    /* hover */
+    @media (hover: hover) {
+      select:not(disabled):not(:read-only):hover + && {
+        --card-fg-color: ${color.input.default.hovered.fg};
+      }
+    }
+
+    /* disabled */
+    select:disabled + && {
+      --card-fg-color: ${color.input.default.disabled.fg};
+    }
+
+    /* read-only */
+    select[data-read-only] + && {
+      --card-fg-color: ${color.input.default.readOnly.fg};
+    }
+  `;
 }
 const selectStyle = {
   root: rootStyle,
@@ -3989,23 +4797,119 @@ const Stack = forwardRef(function Stack2(props, ref) {
   );
 });
 
-var __freeze$j = Object.freeze;
-var __defProp$j = Object.defineProperty;
-var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", { value: __freeze$j(raw || cooked.slice()) }));
-var _a$j, _b$b, _c$5, _d$4, _e$2, _f$2, _g;
 function switchBaseStyles() {
-  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css`
+    position: relative;
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `;
 }
 function switchInputStyles() {
-  return css(_b$b || (_b$b = __template$j(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    padding: 0;\n    margin: 0;\n\n    /* Place the input element above the representation element */\n    z-index: 1;\n  "])));
+  return css`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    padding: 0;
+    margin: 0;
+
+    /* Place the input element above the representation element */
+    z-index: 1;
+  `;
 }
 function switchRepresentationStyles(props) {
   const { color, input } = getTheme_v2(props.theme);
-  return css(_c$5 || (_c$5 = __template$j(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input:checked[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({ focusRing: input.switch.focusRing }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.readOnly.bg);
+  return css`
+    --switch-bg-color: ${color.input.default.enabled.border};
+    --switch-fg-color: ${color.input.default.enabled.bg};
+    --switch-box-shadow: none;
+
+    &:not([hidden]) {
+      display: block;
+    }
+    position: relative;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
+
+    /* Make sure it’s not possible to interact with the wrapper element */
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      box-shadow: var(--switch-box-shadow);
+      border-radius: inherit;
+    }
+
+    /* Focus styles */
+    input:focus + && {
+      --switch-box-shadow: ${focusRingStyle({ focusRing: input.switch.focusRing })};
+    }
+
+    input:focus:not(:focus-visible) + && {
+      --switch-box-shadow: none;
+    }
+
+    input:checked + && {
+      --switch-bg-color: ${color.input.default.enabled.fg};
+      --switch-fg-color: ${color.input.default.enabled.bg};
+    }
+
+    @media (hover: hover) {
+      input:not(:disabled):hover + && {
+        --switch-bg-color: ${color.input.default.hovered.border};
+        --switch-fg-color: ${color.input.default.hovered.bg};
+      }
+
+      input:not(:disabled):checked:hover + && {
+        --switch-bg-color: ${color.input.default.enabled.fg};
+        --switch-fg-color: ${color.input.default.enabled.bg};
+      }
+    }
+
+    input:not([data-read-only]):disabled + && {
+      --switch-bg-color: ${color.input.default.disabled.border};
+      --switch-fg-color: ${color.input.default.disabled.bg};
+    }
+
+    input[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.border};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
+
+    input:checked[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.fg};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
+  `;
 }
 function switchTrackStyles(props) {
   const { input } = getTheme_v2(props.theme);
-  return css(_d$4 || (_d$4 = __template$j(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    background-color: var(--switch-bg-color);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
+  `;
 }
 function switchThumbStyles(props) {
   const { $indeterminate } = props;
@@ -4017,7 +4921,31 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return css(_g || (_g = __template$j(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_e$2 || (_e$2 = __template$j(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_f$2 || (_f$2 = __template$j(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    position: absolute;
+    left: ${rem(trackPadding)};
+    top: ${rem(trackPadding)};
+    height: ${rem(size)};
+    width: ${rem(size)};
+    border-radius: ${rem(size / 2)};
+    transition-property: transform;
+    transition-duration: ${input.switch.transitionDurationMs}ms;
+    transition-timing-function: ${input.switch.transitionTimingFunction};
+    background: var(--switch-fg-color);
+    transform: translate3d(0, 0, 0);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+
+    ${checked && css`
+      transform: translate3d(${checkedOffset}px, 0, 0);
+    `}
+
+    ${$indeterminate && css`
+      transform: translate3d(${indeterminateOffset}px, 0, 0);
+    `}
+  `;
 }
 
 const Root$d = styled.span(switchBaseStyles);
@@ -4052,12 +4980,13 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
   ] });
 });
 
-var __freeze$i = Object.freeze;
-var __defProp$i = Object.defineProperty;
-var __template$i = (cooked, raw) => __freeze$i(__defProp$i(cooked, "raw", { value: __freeze$i(raw || cooked.slice()) }));
-var _a$i;
 const Root$c = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_a$i || (_a$i = __template$i(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+const InputRoot$1 = styled.span`
+  flex: 1;
+  min-width: 0;
+  display: block;
+  position: relative;
+`;
 const Input$1 = styled.textarea(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
@@ -4113,15 +5042,32 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
   ] }) });
 });
 
-var __freeze$h = Object.freeze;
-var __defProp$h = Object.defineProperty;
-var __template$h = (cooked, raw) => __freeze$h(__defProp$h(cooked, "raw", { value: __freeze$h(raw || cooked.slice()) }));
-var _a$h, _b$a, _c$4, _d$3, _e$1, _f$1;
 const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 };
 const Root$b = styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle);
-const InputRoot = styled.span(_a$h || (_a$h = __template$h(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
-const Prefix = styled(Card).attrs({ forwardedAs: "span" })(_b$a || (_b$a = __template$h(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
-const Suffix = styled(Card).attrs({ forwardedAs: "span" })(_c$4 || (_c$4 = __template$h(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+const InputRoot = styled.span`
+  flex: 1;
+  min-width: 0;
+  display: block;
+  position: relative;
+`;
+const Prefix = styled(Card).attrs({ forwardedAs: "span" })`
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  & > span {
+    display: block;
+    margin: -1px;
+  }
+`;
+const Suffix = styled(Card).attrs({ forwardedAs: "span" })`
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  & > span {
+    display: block;
+    margin: -1px;
+  }
+`;
 const Input = styled.input(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
@@ -4131,9 +5077,22 @@ const Presentation = styled.span(
   responsiveRadiusStyle,
   textInputRepresentationStyle
 );
-const LeftBox = styled(Box)(_d$3 || (_d$3 = __template$h(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-const RightBox = styled(Box)(_e$1 || (_e$1 = __template$h(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-const RightCard = styled(Card)(_f$1 || (_f$1 = __template$h(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+const LeftBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const RightBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+const RightCard = styled(Card)`
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
 const TextInputClearButton = styled(Button)({
   "&:not([hidden])": {
     display: "block"
@@ -4178,12 +5137,12 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   }, []);
   const handleClearClick = useCallback(
     (event) => {
-      var _a2;
+      var _a;
       event.preventDefault();
       event.stopPropagation();
       if (onClear)
         onClear();
-      (_a2 = ref.current) == null ? void 0 : _a2.focus();
+      (_a = ref.current) == null ? void 0 : _a.focus();
     },
     [onClear, ref]
   );
@@ -4370,11 +5329,12 @@ const DEFAULT_FALLBACK_PLACEMENTS = {
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
 };
 
-var __freeze$g = Object.freeze;
-var __defProp$g = Object.defineProperty;
-var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", { value: __freeze$g(raw || cooked.slice()) }));
-var _a$g;
-const MotionCard = styled(motion(Card))(_a$g || (_a$g = __template$g(["\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
+const MotionCard = styled(motion(Card))`
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
+`;
 const TooltipCard = memo(
   forwardRef(function TooltipCard2(props, ref) {
     const {
@@ -4474,13 +5434,12 @@ function TooltipDelayGroupProvider(props) {
   return /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
 
-var __freeze$f = Object.freeze;
-var __defProp$f = Object.defineProperty;
-var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", { value: __freeze$f(raw || cooked.slice()) }));
-var _a$f;
-const Root$a = styled(Layer)(_a$f || (_a$f = __template$f(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), ({ $maxWidth }) => $maxWidth);
+const Root$a = styled(Layer)`
+  pointer-events: none;
+  max-width: ${({ $maxWidth }) => $maxWidth}px;
+`;
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e;
   const boundaryElementContext = useBoundaryElement();
   const { layer } = useTheme_v2();
   const {
@@ -4490,7 +5449,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
+    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
     padding = 2,
     placement: placementProp = "bottom",
     portal: portalProp,
@@ -4509,7 +5468,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const arrowRef = useRef(null);
   const rootBoundary = "viewport";
   const portal = usePortal();
-  const portalElement = typeof portalProp === "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element;
+  const portalElement = typeof portalProp === "string" ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element;
   const tooltipWidth = useMemo(() => {
     const availableWidths = [
       ...boundaryElement ? [boundaryElement.offsetWidth] : [],
@@ -4548,10 +5507,10 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     placement: placementProp,
     whileElementsMounted: autoUpdate
   });
-  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
-  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
-  const originX = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originX;
-  const originY = (_g = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _g.originY;
+  const arrowX = (_b = middlewareData.arrow) == null ? void 0 : _b.x;
+  const arrowY = (_c = middlewareData.arrow) == null ? void 0 : _c.y;
+  const originX = (_d = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _d.originX;
+  const originY = (_e = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _e.originY;
   const tooltipId = useId();
   const [isOpen, setIsOpen] = useDelayedState(false);
   const delayGroupContext = useTooltipDelayGroup();
@@ -4583,49 +5542,49 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   );
   const handleBlur = useCallback(
     (e) => {
-      var _a3, _b2;
+      var _a2, _b2;
       handleIsOpenChange(false);
-      (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onBlur) == null ? void 0 : _b2.call(_a3, e);
+      (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onBlur) == null ? void 0 : _b2.call(_a2, e);
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   const handleClick = useCallback(
     (e) => {
-      var _a3, _b2;
+      var _a2, _b2;
       handleIsOpenChange(false, true);
-      (_b2 = childProp == null ? void 0 : (_a3 = childProp.props).onClick) == null ? void 0 : _b2.call(_a3, e);
+      (_b2 = childProp == null ? void 0 : (_a2 = childProp.props).onClick) == null ? void 0 : _b2.call(_a2, e);
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   const handleContextMenu = useCallback(
     (e) => {
-      var _a3, _b2;
+      var _a2, _b2;
       handleIsOpenChange(false, true);
-      (_b2 = childProp == null ? void 0 : (_a3 = childProp.props).onContextMenu) == null ? void 0 : _b2.call(_a3, e);
+      (_b2 = childProp == null ? void 0 : (_a2 = childProp.props).onContextMenu) == null ? void 0 : _b2.call(_a2, e);
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   const handleFocus = useCallback(
     (e) => {
-      var _a3, _b2;
+      var _a2, _b2;
       handleIsOpenChange(true);
-      (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onFocus) == null ? void 0 : _b2.call(_a3, e);
+      (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onFocus) == null ? void 0 : _b2.call(_a2, e);
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   const handleMouseEnter = useCallback(
     (e) => {
-      var _a3, _b2;
+      var _a2, _b2;
       handleIsOpenChange(true);
-      (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onMouseEnter) == null ? void 0 : _b2.call(_a3, e);
+      (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onMouseEnter) == null ? void 0 : _b2.call(_a2, e);
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   const handleMouseLeave = useCallback(
     (e) => {
-      var _a3, _b2;
+      var _a2, _b2;
       handleIsOpenChange(false);
-      (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onMouseLeave) == null ? void 0 : _b2.call(_a3, e);
+      (_b2 = (_a2 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a2.onMouseLeave) == null ? void 0 : _b2.call(_a2, e);
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
@@ -4771,14 +5730,28 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   ] });
 });
 
-var __freeze$e = Object.freeze;
-var __defProp$e = Object.defineProperty;
-var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", { value: __freeze$e(raw || cooked.slice()) }));
-var _a$e, _b$9, _c$3, _d$2;
-const Root$9 = styled.div(_a$e || (_a$e = __template$e(["\n  line-height: 0;\n"])));
-const ListBox = styled(Box)(_b$9 || (_b$9 = __template$e(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const rotate = keyframes(_c$3 || (_c$3 = __template$e(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled(SpinnerIcon)(_d$2 || (_d$2 = __template$e(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+const Root$9 = styled.div`
+  line-height: 0;
+`;
+const ListBox = styled(Box)`
+  & > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+`;
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const AnimatedSpinnerIcon = styled(SpinnerIcon)`
+  animation: ${rotate} 500ms linear infinite;
+`;
 
 function AutocompleteOption(props) {
   const { children, id, onSelect, selected, value } = props;
@@ -4912,7 +5885,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   const valuePropRef = useRef(valueProp);
   const popoverMouseWithinRef = useRef(false);
   const forwardedRef = useForwardedRef(ref);
-  const listBoxId = "".concat(id, "-listbox");
+  const listBoxId = `${id}-listbox`;
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY;
   const padding = useArrayProp(paddingProp);
   const currentOption = useMemo(
@@ -4924,7 +5897,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     [filterOption, options, query]
   );
   const filteredOptionsLen = filteredOptions.length;
-  const activeItemId = activeValue ? "".concat(id, "-option-").concat(activeValue) : void 0;
+  const activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0;
   const expanded = query !== null && loading || focused && query !== null;
   const handleRootBlur = useCallback(
     (event) => {
@@ -5252,7 +6225,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
               return /* @__PURE__ */ jsx(
                 AutocompleteOption,
                 {
-                  id: "".concat(id, "-option-").concat(option.value),
+                  id: `${id}-option-${option.value}`,
                   onSelect: handleOptionSelect,
                   selected: active,
                   value: option.value,
@@ -5345,12 +6318,19 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
 });
 const Autocomplete = InnerAutocomplete;
 
-var __freeze$d = Object.freeze;
-var __defProp$d = Object.defineProperty;
-var __template$d = (cooked, raw) => __freeze$d(__defProp$d(cooked, "raw", { value: __freeze$d(raw || cooked.slice()) }));
-var _a$d, _b$8;
-const Root$8 = styled.ol(_a$d || (_a$d = __template$d(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
-const ExpandButton = styled(Button)(_b$8 || (_b$8 = __template$d(["\n  appearance: none;\n  margin: -4px;\n"])));
+const Root$8 = styled.ol`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 0;
+`;
+const ExpandButton = styled(Button)`
+  appearance: none;
+  margin: -4px;
+`;
 
 const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props;
@@ -5409,10 +6389,6 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   ] }, itemIndex)) });
 });
 
-var __freeze$c = Object.freeze;
-var __defProp$c = Object.defineProperty;
-var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", { value: __freeze$c(raw || cooked.slice()) }));
-var _a$c, _b$7;
 function dialogStyle({ theme }) {
   const { color } = getTheme_v2(theme);
   return {
@@ -5435,8 +6411,33 @@ function responsiveDialogPositionStyle(props) {
 }
 function animationDialogStyle(props) {
   if (!props.$animate)
-    return css(_a$c || (_a$c = __template$c([""])));
-  return css(_b$7 || (_b$7 = __template$c(["\n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    animation: fadeIn 200ms ease-out;\n    // Animates the dialog card.\n    & > [data-ui='DialogCard'] {\n      animation: zoomIn 200ms ease-out;\n    }\n  "])));
+    return css``;
+  return css`
+    @keyframes zoomIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    animation: fadeIn 200ms ease-out;
+    // Animates the dialog card.
+    & > [data-ui='DialogCard'] {
+      animation: zoomIn 200ms ease-out;
+    }
+  `;
 }
 
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
@@ -5447,24 +6448,53 @@ function useDialog() {
   return useContext(DialogContext);
 }
 
-var __freeze$b = Object.freeze;
-var __defProp$b = Object.defineProperty;
-var __template$b = (cooked, raw) => __freeze$b(__defProp$b(cooked, "raw", { value: __freeze$b(raw || cooked.slice()) }));
-var _a$b, _b$6, _c$2, _d$1, _e, _f;
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   if (!boundaryElement || !portalElement)
     return true;
   return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
 const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle);
-const DialogContainer = styled(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"])));
-const DialogCardRoot = styled(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"])));
-const DialogLayout = styled(Flex)(_c$2 || (_c$2 = __template$b(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled(Box)(_d$1 || (_d$1 = __template$b(["\n  position: relative;\n  z-index: 2;\n"])));
-const DialogContent = styled(Box)(_e || (_e = __template$b(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled(Box)(_f || (_f = __template$b(["\n  position: relative;\n  z-index: 3;\n"])));
+const DialogContainer = styled(Container)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const DialogCardRoot = styled(Card)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+  overflow: clip;
+`;
+const DialogLayout = styled(Flex)`
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+`;
+const DialogHeader = styled(Box)`
+  position: relative;
+  z-index: 2;
+`;
+const DialogContent = styled(Box)`
+  position: relative;
+  z-index: 1;
+  overflow: auto;
+  outline: none;
+`;
+const DialogFooter = styled(Box)`
+  position: relative;
+  z-index: 3;
+`;
 const DialogCard = forwardRef(function DialogCard2(props, ref) {
-  var _a2;
+  var _a;
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -5482,7 +6512,7 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
     width: widthProp
   } = props;
   const portal = usePortal();
-  const portalElement = portalProp ? ((_a2 = portal.elements) == null ? void 0 : _a2[portalProp]) || null : portal.element;
+  const portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element;
   const boundaryElement = useBoundaryElement().element;
   const radius = useArrayProp(radiusProp);
   const shadow = useArrayProp(shadowProp);
@@ -5492,7 +6522,7 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   const localContentRef = useRef(null);
   const layer = useLayer();
   const { isTopLayer } = layer;
-  const labelId = "".concat(id, "_label");
+  const labelId = `${id}_label`;
   const showCloseButton = Boolean(onClose) && hideCloseButton === false;
   const showHeader = Boolean(header) || showCloseButton;
   useEffect(() => {
@@ -5572,7 +6602,7 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   ] }) }) });
 });
 const Dialog = forwardRef(function Dialog2(props, ref) {
-  var _a2;
+  var _a;
   const dialog = useDialog();
   const { layer } = useTheme_v2();
   const {
@@ -5601,7 +6631,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
   const prefersReducedMotion = usePrefersReducedMotion();
   const animate = prefersReducedMotion ? false : _animate;
   const portal = usePortal();
-  const portalElement = portalProp ? ((_a2 = portal.elements) == null ? void 0 : _a2[portalProp]) || null : portal.element;
+  const portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element;
   const boundaryElement = useBoundaryElement().element;
   const cardRadius = useArrayProp(cardRadiusProp);
   const padding = useArrayProp(paddingProp);
@@ -5631,7 +6661,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
     },
     [onFocus]
   );
-  const labelId = "".concat(id, "_label");
+  const labelId = `${id}_label`;
   const rootClickTimeoutRef = useRef();
   const handleRootClick = useCallback(() => {
     if (rootClickTimeoutRef.current) {
@@ -5709,12 +6739,19 @@ function DialogProvider(props) {
   return /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children });
 }
 
-var __freeze$a = Object.freeze;
-var __defProp$a = Object.defineProperty;
-var __template$a = (cooked, raw) => __freeze$a(__defProp$a(cooked, "raw", { value: __freeze$a(raw || cooked.slice()) }));
-var _a$a, _b$5;
-const Root$6 = styled.kbd(_a$a || (_a$a = __template$a(["\n  font: inherit;\n  padding: 1px;\n\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
-const Key = styled(KBD)(_b$5 || (_b$5 = __template$a(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
+const Root$6 = styled.kbd`
+  font: inherit;
+  padding: 1px;
+
+  &:not([hidden]) {
+    display: block;
+  }
+`;
+const Key = styled(KBD)`
+  &:not([hidden]) {
+    display: block;
+  }
+`;
 const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
   const { fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps } = props;
   const space = useArrayProp(spaceProp);
@@ -5931,11 +6968,10 @@ function useMenuController(props) {
   };
 }
 
-var __freeze$9 = Object.freeze;
-var __defProp$9 = Object.defineProperty;
-var __template$9 = (cooked, raw) => __freeze$9(__defProp$9(cooked, "raw", { value: __freeze$9(raw || cooked.slice()) }));
-var _a$9;
-const Root$5 = styled(Box)(_a$9 || (_a$9 = __template$9(["\n  outline: none;\n  overflow: auto;\n"])));
+const Root$5 = styled(Box)`
+  outline: none;
+  overflow: auto;
+`;
 const Menu = forwardRef(function Menu2(props, ref) {
   const {
     children,
@@ -6233,25 +7269,110 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
   return /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsx(Fragment, {}) });
 });
 
-var __freeze$8 = Object.freeze;
-var __defProp$8 = Object.defineProperty;
-var __template$8 = (cooked, raw) => __freeze$8(__defProp$8(cooked, "raw", { value: __freeze$8(raw || cooked.slice()) }));
-var _a$8;
-const MenuDivider = styled.hr(_a$8 || (_a$8 = __template$8(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+const MenuDivider = styled.hr`
+  height: 1px;
+  border: 0;
+  background: var(--card-hairline-soft-color);
+  margin: 0;
+`;
 
-var __freeze$7 = Object.freeze;
-var __defProp$7 = Object.defineProperty;
-var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", { value: __freeze$7(raw || cooked.slice()) }));
-var _a$7, _b$4;
 function selectableBaseStyle() {
-  return 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: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return css`
+    background-color: inherit;
+    color: inherit;
+
+    &[data-as='button'] {
+      -webkit-font-smoothing: inherit;
+      appearance: none;
+      outline: none;
+      font: inherit;
+      text-align: inherit;
+      border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `;
 }
 function selectableColorStyle(props) {
-  var _a2;
+  var _a;
   const { $tone } = props;
   const { color, style } = getTheme_v2(props.theme);
   const tone = color.selectable[$tone];
-  return 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            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), _cardColorStyle(color, tone.enabled), _cardColorStyle(color, tone.disabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.selected), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.disabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.selected), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.pressed), (_a2 = style == null ? void 0 : style.card) == null ? void 0 : _a2.root);
+  return css`
+    ${_cardColorStyle(color, tone.enabled)}
+
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
+    outline: none;
+
+    /* &:is(button) */
+    &[data-as='button'] {
+      &:disabled {
+        ${_cardColorStyle(color, tone.disabled)}
+      }
+
+      &:not(:disabled) {
+        &[aria-pressed='true'] {
+          ${_cardColorStyle(color, tone.pressed)}
+        }
+
+        &[data-selected],
+        &[aria-selected='true'] > & {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, tone.hovered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, tone.pressed)}
+            }
+          }
+        }
+      }
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      &[data-disabled] {
+        ${_cardColorStyle(color, tone.disabled)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, tone.pressed)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, tone.hovered)}
+            }
+            &:active {
+              ${_cardColorStyle(color, tone.pressed)}
+            }
+          }
+        }
+      }
+    }
+
+    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+  `;
 }
 
 const Selectable = styled(Box)(
@@ -6525,13 +7646,45 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
   );
 });
 
-var __freeze$6 = Object.freeze;
-var __defProp$6 = Object.defineProperty;
-var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", { value: __freeze$6(raw || cooked.slice()) }));
-var _a$6, _b$3, _c$1, _d;
-const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
-const animation = css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), ({ $visible }) => $visible ? 1 : 0, ({ $animated }) => $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "]))));
+const keyframe = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`;
+const animation = css`
+  background-image: linear-gradient(
+    to right,
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-to),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from)
+  );
+  background-position: 100%;
+  background-size: 200% 100%;
+  background-attachment: fixed;
+  animation-name: ${keyframe};
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-duration: 2000ms;
+`;
+const skeletonStyle = css`
+  opacity: ${({ $visible }) => $visible ? 1 : 0};
+  transition: opacity 200ms ease-in;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    ${({ $animated }) => $animated ? animation : css`
+            background-color: var(--card-skeleton-color-from);
+          `}
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    background-color: var(--card-skeleton-color-from);
+  }
+`;
 
 const Root$4 = styled(Box)(
   responsiveRadiusStyle,
@@ -6595,11 +7748,9 @@ const CodeSkeleton = forwardRef(function TextSkeleton5(props, ref) {
   return /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
 });
 
-var __freeze$5 = Object.freeze;
-var __defProp$5 = Object.defineProperty;
-var __template$5 = (cooked, raw) => __freeze$5(__defProp$5(cooked, "raw", { value: __freeze$5(raw || cooked.slice()) }));
-var _a$5;
-const CustomButton = styled(Button)(_a$5 || (_a$5 = __template$5(["\n  max-width: 100%;\n"])));
+const CustomButton = styled(Button)`
+  max-width: 100%;
+`;
 const Tab = forwardRef(function Tab2(props, forwardedRef) {
   const {
     icon,
@@ -6662,14 +7813,17 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
   );
 });
 
-var __freeze$4 = Object.freeze;
-var __defProp$4 = Object.defineProperty;
-var __template$4 = (cooked, raw) => __freeze$4(__defProp$4(cooked, "raw", { value: __freeze$4(raw || cooked.slice()) }));
-var _a$4;
 function _isReactElement(node) {
   return Boolean(node);
 }
-const CustomInline = styled(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"])));
+const CustomInline = styled(Inline)`
+  & > div {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+`;
 const TabList = forwardRef(function TabList2(props, ref) {
   const { children: childrenProp, ...restProps } = props;
   const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -6725,10 +7879,6 @@ const TabPanel = forwardRef(function TabPanel2(props, ref) {
   );
 });
 
-var __freeze$3 = Object.freeze;
-var __defProp$3 = Object.defineProperty;
-var __template$3 = (cooked, raw) => __freeze$3(__defProp$3(cooked, "raw", { value: __freeze$3(raw || cooked.slice()) }));
-var _a$3, _b$2;
 const STATUS_CARD_TONE = {
   error: "critical",
   warning: "caution",
@@ -6747,8 +7897,16 @@ const ROLES = {
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
-const TextBox = styled(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
+const Root$2 = styled(Card)`
+  pointer-events: all;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
+`;
+const TextBox = styled(Flex)`
+  overflow-x: auto;
+`;
 function Toast(props) {
   const { closable, description, onClose, radius = 3, title, status, ...restProps } = props;
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
@@ -6800,12 +7958,22 @@ const key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || createContext(null);
 const ToastContext = globalScope[key$1];
 
-var __freeze$2 = Object.freeze;
-var __defProp$2 = Object.defineProperty;
-var __template$2 = (cooked, raw) => __freeze$2(__defProp$2(cooked, "raw", { value: __freeze$2(raw || cooked.slice()) }));
-var _a$2, _b$1;
-const Root$1 = styled(Layer)(_a$2 || (_a$2 = __template$2(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n"])));
-const ToastContainer = styled.div(_b$1 || (_b$1 = __template$2(["\n  box-sizing: border-box;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  max-width: 420px;\n  width: 100%;\n"])));
+const Root$1 = styled(Layer)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`;
+const ToastContainer = styled.div`
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  max-width: 420px;
+  width: 100%;
+`;
 let toastId = 0;
 function ToastProvider(props) {
   const { children, padding = 4, paddingX, paddingY, zOffset } = props;
@@ -6843,8 +8011,8 @@ function ToastProvider(props) {
       const id = params.id || String(toastId++);
       const duration = params.duration || 5e3;
       const dismiss = () => {
-        var _a2;
-        const timeoutId = (_a2 = toastsRef.current[id]) == null ? void 0 : _a2.timeoutId;
+        var _a;
+        const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
         setState((prevState) => {
           const idx = prevState.findIndex((t) => t.id === id);
           if (idx > -1) {
@@ -7162,23 +8330,94 @@ const Tree = memo(
 );
 Tree.displayName = "Tree";
 
-var __freeze$1 = Object.freeze;
-var __defProp$1 = Object.defineProperty;
-var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
-var _a$1, _b, _c;
 function treeItemRootStyle() {
-  return css(_a$1 || (_a$1 = __template$1(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      background-color: var(--card-bg-color);\n      color: var(--treeitem-fg-color);\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
+  return css`
+    &[role='none'] > [role='treeitem'] {
+      outline: none;
+      cursor: default;
+      border-radius: 3px;
+
+      background-color: var(--card-bg-color);
+      color: var(--treeitem-fg-color);
+
+      &:focus {
+        position: relative;
+      }
+    }
+
+    &[role='treeitem'] {
+      outline: none;
+
+      & > div {
+        cursor: default;
+        border-radius: 3px;
+
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
+      }
+
+      &:focus > div {
+        position: relative;
+      }
+    }
+  `;
 }
 function treeItemRootColorStyle(props) {
   const $tone = "default";
   const { color } = getTheme_v2(props.theme);
   const tone = color.selectable[$tone];
-  return css(_b || (_b = __template$1(["\n    &[role='none'] {\n      & > [role='treeitem'] {\n        ", "\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", "\n        }\n      }\n    }\n\n    &[role='treeitem'] {\n      & > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _cardColorStyle(color, tone.enabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.selected), _cardColorStyle(color, tone.enabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.selected));
+  return css`
+    &[role='none'] {
+      & > [role='treeitem'] {
+        ${_cardColorStyle(color, tone.enabled)}
+      }
+
+      &[data-selected] > [role='treeitem'] {
+        ${_cardColorStyle(color, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
+          ${_cardColorStyle(color, tone.hovered)}
+        }
+
+        & > [role='treeitem']:focus {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+      }
+    }
+
+    &[role='treeitem'] {
+      & > [data-ui='TreeItem__box'] {
+        ${_cardColorStyle(color, tone.enabled)}
+      }
+
+      &[data-selected] > [data-ui='TreeItem__box'] {
+        ${_cardColorStyle(color, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+          ${_cardColorStyle(color, tone.hovered)}
+        }
+
+        &:focus > [data-ui='TreeItem__box'] {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+      }
+    }
+  `;
 }
 function treeItemBoxStyle(props) {
   const { $level } = props;
   const { space } = getTheme_v2(props.theme);
-  return css(_c || (_c = __template$1(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
+  return css`
+    padding-left: ${rem(space[2] * $level)};
+
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `;
 }
 
 function useTree() {
@@ -7207,13 +8446,13 @@ const TreeGroup = memo(function TreeGroup2(props) {
   );
 });
 
-var __freeze = Object.freeze;
-var __defProp = Object.defineProperty;
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
-var _a;
 const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
 const TreeItemBox = styled(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle);
-const ToggleArrowText = styled(Text)(_a || (_a = __template(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
+const ToggleArrowText = styled(Text)`
+  & > svg {
+    transition: transform 100ms;
+  }
+`;
 const TreeItem = memo(function TreeItem2(props) {
   const {
     children,