@dynatrace/strato-components 3.4.1 → 3.5.2

package/charts/core/components/selection-area/Intent.js

@@ -23,38 +23,34 @@ module.exports = __toCommonJS(Intent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_intent = require("../../../../core/hooks/intent.js");
 var import_is_intent_with_response = require("../../../../core/utils/is-intent-with-response.js");
-var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_Intent2 = require("../../../../navigation/menu/Intent.js");
 var import_item_slots = require("../../../../navigation/menu/item-slots.js");
-var import_ActionItem_css = require("../tooltip/ChartTooltip/components/ActionItem/ActionItem.sty.js");
-var import_TooltipItem = require("../tooltip/section-components/TooltipItem/TooltipItem.js");
+var import_OverlayTooltip = require("../overlay-tooltip/OverlayTooltip.js");
 const IntentWithoutResponse = (props) => {
-  const { onResponse, onSelect, payload, options, children, ...rest } = props;
+  const { onSelect, payload, options, children, disabled } = props;
   const intent = (0, import_intent.useIntent)({
     payload,
     options
   });
   const slots = (0, import_item_slots.getIntentSlots)(children);
   const intentIcon = (0, import_Intent2.getIntentIcon)(slots.prefix, intent.iconURL);
+  const select = (event) => {
+    event.preventDefault();
+    intent.send();
+    onSelect?.(event);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_TooltipItem.TooltipItem,
+    import_OverlayTooltip.OverlayTooltip.Action,
     {
-      ...rest,
-      onClick: (e) => {
-        e.preventDefault();
-        intent.send();
-        onSelect?.(e);
-      },
-      className: (0, import_ActionItem_css.actionContainer)({}),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { className: import_ActionItem_css.actionText, children: [
-        intentIcon,
-        slots.freeform
-      ] })
+      label: slots.freeform,
+      icon: intentIcon,
+      onSelect: select,
+      disabled
     }
   );
 };
 const IntentWithResponse = (props) => {
-  const { onSelect, onResponse, payload, options, children, ...rest } = props;
+  const { onSelect, onResponse, payload, options, children, disabled } = props;
   const intent = (0, import_intent.useIntentWithResponse)({
     payload,
     options
@@ -63,15 +59,12 @@ const IntentWithResponse = (props) => {
   const intentIcon = (0, import_Intent2.getIntentIcon)(slots.prefix, intent.iconURL);
   const handleSelect = (0, import_Intent2.getHandleSelect)(intent, onSelect, onResponse);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_TooltipItem.TooltipItem,
+    import_OverlayTooltip.OverlayTooltip.Action,
     {
-      ...rest,
-      onClick: handleSelect,
-      className: (0, import_ActionItem_css.actionContainer)({}),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { className: import_ActionItem_css.actionText, children: [
-        intentIcon,
-        slots.freeform
-      ] })
+      label: slots.freeform,
+      icon: intentIcon,
+      onSelect: handleSelect,
+      disabled
     }
   );
 };

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

@@ -1,10 +1,10 @@
-._efl7nz0-3-4-1 {
+._efl7nz0-3-5-2 {
   background-color: transparent;
   overflow: visible;
   pointer-events: none;
   z-index: 3;
 }
-._efl7nz1-3-4-1 {
+._efl7nz1-3-5-2 {
   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-4-1:focus {
+._efl7nz1-3-5-2:focus {
   outline: none;
   stroke-width: 3;
 }
-._efl7nz2-3-4-1 {
+._efl7nz2-3-5-2 {
   width: 15px;
   height: 80px;
   fill: transparent;
   cursor: col-resize;
   touch-action: pan-x;
 }
-._efl7nz2-3-4-1 + .knob--hovered {
+._efl7nz2-3-5-2 + .knob--hovered {
   transform: scaleY(1);
 }
-._efl7nz3-3-4-1 {
+._efl7nz3-3-5-2 {
   fill: var(--dt-colors-background-field-primary-accent, #474fcf);
   stroke: var(--dt-colors-border-primary-accent, #464cce);
   stroke-width: 1;
@@ -37,33 +37,14 @@
   fill-opacity: 0.1;
   touch-action: pan-x;
 }
-._efl7nz3-3-4-1:hover {
+._efl7nz3-3-5-2:hover {
   cursor: move;
 }
-._efl7nz3-3-4-1:focus {
+._efl7nz3-3-5-2:focus {
   outline: none;
   clip-path: unset;
   stroke-width: 3;
 }
-._efl7nz3-3-4-1:focus ~ .knob {
+._efl7nz3-3-5-2:focus ~ .knob {
   stroke-width: 3;
-}
-._efl7nz4-3-4-1 {
-  user-select: none;
-  pointer-events: none;
-}
-._efl7nz5-3-4-1 {
-  text-wrap: nowrap;
-  min-width: unset;
-}
-._efl7nz6-3-4-1 {
-  padding-left: 3px;
-}
-._efl7nz7-3-4-1 {
-  padding: var(--dt-spacings-size-2, 2px);
-  padding-left: 3px;
-  width: 100%;
-}
-._efl7nz8-3-4-1 * {
-  pointer-events: none;
 }

package/charts/core/components/selection-area/SelectionArea.sty.d.ts

@@ -2,8 +2,3 @@ export declare const brushOverlay: string;
 export declare const knob: string;
 export declare const transparentDraggingArea: string;
 export declare const selectionArea: string;
-export declare const tooltipContainer: string;
-export declare const tooltipHeader: string;
-export declare const tooltipHeaderCategorical: string;
-export declare const tooltipHeaderSubtext: string;
-export declare const disabledActions: string;

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

@@ -18,24 +18,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var SelectionArea_css_exports = {};
 __export(SelectionArea_css_exports, {
   brushOverlay: () => brushOverlay,
-  disabledActions: () => disabledActions,
   knob: () => knob,
   selectionArea: () => selectionArea,
-  tooltipContainer: () => tooltipContainer,
-  tooltipHeader: () => tooltipHeader,
-  tooltipHeaderCategorical: () => tooltipHeaderCategorical,
-  tooltipHeaderSubtext: () => tooltipHeaderSubtext,
   transparentDraggingArea: () => transparentDraggingArea
 });
 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-4-1 _13lzg4k0-3-4-1";
-var disabledActions = "_efl7nz8-3-4-1";
-var knob = "_efl7nz1-3-4-1";
-var selectionArea = "_efl7nz3-3-4-1";
-var tooltipContainer = "_efl7nz4-3-4-1";
-var tooltipHeader = "_efl7nz5-3-4-1";
-var tooltipHeaderCategorical = "_efl7nz6-3-4-1";
-var tooltipHeaderSubtext = "_efl7nz7-3-4-1";
-var transparentDraggingArea = "_efl7nz2-3-4-1";
+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";

package/charts/core/components/selection-area/SelectionTooltipWithAsyncActions.d.ts

@@ -1,11 +1,10 @@
 import { type PropsWithChildren, type ReactElement } from 'react';
+import type { Point } from '../../types/point.js';
 import { getCustomContextMenuItems } from '../interactions-overlay/utils/get-custom-context-menu-items.js';
-import { type ChartTooltipProps } from '../tooltip/ChartTooltip/ChartTooltip.js';
 type ActionsMenu = ReturnType<typeof getCustomContextMenuItems>;
 export type SelectionTooltipWithAsyncActionsProps = {
     actions: () => Promise<ActionsMenu> | undefined;
-    headerSubtext: string;
-    position: ChartTooltipProps['position'];
+    position: Point;
     zoomEnabled: boolean;
     header: ReactElement;
     range: [number, number] | [Date, Date];

package/charts/core/components/selection-area/SelectionTooltipWithAsyncActions.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SelectionTooltipWithAsyncActions_exports = {};
 __export(SelectionTooltipWithAsyncActions_exports, {
@@ -31,15 +21,13 @@ __export(SelectionTooltipWithAsyncActions_exports, {
 });
 module.exports = __toCommonJS(SelectionTooltipWithAsyncActions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_clsx = __toESM(require("clsx"));
 var import_lodash_es = require("lodash");
 var import_react = require("react");
-var import_spacings = __toESM(require("@dynatrace/strato-design-tokens/spacings"));
-var import_SelectionArea_css = require("./SelectionArea.sty.js");
 var import_CustomActions = require("./tooltip/CustomActions.js");
 var import_sdk_logger = require("../../../../core/sdk/sdk-logger.js");
 var import_Divider = require("../../../../layouts/divider/Divider.js");
-var import_ChartTooltip = require("../tooltip/ChartTooltip/ChartTooltip.js");
+var import_OverlayTooltip = require("../overlay-tooltip/OverlayTooltip.js");
+var import_tooltip_css = require("../overlay-tooltip/tooltip.sty.js");
 const DEBOUNCING_TIME = 150;
 const emptyActionsMenu = { actions: [], intents: [] };
 const SelectionTooltipWithAsyncActions = (props) => {
@@ -75,36 +63,48 @@ const SelectionTooltipWithAsyncActions = (props) => {
   }, [props.range[0], props.range[1]]);
   const hasActions = !!actionsMenu.actions.length;
   const hasIntents = !!actionsMenu.intents.length;
-  const hasBody = props.zoomEnabled || hasActions || hasIntents;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartTooltip.ChartTooltip, { position: props.position, className: import_SelectionArea_css.tooltipContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_ChartTooltip.ChartTooltip.Header,
-      {
-        withoutDivider: !hasBody,
-        style: { gap: import_spacings.default.Size0 },
-        children: [
-          props.header,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartTooltip.ChartTooltip.Subheader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_SelectionArea_css.tooltipHeaderSubtext, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartTooltip.ChartTooltip.TextHeader, { text: props.headerSubtext }) }) })
-        ]
-      }
-    ),
-    hasBody ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_ChartTooltip.ChartTooltip.Body,
-      {
-        className: (0, import_clsx.default)(props.selectFinished || import_SelectionArea_css.disabledActions),
-        children: [
-          props.children,
-          hasActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomActions.CustomActions, { actions: actionsMenu.actions }) : null,
-          hasIntents && (hasActions || props.zoomEnabled) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_OverlayTooltip.OverlayTooltip,
+    {
+      isInteractive: props.selectFinished,
+      absoluteX: props.position.x,
+      absoluteY: props.position.y,
+      children: [
+        props.header,
+        (!!props.children || hasActions || hasIntents) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_Divider.Divider,
             {
               orientation: "horizontal",
-              style: { margin: `${import_spacings.default.Size4} 0` }
+              className: import_tooltip_css.divider
+            },
+            "headerDivider"
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                maxHeight: "96px",
+                overflowY: "auto",
+                overflowX: "hidden"
+              },
+              children: [
+                props.children,
+                hasActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomActions.CustomActions, { actions: actionsMenu.actions }) : null,
+                hasIntents && (hasActions || !!props.children) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_Divider.Divider,
+                  {
+                    orientation: "horizontal",
+                    className: import_tooltip_css.divider
+                  },
+                  "actionsDivider"
+                ) : null,
+                hasIntents ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomActions.CustomIntents, { intents: actionsMenu?.intents }) : null
+              ]
             }
-          ) : null,
-          hasIntents ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomActions.CustomIntents, { intents: actionsMenu?.intents }) : null
-        ]
-      }
-    ) : null
-  ] });
+          )
+        ] })
+      ]
+    }
+  );
 };

package/charts/core/components/selection-area/tooltip/get-selection-tooltip-position.js

@@ -20,9 +20,13 @@ __export(get_selection_tooltip_position_exports, {
   getSelectionTooltipPosition: () => getSelectionTooltipPosition
 });
 module.exports = __toCommonJS(get_selection_tooltip_position_exports);
+const TOOLTIP_OFFSET_X = 6;
+const TOOLTIP_OFFSET_Y = 12;
 const getSelectionTooltipPosition = (selectState, chartBounds) => {
   return {
-    x: chartBounds.left + chartBounds.width * (selectState.selectionPercentage ? selectState.selectionPercentage[1] : 0) / 100,
-    y: chartBounds.top + selectState.end.relative.y
+    x: Math.round(
+      TOOLTIP_OFFSET_X + chartBounds.left + chartBounds.width * (selectState.selectionPercentage ? selectState.selectionPercentage[1] : 0) / 100
+    ),
+    y: Math.round(chartBounds.top + chartBounds.height / 2 - TOOLTIP_OFFSET_Y)
   };
 };

package/charts/core/components/series-action/ChartActionsMenuAsync.d.ts

@@ -6,8 +6,9 @@ type ChartActionsMenuAsyncProps = {
     onActionSelected?: MouseEventHandler<HTMLDivElement>;
     actions: (() => Promise<ReactElement>) | undefined;
     delay?: number;
+    hasActions: boolean;
 };
