@dynatrace/strato-components 3.2.1 → 3.3.0

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nexport var labelStyle = '_bh277f0-3-2-1';"],
+  "sourcesContent": ["import './Label.css';\nexport var labelStyle = '_bh277f0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.css

@@ -1,4 +1,4 @@
-._xxg5xc0-3-2-1 {
+._xxg5xc0-3-3-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.sty.js

@@ -1,5 +1,5 @@
 import "./Max.css";
-var maxValue = "_xxg5xc0-3-2-1";
+var maxValue = "_xxg5xc0-3-3-0";
 export {
   maxValue
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.css.ts"],
-  "sourcesContent": ["import './Max.css';\nexport var maxValue = '_xxg5xc0-3-2-1';"],
+  "sourcesContent": ["import './Max.css';\nexport var maxValue = '_xxg5xc0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.css

@@ -1,4 +1,4 @@
-._16mgjbd0-3-2-1 {
+._16mgjbd0-3-3-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.sty.js

@@ -1,5 +1,5 @@
 import "./Min.css";
-var minValue = "_16mgjbd0-3-2-1";
+var minValue = "_16mgjbd0-3-3-0";
 export {
   minValue
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.css.ts"],
-  "sourcesContent": ["import './Min.css';\nexport var minValue = '_16mgjbd0-3-2-1';"],
+  "sourcesContent": ["import './Min.css';\nexport var minValue = '_16mgjbd0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.css

@@ -1,4 +1,4 @@
-._1euwfb00-3-2-1 {
+._1euwfb00-3-3-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.sty.js

@@ -1,5 +1,5 @@
 import "./Value.css";
-var valueStyle = "_1euwfb00-3-2-1";
+var valueStyle = "_1euwfb00-3-3-0";
 export {
   valueStyle
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.css.ts"],
-  "sourcesContent": ["import './Value.css';\nexport var valueStyle = '_1euwfb00-3-2-1';"],
+  "sourcesContent": ["import './Value.css';\nexport var valueStyle = '_1euwfb00-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.css

@@ -1,4 +1,4 @@
-._12md1g60-3-2-1 {
+._12md1g60-3-3-0 {
   background-color: var(--dt-colors-theme-neutral-40, #dadbe4);
   width: 100%;
   display: block;

package/esm/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarPlot.css";
-var svgElement = "_12md1g60-3-2-1";
+var svgElement = "_12md1g60-3-3-0";
 export {
   svgElement
 };

package/esm/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.css.ts"],
-  "sourcesContent": ["import './MeterBarPlot.css';\nexport var svgElement = '_12md1g60-3-2-1';"],
+  "sourcesContent": ["import './MeterBarPlot.css';\nexport var svgElement = '_12md1g60-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-toolbar/MeterBarToolbar.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from "../../../../../core/hooks/useBehavioralTrackingProps.js";
+import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { ChartToolbarRenderer } from "../../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { getA11yToolbarConfig } from "../../../../core/utils/zoom.js";
 import { useMeterBarToolbarConfig } from "../../context/MeterBarToolbarConfig.context.js";
@@ -9,6 +10,7 @@ const MeterBarChartToolbar = () => {
   const behaviorTrackingProps = _useBehavioralTrackingProps(
     toolbarConfig ?? {}
   )[0];
+  const dispatch = useTooltipReducer();
   if (!isToolbarEnabled) {
     return null;
   }
@@ -27,6 +29,11 @@ const MeterBarChartToolbar = () => {
       isDownloadEnabled: false,
       toolbarDisplayMode: "inline",
       overlayClassName: "",
+      onToggleMenu: (isOpen) => {
+        if (isOpen) {
+          dispatch({ type: "RESET_TOOLTIP" })();
+        }
+      },
       ...behaviorTrackingProps
     }
   );

package/esm/charts/meter-bar/shared/components/meter-bar-toolbar/MeterBarToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-toolbar/MeterBarToolbar.tsx"],
-  "sourcesContent": ["import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { getA11yToolbarConfig } from '../../../../core/utils/zoom.js';\nimport { useMeterBarToolbarConfig } from '../../context/MeterBarToolbarConfig.context.js';\n\nexport const MeterBarChartToolbar = () => {\n  const toolbarConfig = useMeterBarToolbarConfig();\n  const isToolbarEnabled =\n    !toolbarConfig?.hidden && !!toolbarConfig?.intents?.length;\n  const behaviorTrackingProps = _useBehavioralTrackingProps(\n    toolbarConfig ?? {},\n  )[0];\n\n  if (!isToolbarEnabled) {\n    return null;\n  }\n\n  return (\n    <ChartToolbarRenderer\n      visible={isToolbarEnabled}\n      placement={toolbarConfig.placement}\n      collapsed={toolbarConfig.collapsed}\n      draggable={false}\n      initialA11yState={getA11yToolbarConfig({\n        intent: !!toolbarConfig.intents,\n      })}\n      menuDisplayMode=\"never\"\n      intents={toolbarConfig.intents}\n      isDownloadEnabled={false}\n      toolbarDisplayMode=\"inline\"\n      overlayClassName=\"\"\n      {...behaviorTrackingProps}\n    />\n  );\n};\n\nMeterBarChartToolbar['displayName'] = 'MeterBarChartToolbar';\n"],
-  "mappings": "AAkBI;AAlBJ,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAElC,MAAM,uBAAuB,MAAM;AACxC,QAAM,gBAAgB,yBAAyB;AAC/C,QAAM,mBACJ,CAAC,eAAe,UAAU,CAAC,CAAC,eAAe,SAAS;AACtD,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB,CAAC;AAAA,EACpB,EAAE,CAAC;AAEH,MAAI,CAAC,kBAAkB;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc;AAAA,MACzB,WAAW;AAAA,MACX,kBAAkB,qBAAqB;AAAA,QACrC,QAAQ,CAAC,CAAC,cAAc;AAAA,MAC1B,CAAC;AAAA,MACD,iBAAgB;AAAA,MAChB,SAAS,cAAc;AAAA,MACvB,mBAAmB;AAAA,MACnB,oBAAmB;AAAA,MACnB,kBAAiB;AAAA,MAChB,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartToolbarRenderer } from '../../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { getA11yToolbarConfig } from '../../../../core/utils/zoom.js';\nimport { useMeterBarToolbarConfig } from '../../context/MeterBarToolbarConfig.context.js';\n\nexport const MeterBarChartToolbar = () => {\n  const toolbarConfig = useMeterBarToolbarConfig();\n  const isToolbarEnabled =\n    !toolbarConfig?.hidden && !!toolbarConfig?.intents?.length;\n  const behaviorTrackingProps = _useBehavioralTrackingProps(\n    toolbarConfig ?? {},\n  )[0];\n  const dispatch = useTooltipReducer();\n\n  if (!isToolbarEnabled) {\n    return null;\n  }\n\n  return (\n    <ChartToolbarRenderer\n      visible={isToolbarEnabled}\n      placement={toolbarConfig.placement}\n      collapsed={toolbarConfig.collapsed}\n      draggable={false}\n      initialA11yState={getA11yToolbarConfig({\n        intent: !!toolbarConfig.intents,\n      })}\n      menuDisplayMode=\"never\"\n      intents={toolbarConfig.intents}\n      isDownloadEnabled={false}\n      toolbarDisplayMode=\"inline\"\n      overlayClassName=\"\"\n      onToggleMenu={(isOpen) => {\n        if (isOpen) {\n          dispatch({ type: 'RESET_TOOLTIP' })();\n        }\n      }}\n      {...behaviorTrackingProps}\n    />\n  );\n};\n\nMeterBarChartToolbar['displayName'] = 'MeterBarChartToolbar';\n"],
+  "mappings": "AAoBI;AApBJ,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAElC,MAAM,uBAAuB,MAAM;AACxC,QAAM,gBAAgB,yBAAyB;AAC/C,QAAM,mBACJ,CAAC,eAAe,UAAU,CAAC,CAAC,eAAe,SAAS;AACtD,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB,CAAC;AAAA,EACpB,EAAE,CAAC;AACH,QAAM,WAAW,kBAAkB;AAEnC,MAAI,CAAC,kBAAkB;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc;AAAA,MACzB,WAAW;AAAA,MACX,kBAAkB,qBAAqB;AAAA,QACrC,QAAQ,CAAC,CAAC,cAAc;AAAA,MAC1B,CAAC;AAAA,MACD,iBAAgB;AAAA,MAChB,SAAS,cAAc;AAAA,MACvB,mBAAmB;AAAA,MACnB,oBAAmB;AAAA,MACnB,kBAAiB;AAAA,MACjB,cAAc,CAAC,WAAW;AACxB,YAAI,QAAQ;AACV,mBAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,QACtC;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarChartTooltip.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useTooltipData } from "../../../../core/components/overlay-tooltip/_to-be-removed/utils.js";
+import { Series } from "../../../../core/components/overlay-tooltip/components/series/Series.js";
+import { SeriesItem } from "../../../../core/components/overlay-tooltip/components/series/SeriesItem.js";
+import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { isTooltipDataEmpty } from "../../../../core/components/overlay-tooltip/utils.js";
+const MeterBarChartTooltip = ({
+  activeItem,
+  variant,
+  actionsForItem
+}) => {
+  const data = useTooltipData().data;
+  if (isTooltipDataEmpty(data)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OverlayTooltip, { children: /* @__PURE__ */ jsx(
+    Series,
+    {
+      data: data.series,
+      variant,
+      activeItem,
+      seriesItemTemplate: (item) => /* @__PURE__ */ jsx(SeriesItem, { ...item, actions: actionsForItem?.(item) })
+    }
+  ) });
+};
+export {
+  MeterBarChartTooltip
+};
+//# sourceMappingURL=MeterBarChartTooltip.js.map

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarChartTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarChartTooltip.tsx"],
+  "sourcesContent": ["import { useTooltipData } from '../../../../core/components/overlay-tooltip/_to-be-removed/utils.js';\nimport { Series } from '../../../../core/components/overlay-tooltip/components/series/Series.js';\nimport { SeriesItem } from '../../../../core/components/overlay-tooltip/components/series/SeriesItem.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\n\ntype SeriesData = Data['series'][number];\n\ninterface MeterBarTooltipContentProps {\n  activeItem?: number;\n  variant?: 'shared' | 'single';\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const MeterBarChartTooltip = ({\n  activeItem,\n  variant,\n  actionsForItem,\n}: MeterBarTooltipContentProps) => {\n  const data = useTooltipData().data;\n\n  if (isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  return (\n    <OverlayTooltip>\n      <Series\n        data={data.series}\n        variant={variant}\n        activeItem={activeItem}\n        seriesItemTemplate={(item) => (\n          <SeriesItem {...item} actions={actionsForItem?.(item)} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n};\n"],
+  "mappings": "AAoCU;AApCV,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAa5B,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmC;AACjC,QAAM,OAAO,eAAe,EAAE;AAE9B,MAAI,mBAAmB,IAAI,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,kBACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA,oBAAoB,CAAC,SACnB,oBAAC,cAAY,GAAG,MAAM,SAAS,iBAAiB,IAAI,GAAG;AAAA;AAAA,EAE3D,GACF;AAEJ;",
+  "names": []
+}

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.css

@@ -1,4 +1,4 @@
-._r5xi4l0-3-2-1 {
+._r5xi4l0-3-3-0 {
   min-width: unset;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: 0 var(--dt-spacings-size-4, 4px);

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarTooltipItem.css";
-var valueContent = "_r5xi4l0-3-2-1";
+var valueContent = "_r5xi4l0-3-3-0";
 export {
   valueContent
 };

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.css.ts"],
-  "sourcesContent": ["import './MeterBarTooltipItem.css';\nexport var valueContent = '_r5xi4l0-3-2-1';"],
+  "sourcesContent": ["import './MeterBarTooltipItem.css';\nexport var valueContent = '_r5xi4l0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/charts/meter-bar/shared/styles/element-size.css

@@ -1,12 +1,12 @@
-._1ckoljy1-3-2-1 {
+._1ckoljy1-3-3-0 {
   height: 100%;
 }
-._1ckoljy2-3-2-1 {
+._1ckoljy2-3-3-0 {
   height: 16px;
 }
-._1ckoljy3-3-2-1 {
+._1ckoljy3-3-3-0 {
   height: 24px;
 }
-._1ckoljy4-3-2-1 {
+._1ckoljy4-3-3-0 {
   height: 8px;
 }

package/esm/charts/meter-bar/shared/styles/element-size.sty.js

@@ -1,6 +1,6 @@
 import "./element-size.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var elementSize = _7a468({ defaultClassName: "_1ckoljy0-3-2-1", variantClassNames: { size: { auto: "_1ckoljy1-3-2-1", size16: "_1ckoljy2-3-2-1", size24: "_1ckoljy3-3-2-1", size8: "_1ckoljy4-3-2-1" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });
+var elementSize = _7a468({ defaultClassName: "_1ckoljy0-3-3-0", variantClassNames: { size: { auto: "_1ckoljy1-3-3-0", size16: "_1ckoljy2-3-3-0", size24: "_1ckoljy3-3-3-0", size8: "_1ckoljy4-3-3-0" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });
 export {
   elementSize
 };

package/esm/charts/meter-bar/shared/styles/element-size.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/shared/styles/element-size.css.ts"],
-  "sourcesContent": ["import './element-size.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementSize = _7a468({defaultClassName:'_1ckoljy0-3-2-1',variantClassNames:{size:{auto:'_1ckoljy1-3-2-1',size16:'_1ckoljy2-3-2-1',size24:'_1ckoljy3-3-2-1',size8:'_1ckoljy4-3-2-1'}},defaultVariants:{size:'size16'},compoundVariants:[]});"],
+  "sourcesContent": ["import './element-size.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementSize = _7a468({defaultClassName:'_1ckoljy0-3-3-0',variantClassNames:{size:{auto:'_1ckoljy1-3-3-0',size16:'_1ckoljy2-3-3-0',size24:'_1ckoljy3-3-3-0',size8:'_1ckoljy4-3-3-0'}},defaultVariants:{size:'size16'},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,MAAK,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,SAAQ,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/MeterBarChart.js

@@ -1,10 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import {
-  forwardRef,
-  useImperativeHandle,
-  useRef
-} from "react";
+import { forwardRef, useRef } from "react";
 import { MeterBarChartPlotArea } from "./components/MeterBarChartPlotArea.js";
 import { MeterBarChartThresholdLegend } from "./components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js";
 import { METER_BAR_CHART_ARIA_LABEL } from "./constants.js";
@@ -62,25 +58,16 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
   } = config;
   const meterBarChartRef = useRef(null);
   const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;
-  useImperativeHandle(forwardedRef, () => {
-    let exposedRef = {};
-    if (meterBarChartRef.current) {
-      const consumerConfig = {
-        thresholdsIndicators,
-        size,
-        min,
-        max,
-        formatter,
-        unit,
-        tooltip
-      };
-      exposedRef = {
-        element: meterBarChartRef.current,
-        getConfig: () => JSON.stringify({ type: ChartType.SingleMeterBar, ...consumerConfig })
-      };
-    }
-    return exposedRef;
-  });
+  const consumerConfig = {
+    type: ChartType.SingleMeterBar,
+    thresholdsIndicators,
+    size,
+    min,
+    max,
+    formatter,
+    unit,
+    tooltip
+  };
   const displayValue = getNumericValue(
     value,
     valueAccessor ?? DEFAULT_VALUE_ACCESSOR
@@ -107,6 +94,8 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
       "data-testid": dataTestId,
       "data-dt-component": COMPONENT_NAME,
       "aria-label": METER_BAR_CHART_ARIA_LABEL,
+      consumerConfig,
+      userRef: forwardedRef,
       children: [
         /* @__PURE__ */ jsx(
           MeterBarLayout.Providers,

package/esm/charts/meter-bar/single-meter-bar/MeterBarChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/meter-bar/single-meter-bar/MeterBarChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { MeterBarChartPlotArea } from './components/MeterBarChartPlotArea.js';\nimport { MeterBarChartThresholdLegend } from './components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js';\nimport { METER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMeterBarChartConfig } from './hooks/useMeterBarChartConfig.js';\nimport { MeterBarChartInternalDataProviders } from './providers/MeterBarChartInternalDataProviders.js';\nimport { MeterBarChartProviders } from './providers/MeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { ThresholdLegend } from './slots/ThresholdLegend.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MeterBarChartConsumerConfig } from './types/meter-bar-chart-config.js';\nimport { type MeterBarChartProps } from './types/meter-bar-chart.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../../core/styles/defaultChartValues.sty.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../core/constants.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport type { ComponentWithName } from '../../core/types/component-with-name.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MeterBarChartElementRef } from '../shared/types/meter-bars.js';\nimport { getNumericValue } from '../shared/utils/get-numeric-value.js';\n\nconst COMPONENT_NAME = 'SingleMeterBarChart';\n/**\n * Single meter bar chart component */\nconst MeterBarChartRoot = forwardRef<\n  MeterBarChartElementRef,\n  PropsWithChildren<MeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    value,\n    name,\n    color,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'single-meter-bar-chart-root',\n    prefixIcon,\n    valueAccessor,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useMeterBarChartConfig(props);\n  const {\n    size,\n    thresholds,\n    thresholdsIndicators,\n    min,\n    max,\n    minSlot,\n    maxSlot,\n    valueSlot,\n    labelSlot,\n    tooltip,\n    formatter,\n    unit,\n  } = config;\n\n  const meterBarChartRef = useRef<HTMLDivElement>(null);\n\n  const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as MeterBarChartElementRef;\n\n    if (meterBarChartRef.current) {\n      const consumerConfig: MeterBarChartConsumerConfig = {\n        thresholdsIndicators,\n        size,\n        min,\n        max,\n        formatter,\n        unit,\n        tooltip,\n      };\n\n      exposedRef = {\n        element: meterBarChartRef.current,\n        getConfig: () =>\n          JSON.stringify({ type: ChartType.SingleMeterBar, ...consumerConfig }),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const internalDataProvidersProps = {\n    value,\n    displayValue,\n    valueAccessor,\n    name,\n    color,\n  };\n\n  return (\n    <MeterBarChartProviders config={config} seriesActions={props.seriesActions}>\n      <MeterBarLayout\n        {...behavioralTrackingProps}\n        ref={meterBarChartRef}\n        size={size}\n        width={width}\n        height={height}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n        aria-label={METER_BAR_CHART_ARIA_LABEL}\n      >\n        <MeterBarLayout.Providers\n          providerName={MeterBarChartInternalDataProviders}\n          providerProps={internalDataProvidersProps}\n        />\n\n        {prefixIcon && <MeterBarLayout.Icon>{prefixIcon}</MeterBarLayout.Icon>}\n        {labelSlot && <MeterBarLayout.Label>{labelSlot}</MeterBarLayout.Label>}\n        {valueSlot && (\n          <MeterBarLayout.Value>\n            <MeterBarChartFormattedValue\n              value={displayValue}\n              total={max}\n              auto={valueSlot?.auto}\n            >\n              {valueSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Value>\n        )}\n        <MeterBarLayout.Chart>\n          <MeterBarChartPlotArea />\n        </MeterBarLayout.Chart>\n        {minSlot && (\n          <MeterBarLayout.Min>\n            <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n              {minSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Min>\n        )}\n        {maxSlot && (\n          <MeterBarLayout.Max>\n            <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n              {maxSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Max>\n        )}\n        {hasLegend && (\n          <MeterBarLayout.Legend>\n            <MeterBarChartThresholdLegend />\n          </MeterBarLayout.Legend>\n        )}\n      </MeterBarLayout>\n    </MeterBarChartProviders>\n  );\n});\n\n(MeterBarChartRoot as ComponentWithName<typeof MeterBarChartRoot>).displayName =\n  'MeterBarChart';\n\n/**\n * The `MeterBarChart` provides a lightweight and simple visualization progress\n * toward a completion, consumption of a total, etc.  It consists of a horizontal\n * bar that gradually fills up with color or shading as it approaches the max value.\n * @public\n */\nexport const MeterBarChart = Object.assign(MeterBarChartRoot, {\n  Value,\n  Label,\n  Min,\n  Max,\n  ThresholdIndicator,\n  ThresholdLegend,\n  Tooltip,\n  ColorRule,\n  Intent,\n  Toolbar,\n});\n"],
-  "mappings": "AAsHM,SAcE,KAdF;AAtHN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,oCAAoC;AAC7C,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AACvC,SAAS,0CAA0C;AACnD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AACtB,SAAS,WAAW;AACpB,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,aAAa;AAGtB,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB;AAGvB,MAAM,oBAAoB,WAGxB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,uBAAuB,KAAK;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,OAAuB,IAAI;AAEpD,QAAM,YAAY,WAAW,UAAU,qBAAqB;AAE5D,sBAAoB,cAAc,MAAM;AACtC,QAAI,aAAa,CAAC;AAElB,QAAI,iBAAiB,SAAS;AAC5B,YAAM,iBAA8C;AAAA,QAClD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,mBAAa;AAAA,QACX,SAAS,iBAAiB;AAAA,QAC1B,WAAW,MACT,KAAK,UAAU,EAAE,MAAM,UAAU,gBAAgB,GAAG,eAAe,CAAC;AAAA,MACxE;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AACA,QAAM,6BAA6B;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,0BAAuB,QAAgB,eAAe,MAAM,eAC3D;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,MAC3C;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MACnB,cAAY;AAAA,MAEZ;AAAA;AAAA,UAAC,eAAe;AAAA,UAAf;AAAA,YACC,cAAc;AAAA,YACd,eAAe;AAAA;AAAA,QACjB;AAAA,QAEC,cAAc,oBAAC,eAAe,MAAf,EAAqB,sBAAW;AAAA,QAC/C,aAAa,oBAAC,eAAe,OAAf,EAAsB,qBAAU;AAAA,QAC9C,aACC,oBAAC,eAAe,OAAf,EACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,OAAO;AAAA,YACP,MAAM,WAAW;AAAA,YAEhB,qBAAW;AAAA;AAAA,QACd,GACF;AAAA,QAEF,oBAAC,eAAe,OAAf,EACC,8BAAC,yBAAsB,GACzB;AAAA,QACC,WACC,oBAAC,eAAe,KAAf,EACC,8BAAC,+BAA4B,OAAO,KAAK,MAAM,SAAS,MACrD,mBAAS,OACZ,GACF;AAAA,QAED,WACC,oBAAC,eAAe,KAAf,EACC,8BAAC,+BAA4B,OAAO,KAAK,MAAM,SAAS,MACrD,mBAAS,OACZ,GACF;AAAA,QAED,aACC,oBAAC,eAAe,QAAf,EACC,8BAAC,gCAA6B,GAChC;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AAEA,kBAAkE,cACjE;AAQK,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { MeterBarChartPlotArea } from './components/MeterBarChartPlotArea.js';\nimport { MeterBarChartThresholdLegend } from './components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js';\nimport { METER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMeterBarChartConfig } from './hooks/useMeterBarChartConfig.js';\nimport { MeterBarChartInternalDataProviders } from './providers/MeterBarChartInternalDataProviders.js';\nimport { MeterBarChartProviders } from './providers/MeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { ThresholdLegend } from './slots/ThresholdLegend.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MeterBarChartConsumerConfig } from './types/meter-bar-chart-config.js';\nimport { type MeterBarChartProps } from './types/meter-bar-chart.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../../core/styles/defaultChartValues.sty.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../core/constants.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport type { ComponentWithName } from '../../core/types/component-with-name.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MeterBarChartElementRef } from '../shared/types/meter-bars.js';\nimport { getNumericValue } from '../shared/utils/get-numeric-value.js';\n\nconst COMPONENT_NAME = 'SingleMeterBarChart';\n/**\n * Single meter bar chart component */\nconst MeterBarChartRoot = forwardRef<\n  MeterBarChartElementRef,\n  PropsWithChildren<MeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    value,\n    name,\n    color,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'single-meter-bar-chart-root',\n    prefixIcon,\n    valueAccessor,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useMeterBarChartConfig(props);\n  const {\n    size,\n    thresholds,\n    thresholdsIndicators,\n    min,\n    max,\n    minSlot,\n    maxSlot,\n    valueSlot,\n    labelSlot,\n    tooltip,\n    formatter,\n    unit,\n  } = config;\n\n  const meterBarChartRef = useRef<HTMLDivElement>(null);\n\n  const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;\n\n  const consumerConfig: MeterBarChartConsumerConfig & {\n    type: ChartType.SingleMeterBar;\n  } = {\n    type: ChartType.SingleMeterBar,\n    thresholdsIndicators,\n    size,\n    min,\n    max,\n    formatter,\n    unit,\n    tooltip,\n  };\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const internalDataProvidersProps = {\n    value,\n    displayValue,\n    valueAccessor,\n    name,\n    color,\n  };\n\n  return (\n    <MeterBarChartProviders config={config} seriesActions={props.seriesActions}>\n      <MeterBarLayout\n        {...behavioralTrackingProps}\n        ref={meterBarChartRef}\n        size={size}\n        width={width}\n        height={height}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n        aria-label={METER_BAR_CHART_ARIA_LABEL}\n        consumerConfig={consumerConfig}\n        userRef={forwardedRef}\n      >\n        <MeterBarLayout.Providers\n          providerName={MeterBarChartInternalDataProviders}\n          providerProps={internalDataProvidersProps}\n        />\n\n        {prefixIcon && <MeterBarLayout.Icon>{prefixIcon}</MeterBarLayout.Icon>}\n        {labelSlot && <MeterBarLayout.Label>{labelSlot}</MeterBarLayout.Label>}\n        {valueSlot && (\n          <MeterBarLayout.Value>\n            <MeterBarChartFormattedValue\n              value={displayValue}\n              total={max}\n              auto={valueSlot?.auto}\n            >\n              {valueSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Value>\n        )}\n        <MeterBarLayout.Chart>\n          <MeterBarChartPlotArea />\n        </MeterBarLayout.Chart>\n        {minSlot && (\n          <MeterBarLayout.Min>\n            <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n              {minSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Min>\n        )}\n        {maxSlot && (\n          <MeterBarLayout.Max>\n            <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n              {maxSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Max>\n        )}\n        {hasLegend && (\n          <MeterBarLayout.Legend>\n            <MeterBarChartThresholdLegend />\n          </MeterBarLayout.Legend>\n        )}\n      </MeterBarLayout>\n    </MeterBarChartProviders>\n  );\n});\n\n(MeterBarChartRoot as ComponentWithName<typeof MeterBarChartRoot>).displayName =\n  'MeterBarChart';\n\n/**\n * The `MeterBarChart` provides a lightweight and simple visualization progress\n * toward a completion, consumption of a total, etc.  It consists of a horizontal\n * bar that gradually fills up with color or shading as it approaches the max value.\n * @public\n */\nexport const MeterBarChart = Object.assign(MeterBarChartRoot, {\n  Value,\n  Label,\n  Min,\n  Max,\n  ThresholdIndicator,\n  ThresholdLegend,\n  Tooltip,\n  ColorRule,\n  Intent,\n  Toolbar,\n});\n"],
+  "mappings": "AAsGM,SAgBE,KAhBF;AAtGN,OAAO,UAAU;AACjB,SAAS,YAAoC,cAAc;AAE3D,SAAS,6BAA6B;AACtC,SAAS,oCAAoC;AAC7C,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AACvC,SAAS,0CAA0C;AACnD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AACtB,SAAS,WAAW;AACpB,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,aAAa;AAGtB,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB;AAGvB,MAAM,oBAAoB,WAGxB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,uBAAuB,KAAK;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,OAAuB,IAAI;AAEpD,QAAM,YAAY,WAAW,UAAU,qBAAqB;AAE5D,QAAM,iBAEF;AAAA,IACF,MAAM,UAAU;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AACA,QAAM,6BAA6B;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,0BAAuB,QAAgB,eAAe,MAAM,eAC3D;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,MAC3C;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MACnB,cAAY;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,MAET;AAAA;AAAA,UAAC,eAAe;AAAA,UAAf;AAAA,YACC,cAAc;AAAA,YACd,eAAe;AAAA;AAAA,QACjB;AAAA,QAEC,cAAc,oBAAC,eAAe,MAAf,EAAqB,sBAAW;AAAA,QAC/C,aAAa,oBAAC,eAAe,OAAf,EAAsB,qBAAU;AAAA,QAC9C,aACC,oBAAC,eAAe,OAAf,EACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,OAAO;AAAA,YACP,MAAM,WAAW;AAAA,YAEhB,qBAAW;AAAA;AAAA,QACd,GACF;AAAA,QAEF,oBAAC,eAAe,OAAf,EACC,8BAAC,yBAAsB,GACzB;AAAA,QACC,WACC,oBAAC,eAAe,KAAf,EACC,8BAAC,+BAA4B,OAAO,KAAK,MAAM,SAAS,MACrD,mBAAS,OACZ,GACF;AAAA,QAED,WACC,oBAAC,eAAe,KAAf,EACC,8BAAC,+BAA4B,OAAO,KAAK,MAAM,SAAS,MACrD,mBAAS,OACZ,GACF;AAAA,QAED,aACC,oBAAC,eAAe,QAAf,EACC,8BAAC,gCAA6B,GAChC;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AAEA,kBAAkE,cACjE;AAQK,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.css

@@ -1,4 +1,4 @@
-._s444hp0-3-2-1 {
+._s444hp0-3-3-0 {
   position: relative;
   z-index: 1;
 }

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.js

@@ -1,38 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useRef } from "react";
 import { container } from "./MeterBarChartOverlay.sty.js";
+import { MeterBarChartOverlayWithTooltip } from "./MeterBarChartOverlayWithTooltip.js";
 import { Flex } from "../../../../../layouts/flex/Flex.js";
 import { useMeterBarLayoutSize } from "../../../shared/context/MeterBarLayoutSize.context.js";
-import { MeterBarOverlayRefContext } from "../../../shared/contexts/MeterBarOverlayRefContext.js";
-import { useTooltipHandlers } from "../../../shared/hooks/use-tooltip-handlers.js";
 import { elementSize } from "../../../shared/styles/element-size.sty.js";
-import { MeterBarChartTooltip } from "../MeterBarChartTooltip/MeterBarChartTooltip.js";
+import { useMeterBarChartInternalConfig } from "../../context/MeterBarChartInternalConfigContext.js";
 const MeterBarChartOverlay = ({ children }) => {
   const { size } = useMeterBarLayoutSize();
-  const overlayRef = useRef(null);
-  const {
-    onMouseEnterHandler,
-    onMouseLeaveHandler,
-    onMouseMoveHandler,
-    onMouseClickHandler
-  } = useTooltipHandlers(overlayRef);
-  return /* @__PURE__ */ jsx(MeterBarOverlayRefContext.Provider, { value: overlayRef, children: /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      ref: overlayRef,
-      className: clsx(container, elementSize({ size })),
-      "data-testid": "overlay-wrapper",
-      onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler,
-      onMouseMove: onMouseMoveHandler,
-      onClick: onMouseClickHandler,
-      children: [
-        /* @__PURE__ */ jsx(MeterBarChartTooltip, {}),
+  const { tooltip } = useMeterBarChartInternalConfig();
+  if (!tooltip) {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        className: clsx(container, elementSize({ size })),
+        "data-testid": "overlay-wrapper",
         children
-      ]
-    }
-  ) });
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MeterBarChartOverlayWithTooltip, { children });
 };
 export {
   MeterBarChartOverlay

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren, useRef } from 'react';\n\nimport { container } from './MeterBarChartOverlay.sty.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { MeterBarOverlayRefContext } from '../../../shared/contexts/MeterBarOverlayRefContext.js';\nimport { useTooltipHandlers } from '../../../shared/hooks/use-tooltip-handlers.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { MeterBarChartTooltip } from '../MeterBarChartTooltip/MeterBarChartTooltip.js';\n\n// TODO use shared component for overlays if possible\nexport const MeterBarChartOverlay = ({ children }: PropsWithChildren) => {\n  const { size } = useMeterBarLayoutSize();\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const {\n    onMouseEnterHandler,\n    onMouseLeaveHandler,\n    onMouseMoveHandler,\n    onMouseClickHandler,\n  } = useTooltipHandlers(overlayRef);\n\n  return (\n    <MeterBarOverlayRefContext.Provider value={overlayRef}>\n      <Flex\n        ref={overlayRef}\n        className={clsx(container, elementSize({ size }))}\n        data-testid=\"overlay-wrapper\"\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        onMouseMove={onMouseMoveHandler}\n        onClick={onMouseClickHandler}\n      >\n        <MeterBarChartTooltip />\n        {children}\n      </Flex>\n    </MeterBarOverlayRefContext.Provider>\n  );\n};\n"],
-  "mappings": "AAwBM,SASE,KATF;AAxBN,OAAO,UAAU;AACjB,SAAiC,cAAc;AAE/C,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAG9B,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAyB;AACvE,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,UAAU;AAEjC,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,YACzC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,MAChD,eAAY;AAAA,MACZ,cAAc;AAAA,MACd,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,MAET;AAAA,4BAAC,wBAAqB;AAAA,QACrB;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport type { PropsWithChildren } from 'react';\n\nimport { container } from './MeterBarChartOverlay.sty.js';\nimport { MeterBarChartOverlayWithTooltip } from './MeterBarChartOverlayWithTooltip.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { useMeterBarChartInternalConfig } from '../../context/MeterBarChartInternalConfigContext.js';\n\nexport const MeterBarChartOverlay = ({ children }: PropsWithChildren) => {\n  const { size } = useMeterBarLayoutSize();\n  const { tooltip } = useMeterBarChartInternalConfig();\n\n  if (!tooltip) {\n    return (\n      <Flex\n        className={clsx(container, elementSize({ size }))}\n        data-testid=\"overlay-wrapper\"\n      >\n        {children}\n      </Flex>\n    );\n  }\n\n  return (\n    <MeterBarChartOverlayWithTooltip>\n      {children}\n    </MeterBarChartOverlayWithTooltip>\n  );\n};\n"],
+  "mappings": "AAgBM;AAhBN,OAAO,UAAU;AAGjB,SAAS,iBAAiB;AAC1B,SAAS,uCAAuC;AAChD,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,sCAAsC;AAExC,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAyB;AACvE,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,EAAE,QAAQ,IAAI,+BAA+B;AAEnD,MAAI,CAAC,SAAS;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,WAAW,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,QAChD,eAAY;AAAA,QAEX;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE,oBAAC,mCACE,UACH;AAEJ;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarChartOverlay.css";
-var container = "_s444hp0-3-2-1";
+var container = "_s444hp0-3-3-0";
 export {
   container
 };

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.css.ts"],
-  "sourcesContent": ["import './MeterBarChartOverlay.css';\nexport var container = '_s444hp0-3-2-1';"],
+  "sourcesContent": ["import './MeterBarChartOverlay.css';\nexport var container = '_s444hp0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlayWithTooltip.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Flex } from "../../../../../layouts/flex/Flex.js";
+import { interactionsOverlay } from "../../../../core/components/interactions-overlay/InteractionsOverlay.sty.js";
+import { useOverlay } from "../../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { useTooltip } from "../../../../core/components/overlay-tooltip/contexts/TooltipContext.js";
+import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
+import { emptyData } from "../../../../core/components/overlay-tooltip/utils.js";
+import { useSeriesActions } from "../../../../core/components/series-action/ChartSeriesActionContext.js";
+import { DEFAULT_VALUE_ACCESSOR } from "../../../../core/constants.js";
+import { MeterBarChartTooltip } from "../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js";
+import { useFormatter } from "../../../shared/context/FormatterContext.js";
+import { useMeterBarLayoutSize } from "../../../shared/context/MeterBarLayoutSize.context.js";
+import { elementSize } from "../../../shared/styles/element-size.sty.js";
+import { getNumericValue } from "../../../shared/utils/get-numeric-value.js";
+import { useMeterBarChartData } from "../../context/MeterBarChartDataContext.js";
+import { container } from "../MeterBarChartOverlay/MeterBarChartOverlay.sty.js";
+const MeterBarChartOverlayWithTooltip = (props) => {
+  const { size } = useMeterBarLayoutSize();
+  const tooltip = useTooltip();
+  const { color, name, value, valueAccessor } = useMeterBarChartData();
+  const { formatter, unit } = useFormatter();
+  const { chartSeriesActions } = useSeriesActions();
+  const displayValue = getNumericValue(
+    value,
+    valueAccessor ?? DEFAULT_VALUE_ACCESSOR
+  );
+  const item = {
+    name: name ?? "",
+    value: formatter(displayValue, unit)
+  };
+  const data = {
+    geometry: "meterbar",
+    series: [
+      {
+        name: item.name,
+        value: item.value,
+        color
+      }
+    ]
+  };
+  const overlay = useOverlay();
+  const dispatch = useTooltipReducer();
+  const onPointerMove = (event) => {
+    dispatch({
+      type: "SET_POSITION",
+      payload: data
+    })(event);
+  };
+  const onClick = (event) => {
+    if (tooltip.getState().pinned) {
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: false,
+          data: emptyData()
+        }
+      })();
+    } else {
+      const { offsetX, offsetY } = event.nativeEvent;
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: true,
+          relativeX: offsetX,
+          relativeY: offsetY,
+          data
+        }
+      })();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      ref: overlay.overlayRef,
+      className: clsx(container, elementSize({ size }), interactionsOverlay),
+      "data-testid": "overlay-wrapper",
+      onPointerMove,
+      onPointerLeave: dispatch({ type: "SET_OUT_BOUNDS" }),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          MeterBarChartTooltip,
+          {
+            actionsForItem: chartSeriesActions ? () => () => chartSeriesActions({
+              id: `${name}-${displayValue}`,
+              name: item.name,
+              values: [item.value]
+            }) : void 0
+          }
+        ),
+        props.children
+      ]
+    }
+  );
+};
+MeterBarChartOverlayWithTooltip["displayName"] = "MeterBarChartOverlayWithTooltip";
+export {
+  MeterBarChartOverlayWithTooltip
+};
+//# sourceMappingURL=MeterBarChartOverlayWithTooltip.js.map

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlayWithTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlayWithTooltip.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport type { PointerEvent, PropsWithChildren } from 'react';\n\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { interactionsOverlay } from '../../../../core/components/interactions-overlay/InteractionsOverlay.sty.js';\nimport { useOverlay } from '../../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltip } from '../../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { emptyData } from '../../../../core/components/overlay-tooltip/utils.js';\nimport { useSeriesActions } from '../../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../../core/constants.js';\nimport { MeterBarChartTooltip } from '../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { getNumericValue } from '../../../shared/utils/get-numeric-value.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\nimport { container } from '../MeterBarChartOverlay/MeterBarChartOverlay.sty.js';\n\nexport const MeterBarChartOverlayWithTooltip = (props: PropsWithChildren) => {\n  const { size } = useMeterBarLayoutSize();\n  const tooltip = useTooltip();\n  const { color, name, value, valueAccessor } = useMeterBarChartData();\n  const { formatter, unit } = useFormatter();\n  const { chartSeriesActions } = useSeriesActions();\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const item = {\n    name: name ?? '',\n    value: formatter(displayValue, unit),\n  };\n  const data = {\n    geometry: 'meterbar' as const,\n    series: [\n      {\n        name: item.name,\n        value: item.value,\n        color,\n      },\n    ],\n  };\n  const overlay = useOverlay();\n  const dispatch = useTooltipReducer();\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    dispatch({\n      type: 'SET_POSITION',\n      payload: data,\n    })(event);\n  };\n  const onClick = (event: PointerEvent<HTMLDivElement>) => {\n    if (tooltip.getState().pinned) {\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: false,\n          data: emptyData(),\n        },\n      })();\n    } else {\n      const { offsetX, offsetY } = event.nativeEvent;\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: true,\n          relativeX: offsetX,\n          relativeY: offsetY,\n          data,\n        },\n      })();\n    }\n  };\n\n  return (\n    <Flex\n      // eslint-disable-next-line react-hooks/refs\n      ref={overlay.overlayRef}\n      className={clsx(container, elementSize({ size }), interactionsOverlay)}\n      data-testid=\"overlay-wrapper\"\n      onPointerMove={onPointerMove}\n      onPointerLeave={dispatch({ type: 'SET_OUT_BOUNDS' })}\n      onClick={onClick}\n    >\n      <MeterBarChartTooltip\n        actionsForItem={\n          chartSeriesActions\n            ? () => () =>\n                chartSeriesActions({\n                  id: `${name}-${displayValue}`,\n                  name: item.name,\n                  values: [item.value],\n                })\n            : undefined\n        }\n      />\n      {props.children}\n    </Flex>\n  );\n};\n\nMeterBarChartOverlayWithTooltip['displayName'] =\n  'MeterBarChartOverlayWithTooltip';\n"],
+  "mappings": "AA4EI,SASE,KATF;AA5EJ,OAAO,UAAU;AAGjB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,iBAAiB;AAEnB,MAAM,kCAAkC,CAAC,UAA6B;AAC3E,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,OAAO,MAAM,OAAO,cAAc,IAAI,qBAAqB;AACnE,QAAM,EAAE,WAAW,KAAK,IAAI,aAAa;AACzC,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AACA,QAAM,OAAO;AAAA,IACX,MAAM,QAAQ;AAAA,IACd,OAAO,UAAU,cAAc,IAAI;AAAA,EACrC;AACA,QAAM,OAAO;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,MACN;AAAA,QACE,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,QAAM,WAAW,kBAAkB;AACnC,QAAM,gBAAgB,CAAC,UAAwC;AAC7D,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACX,CAAC,EAAE,KAAK;AAAA,EACV;AACA,QAAM,UAAU,CAAC,UAAwC;AACvD,QAAI,QAAQ,SAAS,EAAE,QAAQ;AAC7B,eAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,MAAM,UAAU;AAAA,QAClB;AAAA,MACF,CAAC,EAAE;AAAA,IACL,OAAO;AACL,YAAM,EAAE,SAAS,QAAQ,IAAI,MAAM;AACnC,eAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF,CAAC,EAAE;AAAA,IACL;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,KAAK,QAAQ;AAAA,MACb,WAAW,KAAK,WAAW,YAAY,EAAE,KAAK,CAAC,GAAG,mBAAmB;AAAA,MACrE,eAAY;AAAA,MACZ;AAAA,MACA,gBAAgB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAAA,MACnD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,gBACE,qBACI,MAAM,MACJ,mBAAmB;AAAA,cACjB,IAAI,GAAG,IAAI,IAAI,YAAY;AAAA,cAC3B,MAAM,KAAK;AAAA,cACX,QAAQ,CAAC,KAAK,KAAK;AAAA,YACrB,CAAC,IACH;AAAA;AAAA,QAER;AAAA,QACC,MAAM;AAAA;AAAA;AAAA,EACT;AAEJ;AAEA,gCAAgC,aAAa,IAC3C;",
+  "names": []
+}

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholds/MeterBarChartThresholds.css

@@ -1,4 +1,4 @@
-._1kt6hkd0-3-2-1 {
+._1kt6hkd0-3-3-0 {
   width: 100%;
   position: absolute;
   top: -4px;

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholds/MeterBarChartThresholds.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarChartThresholds.css";
-var thresholdContainer = "_1kt6hkd0-3-2-1";
+var thresholdContainer = "_1kt6hkd0-3-3-0";
 export {
   thresholdContainer
 };