@dynatrace/strato-components 3.1.1 → 3.1.3

package/filters/segment-selector/parts/selectionBar/SegmentSelect.css

@@ -1,47 +1,47 @@
-._1fuxi5m0-3-1-1 {
+._1fuxi5m0-3-1-3 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m2-3-1-1._1fuxi5m2-3-1-1 {
+._1fuxi5m2-3-1-3._1fuxi5m2-3-1-3 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-1-1 {
+._1fuxi5m3-3-1-3 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m3-3-1-1._1fuxi5m3-3-1-1 {
+._1fuxi5m3-3-1-3._1fuxi5m3-3-1-3 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1fuxi5m4-3-1-1 {
+._1fuxi5m4-3-1-3 {
   gap: 2px;
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1fuxi5m5-3-1-1 {
+._1fuxi5m5-3-1-3 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m6-3-1-1 {
+._1fuxi5m6-3-1-3 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m7-3-1-1 {
+._1fuxi5m7-3-1-3 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5m8-3-1-1 {
+._1fuxi5m8-3-1-3 {
   grid-template-areas: "segment segment";
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m0-3-1-1 {
+  ._1fuxi5m0-3-1-3 {
     border-bottom-left-radius: 0;
   }
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-1-1 {
+  ._1fuxi5m1-3-1-3 {
     border-bottom-left-radius: 0;
   }
-  ._1fuxi5m5-3-1-1 {
+  ._1fuxi5m5-3-1-3 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -27,8 +27,8 @@ __export(SegmentSelect_css_exports, {
 module.exports = __toCommonJS(SegmentSelect_css_exports);
 var import_SegmentSelect_css_ts_vanilla = require("./SegmentSelect.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearButtonCSS = "_1fuxi5m3-3-1-1";
-var noBorderRadiusRight = "_1fuxi5m2-3-1-1";
-var segmentsSelectCSS = "_1fuxi5m1-3-1-1";
-var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m4-3-1-1", variantClassNames: { layout: { full: "_1fuxi5m5-3-1-1", "full-readonly": "_1fuxi5m6-3-1-1", "no-variables": "_1fuxi5m7-3-1-1", "no-variables-readonly": "_1fuxi5m8-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-1-1";
+var clearButtonCSS = "_1fuxi5m3-3-1-3";
+var noBorderRadiusRight = "_1fuxi5m2-3-1-3";
+var segmentsSelectCSS = "_1fuxi5m1-3-1-3";
+var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m4-3-1-3", variantClassNames: { layout: { full: "_1fuxi5m5-3-1-3", "full-readonly": "_1fuxi5m6-3-1-3", "no-variables": "_1fuxi5m7-3-1-3", "no-variables-readonly": "_1fuxi5m8-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var variablesSelectCSS = "_1fuxi5m0-3-1-3";

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-1-1 {
+._1e5el1o0-3-1-3 {
   max-width: 400px;
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -22,4 +22,4 @@ __export(SegmentSelectorTrigger_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelectorTrigger_css_exports);
 var import_SegmentSelectorTrigger_css_ts_vanilla = require("./SegmentSelectorTrigger.css");
-var trigger = "_1e5el1o0-3-1-1";
+var trigger = "_1e5el1o0-3-1-3";

package/filters/timeframe-selector/TimeframeSelector.css

@@ -1,4 +1,4 @@
-._1sqhmjg0-3-1-1 {
+._1sqhmjg0-3-1-3 {
   min-width: 0;
   box-sizing: border-box;
 }

package/filters/timeframe-selector/TimeframeSelector.sty.js

@@ -22,4 +22,4 @@ __export(TimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelector_css_exports);
 var import_TimeframeSelector_css_ts_vanilla = require("./TimeframeSelector.css");
-var displayValueParts = "_1sqhmjg0-3-1-1";
+var displayValueParts = "_1sqhmjg0-3-1-3";

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css

@@ -1,4 +1,4 @@
-._at2xro0-3-1-1 {
+._at2xro0-3-1-3 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-1-1 {
+._at2xro1-3-1-3 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-1-1 {
+._at2xro2-3-1-3 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-1-1 {
+  ._at2xro1-3-1-3 {
     flex-direction: row;
   }
 }

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js

@@ -24,6 +24,6 @@ __export(CustomTimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(CustomTimeframeSelector_css_exports);
 var import_CustomTimeframeSelector_css_ts_vanilla = require("./CustomTimeframeSelector.css");
-var fieldset = "_at2xro0-3-1-1";
-var overlayRoot = "_at2xro1-3-1-1";
-var wrapper = "_at2xro2-3-1-1";
+var fieldset = "_at2xro0-3-1-3";
+var overlayRoot = "_at2xro1-3-1-3";
+var wrapper = "_at2xro2-3-1-3";

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css

@@ -1,4 +1,4 @@
-._14xc6b0-3-1-1 {
+._14xc6b0-3-1-3 {
   background: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-1-1 {
+._14xc6b1-3-1-3 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-1-1 {
+._14xc6b2-3-1-3 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-1-1 {
+._14xc6b3-3-1-3 {
   overflow-wrap: break-word;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -25,7 +25,7 @@ __export(TimeframeSelectorOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelectorOverlay_css_exports);
 var import_TimeframeSelectorOverlay_css_ts_vanilla = require("./TimeframeSelectorOverlay.css");
-var footer = "_14xc6b2-3-1-1";
-var hint = "_14xc6b3-3-1-1";
-var scrollContainer = "_14xc6b1-3-1-1";
-var wrapper = "_14xc6b0-3-1-1";
+var footer = "_14xc6b2-3-1-3";
+var hint = "_14xc6b3-3-1-3";
+var scrollContainer = "_14xc6b1-3-1-3";
+var wrapper = "_14xc6b0-3-1-3";

package/filters/timeframe-selector/components/presets/Presets.css

@@ -1,11 +1,11 @@
-._14rlfn30-3-1-1 {
+._14rlfn30-3-1-3 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
   grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._14rlfn31-3-1-1 {
+._14rlfn31-3-1-3 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,45 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._14rlfn32-3-1-1 {
+._14rlfn32-3-1-3 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-1-1:hover {
+._14rlfn32-3-1-3:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-1-1:active {
+._14rlfn32-3-1-3:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-1-1 {
+._14rlfn33-3-1-3 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-1-1:hover {
+._14rlfn33-3-1-3:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-1-1:active {
+._14rlfn33-3-1-3:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-1-1 {
+._14rlfn34-3-1-3 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-1-1 {
+._14rlfn36-3-1-3 {
   min-width: 0;
 }
-._14rlfn37-3-1-1 {
+._14rlfn37-3-1-3 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-1-1 {
+._14rlfn38-3-1-3 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._14rlfn39-3-1-1::before {
+._14rlfn39-3-1-3::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-1-1::before {
+._14rlfn3a-3-1-3::before {
   content: "";
 }
-._14rlfn3b-3-1-1::before {
+._14rlfn3b-3-1-3::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-1-1::before {
+._14rlfn3c-3-1-3::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-1-1 {
+._14rlfn3e-3-1-3 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-1-1 {
+._14rlfn3f-3-1-3 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-1-1 {
+._14rlfn3g-3-1-3 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-1-1 {
+._14rlfn3h-3-1-3 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-1-1 {
+._14rlfn3i-3-1-3 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-1-1 {
+._14rlfn3j-3-1-3 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-1-1 {
+._14rlfn3k-3-1-3 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-1-1 {
+._14rlfn3l-3-1-3 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-1-1 {
+._14rlfn3m-3-1-3 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3n-3-1-1 {
+._14rlfn3n-3-1-3 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-1-1 {
+  ._14rlfn3d-3-1-3 {
     display: none;
   }
 }

package/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -33,14 +33,14 @@ __export(Presets_css_exports, {
 module.exports = __toCommonJS(Presets_css_exports);
 var import_Presets_css_ts_vanilla = require("./Presets.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var displayValueWrapper = "_14rlfn36-3-1-1";
-var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-1-1", variantClassNames: { state: { rest: "_14rlfn3f-3-1-1", selected: "_14rlfn3g-3-1-1", disabled: "_14rlfn3h-3-1-1" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-1-1", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-1-1", false: "_14rlfn3k-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-1-1", variantClassNames: { state: { rest: "_14rlfn32-3-1-1", selected: "_14rlfn33-3-1-1", disabled: "_14rlfn34-3-1-1" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-1-1";
-var listContainer = "_14rlfn3l-3-1-1";
-var mediaQuery = "_14rlfn3d-3-1-1";
-var recentHeading = "_14rlfn3m-3-1-1";
-var recentIcon = "_14rlfn3n-3-1-1";
-var timeframeDisplayValue = "_14rlfn37-3-1-1";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-1-1", variantClassNames: { isSelected: { true: "_14rlfn39-3-1-1", false: "_14rlfn3a-3-1-1" }, isDisabled: { true: "_14rlfn3b-3-1-1", false: "_14rlfn3c-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-1-3";
+var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-1-3", variantClassNames: { state: { rest: "_14rlfn3f-3-1-3", selected: "_14rlfn3g-3-1-3", disabled: "_14rlfn3h-3-1-3" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-1-3", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-1-3", false: "_14rlfn3k-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-1-3", variantClassNames: { state: { rest: "_14rlfn32-3-1-3", selected: "_14rlfn33-3-1-3", disabled: "_14rlfn34-3-1-3" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-1-3";
+var listContainer = "_14rlfn3l-3-1-3";
+var mediaQuery = "_14rlfn3d-3-1-3";
+var recentHeading = "_14rlfn3m-3-1-3";
+var recentIcon = "_14rlfn3n-3-1-3";
+var timeframeDisplayValue = "_14rlfn37-3-1-3";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-1-3", variantClassNames: { isSelected: { true: "_14rlfn39-3-1-3", false: "_14rlfn3a-3-1-3" }, isDisabled: { true: "_14rlfn3b-3-1-3", false: "_14rlfn3c-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });

package/filters/timeframe-selector/components/trigger/Trigger.css

@@ -1,10 +1,10 @@
-._attccb0-3-1-1 {
+._attccb0-3-1-3 {
   cursor: not-allowed;
 }
-._attccb1-3-1-1 {
+._attccb1-3-1-3 {
   font-size: 0;
   transition-property: transform;
 }
-._attccb2-3-1-1 {
+._attccb2-3-1-3 {
   transform: rotate(180deg);
 }

package/filters/timeframe-selector/components/trigger/Trigger.sty.js

@@ -24,6 +24,6 @@ __export(Trigger_css_exports, {
 });
 module.exports = __toCommonJS(Trigger_css_exports);
 var import_Trigger_css_ts_vanilla = require("./Trigger.css");
-var readOnly = "_attccb0-3-1-1";
-var suffix = "_attccb1-3-1-1";
-var suffixOpen = "_attccb2-3-1-1";
+var readOnly = "_attccb0-3-1-3";
+var suffix = "_attccb1-3-1-3";
+var suffixOpen = "_attccb2-3-1-3";

package/forms/_base-input/BaseInput.css

@@ -1,6 +1,6 @@
-._1a8lqy96-3-1-1 {
-  --_1a8lqy95-3-1-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-1-1: var(--_1a8lqy95-3-1-1);
+._1a8lqy96-3-1-3 {
+  --_1a8lqy95-3-1-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-1-3: var(--_1a8lqy95-3-1-3);
   position: relative;
   display: flex;
   min-width: 0;
@@ -14,55 +14,55 @@
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
-  background-color: var(--_1a8lqy95-3-1-1);
+  background-color: var(--_1a8lqy95-3-1-3);
 }
-._1a8lqy96-3-1-1:hover {
-  --_1a8lqy95-3-1-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy96-3-1-3:hover {
+  --_1a8lqy95-3-1-3: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy96-3-1-1:active {
-  --_1a8lqy95-3-1-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy96-3-1-3:active {
+  --_1a8lqy95-3-1-3: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-1-1 ._1a8lqy96-3-1-1 {
+._1a8lqy91-3-1-3 ._1a8lqy96-3-1-3 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-1-1:not(._1a8lqy92-3-1-1) ._1a8lqy96-3-1-1:hover {
+._1a8lqy91-3-1-3:not(._1a8lqy92-3-1-3) ._1a8lqy96-3-1-3:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-1-1:not(._1a8lqy92-3-1-1) ._1a8lqy96-3-1-1:active {
+._1a8lqy91-3-1-3:not(._1a8lqy92-3-1-3) ._1a8lqy96-3-1-3:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy92-3-1-1 ._1a8lqy96-3-1-1 {
+._1a8lqy92-3-1-3 ._1a8lqy96-3-1-3 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy94-3-1-1:not(:hover) ._1a8lqy96-3-1-1 {
+._1a8lqy94-3-1-3:not(:hover) ._1a8lqy96-3-1-3 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy94-3-1-1:not(:hover) ._1a8lqy96-3-1-1:hover {
+._1a8lqy94-3-1-3:not(:hover) ._1a8lqy96-3-1-3:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1a8lqy94-3-1-1:not(:hover) ._1a8lqy96-3-1-1:active {
+._1a8lqy94-3-1-3:not(:hover) ._1a8lqy96-3-1-3:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1a8lqy94-3-1-1._1a8lqy92-3-1-1 ._1a8lqy96-3-1-1:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy94-3-1-3._1a8lqy92-3-1-3 ._1a8lqy96-3-1-3:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy97-3-1-1 {
+._1a8lqy97-3-1-3 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy98-3-1-1 {
+._1a8lqy98-3-1-3 {
   padding-right: 0;
 }
-._1a8lqy99-3-1-1 {
+._1a8lqy99-3-1-3 {
   padding-right: unset;
 }
-._1a8lqy9a-3-1-1 {
+._1a8lqy9a-3-1-3 {
   padding-left: unset;
 }
-._1a8lqy9b-3-1-1 {
+._1a8lqy9b-3-1-3 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -76,87 +76,87 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9b-3-1-1:read-only {
+._1a8lqy9b-3-1-3:read-only {
   cursor: not-allowed;
 }
-._1a8lqy9b-3-1-1:focus {
+._1a8lqy9b-3-1-3:focus {
   outline: none;
 }
-._1a8lqy9b-3-1-1::placeholder {
+._1a8lqy9b-3-1-3::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9b-3-1-1::-webkit-search-cancel-button {
+._1a8lqy9b-3-1-3::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9b-3-1-1::-ms-reveal {
+._1a8lqy9b-3-1-3::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-1-1 ._1a8lqy9b-3-1-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-1-1 ._1a8lqy9b-3-1-1::placeholder {
+._1a8lqy91-3-1-3 ._1a8lqy9b-3-1-3:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-1-3 ._1a8lqy9b-3-1-3::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-1-1 ._1a8lqy9b-3-1-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-1-1 ._1a8lqy9b-3-1-1::placeholder {
+._1a8lqy92-3-1-3 ._1a8lqy9b-3-1-3:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-1-3 ._1a8lqy9b-3-1-3::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-1-1 ._1a8lqy9b-3-1-1 {
+._1a8lqy92-3-1-3 ._1a8lqy9b-3-1-3 {
   cursor: not-allowed;
 }
-button ._1a8lqy9b-3-1-1 {
+button ._1a8lqy9b-3-1-3 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9c-3-1-1 {
+._1a8lqy9c-3-1-3 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9c-3-1-1:is(button._1a8lqy9c-3-1-1._1a8lqy9c-3-1-1) {
+._1a8lqy9c-3-1-3:is(button._1a8lqy9c-3-1-3._1a8lqy9c-3-1-3) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9d-3-1-1 {
+._1a8lqy9d-3-1-3 {
   margin-top: var(--dt-spacings-size-6, 6px);
   margin-bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1a8lqy91-3-1-1:not(._1a8lqy92-3-1-1) ._1a8lqy9d-3-1-1 {
+._1a8lqy91-3-1-3:not(._1a8lqy92-3-1-3) ._1a8lqy9d-3-1-3 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button {
+._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button {
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button:active {
+._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button:hover {
+._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1)._1a8lqy91-3-1-1:hover button {
+._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3)._1a8lqy91-3-1-3:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1)._1a8lqy91-3-1-1:hover button:active {
+._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3)._1a8lqy91-3-1-3:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1)._1a8lqy91-3-1-1:hover button:hover {
+._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3)._1a8lqy91-3-1-3:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button:is(:disabled,[aria-disabled=true]) {
+._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button:is(:disabled,[aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy96-3-1-1:has(._1a8lqy9c-3-1-1:hover) {
+._1a8lqy96-3-1-3:has(._1a8lqy9c-3-1-3:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy91-3-1-1 ._1a8lqy96-3-1-1:has(._1a8lqy9c-3-1-1:hover):not(._1a8lqy92-3-1-1) {
+._1a8lqy91-3-1-3 ._1a8lqy96-3-1-3:has(._1a8lqy9c-3-1-3:hover):not(._1a8lqy92-3-1-3) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy96-3-1-1:hover ._1a8lqy9d-3-1-1 {
+._1a8lqy96-3-1-3:hover ._1a8lqy9d-3-1-3 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-1-1 ._1a8lqy96-3-1-1:hover ._1a8lqy9d-3-1-1 {
+._1a8lqy91-3-1-3 ._1a8lqy96-3-1-3:hover ._1a8lqy9d-3-1-3 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy96-3-1-1._1a8lqy9e-3-1-1 div svg {
+._1a8lqy96-3-1-3._1a8lqy9e-3-1-3 div svg {
   fill: currentcolor;
 }

package/forms/_base-input/BaseInput.sty.js

@@ -33,13 +33,13 @@ module.exports = __toCommonJS(BaseInput_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
-var clearIconButton = "_1a8lqy9c-3-1-1";
-var container = "_1a8lqy96-3-1-1";
-var containerPadding = { none: "_1a8lqy97-3-1-1", rightNone: "_1a8lqy98-3-1-1", rightUnset: "_1a8lqy99-3-1-1", leftUnset: "_1a8lqy9a-3-1-1" };
-var disabled = "_1a8lqy92-3-1-1";
-var divider = "_1a8lqy9d-3-1-1";
-var hasError = "_1a8lqy91-3-1-1";
-var input = "_1a8lqy9b-3-1-1 _yfwka33-3-1-1 _da9a8v0-3-1-1 _da9a8v2-3-1-1 _da9a8v3-3-1-1 _da9a8vb-3-1-1";
-var isAutoFilled = "_1a8lqy9e-3-1-1";
-var variant = { "default": "_1a8lqy93-3-1-1", minimal: "_1a8lqy94-3-1-1" };
-var wrapper = "_1a8lqy90-3-1-1";
+var clearIconButton = "_1a8lqy9c-3-1-3";
+var container = "_1a8lqy96-3-1-3";
+var containerPadding = { none: "_1a8lqy97-3-1-3", rightNone: "_1a8lqy98-3-1-3", rightUnset: "_1a8lqy99-3-1-3", leftUnset: "_1a8lqy9a-3-1-3" };
+var disabled = "_1a8lqy92-3-1-3";
+var divider = "_1a8lqy9d-3-1-3";
+var hasError = "_1a8lqy91-3-1-3";
+var input = "_1a8lqy9b-3-1-3 _yfwka33-3-1-3 _da9a8v0-3-1-3 _da9a8v2-3-1-3 _da9a8v3-3-1-3 _da9a8vb-3-1-3";
+var isAutoFilled = "_1a8lqy9e-3-1-3";
+var variant = { "default": "_1a8lqy93-3-1-3", minimal: "_1a8lqy94-3-1-3" };
+var wrapper = "_1a8lqy90-3-1-3";

package/forms/_base-input/BaseInputContent.css

@@ -1,27 +1,27 @@
-._o6rxr70-3-1-1 {
+._o6rxr70-3-1-3 {
   white-space: nowrap;
   overflow: hidden;
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1a8lqy91-3-1-1 ._o6rxr70-3-1-1 {
+._1a8lqy91-3-1-3 ._o6rxr70-3-1-3 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1a8lqy92-3-1-1 ._o6rxr70-3-1-1 {
+._1a8lqy92-3-1-3 ._o6rxr70-3-1-3 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._o6rxr70-3-1-1:has(svg):not(:has(span)) {
+._o6rxr70-3-1-3:has(svg):not(:has(span)) {
   overflow: inherit;
 }
-._o6rxr70-3-1-1 > * {
+._o6rxr70-3-1-3 > * {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }
-._o6rxr70-3-1-1 svg {
+._o6rxr70-3-1-3 svg {
   box-sizing: content-box;
   align-items: stretch;
   flex-shrink: 0;
 }
-._o6rxr70-3-1-1 svg:first-of-type {
+._o6rxr70-3-1-3 svg:first-of-type {
   align-self: center;
 }