@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.js

@@ -0,0 +1,116 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  colorAccessor,
+  heightAccessor,
+  widthAccessor,
+  xAccessor,
+  yAccessor
+} from "./rect-accessors.js";
+import {
+  countRealChars,
+  usableLeftSegmentWidth
+} from "./rect-label-utils.js";
+import {
+  rectLabelClipWrapper,
+  rectLabelSpan,
+  rectOverlayContainer
+} from "./RectLabelOverlay.sty.js";
+import { ELLIPSIS_CHARACTER } from "../../../../typography/utils.js";
+import { getCanvasColor } from "../../../core/components/canvas/utils/canvas-color.js";
+import { charsFontWidth12pixelsSize400Map } from "../../../core/components/text-ellipsis/chars-font-width-map.js";
+import { truncateString } from "../../../core/components/text-ellipsis/truncate-string.js";
+import { getColorByContrast } from "../../../core/utils/color-contrast.js";
+import { safeGet } from "../../../core/utils/safe-get.js";
+import { useXYChartColorScales } from "../../hooks/useXYChartColorScales.js";
+import { useXYChartData } from "../../hooks/useXYChartData.js";
+import { useXYChartTruncationMode } from "../../hooks/useXYChartTruncationMode.js";
+import { getCurrentScale } from "../../utils/get-scale.js";
+import { relAccessor } from "../../utils/value-representation.js";
+const RECT_LABEL_MIN_SIZE = 16;
+const RECT_LABEL_PADDING = 4;
+const RECT_LABEL_MIN_REAL_CHARS = 2;
+function RectLabelOverlay({
+  axisIdToScales,
+  series,
+  opacity
+}) {
+  const { datapointMetadataMap, axisIdToScaleDomain, seriesToMetadata } = useXYChartData();
+  const colorScalesMap = useXYChartColorScales();
+  const { truncationMode } = useXYChartTruncationMode();
+  if (!series.hasLabels) {
+    return null;
+  }
+  const colorScale = colorScalesMap.get(series.id);
+  if (!colorScale) {
+    return null;
+  }
+  const xScale = getCurrentScale(axisIdToScales, series.xAxisId);
+  const yScale = getCurrentScale(axisIdToScales, series.yAxisId);
+  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);
+  const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);
+  const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);
+  const getX = xAccessor(xScale, xRelAccessor);
+  const getY = yAccessor(yScale, yRelAccessor);
+  const getW = widthAccessor(xScale, xRelAccessor);
+  const getH = heightAccessor(yScale, yRelAccessor);
+  const getFill = colorAccessor(colorScale, datapointMetadataMap);
+  const containerStyle = opacity !== void 0 ? { opacity } : void 0;
+  const drawnRects = [];
+  const labels = [];
+  for (let i = series.filteredData.length - 1; i >= 0; i--) {
+    const datum = series.filteredData[i];
+    const text = datum?.label;
+    if (!datum || !text) {
+      continue;
+    }
+    const x = getX(datum);
+    const y = getY(datum);
+    const w = getW(datum);
+    const h = getH(datum);
+    if (w < RECT_LABEL_MIN_SIZE || h < RECT_LABEL_MIN_SIZE) {
+      continue;
+    }
+    const bbox = { x, y, w, h };
+    const usableWidth = usableLeftSegmentWidth(bbox, drawnRects);
+    drawnRects.push(bbox);
+    if (usableWidth < RECT_LABEL_MIN_SIZE) {
+      continue;
+    }
+    const availLength = usableWidth - 2 * RECT_LABEL_PADDING;
+    if (availLength < RECT_LABEL_MIN_SIZE) {
+      continue;
+    }
+    const truncated = truncateString(
+      text,
+      availLength,
+      charsFontWidth12pixelsSize400Map,
+      truncationMode
+    );
+    if (truncated.includes(ELLIPSIS_CHARACTER) && countRealChars(truncated) < RECT_LABEL_MIN_REAL_CHARS) {
+      continue;
+    }
+    const textColor = getColorByContrast(getCanvasColor(getFill(datum)));
+    const wrapperStyle = {
+      left: x,
+      top: y,
+      width: usableWidth,
+      height: h
+    };
+    const innerStyle = {
+      left: RECT_LABEL_PADDING,
+      top: h / 2,
+      transform: "translateY(-50%)",
+      width: availLength,
+      color: textColor
+    };
+    labels.push(
+      /* @__PURE__ */ jsx("div", { className: rectLabelClipWrapper, style: wrapperStyle, children: /* @__PURE__ */ jsx("span", { className: rectLabelSpan, style: innerStyle, children: truncated }) }, i)
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: rectOverlayContainer, style: containerStyle, children: labels });
+}
+RectLabelOverlay["displayName"] = "RectLabelOverlay";
+export {
+  RectLabelOverlay
+};
+//# sourceMappingURL=RectLabelOverlay.js.map

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart/components/displays/RectLabelOverlay.tsx"],
+  "sourcesContent": ["import { type CSSProperties, type ReactElement } from 'react';\n\nimport {\n  colorAccessor,\n  heightAccessor,\n  widthAccessor,\n  xAccessor,\n  yAccessor,\n} from './rect-accessors.js';\nimport {\n  type BBox,\n  countRealChars,\n  usableLeftSegmentWidth,\n} from './rect-label-utils.js';\nimport {\n  rectLabelClipWrapper,\n  rectLabelSpan,\n  rectOverlayContainer,\n} from './RectLabelOverlay.sty.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\nimport { getCanvasColor } from '../../../core/components/canvas/utils/canvas-color.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../../core/components/text-ellipsis/truncate-string.js';\nimport { getColorByContrast } from '../../../core/utils/color-contrast.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../context/XYChartScales.context.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../hooks/useXYChartTruncationMode.js';\nimport type { RectSeriesWithDatapoints } from '../../types/xy-chart-internals.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { relAccessor } from '../../utils/value-representation.js';\n\n/** Minimum rect side (in pixels) below which text cannot be readably rendered. */\nconst RECT_LABEL_MIN_SIZE = 16;\n/** Horizontal padding between the rect edge and the label text. */\nconst RECT_LABEL_PADDING = 4;\n/**\n * Minimum count of non-ellipsis characters in the final truncated string.\n * Labels below this (e.g. `\u2026`, `\u2026A`) are dropped as visual noise.\n */\nconst RECT_LABEL_MIN_REAL_CHARS = 2;\n\ninterface RectLabelOverlayProps {\n  axisIdToScales: AxisIdToScales;\n  series: RectSeriesWithDatapoints;\n  opacity?: number;\n}\n\n/**\n * Renders the HTML labels for a single rect series. Each datapoint's label is\n * placed inside the rect and clipped to the rect's bounds \u2014 the portion that\n * would overflow is hidden. This is the key difference from `BarLabelOverlay`,\n * whose labels are allowed to spill outside the bar toward the chart edge.\n *\n * The canvas paints rects in data order, so any rect later in the data appears\n * on top of earlier ones where they overlap. This overlay mirrors that by\n * iterating in reverse and, for each rect, clipping the label to the leftmost\n * horizontal segment that is not covered by an already-drawn (top-most) rect.\n * If a rect's leading edge is itself covered, or the remaining usable segment\n * cannot fit at least a couple of real characters, the label is dropped \u2014\n * this keeps flame graphs readable when siblings share depth and time range.\n *\n * Rendered as a sibling of the `<Canvas>` element (not inside `RectDisplay`)\n * because HTML children of `<canvas>` are fallback content, not visible DOM.\n * See `RectLabelLayout.tsx` for the chart-level wrapper that iterates over\n * labeled rect series and mounts this component.\n */\nexport function RectLabelOverlay({\n  axisIdToScales,\n  series,\n  opacity,\n}: Readonly<RectLabelOverlayProps>) {\n  const { datapointMetadataMap, axisIdToScaleDomain, seriesToMetadata } =\n    useXYChartData();\n  const colorScalesMap = useXYChartColorScales();\n  const { truncationMode } = useXYChartTruncationMode();\n\n  if (!series.hasLabels) {\n    return null;\n  }\n\n  const colorScale = colorScalesMap.get(series.id);\n  if (!colorScale) {\n    return null;\n  }\n\n  const xScale = getCurrentScale(axisIdToScales, series.xAxisId);\n  const yScale = getCurrentScale(axisIdToScales, series.yAxisId);\n  const { xAxis, yAxis } = safeGet(seriesToMetadata, series);\n  const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n  const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n\n  const getX = xAccessor(xScale, xRelAccessor);\n  const getY = yAccessor(yScale, yRelAccessor);\n  const getW = widthAccessor(xScale, xRelAccessor);\n  const getH = heightAccessor(yScale, yRelAccessor);\n  const getFill = colorAccessor(colorScale, datapointMetadataMap);\n\n  const containerStyle: CSSProperties | undefined =\n    opacity !== undefined ? { opacity } : undefined;\n\n  const drawnRects: BBox[] = [];\n  const labels: ReactElement[] = [];\n\n  for (let i = series.filteredData.length - 1; i >= 0; i--) {\n    const datum = series.filteredData[i];\n    const text = datum?.label;\n    if (!datum || !text) {\n      continue;\n    }\n\n    const x = getX(datum);\n    const y = getY(datum);\n    const w = getW(datum);\n    const h = getH(datum);\n\n    if (w < RECT_LABEL_MIN_SIZE || h < RECT_LABEL_MIN_SIZE) {\n      continue;\n    }\n\n    const bbox: BBox = { x, y, w, h };\n    const usableWidth = usableLeftSegmentWidth(bbox, drawnRects);\n    drawnRects.push(bbox);\n\n    if (usableWidth < RECT_LABEL_MIN_SIZE) {\n      continue;\n    }\n\n    const availLength = usableWidth - 2 * RECT_LABEL_PADDING;\n    if (availLength < RECT_LABEL_MIN_SIZE) {\n      continue;\n    }\n\n    const truncated = truncateString(\n      text,\n      availLength,\n      charsFontWidth12pixelsSize400Map,\n      truncationMode,\n    );\n\n    if (\n      truncated.includes(ELLIPSIS_CHARACTER) &&\n      countRealChars(truncated) < RECT_LABEL_MIN_REAL_CHARS\n    ) {\n      continue;\n    }\n\n    const textColor = getColorByContrast(getCanvasColor(getFill(datum)));\n\n    const wrapperStyle: CSSProperties = {\n      left: x,\n      top: y,\n      width: usableWidth,\n      height: h,\n    };\n    const innerStyle: CSSProperties = {\n      left: RECT_LABEL_PADDING,\n      top: h / 2,\n      transform: 'translateY(-50%)',\n      width: availLength,\n      color: textColor,\n    };\n\n    labels.push(\n      <div key={i} className={rectLabelClipWrapper} style={wrapperStyle}>\n        <span className={rectLabelSpan} style={innerStyle}>\n          {truncated}\n        </span>\n      </div>,\n    );\n  }\n\n  return (\n    <div className={rectOverlayContainer} style={containerStyle}>\n      {labels}\n    </div>\n  );\n}\n\nRectLabelOverlay['displayName'] = 'RectLabelOverlay';\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.sty.js

@@ -0,0 +1,10 @@
+import "./RectLabelOverlay.css";
+var rectLabelClipWrapper = "_1a48u8w2-3-11-0";
+var rectLabelSpan = "_1a48u8w1-3-11-0";
+var rectOverlayContainer = "_1a48u8w0-3-11-0";
+export {
+  rectLabelClipWrapper,
+  rectLabelSpan,
+  rectOverlayContainer
+};
+//# sourceMappingURL=RectLabelOverlay.sty.js.map

package/esm/charts/xy-chart/components/displays/RectLabelOverlay.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart/components/displays/RectLabelOverlay.css.ts"],
+  "sourcesContent": ["import './RectLabelOverlay.css';\nexport var rectLabelClipWrapper = '_1a48u8w2-3-11-0';\nexport var rectLabelSpan = '_1a48u8w1-3-11-0';\nexport var rectOverlayContainer = '_1a48u8w0-3-11-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;AAC3B,IAAI,gBAAgB;AACpB,IAAI,uBAAuB;",
+  "names": []
+}

package/esm/charts/xy-chart/components/displays/rect-label-utils.js

@@ -0,0 +1,39 @@
+import { ELLIPSIS_CHARACTER } from "../../../../typography/utils.js";
+function verticallyOverlaps(a, b) {
+  return a.y < b.y + b.h && b.y < a.y + a.h;
+}
+function usableLeftSegmentWidth(bbox, blockers) {
+  const bboxRight = bbox.x + bbox.w;
+  let usableRight = bboxRight;
+  for (const blocker of blockers) {
+    if (!verticallyOverlaps(bbox, blocker)) {
+      continue;
+    }
+    const blockerRight = blocker.x + blocker.w;
+    if (blockerRight <= bbox.x || blocker.x >= bboxRight) {
+      continue;
+    }
+    if (blocker.x <= bbox.x) {
+      return 0;
+    }
+    if (blocker.x < usableRight) {
+      usableRight = blocker.x;
+    }
+  }
+  return usableRight - bbox.x;
+}
+function countRealChars(text) {
+  let count = 0;
+  for (const ch of text) {
+    if (ch !== ELLIPSIS_CHARACTER) {
+      count++;
+    }
+  }
+  return count;
+}
+export {
+  countRealChars,
+  usableLeftSegmentWidth,
+  verticallyOverlaps
+};
+//# sourceMappingURL=rect-label-utils.js.map

package/esm/charts/xy-chart/components/displays/rect-label-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/xy-chart/components/displays/rect-label-utils.ts"],
+  "sourcesContent": ["import { ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\n\n/** Axis-aligned bounding box for a rect (x, y in pixels, w/h in pixels). */\nexport type BBox = {\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n};\n\n/**\n * True when two boxes overlap along the y axis (half-open interval). Used as\n * a cheap filter before checking horizontal occlusion.\n */\nexport function verticallyOverlaps(a: BBox, b: BBox): boolean {\n  return a.y < b.y + b.h && b.y < a.y + a.h;\n}\n\n/**\n * Width of the leftmost horizontal segment of `bbox` that is not covered by\n * any of `blockers` at overlapping y. Returns `0` when the leading edge is\n * itself covered \u2014 the caller uses that as a signal to skip the label.\n *\n * `blockers` are treated as later-painted rects, i.e. drawn on top; the\n * caller must supply them in that order (see `RectLabelOverlay`).\n */\nexport function usableLeftSegmentWidth(bbox: BBox, blockers: BBox[]): number {\n  const bboxRight = bbox.x + bbox.w;\n  let usableRight = bboxRight;\n\n  for (const blocker of blockers) {\n    if (!verticallyOverlaps(bbox, blocker)) {\n      continue;\n    }\n    const blockerRight = blocker.x + blocker.w;\n    if (blockerRight <= bbox.x || blocker.x >= bboxRight) {\n      continue;\n    }\n    if (blocker.x <= bbox.x) {\n      return 0;\n    }\n    if (blocker.x < usableRight) {\n      usableRight = blocker.x;\n    }\n  }\n\n  return usableRight - bbox.x;\n}\n\n/**\n * Count of characters in `text` that are not the ellipsis. Used to skip labels\n * where truncation would leave only visual noise (`\u2026`, `\u2026A`).\n */\nexport function countRealChars(text: string): number {\n  let count = 0;\n  for (const ch of text) {\n    if (ch !== ELLIPSIS_CHARACTER) {\n      count++;\n    }\n  }\n  return count;\n}\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAc5B,SAAS,mBAAmB,GAAS,GAAkB;AAC5D,SAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE;AAC1C;AAUO,SAAS,uBAAuB,MAAY,UAA0B;AAC3E,QAAM,YAAY,KAAK,IAAI,KAAK;AAChC,MAAI,cAAc;AAElB,aAAW,WAAW,UAAU;AAC9B,QAAI,CAAC,mBAAmB,MAAM,OAAO,GAAG;AACtC;AAAA,IACF;AACA,UAAM,eAAe,QAAQ,IAAI,QAAQ;AACzC,QAAI,gBAAgB,KAAK,KAAK,QAAQ,KAAK,WAAW;AACpD;AAAA,IACF;AACA,QAAI,QAAQ,KAAK,KAAK,GAAG;AACvB,aAAO;AAAA,IACT;AACA,QAAI,QAAQ,IAAI,aAAa;AAC3B,oBAAc,QAAQ;AAAA,IACxB;AAAA,EACF;AAEA,SAAO,cAAc,KAAK;AAC5B;AAMO,SAAS,eAAe,MAAsB;AACnD,MAAI,QAAQ;AACZ,aAAW,MAAM,MAAM;AACrB,QAAI,OAAO,oBAAoB;AAC7B;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-10-4 {
+._1lwufqz0-3-11-0 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -1,5 +1,5 @@
 import "./xy-legend.css";
-var shapeIconWrapper = "_1lwufqz0-3-10-4";
+var shapeIconWrapper = "_1lwufqz0-3-11-0";
 export {
   shapeIconWrapper
 };

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/xy-legend.css.ts"],
-  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-10-4';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.js

@@ -3,32 +3,55 @@ import Colors from "@dynatrace/strato-design-tokens/colors";
 import { useCanvas } from "../../../../core/components/canvas/hooks/useCanvas.js";
 import { getCanvasColor } from "../../../../core/components/canvas/utils/canvas-color.js";
 import { DEFAULT_HIGHLIGHTED_OPACITY } from "../../../../core/constants.js";
+import { MIN_BAR_HIGHLIGHT_SIZE_PX } from "../../../constants/defaults.js";
+import { BAR_ID } from "../../../types/xy-chart-internals.js";
 const OUTER_OFFSET = 2;
 const OUTER_SHRINK = 3;
 const INNER_OFFSET = 3;
 const INNER_SHRINK = 5;
 const BORDER_WIDTH = 1;
+const getMinSizeHighlightBar = (point, canvasWidth, canvasHeight) => {
+  const width = Math.max(point.width, MIN_BAR_HIGHLIGHT_SIZE_PX);
+  const height = Math.max(point.height, MIN_BAR_HIGHLIGHT_SIZE_PX);
+  const xExpansion = (width - point.width) / 2;
+  const yExpansion = (height - point.height) / 2;
+  return {
+    x: Math.max(0, Math.min(point.x - xExpansion, canvasWidth - width)),
+    y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),
+    width,
+    height
+  };
+};
+const getCanvasCssSize = (ctx) => {
+  const dpr = window.devicePixelRatio || 1;
+  return {
+    width: ctx.canvas.width / dpr,
+    height: ctx.canvas.height / dpr
+  };
+};
 const HighlightedRectangleCanvas = ({
   points
 }) => {
   const draw = useCallback(
     (ctx) => {
+      const { width: canvasWidth, height: canvasHeight } = getCanvasCssSize(ctx);
       for (const point of points) {
+        const { x, y, width, height } = point.id === BAR_ID ? getMinSizeHighlightBar(point, canvasWidth, canvasHeight) : point;
         ctx.beginPath();
         ctx.lineWidth = BORDER_WIDTH;
         ctx.strokeStyle = getCanvasColor(Colors.Text.Neutral.Default);
         ctx.rect(
-          Number(point.x) + OUTER_OFFSET,
-          Number(point.y) + OUTER_OFFSET,
-          Math.max(0, Number(point.width) - OUTER_SHRINK),
-          Math.max(0, Number(point.height) - OUTER_SHRINK)
+          x + OUTER_OFFSET,
+          y + OUTER_OFFSET,
+          Math.max(0, width - OUTER_SHRINK),
+          Math.max(0, height - OUTER_SHRINK)
         );
         ctx.stroke();
         ctx.closePath();
-        const innerX = Number(point.x) + INNER_OFFSET;
-        const innerY = Number(point.y) + INNER_OFFSET;
-        const innerWidth = Number(point.width) - INNER_SHRINK;
-        const innerHeight = Number(point.height) - INNER_SHRINK;
+        const innerX = x + INNER_OFFSET;
+        const innerY = y + INNER_OFFSET;
+        const innerWidth = width - INNER_SHRINK;
+        const innerHeight = height - INNER_SHRINK;
         if (innerWidth > 0 && innerHeight > 0) {
           ctx.beginPath();
           ctx.lineWidth = BORDER_WIDTH;

package/esm/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/HighlightedRectangleCanvas.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { RectanglePoint } from './types.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { DEFAULT_HIGHLIGHTED_OPACITY } from '../../../../core/constants.js';\n\ninterface HighlightedRectangleCanvasProps {\n  points: RectanglePoint[];\n}\n\nconst OUTER_OFFSET = 2;\nconst OUTER_SHRINK = 3;\nconst INNER_OFFSET = 3;\nconst INNER_SHRINK = 5;\nconst BORDER_WIDTH = 1;\n\nexport const HighlightedRectangleCanvas = ({\n  points,\n}: HighlightedRectangleCanvasProps) => {\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      for (const point of points) {\n        // Outer border\n        ctx.beginPath();\n        ctx.lineWidth = BORDER_WIDTH;\n        ctx.strokeStyle = getCanvasColor(Colors.Text.Neutral.Default);\n        ctx.rect(\n          Number(point.x) + OUTER_OFFSET,\n          Number(point.y) + OUTER_OFFSET,\n          Math.max(0, Number(point.width) - OUTER_SHRINK),\n          Math.max(0, Number(point.height) - OUTER_SHRINK),\n        );\n        ctx.stroke();\n        ctx.closePath();\n\n        // Calculate inner rectangle dimensions\n        const innerX = Number(point.x) + INNER_OFFSET;\n        const innerY = Number(point.y) + INNER_OFFSET;\n        const innerWidth = Number(point.width) - INNER_SHRINK;\n        const innerHeight = Number(point.height) - INNER_SHRINK;\n\n        // Only draw inner border if it has positive size\n        if (innerWidth > 0 && innerHeight > 0) {\n          ctx.beginPath();\n          ctx.lineWidth = BORDER_WIDTH;\n          ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;\n          ctx.strokeStyle = getCanvasColor(Colors.Background.Base.Default);\n          ctx.rect(innerX, innerY, innerWidth, innerHeight);\n          ctx.stroke();\n          ctx.globalAlpha = 1;\n          ctx.closePath();\n        }\n      }\n\n      return false;\n    },\n    [points],\n  );\n\n  useCanvas('Highlighted-rects', draw);\n\n  return null;\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,OAAO,YAAY;AAGnB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAM5C,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AAEd,MAAM,6BAA6B,CAAC;AAAA,EACzC;AACF,MAAuC;AACrC,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,iBAAW,SAAS,QAAQ;AAE1B,YAAI,UAAU;AACd,YAAI,YAAY;AAChB,YAAI,cAAc,eAAe,OAAO,KAAK,QAAQ,OAAO;AAC5D,YAAI;AAAA,UACF,OAAO,MAAM,CAAC,IAAI;AAAA,UAClB,OAAO,MAAM,CAAC,IAAI;AAAA,UAClB,KAAK,IAAI,GAAG,OAAO,MAAM,KAAK,IAAI,YAAY;AAAA,UAC9C,KAAK,IAAI,GAAG,OAAO,MAAM,MAAM,IAAI,YAAY;AAAA,QACjD;AACA,YAAI,OAAO;AACX,YAAI,UAAU;AAGd,cAAM,SAAS,OAAO,MAAM,CAAC,IAAI;AACjC,cAAM,SAAS,OAAO,MAAM,CAAC,IAAI;AACjC,cAAM,aAAa,OAAO,MAAM,KAAK,IAAI;AACzC,cAAM,cAAc,OAAO,MAAM,MAAM,IAAI;AAG3C,YAAI,aAAa,KAAK,cAAc,GAAG;AACrC,cAAI,UAAU;AACd,cAAI,YAAY;AAChB,cAAI,cAAc;AAClB,cAAI,cAAc,eAAe,OAAO,WAAW,KAAK,OAAO;AAC/D,cAAI,KAAK,QAAQ,QAAQ,YAAY,WAAW;AAChD,cAAI,OAAO;AACX,cAAI,cAAc;AAClB,cAAI,UAAU;AAAA,QAChB;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { RectanglePoint } from './types.js';\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../../core/components/canvas/utils/canvas-color.js';\nimport { DEFAULT_HIGHLIGHTED_OPACITY } from '../../../../core/constants.js';\nimport { MIN_BAR_HIGHLIGHT_SIZE_PX } from '../../../constants/defaults.js';\nimport { BAR_ID } from '../../../types/xy-chart-internals.js';\n\ninterface HighlightedRectangleCanvasProps {\n  points: RectanglePoint[];\n}\n\nconst OUTER_OFFSET = 2;\nconst OUTER_SHRINK = 3;\nconst INNER_OFFSET = 3;\nconst INNER_SHRINK = 5;\nconst BORDER_WIDTH = 1;\n\nconst getMinSizeHighlightBar = (\n  point: RectanglePoint,\n  canvasWidth: number,\n  canvasHeight: number,\n) => {\n  const width = Math.max(point.width, MIN_BAR_HIGHLIGHT_SIZE_PX);\n  const height = Math.max(point.height, MIN_BAR_HIGHLIGHT_SIZE_PX);\n  const xExpansion = (width - point.width) / 2;\n  const yExpansion = (height - point.height) / 2;\n\n  return {\n    x: Math.max(0, Math.min(point.x - xExpansion, canvasWidth - width)),\n    y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),\n    width,\n    height,\n  };\n};\n\nconst getCanvasCssSize = (ctx: CanvasRenderingContext2D) => {\n  const dpr = window.devicePixelRatio || 1;\n  return {\n    width: ctx.canvas.width / dpr,\n    height: ctx.canvas.height / dpr,\n  };\n};\n\nexport const HighlightedRectangleCanvas = ({\n  points,\n}: HighlightedRectangleCanvasProps) => {\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      const { width: canvasWidth, height: canvasHeight } =\n        getCanvasCssSize(ctx);\n\n      for (const point of points) {\n        const { x, y, width, height } =\n          point.id === BAR_ID\n            ? getMinSizeHighlightBar(point, canvasWidth, canvasHeight)\n            : point;\n\n        // Outer border\n        ctx.beginPath();\n        ctx.lineWidth = BORDER_WIDTH;\n        ctx.strokeStyle = getCanvasColor(Colors.Text.Neutral.Default);\n        ctx.rect(\n          x + OUTER_OFFSET,\n          y + OUTER_OFFSET,\n          Math.max(0, width - OUTER_SHRINK),\n          Math.max(0, height - OUTER_SHRINK),\n        );\n        ctx.stroke();\n        ctx.closePath();\n\n        // Calculate inner rectangle dimensions\n        const innerX = x + INNER_OFFSET;\n        const innerY = y + INNER_OFFSET;\n        const innerWidth = width - INNER_SHRINK;\n        const innerHeight = height - INNER_SHRINK;\n\n        // Only draw inner border if it has positive size\n        if (innerWidth > 0 && innerHeight > 0) {\n          ctx.beginPath();\n          ctx.lineWidth = BORDER_WIDTH;\n          ctx.globalAlpha = DEFAULT_HIGHLIGHTED_OPACITY;\n          ctx.strokeStyle = getCanvasColor(Colors.Background.Base.Default);\n          ctx.rect(innerX, innerY, innerWidth, innerHeight);\n          ctx.stroke();\n          ctx.globalAlpha = 1;\n          ctx.closePath();\n        }\n      }\n\n      return false;\n    },\n    [points],\n  );\n\n  useCanvas('Highlighted-rects', draw);\n\n  return null;\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,OAAO,YAAY;AAGnB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,mCAAmC;AAC5C,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AAMvB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,eAAe;AAErB,MAAM,yBAAyB,CAC7B,OACA,aACA,iBACG;AACH,QAAM,QAAQ,KAAK,IAAI,MAAM,OAAO,yBAAyB;AAC7D,QAAM,SAAS,KAAK,IAAI,MAAM,QAAQ,yBAAyB;AAC/D,QAAM,cAAc,QAAQ,MAAM,SAAS;AAC3C,QAAM,cAAc,SAAS,MAAM,UAAU;AAE7C,SAAO;AAAA,IACL,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI,YAAY,cAAc,KAAK,CAAC;AAAA,IAClE,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI,YAAY,eAAe,MAAM,CAAC;AAAA,IACpE;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,mBAAmB,CAAC,QAAkC;AAC1D,QAAM,MAAM,OAAO,oBAAoB;AACvC,SAAO;AAAA,IACL,OAAO,IAAI,OAAO,QAAQ;AAAA,IAC1B,QAAQ,IAAI,OAAO,SAAS;AAAA,EAC9B;AACF;AAEO,MAAM,6BAA6B,CAAC;AAAA,EACzC;AACF,MAAuC;AACrC,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,YAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAC/C,iBAAiB,GAAG;AAEtB,iBAAW,SAAS,QAAQ;AAC1B,cAAM,EAAE,GAAG,GAAG,OAAO,OAAO,IAC1B,MAAM,OAAO,SACT,uBAAuB,OAAO,aAAa,YAAY,IACvD;AAGN,YAAI,UAAU;AACd,YAAI,YAAY;AAChB,YAAI,cAAc,eAAe,OAAO,KAAK,QAAQ,OAAO;AAC5D,YAAI;AAAA,UACF,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,KAAK,IAAI,GAAG,QAAQ,YAAY;AAAA,UAChC,KAAK,IAAI,GAAG,SAAS,YAAY;AAAA,QACnC;AACA,YAAI,OAAO;AACX,YAAI,UAAU;AAGd,cAAM,SAAS,IAAI;AACnB,cAAM,SAAS,IAAI;AACnB,cAAM,aAAa,QAAQ;AAC3B,cAAM,cAAc,SAAS;AAG7B,YAAI,aAAa,KAAK,cAAc,GAAG;AACrC,cAAI,UAAU;AACd,cAAI,YAAY;AAChB,cAAI,cAAc;AAClB,cAAI,cAAc,eAAe,OAAO,WAAW,KAAK,OAAO;AAC/D,cAAI,KAAK,QAAQ,QAAQ,YAAY,WAAW;AAChD,cAAI,OAAO;AACX,cAAI,cAAc;AAClB,cAAI,UAAU;AAAA,QAChB;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,qBAAqB,IAAI;AAEnC,SAAO;AACT;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-10-4 {
+._1bbe5uo0-3-11-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useMemo } from "react";
+import { useContext, useMemo } from "react";
 import { crosshair } from "./XYChartCrosshair.sty.js";
 import { plotLayout } from "../../../../core/components/chart-grid/ChartGrid.sty.js";
 import { useGridPlotSize } from "../../../../core/components/chart-grid/hooks/useGridPlotSize.js";
@@ -11,6 +11,7 @@ import {
   useTooltipSnapshot
 } from "../../../../core/components/overlay-tooltip/selectors.js";
 import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
+import { ChartVariantContext } from "../../../../core/context/ChartVariantContext.js";
 import { useApplyCallbackOnScroll } from "../../../../core/hooks/useApplyCallbackOnScroll.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
 import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
@@ -87,6 +88,7 @@ function XYChartCrosshairLines({
     isHorizontal,
     isStacked
   ]);
+  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);
   const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };
   if (!position) {
     return null;
@@ -96,8 +98,8 @@ function XYChartCrosshairLines({
   const rightOffset = labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right) ? thresholdOffset.right : 0;
   const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;
   const isBand = variant === "band";
-  const showHorizontalCrosshair = !isBand || isHorizontal || !pinned;
-  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;
+  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden;
+  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden;
   return /* @__PURE__ */ jsxs("svg", { className: clsx(plotLayout, crosshair), children: [
     showHorizontalCrosshair && /* @__PURE__ */ jsx(
       HorizontalCrosshair,

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport {\n  UndefinedContent,\n  type XYChartTooltipMetadata,\n} from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent =\n    (data.metadata as XYChartTooltipMetadata | undefined)?.preferred ??\n    UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair = !isBand || isHorizontal || !pinned;\n  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const hasVisibleSeriesOnThresholdAxis = (() => {\n    if (!filteredSeriesIds) {\n      return (_axisIds: Set<string>) => true;\n    }\n    const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n      ([series]) => filteredSeriesIds.has(series.id),\n    );\n    return (axisIds: Set<string>) => {\n      return visibleSeriesEntries.some(([, series]) =>\n        axisIds.has(series.yAxis?.id ?? ''),\n      );\n    };\n  })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n    formatCategory,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n    />\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useContext, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartVariantContext } from '../../../../core/context/ChartVariantContext.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport {\n  UndefinedContent,\n  type XYChartTooltipMetadata,\n} from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent =\n    (data.metadata as XYChartTooltipMetadata | undefined)?.preferred ??\n    UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const { crosshair: crosshairConfig } = useContext(ChartVariantContext);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair =\n    (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden;\n  const showVerticalCrosshair =\n    (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const hasVisibleSeriesOnThresholdAxis = (() => {\n    if (!filteredSeriesIds) {\n      return (_axisIds: Set<string>) => true;\n    }\n    const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n      ([series]) => filteredSeriesIds.has(series.id),\n    );\n    return (axisIds: Set<string>) => {\n      return visibleSeriesEntries.some(([, series]) =>\n        axisIds.has(series.yAxis?.id ?? ''),\n      );\n    };\n  })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n    formatCategory,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n    />\n  );\n}\n"],
+  "mappings": "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",
   "names": ["relativeX", "relativeY", "pinned"]
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js

@@ -1,5 +1,5 @@
 import "./XYChartCrosshair.css";
-var crosshair = "_1bbe5uo0-3-10-4";
+var crosshair = "_1bbe5uo0-3-11-0";
 export {
   crosshair
 };

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css.ts"],
-  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-10-4';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.css

@@ -1,4 +1,4 @@
-._cd1yys0-3-10-4 {
+._cd1yys0-3-11-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-10-4 {
+._cd1yys1-3-11-0 {
   top: 0px;
   left: 0px;
   width: calc(100% + 1px);

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartExplore.css";
-var datapointIndicatorLayout = "_cd1yys1-3-10-4 _13lzg4k0-3-10-4";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-10-4 _13lzg4k0-3-10-4";
+var datapointIndicatorLayout = "_cd1yys1-3-11-0 _13lzg4k0-3-11-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-11-0 _13lzg4k0-3-11-0";
 export {
   datapointIndicatorLayout,
   datapointIndicatorShiftedLayout

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartExplore.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-10-4 _13lzg4k0-3-10-4';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-10-4 _13lzg4k0-3-10-4';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-11-0 _13lzg4k0-3-11-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-11-0 _13lzg4k0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,2BAA2B;AAC/B,IAAI,kCAAkC;",
   "names": []
 }

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-10-4 {
+._1mfu0sw0-3-11-0 {
   z-index: 2;
 }

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js

@@ -1,6 +1,6 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartThresholdIndicators.css";
-var thresholdPlot = "_1mfu0sw0-3-10-4 _13lzg4k0-3-10-4";
+var thresholdPlot = "_1mfu0sw0-3-11-0 _13lzg4k0-3-11-0";
 export {
   thresholdPlot
 };

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-10-4 _13lzg4k0-3-10-4';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-11-0 _13lzg4k0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/DownloadDataButton.js

@@ -8,7 +8,7 @@ import { useDownload } from "../../hooks/useDownload.js";
 import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
 import { buildAndDownloadCsv } from "../../utils/build-and-download-csv.js";
-const DownloadDataButton = () => {
+const DownloadDataButton = ({ divider }) => {
   const downloadDataButtonRef = useRef(null);
   const tabIndex = useA11yToolbarTabIndex("download");
   const intl = useIntl();
@@ -39,7 +39,7 @@ const DownloadDataButton = () => {
       onKeyDown: handleDownloadDataKeyboard,
       onClick: handleDownloadDataToolbar,
       tabIndex,
-      divider: "left",
+      divider,
       "data-dt-name": "ToolbarDownloadData"
     }
   );

package/esm/charts/xy-chart/components/toolbar/DownloadDataButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/DownloadDataButton.tsx"],
-  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { useDownload } from '../../hooks/useDownload.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\nexport const DownloadDataButton = () => {\n  const downloadDataButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex('download');\n  const intl = useIntl();\n  const { downloadDataCallback } = useDownload();\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const triggerDownload = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n      downloadDataCallback,\n    );\n  };\n\n  const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      triggerDownload();\n    }\n  };\n\n  const handleDownloadDataToolbar = () => {\n    triggerDownload();\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={downloadDataButtonRef}\n      prefixIcon={<DownloadIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.downloadAsCsv)}\n      onKeyDown={handleDownloadDataKeyboard}\n      onClick={handleDownloadDataToolbar}\n      tabIndex={tabIndex}\n      divider=\"left\"\n      data-dt-name=\"ToolbarDownloadData\"\n    />\n  );\n};\n\nDownloadDataButton['displayName'] = 'DownloadDataButton';\n"],
-  "mappings": "AA0CkB;AA1ClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAE7B,MAAM,qBAAqB,MAAM;AACtC,QAAM,wBAAwB,OAA0B,IAAI;AAC5D,QAAM,WAAW,uBAAuB,UAAU;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,qBAAqB,IAAI,YAAY;AAC7C,QAAM,EAAE,sBAAsB,sBAAsB,iBAAiB,IACnE,eAAe;AAEjB,QAAM,kBAAkB,MAAM;AAC5B;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAI,MAAM,QAAQ,SAAS;AACzB,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,4BAA4B,MAAM;AACtC,oBAAgB;AAAA,EAClB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,gBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,aAAa;AAAA,MAC9D,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,SAAQ;AAAA,MACR,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { useDownload } from '../../hooks/useDownload.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\nexport const DownloadDataButton = ({ divider }: { divider?: 'left' }) => {\n  const downloadDataButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex('download');\n  const intl = useIntl();\n  const { downloadDataCallback } = useDownload();\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const triggerDownload = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n      downloadDataCallback,\n    );\n  };\n\n  const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      triggerDownload();\n    }\n  };\n\n  const handleDownloadDataToolbar = () => {\n    triggerDownload();\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={downloadDataButtonRef}\n      prefixIcon={<DownloadIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.downloadAsCsv)}\n      onKeyDown={handleDownloadDataKeyboard}\n      onClick={handleDownloadDataToolbar}\n      tabIndex={tabIndex}\n      divider={divider}\n      data-dt-name=\"ToolbarDownloadData\"\n    />\n  );\n};\n\nDownloadDataButton['displayName'] = 'DownloadDataButton';\n"],
+  "mappings": "AA0CkB;AA1ClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAE7B,MAAM,qBAAqB,CAAC,EAAE,QAAQ,MAA4B;AACvE,QAAM,wBAAwB,OAA0B,IAAI;AAC5D,QAAM,WAAW,uBAAuB,UAAU;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,qBAAqB,IAAI,YAAY;AAC7C,QAAM,EAAE,sBAAsB,sBAAsB,iBAAiB,IACnE,eAAe;AAEjB,QAAM,kBAAkB,MAAM;AAC5B;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAI,MAAM,QAAQ,SAAS;AACzB,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,4BAA4B,MAAM;AACtC,oBAAgB;AAAA,EAClB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,gBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,aAAa;AAAA,MAC9D,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }