@dynatrace/strato-components 3.2.1 → 3.3.1

package/esm/charts/gauge/GaugeChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/gauge/GaugeChart.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport type { ComponentWithName } from '../core/types/component-with-name.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { GaugeChartLayout } from './components/GaugeChartLayout/GaugeChartLayout.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_CHART_WIDTH,\n  DISPLAY_NAME,\n  GAUGE_CHART_ARIA_LABEL,\n} from './constants.js';\nimport { useGaugeChartConfig } from './hooks/useGaugeChartConfig.js';\nimport { GaugeChartProviders } from './providers/GaugeChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { GaugeChartToolbarSlot } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport type { GaugeChartConsumerConfig } from './types/gauge-chart-config.js';\nimport type { GaugeChartProps, GaugeChartRef } from './types/gauge-chart.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\n\nconst COMPONENT_NAME = 'GaugeChart';\n\nconst _GaugeChart = forwardRef<\n  GaugeChartRef,\n  PropsWithChildren<GaugeChartProps>\n>((props, forwardedRef) => {\n  const {\n    value,\n    width,\n    height,\n    style,\n    className,\n    prefixIcon,\n    seriesActions,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'gauge-chart-root',\n    valueAccessor,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useGaugeChartConfig(props);\n  const {\n    min,\n    max,\n    color,\n    formatter,\n    thresholdsIndicators,\n    colorRules,\n    toolbar,\n    intents,\n    tooltip,\n    valueAccessor: configValueAccessor,\n  } = config;\n\n  const effectiveValueAccessor = valueAccessor ?? configValueAccessor;\n\n  const chartWidth = coerceSizeValue(width) ?? DEFAULT_CHART_WIDTH;\n  const chartHeight = coerceSizeValue(height) ?? DEFAULT_CHART_HEIGHT;\n\n  const [{ height: containerHeight, width: containerWidth }, containerRef] =\n    useObserveContainerSize();\n\n  const gaugeChartRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, () => {\n    const consumerConfig: GaugeChartConsumerConfig = {\n      min,\n      max,\n      color,\n      formatter,\n      thresholdsIndicators,\n      colorRules,\n      toolbar,\n      tooltip,\n      valueAccessor: effectiveValueAccessor,\n    };\n\n    return {\n      element: gaugeChartRef.current,\n      getConfig: () =>\n        JSON.stringify({ type: ChartType.GaugeChart, ...consumerConfig }),\n    };\n  });\n\n  const ref = useMergeRefs<GaugeChartRef | HTMLDivElement>([\n    forwardedRef,\n    gaugeChartRef,\n  ]);\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      ref={containerRef}\n      style={{\n        width: chartWidth,\n        height: chartHeight,\n        overflow: 'hidden',\n        ...style,\n      }}\n      className={className}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      role=\"img\"\n      aria-label={GAUGE_CHART_ARIA_LABEL}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <GaugeChartProviders\n        config={config}\n        width={containerWidth}\n        height={containerHeight}\n        value={value}\n        valueAccessor={effectiveValueAccessor}\n        explicitColor={color}\n        seriesActions={seriesActions}\n      >\n        <GaugeChartLayout\n          ref={ref}\n          value={value}\n          valueAccessor={effectiveValueAccessor}\n          prefixIcon={prefixIcon}\n          intents={intents}\n          toolbar={toolbar}\n          tooltip={tooltip}\n        />\n      </GaugeChartProviders>\n    </div>\n  );\n});\n\n(_GaugeChart as ComponentWithName<typeof _GaugeChart>).displayName =\n  DISPLAY_NAME;\n\n/**\n * A Gauge Chart is a circular chart that displays information on a numeric\n * scale.\n * It's great for showing performance metrics or progress towards a goal.\n *\n * @public\n */\nexport const GaugeChart = Object.assign(_GaugeChart, {\n  ColorRule,\n  Intent,\n  Label,\n  ThresholdIndicator,\n  Toolbar: GaugeChartToolbarSlot,\n  Tooltip,\n});\n"],
-  "mappings": "AAiIQ;AAjIR;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAEvB,MAAM,cAAc,WAGlB,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,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,oBAAoB,KAAK;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,yBAAyB,iBAAiB;AAEhD,QAAM,aAAa,gBAAgB,KAAK,KAAK;AAC7C,QAAM,cAAc,gBAAgB,MAAM,KAAK;AAE/C,QAAM,CAAC,EAAE,QAAQ,iBAAiB,OAAO,eAAe,GAAG,YAAY,IACrE,wBAAwB;AAE1B,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,sBAAoB,cAAc,MAAM;AACtC,UAAM,iBAA2C;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB;AAEA,WAAO;AAAA,MACL,SAAS,cAAc;AAAA,MACvB,WAAW,MACT,KAAK,UAAU,EAAE,MAAM,UAAU,YAAY,GAAG,eAAe,CAAC;AAAA,IACpE;AAAA,EACF,CAAC;AAED,QAAM,MAAM,aAA6C;AAAA,IACvD;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,eAAe;AAAA,UACf,eAAe;AAAA,UACf;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,eAAe;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,YAAsD,cACrD;AASK,MAAM,aAAa,OAAO,OAAO,aAAa;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,CAAC;",
+  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport type { ComponentWithName } from '../core/types/component-with-name.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { GaugeChartLayout } from './components/GaugeChartLayout/GaugeChartLayout.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_CHART_WIDTH,\n  DISPLAY_NAME,\n  GAUGE_CHART_ARIA_LABEL,\n} from './constants.js';\nimport { useGaugeChartConfig } from './hooks/useGaugeChartConfig.js';\nimport { GaugeChartProviders } from './providers/GaugeChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { GaugeChartToolbarSlot } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport type { GaugeChartConsumerConfig } from './types/gauge-chart-config.js';\nimport type { GaugeChartProps, GaugeChartRef } from './types/gauge-chart.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\n\nconst COMPONENT_NAME = 'GaugeChart';\n\nconst _GaugeChart = forwardRef<\n  GaugeChartRef,\n  PropsWithChildren<GaugeChartProps>\n>((props, forwardedRef) => {\n  const {\n    value,\n    width,\n    height,\n    style,\n    className,\n    prefixIcon,\n    seriesActions,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'gauge-chart-root',\n    valueAccessor,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useGaugeChartConfig(props);\n  const {\n    min,\n    max,\n    color,\n    formatter,\n    thresholdsIndicators,\n    colorRules,\n    toolbar,\n    intents,\n    tooltip,\n    valueAccessor: configValueAccessor,\n    loading,\n  } = config;\n\n  const effectiveValueAccessor = valueAccessor ?? configValueAccessor;\n\n  const chartWidth = coerceSizeValue(width) ?? DEFAULT_CHART_WIDTH;\n  const chartHeight = coerceSizeValue(height) ?? DEFAULT_CHART_HEIGHT;\n\n  const [{ height: containerHeight, width: containerWidth }, containerRef] =\n    useObserveContainerSize();\n\n  const gaugeChartRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, () => {\n    const consumerConfig: GaugeChartConsumerConfig = {\n      min,\n      max,\n      color,\n      formatter,\n      thresholdsIndicators,\n      colorRules,\n      toolbar,\n      tooltip,\n      valueAccessor: effectiveValueAccessor,\n      loading: loading,\n    };\n\n    return {\n      element: gaugeChartRef.current,\n      getConfig: () =>\n        JSON.stringify({ type: ChartType.GaugeChart, ...consumerConfig }),\n    };\n  });\n\n  const ref = useMergeRefs<GaugeChartRef | HTMLDivElement>([\n    forwardedRef,\n    gaugeChartRef,\n  ]);\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      ref={containerRef}\n      style={{\n        width: chartWidth,\n        height: chartHeight,\n        overflow: 'hidden',\n        ...style,\n      }}\n      className={className}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      role=\"img\"\n      aria-label={GAUGE_CHART_ARIA_LABEL}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <GaugeChartProviders\n        config={config}\n        width={containerWidth}\n        height={containerHeight}\n        value={value}\n        valueAccessor={effectiveValueAccessor}\n        explicitColor={color}\n        seriesActions={seriesActions}\n        loading={loading ?? false}\n      >\n        <GaugeChartLayout\n          ref={ref}\n          value={value}\n          valueAccessor={effectiveValueAccessor}\n          prefixIcon={prefixIcon}\n          intents={intents}\n          toolbar={toolbar}\n          tooltip={tooltip}\n        />\n      </GaugeChartProviders>\n    </div>\n  );\n});\n\n(_GaugeChart as ComponentWithName<typeof _GaugeChart>).displayName =\n  DISPLAY_NAME;\n\n/**\n * A Gauge Chart is a circular chart that displays information on a numeric\n * scale.\n * It's great for showing performance metrics or progress towards a goal.\n *\n * @public\n */\nexport const GaugeChart = Object.assign(_GaugeChart, {\n  ColorRule,\n  Intent,\n  Label,\n  ThresholdIndicator,\n  Toolbar: GaugeChartToolbarSlot,\n  Tooltip,\n});\n"],
+  "mappings": "AAoIQ;AApIR;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAEvB,MAAM,cAAc,WAGlB,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,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,oBAAoB,KAAK;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,EACF,IAAI;AAEJ,QAAM,yBAAyB,iBAAiB;AAEhD,QAAM,aAAa,gBAAgB,KAAK,KAAK;AAC7C,QAAM,cAAc,gBAAgB,MAAM,KAAK;AAE/C,QAAM,CAAC,EAAE,QAAQ,iBAAiB,OAAO,eAAe,GAAG,YAAY,IACrE,wBAAwB;AAE1B,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,sBAAoB,cAAc,MAAM;AACtC,UAAM,iBAA2C;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IACF;AAEA,WAAO;AAAA,MACL,SAAS,cAAc;AAAA,MACvB,WAAW,MACT,KAAK,UAAU,EAAE,MAAM,UAAU,YAAY,GAAG,eAAe,CAAC;AAAA,IACpE;AAAA,EACF,CAAC;AAED,QAAM,MAAM,aAA6C;AAAA,IACvD;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,eAAe;AAAA,UACf,eAAe;AAAA,UACf;AAAA,UACA,SAAS,WAAW;AAAA,UAEpB;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,eAAe;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,YAAsD,cACrD;AASK,MAAM,aAAa,OAAO,OAAO,aAAa;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,CAAC;",
   "names": []
 }

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

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

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

