@dynatrace/strato-components 3.5.2 → 3.6.0

package/charts/core/components/overlay-tooltip/components/series/hooks/use-series-item-display-state.js

@@ -32,20 +32,50 @@ var import_get_display_name_text = require("../utils/get-display-name-text.js");
 var import_get_display_text = require("../utils/get-display-text.js");
 var import_get_is_truncated = require("../utils/get-is-truncated.js");
 var import_get_name_text_style = require("../utils/get-name-text-style.js");
-const calculateNameText = (name, multiLine, shouldUseMultiLineCss, availableNameWidth, truncationMode) => {
+const resolveDisplayText = (text, shouldUseMultiLineCss, availableWidth, validatedMaxLines, truncationMode) => {
+  if (shouldUseMultiLineCss) {
+    if (truncationMode === "end") {
+      return text;
+    }
+    const wrapWidth = availableWidth !== void 0 ? availableWidth * validatedMaxLines : void 0;
+    return (0, import_get_display_text.getDisplayText)(text, wrapWidth, truncationMode) || "";
+  }
+  return (0, import_get_display_text.getDisplayText)(text, availableWidth, truncationMode) || "";
+};
+const calculateAvailableNameWidth = (maxWidth, actualValueWidth) => {
+  if (!maxWidth) {
+    return void 0;
+  }
+  const valueOffset = actualValueWidth > 0 ? actualValueWidth + 6 : 0;
+  return maxWidth - valueOffset - import_constants.SYMBOL_AND_SPACING_WIDTH;
+};
+const calculateNameText = (name, multiLine, shouldUseMultiLineCss, availableNameWidth, truncationMode, validatedMaxLines) => {
   if (Array.isArray(name)) {
     if (multiLine) {
       return name.map(
-        (item) => shouldUseMultiLineCss ? item : (0, import_get_display_text.getDisplayText)(item, availableNameWidth, truncationMode)
+        (item) => resolveDisplayText(
+          item,
+          shouldUseMultiLineCss,
+          availableNameWidth,
+          validatedMaxLines,
+          truncationMode
+        )
       );
     }
     return (0, import_format_series_name_for_display.formatSeriesNameForDisplay)(name);
   }
-  return shouldUseMultiLineCss ? name : (0, import_get_display_text.getDisplayText)(name, availableNameWidth, truncationMode) || "";
+  return resolveDisplayText(
+    name,
+    shouldUseMultiLineCss,
+    availableNameWidth,
+    validatedMaxLines,
+    truncationMode
+  );
 };
 const useSeriesItemDisplayState = (props) => {
   const {
     name,
+    description,
     value,
     valueUnit,
     relativeValue,
@@ -72,15 +102,20 @@ const useSeriesItemDisplayState = (props) => {
     maxWidth,
     truncationMode
   );
-  const availableNameWidth = maxWidth && actualValueWidth > 0 ? maxWidth - actualValueWidth - import_constants.SYMBOL_AND_SPACING_WIDTH - 6 : void 0;
+  const availableNameWidth = calculateAvailableNameWidth(
+    maxWidth,
+    actualValueWidth
+  );
   const shouldUseMultiLineCss = !isSingleLine;
   const nameText = calculateNameText(
     name,
     multiLine,
     shouldUseMultiLineCss,
     availableNameWidth,
-    truncationMode
+    truncationMode,
+    validatedMaxLines
   );
+  const multiLineMode = shouldUseMultiLineCss && truncationMode !== "end" ? "wrap" : "clamp";
   const displayNameText = (0, import_get_display_name_text.getDisplayNameText)(name, multiLine);
   const totalTextWidth = (0, import_react.useMemo)(() => {
     return Array.isArray(displayNameText) ? (0, import_width_calculation.calculateTotalWidth400)(...displayNameText) : (0, import_width_calculation.calculateTotalWidth400)(displayNameText);
@@ -93,11 +128,28 @@ const useSeriesItemDisplayState = (props) => {
     nameText,
     displayNameText
   );
-  const nameTextStyle = (0, import_get_name_text_style.getNameTextStyle)(isSingleLine, multiLine);
+  const nameTextStyle = (0, import_get_name_text_style.getNameTextStyle)(
+    isSingleLine,
+    multiLine,
+    multiLineMode
+  );
   const nameStyle = shouldUseMultiLineCss ? (0, import_dynamic.assignInlineVars)({ [import_tooltip_css.seriesNameMaxLinesVar]: String(validatedMaxLines) }) : {};
+  const descriptionText = typeof description === "string" && description.length > 0 ? resolveDisplayText(
+    description,
+    shouldUseMultiLineCss,
+    availableNameWidth,
+    validatedMaxLines,
+    truncationMode
+  ) : void 0;
+  const isDescriptionTruncated = typeof description === "string" && descriptionText !== description;
   return {
     nameText,
     displayNameText,
+    descriptionText,
+    fullDescriptionText: description,
+    isDescriptionTruncated,
+    descriptionShouldUseMultiLineCss: shouldUseMultiLineCss,
+    descriptionMultiLineMode: multiLineMode,
     displayValueText,
     displayRelativeValueText,
     fullValueText,

package/charts/core/components/overlay-tooltip/components/series/seriesSymbol.css

@@ -1,4 +1,4 @@
-._1ydozsr0-3-5-2 {
+._1ydozsr0-3-6-0 {
   height: var(--dt-spacings-size-12, 12px);
   width: var(--dt-spacings-size-12, 12px);
   font-size: var(--dt-spacings-size-12, 12px);
@@ -10,7 +10,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-._1ydozsr1-3-5-2 {
+._1ydozsr1-3-6-0 {
   height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
   font-size: var(--dt-spacings-size-24, 24px);

package/charts/core/components/overlay-tooltip/components/series/seriesSymbol.sty.js

@@ -22,5 +22,5 @@ __export(seriesSymbol_css_exports, {
 });
 module.exports = __toCommonJS(seriesSymbol_css_exports);
 var import_seriesSymbol_css_ts_vanilla = require("./seriesSymbol.css");
-var customSymbol = "_1ydozsr0-3-5-2";
-var customSymbolLarge = "_1ydozsr1-3-5-2 _1ydozsr0-3-5-2";
+var customSymbol = "_1ydozsr0-3-6-0";
+var customSymbolLarge = "_1ydozsr1-3-6-0 _1ydozsr0-3-6-0";

package/charts/core/components/overlay-tooltip/components/series/utils/get-name-text-style.d.ts

@@ -1 +1 @@
-export declare const getNameTextStyle: (isSingleLine: boolean, multiLine: boolean) => string;
+export declare const getNameTextStyle: (isSingleLine: boolean, multiLine: boolean, multiLineMode?: "clamp" | "wrap") => string;

package/charts/core/components/overlay-tooltip/components/series/utils/get-name-text-style.js

@@ -32,12 +32,13 @@ __export(get_name_text_style_exports, {
 module.exports = __toCommonJS(get_name_text_style_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_tooltip_css = require("../../../tooltip.sty.js");
-const getNameTextStyle = (isSingleLine, multiLine) => {
+const getNameTextStyle = (isSingleLine, multiLine, multiLineMode = "clamp") => {
+  const multiLineClass = multiLineMode === "wrap" ? import_tooltip_css.seriesNameTextMultiLineWrap : import_tooltip_css.seriesNameTextMultiLine;
   if (!isSingleLine) {
-    return (0, import_clsx.default)(import_tooltip_css.seriesItemText, import_tooltip_css.seriesNameTextMultiLine);
+    return (0, import_clsx.default)(import_tooltip_css.seriesItemText, multiLineClass);
   }
   if (multiLine) {
-    return import_tooltip_css.seriesNameTextMultiLine;
+    return multiLineClass;
   }
   return import_tooltip_css.seriesItemText;
 };

package/charts/core/components/overlay-tooltip/hooks/useTooltipImperativeHandle.js

@@ -20,16 +20,8 @@ __export(useTooltipImperativeHandle_exports, {
   useTooltipImperativeHandle: () => useTooltipImperativeHandle
 });
 module.exports = __toCommonJS(useTooltipImperativeHandle_exports);
-var import_useTooltipReducer = require("../useTooltipReducer.js");
-var import_utils = require("../utils.js");
+var import_useTooltipActions = require("../useTooltipActions.js");
 const useTooltipImperativeHandle = () => {
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
-  return {
-    unpinTooltip: () => {
-      dispatch({
-        type: "SET_PINNED",
-        payload: { pinned: false, data: (0, import_utils.emptyData)() }
-      })();
-    }
-  };
+  const { unpin } = (0, import_useTooltipActions.useTooltipActions)();
+  return { unpinTooltip: unpin };
 };

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

@@ -34,10 +34,10 @@ function getAdjustedPositionsFromAbsolute(absoluteX, absoluteY) {
     return NullPositions;
   }
   const { left, top, width, height } = bounds;
-  const relativeX = Math.round(absoluteX - left);
-  const relativeY = Math.round(absoluteY - top);
-  const percentX = Math.round(relativeX * 100 / width);
-  const percentY = Math.round(relativeY * 100 / height);
+  const relativeX = absoluteX - left;
+  const relativeY = absoluteY - top;
+  const percentX = relativeX * 100 / width;
+  const percentY = relativeY * 100 / height;
   return {
     absoluteX,
     absoluteY,
@@ -53,8 +53,8 @@ function getAdjustedPositionsFromPercent(percentX, percentY, relativeX, relative
     return NullPositions;
   }
   const { left, top, width, height } = bounds;
-  relativeX ||= Math.round(percentX * width / 100);
-  relativeY ||= Math.round(percentY * height / 100);
+  relativeX ||= percentX * width / 100;
+  relativeY ||= percentY * height / 100;
   const absoluteX = Math.round(left + relativeX);
   const absoluteY = Math.round(top + relativeY);
   return {
@@ -72,8 +72,8 @@ function getAdjustedPositionsFromRelative(relativeX, relativeY) {
     return NullPositions;
   }
   const { left, top, width, height } = bounds;
-  const percentX = Math.round(relativeX * 100 / width);
-  const percentY = Math.round(relativeY * 100 / height);
+  const percentX = relativeX * 100 / width;
+  const percentY = relativeY * 100 / height;
   const absoluteX = Math.round(left + relativeX);
   const absoluteY = Math.round(top + relativeY);
   return {

package/charts/core/components/overlay-tooltip/tooltip.css

@@ -1,4 +1,4 @@
-._1j1seex4-3-5-2 {
+._1j1seex4-3-6-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -12,24 +12,24 @@
   min-width: 200px;
   max-width: 480px;
 }
-._1j1seex4-3-5-2[data-placement="right"] {
+._1j1seex4-3-6-0[data-placement="right"] {
   transform-origin: 0 calc(1rem + 18px);
 }
-._1j1seex4-3-5-2[data-placement="left"] {
+._1j1seex4-3-6-0[data-placement="left"] {
   transform-origin: 100% calc(1rem + 18px);
 }
-._1j1seex5-3-5-2 {
+._1j1seex5-3-6-0 {
   pointer-events: all;
 }
-._1j1seex5-3-5-2[data-popper-reference-hidden=true] {
+._1j1seex5-3-6-0[data-popper-reference-hidden=true] {
   visibility: hidden;
   pointer-events: none;
 }
-._1j1seex6-3-5-2 {
+._1j1seex6-3-6-0 {
   pointer-events: none;
   user-select: none;
 }
-._1j1seex7-3-5-2 {
+._1j1seex7-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -42,33 +42,38 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seex8-3-5-2 {
+._1j1seex8-3-6-0 {
   min-width: 0;
 }
-._1j1seex9-3-5-2 {
+._1j1seex9-3-6-0 {
   min-width: 0;
   text-align: right;
 }
-._1j1seexa-3-5-2 {
+._1j1seexa-3-6-0 {
   min-height: 24px;
-  max-height: 192px;
+  max-height: 240px;
   overflow-y: auto;
   overflow-x: hidden;
 }
-._1j1seexb-3-5-2 {
+._1j1seexb-3-6-0 {
   width: 100%;
 }
-._1j1seexc-3-5-2 {
+._1j1seexc-3-6-0 {
+  max-height: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+._1j1seexd-3-6-0 {
   display: grid;
   width: 100%;
   position: relative;
   gap: 2px 16px;
 }
-._1j1seexd-3-5-2 {
+._1j1seexe-3-6-0 {
   width: 100%;
   position: relative;
 }
-._1j1seexe-3-5-2 {
+._1j1seexf-3-6-0 {
   display: grid;
   align-items: flex-start;
   box-sizing: border-box;
@@ -80,20 +85,20 @@
   width: 100%;
   min-width: fit-content;
 }
-._1j1seexf-3-5-2 {
+._1j1seexg-3-6-0 {
   grid-template-areas: "symbol name value";
-  grid-template-columns: var(--_1j1seex3-3-5-2) 1fr auto;
+  grid-template-columns: var(--_1j1seex3-3-6-0) 1fr auto;
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexg-3-5-2 {
+._1j1seexh-3-6-0 {
   grid-template-areas: "name value symbol";
-  grid-template-columns: 1fr auto var(--_1j1seex3-3-5-2);
+  grid-template-columns: 1fr auto var(--_1j1seex3-3-6-0);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexh-3-5-2 {
+._1j1seexi-3-6-0 {
   padding-right: var(--dt-spacings-size-0, 0);
 }
-._1j1seexi-3-5-2 {
+._1j1seexj-3-6-0 {
   all: unset;
   display: block;
   width: 100%;
@@ -104,12 +109,12 @@
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
   cursor: pointer;
 }
-._1j1seexj-3-5-2 {
+._1j1seexk-3-6-0 {
   display: flex;
   align-items: flex-start;
   width: 100%;
 }
-._1j1seexk-3-5-2 {
+._1j1seexl-3-6-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -121,30 +126,38 @@
   flex-shrink: 0;
   color: currentColor;
 }
-._1j1seexl-3-5-2 {
+._1j1seexm-3-6-0 {
   margin-left: calc(var(--dt-spacings-size-2, 2px) - var(--dt-spacings-size-6, 6px));
 }
-._1j1seexm-3-5-2 {
+._1j1seexn-3-6-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1j1seexn-3-5-2 {
+._1j1seexo-3-6-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexo-3-5-2 {
+._1j1seexp-3-6-0 {
   display: -webkit-box;
-  -webkit-line-clamp: var(--_1j1seex0-3-5-2);
+  -webkit-line-clamp: var(--_1j1seex0-3-6-0);
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-break: break-word;
 }
-._1j1seexp-3-5-2 {
+._1j1seexq-3-6-0 {
+  display: block;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  overflow: hidden;
+  max-height: calc(var(--dt-typography-text-small-default-line-height, 1.333333333) * var(--_1j1seex0-3-6-0));
+}
+._1j1seexr-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seexq-3-5-2 {
+._1j1seexs-3-6-0 {
   height: var(--dt-spacings-size-24, 24px);
   line-height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
@@ -153,10 +166,10 @@
   min-width: var(--dt-spacings-size-24, 24px);
   align-items: center;
 }
-._1j1seexr-3-5-2 {
+._1j1seext-3-6-0 {
   margin-right: -6px;
 }
-._1j1seexs-3-5-2 {
+._1j1seexu-3-6-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-family: var(--dt-typography-text-small-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-emphasized-size, 12px);
@@ -165,25 +178,60 @@
   box-sizing: border-box;
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1j1seext-3-5-2 {
+._1j1seexv-3-6-0 {
   min-width: 0;
   flex: 1;
 }
-._1j1seexu-3-5-2 {
+._1j1seexw-3-6-0 {
   flex-shrink: 0;
   text-align: right;
 }
-._1j1seexv-3-5-2 {
+._1j1seexx-3-6-0 {
   display: flex;
   align-items: flex-start;
   min-width: 0;
 }
-._1j1seexw-3-5-2 {
+._1j1seexy-3-6-0 {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-._1j1seexx-3-5-2 {
+._1j1seexz-3-6-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._1j1seex10-3-6-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
+  display: -webkit-box;
+  -webkit-line-clamp: var(--_1j1seex0-3-6-0);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: normal;
+}
+._1j1seex11-3-6-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
+  display: block;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  overflow: hidden;
+  max-height: calc(var(--dt-typography-text-small-default-line-height, 1.333333333) * var(--_1j1seex0-3-6-0));
+}
+._1j1seex12-3-6-0 {
   display: flex;
   flex-direction: column;
   list-style: none;
@@ -191,15 +239,15 @@
   margin-block: var(--dt-spacings-size-0, 0);
   padding-block: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexy-3-5-2 {
+._1j1seex13-3-6-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1j1seexz-3-5-2 {
+._1j1seex14-3-6-0 {
   margin-left: -6px;
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._1j1seex10-3-5-2 {
+._1j1seex15-3-6-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -209,19 +257,19 @@
   max-width: 480px;
   box-sizing: border-box;
 }
-._1j1seex11-3-5-2 {
+._1j1seex16-3-6-0 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--_1j1seex2-3-5-2);
+  -webkit-line-clamp: var(--_1j1seex2-3-6-0);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
 }
-._1j1seex12-3-5-2 {
+._1j1seex17-3-6-0 {
   display: flex;
   flex-direction: column;
 }
-._1j1seex4-3-5-2:not(:has(._1j1seex12-3-5-2:hover)) ._1j1seex13-3-5-2 {
+._1j1seex4-3-6-0:not(:has(._1j1seex17-3-6-0:hover)) ._1j1seex18-3-6-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }

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

@@ -1,4 +1,11 @@
 export declare const TOOLTIP_MAX_WIDTH = 480;
+/**
+ * Maximum height of the tooltip body — the area containing the header,
+ * the series header row, and the scrollable series list. The
+ * `TooltipFooter` ("Pin to see actions" / global actions) is rendered
+ * outside this cap, matching the Figma spec.
+ */
+export declare const TOOLTIP_BODY_MAX_HEIGHT = 240;
 export declare const seriesNameMaxLinesVar: `var(--${string})`;
 export declare const seriesItemMaxWidthVar: `var(--${string})`;
 export declare const seriesActionHeaderMaxLinesVar: `var(--${string})`;
@@ -25,6 +32,17 @@ export declare const seriesHeaderName: string;
 export declare const seriesHeaderValue: string;
 export declare const seriesWrapper: string;
 export declare const seriesGridContainer: string;
+/**
+ * Scroll container for the AnnotationsChart tooltip body.
+ *
+ * Annotations differ from the standard `OverlayTooltip` because each
+ * annotation group renders its own subheader followed by its own series list,
+ * so the standard per-series `seriesWrapper` cannot be reused. This wrapper
+ * caps the combined height of all groups and lets them scroll together,
+ * while keeping the surrounding `TooltipFooter` ("Pin to see actions" /
+ * global actions) pinned at the bottom of the tooltip.
+ */
+export declare const annotationsGroupsScrollContainer: string;
 export declare const seriesOverflowContainerBase: string;
 export declare const seriesOverflowContainer: string;
 export declare const seriesItem: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -53,6 +71,7 @@ export declare const chevronRightAligned: string;
 export declare const seriesItemActive: string;
 export declare const seriesItemText: string;
 export declare const seriesNameTextMultiLine: string;
+export declare const seriesNameTextMultiLineWrap: string;
 export declare const relativeValueStyle: string;
 export declare const symbolWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
     isRight: {
@@ -66,6 +85,9 @@ export declare const seriesNameText: string;
 export declare const seriesValueText: string;
 export declare const seriesNameCell: string;
 export declare const seriesValueCell: string;
+export declare const seriesDescriptionText: string;
+export declare const seriesDescriptionTextMultiLine: string;
+export declare const seriesDescriptionTextMultiLineWrap: string;
 export declare const multiLineName: string;
 export declare const divider: string;
 export declare const symbolRight: string;

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

@@ -17,8 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var tooltip_css_exports = {};
 __export(tooltip_css_exports, {
+  TOOLTIP_BODY_MAX_HEIGHT: () => TOOLTIP_BODY_MAX_HEIGHT,
   TOOLTIP_MAX_WIDTH: () => TOOLTIP_MAX_WIDTH,
   actionsContainer: () => actionsContainer,
+  annotationsGroupsScrollContainer: () => annotationsGroupsScrollContainer,
   chevron: () => chevron,
   chevronRightAligned: () => chevronRightAligned,
   divider: () => divider,
@@ -28,6 +30,9 @@ __export(tooltip_css_exports, {
   seriesActionHeader: () => seriesActionHeader,
   seriesActionHeaderMaxLinesVar: () => seriesActionHeaderMaxLinesVar,
   seriesActionHeaderMultiLine: () => seriesActionHeaderMultiLine,
+  seriesDescriptionText: () => seriesDescriptionText,
+  seriesDescriptionTextMultiLine: () => seriesDescriptionTextMultiLine,
+  seriesDescriptionTextMultiLineWrap: () => seriesDescriptionTextMultiLineWrap,
   seriesGridContainer: () => seriesGridContainer,
   seriesHeader: () => seriesHeader,
   seriesHeaderName: () => seriesHeaderName,
@@ -43,6 +48,7 @@ __export(tooltip_css_exports, {
   seriesNameMaxLinesVar: () => seriesNameMaxLinesVar,
   seriesNameText: () => seriesNameText,
   seriesNameTextMultiLine: () => seriesNameTextMultiLine,
+  seriesNameTextMultiLineWrap: () => seriesNameTextMultiLineWrap,
   seriesOverflowContainer: () => seriesOverflowContainer,
   seriesOverflowContainerBase: () => seriesOverflowContainerBase,
   seriesValueCell: () => seriesValueCell,
@@ -56,38 +62,44 @@ __export(tooltip_css_exports, {
 module.exports = __toCommonJS(tooltip_css_exports);
 var import_tooltip_css_ts_vanilla = require("./tooltip.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var TOOLTIP_BODY_MAX_HEIGHT = 240;
 var TOOLTIP_MAX_WIDTH = 480;
-var actionsContainer = "_1j1seex12-3-5-2";
-var chevron = "_1j1seexk-3-5-2";
-var chevronRightAligned = "_1j1seexl-3-5-2";
-var divider = "_1j1seexy-3-5-2";
-var headerText = "_1j1seexs-3-5-2";
-var multiLineName = "_1j1seexx-3-5-2";
-var relativeValueStyle = "_1j1seexp-3-5-2";
-var seriesActionHeader = "_1j1seex10-3-5-2";
-var seriesActionHeaderMaxLinesVar = "var(--_1j1seex2-3-5-2)";
-var seriesActionHeaderMultiLine = "_1j1seex11-3-5-2";
-var seriesGridContainer = "_1j1seexb-3-5-2";
-var seriesHeader = "_1j1seex7-3-5-2";
-var seriesHeaderName = "_1j1seex8-3-5-2";
-var seriesHeaderValue = "_1j1seex9-3-5-2";
-var seriesItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexe-3-5-2", variantClassNames: { symbolPosition: { left: "_1j1seexf-3-5-2", right: "_1j1seexg-3-5-2" }, hasChevron: { true: "_1j1seexh-3-5-2" } }, defaultVariants: { symbolPosition: "left", hasChevron: false }, compoundVariants: [] });
-var seriesItemActive = "_1j1seexm-3-5-2";
-var seriesItemHighlighted = "_1j1seex13-3-5-2";
-var seriesItemMaxWidthVar = "var(--_1j1seex1-3-5-2)";
-var seriesItemText = "_1j1seexn-3-5-2";
-var seriesItemWithChevron = "_1j1seexj-3-5-2";
-var seriesItemWrapper = "_1j1seexi-3-5-2";
-var seriesNameCell = "_1j1seexv-3-5-2";
-var seriesNameMaxLinesVar = "var(--_1j1seex0-3-5-2)";
-var seriesNameText = "_1j1seext-3-5-2";
-var seriesNameTextMultiLine = "_1j1seexo-3-5-2";
-var seriesOverflowContainer = "_1j1seexd-3-5-2";
-var seriesOverflowContainerBase = "_1j1seexc-3-5-2";
-var seriesValueCell = "_1j1seexw-3-5-2";
-var seriesValueText = "_1j1seexu-3-5-2";
-var seriesWrapper = "_1j1seexa-3-5-2";
-var spaceSavedForSymbolVar = "var(--_1j1seex3-3-5-2)";
-var symbolRight = "_1j1seexz-3-5-2";
-var symbolWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexq-3-5-2", variantClassNames: { isRight: { true: "_1j1seexr-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex4-3-5-2", variantClassNames: { isInteractive: { true: "_1j1seex5-3-5-2", false: "_1j1seex6-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var actionsContainer = "_1j1seex17-3-6-0";
+var annotationsGroupsScrollContainer = "_1j1seexc-3-6-0";
+var chevron = "_1j1seexl-3-6-0";
+var chevronRightAligned = "_1j1seexm-3-6-0";
+var divider = "_1j1seex13-3-6-0";
+var headerText = "_1j1seexu-3-6-0";
+var multiLineName = "_1j1seex12-3-6-0";
+var relativeValueStyle = "_1j1seexr-3-6-0";
+var seriesActionHeader = "_1j1seex15-3-6-0";
+var seriesActionHeaderMaxLinesVar = "var(--_1j1seex2-3-6-0)";
+var seriesActionHeaderMultiLine = "_1j1seex16-3-6-0";
+var seriesDescriptionText = "_1j1seexz-3-6-0";
+var seriesDescriptionTextMultiLine = "_1j1seex10-3-6-0";
+var seriesDescriptionTextMultiLineWrap = "_1j1seex11-3-6-0";
+var seriesGridContainer = "_1j1seexb-3-6-0";
+var seriesHeader = "_1j1seex7-3-6-0";
+var seriesHeaderName = "_1j1seex8-3-6-0";
+var seriesHeaderValue = "_1j1seex9-3-6-0";
+var seriesItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexf-3-6-0", variantClassNames: { symbolPosition: { left: "_1j1seexg-3-6-0", right: "_1j1seexh-3-6-0" }, hasChevron: { true: "_1j1seexi-3-6-0" } }, defaultVariants: { symbolPosition: "left", hasChevron: false }, compoundVariants: [] });
+var seriesItemActive = "_1j1seexn-3-6-0";
+var seriesItemHighlighted = "_1j1seex18-3-6-0";
+var seriesItemMaxWidthVar = "var(--_1j1seex1-3-6-0)";
+var seriesItemText = "_1j1seexo-3-6-0";
+var seriesItemWithChevron = "_1j1seexk-3-6-0";
+var seriesItemWrapper = "_1j1seexj-3-6-0";
+var seriesNameCell = "_1j1seexx-3-6-0";
+var seriesNameMaxLinesVar = "var(--_1j1seex0-3-6-0)";
+var seriesNameText = "_1j1seexv-3-6-0";
+var seriesNameTextMultiLine = "_1j1seexp-3-6-0";
+var seriesNameTextMultiLineWrap = "_1j1seexq-3-6-0";
+var seriesOverflowContainer = "_1j1seexe-3-6-0";
+var seriesOverflowContainerBase = "_1j1seexd-3-6-0";
+var seriesValueCell = "_1j1seexy-3-6-0";
+var seriesValueText = "_1j1seexw-3-6-0";
+var seriesWrapper = "_1j1seexa-3-6-0";
+var spaceSavedForSymbolVar = "var(--_1j1seex3-3-6-0)";
+var symbolRight = "_1j1seex14-3-6-0";
+var symbolWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seexs-3-6-0", variantClassNames: { isRight: { true: "_1j1seext-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1j1seex4-3-6-0", variantClassNames: { isInteractive: { true: "_1j1seex5-3-6-0", false: "_1j1seex6-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });