@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -21,4 +21,4 @@ __export(Label_css_exports, {
 });
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
-var labelAreaStaticStyles = "_nuwbzs0-3-4-0";
+var labelAreaStaticStyles = "_nuwbzs0-3-5-0";

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

@@ -1,4 +1,4 @@
-._xtlx2j0-3-4-0 {
+._xtlx2j0-3-5-0 {
   width: 100%;
   height: 100%;
 }

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

@@ -21,4 +21,4 @@ __export(SingleValueToolbar_css_exports, {
 });
 module.exports = __toCommonJS(SingleValueToolbar_css_exports);
 var import_SingleValueToolbar_css_ts_vanilla = require("./SingleValueToolbar.css");
-var toolbarOverlayPadding = "_xtlx2j0-3-4-0";
+var toolbarOverlayPadding = "_xtlx2j0-3-5-0";

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

@@ -1,4 +1,4 @@
-._eff5no0-3-4-0 {
+._eff5no0-3-5-0 {
   grid-area: value;
   width: 100%;
   height: 100%;
@@ -6,20 +6,20 @@
   align-items: center;
   gap: 0;
 }
-._eff5no1-3-4-0 {
+._eff5no1-3-5-0 {
   white-space: nowrap;
   position: relative;
   font-size: 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))px;
   font-weight: 500;
   overflow: hidden;
 }
-._eff5no2-3-4-0 {
+._eff5no2-3-5-0 {
   padding-left: 2ch;
 }
-._eff5no3-3-4-0 {
+._eff5no3-3-5-0 {
   padding-left: 0;
 }
-._eff5no4-3-4-0 {
+._eff5no4-3-5-0 {
   white-space: nowrap;
   overflow: hidden;
   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)) * 0.66px);

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

@@ -24,6 +24,6 @@ __export(Value_css_exports, {
 module.exports = __toCommonJS(Value_css_exports);
 var import_Value_css_ts_vanilla = require("./Value.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var unitStyle = "_eff5no4-3-4-0";
-var valueArea = "_eff5no0-3-4-0";
-var valueStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_eff5no1-3-4-0", variantClassNames: { isReactNode: { true: "_eff5no2-3-4-0", false: "_eff5no3-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var unitStyle = "_eff5no4-3-5-0";
+var valueArea = "_eff5no0-3-5-0";
+var valueStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_eff5no1-3-5-0", variantClassNames: { isReactNode: { true: "_eff5no2-3-5-0", false: "_eff5no3-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/single-value-renderer/components/trend/Trend.css

@@ -1,13 +1,13 @@
-._i0i2v10-3-4-0 {
+._i0i2v10-3-5-0 {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-._i0i2v11-3-4-0 {
+._i0i2v11-3-5-0 {
   white-space: nowrap;
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, 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))), 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)))), min(var(--dt-charts-single-value-global-trend-font-size, 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))), 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);
   overflow: hidden;
 }
-._i0i2v12-3-4-0 {
+._i0i2v12-3-5-0 {
   margin-left: min(10px, 1ch);
 }

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

@@ -23,6 +23,6 @@ __export(Trend_css_exports, {
 });
 module.exports = __toCommonJS(Trend_css_exports);
 var import_Trend_css_ts_vanilla = require("./Trend.css");
-var trendContainer = "_i0i2v10-3-4-0";
-var trendLabel = "_i0i2v12-3-4-0";
-var valueLabelContainer = "_i0i2v11-3-4-0";
+var trendContainer = "_i0i2v10-3-5-0";
+var trendLabel = "_i0i2v12-3-5-0";
+var valueLabelContainer = "_i0i2v11-3-5-0";

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

@@ -1,8 +1,8 @@
-._160ezq60-3-4-0 {
+._160ezq60-3-5-0 {
   font-size: calc(min(var(--dt-charts-single-value-label-font-size, min(var(--dt-charts-single-value-global-trend-font-size, 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))), 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)))), min(var(--dt-charts-single-value-global-trend-font-size, 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))), 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;
 }
