@sanity/ui 2.16.22 → 2.16.23

package/dist/_chunks-es/_visual-editing.mjs

@@ -249,6 +249,7 @@ function _createElementRectValueListener() {
     subscribe(element, subscriber) {
       const resizeObserver = new _ResizeObserver(([entry]) => {
         subscriber({
+          // oxlint-disable-next-line no-deprecated
           _contentRect: entry.contentRect,
           border: {
             width: entry.borderBoxSize[0].inlineSize,
@@ -386,7 +387,7 @@ function useTheme() {
   return useTheme$1();
 }
 function useTheme_v2() {
-  const $ = c(2), t0 = useTheme$1();
+  const $ = c(2), t0 = /* @__PURE__ */ useTheme$1();
   let t1;
   return $[0] !== t0 ? (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
 }
@@ -792,6 +793,7 @@ function responsiveGridGapStyle(props) {
     space
   } = getTheme_v2(props.theme);
   return _responsive(media, props.$gap, (gap) => ({
+    // oxlint-disable-next-line no-deprecated
     gridGap: gap ? rem(space[gap]) : void 0
   }));
 }
@@ -843,13 +845,7 @@ function responsiveInputPaddingIconRightStyle(props) {
     $iconRight: !0
   });
 }
-const ROOT_STYLE = css`
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  align-items: center;
-`;
+const ROOT_STYLE = css`&:not([hidden]){display:flex;}align-items:center;`;
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
@@ -862,71 +858,7 @@ function textInputBaseStyle(props) {
     color,
     font
   } = getTheme_v2(props.theme);
-  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};
-      }
-    }
-  `;
+  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;&:-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;}&[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};&:not(:invalid):not(:disabled):not(:read-only){--input-fg-color:${color.input.default.enabled.fg};--input-placeholder-color:${color.input.default.enabled.placeholder};}&:not(:invalid):disabled{--input-fg-color:${color.input.default.disabled.fg};--input-placeholder-color:${color.input.default.disabled.placeholder};}&:invalid{--input-fg-color:${color.input.invalid.enabled.fg};--input-placeholder-color:${color.input.invalid.enabled.placeholder};}&:read-only{--input-fg-color:${color.input.default.readOnly.fg};--input-placeholder-color:${color.input.default.readOnly.placeholder};}}`;
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -952,136 +884,33 @@ function textInputRepresentationStyle(props) {
     color,
     input
   } = getTheme_v2(props.theme);
-  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({
+  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};*:not(:disabled) + &[data-border]{--input-box-shadow:${focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
-  })};
-      }
-
-      /* 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({
+  })};}*: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
-  })};
-        }
-      }
-
-      /* focused */
-      *:not(:disabled):focus + & {
-        &[data-border] {
-          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
+  })};}}*: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
-  })};
-        }
-
-        &:not([data-border]) {
-          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
+  })};}&: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({
+  })};}}*: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
-  })};
-        }
-      }
-
-      *: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({
+  })};}}*: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
-  })};
-        }
-      }
-
-      /* 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({
+  })};}}*: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;}@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
-  })};
-        }
-
-        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-          --input-box-shadow: ${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) {
   const {
@@ -1136,37 +965,7 @@ function labelBaseStyle(props) {
   } = props, {
     font
   } = getTheme_v2(props.theme);
-  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;
-    }
-  `;
+  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{display:inline;}& [data-sanity-icon]{vertical-align:baseline;}`;
 }
 const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledLabel",
@@ -1586,66 +1385,7 @@ function textBaseStyle(props) {
   } = props, {
     font
   } = getTheme_v2(props.theme);
-  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;
-      }
-    }
-  `;
+  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{display:inline;}& [data-sanity-icon]{vertical-align:baseline;color:var(--card-icon-color);& path{vector-effect:non-scaling-stroke !important;}}`;
 }
 const StyledText = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledText",
@@ -1841,45 +1581,7 @@ function buttonBaseStyles(props) {
   } = props, {
     style
   } = getTheme_v2(props.theme);
-  return css`
-    ${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;
-    }
-  `;
+  return css`${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(",");
@@ -2008,36 +1710,7 @@ function cardBaseStyle(props) {
   } = props, {
     space
   } = getTheme_v2(props.theme);
-  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;
-    }
-  `;
+  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;}&[data-as='a']{outline:none;text-decoration:none;}&[data-as='pre']{font:inherit;}`;
 }
 function cardColorStyle(props) {
   const {
@@ -2052,100 +1725,15 @@ function cardColorStyle(props) {
     width: card.border.width,
     color: "var(--card-border-color)"
   };
-  return css`
-    color-scheme: ${color._dark ? "dark" : "light"};
-
-    ${_cardColorStyle(color, color, $checkered)}
-
-    background-color: ${$muted ? "var(--card-muted-bg-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({
+  return css`color-scheme:${color._dark ? "dark" : "light"};${_cardColorStyle(color, color, $checkered)} background-color:${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};color:var(--card-fg-color);&[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: border2,
     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({
+  }) : void 0};}}}&[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: border2,
     focusRing: card.focusRing
-  }) : void 0};
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `;
+  }) : void 0};}}}${style?.card?.root}`;
 }
 const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledCard",
@@ -2179,10 +1767,7 @@ const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
 });
 Card.displayName = "ForwardRef(Card)";
 function checkboxBaseStyles() {
-  return css`
-    position: relative;
-    display: inline-block;
-  `;
+  return css`position:relative;display:inline-block;`;
 }
 function inputElementStyles(props) {
   const {
@@ -2192,86 +1777,23 @@ function inputElementStyles(props) {
   } = getTheme_v2(props.theme), {
     focusRing
   } = input.checkbox;
-  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({
+  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
-  })};
-      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({
+  })};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: ${color.input.default.enabled.bg};
-    }
-
-    /* focus */
-    &:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({
+  })};color:${color.input.default.enabled.bg};}&: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({
+  })};}&: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({
+  })};}&[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: ${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({
+  })};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
@@ -2280,41 +1802,13 @@ function inputElementStyles(props) {
       width: 1,
       offset: 1
     }
-  })};
-    }
-
-    &:disabled + span {
-      background-color: ${color.input.default.disabled.bg};
-      box-shadow: ${focusRingBorderStyle({
+  })};}&:disabled + span{background-color:${color.input.default.disabled.bg};box-shadow:${focusRingBorderStyle({
     width: input.border.width,
     color: color.input.default.disabled.border
-  })};
-      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({
+  })};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: ${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;
-    }
-  `;
+  })};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 StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledCheckbox",
@@ -2477,33 +1971,7 @@ function codeSyntaxHighlightingStyle({
   };
 }
 function codeBaseStyle() {
-  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;
-    }
-  `;
+  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{display:inline;}& [data-sanity-icon]{vertical-align:baseline;}`;
 }
 const LazyRefractor = lazy(() => import("./refractor.mjs")), StyledCode = /* @__PURE__ */ styled.pre.withConfig({
   displayName: "StyledCode",
@@ -2592,57 +2060,7 @@ function headingBaseStyle(props) {
   } = props, {
     font
   } = getTheme_v2(props.theme);
-  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;
-    }
-  `;
+  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{display:inline;}& [data-sanity-icon]{vertical-align:baseline;}`;
 }
 const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledHeading",
@@ -3518,6 +2936,7 @@ const ViewportOverlay = () => {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
     animate: _animate = !1,
     arrow: arrowProp = !1,
+    // oxlint-disable-next-line no-deprecated
     boundaryElement = boundaryElementContext.element,
     children: childProp,
     constrainSize = !1,
@@ -3525,6 +2944,7 @@ const ViewportOverlay = () => {
     disabled,
     fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
     matchReferenceWidth,
+    // oxlint-disable-next-line no-deprecated
     floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
     modal,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -3537,6 +2957,7 @@ const ViewportOverlay = () => {
     portal,
     preventOverflow = !0,
     radius: radiusProp = 3,
+    // oxlint-disable-next-line no-deprecated
     referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
     referenceElement,
     scheme,
@@ -3581,28 +3002,35 @@ const ViewportOverlay = () => {
       rootBoundary
     }))), ret.push(offset({
       mainAxis: DEFAULT_POPOVER_DISTANCE
-    })), (constrainSize || matchReferenceWidth) && ret.push(size({
-      apply({
-        availableWidth,
-        availableHeight,
-        elements,
-        referenceWidth: referenceWidth_0
-      }) {
-        referenceWidthRef.current = referenceWidth_0;
-        const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
-        matchReferenceWidth ? elements.floating.style.width = `${referenceWidth_0}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, _maxWidth ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
-      },
-      boundaryElement: floatingBoundary || void 0,
-      margins,
-      padding: DEFAULT_POPOVER_PADDING
-    })), preventOverflow && ret.push(shift({
+    })), (constrainSize || matchReferenceWidth) && ret.push(
+      // oxlint-disable-next-line react-compiler
+      size({
+        apply({
+          availableWidth,
+          availableHeight,
+          elements,
+          referenceWidth: referenceWidth_0
+        }) {
+          referenceWidthRef.current = referenceWidth_0;
+          const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
+          matchReferenceWidth ? elements.floating.style.width = `${referenceWidth_0}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, _maxWidth ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
+        },
+        boundaryElement: floatingBoundary || void 0,
+        margins,
+        padding: DEFAULT_POPOVER_PADDING
+      })
+    ), preventOverflow && ret.push(shift({
       boundary: floatingBoundary || void 0,
       rootBoundary,
       padding: DEFAULT_POPOVER_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
-      padding: DEFAULT_POPOVER_PADDING
-    })), animate && ret.push(origin), ret.push(hide({
+    })), arrowProp && ret.push(
+      // oxlint-disable-next-line react-compiler
+      arrow({
+        // oxlint-disable-next-line react-compiler
+        element: arrowRef,
+        padding: DEFAULT_POPOVER_PADDING
+      })
+    ), animate && ret.push(origin), ret.push(hide({
       boundary: referenceBoundary || void 0,
       padding: DEFAULT_POPOVER_PADDING,
       strategy: "referenceHidden"
@@ -3639,7 +3067,34 @@ const ViewportOverlay = () => {
     return childProp || /* @__PURE__ */ jsx(Fragment, {});
   const popover = /* @__PURE__ */ jsxs(LayerProvider, { zOffset, children: [
     modal && /* @__PURE__ */ jsx(ViewportOverlay, {}),
-    /* @__PURE__ */ jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: matchReferenceWidth ? referenceWidthRef.current : width, x, y, children: content })
+    /* @__PURE__ */ jsx(
+      PopoverCard,
+      {
+        ...restProps,
+        __unstable_margins: margins,
+        animate,
+        arrow: arrowProp,
+        arrowRef: setArrow,
+        arrowX,
+        arrowY,
+        hidden: referenceHidden,
+        overflow,
+        padding,
+        placement,
+        radius,
+        ref: setFloating,
+        scheme,
+        shadow,
+        originX,
+        originY,
+        strategy,
+        tone,
+        width: matchReferenceWidth ? referenceWidthRef.current : width,
+        x,
+        y,
+        children: content
+      }
+    )
   ] }), children = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
@@ -3648,118 +3103,29 @@ const ViewportOverlay = () => {
 }));
 Popover.displayName = "Memo(ForwardRef(Popover))";
 function radioBaseStyle() {
-  return css`
-    position: relative;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-
-    &[data-read-only] {
-      outline: 1px solid red;
-    }
-  `;
+  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), dist = (input.radio.size - input.radio.markSize) / 2;
-  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({
+  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;& + 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
-  })};
-
-      &::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({
+  })};&::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;}}&:not(:disabled):focus + span{box-shadow:${focusRingStyle({
     border: {
       width: input.border.width,
       color: color.input.default.enabled.border
     },
     focusRing: input.radio.focusRing
-  })};
-    }
-
-    &:not(:disabled):focus:not(:focus-visible) + span {
-      box-shadow: ${focusRingBorderStyle({
+  })};}&:not(:disabled):focus:not(:focus-visible) + span{box-shadow:${focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
-  })};
-    }
-
-    &:checked + span::after {
-      opacity: 1;
-    }
-
-    /* customValidity */
-    &[data-error] + span {
-      background-color: ${color.input.invalid.enabled.border};
-      box-shadow: ${focusRingBorderStyle({
+  })};}&:checked + span::after{opacity: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
-  })};
-      &::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};
-      }
-    }
-  `;
+  })};&::after{background:${color.input.invalid.enabled.muted.bg};}}&[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};}}&: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 StyledRadio = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledRadio",
@@ -3794,93 +3160,38 @@ const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
 });
 Radio.displayName = "ForwardRef(Radio)";
 function rootStyle() {
-  return css`
-    position: relative;
-    width: -moz-available;
-    width: -webkit-fill-available;
-    width: stretch;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `;
+  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`
-    -webkit-font-smoothing: antialiased;
-    appearance: none;
-    border: 0;
-    font-family: ${font.text.family};
-    color: inherit;
-    width: 100%;
-    outline: none;
-    margin: 0;
-
-    &:disabled {
-      opacity: 1;
-    }
-  `;
+  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`
-    /* enabled */
-    background-color: ${color.input.default.enabled.bg};
-    color: ${color.input.default.enabled.fg};
-    box-shadow: ${focusRingBorderStyle({
+  return css`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
-  })};
-
-    /* hovered */
-    @media (hover: hover) {
-      &:not(:disabled):hover {
-        background-color: ${color.input.default.hovered.bg};
-        color: ${color.input.default.hovered.fg};
-        box-shadow: ${focusRingBorderStyle({
+  })};@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
-  })};
-      }
-    }
-
-    /* focused */
-    &:not(:disabled):focus {
-      box-shadow: ${focusRingStyle({
+  })};}}&:not(:disabled):focus{box-shadow:${focusRingStyle({
     border: {
       width: input.border.width,
       color: color.input.default.enabled.border
     },
     focusRing: input.select.focusRing
-  })};
-    }
-
-    /* read-only */
-    &[data-read-only] {
-      background-color: ${color.input.default.readOnly.bg};
-      color: ${color.input.default.readOnly.fg};
-      box-shadow: ${focusRingBorderStyle({
+  })};}&[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
-  })};
-    }
-
-    /* disabled */
-    &:not([data-read-only]):disabled {
-      background-color: ${color.input.default.disabled.bg};
-      color: ${color.input.default.disabled.fg};
-      box-shadow: ${focusRingBorderStyle({
+  })};}&: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(size2) {
   return {
@@ -3904,32 +3215,7 @@ function iconBoxStyle(props) {
   const {
     color
   } = getTheme_v2(props.theme);
-  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};
-    }
-  `;
+  return css`pointer-events:none;position:absolute;top:0;right:0;--card-fg-color:${color.input.default.enabled.fg};@media (hover:hover){select:not(disabled):not(:read-only):hover + &&{--card-fg-color:${color.input.default.hovered.fg};}}select:disabled + &&{--card-fg-color:${color.input.default.disabled.fg};}select[data-read-only] + &&{--card-fg-color:${color.input.default.readOnly.fg};}`;
 }
 const selectStyle = {
   root: rootStyle,
@@ -3996,6 +3282,7 @@ function responsiveStackSpaceStyle(props) {
     space
   } = getTheme_v2(props.theme);
   return _responsive(media, props.$space, (spaceIndex) => ({
+    // oxlint-disable-next-line no-deprecated
     gridGap: rem(space[spaceIndex])
   }));
 }
@@ -4016,125 +3303,25 @@ const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
 });
 Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
-  return css`
-    position: relative;
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `;
+  return css`position:relative;&:not([hidden]){display:inline-block;}`;
 }
 function switchInputStyles() {
-  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;
-  `;
+  return css`position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;height:100%;width:100%;outline:none;padding:0;margin:0;z-index:1;`;
 }
 function switchRepresentationStyles(props) {
   const {
     color,
     input
   } = getTheme_v2(props.theme);
-  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({
+  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)};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;}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};
-    }
-  `;
+  })};}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`
-    &: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)};
-  `;
+  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 {
@@ -4142,31 +3329,7 @@ function switchThumbStyles(props) {
   } = props, {
     input
   } = getTheme_v2(props.theme), trackWidth = input.switch.width, trackHeight = input.switch.height, trackPadding = input.switch.padding, size2 = trackHeight - input.switch.padding * 2, checkedOffset = trackWidth - trackPadding * 2 - size2, indeterminateOffset = trackWidth / 2 - size2 / 2 - trackPadding, checked = $indeterminate !== !0 && props.$checked === !0;
-  return css`
-    &:not([hidden]) {
-      display: block;
-    }
-    position: absolute;
-    left: ${rem(trackPadding)};
-    top: ${rem(trackPadding)};
-    height: ${rem(size2)};
-    width: ${rem(size2)};
-    border-radius: ${rem(size2 / 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);
-    `}
-  `;
+  return css`&:not([hidden]){display:block;}position:absolute;left:${rem(trackPadding)};top:${rem(trackPadding)};height:${rem(size2)};width:${rem(size2)};border-radius:${rem(size2 / 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 StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
   displayName: "StyledSwitch",
@@ -4812,7 +3975,7 @@ function useMenuController(props) {
     });
     return () => cancelAnimationFrame(rafId);
   }, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
-    // eslint-disable-next-line react-hooks/refs
+    // oxlint-disable-next-line react-compiler
     activeElement,
     activeIndex,
     handleItemMouseEnter,
@@ -4913,27 +4076,7 @@ const MenuDivider = styled.hr.withConfig({
 })`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
 MenuDivider.displayName = "MenuDivider";
 function selectableBaseStyle() {
-  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;
-    }
-  `;
+  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;}&[data-as='a']{text-decoration:none;}`;
 }
 function selectableColorStyle(props) {
   const {
@@ -4942,75 +4085,7 @@ function selectableColorStyle(props) {
     color,
     style
   } = getTheme_v2(props.theme), tone = color.selectable[$tone];
-  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)}
-            }
-          }
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `;
+  return css`${_cardColorStyle(color, tone.enabled)} background-color:var(--card-bg-color);color:var(--card-fg-color);outline:none;&[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)}}}}}}&[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)}}}}}}${style?.card?.root}`;
 }
 const Selectable = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "Selectable",