@sanity/ui 0.37.15 → 0.37.18

package/lib/dts/src/primitives/textArea/textArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/textArea/textArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAevC,OAAO,EAAC,kBAAkB,EAAe,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAC,qBAAqB,EAAC,MAAM,UAAU,CAAA;AAE9C;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,qBAAqB;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B;AAsBD;;GAEG;AACH,eAAO,MAAM,QAAQ,i4LA6CnB,CAAA"}
+{"version":3,"file":"textArea.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/textArea/textArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAevC,OAAO,EAAC,kBAAkB,EAAe,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAC,qBAAqB,EAAC,MAAM,UAAU,CAAA;AAE9C;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,qBAAqB;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B;AAsBD;;GAEG;AACH,eAAO,MAAM,QAAQ,i4LAiDnB,CAAA"}

package/lib/dts/src/primitives/textInput/textInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/textInput/textInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAiB5F,OAAO,EAAC,kBAAkB,EAAe,MAAM,aAAa,CAAA;AAE5D,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAI7C;;GAEG;AACH,oBAAY,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAC7D,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,aAAa,GAAG,KAAK,CAAC,CAAA;AAEpF;;GAEG;AACH,oBAAY,aAAa,GACrB,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,KAAK,GACL,OAAO,GACP,QAAQ,GACR,UAAU,GACV,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,CAAA;AAEV;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAA;IACjD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IACjD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B;AA+DD;;GAEG;AACH,eAAO,MAAM,SAAS,63LA8NpB,CAAA"}
+{"version":3,"file":"textInput.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/textInput/textInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAiB5F,OAAO,EAAC,kBAAkB,EAAe,MAAM,aAAa,CAAA;AAE5D,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAI7C;;GAEG;AACH,oBAAY,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAC7D,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,aAAa,GAAG,KAAK,CAAC,CAAA;AAEpF;;GAEG;AACH,oBAAY,aAAa,GACrB,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,KAAK,GACL,OAAO,GACP,QAAQ,GACR,UAAU,GACV,KAAK,GACL,MAAM,GACN,MAAM,GACN,MAAM,CAAA;AAEV;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,yBAAyB,CAAA;IACjD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAA;IACjD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B;AA+DD;;GAEG;AACH,eAAO,MAAM,SAAS,63LAkOpB,CAAA"}

package/lib/dts/src/styles/input/textInputStyle.d.ts

@@ -1,5 +1,5 @@
 import { CSSObject, FlattenSimpleInterpolation } from 'styled-components';
-import { ThemeFontWeightKey } from '../../theme';
+import { ThemeColorSchemeKey, ThemeFontWeightKey } from '../../theme';
 import { CardTone } from '../../types';
 import { ThemeProps } from '../types';
 /**
@@ -7,6 +7,7 @@ import { ThemeProps } from '../types';
  */
 export interface TextInputInputStyleProps {
     $fontSize: number[];
+    $scheme: ThemeColorSchemeKey;
     $tone: CardTone;
     $weight?: ThemeFontWeightKey;
 }
@@ -17,6 +18,7 @@ export interface TextInputRepresentationStyleProps {
     $border?: boolean;
     $hasPrefix?: boolean;
     $hasSuffix?: boolean;
+    $scheme: ThemeColorSchemeKey;
     $tone: CardTone;
 }
 export declare function textInputRootStyle(): FlattenSimpleInterpolation;

package/lib/dts/src/styles/input/textInputStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textInputStyle.d.ts","sourceRoot":"","sources":["../../../../../src/styles/input/textInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AAGpC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AAEnC;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,kBAAkB,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,QAAQ,CAAA;CAChB;AAUD,wBAAgB,kBAAkB,IAAI,0BAA0B,CAE/D;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,wBAAwB,GAAG,UAAU,GAC3C,0BAA0B,CAsE5B;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,wBAAwB,GAAG,UAAU,GAAG,SAAS,EAAE,CAYhG;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,iCAAiC,GAAG,UAAU,GACpD,0BAA0B,CA2F5B"}
+{"version":3,"file":"textInputStyle.d.ts","sourceRoot":"","sources":["../../../../../src/styles/input/textInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAA;AACnE,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAA;AAGpC,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAA;AAEnC;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,OAAO,EAAE,mBAAmB,CAAA;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,CAAC,EAAE,kBAAkB,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,mBAAmB,CAAA;IAC5B,KAAK,EAAE,QAAQ,CAAA;CAChB;AAUD,wBAAgB,kBAAkB,IAAI,0BAA0B,CAE/D;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,wBAAwB,GAAG,UAAU,GAC3C,0BAA0B,CAsE5B;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,wBAAwB,GAAG,UAAU,GAAG,SAAS,EAAE,CAYhG;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,iCAAiC,GAAG,UAAU,GACpD,0BAA0B,CA2F5B"}

package/lib/dts/src/theme/studioTheme/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/theme/studioTheme/color.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,KAAK,0CA4mBhB,CAAA"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/theme/studioTheme/color.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,KAAK,0CA6mBhB,CAAA"}