-._160ezq60-3-4-0 svg {
+._160ezq60-3-5-0 svg {
   position: absolute;
   width: 2ch;
   height: 2ch;

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

@@ -21,4 +21,4 @@ __export(Icon_css_exports, {
 });
 module.exports = __toCommonJS(Icon_css_exports);
 var import_Icon_css_ts_vanilla = require("./Icon.css");
-var iconStyles = "_160ezq60-3-4-0";
+var iconStyles = "_160ezq60-3-5-0";

package/charts/core/components/sparkline-display/Sparkline.css

@@ -1,22 +1,22 @@
-._8d5rf80-3-4-0 {
+._8d5rf80-3-5-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._8d5rf81-3-4-0 {
+._8d5rf81-3-5-0 {
   font-size: 9px;
   line-height: 12px;
 }
-._8d5rf82-3-4-0 {
+._8d5rf82-3-5-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._8d5rf83-3-4-0 {
+._8d5rf83-3-5-0 {
   position: absolute;
 }
-._8d5rf84-3-4-0 {
+._8d5rf84-3-5-0 {
   width: 4px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._8d5rf85-3-4-0 {
+._8d5rf85-3-5-0 {
   width: 6px;
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/charts/core/components/sparkline-display/Sparkline.sty.js

@@ -23,5 +23,5 @@ __export(Sparkline_css_exports, {
 module.exports = __toCommonJS(Sparkline_css_exports);
 var import_Sparkline_css_ts_vanilla = require("./Sparkline.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var contextValueText = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf80-3-4-0", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-4-0", greaterOrEqual32: "_8d5rf82-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var negativeSign = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf83-3-4-0", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-4-0", height32: "_8d5rf85-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var contextValueText = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf80-3-5-0", variantClassNames: { fontSize: { smallerThan32: "_8d5rf81-3-5-0", greaterOrEqual32: "_8d5rf82-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var negativeSign = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_8d5rf83-3-5-0", variantClassNames: { containerHeight: { height24: "_8d5rf84-3-5-0", height32: "_8d5rf85-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/sparkline-display/SparklineContainer.js

@@ -138,26 +138,16 @@ const SparklineContainer = (props) => {
   const minLabelsDistance = fontSize === import_sparkline_container_height.SparklineContainerHeightFontSize.GREATER_OR_EQUAL_32 ? import_constants.CONTEXT_VALUE_MIN_LABELS_DISTANCE_LARGE : import_constants.CONTEXT_VALUE_MIN_LABELS_DISTANCE_SMALL;
   const maxTextOffset = import_constants.CONTEXT_VALUE_TEXT_OFFSET_MAX;
   const minTextOffset = fontSize === import_sparkline_container_height.SparklineContainerHeightFontSize.SMALLER_THAN_32 ? import_constants.CONTEXT_VALUE_TEXT_OFFSET_MIN_SMALL : import_constants.CONTEXT_VALUE_TEXT_OFFSET_MIN_LARGE;
-  const adjustedMinLabelY = (0, import_get_adjusted_context_value_y_position.getAdjustedContextValueYPosition)(
+  const { adjustedMinLabelY, adjustedMaxLabelY } = (0, import_get_adjusted_context_value_y_position.getContextValueYPositions)({
     rawMinY,
     rawMaxY,
+    showContextMin,
     showContextMax,
-    false,
     minLabelsDistance,
     minTextOffset,
-    height,
-    maxTextOffset
-  );
-  const adjustedMaxLabelY = (0, import_get_adjusted_context_value_y_position.getAdjustedContextValueYPosition)(
-    rawMinY,
-    rawMaxY,
-    showContextMin,
-    true,
-    minLabelsDistance,
     maxTextOffset,
-    height,
-    maxTextOffset
-  );
+    chartHeight: height
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {

package/charts/core/components/sparkline-display/utils/get-adjusted-context-value-y-position.d.ts

@@ -18,3 +18,22 @@
  *   (`lineHeight − textOffset`, typically 4 px). When omitted, no bottom clamping is applied.
  */
 export declare function getAdjustedContextValueYPosition(rawMinYPos: number, rawMaxYPos: number, otherIndicatorVisible: boolean, isMax: boolean, minLabelsDistance: number, textOffset: number, chartHeight?: number, textBottomOverflow?: number): number;
+interface ContextValueYPositionsParams {
+    rawMinY: number;
+    rawMaxY: number;
+    showContextMin: boolean;
+    showContextMax: boolean;
+    minLabelsDistance: number;
+    minTextOffset: number;
+    maxTextOffset: number;
+    chartHeight: number;
+}
+/**
+ * Computes the adjusted Y positions for both context value labels (min & max)
+ * in a single call by delegating to `getAdjustedContextValueYPosition`.
+ */
+export declare function getContextValueYPositions({ rawMinY, rawMaxY, showContextMin, showContextMax, minLabelsDistance, minTextOffset, maxTextOffset, chartHeight, }: ContextValueYPositionsParams): {
+    adjustedMinLabelY: number;
+    adjustedMaxLabelY: number;
+};
+export {};

package/charts/core/components/sparkline-display/utils/get-adjusted-context-value-y-position.js

@@ -17,7 +17,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var get_adjusted_context_value_y_position_exports = {};
 __export(get_adjusted_context_value_y_position_exports, {
-  getAdjustedContextValueYPosition: () => getAdjustedContextValueYPosition
+  getAdjustedContextValueYPosition: () => getAdjustedContextValueYPosition,
+  getContextValueYPositions: () => getContextValueYPositions
 });
 module.exports = __toCommonJS(get_adjusted_context_value_y_position_exports);
 function getAdjustedContextValueYPosition(rawMinYPos, rawMaxYPos, otherIndicatorVisible, isMax, minLabelsDistance, textOffset, chartHeight, textBottomOverflow) {
@@ -37,3 +38,34 @@ function getAdjustedContextValueYPosition(rawMinYPos, rawMaxYPos, otherIndicator
   }
   return position;
 }
+function getContextValueYPositions({
+  rawMinY,
+  rawMaxY,
+  showContextMin,
+  showContextMax,
+  minLabelsDistance,
+  minTextOffset,
+  maxTextOffset,
+  chartHeight
+}) {
+  return {
+    adjustedMinLabelY: getAdjustedContextValueYPosition(
+      rawMinY,
+      rawMaxY,
+      showContextMax,
+      false,
+      minLabelsDistance,
+      minTextOffset,
+      chartHeight,
+      maxTextOffset
+    ),
+    adjustedMaxLabelY: getAdjustedContextValueYPosition(
+      rawMinY,
+      rawMaxY,
+      showContextMin,
+      true,
+      minLabelsDistance,
+      maxTextOffset
+    )
+  };
+}

package/charts/core/components/text-ellipsis/ChartTextEllipsis.css

@@ -1,4 +1,4 @@
-._ix5ox20-3-4-0 {
+._ix5ox20-3-5-0 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,25 +9,25 @@
   text-decoration: inherit;
   width: 100%;
 }
-._ix5ox21-3-4-0 {
+._ix5ox21-3-5-0 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._ix5ox21-3-4-0::after, ._ix5ox21-3-4-0::before {
+._ix5ox21-3-5-0::after, ._ix5ox21-3-5-0::before {
   content: "‎";
 }
-._ix5ox22-3-4-0 {
+._ix5ox22-3-5-0 {
   text-overflow: ellipsis;
 }
-._ix5ox24-3-4-0 {
+._ix5ox24-3-5-0 {
   position: relative;
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
 }
-._ix5ox24-3-4-0::after {
+._ix5ox24-3-5-0::after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -36,7 +36,7 @@
   user-select: none;
   overflow: hidden;
 }
-._ix5ox25-3-4-0 {
+._ix5ox25-3-5-0 {
   white-space: nowrap;
   display: block;
   overflow: hidden;

package/charts/core/components/text-ellipsis/ChartTextEllipsis.d.ts

@@ -3,11 +3,7 @@ import { FontWidthMap } from './chars-font-width-map.js';
 import type { DataTestId } from '../../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
-/**
- * Available modes for how overly long text is truncated and where the ellipsis is placed.
- * @public
- */
-export type TruncationMode = 'start' | 'middle' | 'end';
+import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';
 /**
  * The props for the TextEllipsis component.
  * @public

package/charts/core/components/text-ellipsis/ChartTextEllipsis.sty.js

@@ -24,6 +24,6 @@ __export(ChartTextEllipsis_css_exports, {
 module.exports = __toCommonJS(ChartTextEllipsis_css_exports);
 var import_ChartTextEllipsis_css_ts_vanilla = require("./ChartTextEllipsis.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ix5ox20-3-4-0", variantClassNames: { truncationMode: { start: "_ix5ox21-3-4-0", end: "_ix5ox22-3-4-0", middle: "_ix5ox23-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var truncationContainer = "_ix5ox24-3-4-0";
-var truncationText = "_ix5ox25-3-4-0";
+var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_ix5ox20-3-5-0", variantClassNames: { truncationMode: { start: "_ix5ox21-3-5-0", end: "_ix5ox22-3-5-0", middle: "_ix5ox23-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var truncationContainer = "_ix5ox24-3-5-0";
+var truncationText = "_ix5ox25-3-5-0";

package/charts/core/components/text-ellipsis/truncate-string.js

@@ -24,9 +24,13 @@ __export(truncate_string_exports, {
 module.exports = __toCommonJS(truncate_string_exports);
 var import_utils = require("../../../../typography/utils.js");
 const TEXT_HEIGHT = 12;
-const calculateWidth = (text, fontWidthMap) => Array.from(text).reduce((totalWidth, char) => {
-  return totalWidth + (fontWidthMap[char] ?? fontWidthMap["@"]);
-}, 0);
+const calculateWidth = (text, fontWidthMap) => {
+  let totalWidth = 0;
+  for (const char of text) {
+    totalWidth += fontWidthMap[char] ?? fontWidthMap["@"];
+  }
+  return totalWidth;
+};
 function accumulateUntilCapacity(availableWidth, fontWidthMap, generator) {
   let keptText = "";
   let keptWidth = 0;

package/charts/core/components/threshold-bar/styles.css

@@ -1,31 +1,31 @@
-._18heesa0-3-4-0 {
+._18heesa0-3-5-0 {
   border-right: unset;
   transform-origin: top left;
   width: 16px;
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa1-3-4-0 {
+._18heesa1-3-5-0 {
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa2-3-4-0 {
+._18heesa2-3-5-0 {
   border-left: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa3-3-4-0 {
+._18heesa3-3-5-0 {
   border-left: none;
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._18heesa4-3-4-0 {
+._18heesa4-3-5-0 {
   transform: scaleX(-1) translateX(-100%);
 }
-._18heesa5-3-4-0 {
+._18heesa5-3-5-0 {
   transform: none;
 }
-._18heesa6-3-4-0 {
+._18heesa6-3-5-0 {
   transform: rotate(-90deg) scaleX(-1);
 }
-._18heesa7-3-4-0 {
+._18heesa7-3-5-0 {
   transform: rotate(-90deg) translateX(-100%);
 }
-._18heesa8-3-4-0 {
+._18heesa8-3-5-0 {
   overflow: hidden;
 }

package/charts/core/components/threshold-bar/styles.sty.js

@@ -23,5 +23,5 @@ __export(styles_css_exports, {
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var bodyOverflowOverwrite = "_18heesa8-3-4-0";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18heesa0-3-4-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-4-0", leftBorder: "_18heesa2-3-4-0", rightBorder: "_18heesa3-3-4-0" }, layoutType: { "vertical-flip": "_18heesa4-3-4-0", "vertical-no-flip": "_18heesa5-3-4-0", "horizontal-flip": "_18heesa6-3-4-0", "horizontal-no-flip": "_18heesa7-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var bodyOverflowOverwrite = "_18heesa8-3-5-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18heesa0-3-5-0", variantClassNames: { borderArea: { bothBorders: "_18heesa1-3-5-0", leftBorder: "_18heesa2-3-5-0", rightBorder: "_18heesa3-3-5-0" }, layoutType: { "vertical-flip": "_18heesa4-3-5-0", "vertical-no-flip": "_18heesa5-3-5-0", "horizontal-flip": "_18heesa6-3-5-0", "horizontal-no-flip": "_18heesa7-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/toolbar/ChartToolbarRenderer.css

@@ -1,58 +1,58 @@
-._1x31hou0-3-4-0 {
+._1x31hou0-3-5-0 {
   padding: var(--dt-spacings-size-4, 4px);
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   width: fit-content;
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1x31hou1-3-4-0 {
+._1x31hou1-3-5-0 {
   visibility: visible;
 }
-._1x31hou2-3-4-0 {
+._1x31hou2-3-5-0 {
   visibility: hidden;
 }
-._1x31hou3-3-4-0 {
+._1x31hou3-3-5-0 {
   padding: 0;
   box-shadow: none;
   margin-left: var(--dt-spacings-size-4, 4px);
 }
-._1x31hou4-3-4-0 {
+._1x31hou4-3-5-0 {
   background-color: transparent;
   cursor: grab;
 }
-._1x31hou5-3-4-0 {
+._1x31hou5-3-5-0 {
   pointer-events: auto;
 }
-._1x31hou6-3-4-0 {
+._1x31hou6-3-5-0 {
   position: relative;
 }
-._1x31hou7-3-4-0 {
+._1x31hou7-3-5-0 {
   position: absolute;
 }
-body[data-scroll-locked] ._1x31hou8-3-4-0 * {
+body[data-scroll-locked] ._1x31hou8-3-5-0 * {
   pointer-events: none;
 }
-body[data-scroll-locked] ._1x31hou8-3-4-0 button[aria-expanded="true"] {
+body[data-scroll-locked] ._1x31hou8-3-5-0 button[aria-expanded="true"] {
   pointer-events: all;
 }
-._1x31hou9-3-4-0 {
+._1x31hou9-3-5-0 {
   pointer-events: none;
 }
-._1x31houa-3-4-0 {
+._1x31houa-3-5-0 {
   position: relative;
 }
-._1x31houb-3-4-0 {
+._1x31houb-3-5-0 {
   position: absolute;
 }
-._1x31houc-3-4-0 {
+._1x31houc-3-5-0 {
   width: calc(100% - var(--dt-spacings-size-16, 16px));
   height: calc(100% - var(--dt-spacings-size-16, 16px));
   top: var(--dt-spacings-size-8, 8px);
   left: var(--dt-spacings-size-8, 8px);
 }
-._1x31houd-3-4-0 {
+._1x31houd-3-5-0 {
   margin: 0 var(--dt-spacings-size-4, 4px);
 }
-._1x31houe-3-4-0 {
+._1x31houe-3-5-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }

package/charts/core/components/toolbar/ChartToolbarRenderer.sty.js

@@ -30,11 +30,11 @@ module.exports = __toCommonJS(ChartToolbarRenderer_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../chart-grid/ChartGrid.css");
 var import_ChartToolbarRenderer_css_ts_vanilla = require("./ChartToolbarRenderer.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartToolbar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou5-3-4-0", variantClassNames: { inline: { true: "_1x31hou6-3-4-0", false: "_1x31hou7-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var chartToolbarArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou9-3-4-0", variantClassNames: { inline: { true: "_1x31houa-3-4-0", false: "_1x31houb-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultOverlayPadding = "_1x31houc-3-4-0";
-var grip = "_1x31hou4-3-4-0";
-var outerContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou0-3-4-0", variantClassNames: { visible: { true: "_1x31hou1-3-4-0", false: "_1x31hou2-3-4-0" }, inline: { true: "_1x31hou3-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var styledHorizontalDivider = "_1x31houe-3-4-0";
-var styledVerticalDivider = "_1x31houd-3-4-0";
-var toolbarVisibilityOverlay = "_1x31hou8-3-4-0 _13lzg4k0-3-4-0";
+var chartToolbar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou5-3-5-0", variantClassNames: { inline: { true: "_1x31hou6-3-5-0", false: "_1x31hou7-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chartToolbarArea = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou9-3-5-0", variantClassNames: { inline: { true: "_1x31houa-3-5-0", false: "_1x31houb-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultOverlayPadding = "_1x31houc-3-5-0";
+var grip = "_1x31hou4-3-5-0";
+var outerContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1x31hou0-3-5-0", variantClassNames: { visible: { true: "_1x31hou1-3-5-0", false: "_1x31hou2-3-5-0" }, inline: { true: "_1x31hou3-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledHorizontalDivider = "_1x31houe-3-5-0";
+var styledVerticalDivider = "_1x31houd-3-5-0";
+var toolbarVisibilityOverlay = "_1x31hou8-3-5-0 _13lzg4k0-3-5-0";

package/charts/core/components/toolbar/components/ChartDataMenu.css

@@ -1,9 +1,9 @@
-._1hxr84t0-3-4-0 {
+._1hxr84t0-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   width: var(--dt-spacings-size-24, 24px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1hxr84t0-3-4-0:hover {
+._1hxr84t0-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }

package/charts/core/components/toolbar/components/ChartDataMenu.sty.js

@@ -21,4 +21,4 @@ __export(ChartDataMenu_css_exports, {
 });
 module.exports = __toCommonJS(ChartDataMenu_css_exports);
 var import_ChartDataMenu_css_ts_vanilla = require("./ChartDataMenu.css");
-var triggerButton = "_1hxr84t0-3-4-0";
+var triggerButton = "_1hxr84t0-3-5-0";

package/charts/core/components/toolbar/components/Control.css

@@ -1,46 +1,46 @@
-._1ukritl0-3-4-0 {
+._1ukritl0-3-5-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._1ukritl1-3-4-0 {
+._1ukritl1-3-5-0 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
-._1ukritl2-3-4-0 {
+._1ukritl2-3-5-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1ukritl3-3-4-0 {
+._1ukritl3-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1ukritl4-3-4-0 {
+._1ukritl4-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1ukritl5-3-4-0 {
+._1ukritl5-3-5-0 {
   position: relative;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1ukritl6-3-4-0 {
+._1ukritl6-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._1ukritl6-3-4-0:hover {
+._1ukritl6-3-5-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: transparent;
 }
-._1ukritl7-3-4-0 {
+._1ukritl7-3-5-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1ukritl8-3-4-0 {
+._1ukritl8-3-5-0 {
   background-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   position: relative;
 }
-._1ukritl8-3-4-0::before {
+._1ukritl8-3-5-0::before {
   content: "";
   position: absolute;
   border-radius: 2px;
@@ -50,25 +50,25 @@
   width: 0;
   height: 0;
 }
-._1ukritl8-3-4-0:active {
+._1ukritl8-3-5-0:active {
   background-color: var(--dt-colors-background-field-primary-emphasized-active, #c9d1f4);
 }
-._1ukritl9-3-4-0 {
+._1ukritl9-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1ukritl9-3-4-0:hover {
+._1ukritl9-3-5-0:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: transparent;
   cursor: not-allowed;
 }
-._1ukritla-3-4-0 {
+._1ukritla-3-5-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._1ukritla-3-4-0::before {
+._1ukritla-3-5-0::before {
   width: 2px;
   height: 20px;
 }
-._1ukritla-3-4-0:hover {
+._1ukritla-3-5-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }

package/charts/core/components/toolbar/components/Control.sty.js

@@ -26,8 +26,8 @@ __export(Control_css_exports, {
 module.exports = __toCommonJS(Control_css_exports);
 var import_Control_css_ts_vanilla = require("./Control.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var buttonStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl5-3-4-0", variantClassNames: { disabled: { true: "_1ukritl6-3-4-0" }, selected: { true: "_1ukritl7-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var menuItemStyles = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl8-3-4-0", variantClassNames: { disabled: { true: "_1ukritl9-3-4-0" }, selected: { true: "_1ukritla-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var styledMenuItemContent = "_1ukritl1-3-4-0";
-var styledShortcut = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl2-3-4-0", variantClassNames: { disabled: { true: "_1ukritl3-3-4-0", false: "_1ukritl4-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var styledText = "_1ukritl0-3-4-0";
+var buttonStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl5-3-5-0", variantClassNames: { disabled: { true: "_1ukritl6-3-5-0" }, selected: { true: "_1ukritl7-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var menuItemStyles = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl8-3-5-0", variantClassNames: { disabled: { true: "_1ukritl9-3-5-0" }, selected: { true: "_1ukritla-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledMenuItemContent = "_1ukritl1-3-5-0";
+var styledShortcut = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ukritl2-3-5-0", variantClassNames: { disabled: { true: "_1ukritl3-3-5-0", false: "_1ukritl4-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var styledText = "_1ukritl0-3-5-0";

package/charts/core/components/toolbar/components/ToolbarMenu.css

@@ -1,14 +1,14 @@
-._auj9i40-3-4-0 {
+._auj9i40-3-5-0 {
   align-items: center;
   display: flex;
 }
-._auj9i41-3-4-0 {
+._auj9i41-3-5-0 {
   height: var(--dt-spacings-size-20, 20px);
   width: var(--dt-spacings-size-24, 24px);
 }
-._auj9i42-3-4-0 {
+._auj9i42-3-5-0 {
   height: var(--dt-spacings-size-24, 24px);
 }
-._auj9i43-3-4-0 {
+._auj9i43-3-5-0 {
   min-width: 215px;
 }