@sanity/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/sanity-ui.esm.js

@@ -4192,7 +4192,6 @@ function textInputFontSizeStyle(props) {
 
 function textInputRepresentationStyle(props) {
   const {
-    $border,
     $hasPrefix,
     $hasSuffix,
     $scheme,
@@ -4204,25 +4203,27 @@ function textInputRepresentationStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n        --input-box-shadow: ", ";\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --input-box-shadow: ", ";\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + & {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, $border ? focusRingBorderStyle({
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
-  }) : void 0, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
+  }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
     color: color.invalid.enabled.border,
     width: input.border.width
-  }) : "none", focusRingStyle({
-    border: $border ? {
+  }), focusRingStyle({
+    border: {
       color: color.default.enabled.border,
       width: input.border.width
-    } : void 0,
+    },
     focusRing
-  }), color.default.disabled.bg, color.default.disabled.fg, $border ? focusRingBorderStyle({
+  }), focusRingStyle({
+    focusRing
+  }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
     color: color.default.disabled.border,
     width: input.border.width
-  }) : "none", color.default.readOnly.bg, color.default.readOnly.fg, color.default.hovered.bg, color.default.hovered.fg, $border ? focusRingBorderStyle({
+  }), color.default.readOnly.bg, color.default.readOnly.fg, color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
     color: color.default.hovered.border,
     width: input.border.width
-  }) : "none");
+  }));
 }
 
 function responsiveMarginStyle(props) {
@@ -6841,10 +6842,10 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
         disabled,
         ref
       })), /* @__PURE__ */jsx(Presentation$1, {
-        $border: border,
         $radius: useArrayProp(radius),
         $scheme: rootTheme.scheme,
         $tone: rootTheme.tone,
+        "data-border": border ? "" : void 0,
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone
       })]
@@ -6926,12 +6927,12 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     })
   }), [prefix, radius]);
   const presentationNode = useMemo(() => /* @__PURE__ */jsxs(Presentation, {
-    $border: border,
     $hasPrefix,
     $hasSuffix,
     $radius: radius,
     $scheme: rootTheme.scheme,
     $tone: rootTheme.tone,
+    "data-border": border ? "" : void 0,
     "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone,
     children: [icon && /* @__PURE__ */jsx(LeftBox, {