@dynatrace/strato-components 3.5.2 → 3.6.0

package/charts/core/components/overlay-tooltip/types/series.d.ts

@@ -56,6 +56,8 @@ export type IconStyle = 'default' | 'large';
 export type BaseSeriesItemProps = {
     /** Display name of the series. Pass an array to enable multi-line rendering. */
     name: Series['name'];
+    /** Optional descriptive text shown next to the series name. */
+    description?: string;
     /** The formatted value to display. */
     value: Series['value'];
     /** Optional unit label appended after the main value. */

package/charts/core/components/overlay-tooltip/types.d.ts

@@ -2,7 +2,6 @@ import type { JSX, ReactNode, RefObject } from 'react';
 import type { MessageDescriptor } from 'react-intl';
 import type { Store } from '../../../../core/store/store.js';
 import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';
-import type { SeriesActionsTemplate } from '../../types/series-actions-template.js';
 /** @internal */
 export declare const enum GeometryTypesEnum {
     'dot' = "dot",
@@ -49,7 +48,7 @@ export type Overlay = {
 };
 /** @internal */
 export type TooltipState = {
-    activeSeries: SeriesName | null;
+    activeSeries: string | null;
     pinned: boolean;
     inBounds: boolean;
     data: Data | NoData;
@@ -184,30 +183,6 @@ export type SeriesHeaderProps = {
     disabled?: boolean;
 };
 /** @internal */
-export type Series = Data['series'][number];
-/** @internal */
-export type SeriesItemProps = {
-    /** The series name to display. Can be a string or array of strings for multi-line display. */
-    name: Series['name'];
-    /** The series value to display. */
-    value: Series['value'];
-    /** The color for the series symbol. */
-    color: string;
-    /** Unit to display after the value. */
-    valueUnit?: string;
-    /** Relative value to display alongside the main value. */
-    relativeValue?: Series['relativeValue'];
-    /** Unit to display after the relative value. */
-    relativeValueUnit?: string;
-    /** Maximum number of lines for the series name. Default is 1. */
-    maxLines?: number;
-    /** Whether to enable multi-line mode when name is provided as an array. Default is false. */
-    multiLine?: boolean;
-    /** Actions to display for the series. */
-    actions?: () => SeriesActionsTemplate;
-    symbolAlignment?: 'left' | 'right';
-};
-/** @internal */
 export type FormatStrategy = (value: HeaderData) => string | null;
 /** @internal */
 export type TooltipAction = {
@@ -216,20 +191,24 @@ export type TooltipAction = {
     type: 'SET_PINNED';
     payload: {
         pinned: false;
-        relativeX?: undefined;
-        relativeY?: undefined;
+        absoluteX?: undefined;
+        absoluteY?: undefined;
         data: NoData;
     } | {
         pinned: true;
-        relativeX: number;
-        relativeY: number;
+        absoluteX: number;
+        absoluteY: number;
         data: Data;
     };
 } | {
     type: 'SET_OUT_BOUNDS';
 } | {
     type: 'SET_POSITION';
-    payload?: Data;
+    payload: {
+        absoluteX: number;
+        absoluteY: number;
+        data?: Data;
+    };
 } | {
     type: 'UPDATE_POSITION';
     payload: {
@@ -239,7 +218,7 @@ export type TooltipAction = {
 } | {
     type: 'SET_ACTIVE_SERIES';
     payload: {
-        activeSeries: SeriesName | null;
+        activeSeries: string | null;
     };
 } | {
     type: 'TOOLTIP_MOUSE_LEAVE';

package/charts/core/components/overlay-tooltip/useTooltipActions.d.ts

@@ -0,0 +1,21 @@
+import type { Data } from './types.js';
+/** @internal */
+export type EventCoords = {
+    clientX: number;
+    clientY: number;
+};
+/**
+ * Ergonomic wrapper around the low-level tooltip dispatch.
+ * Encapsulates action types, coordinate rounding, and empty-data defaults so
+ * callers only need to deal with intent (hover / pin / unpin / …).
+ *
+ * @internal
+ */
+export declare const useTooltipActions: () => {
+    hover: (event: EventCoords, data?: Data) => void;
+    pin: (event: EventCoords, data: Data) => void;
+    togglePin: (event: EventCoords, data: Data) => void;
+    unpin: () => void;
+    reset: () => void;
+    outOfBounds: () => void;
+};

package/charts/core/components/overlay-tooltip/useTooltipActions.js

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTooltipActions_exports = {};
+__export(useTooltipActions_exports, {
+  useTooltipActions: () => useTooltipActions
+});
+module.exports = __toCommonJS(useTooltipActions_exports);
+var import_react = require("react");
+var import_TooltipContext = require("./contexts/TooltipContext.js");
+var import_useTooltipReducer = require("./useTooltipReducer.js");
+var import_utils = require("./utils.js");
+const useTooltipActions = () => {
+  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const tooltipState = (0, import_TooltipContext.useTooltip)();
+  const hover = (0, import_react.useCallback)(
+    (event, data) => {
+      dispatch({
+        type: "SET_POSITION",
+        payload: {
+          absoluteX: Math.round(event.clientX),
+          absoluteY: Math.round(event.clientY),
+          data
+        }
+      })();
+    },
+    [dispatch]
+  );
+  const pin = (0, import_react.useCallback)(
+    (event, data) => {
+      const { absoluteX, absoluteY } = tooltipState.getState();
+      const coords = absoluteX !== null && absoluteY !== null ? { clientX: absoluteX, clientY: absoluteY } : {
+        clientX: Math.round(event.clientX),
+        clientY: Math.round(event.clientY)
+      };
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: true,
+          absoluteX: coords.clientX,
+          absoluteY: coords.clientY,
+          data
+        }
+      })();
+    },
+    [dispatch, tooltipState]
+  );
+  const unpin = (0, import_react.useCallback)(() => {
+    dispatch({
+      type: "SET_PINNED",
+      payload: { pinned: false, data: (0, import_utils.emptyData)() }
+    })();
+  }, [dispatch]);
+  const togglePin = (0, import_react.useCallback)(
+    (event, data) => {
+      if (tooltipState.getState().pinned) {
+        unpin();
+      } else {
+        pin(event, data);
+      }
+    },
+    [pin, unpin, tooltipState]
+  );
+  const reset = (0, import_react.useCallback)(() => {
+    dispatch({ type: "RESET_TOOLTIP" })();
+  }, [dispatch]);
+  const outOfBounds = (0, import_react.useCallback)(() => {
+    dispatch({ type: "SET_OUT_BOUNDS" })();
+  }, [dispatch]);
+  return { hover, pin, togglePin, unpin, reset, outOfBounds };
+};

package/charts/core/components/overlay-tooltip/useTooltipReducer.d.ts

@@ -1,6 +1,3 @@
 import type { TooltipAction } from './types.js';
 /** @internal */
-export declare const useTooltipReducer: () => (action: TooltipAction) => (event?: {
-    clientX: number;
-    clientY: number;
-}) => void;
+export declare const useTooltipReducer: () => (action: TooltipAction) => () => void;

package/charts/core/components/overlay-tooltip/useTooltipReducer.js

@@ -29,7 +29,7 @@ const useTooltipReducer = () => {
   const store = (0, import_TooltipContext.useTooltip)();
   const overlay = (0, import_OverlayContext.useOverlay)();
   const dispatch = (0, import_react.useCallback)(
-    (action) => (event) => {
+    (action) => () => {
       switch (action.type) {
         case "RESET_TOOLTIP":
           overlay.clear();
@@ -49,9 +49,9 @@ const useTooltipReducer = () => {
         case "SET_PINNED":
           store.setState((prevState) => {
             prevState.inBounds || overlay.clear();
-            const { relativeX, relativeY, pinned, data } = action.payload;
+            const { pinned, data, absoluteX, absoluteY } = action.payload;
             const activeSeries = pinned ? prevState.activeSeries : null;
-            if ((0, import_lodash_es.isNil)(relativeX) || (0, import_lodash_es.isNil)(relativeY)) {
+            if ((0, import_lodash_es.isNil)(absoluteX) || (0, import_lodash_es.isNil)(absoluteY)) {
               return {
                 ...prevState,
                 inBounds: true,
@@ -60,13 +60,13 @@ const useTooltipReducer = () => {
                 activeSeries
               };
             }
-            const positions = overlay.getAdjustedPositionsFromRelative(
-              relativeX,
-              relativeY
+            const positions = overlay.getAdjustedPositionsFromAbsolute(
+              absoluteX,
+              absoluteY
             );
             return {
               ...prevState,
-              pinned: action.payload.pinned,
+              pinned,
               inBounds: true,
               data,
               activeSeries,
@@ -76,13 +76,11 @@ const useTooltipReducer = () => {
           break;
         case "SET_POSITION":
           store.setState((prevState) => {
-            const { payload: data } = action;
-            if (prevState.pinned || !event) {
+            if (prevState.pinned) {
               return prevState;
             }
             prevState.inBounds || overlay.clear();
-            const absoluteX = Math.round(event.clientX);
-            const absoluteY = Math.round(event.clientY);
+            const { absoluteX, absoluteY, data } = action.payload;
             const positions = overlay.getAdjustedPositionsFromAbsolute(
               absoluteX,
               absoluteY

package/charts/core/components/overlay-tooltip/utils/build-content.d.ts

@@ -3,6 +3,7 @@ import type { DefaultConfigByGeometry, ExternalConfig } from '../types.js';
 export declare function buildContent(children: ReactNode, defaultConfig: null | DefaultConfigByGeometry[keyof DefaultConfigByGeometry], args: {
     userSymbolPosition: ExternalConfig['symbolPosition'];
     userTruncationMode: ExternalConfig['truncationMode'];
+    customTooltip: boolean;
 }): {
     content: ReactNode;
     config: ExternalConfig;

package/charts/core/components/overlay-tooltip/utils/build-content.js

@@ -24,13 +24,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_is_slot = require("../../../../../core/utils/is-slot.js");
+var import_Footer = require("../components/Footer.js");
 var import_Action = require("../components/global-actions/Action.js");
 var import_ActionsPlaceholder = require("../components/global-actions/ActionsPlaceholder.js");
 var import_Header = require("../components/header/Header.js");
 var import_Series = require("../components/series/Series.js");
 var import_SeriesHeader = require("../components/series/SeriesHeader.js");
 var import_SeriesItem = require("../components/series/SeriesItem.js");
-var import_TooltipFooter = require("../components/TooltipFooter.js");
 var import_constants = require("../constants.js");
 const VALID_TRUNCATION_MODES = ["start", "middle", "end"];
 const isValidTruncationMode = (value) => {
@@ -48,6 +48,7 @@ const getTruncationMode = (userTruncationMode, defaultConfigTruncationMode) => {
 function buildContent(children, defaultConfig, args) {
   const slots = {
     Header: null,
+    Footer: null,
     Series: null,
     SeriesHeader: null,
     SeriesItem: null,
@@ -56,45 +57,49 @@ function buildContent(children, defaultConfig, args) {
   };
   let unpinnedPlaceholderText;
   let defaultActionsConfig = defaultConfig?.defaultActionsConfig;
-  import_react.Children.forEach(children, (child) => {
-    if ((0, import_is_slot.isSlot)(child, import_Header.Header)) {
-      slots.Header = child;
-    } else if ((0, import_is_slot.isSlot)(child, import_SeriesHeader.SeriesHeader)) {
-      slots.SeriesHeader = child;
-      defaultActionsConfig = (0, import_lodash_es.clone)(
-        defaultConfig?.defaultActionsConfig
-      );
-      const defaultNameAction = defaultActionsConfig?.get("name");
-      if (child.props.seriesLabel && defaultNameAction) {
-        defaultActionsConfig?.set("name", {
-          ...defaultNameAction,
-          customLabel: child.props.seriesLabel
-        });
+  if (!args.customTooltip) {
+    import_react.Children.forEach(children, (child) => {
+      if ((0, import_is_slot.isSlot)(child, import_Header.Header)) {
+        slots.Header = child;
+      } else if ((0, import_is_slot.isSlot)(child, import_Footer.Footer)) {
+        slots.Footer = child;
+      } else if ((0, import_is_slot.isSlot)(child, import_SeriesHeader.SeriesHeader)) {
+        slots.SeriesHeader = child;
+        defaultActionsConfig = (0, import_lodash_es.clone)(
+          defaultConfig?.defaultActionsConfig
+        );
+        const defaultNameAction = defaultActionsConfig?.get("name");
+        if (child.props.seriesLabel && defaultNameAction) {
+          defaultActionsConfig?.set("name", {
+            ...defaultNameAction,
+            customLabel: child.props.seriesLabel
+          });
+        }
+        const defaultValueAction = defaultActionsConfig?.get("value");
+        if (child.props.valueLabel && defaultValueAction) {
+          defaultActionsConfig?.set("value", {
+            ...defaultValueAction,
+            customLabel: child.props.valueLabel
+          });
+        }
+      } else if ((0, import_is_slot.isSlot)(child, import_Series.Series)) {
+        slots.Series = child;
+      } else if ((0, import_is_slot.isSlot)(child, import_SeriesItem.SeriesItem)) {
+        slots.SeriesItem = child;
+      } else if ((0, import_is_slot.isSlot)(child, import_ActionsPlaceholder.ActionsPlaceholder)) {
+        unpinnedPlaceholderText = child.props.text;
+      } else if ((0, import_is_slot.isSlot)(child, import_Action.Action)) {
+        slots.GlobalActions.push(child);
       }
-      const defaultValueAction = defaultActionsConfig?.get("value");
-      if (child.props.valueLabel && defaultValueAction) {
-        defaultActionsConfig?.set("value", {
-          ...defaultValueAction,
-          customLabel: child.props.valueLabel
-        });
-      }
-    } else if ((0, import_is_slot.isSlot)(child, import_Series.Series)) {
-      slots.Series = child;
-    } else if ((0, import_is_slot.isSlot)(child, import_SeriesItem.SeriesItem)) {
-      slots.SeriesItem = child;
-    } else if ((0, import_is_slot.isSlot)(child, import_ActionsPlaceholder.ActionsPlaceholder)) {
-      unpinnedPlaceholderText = child.props.text;
-    } else if ((0, import_is_slot.isSlot)(child, import_Action.Action)) {
-      slots.GlobalActions.push(child);
-    }
-  });
+    });
+  }
   return {
     content: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.Header }, "header"),
       slots.SeriesItem ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.SeriesHeader || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesHeader.SeriesHeader, {}) }, "seriesHeader") : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.Series || slots.SeriesItem }, "series"),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TooltipFooter.TooltipFooter,
+      slots.Footer ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Footer.Footer,
         {
           actions: slots.GlobalActions,
           unpinnedPlaceholderText
@@ -104,14 +109,14 @@ function buildContent(children, defaultConfig, args) {
     ],
     config: {
       seriesHeader: slots.SeriesHeader || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesHeader.SeriesHeader, {}),
-      displayHeaderDivider: !!(slots.Header && (slots.Series || slots.SeriesItem || slots.GlobalActions)),
+      displayHeaderDivider: !!(slots.Header && (slots.Series || slots.SeriesItem)),
       symbolPosition: args.userSymbolPosition || defaultConfig?.symbolPosition || "left",
       truncationMode: getTruncationMode(
         args.userTruncationMode,
         defaultConfig?.truncationMode
       ),
       defaultActionsConfig,
-      variant: defaultConfig?.sharedVariant && slots.Series?.props.variant || "single"
+      variant: args.customTooltip || defaultConfig?.sharedVariant && slots.Series?.props.variant === "shared" ? "shared" : "single"
     }
   };
 }

package/charts/core/components/overlay-tooltip/utils/estimate-series-item-size.js

@@ -27,12 +27,11 @@ const estimateSeriesItemSize = (item, maxContainerWidth) => {
   const baseHeight = 24;
   const multiLine = "multiLine" in item ? item.multiLine : false;
   const maxLines = "maxLines" in item ? item.maxLines : import_constants.DEFAULT_SERIES_NAME_LINES;
+  const containerWidth = Math.max(maxContainerWidth, import_constants.MIN_TOOLTIP_WIDTH) - (import_constants.SYMBOL_AND_SPACING_WIDTH + import_constants.TOOLTIP_WRAPPER_PADDING);
   let lineCount = 1;
   if (Array.isArray(item.name)) {
     lineCount = item.name.length;
   } else if (typeof item.name === "string" && multiLine) {
-    const actualContainerWidth = Math.max(maxContainerWidth, import_constants.MIN_TOOLTIP_WIDTH);
-    const containerWidth = actualContainerWidth - (import_constants.SYMBOL_AND_SPACING_WIDTH + import_constants.TOOLTIP_WRAPPER_PADDING);
     const textWidth = (0, import_truncate_string.calculateWidth)(
       item.name,
       import_chars_font_width_map.charsFontWidth12pixelsSize400Map
@@ -41,5 +40,22 @@ const estimateSeriesItemSize = (item, maxContainerWidth) => {
       lineCount = Math.min(Math.ceil(textWidth / containerWidth), maxLines);
     }
   }
-  return baseHeight + (lineCount - 1) * 16;
+  let descriptionLineCount = 0;
+  const description = "description" in item ? item.description : void 0;
+  if (typeof description === "string" && description.length > 0) {
+    descriptionLineCount = 1;
+    if (multiLine) {
+      const descriptionWidth = (0, import_truncate_string.calculateWidth)(
+        description,
+        import_chars_font_width_map.charsFontWidth12pixelsSize400Map
+      );
+      if (descriptionWidth > containerWidth) {
+        descriptionLineCount = Math.min(
+          Math.ceil(descriptionWidth / containerWidth),
+          maxLines
+        );
+      }
+    }
+  }
+  return baseHeight + (lineCount + descriptionLineCount - 1) * 16;
 };

package/charts/core/components/overlays/ChartOverlaysBorder.css

@@ -1,4 +1,4 @@
-._sw8x1w0-3-5-2 {
+._sw8x1w0-3-6-0 {
   position: absolute;
   top: -0.5px;
   left: -0.5px;
@@ -10,15 +10,15 @@
   border-bottom: none;
   box-sizing: border-box;
 }
-._sw8x1w1-3-5-2 {
+._sw8x1w1-3-6-0 {
   border-left: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w2-3-5-2 {
+._sw8x1w2-3-6-0 {
   border-right: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w3-3-5-2 {
+._sw8x1w3-3-6-0 {
   border-bottom: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._sw8x1w4-3-5-2 {
+._sw8x1w4-3-6-0 {
   border-top: 1px solid var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/charts/core/components/overlays/ChartOverlaysBorder.sty.js

@@ -25,8 +25,8 @@ __export(ChartOverlaysBorder_css_exports, {
 });
 module.exports = __toCommonJS(ChartOverlaysBorder_css_exports);
 var import_ChartOverlaysBorder_css_ts_vanilla = require("./ChartOverlaysBorder.css");
-var chartOverlaysBorder = "_sw8x1w0-3-5-2";
-var chartOverlaysBorder__rightAxis = "_sw8x1w2-3-5-2";
-var chartOverlaysBorder__topAxis = "_sw8x1w4-3-5-2";
-var chartOverlaysBorder__xAxis = "_sw8x1w1-3-5-2";
-var chartOverlaysBorder__yAxis = "_sw8x1w3-3-5-2";
+var chartOverlaysBorder = "_sw8x1w0-3-6-0";
+var chartOverlaysBorder__rightAxis = "_sw8x1w2-3-6-0";
+var chartOverlaysBorder__topAxis = "_sw8x1w4-3-6-0";
+var chartOverlaysBorder__xAxis = "_sw8x1w1-3-6-0";
+var chartOverlaysBorder__yAxis = "_sw8x1w3-3-6-0";

package/charts/core/components/selection-area/SelectionArea.css

@@ -1,10 +1,10 @@
-._efl7nz0-3-5-2 {
+._efl7nz0-3-6-0 {
   background-color: transparent;
   overflow: visible;
   pointer-events: none;
   z-index: 3;
 }
-._efl7nz1-3-5-2 {
+._efl7nz1-3-6-0 {
   width: 5px;
   height: 40px;
   fill: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
@@ -15,21 +15,21 @@
   transform-box: stroke-box;
   transition: transform var(--dt-animations-rescale-duration-fast, 170ms) var(--dt-animations-rescale-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._efl7nz1-3-5-2:focus {
+._efl7nz1-3-6-0:focus {
   outline: none;
   stroke-width: 3;
 }
-._efl7nz2-3-5-2 {
+._efl7nz2-3-6-0 {
   width: 15px;
   height: 80px;
   fill: transparent;
   cursor: col-resize;
   touch-action: pan-x;
 }
-._efl7nz2-3-5-2 + .knob--hovered {
+._efl7nz2-3-6-0 + .knob--hovered {
   transform: scaleY(1);
 }
-._efl7nz3-3-5-2 {
+._efl7nz3-3-6-0 {
   fill: var(--dt-colors-background-field-primary-accent, #474fcf);
   stroke: var(--dt-colors-border-primary-accent, #464cce);
   stroke-width: 1;
@@ -37,14 +37,14 @@
   fill-opacity: 0.1;
   touch-action: pan-x;
 }
-._efl7nz3-3-5-2:hover {
+._efl7nz3-3-6-0:hover {
   cursor: move;
 }
-._efl7nz3-3-5-2:focus {
+._efl7nz3-3-6-0:focus {
   outline: none;
   clip-path: unset;
   stroke-width: 3;
 }
-._efl7nz3-3-5-2:focus ~ .knob {
+._efl7nz3-3-6-0:focus ~ .knob {
   stroke-width: 3;
 }

package/charts/core/components/selection-area/SelectionArea.sty.js

@@ -25,7 +25,7 @@ __export(SelectionArea_css_exports, {
 module.exports = __toCommonJS(SelectionArea_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../chart-grid/ChartGrid.css");
 var import_SelectionArea_css_ts_vanilla = require("./SelectionArea.css");
-var brushOverlay = "_efl7nz0-3-5-2 _13lzg4k0-3-5-2";
-var knob = "_efl7nz1-3-5-2";
-var selectionArea = "_efl7nz3-3-5-2";
-var transparentDraggingArea = "_efl7nz2-3-5-2";
+var brushOverlay = "_efl7nz0-3-6-0 _13lzg4k0-3-6-0";
+var knob = "_efl7nz1-3-6-0";
+var selectionArea = "_efl7nz3-3-6-0";
+var transparentDraggingArea = "_efl7nz2-3-6-0";

package/charts/core/components/shape/BubbleShape/BubbleShape.css

@@ -1,18 +1,18 @@
-._hctkb30-3-5-2 {
+._hctkb30-3-6-0 {
   border-radius: 50%;
 }
-._hctkb31-3-5-2 {
+._hctkb31-3-6-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._hctkb32-3-5-2 {
+._hctkb32-3-6-0 {
   border: none;
 }
-._hctkb33-3-5-2 {
+._hctkb33-3-6-0 {
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
 }
-._hctkb34-3-5-2 {
+._hctkb34-3-6-0 {
   height: 8px;
   width: 8px;
   border-radius: 50%;

package/charts/core/components/shape/BubbleShape/BubbleShape.sty.js

@@ -24,6 +24,6 @@ __export(BubbleShape_css_exports, {
 module.exports = __toCommonJS(BubbleShape_css_exports);
 var import_BubbleShape_css_ts_vanilla = require("./BubbleShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var bubble = "_hctkb34-3-5-2";
-var bubbleBorder = "_hctkb33-3-5-2";
-var bubbleOutline = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hctkb30-3-5-2", variantClassNames: { active: { true: "_hctkb31-3-5-2", false: "_hctkb32-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var bubble = "_hctkb34-3-6-0";
+var bubbleBorder = "_hctkb33-3-6-0";
+var bubbleOutline = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hctkb30-3-6-0", variantClassNames: { active: { true: "_hctkb31-3-6-0", false: "_hctkb32-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/shape/EmojiShape/EmojiShape.css

@@ -1,4 +1,4 @@
-._s37yxn0-3-5-2 {
+._s37yxn0-3-6-0 {
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._s37yxn1-3-5-2 {
+._s37yxn1-3-6-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._s37yxn2-3-5-2 {
+._s37yxn2-3-6-0 {
   border: none;
 }

package/charts/core/components/shape/EmojiShape/EmojiShape.sty.js

@@ -22,4 +22,4 @@ __export(EmojiShape_css_exports, {
 module.exports = __toCommonJS(EmojiShape_css_exports);
 var import_EmojiShape_css_ts_vanilla = require("./EmojiShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var emojiShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_s37yxn0-3-5-2", variantClassNames: { active: { true: "_s37yxn1-3-5-2", false: "_s37yxn2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var emojiShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_s37yxn0-3-6-0", variantClassNames: { active: { true: "_s37yxn1-3-6-0", false: "_s37yxn2-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/shape/IconShape/IconShape.css

@@ -1,4 +1,4 @@
-._1jwo1lm0-3-5-2 {
+._1jwo1lm0-3-6-0 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._1jwo1lm1-3-5-2 {
+._1jwo1lm1-3-6-0 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jwo1lm2-3-5-2 {
+._1jwo1lm2-3-6-0 {
   border: none;
 }

package/charts/core/components/shape/IconShape/IconShape.sty.js

@@ -22,4 +22,4 @@ __export(IconShape_css_exports, {
 module.exports = __toCommonJS(IconShape_css_exports);
 var import_IconShape_css_ts_vanilla = require("./IconShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var iconShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jwo1lm0-3-5-2", variantClassNames: { active: { true: "_1jwo1lm1-3-5-2", false: "_1jwo1lm2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var iconShape = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jwo1lm0-3-6-0", variantClassNames: { active: { true: "_1jwo1lm1-3-6-0", false: "_1jwo1lm2-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });