@dynatrace/strato-components 3.11.1 → 3.11.2

package/esm/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.js

@@ -1,5 +1,7 @@
-import { useCallback } from "react";
-import { isElement } from "react-is";
+import {
+  isValidElement,
+  useCallback
+} from "react";
 import { CONTENT_OFFSET_Y, VALUE_MARKER_WIDTH } from "./constants.js";
 import { calculateCenteredIcon } from "./utils/calculate-centered-icon.js";
 import { calculateCenteredText } from "./utils/calculate-centered-text.js";
@@ -70,7 +72,7 @@ const ValueMarkerRenderer = (props) => {
       }
       applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);
       ctx.closePath();
-      if (isElement(children)) {
+      if (isValidElement(children)) {
         const iconX = calculateCenteredIcon(x, orientation);
         renderIconContent(ctx, children, iconImages, iconX, y);
       } else if (typeof children === "string" && EXTENDED_AND_COLORED_EMOJI_REGEX.test(children)) {

package/esm/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../../src/charts/core/components/annotations/components/canvas/renderers/value-marker-renderer/ValueMarkerRenderer.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactNode, useCallback } from 'react';\nimport { isElement } from 'react-is';\n\nimport { CONTENT_OFFSET_Y, VALUE_MARKER_WIDTH } from './constants.js';\nimport { ValueMarkerPointerPosition } from './types.js';\nimport { calculateCenteredIcon } from './utils/calculate-centered-icon.js';\nimport { calculateCenteredText } from './utils/calculate-centered-text.js';\nimport { getMarkerGeometry } from './utils/get-marker-geometry.js';\nimport { useCanvas } from '../../../../../canvas/hooks/useCanvas.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../../constants.js';\nimport { applyMarkerStyles } from '../../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../../utils/render-text-in-canvas.js';\n\nconst EXTENDED_AND_COLORED_EMOJI_REGEX =\n  /(\\p{Emoji}\\uFE0F|\\p{Emoji_Presentation})/gu;\n\nconst isEmojiSymbol = (text: ReactNode) =>\n  typeof text === 'string' &&\n  text.match(EXTENDED_AND_COLORED_EMOJI_REGEX)?.length === 1;\n\n// In retina display emojis are a little bit smaller.\nconst EMOJI_RETINA_OFFSET = 1.5;\n\nexport type ValueMarkerRendererProps = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  fillColor: string;\n  strokeColor: string;\n  opacity?: number;\n  brightness?: string;\n  orientation?: ValueMarkerPointerPosition;\n  symbolColor?: string;\n};\n\nfunction renderStringToContext(\n  ctx: CanvasRenderingContext2D,\n  children: string,\n  x: number,\n  width: number,\n  orientation: ValueMarkerPointerPosition,\n  y: number,\n  fillColor: string,\n  symbolColor?: string,\n) {\n  const contentWidth = ctx.measureText(children).width;\n  const xOffset = calculateCenteredText(x, width, orientation, contentWidth);\n  const contentOffset = y + CONTENT_OFFSET_Y;\n  renderTextContent(\n    ctx,\n    children,\n    xOffset,\n    contentOffset,\n    orientation,\n    fillColor,\n    symbolColor,\n  );\n}\n\nexport const ValueMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    x,\n    y,\n    fillColor,\n    strokeColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    width: widthProp,\n    orientation = 'center',\n    symbolColor,\n  } = props;\n\n  const width = Math.max(widthProp, VALUE_MARKER_WIDTH);\n  const geometry = getMarkerGeometry(\n    orientation,\n    x,\n    y - MARKER_STROKE_WIDTH,\n    isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n  );\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      // Web-kit browsers need to move to the initial point to avoid weird behavior: APPDEV-8494\n      ctx.moveTo(geometry[0].x, geometry[0].y);\n      for (let i = 0; i < geometry.length; i += 2) {\n        const vertex = geometry[i];\n        const lineBisect = geometry[i + 1];\n\n        ctx.arcTo(\n          vertex.x - CANVAS_PIXEL_OFFSET,\n          vertex.y - CANVAS_PIXEL_OFFSET,\n          lineBisect.x - CANVAS_PIXEL_OFFSET,\n          lineBisect.y - CANVAS_PIXEL_OFFSET,\n          MARKER_BORDER_RADIUS,\n        );\n      }\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isElement(children)) {\n        const iconX = calculateCenteredIcon(x, orientation);\n\n        renderIconContent(ctx, children, iconImages, iconX, y);\n      } else if (\n        typeof children === 'string' &&\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children)\n      ) {\n        // this makes no sense, but if I remove this assertion, a weird behavior is shown in retina.\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children);\n        const retinaOffset = devicePixelRatio > 1 ? EMOJI_RETINA_OFFSET : 0;\n        renderStringToContext(\n          ctx,\n          children,\n          x + retinaOffset,\n          isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n          orientation,\n          y,\n          fillColor,\n          symbolColor,\n        );\n      } else {\n        renderStringToContext(\n          ctx,\n          children as string,\n          x,\n          width,\n          orientation,\n          y,\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      geometry,\n      opacity,\n      fillColor,\n      children,\n      iconImages,\n      x,\n      y,\n      brightness,\n      width,\n      symbolColor,\n    ],\n  );\n\n  useCanvas('annotations-value-marker', draw);\n\n  return null;\n};\n"],
-  "mappings": "AAAA,SAAiD,mBAAmB;AACpE,SAAS,iBAAiB;AAE1B,SAAS,kBAAkB,0BAA0B;AAErD,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mCACJ;AAEF,MAAM,gBAAgB,CAAC,SACrB,OAAO,SAAS,YAChB,KAAK,MAAM,gCAAgC,GAAG,WAAW;AAG3D,MAAM,sBAAsB;AAe5B,SAAS,sBACP,KACA,UACA,GACA,OACA,aACA,GACA,WACA,aACA;AACA,QAAM,eAAe,IAAI,YAAY,QAAQ,EAAE;AAC/C,QAAM,UAAU,sBAAsB,GAAG,OAAO,aAAa,YAAY;AACzE,QAAM,gBAAgB,IAAI;AAC1B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AAEJ,QAAM,QAAQ,KAAK,IAAI,WAAW,kBAAkB;AACpD,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,EACjD;AAEA,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AAEd,UAAI,OAAO,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;AACvC,eAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;AAC3C,cAAM,SAAS,SAAS,CAAC;AACzB,cAAM,aAAa,SAAS,IAAI,CAAC;AAEjC,YAAI;AAAA,UACF,OAAO,IAAI;AAAA,UACX,OAAO,IAAI;AAAA,UACX,WAAW,IAAI;AAAA,UACf,WAAW,IAAI;AAAA,UACf;AAAA,QACF;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,UAAU,QAAQ,GAAG;AACvB,cAAM,QAAQ,sBAAsB,GAAG,WAAW;AAElD,0BAAkB,KAAK,UAAU,YAAY,OAAO,CAAC;AAAA,MACvD,WACE,OAAO,aAAa,YACpB,iCAAiC,KAAK,QAAQ,GAC9C;AAEA,yCAAiC,KAAK,QAAQ;AAC9C,cAAM,eAAe,mBAAmB,IAAI,sBAAsB;AAClE;AAAA,UACE;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,UAC/C;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,OAAO;AACL;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;",
+  "sourcesContent": ["import {\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n} from 'react';\n\nimport { CONTENT_OFFSET_Y, VALUE_MARKER_WIDTH } from './constants.js';\nimport { ValueMarkerPointerPosition } from './types.js';\nimport { calculateCenteredIcon } from './utils/calculate-centered-icon.js';\nimport { calculateCenteredText } from './utils/calculate-centered-text.js';\nimport { getMarkerGeometry } from './utils/get-marker-geometry.js';\nimport { useCanvas } from '../../../../../canvas/hooks/useCanvas.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../../constants.js';\nimport { applyMarkerStyles } from '../../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../../utils/render-text-in-canvas.js';\n\nconst EXTENDED_AND_COLORED_EMOJI_REGEX =\n  /(\\p{Emoji}\\uFE0F|\\p{Emoji_Presentation})/gu;\n\nconst isEmojiSymbol = (text: ReactNode) =>\n  typeof text === 'string' &&\n  text.match(EXTENDED_AND_COLORED_EMOJI_REGEX)?.length === 1;\n\n// In retina display emojis are a little bit smaller.\nconst EMOJI_RETINA_OFFSET = 1.5;\n\nexport type ValueMarkerRendererProps = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  fillColor: string;\n  strokeColor: string;\n  opacity?: number;\n  brightness?: string;\n  orientation?: ValueMarkerPointerPosition;\n  symbolColor?: string;\n};\n\nfunction renderStringToContext(\n  ctx: CanvasRenderingContext2D,\n  children: string,\n  x: number,\n  width: number,\n  orientation: ValueMarkerPointerPosition,\n  y: number,\n  fillColor: string,\n  symbolColor?: string,\n) {\n  const contentWidth = ctx.measureText(children).width;\n  const xOffset = calculateCenteredText(x, width, orientation, contentWidth);\n  const contentOffset = y + CONTENT_OFFSET_Y;\n  renderTextContent(\n    ctx,\n    children,\n    xOffset,\n    contentOffset,\n    orientation,\n    fillColor,\n    symbolColor,\n  );\n}\n\nexport const ValueMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    x,\n    y,\n    fillColor,\n    strokeColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    width: widthProp,\n    orientation = 'center',\n    symbolColor,\n  } = props;\n\n  const width = Math.max(widthProp, VALUE_MARKER_WIDTH);\n  const geometry = getMarkerGeometry(\n    orientation,\n    x,\n    y - MARKER_STROKE_WIDTH,\n    isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n  );\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      // Web-kit browsers need to move to the initial point to avoid weird behavior: APPDEV-8494\n      ctx.moveTo(geometry[0].x, geometry[0].y);\n      for (let i = 0; i < geometry.length; i += 2) {\n        const vertex = geometry[i];\n        const lineBisect = geometry[i + 1];\n\n        ctx.arcTo(\n          vertex.x - CANVAS_PIXEL_OFFSET,\n          vertex.y - CANVAS_PIXEL_OFFSET,\n          lineBisect.x - CANVAS_PIXEL_OFFSET,\n          lineBisect.y - CANVAS_PIXEL_OFFSET,\n          MARKER_BORDER_RADIUS,\n        );\n      }\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isValidElement(children)) {\n        const iconX = calculateCenteredIcon(x, orientation);\n\n        renderIconContent(ctx, children, iconImages, iconX, y);\n      } else if (\n        typeof children === 'string' &&\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children)\n      ) {\n        // this makes no sense, but if I remove this assertion, a weird behavior is shown in retina.\n        EXTENDED_AND_COLORED_EMOJI_REGEX.test(children);\n        const retinaOffset = devicePixelRatio > 1 ? EMOJI_RETINA_OFFSET : 0;\n        renderStringToContext(\n          ctx,\n          children,\n          x + retinaOffset,\n          isEmojiSymbol(children) ? VALUE_MARKER_WIDTH : width,\n          orientation,\n          y,\n          fillColor,\n          symbolColor,\n        );\n      } else {\n        renderStringToContext(\n          ctx,\n          children as string,\n          x,\n          width,\n          orientation,\n          y,\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      geometry,\n      opacity,\n      fillColor,\n      children,\n      iconImages,\n      x,\n      y,\n      brightness,\n      width,\n      symbolColor,\n    ],\n  );\n\n  useCanvas('annotations-value-marker', draw);\n\n  return null;\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EAGA;AAAA,OACK;AAEP,SAAS,kBAAkB,0BAA0B;AAErD,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mCACJ;AAEF,MAAM,gBAAgB,CAAC,SACrB,OAAO,SAAS,YAChB,KAAK,MAAM,gCAAgC,GAAG,WAAW;AAG3D,MAAM,sBAAsB;AAe5B,SAAS,sBACP,KACA,UACA,GACA,OACA,aACA,GACA,WACA,aACA;AACA,QAAM,eAAe,IAAI,YAAY,QAAQ,EAAE;AAC/C,QAAM,UAAU,sBAAsB,GAAG,OAAO,aAAa,YAAY;AACzE,QAAM,gBAAgB,IAAI;AAC1B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AAEJ,QAAM,QAAQ,KAAK,IAAI,WAAW,kBAAkB;AACpD,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,EACjD;AAEA,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AAEd,UAAI,OAAO,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;AACvC,eAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GAAG;AAC3C,cAAM,SAAS,SAAS,CAAC;AACzB,cAAM,aAAa,SAAS,IAAI,CAAC;AAEjC,YAAI;AAAA,UACF,OAAO,IAAI;AAAA,UACX,OAAO,IAAI;AAAA,UACX,WAAW,IAAI;AAAA,UACf,WAAW,IAAI;AAAA,UACf;AAAA,QACF;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,eAAe,QAAQ,GAAG;AAC5B,cAAM,QAAQ,sBAAsB,GAAG,WAAW;AAElD,0BAAkB,KAAK,UAAU,YAAY,OAAO,CAAC;AAAA,MACvD,WACE,OAAO,aAAa,YACpB,iCAAiC,KAAK,QAAQ,GAC9C;AAEA,yCAAiC,KAAK,QAAQ;AAC9C,cAAM,eAAe,mBAAmB,IAAI,sBAAsB;AAClE;AAAA,UACE;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ,cAAc,QAAQ,IAAI,qBAAqB;AAAA,UAC/C;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF,OAAO;AACL;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

@@ -1,4 +1,4 @@
-._107efci0-3-11-1 {
+._107efci0-3-11-2 {
   position: absolute;
   top: 0;
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsOverlays.css";
-var annotationsOverlay = "_107efci0-3-11-1";
+var annotationsOverlay = "_107efci0-3-11-2";
 export {
   annotationsOverlay
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css.ts"],
-  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-11-1';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-11-1 {
+._uzgvu30-3-11-2 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsScrollWrapper.css";
-var scrollWrapper = "_uzgvu30-3-11-1";
+var scrollWrapper = "_uzgvu30-3-11-2";
 export {
   scrollWrapper
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css.ts"],
-  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-11-1';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/core/components/annotations/utils/aggregate-markers-coords.js

@@ -1,5 +1,7 @@
-import { Children } from "react";
-import { isElement } from "react-is";
+import {
+  Children,
+  isValidElement
+} from "react";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import { calculateRangeMarkerCoordinates } from "./calculate-expand-marker-coordinates.js";
 import { resolveValueMarkerHitArea } from "./resolve-value-marker-hit-area.js";
@@ -67,7 +69,7 @@ function aggregateMarkersCoords(children, trackWidth) {
             onClick: marker.props.onClick
           };
           markersPerTrack[trackIndex].push(markerAtomCoords);
-          if (isElement(marker.props.content)) {
+          if (isValidElement(marker.props.content)) {
             const iconColor = marker.props.symbolColor ?? getColorByContrast(
               getTokenComputedStyle(marker.props.color),
               getColorTokenDefaultValue(Colors.Text.Neutral.OnAccent.Default),

package/esm/charts/core/components/annotations/utils/aggregate-markers-coords.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/utils/aggregate-markers-coords.ts"],
-  "sourcesContent": ["import { Children, type ReactElement, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { calculateRangeMarkerCoordinates } from './calculate-expand-marker-coordinates.js';\nimport { resolveValueMarkerHitArea } from './resolve-value-marker-hit-area.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../utils/color-contrast.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { VALUE_MARKER_WIDTH } from '../components/canvas/renderers/value-marker-renderer/constants.js';\nimport { calculateMarkerWidthAndContent } from '../components/canvas/utils/calculate-marker-width-and-content.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport {\n  MarkerEventHandlersMap,\n  TrackEventHandlersMap,\n} from '../types/event-handlers.js';\nimport { MarkerCoords, MarkersCoordsPerTrack } from '../types/marker-coords.js';\nimport { MarkerAtomProps } from '../types/marker.js';\nimport { TrackAtomProps } from '../types/track.js';\n\nexport function aggregateMarkersCoords(\n  children: ReactNode,\n  trackWidth: number,\n) {\n  const markersPerTrack: MarkersCoordsPerTrack[] = [];\n\n  const markerEventHandlers: MarkerEventHandlersMap = {};\n  const trackEventHandlers: TrackEventHandlersMap = {};\n\n  const tracksConfig: (TrackAtomProps & { markers: MarkerAtomProps[] })[] = [];\n  const icons: Array<[ReactElement, string]> = [];\n\n  Children.forEach(children, (track, trackIndex) => {\n    if (isSlot(track, TrackAtom)) {\n      markersPerTrack[trackIndex] = [];\n\n      trackEventHandlers[trackIndex] = {\n        onMouseEnter: track.props.onMouseEnter,\n      };\n\n      const markersByTrackConfig: MarkerAtomProps[] = [];\n      Children.forEach(track.props.children, (marker) => {\n        if (isSlot(marker, MarkerAtom)) {\n          let markerAtomCoords: MarkerCoords;\n          markersByTrackConfig.push(marker.props);\n\n          const { textOverflow, content, x, width } = marker.props;\n\n          if (marker.props.width === 0) {\n            const {\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            } = calculateMarkerWidthAndContent({\n              trackWidth,\n              trackLeftBoundary: 0,\n              content,\n              width: VALUE_MARKER_WIDTH,\n              x,\n              isRange: false,\n              textOverflow,\n              truncateMode: marker.props.truncateMode,\n            });\n            markerAtomCoords = resolveValueMarkerHitArea(\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            );\n          } else {\n            markerAtomCoords = calculateRangeMarkerCoordinates(\n              content,\n              x,\n              width,\n              trackWidth,\n              textOverflow,\n            );\n          }\n\n          markerEventHandlers[`${trackIndex}_${markerAtomCoords.join('_')}`] = {\n            onMouseEnter: marker.props.onMouseEnter,\n            onMouseMove: marker.props.onMouseMove,\n            onMouseLeave: marker.props.onMouseLeave,\n            onClick: marker.props.onClick,\n          };\n\n          markersPerTrack[trackIndex].push(markerAtomCoords);\n          if (isElement(marker.props.content)) {\n            const iconColor =\n              marker.props.symbolColor ??\n              getColorByContrast(\n                getTokenComputedStyle(marker.props.color),\n                getColorTokenDefaultValue(Colors.Text.Neutral.OnAccent.Default),\n                getColorTokenDefaultValue(Colors.Text.Neutral.Default),\n              );\n            icons.push([marker.props.content, iconColor]);\n          }\n        }\n      });\n\n      tracksConfig.push({ ...track.props, markers: markersByTrackConfig });\n    }\n  });\n\n  return {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAmD;AAC5D,SAAS,iBAAiB;AAE1B,OAAO,YAAY;AAEnB,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AASnB,SAAS,uBACd,UACA,YACA;AACA,QAAM,kBAA2C,CAAC;AAElD,QAAM,sBAA8C,CAAC;AACrD,QAAM,qBAA4C,CAAC;AAEnD,QAAM,eAAoE,CAAC;AAC3E,QAAM,QAAuC,CAAC;AAE9C,WAAS,QAAQ,UAAU,CAAC,OAAO,eAAe;AAChD,QAAI,OAAO,OAAO,SAAS,GAAG;AAC5B,sBAAgB,UAAU,IAAI,CAAC;AAE/B,yBAAmB,UAAU,IAAI;AAAA,QAC/B,cAAc,MAAM,MAAM;AAAA,MAC5B;AAEA,YAAM,uBAA0C,CAAC;AACjD,eAAS,QAAQ,MAAM,MAAM,UAAU,CAAC,WAAW;AACjD,YAAI,OAAO,QAAQ,UAAU,GAAG;AAC9B,cAAI;AACJ,+BAAqB,KAAK,OAAO,KAAK;AAEtC,gBAAM,EAAE,cAAc,SAAS,GAAG,MAAM,IAAI,OAAO;AAEnD,cAAI,OAAO,MAAM,UAAU,GAAG;AAC5B,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI,+BAA+B;AAAA,cACjC;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAc,OAAO,MAAM;AAAA,YAC7B,CAAC;AACD,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF,OAAO;AACL,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAEA,8BAAoB,GAAG,UAAU,IAAI,iBAAiB,KAAK,GAAG,CAAC,EAAE,IAAI;AAAA,YACnE,cAAc,OAAO,MAAM;AAAA,YAC3B,aAAa,OAAO,MAAM;AAAA,YAC1B,cAAc,OAAO,MAAM;AAAA,YAC3B,SAAS,OAAO,MAAM;AAAA,UACxB;AAEA,0BAAgB,UAAU,EAAE,KAAK,gBAAgB;AACjD,cAAI,UAAU,OAAO,MAAM,OAAO,GAAG;AACnC,kBAAM,YACJ,OAAO,MAAM,eACb;AAAA,cACE,sBAAsB,OAAO,MAAM,KAAK;AAAA,cACxC,0BAA0B,OAAO,KAAK,QAAQ,SAAS,OAAO;AAAA,cAC9D,0BAA0B,OAAO,KAAK,QAAQ,OAAO;AAAA,YACvD;AACF,kBAAM,KAAK,CAAC,OAAO,MAAM,SAAS,SAAS,CAAC;AAAA,UAC9C;AAAA,QACF;AAAA,MACF,CAAC;AAED,mBAAa,KAAK,EAAE,GAAG,MAAM,OAAO,SAAS,qBAAqB,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {\n  Children,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { calculateRangeMarkerCoordinates } from './calculate-expand-marker-coordinates.js';\nimport { resolveValueMarkerHitArea } from './resolve-value-marker-hit-area.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../utils/color-contrast.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { VALUE_MARKER_WIDTH } from '../components/canvas/renderers/value-marker-renderer/constants.js';\nimport { calculateMarkerWidthAndContent } from '../components/canvas/utils/calculate-marker-width-and-content.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport {\n  MarkerEventHandlersMap,\n  TrackEventHandlersMap,\n} from '../types/event-handlers.js';\nimport { MarkerCoords, MarkersCoordsPerTrack } from '../types/marker-coords.js';\nimport { MarkerAtomProps } from '../types/marker.js';\nimport { TrackAtomProps } from '../types/track.js';\n\nexport function aggregateMarkersCoords(\n  children: ReactNode,\n  trackWidth: number,\n) {\n  const markersPerTrack: MarkersCoordsPerTrack[] = [];\n\n  const markerEventHandlers: MarkerEventHandlersMap = {};\n  const trackEventHandlers: TrackEventHandlersMap = {};\n\n  const tracksConfig: (TrackAtomProps & { markers: MarkerAtomProps[] })[] = [];\n  const icons: Array<[ReactElement, string]> = [];\n\n  Children.forEach(children, (track, trackIndex) => {\n    if (isSlot(track, TrackAtom)) {\n      markersPerTrack[trackIndex] = [];\n\n      trackEventHandlers[trackIndex] = {\n        onMouseEnter: track.props.onMouseEnter,\n      };\n\n      const markersByTrackConfig: MarkerAtomProps[] = [];\n      Children.forEach(track.props.children, (marker) => {\n        if (isSlot(marker, MarkerAtom)) {\n          let markerAtomCoords: MarkerCoords;\n          markersByTrackConfig.push(marker.props);\n\n          const { textOverflow, content, x, width } = marker.props;\n\n          if (marker.props.width === 0) {\n            const {\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            } = calculateMarkerWidthAndContent({\n              trackWidth,\n              trackLeftBoundary: 0,\n              content,\n              width: VALUE_MARKER_WIDTH,\n              x,\n              isRange: false,\n              textOverflow,\n              truncateMode: marker.props.truncateMode,\n            });\n            markerAtomCoords = resolveValueMarkerHitArea(\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            );\n          } else {\n            markerAtomCoords = calculateRangeMarkerCoordinates(\n              content,\n              x,\n              width,\n              trackWidth,\n              textOverflow,\n            );\n          }\n\n          markerEventHandlers[`${trackIndex}_${markerAtomCoords.join('_')}`] = {\n            onMouseEnter: marker.props.onMouseEnter,\n            onMouseMove: marker.props.onMouseMove,\n            onMouseLeave: marker.props.onMouseLeave,\n            onClick: marker.props.onClick,\n          };\n\n          markersPerTrack[trackIndex].push(markerAtomCoords);\n          if (isValidElement(marker.props.content)) {\n            const iconColor =\n              marker.props.symbolColor ??\n              getColorByContrast(\n                getTokenComputedStyle(marker.props.color),\n                getColorTokenDefaultValue(Colors.Text.Neutral.OnAccent.Default),\n                getColorTokenDefaultValue(Colors.Text.Neutral.Default),\n              );\n            icons.push([marker.props.content, iconColor]);\n          }\n        }\n      });\n\n      tracksConfig.push({ ...track.props, markers: markersByTrackConfig });\n    }\n  });\n\n  return {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,OAAO,YAAY;AAEnB,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AASnB,SAAS,uBACd,UACA,YACA;AACA,QAAM,kBAA2C,CAAC;AAElD,QAAM,sBAA8C,CAAC;AACrD,QAAM,qBAA4C,CAAC;AAEnD,QAAM,eAAoE,CAAC;AAC3E,QAAM,QAAuC,CAAC;AAE9C,WAAS,QAAQ,UAAU,CAAC,OAAO,eAAe;AAChD,QAAI,OAAO,OAAO,SAAS,GAAG;AAC5B,sBAAgB,UAAU,IAAI,CAAC;AAE/B,yBAAmB,UAAU,IAAI;AAAA,QAC/B,cAAc,MAAM,MAAM;AAAA,MAC5B;AAEA,YAAM,uBAA0C,CAAC;AACjD,eAAS,QAAQ,MAAM,MAAM,UAAU,CAAC,WAAW;AACjD,YAAI,OAAO,QAAQ,UAAU,GAAG;AAC9B,cAAI;AACJ,+BAAqB,KAAK,OAAO,KAAK;AAEtC,gBAAM,EAAE,cAAc,SAAS,GAAG,MAAM,IAAI,OAAO;AAEnD,cAAI,OAAO,MAAM,UAAU,GAAG;AAC5B,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI,+BAA+B;AAAA,cACjC;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAc,OAAO,MAAM;AAAA,YAC7B,CAAC;AACD,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF,OAAO;AACL,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAEA,8BAAoB,GAAG,UAAU,IAAI,iBAAiB,KAAK,GAAG,CAAC,EAAE,IAAI;AAAA,YACnE,cAAc,OAAO,MAAM;AAAA,YAC3B,aAAa,OAAO,MAAM;AAAA,YAC1B,cAAc,OAAO,MAAM;AAAA,YAC3B,SAAS,OAAO,MAAM;AAAA,UACxB;AAEA,0BAAgB,UAAU,EAAE,KAAK,gBAAgB;AACjD,cAAI,eAAe,OAAO,MAAM,OAAO,GAAG;AACxC,kBAAM,YACJ,OAAO,MAAM,eACb;AAAA,cACE,sBAAsB,OAAO,MAAM,KAAK;AAAA,cACxC,0BAA0B,OAAO,KAAK,QAAQ,SAAS,OAAO;AAAA,cAC9D,0BAA0B,OAAO,KAAK,QAAQ,OAAO;AAAA,YACvD;AACF,kBAAM,KAAK,CAAC,OAAO,MAAM,SAAS,SAAS,CAAC;AAAA,UAC9C;AAAA,QACF;AAAA,MACF,CAAC;AAED,mBAAa,KAAK,EAAE,GAAG,MAAM,OAAO,SAAS,qBAAqB,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-11-1 {
+._90oaxp0-3-11-2 {
   display: block;
   overflow: visible;
 }

package/esm/charts/core/components/axes/Axis.sty.js

@@ -1,5 +1,5 @@
 import "./Axis.css";
-var axis = "_90oaxp0-3-11-1";
+var axis = "_90oaxp0-3-11-2";
 export {
   axis
 };

package/esm/charts/core/components/axes/Axis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/axes/Axis.css.ts"],
-  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-11-1';"],
+  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-11-1 {
+@keyframes _3rbllj2-3-11-2 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-11-1 {
+@keyframes _3rbllj3-3-11-2 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-11-1 {
+._3rbllj4-3-11-2 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-11-1 {
+._3rbllj5-3-11-2 {
   left: 0;
-  animation-name: _3rbllj2-3-11-1;
+  animation-name: _3rbllj2-3-11-2;
 }
-._3rbllj6-3-11-1 {
+._3rbllj6-3-11-2 {
   right: 0;
-  animation-name: _3rbllj3-3-11-1;
+  animation-name: _3rbllj3-3-11-2;
 }
-._3rbllj7-3-11-1 {
+._3rbllj7-3-11-2 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-11-1:hover {
+._3rbllj7-3-11-2:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-11-1:active {
+._3rbllj7-3-11-2:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-11-1 ~ div {
-  --_3rbllj0-3-11-1: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-11-2 ~ div {
+  --_3rbllj0-3-11-2: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-11-1 ~ div {
-  --_3rbllj1-3-11-1: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-11-2 ~ div {
+  --_3rbllj1-3-11-2: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-11-1 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-11-1, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-11-1, rgba(0,0,0,1) 0%));
+._3rbllj4-3-11-2 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-11-2, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-11-2, rgba(0,0,0,1) 0%));
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js

@@ -1,7 +1,7 @@
 import "./PanningControls.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var panningArrow = "_3rbllj7-3-11-1";
-var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-11-1", variantClassNames: { direction: { toLeft: "_3rbllj5-3-11-1", toRight: "_3rbllj6-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-11-2";
+var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-11-2", variantClassNames: { direction: { toLeft: "_3rbllj5-3-11-2", toRight: "_3rbllj6-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   panningArrow,
   panningButtons

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/axes/components/PanningControls/PanningControls.css.ts"],
-  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-11-1';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-11-1',variantClassNames:{direction:{toLeft:'_3rbllj5-3-11-1',toRight:'_3rbllj6-3-11-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-11-2';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-11-2',variantClassNames:{direction:{toLeft:'_3rbllj5-3-11-2',toRight:'_3rbllj6-3-11-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,QAAO,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-grid/ChartGrid.css

@@ -1,13 +1,13 @@
-._13lzg4k0-3-11-1 {
+._13lzg4k0-3-11-2 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-._13lzg4k1-3-11-1 {
+._13lzg4k1-3-11-2 {
   box-sizing: content-box;
 }
-._13lzg4k2-3-11-1 {
+._13lzg4k2-3-11-2 {
   position: relative;
 }

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js

@@ -1,7 +1,7 @@
 import "./ChartGrid.css";
-var area = "_13lzg4k1-3-11-1";
-var plot = "_13lzg4k2-3-11-1";
-var plotLayout = "_13lzg4k0-3-11-1";
+var area = "_13lzg4k1-3-11-2";
+var plot = "_13lzg4k2-3-11-2";
+var plotLayout = "_13lzg4k0-3-11-2";
 export {
   area,
   plot,

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/ChartGrid.css.ts"],
-  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-11-1';\nexport var plot = '_13lzg4k2-3-11-1';\nexport var plotLayout = '_13lzg4k0-3-11-1';"],
+  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-11-2';\nexport var plot = '_13lzg4k2-3-11-2';\nexport var plotLayout = '_13lzg4k0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/components/styles.css

@@ -1,46 +1,46 @@
-._l1klj80-3-11-1 {
+._l1klj80-3-11-2 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-11-1 {
+._l1klj81-3-11-2 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-11-1 {
+._l1klj83-3-11-2 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-11-1 {
+._l1klj84-3-11-2 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-11-1 {
+._l1klj85-3-11-2 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-11-1 {
+._l1klj86-3-11-2 {
   height: 100%;
 }
-._l1klj87-3-11-1 {
+._l1klj87-3-11-2 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-11-1 {
+._l1klj88-3-11-2 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-11-1 {
+._l1klj89-3-11-2 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-11-1 {
+._l1klj8a-3-11-2 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border-radius: var(--dt-spacings-size-8, 8px);
   touch-action: none;
 }
-._l1klj8a-3-11-1:hover {
+._l1klj8a-3-11-2:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-11-1 {
+._l1klj8b-3-11-2 {
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 36px;
   width: 2px;
@@ -49,11 +49,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-11-1:hover {
+._l1klj8b-3-11-2:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-11-1 {
+._l1klj8c-3-11-2 {
   transition: width var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 2px;
   width: 36px;
@@ -62,7 +62,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-11-1:hover {
+._l1klj8c-3-11-2:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

package/esm/charts/core/components/chart-layout/components/styles.sty.js

@@ -1,9 +1,9 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-11-1", variantClassNames: { loading: { true: "_l1klj81-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-11-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-11-1", vertical: "_l1klj88-3-11-1" }, loading: { true: "_l1klj89-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-11-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-11-1", vertical: "_l1klj8c-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-11-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-11-1", vertical: "_l1klj84-3-11-1" }, loading: { true: "_l1klj85-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-11-2", variantClassNames: { loading: { true: "_l1klj81-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-11-2", variantClassNames: { orientation: { horizontal: "_l1klj87-3-11-2", vertical: "_l1klj88-3-11-2" }, loading: { true: "_l1klj89-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-11-2", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-11-2", vertical: "_l1klj8c-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-11-2", variantClassNames: { orientation: { horizontal: "_l1klj83-3-11-2", vertical: "_l1klj84-3-11-2" }, loading: { true: "_l1klj85-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   graphContainer,
   legendContainer,

package/esm/charts/core/components/chart-layout/components/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/components/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-11-1',variantClassNames:{loading:{true:'_l1klj81-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-11-1',variantClassNames:{orientation:{horizontal:'_l1klj87-3-11-1',vertical:'_l1klj88-3-11-1'},loading:{true:'_l1klj89-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-11-1',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-11-1',vertical:'_l1klj8c-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-11-1',variantClassNames:{orientation:{horizontal:'_l1klj83-3-11-1',vertical:'_l1klj84-3-11-1'},loading:{true:'_l1klj85-3-11-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-11-2',variantClassNames:{loading:{true:'_l1klj81-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-11-2',variantClassNames:{orientation:{horizontal:'_l1klj87-3-11-2',vertical:'_l1klj88-3-11-2'},loading:{true:'_l1klj89-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-11-2',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-11-2',vertical:'_l1klj8c-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-11-2',variantClassNames:{orientation:{horizontal:'_l1klj83-3-11-2',vertical:'_l1klj84-3-11-2'},loading:{true:'_l1klj85-3-11-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5J,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnO,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnM,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

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

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

@@ -1,8 +1,8 @@
 import "./ChartState.css";
-var container = "_4pqs4v3-3-11-1";
-var emptyText = "_4pqs4v1-3-11-1";
-var errorText = "_4pqs4v0-3-11-1";
-var wrapper = "_4pqs4v2-3-11-1";
+var container = "_4pqs4v3-3-11-2";
+var emptyText = "_4pqs4v1-3-11-2";
+var errorText = "_4pqs4v0-3-11-2";
+var wrapper = "_4pqs4v2-3-11-2";
 export {
   container,
   emptyText,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/ChartState.css.ts"],
-  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-11-1';\nexport var emptyText = '_4pqs4v1-3-11-1';\nexport var errorText = '_4pqs4v0-3-11-1';\nexport var wrapper = '_4pqs4v2-3-11-1';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-11-2';\nexport var emptyText = '_4pqs4v1-3-11-2';\nexport var errorText = '_4pqs4v0-3-11-2';\nexport var wrapper = '_4pqs4v2-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._nm3s3e0-3-11-1 {
+._nm3s3e0-3-11-2 {
   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-11-1 {
+._nm3s3e1-3-11-2 {
   margin-left: -2px;
 }
-._nm3s3e2-3-11-1 {
+._nm3s3e2-3-11-2 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-11-1 {
+._nm3s3e3-3-11-2 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-11-1 {
+._nm3s3e4-3-11-2 {
   margin-top: -2px;
 }
-._nm3s3e5-3-11-1 {
+._nm3s3e5-3-11-2 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-11-1 {
+._nm3s3e6-3-11-2 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

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

@@ -1,12 +1,12 @@
 import "./Magnifier.css";
-var bottom = "_nm3s3e3-3-11-1";
-var left = "_nm3s3e1-3-11-1";
-var magnifier = "_nm3s3e0-3-11-1";
+var bottom = "_nm3s3e3-3-11-2";
+var left = "_nm3s3e1-3-11-2";
+var magnifier = "_nm3s3e0-3-11-2";
 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-11-1";
-var rotatedBottomStyle = "_nm3s3e6-3-11-1";
-var rotatedTopStyle = "_nm3s3e5-3-11-1";
-var top = "_nm3s3e4-3-11-1";
+var right = "_nm3s3e2-3-11-2";
+var rotatedBottomStyle = "_nm3s3e6-3-11-2";
+var rotatedTopStyle = "_nm3s3e5-3-11-2";
+var top = "_nm3s3e4-3-11-2";
 export {
   bottom,
   left,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/Magnifier.css.ts"],
-  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-11-1';\nexport var left = '_nm3s3e1-3-11-1';\nexport var magnifier = '_nm3s3e0-3-11-1';\nexport 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)'};\nexport var right = '_nm3s3e2-3-11-1';\nexport var rotatedBottomStyle = '_nm3s3e6-3-11-1';\nexport var rotatedTopStyle = '_nm3s3e5-3-11-1';\nexport var top = '_nm3s3e4-3-11-1';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-11-2';\nexport var left = '_nm3s3e1-3-11-2';\nexport var magnifier = '_nm3s3e0-3-11-2';\nexport 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)'};\nexport var right = '_nm3s3e2-3-11-2';\nexport var rotatedBottomStyle = '_nm3s3e6-3-11-2';\nexport var rotatedTopStyle = '_nm3s3e5-3-11-2';\nexport var top = '_nm3s3e4-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,sBAAsB,EAAC,YAAW,6FAA4F,UAAS,sDAAqD,YAAW,uDAAsD,YAAW,mEAAkE;AAC9U,IAAI,QAAQ;AACZ,IAAI,qBAAqB;AACzB,IAAI,kBAAkB;AACtB,IAAI,MAAM;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 import "./InteractionsOverlay.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-11-1", variantClassNames: { mode: { explore: "_nfahiq1-3-11-1", pan: "_nfahiq2-3-11-1", zoom: "_nfahiq3-3-11-1", zoomOut: "_nfahiq4-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-11-1";
+var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-11-2", variantClassNames: { mode: { explore: "_nfahiq1-3-11-2", pan: "_nfahiq2-3-11-2", zoom: "_nfahiq3-3-11-2", zoomOut: "_nfahiq4-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-11-2";
 export {
   chartEventsWrapper,
   interactionsOverlay

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/interactions-overlay/InteractionsOverlay.css.ts"],
-  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-11-1',variantClassNames:{mode:{explore:'_nfahiq1-3-11-1',pan:'_nfahiq2-3-11-1',zoom:'_nfahiq3-3-11-1',zoomOut:'_nfahiq4-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-11-1';"],
+  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-11-2',variantClassNames:{mode:{explore:'_nfahiq1-3-11-2',pan:'_nfahiq2-3-11-2',zoom:'_nfahiq3-3-11-2',zoomOut:'_nfahiq4-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,SAAQ,mBAAkB,KAAI,mBAAkB,MAAK,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvO,IAAI,sBAAsB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./ChartLegend.css";
-var legendContainer = "_9x5f9b0-3-11-1";
+var legendContainer = "_9x5f9b0-3-11-2";
 export {
   legendContainer
 };