@connectif/ui-components 9.0.6 → 9.1.0

package/dist/index.js

@@ -8342,6 +8342,7 @@ var Divider = ({
     variant,
     ...rest,
     sx: {
+      opacity: 1,
       ...sx,
       ...color2 && { borderColor: color2 }
     }
@@ -20082,8 +20083,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();
@@ -20199,7 +20204,7 @@ var CalendarMonth = ({
           color: fgColor,
           type: "fill"
         } : isToday ? {
-          color: primaryPalette.main,
+          color: effectiveTodayForegroundColor,
           type: "stroke"
         } : void 0
       };
@@ -20225,7 +20230,7 @@ var CalendarMonth = ({
           color: s.color,
           type: "fill"
         } : isToday ? {
-          color: primaryPalette.main,
+          color: effectiveTodayForegroundColor,
           type: "stroke"
         } : void 0
       };
@@ -20234,10 +20239,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
       };
@@ -20249,12 +20254,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: {
@@ -20274,7 +20279,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,
           {
@@ -20294,16 +20300,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,
     {
@@ -20311,12 +20329,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",
@@ -24603,7 +24625,7 @@ var AutocompleteList = function AutocompleteList2({
           anchorEl: inputContainerRef.current,
           open: isOpen,
           sx: { zIndex: 3e3 },
-          children: /* @__PURE__ */ jsxs66(
+          children: /* @__PURE__ */ jsx136(
             Paper_default,
             {
               sx: {
@@ -24611,80 +24633,89 @@ var AutocompleteList = function AutocompleteList2({
                 borderRadius: "8px",
                 width: popoverWidth ?? "auto"
               },
-              children: [
-                exclusiveOption && /* @__PURE__ */ jsxs66(Fragment34, { children: [
-                  /* @__PURE__ */ jsx136(
-                    ListItemButton_default,
-                    {
-                      selected: isExclusiveSelected,
-                      tabIndex: -1,
-                      role: "option",
-                      baseSx: {
-                        color: palette2.grey[900]
-                      },
-                      text: exclusiveOption.label,
-                      onClick: (event) => onAddSelectedValue(
-                        event,
-                        exclusiveOption
-                      ),
-                      "data-testid": `autocomplete-option-${exclusiveOption.id}`
-                    }
-                  ),
-                  /* @__PURE__ */ jsx136(Divider_default, {})
-                ] }),
-                (!exclusiveOption || filteredOptions.length > 0 || isLoading) && /* @__PURE__ */ jsxs66(
-                  Box_default2,
-                  {
-                    sx: {
-                      maxHeight: "40vh",
-                      height: !isLoading && filteredOptions.length ? filteredOptions.length * 44 : "auto",
-                      width: "100%",
-                      borderRadius: "8px"
-                    },
-                    className: "Slim-Vertical-Scroll",
-                    ref: listRef,
-                    children: [
-                      isLoading && /* @__PURE__ */ jsx136(
-                        ListItem_default,
-                        {
-                          text: loadingText ?? t("AUTOCOMPLETE.LOADING")
-                        }
-                      ),
-                      !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx136(
-                        ListItem_default,
+              children: /* @__PURE__ */ jsxs66(
+                Box_default2,
+                {
+                  sx: {
+                    width: "100%",
+                    borderRadius: "8px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    !!exclusiveOption && /* @__PURE__ */ jsxs66(Fragment34, { children: [
+                      /* @__PURE__ */ jsx136(
+                        ListItemButton_default,
                         {
-                          text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
+                          selected: isExclusiveSelected,
+                          tabIndex: -1,
+                          role: "option",
+                          baseSx: {
+                            color: palette2.grey[900]
+                          },
+                          text: exclusiveOption.label,
+                          onClick: (event) => onAddSelectedValue(
+                            event,
+                            exclusiveOption
+                          ),
+                          "data-testid": `autocomplete-option-${exclusiveOption.id}`
                         }
                       ),
-                      !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx136(AutoSizer5, { children: ({
-                        height: height2,
-                        width: width2
-                      }) => /* @__PURE__ */ jsx136(
-                        FixedSizeList3,
-                        {
-                          overscanCount: 3,
-                          height: height2,
-                          itemCount: filteredOptions.length,
-                          itemSize: AUTOCOMPLETE_ITEM_HEIGHT,
-                          width: width2,
-                          className: "Slim-Vertical-Scroll",
-                          ref: virtualListRef,
-                          initialScrollOffset: getInitialListScroll(
+                      /* @__PURE__ */ jsx136(Divider_default, {})
+                    ] }),
+                    /* @__PURE__ */ jsxs66(
+                      Box_default2,
+                      {
+                        sx: {
+                          maxHeight: !exclusiveOption ? "40vh" : "calc(40vh - 44px)",
+                          height: !isLoading && filteredOptions.length ? filteredOptions.length * 44 : "auto",
+                          width: "100%"
+                        },
+                        className: "Slim-Vertical-Scroll",
+                        ref: listRef,
+                        children: [
+                          isLoading && /* @__PURE__ */ jsx136(
+                            ListItem_default,
                             {
-                              itemHeight: AUTOCOMPLETE_ITEM_HEIGHT,
-                              containerHeight: listRef.current?.clientHeight ?? 0,
-                              highlightedIndex,
-                              selectedIndex,
-                              totalItems: filteredOptions.length
+                              text: loadingText ?? t("AUTOCOMPLETE.LOADING")
                             }
                           ),
-                          children: ListItemButtonWrapper
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ]
+                          !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx136(
+                            ListItem_default,
+                            {
+                              text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
+                            }
+                          ),
+                          !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx136(AutoSizer5, { children: ({
+                            height: height2,
+                            width: width2
+                          }) => /* @__PURE__ */ jsx136(
+                            FixedSizeList3,
+                            {
+                              overscanCount: 3,
+                              height: height2,
+                              itemCount: filteredOptions.length,
+                              itemSize: AUTOCOMPLETE_ITEM_HEIGHT,
+                              width: width2,
+                              className: "Slim-Vertical-Scroll",
+                              ref: virtualListRef,
+                              initialScrollOffset: getInitialListScroll(
+                                {
+                                  itemHeight: AUTOCOMPLETE_ITEM_HEIGHT,
+                                  containerHeight: listRef.current?.clientHeight ?? 0,
+                                  highlightedIndex,
+                                  selectedIndex,
+                                  totalItems: filteredOptions.length
+                                }
+                              ),
+                              children: ListItemButtonWrapper
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
         }
@@ -26637,12 +26668,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,
@@ -26650,7 +26867,7 @@ var LinearProgress = ({
   ...rest
 }) => {
   const { palette: palette2 } = useCustomTheme();
-  return /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsx150(
     MuiLinearProgress,
     {
       ...rest,
@@ -26667,11 +26884,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",
@@ -26693,10 +26910,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: {
@@ -26710,7 +26927,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,
@@ -26719,14 +26936,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%",
@@ -26736,7 +26953,7 @@ var CircularProgress = ({
             ]
           }
         ) }) }),
-        showCircularBackground && /* @__PURE__ */ jsx150(
+        showCircularBackground && /* @__PURE__ */ jsx151(
           Box4,
           {
             sx: {
@@ -26749,7 +26966,7 @@ var CircularProgress = ({
                 maxHeight: circularSizesPxMap[size]
               }
             },
-            children: /* @__PURE__ */ jsx150(
+            children: /* @__PURE__ */ jsx151(
               MuiCircularProgress,
               {
                 variant: "determinate",
@@ -26761,7 +26978,7 @@ var CircularProgress = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx151(
           MuiCircularProgress,
           {
             variant,
@@ -26790,7 +27007,7 @@ var CircularProgress = ({
             thickness
           }
         ),
-        variant !== "indeterminate" && /* @__PURE__ */ jsx150(
+        variant !== "indeterminate" && /* @__PURE__ */ jsx151(
           Box4,
           {
             sx: {
@@ -26805,7 +27022,7 @@ var CircularProgress = ({
               height: circularSizesPxMap[size],
               width: circularSizesPxMap[size]
             },
-            children: typeof label === "string" ? /* @__PURE__ */ jsx150(
+            children: typeof label === "string" ? /* @__PURE__ */ jsx151(
               Typography3,
               {
                 variant: typographyVariant,
@@ -26825,7 +27042,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: {
@@ -26864,9 +27081,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",
@@ -26877,7 +27094,7 @@ var DonutProgress = ({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs78(
+  return /* @__PURE__ */ jsxs79(
     Box5,
     {
       sx: {
@@ -26885,7 +27102,7 @@ var DonutProgress = ({
         width: "fit-content"
       },
       children: [
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx152(
           CircularProgress_default,
           {
             variant: "determinate",
@@ -26901,7 +27118,7 @@ var DonutProgress = ({
             color: variants2[variant].emptyColor
           }
         ),
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx152(
           Box5,
           {
             sx: {
@@ -26909,7 +27126,7 @@ var DonutProgress = ({
               top: 0,
               left: 0
             },
-            children: /* @__PURE__ */ jsx151(
+            children: /* @__PURE__ */ jsx152(
               CircularProgress_default,
               {
                 variant: "determinate",
@@ -26924,7 +27141,7 @@ var DonutProgress = ({
             )
           }
         ),
-        variant !== "empty" && labelChip && /* @__PURE__ */ jsx151(
+        variant !== "empty" && labelChip && /* @__PURE__ */ jsx152(
           Box5,
           {
             sx: {
@@ -26941,7 +27158,7 @@ var DonutProgress = ({
               justifyContent: "center",
               boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsx151(
+            children: /* @__PURE__ */ jsx152(
               Typography_default,
               {
                 variant: "tooltip",
@@ -26958,14 +27175,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: {
@@ -26981,29 +27198,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
     ] });
@@ -27012,7 +27229,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,
@@ -27116,11 +27333,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;
@@ -27130,13 +27347,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)
     });
@@ -27151,11 +27368,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 = ({
@@ -27165,19 +27382,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 }
             }
@@ -27192,7 +27409,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,
@@ -27200,8 +27417,8 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs80(Fragment42, { children: [
-  /* @__PURE__ */ jsxs80(
+}) => /* @__PURE__ */ jsxs81(Fragment42, { children: [
+  /* @__PURE__ */ jsxs81(
     Box_default2,
     {
       sx: {
@@ -27216,12 +27433,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,
@@ -27244,8 +27461,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 })
       ]
     }
   )
@@ -27253,10 +27470,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,
@@ -27271,7 +27488,7 @@ var NavbarButton = React89.forwardRef(
       if (!highlighted) {
         return element;
       }
-      return /* @__PURE__ */ jsxs81(
+      return /* @__PURE__ */ jsxs82(
         Box6,
         {
           sx: {
@@ -27281,7 +27498,7 @@ var NavbarButton = React89.forwardRef(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Box6,
               {
                 sx: {
@@ -27297,7 +27514,7 @@ var NavbarButton = React89.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Box6,
               {
                 sx: {
@@ -27312,7 +27529,7 @@ var NavbarButton = React89.forwardRef(
         }
       );
     };
-    return /* @__PURE__ */ jsxs81(
+    return /* @__PURE__ */ jsxs82(
       ButtonBase2,
       {
         className: "NavbarButton-root",
@@ -27330,7 +27547,7 @@ var NavbarButton = React89.forwardRef(
         },
         children: [
           srcUrl ? getButtonContent(
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Avatar_default,
               {
                 className: "NavbarButton-icon",
@@ -27340,7 +27557,7 @@ var NavbarButton = React89.forwardRef(
               }
             )
           ) : getButtonContent(
-            /* @__PURE__ */ jsx156(
+            /* @__PURE__ */ jsx157(
               Icon_default,
               {
                 id: iconId,
@@ -27356,7 +27573,7 @@ var NavbarButton = React89.forwardRef(
               }
             )
           ),
-          badgeIconProps && /* @__PURE__ */ jsx156(
+          badgeIconProps && /* @__PURE__ */ jsx157(
             Icon_default,
             {
               ...badgeIconProps,
@@ -27378,8 +27595,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: {
@@ -27399,12 +27616,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,
@@ -27415,7 +27632,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" })
       }
     );
   }
@@ -27423,8 +27640,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,
@@ -27433,8 +27650,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;
@@ -27465,8 +27682,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: {
@@ -27483,7 +27700,7 @@ var DonutFocusOverlay = ({
         }
       }
     ),
-    chipLabel && /* @__PURE__ */ jsx159(
+    chipLabel && /* @__PURE__ */ jsx160(
       Chip_default,
       {
         label: chipLabel,
@@ -27510,7 +27727,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,
@@ -27524,10 +27741,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,
@@ -27536,9 +27753,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,
@@ -27552,7 +27769,7 @@ var Pager = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs83(Label, { children: [
+    /* @__PURE__ */ jsxs84(Label, { children: [
       from,
       " - ",
       to,
@@ -27561,7 +27778,7 @@ var Pager = ({
       " ",
       total
     ] }),
-    /* @__PURE__ */ jsx160(
+    /* @__PURE__ */ jsx161(
       IconButton_default,
       {
         disabled: page <= 1,
@@ -27569,7 +27786,7 @@ var Pager = ({
         onClick: () => onPageChange(page - 1, pageSize)
       }
     ),
-    /* @__PURE__ */ jsx160(
+    /* @__PURE__ */ jsx161(
       IconButton_default,
       {
         disabled: page > total / pageSize,
@@ -27583,17 +27800,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;
     }
@@ -27633,8 +27850,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: {
@@ -27651,10 +27868,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,
@@ -27673,7 +27890,7 @@ var HorizontalScrollable = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx161(
+    /* @__PURE__ */ jsx162(
       ButtonBase4,
       {
         sx: {
@@ -27690,7 +27907,7 @@ var HorizontalScrollable = ({
           ...isRightArrowHidden && { display: "none" }
         },
         onClick: () => rightScroll(),
-        children: /* @__PURE__ */ jsx161(Icon_default, { id: "chevron-right" })
+        children: /* @__PURE__ */ jsx162(Icon_default, { id: "chevron-right" })
       }
     )
   ] });
@@ -27698,8 +27915,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",
@@ -27718,23 +27935,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) {
@@ -27748,7 +27965,7 @@ function Carousel({
     },
     []
   );
-  const resetCarousel = React93.useCallback(
+  const resetCarousel = React94.useCallback(
     (root, container) => {
       root.style.width = "";
       showedElementsRef.current = void 0;
@@ -27756,7 +27973,7 @@ function Carousel({
     },
     []
   );
-  const setMeasures = React93.useCallback(
+  const setMeasures = React94.useCallback(
     (root, container, nextElementsIndex) => {
       const children = Array.from(container.children);
       if (children.length === 0) {
@@ -27785,7 +28002,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) {
@@ -27832,7 +28049,7 @@ function Carousel({
     updateArrows,
     resetCarousel
   ]);
-  const getInitialWidth = React93.useCallback(
+  const getInitialWidth = React94.useCallback(
     (el) => {
       let current = el;
       let width2 = 0;
@@ -27850,7 +28067,7 @@ function Carousel({
     },
     []
   );
-  const resizeObserverCallback = React93.useCallback(() => {
+  const resizeObserverCallback = React94.useCallback(() => {
     if (!rootRef.current || !containerRef.current) {
       return;
     }
@@ -27861,7 +28078,7 @@ function Carousel({
     previousClientWidth.current = newClientWidth;
     updateVisibleCount();
   }, [getInitialWidth, updateVisibleCount]);
-  React93.useEffect(() => {
+  React94.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -27951,7 +28168,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: {
@@ -27963,7 +28180,7 @@ function Carousel({
         }
       },
       children: [
-        /* @__PURE__ */ jsx162(
+        /* @__PURE__ */ jsx163(
           IconButton_default,
           {
             iconId: "chevron-left",
@@ -27976,7 +28193,7 @@ function Carousel({
             onClick: () => scrollToNext("left")
           }
         ),
-        /* @__PURE__ */ jsx162(
+        /* @__PURE__ */ jsx163(
           Box_default2,
           {
             ref: containerRef,
@@ -27990,7 +28207,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: {
@@ -28002,7 +28219,7 @@ function Carousel({
             ))
           }
         ),
-        /* @__PURE__ */ jsx162(
+        /* @__PURE__ */ jsx163(
           IconButton_default,
           {
             iconId: "chevron-right",
@@ -28025,12 +28242,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,
@@ -28048,10 +28265,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",
@@ -28076,7 +28293,7 @@ var iconColors = {
   error: error300,
   warning: complementary300
 };
-var Snackbar = React94.forwardRef(
+var Snackbar = React95.forwardRef(
   function Snackbar2({
     severity = "info",
     message,
@@ -28088,13 +28305,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,
@@ -28112,14 +28329,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: {
@@ -28127,10 +28344,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",
@@ -28138,7 +28355,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: {
@@ -28153,7 +28370,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",
@@ -28178,7 +28395,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,
@@ -28194,7 +28411,7 @@ var enqueueSnackbar = (message, options = {}) => {
     autoHideDuration: autoHideDurationMs ?? 1e4,
     persist: persist ?? false,
     content(key, message2) {
-      return /* @__PURE__ */ jsx165(
+      return /* @__PURE__ */ jsx166(
         Snackbar_default,
         {
           identifierKey: key,
@@ -28211,7 +28428,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,
@@ -28219,10 +28436,10 @@ var TabButton = ({
   marginRight = "0px",
   dataTestId,
   ...rest
-}) => /* @__PURE__ */ jsx166(
+}) => /* @__PURE__ */ jsx167(
   MuiTab,
   {
-    label: /* @__PURE__ */ jsx166(
+    label: /* @__PURE__ */ jsx167(
       "div",
       {
         style: {
@@ -28257,13 +28474,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%",
@@ -28299,9 +28516,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";
@@ -28338,7 +28555,7 @@ function SwipeableViews({
     }
   }, [index]);
   const hasShowTab = (childIndex) => childIndex === index || childIndex === previousIndex;
-  return /* @__PURE__ */ jsx167(
+  return /* @__PURE__ */ jsx168(
     "div",
     {
       ...rootProps,
@@ -28361,12 +28578,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(
@@ -28391,7 +28608,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,
@@ -28406,8 +28623,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
@@ -28421,7 +28638,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;
@@ -28445,7 +28662,7 @@ var Tabs = ({
     },
     []
   );
-  const calculateIndicatorTabWidth = React96.useCallback((index) => {
+  const calculateIndicatorTabWidth = React97.useCallback((index) => {
     if (!tabsRef.current) {
       return null;
     }
@@ -28464,7 +28681,7 @@ var Tabs = ({
     indicator.style.width = `${textWidth}px`;
     indicator.style.left = `${left}px`;
   }, []);
-  React96.useEffect(() => {
+  React97.useEffect(() => {
     if (!tabsRef.current) {
       return;
     }
@@ -28490,7 +28707,7 @@ var Tabs = ({
     bottom: 0,
     borderRadius: "8px"
   };
-  return /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs88(
     Box_default2,
     {
       sx: {
@@ -28504,7 +28721,7 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx168(
+        /* @__PURE__ */ jsx169(
           MuiTabs,
           {
             ref: tabsRef,
@@ -28543,7 +28760,7 @@ var Tabs = ({
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx168(
+        /* @__PURE__ */ jsx169(
           Box_default2,
           {
             sx: {
@@ -28552,7 +28769,7 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx168(
+            children: /* @__PURE__ */ jsx169(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
@@ -28581,8 +28798,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: {
@@ -28599,8 +28816,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,
@@ -28613,8 +28830,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
@@ -28622,21 +28839,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",
@@ -28647,7 +28864,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx174(
+}) => /* @__PURE__ */ jsx175(
   MuiTableCell2,
   {
     ...rest,
@@ -28671,12 +28888,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) {
@@ -28690,7 +28907,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",
@@ -28699,7 +28916,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 : "",
@@ -28729,21 +28946,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" : ""}`,
@@ -28755,14 +28972,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,
@@ -28771,14 +28988,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",
@@ -28788,7 +29005,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx179(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx179(
+          /* @__PURE__ */ jsx180(
             Typography_default,
             {
               color: grey500,
@@ -28811,10 +29028,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}`,
@@ -28833,14 +29050,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,
@@ -28849,7 +29066,7 @@ var Toolbar = ({
   sx,
   dataTestId,
   onClickToolbar
-}) => /* @__PURE__ */ jsxs88(
+}) => /* @__PURE__ */ jsxs89(
   Box_default2,
   {
     className: `Cn-Toolbar ${className}`,
@@ -28869,7 +29086,7 @@ var Toolbar = ({
     onClick: onClickToolbar,
     "data-testid": dataTestId,
     children: [
-      /* @__PURE__ */ jsxs88(
+      /* @__PURE__ */ jsxs89(
         Box_default2,
         {
           sx: {
@@ -28881,7 +29098,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx181(
+            leftActions && /* @__PURE__ */ jsx182(
               Box_default2,
               {
                 className: `Cn-Toolbar-left`,
@@ -28891,7 +29108,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx181(
+            /* @__PURE__ */ jsx182(
               Box_default2,
               {
                 className: `Cn-Toolbar-children`,
@@ -28906,7 +29123,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx181(
+      rightActions && /* @__PURE__ */ jsx182(
         Box_default2,
         {
           className: `Cn-Toolbar-right`,
@@ -28925,26 +29142,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,
@@ -28962,7 +29179,7 @@ var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx182(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx183(
               Box_default2,
               {
                 sx: {
@@ -28991,13 +29208,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,
@@ -29011,7 +29228,7 @@ var WidgetLegendItem = ({
       p: "2px 12px",
       cursor: onClick ? "pointer" : "default"
     },
-    children: /* @__PURE__ */ jsxs90(
+    children: /* @__PURE__ */ jsxs91(
       Box_default2,
       {
         sx: {
@@ -29023,7 +29240,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx183(
+          groupLabel && /* @__PURE__ */ jsx184(
             Typography_default,
             {
               variant: "overline",
@@ -29045,7 +29262,7 @@ var WidgetLegendItem = ({
               style: style3
             }, i) => {
               const incrementLabelIconId = incrementLabelType && incrementLabelStyles[incrementLabelType].icon;
-              return /* @__PURE__ */ jsxs90(
+              return /* @__PURE__ */ jsxs91(
                 Box_default2,
                 {
                   sx: {
@@ -29055,7 +29272,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx183(
+                    iconColor && /* @__PURE__ */ jsx184(
                       Icon_default,
                       {
                         id: iconId,
@@ -29066,7 +29283,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx183(
+                    label && /* @__PURE__ */ jsx184(
                       Typography_default,
                       {
                         variant: "caption",
@@ -29075,7 +29292,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx183(
+                    value && /* @__PURE__ */ jsx184(
                       Typography_default,
                       {
                         sx: style3,
@@ -29084,7 +29301,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx183(
+                    incrementLabelValue && /* @__PURE__ */ jsx184(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -29110,8 +29327,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",
@@ -29135,8 +29352,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: {
@@ -29150,8 +29367,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: {
@@ -29161,7 +29378,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx186(
+    children: /* @__PURE__ */ jsx187(
       Typography_default,
       {
         variant: "subtitle2",
@@ -29175,12 +29392,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,
@@ -29208,7 +29425,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",
@@ -29227,17 +29444,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");
@@ -29279,8 +29496,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: {
@@ -29296,7 +29513,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx187(
+    /* @__PURE__ */ jsx188(
       Box_default2,
       {
         ref: overlayRef,
@@ -29313,7 +29530,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: {
@@ -29324,7 +29541,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,
@@ -29338,19 +29555,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,
@@ -29363,7 +29580,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
                         ) : backButton)
                       }
                     ),
-                    /* @__PURE__ */ jsx187(
+                    /* @__PURE__ */ jsx188(
                       Box_default2,
                       {
                         sx: {
@@ -29371,10 +29588,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",
@@ -29382,13 +29599,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,
@@ -29410,7 +29627,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx187(
+              /* @__PURE__ */ jsx188(
                 Stack_default,
                 {
                   sx: {
@@ -29429,31 +29646,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),
       []
     )
@@ -29500,6 +29717,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,