@dynatrace/strato-components 3.11.2 → 3.11.3

package/esm/forms/switch/Switch.css

@@ -1,70 +1,70 @@
-._1tkc5xf0-3-11-2 {
+._1tkc5xf0-3-11-3 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-11-2 {
+._1tkc5xf1-3-11-3 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-11-2 {
+._1tkc5xf2-3-11-3 {
   cursor: default;
 }
-._1tkc5xf3-3-11-2 {
+._1tkc5xf3-3-11-3 {
   font-size: var(--dt-typography-text-base-default-size, 14px);
   overflow-wrap: anywhere;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._1tkc5xf4-3-11-2 {
+._1tkc5xf4-3-11-3 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-11-2 {
+._1tkc5xf5-3-11-3 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-11-2:after {
+._1tkc5xf6-3-11-3:after {
   content: "*";
 }
-._1tkc5xf7-3-11-2 {
+._1tkc5xf7-3-11-3 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xfb-3-11-2 {
-  --_1tkc5xfa-3-11-2: var(--_bx32h1-3-11-2);
+._1tkc5xfb-3-11-3 {
+  --_1tkc5xfa-3-11-3: var(--_bx32h1-3-11-3);
   display: flex;
   align-items: center;
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._1tkc5xfc-3-11-2 {
-  --_1tkc5xf8-3-11-2: 1;
-  --_1tkc5xf9-3-11-2: 0;
+._1tkc5xfc-3-11-3 {
+  --_1tkc5xf8-3-11-3: 1;
+  --_1tkc5xf9-3-11-3: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfd-3-11-2 {
-  --_1tkc5xf8-3-11-2: 0;
-  --_1tkc5xf9-3-11-2: 1;
+._1tkc5xfd-3-11-3 {
+  --_1tkc5xf8-3-11-3: 0;
+  --_1tkc5xf9-3-11-3: 1;
   transform: unset;
 }
-._1tkc5xfe-3-11-2 {
-  --_1tkc5xfa-3-11-2: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1tkc5xfe-3-11-3 {
+  --_1tkc5xfa-3-11-3: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1tkc5xfg-3-11-2 {
-  --_1tkc5xfa-3-11-2: var(--dt-colors-icon-critical-default, #bb0731);
+._1tkc5xfg-3-11-3 {
+  --_1tkc5xfa-3-11-3: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1tkc5xfb-3-11-2 > svg {
+._1tkc5xfb-3-11-3 > svg {
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-delay: var(--dt-timings-offset-medium, 30ms);
   transition-property: opacity;
 }
-._1tkc5xfb-3-11-2 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf8-3-11-2);
-  color: var(--_1tkc5xfa-3-11-2);
+._1tkc5xfb-3-11-3 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-11-3);
+  color: var(--_1tkc5xfa-3-11-3);
 }
-._1tkc5xfb-3-11-2 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf9-3-11-2);
-  color: var(--_1tkc5xfa-3-11-2);
+._1tkc5xfb-3-11-3 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-11-3);
+  color: var(--_1tkc5xfa-3-11-3);
 }
-._1tkc5xfh-3-11-2 {
+._1tkc5xfh-3-11-3 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -79,27 +79,27 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-11-2);
+  background-color: var(--_bx32h3-3-11-3);
 }
-._1tkc5xfr-3-11-2 {
+._1tkc5xfr-3-11-3 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfs-3-11-2 {
+._1tkc5xfs-3-11-3 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xft-3-11-2 {
+._1tkc5xft-3-11-3 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1tkc5xfu-3-11-2 {
+._1tkc5xfu-3-11-3 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1tkc5xfv-3-11-2 {
+._1tkc5xfv-3-11-3 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfw-3-11-2 {
+._1tkc5xfw-3-11-3 {
   transition-property: background-color;
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-fast, 150ms);
@@ -110,5 +110,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_1tkc5xfa-3-11-2);
+  background-color: var(--_1tkc5xfa-3-11-3);
 }

package/esm/forms/switch/Switch.sty.js

@@ -2,11 +2,11 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Switch.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-11-2", variantClassNames: { selected: { true: "_1tkc5xfc-3-11-2", false: "_1tkc5xfd-3-11-2" }, readOnly: { true: "_1tkc5xfe-3-11-2" }, hasError: { true: "_1tkc5xff-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-11-2"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-2" }, readOnly: { true: "_1tkc5xf2-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xf4-3-11-2", false: "_1tkc5xf5-3-11-2" }, required: { true: "_1tkc5xf6-3-11-2" }, readOnly: { true: "_1tkc5xf7-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-11-2";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xfi-3-11-2", false: "_1tkc5xfj-3-11-2" }, hasError: { true: "_1tkc5xfk-3-11-2", false: "_1tkc5xfl-3-11-2" }, color: { primary: "_1tkc5xfm-3-11-2", neutral: "_1tkc5xfn-3-11-2" }, isFocusVisible: { true: "_1tkc5xfo-3-11-2", false: "_1tkc5xfp-3-11-2" }, readOnly: { true: "_1tkc5xfq-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-11-2"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-11-2"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-11-2"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-11-2"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-11-2"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-11-3", variantClassNames: { selected: { true: "_1tkc5xfc-3-11-3", false: "_1tkc5xfd-3-11-3" }, readOnly: { true: "_1tkc5xfe-3-11-3" }, hasError: { true: "_1tkc5xff-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-11-3"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-11-3", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-3" }, readOnly: { true: "_1tkc5xf2-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-11-3", variantClassNames: { disabled: { true: "_1tkc5xf4-3-11-3", false: "_1tkc5xf5-3-11-3" }, required: { true: "_1tkc5xf6-3-11-3" }, readOnly: { true: "_1tkc5xf7-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-11-3";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-11-3", variantClassNames: { disabled: { true: "_1tkc5xfi-3-11-3", false: "_1tkc5xfj-3-11-3" }, hasError: { true: "_1tkc5xfk-3-11-3", false: "_1tkc5xfl-3-11-3" }, color: { primary: "_1tkc5xfm-3-11-3", neutral: "_1tkc5xfn-3-11-3" }, isFocusVisible: { true: "_1tkc5xfo-3-11-3", false: "_1tkc5xfp-3-11-3" }, readOnly: { true: "_1tkc5xfq-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-11-3"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-11-3"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-11-3"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-11-3"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-11-3"]] });
 export {
   switchIconCSS,
   switchLabelCSS,

package/esm/forms/switch/Switch.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-11-2',variantClassNames:{selected:{true:'_1tkc5xfc-3-11-2',false:'_1tkc5xfd-3-11-2'},readOnly:{true:'_1tkc5xfe-3-11-2'},hasError:{true:'_1tkc5xff-3-11-2'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-11-2']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xf1-3-11-2'},readOnly:{true:'_1tkc5xf2-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xf4-3-11-2',false:'_1tkc5xf5-3-11-2'},required:{true:'_1tkc5xf6-3-11-2'},readOnly:{true:'_1tkc5xf7-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-11-2';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xfi-3-11-2',false:'_1tkc5xfj-3-11-2'},hasError:{true:'_1tkc5xfk-3-11-2',false:'_1tkc5xfl-3-11-2'},color:{primary:'_1tkc5xfm-3-11-2',neutral:'_1tkc5xfn-3-11-2'},isFocusVisible:{true:'_1tkc5xfo-3-11-2',false:'_1tkc5xfp-3-11-2'},readOnly:{true:'_1tkc5xfq-3-11-2'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-11-2'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-11-2'],[{color:'neutral',disabled:true},'_1tkc5xft-3-11-2'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-11-2'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-11-2']]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-11-3',variantClassNames:{selected:{true:'_1tkc5xfc-3-11-3',false:'_1tkc5xfd-3-11-3'},readOnly:{true:'_1tkc5xfe-3-11-3'},hasError:{true:'_1tkc5xff-3-11-3'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-11-3']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-11-3',variantClassNames:{disabled:{true:'_1tkc5xf1-3-11-3'},readOnly:{true:'_1tkc5xf2-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-11-3',variantClassNames:{disabled:{true:'_1tkc5xf4-3-11-3',false:'_1tkc5xf5-3-11-3'},required:{true:'_1tkc5xf6-3-11-3'},readOnly:{true:'_1tkc5xf7-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-11-3';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-11-3',variantClassNames:{disabled:{true:'_1tkc5xfi-3-11-3',false:'_1tkc5xfj-3-11-3'},hasError:{true:'_1tkc5xfk-3-11-3',false:'_1tkc5xfl-3-11-3'},color:{primary:'_1tkc5xfm-3-11-3',neutral:'_1tkc5xfn-3-11-3'},isFocusVisible:{true:'_1tkc5xfo-3-11-3',false:'_1tkc5xfp-3-11-3'},readOnly:{true:'_1tkc5xfq-3-11-3'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-11-3'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-11-3'],[{color:'neutral',disabled:true},'_1tkc5xft-3-11-3'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-11-3'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-11-3']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AAC/S,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClM,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7P,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,OAAM,EAAC,SAAQ,oBAAmB,SAAQ,mBAAkB,GAAE,gBAAe,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/text-area/TextArea.css

@@ -1,5 +1,5 @@
-._44rwcl2-3-11-2 {
-  --_44rwcl0-3-11-2: 0px;
+._44rwcl2-3-11-3 {
+  --_44rwcl0-3-11-3: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl2-3-11-2:focus-within {
-  --_44rwcl0-3-11-2: -2px;
+._44rwcl2-3-11-3:focus-within {
+  --_44rwcl0-3-11-3: -2px;
 }
-._44rwcl2-3-11-2::-webkit-resizer {
+._44rwcl2-3-11-3::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-11-2 {
+._44rwcl3-3-11-3 {
   width: fit-content;
 }
-._44rwcl4-3-11-2 {
+._44rwcl4-3-11-3 {
   resize: none;
 }
-._44rwcl5-3-11-2 {
+._44rwcl5-3-11-3 {
   resize: both;
 }
-._44rwcl6-3-11-2 {
+._44rwcl6-3-11-3 {
   resize: horizontal;
 }
-._44rwcl7-3-11-2 {
+._44rwcl7-3-11-3 {
   resize: vertical;
 }
-._44rwcl8-3-11-2 {
+._44rwcl8-3-11-3 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -51,138 +51,138 @@
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  box-shadow: var(--_44rwcl1-3-11-2);
+  box-shadow: var(--_44rwcl1-3-11-3);
 }
-._44rwcl8-3-11-2::placeholder {
+._44rwcl8-3-11-3::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-11-2:hover {
+._44rwcl8-3-11-3:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-11-2:active {
+._44rwcl8-3-11-3:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-11-2 ._44rwcl8-3-11-2 {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-11-3 ._44rwcl8-3-11-3 {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-2 ._44rwcl8-3-11-2:hover {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-11-3 ._44rwcl8-3-11-3:hover {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-2 ._44rwcl8-3-11-2:active {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-11-3 ._44rwcl8-3-11-3:active {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcl9-3-11-2 {
+._44rwcl9-3-11-3 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-11-2::placeholder {
+._44rwcl9-3-11-3::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-11-2:hover {
+._44rwcl9-3-11-3:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-11-2:active {
+._44rwcl9-3-11-3:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-2 ._44rwcl9-3-11-2, ._1jgl8s50-3-11-2 ._44rwcl9-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwcl9-3-11-2:active {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-3 ._44rwcl9-3-11-3, ._1jgl8s50-3-11-3 ._44rwcl9-3-11-3:hover, ._1jgl8s50-3-11-3 ._44rwcl9-3-11-3:active {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcla-3-11-2 {
+._44rwcla-3-11-3 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-11-2:hover {
+._44rwcla-3-11-3:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-11-2:active {
+._44rwcla-3-11-3:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-2 ._44rwcla-3-11-2, ._1jgl8s50-3-11-2 ._44rwcla-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwcla-3-11-2:active {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-3 ._44rwcla-3-11-3, ._1jgl8s50-3-11-3 ._44rwcla-3-11-3:hover, ._1jgl8s50-3-11-3 ._44rwcla-3-11-3:active {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclb-3-11-2 {
+._44rwclb-3-11-3 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-11-2::placeholder {
+._44rwclb-3-11-3::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-11-2:hover {
+._44rwclb-3-11-3:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-11-2:active {
+._44rwclb-3-11-3:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-11-2 ._44rwclb-3-11-2 {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-11-3 ._44rwclb-3-11-3 {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-2 ._44rwclb-3-11-2:hover {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-11-3 ._44rwclb-3-11-3:hover {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-11-2 ._44rwclb-3-11-2:active {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-11-3 ._44rwclb-3-11-3:active {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclc-3-11-2 {
+._44rwclc-3-11-3 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-11-2::placeholder {
+._44rwclc-3-11-3::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-11-2:hover {
+._44rwclc-3-11-3:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-11-2:active {
+._44rwclc-3-11-3:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-2 ._44rwclc-3-11-2, ._1jgl8s50-3-11-2 ._44rwclc-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwclc-3-11-2:active {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-3 ._44rwclc-3-11-3, ._1jgl8s50-3-11-3 ._44rwclc-3-11-3:hover, ._1jgl8s50-3-11-3 ._44rwclc-3-11-3:active {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcld-3-11-2 {
+._44rwcld-3-11-3 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-11-2:hover {
+._44rwcld-3-11-3:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-11-2:active {
+._44rwcld-3-11-3:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-11-2 ._44rwcld-3-11-2, ._1jgl8s50-3-11-2 ._44rwcld-3-11-2:hover, ._1jgl8s50-3-11-2 ._44rwcld-3-11-2:active {
-  --_44rwcl1-3-11-2: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-3 ._44rwcld-3-11-3, ._1jgl8s50-3-11-3 ._44rwcld-3-11-3:hover, ._1jgl8s50-3-11-3 ._44rwcld-3-11-3:active {
+  --_44rwcl1-3-11-3: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcle-3-11-2 {
+._44rwcle-3-11-3 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-11-2)) translateY(var(--_44rwcl0-3-11-2));
+  transform: translateX(var(--_44rwcl0-3-11-3)) translateY(var(--_44rwcl0-3-11-3));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclf-3-11-2 {
+._44rwclf-3-11-3 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-11-2 {
+._44rwclg-3-11-3 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-11-2 {
+._44rwcli-3-11-3 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-11-2 {
+  ._44rwcle-3-11-3 {
     display: none;
   }
 }

package/esm/forms/text-area/TextArea.sty.js

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./TextArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = _7a468({ defaultClassName: "_44rwcl2-3-11-2", variantClassNames: { contentWidth: { true: "_44rwcl3-3-11-2" }, resize: { none: "_44rwcl4-3-11-2", both: "_44rwcl5-3-11-2", horizontal: "_44rwcl6-3-11-2", vertical: "_44rwcl7-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-11-2", variantClassNames: { error: { true: "_44rwclf-3-11-2" }, disabled: { true: "_44rwclg-3-11-2" }, readOnly: { true: "_44rwclh-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-11-2"]] });
-var textArea = _7a468({ defaultClassName: "_44rwcl8-3-11-2", variantClassNames: { disabled: { true: "_44rwcl9-3-11-2" }, readOnly: { true: "_44rwcla-3-11-2" }, error: { true: "_44rwclb-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-11-2"], [{ readOnly: true, error: true }, "_44rwcld-3-11-2"]] });
+var container = _7a468({ defaultClassName: "_44rwcl2-3-11-3", variantClassNames: { contentWidth: { true: "_44rwcl3-3-11-3" }, resize: { none: "_44rwcl4-3-11-3", both: "_44rwcl5-3-11-3", horizontal: "_44rwcl6-3-11-3", vertical: "_44rwcl7-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-11-3", variantClassNames: { error: { true: "_44rwclf-3-11-3" }, disabled: { true: "_44rwclg-3-11-3" }, readOnly: { true: "_44rwclh-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-11-3"]] });
+var textArea = _7a468({ defaultClassName: "_44rwcl8-3-11-3", variantClassNames: { disabled: { true: "_44rwcl9-3-11-3" }, readOnly: { true: "_44rwcla-3-11-3" }, error: { true: "_44rwclb-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-11-3"], [{ readOnly: true, error: true }, "_44rwcld-3-11-3"]] });
 export {
   container,
   resizeIcon,

package/esm/forms/text-area/TextArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/text-area/TextArea.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl2-3-11-2',variantClassNames:{contentWidth:{true:'_44rwcl3-3-11-2'},resize:{none:'_44rwcl4-3-11-2',both:'_44rwcl5-3-11-2',horizontal:'_44rwcl6-3-11-2',vertical:'_44rwcl7-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-11-2',variantClassNames:{error:{true:'_44rwclf-3-11-2'},disabled:{true:'_44rwclg-3-11-2'},readOnly:{true:'_44rwclh-3-11-2'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-11-2']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-11-2',variantClassNames:{disabled:{true:'_44rwcl9-3-11-2'},readOnly:{true:'_44rwcla-3-11-2'},error:{true:'_44rwclb-3-11-2'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-11-2'],[{readOnly:true,error:true},'_44rwcld-3-11-2']]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './TextArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'_44rwcl2-3-11-3',variantClassNames:{contentWidth:{true:'_44rwcl3-3-11-3'},resize:{none:'_44rwcl4-3-11-3',both:'_44rwcl5-3-11-3',horizontal:'_44rwcl6-3-11-3',vertical:'_44rwcl7-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-11-3',variantClassNames:{error:{true:'_44rwclf-3-11-3'},disabled:{true:'_44rwclg-3-11-3'},readOnly:{true:'_44rwclh-3-11-3'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-11-3']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-11-3',variantClassNames:{disabled:{true:'_44rwcl9-3-11-3'},readOnly:{true:'_44rwcla-3-11-3'},error:{true:'_44rwclb-3-11-3'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-11-3'],[{readOnly:true,error:true},'_44rwcld-3-11-3']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,GAAE,QAAO,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,YAAW,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3Q,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACxQ,IAAI,WAAW,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,OAAM,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }