@dynatrace/strato-components 3.3.0 → 3.3.2

package/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -29,6 +29,6 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_DateTimeInput_css_ts_vanilla = require("./DateTimeInput.css");
-var dateTimeInput = "_5u9o251-3-3-0";
-var dateTimeInputRoot = "_5u9o250-3-3-0";
-var expression = "_5u9o252-3-3-0";
+var dateTimeInput = "_5u9o251-3-3-2";
+var dateTimeInputRoot = "_5u9o250-3-3-2";
+var expression = "_5u9o252-3-3-2";

package/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,4 +1,4 @@
-._1vlwkc20-3-3-0 {
+._1vlwkc20-3-3-2 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
@@ -7,29 +7,29 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-3-0);
-  background: var(--_bx32h3-3-3-0);
+  color: var(--_bx32h0-3-3-2);
+  background: var(--_bx32h3-3-3-2);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-3-0._1vlwkc20-3-3-0 {
+._1vlwkc20-3-3-2._1vlwkc20-3-3-2 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-3-0:has(._1i883gjf-3-3-0) {
+._1vlwkc20-3-3-2:has(._1i883gjf-3-3-2) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-3-0:has(._1i883gjf-3-3-0:hover) {
-  --_bx32h3-3-3-0: var(--_bx32h2-3-3-0);
+._1vlwkc20-3-3-2:has(._1i883gjf-3-3-2:hover) {
+  --_bx32h3-3-3-2: var(--_bx32h2-3-3-2);
 }
-._1vlwkc20-3-3-0:has(._1i883gjf-3-3-0:focus-visible) {
+._1vlwkc20-3-3-2:has(._1i883gjf-3-3-2:focus-visible) {
   box-shadow: none;
 }
-._1vlwkc22-3-3-0 {
+._1vlwkc22-3-3-2 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-3-0 {
+._1vlwkc23-3-3-2 {
   cursor: not-allowed;
 }
-._1vlwkc24-3-3-0::selection {
+._1vlwkc24-3-3-2::selection {
   background: transparent;
 }

package/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -28,5 +28,5 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-3-0", variantClassNames: { showError: { true: "_1vlwkc21-3-3-0" }, disabled: { true: "_1vlwkc22-3-3-0" }, readOnly: { true: "_1vlwkc23-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
-var timeframeSeparator = "_1vlwkc24-3-3-0";
+var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-3-2", variantClassNames: { showError: { true: "_1vlwkc21-3-3-2" }, disabled: { true: "_1vlwkc22-3-3-2" }, readOnly: { true: "_1vlwkc23-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var timeframeSeparator = "_1vlwkc24-3-3-2";

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-3-0 {
+._1dphm0f0-3-3-2 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-3-0 {
+._1dphm0f1-3-3-2 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -23,5 +23,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-3-0";
-var legend = "_1dphm0f1-3-3-0";
+var fieldset = "_1dphm0f0-3-3-2";
+var legend = "_1dphm0f1-3-3-2";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -22,4 +22,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-3-0";
+var formField = "_mvcxum0-3-3-2";

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-3-0 {
+._16z6rg10-3-3-2 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-3-0 {
+._16z6rg11-3-3-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-3-0 {
+._16z6rg12-3-3-2 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-3-0 {
+._16z6rg13-3-3-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-3-0 {
+._16z6rg14-3-3-2 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -24,5 +24,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-3-0", variantClassNames: { variant: { hint: "_16z6rg11-3-3-0", error: "_16z6rg12-3-3-0" }, disabled: { true: "_16z6rg13-3-3-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-3-0";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-3-2", variantClassNames: { variant: { hint: "_16z6rg11-3-3-2", error: "_16z6rg12-3-3-2" }, disabled: { true: "_16z6rg13-3-3-2" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-3-2";

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -22,4 +22,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-3-0";
+var formFieldMessages = "_1l9bja60-3-3-2";

package/forms/forms-core/components/label/Label.css

@@ -1,9 +1,9 @@
-._1gxatyo0-3-3-0 {
+._1gxatyo0-3-3-2 {
   display: inline-block;
 }
-._1gxatyo1-3-3-0 {
+._1gxatyo1-3-3-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-3-0:after {
+._1gxatyo2-3-3-2:after {
   content: "*" / "";
 }

package/forms/forms-core/components/label/Label.sty.js

@@ -23,4 +23,4 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-3-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-3-0" }, required: { true: "_1gxatyo2-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-3-2", variantClassNames: { disabled: { true: "_1gxatyo1-3-3-2" }, required: { true: "_1gxatyo2-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-3-0 {
+@keyframes _yfwka31-3-3-2 {
 
 }
-@keyframes _yfwka32-3-3-0 {
+@keyframes _yfwka32-3-3-2 {
 
 }
-._yfwka33-3-3-0:-webkit-autofill:is(._yfwka33-3-3-0,:hover,:focus) {
+._yfwka33-3-3-2:-webkit-autofill:is(._yfwka33-3-3-2,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-3-0) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-3-2) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-3-0:-webkit-autofill {
-  animation-name: _yfwka31-3-3-0;
+._yfwka33-3-3-2:-webkit-autofill {
+  animation-name: _yfwka31-3-3-2;
   animation-duration: 0.001s;
 }
-._yfwka33-3-3-0:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-3-0;
+._yfwka33-3-3-2:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-3-2;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/forms/hooks/useAutofillEvent.sty.js

@@ -25,7 +25,7 @@ __export(useAutofillEvent_css_exports, {
 });
 module.exports = __toCommonJS(useAutofillEvent_css_exports);
 var import_useAutofillEvent_css_ts_vanilla = require("./useAutofillEvent.css");
-var autofillBackground = "var(--_yfwka30-3-3-0)";
-var autofillCSS = "_yfwka33-3-3-0";
-var end = "_yfwka32-3-3-0";
-var start = "_yfwka31-3-3-0";
+var autofillBackground = "var(--_yfwka30-3-3-2)";
+var autofillCSS = "_yfwka33-3-3-2";
+var end = "_yfwka32-3-3-2";
+var start = "_yfwka31-3-3-2";

package/forms/password-input/PasswordInput.css

@@ -1,4 +1,4 @@
-._1ah2tn00-3-3-0 {
+._1ah2tn00-3-3-2 {
   cursor: not-allowed;
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }

package/forms/password-input/PasswordInput.sty.js

@@ -22,4 +22,4 @@ __export(PasswordInput_css_exports, {
 });
 module.exports = __toCommonJS(PasswordInput_css_exports);
 var import_PasswordInput_css_ts_vanilla = require("./PasswordInput.css");
-var readOnly = "_1ah2tn00-3-3-0";
+var readOnly = "_1ah2tn00-3-3-2";

package/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-3-0 {
+._h96idu0-3-3-2 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-3-0 {
+._h96idu1-3-3-2 {
   cursor: not-allowed;
 }
-._h96idu4-3-3-0 {
+._h96idu4-3-3-2 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu4-3-3-0._h96idu2-3-3-0 {
+._h96idu4-3-3-2._h96idu2-3-3-2 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-3-0 ._h96idu4-3-3-0 {
+._h96idu1-3-3-2 ._h96idu4-3-3-2 {
   cursor: not-allowed;
 }
-._h96idu5-3-3-0 {
+._h96idu5-3-3-2 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,25 +31,25 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-3-0);
+  background-color: var(--_bx32h3-3-3-2);
 }
-._h96idu6-3-3-0 {
+._h96idu6-3-3-2 {
   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);
 }
-._h96iduf-3-3-0 {
+._h96iduf-3-3-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96idug-3-3-0 {
+._h96idug-3-3-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96iduh-3-3-0 {
-  background-color: var(--_bx32h2-3-3-0);
+._h96iduh-3-3-2 {
+  background-color: var(--_bx32h2-3-3-2);
 }
-._h96idui-3-3-0 {
+._h96idui-3-3-2 {
   height: 100%;
-  fill: var(--_bx32h1-3-3-0);
+  fill: var(--_bx32h1-3-3-2);
 }
-._h96idu4-3-3-0:not(._h96idu3-3-3-0) ._h96idui-3-3-0 {
+._h96idu4-3-3-2:not(._h96idu3-3-3-2) ._h96idui-3-3-2 {
   display: none;
 }

package/forms/radio/styles.sty.js

@@ -30,10 +30,10 @@ module.exports = __toCommonJS(styles_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var checked = "_h96idu3-3-3-0";
-var disabled = "_h96idu2-3-3-0";
-var group = "_h96idu0-3-3-0";
-var innerKnob = "_h96idui-3-3-0";
-var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu5-3-3-0", variantClassNames: { disabled: { true: "_h96idu6-3-3-0" }, checked: { true: "_h96idu7-3-3-0", false: "_h96idu8-3-3-0" }, hasError: { true: "_h96idu9-3-3-0", false: "_h96idua-3-3-0" }, isFocusVisible: { true: "_h96idub-3-3-0", false: "_h96iduc-3-3-0" }, readOnly: { true: "_h96idud-3-3-0", false: "_h96idue-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false }, "_h96iduf-3-3-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false }, "_h96idug-3-3-0"], [{ readOnly: true, disabled: false }, "_h96iduh-3-3-0"]] });
-var label = "_h96idu4-3-3-0";
-var readOnly = "_h96idu1-3-3-0";
+var checked = "_h96idu3-3-3-2";
+var disabled = "_h96idu2-3-3-2";
+var group = "_h96idu0-3-3-2";
+var innerKnob = "_h96idui-3-3-2";
+var knob = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_h96idu5-3-3-2", variantClassNames: { disabled: { true: "_h96idu6-3-3-2" }, checked: { true: "_h96idu7-3-3-2", false: "_h96idu8-3-3-2" }, hasError: { true: "_h96idu9-3-3-2", false: "_h96idua-3-3-2" }, isFocusVisible: { true: "_h96idub-3-3-2", false: "_h96iduc-3-3-2" }, readOnly: { true: "_h96idud-3-3-2", false: "_h96idue-3-3-2" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false }, "_h96iduf-3-3-2"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false }, "_h96idug-3-3-2"], [{ readOnly: true, disabled: false }, "_h96iduh-3-3-2"]] });
+var label = "_h96idu4-3-3-2";
+var readOnly = "_h96idu1-3-3-2";

package/forms/search-input/SearchInput.css

@@ -1,3 +1,3 @@
-._1mumub80-3-3-0 {
+._1mumub80-3-3-2 {
   min-width: 192px;
 }

package/forms/search-input/SearchInput.sty.js

@@ -22,4 +22,4 @@ __export(SearchInput_css_exports, {
 });
 module.exports = __toCommonJS(SearchInput_css_exports);
 var import_SearchInput_css_ts_vanilla = require("./SearchInput.css");
-var searchInput = "_1mumub80-3-3-0";
+var searchInput = "_1mumub80-3-3-2";

package/forms/select/styles/Select.css

@@ -1,71 +1,71 @@
-._dlenfc0-3-3-0._dlenfc0-3-3-0 {
+._dlenfc0-3-3-2._dlenfc0-3-3-2 {
   pointer-events: auto;
 }
-._dlenfc1-3-3-0._dlenfc1-3-3-0 {
+._dlenfc1-3-3-2._dlenfc1-3-3-2 {
   min-width: unset;
 }
-._dlenfc3-3-3-0 {
+._dlenfc3-3-3-2 {
   width: 100%;
 }
-._dlenfc4-3-3-0 {
+._dlenfc4-3-3-2 {
   width: auto;
 }
-._dlenfc5-3-3-0 > span {
+._dlenfc5-3-3-2 > span {
   z-index: unset;
 }
-._dlenfc6-3-3-0 {
+._dlenfc6-3-3-2 {
   display: flex;
 }
-._dlenfc7-3-3-0 {
+._dlenfc7-3-3-2 {
   transform: rotate(180deg);
 }
-._dlenfc9-3-3-0 {
+._dlenfc9-3-3-2 {
   width: auto;
 }
-._dlenfca-3-3-0 {
+._dlenfca-3-3-2 {
   cursor: not-allowed;
 }
-._dlenfcb-3-3-0 {
+._dlenfcb-3-3-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcc-3-3-0 {
+._dlenfcc-3-3-2 {
   width: 100%;
   position: relative;
 }
-._dlenfcd-3-3-0 {
+._dlenfcd-3-3-2 {
   overflow: auto;
 }
-._dlenfce-3-3-0 {
+._dlenfce-3-3-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcf-3-3-0 {
+._dlenfcf-3-3-2 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfcg-3-3-0 ._dlenfch-3-3-0 {
+._dlenfcg-3-3-2 ._dlenfch-3-3-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfci-3-3-0.strato-select-divider {
+._dlenfci-3-3-2.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfcj-3-3-0 {
+._dlenfcj-3-3-2 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfck-3-3-0 {
+._dlenfck-3-3-2 {
   min-width: 128px;
 }
-._dlenfcl-3-3-0 {
+._dlenfcl-3-3-2 {
   display: inline;
 }
-._dlenfcl-3-3-0 + ._dlenfcl-3-3-0:before {
+._dlenfcl-3-3-2 + ._dlenfcl-3-3-2:before {
   content: ", ";
 }
-._dlenfcm-3-3-0 {
+._dlenfcm-3-3-2 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
@@ -75,30 +75,30 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcm-3-3-0:hover:not(.strato-select-option--disabled) {
+._dlenfcm-3-3-2:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcm-3-3-0.strato-select-option--focus {
+._dlenfcm-3-3-2.strato-select-option--focus {
   outline: none;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._dlenfcm-3-3-0.strato-select-option--focus.strato-select-option--selected {
+._dlenfcm-3-3-2.strato-select-option--focus.strato-select-option--selected {
   background-color: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._dlenfcm-3-3-0.strato-select-option--selected {
+._dlenfcm-3-3-2.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcm-3-3-0.strato-select-option--disabled {
+._dlenfcm-3-3-2.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcm-3-3-0.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcm-3-3-2.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcm-3-3-0.strato-select-option--selected:hover {
+._dlenfcm-3-3-2.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcm-3-3-0.strato-select-option--selected::before {
+._dlenfcm-3-3-2.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -109,11 +109,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcn-3-3-0:focus {
+._dlenfcn-3-3-2: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);
 }
-._dlenfco-3-3-0 {
+._dlenfco-3-3-2 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -123,17 +123,17 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfco-3-3-0:hover:not(.strato-select-option--disabled) {
+._dlenfco-3-3-2:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfco-3-3-0.strato-select-option--focus {
+._dlenfco-3-3-2.strato-select-option--focus {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._dlenfco-3-3-0.strato-select-option--disabled {
+._dlenfco-3-3-2.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcp-3-3-0 {
+._dlenfcp-3-3-2 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -145,29 +145,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcp-3-3-0 {
+.strato-select-option--disabled ._dlenfcp-3-3-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcq-3-3-0 {
+._dlenfcq-3-3-2 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcr-3-3-0 {
+._dlenfcr-3-3-2 {
   fill: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcr-3-3-0 {
+.strato-select-option--disabled ._dlenfcr-3-3-2 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcs-3-3-0 {
+._dlenfcs-3-3-2 {
   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);
 }
-._dlenfct-3-3-0 {
+._dlenfct-3-3-2 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

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

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

package/forms/spin-buttons/SpinButton.css

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

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

@@ -24,5 +24,5 @@ __export(SpinButton_css_exports, {
 module.exports = __toCommonJS(SpinButton_css_exports);
 var import_SpinButton_css_ts_vanilla = require("./SpinButton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_r47o0w1-3-3-0", variantClassNames: { error: { true: "_r47o0w2-3-3-0" }, disabled: { true: "_r47o0w3-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-3-0"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-3-0";
+var spinButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_r47o0w1-3-3-2", variantClassNames: { error: { true: "_r47o0w2-3-3-2" }, disabled: { true: "_r47o0w3-3-3-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-3-2"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-3-2";