@dynatrace/strato-components 3.11.3 → 3.12.0

package/esm/charts/flame/flame-graph/FlameGraph.js

@@ -1,17 +1,19 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Divider } from "../../../layouts/divider/Divider.js";
-import { ChartTooltip } from "../../core/components/overlay-tooltip/OverlayTooltip.js";
 import { ChartVariantContext } from "../../core/context/ChartVariantContext.js";
+import { ColorRule } from "../../core/slots/ColorRule.js";
 import { XYChart } from "../../xy-chart/XYChartRoot.js";
+import { FlameTooltip } from "../shared/components/tooltip/FlameTooltip.js";
 import {
   CHILDREN_COUNT_FIELD,
   DEPTH_FIELD,
+  DISPLAY_NAME_FLAME_GRAPH,
   FLAME_ORIGINAL_IDX,
   XY_DEFAULTS
 } from "../shared/constants.js";
+import { iterateSlots } from "./utils/iterate-slots.js";
+import { FlameGraphTooltipSlot as Tooltip } from "../shared/slots/Tooltip.js";
 import { aggregateSpansToFlameGraph } from "../shared/utils/aggregate-spans-to-flame-graph.js";
-import { formatFlameValue } from "../shared/utils/format-flame-value.js";
 const CROSSHAIR_VARIANT = {
   crosshair: {
     horizontalHidden: true,
@@ -19,7 +21,7 @@ const CROSSHAIR_VARIANT = {
     cursor: "default"
   }
 };
-function FlameGraph({
+const FlameGraphRoot = ({
   data,
   idAccessor,
   parentIdAccessor,
@@ -33,8 +35,9 @@ function FlameGraph({
   valueFormatter,
   currentZoom,
   seriesActions,
-  height
-}) {
+  height,
+  children
+}) => {
   const aggregatedData = useMemo(
     () => aggregateSpansToFlameGraph(
       data.map((datum, index) => ({
@@ -60,6 +63,7 @@ function FlameGraph({
       sortAccessor
     ]
   );
+  const { customTooltipTemplate, colorRules } = iterateSlots(children);
   return /* @__PURE__ */ jsx(ChartVariantContext.Provider, { value: CROSSHAIR_VARIANT, children: /* @__PURE__ */ jsxs(
     XYChart,
     {
@@ -103,50 +107,53 @@ function FlameGraph({
         ),
         /* @__PURE__ */ jsx(XYChart.Legend, { hidden: true }),
         /* @__PURE__ */ jsx(XYChart.Toolbar, { hidden: true }),
+        colorRules,
         /* @__PURE__ */ jsx(XYChart.Tooltip, { children: (payload) => {
           const datapoint = payload.rectPayload?.datapoint;
-          const label = String(datapoint?.[labelAccessor] ?? "");
+          if (!datapoint) {
+            return;
+          }
+          if (customTooltipTemplate) {
+            const template = customTooltipTemplate(datapoint);
+            if (template === null) {
+              return null;
+            }
+            if (template) {
+              return template;
+            }
+          }
           const childrenCount = Number(
             datapoint?.[CHILDREN_COUNT_FIELD] ?? 0
           );
           const totalValue = Number(datapoint?.[valueAccessor] ?? 0);
           const selfValue = selfValueAccessor !== void 0 ? Number(datapoint?.[selfValueAccessor] ?? 0) : 0;
-          const nonSelfValue = totalValue - selfValue;
-          const subheader = childrenCount > 0 ? `${childrenCount} children with ${nonSelfValue} value` : "";
-          const selfDescription = selfValueAccessor !== void 0 ? `Self value: ${formatFlameValue(
-            datapoint?.[selfValueAccessor],
-            valueFormatter
-          )}` : void 0;
-          const actions = seriesActions && datapoint ? () => seriesActions(data[datapoint[FLAME_ORIGINAL_IDX]]) : void 0;
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ChartTooltip.Header, { header1: label, subheader }),
-            /* @__PURE__ */ jsx(
-              Divider,
-              {
-                orientation: "horizontal",
-                style: { marginBottom: "4px" }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ChartTooltip.SeriesItem,
-              {
-                color: `${payload.rectPayload?.color}`,
-                name: "Total",
-                value: formatFlameValue(
-                  datapoint?.[valueAccessor],
-                  valueFormatter
-                ),
-                description: selfDescription,
-                actions
-              }
-            )
-          ] });
+          const subheader = childrenCount > 0 ? `${childrenCount} children with ${totalValue - selfValue} value` : "";
+          return /* @__PURE__ */ jsx(
+            FlameTooltip,
+            {
+              payload,
+              data,
+              labelAccessor,
+              valueField: valueAccessor,
+              subheader,
+              selfValueAccessor,
+              selfDescriptionLabel: "Self value",
+              valueFormatter,
+              seriesActions
+            }
+          );
         } })
       ]
     }
   ) });
-}
+};
+const FlameGraph = Object.assign(FlameGraphRoot, {
+  Tooltip,
+  ColorRule
+});
+FlameGraph.displayName = DISPLAY_NAME_FLAME_GRAPH;
 export {
-  FlameGraph
+  FlameGraph,
+  FlameGraphRoot
 };
 //# sourceMappingURL=FlameGraph.js.map

package/esm/charts/flame/flame-graph/FlameGraph.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/flame/flame-graph/FlameGraph.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { Divider } from '../../../layouts/divider/Divider.js';\nimport { ChartTooltip } from '../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { ChartVariantContext } from '../../core/context/ChartVariantContext.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport {\n  CHILDREN_COUNT_FIELD,\n  DEPTH_FIELD,\n  FLAME_ORIGINAL_IDX,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport type { FlameGraphProps } from '../shared/types/flame-chart.js';\nimport { aggregateSpansToFlameGraph } from '../shared/utils/aggregate-spans-to-flame-graph.js';\nimport { formatFlameValue } from '../shared/utils/format-flame-value.js';\n\nconst CROSSHAIR_VARIANT = {\n  crosshair: {\n    horizontalHidden: true,\n    verticalHidden: true,\n    cursor: 'default' as const,\n  },\n};\n\n/** @internal */\nexport function FlameGraph<TData extends ChartDatapoint = ChartDatapoint>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  sortAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  currentZoom,\n  seriesActions,\n  height,\n}: FlameGraphProps<TData>) {\n  const aggregatedData = useMemo(\n    () =>\n      aggregateSpansToFlameGraph(\n        data.map((datum, index) => ({\n          ...datum,\n          [FLAME_ORIGINAL_IDX]: index,\n        })),\n        {\n          idAccessor,\n          parentIdAccessor,\n          labelAccessor,\n          valueAccessor,\n          selfValueAccessor,\n          sortAccessor,\n        },\n      ),\n    [\n      data,\n      idAccessor,\n      parentIdAccessor,\n      labelAccessor,\n      valueAccessor,\n      selfValueAccessor,\n      sortAccessor,\n    ],\n  );\n\n  return (\n    <ChartVariantContext.Provider value={CROSSHAIR_VARIANT}>\n      <XYChart\n        data={aggregatedData}\n        truncationMode={truncationMode}\n        height={height}\n      >\n        <XYChart.RectSeries\n          x0Accessor={XY_DEFAULTS.x0Accessor}\n          x1Accessor={XY_DEFAULTS.x1Accessor}\n          y0Accessor={DEPTH_FIELD}\n          valueAccessor={valueAccessor}\n          colorPalette={colorPalette}\n          _labelAccessor={labelAccessor}\n          xAxisId={XY_DEFAULTS.xAxisId}\n          yAxisId={XY_DEFAULTS.yAxisId}\n        />\n        <XYChart.XAxis\n          id={XY_DEFAULTS.xAxisId}\n          type=\"numerical\"\n          position=\"top\"\n          hidden\n          currentZoom={currentZoom}\n          infiniteZoom\n        />\n        <XYChart.YAxis\n          id={XY_DEFAULTS.yAxisId}\n          type=\"categorical\"\n          position=\"left\"\n          hidden\n          reversed={orientation === 'bottom-up'}\n        />\n        <XYChart.Legend hidden />\n        <XYChart.Toolbar hidden />\n        <XYChart.Tooltip>\n          {(payload) => {\n            const datapoint = payload.rectPayload?.datapoint;\n            const label = String(datapoint?.[labelAccessor] ?? '');\n            const childrenCount = Number(\n              datapoint?.[CHILDREN_COUNT_FIELD] ?? 0,\n            );\n            const totalValue = Number(datapoint?.[valueAccessor] ?? 0);\n            const selfValue =\n              selfValueAccessor !== undefined\n                ? Number(datapoint?.[selfValueAccessor] ?? 0)\n                : 0;\n            const nonSelfValue = totalValue - selfValue;\n            const subheader =\n              childrenCount > 0\n                ? `${childrenCount} children with ${nonSelfValue} value`\n                : '';\n            const selfDescription =\n              selfValueAccessor !== undefined\n                ? `Self value: ${formatFlameValue(\n                    datapoint?.[selfValueAccessor],\n                    valueFormatter,\n                  )}`\n                : undefined;\n            const actions =\n              seriesActions && datapoint\n                ? () =>\n                    seriesActions(data[datapoint[FLAME_ORIGINAL_IDX] as number])\n                : undefined;\n\n            return (\n              <>\n                <ChartTooltip.Header header1={label} subheader={subheader} />\n                <Divider\n                  orientation=\"horizontal\"\n                  style={{ marginBottom: '4px' }}\n                />\n                <ChartTooltip.SeriesItem\n                  color={`${payload.rectPayload?.color}`}\n                  name=\"Total\"\n                  value={formatFlameValue(\n                    datapoint?.[valueAccessor],\n                    valueFormatter,\n                  )}\n                  description={selfDescription}\n                  actions={actions}\n                />\n              </>\n            );\n          }}\n        </XYChart.Tooltip>\n      </XYChart>\n    </ChartVariantContext.Provider>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type PropsWithChildren, useMemo } from 'react';\n\nimport { ChartVariantContext } from '../../core/context/ChartVariantContext.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport { FlameTooltip } from '../shared/components/tooltip/FlameTooltip.js';\nimport {\n  CHILDREN_COUNT_FIELD,\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_GRAPH,\n  FLAME_ORIGINAL_IDX,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { FlameGraphTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameGraphProps } from '../shared/types/flame-chart.js';\nimport { aggregateSpansToFlameGraph } from '../shared/utils/aggregate-spans-to-flame-graph.js';\n\nconst CROSSHAIR_VARIANT = {\n  crosshair: {\n    horizontalHidden: true,\n    verticalHidden: true,\n    cursor: 'default' as const,\n  },\n};\n\n/**\n * @internal\n */\nexport const FlameGraphRoot = /* @__PURE__ */ <\n  TData extends ChartDatapoint = ChartDatapoint,\n>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  sortAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  currentZoom,\n  seriesActions,\n  height,\n  children,\n}: PropsWithChildren<FlameGraphProps<TData>>) => {\n  const aggregatedData = useMemo(\n    () =>\n      aggregateSpansToFlameGraph(\n        data.map((datum, index) => ({\n          ...datum,\n          [FLAME_ORIGINAL_IDX]: index,\n        })),\n        {\n          idAccessor,\n          parentIdAccessor,\n          labelAccessor,\n          valueAccessor,\n          selfValueAccessor,\n          sortAccessor,\n        },\n      ),\n    [\n      data,\n      idAccessor,\n      parentIdAccessor,\n      labelAccessor,\n      valueAccessor,\n      selfValueAccessor,\n      sortAccessor,\n    ],\n  );\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  return (\n    <ChartVariantContext.Provider value={CROSSHAIR_VARIANT}>\n      <XYChart\n        data={aggregatedData}\n        truncationMode={truncationMode}\n        height={height}\n      >\n        <XYChart.RectSeries\n          x0Accessor={XY_DEFAULTS.x0Accessor}\n          x1Accessor={XY_DEFAULTS.x1Accessor}\n          y0Accessor={DEPTH_FIELD}\n          valueAccessor={valueAccessor}\n          colorPalette={colorPalette}\n          _labelAccessor={labelAccessor}\n          xAxisId={XY_DEFAULTS.xAxisId}\n          yAxisId={XY_DEFAULTS.yAxisId}\n        />\n        <XYChart.XAxis\n          id={XY_DEFAULTS.xAxisId}\n          type=\"numerical\"\n          position=\"top\"\n          hidden\n          currentZoom={currentZoom}\n          infiniteZoom\n        />\n        <XYChart.YAxis\n          id={XY_DEFAULTS.yAxisId}\n          type=\"categorical\"\n          position=\"left\"\n          hidden\n          reversed={orientation === 'bottom-up'}\n        />\n        <XYChart.Legend hidden />\n        <XYChart.Toolbar hidden />\n        {colorRules}\n        <XYChart.Tooltip>\n          {(payload) => {\n            const datapoint = payload.rectPayload?.datapoint as\n              | TData\n              | undefined;\n\n            if (!datapoint) {\n              return;\n            }\n\n            if (customTooltipTemplate) {\n              const template = customTooltipTemplate(datapoint);\n\n              if (template === null) {\n                return null;\n              }\n              if (template) {\n                return template;\n              }\n            }\n\n            const childrenCount = Number(\n              datapoint?.[CHILDREN_COUNT_FIELD] ?? 0,\n            );\n            const totalValue = Number(datapoint?.[valueAccessor] ?? 0);\n            const selfValue =\n              selfValueAccessor !== undefined\n                ? Number(datapoint?.[selfValueAccessor] ?? 0)\n                : 0;\n            const subheader =\n              childrenCount > 0\n                ? `${childrenCount} children with ${\n                    totalValue - selfValue\n                  } value`\n                : '';\n\n            return (\n              <FlameTooltip\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                valueField={valueAccessor}\n                subheader={subheader}\n                selfValueAccessor={selfValueAccessor}\n                selfDescriptionLabel=\"Self value\"\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n              />\n            );\n          }}\n        </XYChart.Tooltip>\n      </XYChart>\n    </ChartVariantContext.Provider>\n  );\n};\n\n/** @internal */\nexport const FlameGraph = Object.assign(FlameGraphRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameGraph as typeof FlameGraph & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_GRAPH;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/flame/flame-graph/utils/iterate-slots.js

@@ -0,0 +1,22 @@
+import { Children } from "react";
+import { isSlot } from "../../../../core/utils/is-slot.js";
+import { ColorRule, isValidColorRule } from "../../../core/slots/ColorRule.js";
+import { FlameGraphTooltipSlot } from "../../shared/slots/Tooltip.js";
+const iterateSlots = (children) => {
+  const slots = {
+    customTooltipTemplate: void 0,
+    colorRules: []
+  };
+  Children.forEach(children, (child) => {
+    if (isSlot(child, FlameGraphTooltipSlot)) {
+      slots.customTooltipTemplate = child.props.children;
+    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {
+      slots.colorRules.push(child);
+    }
+  });
+  return slots;
+};
+export {
+  iterateSlots
+};
+//# sourceMappingURL=iterate-slots.js.map

package/esm/charts/flame/flame-graph/utils/iterate-slots.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/flame/flame-graph/utils/iterate-slots.ts"],
+  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { ColorRule, isValidColorRule } from '../../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../../core/types/chart-data.js';\nimport { FlameGraphTooltipSlot } from '../../shared/slots/Tooltip.js';\nimport type {\n  CustomTooltipTemplate,\n  Slots,\n} from '../../shared/types/flame-internal.js';\n\nexport const iterateSlots = <TData extends ChartDatapoint = ChartDatapoint>(\n  children: ReactNode,\n): Slots<TData> => {\n  const slots: Slots<TData> = {\n    customTooltipTemplate: undefined,\n    colorRules: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, FlameGraphTooltipSlot)) {\n      slots.customTooltipTemplate = child.props\n        .children as CustomTooltipTemplate<TData>;\n    } else if (isSlot(child, ColorRule) && isValidColorRule(child.props)) {\n      slots.colorRules.push(child);\n    }\n  });\n\n  return slots;\n};\n"],
+  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAE5C,SAAS,6BAA6B;AAM/B,MAAM,eAAe,CAC1B,aACiB;AACjB,QAAM,QAAsB;AAAA,IAC1B,uBAAuB;AAAA,IACvB,YAAY,CAAC;AAAA,EACf;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,qBAAqB,GAAG;AACxC,YAAM,wBAAwB,MAAM,MACjC;AAAA,IACL,WAAW,OAAO,OAAO,SAAS,KAAK,iBAAiB,MAAM,KAAK,GAAG;AACpE,YAAM,WAAW,KAAK,KAAK;AAAA,IAC7B;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "names": []
+}

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

@@ -0,0 +1,46 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Divider } from "../../../../../layouts/divider/Divider.js";
+import { ChartTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { FLAME_ORIGINAL_IDX } from "../../constants.js";
+import { formatFlameValue } from "../../utils/format-flame-value.js";
+function FlameTooltip({
+  payload,
+  data,
+  labelAccessor,
+  valueField,
+  subheader,
+  selfValueAccessor,
+  selfDescriptionLabel = "Self",
+  valueFormatter,
+  seriesActions
+}) {
+  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}: ${formatFlameValue(
+    datapoint?.[selfValueAccessor],
+    valueFormatter
+  )}` : void 0;
+  const actions = seriesActions && datapoint ? () => seriesActions(data[datapoint[FLAME_ORIGINAL_IDX]]) : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ChartTooltip.Header, { header1: label, subheader }),
+    /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", style: { marginBottom: "4px" } }),
+    /* @__PURE__ */ jsx(
+      ChartTooltip.SeriesItem,
+      {
+        color: `${payload.rectPayload?.color}`,
+        name: "Total",
+        value: formatFlameValue(datapoint?.[valueField], valueFormatter),
+        description: selfDescription,
+        actions
+      }
+    )
+  ] });
+}
+export {
+  FlameTooltip
+};
+//# sourceMappingURL=FlameTooltip.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/shared/components/tooltip/FlameTooltip.tsx"],
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { Divider } from '../../../../../layouts/divider/Divider.js';\nimport { ChartTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FLAME_ORIGINAL_IDX } from '../../constants.js';\nimport { formatFlameValue } from '../../utils/format-flame-value.js';\n\ninterface FlameTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  valueField: string;\n  subheader?: string;\n  selfValueAccessor?: string;\n  selfDescriptionLabel?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n}\n\nexport function FlameTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  valueField,\n  subheader,\n  selfValueAccessor,\n  selfDescriptionLabel = 'Self',\n  valueFormatter,\n  seriesActions,\n}: Readonly<FlameTooltipProps<TData>>): ReactNode {\n  const datapoint = payload.rectPayload?.datapoint;\n\n  if (!datapoint) {\n    return null;\n  }\n\n  const rawLabel = datapoint?.[labelAccessor];\n  const label =\n    typeof rawLabel === 'string' ||\n    typeof rawLabel === 'number' ||\n    typeof rawLabel === 'boolean'\n      ? String(rawLabel)\n      : '';\n  const selfDescription =\n    selfValueAccessor !== undefined\n      ? `${selfDescriptionLabel}: ${formatFlameValue(\n          datapoint?.[selfValueAccessor],\n          valueFormatter,\n        )}`\n      : undefined;\n  const actions =\n    seriesActions && datapoint\n      ? () => seriesActions(data[datapoint[FLAME_ORIGINAL_IDX] as number])\n      : undefined;\n\n  return (\n    <>\n      <ChartTooltip.Header header1={label} subheader={subheader} />\n      <Divider orientation=\"horizontal\" style={{ marginBottom: '4px' }} />\n      <ChartTooltip.SeriesItem\n        color={`${payload.rectPayload?.color}`}\n        name=\"Total\"\n        value={formatFlameValue(datapoint?.[valueField], valueFormatter)}\n        description={selfDescription}\n        actions={actions}\n      />\n    </>\n  );\n}\n"],
+  "mappings": "AA4DI,mBACE,KADF;AA1DJ,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAK7B,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AAc1B,SAAS,aAA2C;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA;AACF,GAAkD;AAChD,QAAM,YAAY,QAAQ,aAAa;AAEvC,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,YAAY,aAAa;AAC1C,QAAM,QACJ,OAAO,aAAa,YACpB,OAAO,aAAa,YACpB,OAAO,aAAa,YAChB,OAAO,QAAQ,IACf;AACN,QAAM,kBACJ,sBAAsB,SAClB,GAAG,oBAAoB,KAAK;AAAA,IAC1B,YAAY,iBAAiB;AAAA,IAC7B;AAAA,EACF,CAAC,KACD;AACN,QAAM,UACJ,iBAAiB,YACb,MAAM,cAAc,KAAK,UAAU,kBAAkB,CAAW,CAAC,IACjE;AAEN,SACE,iCACE;AAAA,wBAAC,aAAa,QAAb,EAAoB,SAAS,OAAO,WAAsB;AAAA,IAC3D,oBAAC,WAAQ,aAAY,cAAa,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,IAClE;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,GAAG,QAAQ,aAAa,KAAK;AAAA,QACpC,MAAK;AAAA,QACL,OAAO,iBAAiB,YAAY,UAAU,GAAG,cAAc;AAAA,QAC/D,aAAa;AAAA,QACb;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/esm/charts/flame/shared/constants.js

@@ -10,9 +10,13 @@ const XY_DEFAULTS = {
   xAxisId: "flame-x-axis",
   yAxisId: "flame-y-axis"
 };
+const DISPLAY_NAME_FLAME_CHART = "FlameChart";
+const DISPLAY_NAME_FLAME_GRAPH = "FlameGraph";
 export {
   CHILDREN_COUNT_FIELD,
   DEPTH_FIELD,
+  DISPLAY_NAME_FLAME_CHART,
+  DISPLAY_NAME_FLAME_GRAPH,
   END_FIELD,
   FLAME_ORIGINAL_IDX,
   START_FIELD,

package/esm/charts/flame/shared/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/flame/shared/constants.ts"],
-  "sourcesContent": ["/**\n * Field names attached by flame utilities to each datapoint before handing the\n * row to XYChart. Kept as constants so accessors passed to XYChart and reads\n * inside tooltips stay in lockstep.\n */\n\n/** Depth of the frame in the call tree (root = 0). */\nexport const DEPTH_FIELD = 'depth';\n\n/** Index into the original `data` array; used to route tooltip actions back to the caller's row. */\nexport const FLAME_ORIGINAL_IDX = '__flameOriginalIdx';\n\n/** Derived span duration: `endAccessor - startAccessor`. */\nexport const VALUE_FIELD = '__value';\n\n/** Normalized start: `startAccessor - minTime`. */\nexport const START_FIELD = '__start';\n\n/** Normalized end: `endAccessor - minTime`. */\nexport const END_FIELD = '__end';\n\n/** Number of direct children of a node in the aggregated flame graph. */\nexport const CHILDREN_COUNT_FIELD = 'childrenCount';\n\nexport const XY_DEFAULTS = {\n  x0Accessor: 'x0',\n  x1Accessor: 'x1',\n  xAxisId: 'flame-x-axis',\n  yAxisId: 'flame-y-axis',\n} as const;\n"],
-  "mappings": "AAOO,MAAM,cAAc;AAGpB,MAAM,qBAAqB;AAG3B,MAAM,cAAc;AAGpB,MAAM,cAAc;AAGpB,MAAM,YAAY;AAGlB,MAAM,uBAAuB;AAE7B,MAAM,cAAc;AAAA,EACzB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AACX;",
+  "sourcesContent": ["/**\n * Field names attached by flame utilities to each datapoint before handing the\n * row to XYChart. Kept as constants so accessors passed to XYChart and reads\n * inside tooltips stay in lockstep.\n */\n\n/** Depth of the frame in the call tree (root = 0). */\nexport const DEPTH_FIELD = 'depth';\n\n/** Index into the original `data` array; used to route tooltip actions back to the caller's row. */\nexport const FLAME_ORIGINAL_IDX = '__flameOriginalIdx';\n\n/** Derived span duration: `endAccessor - startAccessor`. */\nexport const VALUE_FIELD = '__value';\n\n/** Normalized start: `startAccessor - minTime`. */\nexport const START_FIELD = '__start';\n\n/** Normalized end: `endAccessor - minTime`. */\nexport const END_FIELD = '__end';\n\n/** Number of direct children of a node in the aggregated flame graph. */\nexport const CHILDREN_COUNT_FIELD = 'childrenCount';\n\nexport const XY_DEFAULTS = {\n  x0Accessor: 'x0',\n  x1Accessor: 'x1',\n  xAxisId: 'flame-x-axis',\n  yAxisId: 'flame-y-axis',\n} as const;\n\nexport const DISPLAY_NAME_FLAME_CHART = 'FlameChart';\nexport const DISPLAY_NAME_FLAME_GRAPH = 'FlameGraph';\n"],
+  "mappings": "AAOO,MAAM,cAAc;AAGpB,MAAM,qBAAqB;AAG3B,MAAM,cAAc;AAGpB,MAAM,cAAc;AAGpB,MAAM,YAAY;AAGlB,MAAM,uBAAuB;AAE7B,MAAM,cAAc;AAAA,EACzB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AACX;AAEO,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;",
   "names": []
 }

package/esm/charts/flame/shared/slots/Tooltip.js

@@ -0,0 +1,13 @@
+const FlameChartTooltipSlot = function(_props) {
+  return null;
+};
+FlameChartTooltipSlot.displayName = "FlameChart.Tooltip";
+const FlameGraphTooltipSlot = function(_props) {
+  return null;
+};
+FlameGraphTooltipSlot.displayName = "FlameGraph.Tooltip";
+export {
+  FlameChartTooltipSlot,
+  FlameGraphTooltipSlot
+};
+//# sourceMappingURL=Tooltip.js.map

package/esm/charts/flame/shared/slots/Tooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/flame/shared/slots/Tooltip.ts"],
+  "sourcesContent": ["import type { TooltipProps } from '../../../core/slots/Tooltip.js';\nimport type { ChartDatapoint } from '../../../core/types/chart-data.js';\n\n/**\n * @internal\n */\nexport const FlameChartTooltipSlot = function <TData extends ChartDatapoint>(\n  _props: TooltipProps<TData>,\n): null {\n  return null;\n};\nFlameChartTooltipSlot.displayName = 'FlameChart.Tooltip';\n/**\n * @internal\n */\nexport const FlameGraphTooltipSlot = function <TData extends ChartDatapoint>(\n  _props: TooltipProps<TData>,\n): null {\n  return null;\n};\nFlameGraphTooltipSlot.displayName = 'FlameGraph.Tooltip';\n"],
+  "mappings": "AAMO,MAAM,wBAAwB,SACnC,QACM;AACN,SAAO;AACT;AACA,sBAAsB,cAAc;AAI7B,MAAM,wBAAwB,SACnC,QACM;AACN,SAAO;AACT;AACA,sBAAsB,cAAc;",
+  "names": []
+}

package/esm/charts/flame/shared/types/flame-internal.js

@@ -0,0 +1 @@
+//# sourceMappingURL=flame-internal.js.map

package/esm/charts/flame/shared/types/flame-internal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/charts/gantt-chart/GanttChartLine.css

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

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

@@ -1,5 +1,5 @@
 import "./GanttChartLine.css";
-var wrapper = "_1pk2ed10-3-11-3";
+var wrapper = "_1pk2ed10-3-12-0";
 export {
   wrapper
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/gantt-chart/GanttChartLine.css.ts"],
-  "sourcesContent": ["import './GanttChartLine.css';\nexport var wrapper = '_1pk2ed10-3-11-3';"],
+  "sourcesContent": ["import './GanttChartLine.css';\nexport var wrapper = '_1pk2ed10-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GanttChartLineRenderer.css";
-var svgWrapperCSS = "_mnxak30-3-11-3";
+var svgWrapperCSS = "_mnxak30-3-12-0";
 export {
   svgWrapperCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gantt-chart/components/GanttChartLineRenderer.css.ts"],
-  "sourcesContent": ["import './GanttChartLineRenderer.css';\nexport var svgWrapperCSS = '_mnxak30-3-11-3';"],
+  "sourcesContent": ["import './GanttChartLineRenderer.css';\nexport var svgWrapperCSS = '_mnxak30-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GanttChartTooltip.css";
-var ganttChartTooltipCSS = "_1v8s3xl0-3-11-3";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-12-0";
 export {
   ganttChartTooltipCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gantt-chart/components/tooltip/GanttChartTooltip.css.ts"],
-  "sourcesContent": ["import './GanttChartTooltip.css';\nexport var ganttChartTooltipCSS = '_1v8s3xl0-3-11-3';"],
+  "sourcesContent": ["import './GanttChartTooltip.css';\nexport var ganttChartTooltipCSS = '_1v8s3xl0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GaugeChartLayout.css";
-var layoutContainer = "_ezp7cy0-3-11-3";
+var layoutContainer = "_ezp7cy0-3-12-0";
 export {
   layoutContainer
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.css.ts"],
-  "sourcesContent": ["import './GaugeChartLayout.css';\nexport var layoutContainer = '_ezp7cy0-3-11-3';"],
+  "sourcesContent": ["import './GaugeChartLayout.css';\nexport var layoutContainer = '_ezp7cy0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

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

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

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

@@ -1,8 +1,8 @@
 import "./GaugeLabel.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var elementLabelWrapper = "_18ourc20-3-11-3";
-var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-11-3", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-11-3", hanging: "_18ourc23-3-11-3" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-11-3";
+var elementLabelWrapper = "_18ourc20-3-12-0";
+var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-12-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-12-0", hanging: "_18ourc23-3-12-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-12-0";
 export {
   elementLabelWrapper,
   foreignObjectContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLabel/GaugeLabel.css.ts"],
-  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-11-3';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-11-3',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-11-3',hanging:'_18ourc23-3-11-3'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-11-3';"],
+  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-12-0';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-12-0',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-12-0',hanging:'_18ourc23-3-12-0'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB;AAC1B,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,kBAAiB,EAAC,MAAK,oBAAmB,SAAQ,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,kBAAiB,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpO,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GaugeLabelsWrapper.css";
-var labelsContainer = "_1fbjcz30-3-11-3";
+var labelsContainer = "_1fbjcz30-3-12-0";
 export {
   labelsContainer
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css.ts"],
-  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-11-3';"],
+  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

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

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

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

@@ -1,9 +1,9 @@
 import "./GaugeLayoutOverlay.css";
 import { createRuntimeFn as _7a468 } from "@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 = _7a468({ defaultClassName: "_l0e5zm0-3-11-3", variantClassNames: { showLoading: { true: "_l0e5zm1-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-11-3";
-var tooltipOverlayFull = "_l0e5zm3-3-11-3";
+var container = _7a468({ defaultClassName: "_l0e5zm0-3-12-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-12-0";
+var tooltipOverlayFull = "_l0e5zm3-3-12-0";
 export {
   consumerLoadingStyle,
   container,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.css.ts"],
-  "sourcesContent": ["import './GaugeLayoutOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport 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};\nexport var container = _7a468({defaultClassName:'_l0e5zm0-3-11-3',variantClassNames:{showLoading:{true:'_l0e5zm1-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var tooltipOverlay = '_l0e5zm2-3-11-3';\nexport var tooltipOverlayFull = '_l0e5zm3-3-11-3';"],
+  "sourcesContent": ["import './GaugeLayoutOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport 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};\nexport var container = _7a468({defaultClassName:'_l0e5zm0-3-12-0',variantClassNames:{showLoading:{true:'_l0e5zm1-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var tooltipOverlay = '_l0e5zm2-3-12-0';\nexport var tooltipOverlayFull = '_l0e5zm3-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,EAAC,UAAS,YAAW,KAAI,GAAE,OAAM,QAAO,QAAO,QAAO,QAAO,GAAE,eAAc,QAAO,iBAAgB,qDAAoD,SAAQ,IAAG;AAC9L,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3J,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;",
   "names": []
 }

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

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

package/esm/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.sty.js

@@ -1,6 +1,6 @@
 import "./GaugeResponsiveLabel.css";
-var parentSvgStyle = "_13c0oci1-3-11-3";
-var responsiveLabelContainer = "_13c0oci0-3-11-3";
+var parentSvgStyle = "_13c0oci1-3-12-0";
+var responsiveLabelContainer = "_13c0oci0-3-12-0";
 export {
   parentSvgStyle,
   responsiveLabelContainer