@dynatrace/strato-components 3.10.0 → 3.10.4

package/esm/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-10-0 {
+._r47o0w1-3-10-4 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-10-0:empty::before {
+._r47o0w1-3-10-4:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-10-0:focus:empty {
+._r47o0w1-3-10-4:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-10-0 {
+._r47o0w2-3-10-4 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-10-0:focus:empty {
+._r47o0w2-3-10-4:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-10-0 {
+._r47o0w3-3-10-4 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-10-0:empty::before {
+._r47o0w3-3-10-4:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-10-0 {
+._r47o0w4-3-10-4 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

package/esm/forms/spin-buttons/SpinButton.sty.js

@@ -1,7 +1,7 @@
 import "./SpinButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-10-0", variantClassNames: { error: { true: "_r47o0w2-3-10-0" }, disabled: { true: "_r47o0w3-3-10-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-10-0"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-10-0";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-10-4", variantClassNames: { error: { true: "_r47o0w2-3-10-4" }, disabled: { true: "_r47o0w3-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-10-4"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-10-4";
 export {
   spinButtonCSS,
   spinButtonGroupCSS

package/esm/forms/spin-buttons/SpinButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/SpinButton.css.ts"],
-  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-10-0',variantClassNames:{error:{true:'_r47o0w2-3-10-0'},disabled:{true:'_r47o0w3-3-10-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-10-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-10-0';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-10-4',variantClassNames:{error:{true:'_r47o0w2-3-10-4'},disabled:{true:'_r47o0w3-3-10-4'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-10-4']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-10-4';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACzO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/switch/Switch.css

@@ -1,70 +1,70 @@
-._1tkc5xf0-3-10-0 {
+._1tkc5xf0-3-10-4 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-10-0 {
+._1tkc5xf1-3-10-4 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-10-0 {
+._1tkc5xf2-3-10-4 {
   cursor: default;
 }
-._1tkc5xf3-3-10-0 {
+._1tkc5xf3-3-10-4 {
   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-10-0 {
+._1tkc5xf4-3-10-4 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-10-0 {
+._1tkc5xf5-3-10-4 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-10-0:after {
+._1tkc5xf6-3-10-4:after {
   content: "*";
 }
-._1tkc5xf7-3-10-0 {
+._1tkc5xf7-3-10-4 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xfb-3-10-0 {
-  --_1tkc5xfa-3-10-0: var(--_bx32h1-3-10-0);
+._1tkc5xfb-3-10-4 {
+  --_1tkc5xfa-3-10-4: var(--_bx32h1-3-10-4);
   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-10-0 {
-  --_1tkc5xf8-3-10-0: 1;
-  --_1tkc5xf9-3-10-0: 0;
+._1tkc5xfc-3-10-4 {
+  --_1tkc5xf8-3-10-4: 1;
+  --_1tkc5xf9-3-10-4: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfd-3-10-0 {
-  --_1tkc5xf8-3-10-0: 0;
-  --_1tkc5xf9-3-10-0: 1;
+._1tkc5xfd-3-10-4 {
+  --_1tkc5xf8-3-10-4: 0;
+  --_1tkc5xf9-3-10-4: 1;
   transform: unset;
 }
-._1tkc5xfe-3-10-0 {
-  --_1tkc5xfa-3-10-0: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1tkc5xfe-3-10-4 {
+  --_1tkc5xfa-3-10-4: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1tkc5xfg-3-10-0 {
-  --_1tkc5xfa-3-10-0: var(--dt-colors-icon-critical-default, #bb0731);
+._1tkc5xfg-3-10-4 {
+  --_1tkc5xfa-3-10-4: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1tkc5xfb-3-10-0 > svg {
+._1tkc5xfb-3-10-4 > 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-10-0 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf8-3-10-0);
-  color: var(--_1tkc5xfa-3-10-0);
+._1tkc5xfb-3-10-4 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-10-4);
+  color: var(--_1tkc5xfa-3-10-4);
 }
-._1tkc5xfb-3-10-0 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf9-3-10-0);
-  color: var(--_1tkc5xfa-3-10-0);
+._1tkc5xfb-3-10-4 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-10-4);
+  color: var(--_1tkc5xfa-3-10-4);
 }
-._1tkc5xfh-3-10-0 {
+._1tkc5xfh-3-10-4 {
   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-10-0);
+  background-color: var(--_bx32h3-3-10-4);
 }
-._1tkc5xfr-3-10-0 {
+._1tkc5xfr-3-10-4 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfs-3-10-0 {
+._1tkc5xfs-3-10-4 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xft-3-10-0 {
+._1tkc5xft-3-10-4 {
   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-10-0 {
+._1tkc5xfu-3-10-4 {
   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-10-0 {
+._1tkc5xfv-3-10-4 {
   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-10-0 {
+._1tkc5xfw-3-10-4 {
   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-10-0);
+  background-color: var(--_1tkc5xfa-3-10-4);
 }

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-10-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-10-0", false: "_1tkc5xfd-3-10-0" }, readOnly: { true: "_1tkc5xfe-3-10-0" }, hasError: { true: "_1tkc5xff-3-10-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-10-0"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-10-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-10-0" }, readOnly: { true: "_1tkc5xf2-3-10-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-10-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-10-0", false: "_1tkc5xf5-3-10-0" }, required: { true: "_1tkc5xf6-3-10-0" }, readOnly: { true: "_1tkc5xf7-3-10-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-10-0";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-10-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-10-0", false: "_1tkc5xfj-3-10-0" }, hasError: { true: "_1tkc5xfk-3-10-0", false: "_1tkc5xfl-3-10-0" }, color: { primary: "_1tkc5xfm-3-10-0", neutral: "_1tkc5xfn-3-10-0" }, isFocusVisible: { true: "_1tkc5xfo-3-10-0", false: "_1tkc5xfp-3-10-0" }, readOnly: { true: "_1tkc5xfq-3-10-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-10-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-10-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-10-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-10-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-10-0"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-10-4", variantClassNames: { selected: { true: "_1tkc5xfc-3-10-4", false: "_1tkc5xfd-3-10-4" }, readOnly: { true: "_1tkc5xfe-3-10-4" }, hasError: { true: "_1tkc5xff-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-10-4"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-10-4", variantClassNames: { disabled: { true: "_1tkc5xf1-3-10-4" }, readOnly: { true: "_1tkc5xf2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-10-4", variantClassNames: { disabled: { true: "_1tkc5xf4-3-10-4", false: "_1tkc5xf5-3-10-4" }, required: { true: "_1tkc5xf6-3-10-4" }, readOnly: { true: "_1tkc5xf7-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-10-4";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-10-4", variantClassNames: { disabled: { true: "_1tkc5xfi-3-10-4", false: "_1tkc5xfj-3-10-4" }, hasError: { true: "_1tkc5xfk-3-10-4", false: "_1tkc5xfl-3-10-4" }, color: { primary: "_1tkc5xfm-3-10-4", neutral: "_1tkc5xfn-3-10-4" }, isFocusVisible: { true: "_1tkc5xfo-3-10-4", false: "_1tkc5xfp-3-10-4" }, readOnly: { true: "_1tkc5xfq-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-10-4"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-10-4"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-10-4"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-10-4"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-10-4"]] });
 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-10-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-10-0',false:'_1tkc5xfd-3-10-0'},readOnly:{true:'_1tkc5xfe-3-10-0'},hasError:{true:'_1tkc5xff-3-10-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-10-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-10-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-10-0'},readOnly:{true:'_1tkc5xf2-3-10-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-10-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-10-0',false:'_1tkc5xf5-3-10-0'},required:{true:'_1tkc5xf6-3-10-0'},readOnly:{true:'_1tkc5xf7-3-10-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-10-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-10-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-10-0',false:'_1tkc5xfj-3-10-0'},hasError:{true:'_1tkc5xfk-3-10-0',false:'_1tkc5xfl-3-10-0'},color:{primary:'_1tkc5xfm-3-10-0',neutral:'_1tkc5xfn-3-10-0'},isFocusVisible:{true:'_1tkc5xfo-3-10-0',false:'_1tkc5xfp-3-10-0'},readOnly:{true:'_1tkc5xfq-3-10-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-10-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-10-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-10-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-10-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-10-0']]});"],
+  "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-10-4',variantClassNames:{selected:{true:'_1tkc5xfc-3-10-4',false:'_1tkc5xfd-3-10-4'},readOnly:{true:'_1tkc5xfe-3-10-4'},hasError:{true:'_1tkc5xff-3-10-4'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-10-4']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-10-4',variantClassNames:{disabled:{true:'_1tkc5xf1-3-10-4'},readOnly:{true:'_1tkc5xf2-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-10-4',variantClassNames:{disabled:{true:'_1tkc5xf4-3-10-4',false:'_1tkc5xf5-3-10-4'},required:{true:'_1tkc5xf6-3-10-4'},readOnly:{true:'_1tkc5xf7-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-10-4';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-10-4',variantClassNames:{disabled:{true:'_1tkc5xfi-3-10-4',false:'_1tkc5xfj-3-10-4'},hasError:{true:'_1tkc5xfk-3-10-4',false:'_1tkc5xfl-3-10-4'},color:{primary:'_1tkc5xfm-3-10-4',neutral:'_1tkc5xfn-3-10-4'},isFocusVisible:{true:'_1tkc5xfo-3-10-4',false:'_1tkc5xfp-3-10-4'},readOnly:{true:'_1tkc5xfq-3-10-4'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-10-4'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-10-4'],[{color:'neutral',disabled:true},'_1tkc5xft-3-10-4'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-10-4'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-10-4']]});"],
   "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-10-0 {
-  --_44rwcl0-3-10-0: 0px;
+._44rwcl2-3-10-4 {
+  --_44rwcl0-3-10-4: 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-10-0:focus-within {
-  --_44rwcl0-3-10-0: -2px;
+._44rwcl2-3-10-4:focus-within {
+  --_44rwcl0-3-10-4: -2px;
 }
-._44rwcl2-3-10-0::-webkit-resizer {
+._44rwcl2-3-10-4::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-10-0 {
+._44rwcl3-3-10-4 {
   width: fit-content;
 }
-._44rwcl4-3-10-0 {
+._44rwcl4-3-10-4 {
   resize: none;
 }
-._44rwcl5-3-10-0 {
+._44rwcl5-3-10-4 {
   resize: both;
 }
-._44rwcl6-3-10-0 {
+._44rwcl6-3-10-4 {
   resize: horizontal;
 }
-._44rwcl7-3-10-0 {
+._44rwcl7-3-10-4 {
   resize: vertical;
 }
-._44rwcl8-3-10-0 {
+._44rwcl8-3-10-4 {
   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-10-0);
+  box-shadow: var(--_44rwcl1-3-10-4);
 }
-._44rwcl8-3-10-0::placeholder {
+._44rwcl8-3-10-4::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-10-0:hover {
+._44rwcl8-3-10-4:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-10-0:active {
+._44rwcl8-3-10-4:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-10-0 ._44rwcl8-3-10-0 {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwcl8-3-10-4 {
+  --_44rwcl1-3-10-4: 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-10-0 ._44rwcl8-3-10-0:hover {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwcl8-3-10-4:hover {
+  --_44rwcl1-3-10-4: 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-10-0 ._44rwcl8-3-10-0:active {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwcl8-3-10-4:active {
+  --_44rwcl1-3-10-4: 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-10-0 {
+._44rwcl9-3-10-4 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-10-0::placeholder {
+._44rwcl9-3-10-4::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-10-0:hover {
+._44rwcl9-3-10-4:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-10-0:active {
+._44rwcl9-3-10-4:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-0 ._44rwcl9-3-10-0, ._1jgl8s50-3-10-0 ._44rwcl9-3-10-0:hover, ._1jgl8s50-3-10-0 ._44rwcl9-3-10-0:active {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwcl9-3-10-4, ._1jgl8s50-3-10-4 ._44rwcl9-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwcl9-3-10-4:active {
+  --_44rwcl1-3-10-4: 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-10-0 {
+._44rwcla-3-10-4 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-10-0:hover {
+._44rwcla-3-10-4:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-10-0:active {
+._44rwcla-3-10-4:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-0 ._44rwcla-3-10-0, ._1jgl8s50-3-10-0 ._44rwcla-3-10-0:hover, ._1jgl8s50-3-10-0 ._44rwcla-3-10-0:active {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwcla-3-10-4, ._1jgl8s50-3-10-4 ._44rwcla-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwcla-3-10-4:active {
+  --_44rwcl1-3-10-4: 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-10-0 {
+._44rwclb-3-10-4 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-10-0::placeholder {
+._44rwclb-3-10-4::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-10-0:hover {
+._44rwclb-3-10-4:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-10-0:active {
+._44rwclb-3-10-4:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-10-0 ._44rwclb-3-10-0 {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwclb-3-10-4 {
+  --_44rwcl1-3-10-4: 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-10-0 ._44rwclb-3-10-0:hover {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwclb-3-10-4:hover {
+  --_44rwcl1-3-10-4: 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-10-0 ._44rwclb-3-10-0:active {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwclb-3-10-4:active {
+  --_44rwcl1-3-10-4: 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-10-0 {
+._44rwclc-3-10-4 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-10-0::placeholder {
+._44rwclc-3-10-4::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-10-0:hover {
+._44rwclc-3-10-4:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-10-0:active {
+._44rwclc-3-10-4:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-0 ._44rwclc-3-10-0, ._1jgl8s50-3-10-0 ._44rwclc-3-10-0:hover, ._1jgl8s50-3-10-0 ._44rwclc-3-10-0:active {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwclc-3-10-4, ._1jgl8s50-3-10-4 ._44rwclc-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwclc-3-10-4:active {
+  --_44rwcl1-3-10-4: 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-10-0 {
+._44rwcld-3-10-4 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-10-0:hover {
+._44rwcld-3-10-4:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-10-0:active {
+._44rwcld-3-10-4:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-10-0 ._44rwcld-3-10-0, ._1jgl8s50-3-10-0 ._44rwcld-3-10-0:hover, ._1jgl8s50-3-10-0 ._44rwcld-3-10-0:active {
-  --_44rwcl1-3-10-0: 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-10-4 ._44rwcld-3-10-4, ._1jgl8s50-3-10-4 ._44rwcld-3-10-4:hover, ._1jgl8s50-3-10-4 ._44rwcld-3-10-4:active {
+  --_44rwcl1-3-10-4: 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-10-0 {
+._44rwcle-3-10-4 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-10-0)) translateY(var(--_44rwcl0-3-10-0));
+  transform: translateX(var(--_44rwcl0-3-10-4)) translateY(var(--_44rwcl0-3-10-4));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclf-3-10-0 {
+._44rwclf-3-10-4 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-10-0 {
+._44rwclg-3-10-4 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-10-0 {
+._44rwcli-3-10-4 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-10-0 {
+  ._44rwcle-3-10-4 {
     display: none;
   }
 }

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

@@ -227,6 +227,8 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
                 {
                   ref: textareaRef,
                   id,
+                  name,
+                  form: _form,
                   minLength,
                   maxLength,
                   className: clsx(styles.textArea(styleVariants), focusClassName),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/text-area/TextArea.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { Property } from 'csstype';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResizeIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './TextArea.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { KeyboardEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'TextArea';\n\n// #region Typings\n/**\n * @public\n */\nexport type TextAreaProps = FormControlProps<\n  string,\n  (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    placeholder?: string;\n    /**\n     * This attribute indicates whether the textarea is resizable by the user, and, if so, in which direction.\n     * @defaultValue 'both'\n     */\n    resize?: 'both' | 'vertical' | 'horizontal' | 'none';\n    /**\n     * The visible width of the text control, in average character widths.\n     * If it is specified, it must be a positive integer.\n     * @defaultValue 20\n     */\n    cols?: number;\n    /**\n     * The number of visible text lines for the control. If it is specified, it must be a positive integer.\n     * @defaultValue 2\n     */\n    rows?: number;\n    /**\n     * The minimum number of characters required that the user should enter.\n     * Doesn't stop the user from removing characters so that the number entered goes past the minimum,\n     * but it does make the value entered into the <textarea> invalid.\n     * With a set minlength an empty <textarea> is still considered valid unless you also have the required attribute set.\n     */\n    minLength?: number;\n    /**\n     * The maximum number of characters that the user can enter. If this value isn't specified,\n     * the user can enter an unlimited number of characters.\n     */\n    maxLength?: number;\n    /**\n     * This attribute indicates whether the value of the control can be automatically completed by the browser.\n     * If no autocompletion is desired, it can be set to \"off\".\n     */\n    autoComplete?: string;\n    /**\n     * Sets the width of the textarea element.\n     * @defaultValue 'full'\n     */\n    width?: 'content' | 'full' | Property.Width<string & Record<string, never>>;\n  };\n\n/**\n * @public\n */\nexport type TextAreaInputRef = Omit<\n  FormControlRef<HTMLDivElement>,\n  'inputRef'\n> & {\n  readonly inputRef?: HTMLTextAreaElement | null;\n};\n// #endregion\n\nconst TextAreaRoot = /* @__PURE__ */ forwardRef<\n  TextAreaInputRef,\n  TextAreaProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add text',\n    id: 'E7kKT3Td1FKB37wr',\n    description: 'Default placeholder for the text area input.',\n  });\n\n  const {\n    onChange,\n    onFocus,\n    onBlur,\n    onValidityChange,\n    minLength,\n    maxLength,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    resize = 'both',\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    value: propValue,\n    defaultValue,\n    width = 'full',\n    placeholder = defaultPlaceholder,\n    'aria-describedby': ariaDescribedby,\n    'aria-disabled': ariaDisabledProp,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: TextAreaProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly,\n    inputProps,\n    hintProps,\n    hint,\n    showError: hasError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled: ariaDisabledProp,\n    propReadOnly,\n    controlState,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  // Imperative Handle Construction\n  const containerRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getI18nValidationState(intl, textareaRef.current, 'manual'),\n  );\n\n  useImperativeHandle(forwardedRef, (): TextAreaInputRef => {\n    return {\n      element: containerRef.current,\n      inputRef: textareaRef.current,\n      focus() {\n        textareaRef.current?.focus();\n      },\n      validate() {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n    };\n  });\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: propValue,\n  });\n\n  const {\n    onChange: validationOnChange,\n    onInvalid: validationOnInvalid,\n    ariaProps,\n  } = useFormFieldValidation(\n    textareaRef,\n    { required, minLength, maxLength, value: value ?? '' },\n    undefined,\n    undefined,\n    _emitValidationState,\n  );\n\n  const validateFieldForForm = ({\n    reveal,\n    trigger,\n  }: ValidateFieldOptions): ValidationState => {\n    textareaRef.current?.checkValidity();\n    if (reveal) {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n    }\n    return emitValidationState(\n      getI18nValidationState(intl, textareaRef.current, trigger),\n    );\n  };\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value ?? '',\n    focus: () => textareaRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateFieldForForm(options)),\n    resetValidation: () => {\n      textareaRef.current?.setCustomValidity('');\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = event.target?.value;\n    setValue(newValue);\n    onChange?.(newValue, event);\n    !controlState && validationOnChange();\n  };\n\n  const mergedAriaDescribedby =\n    [ariaDescribedby, inputProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n      emitValidationState,\n    });\n\n  const {\n    focusProps: { onFocus: focusRingOnFocus, onBlur: focusRingOnBlur },\n    focusClassName,\n  } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const styleVariants = {\n    error: hasError,\n    disabled: disabledOrAriaDisabled,\n    readOnly,\n  };\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={containerRef}\n      className={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <div\n        className={styles.container({\n          contentWidth: width === 'content',\n          resize,\n        })}\n        style={{ width }}\n      >\n        <textarea\n          ref={textareaRef}\n          id={id}\n          minLength={minLength}\n          maxLength={maxLength}\n          className={clsx(styles.textArea(styleVariants), focusClassName)}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          value={value}\n          aria-required={required}\n          aria-disabled={ariaDisabled}\n          placeholder={placeholder}\n          onChange={handleChange}\n          onInvalid={(e) => !controlState && validationOnInvalid(e)}\n          onFocus={focusRingOnFocus}\n          onBlur={focusRingOnBlur}\n          {..._mergeProps(\n            restProps,\n            controlState\n              ? { ...inputProps, 'aria-describedby': mergedAriaDescribedby }\n              : ariaProps,\n          )}\n        />\n        {resize !== 'none' && (\n          <ResizeIcon className={styles.resizeIcon(styleVariants)} />\n        )}\n      </div>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * The `TextArea` component can be used as a multi-line plain-text editing control to\n * enter free-form text, such as a comment on a form.\n * The component uses a fallback FormFieldMessages context if it wasn't wrapped in a FormField.\n * @public\n */\nexport const TextArea = withFormFieldMessageContextProvider<\n  TextAreaProps,\n  TextAreaInputRef,\n  HTMLDivElement\n>(TextAreaRoot);\n\n(TextArea as typeof TextArea & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Property } from 'csstype';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ResizeIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './TextArea.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { KeyboardEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'TextArea';\n\n// #region Typings\n/**\n * @public\n */\nexport type TextAreaProps = FormControlProps<\n  string,\n  (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    placeholder?: string;\n    /**\n     * This attribute indicates whether the textarea is resizable by the user, and, if so, in which direction.\n     * @defaultValue 'both'\n     */\n    resize?: 'both' | 'vertical' | 'horizontal' | 'none';\n    /**\n     * The visible width of the text control, in average character widths.\n     * If it is specified, it must be a positive integer.\n     * @defaultValue 20\n     */\n    cols?: number;\n    /**\n     * The number of visible text lines for the control. If it is specified, it must be a positive integer.\n     * @defaultValue 2\n     */\n    rows?: number;\n    /**\n     * The minimum number of characters required that the user should enter.\n     * Doesn't stop the user from removing characters so that the number entered goes past the minimum,\n     * but it does make the value entered into the <textarea> invalid.\n     * With a set minlength an empty <textarea> is still considered valid unless you also have the required attribute set.\n     */\n    minLength?: number;\n    /**\n     * The maximum number of characters that the user can enter. If this value isn't specified,\n     * the user can enter an unlimited number of characters.\n     */\n    maxLength?: number;\n    /**\n     * This attribute indicates whether the value of the control can be automatically completed by the browser.\n     * If no autocompletion is desired, it can be set to \"off\".\n     */\n    autoComplete?: string;\n    /**\n     * Sets the width of the textarea element.\n     * @defaultValue 'full'\n     */\n    width?: 'content' | 'full' | Property.Width<string & Record<string, never>>;\n  };\n\n/**\n * @public\n */\nexport type TextAreaInputRef = Omit<\n  FormControlRef<HTMLDivElement>,\n  'inputRef'\n> & {\n  readonly inputRef?: HTMLTextAreaElement | null;\n};\n// #endregion\n\nconst TextAreaRoot = /* @__PURE__ */ forwardRef<\n  TextAreaInputRef,\n  TextAreaProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage({\n    defaultMessage: 'Add text',\n    id: 'E7kKT3Td1FKB37wr',\n    description: 'Default placeholder for the text area input.',\n  });\n\n  const {\n    onChange,\n    onFocus,\n    onBlur,\n    onValidityChange,\n    minLength,\n    maxLength,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    resize = 'both',\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    value: propValue,\n    defaultValue,\n    width = 'full',\n    placeholder = defaultPlaceholder,\n    'aria-describedby': ariaDescribedby,\n    'aria-disabled': ariaDisabledProp,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: TextAreaProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly,\n    inputProps,\n    hintProps,\n    hint,\n    showError: hasError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled: ariaDisabledProp,\n    propReadOnly,\n    controlState,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  // Imperative Handle Construction\n  const containerRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getI18nValidationState(intl, textareaRef.current, 'manual'),\n  );\n\n  useImperativeHandle(forwardedRef, (): TextAreaInputRef => {\n    return {\n      element: containerRef.current,\n      inputRef: textareaRef.current,\n      focus() {\n        textareaRef.current?.focus();\n      },\n      validate() {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        textareaRef.current?.checkValidity();\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, textareaRef.current, 'manual'),\n        );\n      },\n    };\n  });\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: propValue,\n  });\n\n  const {\n    onChange: validationOnChange,\n    onInvalid: validationOnInvalid,\n    ariaProps,\n  } = useFormFieldValidation(\n    textareaRef,\n    { required, minLength, maxLength, value: value ?? '' },\n    undefined,\n    undefined,\n    _emitValidationState,\n  );\n\n  const validateFieldForForm = ({\n    reveal,\n    trigger,\n  }: ValidateFieldOptions): ValidationState => {\n    textareaRef.current?.checkValidity();\n    if (reveal) {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n    }\n    return emitValidationState(\n      getI18nValidationState(intl, textareaRef.current, trigger),\n    );\n  };\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value ?? '',\n    focus: () => textareaRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateFieldForForm(options)),\n    resetValidation: () => {\n      textareaRef.current?.setCustomValidity('');\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = event.target?.value;\n    setValue(newValue);\n    onChange?.(newValue, event);\n    !controlState && validationOnChange();\n  };\n\n  const mergedAriaDescribedby =\n    [ariaDescribedby, inputProps['aria-describedby']]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n      emitValidationState,\n    });\n\n  const {\n    focusProps: { onFocus: focusRingOnFocus, onBlur: focusRingOnBlur },\n    focusClassName,\n  } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const styleVariants = {\n    error: hasError,\n    disabled: disabledOrAriaDisabled,\n    readOnly,\n  };\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={containerRef}\n      className={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <div\n        className={styles.container({\n          contentWidth: width === 'content',\n          resize,\n        })}\n        style={{ width }}\n      >\n        <textarea\n          ref={textareaRef}\n          id={id}\n          name={name}\n          form={_form}\n          minLength={minLength}\n          maxLength={maxLength}\n          className={clsx(styles.textArea(styleVariants), focusClassName)}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          value={value}\n          aria-required={required}\n          aria-disabled={ariaDisabled}\n          placeholder={placeholder}\n          onChange={handleChange}\n          onInvalid={(e) => !controlState && validationOnInvalid(e)}\n          onFocus={focusRingOnFocus}\n          onBlur={focusRingOnBlur}\n          {..._mergeProps(\n            restProps,\n            controlState\n              ? { ...inputProps, 'aria-describedby': mergedAriaDescribedby }\n              : ariaProps,\n          )}\n        />\n        {resize !== 'none' && (\n          <ResizeIcon className={styles.resizeIcon(styleVariants)} />\n        )}\n      </div>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * The `TextArea` component can be used as a multi-line plain-text editing control to\n * enter free-form text, such as a comment on a form.\n * The component uses a fallback FormFieldMessages context if it wasn't wrapped in a FormField.\n * @public\n */\nexport const TextArea = withFormFieldMessageContextProvider<\n  TextAreaProps,\n  TextAreaInputRef,\n  HTMLDivElement\n>(TextAreaRoot);\n\n(TextArea as typeof TextArea & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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-10-0", variantClassNames: { contentWidth: { true: "_44rwcl3-3-10-0" }, resize: { none: "_44rwcl4-3-10-0", both: "_44rwcl5-3-10-0", horizontal: "_44rwcl6-3-10-0", vertical: "_44rwcl7-3-10-0" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-10-0", variantClassNames: { error: { true: "_44rwclf-3-10-0" }, disabled: { true: "_44rwclg-3-10-0" }, readOnly: { true: "_44rwclh-3-10-0" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-10-0"]] });
-var textArea = _7a468({ defaultClassName: "_44rwcl8-3-10-0", variantClassNames: { disabled: { true: "_44rwcl9-3-10-0" }, readOnly: { true: "_44rwcla-3-10-0" }, error: { true: "_44rwclb-3-10-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-10-0"], [{ readOnly: true, error: true }, "_44rwcld-3-10-0"]] });
+var container = _7a468({ defaultClassName: "_44rwcl2-3-10-4", variantClassNames: { contentWidth: { true: "_44rwcl3-3-10-4" }, resize: { none: "_44rwcl4-3-10-4", both: "_44rwcl5-3-10-4", horizontal: "_44rwcl6-3-10-4", vertical: "_44rwcl7-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = _7a468({ defaultClassName: "_44rwcle-3-10-4", variantClassNames: { error: { true: "_44rwclf-3-10-4" }, disabled: { true: "_44rwclg-3-10-4" }, readOnly: { true: "_44rwclh-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcli-3-10-4"]] });
+var textArea = _7a468({ defaultClassName: "_44rwcl8-3-10-4", variantClassNames: { disabled: { true: "_44rwcl9-3-10-4" }, readOnly: { true: "_44rwcla-3-10-4" }, error: { true: "_44rwclb-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwclc-3-10-4"], [{ readOnly: true, error: true }, "_44rwcld-3-10-4"]] });
 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-10-0',variantClassNames:{contentWidth:{true:'_44rwcl3-3-10-0'},resize:{none:'_44rwcl4-3-10-0',both:'_44rwcl5-3-10-0',horizontal:'_44rwcl6-3-10-0',vertical:'_44rwcl7-3-10-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-10-0',variantClassNames:{error:{true:'_44rwclf-3-10-0'},disabled:{true:'_44rwclg-3-10-0'},readOnly:{true:'_44rwclh-3-10-0'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-10-0']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-10-0',variantClassNames:{disabled:{true:'_44rwcl9-3-10-0'},readOnly:{true:'_44rwcla-3-10-0'},error:{true:'_44rwclb-3-10-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-10-0'],[{readOnly:true,error:true},'_44rwcld-3-10-0']]});"],
+  "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-10-4',variantClassNames:{contentWidth:{true:'_44rwcl3-3-10-4'},resize:{none:'_44rwcl4-3-10-4',both:'_44rwcl5-3-10-4',horizontal:'_44rwcl6-3-10-4',vertical:'_44rwcl7-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeIcon = _7a468({defaultClassName:'_44rwcle-3-10-4',variantClassNames:{error:{true:'_44rwclf-3-10-4'},disabled:{true:'_44rwclg-3-10-4'},readOnly:{true:'_44rwclh-3-10-4'}},defaultVariants:{},compoundVariants:[[{error:true,disabled:true},'_44rwcli-3-10-4']]});\nexport var textArea = _7a468({defaultClassName:'_44rwcl8-3-10-4',variantClassNames:{disabled:{true:'_44rwcl9-3-10-4'},readOnly:{true:'_44rwcla-3-10-4'},error:{true:'_44rwclb-3-10-4'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_44rwclc-3-10-4'],[{readOnly:true,error:true},'_44rwcld-3-10-4']]});"],
   "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": []
 }