@dynatrace/strato-components 3.4.1 → 3.5.2

package/charts/core/components/toolbar/components/ToolbarMenu.css

@@ -1,14 +1,14 @@
-._auj9i40-3-4-1 {
+._auj9i40-3-5-2 {
   align-items: center;
   display: flex;
 }
-._auj9i41-3-4-1 {
+._auj9i41-3-5-2 {
   height: var(--dt-spacings-size-20, 20px);
   width: var(--dt-spacings-size-24, 24px);
 }
-._auj9i42-3-4-1 {
+._auj9i42-3-5-2 {
   height: var(--dt-spacings-size-24, 24px);
 }
-._auj9i43-3-4-1 {
+._auj9i43-3-5-2 {
   min-width: 215px;
 }

package/charts/core/components/toolbar/components/ToolbarMenu.sty.js

@@ -23,5 +23,5 @@ __export(ToolbarMenu_css_exports, {
 module.exports = __toCommonJS(ToolbarMenu_css_exports);
 var import_ToolbarMenu_css_ts_vanilla = require("./ToolbarMenu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var styledToolbarMenuContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_auj9i40-3-4-1", variantClassNames: { inline: { true: "_auj9i41-3-4-1", false: "_auj9i42-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var toolbarMenuGroup = "_auj9i43-3-4-1";
+var styledToolbarMenuContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_auj9i40-3-5-2", variantClassNames: { inline: { true: "_auj9i41-3-5-2", false: "_auj9i42-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var toolbarMenuGroup = "_auj9i43-3-5-2";

package/charts/core/components/tooltip/ChartTooltip/ChartTooltip.css

@@ -1,4 +1,4 @@
-._nhy85h0-3-4-1 {
+._nhy85h0-3-5-2 {
   display: inline-block;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -13,19 +13,19 @@
   max-height: 200px;
   overflow: hidden;
 }
-._nhy85h0-3-4-1[data-placement="right"] {
+._nhy85h0-3-5-2[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._nhy85h0-3-4-1[data-placement="left"] {
+._nhy85h0-3-5-2[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }
-._nhy85h1-3-4-1 {
+._nhy85h1-3-5-2 {
   z-index: var(--dt-elevations-overlay, 20);
   position: fixed;
 }
-._nhy85h2-3-4-1 {
+._nhy85h2-3-5-2 {
   pointer-events: all;
 }
-._nhy85h3-3-4-1 {
+._nhy85h3-3-5-2 {
   pointer-events: none;
 }

package/charts/core/components/tooltip/ChartTooltip/ChartTooltip.sty.js

@@ -23,5 +23,5 @@ __export(ChartTooltip_css_exports, {
 module.exports = __toCommonJS(ChartTooltip_css_exports);
 var import_ChartTooltip_css_ts_vanilla = require("./ChartTooltip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartTooltip = "_nhy85h0-3-4-1";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nhy85h1-3-4-1", variantClassNames: { isPinned: { true: "_nhy85h2-3-4-1", false: "_nhy85h3-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var chartTooltip = "_nhy85h0-3-5-2";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nhy85h1-3-5-2", variantClassNames: { isPinned: { true: "_nhy85h2-3-5-2", false: "_nhy85h3-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/tooltip/ChartTooltip/components/ActionItem/ActionItem.css

@@ -1,34 +1,34 @@
-._ejcjne0-3-4-1 {
+._ejcjne0-3-5-2 {
   padding: var(--dt-spacings-size-6, 6px);
   gap: var(--dt-spacings-size-4, 4px);
   box-sizing: border-box;
   pointer-events: auto;
 }
-._ejcjne0-3-4-1:hover {
+._ejcjne0-3-5-2:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._ejcjne2-3-4-1 {
+._ejcjne2-3-5-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._ejcjne3-3-4-1 {
+._ejcjne3-3-5-2 {
   cursor: pointer;
 }
-._ejcjne4-3-4-1 {
+._ejcjne4-3-5-2 {
   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);
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
 }
-._ejcjne1-3-4-1 ._ejcjne0-3-4-1 ._ejcjne2-3-4-1 ._ejcjne4-3-4-1 {
+._ejcjne1-3-5-2 ._ejcjne0-3-5-2 ._ejcjne2-3-5-2 ._ejcjne4-3-5-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._ejcjne1-3-4-1 ._ejcjne0-3-4-1 ._ejcjne3-3-4-1 ._ejcjne4-3-4-1 {
+._ejcjne1-3-5-2 ._ejcjne0-3-5-2 ._ejcjne3-3-5-2 ._ejcjne4-3-5-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._ejcjne5-3-4-1 {
+._ejcjne5-3-5-2 {
   margin-left: auto;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);

package/charts/core/components/tooltip/ChartTooltip/components/ActionItem/ActionItem.sty.js

@@ -25,6 +25,6 @@ module.exports = __toCommonJS(ActionItem_css_exports);
 var import_TooltipItem_css_ts_vanilla = require("../../../section-components/TooltipItem/TooltipItem.css");
 var import_ActionItem_css_ts_vanilla = require("./ActionItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ejcjne1-3-4-1 _ejcjne0-3-4-1 _1xw2xi60-3-4-1", variantClassNames: { disabled: { true: "_ejcjne2-3-4-1", false: "_ejcjne3-3-4-1" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var actionShortcut = "_ejcjne5-3-4-1";
-var actionText = "_ejcjne4-3-4-1";
+var actionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ejcjne1-3-5-2 _ejcjne0-3-5-2 _1xw2xi60-3-5-2", variantClassNames: { disabled: { true: "_ejcjne2-3-5-2", false: "_ejcjne3-3-5-2" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var actionShortcut = "_ejcjne5-3-5-2";
+var actionText = "_ejcjne4-3-5-2";

package/charts/core/components/tooltip/ChartTooltip/components/SeriesItem/SeriesItem.css

@@ -1,8 +1,8 @@
-._dov7bc0-3-4-1 {
+._dov7bc0-3-5-2 {
   min-width: 24px;
   max-width: 120px;
   text-align: center;
 }
-._dov7bc0-3-4-1:not(:last-of-type) {
+._dov7bc0-3-5-2:not(:last-of-type) {
   margin-right: var(--dt-spacings-size-2, 2px);
 }

package/charts/core/components/tooltip/ChartTooltip/components/SeriesItem/SeriesItem.sty.js

@@ -21,4 +21,4 @@ __export(SeriesItem_css_exports, {
 });
 module.exports = __toCommonJS(SeriesItem_css_exports);
 var import_SeriesItem_css_ts_vanilla = require("./SeriesItem.css");
-var valueContent = "_dov7bc0-3-4-1";
+var valueContent = "_dov7bc0-3-5-2";

package/charts/core/components/tooltip/ChartTooltip/components/TimeFrameHeader/TimeFrameHeader.css

@@ -1,4 +1,4 @@
-._12qth3i0-3-4-1 {
+._12qth3i0-3-5-2 {
   width: auto;
   white-space: nowrap;
   overflow: hidden;

package/charts/core/components/tooltip/ChartTooltip/components/TimeFrameHeader/TimeFrameHeader.sty.js

@@ -21,4 +21,4 @@ __export(TimeFrameHeader_css_exports, {
 });
 module.exports = __toCommonJS(TimeFrameHeader_css_exports);
 var import_TimeFrameHeader_css_ts_vanilla = require("./TimeFrameHeader.css");
-var formattedTimeframe = "_12qth3i0-3-4-1";
+var formattedTimeframe = "_12qth3i0-3-5-2";

package/charts/core/components/tooltip/InteractiveChartTooltip/components/BasicChartTooltip/BasicChartTooltip.css

@@ -1,14 +1,13 @@
-._10q856z0-3-4-1 {
-  z-index: var(--dt-elevations-overlay, 20);
+._10q856z0-3-5-2 {
   position: fixed;
 }
-._10q856z1-3-4-1 {
+._10q856z1-3-5-2 {
   pointer-events: all;
 }
-._10q856z2-3-4-1 {
+._10q856z2-3-5-2 {
   pointer-events: none;
 }
-._10q856z3-3-4-1 {
+._10q856z3-3-5-2 {
   display: inline-block;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -16,12 +15,11 @@
   border-radius: var(--dt-borders-radius-container-default, 9px);
   background-color: var(--dt-colors-background-surface-default, #fff);
   padding: var(--dt-spacings-size-4, 4px);
-  z-index: var(--dt-elevations-overlay, 20);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._10q856z3-3-4-1[data-placement="right"] {
+._10q856z3-3-5-2[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._10q856z3-3-4-1[data-placement="left"] {
+._10q856z3-3-5-2[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }

package/charts/core/components/tooltip/InteractiveChartTooltip/components/BasicChartTooltip/BasicChartTooltip.js

@@ -24,6 +24,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_BasicChartTooltip_css = require("./BasicChartTooltip.sty.js");
+var import_useOverlayStacking = require("../../../../../../../core/hooks/useOverlayStacking.js");
+var import_OverlayStackingProvider = require("../../../../../../../core/providers/OverlayStackingProvider.js");
 var import_DataDtrumContext = require("../../../../../context/DataDtrumContext.js");
 const BasicChartTooltip = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -34,10 +36,12 @@ const BasicChartTooltip = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
     pinned = false
   } = props;
   const { dataDtrumMask, dataDtrumAllow } = (0, import_DataDtrumContext.useDataDtrumContext)();
+  const overlayStacking = (0, import_useOverlayStacking.useOverlayStacking)(0, "overlay");
   const chartTooltipContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: (0, import_BasicChartTooltip_css.wrapper)({ isPinned: pinned }),
+      style: { zIndex: overlayStacking.style.zIndex },
       "data-testid": "chart-tooltip",
       role: "tooltip",
       ref: forwardedRef,
@@ -45,7 +49,7 @@ const BasicChartTooltip = /* @__PURE__ */ (0, import_react.forwardRef)((props, f
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       onMouseLeave,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BasicChartTooltip_css.chartTooltip, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayStackingProvider.OverlayStackingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BasicChartTooltip_css.chartTooltip, children }) })
     }
   );
   const placementNode = chartRef ? chartRef.current : document.body;

package/charts/core/components/tooltip/InteractiveChartTooltip/components/BasicChartTooltip/BasicChartTooltip.sty.js

@@ -23,5 +23,5 @@ __export(BasicChartTooltip_css_exports, {
 module.exports = __toCommonJS(BasicChartTooltip_css_exports);
 var import_BasicChartTooltip_css_ts_vanilla = require("./BasicChartTooltip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartTooltip = "_10q856z3-3-4-1";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10q856z0-3-4-1", variantClassNames: { isPinned: { true: "_10q856z1-3-4-1", false: "_10q856z2-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var chartTooltip = "_10q856z3-3-5-2";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10q856z0-3-5-2", variantClassNames: { isPinned: { true: "_10q856z1-3-5-2", false: "_10q856z2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.css

@@ -1,7 +1,7 @@
-._1fjte610-3-4-1 {
+._1fjte610-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1fjte610-3-4-1 .ft-separator {
+._1fjte610-3-5-2 .ft-separator {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -9,22 +9,22 @@
   text-decoration: var(--dt-typography-text-small-default-text-decoration, none);
   text-transform: var(--dt-typography-text-small-default-text-transform, none);
 }
-._1fjte611-3-4-1 {
+._1fjte611-3-5-2 {
   white-space: nowrap;
   flex-wrap: wrap;
 }
-._1fjte612-3-4-1 {
+._1fjte612-3-5-2 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1fjte613-3-4-1 {
+._1fjte613-3-5-2 {
   position: relative;
 }
-._1fjte614-3-4-1 {
+._1fjte614-3-5-2 {
   overflow: hidden auto;
   width: 100%;
 }
-._1fjte615-3-4-1 {
+._1fjte615-3-5-2 {
   width: 100%;
 }

package/charts/core/components/tooltip/InteractiveChartTooltip/components/InteractiveChartTooltip.sty.js

@@ -27,9 +27,9 @@ __export(InteractiveChartTooltip_css_exports, {
 module.exports = __toCommonJS(InteractiveChartTooltip_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../../../../../styles/textStyle.css");
 var import_InteractiveChartTooltip_css_ts_vanilla = require("./InteractiveChartTooltip.css");
-var formattedTimeframe = "_1fjte612-3-4-1";
-var scrollableContainerParent = "_1fjte614-3-4-1";
-var titleContainer = "_1fjte611-3-4-1";
-var tooltipHeader = "_1fjte610-3-4-1 _da9a8v0-3-4-1 _da9a8v2-3-4-1 _da9a8v6-3-4-1 _da9a8ve-3-4-1";
-var tooltipItem = "_1fjte615-3-4-1";
-var tooltipItemsContainer = "_1fjte613-3-4-1";
+var formattedTimeframe = "_1fjte612-3-5-2";
+var scrollableContainerParent = "_1fjte614-3-5-2";
+var titleContainer = "_1fjte611-3-5-2";
+var tooltipHeader = "_1fjte610-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v6-3-5-2 _da9a8ve-3-5-2";
+var tooltipItem = "_1fjte615-3-5-2";
+var tooltipItemsContainer = "_1fjte613-3-5-2";

package/charts/core/components/tooltip/InteractiveChartTooltip/headers/HeaderTooltip.css

@@ -1,4 +1,4 @@
-._rbdnmj0-3-4-1 {
+._rbdnmj0-3-5-2 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
   padding-left: var(--dt-spacings-size-4, 4px);

package/charts/core/components/tooltip/InteractiveChartTooltip/headers/HeaderTooltip.sty.js

@@ -21,4 +21,4 @@ __export(HeaderTooltip_css_exports, {
 });
 module.exports = __toCommonJS(HeaderTooltip_css_exports);
 var import_HeaderTooltip_css_ts_vanilla = require("./HeaderTooltip.css");
-var resolutionStyle = "_rbdnmj0-3-4-1";
+var resolutionStyle = "_rbdnmj0-3-5-2";

package/charts/core/components/tooltip/section-components/TooltipFooter/TooltipFooter.css

@@ -1,4 +1,4 @@
-._dsuaez0-3-4-1 {
+._dsuaez0-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   text-align: right;

package/charts/core/components/tooltip/section-components/TooltipFooter/TooltipFooter.sty.js

@@ -21,4 +21,4 @@ __export(TooltipFooter_css_exports, {
 });
 module.exports = __toCommonJS(TooltipFooter_css_exports);
 var import_TooltipFooter_css_ts_vanilla = require("./TooltipFooter.css");
-var container = "_dsuaez0-3-4-1";
+var container = "_dsuaez0-3-5-2";

package/charts/core/components/tooltip/section-components/TooltipHeader/TooltipHeader.css

@@ -1,7 +1,7 @@
-._1am3djx0-3-4-1 {
+._1am3djx0-3-5-2 {
   gap: var(--dt-spacings-size-4, 4px);
   flex-direction: column;
 }
-._1am3djx1-3-4-1 {
+._1am3djx1-3-5-2 {
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }

package/charts/core/components/tooltip/section-components/TooltipHeader/TooltipHeader.sty.js

@@ -22,4 +22,4 @@ __export(TooltipHeader_css_exports, {
 module.exports = __toCommonJS(TooltipHeader_css_exports);
 var import_TooltipHeader_css_ts_vanilla = require("./TooltipHeader.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1am3djx0-3-4-1", variantClassNames: { withBorder: { true: "_1am3djx1-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1am3djx0-3-5-2", variantClassNames: { withBorder: { true: "_1am3djx1-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/tooltip/section-components/TooltipInfoContent/TooltipInfoContent.css

@@ -1,4 +1,4 @@
-._o71nz30-3-4-1 {
+._o71nz30-3-5-2 {
   flex: 1 1 auto;
   padding-right: var(--dt-spacings-size-8, 8px);
   text-align: left;

package/charts/core/components/tooltip/section-components/TooltipInfoContent/TooltipInfoContent.sty.js

@@ -21,4 +21,4 @@ __export(TooltipInfoContent_css_exports, {
 });
 module.exports = __toCommonJS(TooltipInfoContent_css_exports);
 var import_TooltipInfoContent_css_ts_vanilla = require("./TooltipInfoContent.css");
-var container = "_o71nz30-3-4-1";
+var container = "_o71nz30-3-5-2";

package/charts/core/components/tooltip/section-components/TooltipItem/TooltipItem.css

@@ -1,9 +1,9 @@
-._1xw2xi60-3-4-1 {
+._1xw2xi60-3-5-2 {
   align-items: center;
   display: flex;
   width: 100%;
 }
-._1xw2xi61-3-4-1 {
+._1xw2xi61-3-5-2 {
   display: block;
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
@@ -16,7 +16,7 @@
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1xw2xi61-3-4-1:hover {
+._1xw2xi61-3-5-2:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);

package/charts/core/components/tooltip/section-components/TooltipItem/TooltipItem.sty.js

@@ -22,5 +22,5 @@ __export(TooltipItem_css_exports, {
 });
 module.exports = __toCommonJS(TooltipItem_css_exports);
 var import_TooltipItem_css_ts_vanilla = require("./TooltipItem.css");
-var container = "_1xw2xi61-3-4-1";
-var itemContainer = "_1xw2xi60-3-4-1";
+var container = "_1xw2xi61-3-5-2";
+var itemContainer = "_1xw2xi60-3-5-2";

package/charts/core/components/tooltip/section-components/TooltipSymbolContent/TooltipSymbolContent.css

@@ -1,4 +1,4 @@
-._1alqzxh0-3-4-1 {
+._1alqzxh0-3-5-2 {
   flex: 0 0 var(--dt-spacings-size-24, 24px);
   height: var(--dt-spacings-size-24, 24px);
   padding-right: var(--dt-spacings-size-4, 4px);

package/charts/core/components/tooltip/section-components/TooltipSymbolContent/TooltipSymbolContent.sty.js

@@ -21,4 +21,4 @@ __export(TooltipSymbolContent_css_exports, {
 });
 module.exports = __toCommonJS(TooltipSymbolContent_css_exports);
 var import_TooltipSymbolContent_css_ts_vanilla = require("./TooltipSymbolContent.css");
-var container = "_1alqzxh0-3-4-1";
+var container = "_1alqzxh0-3-5-2";

package/charts/core/components/tooltip/section-components/VirtualizedTooltipBody/VirtualizedTooltipBody.css

@@ -1,8 +1,8 @@
-._1n2hhq90-3-4-1 {
+._1n2hhq90-3-5-2 {
   width: 100%;
   position: relative;
 }
-._1n2hhq91-3-4-1 {
+._1n2hhq91-3-5-2 {
   list-style: none;
   padding: 0;
   margin: 0;

package/charts/core/components/tooltip/section-components/VirtualizedTooltipBody/VirtualizedTooltipBody.sty.js

@@ -22,5 +22,5 @@ __export(VirtualizedTooltipBody_css_exports, {
 });
 module.exports = __toCommonJS(VirtualizedTooltipBody_css_exports);
 var import_VirtualizedTooltipBody_css_ts_vanilla = require("./VirtualizedTooltipBody.css");
-var itemsList = "_1n2hhq91-3-4-1";
-var listContainer = "_1n2hhq90-3-4-1";
+var itemsList = "_1n2hhq91-3-5-2";
+var listContainer = "_1n2hhq90-3-5-2";

package/charts/core/components/tooltip/section-components/atoms/styles.css

@@ -1,16 +1,16 @@
-._1e2gg5t0-3-4-1 {
+._1e2gg5t0-3-5-2 {
   display: flex;
   justify-items: flex-start;
   align-items: center;
   width: 100%;
 }
-._1e2gg5t1-3-4-1 {
+._1e2gg5t1-3-5-2 {
   padding-left: var(--dt-spacings-size-6, 6px);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._1e2gg5t2-3-4-1 {
+._1e2gg5t2-3-5-2 {
   flex: 0 0 var(--dt-spacings-size-24, 24px);
   height: var(--dt-spacings-size-24, 24px);
   padding-right: var(--dt-spacings-size-4, 4px);

package/charts/core/components/tooltip/section-components/atoms/styles.sty.js

@@ -23,6 +23,6 @@ __export(styles_css_exports, {
 });
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
-var formattedTimeframe = "_1e2gg5t1-3-4-1";
-var tooltipDatapoint = "_1e2gg5t2-3-4-1";
-var tooltipDuration = "_1e2gg5t0-3-4-1";
+var formattedTimeframe = "_1e2gg5t1-3-5-2";
+var tooltipDatapoint = "_1e2gg5t2-3-5-2";
+var tooltipDuration = "_1e2gg5t0-3-5-2";

package/charts/core/components/tooltip/shared/styles/SeriesBasedContent.css

@@ -1,4 +1,4 @@
-._dacoys0-3-4-1 {
+._dacoys0-3-5-2 {
   padding-right: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-6, 6px);
   border: none;
@@ -8,13 +8,13 @@
   width: 100%;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
 }
-._dacoys0-3-4-1:hover {
+._dacoys0-3-5-2:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   cursor: pointer;
 }
-._dacoys1-3-4-1 {
+._dacoys1-3-5-2 {
   display: grid;
   align-items: center;
   column-gap: var(--dt-spacings-size-8, 8px);
@@ -24,20 +24,20 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   padding: var(--dt-spacings-size-2, 2px) 0px;
 }
-._dacoys2-3-4-1 {
+._dacoys2-3-5-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._dacoys3-3-4-1 {
+._dacoys3-3-5-2 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dacoys4-3-4-1 {
+._dacoys4-3-5-2 {
   font-weight: var(--dt-typography-text-base-default-weight, 400);
 }
-._dacoys5-3-4-1 {
+._dacoys5-3-5-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   white-space: nowrap;
   overflow: hidden;
@@ -50,20 +50,20 @@
   width: 100%;
   box-sizing: border-box;
 }
-._dacoys6-3-4-1 {
+._dacoys6-3-5-2 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dacoys7-3-4-1 {
+._dacoys7-3-5-2 {
   font-weight: var(--dt-typography-text-base-default-weight, 400);
 }
-._dacoys8-3-4-1 {
+._dacoys8-3-5-2 {
   width: 100%;
   box-sizing: border-box;
 }
-._dacoys9-3-4-1 {
+._dacoys9-3-5-2 {
   padding-left: 0;
 }
-._dacoysa-3-4-1 {
+._dacoysa-3-5-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   border-radius: var(--dt-borders-radius-field-default, 6px);

package/charts/core/components/tooltip/shared/styles/SeriesBasedContent.sty.js

@@ -29,10 +29,10 @@ module.exports = __toCommonJS(SeriesBasedContent_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../../../../../styles/textStyle.css");
 var import_SeriesBasedContent_css_ts_vanilla = require("./SeriesBasedContent.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var detailViewContent = "_dacoys0-3-4-1";
-var detailViewItem = "_dacoys1-3-4-1";
-var multipleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys5-3-4-1", variantClassNames: { highlighted: { true: "_dacoys6-3-4-1", false: "_dacoys7-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var multipleDimensionItem = "_dacoys8-3-4-1";
-var singleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys2-3-4-1", variantClassNames: { highlighted: { true: "_dacoys3-3-4-1", false: "_dacoys4-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var valueContainer = "_dacoys9-3-4-1";
-var valueItem = "_dacoysa-3-4-1 _da9a8v0-3-4-1 _da9a8v2-3-4-1 _da9a8v6-3-4-1 _da9a8ve-3-4-1";
+var detailViewContent = "_dacoys0-3-5-2";
+var detailViewItem = "_dacoys1-3-5-2";
+var multipleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys5-3-5-2", variantClassNames: { highlighted: { true: "_dacoys6-3-5-2", false: "_dacoys7-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var multipleDimensionItem = "_dacoys8-3-5-2";
+var singleDimensionContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dacoys2-3-5-2", variantClassNames: { highlighted: { true: "_dacoys3-3-5-2", false: "_dacoys4-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var valueContainer = "_dacoys9-3-5-2";
+var valueItem = "_dacoysa-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v6-3-5-2 _da9a8ve-3-5-2";

package/charts/core/components/tooltip/shared/styles/TooltipBody.css

@@ -1,4 +1,4 @@
-._1rpjobh0-3-4-1 {
+._1rpjobh0-3-5-2 {
   overflow: hidden auto;
   width: 100%;
   height: 100%;

package/charts/core/components/tooltip/shared/styles/TooltipBody.sty.js

@@ -21,4 +21,4 @@ __export(TooltipBody_css_exports, {
 });
 module.exports = __toCommonJS(TooltipBody_css_exports);
 var import_TooltipBody_css_ts_vanilla = require("./TooltipBody.css");
-var container = "_1rpjobh0-3-4-1";
+var container = "_1rpjobh0-3-5-2";

package/charts/core/components/tooltip-atoms/components/HeaderChipAtom/HeaderChipAtom.css

@@ -1,4 +1,4 @@
-._19a28040-3-4-1 {
+._19a28040-3-5-2 {
   height: 16px;
   min-width: 45px;
   display: flex;

package/charts/core/components/tooltip-atoms/components/HeaderChipAtom/HeaderChipAtom.sty.js

@@ -21,4 +21,4 @@ __export(HeaderChipAtom_css_exports, {
 });
 module.exports = __toCommonJS(HeaderChipAtom_css_exports);
 var import_HeaderChipAtom_css_ts_vanilla = require("./HeaderChipAtom.css");
-var headerChipAtom = "_19a28040-3-4-1";
+var headerChipAtom = "_19a28040-3-5-2";

package/charts/core/components/tooltip-atoms/components/styles.css

@@ -1,4 +1,4 @@
-._1b8jnp60-3-4-1 {
+._1b8jnp60-3-5-2 {
   width: 100%;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -6,7 +6,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1b8jnp61-3-4-1 {
+._1b8jnp61-3-5-2 {
   height: 16px;
   min-width: 45px;
   display: flex;
@@ -20,7 +20,7 @@
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1b8jnp62-3-4-1 {
+._1b8jnp62-3-5-2 {
   width: 100%;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -28,7 +28,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1b8jnp63-3-4-1 {
+._1b8jnp63-3-5-2 {
   height: 24px;
   width: 24px;
   display: flex;

package/charts/core/components/tooltip-atoms/components/styles.sty.js

@@ -24,7 +24,7 @@ __export(styles_css_exports, {
 });
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
-var chipAtom = "_1b8jnp61-3-4-1";
-var primaryInfo = "_1b8jnp62-3-4-1";
-var secondaryInfo = "_1b8jnp60-3-4-1";
-var symbolAtom = "_1b8jnp63-3-4-1";
+var chipAtom = "_1b8jnp61-3-5-2";
+var primaryInfo = "_1b8jnp62-3-5-2";
+var secondaryInfo = "_1b8jnp60-3-5-2";
+var symbolAtom = "_1b8jnp63-3-5-2";