@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/forms/select/styles/Select.css

@@ -1,89 +1,89 @@
-._dlenfc0-3-12-1._dlenfc0-3-12-1 {
+._dlenfc0-3-13-0._dlenfc0-3-13-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-12-1._dlenfc1-3-12-1 {
+._dlenfc1-3-13-0._dlenfc1-3-13-0 {
   min-width: unset;
 }
-._dlenfc3-3-12-1 {
+._dlenfc3-3-13-0 {
   width: 100%;
 }
-._dlenfc4-3-12-1 {
+._dlenfc4-3-13-0 {
   width: auto;
 }
-._dlenfc5-3-12-1 > span {
+._dlenfc5-3-13-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-12-1 {
+._dlenfc6-3-13-0 {
   display: flex;
 }
-._dlenfc7-3-12-1 {
+._dlenfc7-3-13-0 {
   transform: rotate(180deg);
 }
-._dlenfc8-3-12-1 {
+._dlenfc8-3-13-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }
-._dlenfca-3-12-1 {
+._dlenfca-3-13-0 {
   width: auto;
 }
-._dlenfcc-3-12-1 {
+._dlenfcc-3-13-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-12-1) ._dlenfcc-3-12-1 {
-  --_bx32h3-3-12-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+:root:not(._1jgl8s50-3-13-0) ._dlenfcc-3-13-0 {
+  --_bx32h3-3-13-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._dlenfcd-3-12-1 {
+._dlenfcd-3-13-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-12-1 ._dlenfce-3-12-1, ._1jgl8s50-3-12-1 ._dlenfce-3-12-1:hover, ._1jgl8s50-3-12-1 ._dlenfce-3-12-1:active {
-  --_bx32h3-3-12-1: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-12-1: 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-13-0 ._dlenfce-3-13-0, ._1jgl8s50-3-13-0 ._dlenfce-3-13-0:hover, ._1jgl8s50-3-13-0 ._dlenfce-3-13-0:active {
+  --_bx32h3-3-13-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-13-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);
 }
-._dlenfcf-3-12-1 {
+._dlenfcf-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcg-3-12-1 {
+._dlenfcg-3-13-0 {
   width: 100%;
   position: relative;
 }
-._dlenfch-3-12-1 {
+._dlenfch-3-13-0 {
   overflow: auto;
 }
-._dlenfci-3-12-1 {
+._dlenfci-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcj-3-12-1 {
+._dlenfcj-3-13-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfck-3-12-1 ._dlenfcl-3-12-1 {
+._dlenfck-3-13-0 ._dlenfcl-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcm-3-12-1 {
+._dlenfcm-3-13-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._dlenfcn-3-12-1.strato-select-divider {
+._dlenfcn-3-13-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfco-3-12-1 {
+._dlenfco-3-13-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfcp-3-12-1 {
+._dlenfcp-3-13-0 {
   min-width: 128px;
 }
-._dlenfcq-3-12-1 {
+._dlenfcq-3-13-0 {
   display: inline;
 }
-._dlenfcq-3-12-1 + ._dlenfcq-3-12-1:before {
+._dlenfcq-3-13-0 + ._dlenfcq-3-13-0:before {
   content: ", ";
 }
-._dlenfcr-3-12-1 {
+._dlenfcr-3-13-0 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -93,23 +93,23 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcr-3-12-1:hover:not(.strato-select-option--disabled) {
+._dlenfcr-3-13-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcr-3-12-1.strato-select-option--selected {
+._dlenfcr-3-13-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcr-3-12-1.strato-select-option--disabled {
+._dlenfcr-3-13-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcr-3-12-1.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcr-3-13-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcr-3-12-1.strato-select-option--selected:hover {
+._dlenfcr-3-13-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcr-3-12-1.strato-select-option--selected::before {
+._dlenfcr-3-13-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -120,11 +120,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcs-3-12-1:focus {
+._dlenfcs-3-13-0:focus {
   outline: none;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._dlenfct-3-12-1 {
+._dlenfct-3-13-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -134,14 +134,14 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfct-3-12-1:hover:not(.strato-select-option--disabled) {
+._dlenfct-3-13-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfct-3-12-1.strato-select-option--disabled {
+._dlenfct-3-13-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcu-3-12-1 {
+._dlenfcu-3-13-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -153,29 +153,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcu-3-12-1 {
+.strato-select-option--disabled ._dlenfcu-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcv-3-12-1 {
+._dlenfcv-3-13-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcw-3-12-1 {
+._dlenfcw-3-13-0 {
   fill: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcw-3-12-1 {
+.strato-select-option--disabled ._dlenfcw-3-13-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcx-3-12-1 {
+._dlenfcx-3-13-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._dlenfcy-3-12-1 {
+._dlenfcy-3-13-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

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

@@ -2,30 +2,30 @@ import "../../../core/components/app-root/AppRoot.css";
 import "../../../styles/field.css";
 import "./Select.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearReactSelectZIndex = "_dlenfc5-3-12-1";
-var filter = "_dlenfc1-3-12-1";
-var placeholderColor = "_dlenfcl-3-12-1";
-var select = "_dlenfc0-3-12-1";
-var selectAll = "_dlenfcs-3-12-1";
-var selectGroupHeading = "_dlenfcf-3-12-1";
-var selectMenuDivider = "_dlenfcn-3-12-1";
-var selectMenuListWrapper = "_dlenfch-3-12-1";
-var selectMenuLoadingWrapper = "_dlenfcm-3-12-1";
-var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfco-3-12-1", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-12-1" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcq-3-12-1";
-var selectNoOptionsMessage = "_dlenfci-3-12-1";
-var selectOptionMulti = "_dlenfct-3-12-1";
-var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcu-3-12-1", variantClassNames: { selected: { true: "_dlenfcv-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcw-3-12-1";
-var selectOptionPrefix = "_dlenfcx-3-12-1";
-var selectOptionSingle = "_dlenfcr-3-12-1";
-var selectOptionSuffix = "_dlenfcy-3-12-1";
-var selectTrigger = _7a468({ defaultClassName: "_dlenfc9-3-12-1", variantClassNames: { fullWidth: { true: "_dlenfca-3-12-1" }, showError: { true: "_dlenfcb-3-12-1" }, readOnly: { true: "_dlenfcc-3-12-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-12-1"], [{ showError: false, readOnly: true }, "_dlenfce-3-12-1"]] });
-var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-12-1", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-12-1" }, readOnly: { true: "_dlenfc8-3-12-1" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcj-3-12-1";
-var selectVirtualizationWrapper = "_dlenfcg-3-12-1";
-var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-12-1", variantClassNames: { fullWidth: { true: "_dlenfc3-3-12-1", false: "_dlenfc4-3-12-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfck-3-12-1";
+var clearReactSelectZIndex = "_dlenfc5-3-13-0";
+var filter = "_dlenfc1-3-13-0";
+var placeholderColor = "_dlenfcl-3-13-0";
+var select = "_dlenfc0-3-13-0";
+var selectAll = "_dlenfcs-3-13-0";
+var selectGroupHeading = "_dlenfcf-3-13-0";
+var selectMenuDivider = "_dlenfcn-3-13-0";
+var selectMenuListWrapper = "_dlenfch-3-13-0";
+var selectMenuLoadingWrapper = "_dlenfcm-3-13-0";
+var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfco-3-13-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-13-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcq-3-13-0";
+var selectNoOptionsMessage = "_dlenfci-3-13-0";
+var selectOptionMulti = "_dlenfct-3-13-0";
+var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcu-3-13-0", variantClassNames: { selected: { true: "_dlenfcv-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcw-3-13-0";
+var selectOptionPrefix = "_dlenfcx-3-13-0";
+var selectOptionSingle = "_dlenfcr-3-13-0";
+var selectOptionSuffix = "_dlenfcy-3-13-0";
+var selectTrigger = _7a468({ defaultClassName: "_dlenfc9-3-13-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-13-0" }, showError: { true: "_dlenfcb-3-13-0" }, readOnly: { true: "_dlenfcc-3-13-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-13-0"], [{ showError: false, readOnly: true }, "_dlenfce-3-13-0"]] });
+var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-13-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-13-0" }, readOnly: { true: "_dlenfc8-3-13-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcj-3-13-0";
+var selectVirtualizationWrapper = "_dlenfcg-3-13-0";
+var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-13-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-13-0", false: "_dlenfc4-3-13-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfck-3-13-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 '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-12-1';\nexport var filter = '_dlenfc1-3-12-1';\nexport var placeholderColor = '_dlenfcl-3-12-1';\nexport var select = '_dlenfc0-3-12-1';\nexport var selectAll = '_dlenfcs-3-12-1';\nexport var selectGroupHeading = '_dlenfcf-3-12-1';\nexport var selectMenuDivider = '_dlenfcn-3-12-1';\nexport var selectMenuListWrapper = '_dlenfch-3-12-1';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-12-1';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-12-1',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-12-1'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-12-1';\nexport var selectNoOptionsMessage = '_dlenfci-3-12-1';\nexport var selectOptionMulti = '_dlenfct-3-12-1';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-12-1',variantClassNames:{selected:{true:'_dlenfcv-3-12-1'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-12-1';\nexport var selectOptionPrefix = '_dlenfcx-3-12-1';\nexport var selectOptionSingle = '_dlenfcr-3-12-1';\nexport var selectOptionSuffix = '_dlenfcy-3-12-1';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-12-1',variantClassNames:{fullWidth:{true:'_dlenfca-3-12-1'},showError:{true:'_dlenfcb-3-12-1'},readOnly:{true:'_dlenfcc-3-12-1'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-12-1'],[{showError:false,readOnly:true},'_dlenfce-3-12-1']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-12-1',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-12-1'},readOnly:{true:'_dlenfc8-3-12-1'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-12-1';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-12-1';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-12-1',variantClassNames:{fullWidth:{true:'_dlenfc3-3-12-1',false:'_dlenfc4-3-12-1'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-12-1';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-13-0';\nexport var filter = '_dlenfc1-3-13-0';\nexport var placeholderColor = '_dlenfcl-3-13-0';\nexport var select = '_dlenfc0-3-13-0';\nexport var selectAll = '_dlenfcs-3-13-0';\nexport var selectGroupHeading = '_dlenfcf-3-13-0';\nexport var selectMenuDivider = '_dlenfcn-3-13-0';\nexport var selectMenuListWrapper = '_dlenfch-3-13-0';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-13-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-13-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-13-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-13-0';\nexport var selectNoOptionsMessage = '_dlenfci-3-13-0';\nexport var selectOptionMulti = '_dlenfct-3-13-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-13-0',variantClassNames:{selected:{true:'_dlenfcv-3-13-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-13-0';\nexport var selectOptionPrefix = '_dlenfcx-3-13-0';\nexport var selectOptionSingle = '_dlenfcr-3-13-0';\nexport var selectOptionSuffix = '_dlenfcy-3-13-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-13-0',variantClassNames:{fullWidth:{true:'_dlenfca-3-13-0'},showError:{true:'_dlenfcb-3-13-0'},readOnly:{true:'_dlenfcc-3-13-0'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-13-0'],[{showError:false,readOnly:true},'_dlenfce-3-13-0']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-13-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-13-0'},readOnly:{true:'_dlenfc8-3-13-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-13-0';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-13-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-13-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-13-0',false:'_dlenfc4-3-13-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,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,2BAA2B;AAC/B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,OAAM,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACvV,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpM,IAAI,kBAAkB;",
   "names": []
 }

package/esm/forms/shared-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/forms/shared-types.ts"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport type { ValidationState } from './validation/types.js';\n\n/**\n * BaseFormControl ref\n * @public\n */\nexport interface FormControlRef<T extends HTMLElement = HTMLElement> {\n  /** Returns the wrapping element ref.*/\n  readonly element: T | null;\n  /** Returns the underlying input ref.*/\n  readonly inputRef?: HTMLInputElement | HTMLSelectElement | null;\n  /** Will focus the underlying input or interactive element. */\n  focus?: () => void;\n  /** Validates the form control and sets the validity state. */\n  validate: () => void;\n  /**\n   * Validates the form control asynchronously and returns the validation state.\n   * @deprecated Use this method when you need the validation result returned. In the next major\n   * version, `validate()` will return `Promise<ValidationState>` directly and this method will\n   * be removed, switch to `validate()` at that point.\n   */\n  validateAsync?: () => Promise<ValidationState>;\n}\n\n/**\n * Ref for form-elements with overlay\n * @public\n */\nexport interface FormControlWithOverlayRef<\n  T extends HTMLElement = HTMLDivElement,\n> extends FormControlRef<T> {\n  /** Function to open the overlay of the control. */\n  open: () => void;\n  /** Function to close the overlay of the control. */\n  close: () => void;\n  /** Ref to the opening trigger element. */\n  readonly triggerRef?: HTMLElement | null;\n}\n\n/**\n * An imperative handle giving access to the root element and the actual input element of the component, as well as the open and close handlers for the overlay.\n * @public\n */\nexport interface TimeRangePickerRef<T extends HTMLElement = HTMLDivElement>\n  extends Omit<FormControlWithOverlayRef<T>, 'inputRef'> {\n  /** Returns the underlying input ref.*/\n  readonly inputRef: {\n    /** Returns the underlying 'From' input ref.*/\n    readonly from?: HTMLInputElement | null;\n    /** Returns the underlying 'To' input ref.*/\n    readonly to?: HTMLInputElement | null;\n  };\n}\n\n/**\n * Type guard function that determines whether a FormControlRef is\n * of type FormControlWithOverlayRef.\n * @internal\n */\nexport function isFormControlWithOverlayRef<T extends HTMLElement>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  props: any,\n): props is FormControlWithOverlayRef<T> {\n  return 'open' in props;\n}\n\n/**\n * Type guard function that determines whether the input is of type FormControlRef.\n * @internal\n */\nexport function isFormControlRef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: any,\n): ref is FormControlRef {\n  return !isNil(ref) && 'element' in ref;\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AA6Df,SAAS,4BAEd,OACuC;AACvC,SAAO,UAAU;AACnB;AAMO,SAAS,iBAEd,KACuB;AACvB,SAAO,CAAC,MAAM,GAAG,KAAK,aAAa;AACrC;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport type { ValidationState } from './validation/types.js';\n\n/**\n * BaseFormControl ref\n * @public\n */\nexport interface FormControlRef<T extends HTMLElement = HTMLElement> {\n  /** Returns the wrapping element ref.*/\n  readonly element: T | null;\n  /** Returns the underlying input ref.*/\n  readonly inputRef?: HTMLInputElement | HTMLSelectElement | null;\n  /** Will focus the underlying input or interactive element. */\n  focus?: () => void;\n  /** Validates the form control and sets the validity state. */\n  validate: () => void;\n  /**\n   * Validates the form control asynchronously and returns the validation state.\n   * @deprecated Use this method when you need the validation result returned. In the next major\n   * version, `validate()` will return `Promise<ValidationState>` directly and this method will\n   * be removed, switch to `validate()` at that point.\n   */\n  validateAsync?: () => Promise<ValidationState>;\n}\n\n/**\n * Ref for form-elements with overlay\n * @public\n */\nexport interface FormControlWithOverlayRef<\n  T extends HTMLElement = HTMLDivElement,\n> extends FormControlRef<T> {\n  /** Function to open the overlay of the control. */\n  open: () => void;\n  /** Function to close the overlay of the control. */\n  close: () => void;\n  /** Ref to the opening trigger element. */\n  readonly triggerRef?: HTMLElement | null;\n}\n\n/**\n * An imperative handle giving access to the root element and the actual input element of the component, as well as the open and close handlers for the overlay.\n * @public\n */\nexport interface TimeRangePickerRef<\n  T extends HTMLElement = HTMLDivElement,\n> extends Omit<FormControlWithOverlayRef<T>, 'inputRef'> {\n  /** Returns the underlying input ref.*/\n  readonly inputRef: {\n    /** Returns the underlying 'From' input ref.*/\n    readonly from?: HTMLInputElement | null;\n    /** Returns the underlying 'To' input ref.*/\n    readonly to?: HTMLInputElement | null;\n  };\n}\n\n/**\n * Type guard function that determines whether a FormControlRef is\n * of type FormControlWithOverlayRef.\n * @internal\n */\nexport function isFormControlWithOverlayRef<T extends HTMLElement>(\n  // oxlint-disable-next-line typescript/no-explicit-any\n  props: any,\n): props is FormControlWithOverlayRef<T> {\n  return 'open' in props;\n}\n\n/**\n * Type guard function that determines whether the input is of type FormControlRef.\n * @internal\n */\nexport function isFormControlRef(\n  // oxlint-disable-next-line typescript/no-explicit-any\n  ref: any,\n): ref is FormControlRef {\n  return !isNil(ref) && 'element' in ref;\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AA8Df,SAAS,4BAEd,OACuC;AACvC,SAAO,UAAU;AACnB;AAMO,SAAS,iBAEd,KACuB;AACvB,SAAO,CAAC,MAAM,GAAG,KAAK,aAAa;AACrC;",
   "names": []
 }

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

@@ -1,28 +1,28 @@
-._r47o0w1-3-12-1 {
+._r47o0w1-3-13-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-12-1:empty::before {
+._r47o0w1-3-13-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-12-1:focus:empty {
+._r47o0w1-3-13-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-12-1 {
+._r47o0w2-3-13-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-12-1:focus:empty {
+._r47o0w2-3-13-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-12-1 {
+._r47o0w3-3-13-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-12-1:empty::before {
+._r47o0w3-3-13-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-12-1 {
+._r47o0w4-3-13-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-12-1", variantClassNames: { error: { true: "_r47o0w2-3-12-1" }, disabled: { true: "_r47o0w3-3-12-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-12-1"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-12-1";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-13-0", variantClassNames: { error: { true: "_r47o0w2-3-13-0" }, disabled: { true: "_r47o0w3-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-13-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-13-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-12-1',variantClassNames:{error:{true:'_r47o0w2-3-12-1'},disabled:{true:'_r47o0w3-3-12-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-12-1']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-12-1';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-13-0',variantClassNames:{error:{true:'_r47o0w2-3-13-0'},disabled:{true:'_r47o0w3-3-13-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-13-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-13-0';"],
   "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/spin-buttons/hooks/useSelection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/hooks/useSelection.ts"],
-  "sourcesContent": ["import { useCallback, type RefObject } from 'react';\n\nimport type { SpinButtonTextSelection } from '../types.js';\n\n/**\n * This hook provides text selection and cursor utility functions.\n * Because the SpinButton is a contenteditable span, this is not provided natively.\n */\nexport const useSelection = (\n  ref: RefObject<HTMLElement | null> | undefined,\n) => {\n  /** Clear current text selection */\n  const deselectAll = useCallback(() => {\n    window.getSelection()?.removeAllRanges();\n  }, []);\n\n  /** Select the whole text content of the ref element. */\n  const selectAll = useCallback(() => {\n    if (!ref?.current) {\n      return;\n    }\n\n    const el = ref.current;\n    const selection = window.getSelection();\n    if (!selection) {\n      return;\n    }\n\n    const newRange = document.createRange();\n\n    if (!el.childNodes.length) {\n      // No content to select; place a cursor at position 0 so the spinbutton's\n      // keydown handler receives a valid selection and can accept typed input.\n      newRange.setStart(el, 0);\n      newRange.collapse(true);\n    } else {\n      newRange.selectNodeContents(el);\n    }\n\n    selection.removeAllRanges();\n    selection.addRange(newRange);\n  }, [ref]);\n\n  /** Returns the current text selection of the spin button. */\n  const getSelection = useCallback((): SpinButtonTextSelection | undefined => {\n    const selection = window.getSelection();\n    if (!selection || !selection.rangeCount) {\n      return undefined;\n    }\n\n    const range = selection.getRangeAt(0);\n    const el = ref?.current;\n\n    // When the selection was created via selectNodeContents (e.g. selectAll),\n    // the range containers are the element itself and offsets are child-node\n    // indices instead of character positions. Convert them to character offsets.\n    if (el && (range.startContainer === el || range.endContainer === el)) {\n      const toCharOffset = (container: Node, offset: number): number => {\n        if (container !== el) {\n          return offset;\n        }\n        let chars = 0;\n        for (let i = 0; i < offset; i++) {\n          chars += el.childNodes[i]?.textContent?.length ?? 0;\n        }\n        return chars;\n      };\n      return {\n        start: toCharOffset(range.startContainer, range.startOffset),\n        end: toCharOffset(range.endContainer, range.endOffset),\n        rtl: false,\n      };\n    }\n\n    // return undefined if the selected range is outside of the spinbutton\n    if (\n      range.startContainer !== range.endContainer &&\n      range.startContainer !== ref?.current\n    ) {\n      return undefined;\n    }\n\n    return { start: range.startOffset, end: range.endOffset, rtl: false };\n    // Ignore ref dependency\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  /** Set the text selection within the spin button */\n  const setSelection = useCallback(\n    (selection: Partial<SpinButtonTextSelection>) => {\n      const textNode = ref?.current?.childNodes[0];\n      if (!textNode) {\n        return;\n      }\n\n      const length = textNode.textContent?.length ?? 0;\n      const { rtl = false } = selection;\n      let { start = 0, end = length } = selection;\n\n      if (rtl) {\n        start = length - start;\n        end = length - end;\n      }\n\n      // fix boundaries\n      start = Math.min(length, start);\n      end = Math.min(length, end);\n\n      // create new selection and overwrite an existing one\n      const newRange = document.createRange();\n      newRange.setStart(textNode, start);\n      newRange.setEnd(textNode, end);\n\n      deselectAll();\n      window.getSelection()?.addRange(newRange);\n    },\n    [deselectAll, ref],\n  );\n\n  return {\n    selectAll,\n    deselectAll,\n    getSelection,\n    setSelection,\n  };\n};\n"],
+  "sourcesContent": ["import { useCallback, type RefObject } from 'react';\n\nimport type { SpinButtonTextSelection } from '../types.js';\n\n/**\n * This hook provides text selection and cursor utility functions.\n * Because the SpinButton is a contenteditable span, this is not provided natively.\n */\nexport const useSelection = (\n  ref: RefObject<HTMLElement | null> | undefined,\n) => {\n  /** Clear current text selection */\n  const deselectAll = useCallback(() => {\n    window.getSelection()?.removeAllRanges();\n  }, []);\n\n  /** Select the whole text content of the ref element. */\n  const selectAll = useCallback(() => {\n    if (!ref?.current) {\n      return;\n    }\n\n    const el = ref.current;\n    const selection = window.getSelection();\n    if (!selection) {\n      return;\n    }\n\n    const newRange = document.createRange();\n\n    if (!el.childNodes.length) {\n      // No content to select; place a cursor at position 0 so the spinbutton's\n      // keydown handler receives a valid selection and can accept typed input.\n      newRange.setStart(el, 0);\n      newRange.collapse(true);\n    } else {\n      newRange.selectNodeContents(el);\n    }\n\n    selection.removeAllRanges();\n    selection.addRange(newRange);\n  }, [ref]);\n\n  /** Returns the current text selection of the spin button. */\n  const getSelection = useCallback((): SpinButtonTextSelection | undefined => {\n    const selection = window.getSelection();\n    if (!selection || !selection.rangeCount) {\n      return undefined;\n    }\n\n    const range = selection.getRangeAt(0);\n    const el = ref?.current;\n\n    // When the selection was created via selectNodeContents (e.g. selectAll),\n    // the range containers are the element itself and offsets are child-node\n    // indices instead of character positions. Convert them to character offsets.\n    if (el && (range.startContainer === el || range.endContainer === el)) {\n      const toCharOffset = (container: Node, offset: number): number => {\n        if (container !== el) {\n          return offset;\n        }\n        let chars = 0;\n        for (let i = 0; i < offset; i++) {\n          chars += el.childNodes[i]?.textContent?.length ?? 0;\n        }\n        return chars;\n      };\n      return {\n        start: toCharOffset(range.startContainer, range.startOffset),\n        end: toCharOffset(range.endContainer, range.endOffset),\n        rtl: false,\n      };\n    }\n\n    // return undefined if the selected range is outside of the spinbutton\n    if (\n      range.startContainer !== range.endContainer &&\n      range.startContainer !== ref?.current\n    ) {\n      return undefined;\n    }\n\n    return { start: range.startOffset, end: range.endOffset, rtl: false };\n    // Ignore ref dependency\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  /** Set the text selection within the spin button */\n  const setSelection = useCallback(\n    (selection: Partial<SpinButtonTextSelection>) => {\n      const textNode = ref?.current?.childNodes[0];\n      if (!textNode) {\n        return;\n      }\n\n      const length = textNode.textContent?.length ?? 0;\n      const { rtl = false } = selection;\n      let { start = 0, end = length } = selection;\n\n      if (rtl) {\n        start = length - start;\n        end = length - end;\n      }\n\n      // fix boundaries\n      start = Math.min(length, start);\n      end = Math.min(length, end);\n\n      // create new selection and overwrite an existing one\n      const newRange = document.createRange();\n      newRange.setStart(textNode, start);\n      newRange.setEnd(textNode, end);\n\n      deselectAll();\n      window.getSelection()?.addRange(newRange);\n    },\n    [deselectAll, ref],\n  );\n\n  return {\n    selectAll,\n    deselectAll,\n    getSelection,\n    setSelection,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,mBAAmC;AAQrC,MAAM,eAAe,CAC1B,QACG;AAEH,QAAM,cAAc,YAAY,MAAM;AACpC,WAAO,aAAa,GAAG,gBAAgB;AAAA,EACzC,GAAG,CAAC,CAAC;AAGL,QAAM,YAAY,YAAY,MAAM;AAClC,QAAI,CAAC,KAAK,SAAS;AACjB;AAAA,IACF;AAEA,UAAM,KAAK,IAAI;AACf,UAAM,YAAY,OAAO,aAAa;AACtC,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,UAAM,WAAW,SAAS,YAAY;AAEtC,QAAI,CAAC,GAAG,WAAW,QAAQ;AAGzB,eAAS,SAAS,IAAI,CAAC;AACvB,eAAS,SAAS,IAAI;AAAA,IACxB,OAAO;AACL,eAAS,mBAAmB,EAAE;AAAA,IAChC;AAEA,cAAU,gBAAgB;AAC1B,cAAU,SAAS,QAAQ;AAAA,EAC7B,GAAG,CAAC,GAAG,CAAC;AAGR,QAAM,eAAe,YAAY,MAA2C;AAC1E,UAAM,YAAY,OAAO,aAAa;AACtC,QAAI,CAAC,aAAa,CAAC,UAAU,YAAY;AACvC,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,UAAU,WAAW,CAAC;AACpC,UAAM,KAAK,KAAK;AAKhB,QAAI,OAAO,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,KAAK;AACpE,YAAM,eAAe,CAAC,WAAiB,WAA2B;AAChE,YAAI,cAAc,IAAI;AACpB,iBAAO;AAAA,QACT;AACA,YAAI,QAAQ;AACZ,iBAAS,IAAI,GAAG,IAAI,QAAQ,KAAK;AAC/B,mBAAS,GAAG,WAAW,CAAC,GAAG,aAAa,UAAU;AAAA,QACpD;AACA,eAAO;AAAA,MACT;AACA,aAAO;AAAA,QACL,OAAO,aAAa,MAAM,gBAAgB,MAAM,WAAW;AAAA,QAC3D,KAAK,aAAa,MAAM,cAAc,MAAM,SAAS;AAAA,QACrD,KAAK;AAAA,MACP;AAAA,IACF;AAGA,QACE,MAAM,mBAAmB,MAAM,gBAC/B,MAAM,mBAAmB,KAAK,SAC9B;AACA,aAAO;AAAA,IACT;AAEA,WAAO,EAAE,OAAO,MAAM,aAAa,KAAK,MAAM,WAAW,KAAK,MAAM;AAAA,EAGtE,GAAG,CAAC,CAAC;AAGL,QAAM,eAAe;AAAA,IACnB,CAAC,cAAgD;AAC/C,YAAM,WAAW,KAAK,SAAS,WAAW,CAAC;AAC3C,UAAI,CAAC,UAAU;AACb;AAAA,MACF;AAEA,YAAM,SAAS,SAAS,aAAa,UAAU;AAC/C,YAAM,EAAE,MAAM,MAAM,IAAI;AACxB,UAAI,EAAE,QAAQ,GAAG,MAAM,OAAO,IAAI;AAElC,UAAI,KAAK;AACP,gBAAQ,SAAS;AACjB,cAAM,SAAS;AAAA,MACjB;AAGA,cAAQ,KAAK,IAAI,QAAQ,KAAK;AAC9B,YAAM,KAAK,IAAI,QAAQ,GAAG;AAG1B,YAAM,WAAW,SAAS,YAAY;AACtC,eAAS,SAAS,UAAU,KAAK;AACjC,eAAS,OAAO,UAAU,GAAG;AAE7B,kBAAY;AACZ,aAAO,aAAa,GAAG,SAAS,QAAQ;AAAA,IAC1C;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,EACnB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/forms/spin-buttons/number-spin-button/NumberSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/number-spin-button/NumberSpinButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [behavioralTrackingProps, remainingPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingPropsWithoutTracking,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder ?? ''}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...mergeProps(ariaProps, behavioralTrackingProps)}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return isSlot(node, NumberSpinButton);\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [behavioralTrackingProps, remainingPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingPropsWithoutTracking,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder ?? ''}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...mergeProps(ariaProps, behavioralTrackingProps)}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return isSlot(node, NumberSpinButton);\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
   "mappings": "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",
   "names": []
 }

package/esm/forms/spin-buttons/text-spin-button/TextSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/text-spin-button/TextSpinButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Allows to check if a ReactNode is a TextSpinButton element.\n * @internal\n */\nexport function isTextSpinButton(\n  node: ReactNode,\n): node is ReactElement<TextSpinButtonProps> {\n  return isSlot(node, TextSpinButton);\n}\n\n/**\n * Use the _TextSpinButton component to pick a text from a list of given text values.\n * @internal\n */\nexport const TextSpinButton = /* @__PURE__ */ forwardRef<\n  TextSpinButtonRef,\n  TextSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    placeholder,\n    disabled = false,\n    readOnly = false,\n    options,\n    required = false,\n    hasError,\n    className: consumerClassName,\n    style: consumerStyle,\n    onKeyDownHandler: propOnKeyDownHandler,\n    'data-testid': dataTestId,\n    onChange,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: TextSpinButtonProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n\n  const [error, setError] = useState(false);\n\n  const { value, onKeyDownHandler, searchValue, clearValue } =\n    useValueNavigation(props);\n\n  // provide root element reference and utility\n  useImperativeHandle(forwardedRef, (): TextSpinButtonRef => {\n    return {\n      type: 'text' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      searchValue,\n      clearValue,\n      onChange,\n    };\n  }, [\n    clearValue,\n    deselectAll,\n    getSelection,\n    onChange,\n    searchValue,\n    selectAll,\n    setSelection,\n  ]);\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    rootRef.current.textContent = value ?? '';\n    document.activeElement === rootRef.current && selectAll();\n    // no need to trigger on selectAll update, only trigger on value change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // set error state on value change\n  useEffect(() => {\n    if (required && value === null) {\n      setError(true);\n    } else {\n      setError(value !== null && !options.includes(value));\n    }\n  }, [required, value, options]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      role=\"spinbutton\"\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      onKeyDown={propOnKeyDownHandler ?? onKeyDownHandler}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onBeforeInput={(e) => e.preventDefault()}\n      onPaste={(e) => e.preventDefault()}\n      onDrop={(e) => e.preventDefault()}\n      onCut={(e) => e.preventDefault()}\n      data-pattern={dataPattern}\n      {...behavioralTrackingProps}\n    />\n  );\n});\n\n(\n  TextSpinButton as typeof TextSpinButton & { displayName: string }\n).displayName = '_TextSpinButton';\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Allows to check if a ReactNode is a TextSpinButton element.\n * @internal\n */\nexport function isTextSpinButton(\n  node: ReactNode,\n): node is ReactElement<TextSpinButtonProps> {\n  return isSlot(node, TextSpinButton);\n}\n\n/**\n * Use the _TextSpinButton component to pick a text from a list of given text values.\n * @internal\n */\nexport const TextSpinButton = /* @__PURE__ */ forwardRef<\n  TextSpinButtonRef,\n  TextSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    placeholder,\n    disabled = false,\n    readOnly = false,\n    options,\n    required = false,\n    hasError,\n    className: consumerClassName,\n    style: consumerStyle,\n    onKeyDownHandler: propOnKeyDownHandler,\n    'data-testid': dataTestId,\n    onChange,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: TextSpinButtonProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n\n  const [error, setError] = useState(false);\n\n  const { value, onKeyDownHandler, searchValue, clearValue } =\n    useValueNavigation(props);\n\n  // provide root element reference and utility\n  useImperativeHandle(forwardedRef, (): TextSpinButtonRef => {\n    return {\n      type: 'text' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      searchValue,\n      clearValue,\n      onChange,\n    };\n  }, [\n    clearValue,\n    deselectAll,\n    getSelection,\n    onChange,\n    searchValue,\n    selectAll,\n    setSelection,\n  ]);\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    rootRef.current.textContent = value ?? '';\n    document.activeElement === rootRef.current && selectAll();\n    // no need to trigger on selectAll update, only trigger on value change\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // set error state on value change\n  useEffect(() => {\n    if (required && value === null) {\n      setError(true);\n    } else {\n      setError(value !== null && !options.includes(value));\n    }\n  }, [required, value, options]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      role=\"spinbutton\"\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      onKeyDown={propOnKeyDownHandler ?? onKeyDownHandler}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onBeforeInput={(e) => e.preventDefault()}\n      onPaste={(e) => e.preventDefault()}\n      onDrop={(e) => e.preventDefault()}\n      onCut={(e) => e.preventDefault()}\n      data-pattern={dataPattern}\n      {...behavioralTrackingProps}\n    />\n  );\n});\n\n(\n  TextSpinButton as typeof TextSpinButton & { displayName: string }\n).displayName = '_TextSpinButton';\n"],
   "mappings": "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",
   "names": []
 }