@ssa-ui-kit/core 2.8.2 → 2.9.0

package/dist/components/Charts/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,25 @@
+import { WidgetCardProps } from '../../WidgetCard';
+import { GaugeChartBaseProps, GaugeChartLabelsProps, GaugeChartTickersProps } from './components';
+export type GaugeChartFeature = 'header' | 'fullscreenMode';
+export interface GaugeChartProps extends Pick<GaugeChartLabelsProps, 'maxLabel' | 'minLabel' | 'unitLabel' | 'totalLabel'>, Pick<GaugeChartTickersProps, 'ticks'> {
+    minValue: number;
+    maxValue: number;
+    value: number;
+    title?: string;
+    segments?: {
+        value: number;
+        id?: string;
+        color?: string;
+    }[];
+    withLabels?: boolean;
+    withTrack?: boolean;
+    withNeedle?: boolean;
+    chartProps?: Omit<GaugeChartBaseProps, 'data'>;
+    trackProps?: Omit<GaugeChartBaseProps, 'data'>;
+    features?: GaugeChartFeature[];
+    widgetCardProps?: WidgetCardProps;
+}
+export declare const GaugeChart: {
+    (props: GaugeChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Charts/GaugeChart/components/GaugeChartBase.d.ts

@@ -0,0 +1,7 @@
+import { MayHaveLabel, ResponsivePie } from '@nivo/pie';
+export type GaugeChartData = {
+    color?: string;
+    value?: number;
+} & MayHaveLabel;
+export type GaugeChartBaseProps = React.ComponentProps<typeof ResponsivePie<GaugeChartData>>;
+export declare const GaugeChartBase: ({ ...props }: GaugeChartBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/GaugeChart/components/GaugeChartCanvas.d.ts

@@ -0,0 +1,4 @@
+export declare const GaugeChartCanvas: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Charts/GaugeChart/components/GaugeChartHeader.d.ts

@@ -0,0 +1,8 @@
+import { MustInclude } from '@ssa-ui-kit/utils';
+export declare const FullScreenButton: import("@emotion/styled").StyledComponent<import("../../../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export interface GaugeChartHeaderProps<T extends string[]> {
+    features: MustInclude<T, 'fullscreenMode'>;
+}
+export declare const GaugeChartHeader: <F extends string[]>({ features, }: GaugeChartHeaderProps<F>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/GaugeChart/components/GaugeChartLabels.d.ts

@@ -0,0 +1,14 @@
+export declare const GaugeChartLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export interface GaugeChartLabelsProps {
+    width: string;
+    withLabels?: boolean;
+    value?: number;
+    unitLabel?: string;
+    minLabel?: string;
+    maxLabel?: string;
+    totalLabel?: string;
+}
+export declare const GaugeChartLabels: ({ width, withLabels, value, unitLabel, minLabel, maxLabel, totalLabel, }: GaugeChartLabelsProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/GaugeChart/components/GaugeChartLayer.d.ts

@@ -0,0 +1,4 @@
+export declare const GaugeChartLayer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Charts/GaugeChart/components/GaugeChartNeedle.d.ts

@@ -0,0 +1,12 @@
+export interface GaugeChartNeedleProps {
+    pieSize: {
+        width: number;
+        height: number;
+    };
+    pieOffset: {
+        x: number;
+        y: number;
+    };
+    needleAngle: number;
+}
+export declare const GaugeChartNeedle: ({ pieSize, pieOffset, needleAngle, }: GaugeChartNeedleProps) => import("@emotion/react/jsx-runtime").JSX.Element | undefined;

package/dist/components/Charts/GaugeChart/components/GaugeChartTickers.d.ts

@@ -0,0 +1,17 @@
+export interface GaugeChartTickersProps {
+    pieSize: {
+        width: number;
+        height: number;
+    };
+    pieOffset: {
+        x: number;
+        y: number;
+    };
+    minValue: number;
+    maxValue: number;
+    ticks?: ({
+        value: number;
+        label?: React.ReactNode;
+    } | number)[];
+}
+export declare const GaugeChartTickers: ({ pieOffset, pieSize, minValue, maxValue, ticks, }: GaugeChartTickersProps) => import("@emotion/react/jsx-runtime").JSX.Element | undefined;

package/dist/components/Charts/GaugeChart/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './GaugeChartLabels';
+export * from './GaugeChartNeedle';
+export * from './GaugeChartTickers';
+export * from './GaugeChartBase';
+export * from './GaugeChartHeader';
+export * from './GaugeChartLayer';
+export * from './GaugeChartCanvas';

package/dist/components/Charts/GaugeChart/index.d.ts

@@ -0,0 +1 @@
+export * from './GaugeChart';

package/dist/components/Charts/GaugeChart/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './math';

package/dist/components/Charts/GaugeChart/utils/math.d.ts

@@ -0,0 +1,19 @@
+export declare const scaleFromBase: (baseValue: number, base: number, current: number) => number;
+export declare const normalizeToRange: (value: number, min: number, max: number, targetMin?: number, targetMax?: number) => number;
+export declare const calculateFittedSize: (container: {
+    width: number;
+    height: number;
+}, aspectRatio: number) => {
+    width: number;
+    height: number;
+};
+export declare const centeredOffset: (container: {
+    width: number;
+    height: number;
+}, content: {
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+};

package/dist/components/Charts/TreeMapChart/TreeMapChart.d.ts

@@ -1,13 +1,13 @@
 import { ResponsiveTreeMap } from '@nivo/treemap';
-import React from 'react';
 import { WidgetCardProps } from '../../WidgetCard';
 export type TreeNode = {
     name: string;
     value?: number;
+    color?: string;
     children?: TreeNode[];
 };
 export type TreeMapChartFeature = 'header' | 'fullscreenMode';
-type NivoTreeMapChartProps = React.ComponentProps<typeof ResponsiveTreeMap>;
+type NivoTreeMapChartProps = React.ComponentProps<typeof ResponsiveTreeMap<TreeNode>>;
 export interface TreeMapChartProps extends Omit<NivoTreeMapChartProps, 'data'> {
     data: TreeNode;
     title?: string;

package/dist/components/Charts/index.d.ts

@@ -4,3 +4,4 @@ export * from './BarLineComplexChart';
 export * from './TreeMapChart';
 export * from './common';
 export * from './hooks';
+export * from './GaugeChart';

package/dist/index.js

@@ -110,6 +110,7 @@ __webpack_require__.d(__webpack_exports__, {
   FormRadioGroup: () => (/* reexport */ FormRadioGroup_FormRadioGroup),
   FullscreenModeContext: () => (/* reexport */ FullscreenModeContext),
   FullscreenModeProvider: () => (/* reexport */ FullscreenModeProvider),
+  GaugeChart: () => (/* reexport */ GaugeChart),
   Icon: () => (/* reexport */ Icon_Icon),
   ImageItem: () => (/* reexport */ ImageItem),
   Indicator: () => (/* reexport */ Indicator_Indicator),
@@ -15716,7 +15717,6 @@ function TreeMapChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
-
 var TreeMapChart_ref =  true ? {
   name: "1qkt16r",
   styles: "position:relative;height:100%;width:100%"
@@ -15782,6 +15782,429 @@ const TreeMapChart = WithFullscreenMode(TreeMapChartComponent);
 
 ;// ./src/components/Charts/hooks/index.ts
 
+;// ./src/components/Charts/GaugeChart/components/GaugeChartHeader.tsx
+
+function GaugeChartHeader_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+const GaugeChartHeader_FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "e1mg237f0"
+} : 0)("height:auto;padding:0;background:none;box-shadow:none;&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
+  theme
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
+var GaugeChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var GaugeChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const GaugeChartHeader = ({
+  features = []
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: GaugeChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartHeader_FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: GaugeChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartCanvas.tsx
+
+function GaugeChartCanvas_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const GaugeChartCanvas = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e838210"
+} : 0)( true ? {
+  name: "1f0ps9l",
+  styles: "position:relative;width:100%;max-height:100%;aspect-ratio:3"
+} : 0);
+;// ./src/components/Charts/GaugeChart/components/GaugeChartLayer.tsx
+
+function GaugeChartLayer_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const GaugeChartLayer = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ecz750w0"
+} : 0)( true ? {
+  name: "xyyuvf",
+  styles: "position:absolute;height:100%;width:100%"
+} : 0);
+;// ./src/components/Charts/GaugeChart/components/GaugeChartBase.tsx
+
+
+
+const GaugeChartBase = ({
+  ...props
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(pie_namespaceObject.ResponsivePie, {
+    startAngle: -90,
+    endAngle: 90,
+    innerRadius: 0.8,
+    padAngle: 1,
+    cornerRadius: 100,
+    enableArcLabels: false,
+    enableArcLinkLabels: false,
+    colors: ({
+      data
+    }) => data.color ?? theme.colors.greyLighter,
+    isInteractive: false,
+    animate: false,
+    sortByValue: false,
+    fit: true,
+    layers: ['arcs', 'legends'],
+    ...props
+  });
+};
+;// ./src/components/Charts/GaugeChart/utils/math.ts
+const scaleFromBase = (baseValue, base, current) => {
+  return current / base * baseValue;
+};
+const normalizeToRange = (value, min, max, targetMin = 0, targetMax = 100) => {
+  if (max === min) return targetMin;
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const ratio = (clampedValue - min) / (max - min);
+  return ratio * (targetMax - targetMin) + targetMin;
+};
+const calculateFittedSize = (container, aspectRatio) => {
+  const containerRatio = container.width / container.height;
+  if (containerRatio < aspectRatio) {
+    // container is too tall → constrain by width
+    const width = container.width;
+    return {
+      width,
+      height: width / aspectRatio
+    };
+  } else {
+    // container is too wide → constrain by height
+    const height = container.height;
+    return {
+      width: height * aspectRatio,
+      height
+    };
+  }
+};
+const centeredOffset = (container, content) => {
+  return {
+    x: (container.width - content.width) / 2,
+    y: (container.height - content.height) / 2
+  };
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartTickers.tsx
+
+
+
+const GaugeChartTickers = ({
+  pieOffset,
+  pieSize,
+  minValue,
+  maxValue,
+  ticks = []
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  if (pieSize.height <= 0) {
+    return;
+  }
+  const radius = pieSize.width / 2;
+  const labelRadius = radius * 1.05;
+  const pieBottomCenter = {
+    x: pieOffset.x + pieSize.width / 2,
+    y: pieOffset.y + pieSize.height
+  };
+  const tickLabels = ticks.map(tick => {
+    const {
+      value,
+      label
+    } = typeof tick === 'number' ? {
+      value: tick,
+      label: tick
+    } : tick;
+    const normalizedValue = normalizeToRange(value, minValue, maxValue, 0, 100);
+    const angle = (-90 + normalizedValue / 100 * 180) * (Math.PI / 180);
+    const x = pieBottomCenter.x + labelRadius * Math.sin(angle);
+    const y = pieBottomCenter.y - labelRadius * Math.cos(angle);
+    const align = normalizedValue > 50 ? 'left' : 'right';
+    return {
+      x,
+      y,
+      normalizedValue,
+      label: label ?? value,
+      align
+    };
+  });
+  return (0,jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+    children: tickLabels.map(({
+      normalizedValue,
+      label,
+      align,
+      x,
+      y
+    }, index) => {
+      let translateX = '-50%'; // center
+      if (align === 'right') {
+        translateX = '-100%';
+      }
+      if (align === 'left') {
+        translateX = '0%';
+      }
+      return (0,jsx_runtime_namespaceObject.jsx)("div", {
+        // prevents class creation for each label
+        style: {
+          left: `${x}px`,
+          top: `${y}px`,
+          transform: `translate(${translateX}, -50%)`
+        },
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          color: theme.colors.greyDarker60,
+          position: 'absolute',
+          fontSize: 12,
+          fontWeight: 500
+        },  true ? "" : 0,  true ? "" : 0),
+        children: label
+      }, normalizedValue + index);
+    })
+  });
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartNeedle.tsx
+
+
+const GaugeChartNeedle = ({
+  pieSize,
+  pieOffset,
+  needleAngle
+}) => {
+  if (pieSize.height <= 0) {
+    return;
+  }
+  const needle = {
+    x: pieOffset.x + pieSize.width / 2,
+    y: pieOffset.y + pieSize.height - scaleFromBase(10, 100, pieSize.height),
+    width: scaleFromBase(40, 100, pieSize.width) - scaleFromBase(10, 100, pieSize.height),
+    height: scaleFromBase(8, 100, pieSize.height)
+  };
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    style: {
+      position: 'absolute',
+      top: `${needle.y}px`,
+      left: `${needle.x}px`,
+      width: `${needle.width}px`,
+      borderRadius: needle.height / 2,
+      height: `${needle.height}px`,
+      backgroundColor: '#73767B',
+      transformOrigin: 'left center',
+      transform: `rotate(${needleAngle}deg)`
+    }
+  });
+};
+;// ./src/components/Charts/GaugeChart/components/GaugeChartLabels.tsx
+
+
+function GaugeChartLabels_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+const GaugeChartLabel = /*#__PURE__*/base_default()("span",  true ? {
+  target: "e1hn6mi60"
+} : 0)("line-height:0;color:", ({
+  theme
+}) => theme.colors.greyDarker60, ";" + ( true ? "" : 0));
+var GaugeChartLabels_ref =  true ? {
+  name: "1azakc",
+  styles: "text-align:center"
+} : 0;
+var GaugeChartLabels_ref2 =  true ? {
+  name: "5bhc30",
+  styles: "margin-bottom:8px"
+} : 0;
+var GaugeChartLabels_ref3 =  true ? {
+  name: "6r7ers",
+  styles: "font-size:28px;font-weight:700;white-space:nowrap;color:unset"
+} : 0;
+const GaugeChartLabels = ({
+  width,
+  withLabels,
+  value,
+  unitLabel,
+  minLabel,
+  maxLabel,
+  totalLabel
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      width,
+      justifyContent: 'space-between'
+    },  true ? "" : 0,  true ? "" : 0),
+    children: [(0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+      children: withLabels && minLabel
+    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: GaugeChartLabels_ref,
+      children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: GaugeChartLabels_ref2,
+        children: (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+          children: withLabels && totalLabel
+        })
+      }), (0,jsx_runtime_namespaceObject.jsxs)(GaugeChartLabel, {
+        css: GaugeChartLabels_ref3,
+        children: [(0,jsx_runtime_namespaceObject.jsxs)("span", {
+          children: [value, " "]
+        }), (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+          css: /*#__PURE__*/(0,react_namespaceObject.css)({
+            fontSize: 18,
+            fontWeight: 500,
+            color: theme.colors.greyDarker80
+          },  true ? "" : 0,  true ? "" : 0),
+          children: unitLabel
+        })]
+      })]
+    }), (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabel, {
+      children: withLabels && maxLabel
+    })]
+  });
+};
+;// ./src/components/Charts/GaugeChart/GaugeChart.tsx
+function GaugeChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+
+
+var GaugeChart_ref =  true ? {
+  name: "13udsys",
+  styles: "height:100%"
+} : 0;
+var GaugeChart_ref2 =  true ? {
+  name: "67cb9k",
+  styles: "justify-content:center;height:100%"
+} : 0;
+const GaugeChartComponent = ({
+  minLabel,
+  maxLabel,
+  totalLabel,
+  unitLabel,
+  minValue,
+  maxValue,
+  value,
+  title,
+  chartProps,
+  trackProps,
+  widgetCardProps,
+  withLabels = true,
+  withTrack = true,
+  withNeedle = true,
+  features = [],
+  segments = [],
+  ticks = []
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    ref: containerRef,
+    ...containerSize
+  } = (0,hooks_namespaceObject.useElementSize)();
+  const normalizedValue = normalizeToRange(value, minValue, maxValue, 0, 100);
+  const normalizedSegments = segments.map((segment, index) => {
+    const prev = segments[index - 1];
+    const start = normalizeToRange(prev?.value ?? minValue, minValue, maxValue, 0, 100);
+    const end = normalizeToRange(segment.value, minValue, maxValue, 0, 100);
+    return {
+      ...segment,
+      value: end - start
+    };
+  });
+  if (normalizedSegments.length === 0) {
+    normalizedSegments.push({
+      value: normalizedValue,
+      color: theme.colors.blueLight
+    });
+  }
+
+  // ensure normalized segments value sum to 100
+  const totalValue = normalizedSegments.reduce((acc, segment) => acc + segment.value, 0);
+  if (totalValue !== 100) {
+    normalizedSegments.push({
+      value: 100 - totalValue,
+      color: 'transparent'
+    });
+  }
+  const needleAngle = 180 + normalizedValue / 100 * 180;
+  const trackSize = 100;
+  const pieAspectRatio = 2;
+  const pieSize = calculateFittedSize(containerSize, pieAspectRatio);
+  const pieOffset = centeredOffset(containerSize, pieSize);
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: GaugeChart_ref,
+    children: (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+      features: features,
+      cardProps: {
+        title,
+        headerContent: (0,jsx_runtime_namespaceObject.jsx)(GaugeChartHeader, {
+          features: features
+        }),
+        ...widgetCardProps
+      },
+      children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+        direction: "column",
+        css: GaugeChart_ref2,
+        children: [(0,jsx_runtime_namespaceObject.jsxs)(GaugeChartCanvas, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)(GaugeChartLayer, {
+            children: withTrack && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartBase, {
+              data: [{
+                value: trackSize
+              }],
+              colors: theme.colors.greyLighter,
+              layers: ['arcs'],
+              ...trackProps
+            })
+          }), (0,jsx_runtime_namespaceObject.jsxs)(GaugeChartLayer, {
+            ref: containerRef,
+            children: [(0,jsx_runtime_namespaceObject.jsx)(GaugeChartBase, {
+              data: normalizedSegments,
+              ...chartProps
+            }), (0,jsx_runtime_namespaceObject.jsx)(GaugeChartTickers, {
+              pieOffset: pieOffset,
+              pieSize: pieSize,
+              minValue: minValue,
+              maxValue: maxValue,
+              ticks: ticks
+            }), withNeedle && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartNeedle, {
+              needleAngle: needleAngle,
+              pieOffset: pieOffset,
+              pieSize: pieSize
+            })]
+          })]
+        }), pieSize.height > 0 && (0,jsx_runtime_namespaceObject.jsx)(GaugeChartLabels, {
+          withLabels: withLabels,
+          width: `${pieSize.width}px`,
+          value: value,
+          unitLabel: unitLabel,
+          minLabel: minLabel,
+          maxLabel: maxLabel,
+          totalLabel: totalLabel
+        })]
+      })
+    })
+  });
+};
+const GaugeChart = WithFullscreenMode(GaugeChartComponent);
+;// ./src/components/Charts/GaugeChart/index.ts
+
 ;// ./src/components/Charts/index.ts
 
 
@@ -15789,6 +16212,7 @@ const TreeMapChart = WithFullscreenMode(TreeMapChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts
 
 
@@ -16386,13 +16810,15 @@ function Typeahead_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 
+// TODO: automatically calculate max-height
+// https://github.com/ssagroup/ui-kit/issues/385
 const TypeaheadOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   target: "e1vig1dw6"
 } : 0)("padding:0;margin:0;list-style:none;background:#fff;border-radius:8px;filter:", ({
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";backdrop-filter:", ({
   theme
-}) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";" + ( true ? "" : 0));
+}) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";overflow-y:auto;max-height:350px;" + ( true ? "" : 0));
 const TypeaheadOption = /*#__PURE__*/base_default()("li",  true ? {
   target: "e1vig1dw5"
 } : 0)("display:flex;align-items:center;padding:8px 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:12px;height:40px;background:", ({