@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/forms/select/styles/Select.sty.js

@@ -1,28 +1,28 @@
 import "./Select.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearReactSelectZIndex = "_dlenfc5-3-0-1";
-var filter = "_dlenfc1-3-0-1";
-var placeholderColor = "_dlenfch-3-0-1";
-var select = "_dlenfc0-3-0-1";
-var selectAll = "_dlenfcn-3-0-1";
-var selectGroupHeading = "_dlenfcb-3-0-1";
-var selectMenuDivider = "_dlenfci-3-0-1";
-var selectMenuListWrapper = "_dlenfcd-3-0-1";
-var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfcj-3-0-1", variantClassNames: { isTriggerWidth: { true: "_dlenfck-3-0-1" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcl-3-0-1";
-var selectNoOptionsMessage = "_dlenfce-3-0-1";
-var selectOptionMulti = "_dlenfco-3-0-1";
-var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcp-3-0-1", variantClassNames: { selected: { true: "_dlenfcq-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcr-3-0-1";
-var selectOptionPrefix = "_dlenfcs-3-0-1";
-var selectOptionSingle = "_dlenfcm-3-0-1";
-var selectOptionSuffix = "_dlenfct-3-0-1";
-var selectTrigger = _7a468({ defaultClassName: "_dlenfc8-3-0-1", variantClassNames: { fullWidth: { true: "_dlenfc9-3-0-1" }, readOnly: { true: "_dlenfca-3-0-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-0-1", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-0-1" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcf-3-0-1";
-var selectVirtualizationWrapper = "_dlenfcc-3-0-1";
-var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-0-1", variantClassNames: { fullWidth: { true: "_dlenfc3-3-0-1", false: "_dlenfc4-3-0-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfcg-3-0-1";
+var clearReactSelectZIndex = "_dlenfc5-3-1-0";
+var filter = "_dlenfc1-3-1-0";
+var placeholderColor = "_dlenfch-3-1-0";
+var select = "_dlenfc0-3-1-0";
+var selectAll = "_dlenfcn-3-1-0";
+var selectGroupHeading = "_dlenfcb-3-1-0";
+var selectMenuDivider = "_dlenfci-3-1-0";
+var selectMenuListWrapper = "_dlenfcd-3-1-0";
+var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfcj-3-1-0", variantClassNames: { isTriggerWidth: { true: "_dlenfck-3-1-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcl-3-1-0";
+var selectNoOptionsMessage = "_dlenfce-3-1-0";
+var selectOptionMulti = "_dlenfco-3-1-0";
+var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcp-3-1-0", variantClassNames: { selected: { true: "_dlenfcq-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcr-3-1-0";
+var selectOptionPrefix = "_dlenfcs-3-1-0";
+var selectOptionSingle = "_dlenfcm-3-1-0";
+var selectOptionSuffix = "_dlenfct-3-1-0";
+var selectTrigger = _7a468({ defaultClassName: "_dlenfc8-3-1-0", variantClassNames: { fullWidth: { true: "_dlenfc9-3-1-0" }, readOnly: { true: "_dlenfca-3-1-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-1-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-1-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcf-3-1-0";
+var selectVirtualizationWrapper = "_dlenfcc-3-1-0";
+var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-1-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-1-0", false: "_dlenfc4-3-1-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfcg-3-1-0";
 export {
   clearReactSelectZIndex,
   filter,

package/esm/forms/select/styles/Select.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/styles/Select.css.ts"],
-  "sourcesContent": ["import './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-0-1';\nexport var filter = '_dlenfc1-3-0-1';\nexport var placeholderColor = '_dlenfch-3-0-1';\nexport var select = '_dlenfc0-3-0-1';\nexport var selectAll = '_dlenfcn-3-0-1';\nexport var selectGroupHeading = '_dlenfcb-3-0-1';\nexport var selectMenuDivider = '_dlenfci-3-0-1';\nexport var selectMenuListWrapper = '_dlenfcd-3-0-1';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfcj-3-0-1',variantClassNames:{isTriggerWidth:{true:'_dlenfck-3-0-1'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcl-3-0-1';\nexport var selectNoOptionsMessage = '_dlenfce-3-0-1';\nexport var selectOptionMulti = '_dlenfco-3-0-1';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcp-3-0-1',variantClassNames:{selected:{true:'_dlenfcq-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcr-3-0-1';\nexport var selectOptionPrefix = '_dlenfcs-3-0-1';\nexport var selectOptionSingle = '_dlenfcm-3-0-1';\nexport var selectOptionSuffix = '_dlenfct-3-0-1';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc8-3-0-1',variantClassNames:{fullWidth:{true:'_dlenfc9-3-0-1'},readOnly:{true:'_dlenfca-3-0-1'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-0-1',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-0-1'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcf-3-0-1';\nexport var selectVirtualizationWrapper = '_dlenfcc-3-0-1';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-0-1',variantClassNames:{fullWidth:{true:'_dlenfc3-3-0-1',false:'_dlenfc4-3-0-1'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfcg-3-0-1';"],
+  "sourcesContent": ["import './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-1-0';\nexport var filter = '_dlenfc1-3-1-0';\nexport var placeholderColor = '_dlenfch-3-1-0';\nexport var select = '_dlenfc0-3-1-0';\nexport var selectAll = '_dlenfcn-3-1-0';\nexport var selectGroupHeading = '_dlenfcb-3-1-0';\nexport var selectMenuDivider = '_dlenfci-3-1-0';\nexport var selectMenuListWrapper = '_dlenfcd-3-1-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfcj-3-1-0',variantClassNames:{isTriggerWidth:{true:'_dlenfck-3-1-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcl-3-1-0';\nexport var selectNoOptionsMessage = '_dlenfce-3-1-0';\nexport var selectOptionMulti = '_dlenfco-3-1-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcp-3-1-0',variantClassNames:{selected:{true:'_dlenfcq-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcr-3-1-0';\nexport var selectOptionPrefix = '_dlenfcs-3-1-0';\nexport var selectOptionSingle = '_dlenfcm-3-1-0';\nexport var selectOptionSuffix = '_dlenfct-3-1-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc8-3-1-0',variantClassNames:{fullWidth:{true:'_dlenfc9-3-1-0'},readOnly:{true:'_dlenfca-3-1-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-1-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-1-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcf-3-1-0';\nexport var selectVirtualizationWrapper = '_dlenfcc-3-1-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-1-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-1-0',false:'_dlenfc4-3-1-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfcg-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,SAAS;AACb,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;AAC5B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxL,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3M,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7L,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjM,IAAI,kBAAkB;",
   "names": []
 }

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

@@ -1,28 +1,28 @@
-._r47o0w1-3-0-1 {
+._r47o0w1-3-1-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-0-1:empty::before {
+._r47o0w1-3-1-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-0-1:focus:empty {
+._r47o0w1-3-1-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-0-1 {
+._r47o0w2-3-1-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-0-1:focus:empty {
+._r47o0w2-3-1-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-0-1 {
+._r47o0w3-3-1-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-0-1:empty::before {
+._r47o0w3-3-1-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-0-1 {
+._r47o0w4-3-1-0 {
   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-0-1", variantClassNames: { error: { true: "_r47o0w2-3-0-1" }, disabled: { true: "_r47o0w3-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-0-1"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-0-1";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-1-0", variantClassNames: { error: { true: "_r47o0w2-3-1-0" }, disabled: { true: "_r47o0w3-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-1-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-1-0";
 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-0-1',variantClassNames:{error:{true:'_r47o0w2-3-0-1'},disabled:{true:'_r47o0w3-3-0-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-0-1']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-0-1';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-1-0',variantClassNames:{error:{true:'_r47o0w2-3-1-0'},disabled:{true:'_r47o0w3-3-1-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-1-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACrO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/switch/Switch.css

@@ -1,61 +1,61 @@
-._1tkc5xf0-3-0-1 {
+._1tkc5xf0-3-1-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-0-1 {
+._1tkc5xf1-3-1-0 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-0-1 {
+._1tkc5xf2-3-1-0 {
   cursor: not-allowed;
 }
-._1tkc5xf3-3-0-1 {
+._1tkc5xf3-3-1-0 {
   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-0-1 {
+._1tkc5xf4-3-1-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-0-1 {
+._1tkc5xf5-3-1-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-0-1:after {
+._1tkc5xf6-3-1-0:after {
   content: "*";
 }
-._1tkc5xfa-3-0-1 {
-  --_1tkc5xf9-3-0-1: var(--_bx32h1-3-0-1);
+._1tkc5xfa-3-1-0 {
+  --_1tkc5xf9-3-1-0: var(--_bx32h1-3-1-0);
   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;
 }
-._1tkc5xfb-3-0-1 {
-  --_1tkc5xf7-3-0-1: 1;
-  --_1tkc5xf8-3-0-1: 0;
+._1tkc5xfb-3-1-0 {
+  --_1tkc5xf7-3-1-0: 1;
+  --_1tkc5xf8-3-1-0: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfc-3-0-1 {
-  --_1tkc5xf7-3-0-1: 0;
-  --_1tkc5xf8-3-0-1: 1;
+._1tkc5xfc-3-1-0 {
+  --_1tkc5xf7-3-1-0: 0;
+  --_1tkc5xf8-3-1-0: 1;
   transform: unset;
 }
-._1tkc5xfa-3-0-1 > svg {
+._1tkc5xfa-3-1-0 > 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;
 }
-._1tkc5xfa-3-0-1 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf7-3-0-1);
-  color: var(--_1tkc5xf9-3-0-1);
+._1tkc5xfa-3-1-0 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf7-3-1-0);
+  color: var(--_1tkc5xf9-3-1-0);
 }
-._1tkc5xfa-3-0-1 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf8-3-0-1);
-  color: var(--_1tkc5xf9-3-0-1);
+._1tkc5xfa-3-1-0 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf8-3-1-0);
+  color: var(--_1tkc5xf9-3-1-0);
 }
-._1tkc5xfd-3-0-1 {
+._1tkc5xfd-3-1-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -70,22 +70,22 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-0-1);
+  background-color: var(--_bx32h3-3-1-0);
 }
-._1tkc5xfm-3-0-1 {
-  background-color: var(--_bx32h2-3-0-1);
+._1tkc5xfm-3-1-0 {
+  background-color: var(--_bx32h2-3-1-0);
 }
-._1tkc5xfn-3-0-1 {
+._1tkc5xfn-3-1-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfo-3-0-1 {
+._1tkc5xfo-3-1-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xfp-3-0-1 {
+._1tkc5xfp-3-1-0 {
   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);
 }
-._1tkc5xfq-3-0-1 {
+._1tkc5xfq-3-1-0 {
   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);
@@ -96,5 +96,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_bx32h1-3-0-1);
+  background-color: var(--_bx32h1-3-1-0);
 }

package/esm/forms/switch/Switch.js

@@ -82,7 +82,7 @@ const Switch = forwardRef(
       onBlur: validationOnBlur,
       onInvalid: validationOnInvalid,
       ariaProps
-    } = useFormFieldValidation(inputRef);
+    } = useFormFieldValidation(inputRef, { required });
     const [controlStateHasError, hint] = useFormControlState(controlState);
     const showError = controlStateHasError || messagesContextState.showError;
     const { inputProps, hintProps } = useInputHint({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { DataTestId } from '../../core/types/data-props.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 { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  WithChildren & {\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * The `Switch` component allows users to toggle between two different states. You can\n * set a specific initial value using the `defaultValue` prop for an uncontrolled switch\n * or setting the initial value of the state of a controlled switch accordingly. The `name` prop also\n * needs to be specified for identifying the `Switch` when submitting it in a form.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      controlState,\n      name,\n      formValue,\n      onChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly = false,\n    }: SwitchProps = props;\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef);\n\n    const [controlStateHasError, hint] = useFormControlState(controlState);\n\n    const showError = controlStateHasError || messagesContextState.showError;\n\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps, hintProps } = useInputHint({\n      hint,\n      hasError: showError,\n    });\n\n    if (value !== undefined && !onChange && isDev()) {\n      // eslint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    const errorFocusColor = showError ? 'critical' : color;\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color:\n        disabledOrAriaDisabled || ariaDisabled ? 'neutral' : errorFocusColor,\n      disabled,\n    });\n\n    /** The callback function when the state changes */\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        !controlState && validationOnChange();\n      }\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={(event) => {\n                focusProps.onBlur(event);\n                !controlState && validationOnBlur(event);\n              }}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: isSelected\n                  ? 'accent'\n                  : showError\n                  ? 'emphasized'\n                  : 'default',\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { DataTestId } from '../../core/types/data-props.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 { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  WithChildren & {\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * The `Switch` component allows users to toggle between two different states. You can\n * set a specific initial value using the `defaultValue` prop for an uncontrolled switch\n * or setting the initial value of the state of a controlled switch accordingly. The `name` prop also\n * needs to be specified for identifying the `Switch` when submitting it in a form.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      controlState,\n      name,\n      formValue,\n      onChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly = false,\n    }: SwitchProps = props;\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { required });\n\n    const [controlStateHasError, hint] = useFormControlState(controlState);\n\n    const showError = controlStateHasError || messagesContextState.showError;\n\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps, hintProps } = useInputHint({\n      hint,\n      hasError: showError,\n    });\n\n    if (value !== undefined && !onChange && isDev()) {\n      // eslint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    const errorFocusColor = showError ? 'critical' : color;\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color:\n        disabledOrAriaDisabled || ariaDisabled ? 'neutral' : errorFocusColor,\n      disabled,\n    });\n\n    /** The callback function when the state changes */\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        !controlState && validationOnChange();\n      }\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={(event) => {\n                focusProps.onBlur(event);\n                !controlState && validationOnBlur(event);\n              }}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: isSelected\n                  ? 'accent'\n                  : showError\n                  ? 'emphasized'\n                  : 'default',\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,11 +1,11 @@
 import "../../styles/field.css";
 import "./Switch.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfa-3-0-1", variantClassNames: { selected: { true: "_1tkc5xfb-3-0-1", false: "_1tkc5xfc-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-0-1", variantClassNames: { disabled: { true: "_1tkc5xf1-3-0-1" }, readOnly: { true: "_1tkc5xf2-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-0-1", variantClassNames: { disabled: { true: "_1tkc5xf4-3-0-1", false: "_1tkc5xf5-3-0-1" }, required: { true: "_1tkc5xf6-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfq-3-0-1";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfd-3-0-1", variantClassNames: { disabled: { true: "_1tkc5xfe-3-0-1", false: "_1tkc5xff-3-0-1" }, hasError: { true: "_1tkc5xfg-3-0-1", false: "_1tkc5xfh-3-0-1" }, color: { primary: "_1tkc5xfi-3-0-1", neutral: "_1tkc5xfj-3-0-1" }, isFocusVisible: { true: "_1tkc5xfk-3-0-1", false: "_1tkc5xfl-3-0-1" }, readOnly: { true: "_1tkc5xfm-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-0-1"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-0-1"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-0-1"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfa-3-1-0", variantClassNames: { selected: { true: "_1tkc5xfb-3-1-0", false: "_1tkc5xfc-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-1-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-1-0" }, readOnly: { true: "_1tkc5xf2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-1-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-1-0", false: "_1tkc5xf5-3-1-0" }, required: { true: "_1tkc5xf6-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfq-3-1-0";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfd-3-1-0", variantClassNames: { disabled: { true: "_1tkc5xfe-3-1-0", false: "_1tkc5xff-3-1-0" }, hasError: { true: "_1tkc5xfg-3-1-0", false: "_1tkc5xfh-3-1-0" }, color: { primary: "_1tkc5xfi-3-1-0", neutral: "_1tkc5xfj-3-1-0" }, isFocusVisible: { true: "_1tkc5xfk-3-1-0", false: "_1tkc5xfl-3-1-0" }, readOnly: { true: "_1tkc5xfm-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-1-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-1-0"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-1-0"]] });
 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 '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfa-3-0-1',variantClassNames:{selected:{true:'_1tkc5xfb-3-0-1',false:'_1tkc5xfc-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-0-1',variantClassNames:{disabled:{true:'_1tkc5xf1-3-0-1'},readOnly:{true:'_1tkc5xf2-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-0-1',variantClassNames:{disabled:{true:'_1tkc5xf4-3-0-1',false:'_1tkc5xf5-3-0-1'},required:{true:'_1tkc5xf6-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfq-3-0-1';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfd-3-0-1',variantClassNames:{disabled:{true:'_1tkc5xfe-3-0-1',false:'_1tkc5xff-3-0-1'},hasError:{true:'_1tkc5xfg-3-0-1',false:'_1tkc5xfh-3-0-1'},color:{primary:'_1tkc5xfi-3-0-1',neutral:'_1tkc5xfj-3-0-1'},isFocusVisible:{true:'_1tkc5xfk-3-0-1',false:'_1tkc5xfl-3-0-1'},readOnly:{true:'_1tkc5xfm-3-0-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfn-3-0-1'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfo-3-0-1'],[{color:'neutral',disabled:true},'_1tkc5xfp-3-0-1']]});"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfa-3-1-0',variantClassNames:{selected:{true:'_1tkc5xfb-3-1-0',false:'_1tkc5xfc-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-1-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-1-0'},readOnly:{true:'_1tkc5xf2-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-1-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-1-0',false:'_1tkc5xf5-3-1-0'},required:{true:'_1tkc5xf6-3-1-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfq-3-1-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfd-3-1-0',variantClassNames:{disabled:{true:'_1tkc5xfe-3-1-0',false:'_1tkc5xff-3-1-0'},hasError:{true:'_1tkc5xfg-3-1-0',false:'_1tkc5xfh-3-1-0'},color:{primary:'_1tkc5xfi-3-1-0',neutral:'_1tkc5xfj-3-1-0'},isFocusVisible:{true:'_1tkc5xfk-3-1-0',false:'_1tkc5xfl-3-1-0'},readOnly:{true:'_1tkc5xfm-3-1-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfn-3-1-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfo-3-1-0'],[{color:'neutral',disabled:true},'_1tkc5xfp-3-1-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpL,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/L,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtN,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,kBAAiB,GAAE,gBAAe,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-._44rwcl1-3-0-1 {
-  --_44rwcl0-3-0-1: 0px;
+._44rwcl1-3-1-0 {
+  --_44rwcl0-3-1-0: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl1-3-0-1:focus-within {
-  --_44rwcl0-3-0-1: -2px;
+._44rwcl1-3-1-0:focus-within {
+  --_44rwcl0-3-1-0: -2px;
 }
-._44rwcl1-3-0-1::-webkit-resizer {
+._44rwcl1-3-1-0::-webkit-resizer {
   display: none;
 }
-._44rwcl2-3-0-1 {
+._44rwcl2-3-1-0 {
   width: fit-content;
 }
-._44rwcl3-3-0-1 {
+._44rwcl3-3-1-0 {
   resize: none;
 }
-._44rwcl4-3-0-1 {
+._44rwcl4-3-1-0 {
   resize: both;
 }
-._44rwcl5-3-0-1 {
+._44rwcl5-3-1-0 {
   resize: horizontal;
 }
-._44rwcl6-3-0-1 {
+._44rwcl6-3-1-0 {
   resize: vertical;
 }
-._44rwcl7-3-0-1 {
+._44rwcl7-3-1-0 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -52,80 +52,80 @@
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._44rwcl7-3-0-1::placeholder {
+._44rwcl7-3-1-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl7-3-0-1:hover {
+._44rwcl7-3-1-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl7-3-0-1:active {
+._44rwcl7-3-1-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._44rwcl7-3-0-1:read-only {
+._44rwcl7-3-1-0:read-only {
   cursor: not-allowed;
 }
-._44rwcl8-3-0-1 {
+._44rwcl8-3-1-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl8-3-0-1::placeholder {
+._44rwcl8-3-1-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl8-3-0-1:hover {
+._44rwcl8-3-1-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl8-3-0-1:active {
+._44rwcl8-3-1-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-0-1 {
+._44rwcl9-3-1-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcl9-3-0-1::placeholder {
+._44rwcl9-3-1-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcl9-3-0-1:hover {
+._44rwcl9-3-1-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwcl9-3-0-1:active {
+._44rwcl9-3-1-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._44rwcla-3-0-1 {
+._44rwcla-3-1-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcla-3-0-1::placeholder {
+._44rwcla-3-1-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcla-3-0-1:hover {
+._44rwcla-3-1-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-0-1:active {
+._44rwcla-3-1-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclb-3-0-1 {
+._44rwclb-3-1-0 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-0-1)) translateY(var(--_44rwcl0-3-0-1));
+  transform: translateX(var(--_44rwcl0-3-1-0)) translateY(var(--_44rwcl0-3-1-0));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclc-3-0-1 {
+._44rwclc-3-1-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcld-3-0-1 {
+._44rwcld-3-1-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcle-3-0-1 {
+._44rwcle-3-1-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwclb-3-0-1 {
+  ._44rwclb-3-1-0 {
     display: none;
   }
 }

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

@@ -81,7 +81,7 @@ const TextAreaRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     onBlur: validationOnBlur,
     onInvalid: validationOnInvalid,
     ariaProps
-  } = useFormFieldValidation(textareaRef);
+  } = useFormFieldValidation(textareaRef, { required, minLength, maxLength });
   const handleChange = (event) => {
     const newValue = event.target?.value;
     setValue(newValue);

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';\n\nimport { ResizeIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './TextArea.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents, 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 { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.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> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents & {\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 {\n    onChange,\n    onBlur,\n    minLength,\n    maxLength,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly = false,\n    resize = 'both',\n    controlState,\n    value: propValue,\n    defaultValue,\n    width = 'full',\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 { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n\n  // Imperative Handle Construction\n  const containerRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\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      },\n    };\n  });\n\n  const [controlStateHasError, hint] = useFormControlState(controlState);\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: propValue,\n  });\n\n  const {\n    onChange: validationOnChange,\n    onBlur: validationOnBlur,\n    onInvalid: validationOnInvalid,\n    ariaProps,\n  } = useFormFieldValidation(textareaRef);\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  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    ariaDescribedby,\n    hint,\n    hasError,\n  });\n\n  const {\n    focusProps: { onFocus, onBlur: focusRingOnBlur },\n    focusClassName,\n  } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const errorAndDisabledStyleVariants = {\n    error: hasError,\n    disabled: disabledOrAriaDisabled,\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={consumerClassName}\n      style={consumerStyle}\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(\n            styles.textArea(errorAndDisabledStyleVariants),\n            focusClassName,\n          )}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          value={value}\n          aria-required={required}\n          aria-disabled={ariaDisabled}\n          onChange={handleChange}\n          onInvalid={(e) => !controlState && validationOnInvalid(e)}\n          onFocus={onFocus}\n          onBlur={(e) => {\n            !controlState && validationOnBlur(e);\n            focusRingOnBlur(e);\n            onBlur?.(e);\n          }}\n          {..._mergeProps(\n            remainingProps,\n            controlState ? inputProps : ariaProps,\n          )}\n        />\n        {resize !== 'none' && (\n          <ResizeIcon\n            className={styles.resizeIcon(errorAndDisabledStyleVariants)}\n          />\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>(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';\n\nimport { ResizeIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './TextArea.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents, 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 { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.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> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  KeyboardEvents & {\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 {\n    onChange,\n    onBlur,\n    minLength,\n    maxLength,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly = false,\n    resize = 'both',\n    controlState,\n    value: propValue,\n    defaultValue,\n    width = 'full',\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 { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n\n  // Imperative Handle Construction\n  const containerRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\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      },\n    };\n  });\n\n  const [controlStateHasError, hint] = useFormControlState(controlState);\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: propValue,\n  });\n\n  const {\n    onChange: validationOnChange,\n    onBlur: validationOnBlur,\n    onInvalid: validationOnInvalid,\n    ariaProps,\n  } = useFormFieldValidation(textareaRef, { required, minLength, maxLength });\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  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    ariaDescribedby,\n    hint,\n    hasError,\n  });\n\n  const {\n    focusProps: { onFocus, onBlur: focusRingOnBlur },\n    focusClassName,\n  } = useFocusRing({\n    color: hasError ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const errorAndDisabledStyleVariants = {\n    error: hasError,\n    disabled: disabledOrAriaDisabled,\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={consumerClassName}\n      style={consumerStyle}\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(\n            styles.textArea(errorAndDisabledStyleVariants),\n            focusClassName,\n          )}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          value={value}\n          aria-required={required}\n          aria-disabled={ariaDisabled}\n          onChange={handleChange}\n          onInvalid={(e) => !controlState && validationOnInvalid(e)}\n          onFocus={onFocus}\n          onBlur={(e) => {\n            !controlState && validationOnBlur(e);\n            focusRingOnBlur(e);\n            onBlur?.(e);\n          }}\n          {..._mergeProps(\n            remainingProps,\n            controlState ? inputProps : ariaProps,\n          )}\n        />\n        {resize !== 'none' && (\n          <ResizeIcon\n            className={styles.resizeIcon(errorAndDisabledStyleVariants)}\n          />\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>(TextAreaRoot);\n\n(TextArea as typeof TextArea & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }