@connectif/ui-components 2.3.0 → 2.3.2

package/dist/index.js

@@ -4630,6 +4630,9 @@ var customIcons = {};
 function registerCustomIcons(newIcons) {
   customIcons = { ...customIcons, ...newIcons };
 }
+function getIconPath(icon) {
+  return customIcons[icon] ?? icons[icon] ?? "";
+}
 
 // src/components/icon/Icon.tsx
 import { Icon as MdiIcon } from "@mdi/react";
@@ -4729,13 +4732,6 @@ __export(Typography_exports, {
 var Colors_exports = {};
 __export(Colors_exports, {
   black: () => black,
-  blackOpacity04: () => blackOpacity04,
-  blueGrey: () => blueGrey,
-  blueGrey300: () => blueGrey300,
-  blueGrey400: () => blueGrey400,
-  blueGrey500: () => blueGrey500,
-  blueGrey700: () => blueGrey700,
-  blueGrey800: () => blueGrey800,
   complementary100: () => complementary100,
   complementary200: () => complementary200,
   complementary300: () => complementary300,
@@ -4753,7 +4749,6 @@ __export(Colors_exports, {
   dark700: () => dark700,
   dark800: () => dark800,
   dark900: () => dark900,
-  darkGreen: () => darkGreen,
   darkMain: () => darkMain,
   electricLavender: () => electricLavender,
   error100: () => error100,
@@ -4768,7 +4763,6 @@ __export(Colors_exports, {
   error800: () => error800,
   error900: () => error900,
   errorMain: () => errorMain,
-  green2: () => green2,
   grey100: () => grey100,
   grey200: () => grey200,
   grey300: () => grey300,
@@ -4780,10 +4774,7 @@ __export(Colors_exports, {
   grey800: () => grey800,
   grey900: () => grey900,
   gunMetal: () => gunMetal,
-  lightGreen: () => lightGreen,
   oliveGreen: () => oliveGreen,
-  overlay02: () => overlay02,
-  overlay05: () => overlay05,
   paleOliveGreen: () => paleOliveGreen,
   primary100: () => primary100,
   primary200: () => primary200,
@@ -4796,14 +4787,10 @@ __export(Colors_exports, {
   primary800: () => primary800,
   primary900: () => primary900,
   primaryAlpha32: () => primaryAlpha32,
-  primaryAlpha64: () => primaryAlpha64,
   primaryDark: () => primaryDark,
   primaryLight: () => primaryLight,
   primaryMain: () => primaryMain,
   primaryOpacity32: () => primaryOpacity32,
-  purpleDark: () => purpleDark,
-  purpleLight: () => purpleLight,
-  redOrange: () => redOrange,
   success100: () => success100,
   success200: () => success200,
   success300: () => success300,
@@ -4817,12 +4804,6 @@ __export(Colors_exports, {
   successDark: () => successDark,
   successLight: () => successLight,
   successMain: () => successMain,
-  tertiaryBlueGray: () => tertiaryBlueGray,
-  tertiaryBlueGrayLight: () => tertiaryBlueGrayLight,
-  tertiaryOliveGreen: () => tertiaryOliveGreen,
-  tertiaryOliveGreenLight: () => tertiaryOliveGreenLight,
-  tertiaryTealBlue: () => tertiaryTealBlue,
-  tertiaryTealBlueLight: () => tertiaryTealBlueLight,
   white: () => white,
   whiteOpacity32: () => whiteOpacity32,
   yellow: () => yellow
@@ -4842,7 +4823,6 @@ var primaryDark = primary800;
 var primaryLight = primary300;
 var primaryOpacity32 = "rgba(212, 224, 246, 0.32)";
 var primaryAlpha32 = "#F1F5FC";
-var primaryAlpha64 = "#E3EBF9";
 var complementary50 = "#FBF3E3";
 var complementary100 = "#F5E0B9";
 var complementary200 = "#F0CC8C";
@@ -4892,14 +4872,6 @@ var grey900 = "#212121";
 var white = "#FFFFFF";
 var whiteOpacity32 = "rgba(255, 255, 255, 0.32)";
 var black = "#000000";
-var blackOpacity04 = "rgba(0, 0, 0, 0.04)";
-var blueGrey300 = "#A0A4AB";
-var blueGrey400 = "#646D7A";
-var blueGrey500 = "#495362";
-var blueGrey700 = "#414A58";
-var blueGrey800 = "#383F4C";
-var lightGreen = "#599D7D";
-var darkGreen = "#487F65";
 var dark500 = "#7F8BA8";
 var dark600 = "#3A4155";
 var dark700 = "#2F3646";
@@ -4908,23 +4880,10 @@ var dark900 = "#1D202A";
 var darkMain = dark700;
 var electricLavender = "#AD77EF";
 var cornflowerBlue = "#5F90EF";
-var tertiaryBlueGray = "#0E7178";
-var tertiaryBlueGrayLight = "#E4F5F7";
-var tertiaryOliveGreen = "#619C1D";
-var tertiaryOliveGreenLight = "#EFF7E6";
-var tertiaryTealBlue = "#73849F";
-var tertiaryTealBlueLight = "#F1F3F5";
-var overlay02 = "rgba(0, 0, 0, 0.02)";
-var overlay05 = "rgba(0, 0, 0, 0.05)";
-var purpleDark = "#8035DC";
-var purpleLight = "#FCEDFF";
 var gunMetal = "#47535D";
 var yellow = "#FFD234";
-var blueGrey = "#7384A0";
 var paleOliveGreen = "#AED581";
 var oliveGreen = "#83B04E";
-var redOrange = "#FF3D00";
-var green2 = "#2AC1CB";
 
 // src/theme/Typography.ts
 var sizes = {
@@ -5227,7 +5186,6 @@ var buttonTheme = {
 // src/theme/Palettes.ts
 var Palettes_exports = {};
 __export(Palettes_exports, {
-  blueGreyPalette: () => blueGreyPalette,
   commonPalette: () => commonPalette,
   complementaryPalette: () => complementaryPalette,
   cornflowerBluePalette: () => cornflowerBluePalette,
@@ -5254,8 +5212,7 @@ var primaryPalette = {
   800: primary800,
   900: primary900,
   opacity32: primaryOpacity32,
-  alpha32: primaryAlpha32,
-  alpha64: primaryAlpha64
+  alpha32: primaryAlpha32
 };
 var complementaryPalette = {
   main: complementaryMain,
@@ -5315,21 +5272,10 @@ var greyPalette = {
 var commonPalette = {
   black,
   white,
-  blackOpacity04,
   whiteOpacity32
 };
-var blueGreyPalette = {
-  main: blueGrey,
-  300: blueGrey300,
-  400: blueGrey400,
-  500: blueGrey500,
-  700: blueGrey700,
-  800: blueGrey800
-};
 var greenPalette = {
-  main: oliveGreen,
-  light: lightGreen,
-  dark: darkGreen
+  main: oliveGreen
 };
 var darkPalette = {
   main: darkMain,
@@ -7696,7 +7642,6 @@ var themeOptions = {
     success: successPalette,
     grey: greyPalette,
     common: commonPalette,
-    blueGrey: blueGreyPalette,
     green: greenPalette,
     dark: darkPalette,
     electricLavender: electricLavenderPalette,
@@ -10092,7 +10037,7 @@ var colorStyles2 = (theme2) => ({
       }
     },
     warning: {
-      color: theme2.palette.error[900],
+      color: theme2.palette.common.white,
       backgroundColor: theme2.palette.error[900],
       ":hover": {
         backgroundColor: theme2.palette.error[600]
@@ -10858,6 +10803,7 @@ var EnhancedCardTitle = ({
   cursor: cursor2 = "default",
   variant = "body2",
   size = "M",
+  padding: padding2,
   dataTest
 }) => {
   const typographyVariantHeight = variants[variant].lineHeight;
@@ -10869,6 +10815,7 @@ var EnhancedCardTitle = ({
         maxWidth: "100%",
         alignSelf: "stretch",
         minWidth: 0,
+        padding: padding2,
         ...forceHeight ? {
           height: size === "S" ? typographyVariantHeight : `calc(${typographyVariantHeight} * 2)`
         } : {}
@@ -12061,7 +12008,7 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
   value
 }) => ({
   text: `${seriesName}: ${value}`
-})) {
+}), getTooltip) {
   const tooltipReact = React31.useMemo(() => {
     const domElement = document.createElement("div");
     return { root: createRoot(domElement), domElement };
@@ -12074,7 +12021,7 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
     };
     params.sort((a, b) => getOrder(a) - getOrder(b));
     const tooltip = /* @__PURE__ */ jsxs26(Fragment9, { children: [
-      /* @__PURE__ */ jsx65(Typography_default, { variant: "tooltip", children: params[0].name }),
+      !getTooltip && /* @__PURE__ */ jsx65(Typography_default, { variant: "tooltip", children: params[0].name }),
       params.map((p) => {
         const entry = chartTooltipEntryFormatter({
           seriesIndex: p.seriesIndex,
@@ -12083,6 +12030,9 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
           data: p.data
         });
         const incrementType = entry.incrementLabelType ?? "neutral";
+        if (getTooltip) {
+          return /* @__PURE__ */ jsx65(React31.Fragment, { children: getTooltip(p) }, p.seriesIndex);
+        }
         return /* @__PURE__ */ jsxs26(React31.Fragment, { children: [
           /* @__PURE__ */ jsx65("br", {}),
           /* @__PURE__ */ jsx65(
@@ -12121,29 +12071,19 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
 import { alpha as alpha2 } from "@mui/material";
 
 // src/components/chart/ChartUtils.tsx
-import { renderToString } from "react-dom/server";
-import { jsx as jsx66 } from "react/jsx-runtime";
-var getIconDataUri = (iconId, iconType = "neutral") => {
-  const renderedIcon = renderToString(
-    /* @__PURE__ */ jsx66(
-      Icon_default,
-      {
-        id: iconId,
-        sx: {
-          color: incrementLabelStyles[iconType].color
-        }
-      }
-    )
-  );
-  const text = `data:image/svg+xml;base64,${btoa(
-    renderedIcon.replace(
-      "<svg ",
-      `<svg xmlns="http://www.w3.org/2000/svg" fill="${incrementLabelStyles[iconType].color}"
-            width="${incrementLabelStyles[iconType].size}" height="${incrementLabelStyles[iconType].size}" `
-    )
-  )}`;
-  return text;
-};
+var getIconDataUri = (iconId, iconType = "neutral") => `data:image/svg+xml;base64,${btoa(
+  `<svg xmlns="http://www.w3.org/2000/svg"
+fill="${incrementLabelStyles[iconType].color}"
+width="${incrementLabelStyles[iconType].size}"
+height="${incrementLabelStyles[iconType].size}"
+viewBox="0 0 24 24"
+role="presentation"
+class="MuiSvgIcon-root"
+data-icon-id="${iconId}"
+style="width: 24px; height: 24px;">
+    <path d="${getIconPath(iconId)}" style="fill: currentcolor;"></path>
+</svg>`
+)}`;
 var tooltipOptions = {
   trigger: "axis",
   borderRadius: 8,
@@ -12164,7 +12104,7 @@ var tooltipOptions = {
 
 // src/components/chart/BarChart.tsx
 import AutoSizer from "react-virtualized-auto-sizer";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var estimatedYAxisWidth = 50;
 var barMinHeight = 1;
 var BarChart2 = ({
@@ -12414,7 +12354,7 @@ var BarChart2 = ({
       ]
     )
   });
-  return isLoading ? /* @__PURE__ */ jsx67(
+  return isLoading ? /* @__PURE__ */ jsx66(
     "div",
     {
       style: {
@@ -12422,9 +12362,9 @@ var BarChart2 = ({
         width: "100%",
         ...style3
       },
-      children: /* @__PURE__ */ jsx67(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" })
+      children: /* @__PURE__ */ jsx66(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" })
     }
-  ) : /* @__PURE__ */ jsx67(AutoSizer, { style: { height: "100%", width: "100%" }, children: ({ width: width2 }) => /* @__PURE__ */ jsx67(
+  ) : /* @__PURE__ */ jsx66(AutoSizer, { style: { height: "100%", width: "100%" }, children: ({ width: width2 }) => /* @__PURE__ */ jsx66(
     ReactEChartsCore,
     {
       ref: chartRef,
@@ -12445,7 +12385,7 @@ import { createRoot as createRoot2 } from "react-dom/client";
 import ReactEChartsCore2 from "echarts-for-react/lib/core";
 import * as echarts3 from "echarts/core";
 import { ThemeProvider, useTheme as useTheme4 } from "@mui/material/styles";
-import { jsx as jsx68, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
 var LineChart2 = ({
   style: style3,
   isLoading,
@@ -12482,7 +12422,7 @@ var LineChart2 = ({
     if (isComparing) {
       const incrementType = data.tooltipIncrementType ?? "neutral";
       const incrementLabelIconId = data.tooltipIncrementType && incrementLabelStyles[data.tooltipIncrementType].icon;
-      incrementLabel = data.tooltipIncrementLabel && /* @__PURE__ */ jsx68(
+      incrementLabel = data.tooltipIncrementLabel && /* @__PURE__ */ jsx67(
         IncrementLabel_default,
         {
           color: incrementLabelStyles[incrementType].color,
@@ -12505,7 +12445,7 @@ var LineChart2 = ({
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx67(
               Icon_default,
               {
                 id: serie.tooltipIconId ?? "minus",
@@ -12517,7 +12457,7 @@ var LineChart2 = ({
             ),
             serie.name,
             " ",
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx67(
               Typography_default,
               {
                 variant: "body2-semibold-monospace",
@@ -12540,7 +12480,7 @@ var LineChart2 = ({
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx67(
               Icon_default,
               {
                 id: "dots-horizontal",
@@ -12552,10 +12492,10 @@ var LineChart2 = ({
             ),
             serie.comparisonName,
             " ",
-            /* @__PURE__ */ jsx68(Typography_default, { variant: "body2-semibold", color: grey800, children: data.tooltipComparisonValue })
+            /* @__PURE__ */ jsx67(Typography_default, { variant: "body2-semibold", color: grey800, children: data.tooltipComparisonValue })
           ]
         }
-      ) : /* @__PURE__ */ jsx68("span", {})
+      ) : /* @__PURE__ */ jsx67("span", {})
     ] }, serie.name);
   };
   const tooltipReact = React32.useMemo(() => {
@@ -12570,7 +12510,7 @@ var LineChart2 = ({
     }
     const categoryLabel = tooltipCategoryLabel ?? axisValueLabel;
     const hasGroup = groups.some((group) => group !== "");
-    const tooltip = /* @__PURE__ */ jsx68(ThemeProvider, { theme: theme2, children: /* @__PURE__ */ jsx68(
+    const tooltip = /* @__PURE__ */ jsx67(ThemeProvider, { theme: theme2, children: /* @__PURE__ */ jsx67(
       Box_default2,
       {
         sx: {
@@ -12580,7 +12520,7 @@ var LineChart2 = ({
           gap: "0 16px"
         },
         children: groups.map((group, index) => /* @__PURE__ */ jsxs27(React32.Fragment, { children: [
-          index > 0 && /* @__PURE__ */ jsx68(
+          index > 0 && /* @__PURE__ */ jsx67(
             Divider_default,
             {
               sx: {
@@ -12590,7 +12530,7 @@ var LineChart2 = ({
               }
             }
           ),
-          group !== "" && /* @__PURE__ */ jsx68(
+          group !== "" && /* @__PURE__ */ jsx67(
             Typography_default,
             {
               variant: "body2-semibold",
@@ -12599,7 +12539,7 @@ var LineChart2 = ({
               children: group
             }
           ),
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx67(
             Typography_default,
             {
               variant: "caption",
@@ -12782,7 +12722,7 @@ var LineChart2 = ({
       ) : []
     ]
   };
-  return isLoading ? /* @__PURE__ */ jsx68(
+  return isLoading ? /* @__PURE__ */ jsx67(
     "div",
     {
       style: {
@@ -12790,7 +12730,7 @@ var LineChart2 = ({
         width: "100%",
         ...style3
       },
-      children: /* @__PURE__ */ jsx68(
+      children: /* @__PURE__ */ jsx67(
         Skeleton_default,
         {
           variant: "rectangular",
@@ -12808,7 +12748,7 @@ var LineChart2 = ({
       flexDirection: "row",
       margin: "0 16px",
       children: [
-        !disableSeriesNames && series[1]?.name && series[1]?.name !== series[0]?.name && /* @__PURE__ */ jsx68(
+        !disableSeriesNames && series[1]?.name && series[1]?.name !== series[0]?.name && /* @__PURE__ */ jsx67(
           Stack_default,
           {
             sx: {
@@ -12817,7 +12757,7 @@ var LineChart2 = ({
               gridTemplateColumns: "auto 1fr",
               margin: "auto"
             },
-            children: /* @__PURE__ */ jsx68(
+            children: /* @__PURE__ */ jsx67(
               Typography_default,
               {
                 sx: {
@@ -12833,13 +12773,13 @@ var LineChart2 = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx68(
+        /* @__PURE__ */ jsx67(
           Stack_default,
           {
             sx: {
               width: series.length > 1 ? `calc(100% - 20px)` : "100%"
             },
-            children: /* @__PURE__ */ jsx68(
+            children: /* @__PURE__ */ jsx67(
               ReactEChartsCore2,
               {
                 ref: chartRef,
@@ -12854,7 +12794,7 @@ var LineChart2 = ({
             )
           }
         ),
-        !disableSeriesNames && series[0]?.name && /* @__PURE__ */ jsx68(
+        !disableSeriesNames && series[0]?.name && /* @__PURE__ */ jsx67(
           Stack_default,
           {
             sx: {
@@ -12863,7 +12803,7 @@ var LineChart2 = ({
               gridTemplateColumns: "auto 1fr",
               margin: "auto"
             },
-            children: /* @__PURE__ */ jsx68(
+            children: /* @__PURE__ */ jsx67(
               Typography_default,
               {
                 sx: {
@@ -12889,15 +12829,15 @@ import { alpha as alpha3 } from "@mui/material";
 
 // src/components/chart/RankingChartTooltip.tsx
 import * as React33 from "react";
-import { jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs28 } from "react/jsx-runtime";
 var RankingChartTooltip = ({
   label,
   metrics = [],
   incrementLabelType,
   incrementLabelValue
 }) => /* @__PURE__ */ jsxs28(Box_default2, { children: [
-  /* @__PURE__ */ jsx69(Typography_default, { variant: "body2", component: "div", children: label }),
-  /* @__PURE__ */ jsx69(
+  /* @__PURE__ */ jsx68(Typography_default, { variant: "body2", component: "div", children: label }),
+  /* @__PURE__ */ jsx68(
     Box_default2,
     {
       sx: {
@@ -12907,10 +12847,10 @@ var RankingChartTooltip = ({
         alignItems: "center"
       },
       children: metrics.map(({ color: color2, label: label2, value }, i) => /* @__PURE__ */ jsxs28(React33.Fragment, { children: [
-        /* @__PURE__ */ jsx69(Icon_default, { id: "dot", size: "XS", sx: { color: color2 } }),
-        /* @__PURE__ */ jsx69(Typography_default, { variant: "body2", children: label2 }),
+        /* @__PURE__ */ jsx68(Icon_default, { id: "dot", size: "XS", sx: { color: color2 } }),
+        /* @__PURE__ */ jsx68(Typography_default, { variant: "body2", children: label2 }),
         /* @__PURE__ */ jsxs28("div", { style: { display: "flex", flexDirection: "row" }, children: [
-          /* @__PURE__ */ jsx69(
+          /* @__PURE__ */ jsx68(
             Typography_default,
             {
               variant: "body2",
@@ -12921,7 +12861,7 @@ var RankingChartTooltip = ({
               children: value
             }
           ),
-          incrementLabelType && incrementLabelValue && i === 0 ? /* @__PURE__ */ jsx69(
+          incrementLabelType && incrementLabelValue && i === 0 ? /* @__PURE__ */ jsx68(
             IncrementLabel_default,
             {
               color: incrementLabelStyles[incrementLabelType ?? "neutral"].color,
@@ -12940,7 +12880,7 @@ var RankingChartTooltip = ({
 var RankingChartTooltip_default = RankingChartTooltip;
 
 // src/components/chart/RankingChartItem.tsx
-import { jsx as jsx70, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
 var RankingChartItem = ({
   label,
   value,
@@ -12948,7 +12888,7 @@ var RankingChartItem = ({
   incrementLabelType,
   metrics = []
 }) => {
-  const tooltipContent = /* @__PURE__ */ jsx70(
+  const tooltipContent = /* @__PURE__ */ jsx69(
     RankingChartTooltip_default,
     {
       label,
@@ -12973,7 +12913,7 @@ var RankingChartItem = ({
             variant: "caption",
             sx: { display: "flex", justifyContent: "space-between" },
             children: [
-              /* @__PURE__ */ jsx70(
+              /* @__PURE__ */ jsx69(
                 "div",
                 {
                   style: {
@@ -12986,8 +12926,8 @@ var RankingChartItem = ({
                 }
               ),
               /* @__PURE__ */ jsxs29("div", { style: { display: "flex", justifyContent: "right" }, children: [
-                /* @__PURE__ */ jsx70("div", { style: { margin: "0px 8px 0px" }, children: value }),
-                incrementLabelValue && /* @__PURE__ */ jsx70(
+                /* @__PURE__ */ jsx69("div", { style: { margin: "0px 8px 0px" }, children: value }),
+                incrementLabelValue && /* @__PURE__ */ jsx69(
                   IncrementLabel_default,
                   {
                     color: incrementLabelType ? incrementLabelStyles[incrementLabelType].color : "inherit",
@@ -13001,7 +12941,7 @@ var RankingChartItem = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx70(
+        /* @__PURE__ */ jsx69(
           "div",
           {
             style: {
@@ -13012,7 +12952,7 @@ var RankingChartItem = ({
               backgroundColor: alpha3(grey200, 0.5),
               borderRadius: "0 8px 8px 0"
             },
-            children: metrics.slice().reverse().sort(({ percentage: p1 }, { percentage: p2 }) => p2 - p1).map(({ color: color2, percentage }, i) => /* @__PURE__ */ jsx70(
+            children: metrics.slice().reverse().sort(({ percentage: p1 }, { percentage: p2 }) => p2 - p1).map(({ color: color2, percentage }, i) => /* @__PURE__ */ jsx69(
               "div",
               {
                 style: {
@@ -13032,13 +12972,13 @@ var RankingChartItem = ({
       ]
     }
   );
-  return /* @__PURE__ */ jsx70(Tooltip_default, { variant: "white", title: tooltipContent, children: content });
+  return /* @__PURE__ */ jsx69(Tooltip_default, { variant: "white", title: tooltipContent, children: content });
 };
 var RankingChartItem_default = RankingChartItem;
 
 // src/components/chart/RankingChart.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-var RankingChart = ({ style: style3, series, isLoading }) => isLoading ? /* @__PURE__ */ jsx71(
+import { jsx as jsx70 } from "react/jsx-runtime";
+var RankingChart = ({ style: style3, series, isLoading }) => isLoading ? /* @__PURE__ */ jsx70(
   "div",
   {
     style: {
@@ -13046,9 +12986,9 @@ var RankingChart = ({ style: style3, series, isLoading }) => isLoading ? /* @__P
       width: "100%",
       ...style3
     },
-    children: /* @__PURE__ */ jsx71(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" })
+    children: /* @__PURE__ */ jsx70(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" })
   }
-) : /* @__PURE__ */ jsx71(
+) : /* @__PURE__ */ jsx70(
   "div",
   {
     style: {
@@ -13059,7 +12999,7 @@ var RankingChart = ({ style: style3, series, isLoading }) => isLoading ? /* @__P
       height: "100%",
       ...style3
     },
-    children: series.map((serie, serieIndex) => /* @__PURE__ */ jsx71(
+    children: series.map((serie, serieIndex) => /* @__PURE__ */ jsx70(
       "div",
       {
         style: {
@@ -13067,7 +13007,7 @@ var RankingChart = ({ style: style3, series, isLoading }) => isLoading ? /* @__P
           flexDirection: "column",
           height: "100%"
         },
-        children: serie.items.map((item, itemIndex) => /* @__PURE__ */ jsx71(RankingChartItem_default, { ...item }, itemIndex))
+        children: serie.items.map((item, itemIndex) => /* @__PURE__ */ jsx70(RankingChartItem_default, { ...item }, itemIndex))
       },
       serieIndex
     ))
@@ -13080,13 +13020,13 @@ import ReactEChartsCore3 from "echarts-for-react/lib/core";
 import * as echarts4 from "echarts/core";
 
 // src/components/chart/DonutChartLegendItem.tsx
-import { jsx as jsx72, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
 var DonutChartLegendItem = ({
   label,
   variant,
   colors = []
 }) => /* @__PURE__ */ jsxs30(Box_default2, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-  /* @__PURE__ */ jsx72(StackedIcons_default, { children: colors.map((color2) => /* @__PURE__ */ jsx72(
+  /* @__PURE__ */ jsx71(StackedIcons_default, { children: colors.map((color2) => /* @__PURE__ */ jsx71(
     Icon_default,
     {
       size: variant === "caption" ? "S" : "M",
@@ -13095,18 +13035,21 @@ var DonutChartLegendItem = ({
     },
     color2
   )) }),
-  /* @__PURE__ */ jsx72(Typography_default, { variant, children: label })
+  /* @__PURE__ */ jsx71(Typography_default, { variant, children: label })
 ] });
 var DonutChartLegendItem_default = DonutChartLegendItem;
 
 // src/components/chart/DonutChart.tsx
 import { alpha as alpha4 } from "@mui/material/styles";
-import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx72, jsxs as jsxs31 } from "react/jsx-runtime";
 var DonutChart = ({
   style: style3,
   isLoading,
   series = [],
+  startAngle,
+  innerWidth,
   tooltipEntryFormatter,
+  getTooltip,
   onClick
 }) => {
   const mainMetricWidth = 20;
@@ -13122,7 +13065,7 @@ var DonutChart = ({
     tooltip: {
       ...tooltipOptions,
       trigger: "item",
-      formatter: useTooltipFormatter(tooltipEntryFormatter)
+      formatter: useTooltipFormatter(tooltipEntryFormatter, getTooltip)
     },
     grid: {
       left: 0,
@@ -13148,8 +13091,9 @@ var DonutChart = ({
           emptyCircleStyle: {
             color: alpha4(grey200, 0.5)
           },
+          ...startAngle && { startAngle },
           radius: [
-            `${currentRadius - mainMetricWidth}%`,
+            `${currentRadius - (innerWidth ?? mainMetricWidth)}%`,
             `${currentRadius}%`
           ],
           name,
@@ -13160,17 +13104,17 @@ var DonutChart = ({
           label: {
             show: false
           },
-          data: isAllZero ? [] : data.map(({ value, label, color: color2 }) => ({
+          data: isAllZero ? [] : data.map(({ value, label, color: color2, opacity }) => ({
             value,
             name: label,
             incrementLabelValue,
             incrementLabelType,
             itemStyle: {
-              color: color2
+              color: opacity === void 0 ? color2 : alpha4(color2, opacity)
             }
           }))
         });
-        currentRadius -= mainMetricWidth;
+        currentRadius -= innerWidth ?? mainMetricWidth;
         if (isComparison) {
           currentRadius -= comparisonMetricMargin;
           previous.push({
@@ -13195,12 +13139,13 @@ var DonutChart = ({
               ({
                 comparisonValue,
                 comparisonLabel,
-                color: color2
+                color: color2,
+                opacity
               }) => ({
                 value: comparisonValue,
                 name: comparisonLabel,
                 itemStyle: {
-                  color: color2
+                  color: opacity === void 0 ? color2 : alpha4(color2, opacity)
                 }
               })
             )
@@ -13218,7 +13163,7 @@ var DonutChart = ({
     if (isComparison) {
       const incrementType = series[0].incrementLabelType ?? "neutral";
       const incrementLabelIconId = series[0].incrementLabelType && incrementLabelStyles[series[0].incrementLabelType].icon;
-      boxContent = series[0].incrementLabelValue && /* @__PURE__ */ jsx73(
+      boxContent = series[0].incrementLabelValue && /* @__PURE__ */ jsx72(
         IncrementLabel_default,
         {
           color: incrementLabelStyles[incrementType].color,
@@ -13245,13 +13190,13 @@ var DonutChart = ({
           justifyContent: "center"
         },
         children: [
-          /* @__PURE__ */ jsx73(Typography_default, { variant: "h4", children: series[0].value }),
+          /* @__PURE__ */ jsx72(Typography_default, { variant: "h4", children: series[0].value }),
           boxContent
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx72(
     "div",
     {
       style: {
@@ -13261,10 +13206,10 @@ var DonutChart = ({
         flexDirection: "column",
         ...style3
       },
-      children: isLoading ? /* @__PURE__ */ jsx73(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" }) : /* @__PURE__ */ jsxs31(Fragment12, { children: [
+      children: isLoading ? /* @__PURE__ */ jsx72(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" }) : /* @__PURE__ */ jsxs31(Fragment12, { children: [
         /* @__PURE__ */ jsxs31(Box_default2, { sx: { flexGrow: 1, position: "relative" }, children: [
           title,
-          /* @__PURE__ */ jsx73(
+          /* @__PURE__ */ jsx72(
             ReactEChartsCore3,
             {
               style: { width: "100%", height: "100%" },
@@ -13276,7 +13221,7 @@ var DonutChart = ({
             }
           )
         ] }),
-        series.length > 1 && /* @__PURE__ */ jsx73(
+        series.length > 1 && /* @__PURE__ */ jsx72(
           Box_default2,
           {
             sx: {
@@ -13285,7 +13230,7 @@ var DonutChart = ({
               gap: "8px",
               padding: "8px 0"
             },
-            children: series.map((s, i) => /* @__PURE__ */ jsx73(
+            children: series.map((s, i) => /* @__PURE__ */ jsx72(
               DonutChartLegendItem_default,
               {
                 variant: "body2",
@@ -13296,7 +13241,7 @@ var DonutChart = ({
             ))
           }
         ),
-        series.length > 1 && isComparison && /* @__PURE__ */ jsx73(
+        series.length > 1 && isComparison && /* @__PURE__ */ jsx72(
           Box_default2,
           {
             sx: {
@@ -13305,7 +13250,7 @@ var DonutChart = ({
               gap: "8px",
               padding: "0 0 16px 0"
             },
-            children: series.map((s, i) => /* @__PURE__ */ jsx73(
+            children: series.map((s, i) => /* @__PURE__ */ jsx72(
               DonutChartLegendItem_default,
               {
                 variant: "caption",
@@ -13327,7 +13272,7 @@ import ReactEChartsCore4 from "echarts-for-react/lib/core";
 import * as echarts5 from "echarts/core";
 import { alpha as alpha5 } from "@mui/material";
 import AutoSizer2 from "react-virtualized-auto-sizer";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var estimatedYAxisWidth2 = 50;
 var barMinHeight2 = 1;
 var FunnelChart = ({
@@ -13616,7 +13561,7 @@ var FunnelChart = ({
       ] : []
     ]
   });
-  return isLoading ? /* @__PURE__ */ jsx74(
+  return isLoading ? /* @__PURE__ */ jsx73(
     "div",
     {
       style: {
@@ -13624,9 +13569,9 @@ var FunnelChart = ({
         width: "100%",
         ...style3
       },
-      children: /* @__PURE__ */ jsx74(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" })
+      children: /* @__PURE__ */ jsx73(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" })
     }
-  ) : /* @__PURE__ */ jsx74(AutoSizer2, { style: { height: "100%", width: "100%" }, children: ({ width: width2 }) => /* @__PURE__ */ jsx74(
+  ) : /* @__PURE__ */ jsx73(AutoSizer2, { style: { height: "100%", width: "100%" }, children: ({ width: width2 }) => /* @__PURE__ */ jsx73(
     ReactEChartsCore4,
     {
       style: style3,
@@ -13645,10 +13590,10 @@ import { alpha as alpha6 } from "@mui/material";
 
 // src/components/chart/WeekChartTooltip.tsx
 import * as React34 from "react";
-import { jsx as jsx75, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs32 } from "react/jsx-runtime";
 var WeekChartTooltip = ({ label, metrics }) => /* @__PURE__ */ jsxs32(Box_default2, { children: [
-  /* @__PURE__ */ jsx75(Typography_default, { variant: "body2", component: "div", children: label }),
-  /* @__PURE__ */ jsx75(
+  /* @__PURE__ */ jsx74(Typography_default, { variant: "body2", component: "div", children: label }),
+  /* @__PURE__ */ jsx74(
     Box_default2,
     {
       sx: {
@@ -13669,10 +13614,10 @@ var WeekChartTooltip = ({ label, metrics }) => /* @__PURE__ */ jsxs32(Box_defaul
           incrementLabelValue
         }, i) => [
           /* @__PURE__ */ jsxs32(React34.Fragment, { children: [
-            /* @__PURE__ */ jsx75(Icon_default, { id: "dot", size: "S", sx: { color: color2 } }),
-            /* @__PURE__ */ jsx75(Typography_default, { variant: "body2", children: label2 }),
+            /* @__PURE__ */ jsx74(Icon_default, { id: "dot", size: "S", sx: { color: color2 } }),
+            /* @__PURE__ */ jsx74(Typography_default, { variant: "body2", children: label2 }),
             /* @__PURE__ */ jsxs32("div", { style: { display: "flex", flexDirection: "row" }, children: [
-              /* @__PURE__ */ jsx75(
+              /* @__PURE__ */ jsx74(
                 Typography_default,
                 {
                   variant: "body2",
@@ -13683,7 +13628,7 @@ var WeekChartTooltip = ({ label, metrics }) => /* @__PURE__ */ jsxs32(Box_defaul
                   children: value
                 }
               ),
-              incrementLabelType && incrementLabelValue ? /* @__PURE__ */ jsx75(
+              incrementLabelType && incrementLabelValue ? /* @__PURE__ */ jsx74(
                 IncrementLabel_default,
                 {
                   color: incrementLabelStyles[incrementLabelType ?? "neutral"].color,
@@ -13698,7 +13643,7 @@ var WeekChartTooltip = ({ label, metrics }) => /* @__PURE__ */ jsxs32(Box_defaul
           ] }, i),
           ...comparisonLabel ? [
             /* @__PURE__ */ jsxs32(React34.Fragment, { children: [
-              /* @__PURE__ */ jsx75(
+              /* @__PURE__ */ jsx74(
                 Icon_default,
                 {
                   id: "dot",
@@ -13706,8 +13651,8 @@ var WeekChartTooltip = ({ label, metrics }) => /* @__PURE__ */ jsxs32(Box_defaul
                   sx: { color: comparisonColor }
                 }
               ),
-              /* @__PURE__ */ jsx75(Typography_default, { variant: "body2", children: comparisonLabel }),
-              /* @__PURE__ */ jsx75(
+              /* @__PURE__ */ jsx74(Typography_default, { variant: "body2", children: comparisonLabel }),
+              /* @__PURE__ */ jsx74(
                 Typography_default,
                 {
                   variant: "body2",
@@ -13726,9 +13671,9 @@ var WeekChartTooltip = ({ label, metrics }) => /* @__PURE__ */ jsxs32(Box_defaul
 var WeekChartTooltip_default = WeekChartTooltip;
 
 // src/components/chart/WeekChartItem.tsx
-import { jsx as jsx76, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs33 } from "react/jsx-runtime";
 var WeekChartItem = ({ label, metrics = [] }) => {
-  const tooltipContent = /* @__PURE__ */ jsx76(WeekChartTooltip_default, { label, metrics });
+  const tooltipContent = /* @__PURE__ */ jsx75(WeekChartTooltip_default, { label, metrics });
   const content = /* @__PURE__ */ jsxs33(
     Typography_default,
     {
@@ -13742,7 +13687,7 @@ var WeekChartItem = ({ label, metrics = [] }) => {
       },
       color: grey400,
       children: [
-        /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx75(
           "div",
           {
             style: {
@@ -13753,7 +13698,7 @@ var WeekChartItem = ({ label, metrics = [] }) => {
             children: label
           }
         ),
-        /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx75(
           "div",
           {
             style: {
@@ -13772,7 +13717,7 @@ var WeekChartItem = ({ label, metrics = [] }) => {
                 comparisonColor,
                 comparisonPercentage
               }, i) => {
-                const mainDiv = /* @__PURE__ */ jsx76(
+                const mainDiv = /* @__PURE__ */ jsx75(
                   "div",
                   {
                     style: {
@@ -13790,7 +13735,7 @@ var WeekChartItem = ({ label, metrics = [] }) => {
                 let isComparisonInBack = false;
                 let comparisonDiv = null;
                 if (Number.isFinite(comparisonPercentage)) {
-                  comparisonDiv = /* @__PURE__ */ jsx76(
+                  comparisonDiv = /* @__PURE__ */ jsx75(
                     "div",
                     {
                       style: {
@@ -13807,7 +13752,7 @@ var WeekChartItem = ({ label, metrics = [] }) => {
                   );
                   isComparisonInBack = comparisonPercentage > percentage;
                 }
-                return /* @__PURE__ */ jsx76(
+                return /* @__PURE__ */ jsx75(
                   "div",
                   {
                     style: { height: "100%", position: "relative" },
@@ -13822,13 +13767,13 @@ var WeekChartItem = ({ label, metrics = [] }) => {
       ]
     }
   );
-  return /* @__PURE__ */ jsx76(Tooltip_default, { variant: "white", title: tooltipContent, children: content });
+  return /* @__PURE__ */ jsx75(Tooltip_default, { variant: "white", title: tooltipContent, children: content });
 };
 var WeekChartItem_default = WeekChartItem;
 
 // src/components/chart/WeekChart.tsx
-import { jsx as jsx77, jsxs as jsxs34 } from "react/jsx-runtime";
-var WeekChart = ({ style: style3, days, isLoading }) => /* @__PURE__ */ jsx77(
+import { jsx as jsx76, jsxs as jsxs34 } from "react/jsx-runtime";
+var WeekChart = ({ style: style3, days, isLoading }) => /* @__PURE__ */ jsx76(
   "div",
   {
     style: {
@@ -13838,7 +13783,7 @@ var WeekChart = ({ style: style3, days, isLoading }) => /* @__PURE__ */ jsx77(
       height: "100%",
       ...style3
     },
-    children: isLoading ? /* @__PURE__ */ jsx77(
+    children: isLoading ? /* @__PURE__ */ jsx76(
       Skeleton_default,
       {
         variant: "rectangular",
@@ -13855,8 +13800,8 @@ var WeekChart = ({ style: style3, days, isLoading }) => /* @__PURE__ */ jsx77(
           gap: "2px"
         },
         children: [
-          /* @__PURE__ */ jsx77(Typography_default, { variant: "caption", children: day.label }),
-          day.hours.map((hour) => /* @__PURE__ */ jsx77(
+          /* @__PURE__ */ jsx76(Typography_default, { variant: "caption", children: day.label }),
+          day.hours.map((hour) => /* @__PURE__ */ jsx76(
             WeekChartItem_default,
             {
               label: hour.label,
@@ -13873,11 +13818,11 @@ var WeekChart = ({ style: style3, days, isLoading }) => /* @__PURE__ */ jsx77(
 var WeekChart_default = WeekChart;
 
 // src/components/chart/MicroPieChart.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var MicroPieChart = ({
   color: color2 = primaryMain,
   percentage
-}) => /* @__PURE__ */ jsx78(
+}) => /* @__PURE__ */ jsx77(
   Box_default2,
   {
     sx: {
@@ -13902,7 +13847,7 @@ var MicroPieChart_default = MicroPieChart;
 
 // src/components/chat/ChatMessage.tsx
 import * as React35 from "react";
-import { jsx as jsx79, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs35 } from "react/jsx-runtime";
 var outgoingChatMessageAnimation = keyframes`
   0% { transform: translateY(50px); }
   25% { transform: translateY(0px); }
@@ -13941,7 +13886,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
             },
             children: [
               messageType === "outgoing" && adornment,
-              /* @__PURE__ */ jsx79(
+              /* @__PURE__ */ jsx78(
                 Box_default2,
                 {
                   sx: {
@@ -13981,7 +13926,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                         wordBreak: "break-word"
                       },
                       children: [
-                        /* @__PURE__ */ jsx79(
+                        /* @__PURE__ */ jsx78(
                           Typography_default,
                           {
                             color: !typographyColor ? messageType === "incoming" ? grey900 : white : typographyColor,
@@ -13990,7 +13935,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                             children
                           }
                         ),
-                        optionsBar && /* @__PURE__ */ jsx79(
+                        optionsBar && /* @__PURE__ */ jsx78(
                           Box_default2,
                           {
                             sx: {
@@ -14003,7 +13948,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                             children: optionsBar
                           }
                         ),
-                        !!cancelableButtonText && /* @__PURE__ */ jsx79(Tooltip_default, { title: cancelableButtonText, children: /* @__PURE__ */ jsx79(
+                        !!cancelableButtonText && /* @__PURE__ */ jsx78(Tooltip_default, { title: cancelableButtonText, children: /* @__PURE__ */ jsx78(
                           Box_default2,
                           {
                             sx: {
@@ -14011,7 +13956,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                               left: "4px",
                               bottom: "4px"
                             },
-                            children: /* @__PURE__ */ jsx79(
+                            children: /* @__PURE__ */ jsx78(
                               IconButton_default,
                               {
                                 iconId: "stop",
@@ -14049,7 +13994,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
               bottom: 0
             },
             children: [
-              /* @__PURE__ */ jsx79(
+              /* @__PURE__ */ jsx78(
                 Icon_default,
                 {
                   id: "information-outline",
@@ -14057,7 +14002,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                   sx: { marginRight: "5px" }
                 }
               ),
-              /* @__PURE__ */ jsx79(Typography_default, { variant: "caption", color: grey500, children: errorText })
+              /* @__PURE__ */ jsx78(Typography_default, { variant: "caption", color: grey500, children: errorText })
             ]
           }
         )
@@ -14070,7 +14015,7 @@ var ChatMessage_default = ChatMessage;
 // src/components/chat/Chat.tsx
 import Stack5 from "@mui/material/Stack";
 import * as React36 from "react";
-import { jsx as jsx80, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs36 } from "react/jsx-runtime";
 var PADDING_BOTTOM = 8;
 var Chat = ({
   children,
@@ -14191,7 +14136,7 @@ var Chat = ({
       spacing: "12px",
       children: [
         header,
-        /* @__PURE__ */ jsx80(
+        /* @__PURE__ */ jsx79(
           Stack5,
           {
             ref: innerRef,
@@ -15692,7 +15637,7 @@ var useTranslation = () => {
 import {
   Dialog as MuiDialog
 } from "@mui/material";
-import { Fragment as Fragment14, jsx as jsx81, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx80, jsxs as jsxs37 } from "react/jsx-runtime";
 var sizes5 = {
   S: "480px",
   M: "640px",
@@ -15724,8 +15669,8 @@ var Dialog = ({
           ...noPadding && !noPaddingTitle && { margin: "16px 24px 0 24px" }
         },
         children: [
-          typeof title === "string" ? /* @__PURE__ */ jsx81(Typography_default, { variant: "h5", children: title }) : title,
-          closeable && /* @__PURE__ */ jsx81(
+          typeof title === "string" ? /* @__PURE__ */ jsx80(Typography_default, { variant: "h5", children: title }) : title,
+          closeable && /* @__PURE__ */ jsx80(
             IconButton_default,
             {
               iconId: "close",
@@ -15736,10 +15681,10 @@ var Dialog = ({
         ]
       }
     ),
-    wrapChildren && /* @__PURE__ */ jsx81(Box_default2, { className: "Slim-Vertical-Scroll", children }),
+    wrapChildren && /* @__PURE__ */ jsx80(Box_default2, { className: "Slim-Vertical-Scroll", children }),
     !wrapChildren && children
   ] });
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx80(
     MuiDialog,
     {
       open,
@@ -15758,7 +15703,7 @@ var Dialog = ({
         },
         className: "Cn-Dialog Slim-Vertical-Scroll"
       },
-      children: fullScreen ? /* @__PURE__ */ jsx81(
+      children: fullScreen ? /* @__PURE__ */ jsx80(
         Stack_default,
         {
           height: "100%",
@@ -15772,7 +15717,7 @@ var Dialog = ({
 var Dialog_default = Dialog;
 
 // src/components/dialog/ConfirmationDialog.tsx
-import { jsx as jsx82, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs38 } from "react/jsx-runtime";
 var ConfirmationDialog = ({
   onCancel = () => ({}),
   onAccept = () => ({}),
@@ -15818,7 +15763,7 @@ var ConfirmationDialog = ({
     const compare = scrollContainer.current.scrollHeight > scrollContainer.current.clientHeight;
     setHasScrollPopup(compare);
   };
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx81(
     Dialog_default,
     {
       onClose: onCancel,
@@ -15837,7 +15782,7 @@ var ConfirmationDialog = ({
             }
           },
           children: [
-            /* @__PURE__ */ jsx82(
+            /* @__PURE__ */ jsx81(
               Box_default2,
               {
                 flexGrow: 1,
@@ -15860,7 +15805,7 @@ var ConfirmationDialog = ({
                   footerChildren,
                   /* @__PURE__ */ jsxs38(Stack_default, { direction: "row", spacing: 2, justifyContent: "end", children: [
                     buttonsLeftChildren,
-                    !hideCancelButton && /* @__PURE__ */ jsx82(
+                    !hideCancelButton && /* @__PURE__ */ jsx81(
                       Button_default,
                       {
                         color: "white",
@@ -15869,12 +15814,12 @@ var ConfirmationDialog = ({
                         onClick: onCancel
                       }
                     ),
-                    /* @__PURE__ */ jsx82(
+                    /* @__PURE__ */ jsx81(
                       Tooltip_default,
                       {
                         title: acceptButtonDisabled ? acceptButtonDisabledTooltipText || "" : "",
                         allowDisabled: true,
-                        children: /* @__PURE__ */ jsx82(
+                        children: /* @__PURE__ */ jsx81(
                           Button_default,
                           {
                             color: variant,
@@ -15901,10 +15846,10 @@ var ConfirmationDialog_default = ConfirmationDialog;
 
 // src/components/drawer/Drawer.tsx
 import MuiDrawer from "@mui/material/Drawer";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var defaultWidth = 600;
 var defaultAnchor = "right";
-var Drawer = ({ ...props }) => /* @__PURE__ */ jsx83(
+var Drawer = ({ ...props }) => /* @__PURE__ */ jsx82(
   MuiDrawer,
   {
     anchor: defaultAnchor,
@@ -15919,7 +15864,7 @@ var Drawer = ({ ...props }) => /* @__PURE__ */ jsx83(
 var Drawer_default = Drawer;
 
 // src/components/drawer/InputDrawer.tsx
-import { jsx as jsx84, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs39 } from "react/jsx-runtime";
 var InputDrawer = ({
   open,
   close,
@@ -15928,7 +15873,7 @@ var InputDrawer = ({
   children,
   buttons,
   cancelButtonText
-}) => /* @__PURE__ */ jsx84(Drawer_default, { open, onClose, children: /* @__PURE__ */ jsxs39(Stack_default, { sx: { height: "100%" }, children: [
+}) => /* @__PURE__ */ jsx83(Drawer_default, { open, onClose, children: /* @__PURE__ */ jsxs39(Stack_default, { sx: { height: "100%" }, children: [
   /* @__PURE__ */ jsxs39(
     Stack_default,
     {
@@ -15940,12 +15885,12 @@ var InputDrawer = ({
         borderBottom: `1px solid ${Colors_exports.grey200}`
       },
       children: [
-        /* @__PURE__ */ jsx84(Typography_default, { variant: "h6", children: title }),
-        /* @__PURE__ */ jsx84(IconButton_default, { iconId: "close", onClick: () => close() })
+        /* @__PURE__ */ jsx83(Typography_default, { variant: "h6", children: title }),
+        /* @__PURE__ */ jsx83(IconButton_default, { iconId: "close", onClick: () => close() })
       ]
     }
   ),
-  /* @__PURE__ */ jsx84(
+  /* @__PURE__ */ jsx83(
     Box_default2,
     {
       className: "Slim-Vertical-Scroll",
@@ -15968,7 +15913,7 @@ var InputDrawer = ({
         borderTop: `1px solid ${Colors_exports.grey200}`
       },
       children: [
-        /* @__PURE__ */ jsx84(
+        /* @__PURE__ */ jsx83(
           Button_default,
           {
             text: cancelButtonText,
@@ -15977,7 +15922,7 @@ var InputDrawer = ({
             color: "white"
           }
         ),
-        /* @__PURE__ */ jsx84(Stack_default, { direction: "row", spacing: 1, children: buttons })
+        /* @__PURE__ */ jsx83(Stack_default, { direction: "row", spacing: 1, children: buttons })
       ]
     }
   )
@@ -17687,23 +17632,23 @@ function isValidPhoneNumber(phone) {
 }
 
 // src/components/formatter/CompactNumberFormatter.tsx
-import { Fragment as Fragment15, jsx as jsx85 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx84 } from "react/jsx-runtime";
 var CompactNumberFormatter = ({ value }) => {
   const { locale } = React38.useContext(IntlContext);
-  return /* @__PURE__ */ jsx85(Fragment15, { children: formatCompactNumber(value, locale) });
+  return /* @__PURE__ */ jsx84(Fragment15, { children: formatCompactNumber(value, locale) });
 };
 var CompactNumberFormatter_default = CompactNumberFormatter;
 
 // src/components/formatter/CurrencyFormatter.tsx
 import * as React39 from "react";
-import { Fragment as Fragment16, jsx as jsx86 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx85 } from "react/jsx-runtime";
 var CurrencyFormatter = ({
   value,
   notation,
   currency
 }) => {
   const { locale, currency: contextCurrency } = React39.useContext(IntlContext);
-  return /* @__PURE__ */ jsx86(Fragment16, { children: formatCurrency(
+  return /* @__PURE__ */ jsx85(Fragment16, { children: formatCurrency(
     value,
     locale,
     currency ?? contextCurrency,
@@ -17714,45 +17659,45 @@ var CurrencyFormatter_default = CurrencyFormatter;
 
 // src/components/formatter/NumberFormatter.tsx
 import * as React40 from "react";
-import { Fragment as Fragment17, jsx as jsx87 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx86 } from "react/jsx-runtime";
 var NumberFormatter = ({ value, fractionSize }) => {
   const { locale } = React40.useContext(IntlContext);
-  return /* @__PURE__ */ jsx87(Fragment17, { children: formatNumber(value, locale, fractionSize) });
+  return /* @__PURE__ */ jsx86(Fragment17, { children: formatNumber(value, locale, fractionSize) });
 };
 var NumberFormatter_default = NumberFormatter;
 
 // src/components/formatter/PercentageFormatter.tsx
 import * as React41 from "react";
-import { Fragment as Fragment18, jsx as jsx88 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx87 } from "react/jsx-runtime";
 var PercentageFormatter = ({
   value,
   fractionSize
 }) => {
   const { locale } = React41.useContext(IntlContext);
-  return /* @__PURE__ */ jsx88(Fragment18, { children: formatPercentage(value, locale, fractionSize) });
+  return /* @__PURE__ */ jsx87(Fragment18, { children: formatPercentage(value, locale, fractionSize) });
 };
 var PercentageFormatter_default = PercentageFormatter;
 
 // src/components/formatter/DateFormatter.tsx
 import * as React42 from "react";
-import { Fragment as Fragment19, jsx as jsx89 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx88 } from "react/jsx-runtime";
 var DateFormatter = ({ date, format: format2 }) => {
   const { locale, timezone } = React42.useContext(IntlContext);
-  return /* @__PURE__ */ jsx89(Fragment19, { children: formatDate(date, locale, timezone, format2) });
+  return /* @__PURE__ */ jsx88(Fragment19, { children: formatDate(date, locale, timezone, format2) });
 };
 var DateFormatter_default = DateFormatter;
 
 // src/components/header/HeaderTitle.tsx
 import * as React43 from "react";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var HeaderTitle = ({ text }) => {
   const textElementRef = React43.useRef(null);
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx89(
     TextEllipsisTooltip_default,
     {
       title: text ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsx90(
+      children: /* @__PURE__ */ jsx89(
         Typography_default,
         {
           color: grey800,
@@ -17770,15 +17715,15 @@ var HeaderTitle_default = HeaderTitle;
 
 // src/components/header/HeaderSubtitle.tsx
 import * as React44 from "react";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var HeaderSubtitle = ({ text }) => {
   const textElementRef = React44.useRef(null);
-  return typeof text === "string" ? /* @__PURE__ */ jsx91(
+  return typeof text === "string" ? /* @__PURE__ */ jsx90(
     TextEllipsisTooltip_default,
     {
       title: text ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsx91(
+      children: /* @__PURE__ */ jsx90(
         Typography_default,
         {
           color: grey800,
@@ -17790,12 +17735,12 @@ var HeaderSubtitle = ({ text }) => {
         }
       )
     }
-  ) : /* @__PURE__ */ jsx91(Typography_default, { color: grey800, component: "div", variant: "body1", noWrap: true, children: text });
+  ) : /* @__PURE__ */ jsx90(Typography_default, { color: grey800, component: "div", variant: "body1", noWrap: true, children: text });
 };
 var HeaderSubtitle_default = HeaderSubtitle;
 
 // src/components/header/Header.tsx
-import { jsx as jsx92, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs40 } from "react/jsx-runtime";
 var Header = ({
   title,
   subtitle,
@@ -17803,7 +17748,7 @@ var Header = ({
   isElevated = false,
   actions,
   children
-}) => /* @__PURE__ */ jsx92(PageScrollContext.Consumer, { children: (value) => /* @__PURE__ */ jsx92(
+}) => /* @__PURE__ */ jsx91(PageScrollContext.Consumer, { children: (value) => /* @__PURE__ */ jsx91(
   Box_default2,
   {
     sx: {
@@ -17843,12 +17788,12 @@ var Header = ({
                   overflow: "clip"
                 },
                 children: [
-                  iconId && /* @__PURE__ */ jsx92(Avatar_default, { iconId, size: "L" }),
-                  /* @__PURE__ */ jsx92(HeaderTitle_default, { text: title })
+                  iconId && /* @__PURE__ */ jsx91(Avatar_default, { iconId, size: "L" }),
+                  /* @__PURE__ */ jsx91(HeaderTitle_default, { text: title })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx92(
+            /* @__PURE__ */ jsx91(
               Box_default2,
               {
                 sx: {
@@ -17864,7 +17809,7 @@ var Header = ({
           ]
         }
       ),
-      subtitle && /* @__PURE__ */ jsx92(
+      subtitle && /* @__PURE__ */ jsx91(
         Box_default2,
         {
           sx: {
@@ -17872,10 +17817,10 @@ var Header = ({
             ...iconId && { paddingLeft: "56px" },
             paddingBottom: "8px"
           },
-          children: /* @__PURE__ */ jsx92(HeaderSubtitle_default, { text: subtitle })
+          children: /* @__PURE__ */ jsx91(HeaderSubtitle_default, { text: subtitle })
         }
       ),
-      children && /* @__PURE__ */ jsx92(Box_default2, { children })
+      children && /* @__PURE__ */ jsx91(Box_default2, { children })
     ] })
   }
 ) });
@@ -17887,7 +17832,7 @@ import FilerobotImageEditor, {
   TABS,
   TOOLS
 } from "react-filerobot-image-editor";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var ImageEditor = ({
   imageUrl,
   maxWidth: maxWidth2,
@@ -18126,7 +18071,7 @@ var ImageEditor = ({
       document.head.removeChild(style3);
     };
   }, []);
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx92(
     Box_default2,
     {
       sx: {
@@ -18193,7 +18138,7 @@ var ImageEditor = ({
         },
         height: "100%"
       },
-      children: /* @__PURE__ */ jsx93(
+      children: /* @__PURE__ */ jsx92(
         FilerobotImageEditor,
         {
           source: imageUrl,
@@ -18313,7 +18258,7 @@ function useResizeObserver() {
 }
 
 // src/components/info/InfoBox.tsx
-import { jsx as jsx94, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs41 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: {
     borderLeft: `2px solid ${electricLavender}`,
@@ -18342,7 +18287,8 @@ var InfoBox = ({
 }) => {
   const [ref, { height: height2 }] = useResizeObserver();
   const [expanded, setExpanded] = React46.useState(false);
-  const showExpandButton = height2 > collapsedHeight && expanded || height2 === collapsedHeight && !expanded;
+  const showExpandButton = height2 >= collapsedHeight;
+  const maxHeight2 = expanded ? `${height2}px` : `${collapsedHeight}px`;
   return /* @__PURE__ */ jsxs41(
     Stack_default,
     {
@@ -18350,12 +18296,14 @@ var InfoBox = ({
       direction: "row",
       sx: {
         position: "relative",
+        transition: "max-height 0.25s cubic-bezier(0.2, 0.8, 0.4, 1)",
+        maxHeight: maxHeight2,
+        overflow: "hidden",
         ...variantStyles2[variant],
-        ...!expanded ? { maxHeight: `${collapsedHeight}px`, overflow: "hidden" } : {},
-        ...sx
+        ...sx && { sx }
       },
       children: [
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx93(
           Box_default2,
           {
             sx: !expanded && showExpandButton ? {
@@ -18373,7 +18321,7 @@ var InfoBox = ({
             children
           }
         ),
-        showExpandButton && /* @__PURE__ */ jsx94(
+        showExpandButton && /* @__PURE__ */ jsx93(
           IconButton_default,
           {
             iconId: expanded ? "chevron-up" : "chevron-down",
@@ -18392,7 +18340,7 @@ var InfoBox_default = InfoBox;
 // src/components/input/TextFieldContainer.tsx
 import * as React47 from "react";
 import { lighten } from "@mui/material";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var TextFieldContainer = React47.forwardRef(function TextFieldContainer2({
   children,
   variant = "default",
@@ -18407,7 +18355,7 @@ var TextFieldContainer = React47.forwardRef(function TextFieldContainer2({
   sx,
   "data-test": dataTest
 }, ref) {
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx94(
     Box_default2,
     {
       className: `Cn-TextFieldContainer ${className}`,
@@ -18497,7 +18445,7 @@ import { styled as styled6 } from "@mui/material";
 // src/components/input/InputLabel.tsx
 import * as React48 from "react";
 import { styled as styled4 } from "@mui/material";
-import { jsx as jsx96, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs42 } from "react/jsx-runtime";
 var severityColors = {
   info: grey900,
   error: errorMain
@@ -18523,7 +18471,7 @@ var InputLabel = React48.forwardRef(
         ref,
         children: [
           children,
-          infoText && /* @__PURE__ */ jsx96(Tooltip_default, { textVariant: "caption", title: infoText, children: /* @__PURE__ */ jsx96(
+          infoText && /* @__PURE__ */ jsx95(Tooltip_default, { textVariant: "caption", title: infoText, children: /* @__PURE__ */ jsx95(
             Icon_default,
             {
               id: "information-outline",
@@ -18545,7 +18493,7 @@ var InputLabel_default = InputLabel;
 // src/components/input/InputHelperText.tsx
 import { styled as styled5 } from "@mui/material";
 import * as React49 from "react";
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var severityColors2 = {
   info: grey800,
   error: errorMain
@@ -18561,13 +18509,13 @@ var StyledDiv = styled5("div", {
 );
 var InputHelperText = React49.forwardRef(
   function InputLabel3({ severity = "info", ...rest }, ref) {
-    return /* @__PURE__ */ jsx97(StyledDiv, { ...rest, ref, severity });
+    return /* @__PURE__ */ jsx96(StyledDiv, { ...rest, ref, severity });
   }
 );
 var InputHelperText_default = InputHelperText;
 
 // src/components/input/TextField.tsx
-import { Fragment as Fragment20, jsx as jsx98, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx97, jsxs as jsxs43 } from "react/jsx-runtime";
 var commonInputStylesOptions = {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "typographyVariant"
 };
@@ -18708,7 +18656,7 @@ var TextField = React50.forwardRef(function TextField2({
               gap: "8px"
             },
             children: [
-              iconId && /* @__PURE__ */ jsx98(
+              iconId && /* @__PURE__ */ jsx97(
                 Icon_default,
                 {
                   id: iconId,
@@ -18721,7 +18669,7 @@ var TextField = React50.forwardRef(function TextField2({
                 }
               ),
               !groupElements && startAdornment,
-              multiline && /* @__PURE__ */ jsx98(
+              multiline && /* @__PURE__ */ jsx97(
                 StyledTextarea,
                 {
                   ref: ref || inputRef,
@@ -18755,7 +18703,7 @@ var TextField = React50.forwardRef(function TextField2({
                   ...restProps
                 }
               ),
-              !multiline && /* @__PURE__ */ jsx98(
+              !multiline && /* @__PURE__ */ jsx97(
                 StyledInput,
                 {
                   type,
@@ -18793,7 +18741,7 @@ var TextField = React50.forwardRef(function TextField2({
               gap: "8px"
             },
             children: [
-              existsClearButton && /* @__PURE__ */ jsx98(
+              existsClearButton && /* @__PURE__ */ jsx97(
                 IconButton_default,
                 {
                   size: "M",
@@ -18824,7 +18772,7 @@ var TextField = React50.forwardRef(function TextField2({
     }
   );
   return /* @__PURE__ */ jsxs43(Fragment20, { children: [
-    label && /* @__PURE__ */ jsx98(
+    label && /* @__PURE__ */ jsx97(
       InputLabel_default,
       {
         htmlFor: customId ?? id,
@@ -18877,7 +18825,7 @@ var TextField = React50.forwardRef(function TextField2({
       }
     ),
     !groupElements && getTextFieldContainer(),
-    helperText && /* @__PURE__ */ jsx98(
+    helperText && /* @__PURE__ */ jsx97(
       InputHelperText_default,
       {
         severity: isError ? "error" : "info",
@@ -18892,7 +18840,7 @@ var TextField = React50.forwardRef(function TextField2({
 var TextField_default = TextField;
 
 // src/components/input/DebouncedTextField.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var DebouncedTextField = React51.forwardRef(function DebouncedTextField2({ value, onChange, debounce = 100, ...rest }, ref) {
   const [text, setText] = useState15(value);
   const onChangeDebounced = useDebouncedCallback(
@@ -18906,7 +18854,7 @@ var DebouncedTextField = React51.forwardRef(function DebouncedTextField2({ value
   useEffect10(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx98(
     TextField_default,
     {
       value: text,
@@ -18931,14 +18879,14 @@ import { tz as tz3 } from "moment-timezone";
 
 // src/components/popover/Popover.tsx
 import MuiPopover from "@mui/material/Popover";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var Popover = ({
   horizontalAlign = "center",
   anchorHorizontalOrigin = "center",
   verticalAlign = "top",
   anchorVerticalAlign = "bottom",
   ...props
-}) => /* @__PURE__ */ jsx100(
+}) => /* @__PURE__ */ jsx99(
   MuiPopover,
   {
     disableRestoreFocus: props.disableRestoreFocus,
@@ -18958,7 +18906,7 @@ var Popover_default = Popover;
 
 // src/components/popover/PopoverActions.tsx
 import { Stack as Stack6 } from "@mui/material";
-import { jsx as jsx101, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs44 } from "react/jsx-runtime";
 var PopoverActions = ({
   leftContent,
   rightContent,
@@ -18977,8 +18925,8 @@ var PopoverActions = ({
       ...sx
     },
     children: [
-      /* @__PURE__ */ jsx101("div", { children: leftContent }),
-      /* @__PURE__ */ jsx101("div", { children: rightContent })
+      /* @__PURE__ */ jsx100("div", { children: leftContent }),
+      /* @__PURE__ */ jsx100("div", { children: rightContent })
     ]
   }
 );
@@ -18996,7 +18944,7 @@ import { lighten as lighten2 } from "@mui/material";
 
 // src/components/input/CalendarDay.tsx
 import { useTheme as useTheme5 } from "@mui/material/styles";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var calendarDayButtonSize = 32;
 var CalendarDayButton = styled_default("button")({});
 var CalendarDay = ({
@@ -19014,7 +18962,7 @@ var CalendarDay = ({
   allowKeyboardNavigation = false
 }) => {
   const theme2 = useTheme5();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     CalendarDayButton,
     {
       "data-testid": `calendar-day-${children}`,
@@ -19057,7 +19005,7 @@ var CalendarDay = ({
       },
       role: "button",
       onClick,
-      children: /* @__PURE__ */ jsx102(
+      children: /* @__PURE__ */ jsx101(
         Typography_default,
         {
           sx: {
@@ -19085,7 +19033,7 @@ var CalendarDay = ({
 var CalendarDay_default = CalendarDay;
 
 // src/components/input/CalendarMonth.tsx
-import { jsx as jsx103, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs45 } from "react/jsx-runtime";
 var bgColorLightCoefficient = 0.6;
 var CalendarMonth = ({
   minDate = null,
@@ -19263,7 +19211,7 @@ var CalendarMonth = ({
       },
       "data-testid": `calendar-month-${year}-${month}`,
       children: [
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx102(
           Typography_default,
           {
             sx: {
@@ -19274,7 +19222,7 @@ var CalendarMonth = ({
                 textTransform: "uppercase"
               }
             },
-            children: /* @__PURE__ */ jsx103(
+            children: /* @__PURE__ */ jsx102(
               DateFormatter_default,
               {
                 date: firstDayOfMonth.toDate(),
@@ -19283,8 +19231,8 @@ var CalendarMonth = ({
             )
           }
         ),
-        isMonthInFullLine && indexOfDay > 0 && /* @__PURE__ */ jsx103("span", { style: { gridColumn: `span ${indexOfDay}` }, children: "\xA0" }),
-        dayList.map((day) => /* @__PURE__ */ jsx103(
+        isMonthInFullLine && indexOfDay > 0 && /* @__PURE__ */ jsx102("span", { style: { gridColumn: `span ${indexOfDay}` }, children: "\xA0" }),
+        dayList.map((day) => /* @__PURE__ */ jsx102(
           CalendarDay_default,
           {
             allowKeyboardNavigation,
@@ -19302,7 +19250,7 @@ var CalendarMonth_default = CalendarMonth;
 
 // src/components/input/DaysOfWeekRow.tsx
 import * as React53 from "react";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 var DaysOfWeekRow = () => {
   const { locale } = React53.useContext(IntlContext);
   const daysOfWeekLong = React53.useMemo(
@@ -19313,7 +19261,7 @@ var DaysOfWeekRow = () => {
     () => getWeekDayNamesForLocale(locale, "narrow"),
     [locale]
   );
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx103(
     Stack_default,
     {
       direction: "row",
@@ -19323,7 +19271,7 @@ var DaysOfWeekRow = () => {
         backgroundColor: grey100,
         alignItems: "center"
       },
-      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx104(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx104(
+      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx103(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx103(
         Typography_default,
         {
           sx: {
@@ -19340,7 +19288,7 @@ var DaysOfWeekRow = () => {
 var DaysOfWeekRow_default = DaysOfWeekRow;
 
 // src/components/input/CalendarScrollPicker.tsx
-import { jsx as jsx105, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs46 } from "react/jsx-runtime";
 var CalendarScrollPicker = ({
   minDate,
   maxDate,
@@ -19365,7 +19313,7 @@ var CalendarScrollPicker = ({
   }) => {
     const month = (minDate.month + index) % 12;
     const year = Math.floor((minDate.month + index) / 12) + minDate.year;
-    return /* @__PURE__ */ jsx105(Box_default2, { sx: { ...style3, paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx105(
+    return /* @__PURE__ */ jsx104(Box_default2, { sx: { ...style3, paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx104(
       CalendarMonth_default,
       {
         minDate,
@@ -19390,14 +19338,14 @@ var CalendarScrollPicker = ({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsx105(DaysOfWeekRow_default, {}),
-        /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsx104(DaysOfWeekRow_default, {}),
+        /* @__PURE__ */ jsx104(
           Box_default2,
           {
             sx: {
               flex: "1 1 0"
             },
-            children: /* @__PURE__ */ jsx105(AutoSizer3, { children: ({ height: height2, width: width2 }) => /* @__PURE__ */ jsx105(
+            children: /* @__PURE__ */ jsx104(AutoSizer3, { children: ({ height: height2, width: width2 }) => /* @__PURE__ */ jsx104(
               FixedSizeList,
               {
                 ref: listRefCallback,
@@ -19419,7 +19367,7 @@ var CalendarScrollPicker = ({
 var CalendarScrollPicker_default = CalendarScrollPicker;
 
 // src/components/input/DateIntervalPickerList.tsx
-import { jsx as jsx106, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs47 } from "react/jsx-runtime";
 var dateIntervals = {
   today: "TODAY",
   yesterday: "YESTERDAY",
@@ -19454,7 +19402,7 @@ var DateIntervalPickerList = ({
 }) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs47(List_default, { children: [
-    Object.keys(dateIntervals).filter((i) => maxSelectableDays > 90 || !isLongInterval(i)).filter((i) => !allowedIntervals || allowedIntervals.includes(i)).map((key) => /* @__PURE__ */ jsx106(
+    Object.keys(dateIntervals).filter((i) => maxSelectableDays > 90 || !isLongInterval(i)).filter((i) => !allowedIntervals || allowedIntervals.includes(i)).map((key) => /* @__PURE__ */ jsx105(
       ListItemButton_default,
       {
         text: t(
@@ -19466,13 +19414,13 @@ var DateIntervalPickerList = ({
       },
       key
     )),
-    allowCompare && /* @__PURE__ */ jsx106(Divider_default, {}),
-    allowCompare && /* @__PURE__ */ jsx106(
+    allowCompare && /* @__PURE__ */ jsx105(Divider_default, {}),
+    allowCompare && /* @__PURE__ */ jsx105(
       ListItem_default,
       {
         text: t("DATE_INTERVAL_PICKER.COMPARE"),
         typographyVariant: "body1",
-        endAdornment: /* @__PURE__ */ jsx106(
+        endAdornment: /* @__PURE__ */ jsx105(
           Switch_default,
           {
             checked: isComparing,
@@ -19483,7 +19431,7 @@ var DateIntervalPickerList = ({
     ),
     allowCompare && Object.keys(comparisonIntervals).filter(
       (i) => maxSelectableDays > 90 || !isLongComparisonInterval(i)
-    ).map((key) => /* @__PURE__ */ jsx106(
+    ).map((key) => /* @__PURE__ */ jsx105(
       ListItemButton_default,
       {
         disabled: !isComparing,
@@ -19502,7 +19450,7 @@ var DateIntervalPickerList_default = DateIntervalPickerList;
 
 // src/components/input/DateIntervalPickerInputs.tsx
 import { Collapse as Collapse6 } from "@mui/material";
-import { jsx as jsx107, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs48 } from "react/jsx-runtime";
 var DateIntervalPickerInputs = ({
   startDate,
   endDate,
@@ -19528,7 +19476,7 @@ var DateIntervalPickerInputs = ({
           gap: "8px"
         },
         children: [
-          /* @__PURE__ */ jsx107("div", { children: /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx106("div", { children: /* @__PURE__ */ jsx106(
             TextField_default,
             {
               "data-testid": "startDateInput",
@@ -19543,8 +19491,8 @@ var DateIntervalPickerInputs = ({
               activeColor: color2
             }
           ) }),
-          /* @__PURE__ */ jsx107(InputLabel_default, { children: t("DATE_INTERVAL_PICKER.TO") }),
-          /* @__PURE__ */ jsx107("div", { children: /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx106(InputLabel_default, { children: t("DATE_INTERVAL_PICKER.TO") }),
+          /* @__PURE__ */ jsx106("div", { children: /* @__PURE__ */ jsx106(
             TextField_default,
             {
               "data-testid": "endDateInput",
@@ -19561,7 +19509,7 @@ var DateIntervalPickerInputs = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx107(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
+    /* @__PURE__ */ jsx106(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
       Box_default2,
       {
         sx: {
@@ -19570,7 +19518,7 @@ var DateIntervalPickerInputs = ({
           gap: "8px"
         },
         children: [
-          /* @__PURE__ */ jsx107("div", { children: /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx106("div", { children: /* @__PURE__ */ jsx106(
             TextField_default,
             {
               "data-testid": "comparisonStartDateInput",
@@ -19587,10 +19535,10 @@ var DateIntervalPickerInputs = ({
               activeColor: comparisonColor
             }
           ) }),
-          /* @__PURE__ */ jsx107(InputLabel_default, { children: t("DATE_INTERVAL_PICKER.TO") }),
+          /* @__PURE__ */ jsx106(InputLabel_default, { children: t("DATE_INTERVAL_PICKER.TO") }),
           /* @__PURE__ */ jsxs48("div", { children: [
-            /* @__PURE__ */ jsx107("label", { children: "\xA0" }),
-            /* @__PURE__ */ jsx107(
+            /* @__PURE__ */ jsx106("label", { children: "\xA0" }),
+            /* @__PURE__ */ jsx106(
               TextField_default,
               {
                 "data-testid": "comparisonEndDateInput",
@@ -19612,7 +19560,7 @@ var DateIntervalPickerInputs = ({
 var DateIntervalPickerInputs_default = DateIntervalPickerInputs;
 
 // src/components/input/DateIntervalPickerPopover.tsx
-import { jsx as jsx108, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs49 } from "react/jsx-runtime";
 var DateIntervalPickerPopover = ({
   interval,
   startDate,
@@ -19983,7 +19931,7 @@ var DateIntervalPickerPopover = ({
           maxWidth: `${250 + 8 * 2 + 32 * 7}px`
         },
         children: [
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx107(
             Box_default2,
             {
               sx: {
@@ -19995,7 +19943,7 @@ var DateIntervalPickerPopover = ({
                 overflowY: "auto"
               },
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx107(
                 DateIntervalPickerList_default,
                 {
                   allowCompare,
@@ -20011,13 +19959,13 @@ var DateIntervalPickerPopover = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx107(
             Box_default2,
             {
               sx: {
                 gridArea: "inputs"
               },
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx107(
                 DateIntervalPickerInputs_default,
                 {
                   color: color2,
@@ -20036,13 +19984,13 @@ var DateIntervalPickerPopover = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx107(
             Box_default2,
             {
               sx: {
                 gridArea: "calendar"
               },
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx107(
                 CalendarScrollPicker_default,
                 {
                   minDate: {
@@ -20081,10 +20029,10 @@ var DateIntervalPickerPopover = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx108(
+    /* @__PURE__ */ jsx107(
       PopoverActions_default,
       {
-        leftContent: /* @__PURE__ */ jsx108(
+        leftContent: /* @__PURE__ */ jsx107(
           Button_default,
           {
             variant: "text",
@@ -20093,7 +20041,7 @@ var DateIntervalPickerPopover = ({
             disabled: isApplyButtonDisabled()
           }
         ),
-        rightContent: /* @__PURE__ */ jsx108(
+        rightContent: /* @__PURE__ */ jsx107(
           Button_default,
           {
             variant: "text",
@@ -20109,7 +20057,7 @@ var DateIntervalPickerPopover_default = DateIntervalPickerPopover;
 
 // src/components/input/DateIntervalPicker.tsx
 import { tz as tz4 } from "moment-timezone";
-import { jsx as jsx109, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs50 } from "react/jsx-runtime";
 var DateIntervalPicker = ({
   interval,
   startDate,
@@ -20166,7 +20114,7 @@ var DateIntervalPicker = ({
         disabled,
         onClick: handleButtonClick,
         children: [
-          /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx108(
             "span",
             {
               style: {
@@ -20176,7 +20124,7 @@ var DateIntervalPicker = ({
                 borderRadius: "2px",
                 alignSelf: "center"
               },
-              children: /* @__PURE__ */ jsx109(Typography_default, { variant: "body2", children: t(
+              children: /* @__PURE__ */ jsx108(Typography_default, { variant: "body2", children: t(
                 `DATE_INTERVAL_PICKER.DATE_INTERVALS.${dateIntervals[interval]}`
               ) })
             }
@@ -20191,9 +20139,9 @@ var DateIntervalPicker = ({
               },
               children: [
                 /* @__PURE__ */ jsxs50("div", { children: [
-                  /* @__PURE__ */ jsx109(DateFormatter_default, { date: startDate }),
+                  /* @__PURE__ */ jsx108(DateFormatter_default, { date: startDate }),
                   isEndDateVisible && " - ",
-                  isEndDateVisible && /* @__PURE__ */ jsx109(DateFormatter_default, { date: displayEndDate })
+                  isEndDateVisible && /* @__PURE__ */ jsx108(DateFormatter_default, { date: displayEndDate })
                 ] }),
                 comparisonStartDate && comparisonEndDate ? /* @__PURE__ */ jsxs50(
                   "div",
@@ -20206,20 +20154,20 @@ var DateIntervalPicker = ({
                     children: [
                       t("DATE_INTERVAL_PICKER.COMPARE"),
                       ": ",
-                      /* @__PURE__ */ jsx109(DateFormatter_default, { date: comparisonStartDate }),
+                      /* @__PURE__ */ jsx108(DateFormatter_default, { date: comparisonStartDate }),
                       " - ",
-                      /* @__PURE__ */ jsx109(DateFormatter_default, { date: comparisonEndDate })
+                      /* @__PURE__ */ jsx108(DateFormatter_default, { date: comparisonEndDate })
                     ]
                   }
                 ) : []
               ]
             }
           ),
-          /* @__PURE__ */ jsx109(Icon_default, { id: "menu-down", sx: { color: grey400 } })
+          /* @__PURE__ */ jsx108(Icon_default, { id: "menu-down", sx: { color: grey400 } })
         ]
       }
     ),
-    anchorEl !== null && /* @__PURE__ */ jsx109(
+    anchorEl !== null && /* @__PURE__ */ jsx108(
       DateIntervalPickerPopover_default,
       {
         ...{
@@ -20251,7 +20199,7 @@ var DateIntervalPicker_default = DateIntervalPicker;
 // src/components/input/SelectPopoverItem.tsx
 import { Grid as Grid2, Stack as Stack7 } from "@mui/material";
 import { lighten as lighten3 } from "@mui/material";
-import { Fragment as Fragment21, jsx as jsx110, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx109, jsxs as jsxs51 } from "react/jsx-runtime";
 var bgColorLightCoefficient2 = 0.9;
 var SelectPopoverItem = ({
   id,
@@ -20265,7 +20213,7 @@ var SelectPopoverItem = ({
   tooltip,
   isLoadingSubtitle2,
   onClick
-}) => /* @__PURE__ */ jsx110(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx110(
+}) => /* @__PURE__ */ jsx109(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx109(
   Grid2,
   {
     size: {
@@ -20299,7 +20247,7 @@ var SelectPopoverItem = ({
                 boxSizing: "border-box"
               },
               children: [
-                /* @__PURE__ */ jsx110(
+                /* @__PURE__ */ jsx109(
                   TextEllipsis_default,
                   {
                     color: Colors_exports.grey800,
@@ -20309,7 +20257,7 @@ var SelectPopoverItem = ({
                     },
                     typographyVariant: "body1",
                     text: /* @__PURE__ */ jsxs51(Fragment21, { children: [
-                      iconId && /* @__PURE__ */ jsx110(
+                      iconId && /* @__PURE__ */ jsx109(
                         Icon_default,
                         {
                           id: iconId,
@@ -20327,7 +20275,7 @@ var SelectPopoverItem = ({
                     ] })
                   }
                 ),
-                subtitle1 && /* @__PURE__ */ jsx110(
+                subtitle1 && /* @__PURE__ */ jsx109(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20337,7 +20285,7 @@ var SelectPopoverItem = ({
                     children: subtitle1
                   }
                 ),
-                isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                isLoadingSubtitle2 && /* @__PURE__ */ jsx109(
                   Skeleton_default,
                   {
                     variant: "text",
@@ -20349,7 +20297,7 @@ var SelectPopoverItem = ({
                     }
                   }
                 ),
-                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx109(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20362,7 +20310,7 @@ var SelectPopoverItem = ({
               ]
             }
           ),
-          chipText && /* @__PURE__ */ jsx110(Box_default2, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx110(
+          chipText && /* @__PURE__ */ jsx109(Box_default2, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx109(
             Chip_default,
             {
               label: chipText,
@@ -20393,7 +20341,7 @@ import MuiSelect from "@mui/material/Select";
 import InputBase from "@mui/material/InputBase";
 import { FixedSizeList as FixedSizeList2 } from "react-window";
 import AutoSizer4 from "react-virtualized-auto-sizer";
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var BootstrapInput = styled7(InputBase)(() => ({
   boxShadow: shadows[0],
   borderRadius: "16px",
@@ -20424,7 +20372,7 @@ var BootstrapInput = styled7(InputBase)(() => ({
     borderColor: grey800
   }
 }));
-var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx111(
+var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx110(
   Icon_default,
   {
     id: "chevron-down",
@@ -20442,7 +20390,7 @@ var SelectOption = ({
   selected,
   colors,
   ...rest
-}) => /* @__PURE__ */ jsx111(
+}) => /* @__PURE__ */ jsx110(
   ListItemButton_default,
   {
     role: "option",
@@ -20509,7 +20457,7 @@ var Select = function Select2({
   }) => {
     const { value: currentValue, label, ...rest2 } = options[index];
     const isSelected = value === currentValue;
-    return /* @__PURE__ */ jsx111(
+    return /* @__PURE__ */ jsx110(
       ListItemButton_default,
       {
         text: label ?? currentValue?.toString() ?? "",
@@ -20540,7 +20488,7 @@ var Select = function Select2({
       currentValue ?? ""
     );
   };
-  const getVirtualizedSelect = () => /* @__PURE__ */ jsx111(
+  const getVirtualizedSelect = () => /* @__PURE__ */ jsx110(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20576,8 +20524,8 @@ var Select = function Select2({
       displayEmpty: true,
       variant: "standard",
       value,
-      IconComponent: () => /* @__PURE__ */ jsx111(ChevronIcon, { disabled: rest.disabled }),
-      input: /* @__PURE__ */ jsx111(BootstrapInput, { placeholder }),
+      IconComponent: () => /* @__PURE__ */ jsx110(ChevronIcon, { disabled: rest.disabled }),
+      input: /* @__PURE__ */ jsx110(BootstrapInput, { placeholder }),
       onOpen: () => {
         setOpen(true);
         onOpen && onOpen();
@@ -20593,7 +20541,7 @@ var Select = function Select2({
           return renderValue(value2, options);
         }
         if (!value2) {
-          return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
+          return /* @__PURE__ */ jsx110("span", { style: { color: grey900 }, children: placeholder });
         }
         return options.find((o) => o.value === value2)?.label ?? value2;
       },
@@ -20626,7 +20574,7 @@ var Select = function Select2({
           }
         }
       },
-      children: /* @__PURE__ */ jsx111(AutoSizer4, { disableWidth: true, children: ({ height: height2 }) => /* @__PURE__ */ jsx111(
+      children: /* @__PURE__ */ jsx110(AutoSizer4, { disableWidth: true, children: ({ height: height2 }) => /* @__PURE__ */ jsx110(
         FixedSizeList2,
         {
           height: height2,
@@ -20640,7 +20588,7 @@ var Select = function Select2({
       ) })
     }
   );
-  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx111(
+  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx110(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20680,9 +20628,9 @@ var Select = function Select2({
       },
       multiple,
       value,
-      IconComponent: () => /* @__PURE__ */ jsx111(ChevronIcon, { disabled: rest.disabled }),
+      IconComponent: () => /* @__PURE__ */ jsx110(ChevronIcon, { disabled: rest.disabled }),
       open,
-      input: /* @__PURE__ */ jsx111(BootstrapInput, { placeholder }),
+      input: /* @__PURE__ */ jsx110(BootstrapInput, { placeholder }),
       onOpen: () => {
         setOpen(true);
         onOpen && onOpen();
@@ -20698,7 +20646,7 @@ var Select = function Select2({
         }
         if (Array.isArray(value2)) {
           if (value2.length === 0) {
-            return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx110("span", { style: { color: grey900 }, children: placeholder });
           } else {
             return value2.map((v) => {
               const option = options.find((o) => o.value === v);
@@ -20707,7 +20655,7 @@ var Select = function Select2({
           }
         } else {
           if (!value2) {
-            return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx110("span", { style: { color: grey900 }, children: placeholder });
           }
           return options.find((o) => o.value === value2)?.label ?? value2;
         }
@@ -20732,7 +20680,7 @@ var Select = function Select2({
         }
       },
       ...rest,
-      children: children ?? options.map(({ label, value: value2, ...rest2 }) => /* @__PURE__ */ jsx111(
+      children: children ?? options.map(({ label, value: value2, ...rest2 }) => /* @__PURE__ */ jsx110(
         SelectOption,
         {
           label: label ?? value2?.toString() ?? "",
@@ -20749,7 +20697,7 @@ var Select = function Select2({
 var Select_default = React57.forwardRef(Select);
 
 // src/components/input/TimezoneSelector.tsx
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var TimezoneSelector = ({
   initialTimezone,
   onTimezoneChange
@@ -20760,7 +20708,7 @@ var TimezoneSelector = ({
     onTimezoneChange(timezone);
   };
   const timeZones = moment2.tz.names();
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx111(
     Select_default,
     {
       value: selectedTimezone,
@@ -20774,7 +20722,7 @@ var TimezoneSelector_default = TimezoneSelector;
 
 // src/components/input/DaysOfWeekPicker.tsx
 import * as React59 from "react";
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var DaysOfWeekPicker = ({ value, onChange }) => {
   const { locale } = React59.useContext(IntlContext);
   const daysOfWeekLong = React59.useMemo(
@@ -20794,7 +20742,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
     "saturday",
     "sunday"
   ];
-  return /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx112(
     Stack_default,
     {
       direction: "row",
@@ -20803,7 +20751,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
         height: "34px",
         alignItems: "center"
       },
-      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx113("div", { style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx113(
+      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx112("div", { style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx112(
         ToggleButton_default,
         {
           sx: {
@@ -20826,7 +20774,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
               onChange(value.concat([currentValue]));
             }
           },
-          children: /* @__PURE__ */ jsx113(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx113("span", { children: day }) }, index)
+          children: /* @__PURE__ */ jsx112(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx112("span", { children: day }) }, index)
         }
       ) }, index))
     }
@@ -20839,7 +20787,7 @@ import * as React60 from "react";
 import GradientColorPicker, {
   useColorPicker
 } from "react-best-gradient-color-picker";
-import { Fragment as Fragment22, jsx as jsx114, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx113, jsxs as jsxs52 } from "react/jsx-runtime";
 var colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^rgba?\((\d{1,3}), {0,1}(\d{1,3}), {0,1}(\d{1,3})(, {0,1}([01]|0?\.\d+))?\)$/;
 var isValidColor = (color2) => colorRegex.test(color2);
 var colorPickerDefaultColors = [
@@ -20910,7 +20858,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
       return hex.length === 1 ? "0" + hex : hex;
     }).join("");
   };
-  const iconColor = /* @__PURE__ */ jsx114(
+  const iconColor = /* @__PURE__ */ jsx113(
     IconButton_default,
     {
       iconId: value ? "color-square" : "transparent",
@@ -20933,7 +20881,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
     }
   }, [value, internalPickerValue, onChange, isValidPickerChange, valueToHex]);
   return /* @__PURE__ */ jsxs52(Fragment22, { children: [
-    /* @__PURE__ */ jsx114(
+    /* @__PURE__ */ jsx113(
       TextField_default,
       {
         value: textFieldValue,
@@ -20958,7 +20906,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
         ref
       }
     ),
-    /* @__PURE__ */ jsx114(
+    /* @__PURE__ */ jsx113(
       Popover_default,
       {
         anchorEl,
@@ -20967,7 +20915,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
         onMouseUp: () => {
           setValidPickerChange(true);
         },
-        children: /* @__PURE__ */ jsx114(
+        children: /* @__PURE__ */ jsx113(
           Box_default2,
           {
             className: "Cn-Color-Gradient-Box",
@@ -21011,7 +20959,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
                 fontFamily: "Source Sans Pro, sans-serif"
               }
             },
-            children: /* @__PURE__ */ jsx114(
+            children: /* @__PURE__ */ jsx113(
               GradientColorPicker,
               {
                 className: "Cn-Color-Gradient-Picker",
@@ -21042,7 +20990,7 @@ var ColorPicker_default = ColorPicker;
 
 // src/components/input/UploadClickableArea.tsx
 import { Box as Box3 } from "@mui/material";
-import { jsx as jsx115, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs53 } from "react/jsx-runtime";
 var UploadClickableArea = ({
   accept,
   onFilesChanged,
@@ -21056,7 +21004,7 @@ var UploadClickableArea = ({
       display: "inline-block"
     },
     children: [
-      /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsx114(
         "input",
         {
           type: "file",
@@ -21074,8 +21022,8 @@ var UploadClickableArea_default = UploadClickableArea;
 // src/components/input/CategorizedPicker.tsx
 import React61 from "react";
 import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack8 } from "@mui/material";
-import { Fragment as Fragment23, jsx as jsx116, jsxs as jsxs54 } from "react/jsx-runtime";
-var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx116(
+import { Fragment as Fragment23, jsx as jsx115, jsxs as jsxs54 } from "react/jsx-runtime";
+var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx115(
   Icon_default,
   {
     id: "chevron-down",
@@ -21171,7 +21119,7 @@ var CategorizedPicker = function CategorizedPicker2({
     }
   }, [filteredCategories, selectedCategory]);
   return /* @__PURE__ */ jsxs54(Fragment23, { children: [
-    /* @__PURE__ */ jsx116(
+    /* @__PURE__ */ jsx115(
       Select3,
       {
         ref: anchorRef,
@@ -21186,7 +21134,7 @@ var CategorizedPicker = function CategorizedPicker2({
         value: value?.name || "",
         displayEmpty: true,
         disabled,
-        input: /* @__PURE__ */ jsx116(
+        input: /* @__PURE__ */ jsx115(
           BootstrapInput,
           {
             sx: {
@@ -21195,7 +21143,7 @@ var CategorizedPicker = function CategorizedPicker2({
           }
         ),
         renderValue: (value2) => value2 || placeholder,
-        IconComponent: () => /* @__PURE__ */ jsx116(ChevronIcon2, { disabled }),
+        IconComponent: () => /* @__PURE__ */ jsx115(ChevronIcon2, { disabled }),
         onClick: !disabled ? (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -21203,10 +21151,10 @@ var CategorizedPicker = function CategorizedPicker2({
         } : void 0,
         open: false,
         "data-testid": dataTestId,
-        children: options.map((option) => /* @__PURE__ */ jsx116("option", { value: option.name }, option.id))
+        children: options.map((option) => /* @__PURE__ */ jsx115("option", { value: option.name }, option.id))
       }
     ),
-    /* @__PURE__ */ jsx116(
+    /* @__PURE__ */ jsx115(
       Popover2,
       {
         anchorEl: anchorRef.current,
@@ -21228,7 +21176,7 @@ var CategorizedPicker = function CategorizedPicker2({
           }
         },
         children: /* @__PURE__ */ jsxs54(Grid3, { container: true, children: [
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx115(
             Grid3,
             {
               size: {
@@ -21236,7 +21184,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               padding: "8px",
               borderBottom: `1px solid ${grey200}`,
-              children: /* @__PURE__ */ jsx116(
+              children: /* @__PURE__ */ jsx115(
                 DebouncedTextField_default,
                 {
                   placeholder: t(
@@ -21244,12 +21192,12 @@ var CategorizedPicker = function CategorizedPicker2({
                   ),
                   value: search,
                   onChange: onTypeSearch,
-                  startAdornment: /* @__PURE__ */ jsx116(Icon_default, { id: "magnify" })
+                  startAdornment: /* @__PURE__ */ jsx115(Icon_default, { id: "magnify" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx115(
             Grid3,
             {
               size: {
@@ -21258,14 +21206,14 @@ var CategorizedPicker = function CategorizedPicker2({
               sx: { borderRight: `1px solid ${grey200}` },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx116(Stack8, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx116(
+              children: /* @__PURE__ */ jsx115(Stack8, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx115(
                 ListItemButton_default,
                 {
                   selected: selectedCategory === category,
                   onClick: () => {
                     setSelectedCategory(category);
                   },
-                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx116(
+                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx115(
                     Icon_default,
                     {
                       id: "menu-right",
@@ -21273,10 +21221,10 @@ var CategorizedPicker = function CategorizedPicker2({
                     }
                   ) : void 0,
                   buttonDataTest: dataTestId ? dataTestId + "-category-" + idx : void 0,
-                  children: /* @__PURE__ */ jsx116(
+                  children: /* @__PURE__ */ jsx115(
                     TextEllipsis_default,
                     {
-                      text: /* @__PURE__ */ jsx116(
+                      text: /* @__PURE__ */ jsx115(
                         TextMarker_default,
                         {
                           searchText: search,
@@ -21294,7 +21242,7 @@ var CategorizedPicker = function CategorizedPicker2({
               )) })
             }
           ),
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx115(
             Grid3,
             {
               size: {
@@ -21302,7 +21250,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx116(Stack8, { children: /* @__PURE__ */ jsx116(Stack8, { children: !selectedCategory ? /* @__PURE__ */ jsx116(Stack8, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx116(
+              children: /* @__PURE__ */ jsx115(Stack8, { children: /* @__PURE__ */ jsx115(Stack8, { children: !selectedCategory ? /* @__PURE__ */ jsx115(Stack8, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx115(
                 Typography_default,
                 {
                   variant: "body2",
@@ -21314,7 +21262,7 @@ var CategorizedPicker = function CategorizedPicker2({
                   )
                 }
               ) }) : selectedCategory.categoryOptions.map(
-                (option, idx) => /* @__PURE__ */ jsx116(
+                (option, idx) => /* @__PURE__ */ jsx115(
                   ListItemButton_default,
                   {
                     selected: value?.id === option.id,
@@ -21323,10 +21271,10 @@ var CategorizedPicker = function CategorizedPicker2({
                       closePopover();
                     },
                     buttonDataTest: dataTestId ? dataTestId + "-option-" + idx : void 0,
-                    children: /* @__PURE__ */ jsx116(
+                    children: /* @__PURE__ */ jsx115(
                       TextEllipsis_default,
                       {
-                        text: /* @__PURE__ */ jsx116(
+                        text: /* @__PURE__ */ jsx115(
                           TextMarker_default,
                           {
                             searchText: search,
@@ -21359,7 +21307,7 @@ import * as React62 from "react";
 import { Grid as Grid4, Stack as Stack9 } from "@mui/material";
 import { useState as useState22 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { jsx as jsx117, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs55 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
   selectedColor: Colors_exports.primaryMain,
   disabledColor: ""
@@ -21501,14 +21449,14 @@ var SelectPopover = function SelectPopover2({
       anchorEl,
       disableRestoreFocus,
       children: [
-        /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsx116(
           Box_default2,
           {
             sx: {
               borderBottom: `1px solid ${Colors_exports.grey200}`,
               padding: "8px"
             },
-            children: /* @__PURE__ */ jsx117(
+            children: /* @__PURE__ */ jsx116(
               DebouncedTextField_default,
               {
                 iconId: "magnify",
@@ -21523,7 +21471,7 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsx116(
           InfiniteScroll,
           {
             height: 300,
@@ -21582,7 +21530,7 @@ var SelectPopover = function SelectPopover2({
                       onItemSelected
                     ) : getItemElement(item, onItemSelected)
                   ),
-                  isLoading && /* @__PURE__ */ jsx117(
+                  isLoading && /* @__PURE__ */ jsx116(
                     Skeleton_default,
                     {
                       variant: "text",
@@ -21595,13 +21543,13 @@ var SelectPopover = function SelectPopover2({
                       }
                     }
                   ),
-                  !isLoading && currentItems.length === 0 ? /* @__PURE__ */ jsx117(
+                  !isLoading && currentItems.length === 0 ? /* @__PURE__ */ jsx116(
                     Stack9,
                     {
                       alignItems: "center",
                       justifyContent: "center",
                       width: "100%",
-                      children: /* @__PURE__ */ jsx117(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
+                      children: /* @__PURE__ */ jsx116(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
                     }
                   ) : ""
                 ]
@@ -21609,11 +21557,11 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsx116(
           PopoverActions_default,
           {
             sx: { padding: "16px 24px" },
-            leftContent: /* @__PURE__ */ jsx117(
+            leftContent: /* @__PURE__ */ jsx116(
               Button_default,
               {
                 variant: "contained",
@@ -21623,7 +21571,7 @@ var SelectPopover = function SelectPopover2({
                 onClick: closePopover
               }
             ),
-            rightContent: /* @__PURE__ */ jsx117(
+            rightContent: /* @__PURE__ */ jsx116(
               Button_default,
               {
                 variant: "contained",
@@ -21647,7 +21595,7 @@ var SelectPopover = function SelectPopover2({
   );
 };
 function getItemElement(item, onItemClick) {
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx116(
     SelectPopoverItem_default,
     {
       id: item.id,
@@ -21676,7 +21624,7 @@ var arraysEqual = (a, b) => {
 var SelectPopover_default = SelectPopover;
 
 // src/components/input/ItemSelector.tsx
-import { Fragment as Fragment24, jsx as jsx118, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx117, jsxs as jsxs56 } from "react/jsx-runtime";
 var ItemSelector = function ItemSelector2({
   items,
   selectedItems,
@@ -21730,7 +21678,7 @@ var ItemSelector = function ItemSelector2({
     item
   }) => {
     const [ref, { contentWidth: width2 }] = useResizeObserver();
-    return /* @__PURE__ */ jsx118(
+    return /* @__PURE__ */ jsx117(
       Chip_default,
       {
         ref,
@@ -21761,7 +21709,7 @@ var ItemSelector = function ItemSelector2({
     return selectedItem ? [selectedItem] : "";
   };
   return /* @__PURE__ */ jsxs56(Fragment24, { children: [
-    /* @__PURE__ */ jsx118(
+    /* @__PURE__ */ jsx117(
       Select_default,
       {
         ref: selectRef,
@@ -21778,16 +21726,16 @@ var ItemSelector = function ItemSelector2({
           let component;
           if (!value || !Array.isArray(value) || value.length === 0) {
             component = /* @__PURE__ */ jsxs56(Fragment24, { children: [
-              /* @__PURE__ */ jsx118(
+              /* @__PURE__ */ jsx117(
                 Stack_default,
                 {
                   direction: "row",
                   flexWrap: "wrap",
                   padding: "6px 0",
-                  children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", color: grey600, children: placeholder })
+                  children: /* @__PURE__ */ jsx117(Typography_default, { variant: "body2", color: grey600, children: placeholder })
                 }
               ),
-              /* @__PURE__ */ jsx118(
+              /* @__PURE__ */ jsx117(
                 Divider_default,
                 {
                   variant: "middle",
@@ -21812,7 +21760,7 @@ var ItemSelector = function ItemSelector2({
                       const item = selectedItems.find(
                         (i) => i.id === id
                       );
-                      return item ? /* @__PURE__ */ jsx118(
+                      return item ? /* @__PURE__ */ jsx117(
                         ItemChip,
                         {
                           item: {
@@ -21821,14 +21769,14 @@ var ItemSelector = function ItemSelector2({
                           }
                         },
                         id
-                      ) : /* @__PURE__ */ jsx118(Fragment24, {});
+                      ) : /* @__PURE__ */ jsx117(Fragment24, {});
                     }),
-                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx118(
+                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx117(
                       Tooltip_default,
                       {
                         interactive: true,
                         variant: "white",
-                        title: /* @__PURE__ */ jsx118(
+                        title: /* @__PURE__ */ jsx117(
                           Stack_default,
                           {
                             direction: "row",
@@ -21845,24 +21793,24 @@ var ItemSelector = function ItemSelector2({
                               const item = selectedItems.find(
                                 (i) => i.id === id
                               );
-                              return item ? /* @__PURE__ */ jsx118(
+                              return item ? /* @__PURE__ */ jsx117(
                                 ItemChip,
                                 {
                                   item
                                 },
                                 id
-                              ) : /* @__PURE__ */ jsx118(Fragment24, {});
+                              ) : /* @__PURE__ */ jsx117(Fragment24, {});
                             })
                           }
                         ),
-                        children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
+                        children: /* @__PURE__ */ jsx117(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
                       }
                     ) : void 0
                   ]
                 }
               ),
               !disabled && /* @__PURE__ */ jsxs56(Stack_default, { direction: "row", children: [
-                /* @__PURE__ */ jsx118(
+                /* @__PURE__ */ jsx117(
                   IconButton_default,
                   {
                     iconId: "close",
@@ -21880,7 +21828,7 @@ var ItemSelector = function ItemSelector2({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx118(
+                /* @__PURE__ */ jsx117(
                   Divider_default,
                   {
                     variant: "middle",
@@ -21891,7 +21839,7 @@ var ItemSelector = function ItemSelector2({
               ] })
             ] });
           }
-          return /* @__PURE__ */ jsx118(
+          return /* @__PURE__ */ jsx117(
             Stack_default,
             {
               direction: "row",
@@ -21913,8 +21861,8 @@ var ItemSelector = function ItemSelector2({
         }
       }
     ),
-    helperText && /* @__PURE__ */ jsx118(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
-    /* @__PURE__ */ jsx118(
+    helperText && /* @__PURE__ */ jsx117(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
+    /* @__PURE__ */ jsx117(
       SelectPopover_default,
       {
         items: items.map((item) => {
@@ -21979,7 +21927,7 @@ var map = {
 var toDiacriticInsensitiveString = (input) => Array.from(input).map((char) => map[char] ? `[${map[char]}]` : char).join("");
 
 // src/components/input/Autocomplete.tsx
-import { Fragment as Fragment25, jsx as jsx119, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx118, jsxs as jsxs57 } from "react/jsx-runtime";
 var AUTOCOMPLETE_ITEM_HEIGHT = 44;
 var Autocomplete = function Autocomplete2({
   variant = "default",
@@ -22175,7 +22123,7 @@ var Autocomplete = function Autocomplete2({
     style: style3
   }) => {
     const option = filteredOptions[index];
-    return /* @__PURE__ */ jsx119(
+    return /* @__PURE__ */ jsx118(
       ListItemButton_default,
       {
         selected: index === selectedIndex,
@@ -22184,7 +22132,7 @@ var Autocomplete = function Autocomplete2({
         sx: style3,
         color: Array.isArray(value) && value.includes(option.id) ? "primary" : void 0,
         text: getText(option),
-        endAdornment: multiple && (options.some((elem) => elem.id === option.id) ? Array.isArray(value) && value.includes(option.id) && /* @__PURE__ */ jsx119(Icon_default, { sx: { color: primaryMain }, id: "check" }) : /* @__PURE__ */ jsx119(
+        endAdornment: multiple && (options.some((elem) => elem.id === option.id) ? Array.isArray(value) && value.includes(option.id) && /* @__PURE__ */ jsx118(Icon_default, { sx: { color: primaryMain }, id: "check" }) : /* @__PURE__ */ jsx118(
           Icon_default,
           {
             id: Array.isArray(value) && value.includes(option.id) ? "close" : "plus"
@@ -22197,7 +22145,7 @@ var Autocomplete = function Autocomplete2({
     );
   };
   return /* @__PURE__ */ jsxs57(Fragment25, { children: [
-    /* @__PURE__ */ jsx119(
+    /* @__PURE__ */ jsx118(
       DebouncedTextField_default,
       {
         ref: ref ?? inputRef,
@@ -22287,7 +22235,7 @@ var Autocomplete = function Autocomplete2({
               alignItems: "center"
             },
             children: [
-              value.slice(0, limitValueTags || value.length).map((id) => /* @__PURE__ */ jsx119(
+              value.slice(0, limitValueTags || value.length).map((id) => /* @__PURE__ */ jsx118(
                 Chip_default,
                 {
                   label: (renderLabel ?? _renderLabel)(
@@ -22307,12 +22255,12 @@ var Autocomplete = function Autocomplete2({
                 },
                 id
               )),
-              limitValueTags && value.length - limitValueTags > 0 ? /* @__PURE__ */ jsx119(
+              limitValueTags && value.length - limitValueTags > 0 ? /* @__PURE__ */ jsx118(
                 Tooltip_default,
                 {
                   interactive: true,
                   variant: "white",
-                  title: /* @__PURE__ */ jsx119(
+                  title: /* @__PURE__ */ jsx118(
                     Stack_default,
                     {
                       direction: "row",
@@ -22325,7 +22273,7 @@ var Autocomplete = function Autocomplete2({
                       children: value.slice(
                         limitValueTags,
                         value.length
-                      ).map((id) => /* @__PURE__ */ jsx119(
+                      ).map((id) => /* @__PURE__ */ jsx118(
                         Chip_default,
                         {
                           label: (renderLabel ?? _renderLabel)(id),
@@ -22345,7 +22293,7 @@ var Autocomplete = function Autocomplete2({
                       ))
                     }
                   ),
-                  children: /* @__PURE__ */ jsx119(Typography_default, { variant: "body2", children: `+${value.length - limitValueTags}` })
+                  children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", children: `+${value.length - limitValueTags}` })
                 }
               ) : ""
             ]
@@ -22362,7 +22310,7 @@ var Autocomplete = function Autocomplete2({
             spacing: 1,
             children: [
               textFieldProps?.endAdornment,
-              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx119(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx119(
+              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx118(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx118(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -22385,7 +22333,7 @@ var Autocomplete = function Autocomplete2({
                   "data-test": "clear-autocomplete"
                 }
               ) }),
-              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx119(
+              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx118(
                 Divider_default,
                 {
                   variant: "middle",
@@ -22393,11 +22341,11 @@ var Autocomplete = function Autocomplete2({
                   flexItem: true
                 }
               ),
-              !disabled && variant !== "text" && /* @__PURE__ */ jsx119(
+              !disabled && variant !== "text" && /* @__PURE__ */ jsx118(
                 Tooltip_default,
                 {
                   title: isOpen ? t("AUTOCOMPLETE.COLLAPSE") : t("AUTOCOMPLETE.EXPAND"),
-                  children: /* @__PURE__ */ jsx119(
+                  children: /* @__PURE__ */ jsx118(
                     IconButton_default,
                     {
                       ref: expandSelectButtonRef,
@@ -22419,7 +22367,7 @@ var Autocomplete = function Autocomplete2({
         autoComplete: "off"
       }
     ),
-    /* @__PURE__ */ jsx119(
+    /* @__PURE__ */ jsx118(
       ClickAwayListener,
       {
         onClickAway: (event) => {
@@ -22444,13 +22392,13 @@ var Autocomplete = function Autocomplete2({
           }
         },
         mouseEvent: "onMouseDown",
-        children: /* @__PURE__ */ jsx119(
+        children: /* @__PURE__ */ jsx118(
           Popper,
           {
             anchorEl: anchorRef.current,
             open: isOpen,
             sx: { zIndex: 3e3 },
-            children: /* @__PURE__ */ jsx119(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs57(
+            children: /* @__PURE__ */ jsx118(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs57(
               Box_default2,
               {
                 sx: {
@@ -22462,22 +22410,22 @@ var Autocomplete = function Autocomplete2({
                 className: "Slim-Vertical-Scroll",
                 ref: listRef,
                 children: [
-                  isLoading && /* @__PURE__ */ jsx119(
+                  isLoading && /* @__PURE__ */ jsx118(
                     ListItem_default,
                     {
                       text: loadingText ?? t("AUTOCOMPLETE.LOADING")
                     }
                   ),
-                  !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx119(
+                  !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx118(
                     ListItem_default,
                     {
                       text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
                     }
                   ),
-                  !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx119(AutoSizer5, { children: ({
+                  !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx118(AutoSizer5, { children: ({
                     height: height2,
                     width: width2
-                  }) => /* @__PURE__ */ jsx119(
+                  }) => /* @__PURE__ */ jsx118(
                     FixedSizeList3,
                     {
                       overscanCount: 3,
@@ -22545,7 +22493,7 @@ import CodeMirror, {
 } from "@uiw/react-codemirror";
 import { html } from "@codemirror/lang-html";
 import { linter, lintGutter } from "@codemirror/lint";
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
 var removeFocusOutline = EditorView.baseTheme({
   "&.cm-focused": {
     outline: "none"
@@ -22567,7 +22515,7 @@ var CodeEditor = function CodeEditor2({
     linter(linterOptions?.source || null, linterOptions?.config),
     ...extensions
   ] : extensions;
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx119(
     CodeMirror,
     {
       ...rest,
@@ -22586,7 +22534,7 @@ var CodeEditor_default = React65.forwardRef(CodeEditor);
 
 // src/components/input/CodeEditorPopup.tsx
 import format from "html-format";
-import { Fragment as Fragment26, jsx as jsx121, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx120, jsxs as jsxs58 } from "react/jsx-runtime";
 var FORMAT_CHARACTERS_LINE = 120;
 var FORMAT_NUMBER_SPACES_INDENTATION = 2;
 var CodeEditorPopup = ({
@@ -22630,7 +22578,7 @@ var CodeEditorPopup = ({
     FORMAT_CHARACTERS_LINE
   );
   return /* @__PURE__ */ jsxs58(Fragment26, { children: [
-    readonly && /* @__PURE__ */ jsx121(
+    readonly && /* @__PURE__ */ jsx120(
       Dialog_default,
       {
         open,
@@ -22649,7 +22597,7 @@ var CodeEditorPopup = ({
             justifyContent: "space-between",
             paddingTop: "20px",
             children: [
-              /* @__PURE__ */ jsx121(
+              /* @__PURE__ */ jsx120(
                 Box_default2,
                 {
                   flexGrow: 1,
@@ -22666,7 +22614,7 @@ var CodeEditorPopup = ({
                         }
                       },
                       children: [
-                        /* @__PURE__ */ jsx121(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx121(
+                        /* @__PURE__ */ jsx120(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx120(
                           CodeEditor_default,
                           {
                             autoFocus: true,
@@ -22695,7 +22643,7 @@ var CodeEditorPopup = ({
                           }
                         ) }),
                         messageNode,
-                        hasErrors && /* @__PURE__ */ jsx121(Alert_default, { severity: "info", children: t(
+                        hasErrors && /* @__PURE__ */ jsx120(Alert_default, { severity: "info", children: t(
                           "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
                         ) })
                       ]
@@ -22703,13 +22651,13 @@ var CodeEditorPopup = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx121(
+              /* @__PURE__ */ jsx120(
                 Box_default2,
                 {
                   sx: {
                     padding: "16px 24px 16px 24px"
                   },
-                  children: /* @__PURE__ */ jsx121(
+                  children: /* @__PURE__ */ jsx120(
                     Button_default,
                     {
                       text: t(
@@ -22726,7 +22674,7 @@ var CodeEditorPopup = ({
         )
       }
     ),
-    !readonly && /* @__PURE__ */ jsx121(
+    !readonly && /* @__PURE__ */ jsx120(
       ConfirmationDialog_default,
       {
         fullScreen: true,
@@ -22745,7 +22693,7 @@ var CodeEditorPopup = ({
               }
             },
             children: [
-              codeEditorSubtitle && /* @__PURE__ */ jsx121(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx121(
+              codeEditorSubtitle && /* @__PURE__ */ jsx120(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx120(
                 Typography_default,
                 {
                   variant: "body2",
@@ -22753,7 +22701,7 @@ var CodeEditorPopup = ({
                   children: codeEditorSubtitle
                 }
               ) }),
-              /* @__PURE__ */ jsx121(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx121(
+              /* @__PURE__ */ jsx120(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx120(
                 CodeEditor_default,
                 {
                   autoFocus: true,
@@ -22782,7 +22730,7 @@ var CodeEditorPopup = ({
                 }
               ) }),
               messageNode,
-              hasErrors && /* @__PURE__ */ jsx121(Alert_default, { severity: "info", children: t(
+              hasErrors && /* @__PURE__ */ jsx120(Alert_default, { severity: "info", children: t(
                 "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
               ) })
             ]
@@ -22795,7 +22743,7 @@ var CodeEditorPopup = ({
 var CodeEditorPopup_default = CodeEditorPopup;
 
 // src/components/input/TextEditor.tsx
-import { Fragment as Fragment27, jsx as jsx122, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx121, jsxs as jsxs59 } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR_INSERT_MENU_ITEMS = [
   "link",
   "image",
@@ -23082,7 +23030,7 @@ var TextEditor = function TextEditor2({
     }
   };
   return /* @__PURE__ */ jsxs59(Fragment27, { children: [
-    /* @__PURE__ */ jsx122(
+    /* @__PURE__ */ jsx121(
       Editor,
       {
         id,
@@ -23102,7 +23050,7 @@ var TextEditor = function TextEditor2({
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx122(
+    /* @__PURE__ */ jsx121(
       CodeEditorPopup_default,
       {
         value: contentValue,
@@ -23142,14 +23090,14 @@ import { TimeField as MuiTimeField } from "@mui/x-date-pickers";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { tz as tz6 } from "moment-timezone";
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
 var ExtendedTextField = ({
   inputProps,
   ownerState,
   InputProps,
   error,
   ...rest
-}) => /* @__PURE__ */ jsx123(TextField_default, { ...inputProps, ...rest });
+}) => /* @__PURE__ */ jsx122(TextField_default, { ...inputProps, ...rest });
 var TimeField = function TimeField2({
   onChange,
   value,
@@ -23178,7 +23126,7 @@ var TimeField = function TimeField2({
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsx123(LocalizationProvider, { dateAdapter: AdapterMoment, children: /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx122(LocalizationProvider, { dateAdapter: AdapterMoment, children: /* @__PURE__ */ jsx122(
     MuiTimeField,
     {
       onChange: _onChange,
@@ -23198,7 +23146,7 @@ var TimeField_default = TimeField;
 
 // src/components/input/PhoneField.tsx
 import * as React69 from "react";
-import { Fragment as Fragment28, jsx as jsx124, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx123, jsxs as jsxs60 } from "react/jsx-runtime";
 var maxPhoneLengthWithPrefix = 16;
 var PhoneField = React69.forwardRef(function PhoneField2({
   value,
@@ -23261,7 +23209,7 @@ var PhoneField = React69.forwardRef(function PhoneField2({
     setCountryCode(countryCode2);
     setTextValue(phone);
   }, [value]);
-  const select = /* @__PURE__ */ jsx124(
+  const select = /* @__PURE__ */ jsx123(
     Select_default,
     {
       className: "Cn-PhoneField-countryCodeSelector",
@@ -23277,7 +23225,7 @@ var PhoneField = React69.forwardRef(function PhoneField2({
       }
     }
   );
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx123(
     TextField_default,
     {
       groupElements: true,
@@ -23297,7 +23245,7 @@ var PhoneField_default = PhoneField;
 
 // src/components/input/NumberField.tsx
 import * as React70 from "react";
-import { jsx as jsx125, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs61 } from "react/jsx-runtime";
 var setValueAndTriggerChangeEvent = (r2, value) => {
   const propDescriptor = Object.getOwnPropertyDescriptor(
     window["HTMLInputElement"].prototype,
@@ -23460,12 +23408,12 @@ var NumberField = React70.forwardRef(function NumberField2({
           }
         },
         children: [
-          /* @__PURE__ */ jsx125(
+          /* @__PURE__ */ jsx124(
             Tooltip_default,
             {
               title: stepUpDisabledTooltip && stepUpDisabled ? stepUpDisabledTooltip : "",
               allowDisabled: true,
-              children: /* @__PURE__ */ jsx125(
+              children: /* @__PURE__ */ jsx124(
                 IconButton_default,
                 {
                   disabled: stepUpDisabled,
@@ -23476,12 +23424,12 @@ var NumberField = React70.forwardRef(function NumberField2({
               )
             }
           ),
-          /* @__PURE__ */ jsx125(
+          /* @__PURE__ */ jsx124(
             Tooltip_default,
             {
               title: stepDownDisabledTooltip && stepDownDisabled ? stepDownDisabledTooltip : "",
               allowDisabled: true,
-              children: /* @__PURE__ */ jsx125(
+              children: /* @__PURE__ */ jsx124(
                 IconButton_default,
                 {
                   disabled: stepDownDisabled,
@@ -23501,7 +23449,7 @@ var NumberField = React70.forwardRef(function NumberField2({
       setTextValue(numberToString(value));
     }
   }, [numberToString, stringToNumber, textValue, value]);
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx124(
     TextField_default,
     {
       ...rest,
@@ -23523,7 +23471,7 @@ import { tz as tz8 } from "moment-timezone";
 // src/components/input/DatePickerStatic.tsx
 import * as React71 from "react";
 import { tz as tz7 } from "moment-timezone";
-import { jsx as jsx126, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs62 } from "react/jsx-runtime";
 var minYear = 1900;
 var maxYear = 2100;
 var DatePickerStatic = ({
@@ -23631,7 +23579,7 @@ var DatePickerStatic = ({
             spacing: 2,
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsx126(
+              /* @__PURE__ */ jsx125(
                 Select_default,
                 {
                   value: visibleMonth.year,
@@ -23640,7 +23588,7 @@ var DatePickerStatic = ({
                 }
               ),
               /* @__PURE__ */ jsxs62(Stack_default, { direction: "row", spacing: 2, children: [
-                /* @__PURE__ */ jsx126(
+                /* @__PURE__ */ jsx125(
                   IconButton_default,
                   {
                     disabled: isDisabledPreviousMonth,
@@ -23648,7 +23596,7 @@ var DatePickerStatic = ({
                     onClick: navigatePreviousMonth
                   }
                 ),
-                /* @__PURE__ */ jsx126(
+                /* @__PURE__ */ jsx125(
                   IconButton_default,
                   {
                     disabled: isDisabledNextMonth,
@@ -23660,8 +23608,8 @@ var DatePickerStatic = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx126(DaysOfWeekRow_default, {}),
-        /* @__PURE__ */ jsx126(Box_default2, { sx: { padding: "8px" }, children: /* @__PURE__ */ jsx126(
+        /* @__PURE__ */ jsx125(DaysOfWeekRow_default, {}),
+        /* @__PURE__ */ jsx125(Box_default2, { sx: { padding: "8px" }, children: /* @__PURE__ */ jsx125(
           CalendarMonth_default,
           {
             allowKeyboardNavigation: true,
@@ -23698,14 +23646,14 @@ var DatePickerStatic = ({
 var DatePickerStatic_default = DatePickerStatic;
 
 // src/components/input/DatePickerPopover.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 var DatePickerPopover = ({
   value,
   onSelect,
   minDate,
   maxDate,
   ...rest
-}) => /* @__PURE__ */ jsx127(Popover_default, { anchorHorizontalOrigin: "right", horizontalAlign: "right", ...rest, children: /* @__PURE__ */ jsx127(
+}) => /* @__PURE__ */ jsx126(Popover_default, { anchorHorizontalOrigin: "right", horizontalAlign: "right", ...rest, children: /* @__PURE__ */ jsx126(
   DatePickerStatic_default,
   {
     value,
@@ -23717,7 +23665,7 @@ var DatePickerPopover = ({
 var DatePickerPopover_default = DatePickerPopover;
 
 // src/components/input/DatePicker.tsx
-import { Fragment as Fragment29, jsx as jsx128, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx127, jsxs as jsxs63 } from "react/jsx-runtime";
 var DatePicker = React72.forwardRef(
   function DatePicker2({ value, onChange, onBlur, onKeyDown, minDate, maxDate, ...rest }, ref) {
     const { locale, timezone } = React72.useContext(IntlContext);
@@ -23794,7 +23742,7 @@ var DatePicker = React72.forwardRef(
       setTextValue(text);
     }, [dateInputFormat, timezone, value]);
     return /* @__PURE__ */ jsxs63(Fragment29, { children: [
-      /* @__PURE__ */ jsx128(
+      /* @__PURE__ */ jsx127(
         TextField_default,
         {
           ref,
@@ -23805,7 +23753,7 @@ var DatePicker = React72.forwardRef(
           onChange: onChangeTextField,
           onBlur: onBlurTextField,
           onKeyDown: onKeyDownTextField,
-          endAdornment: /* @__PURE__ */ jsx128(
+          endAdornment: /* @__PURE__ */ jsx127(
             IconButton_default,
             {
               "data-testid": "date-picker-open-button",
@@ -23817,7 +23765,7 @@ var DatePicker = React72.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ jsx128(
+      /* @__PURE__ */ jsx127(
         DatePickerPopover_default,
         {
           anchorEl,
@@ -23836,14 +23784,14 @@ var DatePicker_default = DatePicker;
 // src/components/input/Checkbox.tsx
 import MuiCheckbox from "@mui/material/Checkbox";
 import { FormControlLabel, FormGroup } from "@mui/material";
-import { Fragment as Fragment30, jsx as jsx129, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx128, jsxs as jsxs64 } from "react/jsx-runtime";
 var MaterialCheckbox = ({
   checked,
   disabled,
   inputClass,
   indeterminate,
   onChange
-}) => /* @__PURE__ */ jsx129(
+}) => /* @__PURE__ */ jsx128(
   MuiCheckbox,
   {
     disabled,
@@ -23870,7 +23818,7 @@ var Checkbox = ({
   onChange,
   tabIndex
 }) => /* @__PURE__ */ jsxs64(Fragment30, { children: [
-  !label && /* @__PURE__ */ jsx129(
+  !label && /* @__PURE__ */ jsx128(
     MaterialCheckbox,
     {
       disabled,
@@ -23881,11 +23829,11 @@ var Checkbox = ({
       inputClass
     }
   ),
-  label && /* @__PURE__ */ jsx129(FormGroup, { children: /* @__PURE__ */ jsx129(
+  label && /* @__PURE__ */ jsx128(FormGroup, { children: /* @__PURE__ */ jsx128(
     FormControlLabel,
     {
       value: label,
-      control: /* @__PURE__ */ jsx129(
+      control: /* @__PURE__ */ jsx128(
         MaterialCheckbox,
         {
           disabled,
@@ -23896,7 +23844,7 @@ var Checkbox = ({
           inputClass
         }
       ),
-      label: /* @__PURE__ */ jsx129(Typography_default, { variant: "body2", children: label }),
+      label: /* @__PURE__ */ jsx128(Typography_default, { variant: "body2", children: label }),
       labelPlacement,
       sx: {
         margin: 0,
@@ -23911,7 +23859,7 @@ var Checkbox_default = Checkbox;
 import * as React73 from "react";
 import MuiRadio from "@mui/material/Radio";
 import { FormControlLabel as FormControlLabel2 } from "@mui/material";
-import { Fragment as Fragment31, jsx as jsx130, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx129, jsxs as jsxs65 } from "react/jsx-runtime";
 var Radio = React73.forwardRef(function Radio2({
   label,
   labelPlacement = "end",
@@ -23929,7 +23877,7 @@ var Radio = React73.forwardRef(function Radio2({
     },
     [onChange]
   );
-  const radio = /* @__PURE__ */ jsx130(
+  const radio = /* @__PURE__ */ jsx129(
     MuiRadio,
     {
       className: `Cn-Radio ${className}`,
@@ -23950,11 +23898,11 @@ var Radio = React73.forwardRef(function Radio2({
   );
   return /* @__PURE__ */ jsxs65(Fragment31, { children: [
     !label && radio,
-    label && /* @__PURE__ */ jsx130(
+    label && /* @__PURE__ */ jsx129(
       FormControlLabel2,
       {
         control: radio,
-        label: /* @__PURE__ */ jsx130(Typography_default, { variant: "body2", children: label }),
+        label: /* @__PURE__ */ jsx129(Typography_default, { variant: "body2", children: label }),
         labelPlacement,
         sx: {
           margin: 0,
@@ -23968,7 +23916,7 @@ var Radio_default = Radio;
 
 // src/components/input/PageSelector.tsx
 import * as React74 from "react";
-import { jsx as jsx131, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs66 } from "react/jsx-runtime";
 var PageSelector = ({
   currentPage,
   pageSize,
@@ -23995,7 +23943,7 @@ var PageSelector = ({
       justifyContent: "flex-end",
       flexGrow: 1,
       children: [
-        text && /* @__PURE__ */ jsx131(Typography_default, { variant: "body2", children: /* @__PURE__ */ jsx131(
+        text && /* @__PURE__ */ jsx130(Typography_default, { variant: "body2", children: /* @__PURE__ */ jsx130(
           "div",
           {
             dangerouslySetInnerHTML: {
@@ -24004,7 +23952,7 @@ var PageSelector = ({
           }
         ) }),
         /* @__PURE__ */ jsxs66(Stack_default, { direction: "row", alignItems: "center", children: [
-          /* @__PURE__ */ jsx131(
+          /* @__PURE__ */ jsx130(
             IconButton_default,
             {
               iconId: "chevron-left",
@@ -24012,7 +23960,7 @@ var PageSelector = ({
               disabled: currentPage <= 1
             }
           ),
-          /* @__PURE__ */ jsx131(
+          /* @__PURE__ */ jsx130(
             NumberField_default,
             {
               value: currentPage,
@@ -24030,7 +23978,7 @@ var PageSelector = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx131(
+          /* @__PURE__ */ jsx130(
             IconButton_default,
             {
               iconId: "chevron-right",
@@ -24050,13 +23998,13 @@ import Fade from "@mui/material/Fade";
 
 // src/components/progress/LinearProgress.tsx
 import MuiLinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 var LinearProgress = ({
   color: color2,
   backgroundColor: backgroundColor2,
   variant = "indeterminate",
   ...rest
-}) => /* @__PURE__ */ jsx132(
+}) => /* @__PURE__ */ jsx131(
   MuiLinearProgress,
   {
     ...rest,
@@ -24083,7 +24031,7 @@ import * as React75 from "react";
 import MuiCircularProgress from "@mui/material/CircularProgress";
 import Typography3 from "@mui/material/Typography";
 import Box4 from "@mui/material/Box";
-import { jsx as jsx133, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx132, jsxs as jsxs67 } from "react/jsx-runtime";
 var circularSizes = {
   XS: "20px",
   SM: "24px",
@@ -24122,7 +24070,7 @@ var CircularProgress = ({
         }
       },
       children: [
-        gradientColors && /* @__PURE__ */ jsx133("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx133("defs", { children: /* @__PURE__ */ jsxs67(
+        gradientColors && /* @__PURE__ */ jsx132("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx132("defs", { children: /* @__PURE__ */ jsxs67(
           "linearGradient",
           {
             id: gradientName.current,
@@ -24131,14 +24079,14 @@ var CircularProgress = ({
             x2: "0%",
             y2: "100%",
             children: [
-              /* @__PURE__ */ jsx133(
+              /* @__PURE__ */ jsx132(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: gradientColors.startColor
                 }
               ),
-              /* @__PURE__ */ jsx133(
+              /* @__PURE__ */ jsx132(
                 "stop",
                 {
                   offset: "100%",
@@ -24148,7 +24096,7 @@ var CircularProgress = ({
             ]
           }
         ) }) }),
-        showCircularBackground && /* @__PURE__ */ jsx133(
+        showCircularBackground && /* @__PURE__ */ jsx132(
           Box4,
           {
             sx: {
@@ -24161,7 +24109,7 @@ var CircularProgress = ({
                 maxHeight: circularSizes[size]
               }
             },
-            children: /* @__PURE__ */ jsx133(
+            children: /* @__PURE__ */ jsx132(
               MuiCircularProgress,
               {
                 variant: "determinate",
@@ -24173,7 +24121,7 @@ var CircularProgress = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx132(
           MuiCircularProgress,
           {
             variant,
@@ -24202,7 +24150,7 @@ var CircularProgress = ({
             thickness
           }
         ),
-        variant !== "indeterminate" && /* @__PURE__ */ jsx133(
+        variant !== "indeterminate" && /* @__PURE__ */ jsx132(
           Box4,
           {
             sx: {
@@ -24217,7 +24165,7 @@ var CircularProgress = ({
               height: circularSizes[size],
               width: circularSizes[size]
             },
-            children: typeof label === "string" ? /* @__PURE__ */ jsx133(
+            children: typeof label === "string" ? /* @__PURE__ */ jsx132(
               Typography3,
               {
                 variant: typographyVariant,
@@ -24237,7 +24185,7 @@ var CircularProgress_default = CircularProgress;
 // src/components/progress/DonutProgress.tsx
 import Box5 from "@mui/material/Box";
 import { Stack as Stack10 } from "@mui/material";
-import { jsx as jsx134, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs68 } from "react/jsx-runtime";
 var CIRCULAR_PROGRESS_PERCENTAGE = 85;
 var variants2 = {
   empty: {
@@ -24274,8 +24222,8 @@ var DonutProgress = ({
   showPercentageSymbol
 }) => {
   const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs68(Stack10, { direction: "row", alignItems: "center", position: "relative", children: [
-    /* @__PURE__ */ jsx134(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
-    /* @__PURE__ */ jsx134(
+    /* @__PURE__ */ jsx133(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
+    /* @__PURE__ */ jsx133(
       Typography_default,
       {
         variant: "tooltip",
@@ -24294,7 +24242,7 @@ var DonutProgress = ({
         width: "fit-content"
       },
       children: [
-        /* @__PURE__ */ jsx134(
+        /* @__PURE__ */ jsx133(
           CircularProgress_default,
           {
             variant: "determinate",
@@ -24310,7 +24258,7 @@ var DonutProgress = ({
             color: variants2[variant].emptyColor
           }
         ),
-        /* @__PURE__ */ jsx134(
+        /* @__PURE__ */ jsx133(
           Box5,
           {
             sx: {
@@ -24318,7 +24266,7 @@ var DonutProgress = ({
               top: 0,
               left: 0
             },
-            children: /* @__PURE__ */ jsx134(
+            children: /* @__PURE__ */ jsx133(
               CircularProgress_default,
               {
                 variant: "determinate",
@@ -24333,7 +24281,7 @@ var DonutProgress = ({
             )
           }
         ),
-        variant !== "empty" && labelChip && /* @__PURE__ */ jsx134(
+        variant !== "empty" && labelChip && /* @__PURE__ */ jsx133(
           Box5,
           {
             sx: {
@@ -24350,7 +24298,7 @@ var DonutProgress = ({
               justifyContent: "center",
               boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsx134(
+            children: /* @__PURE__ */ jsx133(
               Typography_default,
               {
                 variant: "tooltip",
@@ -24367,14 +24315,14 @@ var DonutProgress = ({
 var DonutProgress_default = DonutProgress;
 
 // src/components/loader/Loader.tsx
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var Loader = ({
   isVisible,
   zIndex = 1e4,
   size,
   hideProgress = false,
   sx
-}) => /* @__PURE__ */ jsx135(Fade, { in: isVisible, children: /* @__PURE__ */ jsx135(
+}) => /* @__PURE__ */ jsx134(Fade, { in: isVisible, children: /* @__PURE__ */ jsx134(
   Box_default2,
   {
     sx: {
@@ -24390,7 +24338,7 @@ var Loader = ({
       backgroundColor: whiteOpacity32,
       ...sx
     },
-    children: !hideProgress && /* @__PURE__ */ jsx135(CircularProgress_default, { size })
+    children: !hideProgress && /* @__PURE__ */ jsx134(CircularProgress_default, { size })
   }
 ) });
 var Loader_default = Loader;
@@ -24403,14 +24351,14 @@ import "katex/dist/katex.min.css";
 
 // src/components/markdown/KatexRenderer.tsx
 import katex from "katex";
-import { jsx as jsx136, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs69 } from "react/jsx-runtime";
 var KatexRenderer = ({ children, block }) => {
   try {
     const html2 = katex.renderToString(children, {
       throwOnError: false,
       displayMode: block
     });
-    return /* @__PURE__ */ jsx136("span", { dangerouslySetInnerHTML: { __html: html2 } });
+    return /* @__PURE__ */ jsx135("span", { dangerouslySetInnerHTML: { __html: html2 } });
   } catch (err) {
     return /* @__PURE__ */ jsxs69("pre", { style: { color: "red" }, children: [
       "KaTeX error: $",
@@ -24421,7 +24369,7 @@ var KatexRenderer = ({ children, block }) => {
 var KatexRenderer_default = KatexRenderer;
 
 // src/components/markdown/MarkdownRenderer.tsx
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx136 } from "react/jsx-runtime";
 var MarkdownContainer = styled8("div")(
   ({
     color: color2,
@@ -24525,11 +24473,11 @@ var renderWithMath = (text) => {
     const inline = match[2];
     if (block !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx137(KatexRenderer_default, { block: true, children: block.trim() }, start)
+        /* @__PURE__ */ jsx136(KatexRenderer_default, { block: true, children: block.trim() }, start)
       );
     } else if (inline !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx137(KatexRenderer_default, { children: inline.trim() }, start)
+        /* @__PURE__ */ jsx136(KatexRenderer_default, { children: inline.trim() }, start)
       );
     }
     lastIndex = regex.lastIndex;
@@ -24559,11 +24507,11 @@ var CodeOrMath = ({ children, ...props }) => {
   if (m) {
     const expr = m[1] || m[2] || "";
     const isBlock = Boolean(m[1]);
-    return /* @__PURE__ */ jsx137(KatexRenderer_default, { block: isBlock, children: expr.trim() });
+    return /* @__PURE__ */ jsx136(KatexRenderer_default, { block: isBlock, children: expr.trim() });
   }
   const maybe = renderWithMath(s);
   const onlyText = maybe.length === 1 && typeof maybe[0] === "string";
-  return onlyText ? /* @__PURE__ */ jsx137("code", { ...props, children }) : /* @__PURE__ */ jsx137("span", { children: maybe });
+  return onlyText ? /* @__PURE__ */ jsx136("code", { ...props, children }) : /* @__PURE__ */ jsx136("span", { children: maybe });
 };
 var escapeInlineUnderscores = (s) => s.replace(/(\S)_(\S)/g, "$1\\_$2");
 var MarkdownRenderer = ({
@@ -24573,19 +24521,19 @@ var MarkdownRenderer = ({
 }) => {
   const protectedText = escapeInlineUnderscores(text || "");
   const normalized = normalizeLatexDelimiters(protectedText);
-  return /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx136(
     MarkdownContainer,
     {
       className: `markdown-container ${className || ""}`,
       ...rest,
-      children: /* @__PURE__ */ jsx137(
+      children: /* @__PURE__ */ jsx136(
         Markdown,
         {
           options: {
             forceBlock: true,
             overrides: {
               p: {
-                component: ({ children, ...props }) => /* @__PURE__ */ jsx137("p", { ...props, children: renderChildrenWithMath(children) })
+                component: ({ children, ...props }) => /* @__PURE__ */ jsx136("p", { ...props, children: renderChildrenWithMath(children) })
               },
               code: { component: CodeOrMath }
             }
@@ -24600,7 +24548,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
 import { Drawer as Drawer2 } from "@mui/material";
-import { Fragment as Fragment32, jsx as jsx138, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx137, jsxs as jsxs70 } from "react/jsx-runtime";
 var Navbar = ({
   topContent,
   bottomContent,
@@ -24624,8 +24572,8 @@ var Navbar = ({
       },
       className: "Slim-Vertical-Scroll",
       children: [
-        /* @__PURE__ */ jsx138(Box_default2, { children: topContent }),
-        /* @__PURE__ */ jsx138(Box_default2, { children: bottomContent })
+        /* @__PURE__ */ jsx137(Box_default2, { children: topContent }),
+        /* @__PURE__ */ jsx137(Box_default2, { children: bottomContent })
       ]
     }
   ),
@@ -24652,8 +24600,8 @@ var Navbar = ({
       },
       onClose,
       children: [
-        /* @__PURE__ */ jsx138("div", { children: drawerTopContent }),
-        /* @__PURE__ */ jsx138("div", { children: drawerBottomContent })
+        /* @__PURE__ */ jsx137("div", { children: drawerTopContent }),
+        /* @__PURE__ */ jsx137("div", { children: drawerBottomContent })
       ]
     }
   )
@@ -24663,7 +24611,7 @@ var Navbar_default = Navbar;
 // src/components/navbar/NavbarButton.tsx
 import * as React77 from "react";
 import { Box as Box6, ButtonBase as ButtonBase2 } from "@mui/material";
-import { jsx as jsx139, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs71 } from "react/jsx-runtime";
 var NavbarButton = React77.forwardRef(
   function NavbarButton2({
     iconId,
@@ -24688,7 +24636,7 @@ var NavbarButton = React77.forwardRef(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx139(
+            /* @__PURE__ */ jsx138(
               Box6,
               {
                 sx: {
@@ -24704,7 +24652,7 @@ var NavbarButton = React77.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ jsx139(
+            /* @__PURE__ */ jsx138(
               Box6,
               {
                 sx: {
@@ -24737,7 +24685,7 @@ var NavbarButton = React77.forwardRef(
         },
         children: [
           srcUrl ? getButtonContent(
-            /* @__PURE__ */ jsx139(
+            /* @__PURE__ */ jsx138(
               Avatar_default,
               {
                 className: "NavbarButton-icon",
@@ -24747,7 +24695,7 @@ var NavbarButton = React77.forwardRef(
               }
             )
           ) : getButtonContent(
-            /* @__PURE__ */ jsx139(
+            /* @__PURE__ */ jsx138(
               Icon_default,
               {
                 id: iconId,
@@ -24763,7 +24711,7 @@ var NavbarButton = React77.forwardRef(
               }
             )
           ),
-          badgeIconProps && /* @__PURE__ */ jsx139(
+          badgeIconProps && /* @__PURE__ */ jsx138(
             Icon_default,
             {
               ...badgeIconProps,
@@ -24785,8 +24733,8 @@ var NavbarButton = React77.forwardRef(
 var NavbarButton_default = NavbarButton;
 
 // src/components/navbar/NavbarHeader.tsx
-import { jsx as jsx140 } from "react/jsx-runtime";
-var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx140(
+import { jsx as jsx139 } from "react/jsx-runtime";
+var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx139(
   Typography_default,
   {
     sx: {
@@ -24808,10 +24756,10 @@ var NavbarHeader_default = NavbarHeader;
 // src/components/navbar/NavbarLogo.tsx
 import * as React78 from "react";
 import { ButtonBase as ButtonBase3 } from "@mui/material";
-import { jsx as jsx141 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
 var NavbarLogo = React78.forwardRef(
   function NavbarButton3({ src, ...rest }, ref) {
-    return /* @__PURE__ */ jsx141(
+    return /* @__PURE__ */ jsx140(
       ButtonBase3,
       {
         ref,
@@ -24822,7 +24770,7 @@ var NavbarLogo = React78.forwardRef(
           borderBottom: `1px solid ${grey200}`,
           boxSizing: "border-box"
         },
-        children: /* @__PURE__ */ jsx141("img", { src, width: "32px", height: "32px" })
+        children: /* @__PURE__ */ jsx140("img", { src, width: "32px", height: "32px" })
       }
     );
   }
@@ -24831,7 +24779,7 @@ var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
 import * as React79 from "react";
-import { Fragment as Fragment33, jsx as jsx142, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx141, jsxs as jsxs72 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
   elementRef,
@@ -24873,7 +24821,7 @@ var DonutFocusOverlay = ({
   const externalTopHalfCircle = `${externalCircleRadius} ${externalCircleRadius} 0 0 0 ${startPointX} ${startPointY}`;
   const path = `path("M ${startPointX} ${startPointY} A ${externalBottomHalfCircle} m ${-donutWidth} 0 A ${internalBottomHalfCircle} A ${internalTopHalfCircle} m ${donutWidth} 0 A ${externalTopHalfCircle} Z")`;
   return /* @__PURE__ */ jsxs72(Fragment33, { children: [
-    /* @__PURE__ */ jsx142(
+    /* @__PURE__ */ jsx141(
       Box_default2,
       {
         sx: {
@@ -24890,7 +24838,7 @@ var DonutFocusOverlay = ({
         }
       }
     ),
-    chipLabel && /* @__PURE__ */ jsx142(
+    chipLabel && /* @__PURE__ */ jsx141(
       Chip_default,
       {
         label: chipLabel,
@@ -24917,7 +24865,7 @@ var DonutFocusOverlay = ({
 var DonutFocusOverlay_default = DonutFocusOverlay;
 
 // src/components/pager/Pager.tsx
-import { Fragment as Fragment34, jsx as jsx143, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx142, jsxs as jsxs73 } from "react/jsx-runtime";
 var Pager = ({
   page,
   pageSize,
@@ -24931,10 +24879,10 @@ var Pager = ({
   const to = Math.min(current + pageSize, total);
   const pages = Math.max(Math.ceil(total / pageSize), 1);
   const options = [...Array(pages).keys()].map((i) => ({ value: i + 1 }));
-  const Label = ({ children }) => /* @__PURE__ */ jsx143(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
+  const Label = ({ children }) => /* @__PURE__ */ jsx142(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
   return /* @__PURE__ */ jsxs73(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx143(Label, { children: t("PAGER.PAGE") }),
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx142(Label, { children: t("PAGER.PAGE") }),
+    /* @__PURE__ */ jsx142(
       Select_default,
       {
         value: page,
@@ -24944,8 +24892,8 @@ var Pager = ({
       }
     ),
     allowedPageSizes && /* @__PURE__ */ jsxs73(Fragment34, { children: [
-      /* @__PURE__ */ jsx143(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
-      /* @__PURE__ */ jsx143(
+      /* @__PURE__ */ jsx142(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
+      /* @__PURE__ */ jsx142(
         Select_default,
         {
           value: pageSize,
@@ -24968,7 +24916,7 @@ var Pager = ({
       " ",
       total
     ] }),
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx142(
       IconButton_default,
       {
         disabled: page <= 1,
@@ -24976,7 +24924,7 @@ var Pager = ({
         onClick: () => onPageChange(page - 1, pageSize)
       }
     ),
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx142(
       IconButton_default,
       {
         disabled: page > total / pageSize,
@@ -24991,7 +24939,7 @@ var Pager_default = Pager;
 // src/components/scrollable/HorizontalScrollable.tsx
 import { ButtonBase as ButtonBase4 } from "@mui/material";
 import * as React80 from "react";
-import { jsx as jsx144, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs74 } from "react/jsx-runtime";
 var HorizontalScrollable = ({
   style: style3,
   children,
@@ -25041,7 +24989,7 @@ var HorizontalScrollable = ({
     current.scrollBy(stepDistance, 0);
   };
   return /* @__PURE__ */ jsxs74(Box_default2, { sx: { position: "relative", ...style3 }, children: [
-    /* @__PURE__ */ jsx144(
+    /* @__PURE__ */ jsx143(
       ButtonBase4,
       {
         sx: {
@@ -25058,10 +25006,10 @@ var HorizontalScrollable = ({
           ...isLeftArrowHidden && { display: "none" }
         },
         onClick: () => leftScroll(),
-        children: /* @__PURE__ */ jsx144(Icon_default, { id: "chevron-left" })
+        children: /* @__PURE__ */ jsx143(Icon_default, { id: "chevron-left" })
       }
     ),
-    /* @__PURE__ */ jsx144(
+    /* @__PURE__ */ jsx143(
       Box_default2,
       {
         ref: horizontalContainerRef,
@@ -25080,7 +25028,7 @@ var HorizontalScrollable = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx144(
+    /* @__PURE__ */ jsx143(
       ButtonBase4,
       {
         sx: {
@@ -25097,7 +25045,7 @@ var HorizontalScrollable = ({
           ...isRightArrowHidden && { display: "none" }
         },
         onClick: () => rightScroll(),
-        children: /* @__PURE__ */ jsx144(Icon_default, { id: "chevron-right" })
+        children: /* @__PURE__ */ jsx143(Icon_default, { id: "chevron-right" })
       }
     )
   ] });
@@ -25108,12 +25056,12 @@ var HorizontalScrollable_default = HorizontalScrollable;
 import {
   SnackbarProvider as NotistackSnackbarProvider
 } from "notistack";
-import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 var SnackbarProvider = ({
   children,
   maxSnack = 3,
   domRoot
-}) => /* @__PURE__ */ jsx145(
+}) => /* @__PURE__ */ jsx144(
   NotistackSnackbarProvider,
   {
     maxSnack,
@@ -25134,7 +25082,7 @@ import {
 import * as React81 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx146, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs75 } from "react/jsx-runtime";
 var sizeStyles5 = {
   M: {
     width: "344px",
@@ -25177,7 +25125,7 @@ var Snackbar = React81.forwardRef(
     const closeClickHandler = React81.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
-    return /* @__PURE__ */ jsx146(
+    return /* @__PURE__ */ jsx145(
       SnackbarContent,
       {
         ref,
@@ -25202,7 +25150,7 @@ var Snackbar = React81.forwardRef(
             spacing: 2,
             sx: { width: "100%", alignItems: "center" },
             children: [
-              withIcon && /* @__PURE__ */ jsx146(
+              withIcon && /* @__PURE__ */ jsx145(
                 Box_default2,
                 {
                   sx: {
@@ -25210,10 +25158,10 @@ var Snackbar = React81.forwardRef(
                     flexShrink: 0,
                     color: iconColors[severity]
                   },
-                  children: /* @__PURE__ */ jsx146(Icon_default, { id: severityIcons[severity] })
+                  children: /* @__PURE__ */ jsx145(Icon_default, { id: severityIcons[severity] })
                 }
               ),
-              /* @__PURE__ */ jsx146(
+              /* @__PURE__ */ jsx145(
                 Typography4,
                 {
                   variant: "body2",
@@ -25221,7 +25169,7 @@ var Snackbar = React81.forwardRef(
                   children: message
                 }
               ),
-              actionText && /* @__PURE__ */ jsx146(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx146(
+              actionText && /* @__PURE__ */ jsx145(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx145(
                 Button_default,
                 {
                   sx: {
@@ -25236,7 +25184,7 @@ var Snackbar = React81.forwardRef(
                   onClick: actionClickHandler
                 }
               ) }),
-              /* @__PURE__ */ jsx146(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx146(
+              /* @__PURE__ */ jsx145(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx145(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -25261,7 +25209,7 @@ var Snackbar_default = Snackbar;
 
 // src/components/snackbar/enqueueSnackbar.tsx
 import { closeSnackbar as closeSnackbar2 } from "notistack";
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx146 } from "react/jsx-runtime";
 var enqueueSnackbar = (message, options = {}) => {
   const {
     persist,
@@ -25277,7 +25225,7 @@ var enqueueSnackbar = (message, options = {}) => {
     autoHideDuration: autoHideDurationMs ?? 1e4,
     persist: persist ?? false,
     content(key, message2) {
-      return /* @__PURE__ */ jsx147(
+      return /* @__PURE__ */ jsx146(
         Snackbar_default,
         {
           identifierKey: key,
@@ -25294,7 +25242,7 @@ var enqueueSnackbar = (message, options = {}) => {
 
 // src/components/tab/TabButton.tsx
 import MuiTab from "@mui/material/Tab";
-import { jsx as jsx148 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "react/jsx-runtime";
 var TabButton = ({
   children,
   disabled = false,
@@ -25303,10 +25251,10 @@ var TabButton = ({
   dataTestId,
   disableUppercase = false,
   ...rest
-}) => /* @__PURE__ */ jsx148(
+}) => /* @__PURE__ */ jsx147(
   MuiTab,
   {
-    label: /* @__PURE__ */ jsx148(
+    label: /* @__PURE__ */ jsx147(
       "div",
       {
         style: {
@@ -25344,7 +25292,7 @@ import MuiTabs from "@mui/material/Tabs";
 // src/components/layout/SwipeableViews.tsx
 import * as React82 from "react";
 import { useEffect as useEffect21, useRef as useRef22, useState as useState31 } from "react";
-import { jsx as jsx149 } from "react/jsx-runtime";
+import { jsx as jsx148 } from "react/jsx-runtime";
 var styles = {
   container: {
     maxHeight: "100%",
@@ -25415,7 +25363,7 @@ function SwipeableViews({
       return () => cancelAnimationFrame(animationFrame);
     }
   }, [index]);
-  return /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsx148(
     "div",
     {
       ...rootProps,
@@ -25438,7 +25386,7 @@ function SwipeableViews({
           );
         }, 100);
       },
-      children: React82.Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx149(
+      children: React82.Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx148(
         "div",
         {
           className: "Slim-Vertical-Scroll",
@@ -25451,7 +25399,7 @@ function SwipeableViews({
 }
 
 // src/components/tab/Tabs.tsx
-import { jsx as jsx150, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx149, jsxs as jsxs76 } from "react/jsx-runtime";
 var Tabs = ({
   tabButtons,
   children,
@@ -25487,7 +25435,7 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx149(
           MuiTabs,
           {
             value: currentTabIndex ?? value,
@@ -25513,7 +25461,7 @@ var Tabs = ({
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx149(
           Box_default2,
           {
             sx: {
@@ -25522,7 +25470,7 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx150(
+            children: /* @__PURE__ */ jsx149(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
@@ -25550,8 +25498,8 @@ var Tabs = ({
 var Tabs_default = Tabs;
 
 // src/components/tab/TabContent.tsx
-import { jsx as jsx151 } from "react/jsx-runtime";
-var TabContent = ({ children }) => /* @__PURE__ */ jsx151(
+import { jsx as jsx150 } from "react/jsx-runtime";
+var TabContent = ({ children }) => /* @__PURE__ */ jsx150(
   Box_default2,
   {
     sx: {
@@ -25568,8 +25516,8 @@ import {
   TableRow as MuiTableRow,
   TableCell as MuiTableCell
 } from "@mui/material";
-import { jsx as jsx152 } from "react/jsx-runtime";
-var TableDivider = () => /* @__PURE__ */ jsx152(MuiTableRow, { children: /* @__PURE__ */ jsx152(
+import { jsx as jsx151 } from "react/jsx-runtime";
+var TableDivider = () => /* @__PURE__ */ jsx151(MuiTableRow, { children: /* @__PURE__ */ jsx151(
   MuiTableCell,
   {
     colSpan: 1e3,
@@ -25582,8 +25530,8 @@ var TableDivider_default = TableDivider;
 import {
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { jsx as jsx153 } from "react/jsx-runtime";
-var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx153(MuiTableSortLabel, { ...rest, children });
+import { jsx as jsx152 } from "react/jsx-runtime";
+var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx152(MuiTableSortLabel, { ...rest, children });
 var TableSortLabel_default = TableSortLabel;
 
 // src/components/table/Table.tsx
@@ -25591,21 +25539,21 @@ import {
   TableContainer,
   Table as MuiTable
 } from "@mui/material";
-import { jsx as jsx154 } from "react/jsx-runtime";
-var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx154(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx154(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
+import { jsx as jsx153 } from "react/jsx-runtime";
+var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx153(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx153(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
 var Table_default = Table;
 
 // src/components/table/TableBody.tsx
 import { TableBody as MuiTableBody } from "@mui/material";
-import { jsx as jsx155 } from "react/jsx-runtime";
-var TableBody = ({ children }) => /* @__PURE__ */ jsx155(MuiTableBody, { children });
+import { jsx as jsx154 } from "react/jsx-runtime";
+var TableBody = ({ children }) => /* @__PURE__ */ jsx154(MuiTableBody, { children });
 var TableBody_default = TableBody;
 
 // src/components/table/TableCell.tsx
 import {
   TableCell as MuiTableCell2
 } from "@mui/material";
-import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx155 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   size = "M",
@@ -25616,7 +25564,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx156(
+}) => /* @__PURE__ */ jsx155(
   MuiTableCell2,
   {
     ...rest,
@@ -25641,7 +25589,7 @@ var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
 import * as React84 from "react";
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx156 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const { t } = useTranslation();
   const [isCopied, setIsCopied] = React84.useState(false);
@@ -25659,7 +25607,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const getIconId = () => !isCopied ? "content-copy" : "check";
   const iconHiddenClass = "icon-hidden";
   const iconCopiedClass = "icon-copied";
-  return /* @__PURE__ */ jsx157(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx157(
+  return /* @__PURE__ */ jsx156(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx156(
     Stack_default,
     {
       direction: "row",
@@ -25668,7 +25616,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
       onMouseEnter: () => setShowIcon(true),
       onMouseLeave: () => setShowIcon(false),
       onClick: manageButtonClicked,
-      children: /* @__PURE__ */ jsx157(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx157(
+      children: /* @__PURE__ */ jsx156(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx156(
         Button_default,
         {
           className: isCopied ? iconCopiedClass : !showIcon ? iconHiddenClass : "",
@@ -25698,21 +25646,21 @@ var TableCellCopy_default = TableCellCopy;
 
 // src/components/table/TableHead.tsx
 import { TableHead as MuiTableHead } from "@mui/material";
-import { jsx as jsx158 } from "react/jsx-runtime";
-var TableHead = ({ children }) => /* @__PURE__ */ jsx158(MuiTableHead, { children });
+import { jsx as jsx157 } from "react/jsx-runtime";
+var TableHead = ({ children }) => /* @__PURE__ */ jsx157(MuiTableHead, { children });
 var TableHead_default = TableHead;
 
 // src/components/table/TableRow.tsx
 import {
   TableRow as MuiTableRow2
 } from "@mui/material";
-import { jsx as jsx159 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
 var TableRow = ({
   children,
   isFollowedByNestedTable = false,
   fadeInLeftAnimation = false,
   sx
-}) => /* @__PURE__ */ jsx159(
+}) => /* @__PURE__ */ jsx158(
   MuiTableRow2,
   {
     className: `${isFollowedByNestedTable ? "Followed-By-Nested-Table" : ""} ${fadeInLeftAnimation ? "animated fadeInLeft" : ""}`,
@@ -25724,14 +25672,14 @@ var TableRow_default = TableRow;
 
 // src/components/table/NestedTable.tsx
 import { Collapse as Collapse7 } from "@mui/material";
-import { jsx as jsx160 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
 var NestedTable = ({
   colSpan,
   children,
   className = "",
   sx,
   isVisible = true
-}) => /* @__PURE__ */ jsx160(TableRow_default, { children: /* @__PURE__ */ jsx160(
+}) => /* @__PURE__ */ jsx159(TableRow_default, { children: /* @__PURE__ */ jsx159(
   TableCell_default,
   {
     colSpan,
@@ -25740,14 +25688,14 @@ var NestedTable = ({
       height: "auto",
       ...!isVisible && { borderBottom: "none" }
     },
-    children: /* @__PURE__ */ jsx160(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx160(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx160(Paper_default, { children: /* @__PURE__ */ jsx160(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
+    children: /* @__PURE__ */ jsx159(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx159(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx159(Paper_default, { children: /* @__PURE__ */ jsx159(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
   }
 ) });
 var NestedTable_default = NestedTable;
 
 // src/components/toolbar/ToolbarBreadcrumb.tsx
-import { jsx as jsx161 } from "react/jsx-runtime";
-var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx161(
+import { jsx as jsx160 } from "react/jsx-runtime";
+var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx160(
   Stack_default,
   {
     direction: "row",
@@ -25757,7 +25705,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx161(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx161(
+          /* @__PURE__ */ jsx160(
             Typography_default,
             {
               color: grey500,
@@ -25781,9 +25729,9 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
 import * as React85 from "react";
-import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
 var ToolbarBreadcrumbButton = React85.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx162(
+  return /* @__PURE__ */ jsx161(
     ButtonBase5,
     {
       className: `Cn-ToolbarBreadcrumbButton ${className}`,
@@ -25802,14 +25750,14 @@ var ToolbarBreadcrumbButton = React85.forwardRef(function ToolbarBreadcrumbButto
         }
       },
       ...rest,
-      children: /* @__PURE__ */ jsx162(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
+      children: /* @__PURE__ */ jsx161(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
     }
   );
 });
 var ToolbarBreadcrumbButton_default = ToolbarBreadcrumbButton;
 
 // src/components/toolbar/Toolbar.tsx
-import { jsx as jsx163, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx162, jsxs as jsxs77 } from "react/jsx-runtime";
 var Toolbar = ({
   children,
   rightActions,
@@ -25850,7 +25798,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx163(
+            leftActions && /* @__PURE__ */ jsx162(
               Box_default2,
               {
                 className: `Cn-Toolbar-left`,
@@ -25860,7 +25808,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx163(
+            /* @__PURE__ */ jsx162(
               Box_default2,
               {
                 className: `Cn-Toolbar-children`,
@@ -25875,7 +25823,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx163(
+      rightActions && /* @__PURE__ */ jsx162(
         Box_default2,
         {
           className: `Cn-Toolbar-right`,
@@ -25896,7 +25844,7 @@ var Toolbar_default = Toolbar;
 // src/components/toolbar/ToolbarTitle.tsx
 import * as React86 from "react";
 import { useState as useState34 } from "react";
-import { jsx as jsx164, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs78 } from "react/jsx-runtime";
 var ToolbarTitle = React86.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
@@ -25906,7 +25854,7 @@ var ToolbarTitle = React86.forwardRef(function ToolbarTitle2({
 }, ref) {
   const textElementRef = React86.useRef(null);
   const [showHoverActions, setShowHoverActions] = useState34(false);
-  return /* @__PURE__ */ jsx164(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx164(
+  return /* @__PURE__ */ jsx163(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx163(
     TextEllipsisTooltip_default,
     {
       title: title ?? "\xA0",
@@ -25929,7 +25877,7 @@ var ToolbarTitle = React86.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx164(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx163(
               Box_default2,
               {
                 sx: {
@@ -25958,13 +25906,13 @@ var Slide_default = Slide;
 
 // src/components/widget/WidgetLegendItem.tsx
 import { ButtonBase as ButtonBase6 } from "@mui/material";
-import { jsx as jsx165, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs79 } from "react/jsx-runtime";
 var WidgetLegendItem = ({
   groupLabel,
   legendDirection = "column",
   items = [],
   onClick
-}) => /* @__PURE__ */ jsx165(
+}) => /* @__PURE__ */ jsx164(
   ButtonBase6,
   {
     tabIndex: onClick ? 0 : -1,
@@ -25990,7 +25938,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx165(
+          groupLabel && /* @__PURE__ */ jsx164(
             Typography_default,
             {
               variant: "overline",
@@ -26022,7 +25970,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx165(
+                    iconColor && /* @__PURE__ */ jsx164(
                       Icon_default,
                       {
                         id: iconId,
@@ -26033,7 +25981,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx165(
+                    label && /* @__PURE__ */ jsx164(
                       Typography_default,
                       {
                         variant: "caption",
@@ -26042,7 +25990,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx165(
+                    value && /* @__PURE__ */ jsx164(
                       Typography_default,
                       {
                         sx: style3,
@@ -26051,7 +25999,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx165(
+                    incrementLabelValue && /* @__PURE__ */ jsx164(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -26077,8 +26025,8 @@ var WidgetLegendItem_default = WidgetLegendItem;
 
 // src/components/widget/Widget.tsx
 import MuiCard2 from "@mui/material/Card";
-import { jsx as jsx166 } from "react/jsx-runtime";
-var Widget = ({ children }) => /* @__PURE__ */ jsx166(
+import { jsx as jsx165 } from "react/jsx-runtime";
+var Widget = ({ children }) => /* @__PURE__ */ jsx165(
   MuiCard2,
   {
     variant: "elevation",
@@ -26102,8 +26050,8 @@ var Widget = ({ children }) => /* @__PURE__ */ jsx166(
 var Widget_default = Widget;
 
 // src/components/widget/WidgetActions.tsx
-import { jsx as jsx167 } from "react/jsx-runtime";
-var WidgetActions = ({ children }) => /* @__PURE__ */ jsx167(
+import { jsx as jsx166 } from "react/jsx-runtime";
+var WidgetActions = ({ children }) => /* @__PURE__ */ jsx166(
   Box_default2,
   {
     sx: {
@@ -26117,8 +26065,8 @@ var WidgetActions = ({ children }) => /* @__PURE__ */ jsx167(
 var WidgetActions_default = WidgetActions;
 
 // src/components/widget/WidgetTitle.tsx
-import { jsx as jsx168 } from "react/jsx-runtime";
-var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx168(
+import { jsx as jsx167 } from "react/jsx-runtime";
+var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx167(
   Box_default2,
   {
     sx: {
@@ -26128,7 +26076,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx168(
+    children: /* @__PURE__ */ jsx167(
       Typography_default,
       {
         variant: "subtitle2",
@@ -26142,12 +26090,12 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       }
     )
   }
-) : /* @__PURE__ */ jsx168("span", {});
+) : /* @__PURE__ */ jsx167("span", {});
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
 import * as React87 from "react";
-import { Fragment as Fragment35, jsx as jsx169, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx168, jsxs as jsxs80 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
   L: 500,
@@ -26262,7 +26210,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
     }, 750);
   };
   return /* @__PURE__ */ jsxs80(Fragment35, { children: [
-    isDraggingState && /* @__PURE__ */ jsx169(
+    isDraggingState && /* @__PURE__ */ jsx168(
       Box_default2,
       {
         sx: {
@@ -26278,7 +26226,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx169(
+    /* @__PURE__ */ jsx168(
       Box_default2,
       {
         ref: overlayRef,
@@ -26320,19 +26268,19 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                   onMouseDown: handleMouseDown,
                   minHeight: "44px",
                   children: [
-                    /* @__PURE__ */ jsx169(
+                    /* @__PURE__ */ jsx168(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
-                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx169(
+                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx168(
                           Tooltip_default,
                           {
                             title: t("MINIMIZABLE_WINDOW.GO_BACK"),
                             zIndex: 999999,
                             placement: "top",
-                            children: /* @__PURE__ */ jsx169(
+                            children: /* @__PURE__ */ jsx168(
                               IconButton_default,
                               {
                                 size: iconSizes4,
@@ -26345,7 +26293,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                         ) : backButton)
                       }
                     ),
-                    /* @__PURE__ */ jsx169(
+                    /* @__PURE__ */ jsx168(
                       Box_default2,
                       {
                         sx: {
@@ -26353,7 +26301,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                           left: "50%",
                           transform: "translateX(-50%)"
                         },
-                        children: typeof title === "string" ? /* @__PURE__ */ jsx169(Typography_default, { children: title }) : title
+                        children: typeof title === "string" ? /* @__PURE__ */ jsx168(Typography_default, { children: title }) : title
                       }
                     ),
                     /* @__PURE__ */ jsxs80(
@@ -26363,13 +26311,13 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
-                          /* @__PURE__ */ jsx169(Box_default2, { children: /* @__PURE__ */ jsx169(
+                          /* @__PURE__ */ jsx168(Box_default2, { children: /* @__PURE__ */ jsx168(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.MINIMIZE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx169(
+                              children: /* @__PURE__ */ jsx168(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -26385,13 +26333,13 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                               )
                             }
                           ) }),
-                          closeable && /* @__PURE__ */ jsx169(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx169(
+                          closeable && /* @__PURE__ */ jsx168(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx168(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx169(
+                              children: /* @__PURE__ */ jsx168(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -26408,7 +26356,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx169(
+              /* @__PURE__ */ jsx168(
                 Stack_default,
                 {
                   sx: {
@@ -26632,6 +26580,7 @@ export {
   getDateInputFormatForLocale,
   getDatesFromDateInterval,
   getDisplayEndDate,
+  getIconPath,
   getPhoneWithoutCountryCode,
   getSafeResizeObserverCallback,
   getWeekDayNamesForLocale,