package/lib/sanity-ui.js

@@ -1984,18 +1984,20 @@ var color = createColorTheme({
         name = _ref.name;
 
     if (name === 'default') {
-      var _skeletonFrom = dark ? color$1.hues.gray[900].hex : color$1.hues.gray[100].hex;
+      var _tints = color$1.hues.gray;
+
+      var _skeletonFrom = dark ? _tints[900].hex : _tints[100].hex;
 
       return {
         fg: dark ? color$1.white.hex : color$1.black.hex,
         bg: dark ? color$1.black.hex : color$1.white.hex,
-        border: color$1.hues.gray[dark ? 800 : 200].hex,
+        border: _tints[dark ? 800 : 200].hex,
         focusRing: color$1.hues.blue[dark ? 500 : 500].hex,
         shadow: {
-          outline: rgba(color$1.hues.gray[500].hex, 0.4),
-          umbra: rgba(dark ? color$1.black.hex : color$1.hues.gray[500].hex, 0.2),
-          penumbra: rgba(dark ? color$1.black.hex : color$1.hues.gray[500].hex, 0.14),
-          ambient: rgba(dark ? color$1.black.hex : color$1.hues.gray[500].hex, 0.12)
+          outline: rgba(_tints[500].hex, 0.4),
+          umbra: dark ? rgba(_tints[950].hex, 0.4) : rgba(_tints[500].hex, 0.2),
+          penumbra: dark ? rgba(_tints[950].hex, 0.28) : rgba(_tints[500].hex, 0.14),
+          ambient: dark ? rgba(_tints[950].hex, 0.24) : rgba(_tints[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom,
@@ -2005,18 +2007,18 @@ var color = createColorTheme({
     }
 
     if (name === 'transparent') {
-      var _tints = tones["default"];
-      var _skeletonFrom2 = _tints[dark ? 800 : 200].hex;
+      var _tints2 = tones["default"];
+      var _skeletonFrom2 = _tints2[dark ? 800 : 200].hex;
       return {
-        fg: _tints[dark ? 100 : 900].hex,
-        bg: _tints[dark ? 950 : 50].hex,
-        border: _tints[dark ? 800 : 300].hex,
+        fg: _tints2[dark ? 100 : 900].hex,
+        bg: _tints2[dark ? 950 : 50].hex,
+        border: _tints2[dark ? 800 : 300].hex,
         focusRing: color$1.hues.blue[500].hex,
         shadow: {
-          outline: rgba(_tints[500].hex, dark ? 0.2 : 0.4),
-          umbra: rgba(dark ? color$1.black.hex : _tints[500].hex, 0.2),
-          penumbra: rgba(dark ? color$1.black.hex : _tints[500].hex, 0.14),
-          ambient: rgba(dark ? color$1.black.hex : _tints[500].hex, 0.12)
+          outline: rgba(_tints2[500].hex, 0.4),
+          umbra: dark ? rgba(_tints2[900].hex, 0.4) : rgba(_tints2[500].hex, 0.2),
+          penumbra: dark ? rgba(_tints2[900].hex, 0.28) : rgba(_tints2[500].hex, 0.14),
+          ambient: dark ? rgba(_tints2[900].hex, 0.24) : rgba(_tints2[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom2,
@@ -2033,10 +2035,10 @@ var color = createColorTheme({
       border: tints[dark ? 800 : 200].hex,
       focusRing: tints[500].hex,
       shadow: {
-        outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
-        umbra: rgba(dark ? color$1.black.hex : tints[500].hex, 0.2),
-        penumbra: rgba(dark ? color$1.black.hex : tints[500].hex, 0.14),
-        ambient: rgba(dark ? color$1.black.hex : tints[500].hex, 0.12)
+        outline: rgba(tints[500].hex, 0.4),
+        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
+        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
+        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12)
       },
       skeleton: {
         from: skeletonFrom,
@@ -3701,11 +3703,12 @@ function textInputRootStyle() {
 }
 function textInputBaseStyle(props) {
   var theme = props.theme,
+      $scheme = props.$scheme,
       $tone = props.$tone,
       $weight = props.$weight;
   var font = theme.sanity.fonts.text;
   var color = theme.sanity.color.input;
-  return styled.css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\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-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $tone, color["default"].enabled.fg, color["default"].enabled.placeholder, color["default"].enabled.fg, color["default"].enabled.placeholder, color["default"].disabled.fg, color["default"].disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color["default"].readOnly.fg, color["default"].readOnly.placeholder);
+  return styled.css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color["default"].enabled.fg, color["default"].enabled.placeholder, color["default"].enabled.fg, color["default"].enabled.placeholder, color["default"].disabled.fg, color["default"].disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color["default"].readOnly.fg, color["default"].readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   var theme = props.theme;
@@ -3724,13 +3727,14 @@ function textInputRepresentationStyle(props) {
   var $border = props.$border,
       $hasPrefix = props.$hasPrefix,
       $hasSuffix = props.$hasSuffix,
+      $scheme = props.$scheme,
       $tone = props.$tone,
       theme = props.theme;
   var _theme$sanity2 = theme.sanity,
       focusRing = _theme$sanity2.focusRing,
       input = _theme$sanity2.input;
   var color = theme.sanity.color.input;
-  return styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\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-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 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $tone, color["default"].enabled.bg, color["default"].enabled.fg, $border ? focusRingBorderStyle({
+  return styled.css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\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 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $scheme, $tone, color["default"].enabled.bg, color["default"].enabled.fg, $border ? focusRingBorderStyle({
     color: color["default"].enabled.border,
     width: input.border.width
   }) : undefined, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
@@ -6585,10 +6589,12 @@ var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(props, forwardedR
     "data-ui": "TextArea"
   }, /*#__PURE__*/React__default["default"].createElement(InputRoot$1, null, /*#__PURE__*/React__default["default"].createElement(Input$1, _extends({
     "data-as": "textarea",
+    "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone
   }, restProps, {
     "$fontSize": useArrayProp(fontSize),
     "$padding": useArrayProp(padding),
+    "$scheme": rootTheme.scheme,
     "$space": useArrayProp(0),
     "$tone": rootTheme.tone,
     "$weight": weight,
@@ -6597,7 +6603,9 @@ var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(props, forwardedR
   })), /*#__PURE__*/React__default["default"].createElement(Presentation$1, {
     "$border": border,
     "$radius": useArrayProp(radius),
+    "$scheme": rootTheme.scheme,
     "$tone": rootTheme.tone,
+    "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone
   })));
 });
@@ -6698,7 +6706,9 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
       "$hasPrefix": $hasPrefix,
       "$hasSuffix": $hasSuffix,
       "$radius": radius,
+      "$scheme": rootTheme.scheme,
       "$tone": rootTheme.tone,
+      "data-scheme": rootTheme.scheme,
       "data-tone": rootTheme.tone
     }, icon && /*#__PURE__*/React__default["default"].createElement(LeftBox, {
       padding: padding
@@ -6709,7 +6719,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
     }, /*#__PURE__*/React__default["default"].createElement(Text, {
       size: fontSize
     }, /*#__PURE__*/React.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && /*#__PURE__*/React.createElement(iconRight))));
-  }, [border, fontSize, icon, iconRight, padding, radius, rootTheme.tone, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
+  }, [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
 
   var clearButtonBoxPadding = React.useMemo(function () {
     return padding.map(function (v) {
@@ -6764,12 +6774,14 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
     tone: rootTheme.tone
   }, prefixNode, /*#__PURE__*/React__default["default"].createElement(InputRoot, null, /*#__PURE__*/React__default["default"].createElement(Input, _extends({
     "data-as": "input",
+    "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone
   }, restProps, {
     "$fontSize": fontSize,
     "$iconLeft": $hasIcon,
     "$iconRight": $hasIconRight || $hasClearButton,
     "$padding": padding,
+    "$scheme": rootTheme.scheme,
     "$space": space,
     "$tone": rootTheme.tone,
     "$weight": weight,
@@ -7733,7 +7745,7 @@ function dialogStyle(_ref) {
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: color.shadow.penumbra
+    background: color.shadow.umbra
   };
 }
 function responsiveDialogPositionStyle(props) {