@dynatrace/strato-components 3.3.1 → 3.3.2

package/forms/switch/Switch.css

@@ -1,61 +1,61 @@
-._1tkc5xf0-3-3-1 {
+._1tkc5xf0-3-3-2 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-3-1 {
+._1tkc5xf1-3-3-2 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-3-1 {
+._1tkc5xf2-3-3-2 {
   cursor: not-allowed;
 }
-._1tkc5xf3-3-3-1 {
+._1tkc5xf3-3-3-2 {
   font-size: var(--dt-typography-text-base-default-size, 14px);
   overflow-wrap: anywhere;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._1tkc5xf4-3-3-1 {
+._1tkc5xf4-3-3-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-3-1 {
+._1tkc5xf5-3-3-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-3-1:after {
+._1tkc5xf6-3-3-2:after {
   content: "*";
 }
-._1tkc5xfa-3-3-1 {
-  --_1tkc5xf9-3-3-1: var(--_bx32h1-3-3-1);
+._1tkc5xfa-3-3-2 {
+  --_1tkc5xf9-3-3-2: var(--_bx32h1-3-3-2);
   display: flex;
   align-items: center;
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._1tkc5xfb-3-3-1 {
-  --_1tkc5xf7-3-3-1: 1;
-  --_1tkc5xf8-3-3-1: 0;
+._1tkc5xfb-3-3-2 {
+  --_1tkc5xf7-3-3-2: 1;
+  --_1tkc5xf8-3-3-2: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfc-3-3-1 {
-  --_1tkc5xf7-3-3-1: 0;
-  --_1tkc5xf8-3-3-1: 1;
+._1tkc5xfc-3-3-2 {
+  --_1tkc5xf7-3-3-2: 0;
+  --_1tkc5xf8-3-3-2: 1;
   transform: unset;
 }
-._1tkc5xfa-3-3-1 > svg {
+._1tkc5xfa-3-3-2 > svg {
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-delay: var(--dt-timings-offset-medium, 30ms);
   transition-property: opacity;
 }
-._1tkc5xfa-3-3-1 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf7-3-3-1);
-  color: var(--_1tkc5xf9-3-3-1);
+._1tkc5xfa-3-3-2 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf7-3-3-2);
+  color: var(--_1tkc5xf9-3-3-2);
 }
-._1tkc5xfa-3-3-1 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf8-3-3-1);
-  color: var(--_1tkc5xf9-3-3-1);
+._1tkc5xfa-3-3-2 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf8-3-3-2);
+  color: var(--_1tkc5xf9-3-3-2);
 }
-._1tkc5xfd-3-3-1 {
+._1tkc5xfd-3-3-2 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -70,22 +70,22 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-3-1);
+  background-color: var(--_bx32h3-3-3-2);
 }
-._1tkc5xfm-3-3-1 {
-  background-color: var(--_bx32h2-3-3-1);
+._1tkc5xfm-3-3-2 {
+  background-color: var(--_bx32h2-3-3-2);
 }
-._1tkc5xfn-3-3-1 {
+._1tkc5xfn-3-3-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfo-3-3-1 {
+._1tkc5xfo-3-3-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xfp-3-3-1 {
+._1tkc5xfp-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);
 }
-._1tkc5xfq-3-3-1 {
+._1tkc5xfq-3-3-2 {
   transition-property: background-color;
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-fast, 150ms);
@@ -96,5 +96,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_bx32h1-3-3-1);
+  background-color: var(--_bx32h1-3-3-2);
 }

package/forms/switch/Switch.sty.js

@@ -28,8 +28,8 @@ module.exports = __toCommonJS(Switch_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Switch_css_ts_vanilla = require("./Switch.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var switchIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xfa-3-3-1", variantClassNames: { selected: { true: "_1tkc5xfb-3-3-1", false: "_1tkc5xfc-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xf0-3-3-1", variantClassNames: { disabled: { true: "_1tkc5xf1-3-3-1" }, readOnly: { true: "_1tkc5xf2-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xf3-3-3-1", variantClassNames: { disabled: { true: "_1tkc5xf4-3-3-1", false: "_1tkc5xf5-3-3-1" }, required: { true: "_1tkc5xf6-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfq-3-3-1";
-var switchWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xfd-3-3-1", variantClassNames: { disabled: { true: "_1tkc5xfe-3-3-1", false: "_1tkc5xff-3-3-1" }, hasError: { true: "_1tkc5xfg-3-3-1", false: "_1tkc5xfh-3-3-1" }, color: { primary: "_1tkc5xfi-3-3-1", neutral: "_1tkc5xfj-3-3-1" }, isFocusVisible: { true: "_1tkc5xfk-3-3-1", false: "_1tkc5xfl-3-3-1" }, readOnly: { true: "_1tkc5xfm-3-3-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-3-1"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-3-1"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-3-1"]] });
+var switchIconCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xfa-3-3-2", variantClassNames: { selected: { true: "_1tkc5xfb-3-3-2", false: "_1tkc5xfc-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var switchLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xf0-3-3-2", variantClassNames: { disabled: { true: "_1tkc5xf1-3-3-2" }, readOnly: { true: "_1tkc5xf2-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xf3-3-3-2", variantClassNames: { disabled: { true: "_1tkc5xf4-3-3-2", false: "_1tkc5xf5-3-3-2" }, required: { true: "_1tkc5xf6-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfq-3-3-2";
+var switchWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1tkc5xfd-3-3-2", variantClassNames: { disabled: { true: "_1tkc5xfe-3-3-2", false: "_1tkc5xff-3-3-2" }, hasError: { true: "_1tkc5xfg-3-3-2", false: "_1tkc5xfh-3-3-2" }, color: { primary: "_1tkc5xfi-3-3-2", neutral: "_1tkc5xfj-3-3-2" }, isFocusVisible: { true: "_1tkc5xfk-3-3-2", false: "_1tkc5xfl-3-3-2" }, readOnly: { true: "_1tkc5xfm-3-3-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-3-2"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-3-2"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-3-2"]] });

package/forms/text-area/TextArea.css

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

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

@@ -25,6 +25,6 @@ __export(TextArea_css_exports, {
 module.exports = __toCommonJS(TextArea_css_exports);
 var import_TextArea_css_ts_vanilla = require("./TextArea.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl1-3-3-1", variantClassNames: { contentWidth: { true: "_44rwcl2-3-3-1" }, resize: { none: "_44rwcl3-3-3-1", both: "_44rwcl4-3-3-1", horizontal: "_44rwcl5-3-3-1", vertical: "_44rwcl6-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwclb-3-3-1", variantClassNames: { error: { true: "_44rwclc-3-3-1" }, disabled: { true: "_44rwcld-3-3-1" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcle-3-3-1"]] });
-var textArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl7-3-3-1", variantClassNames: { disabled: { true: "_44rwcl8-3-3-1" }, error: { true: "_44rwcl9-3-3-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwcla-3-3-1"]] });
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl1-3-3-2", variantClassNames: { contentWidth: { true: "_44rwcl2-3-3-2" }, resize: { none: "_44rwcl3-3-3-2", both: "_44rwcl4-3-3-2", horizontal: "_44rwcl5-3-3-2", vertical: "_44rwcl6-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwclb-3-3-2", variantClassNames: { error: { true: "_44rwclc-3-3-2" }, disabled: { true: "_44rwcld-3-3-2" } }, defaultVariants: {}, compoundVariants: [[{ error: true, disabled: true }, "_44rwcle-3-3-2"]] });
+var textArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_44rwcl7-3-3-2", variantClassNames: { disabled: { true: "_44rwcl8-3-3-2" }, error: { true: "_44rwcl9-3-3-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_44rwcla-3-3-2"]] });

package/forms/toggle-button-group/styles.css

@@ -1,14 +1,14 @@
-._w5wkeh0-3-3-1 {
+._w5wkeh0-3-3-2 {
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh3-3-3-1 {
+._w5wkeh3-3-3-2 {
   cursor: not-allowed;
 }
-._w5wkeh4-3-3-1 {
+._w5wkeh4-3-3-2 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh5-3-3-1 {
+._w5wkeh5-3-3-2 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
   display: inline-flex;
@@ -17,27 +17,27 @@
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
-  background: var(--_bx32h2-3-3-1);
-  color: var(--_bx32h0-3-3-1);
+  background: var(--_bx32h2-3-3-2);
+  color: var(--_bx32h0-3-3-2);
   max-width: calc(100% - var(--dt-spacings-size-2, 2px));
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._w5wkeh6-3-3-1 {
+._w5wkeh6-3-3-2 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._w5wkeh1-3-3-1:not(._w5wkeh3-3-3-1) ._w5wkeh6-3-3-1 {
+._w5wkeh1-3-3-2:not(._w5wkeh3-3-3-2) ._w5wkeh6-3-3-2 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh7-3-3-1 {
+._w5wkeh7-3-3-2 {
   width: 100%;
 }
-._w5wkeh8-3-3-1 {
+._w5wkeh8-3-3-2 {
   width: fit-content;
 }
-._w5wkeh9-3-3-1 {
+._w5wkeh9-3-3-2 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -45,30 +45,30 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkeh9-3-3-1::-webkit-scrollbar {
+._w5wkeh9-3-3-2::-webkit-scrollbar {
   display: none;
 }
-._w5wkeha-3-3-1 {
+._w5wkeha-3-3-2 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehb-3-3-1 {
+._w5wkehb-3-3-2 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehc-3-3-1 {
+._w5wkehc-3-3-2 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._w5wkehd-3-3-1 {
+._w5wkehd-3-3-2 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._w5wkehe-3-3-1 {
+._w5wkehe-3-3-2 {
   justify-content: center;
   min-width: fit-content;
   width: 100%;
@@ -78,27 +78,27 @@
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
   text-wrap: nowrap;
   border-radius: calc(var(--dt-borders-radius-field-default, 6px) - var(--dt-spacings-size-2, 2px));
-  background: var(--_bx32h3-3-3-1);
-  color: var(--_bx32h0-3-3-1);
+  background: var(--_bx32h3-3-3-2);
+  color: var(--_bx32h0-3-3-2);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   cursor: pointer;
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._w5wkehe-3-3-1._w5wkeh2-3-3-1 {
+._w5wkehe-3-3-2._w5wkeh2-3-3-2 {
   cursor: not-allowed;
   background-color: transparent;
 }
-._w5wkehe-3-3-1._w5wkeh0-3-3-1 {
+._w5wkehe-3-3-2._w5wkeh0-3-3-2 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehe-3-3-1:first-child {
+._w5wkehe-3-3-2:first-child {
   margin-left: 1px;
 }
-._w5wkehe-3-3-1:last-child {
+._w5wkehe-3-3-2:last-child {
   margin-right: 1px;
 }
-._w5wkehf-3-3-1 {
+._w5wkehf-3-3-2 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   overflow: hidden;
@@ -106,7 +106,7 @@
   white-space: nowrap;
   max-width: 100%;
 }
-._w5wkehg-3-3-1 {
+._w5wkehg-3-3-2 {
   min-width: 0;
   align-items: center;
 }

package/forms/toggle-button-group/styles.sty.js

@@ -36,17 +36,17 @@ __export(styles_css_exports, {
 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 checked = "_w5wkeh0-3-3-1";
-var container = "_w5wkeh5-3-3-1";
-var containerWidths = { full: "_w5wkeh7-3-3-1", content: "_w5wkeh8-3-3-1" };
-var disabled = "_w5wkeh2-3-3-1";
-var disabledGroup = "_w5wkeh3-3-3-1";
-var divider = "_w5wkeh6-3-3-1";
-var error = "_w5wkeh1-3-3-1";
-var hidden = "_w5wkeh4-3-3-1";
-var item = "_w5wkehe-3-3-1";
-var scrollButton = "_w5wkehd-3-3-1";
-var scrollContainer = "_w5wkeh9-3-3-1";
-var scrollVariants = { both: "_w5wkeha-3-3-1", left: "_w5wkehb-3-3-1", right: "_w5wkehc-3-3-1" };
-var text = "_w5wkehf-3-3-1";
-var textContainer = "_w5wkehg-3-3-1";
+var checked = "_w5wkeh0-3-3-2";
+var container = "_w5wkeh5-3-3-2";
+var containerWidths = { full: "_w5wkeh7-3-3-2", content: "_w5wkeh8-3-3-2" };
+var disabled = "_w5wkeh2-3-3-2";
+var disabledGroup = "_w5wkeh3-3-3-2";
+var divider = "_w5wkeh6-3-3-2";
+var error = "_w5wkeh1-3-3-2";
+var hidden = "_w5wkeh4-3-3-2";
+var item = "_w5wkehe-3-3-2";
+var scrollButton = "_w5wkehd-3-3-2";
+var scrollContainer = "_w5wkeh9-3-3-2";
+var scrollVariants = { both: "_w5wkeha-3-3-2", left: "_w5wkehb-3-3-2", right: "_w5wkehc-3-3-2" };
+var text = "_w5wkehf-3-3-2";
+var textContainer = "_w5wkehg-3-3-2";

package/layouts/app-header/AppHeader.css

@@ -1,4 +1,4 @@
-._8j2khp0-3-3-1 {
+._8j2khp0-3-3-2 {
   position: relative;
   display: flex;
   align-items: center;

package/layouts/app-header/AppHeader.sty.js

@@ -22,4 +22,4 @@ __export(AppHeader_css_exports, {
 });
 module.exports = __toCommonJS(AppHeader_css_exports);
 var import_AppHeader_css_ts_vanilla = require("./AppHeader.css");
-var header = "_8j2khp0-3-3-1";
+var header = "_8j2khp0-3-3-2";

package/layouts/app-header/Navigation.css

@@ -1,13 +1,13 @@
-._swz1ff2-3-3-1 {
+._swz1ff2-3-3-2 {
   position: relative;
 }
-._swz1ff2-3-3-1:is(._swz1ff0-3-3-1,.active):not(._swz1ff1-3-3-1) {
+._swz1ff2-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-3-1:is(._swz1ff0-3-3-1,.active):not(._swz1ff1-3-3-1):hover {
+._swz1ff2-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-3-1:is(._swz1ff0-3-3-1,.active)::after {
+._swz1ff2-3-3-2:is(._swz1ff0-3-3-2,.active)::after {
   content: "";
   position: absolute;
   width: 20px;
@@ -19,16 +19,16 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff3-3-3-1 {
+._swz1ff3-3-3-2 {
   position: relative;
 }
-._swz1ff3-3-3-1:is(._swz1ff0-3-3-1,.active):not(._swz1ff1-3-3-1) {
+._swz1ff3-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-3-1:is(._swz1ff0-3-3-1,.active):not(._swz1ff1-3-3-1):hover {
+._swz1ff3-3-3-2:is(._swz1ff0-3-3-2,.active):not(._swz1ff1-3-3-2):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-3-1:is(._swz1ff0-3-3-1,.active)::after {
+._swz1ff3-3-3-2:is(._swz1ff0-3-3-2,.active)::after {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-2, 2px);
@@ -39,6 +39,6 @@
   transform: translate(4px);
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff4-3-3-1 {
+._swz1ff4-3-3-2 {
   min-width: max-content;
 }

package/layouts/app-header/Navigation.sty.js

@@ -26,8 +26,8 @@ __export(Navigation_css_exports, {
 });
 module.exports = __toCommonJS(Navigation_css_exports);
 var import_Navigation_css_ts_vanilla = require("./Navigation.css");
-var button = "_swz1ff2-3-3-1";
-var inlineNav = "_swz1ff4-3-3-1";
-var isDisabled = "_swz1ff1-3-3-1";
-var isSelected = "_swz1ff0-3-3-1";
-var menuLink = "_swz1ff3-3-3-1";
+var button = "_swz1ff2-3-3-2";
+var inlineNav = "_swz1ff4-3-3-2";
+var isDisabled = "_swz1ff1-3-3-2";
+var isSelected = "_swz1ff0-3-3-2";
+var menuLink = "_swz1ff3-3-3-2";

package/layouts/app-header/action-group/ActionButton.css

@@ -1,4 +1,4 @@
-._otmjah0-3-3-1 {
+._otmjah0-3-3-2 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-3-1:hover {
+._otmjah0-3-3-2:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   text-decoration: none;
 }
-._otmjah0-3-3-1:active {
+._otmjah0-3-3-2:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
   text-decoration: none;
 }
-._otmjah0-3-3-1:after {
+._otmjah0-3-3-2:after {
   content: " ";
   width: 16px;
   height: 2px;
@@ -34,50 +34,50 @@
   transform: translateX(-50%) translateY(var(--dt-spacings-size-0, 0));
   transition: width var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), opacity var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), transform var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
 }
-._otmjah1-3-3-1._otmjah1-3-3-1 {
+._otmjah1-3-3-2._otmjah1-3-3-2 {
   gap: var(--dt-spacings-size-8, 8px);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._otmjah2-3-3-1._otmjah2-3-3-1 {
+._otmjah2-3-3-2._otmjah2-3-3-2 {
   gap: var(--dt-spacings-size-6, 6px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._otmjah3-3-3-1 {
+._otmjah3-3-3-2 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-3-1:hover {
+._otmjah3-3-3-2:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-3-1.active {
+._otmjah4-3-3-2.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-3-1._otmjah3-3-3-1.active {
+._otmjah4-3-3-2._otmjah3-3-3-2.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-3-1:not(._otmjah3-3-3-1).active:hover {
+._otmjah4-3-3-2:not(._otmjah3-3-3-2).active:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
   text-decoration: none;
 }
-._otmjah4-3-3-1:not([role="menuitem"]).active:active {
+._otmjah4-3-3-2:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
   text-decoration: none;
 }
-._otmjah4-3-3-1._otmjah3-3-3-1._otmjah4-3-3-1:not([role="menuitem"]).active:active {
+._otmjah4-3-3-2._otmjah3-3-3-2._otmjah4-3-3-2:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-3-1.active::after {
+._otmjah4-3-3-2.active::after {
   content: " ";
   width: 20px;
   height: 2px;
@@ -90,10 +90,10 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._otmjah4-3-3-1._otmjah3-3-3-1.active::after {
+._otmjah4-3-3-2._otmjah3-3-3-2.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-3-1[role="menuitem"].active::after {
+._otmjah4-3-3-2[role="menuitem"].active::after {
   display: block;
   height: calc(100% - 2 * var(--dt-spacings-size-6, 6px));
   width: var(--dt-spacings-size-2, 2px);
@@ -102,7 +102,7 @@
   transform: translate(4px);
   bottom: unset;
 }
-._otmjah4-3-3-1 a {
+._otmjah4-3-3-2 a {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);