@dynatrace/strato-components 3.12.2 → 3.13.0

package/charts/flame/shared/components/tooltip/FlameTooltip.js

@@ -21,44 +21,87 @@ __export(FlameTooltip_exports, {
 });
 module.exports = __toCommonJS(FlameTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_Divider = require("../../../../../layouts/divider/Divider.js");
+var import_react = require("react");
+var import_react_intl = require("react-intl");
+var import_strato_icons = require("@dynatrace/strato-icons");
+var import_messages = require("./messages.js");
+var import_ExternalConfigContext = require("../../../../core/components/overlay-tooltip/contexts/ExternalConfigContext.js");
 var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip/OverlayTooltip.js");
-var import_constants = require("../../constants.js");
-var import_format_flame_value = require("../../utils/format-flame-value.js");
+const FLAME_TOOLTIP_PREFIX = "";
 function FlameTooltip({
-  payload,
-  data,
-  labelAccessor,
-  valueField,
+  label,
   subheader,
-  selfValueAccessor,
-  selfDescriptionLabel = "Self",
-  valueFormatter,
-  seriesActions
+  color,
+  valueLabel,
+  totalValue,
+  totalRelativeValue,
+  selfValue,
+  selfRelativeValue,
+  actions,
+  onIsolate
 }) {
-  const datapoint = payload.rectPayload?.datapoint;
-  if (!datapoint) {
-    return null;
-  }
-  const rawLabel = datapoint?.[labelAccessor];
-  const label = typeof rawLabel === "string" || typeof rawLabel === "number" || typeof rawLabel === "boolean" ? String(rawLabel) : "";
-  const selfDescription = selfValueAccessor !== void 0 ? `${selfDescriptionLabel}: ${(0, import_format_flame_value.formatFlameValue)(
-    datapoint?.[selfValueAccessor],
-    valueFormatter
-  )}` : void 0;
-  const actions = seriesActions && datapoint ? () => seriesActions(data[datapoint[import_constants.FLAME_ORIGINAL_IDX]]) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.ChartTooltip.Header, { header1: label, subheader }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "horizontal", style: { marginBottom: "4px" } }),
+  const intl = (0, import_react_intl.useIntl)();
+  const externalConfig = (0, import_ExternalConfigContext.useExternalConfig)();
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      ...externalConfig,
+      symbolPosition: "left",
+      displayHeaderDivider: true
+    }),
+    [externalConfig]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ExternalConfigContext.ExternalConfigContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_OverlayTooltip.ChartTooltip.Header,
+      {
+        header1: label,
+        label: FLAME_TOOLTIP_PREFIX,
+        subheader
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_OverlayTooltip.ChartTooltip.SeriesHeader,
+      {
+        seriesLabel: intl.formatMessage(import_messages.FLAME_TOOLTIP_MESSAGES.values),
+        valueLabel
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_OverlayTooltip.ChartTooltip.SeriesItem,
       {
-        color: `${payload.rectPayload?.color}`,
-        name: "Total",
-        value: (0, import_format_flame_value.formatFlameValue)(datapoint?.[valueField], valueFormatter),
-        description: selfDescription,
+        color,
+        name: intl.formatMessage(import_messages.FLAME_TOOLTIP_MESSAGES.total),
+        value: totalValue,
+        relativeValue: totalRelativeValue,
         actions
       }
+    ),
+    selfValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_OverlayTooltip.ChartTooltip.SeriesItem,
+      {
+        color,
+        name: intl.formatMessage(import_messages.FLAME_TOOLTIP_MESSAGES.self),
+        value: selfValue,
+        relativeValue: selfRelativeValue,
+        actions
+      }
+    ),
+    onIsolate !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_OverlayTooltip.ChartTooltip.Footer,
+      {
+        actions: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_OverlayTooltip.ChartTooltip.Action,
+            {
+              label: intl.formatMessage(import_messages.FLAME_TOOLTIP_MESSAGES.isolateSegment),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ViewIcon, {}),
+              onSelect: onIsolate
+            },
+            "isolate"
+          )
+        ],
+        unpinnedPlaceholderText: void 0
+      }
     )
   ] });
 }

package/charts/flame/shared/components/tooltip/messages.d.ts

@@ -0,0 +1,28 @@
+export declare const FLAME_TOOLTIP_MESSAGES: {
+    values: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    total: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    self: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    isolateSegment: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    children: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+//# sourceMappingURL=messages.d.ts.map

package/charts/flame/shared/components/tooltip/messages.js

@@ -0,0 +1,50 @@
+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 messages_exports = {};
+__export(messages_exports, {
+  FLAME_TOOLTIP_MESSAGES: () => FLAME_TOOLTIP_MESSAGES
+});
+module.exports = __toCommonJS(messages_exports);
+var import_react_intl = require("react-intl");
+const FLAME_TOOLTIP_MESSAGES = (0, import_react_intl.defineMessages)({
+  values: {
+    id: "pZYcJHuudIiUoTQ3",
+    defaultMessage: "Values",
+    description: "Column header label in the flame tooltip."
+  },
+  total: {
+    id: "aqgV26FymxiNNhI0",
+    defaultMessage: "Total",
+    description: "Row label for the total duration/value in the flame tooltip."
+  },
+  self: {
+    id: "PKJV6NXPfso3pkdg",
+    defaultMessage: "Self",
+    description: "Row label for the self (exclusive) duration/value in the flame tooltip."
+  },
+  isolateSegment: {
+    id: "ze9ge3utWHDeoMzu",
+    defaultMessage: "Isolate segment",
+    description: "Footer action label in the flame tooltip that zooms the chart to the selected segment."
+  },
+  children: {
+    id: "pJzqfzmBdDOee48O",
+    defaultMessage: "{count, plural, one {# child} other {# children}}",
+    description: "Subheader in the flame tooltip showing how many children a segment has."
+  }
+});

package/charts/flame/shared/slots/Tooltip.d.ts

@@ -1,17 +1,25 @@
-import type { TooltipProps } from '../../../core/slots/Tooltip.js';
 import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { FlameTooltipProps } from '../types/flame-internal.js';
 /**
  * @internal
  */
 export declare const FlameChartTooltipSlot: {
-    <TData extends ChartDatapoint>(_props: TooltipProps<TData>): null;
+    <TData extends ChartDatapoint, TPayload extends {
+        datapoint: TData;
+    } = {
+        datapoint: TData;
+    }>(_props: FlameTooltipProps<TData, TPayload>): null;
     displayName: string;
 };
 /**
  * @internal
  */
 export declare const FlameGraphTooltipSlot: {
-    <TData extends ChartDatapoint>(_props: TooltipProps<TData>): null;
+    <TData extends ChartDatapoint, TPayload extends {
+        datapoint: TData;
+    } = {
+        datapoint: TData;
+    }>(_props: FlameTooltipProps<TData, TPayload>): null;
     displayName: string;
 };
 //# sourceMappingURL=Tooltip.d.ts.map

package/charts/flame/shared/types/flame-chart.d.ts

@@ -44,6 +44,13 @@ export type FlameChartProps<TData extends ChartDatapoint = ChartDatapoint> = {
      * @defaultValue '300px'
      */
     height?: number | string;
+    /**
+     * Called with the zoom range `[start, end]` when the user activates the
+     * "Isolate segment" footer action. The footer is hidden when this prop is
+     * absent.
+     * @internal
+     */
+    __globalActions?: boolean;
 };
 /** @internal */
 export type FlameGraphProps<TData extends ChartDatapoint = ChartDatapoint> = {
@@ -77,5 +84,12 @@ export type FlameGraphProps<TData extends ChartDatapoint = ChartDatapoint> = {
      * @defaultValue '300px'
      */
     height?: number | string;
+    /**
+     * Called with the zoom range `[start, end]` when the user activates the
+     * "Isolate segment" footer action. The footer is hidden when this prop is
+     * absent.
+     * @internal
+     */
+    __globalActions?: boolean;
 };
 //# sourceMappingURL=flame-chart.d.ts.map

package/charts/flame/shared/types/flame-internal.d.ts

@@ -4,7 +4,22 @@ import type { ColorRuleProps } from '../../../core/types/color-rule.js';
 /**
  * @internal
  */
-export type CustomTooltipTemplate<TData extends ChartDatapoint> = (datapoint: TData) => ReactNode;
+export type FlameTooltipProps<TData extends ChartDatapoint = ChartDatapoint, TPayload extends {
+    datapoint: TData;
+} = {
+    datapoint: TData;
+}> = {
+    hidden?: boolean;
+    children?: (payload: TPayload) => ReactNode;
+};
+/**
+ * @internal
+ */
+export type CustomTooltipTemplate<TData extends ChartDatapoint, TPayload extends {
+    datapoint: TData;
+} = {
+    datapoint: TData;
+}> = (payload: TPayload) => ReactNode;
 /**
  * @internal
  */

package/charts/flame/shared/utils/build-tooltip-base-data.d.ts

@@ -0,0 +1,25 @@
+import type { IntlShape } from 'react-intl';
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { Formatter } from '../../../core/types/formatter.js';
+import type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';
+import type { XYChartTooltipPayload } from '../../../xy-chart/types/xy-chart.js';
+interface BuildFlameTooltipBaseDataArgs<TData extends ChartDatapoint> {
+    payload: XYChartTooltipPayload;
+    data: readonly TData[];
+    labelAccessor: string;
+    selfValueAccessor?: string;
+    valueFormatter?: Formatter;
+    seriesActions?: (datapoint: TData) => SeriesActionsTemplate;
+    intl: IntlShape;
+}
+export declare function buildFlameTooltipBaseData<TData extends ChartDatapoint>({ payload, data, labelAccessor, selfValueAccessor, valueFormatter, seriesActions, intl, }: Readonly<BuildFlameTooltipBaseDataArgs<TData>>): {
+    datapoint: import("../../../index.js").RectDatapoint | undefined;
+    color: string;
+    label: string;
+    subheader: string | undefined;
+    originalDatapoint: TData | undefined;
+    actions: (() => SeriesActionsTemplate) | undefined;
+    selfValue: string | undefined;
+};
+export {};
+//# sourceMappingURL=build-tooltip-base-data.d.ts.map

package/charts/flame/shared/utils/build-tooltip-base-data.js

@@ -0,0 +1,55 @@
+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 build_tooltip_base_data_exports = {};
+__export(build_tooltip_base_data_exports, {
+  buildFlameTooltipBaseData: () => buildFlameTooltipBaseData
+});
+module.exports = __toCommonJS(build_tooltip_base_data_exports);
+var import_format_flame_value = require("./format-flame-value.js");
+var import_messages = require("../components/tooltip/messages.js");
+var import_constants = require("../constants.js");
+function buildFlameTooltipBaseData({
+  payload,
+  data,
+  labelAccessor,
+  selfValueAccessor,
+  valueFormatter,
+  seriesActions,
+  intl
+}) {
+  const datapoint = payload.rectPayload?.datapoint;
+  const color = `${payload.rectPayload?.color}`;
+  const rawLabel = datapoint?.[labelAccessor];
+  const label = typeof rawLabel === "string" || typeof rawLabel === "number" || typeof rawLabel === "boolean" ? String(rawLabel) : "";
+  const childrenCount = Number(datapoint?.[import_constants.CHILDREN_COUNT_FIELD] ?? 0);
+  const subheader = childrenCount > 0 ? intl.formatMessage(import_messages.FLAME_TOOLTIP_MESSAGES.children, {
+    count: childrenCount
+  }) : void 0;
+  const originalDatapoint = datapoint !== void 0 ? data[datapoint[import_constants.FLAME_ORIGINAL_IDX]] : void 0;
+  const actions = seriesActions && originalDatapoint ? () => seriesActions(originalDatapoint) : void 0;
+  const selfValue = selfValueAccessor !== void 0 ? (0, import_format_flame_value.formatFlameValue)(datapoint?.[selfValueAccessor], valueFormatter) : void 0;
+  return {
+    datapoint,
+    color,
+    label,
+    subheader,
+    originalDatapoint,
+    actions,
+    selfValue
+  };
+}

package/charts/flame/shared/utils/make-iterate-slots.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { FlameChartTooltipSlot, FlameGraphTooltipSlot } from '../slots/Tooltip.js';
+import type { Slots } from '../types/flame-internal.js';
+type TooltipSlot = typeof FlameChartTooltipSlot | typeof FlameGraphTooltipSlot;
+export declare const makeIterateSlots: (TooltipSlot: TooltipSlot) => <TData extends ChartDatapoint = ChartDatapoint>(children: ReactNode) => Slots<TData>;
+export {};
+//# sourceMappingURL=make-iterate-slots.d.ts.map

package/charts/flame/shared/utils/make-iterate-slots.js

@@ -0,0 +1,39 @@
+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 make_iterate_slots_exports = {};
+__export(make_iterate_slots_exports, {
+  makeIterateSlots: () => makeIterateSlots
+});
+module.exports = __toCommonJS(make_iterate_slots_exports);
+var import_react = require("react");
+var import_is_slot = require("../../../../core/utils/is-slot.js");
+var import_ColorRule = require("../../../core/slots/ColorRule.js");
+const makeIterateSlots = (TooltipSlot) => (children) => {
+  const slots = {
+    customTooltipTemplate: void 0,
+    colorRules: []
+  };
+  import_react.Children.forEach(children, (child) => {
+    if ((0, import_is_slot.isSlot)(child, TooltipSlot)) {
+      slots.customTooltipTemplate = child.props.children;
+    } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule) && (0, import_ColorRule.isValidColorRule)(child.props)) {
+      slots.colorRules.push(child);
+    }
+  });
+  return slots;
+};

