@connectif/ui-components 5.2.3 → 5.4.0

package/dist/index.js

@@ -97,7 +97,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment40 = REACT_FRAGMENT_TYPE;
+        var Fragment43 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -156,7 +156,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment40;
+        exports.Fragment = Fragment43;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -21237,7 +21237,9 @@ import InputBase from "@mui/material/InputBase";
 import { FixedSizeList as FixedSizeList2 } from "react-window";
 import AutoSizer4 from "react-virtualized-auto-sizer";
 import { jsx as jsx115 } from "react/jsx-runtime";
-var BootstrapInput = styled7(InputBase)(() => ({
+var BootstrapInput = styled7(InputBase, {
+  shouldForwardProp: (prop) => prop !== "notched"
+})(() => ({
   boxShadow: shadows[0],
   borderRadius: "16px",
   borderWidth: "1px",
@@ -21595,7 +21597,7 @@ var Select = function Select2({
         return /* @__PURE__ */ jsx115(
           SelectOption,
           {
-            label: label ?? value?.toString() ?? "",
+            label: label ?? optionValue?.toString() ?? "",
             value: optionValue,
             id: optionValue,
             colors: !menuColors?.selectedColor ? {
@@ -22009,11 +22011,358 @@ var UploadClickableArea = ({
 );
 var UploadClickableArea_default = UploadClickableArea;
 
-// src/components/input/CategorizedPicker.tsx
-import React64 from "react";
-import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack10 } from "@mui/material";
-import { Fragment as Fragment25, jsx as jsx120, jsxs as jsxs56 } from "react/jsx-runtime";
-var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx120(
+// src/components/input/categorized-picker/CategorizedPicker.tsx
+import React66 from "react";
+import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack11 } from "@mui/material";
+
+// src/components/input/categorized-picker/CategorizedPickerOptionItem.tsx
+import * as React64 from "react";
+import { jsx as jsx120 } from "react/jsx-runtime";
+var CategorizedPickerOptionItem = function CategorizedPickerOptionItem2({
+  option,
+  selectedId,
+  dataTestId,
+  index,
+  searchText = "",
+  onSelect,
+  onScrollToItem
+}) {
+  const itemRef = React64.useRef(null);
+  React64.useEffect(() => {
+    if (selectedId === option.id && itemRef.current) {
+      onScrollToItem(itemRef.current);
+    }
+  }, [onScrollToItem, option.id, selectedId]);
+  return /* @__PURE__ */ jsx120(
+    ListItemButton_default,
+    {
+      ref: itemRef,
+      selected: selectedId === option.id,
+      onClick: () => {
+        const { categorizedPickerItemType, ...rest } = option;
+        onSelect(rest);
+      },
+      buttonDataTestId: dataTestId ? dataTestId + "-option-" + index : void 0,
+      children: /* @__PURE__ */ jsx120(
+        TextEllipsis_default,
+        {
+          text: /* @__PURE__ */ jsx120(
+            TextMarker_default,
+            {
+              searchText,
+              backgroundColor: primary200,
+              multiSearchCharSeparator: ",",
+              children: option.name
+            }
+          ),
+          typographyVariant: "body2"
+        }
+      )
+    },
+    option.id
+  );
+};
+var CategorizedPickerOptionItem_default = CategorizedPickerOptionItem;
+
+// src/components/input/categorized-picker/CategorizedPickerSubcategoryItem.tsx
+import { jsx as jsx121 } from "react/jsx-runtime";
+var CategorizedPickerSubcategoryItem = function CategorizedPickerSubcategoryItem2({
+  option,
+  dataTestId,
+  index,
+  searchText = ""
+}) {
+  return /* @__PURE__ */ jsx121(
+    ListItemButton_default,
+    {
+      baseSx: { height: "16px", marginTop: "12px" },
+      selected: false,
+      buttonDataTestId: dataTestId ? dataTestId + "-option-" + index : void 0,
+      disabled: true,
+      children: /* @__PURE__ */ jsx121(
+        TextEllipsis_default,
+        {
+          text: /* @__PURE__ */ jsx121(
+            TextMarker_default,
+            {
+              searchText,
+              backgroundColor: primary200,
+              multiSearchCharSeparator: ",",
+              children: option.name
+            }
+          ),
+          typographyVariant: "caption"
+        }
+      )
+    },
+    option.name
+  );
+};
+var CategorizedPickerSubcategoryItem_default = CategorizedPickerSubcategoryItem;
+
+// src/components/input/categorized-picker/CategorizedPickerGroupItem.tsx
+import * as React65 from "react";
+import { jsx as jsx122 } from "react/jsx-runtime";
+var CategorizedPickerGroupItem = function CategorizedPickerGroupItem2({
+  option,
+  selectedId,
+  dataTestId,
+  index,
+  searchText = "",
+  onSelect,
+  onScrollToItem
+}) {
+  const [isCollapsed, setCollapsed] = React65.useState(
+    !searchText && !option.options.some(
+      (opt) => opt.categorizedPickerItemType === "option" && opt.id === selectedId
+    )
+  );
+  return /* @__PURE__ */ jsx122(
+    CollapsiblePanel_default,
+    {
+      header: /* @__PURE__ */ jsx122(
+        ListItemButton_default,
+        {
+          selected: selectedId === option.id,
+          onClick: () => {
+            setCollapsed(!isCollapsed);
+          },
+          baseSx: {
+            height: "auto",
+            minHeight: "44px",
+            "& > svg": { color: grey500 }
+          },
+          buttonDataTestId: dataTestId ? dataTestId + "group-option-" + index : void 0,
+          endIconId: isCollapsed ? `chevron-down` : `chevron-up`,
+          children: /* @__PURE__ */ jsx122(
+            TextEllipsis_default,
+            {
+              text: /* @__PURE__ */ jsx122(
+                TextMarker_default,
+                {
+                  searchText,
+                  backgroundColor: primary200,
+                  multiSearchCharSeparator: ",",
+                  children: option.name
+                }
+              ),
+              typographyVariant: "body2-semibold"
+            }
+          )
+        },
+        option.id
+      ),
+      isCollapsed,
+      onToggle: () => setCollapsed(!isCollapsed),
+      children: /* @__PURE__ */ jsx122(List_default, { disablePadding: true, children: option.options.map((opt, idx) => /* @__PURE__ */ jsx122(
+        CategorizedPickerItem_default,
+        {
+          onScrollToItem,
+          option: opt,
+          index: idx,
+          selectedId,
+          onSelect,
+          dataTestId: dataTestId ? `${dataTestId}-group-${index}` : void 0,
+          searchText
+        },
+        `categorized-group-${idx}`
+      )) })
+    }
+  );
+};
+var CategorizedPickerGroupItem_default = CategorizedPickerGroupItem;
+
+// src/components/input/categorized-picker/CategorizedPickerItem.tsx
+import { Fragment as Fragment25, jsx as jsx123, jsxs as jsxs56 } from "react/jsx-runtime";
+var CategorizedPickerItem = function CategorizedPickerItem2({
+  option,
+  selectedId,
+  dataTestId,
+  index,
+  searchText = "",
+  onSelect,
+  onScrollToItem
+}) {
+  const onScrollSelectedItem = (item) => {
+    if (onScrollToItem) {
+      return onScrollToItem(item);
+    }
+    item.scrollIntoView({
+      behavior: "smooth"
+    });
+  };
+  return /* @__PURE__ */ jsxs56(Fragment25, { children: [
+    option.categorizedPickerItemType === "option" && /* @__PURE__ */ jsx123(
+      CategorizedPickerOptionItem_default,
+      {
+        option,
+        index,
+        selectedId,
+        onSelect,
+        onScrollToItem: onScrollSelectedItem,
+        dataTestId,
+        searchText
+      }
+    ),
+    option.categorizedPickerItemType === "subcategory" && /* @__PURE__ */ jsx123(
+      CategorizedPickerSubcategoryItem_default,
+      {
+        option,
+        index,
+        dataTestId,
+        searchText
+      }
+    ),
+    option.categorizedPickerItemType === "group" && /* @__PURE__ */ jsx123(
+      CategorizedPickerGroupItem_default,
+      {
+        option,
+        index,
+        onSelect,
+        onScrollToItem: onScrollSelectedItem,
+        selectedId,
+        dataTestId,
+        searchText
+      }
+    )
+  ] });
+};
+var CategorizedPickerItem_default = CategorizedPickerItem;
+
+// src/components/input/categorized-picker/CategorizedPickerEmptyCategoryPanel.tsx
+import { Stack as Stack10 } from "@mui/material";
+import { Fragment as Fragment26, jsx as jsx124 } from "react/jsx-runtime";
+var CategorizedPickerEmptyCategoryPanel = function CategorizedPickerEmptyCategoryPanel2({
+  selectedCategory,
+  isEmptyCategories
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx124(Fragment26, { children: !selectedCategory?.emptyData ? /* @__PURE__ */ jsx124(Stack10, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx124(Typography_default, { variant: "body2", color: grey600, children: isEmptyCategories ? t("CATEGORIZED_PICKER.NO_RESULTS") : t("CATEGORIZED_PICKER.NO_OPTIONS") }) }) : selectedCategory.emptyData });
+};
+var CategorizedPickerEmptyCategoryPanel_default = CategorizedPickerEmptyCategoryPanel;
+
+// src/components/input/categorized-picker/CategorizedPickerCategoryPanel.tsx
+import { Fragment as Fragment27, jsx as jsx125 } from "react/jsx-runtime";
+var CategorizedPickerCategoryPanel = function CategorizedPickerCategoryPanel2({
+  value,
+  selectedCategory,
+  searchText,
+  isEmptyCategories,
+  categoryOptions,
+  dataTestId,
+  onSelect
+}) {
+  const getSubcategoryGroup = (options) => {
+    const result = [];
+    const subcategoryGroup = options.reduce((acc, option) => {
+      const key = option.group.name;
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(option);
+      return acc;
+    }, {});
+    Object.keys(subcategoryGroup).forEach((key) => {
+      result.push({
+        name: key,
+        categorizedPickerItemType: "subcategory"
+      });
+      subcategoryGroup[key].sort(orderOptions).forEach((option) => {
+        result.push({
+          ...option,
+          categorizedPickerItemType: "option"
+        });
+      });
+    });
+    return result;
+  };
+  const getGroups = (options) => {
+    const result = [];
+    const grouped = options.reduce((acc, option) => {
+      const key = option.group.id;
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(option);
+      return acc;
+    }, {});
+    Object.keys(grouped).forEach((key) => {
+      const groupOption = options.find((o) => o.group.id === key);
+      const subcategoryGroup = grouped[key].reduce((acc, option) => {
+        const key2 = option.group.subcategory ?? "";
+        if (!acc[key2]) {
+          acc[key2] = [];
+        }
+        acc[key2].push(option);
+        return acc;
+      }, {});
+      const categoryResults = [];
+      Object.keys(subcategoryGroup).forEach((key2) => {
+        if (key2 !== "") {
+          categoryResults.push({
+            name: key2,
+            categorizedPickerItemType: "subcategory"
+          });
+        }
+        const optionsWithoutCategories = subcategoryGroup[key2].sort(orderOptions).map(
+          (o) => ({
+            ...o,
+            categorizedPickerItemType: "option"
+          })
+        );
+        categoryResults.push(...optionsWithoutCategories);
+      });
+      result.push({
+        id: key,
+        name: groupOption.group.name,
+        categorizedPickerItemType: "group",
+        options: categoryResults
+      });
+    });
+    return result;
+  };
+  const groupCategoryOptions = (options) => {
+    const result = options.filter((o) => !o.group).sort(orderOptions).map((o) => ({ ...o, categorizedPickerItemType: "option" }));
+    const subcategoryOnly = options.filter((o) => o.group?.type === "subcategory");
+    result.push(...getSubcategoryGroup(subcategoryOnly));
+    const withGroup = options.filter((o) => o.group?.type === "group");
+    result.push(...getGroups(withGroup));
+    return result;
+  };
+  return /* @__PURE__ */ jsx125(Fragment27, { children: !selectedCategory || !categoryOptions?.length ? /* @__PURE__ */ jsx125(
+    CategorizedPickerEmptyCategoryPanel_default,
+    {
+      selectedCategory,
+      isEmptyCategories
+    }
+  ) : groupCategoryOptions(categoryOptions).map((option, idx) => /* @__PURE__ */ jsx125(
+    CategorizedPickerItem_default,
+    {
+      option,
+      index: idx,
+      selectedId: value?.id ?? "",
+      onSelect,
+      dataTestId,
+      searchText
+    },
+    `categorized-Picker-item-${idx}`
+  )) });
+};
+function orderOptions(a, b) {
+  const orderA = a.order ?? Infinity;
+  const orderB = b.order ?? Infinity;
+  if (orderA !== orderB) {
+    return orderA - orderB;
+  }
+  return a.name.localeCompare(b.name, void 0, {
+    sensitivity: "base"
+  });
+}
+var CategorizedPickerCategoryPanel_default = CategorizedPickerCategoryPanel;
+
+// src/components/input/categorized-picker/CategorizedPicker.tsx
+import { Fragment as Fragment28, jsx as jsx126, jsxs as jsxs57 } from "react/jsx-runtime";
+var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx126(
   Icon_default,
   {
     id: "chevron-down",
@@ -22032,41 +22381,49 @@ var CategorizedPicker = function CategorizedPicker2({
   disabled = false,
   sx,
   dataTestId,
+  onOpen,
   onChange
 }) {
   const { t } = useTranslation();
-  const anchorRef = React64.useRef(null);
-  const [open, setOpen] = React64.useState(false);
-  const [search, setSearch] = React64.useState("");
-  const [unfilteredCategories] = React64.useState(
-    categories.map((category) => ({
+  const categoryRefs = React66.useRef(
+    {}
+  );
+  const anchorRef = React66.useRef(null);
+  const [open, setOpen] = React66.useState(false);
+  const [search, setSearch] = React66.useState("");
+  const unfilteredCategories = React66.useMemo(
+    () => categories.map((category) => ({
       ...category,
       categoryOptions: options.filter(category.filter)
-    })).filter((category) => category.categoryOptions.length > 0)
+    })).filter(
+      (category) => category.categoryOptions.length > 0 || !!category.emptyData
+    ),
+    [categories, options]
   );
-  const [filteredCategories, setFilteredCategories] = React64.useState(unfilteredCategories);
-  const getDefaultSelectedCategory = React64.useCallback(
+  const [filteredCategories, setFilteredCategories] = React66.useState(unfilteredCategories);
+  const getDefaultSelectedCategory = React66.useCallback(
     () => filteredCategories.find(
       (category) => category.categoryOptions.some((option) => option.id === value?.id)
     ),
-    [filteredCategories, value?.id]
+    [filteredCategories, value]
   );
-  const [selectedCategory, setSelectedCategory] = React64.useState(getDefaultSelectedCategory());
-  const onTypeSearch = React64.useCallback(
+  const [selectedCategory, setSelectedCategory] = React66.useState(getDefaultSelectedCategory());
+  const onTypeSearch = React66.useCallback(
     (event) => {
       setSearch(event.target.value);
     },
     []
   );
-  const openPopover = React64.useCallback(() => {
+  const openPopover = React66.useCallback(() => {
     setOpen(true);
     setSearch("");
     setSelectedCategory(getDefaultSelectedCategory());
-  }, [getDefaultSelectedCategory]);
-  const closePopover = React64.useCallback(() => {
+    onOpen?.();
+  }, [getDefaultSelectedCategory, onOpen]);
+  const closePopover = React66.useCallback(() => {
     setOpen(false);
   }, []);
-  React64.useEffect(() => {
+  React66.useEffect(() => {
     const tokens = search.split(",").map((s) => s.trim()).filter((s) => !!s);
     if (tokens.length === 0) {
       setFilteredCategories(unfilteredCategories);
@@ -22096,7 +22453,7 @@ var CategorizedPicker = function CategorizedPicker2({
     }).filter((category) => !!category);
     setFilteredCategories(nextCategories);
   }, [categories, options, search, unfilteredCategories]);
-  React64.useEffect(() => {
+  React66.useEffect(() => {
     const filteredSelectedCategory = selectedCategory && filteredCategories.find(
       (category) => category.name === selectedCategory.name
     );
@@ -22108,8 +22465,8 @@ var CategorizedPicker = function CategorizedPicker2({
       setSelectedCategory(filteredSelectedCategory);
     }
   }, [filteredCategories, selectedCategory]);
-  return /* @__PURE__ */ jsxs56(Fragment25, { children: [
-    /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsxs57(Fragment28, { children: [
+    /* @__PURE__ */ jsx126(
       Select3,
       {
         ref: anchorRef,
@@ -22119,21 +22476,27 @@ var CategorizedPicker = function CategorizedPicker2({
             height: "34px",
             lineHeight: "34px"
           },
+          "&.MuiInputBase-root.Mui-focused": {
+            background: white
+          },
           ...sx
         },
         value: value?.name || "",
         displayEmpty: true,
         disabled,
-        input: /* @__PURE__ */ jsx120(
+        input: /* @__PURE__ */ jsx126(
           BootstrapInput,
           {
+            inputProps: {
+              "data-testid": dataTestId ? dataTestId + "-input" : void 0
+            },
             sx: {
               borderRadius: "4px"
             }
           }
         ),
         renderValue: (value2) => value2 || placeholder,
-        IconComponent: () => /* @__PURE__ */ jsx120(ChevronIcon2, { disabled }),
+        IconComponent: () => /* @__PURE__ */ jsx126(ChevronIcon2, { disabled }),
         onClick: !disabled ? (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -22141,10 +22504,10 @@ var CategorizedPicker = function CategorizedPicker2({
         } : void 0,
         open: false,
         "data-testid": dataTestId,
-        children: options.map((option) => /* @__PURE__ */ jsx120("option", { value: option.name }, option.id))
+        children: options.map((option) => /* @__PURE__ */ jsx126("option", { value: option.name }, option.id))
       }
     ),
-    /* @__PURE__ */ jsx120(
+    /* @__PURE__ */ jsx126(
       Popover2,
       {
         anchorEl: anchorRef.current,
@@ -22152,6 +22515,19 @@ var CategorizedPicker = function CategorizedPicker2({
           vertical: "top",
           horizontal: "left"
         },
+        slotProps: {
+          transition: {
+            onEntered: () => {
+              if (!selectedCategory) {
+                return;
+              }
+              const el = categoryRefs.current[selectedCategory.name];
+              el?.scrollIntoView({
+                behavior: "smooth"
+              });
+            }
+          }
+        },
         transformOrigin: {
           vertical: "top",
           horizontal: "left"
@@ -22165,8 +22541,8 @@ var CategorizedPicker = function CategorizedPicker2({
             width: "640px"
           }
         },
-        children: /* @__PURE__ */ jsxs56(Grid3, { container: true, children: [
-          /* @__PURE__ */ jsx120(
+        children: /* @__PURE__ */ jsxs57(Grid3, { container: true, children: [
+          /* @__PURE__ */ jsx126(
             Grid3,
             {
               size: {
@@ -22174,20 +22550,21 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               padding: "8px",
               borderBottom: `1px solid ${grey200}`,
-              children: /* @__PURE__ */ jsx120(
+              children: /* @__PURE__ */ jsx126(
                 DebouncedTextField_default,
                 {
                   placeholder: t(
                     "CATEGORIZED_PICKER.SEARCH_PLACEHOLDER"
                   ),
-                  value: search,
+                  value: "",
                   onChange: onTypeSearch,
-                  startAdornment: /* @__PURE__ */ jsx120(Icon_default, { id: "magnify" })
+                  startAdornment: /* @__PURE__ */ jsx126(Icon_default, { id: "magnify" }),
+                  "data-testid": dataTestId ? dataTestId + "-search-input" : void 0
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx120(
+          /* @__PURE__ */ jsx126(
             Grid3,
             {
               size: {
@@ -22196,14 +22573,17 @@ var CategorizedPicker = function CategorizedPicker2({
               sx: { borderRight: `1px solid ${grey200}` },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx120(Stack10, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx120(
+              children: /* @__PURE__ */ jsx126(Stack11, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx126(
                 ListItemButton_default,
                 {
+                  ref: (el) => {
+                    categoryRefs.current[category.name] = el;
+                  },
                   selected: selectedCategory === category,
                   onClick: () => {
                     setSelectedCategory(category);
                   },
-                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx120(
+                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx126(
                     Icon_default,
                     {
                       id: "menu-right",
@@ -22211,10 +22591,10 @@ var CategorizedPicker = function CategorizedPicker2({
                     }
                   ) : void 0,
                   buttonDataTestId: dataTestId ? dataTestId + "-category-" + idx : void 0,
-                  children: /* @__PURE__ */ jsx120(
+                  children: /* @__PURE__ */ jsx126(
                     TextEllipsis_default,
                     {
-                      text: /* @__PURE__ */ jsx120(
+                      text: /* @__PURE__ */ jsx126(
                         TextMarker_default,
                         {
                           searchText: search,
@@ -22232,7 +22612,7 @@ var CategorizedPicker = function CategorizedPicker2({
               )) })
             }
           ),
-          /* @__PURE__ */ jsx120(
+          /* @__PURE__ */ jsx126(
             Grid3,
             {
               size: {
@@ -22240,46 +22620,37 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx120(Stack10, { children: /* @__PURE__ */ jsx120(Stack10, { children: !selectedCategory ? /* @__PURE__ */ jsx120(Stack10, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx120(
-                Typography_default,
+              children: /* @__PURE__ */ jsx126(
+                Stack11,
                 {
-                  variant: "body2",
-                  color: grey600,
-                  children: filteredCategories.length === 0 ? t(
-                    "CATEGORIZED_PICKER.NO_RESULTS"
-                  ) : t(
-                    "CATEGORIZED_PICKER.NO_OPTIONS"
+                  ...(!selectedCategory || !!selectedCategory.emptyData) && {
+                    height: "100%"
+                  },
+                  children: /* @__PURE__ */ jsx126(
+                    Stack11,
+                    {
+                      ...(!selectedCategory || !!selectedCategory.emptyData) && {
+                        height: "100%"
+                      },
+                      children: /* @__PURE__ */ jsx126(
+                        CategorizedPickerCategoryPanel_default,
+                        {
+                          selectedCategory,
+                          isEmptyCategories: filteredCategories.length === 0,
+                          categoryOptions: selectedCategory?.categoryOptions ?? [],
+                          onSelect: (option) => {
+                            onChange(option);
+                            closePopover();
+                          },
+                          dataTestId,
+                          searchText: search,
+                          value
+                        }
+                      )
+                    }
                   )
                 }
-              ) }) : selectedCategory.categoryOptions.map(
-                (option, idx) => /* @__PURE__ */ jsx120(
-                  ListItemButton_default,
-                  {
-                    selected: value?.id === option.id,
-                    onClick: () => {
-                      onChange(option);
-                      closePopover();
-                    },
-                    buttonDataTestId: dataTestId ? dataTestId + "-option-" + idx : void 0,
-                    children: /* @__PURE__ */ jsx120(
-                      TextEllipsis_default,
-                      {
-                        text: /* @__PURE__ */ jsx120(
-                          TextMarker_default,
-                          {
-                            searchText: search,
-                            backgroundColor: primary200,
-                            multiSearchCharSeparator: ",",
-                            children: option.name
-                          }
-                        ),
-                        typographyVariant: "body2"
-                      }
-                    )
-                  },
-                  option.id
-                )
-              ) }) })
+              )
             }
           )
         ] })
@@ -22290,14 +22661,14 @@ var CategorizedPicker = function CategorizedPicker2({
 var CategorizedPicker_default = CategorizedPicker;
 
 // src/components/input/ItemSelector.tsx
-import * as React66 from "react";
+import * as React68 from "react";
 
 // src/components/input/SelectPopover.tsx
-import * as React65 from "react";
-import { Grid as Grid4, Stack as Stack11 } from "@mui/material";
-import { useState as useState24 } from "react";
+import * as React67 from "react";
+import { Grid as Grid4, Stack as Stack12 } from "@mui/material";
+import { useState as useState25 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { jsx as jsx121, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs58 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
   selectedColor: Colors_exports.primaryMain,
   disabledColor: ""
@@ -22329,11 +22700,11 @@ var SelectPopover = function SelectPopover2({
   paddingContent
 }) {
   const { t } = useTranslation();
-  const [searchText, setSearchText] = useState24("");
-  const [isScrollBottom, setIsScrollBottom] = useState24(false);
-  const [currentItems, setCurrentItems] = useState24([]);
-  const [currentSelectedItems, setCurrentSelectedItems] = React65.useState([]);
-  const prevSelectedItemsIdsRef = React65.useRef([]);
+  const [searchText, setSearchText] = useState25("");
+  const [isScrollBottom, setIsScrollBottom] = useState25(false);
+  const [currentItems, setCurrentItems] = useState25([]);
+  const [currentSelectedItems, setCurrentSelectedItems] = React67.useState([]);
+  const prevSelectedItemsIdsRef = React67.useRef([]);
   const onSearchTextChanged = (text) => {
     onSearch(text);
     setSearchText(text);
@@ -22345,7 +22716,7 @@ var SelectPopover = function SelectPopover2({
     }
     setCurrentSelectedItems(selectedItemsIds);
   };
-  React65.useEffect(() => {
+  React67.useEffect(() => {
     const prevSelectedItemsIds = prevSelectedItemsIdsRef.current;
     if (keepCurrentSelectionOnSearch && anchorEl) {
       let nextSelectedItems = currentSelectedItems;
@@ -22434,7 +22805,7 @@ var SelectPopover = function SelectPopover2({
       }
     }
   };
-  return /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs58(
     Popover_default,
     {
       centeredInScreen,
@@ -22442,14 +22813,14 @@ var SelectPopover = function SelectPopover2({
       anchorEl,
       disableRestoreFocus,
       children: [
-        /* @__PURE__ */ jsx121(
+        /* @__PURE__ */ jsx127(
           Box_default2,
           {
             sx: {
               borderBottom: `1px solid ${Colors_exports.grey200}`,
               padding: "8px"
             },
-            children: /* @__PURE__ */ jsx121(
+            children: /* @__PURE__ */ jsx127(
               DebouncedTextField_default,
               {
                 iconId: "magnify",
@@ -22464,7 +22835,7 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx121(
+        /* @__PURE__ */ jsx127(
           InfiniteScroll,
           {
             height: 300,
@@ -22483,7 +22854,7 @@ var SelectPopover = function SelectPopover2({
               e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight
             ),
             loader: true,
-            children: /* @__PURE__ */ jsxs57(
+            children: /* @__PURE__ */ jsxs58(
               Grid4,
               {
                 container: true,
@@ -22526,7 +22897,7 @@ var SelectPopover = function SelectPopover2({
                       onItemSelected
                     ) : getItemElement(item, onItemSelected)
                   ),
-                  isLoading && /* @__PURE__ */ jsx121(
+                  isLoading && /* @__PURE__ */ jsx127(
                     Skeleton_default,
                     {
                       variant: "text",
@@ -22539,13 +22910,13 @@ var SelectPopover = function SelectPopover2({
                       }
                     }
                   ),
-                  !isLoading && currentItems.length === 0 ? typeof emptyListPlaceholder === "string" ? /* @__PURE__ */ jsx121(
-                    Stack11,
+                  !isLoading && currentItems.length === 0 ? typeof emptyListPlaceholder === "string" ? /* @__PURE__ */ jsx127(
+                    Stack12,
                     {
                       alignItems: "center",
                       justifyContent: "center",
                       width: "100%",
-                      children: /* @__PURE__ */ jsx121(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
+                      children: /* @__PURE__ */ jsx127(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
                     }
                   ) : emptyListPlaceholder : ""
                 ]
@@ -22553,11 +22924,11 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx121(
+        /* @__PURE__ */ jsx127(
           PopoverActions_default,
           {
             sx: { padding: "16px 24px" },
-            leftContent: /* @__PURE__ */ jsx121(
+            leftContent: /* @__PURE__ */ jsx127(
               Button_default,
               {
                 variant: "contained",
@@ -22567,7 +22938,7 @@ var SelectPopover = function SelectPopover2({
                 onClick: closePopover
               }
             ),
-            rightContent: /* @__PURE__ */ jsx121(
+            rightContent: /* @__PURE__ */ jsx127(
               Button_default,
               {
                 variant: "contained",
@@ -22591,7 +22962,7 @@ var SelectPopover = function SelectPopover2({
   );
 };
 function getItemElement(item, onItemClick) {
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx127(
     SelectPopoverItem_default,
     {
       id: item.id,
@@ -22620,7 +22991,7 @@ var arraysEqual = (a, b) => {
 var SelectPopover_default = SelectPopover;
 
 // src/components/input/ItemSelector.tsx
-import { Fragment as Fragment26, jsx as jsx122, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx128, jsxs as jsxs59 } from "react/jsx-runtime";
 var ItemSelector = function ItemSelector2({
   items,
   selectedItems,
@@ -22651,16 +23022,16 @@ var ItemSelector = function ItemSelector2({
   onSearch,
   onClose
 }) {
-  const [anchorEl, setAnchorEl] = React66.useState();
-  const [searchText, setSearchText] = React66.useState("");
-  const allShownItemsRef = React66.useRef(items);
-  const selectRef = React66.useRef(null);
-  React66.useEffect(() => {
+  const [anchorEl, setAnchorEl] = React68.useState();
+  const [searchText, setSearchText] = React68.useState("");
+  const allShownItemsRef = React68.useRef(items);
+  const selectRef = React68.useRef(null);
+  React68.useEffect(() => {
     if (anchorEl) {
       onSearch(searchText);
     }
   }, [anchorEl, onSearch, searchText]);
-  React66.useEffect(() => {
+  React68.useEffect(() => {
     const allShownItems = allShownItemsRef.current;
     allShownItemsRef.current = allShownItems.concat(
       items.filter(
@@ -22674,7 +23045,7 @@ var ItemSelector = function ItemSelector2({
     item
   }) => {
     const [ref, { contentWidth: width2 }] = useResizeObserver();
-    return /* @__PURE__ */ jsx122(
+    return /* @__PURE__ */ jsx128(
       Chip_default,
       {
         ref,
@@ -22704,8 +23075,8 @@ var ItemSelector = function ItemSelector2({
     const selectedItem = selectedItems[0]?.id;
     return selectedItem ? [selectedItem] : "";
   };
-  return /* @__PURE__ */ jsxs58(Fragment26, { children: [
-    /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs59(Fragment29, { children: [
+    /* @__PURE__ */ jsx128(
       Select_default,
       {
         ref: selectRef,
@@ -22721,17 +23092,17 @@ var ItemSelector = function ItemSelector2({
         renderValue: (value) => {
           let component;
           if (!value || !Array.isArray(value) || value.length === 0) {
-            component = /* @__PURE__ */ jsxs58(Fragment26, { children: [
-              /* @__PURE__ */ jsx122(
+            component = /* @__PURE__ */ jsxs59(Fragment29, { children: [
+              /* @__PURE__ */ jsx128(
                 Stack_default,
                 {
                   direction: "row",
                   flexWrap: "wrap",
                   padding: "6px 0",
-                  children: /* @__PURE__ */ jsx122(Typography_default, { variant: "body2", color: grey600, children: placeholder })
+                  children: /* @__PURE__ */ jsx128(Typography_default, { variant: "body2", color: grey600, children: placeholder })
                 }
               ),
-              /* @__PURE__ */ jsx122(
+              /* @__PURE__ */ jsx128(
                 Divider_default,
                 {
                   variant: "middle",
@@ -22741,8 +23112,8 @@ var ItemSelector = function ItemSelector2({
               )
             ] });
           } else {
-            component = /* @__PURE__ */ jsxs58(Fragment26, { children: [
-              /* @__PURE__ */ jsxs58(
+            component = /* @__PURE__ */ jsxs59(Fragment29, { children: [
+              /* @__PURE__ */ jsxs59(
                 Stack_default,
                 {
                   direction: "row",
@@ -22756,7 +23127,7 @@ var ItemSelector = function ItemSelector2({
                       const item = selectedItems.find(
                         (i) => i.id === id
                       );
-                      return item ? /* @__PURE__ */ jsx122(
+                      return item ? /* @__PURE__ */ jsx128(
                         ItemChip,
                         {
                           item: {
@@ -22765,14 +23136,14 @@ var ItemSelector = function ItemSelector2({
                           }
                         },
                         id
-                      ) : /* @__PURE__ */ jsx122(Fragment26, {});
+                      ) : /* @__PURE__ */ jsx128(Fragment29, {});
                     }),
-                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx122(
+                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx128(
                       Tooltip_default,
                       {
                         interactive: true,
                         variant: "white",
-                        title: /* @__PURE__ */ jsx122(
+                        title: /* @__PURE__ */ jsx128(
                           Stack_default,
                           {
                             direction: "row",
@@ -22789,24 +23160,24 @@ var ItemSelector = function ItemSelector2({
                               const item = selectedItems.find(
                                 (i) => i.id === id
                               );
-                              return item ? /* @__PURE__ */ jsx122(
+                              return item ? /* @__PURE__ */ jsx128(
                                 ItemChip,
                                 {
                                   item
                                 },
                                 id
-                              ) : /* @__PURE__ */ jsx122(Fragment26, {});
+                              ) : /* @__PURE__ */ jsx128(Fragment29, {});
                             })
                           }
                         ),
-                        children: /* @__PURE__ */ jsx122(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
+                        children: /* @__PURE__ */ jsx128(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
                       }
                     ) : void 0
                   ]
                 }
               ),
-              !disabled && /* @__PURE__ */ jsxs58(Stack_default, { direction: "row", children: [
-                /* @__PURE__ */ jsx122(
+              !disabled && /* @__PURE__ */ jsxs59(Stack_default, { direction: "row", children: [
+                /* @__PURE__ */ jsx128(
                   IconButton_default,
                   {
                     iconId: "close",
@@ -22824,7 +23195,7 @@ var ItemSelector = function ItemSelector2({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx122(
+                /* @__PURE__ */ jsx128(
                   Divider_default,
                   {
                     variant: "middle",
@@ -22835,7 +23206,7 @@ var ItemSelector = function ItemSelector2({
               ] })
             ] });
           }
-          return /* @__PURE__ */ jsx122(
+          return /* @__PURE__ */ jsx128(
             Stack_default,
             {
               direction: "row",
@@ -22857,8 +23228,8 @@ var ItemSelector = function ItemSelector2({
         }
       }
     ),
-    helperText && /* @__PURE__ */ jsx122(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
-    /* @__PURE__ */ jsx122(
+    helperText && /* @__PURE__ */ jsx128(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
+    /* @__PURE__ */ jsx128(
       SelectPopover_default,
       {
         items: items.map((item) => {
@@ -22906,7 +23277,7 @@ var ItemSelector = function ItemSelector2({
 var ItemSelector_default = ItemSelector;
 
 // src/components/input/autocomplete/Autocomplete.tsx
-import * as React70 from "react";
+import * as React72 from "react";
 
 // src/utils/RegExpUtils.ts
 var map = {
@@ -22920,11 +23291,11 @@ var map = {
 var toDiacriticInsensitiveString = (input) => Array.from(input).map((char) => map[char] ? `[${map[char]}]` : char).join("");
 
 // src/components/input/autocomplete/AutocompleteInput.tsx
-import * as React68 from "react";
+import * as React70 from "react";
 
 // src/components/input/autocomplete/AutocompleteInputSelection.tsx
-import * as React67 from "react";
-import { jsx as jsx123, jsxs as jsxs59 } from "react/jsx-runtime";
+import * as React69 from "react";
+import { jsx as jsx129, jsxs as jsxs60 } from "react/jsx-runtime";
 var AUTOCOMPLETE_PADDING_RIGHT = 6;
 var AutocompleteInputSelection = function AutocompleteInputSelection2({
   value,
@@ -22935,8 +23306,8 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
   onOpenPopover,
   onRemoveValue
 }) {
-  const stackRef = React67.useRef(null);
-  return /* @__PURE__ */ jsxs59(
+  const stackRef = React69.useRef(null);
+  return /* @__PURE__ */ jsxs60(
     Stack_default,
     {
       ref: stackRef,
@@ -22952,7 +23323,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
         paddingLeft: "2px"
       },
       children: [
-        !!startIconId && /* @__PURE__ */ jsx123(
+        !!startIconId && /* @__PURE__ */ jsx129(
           IconButton_default,
           {
             iconId: startIconId,
@@ -22971,8 +23342,8 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
             }
           }
         ),
-        /* @__PURE__ */ jsxs59(Stack_default, { whiteSpace: "nowrap", flex: "1 1 auto", minWidth: 0, children: [
-          !Array.isArray(value) && !!value && /* @__PURE__ */ jsx123(
+        /* @__PURE__ */ jsxs60(Stack_default, { whiteSpace: "nowrap", flex: "1 1 auto", minWidth: 0, children: [
+          !Array.isArray(value) && !!value && /* @__PURE__ */ jsx129(
             TextEllipsis_default,
             {
               typographyVariant: "body2",
@@ -22982,7 +23353,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
               )
             }
           ),
-          Array.isArray(value) && /* @__PURE__ */ jsx123(
+          Array.isArray(value) && /* @__PURE__ */ jsx129(
             ChipViewer_default,
             {
               values: value,
@@ -23009,7 +23380,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
 var AutocompleteInputSelection_default = AutocompleteInputSelection;
 
 // src/components/input/autocomplete/AutocompleteInput.tsx
-import { Fragment as Fragment27, jsx as jsx124, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx130, jsxs as jsxs61 } from "react/jsx-runtime";
 var INPUT_MIN_WIDTH = 80;
 var CLEAR_BUTTON_WIDTH = 36;
 var AutocompleteInput = function AutocompleteInput2({
@@ -23038,10 +23409,10 @@ var AutocompleteInput = function AutocompleteInput2({
   onRemoveValue
 }) {
   const { t } = useTranslation();
-  const [isHover, setIsHover] = React68.useState(false);
+  const [isHover, setIsHover] = React70.useState(false);
   const dirty = !!inputValue || Array.isArray(value) && value.length > 0 || !Array.isArray(value) && !!value;
   const showClearButton = !disabled && dirty && !disableClear && (isOpenPopover || isHover);
-  return /* @__PURE__ */ jsx124(Fragment27, { children: /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx130(Fragment30, { children: /* @__PURE__ */ jsx130(
     DebouncedTextField_default,
     {
       ref: inputRef,
@@ -23120,7 +23491,7 @@ var AutocompleteInput = function AutocompleteInput2({
         }
       },
       containerRef,
-      startAdornment: /* @__PURE__ */ jsx124(
+      startAdornment: /* @__PURE__ */ jsx130(
         AutocompleteInputSelection_default,
         {
           value,
@@ -23132,7 +23503,7 @@ var AutocompleteInput = function AutocompleteInput2({
           disabled
         }
       ),
-      endAdornment: /* @__PURE__ */ jsxs60(
+      endAdornment: /* @__PURE__ */ jsxs61(
         Stack_default,
         {
           direction: "row",
@@ -23144,7 +23515,7 @@ var AutocompleteInput = function AutocompleteInput2({
           flex: "0 0 auto",
           children: [
             textFieldProps?.endAdornment,
-            showClearButton && /* @__PURE__ */ jsx124(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx124(
+            showClearButton && /* @__PURE__ */ jsx130(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx130(
               IconButton_default,
               {
                 iconId: "close",
@@ -23171,11 +23542,11 @@ var AutocompleteInput = function AutocompleteInput2({
                 "data-test": "clear-autocomplete"
               }
             ) }),
-            !disabled && variant !== "text" && /* @__PURE__ */ jsx124(
+            !disabled && variant !== "text" && /* @__PURE__ */ jsx130(
               Tooltip_default,
               {
                 title: isOpenPopover ? t("AUTOCOMPLETE.COLLAPSE") : t("AUTOCOMPLETE.EXPAND"),
-                children: /* @__PURE__ */ jsx124(
+                children: /* @__PURE__ */ jsx130(
                   IconButton_default,
                   {
                     iconId: isOpenPopover ? "chevron-up" : "chevron-down",
@@ -23211,7 +23582,7 @@ var AutocompleteInput = function AutocompleteInput2({
 var AutocompleteInput_default = AutocompleteInput;
 
 // src/components/input/autocomplete/AutocompleteList.tsx
-import * as React69 from "react";
+import * as React71 from "react";
 import { Popper as Popper2, ClickAwayListener } from "@mui/material";
 import { FixedSizeList as FixedSizeList3 } from "react-window";
 import AutoSizer5 from "react-virtualized-auto-sizer";
@@ -23237,7 +23608,7 @@ function getInitialListScroll({
 }
 
 // src/components/input/autocomplete/AutocompleteList.tsx
-import { Fragment as Fragment28, jsx as jsx125, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx131, jsxs as jsxs62 } from "react/jsx-runtime";
 var AUTOCOMPLETE_ITEM_HEIGHT = 44;
 var AutocompleteList = function AutocompleteList2({
   options,
@@ -23255,7 +23626,7 @@ var AutocompleteList = function AutocompleteList2({
   onClickAwayPopover
 }) {
   const { t } = useTranslation();
-  const listRef = React69.useRef(null);
+  const listRef = React71.useRef(null);
   const getText = (option) => {
     const isInOptions = options.some((elem) => elem.id === option.id);
     if (!isInOptions) {
@@ -23270,7 +23641,7 @@ var AutocompleteList = function AutocompleteList2({
   }) => {
     const option = filteredOptions[index];
     const isMultiple = Array.isArray(selectedIndex);
-    return /* @__PURE__ */ jsx125(
+    return /* @__PURE__ */ jsx131(
       ListItemButton_default,
       {
         selected: !isMultiple ? index === selectedIndex : selectedIndex.includes(index),
@@ -23299,20 +23670,20 @@ var AutocompleteList = function AutocompleteList2({
       option.id
     );
   };
-  return /* @__PURE__ */ jsx125(Fragment28, { children: /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx131(Fragment31, { children: /* @__PURE__ */ jsx131(
     ClickAwayListener,
     {
       onClickAway: (event) => onClickAwayPopover(
         event
       ),
       mouseEvent: "onMouseDown",
-      children: /* @__PURE__ */ jsx125(
+      children: /* @__PURE__ */ jsx131(
         Popper2,
         {
           anchorEl: inputContainerRef.current,
           open: isOpen,
           sx: { zIndex: 3e3 },
-          children: /* @__PURE__ */ jsx125(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs61(
+          children: /* @__PURE__ */ jsx131(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs62(
             Box_default2,
             {
               sx: {
@@ -23324,22 +23695,22 @@ var AutocompleteList = function AutocompleteList2({
               className: "Slim-Vertical-Scroll",
               ref: listRef,
               children: [
-                isLoading && /* @__PURE__ */ jsx125(
+                isLoading && /* @__PURE__ */ jsx131(
                   ListItem_default,
                   {
                     text: loadingText ?? t("AUTOCOMPLETE.LOADING")
                   }
                 ),
-                !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx125(
+                !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx131(
                   ListItem_default,
                   {
                     text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
                   }
                 ),
-                !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx125(AutoSizer5, { children: ({
+                !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx131(AutoSizer5, { children: ({
                   height: height2,
                   width: width2
-                }) => /* @__PURE__ */ jsx125(
+                }) => /* @__PURE__ */ jsx131(
                   FixedSizeList3,
                   {
                     overscanCount: 3,
@@ -23372,7 +23743,7 @@ var AutocompleteList = function AutocompleteList2({
 var AutocompleteList_default = AutocompleteList;
 
 // src/components/input/autocomplete/Autocomplete.tsx
-import { Fragment as Fragment29, jsx as jsx126, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx132, jsxs as jsxs63 } from "react/jsx-runtime";
 var MIN_AUTOCOMPLETE_WIDTH = "328px";
 var Autocomplete = function Autocomplete2({
   variant = "default",
@@ -23401,15 +23772,15 @@ var Autocomplete = function Autocomplete2({
   onOpen = () => ({}),
   disableClear
 }) {
-  const anchorRef = React70.useRef(null);
-  const inputRef = React70.useRef(null);
-  const [placeholder, setPlaceholder] = React70.useState(
+  const anchorRef = React72.useRef(null);
+  const inputRef = React72.useRef(null);
+  const [placeholder, setPlaceholder] = React72.useState(
     textFieldProps?.placeholder || ""
   );
-  const _renderLabel = React70.useCallback((id) => id, []);
-  const [inputValue, setInputValue] = React70.useState("");
-  const [isDirty, setDirty] = React70.useState(false);
-  const getOptionsLabeled = React70.useCallback(
+  const _renderLabel = React72.useCallback((id) => id, []);
+  const [inputValue, setInputValue] = React72.useState("");
+  const [isDirty, setDirty] = React72.useState(false);
+  const getOptionsLabeled = React72.useCallback(
     (options2, inputValue2 = "") => {
       const searchValue = escapeRegExp2(inputValue2.trim());
       const regExp = new RegExp(
@@ -23440,7 +23811,7 @@ var Autocomplete = function Autocomplete2({
       renderLabel
     ]
   );
-  const getAllowFreeTextOption = React70.useCallback(
+  const getAllowFreeTextOption = React72.useCallback(
     (inputValue2) => {
       if (allowFreeText) {
         const freeOption = {
@@ -23458,27 +23829,27 @@ var Autocomplete = function Autocomplete2({
     },
     [_renderLabel, allowFreeText, options, renderLabel]
   );
-  const [filteredOptions, setFilteredOptions] = React70.useState(getOptionsLabeled([...options]));
-  const virtualListRef = React70.createRef();
-  const [isOpenPopover, setOpenPopover] = React70.useState(false);
+  const [filteredOptions, setFilteredOptions] = React72.useState(getOptionsLabeled([...options]));
+  const virtualListRef = React72.createRef();
+  const [isOpenPopover, setOpenPopover] = React72.useState(false);
   const getSelectedIndexEmpty = () => multiple ? [] : void 0;
-  const [selectedIndex, setSelectedIndex] = React70.useState(getSelectedIndexEmpty());
-  const [highlightedIndex, setHighlightedIndex] = React70.useState(-1);
-  React70.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = React72.useState(getSelectedIndexEmpty());
+  const [highlightedIndex, setHighlightedIndex] = React72.useState(-1);
+  React72.useEffect(() => {
     setFilteredOptions(getOptionsLabeled([...options]));
   }, [options]);
   const canAddValues = maxValues === void 0 || maxValues === 0 || !!multiple && Array.isArray(value) && value.length < maxValues;
-  React70.useEffect(() => {
+  React72.useEffect(() => {
     if (disabled) {
       setOpenPopover(false);
     }
   }, [disabled]);
-  React70.useEffect(() => {
+  React72.useEffect(() => {
     if (!canAddValues && isOpenPopover) {
       closePopover();
     }
   }, [canAddValues, isOpenPopover]);
-  const getLastSelectedIndex = React70.useCallback(() => {
+  const getLastSelectedIndex = React72.useCallback(() => {
     if (Array.isArray(selectedIndex) && selectedIndex.length > 0) {
       return selectedIndex[selectedIndex.length - 1];
     } else if (typeof selectedIndex === "number") {
@@ -23486,7 +23857,7 @@ var Autocomplete = function Autocomplete2({
     }
     return void 0;
   }, [selectedIndex]);
-  React70.useEffect(() => {
+  React72.useEffect(() => {
     if (isOpenPopover) {
       if (highlightedIndex > -1) {
         virtualListRef.current?.scrollToItem(highlightedIndex);
@@ -23688,8 +24059,8 @@ var Autocomplete = function Autocomplete2({
     setNextIndexByValue(value2);
     onChange && onChange(event, value2);
   };
-  return /* @__PURE__ */ jsxs62(Fragment29, { children: [
-    /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsxs63(Fragment32, { children: [
+    /* @__PURE__ */ jsx132(
       AutocompleteInput_default,
       {
         inputRef,
@@ -23723,7 +24094,7 @@ var Autocomplete = function Autocomplete2({
         onRemoveValue: onRemoveInputValue
       }
     ),
-    /* @__PURE__ */ jsx126(
+    /* @__PURE__ */ jsx132(
       AutocompleteList_default,
       {
         options,
@@ -23758,7 +24129,7 @@ function elementIsDescendantOrEqual(parent2, descendant) {
 }
 
 // src/components/input/TextEditor.tsx
-import React73 from "react";
+import React75 from "react";
 import { Editor } from "@tinymce/tinymce-react";
 import "tinymce/tinymce";
 import "tinymce/models/dom/model";
@@ -23779,16 +24150,16 @@ import "tinymce/plugins/wordcount";
 import "tinymce/plugins/emoticons/js/emojis";
 
 // src/components/input/CodeEditorPopup.tsx
-import React72 from "react";
+import React74 from "react";
 
 // src/components/input/CodeEditor.tsx
-import React71 from "react";
+import React73 from "react";
 import CodeMirror, {
   EditorView
 } from "@uiw/react-codemirror";
 import { html } from "@codemirror/lang-html";
 import { linter, lintGutter } from "@codemirror/lint";
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var removeFocusOutline = EditorView.baseTheme({
   "&.cm-focused": {
     outline: "none"
@@ -23810,7 +24181,7 @@ var CodeEditor = function CodeEditor2({
     linter(linterOptions?.source || null, linterOptions?.config),
     ...extensions
   ] : extensions;
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx133(
     CodeMirror,
     {
       ...rest,
@@ -23825,11 +24196,11 @@ var CodeEditor = function CodeEditor2({
     }
   );
 };
-var CodeEditor_default = React71.forwardRef(CodeEditor);
+var CodeEditor_default = React73.forwardRef(CodeEditor);
 
 // src/components/input/CodeEditorPopup.tsx
 import format from "html-format";
-import { Fragment as Fragment30, jsx as jsx128, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx134, jsxs as jsxs64 } from "react/jsx-runtime";
 var FORMAT_CHARACTERS_LINE = 120;
 var FORMAT_NUMBER_SPACES_INDENTATION = 2;
 var CodeEditorPopup = ({
@@ -23845,9 +24216,9 @@ var CodeEditorPopup = ({
   onCancel
 }) => {
   const { t } = useTranslation();
-  const [valueModified, setValueModified] = React72.useState(value);
-  const [hasErrors, setHasErrors] = React72.useState(false);
-  React72.useEffect(() => {
+  const [valueModified, setValueModified] = React74.useState(value);
+  const [hasErrors, setHasErrors] = React74.useState(false);
+  React74.useEffect(() => {
     if (open) {
       setValueModified(value);
     }
@@ -23872,8 +24243,8 @@ var CodeEditorPopup = ({
     " ".repeat(FORMAT_NUMBER_SPACES_INDENTATION),
     FORMAT_CHARACTERS_LINE
   );
-  return /* @__PURE__ */ jsxs63(Fragment30, { children: [
-    readonly && /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsxs64(Fragment33, { children: [
+    readonly && /* @__PURE__ */ jsx134(
       Dialog_default,
       {
         open,
@@ -23884,7 +24255,7 @@ var CodeEditorPopup = ({
         noPaddingTitle: false,
         wrapChildren: false,
         title: t("TEXT_EDITOR.SOURCE_CODE.TITLE"),
-        children: /* @__PURE__ */ jsxs63(
+        children: /* @__PURE__ */ jsxs64(
           Stack_default,
           {
             flexGrow: 1,
@@ -23892,13 +24263,13 @@ var CodeEditorPopup = ({
             justifyContent: "space-between",
             paddingTop: "20px",
             children: [
-              /* @__PURE__ */ jsx128(
+              /* @__PURE__ */ jsx134(
                 Box_default2,
                 {
                   flexGrow: 1,
                   className: "Slim-Vertical-Scroll",
                   sx: { margin: "0", padding: "0" },
-                  children: /* @__PURE__ */ jsxs63(
+                  children: /* @__PURE__ */ jsxs64(
                     Stack_default,
                     {
                       gap: "16px",
@@ -23909,7 +24280,7 @@ var CodeEditorPopup = ({
                         }
                       },
                       children: [
-                        /* @__PURE__ */ jsx128(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx128(
+                        /* @__PURE__ */ jsx134(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx134(
                           CodeEditor_default,
                           {
                             autoFocus: true,
@@ -23938,7 +24309,7 @@ var CodeEditorPopup = ({
                           }
                         ) }),
                         messageNode,
-                        hasErrors && /* @__PURE__ */ jsx128(Alert_default, { severity: "info", children: t(
+                        hasErrors && /* @__PURE__ */ jsx134(Alert_default, { severity: "info", children: t(
                           "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
                         ) })
                       ]
@@ -23946,13 +24317,13 @@ var CodeEditorPopup = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx128(
+              /* @__PURE__ */ jsx134(
                 Box_default2,
                 {
                   sx: {
                     padding: "16px 24px 16px 24px"
                   },
-                  children: /* @__PURE__ */ jsx128(
+                  children: /* @__PURE__ */ jsx134(
                     Button_default,
                     {
                       text: t(
@@ -23969,7 +24340,7 @@ var CodeEditorPopup = ({
         )
       }
     ),
-    !readonly && /* @__PURE__ */ jsx128(
+    !readonly && /* @__PURE__ */ jsx134(
       ConfirmationDialog_default,
       {
         fullScreen: true,
@@ -23977,7 +24348,7 @@ var CodeEditorPopup = ({
         open,
         onCancel: onCancelData,
         onAccept: onAcceptData,
-        children: /* @__PURE__ */ jsxs63(
+        children: /* @__PURE__ */ jsxs64(
           Stack_default,
           {
             gap: "16px",
@@ -23988,7 +24359,7 @@ var CodeEditorPopup = ({
               }
             },
             children: [
-              codeEditorSubtitle && /* @__PURE__ */ jsx128(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx128(
+              codeEditorSubtitle && /* @__PURE__ */ jsx134(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx134(
                 Typography_default,
                 {
                   variant: "body2",
@@ -23996,7 +24367,7 @@ var CodeEditorPopup = ({
                   children: codeEditorSubtitle
                 }
               ) }),
-              /* @__PURE__ */ jsx128(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx128(
+              /* @__PURE__ */ jsx134(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx134(
                 CodeEditor_default,
                 {
                   autoFocus: true,
@@ -24025,7 +24396,7 @@ var CodeEditorPopup = ({
                 }
               ) }),
               messageNode,
-              hasErrors && /* @__PURE__ */ jsx128(Alert_default, { severity: "info", children: t(
+              hasErrors && /* @__PURE__ */ jsx134(Alert_default, { severity: "info", children: t(
                 "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
               ) })
             ]
@@ -24038,7 +24409,7 @@ var CodeEditorPopup = ({
 var CodeEditorPopup_default = CodeEditorPopup;
 
 // src/components/input/TextEditor.tsx
-import { Fragment as Fragment31, jsx as jsx129, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx135, jsxs as jsxs65 } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR_INSERT_MENU_ITEMS = [
   "link",
   "image",
@@ -24077,15 +24448,15 @@ var TextEditor = function TextEditor2({
   ...rest
 }) {
   const { t } = useTranslation();
-  const editorRef = React73.useRef(null);
-  const [internalValue] = React73.useState(
+  const editorRef = React75.useRef(null);
+  const [internalValue] = React75.useState(
     initialValue ?? t("TEXT_EDITOR.INITIAL_VALUE")
   );
-  const [contentValue, setContentValue] = React73.useState("");
-  const [codeEditorChanges, setCodeEditorChanges] = React73.useState("");
-  const [isCodeEditorDirty, setIsCodeEditorDirty] = React73.useState(false);
-  const [isCodeEditorOpened, setIsCodeEditorOpened] = React73.useState(false);
-  const [isDirty, setIsDirty] = React73.useState(false);
+  const [contentValue, setContentValue] = React75.useState("");
+  const [codeEditorChanges, setCodeEditorChanges] = React75.useState("");
+  const [isCodeEditorDirty, setIsCodeEditorDirty] = React75.useState(false);
+  const [isCodeEditorOpened, setIsCodeEditorOpened] = React75.useState(false);
+  const [isDirty, setIsDirty] = React75.useState(false);
   const codeEditorButtonIndexToUse = codeEditorButtonIndex ?? customToolbarGroups.insert?.items?.length ?? DEFAULT_TOOLBAR_INSERT_MENU_ITEMS.length;
   const defaultToolbarInsertMenuItemsWithCodeEditor = DEFAULT_TOOLBAR_INSERT_MENU_ITEMS.slice();
   defaultToolbarInsertMenuItemsWithCodeEditor.splice(
@@ -24099,12 +24470,12 @@ var TextEditor = function TextEditor2({
     0,
     "cnCodeEditor"
   );
-  const onTextChange = React73.useCallback(() => {
+  const onTextChange = React75.useCallback(() => {
     if (editorRef.current) {
       onChange(editorRef.current?.getContent());
     }
   }, [onChange]);
-  const onTextEditorDirty = React73.useCallback(
+  const onTextEditorDirty = React75.useCallback(
     (textEditorDirty) => {
       editorRef.current?.setDirty(textEditorDirty);
       setIsDirty(textEditorDirty);
@@ -24117,7 +24488,7 @@ var TextEditor = function TextEditor2({
     },
     [onDirty, onTextChange]
   );
-  React73.useEffect(() => {
+  React75.useEffect(() => {
     if (resetDirty && editorRef.current?.isDirty()) {
       onTextEditorDirty(false);
     }
@@ -24125,7 +24496,7 @@ var TextEditor = function TextEditor2({
       onResetDirty();
     }
   }, [onResetDirty, onTextEditorDirty, resetDirty]);
-  React73.useEffect(() => {
+  React75.useEffect(() => {
     if (newValue && editorRef.current) {
       editorRef.current.setContent(newValue);
       if (onNewValueSetter) {
@@ -24133,7 +24504,7 @@ var TextEditor = function TextEditor2({
       }
     }
   }, [newValue, onNewValueSetter]);
-  React73.useEffect(() => {
+  React75.useEffect(() => {
     if (forceCloseCodeEditor) {
       setIsCodeEditorOpened(false);
       if (onForceCloseCodeEditor) {
@@ -24324,8 +24695,8 @@ var TextEditor = function TextEditor2({
         };
     }
   };
-  return /* @__PURE__ */ jsxs64(Fragment31, { children: [
-    /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsxs65(Fragment34, { children: [
+    /* @__PURE__ */ jsx135(
       Editor,
       {
         id,
@@ -24345,7 +24716,7 @@ var TextEditor = function TextEditor2({
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx129(
+    /* @__PURE__ */ jsx135(
       CodeEditorPopup_default,
       {
         value: contentValue,
@@ -24380,10 +24751,10 @@ var TextEditor = function TextEditor2({
 var TextEditor_default = TextEditor;
 
 // src/components/input/PhoneField.tsx
-import * as React74 from "react";
-import { Fragment as Fragment32, jsx as jsx130, jsxs as jsxs65 } from "react/jsx-runtime";
+import * as React76 from "react";
+import { Fragment as Fragment35, jsx as jsx136, jsxs as jsxs66 } from "react/jsx-runtime";
 var maxPhoneLengthWithPrefix = 16;
-var PhoneField = React74.forwardRef(function PhoneField2({
+var PhoneField = React76.forwardRef(function PhoneField2({
   value,
   onChange,
   defaultCountryCode = "34",
@@ -24391,20 +24762,20 @@ var PhoneField = React74.forwardRef(function PhoneField2({
   codeSelectProps,
   ...rest
 }, ref) {
-  const [countryCode, setCountryCode] = React74.useState(defaultCountryCode);
-  const [textValue, setTextValue] = React74.useState("");
-  const countryCodeOptions = React74.useMemo(
+  const [countryCode, setCountryCode] = React76.useState(defaultCountryCode);
+  const [textValue, setTextValue] = React76.useState("");
+  const countryCodeOptions = React76.useMemo(
     () => allCountries.map((c) => ({
       value: c.countryCode,
       label: `+${c.countryCode} ${c.name}`
     })),
     []
   );
-  const sanitizeTextValue = React74.useCallback(
+  const sanitizeTextValue = React76.useCallback(
     (value2) => value2.replace(/[^\d]/g, ""),
     []
   );
-  const onChangeText = React74.useCallback(
+  const onChangeText = React76.useCallback(
     (event) => {
       const sanitizedTextValue = sanitizeTextValue(
         event.target.value
@@ -24418,7 +24789,7 @@ var PhoneField = React74.forwardRef(function PhoneField2({
     },
     [countryCode, onChange, sanitizeTextValue, textValue]
   );
-  const onChangeCountryCode = React74.useCallback(
+  const onChangeCountryCode = React76.useCallback(
     (countryCode2) => {
       const sanitizedTextValue = sanitizeTextValue(textValue).substring(
         0,
@@ -24434,7 +24805,7 @@ var PhoneField = React74.forwardRef(function PhoneField2({
     },
     [onChange, sanitizeTextValue, textValue]
   );
-  React74.useEffect(() => {
+  React76.useEffect(() => {
     const countryCode2 = getCountryCode(value);
     if (!countryCode2) {
       setTextValue("");
@@ -24444,7 +24815,7 @@ var PhoneField = React74.forwardRef(function PhoneField2({
     setCountryCode(countryCode2);
     setTextValue(phone);
   }, [value]);
-  const select = /* @__PURE__ */ jsx130(
+  const select = /* @__PURE__ */ jsx136(
     Select_default,
     {
       className: "Cn-PhoneField-countryCodeSelector",
@@ -24460,13 +24831,13 @@ var PhoneField = React74.forwardRef(function PhoneField2({
       }
     }
   );
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx136(
     TextField_default,
     {
       groupElements: true,
       ...rest,
       className: `Cn-PhoneField ${className}`,
-      startAdornment: /* @__PURE__ */ jsxs65(Fragment32, { children: [
+      startAdornment: /* @__PURE__ */ jsxs66(Fragment35, { children: [
         rest.startAdornment,
         select
       ] }),
@@ -24479,8 +24850,8 @@ var PhoneField = React74.forwardRef(function PhoneField2({
 var PhoneField_default = PhoneField;
 
 // src/components/input/NumberField.tsx
-import * as React75 from "react";
-import { jsx as jsx131, jsxs as jsxs66 } from "react/jsx-runtime";
+import * as React77 from "react";
+import { jsx as jsx137, jsxs as jsxs67 } from "react/jsx-runtime";
 var setValueAndTriggerChangeEvent = (r2, value) => {
   const propDescriptor = Object.getOwnPropertyDescriptor(
     window["HTMLInputElement"].prototype,
@@ -24496,7 +24867,7 @@ var setValueAndTriggerChangeEvent = (r2, value) => {
     r2.current.dispatchEvent(e);
   }
 };
-var NumberField = React75.forwardRef(function NumberField2({
+var NumberField = React77.forwardRef(function NumberField2({
   value,
   type = "integer",
   onChange,
@@ -24512,16 +24883,16 @@ var NumberField = React75.forwardRef(function NumberField2({
   endAdornment,
   ...rest
 }, ref) {
-  const inputRef = React75.useRef(null);
-  const numberToString = React75.useCallback(
+  const inputRef = React77.useRef(null);
+  const numberToString = React77.useCallback(
     (value2) => typeof value2 === "number" && !isNaN(value2) ? fractionDigits !== 0 ? value2.toFixed(fractionDigits) : value2.toString() : "",
     [fractionDigits]
   );
-  const stringToNumber = React75.useCallback(
+  const stringToNumber = React77.useCallback(
     (value2) => !value2 || isNaN(+value2) ? null : +value2,
     []
   );
-  const sanitizeDecimalTextValue = React75.useCallback(
+  const sanitizeDecimalTextValue = React77.useCallback(
     (value2) => {
       const negativeSign = value2.charAt(0) === "-" ? "-" : "";
       const numbersAndDots = value2.replace(/[^\d.]/g, "");
@@ -24533,7 +24904,7 @@ var NumberField = React75.forwardRef(function NumberField2({
     },
     [fractionDigits]
   );
-  const sanitizeIntegerTextValue = React75.useCallback(
+  const sanitizeIntegerTextValue = React77.useCallback(
     (value2) => {
       const negativeSign = value2.charAt(0) === "-" ? "-" : "";
       const numbers = value2.replace(/[^\d]/g, "");
@@ -24541,7 +24912,7 @@ var NumberField = React75.forwardRef(function NumberField2({
     },
     []
   );
-  const _onChange = React75.useCallback(
+  const _onChange = React77.useCallback(
     (event) => {
       const sanitizedTextValue = type === "integer" ? sanitizeIntegerTextValue(event.target.value) : sanitizeDecimalTextValue(event.target.value);
       let numericValue = stringToNumber(sanitizedTextValue);
@@ -24571,7 +24942,7 @@ var NumberField = React75.forwardRef(function NumberField2({
       numberToString
     ]
   );
-  const stepUp = React75.useCallback(() => {
+  const stepUp = React77.useCallback(() => {
     if (typeof value === "number" && !isNaN(value)) {
       setValueAndTriggerChangeEvent(
         ref ?? inputRef,
@@ -24584,7 +24955,7 @@ var NumberField = React75.forwardRef(function NumberField2({
       );
     }
   }, [numberToString, ref, step, value]);
-  const stepDown = React75.useCallback(() => {
+  const stepDown = React77.useCallback(() => {
     if (typeof value === "number" && !isNaN(value)) {
       setValueAndTriggerChangeEvent(
         ref ?? inputRef,
@@ -24597,7 +24968,7 @@ var NumberField = React75.forwardRef(function NumberField2({
       );
     }
   }, [numberToString, ref, step, value]);
-  const _onKeyDown = React75.useCallback(
+  const _onKeyDown = React77.useCallback(
     (event) => {
       onKeyDown && onKeyDown(event);
       if (step <= 0) {
@@ -24616,8 +24987,8 @@ var NumberField = React75.forwardRef(function NumberField2({
     },
     [onKeyDown, step, stepDown, stepUp]
   );
-  const [textValue, setTextValue] = React75.useState(numberToString(value));
-  const _onBlur = React75.useCallback(
+  const [textValue, setTextValue] = React77.useState(numberToString(value));
+  const _onBlur = React77.useCallback(
     (event) => {
       onBlur && onBlur(event);
       const text = numberToString(value);
@@ -24629,9 +25000,9 @@ var NumberField = React75.forwardRef(function NumberField2({
   );
   const stepUpDisabled = typeof value !== "number" || typeof maxValue === "number" && value + step > maxValue;
   const stepDownDisabled = typeof value !== "number" || typeof minValue === "number" && value - step < minValue;
-  const _endAdornment = withStepperButtons ? /* @__PURE__ */ jsxs66(Stack_default, { direction: "row", gap: "8px", children: [
+  const _endAdornment = withStepperButtons ? /* @__PURE__ */ jsxs67(Stack_default, { direction: "row", gap: "8px", children: [
     endAdornment,
-    /* @__PURE__ */ jsxs66(
+    /* @__PURE__ */ jsxs67(
       Stack_default,
       {
         justifyContent: "center",
@@ -24643,12 +25014,12 @@ var NumberField = React75.forwardRef(function NumberField2({
           }
         },
         children: [
-          /* @__PURE__ */ jsx131(
+          /* @__PURE__ */ jsx137(
             Tooltip_default,
             {
               title: stepUpDisabledTooltip && stepUpDisabled ? stepUpDisabledTooltip : "",
               allowDisabled: true,
-              children: /* @__PURE__ */ jsx131(
+              children: /* @__PURE__ */ jsx137(
                 IconButton_default,
                 {
                   disabled: stepUpDisabled,
@@ -24659,12 +25030,12 @@ var NumberField = React75.forwardRef(function NumberField2({
               )
             }
           ),
-          /* @__PURE__ */ jsx131(
+          /* @__PURE__ */ jsx137(
             Tooltip_default,
             {
               title: stepDownDisabledTooltip && stepDownDisabled ? stepDownDisabledTooltip : "",
               allowDisabled: true,
-              children: /* @__PURE__ */ jsx131(
+              children: /* @__PURE__ */ jsx137(
                 IconButton_default,
                 {
                   disabled: stepDownDisabled,
@@ -24679,12 +25050,12 @@ var NumberField = React75.forwardRef(function NumberField2({
       }
     )
   ] }) : endAdornment;
-  React75.useEffect(() => {
+  React77.useEffect(() => {
     if (stringToNumber(textValue) !== value) {
       setTextValue(numberToString(value));
     }
   }, [numberToString, stringToNumber, textValue, value]);
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx137(
     TextField_default,
     {
       ...rest,
@@ -24700,13 +25071,13 @@ var NumberField = React75.forwardRef(function NumberField2({
 var NumberField_default = NumberField;
 
 // src/components/input/DatePicker.tsx
-import * as React77 from "react";
+import * as React79 from "react";
 import { tz as tz8 } from "moment-timezone";
 
 // src/components/input/DatePickerStatic.tsx
-import * as React76 from "react";
+import * as React78 from "react";
 import { tz as tz7 } from "moment-timezone";
-import { jsx as jsx132, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs68 } from "react/jsx-runtime";
 var minYear = 1900;
 var maxYear = 2100;
 var DatePickerStatic = ({
@@ -24715,13 +25086,13 @@ var DatePickerStatic = ({
   minDate,
   maxDate
 }) => {
-  const { timezone } = React76.useContext(IntlContext);
-  const [selectedDateParts, setSelectedDateParts] = React76.useState(void 0);
-  const [visibleMonth, setVisibleMonth] = React76.useState({
+  const { timezone } = React78.useContext(IntlContext);
+  const [selectedDateParts, setSelectedDateParts] = React78.useState(void 0);
+  const [visibleMonth, setVisibleMonth] = React78.useState({
     year: minYear,
     month: 0
   });
-  React76.useEffect(() => {
+  React78.useEffect(() => {
     if (selectedDateParts) {
       setVisibleMonth({
         year: selectedDateParts.year,
@@ -24735,7 +25106,7 @@ var DatePickerStatic = ({
       });
     }
   }, [selectedDateParts, timezone]);
-  React76.useEffect(() => {
+  React78.useEffect(() => {
     if (!value || isNaN(value.getTime())) {
       setSelectedDateParts(void 0);
       return;
@@ -24757,25 +25128,25 @@ var DatePickerStatic = ({
   const endYear = maxDate && !isNaN(maxDate.getTime()) ? maxDate.getFullYear() : maxYear;
   const startMonth = minDate && !isNaN(minDate.getTime()) ? minDate.getMonth() : 0;
   const endMonth = maxDate && !isNaN(maxDate.getTime()) ? maxDate.getMonth() : 11;
-  const options = React76.useMemo(
+  const options = React78.useMemo(
     () => Array.from(Array(endYear - startYear + 1)).map((_, i) => ({
       value: startYear + i
     })),
     [endYear, startYear]
   );
-  const navigatePreviousMonth = React76.useCallback(() => {
+  const navigatePreviousMonth = React78.useCallback(() => {
     setVisibleMonth({
       month: visibleMonth.month === 0 ? 11 : visibleMonth.month - 1,
       year: visibleMonth.month === 0 ? visibleMonth.year - 1 : visibleMonth.year
     });
   }, [visibleMonth]);
-  const navigateNextMonth = React76.useCallback(() => {
+  const navigateNextMonth = React78.useCallback(() => {
     setVisibleMonth({
       month: visibleMonth.month === 11 ? 0 : visibleMonth.month + 1,
       year: visibleMonth.month === 11 ? visibleMonth.year + 1 : visibleMonth.year
     });
   }, [visibleMonth]);
-  const onChangeYear = React76.useCallback(
+  const onChangeYear = React78.useCallback(
     (value2) => {
       const month = value2 === startYear ? Math.max(startMonth, visibleMonth.month) : value2 === endYear ? Math.min(endMonth, visibleMonth.month) : visibleMonth.month;
       setVisibleMonth({
@@ -24785,17 +25156,17 @@ var DatePickerStatic = ({
     },
     [endMonth, endYear, startMonth, startYear, visibleMonth.month]
   );
-  const minSimpleDate = React76.useMemo(
+  const minSimpleDate = React78.useMemo(
     () => dateToSimpleDate(minDate, timezone),
     [minDate, timezone]
   );
-  const maxSimpleDate = React76.useMemo(
+  const maxSimpleDate = React78.useMemo(
     () => dateToSimpleDate(maxDate, timezone),
     [maxDate, timezone]
   );
   const isDisabledPreviousMonth = visibleMonth.year < startYear || visibleMonth.year === startYear && visibleMonth.month <= startMonth;
   const isDisabledNextMonth = visibleMonth.year > endYear || visibleMonth.year === endYear && visibleMonth.month >= endMonth;
-  return /* @__PURE__ */ jsxs67(
+  return /* @__PURE__ */ jsxs68(
     Stack_default,
     {
       sx: {
@@ -24804,7 +25175,7 @@ var DatePickerStatic = ({
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ jsxs67(
+        /* @__PURE__ */ jsxs68(
           Stack_default,
           {
             direction: "row",
@@ -24814,7 +25185,7 @@ var DatePickerStatic = ({
             spacing: 2,
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsx132(
+              /* @__PURE__ */ jsx138(
                 Select_default,
                 {
                   value: visibleMonth.year,
@@ -24822,8 +25193,8 @@ var DatePickerStatic = ({
                   onChange: onChangeYear
                 }
               ),
-              /* @__PURE__ */ jsxs67(Stack_default, { direction: "row", spacing: 2, children: [
-                /* @__PURE__ */ jsx132(
+              /* @__PURE__ */ jsxs68(Stack_default, { direction: "row", spacing: 2, children: [
+                /* @__PURE__ */ jsx138(
                   IconButton_default,
                   {
                     disabled: isDisabledPreviousMonth,
@@ -24831,7 +25202,7 @@ var DatePickerStatic = ({
                     onClick: navigatePreviousMonth
                   }
                 ),
-                /* @__PURE__ */ jsx132(
+                /* @__PURE__ */ jsx138(
                   IconButton_default,
                   {
                     disabled: isDisabledNextMonth,
@@ -24843,8 +25214,8 @@ var DatePickerStatic = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx132(DaysOfWeekRow_default, {}),
-        /* @__PURE__ */ jsx132(Box_default2, { sx: { padding: "8px" }, children: /* @__PURE__ */ jsx132(
+        /* @__PURE__ */ jsx138(DaysOfWeekRow_default, {}),
+        /* @__PURE__ */ jsx138(Box_default2, { sx: { padding: "8px" }, children: /* @__PURE__ */ jsx138(
           CalendarMonth_default,
           {
             allowKeyboardNavigation: true,
@@ -24881,14 +25252,14 @@ var DatePickerStatic = ({
 var DatePickerStatic_default = DatePickerStatic;
 
 // src/components/input/DatePickerPopover.tsx
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 var DatePickerPopover = ({
   value,
   onSelect,
   minDate,
   maxDate,
   ...rest
-}) => /* @__PURE__ */ jsx133(Popover_default, { anchorHorizontalOrigin: "right", horizontalAlign: "right", ...rest, children: /* @__PURE__ */ jsx133(
+}) => /* @__PURE__ */ jsx139(Popover_default, { anchorHorizontalOrigin: "right", horizontalAlign: "right", ...rest, children: /* @__PURE__ */ jsx139(
   DatePickerStatic_default,
   {
     value,
@@ -24900,19 +25271,19 @@ var DatePickerPopover = ({
 var DatePickerPopover_default = DatePickerPopover;
 
 // src/components/input/DatePicker.tsx
-import { Fragment as Fragment33, jsx as jsx134, jsxs as jsxs68 } from "react/jsx-runtime";
-var DatePicker = React77.forwardRef(
+import { Fragment as Fragment36, jsx as jsx140, jsxs as jsxs69 } from "react/jsx-runtime";
+var DatePicker = React79.forwardRef(
   function DatePicker2({ value, onChange, onBlur, onKeyDown, minDate, maxDate, ...rest }, ref) {
-    const { locale, timezone } = React77.useContext(IntlContext);
+    const { locale, timezone } = React79.useContext(IntlContext);
     const dateInputFormat = getDateInputFormatForLocale(locale);
     const { t } = useTranslation();
-    const dateInputFormatPlaceholder = React77.useMemo(
+    const dateInputFormatPlaceholder = React79.useMemo(
       () => dateInputFormat.replace(/Y/g, t("DATE_COMPONENTS.YEAR_LETTER")).replace(/M/g, t("DATE_COMPONENTS.MONTH_LETTER")).replace(/D/g, t("DATE_COMPONENTS.DAY_LETTER")),
       [dateInputFormat, t]
     );
-    const _containerRef = React77.useRef(null);
-    const [isPopoverOpen, setPopoverOpen] = React77.useState(false);
-    const [textValue, setTextValue] = React77.useState("");
+    const _containerRef = React79.useRef(null);
+    const [isPopoverOpen, setPopoverOpen] = React79.useState(false);
+    const [textValue, setTextValue] = React79.useState("");
     let anchorEl = null;
     if (isPopoverOpen) {
       if (rest.containerRef && typeof rest.containerRef === "object" && rest.containerRef.current) {
@@ -24921,21 +25292,21 @@ var DatePicker = React77.forwardRef(
         anchorEl = _containerRef.current;
       }
     }
-    const isValidDate = React77.useCallback(
+    const isValidDate = React79.useCallback(
       (dateString) => {
         const date = parseDateForLocale(dateString, locale, timezone);
         return !isNaN(date.getTime()) && (!minDate || date >= minDate) && (!maxDate || date <= maxDate);
       },
       [locale, maxDate, minDate, timezone]
     );
-    const onSelect = React77.useCallback(
+    const onSelect = React79.useCallback(
       (date) => {
         setPopoverOpen(false);
         onChange && onChange(date);
       },
       [onChange]
     );
-    const onChangeTextField = React77.useCallback(
+    const onChangeTextField = React79.useCallback(
       (event) => {
         setTextValue(event.target.value);
         if (!event.target.value && value) {
@@ -24954,7 +25325,7 @@ var DatePicker = React77.forwardRef(
       },
       [isValidDate, locale, onChange, timezone, value]
     );
-    const onBlurTextField = React77.useCallback(
+    const onBlurTextField = React79.useCallback(
       (event) => {
         if (!isValidDate(event.target.value)) {
           value ? onChange && onChange(null) : setTextValue("");
@@ -24963,7 +25334,7 @@ var DatePicker = React77.forwardRef(
       },
       [isValidDate, onChange, onBlur, value]
     );
-    const onKeyDownTextField = React77.useCallback(
+    const onKeyDownTextField = React79.useCallback(
       (event) => {
         if (event.key === "ArrowDown") {
           setPopoverOpen(true);
@@ -24972,12 +25343,12 @@ var DatePicker = React77.forwardRef(
       },
       [onKeyDown]
     );
-    React77.useEffect(() => {
+    React79.useEffect(() => {
       const text = value && !isNaN(value.getTime()) ? tz8(value, timezone).format(dateInputFormat) : "";
       setTextValue(text);
     }, [dateInputFormat, timezone, value]);
-    return /* @__PURE__ */ jsxs68(Fragment33, { children: [
-      /* @__PURE__ */ jsx134(
+    return /* @__PURE__ */ jsxs69(Fragment36, { children: [
+      /* @__PURE__ */ jsx140(
         TextField_default,
         {
           ref,
@@ -24988,7 +25359,7 @@ var DatePicker = React77.forwardRef(
           onChange: onChangeTextField,
           onBlur: onBlurTextField,
           onKeyDown: onKeyDownTextField,
-          endAdornment: /* @__PURE__ */ jsx134(
+          endAdornment: /* @__PURE__ */ jsx140(
             IconButton_default,
             {
               "data-testid": "date-picker-open-button",
@@ -25000,7 +25371,7 @@ var DatePicker = React77.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ jsx134(
+      /* @__PURE__ */ jsx140(
         DatePickerPopover_default,
         {
           anchorEl,
@@ -25019,14 +25390,14 @@ var DatePicker_default = DatePicker;
 // src/components/input/Checkbox.tsx
 import MuiCheckbox from "@mui/material/Checkbox";
 import { FormControlLabel, FormGroup } from "@mui/material";
-import { Fragment as Fragment34, jsx as jsx135, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx141, jsxs as jsxs70 } from "react/jsx-runtime";
 var MaterialCheckbox = ({
   checked,
   disabled,
   inputClass,
   indeterminate,
   onChange
-}) => /* @__PURE__ */ jsx135(
+}) => /* @__PURE__ */ jsx141(
   MuiCheckbox,
   {
     disabled,
@@ -25052,8 +25423,8 @@ var Checkbox = ({
   inputClass,
   onChange,
   tabIndex
-}) => /* @__PURE__ */ jsxs69(Fragment34, { children: [
-  !label && /* @__PURE__ */ jsx135(
+}) => /* @__PURE__ */ jsxs70(Fragment37, { children: [
+  !label && /* @__PURE__ */ jsx141(
     MaterialCheckbox,
     {
       disabled,
@@ -25064,11 +25435,11 @@ var Checkbox = ({
       inputClass
     }
   ),
-  label && /* @__PURE__ */ jsx135(FormGroup, { children: /* @__PURE__ */ jsx135(
+  label && /* @__PURE__ */ jsx141(FormGroup, { children: /* @__PURE__ */ jsx141(
     FormControlLabel,
     {
       value: label,
-      control: /* @__PURE__ */ jsx135(
+      control: /* @__PURE__ */ jsx141(
         MaterialCheckbox,
         {
           disabled,
@@ -25079,7 +25450,7 @@ var Checkbox = ({
           inputClass
         }
       ),
-      label: /* @__PURE__ */ jsx135(Typography_default, { variant: "body2", children: label }),
+      label: /* @__PURE__ */ jsx141(Typography_default, { variant: "body2", children: label }),
       labelPlacement,
       sx: {
         margin: 0,
@@ -25091,11 +25462,11 @@ var Checkbox = ({
 var Checkbox_default = Checkbox;
 
 // src/components/input/Radio.tsx
-import * as React78 from "react";
+import * as React80 from "react";
 import MuiRadio from "@mui/material/Radio";
 import { FormControlLabel as FormControlLabel2 } from "@mui/material";
-import { Fragment as Fragment35, jsx as jsx136, jsxs as jsxs70 } from "react/jsx-runtime";
-var Radio = React78.forwardRef(function Radio2({
+import { Fragment as Fragment38, jsx as jsx142, jsxs as jsxs71 } from "react/jsx-runtime";
+var Radio = React80.forwardRef(function Radio2({
   label,
   labelPlacement = "end",
   onChange,
@@ -25106,13 +25477,13 @@ var Radio = React78.forwardRef(function Radio2({
   size = "M",
   ...rest
 }, ref) {
-  const _onChange = React78.useCallback(
+  const _onChange = React80.useCallback(
     (event) => {
       onChange && onChange(event, event.target.value);
     },
     [onChange]
   );
-  const radio = /* @__PURE__ */ jsx136(
+  const radio = /* @__PURE__ */ jsx142(
     MuiRadio,
     {
       className: `Cn-Radio ${className}`,
@@ -25131,13 +25502,13 @@ var Radio = React78.forwardRef(function Radio2({
       size: size === "S" ? "small" : "medium"
     }
   );
-  return /* @__PURE__ */ jsxs70(Fragment35, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment38, { children: [
     !label && radio,
-    label && /* @__PURE__ */ jsx136(
+    label && /* @__PURE__ */ jsx142(
       FormControlLabel2,
       {
         control: radio,
-        label: /* @__PURE__ */ jsx136(Typography_default, { variant: "body2", children: label }),
+        label: /* @__PURE__ */ jsx142(Typography_default, { variant: "body2", children: label }),
         labelPlacement,
         sx: {
           margin: 0,
@@ -25150,8 +25521,8 @@ var Radio = React78.forwardRef(function Radio2({
 var Radio_default = Radio;
 
 // src/components/input/PageSelector.tsx
-import * as React79 from "react";
-import { jsx as jsx137, jsxs as jsxs71 } from "react/jsx-runtime";
+import * as React81 from "react";
+import { jsx as jsx143, jsxs as jsxs72 } from "react/jsx-runtime";
 var PageSelector = ({
   currentPage,
   pageSize,
@@ -25159,17 +25530,17 @@ var PageSelector = ({
   text,
   onPageChange
 }) => {
-  const handlePrevious = React79.useCallback(() => {
+  const handlePrevious = React81.useCallback(() => {
     if (currentPage > 1) {
       onPageChange(Math.max(1, currentPage - 1));
     }
   }, [currentPage, onPageChange]);
-  const handleNext = React79.useCallback(() => {
+  const handleNext = React81.useCallback(() => {
     onPageChange(
       Math.min(Math.ceil(totalItems / pageSize), currentPage + 1)
     );
   }, [currentPage, onPageChange, pageSize, totalItems]);
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs72(
     Stack_default,
     {
       direction: "row",
@@ -25178,7 +25549,7 @@ var PageSelector = ({
       justifyContent: "flex-end",
       flexGrow: 1,
       children: [
-        text && /* @__PURE__ */ jsx137(Typography_default, { variant: "body2", children: /* @__PURE__ */ jsx137(
+        text && /* @__PURE__ */ jsx143(Typography_default, { variant: "body2", children: /* @__PURE__ */ jsx143(
           "div",
           {
             dangerouslySetInnerHTML: {
@@ -25186,8 +25557,8 @@ var PageSelector = ({
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs71(Stack_default, { direction: "row", alignItems: "center", children: [
-          /* @__PURE__ */ jsx137(
+        /* @__PURE__ */ jsxs72(Stack_default, { direction: "row", alignItems: "center", children: [
+          /* @__PURE__ */ jsx143(
             IconButton_default,
             {
               iconId: "chevron-left",
@@ -25195,7 +25566,7 @@ var PageSelector = ({
               disabled: currentPage <= 1
             }
           ),
-          /* @__PURE__ */ jsx137(
+          /* @__PURE__ */ jsx143(
             NumberField_default,
             {
               value: currentPage,
@@ -25213,7 +25584,7 @@ var PageSelector = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx137(
+          /* @__PURE__ */ jsx143(
             IconButton_default,
             {
               iconId: "chevron-right",
@@ -25233,13 +25604,13 @@ import Fade from "@mui/material/Fade";
 
 // src/components/progress/LinearProgress.tsx
 import MuiLinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 var LinearProgress = ({
   color: color2,
   backgroundColor: backgroundColor2,
   variant = "indeterminate",
   ...rest
-}) => /* @__PURE__ */ jsx138(
+}) => /* @__PURE__ */ jsx144(
   MuiLinearProgress,
   {
     ...rest,
@@ -25262,11 +25633,11 @@ var LinearProgress = ({
 var LinearProgress_default = LinearProgress;
 
 // src/components/progress/CircularProgress.tsx
-import * as React80 from "react";
+import * as React82 from "react";
 import MuiCircularProgress from "@mui/material/CircularProgress";
 import Typography3 from "@mui/material/Typography";
 import Box4 from "@mui/material/Box";
-import { jsx as jsx139, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs73 } from "react/jsx-runtime";
 var circularSizes = {
   XS: "20px",
   SM: "24px",
@@ -25288,10 +25659,10 @@ var CircularProgress = ({
   typographyColor = black,
   gradientColors
 }) => {
-  const gradientName = React80.useRef(
+  const gradientName = React82.useRef(
     gradientColors ? crypto.randomUUID() : void 0
   );
-  return /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsxs73(
     Box4,
     {
       sx: {
@@ -25305,7 +25676,7 @@ var CircularProgress = ({
         }
       },
       children: [
-        gradientColors && /* @__PURE__ */ jsx139("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx139("defs", { children: /* @__PURE__ */ jsxs72(
+        gradientColors && /* @__PURE__ */ jsx145("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx145("defs", { children: /* @__PURE__ */ jsxs73(
           "linearGradient",
           {
             id: gradientName.current,
@@ -25314,14 +25685,14 @@ var CircularProgress = ({
             x2: "0%",
             y2: "100%",
             children: [
-              /* @__PURE__ */ jsx139(
+              /* @__PURE__ */ jsx145(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: gradientColors.startColor
                 }
               ),
-              /* @__PURE__ */ jsx139(
+              /* @__PURE__ */ jsx145(
                 "stop",
                 {
                   offset: "100%",
@@ -25331,7 +25702,7 @@ var CircularProgress = ({
             ]
           }
         ) }) }),
-        showCircularBackground && /* @__PURE__ */ jsx139(
+        showCircularBackground && /* @__PURE__ */ jsx145(
           Box4,
           {
             sx: {
@@ -25344,7 +25715,7 @@ var CircularProgress = ({
                 maxHeight: circularSizes[size]
               }
             },
-            children: /* @__PURE__ */ jsx139(
+            children: /* @__PURE__ */ jsx145(
               MuiCircularProgress,
               {
                 variant: "determinate",
@@ -25356,7 +25727,7 @@ var CircularProgress = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx139(
+        /* @__PURE__ */ jsx145(
           MuiCircularProgress,
           {
             variant,
@@ -25385,7 +25756,7 @@ var CircularProgress = ({
             thickness
           }
         ),
-        variant !== "indeterminate" && /* @__PURE__ */ jsx139(
+        variant !== "indeterminate" && /* @__PURE__ */ jsx145(
           Box4,
           {
             sx: {
@@ -25400,7 +25771,7 @@ var CircularProgress = ({
               height: circularSizes[size],
               width: circularSizes[size]
             },
-            children: typeof label === "string" ? /* @__PURE__ */ jsx139(
+            children: typeof label === "string" ? /* @__PURE__ */ jsx145(
               Typography3,
               {
                 variant: typographyVariant,
@@ -25419,8 +25790,8 @@ var CircularProgress_default = CircularProgress;
 
 // src/components/progress/DonutProgress.tsx
 import Box5 from "@mui/material/Box";
-import { Stack as Stack12 } from "@mui/material";
-import { jsx as jsx140, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Stack as Stack13 } from "@mui/material";
+import { jsx as jsx146, jsxs as jsxs74 } from "react/jsx-runtime";
 var CIRCULAR_PROGRESS_PERCENTAGE = 85;
 var variants2 = {
   empty: {
@@ -25456,9 +25827,9 @@ var DonutProgress = ({
   labelChip,
   showPercentageSymbol
 }) => {
-  const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs73(Stack12, { direction: "row", alignItems: "center", position: "relative", children: [
-    /* @__PURE__ */ jsx140(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
-    /* @__PURE__ */ jsx140(
+  const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs74(Stack13, { direction: "row", alignItems: "center", position: "relative", children: [
+    /* @__PURE__ */ jsx146(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
+    /* @__PURE__ */ jsx146(
       Typography_default,
       {
         variant: "tooltip",
@@ -25469,7 +25840,7 @@ var DonutProgress = ({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs73(
+  return /* @__PURE__ */ jsxs74(
     Box5,
     {
       sx: {
@@ -25477,7 +25848,7 @@ var DonutProgress = ({
         width: "fit-content"
       },
       children: [
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx146(
           CircularProgress_default,
           {
             variant: "determinate",
@@ -25493,7 +25864,7 @@ var DonutProgress = ({
             color: variants2[variant].emptyColor
           }
         ),
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx146(
           Box5,
           {
             sx: {
@@ -25501,7 +25872,7 @@ var DonutProgress = ({
               top: 0,
               left: 0
             },
-            children: /* @__PURE__ */ jsx140(
+            children: /* @__PURE__ */ jsx146(
               CircularProgress_default,
               {
                 variant: "determinate",
@@ -25516,7 +25887,7 @@ var DonutProgress = ({
             )
           }
         ),
-        variant !== "empty" && labelChip && /* @__PURE__ */ jsx140(
+        variant !== "empty" && labelChip && /* @__PURE__ */ jsx146(
           Box5,
           {
             sx: {
@@ -25533,7 +25904,7 @@ var DonutProgress = ({
               justifyContent: "center",
               boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsx140(
+            children: /* @__PURE__ */ jsx146(
               Typography_default,
               {
                 variant: "tooltip",
@@ -25550,14 +25921,14 @@ var DonutProgress = ({
 var DonutProgress_default = DonutProgress;
 
 // src/components/loader/Loader.tsx
-import { jsx as jsx141 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "react/jsx-runtime";
 var Loader = ({
   isVisible,
   zIndex = 1e4,
   size,
   hideProgress = false,
   sx
-}) => /* @__PURE__ */ jsx141(Fade, { in: isVisible, children: /* @__PURE__ */ jsx141(
+}) => /* @__PURE__ */ jsx147(Fade, { in: isVisible, children: /* @__PURE__ */ jsx147(
   Box_default2,
   {
     sx: {
@@ -25573,29 +25944,29 @@ var Loader = ({
       backgroundColor: whiteOpacity32,
       ...sx
     },
-    children: !hideProgress && /* @__PURE__ */ jsx141(CircularProgress_default, { size })
+    children: !hideProgress && /* @__PURE__ */ jsx147(CircularProgress_default, { size })
   }
 ) });
 var Loader_default = Loader;
 
 // src/components/markdown/MarkdownRenderer.tsx
-import React81 from "react";
+import React83 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 jsx142, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx148, jsxs as jsxs75 } from "react/jsx-runtime";
 var KatexRenderer = ({ children, block }) => {
   try {
     const html2 = katex.renderToString(children, {
       throwOnError: false,
       displayMode: block
     });
-    return /* @__PURE__ */ jsx142("span", { dangerouslySetInnerHTML: { __html: html2 } });
+    return /* @__PURE__ */ jsx148("span", { dangerouslySetInnerHTML: { __html: html2 } });
   } catch (err) {
-    return /* @__PURE__ */ jsxs74("pre", { style: { color: "red" }, children: [
+    return /* @__PURE__ */ jsxs75("pre", { style: { color: "red" }, children: [
       "KaTeX error: $",
       err.message
     ] });
@@ -25604,7 +25975,7 @@ var KatexRenderer = ({ children, block }) => {
 var KatexRenderer_default = KatexRenderer;
 
 // src/components/markdown/MarkdownRenderer.tsx
-import { jsx as jsx143 } from "react/jsx-runtime";
+import { jsx as jsx149 } from "react/jsx-runtime";
 var MarkdownContainer = styled8("div")(
   ({
     color: color2,
@@ -25708,11 +26079,11 @@ var renderWithMath = (text) => {
     const inline = match[2];
     if (block !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx143(KatexRenderer_default, { block: true, children: block.trim() }, start)
+        /* @__PURE__ */ jsx149(KatexRenderer_default, { block: true, children: block.trim() }, start)
       );
     } else if (inline !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx143(KatexRenderer_default, { children: inline.trim() }, start)
+        /* @__PURE__ */ jsx149(KatexRenderer_default, { children: inline.trim() }, start)
       );
     }
     lastIndex = regex.lastIndex;
@@ -25722,13 +26093,13 @@ var renderWithMath = (text) => {
   }
   return parts;
 };
-var renderChildrenWithMath = (children) => React81.Children.map(children, (child) => {
+var renderChildrenWithMath = (children) => React83.Children.map(children, (child) => {
   if (typeof child === "string") {
     return renderWithMath(child);
   }
-  if (React81.isValidElement(child)) {
+  if (React83.isValidElement(child)) {
     const element = child;
-    return React81.cloneElement(element, {
+    return React83.cloneElement(element, {
       ...element.props,
       children: renderChildrenWithMath(element.props.children)
     });
@@ -25743,11 +26114,11 @@ var CodeOrMath = ({ children, ...props }) => {
   if (m) {
     const expr = m[1] || m[2] || "";
     const isBlock = Boolean(m[1]);
-    return /* @__PURE__ */ jsx143(KatexRenderer_default, { block: isBlock, children: expr.trim() });
+    return /* @__PURE__ */ jsx149(KatexRenderer_default, { block: isBlock, children: expr.trim() });
   }
   const maybe = renderWithMath(s);
   const onlyText = maybe.length === 1 && typeof maybe[0] === "string";
-  return onlyText ? /* @__PURE__ */ jsx143("code", { ...props, children }) : /* @__PURE__ */ jsx143("span", { children: maybe });
+  return onlyText ? /* @__PURE__ */ jsx149("code", { ...props, children }) : /* @__PURE__ */ jsx149("span", { children: maybe });
 };
 var escapeInlineUnderscores = (s) => s.replace(/(\S)_(\S)/g, "$1\\_$2");
 var MarkdownRenderer = ({
@@ -25757,19 +26128,19 @@ var MarkdownRenderer = ({
 }) => {
   const protectedText = escapeInlineUnderscores(text || "");
   const normalized = normalizeLatexDelimiters(protectedText);
-  return /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsx149(
     MarkdownContainer,
     {
       className: `markdown-container ${className || ""}`,
       ...rest,
-      children: /* @__PURE__ */ jsx143(
+      children: /* @__PURE__ */ jsx149(
         Markdown,
         {
           options: {
             forceBlock: true,
             overrides: {
               p: {
-                component: ({ children, ...props }) => /* @__PURE__ */ jsx143("p", { ...props, children: renderChildrenWithMath(children) })
+                component: ({ children, ...props }) => /* @__PURE__ */ jsx149("p", { ...props, children: renderChildrenWithMath(children) })
               },
               code: { component: CodeOrMath }
             }
@@ -25784,7 +26155,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
 import { Drawer as Drawer2 } from "@mui/material";
-import { Fragment as Fragment36, jsx as jsx144, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx150, jsxs as jsxs76 } from "react/jsx-runtime";
 var Navbar = ({
   topContent,
   bottomContent,
@@ -25792,8 +26163,8 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs75(Fragment36, { children: [
-  /* @__PURE__ */ jsxs75(
+}) => /* @__PURE__ */ jsxs76(Fragment39, { children: [
+  /* @__PURE__ */ jsxs76(
     Box_default2,
     {
       sx: {
@@ -25808,12 +26179,12 @@ var Navbar = ({
       },
       className: "Slim-Vertical-Scroll",
       children: [
-        /* @__PURE__ */ jsx144(Box_default2, { children: topContent }),
-        /* @__PURE__ */ jsx144(Box_default2, { children: bottomContent })
+        /* @__PURE__ */ jsx150(Box_default2, { children: topContent }),
+        /* @__PURE__ */ jsx150(Box_default2, { children: bottomContent })
       ]
     }
   ),
-  /* @__PURE__ */ jsxs75(
+  /* @__PURE__ */ jsxs76(
     Drawer2,
     {
       open: isDrawerOpen,
@@ -25836,8 +26207,8 @@ var Navbar = ({
       },
       onClose,
       children: [
-        /* @__PURE__ */ jsx144("div", { children: drawerTopContent }),
-        /* @__PURE__ */ jsx144("div", { children: drawerBottomContent })
+        /* @__PURE__ */ jsx150("div", { children: drawerTopContent }),
+        /* @__PURE__ */ jsx150("div", { children: drawerBottomContent })
       ]
     }
   )
@@ -25845,10 +26216,10 @@ var Navbar = ({
 var Navbar_default = Navbar;
 
 // src/components/navbar/NavbarButton.tsx
-import * as React82 from "react";
+import * as React84 from "react";
 import { Box as Box6, ButtonBase as ButtonBase2 } from "@mui/material";
-import { jsx as jsx145, jsxs as jsxs76 } from "react/jsx-runtime";
-var NavbarButton = React82.forwardRef(
+import { jsx as jsx151, jsxs as jsxs77 } from "react/jsx-runtime";
+var NavbarButton = React84.forwardRef(
   function NavbarButton2({
     iconId,
     srcUrl,
@@ -25863,7 +26234,7 @@ var NavbarButton = React82.forwardRef(
       if (!highlighted) {
         return element;
       }
-      return /* @__PURE__ */ jsxs76(
+      return /* @__PURE__ */ jsxs77(
         Box6,
         {
           sx: {
@@ -25873,7 +26244,7 @@ var NavbarButton = React82.forwardRef(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx145(
+            /* @__PURE__ */ jsx151(
               Box6,
               {
                 sx: {
@@ -25889,7 +26260,7 @@ var NavbarButton = React82.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ jsx145(
+            /* @__PURE__ */ jsx151(
               Box6,
               {
                 sx: {
@@ -25904,7 +26275,7 @@ var NavbarButton = React82.forwardRef(
         }
       );
     };
-    return /* @__PURE__ */ jsxs76(
+    return /* @__PURE__ */ jsxs77(
       ButtonBase2,
       {
         className: "NavbarButton-root",
@@ -25922,7 +26293,7 @@ var NavbarButton = React82.forwardRef(
         },
         children: [
           srcUrl ? getButtonContent(
-            /* @__PURE__ */ jsx145(
+            /* @__PURE__ */ jsx151(
               Avatar_default,
               {
                 className: "NavbarButton-icon",
@@ -25932,7 +26303,7 @@ var NavbarButton = React82.forwardRef(
               }
             )
           ) : getButtonContent(
-            /* @__PURE__ */ jsx145(
+            /* @__PURE__ */ jsx151(
               Icon_default,
               {
                 id: iconId,
@@ -25948,7 +26319,7 @@ var NavbarButton = React82.forwardRef(
               }
             )
           ),
-          badgeIconProps && /* @__PURE__ */ jsx145(
+          badgeIconProps && /* @__PURE__ */ jsx151(
             Icon_default,
             {
               ...badgeIconProps,
@@ -25970,8 +26341,8 @@ var NavbarButton = React82.forwardRef(
 var NavbarButton_default = NavbarButton;
 
 // src/components/navbar/NavbarHeader.tsx
-import { jsx as jsx146 } from "react/jsx-runtime";
-var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx146(
+import { jsx as jsx152 } from "react/jsx-runtime";
+var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx152(
   Typography_default,
   {
     sx: {
@@ -25991,12 +26362,12 @@ var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx146(
 var NavbarHeader_default = NavbarHeader;
 
 // src/components/navbar/NavbarLogo.tsx
-import * as React83 from "react";
+import * as React85 from "react";
 import { ButtonBase as ButtonBase3 } from "@mui/material";
-import { jsx as jsx147 } from "react/jsx-runtime";
-var NavbarLogo = React83.forwardRef(
+import { jsx as jsx153 } from "react/jsx-runtime";
+var NavbarLogo = React85.forwardRef(
   function NavbarButton3({ src, ...rest }, ref) {
-    return /* @__PURE__ */ jsx147(
+    return /* @__PURE__ */ jsx153(
       ButtonBase3,
       {
         ref,
@@ -26007,7 +26378,7 @@ var NavbarLogo = React83.forwardRef(
           borderBottom: `1px solid ${grey200}`,
           boxSizing: "border-box"
         },
-        children: /* @__PURE__ */ jsx147("img", { src, width: "32px", height: "32px" })
+        children: /* @__PURE__ */ jsx153("img", { src, width: "32px", height: "32px" })
       }
     );
   }
@@ -26015,8 +26386,8 @@ var NavbarLogo = React83.forwardRef(
 var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
-import * as React84 from "react";
-import { Fragment as Fragment37, jsx as jsx148, jsxs as jsxs77 } from "react/jsx-runtime";
+import * as React86 from "react";
+import { Fragment as Fragment40, jsx as jsx154, jsxs as jsxs78 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
   elementRef,
@@ -26025,8 +26396,8 @@ var DonutFocusOverlay = ({
   chipLabel,
   chipPosition = "right"
 }) => {
-  const [clientRect, setClientRect] = React84.useState();
-  React84.useEffect(() => {
+  const [clientRect, setClientRect] = React86.useState();
+  React86.useEffect(() => {
     if (!elementRef?.current) {
       setClientRect(void 0);
       return;
@@ -26057,8 +26428,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__ */ jsxs77(Fragment37, { children: [
-    /* @__PURE__ */ jsx148(
+  return /* @__PURE__ */ jsxs78(Fragment40, { children: [
+    /* @__PURE__ */ jsx154(
       Box_default2,
       {
         sx: {
@@ -26075,7 +26446,7 @@ var DonutFocusOverlay = ({
         }
       }
     ),
-    chipLabel && /* @__PURE__ */ jsx148(
+    chipLabel && /* @__PURE__ */ jsx154(
       Chip_default,
       {
         label: chipLabel,
@@ -26102,7 +26473,7 @@ var DonutFocusOverlay = ({
 var DonutFocusOverlay_default = DonutFocusOverlay;
 
 // src/components/pager/Pager.tsx
-import { Fragment as Fragment38, jsx as jsx149, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx155, jsxs as jsxs79 } from "react/jsx-runtime";
 var Pager = ({
   page,
   pageSize,
@@ -26116,10 +26487,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__ */ jsx149(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
-  return /* @__PURE__ */ jsxs78(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx149(Label, { children: t("PAGER.PAGE") }),
-    /* @__PURE__ */ jsx149(
+  const Label = ({ children }) => /* @__PURE__ */ jsx155(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
+  return /* @__PURE__ */ jsxs79(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx155(Label, { children: t("PAGER.PAGE") }),
+    /* @__PURE__ */ jsx155(
       Select_default,
       {
         value: page,
@@ -26128,9 +26499,9 @@ var Pager = ({
         sx: { minWidth: 78 }
       }
     ),
-    allowedPageSizes && /* @__PURE__ */ jsxs78(Fragment38, { children: [
-      /* @__PURE__ */ jsx149(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
-      /* @__PURE__ */ jsx149(
+    allowedPageSizes && /* @__PURE__ */ jsxs79(Fragment41, { children: [
+      /* @__PURE__ */ jsx155(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
+      /* @__PURE__ */ jsx155(
         Select_default,
         {
           value: pageSize,
@@ -26144,7 +26515,7 @@ var Pager = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs78(Label, { children: [
+    /* @__PURE__ */ jsxs79(Label, { children: [
       from,
       " - ",
       to,
@@ -26153,7 +26524,7 @@ var Pager = ({
       " ",
       total
     ] }),
-    /* @__PURE__ */ jsx149(
+    /* @__PURE__ */ jsx155(
       IconButton_default,
       {
         disabled: page <= 1,
@@ -26161,7 +26532,7 @@ var Pager = ({
         onClick: () => onPageChange(page - 1, pageSize)
       }
     ),
-    /* @__PURE__ */ jsx149(
+    /* @__PURE__ */ jsx155(
       IconButton_default,
       {
         disabled: page > total / pageSize,
@@ -26175,17 +26546,17 @@ var Pager_default = Pager;
 
 // src/components/scrollable/HorizontalScrollable.tsx
 import { ButtonBase as ButtonBase4 } from "@mui/material";
-import * as React85 from "react";
-import { jsx as jsx150, jsxs as jsxs79 } from "react/jsx-runtime";
+import * as React87 from "react";
+import { jsx as jsx156, jsxs as jsxs80 } from "react/jsx-runtime";
 var HorizontalScrollable = ({
   style: style3,
   children,
   stepDistance = 200
 }) => {
-  const horizontalContainerRef = React85.useRef(null);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React85.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React85.useState(true);
-  React85.useEffect(() => {
+  const horizontalContainerRef = React87.useRef(null);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React87.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React87.useState(true);
+  React87.useEffect(() => {
     if (!horizontalContainerRef.current) {
       return;
     }
@@ -26225,8 +26596,8 @@ var HorizontalScrollable = ({
     );
     current.scrollBy(stepDistance, 0);
   };
-  return /* @__PURE__ */ jsxs79(Box_default2, { sx: { position: "relative", ...style3 }, children: [
-    /* @__PURE__ */ jsx150(
+  return /* @__PURE__ */ jsxs80(Box_default2, { sx: { position: "relative", ...style3 }, children: [
+    /* @__PURE__ */ jsx156(
       ButtonBase4,
       {
         sx: {
@@ -26243,10 +26614,10 @@ var HorizontalScrollable = ({
           ...isLeftArrowHidden && { display: "none" }
         },
         onClick: () => leftScroll(),
-        children: /* @__PURE__ */ jsx150(Icon_default, { id: "chevron-left" })
+        children: /* @__PURE__ */ jsx156(Icon_default, { id: "chevron-left" })
       }
     ),
-    /* @__PURE__ */ jsx150(
+    /* @__PURE__ */ jsx156(
       Box_default2,
       {
         ref: horizontalContainerRef,
@@ -26265,7 +26636,7 @@ var HorizontalScrollable = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx150(
+    /* @__PURE__ */ jsx156(
       ButtonBase4,
       {
         sx: {
@@ -26282,7 +26653,7 @@ var HorizontalScrollable = ({
           ...isRightArrowHidden && { display: "none" }
         },
         onClick: () => rightScroll(),
-        children: /* @__PURE__ */ jsx150(Icon_default, { id: "chevron-right" })
+        children: /* @__PURE__ */ jsx156(Icon_default, { id: "chevron-right" })
       }
     )
   ] });
@@ -26290,8 +26661,8 @@ var HorizontalScrollable = ({
 var HorizontalScrollable_default = HorizontalScrollable;
 
 // src/components/scrollable/Carousel.tsx
-import * as React86 from "react";
-import { jsx as jsx151, jsxs as jsxs80 } from "react/jsx-runtime";
+import * as React88 from "react";
+import { jsx as jsx157, jsxs as jsxs81 } from "react/jsx-runtime";
 var buttonStyles = {
   color: grey800,
   position: "absolute",
@@ -26310,23 +26681,23 @@ function Carousel({
   padding: padding2 = 8,
   alignment = "left"
 }) {
-  const rootRef = React86.useRef(null);
-  const containerRef = React86.useRef(null);
-  const previousClientWidth = React86.useRef(null);
-  const isScrolling = React86.useRef(false);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React86.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React86.useState(true);
-  const [paddingElement, setPaddingElement] = React86.useState();
-  const [visibleCount, setVisibleCount] = React86.useState();
-  const showedElementsRef = React86.useRef(void 0);
-  const updateArrows = React86.useCallback(() => {
+  const rootRef = React88.useRef(null);
+  const containerRef = React88.useRef(null);
+  const previousClientWidth = React88.useRef(null);
+  const isScrolling = React88.useRef(false);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React88.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React88.useState(true);
+  const [paddingElement, setPaddingElement] = React88.useState();
+  const [visibleCount, setVisibleCount] = React88.useState();
+  const showedElementsRef = React88.useRef(void 0);
+  const updateArrows = React88.useCallback(() => {
     if (!showedElementsRef.current) {
       return;
     }
     setLeftArrowHidden(showedElementsRef.current.start === 0);
     setRightArrowHidden(showedElementsRef.current.end === items.length - 1);
   }, [items.length]);
-  const getUsableWidth = React86.useCallback(
+  const getUsableWidth = React88.useCallback(
     (el) => {
       let current = el;
       while (current) {
@@ -26340,7 +26711,7 @@ function Carousel({
     },
     []
   );
-  const resetCarousel = React86.useCallback(
+  const resetCarousel = React88.useCallback(
     (root, container) => {
       root.style.width = "";
       showedElementsRef.current = void 0;
@@ -26348,7 +26719,7 @@ function Carousel({
     },
     []
   );
-  const setMeasures = React86.useCallback(
+  const setMeasures = React88.useCallback(
     (root, container, nextElementsIndex) => {
       const children = Array.from(container.children);
       if (children.length === 0) {
@@ -26377,7 +26748,7 @@ function Carousel({
     },
     [alignment, gap2, getUsableWidth, items.length, padding2]
   );
-  const updateVisibleCount = React86.useCallback(() => {
+  const updateVisibleCount = React88.useCallback(() => {
     const root = rootRef.current;
     const container = containerRef.current;
     if (!container || !parent) {
@@ -26424,7 +26795,7 @@ function Carousel({
     updateArrows,
     resetCarousel
   ]);
-  const getInitialWidth = React86.useCallback(
+  const getInitialWidth = React88.useCallback(
     (el) => {
       let current = el;
       let width2 = 0;
@@ -26442,7 +26813,7 @@ function Carousel({
     },
     []
   );
-  const resizeObserverCallback = React86.useCallback(() => {
+  const resizeObserverCallback = React88.useCallback(() => {
     if (!rootRef.current || !containerRef.current) {
       return;
     }
@@ -26453,7 +26824,7 @@ function Carousel({
     previousClientWidth.current = newClientWidth;
     updateVisibleCount();
   }, [getInitialWidth, updateVisibleCount]);
-  React86.useEffect(() => {
+  React88.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -26543,7 +26914,7 @@ function Carousel({
     }
     scrollHorizontal(scrollData);
   };
-  return /* @__PURE__ */ jsx151(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs80(
+  return /* @__PURE__ */ jsx157(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs81(
     Box_default2,
     {
       sx: {
@@ -26555,7 +26926,7 @@ function Carousel({
         }
       },
       children: [
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx157(
           IconButton_default,
           {
             iconId: "chevron-left",
@@ -26568,7 +26939,7 @@ function Carousel({
             onClick: () => scrollToNext("left")
           }
         ),
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx157(
           Box_default2,
           {
             ref: containerRef,
@@ -26582,7 +26953,7 @@ function Carousel({
               "::-webkit-scrollbar": { display: "none" },
               gap: `${gap2}px`
             },
-            children: items.map((item, index) => /* @__PURE__ */ jsx151(
+            children: items.map((item, index) => /* @__PURE__ */ jsx157(
               Box_default2,
               {
                 sx: {
@@ -26594,7 +26965,7 @@ function Carousel({
             ))
           }
         ),
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx157(
           IconButton_default,
           {
             iconId: "chevron-right",
@@ -26617,12 +26988,12 @@ var Carousel_default = Carousel;
 import {
   SnackbarProvider as NotistackSnackbarProvider
 } from "notistack";
-import { jsx as jsx152 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
 var SnackbarProvider = ({
   children,
   maxSnack = 3,
   domRoot
-}) => /* @__PURE__ */ jsx152(
+}) => /* @__PURE__ */ jsx158(
   NotistackSnackbarProvider,
   {
     maxSnack,
@@ -26640,10 +27011,10 @@ import {
 } from "notistack";
 
 // src/components/snackbar/Snackbar.tsx
-import * as React87 from "react";
+import * as React89 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx153, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx159, jsxs as jsxs82 } from "react/jsx-runtime";
 var sizeStyles5 = {
   M: {
     width: "344px",
@@ -26668,7 +27039,7 @@ var iconColors = {
   error: error300,
   warning: complementary300
 };
-var Snackbar = React87.forwardRef(
+var Snackbar = React89.forwardRef(
   function Snackbar2({
     severity = "info",
     message,
@@ -26680,13 +27051,13 @@ var Snackbar = React87.forwardRef(
     identifierKey: key,
     dataTestKey
   }, ref) {
-    const actionClickHandler = React87.useCallback(() => {
+    const actionClickHandler = React89.useCallback(() => {
       onActionClick && onActionClick(key);
     }, [onActionClick, key]);
-    const closeClickHandler = React87.useCallback(() => {
+    const closeClickHandler = React89.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
-    return /* @__PURE__ */ jsx153(
+    return /* @__PURE__ */ jsx159(
       SnackbarContent,
       {
         ref,
@@ -26704,14 +27075,14 @@ var Snackbar = React87.forwardRef(
         ...dataTestKey && {
           "data-test": dataTestKey
         },
-        children: /* @__PURE__ */ jsxs81(
+        children: /* @__PURE__ */ jsxs82(
           Stack_default,
           {
             direction: "row",
             spacing: 2,
             sx: { width: "100%", alignItems: "center" },
             children: [
-              withIcon && /* @__PURE__ */ jsx153(
+              withIcon && /* @__PURE__ */ jsx159(
                 Box_default2,
                 {
                   sx: {
@@ -26719,10 +27090,10 @@ var Snackbar = React87.forwardRef(
                     flexShrink: 0,
                     color: iconColors[severity]
                   },
-                  children: /* @__PURE__ */ jsx153(Icon_default, { id: severityIcons[severity] })
+                  children: /* @__PURE__ */ jsx159(Icon_default, { id: severityIcons[severity] })
                 }
               ),
-              /* @__PURE__ */ jsx153(
+              /* @__PURE__ */ jsx159(
                 Typography4,
                 {
                   variant: "body2",
@@ -26730,7 +27101,7 @@ var Snackbar = React87.forwardRef(
                   children: message
                 }
               ),
-              actionText && /* @__PURE__ */ jsx153(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx153(
+              actionText && /* @__PURE__ */ jsx159(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx159(
                 Button_default,
                 {
                   sx: {
@@ -26745,7 +27116,7 @@ var Snackbar = React87.forwardRef(
                   onClick: actionClickHandler
                 }
               ) }),
-              /* @__PURE__ */ jsx153(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx153(
+              /* @__PURE__ */ jsx159(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx159(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -26770,7 +27141,7 @@ var Snackbar_default = Snackbar;
 
 // src/components/snackbar/enqueueSnackbar.tsx
 import { closeSnackbar as closeSnackbar2 } from "notistack";
-import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
 var enqueueSnackbar = (message, options = {}) => {
   const {
     persist,
@@ -26786,7 +27157,7 @@ var enqueueSnackbar = (message, options = {}) => {
     autoHideDuration: autoHideDurationMs ?? 1e4,
     persist: persist ?? false,
     content(key, message2) {
-      return /* @__PURE__ */ jsx154(
+      return /* @__PURE__ */ jsx160(
         Snackbar_default,
         {
           identifierKey: key,
@@ -26803,7 +27174,7 @@ var enqueueSnackbar = (message, options = {}) => {
 
 // src/components/tab/TabButton.tsx
 import MuiTab from "@mui/material/Tab";
-import { jsx as jsx155 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
 var TabButton = ({
   children,
   disabled = false,
@@ -26811,10 +27182,10 @@ var TabButton = ({
   marginRight = "0px",
   dataTestId,
   ...rest
-}) => /* @__PURE__ */ jsx155(
+}) => /* @__PURE__ */ jsx161(
   MuiTab,
   {
-    label: /* @__PURE__ */ jsx155(
+    label: /* @__PURE__ */ jsx161(
       "div",
       {
         style: {
@@ -26849,13 +27220,13 @@ var TabButton = ({
 var TabButton_default = TabButton;
 
 // src/components/tab/Tabs.tsx
-import * as React89 from "react";
+import * as React91 from "react";
 import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
-import * as React88 from "react";
-import { useEffect as useEffect24, useRef as useRef28, useState as useState35 } from "react";
-import { jsx as jsx156 } from "react/jsx-runtime";
+import * as React90 from "react";
+import { useEffect as useEffect25, useRef as useRef29, useState as useState36 } from "react";
+import { jsx as jsx162 } from "react/jsx-runtime";
 var styles = {
   container: {
     maxHeight: "100%",
@@ -26888,12 +27259,12 @@ function SwipeableViews({
   disableScroll = false,
   ...rootProps
 }) {
-  const containerRef = useRef28(null);
-  const scrollTimeout = useRef28(null);
-  const scrollingMethod = useRef28("none");
-  const [previousIndex, setPreviousIndex] = useState35(index);
-  const hideScrollAnimation = useRef28(true);
-  useEffect24(() => {
+  const containerRef = useRef29(null);
+  const scrollTimeout = useRef29(null);
+  const scrollingMethod = useRef29("none");
+  const [previousIndex, setPreviousIndex] = useState36(index);
+  const hideScrollAnimation = useRef29(true);
+  useEffect25(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -26930,7 +27301,7 @@ function SwipeableViews({
     }
   }, [index]);
   const hasShowTab = (childIndex) => childIndex === index || childIndex === previousIndex;
-  return /* @__PURE__ */ jsx156(
+  return /* @__PURE__ */ jsx162(
     "div",
     {
       ...rootProps,
@@ -26953,12 +27324,12 @@ function SwipeableViews({
           );
         }, 100);
       },
-      children: React88.Children.map(children, (child, childIndex) => {
+      children: React90.Children.map(children, (child, childIndex) => {
         let mountedChild = false;
-        if (React88.isValidElement(child)) {
+        if (React90.isValidElement(child)) {
           mountedChild = !!child.props.keepMounted;
         }
-        return /* @__PURE__ */ jsx156(
+        return /* @__PURE__ */ jsx162(
           "div",
           {
             style: Object.assign(
@@ -26983,7 +27354,7 @@ function SwipeableViews({
 }
 
 // src/components/tab/Tabs.tsx
-import { jsx as jsx157, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs83 } from "react/jsx-runtime";
 var Tabs = ({
   tabButtons,
   children,
@@ -26998,8 +27369,8 @@ var Tabs = ({
   hideLineTabs = false,
   backgroundScrollButtons = Colors_exports.white
 }) => {
-  const tabsRef = React89.useRef(null);
-  const [value, setValue] = React89.useState(0);
+  const tabsRef = React91.useRef(null);
+  const [value, setValue] = React91.useState(0);
   const measureTextWidthRange = (child) => {
     const walker = document.createTreeWalker(child, NodeFilter.SHOW_TEXT, {
       acceptNode: (node) => node.textContent?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
@@ -27013,7 +27384,7 @@ var Tabs = ({
     const rect = range.getBoundingClientRect();
     return Math.round(rect.width);
   };
-  const waitForSmoothScrollEnd = React89.useCallback(
+  const waitForSmoothScrollEnd = React91.useCallback(
     (container, onEnd) => {
       let prev = container.scrollLeft;
       let idleFrames = 0;
@@ -27037,7 +27408,7 @@ var Tabs = ({
     },
     []
   );
-  const calculateIndicatorTabWidth = React89.useCallback((index) => {
+  const calculateIndicatorTabWidth = React91.useCallback((index) => {
     if (!tabsRef.current) {
       return null;
     }
@@ -27056,7 +27427,7 @@ var Tabs = ({
     indicator.style.width = `${textWidth}px`;
     indicator.style.left = `${left}px`;
   }, []);
-  React89.useEffect(() => {
+  React91.useEffect(() => {
     if (!tabsRef.current) {
       return;
     }
@@ -27082,7 +27453,7 @@ var Tabs = ({
     bottom: 0,
     borderRadius: "8px"
   };
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     Box_default2,
     {
       sx: {
@@ -27096,7 +27467,7 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx157(
+        /* @__PURE__ */ jsx163(
           MuiTabs,
           {
             ref: tabsRef,
@@ -27135,7 +27506,7 @@ var Tabs = ({
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx157(
+        /* @__PURE__ */ jsx163(
           Box_default2,
           {
             sx: {
@@ -27144,7 +27515,7 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx157(
+            children: /* @__PURE__ */ jsx163(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
@@ -27173,8 +27544,8 @@ var Tabs = ({
 var Tabs_default = Tabs;
 
 // src/components/tab/TabContent.tsx
-import { jsx as jsx158 } from "react/jsx-runtime";
-var TabContent = ({ children }) => /* @__PURE__ */ jsx158(
+import { jsx as jsx164 } from "react/jsx-runtime";
+var TabContent = ({ children }) => /* @__PURE__ */ jsx164(
   Box_default2,
   {
     sx: {
@@ -27191,8 +27562,8 @@ import {
   TableRow as MuiTableRow,
   TableCell as MuiTableCell
 } from "@mui/material";
-import { jsx as jsx159 } from "react/jsx-runtime";
-var TableDivider = () => /* @__PURE__ */ jsx159(MuiTableRow, { children: /* @__PURE__ */ jsx159(
+import { jsx as jsx165 } from "react/jsx-runtime";
+var TableDivider = () => /* @__PURE__ */ jsx165(MuiTableRow, { children: /* @__PURE__ */ jsx165(
   MuiTableCell,
   {
     colSpan: 1e3,
@@ -27205,8 +27576,8 @@ var TableDivider_default = TableDivider;
 import {
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { jsx as jsx160 } from "react/jsx-runtime";
-var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx160(MuiTableSortLabel, { ...rest, children });
+import { jsx as jsx166 } from "react/jsx-runtime";
+var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx166(MuiTableSortLabel, { ...rest, children });
 var TableSortLabel_default = TableSortLabel;
 
 // src/components/table/Table.tsx
@@ -27214,21 +27585,21 @@ import {
   TableContainer,
   Table as MuiTable
 } from "@mui/material";
-import { jsx as jsx161 } from "react/jsx-runtime";
-var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx161(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx161(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
+import { jsx as jsx167 } from "react/jsx-runtime";
+var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx167(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx167(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 jsx162 } from "react/jsx-runtime";
-var TableBody = ({ children }) => /* @__PURE__ */ jsx162(MuiTableBody, { children });
+import { jsx as jsx168 } from "react/jsx-runtime";
+var TableBody = ({ children }) => /* @__PURE__ */ jsx168(MuiTableBody, { children });
 var TableBody_default = TableBody;
 
 // src/components/table/TableCell.tsx
 import {
   TableCell as MuiTableCell2
 } from "@mui/material";
-import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx169 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   size = "M",
@@ -27239,7 +27610,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx163(
+}) => /* @__PURE__ */ jsx169(
   MuiTableCell2,
   {
     ...rest,
@@ -27263,12 +27634,12 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
-import * as React90 from "react";
-import { jsx as jsx164 } from "react/jsx-runtime";
+import * as React92 from "react";
+import { jsx as jsx170 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = React90.useState(false);
-  const [showIcon, setShowIcon] = React90.useState(false);
+  const [isCopied, setIsCopied] = React92.useState(false);
+  const [showIcon, setShowIcon] = React92.useState(false);
   const manageButtonClicked = () => {
     void navigator.clipboard.writeText(textToCopy ?? text);
     if (isCopied) {
@@ -27282,7 +27653,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const getIconId = () => !isCopied ? "content-copy" : "check";
   const iconHiddenClass = "icon-hidden";
   const iconCopiedClass = "icon-copied";
-  return /* @__PURE__ */ jsx164(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx164(
+  return /* @__PURE__ */ jsx170(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx170(
     Stack_default,
     {
       direction: "row",
@@ -27291,7 +27662,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
       onMouseEnter: () => setShowIcon(true),
       onMouseLeave: () => setShowIcon(false),
       onClick: manageButtonClicked,
-      children: /* @__PURE__ */ jsx164(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx164(
+      children: /* @__PURE__ */ jsx170(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx170(
         Button_default,
         {
           className: isCopied ? iconCopiedClass : !showIcon ? iconHiddenClass : "",
@@ -27321,21 +27692,21 @@ var TableCellCopy_default = TableCellCopy;
 
 // src/components/table/TableHead.tsx
 import { TableHead as MuiTableHead } from "@mui/material";
-import { jsx as jsx165 } from "react/jsx-runtime";
-var TableHead = ({ children }) => /* @__PURE__ */ jsx165(MuiTableHead, { children });
+import { jsx as jsx171 } from "react/jsx-runtime";
+var TableHead = ({ children }) => /* @__PURE__ */ jsx171(MuiTableHead, { children });
 var TableHead_default = TableHead;
 
 // src/components/table/TableRow.tsx
 import {
   TableRow as MuiTableRow2
 } from "@mui/material";
-import { jsx as jsx166 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
 var TableRow = ({
   children,
   isFollowedByNestedTable = false,
   fadeInLeftAnimation = false,
   sx
-}) => /* @__PURE__ */ jsx166(
+}) => /* @__PURE__ */ jsx172(
   MuiTableRow2,
   {
     className: `${isFollowedByNestedTable ? "Followed-By-Nested-Table" : ""} ${fadeInLeftAnimation ? "animated fadeInLeft" : ""}`,
@@ -27347,14 +27718,14 @@ var TableRow_default = TableRow;
 
 // src/components/table/NestedTable.tsx
 import { Collapse as Collapse7 } from "@mui/material";
-import { jsx as jsx167 } from "react/jsx-runtime";
+import { jsx as jsx173 } from "react/jsx-runtime";
 var NestedTable = ({
   colSpan,
   children,
   className = "",
   sx,
   isVisible = true
-}) => /* @__PURE__ */ jsx167(TableRow_default, { children: /* @__PURE__ */ jsx167(
+}) => /* @__PURE__ */ jsx173(TableRow_default, { children: /* @__PURE__ */ jsx173(
   TableCell_default,
   {
     colSpan,
@@ -27363,14 +27734,14 @@ var NestedTable = ({
       height: "auto",
       ...!isVisible && { borderBottom: "none" }
     },
-    children: /* @__PURE__ */ jsx167(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx167(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx167(Paper_default, { children: /* @__PURE__ */ jsx167(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
+    children: /* @__PURE__ */ jsx173(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx173(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx173(Paper_default, { children: /* @__PURE__ */ jsx173(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
   }
 ) });
 var NestedTable_default = NestedTable;
 
 // src/components/toolbar/ToolbarBreadcrumb.tsx
-import { jsx as jsx168 } from "react/jsx-runtime";
-var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx168(
+import { jsx as jsx174 } from "react/jsx-runtime";
+var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx174(
   Stack_default,
   {
     direction: "row",
@@ -27380,7 +27751,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx168(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx168(
+          /* @__PURE__ */ jsx174(
             Typography_default,
             {
               color: grey500,
@@ -27403,10 +27774,10 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
-import * as React91 from "react";
-import { jsx as jsx169 } from "react/jsx-runtime";
-var ToolbarBreadcrumbButton = React91.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx169(
+import * as React93 from "react";
+import { jsx as jsx175 } from "react/jsx-runtime";
+var ToolbarBreadcrumbButton = React93.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx175(
     ButtonBase5,
     {
       className: `Cn-ToolbarBreadcrumbButton ${className}`,
@@ -27425,14 +27796,14 @@ var ToolbarBreadcrumbButton = React91.forwardRef(function ToolbarBreadcrumbButto
         }
       },
       ...rest,
-      children: /* @__PURE__ */ jsx169(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
+      children: /* @__PURE__ */ jsx175(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
     }
   );
 });
 var ToolbarBreadcrumbButton_default = ToolbarBreadcrumbButton;
 
 // src/components/toolbar/Toolbar.tsx
-import { jsx as jsx170, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx176, jsxs as jsxs84 } from "react/jsx-runtime";
 var Toolbar = ({
   children,
   rightActions,
@@ -27441,7 +27812,7 @@ var Toolbar = ({
   sx,
   dataTestId,
   onClickToolbar
-}) => /* @__PURE__ */ jsxs83(
+}) => /* @__PURE__ */ jsxs84(
   Box_default2,
   {
     className: `Cn-Toolbar ${className}`,
@@ -27461,7 +27832,7 @@ var Toolbar = ({
     onClick: onClickToolbar,
     "data-testid": dataTestId,
     children: [
-      /* @__PURE__ */ jsxs83(
+      /* @__PURE__ */ jsxs84(
         Box_default2,
         {
           sx: {
@@ -27473,7 +27844,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx170(
+            leftActions && /* @__PURE__ */ jsx176(
               Box_default2,
               {
                 className: `Cn-Toolbar-left`,
@@ -27483,7 +27854,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx170(
+            /* @__PURE__ */ jsx176(
               Box_default2,
               {
                 className: `Cn-Toolbar-children`,
@@ -27498,7 +27869,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx170(
+      rightActions && /* @__PURE__ */ jsx176(
         Box_default2,
         {
           className: `Cn-Toolbar-right`,
@@ -27517,26 +27888,26 @@ var Toolbar = ({
 var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
-import * as React92 from "react";
-import { useState as useState38 } from "react";
-import { jsx as jsx171, jsxs as jsxs84 } from "react/jsx-runtime";
-var ToolbarTitle = React92.forwardRef(function ToolbarTitle2({
+import * as React94 from "react";
+import { useState as useState39 } from "react";
+import { jsx as jsx177, jsxs as jsxs85 } from "react/jsx-runtime";
+var ToolbarTitle = React94.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
   className,
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React92.useRef(
+  const textElementRef = React94.useRef(
     null
   );
-  const [showHoverActions, setShowHoverActions] = useState38(false);
-  return /* @__PURE__ */ jsx171(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx171(
+  const [showHoverActions, setShowHoverActions] = useState39(false);
+  return /* @__PURE__ */ jsx177(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx177(
     TextEllipsisTooltip_default,
     {
       title: title ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsxs84(
+      children: /* @__PURE__ */ jsxs85(
         Typography_default,
         {
           color: color2,
@@ -27554,7 +27925,7 @@ var ToolbarTitle = React92.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx171(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx177(
               Box_default2,
               {
                 sx: {
@@ -27583,13 +27954,13 @@ var Slide_default = Slide;
 
 // src/components/widget/WidgetLegendItem.tsx
 import { ButtonBase as ButtonBase6 } from "@mui/material";
-import { jsx as jsx172, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs86 } from "react/jsx-runtime";
 var WidgetLegendItem = ({
   groupLabel,
   legendDirection = "column",
   items = [],
   onClick
-}) => /* @__PURE__ */ jsx172(
+}) => /* @__PURE__ */ jsx178(
   ButtonBase6,
   {
     tabIndex: onClick ? 0 : -1,
@@ -27603,7 +27974,7 @@ var WidgetLegendItem = ({
       p: "2px 12px",
       cursor: onClick ? "pointer" : "default"
     },
-    children: /* @__PURE__ */ jsxs85(
+    children: /* @__PURE__ */ jsxs86(
       Box_default2,
       {
         sx: {
@@ -27615,7 +27986,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx172(
+          groupLabel && /* @__PURE__ */ jsx178(
             Typography_default,
             {
               variant: "overline",
@@ -27637,7 +28008,7 @@ var WidgetLegendItem = ({
               style: style3
             }, i) => {
               const incrementLabelIconId = incrementLabelType && incrementLabelStyles[incrementLabelType].icon;
-              return /* @__PURE__ */ jsxs85(
+              return /* @__PURE__ */ jsxs86(
                 Box_default2,
                 {
                   sx: {
@@ -27647,7 +28018,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx172(
+                    iconColor && /* @__PURE__ */ jsx178(
                       Icon_default,
                       {
                         id: iconId,
@@ -27658,7 +28029,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx172(
+                    label && /* @__PURE__ */ jsx178(
                       Typography_default,
                       {
                         variant: "caption",
@@ -27667,7 +28038,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx172(
+                    value && /* @__PURE__ */ jsx178(
                       Typography_default,
                       {
                         sx: style3,
@@ -27676,7 +28047,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx172(
+                    incrementLabelValue && /* @__PURE__ */ jsx178(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -27702,8 +28073,8 @@ var WidgetLegendItem_default = WidgetLegendItem;
 
 // src/components/widget/Widget.tsx
 import MuiCard2 from "@mui/material/Card";
-import { jsx as jsx173 } from "react/jsx-runtime";
-var Widget = ({ children }) => /* @__PURE__ */ jsx173(
+import { jsx as jsx179 } from "react/jsx-runtime";
+var Widget = ({ children }) => /* @__PURE__ */ jsx179(
   MuiCard2,
   {
     variant: "elevation",
@@ -27727,8 +28098,8 @@ var Widget = ({ children }) => /* @__PURE__ */ jsx173(
 var Widget_default = Widget;
 
 // src/components/widget/WidgetActions.tsx
-import { jsx as jsx174 } from "react/jsx-runtime";
-var WidgetActions = ({ children }) => /* @__PURE__ */ jsx174(
+import { jsx as jsx180 } from "react/jsx-runtime";
+var WidgetActions = ({ children }) => /* @__PURE__ */ jsx180(
   Box_default2,
   {
     sx: {
@@ -27742,8 +28113,8 @@ var WidgetActions = ({ children }) => /* @__PURE__ */ jsx174(
 var WidgetActions_default = WidgetActions;
 
 // src/components/widget/WidgetTitle.tsx
-import { jsx as jsx175 } from "react/jsx-runtime";
-var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx175(
+import { jsx as jsx181 } from "react/jsx-runtime";
+var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx181(
   Box_default2,
   {
     sx: {
@@ -27753,7 +28124,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx175(
+    children: /* @__PURE__ */ jsx181(
       Typography_default,
       {
         variant: "subtitle2",
@@ -27767,12 +28138,12 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       }
     )
   }
-) : /* @__PURE__ */ jsx175("span", {});
+) : /* @__PURE__ */ jsx181("span", {});
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
-import * as React93 from "react";
-import { Fragment as Fragment39, jsx as jsx176, jsxs as jsxs86 } from "react/jsx-runtime";
+import * as React95 from "react";
+import { Fragment as Fragment42, jsx as jsx182, jsxs as jsxs87 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
   L: 500,
@@ -27797,7 +28168,7 @@ var iconButtonsStyles = {
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   }
 };
-var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
+var MinimizableWindow = React95.forwardRef(function MinimizableWindow2({
   children,
   title,
   size = "M",
@@ -27817,17 +28188,17 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
   onBack
 }, ref) {
   const { t } = useTranslation();
-  const overlayRef = React93.useRef(null);
-  const windowRef = React93.useRef(null);
-  const headerRef = React93.useRef(null);
-  const [isDraggingState, setIsDraggingState] = React93.useState(false);
-  const diffRef = React93.useRef({ x: 0, y: 0 });
-  React93.useImperativeHandle(ref, () => ({
+  const overlayRef = React95.useRef(null);
+  const windowRef = React95.useRef(null);
+  const headerRef = React95.useRef(null);
+  const [isDraggingState, setIsDraggingState] = React95.useState(false);
+  const diffRef = React95.useRef({ x: 0, y: 0 });
+  React95.useImperativeHandle(ref, () => ({
     window: windowRef.current,
     header: headerRef.current,
     overlay: overlayRef.current
   }));
-  React93.useEffect(() => {
+  React95.useEffect(() => {
     if (open) {
       overlayRef.current?.style.removeProperty("transform");
       overlayRef.current?.style.removeProperty("opacity");
@@ -27889,8 +28260,8 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
       }
     }, 750);
   };
-  return /* @__PURE__ */ jsxs86(Fragment39, { children: [
-    isDraggingState && /* @__PURE__ */ jsx176(
+  return /* @__PURE__ */ jsxs87(Fragment42, { children: [
+    isDraggingState && /* @__PURE__ */ jsx182(
       Box_default2,
       {
         sx: {
@@ -27906,7 +28277,7 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx176(
+    /* @__PURE__ */ jsx182(
       Box_default2,
       {
         ref: overlayRef,
@@ -27923,7 +28294,7 @@ var MinimizableWindow = React93.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__ */ jsxs86(
+        children: /* @__PURE__ */ jsxs87(
           Stack_default,
           {
             sx: {
@@ -27934,7 +28305,7 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
             width: `${sizes6[size]}px`,
             height: contentHeight !== void 0 && headerRef.current ? `${contentHeight + contentPadding + headerRef.current.scrollHeight}px` : void 0,
             children: [
-              /* @__PURE__ */ jsxs86(
+              /* @__PURE__ */ jsxs87(
                 Stack_default,
                 {
                   ref: headerRef,
@@ -27948,19 +28319,19 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
                   onMouseDown: handleMouseDown,
                   minHeight: "44px",
                   children: [
-                    /* @__PURE__ */ jsx176(
+                    /* @__PURE__ */ jsx182(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
-                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx176(
+                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx182(
                           Tooltip_default,
                           {
                             title: t("MINIMIZABLE_WINDOW.GO_BACK"),
                             zIndex: 999999,
                             placement: "top",
-                            children: /* @__PURE__ */ jsx176(
+                            children: /* @__PURE__ */ jsx182(
                               IconButton_default,
                               {
                                 size: iconSizes4,
@@ -27973,7 +28344,7 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
                         ) : backButton)
                       }
                     ),
-                    /* @__PURE__ */ jsx176(
+                    /* @__PURE__ */ jsx182(
                       Box_default2,
                       {
                         sx: {
@@ -27981,23 +28352,23 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
                           left: "50%",
                           transform: "translateX(-50%)"
                         },
-                        children: typeof title === "string" ? /* @__PURE__ */ jsx176(Typography_default, { children: title }) : title
+                        children: typeof title === "string" ? /* @__PURE__ */ jsx182(Typography_default, { children: title }) : title
                       }
                     ),
-                    /* @__PURE__ */ jsxs86(
+                    /* @__PURE__ */ jsxs87(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
-                          /* @__PURE__ */ jsx176(Box_default2, { children: /* @__PURE__ */ jsx176(
+                          /* @__PURE__ */ jsx182(Box_default2, { children: /* @__PURE__ */ jsx182(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.MINIMIZE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx176(
+                              children: /* @__PURE__ */ jsx182(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -28013,13 +28384,13 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
                               )
                             }
                           ) }),
-                          closeable && /* @__PURE__ */ jsx176(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx176(
+                          closeable && /* @__PURE__ */ jsx182(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx182(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx176(
+                              children: /* @__PURE__ */ jsx182(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -28036,7 +28407,7 @@ var MinimizableWindow = React93.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx176(
+              /* @__PURE__ */ jsx182(
                 Stack_default,
                 {
                   sx: {