@dynatrace/strato-components 3.4.0 → 3.5.0

package/charts/core/components/chart-layout/utils/orientation.js

@@ -23,22 +23,21 @@ __export(orientation_exports, {
 });
 module.exports = __toCommonJS(orientation_exports);
 var import_constants = require("../../../constants.js");
-var import_constants2 = require("../types/constants.js");
 const LEGEND_MIN_WIDTH = 225;
 const calculateAutoOrientation = (width, height) => {
   if (width > height + LEGEND_MIN_WIDTH) {
-    return import_constants2.ORIENTATION.Horizontal;
+    return import_constants.ORIENTATION.Horizontal;
   }
-  return import_constants2.ORIENTATION.Vertical;
+  return import_constants.ORIENTATION.Vertical;
 };
 const getOrientation = (width, height, position) => {
   if (position === import_constants.LEGEND_POSITION.Bottom) {
-    return import_constants2.ORIENTATION.Vertical;
+    return import_constants.ORIENTATION.Vertical;
   }
   if (position === import_constants.LEGEND_POSITION.Right) {
-    return import_constants2.ORIENTATION.Horizontal;
+    return import_constants.ORIENTATION.Horizontal;
   }
   return calculateAutoOrientation(width, height);
 };
-const isVertical = (orientation) => orientation === import_constants2.ORIENTATION.Vertical;
-const getLegendOrientation = (layoutOrientation) => isVertical(layoutOrientation) ? import_constants2.ORIENTATION.Horizontal : import_constants2.ORIENTATION.Vertical;
+const isVertical = (orientation) => orientation === import_constants.ORIENTATION.Vertical;
+const getLegendOrientation = (layoutOrientation) => isVertical(layoutOrientation) ? import_constants.ORIENTATION.Horizontal : import_constants.ORIENTATION.Vertical;

package/charts/core/components/chart-layout/utils/sanitize-legend-ratio.js

@@ -22,11 +22,10 @@ __export(sanitize_legend_ratio_exports, {
 module.exports = __toCommonJS(sanitize_legend_ratio_exports);
 var import_lodash_es = require("lodash");
 var import_constants = require("../../../constants.js");
-var import_constants2 = require("../types/constants.js");
 const isInTheRange = (value, min, max) => value >= min && value <= max;
 const sanitizeLegendRatio = (legendRatio, ratioBoundaries, orientation) => {
   if ((0, import_lodash_es.isNumber)(legendRatio)) {
-    const isHorizontal = orientation === import_constants2.ORIENTATION.Horizontal;
+    const isHorizontal = orientation === import_constants.ORIENTATION.Horizontal;
     const ratioInFraction = legendRatio / 100;
     const min = isHorizontal ? ratioBoundaries.minWidth : ratioBoundaries.minHeight;
     const max = isHorizontal ? ratioBoundaries.maxWidth : ratioBoundaries.maxHeight;

package/charts/core/components/chart-states/ChartState.css

@@ -1,16 +1,16 @@
-._4pqs4v0-3-4-0 {
+._4pqs4v0-3-5-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-4-0 {
+._4pqs4v1-3-5-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-4-0 {
+._4pqs4v2-3-5-0 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-4-0 {
+._4pqs4v3-3-5-0 {
   position: relative;
   width: 100%;
 }

package/charts/core/components/chart-states/ChartState.sty.js

@@ -24,7 +24,7 @@ __export(ChartState_css_exports, {
 });
 module.exports = __toCommonJS(ChartState_css_exports);
 var import_ChartState_css_ts_vanilla = require("./ChartState.css");
-var container = "_4pqs4v3-3-4-0";
-var emptyText = "_4pqs4v1-3-4-0";
-var errorText = "_4pqs4v0-3-4-0";
-var wrapper = "_4pqs4v2-3-4-0";
+var container = "_4pqs4v3-3-5-0";
+var emptyText = "_4pqs4v1-3-5-0";
+var errorText = "_4pqs4v0-3-5-0";
+var wrapper = "_4pqs4v2-3-5-0";

package/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-4-0 {
+._nm3s3e0-3-5-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
@@ -13,24 +13,24 @@
   z-index: var(--dt-elevations-sticky, 10);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
 }
-._nm3s3e1-3-4-0 {
+._nm3s3e1-3-5-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-4-0 {
+._nm3s3e2-3-5-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-4-0 {
+._nm3s3e3-3-5-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-4-0 {
+._nm3s3e4-3-5-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-4-0 {
+._nm3s3e5-3-5-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-4-0 {
+._nm3s3e6-3-5-0 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

package/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -28,11 +28,11 @@ __export(Magnifier_css_exports, {
 });
 module.exports = __toCommonJS(Magnifier_css_exports);
 var import_Magnifier_css_ts_vanilla = require("./Magnifier.css");
-var bottom = "_nm3s3e3-3-4-0";
-var left = "_nm3s3e1-3-4-0";
-var magnifier = "_nm3s3e0-3-4-0";
+var bottom = "_nm3s3e3-3-5-0";
+var left = "_nm3s3e1-3-5-0";
+var magnifier = "_nm3s3e0-3-5-0";
 var magnifierFontStyles = { fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", fontSize: "var(--dt-typography-text-small-default-size, 12px)", fontWeight: "var(--dt-typography-text-small-default-weight, 400)", lineHeight: "var(--dt-typography-text-small-default-line-height, 1.333333333)" };
-var right = "_nm3s3e2-3-4-0";
-var rotatedBottomStyle = "_nm3s3e6-3-4-0";
-var rotatedTopStyle = "_nm3s3e5-3-4-0";
-var top = "_nm3s3e4-3-4-0";
+var right = "_nm3s3e2-3-5-0";
+var rotatedBottomStyle = "_nm3s3e6-3-5-0";
+var rotatedTopStyle = "_nm3s3e5-3-5-0";
+var top = "_nm3s3e4-3-5-0";

package/charts/core/components/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-4-0 {
+._nfahiq0-3-5-0 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-4-0 {
+._nfahiq1-3-5-0 {
   cursor: crosshair;
 }
-._nfahiq2-3-4-0 {
+._nfahiq2-3-5-0 {
   cursor: ew-resize;
 }
-._nfahiq3-3-4-0 {
+._nfahiq3-3-5-0 {
   cursor: zoom-in;
 }
-._nfahiq4-3-4-0 {
+._nfahiq4-3-5-0 {
   cursor: zoom-out;
 }

package/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js

@@ -23,5 +23,5 @@ __export(InteractionsOverlay_css_exports, {
 module.exports = __toCommonJS(InteractionsOverlay_css_exports);
 var import_InteractionsOverlay_css_ts_vanilla = require("./InteractionsOverlay.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartEventsWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nfahiq0-3-4-0", variantClassNames: { mode: { explore: "_nfahiq1-3-4-0", pan: "_nfahiq2-3-4-0", zoom: "_nfahiq3-3-4-0", zoomOut: "_nfahiq4-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-4-0";
+var chartEventsWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nfahiq0-3-5-0", variantClassNames: { mode: { explore: "_nfahiq1-3-5-0", pan: "_nfahiq2-3-5-0", zoom: "_nfahiq3-3-5-0", zoomOut: "_nfahiq4-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-5-0";

package/charts/core/components/interactions-overlay/utils/get-custom-context-menu-items.js

@@ -23,23 +23,31 @@ module.exports = __toCommonJS(get_custom_context_menu_items_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_is_slot = require("../../../../../core/utils/is-slot.js");
+var import_OverlayTooltip = require("../../overlay-tooltip/OverlayTooltip.js");
 var import_ChartSeriesAction = require("../../series-action/ChartSeriesAction.js");
-var import_ActionItem = require("../../tooltip/ChartTooltip/components/ActionItem/ActionItem.js");
 const renderActionItem = (item) => {
   const itemProps = {
     disabled: item.props.disabled,
-    onMouseUp: item.props.onSelect,
-    text: "",
+    onSelect: item.props.onSelect,
+    label: "",
     icon: ""
   };
   import_react.Children.forEach(item.props.children, (itemPart) => {
     if ((0, import_is_slot.isSlot)(itemPart, import_ChartSeriesAction.ChartSeriesAction.ItemIcon)) {
       itemProps.icon = itemPart.props.children;
     } else {
-      itemProps.text = itemPart;
+      itemProps.label = itemPart;
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionItem.ActionItem, { ...itemProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_OverlayTooltip.OverlayTooltip.Action,
+    {
+      label: itemProps.label,
+      icon: itemProps.icon,
+      onSelect: itemProps.onSelect,
+      disabled: itemProps.disabled
+    }
+  );
 };
 const getCustomContextMenuItems = (customItem) => {
   let actions = [];

package/charts/core/components/legend/categorical/ChartLegend.css

@@ -1,4 +1,4 @@
-._9x5f9b0-3-4-0 {
+._9x5f9b0-3-5-0 {
   display: flex;
   align-items: center;
   width: 100%;

package/charts/core/components/legend/categorical/ChartLegend.js

@@ -29,13 +29,12 @@ var import_LegendGridSettingsContext = require("./context/LegendGridSettingsCont
 var import_useLegendInteractions = require("./hooks/useLegendInteractions.js");
 var import_legend_grid_utils = require("./utils/legend-grid.utils.js");
 var import_constants = require("../../../constants.js");
-var import_constants2 = require("../../chart-layout/types/constants.js");
 var import_Legend_context = require("../shared/context/Legend.context.js");
 var import_LegendSizeContext = require("../shared/context/LegendSizeContext.js");
 const ChartLegend = (props) => {
   const {
     items,
-    orientation = import_constants2.ORIENTATION.Horizontal,
+    orientation = import_constants.ORIENTATION.Horizontal,
     onHover,
     onClick,
     onSeriesAction,
@@ -56,7 +55,7 @@ const ChartLegend = (props) => {
       style: {
         height,
         width,
-        flexDirection: orientation === import_constants2.ORIENTATION.Vertical ? "row" : "column",
+        flexDirection: orientation === import_constants.ORIENTATION.Vertical ? "row" : "column",
         ...style
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/charts/core/components/legend/categorical/ChartLegend.sty.js

@@ -21,4 +21,4 @@ __export(ChartLegend_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegend_css_exports);
 var import_ChartLegend_css_ts_vanilla = require("./ChartLegend.css");
-var legendContainer = "_9x5f9b0-3-4-0";
+var legendContainer = "_9x5f9b0-3-5-0";

package/charts/core/components/legend/categorical/components/ChartLegendGrid.js

@@ -34,8 +34,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_ChartLegendItem = require("./ChartLegendItem/ChartLegendItem.js");
 var import_ChartVirtualizedLegendGrid_css = require("./ChartVirtualizedLegendGrid.sty.js");
+var import_constants = require("../../../../constants.js");
 var import_useChartLayoutRatio = require("../../../chart-layout/hooks/useChartLayoutRatio.js");
-var import_constants = require("../../../chart-layout/types/constants.js");
 var import_constants2 = require("../constants.js");
 var import_LegendGridSettingsContext = require("../context/LegendGridSettingsContext.js");
 const ChartLegendGrid = (props) => {

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.css

@@ -1,12 +1,12 @@
-._1wmibjy0-3-4-0 {
+._1wmibjy0-3-5-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy1-3-4-0 {
+._1wmibjy1-3-5-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy2-3-4-0 {
+._1wmibjy2-3-5-0 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: 100%;

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.sty.js

@@ -23,6 +23,6 @@ __export(ChartLegendIcon_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegendIcon_css_exports);
 var import_ChartLegendIcon_css_ts_vanilla = require("./ChartLegendIcon.css");
-var coloredEyeOffIcon = "_1wmibjy1-3-4-0";
-var eyeIcon = "_1wmibjy0-3-4-0";
-var singleDimensionIcon = "_1wmibjy2-3-4-0";
+var coloredEyeOffIcon = "_1wmibjy1-3-5-0";
+var eyeIcon = "_1wmibjy0-3-5-0";
+var singleDimensionIcon = "_1wmibjy2-3-5-0";

package/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.css

@@ -1,4 +1,4 @@
-._mt8v6g0-3-4-0 {
+._mt8v6g0-3-5-0 {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -19,23 +19,23 @@
   padding: var(--dt-spacings-size-2, 2px);
   width: fit-content;
 }
-._mt8v6g1-3-4-0 {
+._mt8v6g1-3-5-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6g1-3-4-0:disabled {
+._mt8v6g1-3-5-0:disabled {
   cursor: auto;
 }
-._mt8v6g2-3-4-0 {
+._mt8v6g2-3-5-0 {
   cursor: pointer;
 }
-._mt8v6g2-3-4-0:hover {
+._mt8v6g2-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._mt8v6g3-3-4-0 {
+._mt8v6g3-3-5-0 {
   cursor: auto;
 }
-._mt8v6g4-3-4-0 {
+._mt8v6g4-3-5-0 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-0, 0);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -45,27 +45,27 @@
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
 }
-._mt8v6g4-3-4-0:hover {
+._mt8v6g4-3-5-0:hover {
   cursor: auto;
 }
-._mt8v6g5-3-4-0:hover {
+._mt8v6g5-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   cursor: pointer;
 }
-._mt8v6g6-3-4-0:hover {
+._mt8v6g6-3-5-0:hover {
   background-color: unset;
   cursor: auto;
 }
-._mt8v6g7-3-4-0 {
+._mt8v6g7-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mt8v6g8-3-4-0 {
+._mt8v6g8-3-5-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mt8v6g4-3-4-0 > .button-children {
+._mt8v6g4-3-5-0 > .button-children {
   flex-grow: 1;
 }
-._mt8v6g9-3-4-0 {
+._mt8v6g9-3-5-0 {
   line-height: 2;
   white-space: nowrap;
   display: flex;
@@ -74,10 +74,10 @@
   flex-shrink: 1;
   height: var(--dt-spacings-size-20, 20px);
 }
-._mt8v6g9-3-4-0 > ._mt8v6g1-3-4-0 {
+._mt8v6g9-3-5-0 > ._mt8v6g1-3-5-0 {
   flex: 0 0 auto;
 }
-._mt8v6ga-3-4-0 {
+._mt8v6ga-3-5-0 {
   flex: 1 1 auto;
   white-space: nowrap;
   display: flex;
@@ -85,7 +85,7 @@
   overflow: hidden;
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6gb-3-4-0 {
+._mt8v6gb-3-5-0 {
   flex-shrink: 1;
   text-align: left;
   overflow: hidden;

package/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.sty.js

@@ -30,9 +30,9 @@ var import_focusRingStatic_css_ts_vanilla = require("../../../../../../../core/s
 var import_ChartLegendItem_css_ts_vanilla = require("./ChartLegendItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var ItemFontStyles = { fontWeight: "var(--dt-typography-text-small-emphasized-weight, 500)", fontSize: "var(--dt-typography-text-small-emphasized-size, 12px)", fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", lineHeight: "var(--dt-typography-text-small-emphasized-line-height, 1.333333333)" };
-var baseLegendButton = "_mt8v6g0-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9b8-3-4-0";
-var legendItem = "_mt8v6g9-3-4-0";
-var legendItemButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g1-3-4-0", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-4-0", false: "_mt8v6g3-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g4-3-4-0", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-4-0", false: "_mt8v6g6-3-4-0" }, isSubdued: { true: "_mt8v6g7-3-4-0", false: "_mt8v6g8-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButtonOverride = "_mt8v6gb-3-4-0";
-var legendNameWrapper = "_mt8v6ga-3-4-0";
+var baseLegendButton = "_mt8v6g0-3-5-0 _z0fq9b4-3-5-0 _z0fq9bd-3-5-0 _z0fq9b6-3-5-0 _z0fq9b9-3-5-0";
+var legendItem = "_mt8v6g9-3-5-0";
+var legendItemButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g1-3-5-0", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-5-0", false: "_mt8v6g3-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g4-3-5-0", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-5-0", false: "_mt8v6g6-3-5-0" }, isSubdued: { true: "_mt8v6g7-3-5-0", false: "_mt8v6g8-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButtonOverride = "_mt8v6gb-3-5-0";
+var legendNameWrapper = "_mt8v6ga-3-5-0";

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.css

@@ -1,10 +1,10 @@
-._yo3l7h0-3-4-0 {
+._yo3l7h0-3-5-0 {
   padding: var(--dt-spacings-size-2, 2px);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._yo3l7h1-3-4-0 {
+._yo3l7h1-3-5-0 {
   visibility: visible;
 }
-._yo3l7h2-3-4-0 {
+._yo3l7h2-3-5-0 {
   visibility: hidden;
 }

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.sty.js

@@ -22,4 +22,4 @@ __export(ChartLegendSeriesActions_css_exports, {
 module.exports = __toCommonJS(ChartLegendSeriesActions_css_exports);
 var import_ChartLegendSeriesActions_css_ts_vanilla = require("./ChartLegendSeriesActions.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var seriesButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_yo3l7h0-3-4-0", variantClassNames: { visible: { true: "_yo3l7h1-3-4-0", false: "_yo3l7h2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var seriesButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_yo3l7h0-3-5-0", variantClassNames: { visible: { true: "_yo3l7h1-3-5-0", false: "_yo3l7h2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/categorical/components/ChartVirtualizedLegendGrid.css

@@ -1,30 +1,30 @@
-._igjrsj0-3-4-0 {
+._igjrsj0-3-5-0 {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }
-._igjrsj1-3-4-0 {
+._igjrsj1-3-5-0 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._igjrsj2-3-4-0 {
+._igjrsj2-3-5-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._igjrsj3-3-4-0 {
+._igjrsj3-3-5-0 {
   position: relative;
 }
-._igjrsj4-3-4-0 {
+._igjrsj4-3-5-0 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
 }
-._igjrsj5-3-4-0 {
+._igjrsj5-3-5-0 {
   display: grid;
 }
-._igjrsj6-3-4-0 {
+._igjrsj6-3-5-0 {
   margin-top: var(--dt-spacings-size-8, 8px);
 }
-._igjrsj7-3-4-0 {
+._igjrsj7-3-5-0 {
   margin-top: var(--dt-spacings-size-0, 0);
 }

package/charts/core/components/legend/categorical/components/ChartVirtualizedLegendGrid.sty.js

@@ -25,7 +25,7 @@ __export(ChartVirtualizedLegendGrid_css_exports, {
 module.exports = __toCommonJS(ChartVirtualizedLegendGrid_css_exports);
 var import_ChartVirtualizedLegendGrid_css_ts_vanilla = require("./ChartVirtualizedLegendGrid.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj0-3-4-0", variantClassNames: { layout: { horizontal: "_igjrsj1-3-4-0", vertical: "_igjrsj2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var legendGrid = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj5-3-4-0", variantClassNames: { layout: { horizontal: "_igjrsj6-3-4-0", vertical: "_igjrsj7-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var virtualizedGrid = "_igjrsj3-3-4-0";
-var virtualizedRow = "_igjrsj4-3-4-0";
+var legendContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj0-3-5-0", variantClassNames: { layout: { horizontal: "_igjrsj1-3-5-0", vertical: "_igjrsj2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendGrid = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj5-3-5-0", variantClassNames: { layout: { horizontal: "_igjrsj6-3-5-0", vertical: "_igjrsj7-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var virtualizedGrid = "_igjrsj3-3-5-0";
+var virtualizedRow = "_igjrsj4-3-5-0";

package/charts/core/components/legend/range/RangeLegend.css

@@ -1,13 +1,13 @@
-._lvrd9i0-3-4-0 {
+._lvrd9i0-3-5-0 {
   display: flex;
   align-items: center;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
   margin: 0 auto;
 }
-._lvrd9i1-3-4-0 {
+._lvrd9i1-3-5-0 {
   flex-direction: row;
 }
-._lvrd9i2-3-4-0 {
+._lvrd9i2-3-5-0 {
   flex-direction: column;
 }

package/charts/core/components/legend/range/RangeLegend.js

@@ -40,8 +40,8 @@ var import_RangeLegend_css = require("./RangeLegend.sty.js");
 var import_get_legend_scale = require("./utils/get-legend-scale.js");
 var import_map_to_internal_range_items = require("./utils/map-to-internal-range-items.js");
 var import_Flex = require("../../../../../layouts/flex/Flex.js");
+var import_constants2 = require("../../../constants.js");
 var import_useChartLayoutRatio = require("../../chart-layout/hooks/useChartLayoutRatio.js");
-var import_constants2 = require("../../chart-layout/types/constants.js");
 var import_LegendSizeContext = require("../shared/context/LegendSizeContext.js");
 const RangeLegend = (props) => {
   const {

package/charts/core/components/legend/range/RangeLegend.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegend_css_exports, {
 module.exports = __toCommonJS(RangeLegend_css_exports);
 var import_RangeLegend_css_ts_vanilla = require("./RangeLegend.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-4-0", variantClassNames: { isVertical: { true: "_lvrd9i1-3-4-0", false: "_lvrd9i2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-5-0", variantClassNames: { isVertical: { true: "_lvrd9i1-3-5-0", false: "_lvrd9i2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.css

@@ -1,6 +1,6 @@
-._klb1cs1-3-4-0 {
+._klb1cs1-3-5-0 {
   visibility: hidden;
 }
-._klb1cs2-3-4-0 {
+._klb1cs2-3-5-0 {
   visibility: visible;
 }

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.js

@@ -22,7 +22,7 @@ __export(RangeLegendBoundaryLabel_exports, {
 module.exports = __toCommonJS(RangeLegendBoundaryLabel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_RangeLegendBoundaryLabel_css = require("./RangeLegendBoundaryLabel.sty.js");
-var import_constants = require("../../../../chart-layout/types/constants.js");
+var import_constants = require("../../../../../constants.js");
 var import_chars_font_width_map = require("../../../../text-ellipsis/chars-font-width-map.js");
 var import_truncate_string = require("../../../../text-ellipsis/truncate-string.js");
 var import_constants2 = require("../../constants.js");

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendBoundaryLabel_css_exports, {
 module.exports = __toCommonJS(RangeLegendBoundaryLabel_css_exports);
 var import_RangeLegendBoundaryLabel_css_ts_vanilla = require("./RangeLegendBoundaryLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-4-0", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-4-0", false: "_klb1cs2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-5-0", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-5-0", false: "_klb1cs2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.css

@@ -1,3 +1,3 @@
-._1itb2bi0-3-4-0 {
+._1itb2bi0-3-5-0 {
   overflow: visible;
 }

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(RangeLegendItemLabel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_RangeLegendItemLabel_css = require("./RangeLegendItemLabel.sty.js");
-var import_constants = require("../../../../chart-layout/types/constants.js");
+var import_constants = require("../../../../../constants.js");
 var import_constants2 = require("../../constants.js");
 var import_RangeLegendOrientationContext = require("../../context/RangeLegendOrientationContext.js");
 var import_selectors = require("../../hooks/store/selectors.js");

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.sty.js

@@ -21,4 +21,4 @@ __export(RangeLegendItemLabel_css_exports, {
 });
 module.exports = __toCommonJS(RangeLegendItemLabel_css_exports);
 var import_RangeLegendItemLabel_css_ts_vanilla = require("./RangeLegendItemLabel.css");
-var legendLabel = "_1itb2bi0-3-4-0";
+var legendLabel = "_1itb2bi0-3-5-0";

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.css

@@ -1,9 +1,9 @@
-._1kzx6wv0-3-4-0 {
+._1kzx6wv0-3-5-0 {
   overflow: visible;
 }
-._1kzx6wv1-3-4-0 {
+._1kzx6wv1-3-5-0 {
   visibility: visible;
 }
-._1kzx6wv2-3-4-0 {
+._1kzx6wv2-3-5-0 {
   visibility: hidden;
 }

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.js

@@ -34,7 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_RangeLegendItemMarker_css = require("./RangeLegendItemMarker.sty.js");
-var import_constants = require("../../../../chart-layout/types/constants.js");
+var import_constants = require("../../../../../constants.js");
 var import_constants2 = require("../../constants.js");
 var import_RangeLegendOrientationContext = require("../../context/RangeLegendOrientationContext.js");
 var import_RangeLegendScaleContext = require("../../context/RangeLegendScaleContext.js");

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendItemMarker_css_exports, {
 module.exports = __toCommonJS(RangeLegendItemMarker_css_exports);
 var import_RangeLegendItemMarker_css_ts_vanilla = require("./RangeLegendItemMarker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-4-0", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-4-0", false: "_1kzx6wv2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-5-0", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-5-0", false: "_1kzx6wv2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css

@@ -1,12 +1,12 @@
-._u32l830-3-4-0 {
+._u32l830-3-5-0 {
   overflow: visible;
   position: absolute;
 }
-._u32l831-3-4-0 {
+._u32l831-3-5-0 {
   width: 100%;
   height: 10px;
 }
-._u32l832-3-4-0 {
+._u32l832-3-5-0 {
   height: 100%;
   width: 10px;
 }

package/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.js

@@ -24,7 +24,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_RangeLegendMarkers_css = require("./RangeLegendMarkers.sty.js");
-var import_constants = require("../../../../chart-layout/types/constants.js");
+var import_constants = require("../../../../../constants.js");
 var import_constants2 = require("../../constants.js");
 var import_RangeLegendOrientationContext = require("../../context/RangeLegendOrientationContext.js");
 var import_RangeLegendScaleContext = require("../../context/RangeLegendScaleContext.js");