@dynatrace/strato-components 3.1.3 → 3.2.1

package/esm/navigation/menu/Menu.sty.js

@@ -1,13 +1,13 @@
 import "./Menu.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var content = "_1m01arl3-3-1-3";
-var group = "_1m01arl4-3-1-3";
-var item = _7a468({ defaultClassName: "_1m01arl5-3-1-3", variantClassNames: { disabled: { true: "_1m01arl6-3-1-3", false: "_1m01arl7-3-1-3" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-1-3";
-var label = "_1m01arl2-3-1-3";
-var subChildren = "_1m01arl9-3-1-3";
-var tooltip = "_1m01arl0-3-1-3";
-var tooltipWrapper = "_1m01arl1-3-1-3";
+var content = "_1m01arl3-3-2-1";
+var group = "_1m01arl4-3-2-1";
+var item = _7a468({ defaultClassName: "_1m01arl5-3-2-1", variantClassNames: { disabled: { true: "_1m01arl6-3-2-1", false: "_1m01arl7-3-2-1" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl8-3-2-1";
+var label = "_1m01arl2-3-2-1";
+var subChildren = "_1m01arl9-3-2-1";
+var tooltip = "_1m01arl0-3-2-1";
+var tooltipWrapper = "_1m01arl1-3-2-1";
 export {
   content,
   group,

package/esm/navigation/menu/Menu.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.css.ts"],
-  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-1-3';\nexport var group = '_1m01arl4-3-1-3';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-1-3',variantClassNames:{disabled:{true:'_1m01arl6-3-1-3',false:'_1m01arl7-3-1-3'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-1-3';\nexport var label = '_1m01arl2-3-1-3';\nexport var subChildren = '_1m01arl9-3-1-3';\nexport var tooltip = '_1m01arl0-3-1-3';\nexport var tooltipWrapper = '_1m01arl1-3-1-3';"],
+  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-2-1';\nexport var group = '_1m01arl4-3-2-1';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-2-1',variantClassNames:{disabled:{true:'_1m01arl6-3-2-1',false:'_1m01arl7-3-2-1'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-2-1';\nexport var label = '_1m01arl2-3-2-1';\nexport var subChildren = '_1m01arl9-3-2-1';\nexport var tooltip = '_1m01arl0-3-2-1';\nexport var tooltipWrapper = '_1m01arl1-3-2-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzL,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-1-3 {
+._39c1kf0-3-2-1 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
   background-color: inherit;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -11,7 +11,7 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._39c1kf0-3-1-3::after {
+._39c1kf0-3-2-1::after {
   content: " ";
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
@@ -23,46 +23,46 @@
   padding-top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
 }
-._39c1kf1-3-1-3 {
+._39c1kf1-3-2-1 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-1-3 {
+._39c1kf2-3-2-1 {
   cursor: pointer;
 }
-._39c1kf2-3-1-3:hover {
+._39c1kf2-3-2-1:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-1-3:active {
+._39c1kf2-3-2-1:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-1-3 {
+._39c1kf5-3-2-1 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-1-3:hover {
+._39c1kf5-3-2-1:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-1-3:active {
+._39c1kf5-3-2-1:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-1-3::after {
+._39c1kf5-3-2-1::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-1-3 {
+._39c1kf6-3-2-1 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-1-3 {
+._39c1kf7-3-2-1 {
   cursor: not-allowed;
 }
-._39c1kf0-3-1-3 .text-content {
+._39c1kf0-3-2-1 .text-content {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   white-space: nowrap;
   overflow: hidden;
@@ -71,6 +71,6 @@
   justify-content: center;
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._39c1kf0-3-1-3 svg + .text-content {
+._39c1kf0-3-2-1 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

package/esm/navigation/tabs/RenderTab.sty.js

@@ -1,8 +1,8 @@
 import "./RenderTab.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabledTabWrapperCSS = "_39c1kf7-3-1-3";
-var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-1-3", variantClassNames: { disabled: { true: "_39c1kf1-3-1-3", false: "_39c1kf2-3-1-3" }, selected: { true: "_39c1kf3-3-1-3", false: "_39c1kf4-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-1-3"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-1-3";
+var disabledTabWrapperCSS = "_39c1kf7-3-2-1";
+var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-2-1", variantClassNames: { disabled: { true: "_39c1kf1-3-2-1", false: "_39c1kf2-3-2-1" }, selected: { true: "_39c1kf3-3-2-1", false: "_39c1kf4-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-2-1"]] });
+var tabContentWrapperCSS = "_39c1kf6-3-2-1";
 export {
   disabledTabWrapperCSS,
   tabButtonCSS,

package/esm/navigation/tabs/RenderTab.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/RenderTab.css.ts"],
-  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-1-3';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-1-3',variantClassNames:{disabled:{true:'_39c1kf1-3-1-3',false:'_39c1kf2-3-1-3'},selected:{true:'_39c1kf3-3-1-3',false:'_39c1kf4-3-1-3'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-1-3']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-1-3';"],
+  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-2-1';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-2-1',variantClassNames:{disabled:{true:'_39c1kf1-3-2-1',false:'_39c1kf2-3-2-1'},selected:{true:'_39c1kf3-3-2-1',false:'_39c1kf4-3-2-1'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-2-1']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-2-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACzR,IAAI,uBAAuB;",
   "names": []
 }

package/esm/navigation/tabs/TabPanel.css

@@ -1,12 +1,12 @@
-._b4irt10-3-1-3 {
+._b4irt10-3-2-1 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-1-3 {
+._b4irt11-3-2-1 {
   overflow: hidden;
 }
-._b4irt12-3-1-3 {
+._b4irt12-3-2-1 {
   overflow-y: auto;
 }

package/esm/navigation/tabs/TabPanel.sty.js

@@ -1,6 +1,6 @@
 import "./TabPanel.css";
-var tabPanelCSS = "_b4irt10-3-1-3";
-var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-1-3", "scroll-y": "_b4irt12-3-1-3" };
+var tabPanelCSS = "_b4irt10-3-2-1";
+var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-2-1", "scroll-y": "_b4irt12-3-2-1" };
 export {
   tabPanelCSS,
   tabPanelOverflowBehaviorCSS

package/esm/navigation/tabs/TabPanel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/TabPanel.css.ts"],
-  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-1-3';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-1-3','scroll-y':'_b4irt12-3-1-3'};"],
+  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-2-1';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-2-1','scroll-y':'_b4irt12-3-2-1'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;AAClB,IAAI,8BAA8B,EAAC,QAAO,kBAAiB,YAAW,iBAAgB;",
   "names": []
 }

package/esm/navigation/tabs/Tabs.css

@@ -1,9 +1,9 @@
-._1tfbrxp0-3-1-3 {
+._1tfbrxp0-3-2-1 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-1-3 {
+._1tfbrxp1-3-2-1 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
@@ -14,29 +14,29 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._1tfbrxp1-3-1-3::-webkit-scrollbar {
+._1tfbrxp1-3-2-1::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-1-3 {
+._1tfbrxp2-3-2-1 {
   -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;
 }
-._1tfbrxp3-3-1-3 {
+._1tfbrxp3-3-2-1 {
   -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;
 }
-._1tfbrxp4-3-1-3 {
+._1tfbrxp4-3-2-1 {
   -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;
 }
-._1tfbrxp5-3-1-3 {
+._1tfbrxp5-3-2-1 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-1-3:after {
+._1tfbrxp5-3-2-1:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-1-3 {
+._1tfbrxp6-3-2-1 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);

package/esm/navigation/tabs/Tabs.sty.js

@@ -1,9 +1,9 @@
 import "./Tabs.css";
-var tabsArrowButtonCSS = "_1tfbrxp6-3-1-3";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-1-3";
-var tabsCSS = "_1tfbrxp0-3-1-3";
-var tabsWrapperCSS = "_1tfbrxp1-3-1-3";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-1-3", right: "_1tfbrxp3-3-1-3", both: "_1tfbrxp4-3-1-3" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-2-1";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-2-1";
+var tabsCSS = "_1tfbrxp0-3-2-1";
+var tabsWrapperCSS = "_1tfbrxp1-3-2-1";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-2-1", right: "_1tfbrxp3-3-2-1", both: "_1tfbrxp4-3-2-1" };
 export {
   tabsArrowButtonCSS,
   tabsArrowWrapperCSS,

package/esm/navigation/tabs/Tabs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/Tabs.css.ts"],
-  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-1-3';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-1-3';\nexport var tabsCSS = '_1tfbrxp0-3-1-3';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-1-3';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-1-3',right:'_1tfbrxp3-3-1-3',both:'_1tfbrxp4-3-1-3'};"],
+  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-2-1';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-2-1';\nexport var tabsCSS = '_1tfbrxp0-3-2-1';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-2-1';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-2-1',right:'_1tfbrxp3-3-2-1',both:'_1tfbrxp4-3-2-1'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,sBAAsB;AAC1B,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,yBAAyB,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,MAAK,kBAAiB;",
   "names": []
 }

package/esm/notifications/notification-settings/NotificationSettings.css

@@ -1,3 +1,3 @@
-._1cohdty0-3-1-3 {
+._1cohdty0-3-2-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/esm/notifications/notification-settings/NotificationSettings.sty.js

@@ -1,5 +1,5 @@
 import "./NotificationSettings.css";
-var overlayText = "_1cohdty0-3-1-3";
+var overlayText = "_1cohdty0-3-2-1";
 export {
   overlayText
 };

package/esm/notifications/notification-settings/NotificationSettings.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/notification-settings/NotificationSettings.css.ts"],
-  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-1-3';"],
+  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/notifications/toast/Toast.css

@@ -1,8 +1,8 @@
-._yjszxq0-3-1-3 {
+._yjszxq0-3-2-1 {
   display: flex;
   overflow: hidden;
 }
-._yjszxq1-3-1-3 {
+._yjszxq1-3-2-1 {
   display: flex;
   border: 0;
   border-radius: 0;
@@ -11,14 +11,14 @@
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._yjszxq2-3-1-3 {
+._yjszxq2-3-2-1 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._yjszxq3-3-1-3 {
+._yjszxq3-3-2-1 {
   max-width: 100%;
 }
-._yjszxq3-3-1-3._yjszxq3-3-1-3 {
+._yjszxq3-3-2-1._yjszxq3-3-2-1 {
   overflow-wrap: anywhere;
 }

package/esm/notifications/toast/Toast.sty.js

@@ -1,8 +1,8 @@
 import "./Toast.css";
-var toastCSS = "_yjszxq0-3-1-3";
-var toastFlexContainerCSS = "_yjszxq2-3-1-3";
-var toastIconCSS = "_yjszxq1-3-1-3";
-var toastTextCSS = "_yjszxq3-3-1-3";
+var toastCSS = "_yjszxq0-3-2-1";
+var toastFlexContainerCSS = "_yjszxq2-3-2-1";
+var toastIconCSS = "_yjszxq1-3-2-1";
+var toastTextCSS = "_yjszxq3-3-2-1";
 export {
   toastCSS,
   toastFlexContainerCSS,

package/esm/notifications/toast/Toast.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/Toast.css.ts"],
-  "sourcesContent": ["import './Toast.css';\nexport var toastCSS = '_yjszxq0-3-1-3';\nexport var toastFlexContainerCSS = '_yjszxq2-3-1-3';\nexport var toastIconCSS = '_yjszxq1-3-1-3';\nexport var toastTextCSS = '_yjszxq3-3-1-3';"],
+  "sourcesContent": ["import './Toast.css';\nexport var toastCSS = '_yjszxq0-3-2-1';\nexport var toastFlexContainerCSS = '_yjszxq2-3-2-1';\nexport var toastIconCSS = '_yjszxq1-3-2-1';\nexport var toastTextCSS = '_yjszxq3-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,eAAe;",
   "names": []
 }

package/esm/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-1-3 {
+@keyframes _rxr5810-3-2-1 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-1-3 {
+@keyframes _rxr5811-3-2-1 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-1-3 {
+@keyframes _rxr5812-3-2-1 {
   0% {
     transform: scaleX(1);
   }
@@ -22,7 +22,7 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-1-3 {
+._rxr5813-3-2-1 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
@@ -100,16 +100,16 @@
   opacity: 0;
 }
 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-1-3 1 forwards;
+  animation: _rxr5812-3-2-1 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-1-3;
+  animation-name: _rxr5810-3-2-1;
   animation-duration: var(--dt-animations-slide-in-duration-fast, 200ms);
   animation-timing-function: var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
   animation-fill-mode: both;
 }
 .strato__toast__exit {
-  animation-name: _rxr5811-3-1-3;
+  animation-name: _rxr5811-3-2-1;
   animation-duration: var(--dt-animations-slide-out-duration-fast, 150ms);
   animation-timing-function: var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
   animation-fill-mode: both;

package/esm/notifications/toast/ToastContainer.js

@@ -84,6 +84,7 @@ const ToastContainer = forwardRef(
               ref: closeButtonRef,
               variant: "default",
               onPointerDown: (e) => e.stopPropagation(),
+              "data-dt-name": "CloseToast",
               children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
             }
           )

package/esm/notifications/toast/ToastContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/ToastContainer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport {\n  ToastContainer as ReactToastifyContainer,\n  cssTransition,\n  toast,\n} from 'react-toastify';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { toastsCSS } from './ToastContainer.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStore } from '../../core/store/store.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\n\nconst COMPONENT_NAME = 'ToastContainer';\n\ntype ToastContainerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps;\n\nlet unique = 0;\n\nconst toastContainerStore = createStore<{ currentContainerId: number | null }>({\n  currentContainerId: null,\n});\n\n/**\n * Use Toast to show users live, time-sensitive messages about system status changes. Toast variants for four different kinds of messages are provided.\n * @public\n */\nexport const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(\n  (props, forwardedRef) => {\n    const {\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const [handleFocusOnKeydown, closedOnKeydown] = useKeyboardFocusHandling(\n      closeButtonRef,\n      containerRef,\n    );\n\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const CloseButton = ({\n      closeToast,\n    }: {\n      closeToast: (event: ReactMouseEvent<HTMLElement>) => void;\n    }) => {\n      const intl = useIntl();\n\n      const closeButtonLabel = intl.formatMessage({\n        defaultMessage: 'Close notification',\n        id: '7IzOa/lx4Dc/qLGo',\n        description: 'Aria-label for the close notification button.',\n      });\n\n      // Handle the escape key\n      const closeToastOnEsc = (event: ReactKeyboardEvent) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          closedOnKeydown.current = true;\n          // Limited typing on the end of the react-toastify library\n          // requires a `React.MouseEvent` here, but they never actually\n          // use anything very specific to the MouseEvent.\n          closeToast(event as unknown as ReactMouseEvent<HTMLElement>);\n        }\n      };\n\n      /** Only when the toast is closed by the keyboard we need to handle the focus */\n      const detectCloseOnKeyDown = useCallback(() => {\n        closedOnKeydown.current = true;\n      }, []);\n\n      return (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          paddingTop={6}\n          paddingRight={6}\n          onKeyDown={closeToastOnEsc}\n        >\n          <Button\n            onKeyDown={detectCloseOnKeyDown}\n            onClick={closeToast}\n            aria-label={closeButtonLabel}\n            ref={closeButtonRef}\n            variant=\"default\"\n            onPointerDown={(e: ReactMouseEvent) => e.stopPropagation()}\n          >\n            <Button.Prefix>\n              <XmarkIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      );\n    };\n\n    const containerId = useRef(++unique);\n\n    const activeId = useSyncExternalStoreWithSelector(\n      toastContainerStore.subscribe,\n      () => toastContainerStore.getState(),\n      null,\n      (state) => state.currentContainerId,\n    );\n\n    useEffect(() => {\n      const id = containerId.current;\n      if (toastContainerStore.getState().currentContainerId === null) {\n        toastContainerStore.setState({ currentContainerId: id });\n      }\n    }, [activeId]);\n\n    useEffect(() => {\n      const id = containerId.current;\n      const unsubscribeOnChange = toast.onChange((payload) => {\n        if (payload.status === 'removed') {\n          // Need to wait for one tick here, otherwise the now removed toast is still\n          // in the DOM and can be focused.\n          window.requestAnimationFrame(() => {\n            handleFocusOnKeydown();\n          });\n        }\n      });\n\n      return function cleanup() {\n        unsubscribeOnChange();\n\n        if (toastContainerStore.getState().currentContainerId === id) {\n          toastContainerStore.setState({ currentContainerId: null });\n        }\n      };\n      // excluded handleFocusOnKeydown dependency, because this effect needs to be executed once for toast.onChange\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    if (activeId !== containerId.current) {\n      return null;\n    }\n\n    return createPortal(\n      <div\n        ref={rootRef}\n        className={clsx(consumerClassName, toastsCSS)}\n        style={consumerStyle}\n        // This data attribute is necessary to ensure the correct stacking order with the Microguide and FeatureHighlight.\n        data-toast-container\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...remainingAriaLabelingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactToastifyContainer\n          hideProgressBar={true}\n          draggable={false}\n          closeButton={CloseButton}\n          limit={5}\n          pauseOnHover={true}\n          closeOnClick={false}\n          newestOnTop={false}\n          // Have the default if not provided (\"Notifications Alt+T\") or custom.\n          {...(ariaLabel && { 'aria-label': ariaLabel })}\n          transition={cssTransition({\n            collapseDuration: 200,\n            enter: 'strato__toast__enter',\n            exit: 'strato__toast__exit',\n          })}\n        />\n      </div>,\n      document.body,\n    );\n  },\n);\n\n(\n  ToastContainer as typeof ToastContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport {\n  ToastContainer as ReactToastifyContainer,\n  cssTransition,\n  toast,\n} from 'react-toastify';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { toastsCSS } from './ToastContainer.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStore } from '../../core/store/store.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\n\nconst COMPONENT_NAME = 'ToastContainer';\n\ntype ToastContainerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps;\n\nlet unique = 0;\n\nconst toastContainerStore = createStore<{ currentContainerId: number | null }>({\n  currentContainerId: null,\n});\n\n/**\n * Use Toast to show users live, time-sensitive messages about system status changes. Toast variants for four different kinds of messages are provided.\n * @public\n */\nexport const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(\n  (props, forwardedRef) => {\n    const {\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const [handleFocusOnKeydown, closedOnKeydown] = useKeyboardFocusHandling(\n      closeButtonRef,\n      containerRef,\n    );\n\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const CloseButton = ({\n      closeToast,\n    }: {\n      closeToast: (event: ReactMouseEvent<HTMLElement>) => void;\n    }) => {\n      const intl = useIntl();\n\n      const closeButtonLabel = intl.formatMessage({\n        defaultMessage: 'Close notification',\n        id: '7IzOa/lx4Dc/qLGo',\n        description: 'Aria-label for the close notification button.',\n      });\n\n      // Handle the escape key\n      const closeToastOnEsc = (event: ReactKeyboardEvent) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          closedOnKeydown.current = true;\n          // Limited typing on the end of the react-toastify library\n          // requires a `React.MouseEvent` here, but they never actually\n          // use anything very specific to the MouseEvent.\n          closeToast(event as unknown as ReactMouseEvent<HTMLElement>);\n        }\n      };\n\n      /** Only when the toast is closed by the keyboard we need to handle the focus */\n      const detectCloseOnKeyDown = useCallback(() => {\n        closedOnKeydown.current = true;\n      }, []);\n\n      return (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          paddingTop={6}\n          paddingRight={6}\n          onKeyDown={closeToastOnEsc}\n        >\n          <Button\n            onKeyDown={detectCloseOnKeyDown}\n            onClick={closeToast}\n            aria-label={closeButtonLabel}\n            ref={closeButtonRef}\n            variant=\"default\"\n            onPointerDown={(e: ReactMouseEvent) => e.stopPropagation()}\n            data-dt-name=\"CloseToast\"\n          >\n            <Button.Prefix>\n              <XmarkIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      );\n    };\n\n    const containerId = useRef(++unique);\n\n    const activeId = useSyncExternalStoreWithSelector(\n      toastContainerStore.subscribe,\n      () => toastContainerStore.getState(),\n      null,\n      (state) => state.currentContainerId,\n    );\n\n    useEffect(() => {\n      const id = containerId.current;\n      if (toastContainerStore.getState().currentContainerId === null) {\n        toastContainerStore.setState({ currentContainerId: id });\n      }\n    }, [activeId]);\n\n    useEffect(() => {\n      const id = containerId.current;\n      const unsubscribeOnChange = toast.onChange((payload) => {\n        if (payload.status === 'removed') {\n          // Need to wait for one tick here, otherwise the now removed toast is still\n          // in the DOM and can be focused.\n          window.requestAnimationFrame(() => {\n            handleFocusOnKeydown();\n          });\n        }\n      });\n\n      return function cleanup() {\n        unsubscribeOnChange();\n\n        if (toastContainerStore.getState().currentContainerId === id) {\n          toastContainerStore.setState({ currentContainerId: null });\n        }\n      };\n      // excluded handleFocusOnKeydown dependency, because this effect needs to be executed once for toast.onChange\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    if (activeId !== containerId.current) {\n      return null;\n    }\n\n    return createPortal(\n      <div\n        ref={rootRef}\n        className={clsx(consumerClassName, toastsCSS)}\n        style={consumerStyle}\n        // This data attribute is necessary to ensure the correct stacking order with the Microguide and FeatureHighlight.\n        data-toast-container\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...remainingAriaLabelingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactToastifyContainer\n          hideProgressBar={true}\n          draggable={false}\n          closeButton={CloseButton}\n          limit={5}\n          pauseOnHover={true}\n          closeOnClick={false}\n          newestOnTop={false}\n          // Have the default if not provided (\"Notifications Alt+T\") or custom.\n          {...(ariaLabel && { 'aria-label': ariaLabel })}\n          transition={cssTransition({\n            collapseDuration: 200,\n            enter: 'strato__toast__enter',\n            exit: 'strato__toast__exit',\n          })}\n        />\n      </div>,\n      document.body,\n    );\n  },\n);\n\n(\n  ToastContainer as typeof ToastContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/notifications/toast/ToastContainer.sty.js

@@ -1,5 +1,5 @@
 import "./ToastContainer.css";
-var toastsCSS = "_rxr5813-3-1-3";
+var toastsCSS = "_rxr5813-3-2-1";
 export {
   toastsCSS
 };

package/esm/notifications/toast/ToastContainer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/ToastContainer.css.ts"],
-  "sourcesContent": ["import './ToastContainer.css';\nexport var toastsCSS = '_rxr5813-3-1-3';"],
+  "sourcesContent": ["import './ToastContainer.css';\nexport var toastsCSS = '_rxr5813-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-1-3 {
+._14971970-3-2-1 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -7,40 +7,40 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._14971971-3-1-3 {
+._14971971-3-2-1 {
   left: 0;
   right: auto;
   border-radius: 0 var(--dt-borders-radius-surface-default, 12px) var(--dt-borders-radius-surface-default, 12px) 0;
 }
-._14971972-3-1-3 {
+._14971972-3-2-1 {
   left: auto;
   right: 0;
   border-radius: var(--dt-borders-radius-surface-default, 12px) 0 0 var(--dt-borders-radius-surface-default, 12px);
 }
-._14971973-3-1-3 {
+._14971973-3-2-1 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-1-3 {
+._14971974-3-2-1 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-1-3 {
+._14971975-3-2-1 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-1-3 {
+._14971976-3-2-1 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-1-3 {
+._14971977-3-2-1 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-1-3 {
+._14971978-3-2-1 {
   width: 100%;
   height: 100%;
 }

package/esm/overlays/drawer/Drawer.js

@@ -16,6 +16,7 @@ import {
 } from "./Drawer.sty.js";
 import { FocusScope } from "../../core/components/focus-scope/FocusScope.js";
 import { OverlayContainer } from "../../core/components/OverlayContainer.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
 import { OverlayStackingProvider } from "../../core/providers/OverlayStackingProvider.js";
@@ -95,6 +96,7 @@ const Drawer = /* @__PURE__ */ forwardRef(
       },
       ref
     );
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const mergedRefs = useMergeRefs([ref, forwardedRef]);
     const overlayContainerProps = useOverlayStacking(0, "overlay");
     return /* @__PURE__ */ jsx(AnimatePresence, { children: !isDismissed && /* @__PURE__ */ jsx(
@@ -142,7 +144,8 @@ const Drawer = /* @__PURE__ */ forwardRef(
                   ),
                   ...consumerStyle
                 },
-                ...remainingProps,
+                ...restProps,
+                ...behavioralTrackingProps,
                 "data-dt-component": COMPONENT_NAME,
                 children: /* @__PURE__ */ jsx(FocusScope, { autoFocus: true, contain: modal, children: /* @__PURE__ */ jsx(
                   motion.div,