package/charts/flame/shared/utils/order-spans-hierarchically.js

@@ -68,7 +68,12 @@ function orderSpansHierarchically(spans, {
     const x0 = Number(span[x0Accessor]);
     const x1 = Number(span[x1Accessor]);
     const widened = x0 === x1 ? { [x1Accessor]: x1 + 1 } : void 0;
-    result.push({ ...span, ...widened, [import_constants.DEPTH_FIELD]: depth });
+    result.push({
+      ...span,
+      ...widened,
+      [import_constants.DEPTH_FIELD]: depth,
+      [import_constants.CHILDREN_COUNT_FIELD]: childrenMap.get(span[spanIdAccessor])?.length ?? 0
+    });
     const children = childrenMap.get(span[spanIdAccessor]);
     if (!children) {
       continue;

package/charts/flame/shared/utils/resolve-flame-tooltip-content.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { ChartDatapoint } from '../../../core/types/chart-data.js';
+import type { XYChartTooltipPayload } from '../../../xy-chart/types/xy-chart.js';
+import type { CustomTooltipTemplate } from '../types/flame-internal.js';
+export declare const resolveFlameTooltipContent: <TData extends ChartDatapoint>(payload: XYChartTooltipPayload, originalData: readonly TData[], customTooltipTemplate: CustomTooltipTemplate<TData> | undefined, renderDefaultTooltip: (datapoint: TData) => ReactNode) => ReactNode;
+//# sourceMappingURL=resolve-flame-tooltip-content.d.ts.map

package/charts/flame/shared/utils/resolve-flame-tooltip-content.js

@@ -0,0 +1,44 @@
+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 resolve_flame_tooltip_content_exports = {};
+__export(resolve_flame_tooltip_content_exports, {
+  resolveFlameTooltipContent: () => resolveFlameTooltipContent
+});
+module.exports = __toCommonJS(resolve_flame_tooltip_content_exports);
+var import_constants = require("../constants.js");
+const resolveFlameTooltipContent = (payload, originalData, customTooltipTemplate, renderDefaultTooltip) => {
+  const transformedDatapoint = payload.rectPayload?.datapoint;
+  if (!transformedDatapoint) {
+    return;
+  }
+  const originalIdx = transformedDatapoint[import_constants.FLAME_ORIGINAL_IDX];
+  const originalDatapoint = originalData[originalIdx];
+  if (customTooltipTemplate) {
+    const template = customTooltipTemplate({
+      ...payload.rectPayload,
+      datapoint: originalDatapoint
+    });
+    if (template === null) {
+      return null;
+    }
+    if (template) {
+      return template;
+    }
+  }
+  return renderDefaultTooltip(originalDatapoint);
+};

package/charts/gantt-chart/GanttChartLine.css

@@ -1,4 +1,4 @@
-._1pk2ed10-3-12-2 {
+._1pk2ed10-3-13-0 {
   height: 100%;
   width: 100%;
 }

package/charts/gantt-chart/GanttChartLine.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLine_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLine_css_exports);
 var import_GanttChartLine_css_ts_vanilla = require("./GanttChartLine.css");
-var wrapper = "_1pk2ed10-3-12-2";
+var wrapper = "_1pk2ed10-3-13-0";

package/charts/gantt-chart/components/GanttChartLineRenderer.css

@@ -1,4 +1,4 @@
-._mnxak30-3-12-2 {
+._mnxak30-3-13-0 {
   height: 100%;
   display: flex;
   justify-content: center;

package/charts/gantt-chart/components/GanttChartLineRenderer.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLineRenderer_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLineRenderer_css_exports);
 var import_GanttChartLineRenderer_css_ts_vanilla = require("./GanttChartLineRenderer.css");
-var svgWrapperCSS = "_mnxak30-3-12-2";
+var svgWrapperCSS = "_mnxak30-3-13-0";

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.css

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-12-2._1v8s3xl0-3-12-2 {
+._1v8s3xl0-3-13-0._1v8s3xl0-3-13-0 {
   max-height: initial;
   min-width: 160px;
   max-width: 320px;

package/charts/gantt-chart/components/tooltip/GanttChartTooltip.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartTooltip_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartTooltip_css_exports);
 var import_GanttChartTooltip_css_ts_vanilla = require("./GanttChartTooltip.css");
-var ganttChartTooltipCSS = "_1v8s3xl0-3-12-2";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-13-0";

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.css

@@ -1,4 +1,4 @@
-._ezp7cy0-3-12-2 {
+._ezp7cy0-3-13-0 {
   width: 100%;
   height: 100%;
   container-type: size;

package/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.sty.js

@@ -21,4 +21,4 @@ __export(GaugeChartLayout_css_exports, {
 });
 module.exports = __toCommonJS(GaugeChartLayout_css_exports);
 var import_GaugeChartLayout_css_ts_vanilla = require("./GaugeChartLayout.css");
-var layoutContainer = "_ezp7cy0-3-12-2";
+var layoutContainer = "_ezp7cy0-3-13-0";

package/charts/gauge/components/GaugeLabel/GaugeLabel.css

@@ -1,22 +1,22 @@
-._18ourc20-3-12-2 {
+._18ourc20-3-13-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-12-2 {
+._18ourc21-3-13-0 {
   width: fit-content;
 }
-._18ourc22-3-12-2 {
+._18ourc22-3-13-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-12-2 {
+._18ourc23-3-13-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-12-2 {
+._18ourc24-3-13-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-12-2 {
+  ._18ourc24-3-13-0 {
     display: block;
   }
 }

package/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js

@@ -24,6 +24,6 @@ __export(GaugeLabel_css_exports, {
 module.exports = __toCommonJS(GaugeLabel_css_exports);
 var import_GaugeLabel_css_ts_vanilla = require("./GaugeLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var elementLabelWrapper = "_18ourc20-3-12-2";
-var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-12-2", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-12-2", hanging: "_18ourc23-3-12-2" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-12-2";
+var elementLabelWrapper = "_18ourc20-3-13-0";
+var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-13-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-13-0", hanging: "_18ourc23-3-13-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-13-0";

package/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css

@@ -1,4 +1,4 @@
-._1fbjcz30-3-12-2 {
+._1fbjcz30-3-13-0 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template: "valueLabel" 2fr
@@ -7,9 +7,9 @@
   width: 100%;
   height: 100%;
 }
-._1fbjcz30-3-12-2 > #value-label {
+._1fbjcz30-3-13-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-12-2 > #label {
+._1fbjcz30-3-13-0 > #label {
   grid-area: label;
 }

package/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js

@@ -21,4 +21,4 @@ __export(GaugeLabelsWrapper_css_exports, {
 });
 module.exports = __toCommonJS(GaugeLabelsWrapper_css_exports);
 var import_GaugeLabelsWrapper_css_ts_vanilla = require("./GaugeLabelsWrapper.css");
-var labelsContainer = "_1fbjcz30-3-12-2";
+var labelsContainer = "_1fbjcz30-3-13-0";

package/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.css

@@ -1,17 +1,17 @@
-._l0e5zm0-3-12-2 {
+._l0e5zm0-3-13-0 {
   position: relative;
   height: 100%;
   z-index: 0;
 }
-._l0e5zm1-3-12-2 {
+._l0e5zm1-3-13-0 {
   cursor: default;
   user-select: none;
 }
-._l0e5zm2-3-12-2 {
+._l0e5zm2-3-13-0 {
   position: absolute;
   z-index: 1;
 }
-._l0e5zm3-3-12-2 {
+._l0e5zm3-3-13-0 {
   top: 0;
   left: 0;
   width: 100%;

package/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.sty.js

@@ -26,6 +26,6 @@ module.exports = __toCommonJS(GaugeLayoutOverlay_css_exports);
 var import_GaugeLayoutOverlay_css_ts_vanilla = require("./GaugeLayoutOverlay.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var consumerLoadingStyle = { position: "absolute", top: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", backgroundColor: "var(--dt-colors-background-base-default, #f9f9fa)", opacity: 0.4 };
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-12-2", variantClassNames: { showLoading: { true: "_l0e5zm1-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-12-2";
-var tooltipOverlayFull = "_l0e5zm3-3-12-2";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-13-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-13-0";
+var tooltipOverlayFull = "_l0e5zm3-3-13-0";

package/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.css

@@ -1,4 +1,4 @@
-._13c0oci0-3-12-2 {
+._13c0oci0-3-13-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-12-2 svg {
+._13c0oci1-3-13-0 svg {
   width: 1em;
   height: 1em;
   vertical-align: text-bottom;