@@ -5,6 +5,7 @@ import { layoutContainer } from "./GaugeChartLayout.sty.js";
 import { accessValue } from "../../../../core/utils/accessors/access-value.js";
 import { DEFAULT_VALUE_ACCESSOR } from "../../../core/constants.js";
 import { useGaugeChartColorContext } from "../../hooks/useGaugeChartColorContext.js";
+import { useGaugeChartLoadingContext } from "../../hooks/useGaugeChartLoadingContext.js";
 import { useGaugeChartRangeMaxContext } from "../../hooks/useGaugeChartRangeMaxContext.js";
 import { useGaugeChartRangeMinContext } from "../../hooks/useGaugeChartRangeMinContext.js";
 import { useGaugeChartThresholdContext } from "../../hooks/useGaugeChartThresholdContext.js";
@@ -20,8 +21,13 @@ const GaugeChartLayout = forwardRef(
     const min = useGaugeChartRangeMinContext();
     const max = useGaugeChartRangeMaxContext();
     const valueArcColor = useGaugeChartColorContext();
+    const showLoading = useGaugeChartLoadingContext();
     const displayValue = typeof value === "number" ? value : accessValue(value, valueAccessor ?? DEFAULT_VALUE_ACCESSOR) ?? 0;
-    const showTooltip = Boolean(tooltip);
+    const showTooltip = Boolean(tooltip) && !showLoading;
+    const toolbarConfig = {
+      ...toolbar,
+      hidden: toolbar?.hidden || showLoading
+    };
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -35,8 +41,9 @@ const GaugeChartLayout = forwardRef(
             name: tooltip?.name,
             color: valueArcColor,
             showTooltip,
+            showLoading,
             intents,
-            toolbar,
+            toolbar: toolbarConfig,
             children: /* @__PURE__ */ jsxs(GaugeRootSVG, { children: [
               /* @__PURE__ */ jsx(GaugeBaseArc, {}),
               /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { layoutContainer } from './GaugeChartLayout.sty.js';\nimport { type GaugeChartToolbarProps } from './GaugeChartToolbar.js';\nimport { accessValue } from '../../../../core/utils/accessors/access-value.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../core/constants.js';\nimport type { ComponentWithName } from '../../../core/types/component-with-name.js';\nimport { useGaugeChartColorContext } from '../../hooks/useGaugeChartColorContext.js';\nimport { useGaugeChartRangeMaxContext } from '../../hooks/useGaugeChartRangeMaxContext.js';\nimport { useGaugeChartRangeMinContext } from '../../hooks/useGaugeChartRangeMinContext.js';\nimport { useGaugeChartThresholdContext } from '../../hooks/useGaugeChartThresholdContext.js';\nimport { GaugeChartTooltipProps } from '../../slots/Tooltip.js';\nimport type { GaugeChartData } from '../../types/gauge-chart.js';\nimport { GaugeBaseArc } from '../GaugeBaseArc.js';\nimport { GaugeLabels } from '../GaugeLabels.js';\nimport { GaugeChartOverlay } from '../GaugeLayoutOverlay/GaugeLayoutOverlay.js';\nimport { GaugeRootSVG } from '../GaugeRootSVG.js';\nimport { GaugeThresholdIndicators } from '../GaugeThresholdIndicators.js';\nimport { GaugeValueArc } from '../GaugeValueArc.js';\n\nexport interface GaugeChartLayoutProps {\n  value: number | GaugeChartData;\n  valueAccessor?: string;\n  prefixIcon?: ReactNode;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n  tooltip?: GaugeChartTooltipProps;\n}\n\nexport const GaugeChartLayout = forwardRef<\n  HTMLDivElement,\n  GaugeChartLayoutProps\n>(\n  (\n    { value, prefixIcon, intents, toolbar, valueAccessor, tooltip },\n    forwardedRef,\n  ) => {\n    const thresholds = useGaugeChartThresholdContext();\n    const min = useGaugeChartRangeMinContext();\n    const max = useGaugeChartRangeMaxContext();\n    const valueArcColor = useGaugeChartColorContext();\n    const displayValue =\n      typeof value === 'number'\n        ? value\n        : accessValue<number>(value, valueAccessor ?? DEFAULT_VALUE_ACCESSOR) ??\n          0;\n    const showTooltip = Boolean(tooltip);\n\n    return (\n      <div\n        data-testid=\"gauge-layout-container\"\n        ref={forwardedRef}\n        className={layoutContainer}\n      >\n        <GaugeChartOverlay\n          value={displayValue}\n          name={tooltip?.name}\n          color={valueArcColor}\n          showTooltip={showTooltip}\n          intents={intents}\n          toolbar={toolbar}\n        >\n          <GaugeRootSVG>\n            <GaugeBaseArc />\n            <GaugeValueArc\n              value={displayValue}\n              color={valueArcColor}\n              min={min}\n              max={max}\n            />\n            {!isEmpty(thresholds) && <GaugeThresholdIndicators />}\n            <GaugeLabels value={displayValue} prefixIcon={prefixIcon} />\n          </GaugeRootSVG>\n        </GaugeChartOverlay>\n      </div>\n    );\n  },\n);\n\n(GaugeChartLayout as ComponentWithName<typeof GaugeChartLayout>).displayName =\n  'GaugeChartLayout';\n"],
-  "mappings": "AA+DU,SACE,KADF;AA/DV,SAAS,eAAe;AACxB,SAAS,kBAAkC;AAE3C,SAAS,uBAAuB;AAEhC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,SAAS,iCAAiC;AAC1C,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,qCAAqC;AAG9C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAWvB,MAAM,mBAAmB;AAAA,EAI9B,CACE,EAAE,OAAO,YAAY,SAAS,SAAS,eAAe,QAAQ,GAC9D,iBACG;AACH,UAAM,aAAa,8BAA8B;AACjD,UAAM,MAAM,6BAA6B;AACzC,UAAM,MAAM,6BAA6B;AACzC,UAAM,gBAAgB,0BAA0B;AAChD,UAAM,eACJ,OAAO,UAAU,WACb,QACA,YAAoB,OAAO,iBAAiB,sBAAsB,KAClE;AACN,UAAM,cAAc,QAAQ,OAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAK;AAAA,QACL,WAAW;AAAA,QAEX;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAM,SAAS;AAAA,YACf,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YAEA,+BAAC,gBACC;AAAA,kCAAC,gBAAa;AAAA,cACd;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,kBACP,OAAO;AAAA,kBACP;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cACC,CAAC,QAAQ,UAAU,KAAK,oBAAC,4BAAyB;AAAA,cACnD,oBAAC,eAAY,OAAO,cAAc,YAAwB;AAAA,eAC5D;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,iBAAgE,cAC/D;",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { layoutContainer } from './GaugeChartLayout.sty.js';\nimport { type GaugeChartToolbarProps } from './GaugeChartToolbar.js';\nimport { accessValue } from '../../../../core/utils/accessors/access-value.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../core/constants.js';\nimport type { ComponentWithName } from '../../../core/types/component-with-name.js';\nimport { useGaugeChartColorContext } from '../../hooks/useGaugeChartColorContext.js';\nimport { useGaugeChartLoadingContext } from '../../hooks/useGaugeChartLoadingContext.js';\nimport { useGaugeChartRangeMaxContext } from '../../hooks/useGaugeChartRangeMaxContext.js';\nimport { useGaugeChartRangeMinContext } from '../../hooks/useGaugeChartRangeMinContext.js';\nimport { useGaugeChartThresholdContext } from '../../hooks/useGaugeChartThresholdContext.js';\nimport { GaugeChartTooltipProps } from '../../slots/Tooltip.js';\nimport type { GaugeChartData } from '../../types/gauge-chart.js';\nimport { GaugeBaseArc } from '../GaugeBaseArc.js';\nimport { GaugeLabels } from '../GaugeLabels.js';\nimport { GaugeChartOverlay } from '../GaugeLayoutOverlay/GaugeLayoutOverlay.js';\nimport { GaugeRootSVG } from '../GaugeRootSVG.js';\nimport { GaugeThresholdIndicators } from '../GaugeThresholdIndicators.js';\nimport { GaugeValueArc } from '../GaugeValueArc.js';\n\nexport interface GaugeChartLayoutProps {\n  value: number | GaugeChartData;\n  valueAccessor?: string;\n  prefixIcon?: ReactNode;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n  tooltip?: GaugeChartTooltipProps;\n}\n\nexport const GaugeChartLayout = forwardRef<\n  HTMLDivElement,\n  GaugeChartLayoutProps\n>(\n  (\n    { value, prefixIcon, intents, toolbar, valueAccessor, tooltip },\n    forwardedRef,\n  ) => {\n    const thresholds = useGaugeChartThresholdContext();\n    const min = useGaugeChartRangeMinContext();\n    const max = useGaugeChartRangeMaxContext();\n    const valueArcColor = useGaugeChartColorContext();\n    const showLoading = useGaugeChartLoadingContext();\n\n    const displayValue =\n      typeof value === 'number'\n        ? value\n        : accessValue<number>(value, valueAccessor ?? DEFAULT_VALUE_ACCESSOR) ??\n          0;\n\n    const showTooltip = Boolean(tooltip) && !showLoading;\n    const toolbarConfig: typeof toolbar = {\n      ...toolbar,\n      hidden: toolbar?.hidden || showLoading,\n    };\n\n    return (\n      <div\n        data-testid=\"gauge-layout-container\"\n        ref={forwardedRef}\n        className={layoutContainer}\n      >\n        <GaugeChartOverlay\n          value={displayValue}\n          name={tooltip?.name}\n          color={valueArcColor}\n          showTooltip={showTooltip}\n          showLoading={showLoading}\n          intents={intents}\n          toolbar={toolbarConfig}\n        >\n          <GaugeRootSVG>\n            <GaugeBaseArc />\n            <GaugeValueArc\n              value={displayValue}\n              color={valueArcColor}\n              min={min}\n              max={max}\n            />\n            {!isEmpty(thresholds) && <GaugeThresholdIndicators />}\n            <GaugeLabels value={displayValue} prefixIcon={prefixIcon} />\n          </GaugeRootSVG>\n        </GaugeChartOverlay>\n      </div>\n    );\n  },\n);\n\n(GaugeChartLayout as ComponentWithName<typeof GaugeChartLayout>).displayName =\n  'GaugeChartLayout';\n"],
+  "mappings": "AAwEU,SACE,KADF;AAxEV,SAAS,eAAe;AACxB,SAAS,kBAAkC;AAE3C,SAAS,uBAAuB;AAEhC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AAEvC,SAAS,iCAAiC;AAC1C,SAAS,mCAAmC;AAC5C,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,qCAAqC;AAG9C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAWvB,MAAM,mBAAmB;AAAA,EAI9B,CACE,EAAE,OAAO,YAAY,SAAS,SAAS,eAAe,QAAQ,GAC9D,iBACG;AACH,UAAM,aAAa,8BAA8B;AACjD,UAAM,MAAM,6BAA6B;AACzC,UAAM,MAAM,6BAA6B;AACzC,UAAM,gBAAgB,0BAA0B;AAChD,UAAM,cAAc,4BAA4B;AAEhD,UAAM,eACJ,OAAO,UAAU,WACb,QACA,YAAoB,OAAO,iBAAiB,sBAAsB,KAClE;AAEN,UAAM,cAAc,QAAQ,OAAO,KAAK,CAAC;AACzC,UAAM,gBAAgC;AAAA,MACpC,GAAG;AAAA,MACH,QAAQ,SAAS,UAAU;AAAA,IAC7B;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAK;AAAA,QACL,WAAW;AAAA,QAEX;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,MAAM,SAAS;AAAA,YACf,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YAET,+BAAC,gBACC;AAAA,kCAAC,gBAAa;AAAA,cACd;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,kBACP,OAAO;AAAA,kBACP;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cACC,CAAC,QAAQ,UAAU,KAAK,oBAAC,4BAAyB;AAAA,cACnD,oBAAC,eAAY,OAAO,cAAc,YAAwB;AAAA,eAC5D;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,iBAAgE,cAC/D;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./GaugeChartLayout.css";
-var layoutContainer = "_ezp7cy0-3-2-1";
+var layoutContainer = "_ezp7cy0-3-3-1";
 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-2-1';"],
+  "sourcesContent": ["import './GaugeChartLayout.css';\nexport var layoutContainer = '_ezp7cy0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

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

@@ -1,22 +1,22 @@
-._18ourc20-3-2-1 {
+._18ourc20-3-3-1 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-2-1 {
+._18ourc21-3-3-1 {
   width: fit-content;
 }
-._18ourc22-3-2-1 {
+._18ourc22-3-3-1 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-2-1 {
+._18ourc23-3-3-1 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-2-1 {
+._18ourc24-3-3-1 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-2-1 {
+  ._18ourc24-3-3-1 {
     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-2-1";
-var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-2-1", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-2-1", hanging: "_18ourc23-3-2-1" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-2-1";
+var elementLabelWrapper = "_18ourc20-3-3-1";
+var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-3-1", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-3-1", hanging: "_18ourc23-3-3-1" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-3-1";
 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-2-1';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-2-1',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-2-1',hanging:'_18ourc23-3-2-1'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-2-1';"],
+  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-3-1';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-3-1',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-3-1',hanging:'_18ourc23-3-3-1'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-3-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB;AAC1B,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,kBAAiB,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,kBAAiB,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GaugeLabelsWrapper.css";
-var labelsContainer = "_1fbjcz30-3-2-1";
+var labelsContainer = "_1fbjcz30-3-3-1";
 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-2-1';"],
+  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

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

@@ -1,5 +1,9 @@
-._l0e5zm0-3-2-1 {
+._l0e5zm0-3-3-1 {
   position: relative;
   height: 100%;
   z-index: 0;
+}
+._l0e5zm1-3-3-1 {
+  cursor: default;
+  user-select: none;
 }

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

@@ -1,21 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { container } from "./GaugeLayoutOverlay.sty.js";
+import { container, consumerLoadingStyle } from "./GaugeLayoutOverlay.sty.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
+import { LoaderOverlay } from "../../../core/components/loader-overlay/LoaderOverlay.js";
 import { GaugeChartOverlayRefContext } from "../../contexts/GaugeChartOverlayRefContext.js";
 import {
   GaugeChartToolbar
 } from "../GaugeChartLayout/GaugeChartToolbar.js";
 import { GaugeChartTooltip } from "../GaugeChartTooltip/GaugeTooltip.js";
 const GaugeChartOverlay = (props) => {
-  const { children, value, name, color, showTooltip, intents, toolbar } = props;
+  const {
+    children,
+    value,
+    name,
+    color,
+    showTooltip,
+    showLoading,
+    intents,
+    toolbar
+  } = props;
   const overlayRef = useRef(null);
   return /* @__PURE__ */ jsx(GaugeChartOverlayRefContext.Provider, { value: overlayRef, children: /* @__PURE__ */ jsxs(
     Flex,
     {
       ref: overlayRef,
       "data-testid": "gauge-overlay-wrapper",
-      className: container,
+      className: container({ showLoading }),
       children: [
         /* @__PURE__ */ jsx(
           GaugeChartTooltip,
@@ -27,7 +37,14 @@ const GaugeChartOverlay = (props) => {
             children: /* @__PURE__ */ jsx(GaugeChartToolbar, { intents, toolbar })
           }
         ),
-        children
+        children,
+        showLoading ? /* @__PURE__ */ jsx(
+          LoaderOverlay,
+          {
+            gridArea: "1/1/2/2",
+            consumerStyle: consumerLoadingStyle
+          }
+        ) : null
       ]
     }
   ) });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useRef } from 'react';\n\nimport { container } from './GaugeLayoutOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { GaugeChartOverlayRefContext } from '../../contexts/GaugeChartOverlayRefContext.js';\nimport {\n  GaugeChartToolbar,\n  type GaugeChartToolbarProps,\n} from '../GaugeChartLayout/GaugeChartToolbar.js';\nimport { GaugeChartTooltip } from '../GaugeChartTooltip/GaugeTooltip.js';\n\ninterface GaugeChartOverlayProps {\n  value: number;\n  name?: string;\n  color: string;\n  showTooltip?: boolean;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n}\n\nexport const GaugeChartOverlay = (\n  props: PropsWithChildren<GaugeChartOverlayProps>,\n) => {\n  const { children, value, name, color, showTooltip, intents, toolbar } = props;\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <GaugeChartOverlayRefContext.Provider value={overlayRef}>\n      <Flex\n        ref={overlayRef}\n        data-testid=\"gauge-overlay-wrapper\"\n        className={container}\n      >\n        <GaugeChartTooltip\n          value={value}\n          name={name}\n          color={color}\n          showTooltip={showTooltip}\n        >\n          <GaugeChartToolbar intents={intents} toolbar={toolbar} />\n        </GaugeChartTooltip>\n\n        {children}\n      </Flex>\n    </GaugeChartOverlayRefContext.Provider>\n  );\n};\n\nGaugeChartOverlay['displayName'] = 'GaugeChartOverlay';\n"],
-  "mappings": "AA4BM,SAWI,KAXJ;AA5BN,SAAiC,cAAc;AAE/C,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,OAEK;AACP,SAAS,yBAAyB;AAW3B,MAAM,oBAAoB,CAC/B,UACG;AACH,QAAM,EAAE,UAAU,OAAO,MAAM,OAAO,aAAa,SAAS,QAAQ,IAAI;AACxE,QAAM,aAAa,OAAuB,IAAI;AAE9C,SACE,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,YAC3C;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,qBAAkB,SAAkB,SAAkB;AAAA;AAAA,QACzD;AAAA,QAEC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,kBAAkB,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren, useRef } from 'react';\n\nimport { container, consumerLoadingStyle } from './GaugeLayoutOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { LoaderOverlay } from '../../../core/components/loader-overlay/LoaderOverlay.js';\nimport { GaugeChartOverlayRefContext } from '../../contexts/GaugeChartOverlayRefContext.js';\nimport {\n  GaugeChartToolbar,\n  type GaugeChartToolbarProps,\n} from '../GaugeChartLayout/GaugeChartToolbar.js';\nimport { GaugeChartTooltip } from '../GaugeChartTooltip/GaugeTooltip.js';\n\ninterface GaugeChartOverlayProps {\n  value: number;\n  name?: string;\n  color: string;\n  showTooltip?: boolean;\n  showLoading?: boolean;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n}\n\nexport const GaugeChartOverlay = (\n  props: PropsWithChildren<GaugeChartOverlayProps>,\n) => {\n  const {\n    children,\n    value,\n    name,\n    color,\n    showTooltip,\n    showLoading,\n    intents,\n    toolbar,\n  } = props;\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <GaugeChartOverlayRefContext.Provider value={overlayRef}>\n      <Flex\n        ref={overlayRef}\n        data-testid=\"gauge-overlay-wrapper\"\n        className={container({ showLoading })}\n      >\n        <GaugeChartTooltip\n          value={value}\n          name={name}\n          color={color}\n          showTooltip={showTooltip}\n        >\n          <GaugeChartToolbar intents={intents} toolbar={toolbar} />\n        </GaugeChartTooltip>\n\n        {children}\n        {showLoading ? (\n          <LoaderOverlay\n            gridArea=\"1/1/2/2\"\n            consumerStyle={consumerLoadingStyle}\n          />\n        ) : null}\n      </Flex>\n    </GaugeChartOverlayRefContext.Provider>\n  );\n};\n\nGaugeChartOverlay['displayName'] = 'GaugeChartOverlay';\n"],
+  "mappings": "AAuCM,SAWI,KAXJ;AAvCN,SAAiC,cAAc;AAE/C,SAAS,WAAW,4BAA4B;AAChD,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,OAEK;AACP,SAAS,yBAAyB;AAY3B,MAAM,oBAAoB,CAC/B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,aAAa,OAAuB,IAAI;AAE9C,SACE,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,YAC3C;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,UAAU,EAAE,YAAY,CAAC;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA,8BAAC,qBAAkB,SAAkB,SAAkB;AAAA;AAAA,QACzD;AAAA,QAEC;AAAA,QACA,cACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,eAAe;AAAA;AAAA,QACjB,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;AAEA,kBAAkB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,6 +1,9 @@
 import "./GaugeLayoutOverlay.css";
-var container = "_l0e5zm0-3-2-1";
+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-3-1", variantClassNames: { showLoading: { true: "_l0e5zm1-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
+  consumerLoadingStyle,
   container
 };
 //# sourceMappingURL=GaugeLayoutOverlay.sty.js.map

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';\nexport var container = '_l0e5zm0-3-2-1';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
+  "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-3-1',variantClassNames:{showLoading:{true:'_l0e5zm1-3-3-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "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,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._13c0oci0-3-2-1 {
+._13c0oci0-3-3-1 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-2-1 svg {
+._13c0oci1-3-3-1 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-2-1";
-var responsiveLabelContainer = "_13c0oci0-3-2-1";
+var parentSvgStyle = "_13c0oci1-3-3-1";
+var responsiveLabelContainer = "_13c0oci0-3-3-1";
 export {
   parentSvgStyle,
   responsiveLabelContainer

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.css.ts"],
-  "sourcesContent": ["import './GaugeResponsiveLabel.css';\nexport var parentSvgStyle = '_13c0oci1-3-2-1';\nexport var responsiveLabelContainer = '_13c0oci0-3-2-1';"],
+  "sourcesContent": ["import './GaugeResponsiveLabel.css';\nexport var parentSvgStyle = '_13c0oci1-3-3-1';\nexport var responsiveLabelContainer = '_13c0oci0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/gauge/constants.js

@@ -20,7 +20,8 @@ const GAUGE_DEFAULT_CONFIG = {
   color: ARC_DEFAULT_VALUE_COLOR,
   min: DEFAULT_MIN_RANGE_VALUE,
   max: DEFAULT_MAX_RANGE_VALUE,
-  formatter: void 0
+  formatter: void 0,
+  loading: false
 };
 const DISPLAY_NAME = "GaugeChart";
 const GAUGE_CHART_ARIA_LABEL = "Gauge Chart";

package/esm/charts/gauge/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/gauge/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\n//region Default Values\nexport const DEFAULT_MIN_RANGE_VALUE = 0;\nexport const DEFAULT_MAX_RANGE_VALUE = 100;\nexport const DEFAULT_CHART_WIDTH = '100%';\nexport const DEFAULT_CHART_HEIGHT = 300;\n//endregion\n\n//region Sizes\nexport const MIN_SIZE_IN_PX = 100;\nexport const MIN_MAX_PADDING = 20;\nexport const ARC_OUTER_RADIUS_PERCENTAGE = 0.9;\nexport const ARC_INNER_RADIUS_PERCENTAGE = 0.8;\nexport const GAUGE_VERTICAL_SMALL_OFFSET = 0.05;\nexport const GAUGE_VERTICAL_DEFAULT_OFFSET = 0.1;\n//endregion\n\n// region Colors\nexport const ARC_BACKGROUND_COLOR = Colors.Theme.Neutral['40'];\nexport const ARC_DEFAULT_VALUE_COLOR =\n  Colors.Charts.Categorical.Color11.Default;\nexport const THRESHOLD_COLOR_DEFAULT =\n  Colors.Charts.Categorical.Color11.Default;\n//endregion\n\n// region Arc Properties\nexport const ARC_START_ANGLE = -0.625 * Math.PI; // \u2212112.5\u00BA in radians\nexport const ARC_END_ANGLE = 0.625 * Math.PI; // 112.5\u00BA in radians\n//endregion\n\n//region Thresholds\nexport const THRESHOLD_LINE_WIDTH = 2;\nexport const THRESHOLD_LINE_DEFAULT_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region Config Defaults\nexport const GAUGE_DEFAULT_CONFIG = {\n  color: ARC_DEFAULT_VALUE_COLOR,\n  min: DEFAULT_MIN_RANGE_VALUE,\n  max: DEFAULT_MAX_RANGE_VALUE,\n  formatter: undefined,\n};\n//endregion\n\nexport const DISPLAY_NAME = 'GaugeChart';\n\nexport const GAUGE_CHART_ARIA_LABEL = 'Gauge Chart';\n\nexport const FONT_HEIGHT_RATIO = 0.7;\nexport const DEFAULT_MAX_VALUE_FONT_SIZE = 240;\n\nexport const zIndexGaugeAreas = {\n  toolbar: 2,\n  tooltip: 1,\n  overlay: 0,\n};\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAGZ,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAChC,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,gCAAgC;AAItC,MAAM,uBAAuB,OAAO,MAAM,QAAQ,IAAI;AACtD,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAC7B,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAI7B,MAAM,kBAAkB,SAAS,KAAK;AACtC,MAAM,gBAAgB,QAAQ,KAAK;AAInC,MAAM,uBAAuB;AAC7B,MAAM,+BAA+B,OAAO,KAAK,QAAQ;AAIzD,MAAM,uBAAuB;AAAA,EAClC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AACb;AAGO,MAAM,eAAe;AAErB,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAC1B,MAAM,8BAA8B;AAEpC,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\n//region Default Values\nexport const DEFAULT_MIN_RANGE_VALUE = 0;\nexport const DEFAULT_MAX_RANGE_VALUE = 100;\nexport const DEFAULT_CHART_WIDTH = '100%';\nexport const DEFAULT_CHART_HEIGHT = 300;\n//endregion\n\n//region Sizes\nexport const MIN_SIZE_IN_PX = 100;\nexport const MIN_MAX_PADDING = 20;\nexport const ARC_OUTER_RADIUS_PERCENTAGE = 0.9;\nexport const ARC_INNER_RADIUS_PERCENTAGE = 0.8;\nexport const GAUGE_VERTICAL_SMALL_OFFSET = 0.05;\nexport const GAUGE_VERTICAL_DEFAULT_OFFSET = 0.1;\n//endregion\n\n// region Colors\nexport const ARC_BACKGROUND_COLOR = Colors.Theme.Neutral['40'];\nexport const ARC_DEFAULT_VALUE_COLOR =\n  Colors.Charts.Categorical.Color11.Default;\nexport const THRESHOLD_COLOR_DEFAULT =\n  Colors.Charts.Categorical.Color11.Default;\n//endregion\n\n// region Arc Properties\nexport const ARC_START_ANGLE = -0.625 * Math.PI; // \u2212112.5\u00BA in radians\nexport const ARC_END_ANGLE = 0.625 * Math.PI; // 112.5\u00BA in radians\n//endregion\n\n//region Thresholds\nexport const THRESHOLD_LINE_WIDTH = 2;\nexport const THRESHOLD_LINE_DEFAULT_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region Config Defaults\nexport const GAUGE_DEFAULT_CONFIG = {\n  color: ARC_DEFAULT_VALUE_COLOR,\n  min: DEFAULT_MIN_RANGE_VALUE,\n  max: DEFAULT_MAX_RANGE_VALUE,\n  formatter: undefined,\n  loading: false,\n};\n//endregion\n\nexport const DISPLAY_NAME = 'GaugeChart';\n\nexport const GAUGE_CHART_ARIA_LABEL = 'Gauge Chart';\n\nexport const FONT_HEIGHT_RATIO = 0.7;\nexport const DEFAULT_MAX_VALUE_FONT_SIZE = 240;\n\nexport const zIndexGaugeAreas = {\n  toolbar: 2,\n  tooltip: 1,\n  overlay: 0,\n};\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAGZ,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAChC,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,gCAAgC;AAItC,MAAM,uBAAuB,OAAO,MAAM,QAAQ,IAAI;AACtD,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAC7B,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAI7B,MAAM,kBAAkB,SAAS,KAAK;AACtC,MAAM,gBAAgB,QAAQ,KAAK;AAInC,MAAM,uBAAuB;AAC7B,MAAM,+BAA+B,OAAO,KAAK,QAAQ;AAIzD,MAAM,uBAAuB;AAAA,EAClC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS;AACX;AAGO,MAAM,eAAe;AAErB,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAC1B,MAAM,8BAA8B;AAEpC,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;",
   "names": []
 }

package/esm/charts/gauge/contexts/GaugeChartLoadingContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const GaugeChartLoadingContext = createContext(false);
+export {
+  GaugeChartLoadingContext
+};
+//# sourceMappingURL=GaugeChartLoadingContext.js.map

package/esm/charts/gauge/contexts/GaugeChartLoadingContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/gauge/contexts/GaugeChartLoadingContext.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nexport const GaugeChartLoadingContext = createContext<boolean>(false);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAEvB,MAAM,2BAA2B,cAAuB,KAAK;",
+  "names": []
+}

package/esm/charts/gauge/contexts/GaugeChartTooltipContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/contexts/GaugeChartTooltipContext.ts"],
-  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { Store, createStore } from '../../../core/store/store.js';\nimport { GaugeChartTooltipState } from '../providers/GaugeChartTooltipState.js';\n\nexport const GaugeChartTooltipContext = createContext<\n  Store<GaugeChartTooltipState>\n>(createStore({} as GaugeChartTooltipState));\n\nexport const useGaugeChartTooltipContext = () =>\n  useContext(GaugeChartTooltipContext);\n"],
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { Store, createStore } from '../../../core/store/store.js';\nimport { GaugeChartTooltipState } from '../types/gauge-chart-tooltip-state.js';\n\nexport const GaugeChartTooltipContext = createContext<\n  Store<GaugeChartTooltipState>\n>(createStore({} as GaugeChartTooltipState));\n\nexport const useGaugeChartTooltipContext = () =>\n  useContext(GaugeChartTooltipContext);\n"],
   "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAE1C,SAAgB,mBAAmB;AAG5B,MAAM,2BAA2B,cAEtC,YAAY,CAAC,CAA2B,CAAC;AAEpC,MAAM,8BAA8B,MACzC,WAAW,wBAAwB;",
   "names": []
 }

package/esm/charts/gauge/hooks/store/selectors.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/hooks/store/selectors.ts"],
-  "sourcesContent": ["import { useSelector } from './use-selector.js';\nimport { GaugeChartTooltipState } from '../../providers/GaugeChartTooltipState.js';\n\nexport const useTooltipPosition = () =>\n  useSelector((state: GaugeChartTooltipState) => state.position);\n\nexport const useTooltipPinned = () =>\n  useSelector((state: GaugeChartTooltipState) => state.pinned);\n\nexport const useTooltipVisible = () =>\n  useSelector((state: GaugeChartTooltipState) => state.visible);\n"],
+  "sourcesContent": ["import { useSelector } from './use-selector.js';\nimport { GaugeChartTooltipState } from '../../types/gauge-chart-tooltip-state.js';\n\nexport const useTooltipPosition = () =>\n  useSelector((state: GaugeChartTooltipState) => state.position);\n\nexport const useTooltipPinned = () =>\n  useSelector((state: GaugeChartTooltipState) => state.pinned);\n\nexport const useTooltipVisible = () =>\n  useSelector((state: GaugeChartTooltipState) => state.visible);\n"],
   "mappings": "AAAA,SAAS,mBAAmB;AAGrB,MAAM,qBAAqB,MAChC,YAAY,CAAC,UAAkC,MAAM,QAAQ;AAExD,MAAM,mBAAmB,MAC9B,YAAY,CAAC,UAAkC,MAAM,MAAM;AAEtD,MAAM,oBAAoB,MAC/B,YAAY,CAAC,UAAkC,MAAM,OAAO;",
   "names": []
 }

package/esm/charts/gauge/hooks/store/use-selector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/hooks/store/use-selector.ts"],
-  "sourcesContent": ["import { useStoreSelector } from '../../../../core/store/selector.js';\nimport { GaugeChartTooltipContext } from '../../contexts/GaugeChartTooltipContext.js';\nimport { GaugeChartTooltipState } from '../../providers/GaugeChartTooltipState.js';\n\nexport const useSelector = <T>(\n  selector: (state: GaugeChartTooltipState) => T,\n): T => useStoreSelector(GaugeChartTooltipContext, selector);\n"],
+  "sourcesContent": ["import { useStoreSelector } from '../../../../core/store/selector.js';\nimport { GaugeChartTooltipContext } from '../../contexts/GaugeChartTooltipContext.js';\nimport { GaugeChartTooltipState } from '../../types/gauge-chart-tooltip-state.js';\n\nexport const useSelector = <T>(\n  selector: (state: GaugeChartTooltipState) => T,\n): T => useStoreSelector(GaugeChartTooltipContext, selector);\n"],
   "mappings": "AAAA,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAGlC,MAAM,cAAc,CACzB,aACM,iBAAiB,0BAA0B,QAAQ;",
   "names": []
 }

package/esm/charts/gauge/hooks/useGaugeChartLoadingContext.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { GaugeChartLoadingContext } from "../contexts/GaugeChartLoadingContext.js";
+const useGaugeChartLoadingContext = () => useContext(GaugeChartLoadingContext);
+export {
+  useGaugeChartLoadingContext
+};
+//# sourceMappingURL=useGaugeChartLoadingContext.js.map

package/esm/charts/gauge/hooks/useGaugeChartLoadingContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/gauge/hooks/useGaugeChartLoadingContext.ts"],
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { GaugeChartLoadingContext } from '../contexts/GaugeChartLoadingContext.js';\n\nexport const useGaugeChartLoadingContext = () =>\n  useContext(GaugeChartLoadingContext);\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,gCAAgC;AAElC,MAAM,8BAA8B,MACzC,WAAW,wBAAwB;",
+  "names": []
+}

package/esm/charts/gauge/providers/GaugeChartProviders.js

@@ -5,6 +5,7 @@ import { ChartSeriesActionContext } from "../../core/components/series-action/Ch
 import { GaugeChartColorContext } from "../contexts/GaugeChartColorContext.js";
 import { GaugeChartFormatterContext } from "../contexts/GaugeChartFormatterContext.js";
 import { GaugeChartLabelsContext } from "../contexts/GaugeChartLabelsContext.js";
+import { GaugeChartLoadingContext } from "../contexts/GaugeChartLoadingContext.js";
 import { GaugeChartRangeMaxContext } from "../contexts/GaugeChartRangeMaxContext.js";
 import { GaugeChartRangeMinContext } from "../contexts/GaugeChartRangeMinContext.js";
 import { GaugeChartSizeContext } from "../contexts/GaugeChartSizeContext.js";
@@ -19,7 +20,8 @@ const GaugeChartProviders = ({
   valueAccessor,
   explicitColor,
   seriesActions,
-  children
+  children,
+  loading
 }) => {
   const {
     formatter,
@@ -61,7 +63,7 @@ const GaugeChartProviders = ({
           value: {
             label: labelSlot
           },
-          children: /* @__PURE__ */ jsx(GaugeChartRangeMinContext.Provider, { value: min, children: /* @__PURE__ */ jsx(GaugeChartRangeMaxContext.Provider, { value: max, children }) })
+          children: /* @__PURE__ */ jsx(GaugeChartRangeMinContext.Provider, { value: min, children: /* @__PURE__ */ jsx(GaugeChartRangeMaxContext.Provider, { value: max, children: /* @__PURE__ */ jsx(GaugeChartLoadingContext.Provider, { value: loading, children }) }) })
         }
       ) })
     }

package/esm/charts/gauge/providers/GaugeChartProviders.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/providers/GaugeChartProviders.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactElement, useMemo } from 'react';\n\nimport { TooltipStoreProvider } from './GaugeChartTooltipStoreProvider.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport { GaugeChartColorContext } from '../contexts/GaugeChartColorContext.js';\nimport { GaugeChartFormatterContext } from '../contexts/GaugeChartFormatterContext.js';\nimport { GaugeChartLabelsContext } from '../contexts/GaugeChartLabelsContext.js';\nimport { GaugeChartRangeMaxContext } from '../contexts/GaugeChartRangeMaxContext.js';\nimport { GaugeChartRangeMinContext } from '../contexts/GaugeChartRangeMinContext.js';\nimport { GaugeChartSizeContext } from '../contexts/GaugeChartSizeContext.js';\nimport { GaugeChartThresholdContext } from '../contexts/GaugeChartThresholdContext.js';\nimport type {\n  GaugeChartInternalConfig,\n  GaugeChartThresholdIndicatorPropsInternal,\n} from '../types/gauge-chart-config-internal.js';\nimport type { GaugeChartData } from '../types/gauge-chart.js';\nimport { getValueArcColor } from '../utils/get-value-arc-color.js';\n\nconst emptyThresholds: GaugeChartThresholdIndicatorPropsInternal[] = [];\n\nexport interface GaugeChartProvidersProps {\n  config: GaugeChartInternalConfig;\n  width: number;\n  height: number;\n  value: number | GaugeChartData;\n  valueAccessor?: string;\n  explicitColor?: string;\n  seriesActions?: (series: string | number) => SeriesActionsTemplate;\n}\n\nexport const GaugeChartProviders = ({\n  config,\n  width,\n  height,\n  value,\n  valueAccessor,\n  explicitColor,\n  seriesActions,\n  children,\n}: PropsWithChildren<GaugeChartProvidersProps>) => {\n  const {\n    formatter,\n    max,\n    min,\n    labelSlot,\n    thresholdsIndicators,\n    colorRules,\n    unit,\n  } = config;\n\n  const calculatedColor = getValueArcColor(\n    value,\n    colorRules,\n    explicitColor,\n    thresholdsIndicators,\n    valueAccessor,\n  );\n\n  const seriesActionValue = useMemo(\n    () => ({\n      chartSeriesActions: seriesActions as (\n        series: unknown,\n      ) => ReactElement<PropsWithChildren>,\n    }),\n    [seriesActions],\n  );\n\n  const chartSizeValue = useMemo(() => ({ width, height }), [width, height]);\n\n  const formatterContextValue = useMemo(\n    () => ({\n      formatter,\n      unit,\n    }),\n    [formatter, unit],\n  );\n\n  return (\n    <TooltipStoreProvider>\n      <ChartSeriesActionContext.Provider value={seriesActionValue}>\n        <GaugeChartSizeContext.Provider value={chartSizeValue}>\n          <GaugeChartFormatterContext.Provider value={formatterContextValue}>\n            <GaugeChartThresholdContext.Provider\n              value={thresholdsIndicators ?? emptyThresholds}\n            >\n              <GaugeChartColorContext.Provider value={calculatedColor}>\n                <GaugeChartLabelsContext.Provider\n                  value={{\n                    label: labelSlot,\n                  }}\n                >\n                  <GaugeChartRangeMinContext.Provider value={min}>\n                    <GaugeChartRangeMaxContext.Provider value={max}>\n                      {children}\n                    </GaugeChartRangeMaxContext.Provider>\n                  </GaugeChartRangeMinContext.Provider>\n                </GaugeChartLabelsContext.Provider>\n              </GaugeChartColorContext.Provider>\n            </GaugeChartThresholdContext.Provider>\n          </GaugeChartFormatterContext.Provider>\n        </GaugeChartSizeContext.Provider>\n      </ChartSeriesActionContext.Provider>\n    </TooltipStoreProvider>\n  );\n};\n\nGaugeChartProviders['displayName'] = 'GaugeChartProviders';\n"],
-  "mappings": "AA6FoB;AA7FpB,SAAoD,eAAe;AAEnE,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAEzC,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,kCAAkC;AAM3C,SAAS,wBAAwB;AAEjC,MAAM,kBAA+D,CAAC;AAY/D,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAmD;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,MACL,oBAAoB;AAAA,IAGtB;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,iBAAiB,QAAQ,OAAO,EAAE,OAAO,OAAO,IAAI,CAAC,OAAO,MAAM,CAAC;AAEzE,QAAM,wBAAwB;AAAA,IAC5B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,WAAW,IAAI;AAAA,EAClB;AAEA,SACE,oBAAC,wBACC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACxC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,gBACrC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,uBAC1C;AAAA,IAAC,2BAA2B;AAAA,IAA3B;AAAA,MACC,OAAO,wBAAwB;AAAA,MAE/B,8BAAC,uBAAuB,UAAvB,EAAgC,OAAO,iBACtC;AAAA,QAAC,wBAAwB;AAAA,QAAxB;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,UAEA,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACzC,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACxC,UACH,GACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF,GACF,GACF,GACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren, type ReactElement, useMemo } from 'react';\n\nimport { TooltipStoreProvider } from './GaugeChartTooltipStoreProvider.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport { GaugeChartColorContext } from '../contexts/GaugeChartColorContext.js';\nimport { GaugeChartFormatterContext } from '../contexts/GaugeChartFormatterContext.js';\nimport { GaugeChartLabelsContext } from '../contexts/GaugeChartLabelsContext.js';\nimport { GaugeChartLoadingContext } from '../contexts/GaugeChartLoadingContext.js';\nimport { GaugeChartRangeMaxContext } from '../contexts/GaugeChartRangeMaxContext.js';\nimport { GaugeChartRangeMinContext } from '../contexts/GaugeChartRangeMinContext.js';\nimport { GaugeChartSizeContext } from '../contexts/GaugeChartSizeContext.js';\nimport { GaugeChartThresholdContext } from '../contexts/GaugeChartThresholdContext.js';\nimport type {\n  GaugeChartInternalConfig,\n  GaugeChartThresholdIndicatorPropsInternal,\n} from '../types/gauge-chart-config-internal.js';\nimport type { GaugeChartData } from '../types/gauge-chart.js';\nimport { getValueArcColor } from '../utils/get-value-arc-color.js';\n\nconst emptyThresholds: GaugeChartThresholdIndicatorPropsInternal[] = [];\n\nexport interface GaugeChartProvidersProps {\n  config: GaugeChartInternalConfig;\n  width: number;\n  height: number;\n  value: number | GaugeChartData;\n  valueAccessor?: string;\n  explicitColor?: string;\n  loading: boolean;\n  seriesActions?: (series: string | number) => SeriesActionsTemplate;\n}\n\nexport const GaugeChartProviders = ({\n  config,\n  width,\n  height,\n  value,\n  valueAccessor,\n  explicitColor,\n  seriesActions,\n  children,\n  loading,\n}: PropsWithChildren<GaugeChartProvidersProps>) => {\n  const {\n    formatter,\n    max,\n    min,\n    labelSlot,\n    thresholdsIndicators,\n    colorRules,\n    unit,\n  } = config;\n\n  const calculatedColor = getValueArcColor(\n    value,\n    colorRules,\n    explicitColor,\n    thresholdsIndicators,\n    valueAccessor,\n  );\n\n  const seriesActionValue = useMemo(\n    () => ({\n      chartSeriesActions: seriesActions as (\n        series: unknown,\n      ) => ReactElement<PropsWithChildren>,\n    }),\n    [seriesActions],\n  );\n\n  const chartSizeValue = useMemo(() => ({ width, height }), [width, height]);\n\n  const formatterContextValue = useMemo(\n    () => ({\n      formatter,\n      unit,\n    }),\n    [formatter, unit],\n  );\n\n  return (\n    <TooltipStoreProvider>\n      <ChartSeriesActionContext.Provider value={seriesActionValue}>\n        <GaugeChartSizeContext.Provider value={chartSizeValue}>\n          <GaugeChartFormatterContext.Provider value={formatterContextValue}>\n            <GaugeChartThresholdContext.Provider\n              value={thresholdsIndicators ?? emptyThresholds}\n            >\n              <GaugeChartColorContext.Provider value={calculatedColor}>\n                <GaugeChartLabelsContext.Provider\n                  value={{\n                    label: labelSlot,\n                  }}\n                >\n                  <GaugeChartRangeMinContext.Provider value={min}>\n                    <GaugeChartRangeMaxContext.Provider value={max}>\n                      <GaugeChartLoadingContext.Provider value={loading}>\n                        {children}\n                      </GaugeChartLoadingContext.Provider>\n                    </GaugeChartRangeMaxContext.Provider>\n                  </GaugeChartRangeMinContext.Provider>\n                </GaugeChartLabelsContext.Provider>\n              </GaugeChartColorContext.Provider>\n            </GaugeChartThresholdContext.Provider>\n          </GaugeChartFormatterContext.Provider>\n        </GaugeChartSizeContext.Provider>\n      </ChartSeriesActionContext.Provider>\n    </TooltipStoreProvider>\n  );\n};\n\nGaugeChartProviders['displayName'] = 'GaugeChartProviders';\n"],
+  "mappings": "AAiGsB;AAjGtB,SAAoD,eAAe;AAEnE,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAEzC,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AACzC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,kCAAkC;AAM3C,SAAS,wBAAwB;AAEjC,MAAM,kBAA+D,CAAC;AAa/D,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAmD;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,MACL,oBAAoB;AAAA,IAGtB;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,iBAAiB,QAAQ,OAAO,EAAE,OAAO,OAAO,IAAI,CAAC,OAAO,MAAM,CAAC;AAEzE,QAAM,wBAAwB;AAAA,IAC5B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,WAAW,IAAI;AAAA,EAClB;AAEA,SACE,oBAAC,wBACC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACxC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,gBACrC,8BAAC,2BAA2B,UAA3B,EAAoC,OAAO,uBAC1C;AAAA,IAAC,2BAA2B;AAAA,IAA3B;AAAA,MACC,OAAO,wBAAwB;AAAA,MAE/B,8BAAC,uBAAuB,UAAvB,EAAgC,OAAO,iBACtC;AAAA,QAAC,wBAAwB;AAAA,QAAxB;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,UAEA,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACzC,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,KACzC,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,SACvC,UACH,GACF,GACF;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF,GACF,GACF,GACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/gauge/providers/GaugeChartTooltipStoreProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/providers/GaugeChartTooltipStoreProvider.tsx"],
-  "sourcesContent": ["import { PropsWithChildren, useRef } from 'react';\n\nimport { GaugeChartTooltipState } from './GaugeChartTooltipState.js';\nimport { Store, createStore } from '../../../core/store/store.js';\nimport { GaugeChartTooltipContext } from '../contexts/GaugeChartTooltipContext.js';\n\n//region Tooltip\nconst GAUGE_TOOLTIP_INITIAL_STATE = Object.freeze<GaugeChartTooltipState>({\n  position: {\n    absolute: { x: 0, y: 0 },\n    relative: { x: 0, y: 0 },\n  },\n  pinned: false,\n  visible: false,\n});\n//endregion\n\nexport const TooltipStoreProvider = ({ children }: PropsWithChildren) => {\n  const storeRef = useRef<Store<GaugeChartTooltipState> | null>(null);\n\n  storeRef.current ||= createStore({ ...GAUGE_TOOLTIP_INITIAL_STATE });\n\n  return (\n    <GaugeChartTooltipContext.Provider value={storeRef.current}>\n      {children}\n    </GaugeChartTooltipContext.Provider>\n  );\n};\n"],
-  "mappings": "AAuBI;AAvBJ,SAA4B,cAAc;AAG1C,SAAgB,mBAAmB;AACnC,SAAS,gCAAgC;AAGzC,MAAM,8BAA8B,OAAO,OAA+B;AAAA,EACxE,UAAU;AAAA,IACR,UAAU,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,IACvB,UAAU,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AACX,CAAC;AAGM,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAyB;AACvE,QAAM,WAAW,OAA6C,IAAI;AAElE,WAAS,YAAY,YAAY,EAAE,GAAG,4BAA4B,CAAC;AAEnE,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,SAAS,SAChD,UACH;AAEJ;",
+  "sourcesContent": ["import { PropsWithChildren, useRef } from 'react';\n\nimport { Store, createStore } from '../../../core/store/store.js';\nimport { GaugeChartTooltipContext } from '../contexts/GaugeChartTooltipContext.js';\nimport { GaugeChartTooltipState } from '../types/gauge-chart-tooltip-state.js';\n\n//region Tooltip\nconst GAUGE_TOOLTIP_INITIAL_STATE = Object.freeze<GaugeChartTooltipState>({\n  position: {\n    absolute: { x: 0, y: 0 },\n    relative: { x: 0, y: 0 },\n  },\n  pinned: false,\n  visible: false,\n});\n//endregion\n\nexport const TooltipStoreProvider = ({ children }: PropsWithChildren) => {\n  const storeRef = useRef<Store<GaugeChartTooltipState> | null>(null);\n\n  storeRef.current ||= createStore({ ...GAUGE_TOOLTIP_INITIAL_STATE });\n\n  return (\n    <GaugeChartTooltipContext.Provider value={storeRef.current}>\n      {children}\n    </GaugeChartTooltipContext.Provider>\n  );\n};\n"],
+  "mappings": "AAuBI;AAvBJ,SAA4B,cAAc;AAE1C,SAAgB,mBAAmB;AACnC,SAAS,gCAAgC;AAIzC,MAAM,8BAA8B,OAAO,OAA+B;AAAA,EACxE,UAAU;AAAA,IACR,UAAU,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,IACvB,UAAU,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AACX,CAAC;AAGM,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAyB;AACvE,QAAM,WAAW,OAA6C,IAAI;AAElE,WAAS,YAAY,YAAY,EAAE,GAAG,4BAA4B,CAAC;AAEnE,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,SAAS,SAChD,UACH;AAEJ;",
   "names": []
 }

package/esm/charts/gauge/types/gauge-chart-tooltip-state.js

@@ -0,0 +1 @@
+//# sourceMappingURL=gauge-chart-tooltip-state.js.map

package/esm/charts/gauge/utils/build-gauge-chart-config.js

@@ -7,6 +7,7 @@ const buildGaugeChartConfig = (props, consumerConfig, slots) => {
   const max = props.max ?? consumerConfig.max ?? GAUGE_DEFAULT_CONFIG.max;
   const color = props.color ?? consumerConfig.color ?? GAUGE_DEFAULT_CONFIG.color;
   const formatter = props.formatter ?? consumerConfig.formatter;
+  const loading = props.loading ?? consumerConfig.loading ?? GAUGE_DEFAULT_CONFIG.loading;
   const thresholdsIndicators = slots.thresholdsIndicators.length === 0 ? consumerConfig.thresholdsIndicators?.map(applyThresholdDefaults) : slots.thresholdsIndicators;
   const colorRules = (consumerConfig.colorRules || []).filter(isValidColorRule).concat(slots.colorRules || []);
   const toolbar = {
@@ -29,7 +30,8 @@ const buildGaugeChartConfig = (props, consumerConfig, slots) => {
     tooltip,
     intents: slots.intents,
     valueAccessor,
-    unit
+    unit,
+    loading
   };
 };
 export {

package/esm/charts/gauge/utils/build-gauge-chart-config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/utils/build-gauge-chart-config.ts"],
-  "sourcesContent": ["import { GAUGE_DEFAULT_CONFIG } from '../constants.js';\nimport { applyThresholdDefaults } from './apply-threshold-default.js';\nimport { isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { baseToolbarProps } from '../../core/slots/toolbar/CompactToolbar.js';\nimport type { GaugeChartInternalConfig } from '../types/gauge-chart-config-internal.js';\nimport type {\n  GaugeChartConsumerConfig,\n  GaugeChartSlotsConfig,\n} from '../types/gauge-chart-config.js';\nimport type { GaugeChartProps } from '../types/gauge-chart.js';\n\nexport const buildGaugeChartConfig = (\n  props: GaugeChartProps,\n  consumerConfig: GaugeChartConsumerConfig,\n  slots: GaugeChartSlotsConfig,\n): GaugeChartInternalConfig => {\n  const min = props.min ?? consumerConfig.min ?? GAUGE_DEFAULT_CONFIG.min;\n  const max = props.max ?? consumerConfig.max ?? GAUGE_DEFAULT_CONFIG.max;\n  const color =\n    props.color ?? consumerConfig.color ?? GAUGE_DEFAULT_CONFIG.color;\n  const formatter = props.formatter ?? consumerConfig.formatter;\n\n  const thresholdsIndicators =\n    slots.thresholdsIndicators.length === 0\n      ? consumerConfig.thresholdsIndicators?.map(applyThresholdDefaults)\n      : slots.thresholdsIndicators;\n  const colorRules = (consumerConfig.colorRules || [])\n    .filter(isValidColorRule)\n    .concat(slots.colorRules || []);\n\n  const toolbar = {\n    ...baseToolbarProps(),\n    ...consumerConfig.toolbar,\n    ...slots.toolbar,\n  };\n\n  const tooltip = slots.tooltip ?? consumerConfig.tooltip;\n\n  const valueAccessor = props.valueAccessor ?? consumerConfig.valueAccessor;\n\n  const unit = props.unit ?? consumerConfig.unit;\n\n  return {\n    min,\n    max,\n    color,\n    formatter,\n    thresholdsIndicators,\n    labelSlot: slots.label,\n    colorRules,\n    toolbar,\n    tooltip,\n    intents: slots.intents,\n    valueAccessor,\n    unit,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAQ1B,MAAM,wBAAwB,CACnC,OACA,gBACA,UAC6B;AAC7B,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,qBAAqB;AACpE,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,qBAAqB;AACpE,QAAM,QACJ,MAAM,SAAS,eAAe,SAAS,qBAAqB;AAC9D,QAAM,YAAY,MAAM,aAAa,eAAe;AAEpD,QAAM,uBACJ,MAAM,qBAAqB,WAAW,IAClC,eAAe,sBAAsB,IAAI,sBAAsB,IAC/D,MAAM;AACZ,QAAM,cAAc,eAAe,cAAc,CAAC,GAC/C,OAAO,gBAAgB,EACvB,OAAO,MAAM,cAAc,CAAC,CAAC;AAEhC,QAAM,UAAU;AAAA,IACd,GAAG,iBAAiB;AAAA,IACpB,GAAG,eAAe;AAAA,IAClB,GAAG,MAAM;AAAA,EACX;AAEA,QAAM,UAAU,MAAM,WAAW,eAAe;AAEhD,QAAM,gBAAgB,MAAM,iBAAiB,eAAe;AAE5D,QAAM,OAAO,MAAM,QAAQ,eAAe;AAE1C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,MAAM;AAAA,IACf;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { GAUGE_DEFAULT_CONFIG } from '../constants.js';\nimport { applyThresholdDefaults } from './apply-threshold-default.js';\nimport { isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { baseToolbarProps } from '../../core/slots/toolbar/CompactToolbar.js';\nimport type { GaugeChartInternalConfig } from '../types/gauge-chart-config-internal.js';\nimport type {\n  GaugeChartConsumerConfig,\n  GaugeChartSlotsConfig,\n} from '../types/gauge-chart-config.js';\nimport type { GaugeChartProps } from '../types/gauge-chart.js';\n\nexport const buildGaugeChartConfig = (\n  props: GaugeChartProps,\n  consumerConfig: GaugeChartConsumerConfig,\n  slots: GaugeChartSlotsConfig,\n): GaugeChartInternalConfig => {\n  const min = props.min ?? consumerConfig.min ?? GAUGE_DEFAULT_CONFIG.min;\n  const max = props.max ?? consumerConfig.max ?? GAUGE_DEFAULT_CONFIG.max;\n  const color =\n    props.color ?? consumerConfig.color ?? GAUGE_DEFAULT_CONFIG.color;\n  const formatter = props.formatter ?? consumerConfig.formatter;\n  const loading =\n    props.loading ?? consumerConfig.loading ?? GAUGE_DEFAULT_CONFIG.loading;\n\n  const thresholdsIndicators =\n    slots.thresholdsIndicators.length === 0\n      ? consumerConfig.thresholdsIndicators?.map(applyThresholdDefaults)\n      : slots.thresholdsIndicators;\n  const colorRules = (consumerConfig.colorRules || [])\n    .filter(isValidColorRule)\n    .concat(slots.colorRules || []);\n\n  const toolbar = {\n    ...baseToolbarProps(),\n    ...consumerConfig.toolbar,\n    ...slots.toolbar,\n  };\n\n  const tooltip = slots.tooltip ?? consumerConfig.tooltip;\n\n  const valueAccessor = props.valueAccessor ?? consumerConfig.valueAccessor;\n\n  const unit = props.unit ?? consumerConfig.unit;\n\n  return {\n    min,\n    max,\n    color,\n    formatter,\n    thresholdsIndicators,\n    labelSlot: slots.label,\n    colorRules,\n    toolbar,\n    tooltip,\n    intents: slots.intents,\n    valueAccessor,\n    unit,\n    loading,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAQ1B,MAAM,wBAAwB,CACnC,OACA,gBACA,UAC6B;AAC7B,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,qBAAqB;AACpE,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,qBAAqB;AACpE,QAAM,QACJ,MAAM,SAAS,eAAe,SAAS,qBAAqB;AAC9D,QAAM,YAAY,MAAM,aAAa,eAAe;AACpD,QAAM,UACJ,MAAM,WAAW,eAAe,WAAW,qBAAqB;AAElE,QAAM,uBACJ,MAAM,qBAAqB,WAAW,IAClC,eAAe,sBAAsB,IAAI,sBAAsB,IAC/D,MAAM;AACZ,QAAM,cAAc,eAAe,cAAc,CAAC,GAC/C,OAAO,gBAAgB,EACvB,OAAO,MAAM,cAAc,CAAC,CAAC;AAEhC,QAAM,UAAU;AAAA,IACd,GAAG,iBAAiB;AAAA,IACpB,GAAG,eAAe;AAAA,IAClB,GAAG,MAAM;AAAA,EACX;AAEA,QAAM,UAAU,MAAM,WAAW,eAAe;AAEhD,QAAM,gBAAgB,MAAM,iBAAiB,eAAe;AAE5D,QAAM,OAAO,MAAM,QAAQ,eAAe;AAE1C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.css

@@ -1,3 +1,3 @@
-._9phcbi0-3-2-1 {
+._9phcbi0-3-3-1 {
   position: relative;
 }