@dynatrace/strato-components 3.3.1 → 3.3.2

package/esm/layouts/page-layout/details-layout/Overlay.css

@@ -1,4 +1,4 @@
-._15qr1eq0-3-3-1 {
+._15qr1eq0-3-3-2 {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -12,14 +12,14 @@
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   display: flex;
 }
-._15qr1eq1-3-3-1 {
+._15qr1eq1-3-3-2 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-3-1 {
+._15qr1eq2-3-3-2 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -28,7 +28,7 @@
   display: flex;
   justify-content: center;
 }
-._15qr1eq3-3-3-1 {
+._15qr1eq3-3-3-2 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -41,17 +41,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._15qr1eq3-3-3-1:focus-visible {
+._15qr1eq3-3-3-2:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-3-1:hover._15qr1eq3-3-3-1:focus-visible {
+._15qr1eq3-3-3-2:hover._15qr1eq3-3-3-2:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-3-1:focus-visible, ._15qr1eq3-3-3-1:hover {
+._15qr1eq3-3-3-2:focus-visible, ._15qr1eq3-3-3-2:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-3-1:after {
+._15qr1eq3-3-3-2:after {
   content: "";
   display: block;
   height: 100%;

package/esm/layouts/page-layout/details-layout/Overlay.sty.js

@@ -1,8 +1,8 @@
 import "./Overlay.css";
-var handle = "_15qr1eq3-3-3-1";
-var handleContainer = "_15qr1eq2-3-3-1";
-var overlay = "_15qr1eq0-3-3-1";
-var overlayContent = "_15qr1eq1-3-3-1";
+var handle = "_15qr1eq3-3-3-2";
+var handleContainer = "_15qr1eq2-3-3-2";
+var overlay = "_15qr1eq0-3-3-2";
+var overlayContent = "_15qr1eq1-3-3-2";
 export {
   handle,
   handleContainer,

package/esm/layouts/page-layout/details-layout/Overlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/details-layout/Overlay.css.ts"],
-  "sourcesContent": ["import './Overlay.css';\nexport var handle = '_15qr1eq3-3-3-1';\nexport var handleContainer = '_15qr1eq2-3-3-1';\nexport var overlay = '_15qr1eq0-3-3-1';\nexport var overlayContent = '_15qr1eq1-3-3-1';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var handle = '_15qr1eq3-3-3-2';\nexport var handleContainer = '_15qr1eq2-3-3-2';\nexport var overlay = '_15qr1eq0-3-3-2';\nexport var overlayContent = '_15qr1eq1-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.css

@@ -1,14 +1,14 @@
-._1mr4xg70-3-3-1 {
+._1mr4xg70-3-3-2 {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-._1mr4xg71-3-3-1 {
+._1mr4xg71-3-3-2 {
   display: flex;
   height: 100%;
   width: 100%;
 }
-._1mr4xg72-3-3-1 {
+._1mr4xg72-3-3-2 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -16,7 +16,7 @@
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg73-3-3-1 {
+._1mr4xg73-3-3-2 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -24,17 +24,17 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1mr4xg74-3-3-1 {
+._1mr4xg74-3-3-2 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg75-3-3-1 {
+._1mr4xg75-3-3-2 {
   position: relative;
   width: var(--dt-spacings-size-16, 16px);
   height: 100%;
   flex-shrink: 0;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg76-3-3-1 {
+._1mr4xg76-3-3-2 {
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -49,47 +49,47 @@
   translate: calc(0px - var(--dt-spacings-size-16, 16px) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1mr4xg76-3-3-1:hover, ._1mr4xg76-3-3-1:focus, ._1mr4xg75-3-3-1:hover ._1mr4xg76-3-3-1 {
+._1mr4xg76-3-3-2:hover, ._1mr4xg76-3-3-2:focus, ._1mr4xg75-3-3-2:hover ._1mr4xg76-3-3-2 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   translate: calc(0px - var(--dt-spacings-size-16, 16px) / 2);
 }
-._1mr4xg77-3-3-1 {
+._1mr4xg77-3-3-2 {
   box-sizing: border-box;
   padding: 0;
 }
-._1mr4xg78-3-3-1 {
+._1mr4xg78-3-3-2 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
   height: 100%;
 }
-._1mr4xg79-3-3-1 {
+._1mr4xg79-3-3-2 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);
   padding-top: var(--dt-spacings-size-8, 8px);
 }
-._1mr4xg7b-3-3-1 {
-  --_1mr4xg7a-3-3-1: 24px;
+._1mr4xg7b-3-3-2 {
+  --_1mr4xg7a-3-3-2: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: -2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7c-3-3-1 {
-  --_1mr4xg7a-3-3-1: 24px;
+._1mr4xg7c-3-3-2 {
+  --_1mr4xg7a-3-3-2: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: 2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7d-3-3-1 {
-  width: var(--_1mr4xg7a-3-3-1);
-  height: var(--_1mr4xg7a-3-3-1);
+._1mr4xg7d-3-3-2 {
+  width: var(--_1mr4xg7a-3-3-2);
+  height: var(--_1mr4xg7a-3-3-2);
   box-sizing: border-box;
 }
-._1mr4xg7e-3-3-1 {
+._1mr4xg7e-3-3-2 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -97,20 +97,20 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1mr4xg7e-3-3-1:hover {
+._1mr4xg7e-3-3-2:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1mr4xg7e-3-3-1:focus {
+._1mr4xg7e-3-3-2:focus {
   opacity: 1;
 }
-._1mr4xg72-3-3-1:hover ~ ._1mr4xg74-3-3-1 ._1mr4xg7e-3-3-1, ._1mr4xg74-3-3-1:hover ._1mr4xg7e-3-3-1 {
+._1mr4xg72-3-3-2:hover ~ ._1mr4xg74-3-3-2 ._1mr4xg7e-3-3-2, ._1mr4xg74-3-3-2:hover ._1mr4xg7e-3-3-2 {
   opacity: 1;
 }
-._1mr4xg7f-3-3-1 {
+._1mr4xg7f-3-3-2 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg7f-3-3-1:hover {
+._1mr4xg7f-3-3-2:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js

@@ -1,19 +1,19 @@
 import "../../../core/styles/focusRingStatic.css";
 import "./SidebarLayout.css";
-var collapseButton = "_1mr4xg7e-3-3-1 _1mr4xg7d-3-3-1";
-var collapseButtonContainer = "_1mr4xg7b-3-3-1";
-var collapsedSidebar = "_1mr4xg75-3-3-1";
-var collapsedSidebarWrapper = "_1mr4xg71-3-3-1";
-var content = "_1mr4xg73-3-3-1";
-var drawer = "_1mr4xg77-3-3-1";
-var drawerContent = "_1mr4xg78-3-3-1";
-var drawerHeader = "_1mr4xg79-3-3-1";
-var expandButton = "_1mr4xg7f-3-3-1 _1mr4xg7d-3-3-1";
-var expandButtonContainer = "_1mr4xg7c-3-3-1";
-var hint = "_1mr4xg76-3-3-1 _z0fq9b4-3-3-1 _z0fq9bc-3-3-1 _z0fq9b6-3-3-1 _z0fq9bb-3-3-1";
-var layoutRoot = "_1mr4xg70-3-3-1";
-var panel = "_1mr4xg72-3-3-1";
-var resizeHandle = "_1mr4xg74-3-3-1";
+var collapseButton = "_1mr4xg7e-3-3-2 _1mr4xg7d-3-3-2";
+var collapseButtonContainer = "_1mr4xg7b-3-3-2";
+var collapsedSidebar = "_1mr4xg75-3-3-2";
+var collapsedSidebarWrapper = "_1mr4xg71-3-3-2";
+var content = "_1mr4xg73-3-3-2";
+var drawer = "_1mr4xg77-3-3-2";
+var drawerContent = "_1mr4xg78-3-3-2";
+var drawerHeader = "_1mr4xg79-3-3-2";
+var expandButton = "_1mr4xg7f-3-3-2 _1mr4xg7d-3-3-2";
+var expandButtonContainer = "_1mr4xg7c-3-3-2";
+var hint = "_1mr4xg76-3-3-2 _z0fq9b4-3-3-2 _z0fq9bc-3-3-2 _z0fq9b6-3-3-2 _z0fq9bb-3-3-2";
+var layoutRoot = "_1mr4xg70-3-3-2";
+var panel = "_1mr4xg72-3-3-2";
+var resizeHandle = "_1mr4xg74-3-3-2";
 export {
   collapseButton,
   collapseButtonContainer,

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7e-3-3-1 _1mr4xg7d-3-3-1';\nexport var collapseButtonContainer = '_1mr4xg7b-3-3-1';\nexport var collapsedSidebar = '_1mr4xg75-3-3-1';\nexport var collapsedSidebarWrapper = '_1mr4xg71-3-3-1';\nexport var content = '_1mr4xg73-3-3-1';\nexport var drawer = '_1mr4xg77-3-3-1';\nexport var drawerContent = '_1mr4xg78-3-3-1';\nexport var drawerHeader = '_1mr4xg79-3-3-1';\nexport var expandButton = '_1mr4xg7f-3-3-1 _1mr4xg7d-3-3-1';\nexport var expandButtonContainer = '_1mr4xg7c-3-3-1';\nexport var hint = '_1mr4xg76-3-3-1 _z0fq9b4-3-3-1 _z0fq9bc-3-3-1 _z0fq9b6-3-3-1 _z0fq9bb-3-3-1';\nexport var layoutRoot = '_1mr4xg70-3-3-1';\nexport var panel = '_1mr4xg72-3-3-1';\nexport var resizeHandle = '_1mr4xg74-3-3-1';"],
+  "sourcesContent": ["import '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7e-3-3-2 _1mr4xg7d-3-3-2';\nexport var collapseButtonContainer = '_1mr4xg7b-3-3-2';\nexport var collapsedSidebar = '_1mr4xg75-3-3-2';\nexport var collapsedSidebarWrapper = '_1mr4xg71-3-3-2';\nexport var content = '_1mr4xg73-3-3-2';\nexport var drawer = '_1mr4xg77-3-3-2';\nexport var drawerContent = '_1mr4xg78-3-3-2';\nexport var drawerHeader = '_1mr4xg79-3-3-2';\nexport var expandButton = '_1mr4xg7f-3-3-2 _1mr4xg7d-3-3-2';\nexport var expandButtonContainer = '_1mr4xg7c-3-3-2';\nexport var hint = '_1mr4xg76-3-3-2 _z0fq9b4-3-3-2 _z0fq9bc-3-3-2 _z0fq9b6-3-3-2 _z0fq9bb-3-3-2';\nexport var layoutRoot = '_1mr4xg70-3-3-2';\nexport var panel = '_1mr4xg72-3-3-2';\nexport var resizeHandle = '_1mr4xg74-3-3-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,0BAA0B;AAC9B,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/split-layout/SplitLayout.css

@@ -1,11 +1,11 @@
-._6q8dk20-3-3-1 {
+._6q8dk20-3-3-2 {
   height: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
   position: relative;
 }
-._6q8dk21-3-3-1 {
+._6q8dk21-3-3-2 {
   box-sizing: border-box;
   height: 100%;
   top: 0;
@@ -13,31 +13,31 @@
   flex-shrink: 0;
   overflow-y: auto;
 }
-._6q8dk22-3-3-1 {
+._6q8dk22-3-3-2 {
   flex: 0 0 auto;
 }
-._6q8dk23-3-3-1 {
+._6q8dk23-3-3-2 {
   flex: 1 1 0;
   contain: layout paint;
 }
-._6q8dk24-3-3-1 {
+._6q8dk24-3-3-2 {
   width: var(--dt-spacings-size-8, 8px);
   align-items: center;
   display: flex;
   justify-content: center;
   overflow-y: visible;
 }
-._6q8dk25-3-3-1 {
+._6q8dk25-3-3-2 {
   inset: 0;
   overflow: visible;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
-._6q8dk25-3-3-1 > * {
+._6q8dk25-3-3-2 > * {
   pointer-events: auto;
 }
-._6q8dk26-3-3-1 {
+._6q8dk26-3-3-2 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
@@ -51,17 +51,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._6q8dk26-3-3-1:focus-visible {
+._6q8dk26-3-3-2:focus-visible {
   width: 100%;
 }
-._6q8dk26-3-3-1:hover._6q8dk26-3-3-1:focus-visible {
+._6q8dk26-3-3-2:hover._6q8dk26-3-3-2:focus-visible {
   width: 2px;
 }
-._6q8dk26-3-3-1:focus-visible, ._6q8dk26-3-3-1:hover {
+._6q8dk26-3-3-2:focus-visible, ._6q8dk26-3-3-2:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._6q8dk26-3-3-1:after {
+._6q8dk26-3-3-2:after {
   content: "";
   display: block;
   height: 100%;

package/esm/layouts/split-layout/SplitLayout.sty.js

@@ -1,11 +1,11 @@
 import "./SplitLayout.css";
-var column = "_6q8dk21-3-3-1";
-var contentShellContainer = "_6q8dk23-3-3-1 _6q8dk21-3-3-1";
-var handle = "_6q8dk26-3-3-1";
-var handleColumn = "_6q8dk24-3-3-1 _6q8dk21-3-3-1";
-var handleDecorations = "_6q8dk25-3-3-1";
-var layout = "_6q8dk20-3-3-1";
-var panelShellContainer = "_6q8dk22-3-3-1 _6q8dk21-3-3-1";
+var column = "_6q8dk21-3-3-2";
+var contentShellContainer = "_6q8dk23-3-3-2 _6q8dk21-3-3-2";
+var handle = "_6q8dk26-3-3-2";
+var handleColumn = "_6q8dk24-3-3-2 _6q8dk21-3-3-2";
+var handleDecorations = "_6q8dk25-3-3-2";
+var layout = "_6q8dk20-3-3-2";
+var panelShellContainer = "_6q8dk22-3-3-2 _6q8dk21-3-3-2";
 export {
   column,
   contentShellContainer,

package/esm/layouts/split-layout/SplitLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/SplitLayout.css.ts"],
-  "sourcesContent": ["import './SplitLayout.css';\nexport var column = '_6q8dk21-3-3-1';\nexport var contentShellContainer = '_6q8dk23-3-3-1 _6q8dk21-3-3-1';\nexport var handle = '_6q8dk26-3-3-1';\nexport var handleColumn = '_6q8dk24-3-3-1 _6q8dk21-3-3-1';\nexport var handleDecorations = '_6q8dk25-3-3-1';\nexport var layout = '_6q8dk20-3-3-1';\nexport var panelShellContainer = '_6q8dk22-3-3-1 _6q8dk21-3-3-1';"],
+  "sourcesContent": ["import './SplitLayout.css';\nexport var column = '_6q8dk21-3-3-2';\nexport var contentShellContainer = '_6q8dk23-3-3-2 _6q8dk21-3-3-2';\nexport var handle = '_6q8dk26-3-3-2';\nexport var handleColumn = '_6q8dk24-3-3-2 _6q8dk21-3-3-2';\nexport var handleDecorations = '_6q8dk25-3-3-2';\nexport var layout = '_6q8dk20-3-3-2';\nexport var panelShellContainer = '_6q8dk22-3-3-2 _6q8dk21-3-3-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,wBAAwB;AAC5B,IAAI,SAAS;AACb,IAAI,eAAe;AACnB,IAAI,oBAAoB;AACxB,IAAI,SAAS;AACb,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/surface/Surface.css

@@ -1,86 +1,86 @@
-._1qto6jt6-3-3-1 {
-  --_1igzksy0-3-3-1: var(--dt-borders-radius-surface-default, 12px);
+._1qto6jt6-3-3-2 {
+  --_1igzksy0-3-3-2: var(--dt-borders-radius-surface-default, 12px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-align: left;
   border: none;
   outline: none;
   position: relative;
   background-color: var(--dt-colors-background-surface-default, #fff);
-  border-radius: var(--_1igzksy0-3-3-1);
+  border-radius: var(--_1igzksy0-3-3-2);
 }
-._1qto6jt6-3-3-1::before, ._1qto6jt6-3-3-1::after {
+._1qto6jt6-3-3-2::before, ._1qto6jt6-3-3-2::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-3-1);
+  border-radius: var(--_1igzksy0-3-3-2);
   pointer-events: none;
 }
-._1qto6jt6-3-3-1::after {
+._1qto6jt6-3-3-2::after {
   outline-offset: 2px;
-  outline: 2px solid var(--_17bwkb02-3-3-1);
-  opacity: var(--_1qto6jt4-3-3-1);
-  transition: var(--_1qto6jt5-3-3-1);
+  outline: 2px solid var(--_17bwkb02-3-3-2);
+  opacity: var(--_1qto6jt4-3-3-2);
+  transition: var(--_1qto6jt5-3-3-2);
 }
-._1qto6jt7-3-3-1 {
-  --_1qto6jt4-3-3-1: 1;
-  --_1qto6jt5-3-3-1: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
+._1qto6jt7-3-3-2 {
+  --_1qto6jt4-3-3-2: 1;
+  --_1qto6jt5-3-3-2: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt8-3-3-1 {
-  --_1qto6jt4-3-3-1: 0;
-  --_1qto6jt5-3-3-1: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
+._1qto6jt8-3-3-2 {
+  --_1qto6jt4-3-3-2: 0;
+  --_1qto6jt5-3-3-2: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
 }
-._1qto6jt9-3-3-1 {
-  --_1qto6jt1-3-3-1: 0;
-  --_1qto6jt2-3-3-1: pointer;
-  --_1qto6jt3-3-3-1: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jt9-3-3-2 {
+  --_1qto6jt1-3-3-2: 0;
+  --_1qto6jt2-3-3-2: pointer;
+  --_1qto6jt3-3-3-2: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-3-1);
+  border-radius: var(--_1igzksy0-3-3-2);
   pointer-events: none;
 }
-._1qto6jt9-3-3-1::after,._1qto6jt9-3-3-1::before {
+._1qto6jt9-3-3-2::after,._1qto6jt9-3-3-2::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-3-1);
+  border-radius: var(--_1igzksy0-3-3-2);
   pointer-events: none;
   transition: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt9-3-3-1::after {
-  box-shadow: var(--_1qto6jt0-3-3-1);
-  opacity: var(--_1qto6jt1-3-3-1);
+._1qto6jt9-3-3-2::after {
+  box-shadow: var(--_1qto6jt0-3-3-2);
+  opacity: var(--_1qto6jt1-3-3-2);
 }
-._1qto6jt9-3-3-1::before {
-  box-shadow: var(--_1qto6jt3-3-3-1);
+._1qto6jt9-3-3-2::before {
+  box-shadow: var(--_1qto6jt3-3-3-2);
   opacity: 0;
 }
-._1qto6jta-3-3-1 {
-  --_1qto6jt0-3-3-1: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-3-1: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jta-3-3-2 {
+  --_1qto6jt0-3-3-2: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-3-2: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d);
 }
-._1qto6jtb-3-3-1 {
-  --_1qto6jt0-3-3-1: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-3-1: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+._1qto6jtb-3-3-2 {
+  --_1qto6jt0-3-3-2: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-3-2: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   box-shadow: var(--dt-box-shadows-surface-raised-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
 }
-._1qto6jtc-3-3-1 {
-  --_1qto6jt0-3-3-1: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-3-1: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+._1qto6jtc-3-3-2 {
+  --_1qto6jt0-3-3-2: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-3-2: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1qto6jtd-3-3-1 {
-  --_1qto6jt1-3-3-1: 1;
-  --_1qto6jt2-3-3-1: grab;
+._1qto6jtd-3-3-2 {
+  --_1qto6jt1-3-3-2: 1;
+  --_1qto6jt2-3-3-2: grab;
 }
 button.strato-surface:not(:disabled), a.strato-surface:not(:disabled) {
   cursor: pointer;

package/esm/layouts/surface/Surface.sty.js

@@ -1,8 +1,8 @@
 import "../../styles/colorUtils.css";
 import "./Surface.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-3-1", variantClassNames: { elevation: { flat: "_1qto6jta-3-3-1", raised: "_1qto6jtb-3-3-1", floating: "_1qto6jtc-3-3-1" }, dragged: { true: "_1qto6jtd-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
-var surface = _7a468({ defaultClassName: "_1qto6jt6-3-3-1", variantClassNames: { selected: { true: "_1qto6jt7-3-3-1", false: "_1qto6jt8-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
+var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-3-2", variantClassNames: { elevation: { flat: "_1qto6jta-3-3-2", raised: "_1qto6jtb-3-3-2", floating: "_1qto6jtc-3-3-2" }, dragged: { true: "_1qto6jtd-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
+var surface = _7a468({ defaultClassName: "_1qto6jt6-3-3-2", variantClassNames: { selected: { true: "_1qto6jt7-3-3-2", false: "_1qto6jt8-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   pseudoElement,
   surface

package/esm/layouts/surface/Surface.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/Surface.css.ts"],
-  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-3-1',variantClassNames:{elevation:{flat:'_1qto6jta-3-3-1',raised:'_1qto6jtb-3-3-1',floating:'_1qto6jtc-3-3-1'},dragged:{true:'_1qto6jtd-3-3-1'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-3-1',variantClassNames:{selected:{true:'_1qto6jt7-3-3-1',false:'_1qto6jt8-3-3-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-3-2',variantClassNames:{elevation:{flat:'_1qto6jta-3-3-2',raised:'_1qto6jtb-3-3-2',floating:'_1qto6jtc-3-3-2'},dragged:{true:'_1qto6jtd-3-3-2'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-3-2',variantClassNames:{selected:{true:'_1qto6jt7-3-3-2',false:'_1qto6jt8-3-3-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,QAAO,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClP,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/surface/variables.sty.js

@@ -1,4 +1,4 @@
-var surfaceBorderRadius = "var(--_1igzksy0-3-3-1)";
+var surfaceBorderRadius = "var(--_1igzksy0-3-3-2)";
 export {
   surfaceBorderRadius
 };

package/esm/layouts/surface/variables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/variables.css.ts"],
-  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-3-1)';"],
+  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-3-2)';"],
   "mappings": "AAAO,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/title-bar/TitleBar.css

@@ -1,21 +1,21 @@
-._wcwjv20-3-3-1 {
+._wcwjv20-3-3-2 {
   flex-grow: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._wcwjv21-3-3-1 {
+._wcwjv21-3-3-2 {
   width: clamp(400px, 400px, 100%);
 }
-._wcwjv22-3-3-1 {
+._wcwjv22-3-3-2 {
   flex-grow: 1;
   align-self: center;
   min-width: 0;
 }
-._wcwjv23-3-3-1 {
+._wcwjv23-3-3-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._wcwjv24-3-3-1 {
+._wcwjv24-3-3-2 {
   max-width: 100%;
 }

package/esm/layouts/title-bar/TitleBar.sty.js

@@ -1,10 +1,10 @@
 import "../../styles/textStyle.css";
 import "./TitleBar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var navigationWrapperCSS = "_wcwjv22-3-3-1";
-var subtitleCSS = "_wcwjv23-3-3-1 _da9a8v0-3-3-1 _da9a8v2-3-3-1 _da9a8v3-3-3-1 _da9a8vb-3-3-1";
-var suffixWrapperCSS = "_wcwjv24-3-3-1";
-var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-3-1", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-3-2";
+var subtitleCSS = "_wcwjv23-3-3-2 _da9a8v0-3-3-2 _da9a8v2-3-3-2 _da9a8v3-3-3-2 _da9a8vb-3-3-2";
+var suffixWrapperCSS = "_wcwjv24-3-3-2";
+var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-3-2", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-3-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   navigationWrapperCSS,
   subtitleCSS,

package/esm/layouts/title-bar/TitleBar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/TitleBar.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-3-1';\nexport var subtitleCSS = '_wcwjv23-3-3-1 _da9a8v0-3-3-1 _da9a8v2-3-3-1 _da9a8v3-3-3-1 _da9a8vb-3-3-1';\nexport var suffixWrapperCSS = '_wcwjv24-3-3-1';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-3-1',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-3-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-3-2';\nexport var subtitleCSS = '_wcwjv23-3-3-2 _da9a8v0-3-3-2 _da9a8v2-3-3-2 _da9a8v3-3-3-2 _da9a8vb-3-3-2';\nexport var suffixWrapperCSS = '_wcwjv24-3-3-2';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-3-2',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-3-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,iBAAgB,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-3-1 {
+._hw98ku0-3-3-2 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-3-1 {
+._hw98ku1-3-3-2 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-3-1 {
+._hw98ku2-3-3-2 {
   overflow: hidden;
 }
-._hw98ku3-3-3-1 {
+._hw98ku3-3-3-2 {
   overflow: visible;
 }
-._hw98ku4-3-3-1 {
+._hw98ku4-3-3-2 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-3-1 {
+._hw98ku5-3-3-2 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-3-1 {
+._hw98ku6-3-3-2 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-3-1 {
+._hw98ku7-3-3-2 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-3-1 {
+._hw98ku8-3-3-2 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);