@dynatrace/strato-components 3.1.0 → 3.1.3

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

@@ -1,14 +1,14 @@
-._w5wkeh0-3-1-0 {
+._w5wkeh0-3-1-3 {
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d) inset;
 }
-._w5wkeh3-3-1-0 {
+._w5wkeh3-3-1-3 {
   cursor: not-allowed;
 }
-._w5wkeh4-3-1-0 {
+._w5wkeh4-3-1-3 {
   visibility: hidden;
   height: 0;
 }
-._w5wkeh5-3-1-0 {
+._w5wkeh5-3-1-3 {
   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-1-0);
-  color: var(--_bx32h0-3-1-0);
+  background: var(--_bx32h2-3-1-3);
+  color: var(--_bx32h0-3-1-3);
   max-width: calc(100% - var(--dt-spacings-size-2, 2px));
   overflow: hidden;
   flex-wrap: nowrap;
 }
-._w5wkeh6-3-1-0 {
+._w5wkeh6-3-1-3 {
   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-1-0:not(._w5wkeh3-3-1-0) ._w5wkeh6-3-1-0 {
+._w5wkeh1-3-1-3:not(._w5wkeh3-3-1-3) ._w5wkeh6-3-1-3 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._w5wkeh7-3-1-0 {
+._w5wkeh7-3-1-3 {
   width: 100%;
 }
-._w5wkeh8-3-1-0 {
+._w5wkeh8-3-1-3 {
   width: fit-content;
 }
-._w5wkeh9-3-1-0 {
+._w5wkeh9-3-1-3 {
   min-width: 0;
   width: 100%;
   overflow-x: auto;
@@ -45,30 +45,30 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._w5wkeh9-3-1-0::-webkit-scrollbar {
+._w5wkeh9-3-1-3::-webkit-scrollbar {
   display: none;
 }
-._w5wkeha-3-1-0 {
+._w5wkeha-3-1-3 {
   -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-1-0 {
+._w5wkehb-3-1-3 {
   -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-1-0 {
+._w5wkehc-3-1-3 {
   -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-1-0 {
+._w5wkehd-3-1-3 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);
 }
-._w5wkehe-3-1-0 {
+._w5wkehe-3-1-3 {
   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-1-0);
-  color: var(--_bx32h0-3-1-0);
+  background: var(--_bx32h3-3-1-3);
+  color: var(--_bx32h0-3-1-3);
   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-1-0._w5wkeh2-3-1-0 {
+._w5wkehe-3-1-3._w5wkeh2-3-1-3 {
   cursor: not-allowed;
   background-color: transparent;
 }
-._w5wkehe-3-1-0._w5wkeh0-3-1-0 {
+._w5wkehe-3-1-3._w5wkeh0-3-1-3 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._w5wkehe-3-1-0:first-child {
+._w5wkehe-3-1-3:first-child {
   margin-left: 1px;
 }
-._w5wkehe-3-1-0:last-child {
+._w5wkehe-3-1-3:last-child {
   margin-right: 1px;
 }
-._w5wkehf-3-1-0 {
+._w5wkehf-3-1-3 {
   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-1-0 {
+._w5wkehg-3-1-3 {
   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-1-0";
-var container = "_w5wkeh5-3-1-0";
-var containerWidths = { full: "_w5wkeh7-3-1-0", content: "_w5wkeh8-3-1-0" };
-var disabled = "_w5wkeh2-3-1-0";
-var disabledGroup = "_w5wkeh3-3-1-0";
-var divider = "_w5wkeh6-3-1-0";
-var error = "_w5wkeh1-3-1-0";
-var hidden = "_w5wkeh4-3-1-0";
-var item = "_w5wkehe-3-1-0";
-var scrollButton = "_w5wkehd-3-1-0";
-var scrollContainer = "_w5wkeh9-3-1-0";
-var scrollVariants = { both: "_w5wkeha-3-1-0", left: "_w5wkehb-3-1-0", right: "_w5wkehc-3-1-0" };
-var text = "_w5wkehf-3-1-0";
-var textContainer = "_w5wkehg-3-1-0";
+var checked = "_w5wkeh0-3-1-3";
+var container = "_w5wkeh5-3-1-3";
+var containerWidths = { full: "_w5wkeh7-3-1-3", content: "_w5wkeh8-3-1-3" };
+var disabled = "_w5wkeh2-3-1-3";
+var disabledGroup = "_w5wkeh3-3-1-3";
+var divider = "_w5wkeh6-3-1-3";
+var error = "_w5wkeh1-3-1-3";
+var hidden = "_w5wkeh4-3-1-3";
+var item = "_w5wkehe-3-1-3";
+var scrollButton = "_w5wkehd-3-1-3";
+var scrollContainer = "_w5wkeh9-3-1-3";
+var scrollVariants = { both: "_w5wkeha-3-1-3", left: "_w5wkehb-3-1-3", right: "_w5wkehc-3-1-3" };
+var text = "_w5wkehf-3-1-3";
+var textContainer = "_w5wkehg-3-1-3";

package/layouts/app-header/AppHeader.css

@@ -1,4 +1,4 @@
-._8j2khp0-3-1-0 {
+._8j2khp0-3-1-3 {
   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-1-0";
+var header = "_8j2khp0-3-1-3";

package/layouts/app-header/Logo.css

@@ -1,4 +1,4 @@
-._5aqgt30-3-1-0 {
+._5aqgt30-3-1-3 {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;

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

@@ -22,4 +22,4 @@ __export(Logo_css_exports, {
 });
 module.exports = __toCommonJS(Logo_css_exports);
 var import_Logo_css_ts_vanilla = require("./Logo.css");
-var title = "_5aqgt30-3-1-0";
+var title = "_5aqgt30-3-1-3";

package/layouts/app-header/Navigation.css

@@ -1,13 +1,13 @@
-._swz1ff2-3-1-0 {
+._swz1ff2-3-1-3 {
   position: relative;
 }
-._swz1ff2-3-1-0:is(._swz1ff0-3-1-0,.active):not(._swz1ff1-3-1-0) {
+._swz1ff2-3-1-3:is(._swz1ff0-3-1-3,.active):not(._swz1ff1-3-1-3) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-1-0:is(._swz1ff0-3-1-0,.active):not(._swz1ff1-3-1-0):hover {
+._swz1ff2-3-1-3:is(._swz1ff0-3-1-3,.active):not(._swz1ff1-3-1-3):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-1-0:is(._swz1ff0-3-1-0,.active)::after {
+._swz1ff2-3-1-3:is(._swz1ff0-3-1-3,.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-1-0 {
+._swz1ff3-3-1-3 {
   position: relative;
 }
-._swz1ff3-3-1-0:is(._swz1ff0-3-1-0,.active):not(._swz1ff1-3-1-0) {
+._swz1ff3-3-1-3:is(._swz1ff0-3-1-3,.active):not(._swz1ff1-3-1-3) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-1-0:is(._swz1ff0-3-1-0,.active):not(._swz1ff1-3-1-0):hover {
+._swz1ff3-3-1-3:is(._swz1ff0-3-1-3,.active):not(._swz1ff1-3-1-3):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-1-0:is(._swz1ff0-3-1-0,.active)::after {
+._swz1ff3-3-1-3:is(._swz1ff0-3-1-3,.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-1-0 {
+._swz1ff4-3-1-3 {
   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-1-0";
-var inlineNav = "_swz1ff4-3-1-0";
-var isDisabled = "_swz1ff1-3-1-0";
-var isSelected = "_swz1ff0-3-1-0";
-var menuLink = "_swz1ff3-3-1-0";
+var button = "_swz1ff2-3-1-3";
+var inlineNav = "_swz1ff4-3-1-3";
+var isDisabled = "_swz1ff1-3-1-3";
+var isSelected = "_swz1ff0-3-1-3";
+var menuLink = "_swz1ff3-3-1-3";

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

@@ -1,4 +1,4 @@
-._otmjah0-3-1-0 {
+._otmjah0-3-1-3 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-1-0:hover {
+._otmjah0-3-1-3: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-1-0:active {
+._otmjah0-3-1-3: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-1-0:after {
+._otmjah0-3-1-3: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-1-0._otmjah1-3-1-0 {
+._otmjah1-3-1-3._otmjah1-3-1-3 {
   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-1-0._otmjah2-3-1-0 {
+._otmjah2-3-1-3._otmjah2-3-1-3 {
   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-1-0 {
+._otmjah3-3-1-3 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-1-0:hover {
+._otmjah3-3-1-3:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-1-0.active {
+._otmjah4-3-1-3.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-1-0._otmjah3-3-1-0.active {
+._otmjah4-3-1-3._otmjah3-3-1-3.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-1-0:not(._otmjah3-3-1-0).active:hover {
+._otmjah4-3-1-3:not(._otmjah3-3-1-3).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-1-0:not([role="menuitem"]).active:active {
+._otmjah4-3-1-3: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-1-0._otmjah3-3-1-0._otmjah4-3-1-0:not([role="menuitem"]).active:active {
+._otmjah4-3-1-3._otmjah3-3-1-3._otmjah4-3-1-3:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-1-0.active::after {
+._otmjah4-3-1-3.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-1-0._otmjah3-3-1-0.active::after {
+._otmjah4-3-1-3._otmjah3-3-1-3.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-1-0[role="menuitem"].active::after {
+._otmjah4-3-1-3[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-1-0 a {
+._otmjah4-3-1-3 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);

package/layouts/app-header/action-group/ActionButton.sty.js

@@ -25,6 +25,6 @@ __export(ActionButton_css_exports, {
 module.exports = __toCommonJS(ActionButton_css_exports);
 var import_ActionButton_css_ts_vanilla = require("./ActionButton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var disabled = "_otmjah3-3-1-0";
-var navItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_otmjah0-3-1-0", variantClassNames: { density: { "default": "_otmjah1-3-1-0", condensed: "_otmjah2-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-1-0";
+var disabled = "_otmjah3-3-1-3";
+var navItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_otmjah0-3-1-3", variantClassNames: { density: { "default": "_otmjah1-3-1-3", condensed: "_otmjah2-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-1-3";

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

@@ -1,4 +1,4 @@
-._1d2ks7u0-3-1-0 {
+._1d2ks7u0-3-1-3 {
   position: absolute;
   visibility: hidden;
   z-index: -1;

package/layouts/app-header/action-group/ActionGroup.sty.js

@@ -22,4 +22,4 @@ __export(ActionGroup_css_exports, {
 });
 module.exports = __toCommonJS(ActionGroup_css_exports);
 var import_ActionGroup_css_ts_vanilla = require("./ActionGroup.css");
-var actionGroupHiddenItemCSS = "_1d2ks7u0-3-1-0";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-1-3";

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

@@ -1,13 +1,13 @@
-._bf74pw2-3-1-0 {
+._bf74pw2-3-1-3 {
   position: relative;
 }
-._bf74pw2-3-1-0._bf74pw0-3-1-0:not(._bf74pw1-3-1-0), ._bf74pw2-3-1-0.active:not(._bf74pw1-3-1-0) {
+._bf74pw2-3-1-3._bf74pw0-3-1-3:not(._bf74pw1-3-1-3), ._bf74pw2-3-1-3.active:not(._bf74pw1-3-1-3) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-1-0._bf74pw0-3-1-0:not(._bf74pw1-3-1-0):hover, ._bf74pw2-3-1-0.active:not(._bf74pw1-3-1-0):hover {
+._bf74pw2-3-1-3._bf74pw0-3-1-3:not(._bf74pw1-3-1-3):hover, ._bf74pw2-3-1-3.active:not(._bf74pw1-3-1-3):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-1-0._bf74pw0-3-1-0::after, ._bf74pw2-3-1-0.active::after {
+._bf74pw2-3-1-3._bf74pw0-3-1-3::after, ._bf74pw2-3-1-3.active::after {
   content: "";
   position: absolute;
   width: 20px;

package/layouts/app-header/action-group/NavItem.sty.js

@@ -24,6 +24,6 @@ __export(NavItem_css_exports, {
 });
 module.exports = __toCommonJS(NavItem_css_exports);
 var import_NavItem_css_ts_vanilla = require("./NavItem.css");
-var button = "_bf74pw2-3-1-0";
-var isDisabled = "_bf74pw1-3-1-0";
-var isSelected = "_bf74pw0-3-1-0";
+var button = "_bf74pw2-3-1-3";
+var isDisabled = "_bf74pw1-3-1-3";
+var isSelected = "_bf74pw0-3-1-3";

package/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-1-0 {
+@keyframes _1dtfpz50-3-1-3 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-1-0 {
+._1dtfpz51-3-1-3 {
   object-fit: contain;
 }
-._1dtfpz52-3-1-0 {
-  animation-name: _1dtfpz50-3-1-0;
+._1dtfpz52-3-1-3 {
+  animation-name: _1dtfpz50-3-1-3;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/layouts/app-header/app-icon/AppIcon.sty.js

@@ -23,4 +23,4 @@ __export(AppIcon_css_exports, {
 module.exports = __toCommonJS(AppIcon_css_exports);
 var import_AppIcon_css_ts_vanilla = require("./AppIcon.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var icon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1dtfpz51-3-1-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1dtfpz51-3-1-3", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });

package/layouts/container/Container.css

@@ -1,8 +1,8 @@
-._f32lcd0-3-1-0 {
+._f32lcd0-3-1-3 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-container-default, 9px);
-  color: var(--_6levse0-3-1-0);
-  border-color: var(--_6levse2-3-1-0);
-  background-color: var(--_6levse1-3-1-0);
+  color: var(--_6levse0-3-1-3);
+  border-color: var(--_6levse2-3-1-3);
+  background-color: var(--_6levse1-3-1-3);
 }

package/layouts/container/Container.sty.js

@@ -23,4 +23,4 @@ __export(Container_css_exports, {
 module.exports = __toCommonJS(Container_css_exports);
 var import_container_css_ts_vanilla = require("../../styles/container.css");
 var import_Container_css_ts_vanilla = require("./Container.css");
-var containerCSS = "_f32lcd0-3-1-0";
+var containerCSS = "_f32lcd0-3-1-3";

package/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-1-0 {
+._1thxv8m0-3-1-3 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-1-0);
+  background-color: var(--_k096v42-3-1-3);
 }
-._1thxv8m1-3-1-0 {
+._1thxv8m1-3-1-3 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-1-0 {
+._1thxv8m2-3-1-3 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-1-0 {
+._1thxv8m5-3-1-3 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-1-0 {
+._1thxv8m6-3-1-3 {
   flex-shrink: 0;
   width: var(--dt-borders-width-default, 1px);
   height: auto;

package/layouts/divider/Divider.sty.js

@@ -24,4 +24,4 @@ module.exports = __toCommonJS(Divider_css_exports);
 var import_colorUtils_css_ts_vanilla = require("../../core/utils/colorUtils.css");
 var import_Divider_css_ts_vanilla = require("./Divider.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dividerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1thxv8m0-3-1-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-1-0", vertical: "_1thxv8m2-3-1-0" }, flexItem: { true: "_1thxv8m3-3-1-0", false: "_1thxv8m4-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-1-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-1-0"]] });
+var dividerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1thxv8m0-3-1-3", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-1-3", vertical: "_1thxv8m2-3-1-3" }, flexItem: { true: "_1thxv8m3-3-1-3", false: "_1thxv8m4-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-1-3"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-1-3"]] });

package/layouts/input-group/InputGroup.css

@@ -1,46 +1,46 @@
-._1x4bl8z0-3-1-0 > .strato-inputgroup:not(:last-child),
- ._1x4bl8z0-3-1-0 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-1-3 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z0-3-1-3 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1x4bl8z0-3-1-0 > .strato-inputgroup:not(:first-child),
- ._1x4bl8z0-3-1-0 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-1-3 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z0-3-1-3 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1x4bl8z0-3-1-0 > ._mvcxum0-3-1-0 {
+._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3 {
   display: grid;
   align-items: center;
   grid-template-rows: subgrid;
 }
-._1x4bl8z0-3-1-0:has(> ._mvcxum0-3-1-0 > label):has(> ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0:last-child:not(:empty)) > ._mvcxum0-3-1-0 {
+._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label):has(> ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3:last-child:not(:empty)) > ._mvcxum0-3-1-3 {
   grid-row: 1 / span 3;
 }
-._1x4bl8z0-3-1-0:has(> ._mvcxum0-3-1-0 > label):not(:has(> ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0:last-child:not(:empty))) > ._mvcxum0-3-1-0 {
+._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label):not(:has(> ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3:last-child:not(:empty))) > ._mvcxum0-3-1-3 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-1-0:not(:has(> ._mvcxum0-3-1-0 > label)):has(> ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0:last-child:not(:empty)) > ._mvcxum0-3-1-0 {
+._1x4bl8z0-3-1-3:not(:has(> ._mvcxum0-3-1-3 > label)):has(> ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3:last-child:not(:empty)) > ._mvcxum0-3-1-3 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-1-0 > ._mvcxum0-3-1-0 > label {
+._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3 > label {
   grid-row: 1 / 2;
   align-self: end;
 }
-._1x4bl8z0-3-1-0 > ._mvcxum0-3-1-0:has(> :not(label, ._1l9bja60-3-1-0)) > label {
+._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3:has(> :not(label, ._1l9bja60-3-1-3)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z0-3-1-0 > :not(._mvcxum0-3-1-0) {
+._1x4bl8z0-3-1-3 > :not(._mvcxum0-3-1-3) {
   grid-row: 1 / 2;
 }
-._1x4bl8z0-3-1-0:has(> ._mvcxum0-3-1-0 > label) > :not(._mvcxum0-3-1-0), ._1x4bl8z0-3-1-0:has(> ._mvcxum0-3-1-0 > label) > ._mvcxum0-3-1-0 > :not(label, ._1l9bja60-3-1-0) {
+._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label) > :not(._mvcxum0-3-1-3), ._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label) > ._mvcxum0-3-1-3 > :not(label, ._1l9bja60-3-1-3) {
   grid-row: 2 / 3;
 }
-._1x4bl8z0-3-1-0:has(> ._mvcxum0-3-1-0 > label) > ._mvcxum0-3-1-0 > ._1l9bja60-3-1-0 {
+._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label) > ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3 {
   grid-row: 3 / 4;
   align-self: start;
 }
-._1x4bl8z0-3-1-0 > ._mvcxum0-3-1-0:has(> :not(label, ._1l9bja60-3-1-0)) > ._1l9bja60-3-1-0 ._16z6rg14-3-1-0 {
+._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3:has(> :not(label, ._1l9bja60-3-1-3)) > ._1l9bja60-3-1-3 ._16z6rg14-3-1-3 {
   width: 0;
   flex: 1 1 auto;
 }

package/layouts/input-group/InputGroup.sty.js

@@ -26,5 +26,5 @@ var import_FormField_css_ts_vanilla = require("../../forms/forms-core/components
 var import_FormFieldMessageItem_css_ts_vanilla = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css");
 var import_FormFieldMessages_css_ts_vanilla = require("../../forms/forms-core/components/form-field-messages/FormFieldMessages.css");
 var import_InputGroup_css_ts_vanilla = require("./InputGroup.css");
-var inputGroup = "_1x4bl8z0-3-1-0";
+var inputGroup = "_1x4bl8z0-3-1-3";
 var inputGroupClassName = "strato-inputgroup";

package/layouts/page/DetailView.css

@@ -1,8 +1,8 @@
-._wapl5d0-3-1-0 {
+._wapl5d0-3-1-3 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-1-0 {
+._wapl5d1-3-1-3 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }

package/layouts/page/DetailView.sty.js

@@ -23,5 +23,5 @@ __export(DetailView_css_exports, {
 });
 module.exports = __toCommonJS(DetailView_css_exports);
 var import_DetailView_css_ts_vanilla = require("./DetailView.css");
-var content = "_wapl5d1-3-1-0";
-var details = "_wapl5d0-3-1-0";
+var content = "_wapl5d1-3-1-3";
+var details = "_wapl5d0-3-1-3";

package/layouts/page/Header.css

@@ -1,4 +1,4 @@
-._150dima0-3-1-0 {
+._150dima0-3-1-3 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);

package/layouts/page/Header.sty.js

@@ -22,4 +22,4 @@ __export(Header_css_exports, {
 });
 module.exports = __toCommonJS(Header_css_exports);
 var import_Header_css_ts_vanilla = require("./Header.css");
-var header = "_150dima0-3-1-0";
+var header = "_150dima0-3-1-3";

package/layouts/page/Main.css

@@ -1,17 +1,17 @@
-._5zin930-3-1-0 {
+._5zin930-3-1-3 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   grid-area: main;
   overflow: hidden;
 }
-._5zin931-3-1-0 {
+._5zin931-3-1-3 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._5zin932-3-1-0 {
+._5zin932-3-1-3 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._5zin933-3-1-0 {
+._5zin933-3-1-3 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }