@dynatrace/strato-components 3.5.2 → 3.6.0

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

@@ -1,4 +1,4 @@
-._19a28040-3-5-2 {
+._19a28040-3-6-0 {
   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-5-2";
+var headerChipAtom = "_19a28040-3-6-0";

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

@@ -1,4 +1,4 @@
-._1b8jnp60-3-5-2 {
+._1b8jnp60-3-6-0 {
   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-5-2 {
+._1b8jnp61-3-6-0 {
   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-5-2 {
+._1b8jnp62-3-6-0 {
   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-5-2 {
+._1b8jnp63-3-6-0 {
   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-5-2";
-var primaryInfo = "_1b8jnp62-3-5-2";
-var secondaryInfo = "_1b8jnp60-3-5-2";
-var symbolAtom = "_1b8jnp63-3-5-2";
+var chipAtom = "_1b8jnp61-3-6-0";
+var primaryInfo = "_1b8jnp62-3-6-0";
+var secondaryInfo = "_1b8jnp60-3-6-0";
+var symbolAtom = "_1b8jnp63-3-6-0";

package/charts/core/components/zoom/ZoomCursors.css

@@ -1,8 +1,8 @@
-._1idfwsm0-3-5-2 {
+._1idfwsm0-3-6-0 {
   cursor: ew-resize;
   user-select: none;
   touch-action: pan-y;
 }
-._1idfwsm1-3-5-2 {
+._1idfwsm1-3-6-0 {
   cursor: default;
 }

package/charts/core/components/zoom/ZoomCursors.sty.js

@@ -24,6 +24,6 @@ __export(ZoomCursors_css_exports, {
 module.exports = __toCommonJS(ZoomCursors_css_exports);
 var import_ZoomCursors_css_ts_vanilla = require("./ZoomCursors.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-5-2", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-5-2", false: "_1idfwsm1-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultCursor = "_1idfwsm1-3-5-2";
-var resizeCursor = "_1idfwsm0-3-5-2";
+var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-6-0", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-6-0", false: "_1idfwsm1-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultCursor = "_1idfwsm1-3-6-0";
+var resizeCursor = "_1idfwsm0-3-6-0";

package/charts/core/hooks/useOverlayEventHandlers.js

@@ -21,12 +21,11 @@ __export(useOverlayEventHandlers_exports, {
 });
 module.exports = __toCommonJS(useOverlayEventHandlers_exports);
 var import_TooltipContext = require("../components/overlay-tooltip/contexts/TooltipContext.js");
-var import_useTooltipReducer = require("../components/overlay-tooltip/useTooltipReducer.js");
-var import_utils = require("../components/overlay-tooltip/utils.js");
+var import_useTooltipActions = require("../components/overlay-tooltip/useTooltipActions.js");
 const useOverlayEventHandlers = (overlay, options) => {
   const overlayRef = overlay.overlayRef;
   const tooltipStore = (0, import_TooltipContext.useTooltip)();
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { hover, pin, unpin, outOfBounds } = (0, import_useTooltipActions.useTooltipActions)();
   const { onToolbarVisibilityChange, getTooltipData } = options;
   const handlePointerEnter = () => {
     onToolbarVisibilityChange(true);
@@ -37,16 +36,14 @@ const useOverlayEventHandlers = (overlay, options) => {
     }
     const tooltipData = getTooltipData(event);
     if (tooltipData) {
-      dispatch({ type: "SET_POSITION", payload: tooltipData })(
-        event.nativeEvent
-      );
+      hover(event.nativeEvent, tooltipData);
     } else {
-      dispatch({ type: "SET_OUT_BOUNDS" })();
+      outOfBounds();
     }
   };
   const handlePointerLeave = () => {
     onToolbarVisibilityChange(false);
-    dispatch({ type: "SET_OUT_BOUNDS" })();
+    outOfBounds();
   };
   const handleMouseClick = (event) => {
     event.stopPropagation();
@@ -58,26 +55,12 @@ const useOverlayEventHandlers = (overlay, options) => {
     const isPinned = tooltipStore.getState().pinned;
     if (inBounds || isPinned) {
       if (isPinned) {
-        dispatch({
-          type: "SET_PINNED",
-          payload: { pinned: false, data: (0, import_utils.emptyData)() }
-        })();
+        unpin();
         if (tooltipData) {
-          dispatch({ type: "SET_POSITION", payload: tooltipData })(
-            event.nativeEvent
-          );
+          hover(event.nativeEvent, tooltipData);
         }
       } else if (tooltipData) {
-        const { offsetX, offsetY } = event.nativeEvent;
-        dispatch({
-          type: "SET_PINNED",
-          payload: {
-            pinned: true,
-            data: tooltipData,
-            relativeX: offsetX,
-            relativeY: offsetY
-          }
-        })();
+        pin(event.nativeEvent, tooltipData);
       }
     }
   };

package/charts/core/typographyStyles.css

@@ -1,3 +1,3 @@
-._18u8ey50-3-5-2 {
+._18u8ey50-3-6-0 {
   font-feature-settings: 'ss01';
 }

package/charts/core/typographyStyles.sty.js

@@ -21,4 +21,4 @@ __export(typographyStyles_css_exports, {
 });
 module.exports = __toCommonJS(typographyStyles_css_exports);
 var import_typographyStyles_css_ts_vanilla = require("./typographyStyles.css");
-var replaceSlashedZero = "_18u8ey50-3-5-2";
+var replaceSlashedZero = "_18u8ey50-3-6-0";

package/charts/core/utils/adaptively-reduce-horizontal-ticks.d.ts

@@ -0,0 +1,32 @@
+import type { NumberValue } from 'd3-scale';
+import { type ContinuousScale } from './has-horizontal-label-collision.js';
+export declare const DEFAULT_MIN_TICK_COUNT = 2;
+export interface TickCandidate {
+    formattedTicks: string[];
+    rawTicks: NumberValue[];
+}
+export interface AdaptiveReductionOptions {
+    maxIterations?: number;
+    minTickCount?: number;
+    /**
+     * When provided, collision detection uses domain-aware alignment (AC1) instead
+     * of the legacy index-based alignment. Pass `[domainMin, domainMax]` as numbers
+     * (use `+` to convert Date values).
+     */
+    domainBounds?: [number, number];
+}
+/**
+ * Adaptively reduces horizontal tick candidates until labels no longer
+ * collide or the minimum tick count is reached.
+ *
+ * @param getCandidate - Called on each iteration with the 0-based attempt
+ *   index. Must return the next candidate tick set. The callback is
+ *   responsible for its own reduction strategy (e.g. doubling the step,
+ *   halving the d3 tick count hint, etc.). Return `null` to signal that
+ *   no further reduction is possible and the loop should stop.
+ * @param scale - The d3 continuous scale used for pixel-position calculations.
+ * @param options - Tuning knobs for the reduction loop.
+ * @returns The first non-colliding candidate, or the last candidate when
+ *   the loop exhausts all iterations / reaches the minimum tick count.
+ */
+export declare function adaptivelyReduceHorizontalTicks<T extends TickCandidate>(getCandidate: (attempt: number) => T | null, scale: ContinuousScale, options?: AdaptiveReductionOptions): T;

package/charts/core/utils/adaptively-reduce-horizontal-ticks.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var adaptively_reduce_horizontal_ticks_exports = {};
+__export(adaptively_reduce_horizontal_ticks_exports, {
+  DEFAULT_MIN_TICK_COUNT: () => DEFAULT_MIN_TICK_COUNT,
+  adaptivelyReduceHorizontalTicks: () => adaptivelyReduceHorizontalTicks
+});
+module.exports = __toCommonJS(adaptively_reduce_horizontal_ticks_exports);
+var import_has_horizontal_label_collision = require("./has-horizontal-label-collision.js");
+const DEFAULT_MAX_ITERATIONS = 5;
+const DEFAULT_MIN_TICK_COUNT = 2;
+function adaptivelyReduceHorizontalTicks(getCandidate, scale, options) {
+  const maxIterations = options?.maxIterations ?? DEFAULT_MAX_ITERATIONS;
+  const minTickCount = options?.minTickCount ?? DEFAULT_MIN_TICK_COUNT;
+  const domainBounds = options?.domainBounds;
+  let current = getCandidate(0);
+  if (current === null) {
+    return { formattedTicks: [], rawTicks: [] };
+  }
+  for (let i = 1; i <= maxIterations; i++) {
+    if (!(0, import_has_horizontal_label_collision.hasHorizontalLabelCollision)(
+      current.formattedTicks,
+      current.rawTicks,
+      scale,
+      domainBounds
+    )) {
+      return current;
+    }
+    const currentVisibleCount = current.formattedTicks.filter(
+      (t) => t !== ""
+    ).length;
+    if (currentVisibleCount <= minTickCount) {
+      return current;
+    }
+    const next = getCandidate(i);
+    if (next === null) {
+      return current;
+    }
+    const nextVisibleCount = next.formattedTicks.filter((t) => t !== "").length;
+    if (nextVisibleCount < minTickCount) {
+      return current;
+    }
+    current = next;
+  }
+  return current;
+}

package/charts/core/utils/has-horizontal-label-collision.d.ts

@@ -0,0 +1,29 @@
+import type { NumberValue } from 'd3-scale';
+import type { AnyScale } from '../types/scales.js';
+/**
+ * Minimum pixel gap required between adjacent tick labels.
+ *
+ * Lower values keep more ticks visible at the risk of labels almost touching;
+ * higher values trigger reduction sooner and leave more whitespace. ~6px keeps
+ * the gap visually clear while avoiding asymmetric drops between sibling
+ * charts whose labels differ only by a few pixels (e.g. a leading "-").
+ */
+export declare const TICK_LABEL_GAP_PX = 6;
+export type ContinuousScale = Exclude<AnyScale, {
+    bandwidth: () => number;
+}>;
+/**
+ * Detects whether any two adjacent formatted tick labels would visually
+ * overlap on a horizontal axis.
+ *
+ * When `domainBounds` is provided the function uses domain-aware alignment —
+ * the same logic as `getBottomTickLabelPropsWithDomainAlignment` (AC1):
+ * - tick value === domainBounds[0] → `start`  (label extends right of position)
+ * - tick value === domainBounds[1] → `end`    (label extends left of position)
+ * - anything else                 → `middle`  (label centered on position)
+ *
+ * When `domainBounds` is omitted the function falls back to the legacy
+ * index-based behaviour (first=start, last=end, others=middle), which is
+ * kept for callers that have not been migrated yet.
+ */
+export declare function hasHorizontalLabelCollision(formattedTicks: string[], rawTicks: NumberValue[], scale: ContinuousScale, domainBounds?: [number, number]): boolean;

package/charts/core/utils/has-horizontal-label-collision.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var has_horizontal_label_collision_exports = {};
+__export(has_horizontal_label_collision_exports, {
+  TICK_LABEL_GAP_PX: () => TICK_LABEL_GAP_PX,
+  hasHorizontalLabelCollision: () => hasHorizontalLabelCollision
+});
+module.exports = __toCommonJS(has_horizontal_label_collision_exports);
+var import_chars_font_width_map = require("../components/text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../components/text-ellipsis/truncate-string.js");
+const TICK_LABEL_GAP_PX = 6;
+function hasHorizontalLabelCollision(formattedTicks, rawTicks, scale, domainBounds) {
+  const nonEmptyIndices = formattedTicks.reduce((acc, label, i) => {
+    if (label !== "") {
+      acc.push(i);
+    }
+    return acc;
+  }, []);
+  const filteredLabels = nonEmptyIndices.map((i) => formattedTicks[i]);
+  const filteredRaw = nonEmptyIndices.map((i) => rawTicks[i]);
+  const n = filteredLabels.length;
+  if (n < 2) {
+    return false;
+  }
+  const positionAt = scale;
+  const bounds = new Array(n);
+  for (let i = 0; i < n; i++) {
+    const width = (0, import_truncate_string.calculateWidth)(
+      filteredLabels[i],
+      import_chars_font_width_map.charsFontWidth12pixelsSize400Map
+    );
+    const pos = positionAt(filteredRaw[i]);
+    let anchor;
+    if (domainBounds !== void 0) {
+      const numericValue = +filteredRaw[i];
+      if (numericValue === domainBounds[0]) {
+        anchor = "start";
+      } else if (numericValue === domainBounds[1]) {
+        anchor = "end";
+      } else {
+        anchor = "middle";
+      }
+    } else {
+      anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+    }
+    if (anchor === "start") {
+      bounds[i] = { left: pos, right: pos + width };
+    } else if (anchor === "end") {
+      bounds[i] = { left: pos - width, right: pos };
+    } else {
+      bounds[i] = { left: pos - width / 2, right: pos + width / 2 };
+    }
+  }
+  for (let i = 0; i < n - 1; i++) {
+    if (bounds[i].right + TICK_LABEL_GAP_PX > bounds[i + 1].left) {
+      return true;
+    }
+  }
+  return false;
+}

package/charts/core/utils/is-feature-enabled.d.ts

@@ -1,6 +1,7 @@
 type FeatureKey = keyof typeof CONFIG;
 declare const CONFIG: {
     histogramToXY: string;
+    timeseriesToXY: string;
 };
 export declare function isFeatureEnabled(key: FeatureKey): boolean;
 export {};

package/charts/core/utils/is-feature-enabled.js

@@ -21,7 +21,8 @@ __export(is_feature_enabled_exports, {
 });
 module.exports = __toCommonJS(is_feature_enabled_exports);
 const CONFIG = {
-  histogramToXY: "atlas-01"
+  histogramToXY: "atlas-01",
+  timeseriesToXY: "atlas-01"
 };
 function isFeatureEnabled(key) {
   const urlParam = new URLSearchParams(window.location.search);

package/charts/gantt-chart/GanttChartLine.css

@@ -1,4 +1,4 @@
-._1pk2ed10-3-5-2 {
+._1pk2ed10-3-6-0 {
   height: 100%;
   width: 100%;
 }

package/charts/gantt-chart/GanttChartLine.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLine_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLine_css_exports);
 var import_GanttChartLine_css_ts_vanilla = require("./GanttChartLine.css");
-var wrapper = "_1pk2ed10-3-5-2";
+var wrapper = "_1pk2ed10-3-6-0";

package/charts/gantt-chart/components/GanttChartLineRenderer.css

@@ -1,4 +1,4 @@
-._mnxak30-3-5-2 {
+._mnxak30-3-6-0 {
   height: 100%;
   display: flex;
   justify-content: center;

package/charts/gantt-chart/components/GanttChartLineRenderer.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLineRenderer_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLineRenderer_css_exports);
 var import_GanttChartLineRenderer_css_ts_vanilla = require("./GanttChartLineRenderer.css");
-var svgWrapperCSS = "_mnxak30-3-5-2";
+var svgWrapperCSS = "_mnxak30-3-6-0";

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.css

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-5-2._1v8s3xl0-3-5-2 {
+._1v8s3xl0-3-6-0._1v8s3xl0-3-6-0 {
   max-height: initial;
   min-width: 160px;
   max-width: 320px;

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartTooltip_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartTooltip_css_exports);
 var import_GanttChartTooltip_css_ts_vanilla = require("./GanttChartTooltip.css");
-var ganttChartTooltipCSS = "_1v8s3xl0-3-5-2";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-6-0";

package/charts/gauge/GaugeChart.d.ts

@@ -23,7 +23,7 @@ export declare const GaugeChart: ((props: PropsWithChildren<GaugeChartProps> & i
         displayName: string;
     };
     Tooltip: {
-        (props: import("./slots/Tooltip.js").GaugeChartTooltipProps): null;
+        (_props: import("./slots/Tooltip.js").GaugeChartTooltipProps): null;
         displayName: string;
     };
 };

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.css

@@ -1,4 +1,4 @@
-._ezp7cy0-3-5-2 {
+._ezp7cy0-3-6-0 {
   width: 100%;
   height: 100%;
   container-type: size;

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.sty.js

@@ -21,4 +21,4 @@ __export(GaugeChartLayout_css_exports, {
 });
 module.exports = __toCommonJS(GaugeChartLayout_css_exports);
 var import_GaugeChartLayout_css_ts_vanilla = require("./GaugeChartLayout.css");
-var layoutContainer = "_ezp7cy0-3-5-2";
+var layoutContainer = "_ezp7cy0-3-6-0";

package/charts/gauge/components/GaugeChartTooltip/GaugeOverlayTooltip.js

@@ -24,7 +24,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_intl = require("react-intl");
 var import_OverlayTooltip = require("../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_useTooltipSeriesActions = require("../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js");
-var import_GaugeChartTooltipNameContext = require("../../contexts/GaugeChartTooltipNameContext.js");
+var import_GaugeChartTooltipContext = require("../../contexts/GaugeChartTooltipContext.js");
 var import_useGaugeChartFormatterContext = require("../../hooks/useGaugeChartFormatterContext.js");
 const GaugeOverlayTooltip = ({
   value,
@@ -32,7 +32,7 @@ const GaugeOverlayTooltip = ({
 }) => {
   const intl = (0, import_react_intl.useIntl)();
   const { formatter, unit } = (0, import_useGaugeChartFormatterContext.useGaugeChartFormatterContext)();
-  const tooltipName = (0, import_GaugeChartTooltipNameContext.useGaugeChartTooltipName)();
+  const { name: tooltipName, template } = (0, import_GaugeChartTooltipContext.useGaugeChartTooltip)();
   const seriesName = tooltipName ?? intl.formatMessage({ defaultMessage: "Value", id: "jc4XDeI4sf7aLs2W" });
   const formattedValue = formatter(value, unit);
   const tooltipItem = {
@@ -45,6 +45,16 @@ const GaugeOverlayTooltip = ({
     (item) => item.id
   );
   const actions = tooltipItem ? () => seriesActions(tooltipItem) : void 0;
+  if (template) {
+    const customItem = {
+      value,
+      formattedValue,
+      color,
+      name: tooltipName,
+      unit: typeof unit === "string" ? unit : void 0
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: template(customItem) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_OverlayTooltip.OverlayTooltip.SeriesItem,
     {

package/charts/gauge/components/GaugeLabel/GaugeLabel.css

@@ -1,22 +1,22 @@
-._18ourc20-3-5-2 {
+._18ourc20-3-6-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-5-2 {
+._18ourc21-3-6-0 {
   width: fit-content;
 }
-._18ourc22-3-5-2 {
+._18ourc22-3-6-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-5-2 {
+._18ourc23-3-6-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-5-2 {
+._18ourc24-3-6-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-5-2 {
+  ._18ourc24-3-6-0 {
     display: block;
   }
 }

package/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js

@@ -24,6 +24,6 @@ __export(GaugeLabel_css_exports, {
 module.exports = __toCommonJS(GaugeLabel_css_exports);
 var import_GaugeLabel_css_ts_vanilla = require("./GaugeLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var elementLabelWrapper = "_18ourc20-3-5-2";
-var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-5-2", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-5-2", hanging: "_18ourc23-3-5-2" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-5-2";
+var elementLabelWrapper = "_18ourc20-3-6-0";
+var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-6-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-6-0", hanging: "_18ourc23-3-6-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-6-0";

package/charts/gauge/components/GaugeLabels.js

@@ -34,7 +34,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_typographyStyles_css = require("../../core/typographyStyles.sty.js");
-var import_constants = require("../constants.js");
 var import_useDefaultLabels = require("../hooks/useDefaultLabels.js");
 var import_useGaugeChartLabelsContext = require("../hooks/useGaugeChartLabelsContext.js");
 var import_useGaugeChartMinMaxLabelsPosition = require("../hooks/useGaugeChartMinMaxLabelsPosition.js");
@@ -43,7 +42,7 @@ var import_GaugeLabelsWrapper = require("./GaugeLabelsWrapper/GaugeLabelsWrapper
 const GaugeLabels = ({ value, prefixIcon }) => {
   const { label } = (0, import_useGaugeChartLabelsContext.useGaugeChartLabelsContext)();
   const { defaultLabel, defaultMaxLabel, defaultMinLabel, defaultValueLabel } = (0, import_useDefaultLabels.useDefaultLabels)(value);
-  const { maxLabelPosition, minLabelPosition } = (0, import_useGaugeChartMinMaxLabelsPosition.useGaugeChartMinMaxLabelsPosition)();
+  const { maxLabelPosition, minLabelPosition, minMaxPadding } = (0, import_useGaugeChartMinMaxLabelsPosition.useGaugeChartMinMaxLabelsPosition)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "g",
@@ -78,7 +77,7 @@ const GaugeLabels = ({ value, prefixIcon }) => {
         {
           value: defaultMinLabel,
           x: minLabelPosition.x,
-          y: minLabelPosition.y + import_constants.MIN_MAX_PADDING,
+          y: minLabelPosition.y + minMaxPadding,
           autoHide: true
         }
       ),
@@ -87,7 +86,7 @@ const GaugeLabels = ({ value, prefixIcon }) => {
         {
           value: defaultMaxLabel,
           x: maxLabelPosition.x,
-          y: maxLabelPosition.y + import_constants.MIN_MAX_PADDING,
+          y: maxLabelPosition.y + minMaxPadding,
           autoHide: true
         }
       )

package/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css

@@ -1,4 +1,4 @@
-._1fbjcz30-3-5-2 {
+._1fbjcz30-3-6-0 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template: "valueLabel" 2fr
@@ -7,9 +7,9 @@
   width: 100%;
   height: 100%;
 }
-._1fbjcz30-3-5-2 > #value-label {
+._1fbjcz30-3-6-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-5-2 > #label {
+._1fbjcz30-3-6-0 > #label {
   grid-area: label;
 }

package/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js

@@ -21,4 +21,4 @@ __export(GaugeLabelsWrapper_css_exports, {
 });
 module.exports = __toCommonJS(GaugeLabelsWrapper_css_exports);
 var import_GaugeLabelsWrapper_css_ts_vanilla = require("./GaugeLabelsWrapper.css");
-var labelsContainer = "_1fbjcz30-3-5-2";
+var labelsContainer = "_1fbjcz30-3-6-0";

package/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.css

@@ -1,17 +1,17 @@
-._l0e5zm0-3-5-2 {
+._l0e5zm0-3-6-0 {
   position: relative;
   height: 100%;
   z-index: 0;
 }
-._l0e5zm1-3-5-2 {
+._l0e5zm1-3-6-0 {
   cursor: default;
   user-select: none;
 }
-._l0e5zm2-3-5-2 {
+._l0e5zm2-3-6-0 {
   position: absolute;
   z-index: 1;
 }
-._l0e5zm3-3-5-2 {
+._l0e5zm3-3-6-0 {
   top: 0;
   left: 0;
   width: 100%;