-export declare const ChartActionsMenuAsync: (props: ChartActionsMenuAsyncProps & {
+export declare const ChartActionsMenuAsync: import("react").ForwardRefExoticComponent<ChartActionsMenuAsyncProps & {
     children?: ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/charts/core/components/series-action/ChartActionsMenuAsync.js

@@ -28,7 +28,10 @@ var import_useResolveAsyncComponent = require("../../hooks/useResolveAsyncCompon
 var import_render_menu_action_children = require("../../utils/render-menu-action-children.js");
 const ACTIONS_MENU_SIDE_OFFSET = 0;
 const ChartActionsMenuAsync = (0, import_react.forwardRef)((props, forwardedRef) => {
-  const { children, isOpen } = props;
+  const { children, isOpen, hasActions } = props;
+  if (!hasActions) {
+    return children;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { open: isOpen, modal: false, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu.Trigger, { children }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...props, ref: forwardedRef })

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

@@ -1,18 +1,18 @@
-._hctkb30-3-4-1 {
+._hctkb30-3-5-2 {
   border-radius: 50%;
 }
-._hctkb31-3-4-1 {
+._hctkb31-3-5-2 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._hctkb32-3-4-1 {
+._hctkb32-3-5-2 {
   border: none;
 }
-._hctkb33-3-4-1 {
+._hctkb33-3-5-2 {
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
 }
-._hctkb34-3-4-1 {
+._hctkb34-3-5-2 {
   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-4-1";
-var bubbleBorder = "_hctkb33-3-4-1";
-var bubbleOutline = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hctkb30-3-4-1", variantClassNames: { active: { true: "_hctkb31-3-4-1", false: "_hctkb32-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+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: [] });

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

@@ -1,4 +1,4 @@
-._s37yxn0-3-4-1 {
+._s37yxn0-3-5-2 {
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._s37yxn1-3-4-1 {
+._s37yxn1-3-5-2 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._s37yxn2-3-4-1 {
+._s37yxn2-3-5-2 {
   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-4-1", variantClassNames: { active: { true: "_s37yxn1-3-4-1", false: "_s37yxn2-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+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: [] });

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

@@ -1,4 +1,4 @@
-._1jwo1lm0-3-4-1 {
+._1jwo1lm0-3-5-2 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._1jwo1lm1-3-4-1 {
+._1jwo1lm1-3-5-2 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jwo1lm2-3-4-1 {
+._1jwo1lm2-3-5-2 {
   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-4-1", variantClassNames: { active: { true: "_1jwo1lm1-3-4-1", false: "_1jwo1lm2-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+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: [] });

package/charts/core/components/shape/styles/DataPointShape.css

@@ -1,4 +1,4 @@
-._ihihf60-3-4-1 {
+._ihihf60-3-5-2 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: var(--dt-spacings-size-64, 64px);
@@ -7,39 +7,39 @@
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf61-3-4-1 {
+._ihihf61-3-5-2 {
   width: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-spacings-size-64, 64px);
   height: 72%;
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf62-3-4-1 {
+._ihihf62-3-5-2 {
   display: flex;
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-spacings-size-20, 20px);
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf63-3-4-1 {
+._ihihf63-3-5-2 {
   margin-top: var(--dt-spacings-size-2, 2px);
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
 }
-._ihihf64-3-4-1 {
+._ihihf64-3-5-2 {
   margin-top: inherit;
   width: var(--dt-spacings-size-6, 6px);
   height: 72%;
 }
-._ihihf65-3-4-1 {
+._ihihf65-3-5-2 {
   margin: auto auto;
   border-radius: var(--dt-spacings-size-64, 64px);
 }
-._ihihf66-3-4-1 {
+._ihihf66-3-5-2 {
   width: var(--dt-spacings-size-6, 6px);
   height: var(--dt-spacings-size-6, 6px);
 }
-._ihihf67-3-4-1 {
+._ihihf67-3-5-2 {
   width: var(--dt-spacings-size-4, 4px);
   height: 94%;
 }

package/charts/core/components/shape/styles/DataPointShape.sty.js

@@ -25,7 +25,7 @@ __export(DataPointShape_css_exports, {
 module.exports = __toCommonJS(DataPointShape_css_exports);
 var import_DataPointShape_css_ts_vanilla = require("./DataPointShape.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var innerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf65-3-4-1", variantClassNames: { singleLine: { true: "_ihihf66-3-4-1", false: "_ihihf67-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var multiDimensionIcon = "_ihihf61-3-4-1";
-var outerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf62-3-4-1", variantClassNames: { singleLine: { true: "_ihihf63-3-4-1", false: "_ihihf64-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var singleDimensionIcon = "_ihihf60-3-4-1";
+var innerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf65-3-5-2", variantClassNames: { singleLine: { true: "_ihihf66-3-5-2", false: "_ihihf67-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var multiDimensionIcon = "_ihihf61-3-5-2";
+var outerHighlightedIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ihihf62-3-5-2", variantClassNames: { singleLine: { true: "_ihihf63-3-5-2", false: "_ihihf64-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var singleDimensionIcon = "_ihihf60-3-5-2";

package/charts/core/components/shape/type.d.ts

@@ -3,7 +3,7 @@
  * @public
  */
 export type PointShapeType = 'circle' | 'diamond' | 'square' | 'triangle';
-/** @internal */
+/** @public */
 export type Variant = 'single' | 'multi' | 'bubble';
-/** @internal */
+/** @public */
 export type VariantShape = PointShapeType | Variant;

package/charts/core/components/shared-chart-interactions/SharedChartInteractions.css

@@ -1,4 +1,4 @@
-._14qoaxs0-3-4-1 {
+._14qoaxs0-3-5-2 {
   position: absolute;
   width: 100%;
   height: 100%;

package/charts/core/components/shared-chart-interactions/SharedChartInteractions.sty.js

@@ -21,4 +21,4 @@ __export(SharedChartInteractions_css_exports, {
 });
 module.exports = __toCommonJS(SharedChartInteractions_css_exports);
 var import_SharedChartInteractions_css_ts_vanilla = require("./SharedChartInteractions.css");
-var containerSVG = "_14qoaxs0-3-4-1";
+var containerSVG = "_14qoaxs0-3-5-2";

package/charts/core/components/single-value-renderer/SingleValueRenderer.css

@@ -1,24 +1,24 @@
-._utn1m50-3-4-1 {
+._utn1m50-3-5-2 {
   container-type: size;
   height: 100%;
   width: 100%;
   border-radius: 2px;
   position: relative;
 }
-._utn1m51-3-4-1 {
+._utn1m51-3-5-2 {
   container-type: size;
   grid-area: content;
   padding: 8px;
 }
-._utn1m52-3-4-1 {
+._utn1m52-3-5-2 {
   grid-template-columns: 1fr;
   display: grid;
 }
-._utn1m53-3-4-1 {
+._utn1m53-3-5-2 {
   grid-area: sparkline;
   overflow: visible;
 }
-._utn1m54-3-4-1 {
+._utn1m54-3-5-2 {
   grid-area: trend;
   overflow: hidden;
 }

package/charts/core/components/single-value-renderer/SingleValueRenderer.sty.js

@@ -25,8 +25,8 @@ __export(SingleValueRenderer_css_exports, {
 });
 module.exports = __toCommonJS(SingleValueRenderer_css_exports);
 var import_SingleValueRenderer_css_ts_vanilla = require("./SingleValueRenderer.css");
-var chartStateHandler = "_utn1m52-3-4-1";
-var singleValueContainer = "_utn1m50-3-4-1";
-var singleValueInnerContainer = "_utn1m51-3-4-1";
-var sparklineArea = "_utn1m53-3-4-1";
-var trendArea = "_utn1m54-3-4-1";
+var chartStateHandler = "_utn1m52-3-5-2";
+var singleValueContainer = "_utn1m50-3-5-2";
+var singleValueInnerContainer = "_utn1m51-3-5-2";
+var sparklineArea = "_utn1m53-3-5-2";
+var trendArea = "_utn1m54-3-5-2";

package/charts/core/components/single-value-renderer/components/ContentGrid.css

@@ -1,4 +1,4 @@
-._zdpx4o0-3-4-1 {
+._zdpx4o0-3-5-2 {
   display: grid;
   width: 100%;
   height: 100%;

package/charts/core/components/single-value-renderer/components/ContentGrid.sty.js

@@ -21,4 +21,4 @@ __export(ContentGrid_css_exports, {
 });
 module.exports = __toCommonJS(ContentGrid_css_exports);
 var import_ContentGrid_css_ts_vanilla = require("./ContentGrid.css");
-var contentGridStaticStyles = "_zdpx4o0-3-4-1";
+var contentGridStaticStyles = "_zdpx4o0-3-5-2";

package/charts/core/components/single-value-renderer/components/Icon.css

@@ -1,16 +1,16 @@
-._84hyuy0-3-4-1 > svg {
+._84hyuy0-3-5-2 > svg {
   position: absolute;
   width: 2ch;
   height: 2ch;
   top: 50%;
   transform: translateY(-50%);
 }
-._84hyuy1-3-4-1 {
+._84hyuy1-3-5-2 {
   font-size: calc(min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)) * 1px);
   position: relative;
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._84hyuy2-3-4-1 {
+._84hyuy2-3-5-2 {
   display: flex;
   justify-content: center;
   align-items: center;

package/charts/core/components/single-value-renderer/components/Icon.sty.js

@@ -23,5 +23,5 @@ __export(Icon_css_exports, {
 module.exports = __toCommonJS(Icon_css_exports);
 var import_Icon_css_ts_vanilla = require("./Icon.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var iconStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_84hyuy1-3-4-1", variantClassNames: { isString: { true: "_84hyuy2-3-4-1", false: "_84hyuy0-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var parentSvgStyle = "_84hyuy0-3-4-1";
+var iconStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_84hyuy1-3-5-2", variantClassNames: { isString: { true: "_84hyuy2-3-5-2", false: "_84hyuy0-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var parentSvgStyle = "_84hyuy0-3-5-2";

package/charts/core/components/single-value-renderer/components/Label.css

@@ -1,4 +1,4 @@
-._nuwbzs0-3-4-1 {
+._nuwbzs0-3-5-2 {
   grid-area: label;
   white-space: nowrap;
   overflow: hidden;