@connectif/ui-components 9.0.7 → 9.1.1

package/dist/index.js

@@ -12811,6 +12811,7 @@ var BarChart2 = ({
   categories = [],
   labelColor = grey400,
   gridLineColor = grey200,
+  barBorderRadius = 4,
   gridLabelSize = "sm",
   chartRef,
   yAxisLabelFormatter = (value) => `${value}`,
@@ -12829,10 +12830,10 @@ var BarChart2 = ({
     barGap: 0,
     backgroundStyle: {
       color: alpha2(grey200, 0.32),
-      borderRadius: [4, 4, 0, 0]
+      borderRadius: [barBorderRadius, barBorderRadius, 0, 0]
     },
     itemStyle: {
-      borderRadius: [4, 4, 0, 0]
+      borderRadius: [barBorderRadius, barBorderRadius, 0, 0]
     },
     label: {
       formatter(params) {
@@ -12865,7 +12866,7 @@ var BarChart2 = ({
       value: value !== 0 ? value : null,
       itemStyle: {
         color: color2,
-        borderRadius: value > 0 ? [4, 4, 0, 0] : [0, 0, 4, 4]
+        borderRadius: value > 0 ? [barBorderRadius, barBorderRadius, 0, 0] : [0, 0, barBorderRadius, barBorderRadius]
       },
       label: {
         show: !!(incrementLabelValue && incrementLabelType),
@@ -12919,7 +12920,7 @@ var BarChart2 = ({
     value: (comparisonValue || 0) !== 0 ? comparisonValue : null,
     itemStyle: {
       color: comparisonColor,
-      borderRadius: (comparisonValue || 0) > 0 ? [4, 4, 0, 0] : [0, 0, 4, 4]
+      borderRadius: (comparisonValue || 0) > 0 ? [barBorderRadius, barBorderRadius, 0, 0] : [0, 0, barBorderRadius, barBorderRadius]
     },
     label: {
       show: false
@@ -12995,12 +12996,14 @@ var BarChart2 = ({
               ({
                 tooltipValue,
                 value,
+                color: itemColor,
                 comparisonTooltipValue,
                 comparisonValue,
+                comparisonColor: itemComparisonColor,
                 incrementLabelType,
                 incrementLabelValue
               }) => comparisonValue < value ? getOptionsForMainBar({
-                color: color2,
+                color: itemColor ?? color2,
                 tooltipName,
                 tooltipValue,
                 value,
@@ -13008,7 +13011,7 @@ var BarChart2 = ({
                 incrementLabelValue,
                 tooltipOrder: serieIndex
               }) : getOptionsForComparisonBar({
-                comparisonColor,
+                comparisonColor: itemComparisonColor ?? comparisonColor,
                 comparisonTooltipName,
                 comparisonTooltipValue,
                 comparisonValue,
@@ -13027,18 +13030,20 @@ var BarChart2 = ({
             ({
               tooltipValue,
               value,
+              color: itemColor,
               comparisonTooltipValue,
               comparisonValue,
+              comparisonColor: itemComparisonColor,
               incrementLabelType,
               incrementLabelValue
             }) => isComparison && comparisonValue < value ? getOptionsForComparisonBar({
-              comparisonColor,
+              comparisonColor: itemComparisonColor ?? comparisonColor,
               comparisonTooltipName,
               comparisonTooltipValue,
               comparisonValue,
               tooltipOrder: serieIndex
             }) : getOptionsForMainBar({
-              color: color2,
+              color: itemColor ?? color2,
               tooltipName,
               tooltipValue,
               value,
@@ -20083,8 +20088,12 @@ var CalendarMonth = ({
   intersectionColor = white,
   onSelect,
   allowKeyboardNavigation = false,
-  focusedDate = null
+  focusedDate = null,
+  todayForegroundColor,
+  hideMonthLabel = false
 }) => {
+  const theme2 = useCustomTheme();
+  const effectiveTodayForegroundColor = todayForegroundColor ?? theme2.palette.primary.main;
   const { timezone } = React54.useContext(IntlContext);
   const firstDayOfMonth = tz2({ year, month, date: 1 }, timezone);
   const dayOfWeek = firstDayOfMonth.day();
@@ -20200,7 +20209,7 @@ var CalendarMonth = ({
           color: fgColor,
           type: "fill"
         } : isToday ? {
-          color: primaryPalette.main,
+          color: effectiveTodayForegroundColor,
           type: "stroke"
         } : void 0
       };
@@ -20226,7 +20235,7 @@ var CalendarMonth = ({
           color: s.color,
           type: "fill"
         } : isToday ? {
-          color: primaryPalette.main,
+          color: effectiveTodayForegroundColor,
           type: "stroke"
         } : void 0
       };
@@ -20235,10 +20244,10 @@ var CalendarMonth = ({
       return {
         ...disabledPart,
         foregroundHighlight: isFocused ? {
-          color: primaryPalette.main,
+          color: theme2.palette.primary.main,
           type: "fill"
         } : isToday ? {
-          color: primaryPalette.main,
+          color: effectiveTodayForegroundColor,
           type: "stroke"
         } : void 0
       };
@@ -20250,12 +20259,12 @@ var CalendarMonth = ({
       sx: {
         display: "grid",
         gridTemplateColumns: "repeat(7, 1fr)",
-        gridTemplateRows: "repeat(6, 32px)",
+        gridTemplateRows: hideMonthLabel ? "repeat(5, 32px)" : "repeat(6, 32px)",
         height: "100%"
       },
       "data-testid": `calendar-month-${year}-${month}`,
       children: [
-        /* @__PURE__ */ jsx107(
+        !hideMonthLabel && /* @__PURE__ */ jsx107(
           Typography_default,
           {
             sx: {
@@ -20275,7 +20284,8 @@ var CalendarMonth = ({
             )
           }
         ),
-        isMonthInFullLine && indexOfDay > 0 && /* @__PURE__ */ jsx107("span", { style: { gridColumn: `span ${indexOfDay}` }, children: "\xA0" }),
+        !hideMonthLabel && isMonthInFullLine && indexOfDay > 0 && /* @__PURE__ */ jsx107("span", { style: { gridColumn: `span ${indexOfDay}` }, children: "\xA0" }),
+        hideMonthLabel && indexOfDay > 0 && /* @__PURE__ */ jsx107("span", { style: { gridColumn: `span ${indexOfDay}` }, children: "\xA0" }),
         dayList.map((day) => /* @__PURE__ */ jsx107(
           CalendarDay_default,
           {
@@ -20295,16 +20305,28 @@ var CalendarMonth_default = CalendarMonth;
 // src/components/input/DaysOfWeekRow.tsx
 import * as React55 from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
-var DaysOfWeekRow = () => {
+var formatShortLowercaseDay = (day, locale) => day.replace(/[\s.]/g, "").slice(0, 3).toLocaleLowerCase(locale);
+var DaysOfWeekRow = ({
+  transparentBackground = false,
+  dayLabelFormat = "narrow"
+}) => {
+  const theme2 = useCustomTheme();
   const { locale, timezone } = React55.useContext(IntlContext);
   const daysOfWeekLong = React55.useMemo(
     () => getWeekDayNamesForLocale(locale, "long", timezone),
     [locale, timezone]
   );
-  const daysOfWeek = React55.useMemo(
+  const daysOfWeekNarrow = React55.useMemo(
     () => getWeekDayNamesForLocale(locale, "narrow", timezone),
     [locale, timezone]
   );
+  const daysOfWeekShortLowercase = React55.useMemo(
+    () => getWeekDayNamesForLocale(locale, "short", timezone).map(
+      (day) => formatShortLowercaseDay(day, locale)
+    ),
+    [locale, timezone]
+  );
+  const daysOfWeek = dayLabelFormat === "short-lowercase" ? daysOfWeekShortLowercase : daysOfWeekNarrow;
   return /* @__PURE__ */ jsx108(
     Stack_default,
     {
@@ -20312,12 +20334,16 @@ var DaysOfWeekRow = () => {
       sx: {
         padding: "0 8px",
         height: "32px",
-        backgroundColor: grey100,
+        backgroundColor: transparentBackground ? "transparent" : theme2.palette.grey[100],
         alignItems: "center"
       },
       children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx108(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx108(
         Typography_default,
         {
+          ...dayLabelFormat === "short-lowercase" && {
+            variant: "body2",
+            color: theme2.palette.grey[600]
+          },
           sx: {
             flex: "1 1 0",
             textAlign: "center",
@@ -25061,6 +25087,19 @@ var Autocomplete = function Autocomplete2({
       anchorRef.current,
       event.target
     )) {
+      document.addEventListener(
+        "click",
+        (e) => {
+          const target = e.target;
+          if (target.closest(".MuiDialog-container") === target) {
+            e.stopPropagation();
+          }
+        },
+        {
+          capture: true,
+          once: true
+        }
+      );
       closePopover();
       if (inputValue) {
         onSearch && onSearch("");
@@ -26647,12 +26686,198 @@ var PageSelector = ({
 };
 var PageSelector_default = PageSelector;
 
+// src/components/input/DateCalendar.tsx
+import * as React87 from "react";
+import { tz as tz13 } from "moment-timezone";
+import { jsx as jsx149, jsxs as jsxs77 } from "react/jsx-runtime";
+var minYear2 = 1900;
+var maxYear2 = 2100;
+var DateCalendar = ({
+  value,
+  onSelect,
+  minDate,
+  maxDate
+}) => {
+  const { timezone } = React87.useContext(IntlContext);
+  const [selectedDateParts, setSelectedDateParts] = React87.useState(void 0);
+  const [visibleMonth, setVisibleMonth] = React87.useState({
+    year: minYear2,
+    month: 0
+  });
+  React87.useEffect(() => {
+    if (selectedDateParts) {
+      setVisibleMonth({
+        year: selectedDateParts.year,
+        month: selectedDateParts.month
+      });
+    } else {
+      const now = tz13(timezone);
+      setVisibleMonth({
+        year: now.year(),
+        month: now.month()
+      });
+    }
+  }, [selectedDateParts, timezone]);
+  React87.useEffect(() => {
+    if (!value || isNaN(value.getTime())) {
+      setSelectedDateParts(void 0);
+      return;
+    }
+    const valueTz = tz13(value, timezone);
+    const [year, month, day] = [
+      valueTz.year(),
+      valueTz.month(),
+      valueTz.date()
+    ];
+    setVisibleMonth({ year, month });
+    setSelectedDateParts({ year, month, day });
+  }, [timezone, value]);
+  const minSimpleDate = React87.useMemo(
+    () => dateToSimpleDate(minDate, timezone),
+    [minDate, timezone]
+  );
+  const maxSimpleDate = React87.useMemo(
+    () => dateToSimpleDate(maxDate, timezone),
+    [maxDate, timezone]
+  );
+  const startYear = minSimpleDate?.year ?? minYear2;
+  const endYear = maxSimpleDate?.year ?? maxYear2;
+  const startMonth = minSimpleDate?.month ?? 0;
+  const endMonth = maxSimpleDate?.month ?? 11;
+  const navigatePreviousMonth = React87.useCallback(() => {
+    setVisibleMonth((prev) => ({
+      month: prev.month === 0 ? 11 : prev.month - 1,
+      year: prev.month === 0 ? prev.year - 1 : prev.year
+    }));
+  }, []);
+  const navigateNextMonth = React87.useCallback(() => {
+    setVisibleMonth((prev) => ({
+      month: prev.month === 11 ? 0 : prev.month + 1,
+      year: prev.month === 11 ? prev.year + 1 : prev.year
+    }));
+  }, []);
+  const isDisabledPreviousMonth = visibleMonth.year < startYear || visibleMonth.year === startYear && visibleMonth.month <= startMonth;
+  const isDisabledNextMonth = visibleMonth.year > endYear || visibleMonth.year === endYear && visibleMonth.month >= endMonth;
+  const firstDayOfMonth = tz13(
+    { year: visibleMonth.year, month: visibleMonth.month, date: 1 },
+    timezone
+  ).toDate();
+  return /* @__PURE__ */ jsxs77(
+    Stack_default,
+    {
+      sx: {
+        width: `${7 * 32 + 16}px`,
+        maxWidth: "100%",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxs77(
+          Stack_default,
+          {
+            direction: "row",
+            sx: { padding: "8px", alignItems: "center" },
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ jsx149(
+                IconButton_default,
+                {
+                  disabled: isDisabledPreviousMonth,
+                  iconId: "chevron-left",
+                  size: "L",
+                  "data-test": "date-calendar-prev-month",
+                  onClick: navigatePreviousMonth
+                }
+              ),
+              /* @__PURE__ */ jsx149(
+                Typography_default,
+                {
+                  variant: "body1-semibold",
+                  sx: {
+                    flex: 1,
+                    textAlign: "center",
+                    "&::first-letter": {
+                      textTransform: "uppercase"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx149(
+                    DateFormatter_default,
+                    {
+                      date: firstDayOfMonth,
+                      format: "yearMonthLongFormat"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx149(
+                IconButton_default,
+                {
+                  disabled: isDisabledNextMonth,
+                  iconId: "chevron-right",
+                  size: "L",
+                  "data-test": "date-calendar-next-month",
+                  onClick: navigateNextMonth
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx149(
+          DaysOfWeekRow_default,
+          {
+            transparentBackground: true,
+            dayLabelFormat: "short-lowercase"
+          }
+        ),
+        /* @__PURE__ */ jsx149(Box_default2, { sx: { padding: "8px" }, children: /* @__PURE__ */ jsx149(
+          CalendarMonth_default,
+          {
+            allowKeyboardNavigation: true,
+            hideMonthLabel: true,
+            todayForegroundColor: gunMetal,
+            minDate: minSimpleDate,
+            maxDate: maxSimpleDate,
+            ...visibleMonth,
+            selections: selectedDateParts ? [
+              {
+                color: primaryMain,
+                endDate: selectedDateParts,
+                startDate: selectedDateParts
+              }
+            ] : [],
+            onSelect: (day) => {
+              const selectedDate = tz13(
+                [
+                  visibleMonth.year,
+                  visibleMonth.month,
+                  day,
+                  0,
+                  0,
+                  0,
+                  0
+                ],
+                timezone
+              ).toDate();
+              setSelectedDateParts({
+                year: visibleMonth.year,
+                month: visibleMonth.month,
+                day
+              });
+              onSelect && onSelect(selectedDate);
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+var DateCalendar_default = DateCalendar;
+
 // src/components/loader/Loader.tsx
 import Fade from "@mui/material/Fade";
 
 // src/components/progress/LinearProgress.tsx
 import MuiLinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx149 } from "react/jsx-runtime";
+import { jsx as jsx150 } from "react/jsx-runtime";
 var LinearProgress = ({
   color: color2,
   backgroundColor: backgroundColor2,
@@ -26660,7 +26885,7 @@ var LinearProgress = ({
   ...rest
 }) => {
   const { palette: palette2 } = useCustomTheme();
-  return /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsx150(
     MuiLinearProgress,
     {
       ...rest,
@@ -26677,11 +26902,11 @@ var LinearProgress = ({
 var LinearProgress_default = LinearProgress;
 
 // src/components/progress/CircularProgress.tsx
-import * as React87 from "react";
+import * as React88 from "react";
 import MuiCircularProgress from "@mui/material/CircularProgress";
 import Typography3 from "@mui/material/Typography";
 import Box4 from "@mui/material/Box";
-import { jsx as jsx150, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx151, jsxs as jsxs78 } from "react/jsx-runtime";
 var circularSizesPxMap = {
   XS: "20px",
   SM: "24px",
@@ -26703,10 +26928,10 @@ var CircularProgress = ({
   typographyColor = black,
   gradientColors
 }) => {
-  const gradientName = React87.useRef(
+  const gradientName = React88.useRef(
     gradientColors ? crypto.randomUUID() : void 0
   );
-  return /* @__PURE__ */ jsxs77(
+  return /* @__PURE__ */ jsxs78(
     Box4,
     {
       sx: {
@@ -26720,7 +26945,7 @@ var CircularProgress = ({
         }
       },
       children: [
-        gradientColors && /* @__PURE__ */ jsx150("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx150("defs", { children: /* @__PURE__ */ jsxs77(
+        gradientColors && /* @__PURE__ */ jsx151("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx151("defs", { children: /* @__PURE__ */ jsxs78(
           "linearGradient",
           {
             id: gradientName.current,
@@ -26729,14 +26954,14 @@ var CircularProgress = ({
             x2: "0%",
             y2: "100%",
             children: [
-              /* @__PURE__ */ jsx150(
+              /* @__PURE__ */ jsx151(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: gradientColors.startColor
                 }
               ),
-              /* @__PURE__ */ jsx150(
+              /* @__PURE__ */ jsx151(
                 "stop",
                 {
                   offset: "100%",
@@ -26746,7 +26971,7 @@ var CircularProgress = ({
             ]
           }
         ) }) }),
-        showCircularBackground && /* @__PURE__ */ jsx150(
+        showCircularBackground && /* @__PURE__ */ jsx151(
           Box4,
           {
             sx: {
@@ -26759,7 +26984,7 @@ var CircularProgress = ({
                 maxHeight: circularSizesPxMap[size]
               }
             },
-            children: /* @__PURE__ */ jsx150(
+            children: /* @__PURE__ */ jsx151(
               MuiCircularProgress,
               {
                 variant: "determinate",
@@ -26771,7 +26996,7 @@ var CircularProgress = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx151(
           MuiCircularProgress,
           {
             variant,
@@ -26800,7 +27025,7 @@ var CircularProgress = ({
             thickness
           }
         ),
-        variant !== "indeterminate" && /* @__PURE__ */ jsx150(
+        variant !== "indeterminate" && /* @__PURE__ */ jsx151(
           Box4,
           {
             sx: {
@@ -26815,7 +27040,7 @@ var CircularProgress = ({
               height: circularSizesPxMap[size],
               width: circularSizesPxMap[size]
             },
-            children: typeof label === "string" ? /* @__PURE__ */ jsx150(
+            children: typeof label === "string" ? /* @__PURE__ */ jsx151(
               Typography3,
               {
                 variant: typographyVariant,
@@ -26835,7 +27060,7 @@ var CircularProgress_default = CircularProgress;
 // src/components/progress/DonutProgress.tsx
 import Box5 from "@mui/material/Box";
 import { Stack as Stack13 } from "@mui/material";
-import { jsx as jsx151, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx152, jsxs as jsxs79 } from "react/jsx-runtime";
 var CIRCULAR_PROGRESS_PERCENTAGE = 85;
 var variants2 = {
   empty: {
@@ -26874,9 +27099,9 @@ var DonutProgress = ({
   labelChip,
   showPercentageSymbol
 }) => {
-  const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs78(Stack13, { direction: "row", alignItems: "center", position: "relative", children: [
-    /* @__PURE__ */ jsx151(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
-    /* @__PURE__ */ jsx151(
+  const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs79(Stack13, { direction: "row", alignItems: "center", position: "relative", children: [
+    /* @__PURE__ */ jsx152(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
+    /* @__PURE__ */ jsx152(
       Typography_default,
       {
         variant: "tooltip",
@@ -26887,7 +27112,7 @@ var DonutProgress = ({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsxs79(
     Box5,
     {
       sx: {
@@ -26895,7 +27120,7 @@ var DonutProgress = ({
         width: "fit-content"
       },
       children: [
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx152(
           CircularProgress_default,
           {
             variant: "determinate",
@@ -26911,7 +27136,7 @@ var DonutProgress = ({
             color: variants2[variant].emptyColor
           }
         ),
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx152(
           Box5,
           {
             sx: {
@@ -26919,7 +27144,7 @@ var DonutProgress = ({
               top: 0,
               left: 0
             },
-            children: /* @__PURE__ */ jsx151(
+            children: /* @__PURE__ */ jsx152(
               CircularProgress_default,
               {
                 variant: "determinate",
@@ -26934,7 +27159,7 @@ var DonutProgress = ({
             )
           }
         ),
-        variant !== "empty" && labelChip && /* @__PURE__ */ jsx151(
+        variant !== "empty" && labelChip && /* @__PURE__ */ jsx152(
           Box5,
           {
             sx: {
@@ -26951,7 +27176,7 @@ var DonutProgress = ({
               justifyContent: "center",
               boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsx151(
+            children: /* @__PURE__ */ jsx152(
               Typography_default,
               {
                 variant: "tooltip",
@@ -26968,14 +27193,14 @@ var DonutProgress = ({
 var DonutProgress_default = DonutProgress;
 
 // src/components/loader/Loader.tsx
-import { jsx as jsx152 } from "react/jsx-runtime";
+import { jsx as jsx153 } from "react/jsx-runtime";
 var Loader = ({
   isVisible,
   zIndex = 1e4,
   size,
   hideProgress = false,
   sx
-}) => /* @__PURE__ */ jsx152(Fade, { in: isVisible, children: /* @__PURE__ */ jsx152(
+}) => /* @__PURE__ */ jsx153(Fade, { in: isVisible, children: /* @__PURE__ */ jsx153(
   Box_default2,
   {
     sx: {
@@ -26991,29 +27216,29 @@ var Loader = ({
       backgroundColor: whiteOpacity32,
       ...sx
     },
-    children: !hideProgress && /* @__PURE__ */ jsx152(CircularProgress_default, { size })
+    children: !hideProgress && /* @__PURE__ */ jsx153(CircularProgress_default, { size })
   }
 ) });
 var Loader_default = Loader;
 
 // src/components/markdown/MarkdownRenderer.tsx
-import React88 from "react";
+import React89 from "react";
 import Markdown from "markdown-to-jsx";
 import { styled as styled8 } from "@mui/material/styles";
 import "katex/dist/katex.min.css";
 
 // src/components/markdown/KatexRenderer.tsx
 import katex from "katex";
-import { jsx as jsx153, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx154, jsxs as jsxs80 } from "react/jsx-runtime";
 var KatexRenderer = ({ children, block }) => {
   try {
     const html2 = katex.renderToString(children, {
       throwOnError: false,
       displayMode: block
     });
-    return /* @__PURE__ */ jsx153("span", { dangerouslySetInnerHTML: { __html: html2 } });
+    return /* @__PURE__ */ jsx154("span", { dangerouslySetInnerHTML: { __html: html2 } });
   } catch (err) {
-    return /* @__PURE__ */ jsxs79("pre", { style: { color: "red" }, children: [
+    return /* @__PURE__ */ jsxs80("pre", { style: { color: "red" }, children: [
       "KaTeX error: $",
       err.message
     ] });
@@ -27022,7 +27247,7 @@ var KatexRenderer = ({ children, block }) => {
 var KatexRenderer_default = KatexRenderer;
 
 // src/components/markdown/MarkdownRenderer.tsx
-import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx155 } from "react/jsx-runtime";
 var MarkdownContainer = styled8("div")(
   ({
     color: color2,
@@ -27126,11 +27351,11 @@ var renderWithMath = (text) => {
     const inline = match[2];
     if (block !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx154(KatexRenderer_default, { block: true, children: block.trim() }, start)
+        /* @__PURE__ */ jsx155(KatexRenderer_default, { block: true, children: block.trim() }, start)
       );
     } else if (inline !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx154(KatexRenderer_default, { children: inline.trim() }, start)
+        /* @__PURE__ */ jsx155(KatexRenderer_default, { children: inline.trim() }, start)
       );
     }
     lastIndex = regex.lastIndex;
@@ -27140,13 +27365,13 @@ var renderWithMath = (text) => {
   }
   return parts;
 };
-var renderChildrenWithMath = (children) => React88.Children.map(children, (child) => {
+var renderChildrenWithMath = (children) => React89.Children.map(children, (child) => {
   if (typeof child === "string") {
     return renderWithMath(child);
   }
-  if (React88.isValidElement(child)) {
+  if (React89.isValidElement(child)) {
     const element = child;
-    return React88.cloneElement(element, {
+    return React89.cloneElement(element, {
       ...element.props,
       children: renderChildrenWithMath(element.props.children)
     });
@@ -27161,11 +27386,11 @@ var CodeOrMath = ({ children, ...props }) => {
   if (m) {
     const expr = m[1] || m[2] || "";
     const isBlock = Boolean(m[1]);
-    return /* @__PURE__ */ jsx154(KatexRenderer_default, { block: isBlock, children: expr.trim() });
+    return /* @__PURE__ */ jsx155(KatexRenderer_default, { block: isBlock, children: expr.trim() });
   }
   const maybe = renderWithMath(s);
   const onlyText = maybe.length === 1 && typeof maybe[0] === "string";
-  return onlyText ? /* @__PURE__ */ jsx154("code", { ...props, children }) : /* @__PURE__ */ jsx154("span", { children: maybe });
+  return onlyText ? /* @__PURE__ */ jsx155("code", { ...props, children }) : /* @__PURE__ */ jsx155("span", { children: maybe });
 };
 var escapeInlineUnderscores = (s) => s.replace(/(\S)_(\S)/g, "$1\\_$2");
 var MarkdownRenderer = ({
@@ -27175,19 +27400,19 @@ var MarkdownRenderer = ({
 }) => {
   const protectedText = escapeInlineUnderscores(text || "");
   const normalized = normalizeLatexDelimiters(protectedText);
-  return /* @__PURE__ */ jsx154(
+  return /* @__PURE__ */ jsx155(
     MarkdownContainer,
     {
       className: `markdown-container ${className || ""}`,
       ...rest,
-      children: /* @__PURE__ */ jsx154(
+      children: /* @__PURE__ */ jsx155(
         Markdown,
         {
           options: {
             forceBlock: true,
             overrides: {
               p: {
-                component: ({ children, ...props }) => /* @__PURE__ */ jsx154("p", { ...props, children: renderChildrenWithMath(children) })
+                component: ({ children, ...props }) => /* @__PURE__ */ jsx155("p", { ...props, children: renderChildrenWithMath(children) })
               },
               code: { component: CodeOrMath }
             }
@@ -27202,7 +27427,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
 import { Drawer as Drawer2 } from "@mui/material";
-import { Fragment as Fragment42, jsx as jsx155, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx156, jsxs as jsxs81 } from "react/jsx-runtime";
 var Navbar = ({
   topContent,
   bottomContent,
@@ -27210,8 +27435,8 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs80(Fragment42, { children: [
-  /* @__PURE__ */ jsxs80(
+}) => /* @__PURE__ */ jsxs81(Fragment42, { children: [
+  /* @__PURE__ */ jsxs81(
     Box_default2,
     {
       sx: {
@@ -27226,12 +27451,12 @@ var Navbar = ({
       },
       className: "Slim-Vertical-Scroll",
       children: [
-        /* @__PURE__ */ jsx155(Box_default2, { children: topContent }),
-        /* @__PURE__ */ jsx155(Box_default2, { children: bottomContent })
+        /* @__PURE__ */ jsx156(Box_default2, { children: topContent }),
+        /* @__PURE__ */ jsx156(Box_default2, { children: bottomContent })
       ]
     }
   ),
-  /* @__PURE__ */ jsxs80(
+  /* @__PURE__ */ jsxs81(
     Drawer2,
     {
       open: isDrawerOpen,
@@ -27254,8 +27479,8 @@ var Navbar = ({
       },
       onClose,
       children: [
-        /* @__PURE__ */ jsx155("div", { children: drawerTopContent }),
-        /* @__PURE__ */ jsx155("div", { children: drawerBottomContent })
+        /* @__PURE__ */ jsx156("div", { children: drawerTopContent }),
+        /* @__PURE__ */ jsx156("div", { children: drawerBottomContent })
       ]
     }
   )
@@ -27263,10 +27488,10 @@ var Navbar = ({
 var Navbar_default = Navbar;
 
 // src/components/navbar/NavbarButton.tsx
-import * as React89 from "react";
+import * as React90 from "react";
 import { Box as Box6, ButtonBase as ButtonBase2 } from "@mui/material";
-import { jsx as jsx156, jsxs as jsxs81 } from "react/jsx-runtime";
-var NavbarButton = React89.forwardRef(
+import { jsx as jsx157, jsxs as jsxs82 } from "react/jsx-runtime";
+var NavbarButton = React90.forwardRef(
   function NavbarButton2({
     iconId,
     srcUrl,
@@ -27281,7 +27506,7 @@ var NavbarButton = React89.forwardRef(
       if (!highlighted) {
         return element;
       }
-      return /* @__PURE__ */ jsxs81(
+      return /* @__PURE__ */ jsxs82(
         Box6,
         {
           sx: {
@@ -27291,7 +27516,7 @@ var NavbarButton = React89.forwardRef(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Box6,
               {
                 sx: {
@@ -27307,7 +27532,7 @@ var NavbarButton = React89.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Box6,
               {
                 sx: {
@@ -27322,7 +27547,7 @@ var NavbarButton = React89.forwardRef(
         }
       );
     };
-    return /* @__PURE__ */ jsxs81(
+    return /* @__PURE__ */ jsxs82(
       ButtonBase2,
       {
         className: "NavbarButton-root",
@@ -27340,7 +27565,7 @@ var NavbarButton = React89.forwardRef(
         },
         children: [
           srcUrl ? getButtonContent(
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Avatar_default,
               {
                 className: "NavbarButton-icon",
@@ -27350,7 +27575,7 @@ var NavbarButton = React89.forwardRef(
               }
             )
           ) : getButtonContent(
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Icon_default,
               {
                 id: iconId,
@@ -27366,7 +27591,7 @@ var NavbarButton = React89.forwardRef(
               }
             )
           ),
-          badgeIconProps && /* @__PURE__ */ jsx156(
+          badgeIconProps && /* @__PURE__ */ jsx157(
             Icon_default,
             {
               ...badgeIconProps,
@@ -27388,8 +27613,8 @@ var NavbarButton = React89.forwardRef(
 var NavbarButton_default = NavbarButton;
 
 // src/components/navbar/NavbarHeader.tsx
-import { jsx as jsx157 } from "react/jsx-runtime";
-var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx157(
+import { jsx as jsx158 } from "react/jsx-runtime";
+var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx158(
   Typography_default,
   {
     sx: {
@@ -27409,12 +27634,12 @@ var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx157(
 var NavbarHeader_default = NavbarHeader;
 
 // src/components/navbar/NavbarLogo.tsx
-import * as React90 from "react";
+import * as React91 from "react";
 import { ButtonBase as ButtonBase3 } from "@mui/material";
-import { jsx as jsx158 } from "react/jsx-runtime";
-var NavbarLogo = React90.forwardRef(
+import { jsx as jsx159 } from "react/jsx-runtime";
+var NavbarLogo = React91.forwardRef(
   function NavbarButton3({ src, ...rest }, ref) {
-    return /* @__PURE__ */ jsx158(
+    return /* @__PURE__ */ jsx159(
       ButtonBase3,
       {
         ref,
@@ -27425,7 +27650,7 @@ var NavbarLogo = React90.forwardRef(
           borderBottom: `1px solid ${grey200}`,
           boxSizing: "border-box"
         },
-        children: /* @__PURE__ */ jsx158("img", { src, width: "32px", height: "32px" })
+        children: /* @__PURE__ */ jsx159("img", { src, width: "32px", height: "32px" })
       }
     );
   }
@@ -27433,8 +27658,8 @@ var NavbarLogo = React90.forwardRef(
 var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
-import * as React91 from "react";
-import { Fragment as Fragment43, jsx as jsx159, jsxs as jsxs82 } from "react/jsx-runtime";
+import * as React92 from "react";
+import { Fragment as Fragment43, jsx as jsx160, jsxs as jsxs83 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
   elementRef,
@@ -27443,8 +27668,8 @@ var DonutFocusOverlay = ({
   chipLabel,
   chipPosition = "right"
 }) => {
-  const [clientRect, setClientRect] = React91.useState();
-  React91.useEffect(() => {
+  const [clientRect, setClientRect] = React92.useState();
+  React92.useEffect(() => {
     if (!elementRef?.current) {
       setClientRect(void 0);
       return;
@@ -27475,8 +27700,8 @@ var DonutFocusOverlay = ({
   const internalTopHalfCircle = `${internalCircleRadius} ${internalCircleRadius} 0 0 1 ${startPointX + donutWidth + internalCircleRadius * 2} ${startPointY}`;
   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__ */ jsxs82(Fragment43, { children: [
-    /* @__PURE__ */ jsx159(
+  return /* @__PURE__ */ jsxs83(Fragment43, { children: [
+    /* @__PURE__ */ jsx160(
       Box_default2,
       {
         sx: {
@@ -27493,7 +27718,7 @@ var DonutFocusOverlay = ({
         }
       }
     ),
-    chipLabel && /* @__PURE__ */ jsx159(
+    chipLabel && /* @__PURE__ */ jsx160(
       Chip_default,
       {
         label: chipLabel,
@@ -27520,7 +27745,7 @@ var DonutFocusOverlay = ({
 var DonutFocusOverlay_default = DonutFocusOverlay;
 
 // src/components/pager/Pager.tsx
-import { Fragment as Fragment44, jsx as jsx160, jsxs as jsxs83 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx161, jsxs as jsxs84 } from "react/jsx-runtime";
 var Pager = ({
   page,
   pageSize,
@@ -27534,10 +27759,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__ */ jsx160(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
-  return /* @__PURE__ */ jsxs83(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx160(Label, { children: t("PAGER.PAGE") }),
-    /* @__PURE__ */ jsx160(
+  const Label = ({ children }) => /* @__PURE__ */ jsx161(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
+  return /* @__PURE__ */ jsxs84(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx161(Label, { children: t("PAGER.PAGE") }),
+    /* @__PURE__ */ jsx161(
       Select_default,
       {
         value: page,
@@ -27546,9 +27771,9 @@ var Pager = ({
         sx: { minWidth: 78 }
       }
     ),
-    allowedPageSizes && /* @__PURE__ */ jsxs83(Fragment44, { children: [
-      /* @__PURE__ */ jsx160(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
-      /* @__PURE__ */ jsx160(
+    allowedPageSizes && /* @__PURE__ */ jsxs84(Fragment44, { children: [
+      /* @__PURE__ */ jsx161(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
+      /* @__PURE__ */ jsx161(
         Select_default,
         {
           value: pageSize,
@@ -27562,7 +27787,7 @@ var Pager = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs83(Label, { children: [
+    /* @__PURE__ */ jsxs84(Label, { children: [
       from,
       " - ",
       to,
@@ -27571,7 +27796,7 @@ var Pager = ({
       " ",
       total
     ] }),
-    /* @__PURE__ */ jsx160(
+    /* @__PURE__ */ jsx161(
       IconButton_default,
       {
         disabled: page <= 1,
@@ -27579,7 +27804,7 @@ var Pager = ({
         onClick: () => onPageChange(page - 1, pageSize)
       }
     ),
-    /* @__PURE__ */ jsx160(
+    /* @__PURE__ */ jsx161(
       IconButton_default,
       {
         disabled: page > total / pageSize,
@@ -27593,17 +27818,17 @@ var Pager_default = Pager;
 
 // src/components/scrollable/HorizontalScrollable.tsx
 import { ButtonBase as ButtonBase4 } from "@mui/material";
-import * as React92 from "react";
-import { jsx as jsx161, jsxs as jsxs84 } from "react/jsx-runtime";
+import * as React93 from "react";
+import { jsx as jsx162, jsxs as jsxs85 } from "react/jsx-runtime";
 var HorizontalScrollable = ({
   style: style3,
   children,
   stepDistance = 200
 }) => {
-  const horizontalContainerRef = React92.useRef(null);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React92.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React92.useState(true);
-  React92.useEffect(() => {
+  const horizontalContainerRef = React93.useRef(null);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React93.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React93.useState(true);
+  React93.useEffect(() => {
     if (!horizontalContainerRef.current) {
       return;
     }
@@ -27643,8 +27868,8 @@ var HorizontalScrollable = ({
     );
     current.scrollBy(stepDistance, 0);
   };
-  return /* @__PURE__ */ jsxs84(Box_default2, { sx: { position: "relative", ...style3 }, children: [
-    /* @__PURE__ */ jsx161(
+  return /* @__PURE__ */ jsxs85(Box_default2, { sx: { position: "relative", ...style3 }, children: [
+    /* @__PURE__ */ jsx162(
       ButtonBase4,
       {
         sx: {
@@ -27661,10 +27886,10 @@ var HorizontalScrollable = ({
           ...isLeftArrowHidden && { display: "none" }
         },
         onClick: () => leftScroll(),
-        children: /* @__PURE__ */ jsx161(Icon_default, { id: "chevron-left" })
+        children: /* @__PURE__ */ jsx162(Icon_default, { id: "chevron-left" })
       }
     ),
-    /* @__PURE__ */ jsx161(
+    /* @__PURE__ */ jsx162(
       Box_default2,
       {
         ref: horizontalContainerRef,
@@ -27683,7 +27908,7 @@ var HorizontalScrollable = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx161(
+    /* @__PURE__ */ jsx162(
       ButtonBase4,
       {
         sx: {
@@ -27700,7 +27925,7 @@ var HorizontalScrollable = ({
           ...isRightArrowHidden && { display: "none" }
         },
         onClick: () => rightScroll(),
-        children: /* @__PURE__ */ jsx161(Icon_default, { id: "chevron-right" })
+        children: /* @__PURE__ */ jsx162(Icon_default, { id: "chevron-right" })
       }
     )
   ] });
@@ -27708,8 +27933,8 @@ var HorizontalScrollable = ({
 var HorizontalScrollable_default = HorizontalScrollable;
 
 // src/components/scrollable/Carousel.tsx
-import * as React93 from "react";
-import { jsx as jsx162, jsxs as jsxs85 } from "react/jsx-runtime";
+import * as React94 from "react";
+import { jsx as jsx163, jsxs as jsxs86 } from "react/jsx-runtime";
 var buttonStyles = {
   color: grey800,
   position: "absolute",
@@ -27728,23 +27953,23 @@ function Carousel({
   padding: padding2 = 8,
   alignment = "left"
 }) {
-  const rootRef = React93.useRef(null);
-  const containerRef = React93.useRef(null);
-  const previousClientWidth = React93.useRef(null);
-  const isScrolling = React93.useRef(false);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React93.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React93.useState(true);
-  const [paddingElement, setPaddingElement] = React93.useState();
-  const [visibleCount, setVisibleCount] = React93.useState();
-  const showedElementsRef = React93.useRef(void 0);
-  const updateArrows = React93.useCallback(() => {
+  const rootRef = React94.useRef(null);
+  const containerRef = React94.useRef(null);
+  const previousClientWidth = React94.useRef(null);
+  const isScrolling = React94.useRef(false);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React94.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React94.useState(true);
+  const [paddingElement, setPaddingElement] = React94.useState();
+  const [visibleCount, setVisibleCount] = React94.useState();
+  const showedElementsRef = React94.useRef(void 0);
+  const updateArrows = React94.useCallback(() => {
     if (!showedElementsRef.current) {
       return;
     }
     setLeftArrowHidden(showedElementsRef.current.start === 0);
     setRightArrowHidden(showedElementsRef.current.end === items.length - 1);
   }, [items.length]);
-  const getUsableWidth = React93.useCallback(
+  const getUsableWidth = React94.useCallback(
     (el) => {
       let current = el;
       while (current) {
@@ -27758,7 +27983,7 @@ function Carousel({
     },
     []
   );
-  const resetCarousel = React93.useCallback(
+  const resetCarousel = React94.useCallback(
     (root, container) => {
       root.style.width = "";
       showedElementsRef.current = void 0;
@@ -27766,7 +27991,7 @@ function Carousel({
     },
     []
   );
-  const setMeasures = React93.useCallback(
+  const setMeasures = React94.useCallback(
     (root, container, nextElementsIndex) => {
       const children = Array.from(container.children);
       if (children.length === 0) {
@@ -27795,7 +28020,7 @@ function Carousel({
     },
     [alignment, gap2, getUsableWidth, items.length, padding2]
   );
-  const updateVisibleCount = React93.useCallback(() => {
+  const updateVisibleCount = React94.useCallback(() => {
     const root = rootRef.current;
     const container = containerRef.current;
     if (!container || !parent) {
@@ -27842,7 +28067,7 @@ function Carousel({
     updateArrows,
     resetCarousel
   ]);
-  const getInitialWidth = React93.useCallback(
+  const getInitialWidth = React94.useCallback(
     (el) => {
       let current = el;
       let width2 = 0;
@@ -27860,7 +28085,7 @@ function Carousel({
     },
     []
   );
-  const resizeObserverCallback = React93.useCallback(() => {
+  const resizeObserverCallback = React94.useCallback(() => {
     if (!rootRef.current || !containerRef.current) {
       return;
     }
@@ -27871,7 +28096,7 @@ function Carousel({
     previousClientWidth.current = newClientWidth;
     updateVisibleCount();
   }, [getInitialWidth, updateVisibleCount]);
-  React93.useEffect(() => {
+  React94.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -27961,7 +28186,7 @@ function Carousel({
     }
     scrollHorizontal(scrollData);
   };
-  return /* @__PURE__ */ jsx162(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs85(
+  return /* @__PURE__ */ jsx163(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs86(
     Box_default2,
     {
       sx: {
@@ -27973,7 +28198,7 @@ function Carousel({
         }
       },
       children: [
-        /* @__PURE__ */ jsx162(
+        /* @__PURE__ */ jsx163(
           IconButton_default,
           {
             iconId: "chevron-left",
@@ -27986,7 +28211,7 @@ function Carousel({
             onClick: () => scrollToNext("left")
           }
         ),
-        /* @__PURE__ */ jsx162(
+        /* @__PURE__ */ jsx163(
           Box_default2,
           {
             ref: containerRef,
@@ -28000,7 +28225,7 @@ function Carousel({
               "::-webkit-scrollbar": { display: "none" },
               gap: `${gap2}px`
             },
-            children: items.map((item, index) => /* @__PURE__ */ jsx162(
+            children: items.map((item, index) => /* @__PURE__ */ jsx163(
               Box_default2,
               {
                 sx: {
@@ -28012,7 +28237,7 @@ function Carousel({
             ))
           }
         ),
-        /* @__PURE__ */ jsx162(
+        /* @__PURE__ */ jsx163(
           IconButton_default,
           {
             iconId: "chevron-right",
@@ -28035,12 +28260,12 @@ var Carousel_default = Carousel;
 import {
   SnackbarProvider as NotistackSnackbarProvider
 } from "notistack";
-import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx164 } from "react/jsx-runtime";
 var SnackbarProvider = ({
   children,
   maxSnack = 3,
   domRoot
-}) => /* @__PURE__ */ jsx163(
+}) => /* @__PURE__ */ jsx164(
   NotistackSnackbarProvider,
   {
     maxSnack,
@@ -28058,10 +28283,10 @@ import {
 } from "notistack";
 
 // src/components/snackbar/Snackbar.tsx
-import * as React94 from "react";
+import * as React95 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx164, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs87 } from "react/jsx-runtime";
 var sizeStyles5 = {
   M: {
     width: "344px",
@@ -28086,7 +28311,7 @@ var iconColors = {
   error: error300,
   warning: complementary300
 };
-var Snackbar = React94.forwardRef(
+var Snackbar = React95.forwardRef(
   function Snackbar2({
     severity = "info",
     message,
@@ -28098,13 +28323,13 @@ var Snackbar = React94.forwardRef(
     identifierKey: key,
     dataTestKey
   }, ref) {
-    const actionClickHandler = React94.useCallback(() => {
+    const actionClickHandler = React95.useCallback(() => {
       onActionClick && onActionClick(key);
     }, [onActionClick, key]);
-    const closeClickHandler = React94.useCallback(() => {
+    const closeClickHandler = React95.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
-    return /* @__PURE__ */ jsx164(
+    return /* @__PURE__ */ jsx165(
       SnackbarContent,
       {
         ref,
@@ -28122,14 +28347,14 @@ var Snackbar = React94.forwardRef(
         ...dataTestKey && {
           "data-test": dataTestKey
         },
-        children: /* @__PURE__ */ jsxs86(
+        children: /* @__PURE__ */ jsxs87(
           Stack_default,
           {
             direction: "row",
             spacing: 2,
             sx: { width: "100%", alignItems: "center" },
             children: [
-              withIcon && /* @__PURE__ */ jsx164(
+              withIcon && /* @__PURE__ */ jsx165(
                 Box_default2,
                 {
                   sx: {
@@ -28137,10 +28362,10 @@ var Snackbar = React94.forwardRef(
                     flexShrink: 0,
                     color: iconColors[severity]
                   },
-                  children: /* @__PURE__ */ jsx164(Icon_default, { id: severityIcons[severity] })
+                  children: /* @__PURE__ */ jsx165(Icon_default, { id: severityIcons[severity] })
                 }
               ),
-              /* @__PURE__ */ jsx164(
+              /* @__PURE__ */ jsx165(
                 Typography4,
                 {
                   variant: "body2",
@@ -28148,7 +28373,7 @@ var Snackbar = React94.forwardRef(
                   children: message
                 }
               ),
-              actionText && /* @__PURE__ */ jsx164(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx164(
+              actionText && /* @__PURE__ */ jsx165(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx165(
                 Button_default,
                 {
                   sx: {
@@ -28163,7 +28388,7 @@ var Snackbar = React94.forwardRef(
                   onClick: actionClickHandler
                 }
               ) }),
-              /* @__PURE__ */ jsx164(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx164(
+              /* @__PURE__ */ jsx165(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx165(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -28188,7 +28413,7 @@ var Snackbar_default = Snackbar;
 
 // src/components/snackbar/enqueueSnackbar.tsx
 import { closeSnackbar as closeSnackbar2 } from "notistack";
-import { jsx as jsx165 } from "react/jsx-runtime";
+import { jsx as jsx166 } from "react/jsx-runtime";
 var enqueueSnackbar = (message, options = {}) => {
   const {
     persist,
@@ -28204,7 +28429,7 @@ var enqueueSnackbar = (message, options = {}) => {
     autoHideDuration: autoHideDurationMs ?? 1e4,
     persist: persist ?? false,
     content(key, message2) {
-      return /* @__PURE__ */ jsx165(
+      return /* @__PURE__ */ jsx166(
         Snackbar_default,
         {
           identifierKey: key,
@@ -28221,7 +28446,7 @@ var enqueueSnackbar = (message, options = {}) => {
 
 // src/components/tab/TabButton.tsx
 import MuiTab from "@mui/material/Tab";
-import { jsx as jsx166 } from "react/jsx-runtime";
+import { jsx as jsx167 } from "react/jsx-runtime";
 var TabButton = ({
   children,
   disabled = false,
@@ -28229,10 +28454,10 @@ var TabButton = ({
   marginRight = "0px",
   dataTestId,
   ...rest
-}) => /* @__PURE__ */ jsx166(
+}) => /* @__PURE__ */ jsx167(
   MuiTab,
   {
-    label: /* @__PURE__ */ jsx166(
+    label: /* @__PURE__ */ jsx167(
       "div",
       {
         style: {
@@ -28267,13 +28492,13 @@ var TabButton = ({
 var TabButton_default = TabButton;
 
 // src/components/tab/Tabs.tsx
-import * as React96 from "react";
+import * as React97 from "react";
 import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
-import * as React95 from "react";
-import { useEffect as useEffect29, useRef as useRef33, useState as useState42 } from "react";
-import { jsx as jsx167 } from "react/jsx-runtime";
+import * as React96 from "react";
+import { useEffect as useEffect30, useRef as useRef33, useState as useState43 } from "react";
+import { jsx as jsx168 } from "react/jsx-runtime";
 var styles = {
   container: {
     maxHeight: "100%",
@@ -28309,9 +28534,9 @@ function SwipeableViews({
   const containerRef = useRef33(null);
   const scrollTimeout = useRef33(null);
   const scrollingMethod = useRef33("none");
-  const [previousIndex, setPreviousIndex] = useState42(index);
+  const [previousIndex, setPreviousIndex] = useState43(index);
   const hideScrollAnimation = useRef33(true);
-  useEffect29(() => {
+  useEffect30(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -28348,7 +28573,7 @@ function SwipeableViews({
     }
   }, [index]);
   const hasShowTab = (childIndex) => childIndex === index || childIndex === previousIndex;
-  return /* @__PURE__ */ jsx167(
+  return /* @__PURE__ */ jsx168(
     "div",
     {
       ...rootProps,
@@ -28371,12 +28596,12 @@ function SwipeableViews({
           );
         }, 100);
       },
-      children: React95.Children.map(children, (child, childIndex) => {
+      children: React96.Children.map(children, (child, childIndex) => {
         let mountedChild = false;
-        if (React95.isValidElement(child)) {
+        if (React96.isValidElement(child)) {
           mountedChild = !!child.props.keepMounted;
         }
-        return /* @__PURE__ */ jsx167(
+        return /* @__PURE__ */ jsx168(
           "div",
           {
             style: Object.assign(
@@ -28401,7 +28626,7 @@ function SwipeableViews({
 }
 
 // src/components/tab/Tabs.tsx
-import { jsx as jsx168, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx169, jsxs as jsxs88 } from "react/jsx-runtime";
 var Tabs = ({
   tabButtons,
   children,
@@ -28416,8 +28641,8 @@ var Tabs = ({
   hideLineTabs = false,
   backgroundScrollButtons = Colors_exports.white
 }) => {
-  const tabsRef = React96.useRef(null);
-  const [value, setValue] = React96.useState(0);
+  const tabsRef = React97.useRef(null);
+  const [value, setValue] = React97.useState(0);
   const measureTextWidthRange = (child) => {
     const walker = document.createTreeWalker(child, NodeFilter.SHOW_TEXT, {
       acceptNode: (node) => node.textContent?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
@@ -28431,7 +28656,7 @@ var Tabs = ({
     const rect = range.getBoundingClientRect();
     return Math.round(rect.width);
   };
-  const waitForSmoothScrollEnd = React96.useCallback(
+  const waitForSmoothScrollEnd = React97.useCallback(
     (container, onEnd) => {
       let prev = container.scrollLeft;
       let idleFrames = 0;
@@ -28455,7 +28680,7 @@ var Tabs = ({
     },
     []
   );
-  const calculateIndicatorTabWidth = React96.useCallback((index) => {
+  const calculateIndicatorTabWidth = React97.useCallback((index) => {
     if (!tabsRef.current) {
       return null;
     }
@@ -28474,7 +28699,7 @@ var Tabs = ({
     indicator.style.width = `${textWidth}px`;
     indicator.style.left = `${left}px`;
   }, []);
-  React96.useEffect(() => {
+  React97.useEffect(() => {
     if (!tabsRef.current) {
       return;
     }
@@ -28500,7 +28725,7 @@ var Tabs = ({
     bottom: 0,
     borderRadius: "8px"
   };
-  return /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs88(
     Box_default2,
     {
       sx: {
@@ -28514,7 +28739,7 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx168(
+        /* @__PURE__ */ jsx169(
           MuiTabs,
           {
             ref: tabsRef,
@@ -28553,7 +28778,7 @@ var Tabs = ({
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx168(
+        /* @__PURE__ */ jsx169(
           Box_default2,
           {
             sx: {
@@ -28562,7 +28787,7 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx168(
+            children: /* @__PURE__ */ jsx169(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
@@ -28591,8 +28816,8 @@ var Tabs = ({
 var Tabs_default = Tabs;
 
 // src/components/tab/TabContent.tsx
-import { jsx as jsx169 } from "react/jsx-runtime";
-var TabContent = ({ children }) => /* @__PURE__ */ jsx169(
+import { jsx as jsx170 } from "react/jsx-runtime";
+var TabContent = ({ children }) => /* @__PURE__ */ jsx170(
   Box_default2,
   {
     sx: {
@@ -28609,8 +28834,8 @@ import {
   TableRow as MuiTableRow,
   TableCell as MuiTableCell
 } from "@mui/material";
-import { jsx as jsx170 } from "react/jsx-runtime";
-var TableDivider = () => /* @__PURE__ */ jsx170(MuiTableRow, { children: /* @__PURE__ */ jsx170(
+import { jsx as jsx171 } from "react/jsx-runtime";
+var TableDivider = () => /* @__PURE__ */ jsx171(MuiTableRow, { children: /* @__PURE__ */ jsx171(
   MuiTableCell,
   {
     colSpan: 1e3,
@@ -28623,8 +28848,8 @@ var TableDivider_default = TableDivider;
 import {
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { jsx as jsx171 } from "react/jsx-runtime";
-var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx171(MuiTableSortLabel, { ...rest, children });
+import { jsx as jsx172 } from "react/jsx-runtime";
+var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx172(MuiTableSortLabel, { ...rest, children });
 var TableSortLabel_default = TableSortLabel;
 
 // src/components/table/Table.tsx
@@ -28632,21 +28857,21 @@ import {
   TableContainer,
   Table as MuiTable
 } from "@mui/material";
-import { jsx as jsx172 } from "react/jsx-runtime";
-var Table = ({ children, sx, className, containerSx }) => /* @__PURE__ */ jsx172(TableContainer, { className: "Slim-Horizontal-Scroll", sx: containerSx, children: /* @__PURE__ */ jsx172(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
+import { jsx as jsx173 } from "react/jsx-runtime";
+var Table = ({ children, sx, className, containerSx }) => /* @__PURE__ */ jsx173(TableContainer, { className: "Slim-Horizontal-Scroll", sx: containerSx, children: /* @__PURE__ */ jsx173(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 jsx173 } from "react/jsx-runtime";
-var TableBody = ({ children }) => /* @__PURE__ */ jsx173(MuiTableBody, { children });
+import { jsx as jsx174 } from "react/jsx-runtime";
+var TableBody = ({ children }) => /* @__PURE__ */ jsx174(MuiTableBody, { children });
 var TableBody_default = TableBody;
 
 // src/components/table/TableCell.tsx
 import {
   TableCell as MuiTableCell2
 } from "@mui/material";
-import { jsx as jsx174 } from "react/jsx-runtime";
+import { jsx as jsx175 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   size = "M",
@@ -28657,7 +28882,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx174(
+}) => /* @__PURE__ */ jsx175(
   MuiTableCell2,
   {
     ...rest,
@@ -28681,12 +28906,12 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
-import * as React97 from "react";
-import { jsx as jsx175 } from "react/jsx-runtime";
+import * as React98 from "react";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = React97.useState(false);
-  const [showIcon, setShowIcon] = React97.useState(false);
+  const [isCopied, setIsCopied] = React98.useState(false);
+  const [showIcon, setShowIcon] = React98.useState(false);
   const manageButtonClicked = () => {
     void navigator.clipboard.writeText(textToCopy ?? text);
     if (isCopied) {
@@ -28700,7 +28925,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const getIconId = () => !isCopied ? "content-copy" : "check";
   const iconHiddenClass = "icon-hidden";
   const iconCopiedClass = "icon-copied";
-  return /* @__PURE__ */ jsx175(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx175(
+  return /* @__PURE__ */ jsx176(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx176(
     Stack_default,
     {
       direction: "row",
@@ -28709,7 +28934,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
       onMouseEnter: () => setShowIcon(true),
       onMouseLeave: () => setShowIcon(false),
       onClick: manageButtonClicked,
-      children: /* @__PURE__ */ jsx175(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx175(
+      children: /* @__PURE__ */ jsx176(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx176(
         Button_default,
         {
           className: isCopied ? iconCopiedClass : !showIcon ? iconHiddenClass : "",
@@ -28739,21 +28964,21 @@ var TableCellCopy_default = TableCellCopy;
 
 // src/components/table/TableHead.tsx
 import { TableHead as MuiTableHead } from "@mui/material";
-import { jsx as jsx176 } from "react/jsx-runtime";
-var TableHead = ({ children }) => /* @__PURE__ */ jsx176(MuiTableHead, { children });
+import { jsx as jsx177 } from "react/jsx-runtime";
+var TableHead = ({ children }) => /* @__PURE__ */ jsx177(MuiTableHead, { children });
 var TableHead_default = TableHead;
 
 // src/components/table/TableRow.tsx
 import {
   TableRow as MuiTableRow2
 } from "@mui/material";
-import { jsx as jsx177 } from "react/jsx-runtime";
+import { jsx as jsx178 } from "react/jsx-runtime";
 var TableRow = ({
   children,
   isFollowedByNestedTable = false,
   fadeInLeftAnimation = false,
   sx
-}) => /* @__PURE__ */ jsx177(
+}) => /* @__PURE__ */ jsx178(
   MuiTableRow2,
   {
     className: `${isFollowedByNestedTable ? "Followed-By-Nested-Table" : ""} ${fadeInLeftAnimation ? "animated fadeInLeft" : ""}`,
@@ -28765,14 +28990,14 @@ var TableRow_default = TableRow;
 
 // src/components/table/NestedTable.tsx
 import { Collapse as Collapse7 } from "@mui/material";
-import { jsx as jsx178 } from "react/jsx-runtime";
+import { jsx as jsx179 } from "react/jsx-runtime";
 var NestedTable = ({
   colSpan,
   children,
   className = "",
   sx,
   isVisible = true
-}) => /* @__PURE__ */ jsx178(TableRow_default, { children: /* @__PURE__ */ jsx178(
+}) => /* @__PURE__ */ jsx179(TableRow_default, { children: /* @__PURE__ */ jsx179(
   TableCell_default,
   {
     colSpan,
@@ -28781,14 +29006,14 @@ var NestedTable = ({
       height: "auto",
       ...!isVisible && { borderBottom: "none" }
     },
-    children: /* @__PURE__ */ jsx178(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx178(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx178(Paper_default, { children: /* @__PURE__ */ jsx178(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
+    children: /* @__PURE__ */ jsx179(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx179(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx179(Paper_default, { children: /* @__PURE__ */ jsx179(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
   }
 ) });
 var NestedTable_default = NestedTable;
 
 // src/components/toolbar/ToolbarBreadcrumb.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
-var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx179(
+import { jsx as jsx180 } from "react/jsx-runtime";
+var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx180(
   Stack_default,
   {
     direction: "row",
@@ -28798,7 +29023,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx179(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx179(
+          /* @__PURE__ */ jsx180(
             Typography_default,
             {
               color: grey500,
@@ -28821,10 +29046,10 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
-import * as React98 from "react";
-import { jsx as jsx180 } from "react/jsx-runtime";
-var ToolbarBreadcrumbButton = React98.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx180(
+import * as React99 from "react";
+import { jsx as jsx181 } from "react/jsx-runtime";
+var ToolbarBreadcrumbButton = React99.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx181(
     ButtonBase5,
     {
       className: `Cn-ToolbarBreadcrumbButton ${className}`,
@@ -28843,14 +29068,14 @@ var ToolbarBreadcrumbButton = React98.forwardRef(function ToolbarBreadcrumbButto
         }
       },
       ...rest,
-      children: /* @__PURE__ */ jsx180(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
+      children: /* @__PURE__ */ jsx181(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
     }
   );
 });
 var ToolbarBreadcrumbButton_default = ToolbarBreadcrumbButton;
 
 // src/components/toolbar/Toolbar.tsx
-import { jsx as jsx181, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs89 } from "react/jsx-runtime";
 var Toolbar = ({
   children,
   rightActions,
@@ -28859,7 +29084,7 @@ var Toolbar = ({
   sx,
   dataTestId,
   onClickToolbar
-}) => /* @__PURE__ */ jsxs88(
+}) => /* @__PURE__ */ jsxs89(
   Box_default2,
   {
     className: `Cn-Toolbar ${className}`,
@@ -28879,7 +29104,7 @@ var Toolbar = ({
     onClick: onClickToolbar,
     "data-testid": dataTestId,
     children: [
-      /* @__PURE__ */ jsxs88(
+      /* @__PURE__ */ jsxs89(
         Box_default2,
         {
           sx: {
@@ -28891,7 +29116,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx181(
+            leftActions && /* @__PURE__ */ jsx182(
               Box_default2,
               {
                 className: `Cn-Toolbar-left`,
@@ -28901,7 +29126,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx181(
+            /* @__PURE__ */ jsx182(
               Box_default2,
               {
                 className: `Cn-Toolbar-children`,
@@ -28916,7 +29141,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx181(
+      rightActions && /* @__PURE__ */ jsx182(
         Box_default2,
         {
           className: `Cn-Toolbar-right`,
@@ -28935,26 +29160,26 @@ var Toolbar = ({
 var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
-import * as React99 from "react";
-import { useState as useState45 } from "react";
-import { jsx as jsx182, jsxs as jsxs89 } from "react/jsx-runtime";
-var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
+import * as React100 from "react";
+import { useState as useState46 } from "react";
+import { jsx as jsx183, jsxs as jsxs90 } from "react/jsx-runtime";
+var ToolbarTitle = React100.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
   className,
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React99.useRef(
+  const textElementRef = React100.useRef(
     null
   );
-  const [showHoverActions, setShowHoverActions] = useState45(false);
-  return /* @__PURE__ */ jsx182(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx182(
+  const [showHoverActions, setShowHoverActions] = useState46(false);
+  return /* @__PURE__ */ jsx183(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx183(
     TextEllipsisTooltip_default,
     {
       title: title ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsxs89(
+      children: /* @__PURE__ */ jsxs90(
         Typography_default,
         {
           color: color2,
@@ -28972,7 +29197,7 @@ var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx182(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx183(
               Box_default2,
               {
                 sx: {
@@ -29001,13 +29226,13 @@ var Slide_default = Slide;
 
 // src/components/widget/WidgetLegendItem.tsx
 import { ButtonBase as ButtonBase6 } from "@mui/material";
-import { jsx as jsx183, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx184, jsxs as jsxs91 } from "react/jsx-runtime";
 var WidgetLegendItem = ({
   groupLabel,
   legendDirection = "column",
   items = [],
   onClick
-}) => /* @__PURE__ */ jsx183(
+}) => /* @__PURE__ */ jsx184(
   ButtonBase6,
   {
     tabIndex: onClick ? 0 : -1,
@@ -29021,7 +29246,7 @@ var WidgetLegendItem = ({
       p: "2px 12px",
       cursor: onClick ? "pointer" : "default"
     },
-    children: /* @__PURE__ */ jsxs90(
+    children: /* @__PURE__ */ jsxs91(
       Box_default2,
       {
         sx: {
@@ -29033,7 +29258,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx183(
+          groupLabel && /* @__PURE__ */ jsx184(
             Typography_default,
             {
               variant: "overline",
@@ -29055,7 +29280,7 @@ var WidgetLegendItem = ({
               style: style3
             }, i) => {
               const incrementLabelIconId = incrementLabelType && incrementLabelStyles[incrementLabelType].icon;
-              return /* @__PURE__ */ jsxs90(
+              return /* @__PURE__ */ jsxs91(
                 Box_default2,
                 {
                   sx: {
@@ -29065,7 +29290,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx183(
+                    iconColor && /* @__PURE__ */ jsx184(
                       Icon_default,
                       {
                         id: iconId,
@@ -29076,7 +29301,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx183(
+                    label && /* @__PURE__ */ jsx184(
                       Typography_default,
                       {
                         variant: "caption",
@@ -29085,7 +29310,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx183(
+                    value && /* @__PURE__ */ jsx184(
                       Typography_default,
                       {
                         sx: style3,
@@ -29094,7 +29319,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx183(
+                    incrementLabelValue && /* @__PURE__ */ jsx184(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -29120,8 +29345,8 @@ var WidgetLegendItem_default = WidgetLegendItem;
 
 // src/components/widget/Widget.tsx
 import MuiCard2 from "@mui/material/Card";
-import { jsx as jsx184 } from "react/jsx-runtime";
-var Widget = ({ children }) => /* @__PURE__ */ jsx184(
+import { jsx as jsx185 } from "react/jsx-runtime";
+var Widget = ({ children }) => /* @__PURE__ */ jsx185(
   MuiCard2,
   {
     variant: "elevation",
@@ -29145,8 +29370,8 @@ var Widget = ({ children }) => /* @__PURE__ */ jsx184(
 var Widget_default = Widget;
 
 // src/components/widget/WidgetActions.tsx
-import { jsx as jsx185 } from "react/jsx-runtime";
-var WidgetActions = ({ children }) => /* @__PURE__ */ jsx185(
+import { jsx as jsx186 } from "react/jsx-runtime";
+var WidgetActions = ({ children }) => /* @__PURE__ */ jsx186(
   Box_default2,
   {
     sx: {
@@ -29160,8 +29385,8 @@ var WidgetActions = ({ children }) => /* @__PURE__ */ jsx185(
 var WidgetActions_default = WidgetActions;
 
 // src/components/widget/WidgetTitle.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
-var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx186(
+import { jsx as jsx187 } from "react/jsx-runtime";
+var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx187(
   Box_default2,
   {
     sx: {
@@ -29171,7 +29396,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx186(
+    children: /* @__PURE__ */ jsx187(
       Typography_default,
       {
         variant: "subtitle2",
@@ -29185,12 +29410,12 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       }
     )
   }
-) : /* @__PURE__ */ jsx186("span", {});
+) : /* @__PURE__ */ jsx187("span", {});
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
-import * as React100 from "react";
-import { Fragment as Fragment45, jsx as jsx187, jsxs as jsxs91 } from "react/jsx-runtime";
+import * as React101 from "react";
+import { Fragment as Fragment45, jsx as jsx188, jsxs as jsxs92 } from "react/jsx-runtime";
 var sizes7 = {
   M: 400,
   L: 500,
@@ -29218,7 +29443,7 @@ var iconButtonsStyles = {
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   }
 };
-var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
+var MinimizableWindow = React101.forwardRef(function MinimizableWindow2({
   children,
   title,
   size = "M",
@@ -29237,17 +29462,17 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
   onBack
 }, ref) {
   const { t } = useTranslation();
-  const overlayRef = React100.useRef(null);
-  const windowRef = React100.useRef(null);
-  const headerRef = React100.useRef(null);
-  const [isDraggingState, setIsDraggingState] = React100.useState(false);
-  const diffRef = React100.useRef({ x: 0, y: 0 });
-  React100.useImperativeHandle(ref, () => ({
+  const overlayRef = React101.useRef(null);
+  const windowRef = React101.useRef(null);
+  const headerRef = React101.useRef(null);
+  const [isDraggingState, setIsDraggingState] = React101.useState(false);
+  const diffRef = React101.useRef({ x: 0, y: 0 });
+  React101.useImperativeHandle(ref, () => ({
     window: windowRef.current,
     header: headerRef.current,
     overlay: overlayRef.current
   }));
-  React100.useEffect(() => {
+  React101.useEffect(() => {
     if (open) {
       overlayRef.current?.style.removeProperty("transform");
       overlayRef.current?.style.removeProperty("opacity");
@@ -29289,8 +29514,8 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
       overlayRef.current.style.opacity = "0";
     }
   };
-  return /* @__PURE__ */ jsxs91(Fragment45, { children: [
-    isDraggingState && /* @__PURE__ */ jsx187(
+  return /* @__PURE__ */ jsxs92(Fragment45, { children: [
+    isDraggingState && /* @__PURE__ */ jsx188(
       Box_default2,
       {
         sx: {
@@ -29306,7 +29531,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx187(
+    /* @__PURE__ */ jsx188(
       Box_default2,
       {
         ref: overlayRef,
@@ -29323,7 +29548,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
           ...!open && { pointerEvents: "none" },
           transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
         },
-        children: /* @__PURE__ */ jsxs91(
+        children: /* @__PURE__ */ jsxs92(
           Stack_default,
           {
             sx: {
@@ -29334,7 +29559,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
             width: `${sizes7[size]}px`,
             height: contentHeight !== void 0 && headerRef.current ? `${contentHeight + contentPadding + headerRef.current.scrollHeight}px` : void 0,
             children: [
-              /* @__PURE__ */ jsxs91(
+              /* @__PURE__ */ jsxs92(
                 Stack_default,
                 {
                   ref: headerRef,
@@ -29348,19 +29573,19 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
                   onMouseDown: handleMouseDown,
                   minHeight: "44px",
                   children: [
-                    /* @__PURE__ */ jsx187(
+                    /* @__PURE__ */ jsx188(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
-                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx187(
+                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx188(
                           Tooltip_default,
                           {
                             title: t("MINIMIZABLE_WINDOW.GO_BACK"),
                             zIndex: 999999,
                             placement: "top",
-                            children: /* @__PURE__ */ jsx187(
+                            children: /* @__PURE__ */ jsx188(
                               IconButton_default,
                               {
                                 size: iconSizes2,
@@ -29373,7 +29598,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
                         ) : backButton)
                       }
                     ),
-                    /* @__PURE__ */ jsx187(
+                    /* @__PURE__ */ jsx188(
                       Box_default2,
                       {
                         sx: {
@@ -29381,10 +29606,10 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
                           left: "50%",
                           transform: "translateX(-50%)"
                         },
-                        children: typeof title === "string" ? /* @__PURE__ */ jsx187(Typography_default, { children: title }) : title
+                        children: typeof title === "string" ? /* @__PURE__ */ jsx188(Typography_default, { children: title }) : title
                       }
                     ),
-                    /* @__PURE__ */ jsxs91(
+                    /* @__PURE__ */ jsxs92(
                       Stack_default,
                       {
                         direction: "row",
@@ -29392,13 +29617,13 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
                           rightActions,
-                          closeable && /* @__PURE__ */ jsx187(Box_default2, { children: /* @__PURE__ */ jsx187(
+                          closeable && /* @__PURE__ */ jsx188(Box_default2, { children: /* @__PURE__ */ jsx188(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx187(
+                              children: /* @__PURE__ */ jsx188(
                                 IconButton_default,
                                 {
                                   size: iconSizes2,
@@ -29420,7 +29645,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx187(
+              /* @__PURE__ */ jsx188(
                 Stack_default,
                 {
                   sx: {
@@ -29439,31 +29664,31 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback25, useContext as useContext20 } from "react";
+import { useCallback as useCallback26, useContext as useContext21 } from "react";
 var useFormatters = () => {
-  const { locale, currency, timezone } = useContext20(IntlContext);
+  const { locale, currency, timezone } = useContext21(IntlContext);
   return {
-    formatCompactNumber: useCallback25(
+    formatCompactNumber: useCallback26(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback25(
+    formatNumber: useCallback26(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback25(
+    formatPercentage: useCallback26(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback25(
+    formatCurrency: useCallback26(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback25(
+    formatDate: useCallback26(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     ),
-    formatPhone: useCallback25(
+    formatPhone: useCallback26(
       (phone, format2) => formatPhone(phone, format2),
       []
     )
@@ -29510,6 +29735,7 @@ export {
   ConfirmationDialog_default as ConfirmationDialog,
   Container_default as Container,
   CurrencyFormatter_default as CurrencyFormatter,
+  DateCalendar_default as DateCalendar,
   DateFormatter_default as DateFormatter,
   DateIntervalPicker_default as DateIntervalPicker,
   DatePicker_default as DatePicker,