@connectif/ui-components 4.0.3 → 5.0.0

package/dist/index.js

@@ -8078,7 +8078,8 @@ var ListItemText = ({
   typographyVariant,
   color: color2 = "inherit",
   tooltipClass,
-  "data-test": dataTest
+  slotProps,
+  "data-testid": dataTestId
 }) => {
   const textElementRef = React8.useRef(null);
   return /* @__PURE__ */ jsx6(
@@ -8095,9 +8096,10 @@ var ListItemText = ({
           component: "div",
           variant: typographyVariant,
           noWrap: true,
-          ...dataTest && {
-            "data-test": dataTest
+          ...dataTestId && {
+            "data-testid": dataTestId
           },
+          ...slotProps?.typography,
           children: text || "\xA0"
         }
       )
@@ -8122,7 +8124,8 @@ var BaseListItem = ({
   text,
   subText,
   tooltipClass,
-  "data-test": dataTest
+  slotProps,
+  "data-testid": dataTestId
 }) => /* @__PURE__ */ jsxs2(
   Stack_default,
   {
@@ -8173,8 +8176,9 @@ var BaseListItem = ({
                 text,
                 typographyVariant,
                 tooltipClass,
-                ...dataTest && {
-                  "data-test": dataTest
+                slotProps,
+                ...dataTestId && {
+                  "data-testid": dataTestId
                 }
               }
             ),
@@ -8184,6 +8188,7 @@ var BaseListItem = ({
                 text: subText,
                 typographyVariant: "caption",
                 tooltipClass,
+                slotProps,
                 color: grey500
               }
             )
@@ -8225,11 +8230,12 @@ var ListItemButton = React9.forwardRef(function ListItemButton2({
   sx,
   variant,
   className = "",
-  "data-test": dataTest,
-  buttonDataTest,
+  "data-testid": dataTestId,
+  buttonDataTestId,
   tooltipClass,
   enableAuxClick = false,
   onClick,
+  slotProps,
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx8(
@@ -8253,8 +8259,7 @@ var ListItemButton = React9.forwardRef(function ListItemButton2({
         ...sx
       },
       disabled,
-      "data-test": buttonDataTest,
-      "data-testid": buttonDataTest,
+      ...buttonDataTestId && { "data-testid": buttonDataTestId },
       children: /* @__PURE__ */ jsx8(
         BaseListItem_default,
         {
@@ -8272,7 +8277,8 @@ var ListItemButton = React9.forwardRef(function ListItemButton2({
             subText,
             selected,
             tooltipClass,
-            "data-test": dataTest
+            slotProps,
+            ...dataTestId && { "data-testid": dataTestId }
           }
         }
       )
@@ -10280,6 +10286,7 @@ var ListItem = React22.forwardRef(function ListItem2({
   variant,
   className = "",
   tooltipClass,
+  slotProps,
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx40(
@@ -10305,7 +10312,8 @@ var ListItem = React22.forwardRef(function ListItem2({
             text,
             subText,
             selected,
-            tooltipClass
+            tooltipClass,
+            slotProps
           }
         }
       )
@@ -21173,20 +21181,23 @@ var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx114(
   }
 );
 var SelectOption = ({
-  value,
+  id,
   label,
   selected,
   colors,
+  slotProps,
   ...rest
 }) => /* @__PURE__ */ jsx114(
   ListItemButton_default,
   {
     role: "option",
     selected,
-    "data-value": value,
+    "data-value": id,
     text: label,
-    "data-test": `select-option-${label}`,
-    buttonDataTest: `select-option-button-${label}`,
+    ...id && {
+      "data-testid": `select-option-${id}`,
+      buttonDataTestId: `select-option-button-${id}`
+    },
     sx: {
       "&:hover": {
         backgroundColor: colors?.hoverColor
@@ -21201,6 +21212,9 @@ var SelectOption = ({
       backgroundColor: selected ? colors?.selectedColor : "transparent",
       color: colors?.color
     },
+    slotProps: {
+      typography: slotProps?.optionText
+    },
     ...rest
   }
 );
@@ -21223,7 +21237,7 @@ var Select = function Select2({
   menuZIndex,
   menuColors,
   menuMaxHeight,
-  dataTest,
+  "data-testid": dataTestId,
   open,
   onOpen,
   ...rest
@@ -21337,7 +21351,7 @@ var Select = function Select2({
         }
         return options.find((o) => o.value === value2)?.label ?? value2;
       },
-      ...dataTest && { "data-test": dataTest },
+      ...dataTestId && { "data-testid": dataTestId },
       inputProps: "data-testid" in rest ? {
         "data-testid": rest["data-testid"] + "-input"
       } : void 0,
@@ -21453,7 +21467,7 @@ var Select = function Select2({
           return options.find((o) => o.value === value2)?.label ?? value2;
         }
       },
-      ...dataTest && { "data-test": dataTest },
+      ...dataTestId && { "data-testid": dataTestId },
       inputProps: "data-testid" in rest ? {
         "data-testid": rest["data-testid"] + "-input"
       } : void 0,
@@ -21477,17 +21491,18 @@ var Select = function Select2({
       },
       ...rest,
       children: children ?? options.map((option) => {
-        const { label, value: optionValue, ...rest2 } = option;
+        const { label, value: optionValue, sx: sx2, ...rest2 } = option;
         return /* @__PURE__ */ jsx114(
           SelectOption,
           {
             label: label ?? value?.toString() ?? "",
-            value: optionValue,
+            id: optionValue,
             colors: !menuColors?.selectedColor ? {
               ...menuColors ?? {},
               selectedColor: primary50
             } : menuColors,
             selected: Array.isArray(currentValue) ? currentValue.some((v) => v === optionValue) : currentValue === optionValue,
+            slotProps: { optionText: { sx: sx2 } },
             ...rest2
           },
           optionValue ?? ""
@@ -21587,9 +21602,7 @@ var DaysOfWeekPicker_default = DaysOfWeekPicker;
 
 // src/components/input/ColorPicker.tsx
 import * as React62 from "react";
-import GradientColorPicker, {
-  useColorPicker
-} from "react-best-gradient-color-picker";
+import GradientColorPicker from "react-best-gradient-color-picker";
 import { Fragment as Fragment23, jsx as jsx117, jsxs as jsxs53 } from "react/jsx-runtime";
 var colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^rgba?\((\d{1,3}), {0,1}(\d{1,3}), {0,1}(\d{1,3})(, {0,1}([01]|0?\.\d+))?\)$/;
 var isValidColor = (color2) => colorRegex.test(color2);
@@ -21633,18 +21646,10 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   const [internalPickerValue, setInternalPickerValue] = React62.useState(
     value || white
   );
-  const { valueToHex } = useColorPicker(
-    internalPickerValue ?? "",
-    setInternalPickerValue
-  );
-  const [textFieldValue, setTextFieldValue] = React62.useState(
-    value ? valueToHex() : ""
-  );
-  const [isValidPickerChange, setValidPickerChange] = React62.useState(false);
+  const [textFieldValue, setTextFieldValue] = React62.useState(value ?? "");
   const [anchorEl, setAnchorEl] = React62.useState();
   const handleTextFieldChange = (event) => {
     const newValue = event.target.value;
-    setValidPickerChange(false);
     setTextFieldValue(newValue);
     if (isValidColor(newValue) || allowEmpty && newValue === "") {
       setInternalPickerValue(newValue);
@@ -21661,6 +21666,24 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
       return hex.length === 1 ? "0" + hex : hex;
     }).join("");
   };
+  const normalizeBlack = (color2) => {
+    const rgb = color2.match(/\d+/g);
+    if (!rgb) {
+      return color2;
+    }
+    const [r2, g, b] = rgb.map(Number);
+    if (r2 <= 1 && g <= 1 && b <= 1) {
+      return "rgb(0,0,0)";
+    }
+    return color2;
+  };
+  const commitColor = React62.useCallback(() => {
+    const finalValue = allowAlpha ? internalPickerValue : rgbToHex(internalPickerValue);
+    setInternalPickerValue(finalValue);
+    setTextFieldValue(finalValue);
+    setPreviousColors((prev) => [finalValue, ...prev.slice(0, 17)]);
+    onChange(finalValue);
+  }, [internalPickerValue, allowAlpha, onChange]);
   const iconColor = /* @__PURE__ */ jsx117(
     IconButton_default,
     {
@@ -21672,17 +21695,6 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
       sx: { color: value || grey600 }
     }
   );
-  React62.useEffect(() => {
-    const handleColorChange = (color2) => {
-      setPreviousColors((prev) => [color2, ...prev.slice(0, 17)]);
-      setTextFieldValue(valueToHex());
-      onChange(color2);
-      setValidPickerChange(false);
-    };
-    if (isValidPickerChange && internalPickerValue && internalPickerValue !== value) {
-      handleColorChange(internalPickerValue);
-    }
-  }, [value, internalPickerValue, onChange, isValidPickerChange, valueToHex]);
   return /* @__PURE__ */ jsxs53(Fragment23, { children: [
     /* @__PURE__ */ jsx117(
       TextField_default,
@@ -21696,13 +21708,13 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
         inputSx: {
           fontFamily: "Source Sans Pro, sans-serif",
           fontWeight: "400",
-          color: { grey900 }
+          color: grey900
         },
         placeholder: t("COLOR_PICKER.VALUE_NOT_DEFINED"),
         onChange: handleTextFieldChange,
         onBlur: () => {
-          if (value !== textFieldValue && valueToHex() !== textFieldValue) {
-            setTextFieldValue(valueToHex());
+          if (!textFieldValue && !allowEmpty) {
+            setTextFieldValue(internalPickerValue);
           }
         },
         startAdornment: iconColor,
@@ -21715,16 +21727,11 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
         anchorEl,
         onClose: () => setAnchorEl(void 0),
         sx: { zIndex: popoverZIndex },
-        onMouseUp: () => {
-          setValidPickerChange(true);
-        },
+        onMouseUp: commitColor,
         children: /* @__PURE__ */ jsx117(
           Box_default2,
           {
             className: "Cn-Color-Gradient-Box",
-            onMouseUp: () => {
-              setValidPickerChange(true);
-            },
             sx: {
               "&.Cn-Color-Gradient-Box": {
                 backgroundColor: "white !important",
@@ -21771,9 +21778,10 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
                 height: height2,
                 presets: currentColorPreset,
                 onChange: (newColor) => {
-                  setInternalPickerValue(
-                    allowAlpha ? newColor : rgbToHex(newColor)
-                  );
+                  const normalized = normalizeBlack(newColor);
+                  const preview = allowAlpha ? normalized : rgbToHex(normalized);
+                  setInternalPickerValue(preview);
+                  setTextFieldValue(preview);
                 },
                 hideAdvancedSliders: true,
                 hideColorGuide: true,
@@ -22023,7 +22031,7 @@ var CategorizedPicker = function CategorizedPicker2({
                       sx: { color: primaryMain }
                     }
                   ) : void 0,
-                  buttonDataTest: dataTestId ? dataTestId + "-category-" + idx : void 0,
+                  buttonDataTestId: dataTestId ? dataTestId + "-category-" + idx : void 0,
                   children: /* @__PURE__ */ jsx119(
                     TextEllipsis_default,
                     {
@@ -22073,7 +22081,7 @@ var CategorizedPicker = function CategorizedPicker2({
                       onChange(option);
                       closePopover();
                     },
-                    buttonDataTest: dataTestId ? dataTestId + "-option-" + idx : void 0,
+                    buttonDataTestId: dataTestId ? dataTestId + "-option-" + idx : void 0,
                     children: /* @__PURE__ */ jsx119(
                       TextEllipsis_default,
                       {
@@ -22719,7 +22727,7 @@ var ItemSelector = function ItemSelector2({
 var ItemSelector_default = ItemSelector;
 
 // src/components/input/autocomplete/Autocomplete.tsx
-import * as React68 from "react";
+import * as React69 from "react";
 
 // src/utils/RegExpUtils.ts
 var map = {
@@ -22999,16 +23007,40 @@ var AutocompleteInput = function AutocompleteInput2({
       ),
       autoComplete: "off",
       onMouseEnter: () => setIsHover(true),
-      onMouseLeave: () => setIsHover(false)
+      onMouseLeave: () => setIsHover(false),
+      "data-testid": "autocomplete-input"
     }
   ) });
 };
 var AutocompleteInput_default = AutocompleteInput;
 
 // src/components/input/autocomplete/AutocompleteList.tsx
+import * as React68 from "react";
 import { Popper, ClickAwayListener } from "@mui/material";
 import { FixedSizeList as FixedSizeList3 } from "react-window";
 import AutoSizer5 from "react-virtualized-auto-sizer";
+
+// src/utils/AutocompleteUtils.ts
+function getInitialListScroll({
+  highlightedIndex,
+  itemHeight,
+  selectedIndex,
+  totalItems,
+  containerHeight
+}) {
+  const totalHeight = totalItems * itemHeight;
+  let scrollTo = 0;
+  if (highlightedIndex > -1) {
+    scrollTo = highlightedIndex * itemHeight;
+  } else if (Array.isArray(selectedIndex) && selectedIndex.length > 0) {
+    scrollTo = selectedIndex[selectedIndex.length - 1] * itemHeight;
+  } else if (typeof selectedIndex === "number") {
+    scrollTo = selectedIndex * itemHeight;
+  }
+  return Math.min(scrollTo, Math.max(totalHeight - containerHeight, 0));
+}
+
+// src/components/input/autocomplete/AutocompleteList.tsx
 import { Fragment as Fragment27, jsx as jsx124, jsxs as jsxs60 } from "react/jsx-runtime";
 var AUTOCOMPLETE_ITEM_HEIGHT = 44;
 var AutocompleteList = function AutocompleteList2({
@@ -23022,16 +23054,17 @@ var AutocompleteList = function AutocompleteList2({
   selectedIndex,
   highlightedIndex,
   virtualListRef,
-  listRef,
   filteredOptions,
   onAddSelectedValue,
   onClickAwayPopover
 }) {
   const { t } = useTranslation();
+  const listRef = React68.useRef(null);
   const getText = (option) => {
     const isInOptions = options.some((elem) => elem.id === option.id);
     if (!isInOptions) {
-      return `${addNewValueText ?? t("AUTOCOMPLETE.ADD_NEW_VALUE")}: ${option.label}`;
+      const addedValueText = addNewValueText === void 0 ? `${t("AUTOCOMPLETE.ADD_NEW_VALUE")}` : addNewValueText;
+      return `${addedValueText ? `${addedValueText}: ` : ""}${option.label}`;
     }
     return option.label;
   };
@@ -23065,23 +23098,11 @@ var AutocompleteList = function AutocompleteList2({
         },
         text: getText(option),
         onClick: (event) => onAddSelectedValue(event, option),
-        "data-test": `autocomplete-option-${option.id}`
+        "data-testid": `autocomplete-option-${option.id}`
       },
       option.id
     );
   };
-  const getInitialListScroll = () => {
-    if (highlightedIndex > -1) {
-      return highlightedIndex * AUTOCOMPLETE_ITEM_HEIGHT;
-    }
-    if (typeof selectedIndex === "number") {
-      return selectedIndex * AUTOCOMPLETE_ITEM_HEIGHT;
-    }
-    if (Array.isArray(selectedIndex) && selectedIndex.length > 0) {
-      return selectedIndex[selectedIndex.length - 1] * AUTOCOMPLETE_ITEM_HEIGHT;
-    }
-    return 0;
-  };
   return /* @__PURE__ */ jsx124(Fragment27, { children: /* @__PURE__ */ jsx124(
     ClickAwayListener,
     {
@@ -23132,7 +23153,15 @@ var AutocompleteList = function AutocompleteList2({
                     width: width2,
                     className: "Slim-Vertical-Scroll",
                     ref: virtualListRef,
-                    initialScrollOffset: getInitialListScroll(),
+                    initialScrollOffset: getInitialListScroll(
+                      {
+                        itemHeight: AUTOCOMPLETE_ITEM_HEIGHT,
+                        containerHeight: listRef.current?.clientHeight ?? 0,
+                        highlightedIndex,
+                        selectedIndex,
+                        totalItems: filteredOptions.length
+                      }
+                    ),
                     children: ListItemButtonWrapper
                   }
                 ) })
@@ -23175,15 +23204,15 @@ var Autocomplete = function Autocomplete2({
   onOpen = () => ({}),
   disableClear
 }) {
-  const anchorRef = React68.useRef(null);
-  const inputRef = React68.useRef(null);
-  const [placeholder, setPlaceholder] = React68.useState(
+  const anchorRef = React69.useRef(null);
+  const inputRef = React69.useRef(null);
+  const [placeholder, setPlaceholder] = React69.useState(
     textFieldProps?.placeholder || ""
   );
-  const _renderLabel = React68.useCallback((id) => id, []);
-  const [inputValue, setInputValue] = React68.useState("");
-  const [isDirty, setDirty] = React68.useState(false);
-  const getOptionsLabeled = React68.useCallback(
+  const _renderLabel = React69.useCallback((id) => id, []);
+  const [inputValue, setInputValue] = React69.useState("");
+  const [isDirty, setDirty] = React69.useState(false);
+  const getOptionsLabeled = React69.useCallback(
     (options2, inputValue2 = "") => {
       const searchValue = escapeRegExp2(inputValue2.trim());
       const regExp = new RegExp(
@@ -23214,7 +23243,7 @@ var Autocomplete = function Autocomplete2({
       renderLabel
     ]
   );
-  const getAllowFreeTextOption = React68.useCallback(
+  const getAllowFreeTextOption = React69.useCallback(
     (inputValue2) => {
       if (allowFreeText) {
         const freeOption = {
@@ -23232,28 +23261,27 @@ var Autocomplete = function Autocomplete2({
     },
     [_renderLabel, allowFreeText, options, renderLabel]
   );
-  const [filteredOptions, setFilteredOptions] = React68.useState(getOptionsLabeled([...options]));
-  const listRef = React68.useRef(null);
-  const virtualListRef = React68.createRef();
-  const [isOpenPopover, setOpenPopover] = React68.useState(false);
+  const [filteredOptions, setFilteredOptions] = React69.useState(getOptionsLabeled([...options]));
+  const virtualListRef = React69.createRef();
+  const [isOpenPopover, setOpenPopover] = React69.useState(false);
   const getSelectedIndexEmpty = () => multiple ? [] : void 0;
-  const [selectedIndex, setSelectedIndex] = React68.useState(getSelectedIndexEmpty());
-  const [highlightedIndex, setHighlightedIndex] = React68.useState(-1);
-  React68.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = React69.useState(getSelectedIndexEmpty());
+  const [highlightedIndex, setHighlightedIndex] = React69.useState(-1);
+  React69.useEffect(() => {
     setFilteredOptions(getOptionsLabeled([...options]));
   }, [options]);
   const canAddValues = maxValues === void 0 || maxValues === 0 || !!multiple && Array.isArray(value) && value.length < maxValues;
-  React68.useEffect(() => {
+  React69.useEffect(() => {
     if (disabled) {
       setOpenPopover(false);
     }
   }, [disabled]);
-  React68.useEffect(() => {
+  React69.useEffect(() => {
     if (!canAddValues && isOpenPopover) {
       closePopover();
     }
   }, [canAddValues, isOpenPopover]);
-  const getLastSelectedIndex = React68.useCallback(() => {
+  const getLastSelectedIndex = React69.useCallback(() => {
     if (Array.isArray(selectedIndex) && selectedIndex.length > 0) {
       return selectedIndex[selectedIndex.length - 1];
     } else if (typeof selectedIndex === "number") {
@@ -23261,7 +23289,7 @@ var Autocomplete = function Autocomplete2({
     }
     return void 0;
   }, [selectedIndex]);
-  React68.useEffect(() => {
+  React69.useEffect(() => {
     if (isOpenPopover) {
       if (highlightedIndex > -1) {
         virtualListRef.current?.scrollToItem(highlightedIndex);
@@ -23508,7 +23536,6 @@ var Autocomplete = function Autocomplete2({
         filteredOptions,
         isOpen: isOpenPopover,
         virtualListRef,
-        listRef,
         addNewValueText,
         isLoading,
         loadingText,
@@ -23537,7 +23564,7 @@ function elementIsDescendantOrEqual(parent2, descendant) {
 }
 
 // src/components/input/TextEditor.tsx
-import React71 from "react";
+import React72 from "react";
 import { Editor } from "@tinymce/tinymce-react";
 import "tinymce/tinymce";
 import "tinymce/models/dom/model";
@@ -23558,10 +23585,10 @@ import "tinymce/plugins/wordcount";
 import "tinymce/plugins/emoticons/js/emojis";
 
 // src/components/input/CodeEditorPopup.tsx
-import React70 from "react";
+import React71 from "react";
 
 // src/components/input/CodeEditor.tsx
-import React69 from "react";
+import React70 from "react";
 import CodeMirror, {
   EditorView
 } from "@uiw/react-codemirror";
@@ -23604,7 +23631,7 @@ var CodeEditor = function CodeEditor2({
     }
   );
 };
-var CodeEditor_default = React69.forwardRef(CodeEditor);
+var CodeEditor_default = React70.forwardRef(CodeEditor);
 
 // src/components/input/CodeEditorPopup.tsx
 import format from "html-format";
@@ -23624,9 +23651,9 @@ var CodeEditorPopup = ({
   onCancel
 }) => {
   const { t } = useTranslation();
-  const [valueModified, setValueModified] = React70.useState(value);
-  const [hasErrors, setHasErrors] = React70.useState(false);
-  React70.useEffect(() => {
+  const [valueModified, setValueModified] = React71.useState(value);
+  const [hasErrors, setHasErrors] = React71.useState(false);
+  React71.useEffect(() => {
     if (open) {
       setValueModified(value);
     }
@@ -23856,15 +23883,15 @@ var TextEditor = function TextEditor2({
   ...rest
 }) {
   const { t } = useTranslation();
-  const editorRef = React71.useRef(null);
-  const [internalValue] = React71.useState(
+  const editorRef = React72.useRef(null);
+  const [internalValue] = React72.useState(
     initialValue ?? t("TEXT_EDITOR.INITIAL_VALUE")
   );
-  const [contentValue, setContentValue] = React71.useState("");
-  const [codeEditorChanges, setCodeEditorChanges] = React71.useState("");
-  const [isCodeEditorDirty, setIsCodeEditorDirty] = React71.useState(false);
-  const [isCodeEditorOpened, setIsCodeEditorOpened] = React71.useState(false);
-  const [isDirty, setIsDirty] = React71.useState(false);
+  const [contentValue, setContentValue] = React72.useState("");
+  const [codeEditorChanges, setCodeEditorChanges] = React72.useState("");
+  const [isCodeEditorDirty, setIsCodeEditorDirty] = React72.useState(false);
+  const [isCodeEditorOpened, setIsCodeEditorOpened] = React72.useState(false);
+  const [isDirty, setIsDirty] = React72.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(
@@ -23878,12 +23905,12 @@ var TextEditor = function TextEditor2({
     0,
     "cnCodeEditor"
   );
-  const onTextChange = React71.useCallback(() => {
+  const onTextChange = React72.useCallback(() => {
     if (editorRef.current) {
       onChange(editorRef.current?.getContent());
     }
   }, [onChange]);
-  const onTextEditorDirty = React71.useCallback(
+  const onTextEditorDirty = React72.useCallback(
     (textEditorDirty) => {
       editorRef.current?.setDirty(textEditorDirty);
       setIsDirty(textEditorDirty);
@@ -23896,7 +23923,7 @@ var TextEditor = function TextEditor2({
     },
     [onDirty, onTextChange]
   );
-  React71.useEffect(() => {
+  React72.useEffect(() => {
     if (resetDirty && editorRef.current?.isDirty()) {
       onTextEditorDirty(false);
     }
@@ -23904,7 +23931,7 @@ var TextEditor = function TextEditor2({
       onResetDirty();
     }
   }, [onResetDirty, onTextEditorDirty, resetDirty]);
-  React71.useEffect(() => {
+  React72.useEffect(() => {
     if (newValue && editorRef.current) {
       editorRef.current.setContent(newValue);
       if (onNewValueSetter) {
@@ -23912,7 +23939,7 @@ var TextEditor = function TextEditor2({
       }
     }
   }, [newValue, onNewValueSetter]);
-  React71.useEffect(() => {
+  React72.useEffect(() => {
     if (forceCloseCodeEditor) {
       setIsCodeEditorOpened(false);
       if (onForceCloseCodeEditor) {
@@ -24159,10 +24186,10 @@ var TextEditor = function TextEditor2({
 var TextEditor_default = TextEditor;
 
 // src/components/input/PhoneField.tsx
-import * as React72 from "react";
+import * as React73 from "react";
 import { Fragment as Fragment31, jsx as jsx129, jsxs as jsxs64 } from "react/jsx-runtime";
 var maxPhoneLengthWithPrefix = 16;
-var PhoneField = React72.forwardRef(function PhoneField2({
+var PhoneField = React73.forwardRef(function PhoneField2({
   value,
   onChange,
   defaultCountryCode = "34",
@@ -24170,20 +24197,20 @@ var PhoneField = React72.forwardRef(function PhoneField2({
   codeSelectProps,
   ...rest
 }, ref) {
-  const [countryCode, setCountryCode] = React72.useState(defaultCountryCode);
-  const [textValue, setTextValue] = React72.useState("");
-  const countryCodeOptions = React72.useMemo(
+  const [countryCode, setCountryCode] = React73.useState(defaultCountryCode);
+  const [textValue, setTextValue] = React73.useState("");
+  const countryCodeOptions = React73.useMemo(
     () => allCountries.map((c) => ({
       value: c.countryCode,
       label: `+${c.countryCode} ${c.name}`
     })),
     []
   );
-  const sanitizeTextValue = React72.useCallback(
+  const sanitizeTextValue = React73.useCallback(
     (value2) => value2.replace(/[^\d]/g, ""),
     []
   );
-  const onChangeText = React72.useCallback(
+  const onChangeText = React73.useCallback(
     (event) => {
       const sanitizedTextValue = sanitizeTextValue(
         event.target.value
@@ -24197,7 +24224,7 @@ var PhoneField = React72.forwardRef(function PhoneField2({
     },
     [countryCode, onChange, sanitizeTextValue, textValue]
   );
-  const onChangeCountryCode = React72.useCallback(
+  const onChangeCountryCode = React73.useCallback(
     (countryCode2) => {
       const sanitizedTextValue = sanitizeTextValue(textValue).substring(
         0,
@@ -24213,7 +24240,7 @@ var PhoneField = React72.forwardRef(function PhoneField2({
     },
     [onChange, sanitizeTextValue, textValue]
   );
-  React72.useEffect(() => {
+  React73.useEffect(() => {
     const countryCode2 = getCountryCode(value);
     if (!countryCode2) {
       setTextValue("");
@@ -24258,7 +24285,7 @@ var PhoneField = React72.forwardRef(function PhoneField2({
 var PhoneField_default = PhoneField;
 
 // src/components/input/NumberField.tsx
-import * as React73 from "react";
+import * as React74 from "react";
 import { jsx as jsx130, jsxs as jsxs65 } from "react/jsx-runtime";
 var setValueAndTriggerChangeEvent = (r2, value) => {
   const propDescriptor = Object.getOwnPropertyDescriptor(
@@ -24275,7 +24302,7 @@ var setValueAndTriggerChangeEvent = (r2, value) => {
     r2.current.dispatchEvent(e);
   }
 };
-var NumberField = React73.forwardRef(function NumberField2({
+var NumberField = React74.forwardRef(function NumberField2({
   value,
   type = "integer",
   onChange,
@@ -24291,16 +24318,16 @@ var NumberField = React73.forwardRef(function NumberField2({
   endAdornment,
   ...rest
 }, ref) {
-  const inputRef = React73.useRef(null);
-  const numberToString = React73.useCallback(
+  const inputRef = React74.useRef(null);
+  const numberToString = React74.useCallback(
     (value2) => typeof value2 === "number" && !isNaN(value2) ? fractionDigits !== 0 ? value2.toFixed(fractionDigits) : value2.toString() : "",
     [fractionDigits]
   );
-  const stringToNumber = React73.useCallback(
+  const stringToNumber = React74.useCallback(
     (value2) => !value2 || isNaN(+value2) ? null : +value2,
     []
   );
-  const sanitizeDecimalTextValue = React73.useCallback(
+  const sanitizeDecimalTextValue = React74.useCallback(
     (value2) => {
       const negativeSign = value2.charAt(0) === "-" ? "-" : "";
       const numbersAndDots = value2.replace(/[^\d.]/g, "");
@@ -24312,7 +24339,7 @@ var NumberField = React73.forwardRef(function NumberField2({
     },
     [fractionDigits]
   );
-  const sanitizeIntegerTextValue = React73.useCallback(
+  const sanitizeIntegerTextValue = React74.useCallback(
     (value2) => {
       const negativeSign = value2.charAt(0) === "-" ? "-" : "";
       const numbers = value2.replace(/[^\d]/g, "");
@@ -24320,7 +24347,7 @@ var NumberField = React73.forwardRef(function NumberField2({
     },
     []
   );
-  const _onChange = React73.useCallback(
+  const _onChange = React74.useCallback(
     (event) => {
       const sanitizedTextValue = type === "integer" ? sanitizeIntegerTextValue(event.target.value) : sanitizeDecimalTextValue(event.target.value);
       let numericValue = stringToNumber(sanitizedTextValue);
@@ -24350,7 +24377,7 @@ var NumberField = React73.forwardRef(function NumberField2({
       numberToString
     ]
   );
-  const stepUp = React73.useCallback(() => {
+  const stepUp = React74.useCallback(() => {
     if (typeof value === "number" && !isNaN(value)) {
       setValueAndTriggerChangeEvent(
         ref ?? inputRef,
@@ -24363,7 +24390,7 @@ var NumberField = React73.forwardRef(function NumberField2({
       );
     }
   }, [numberToString, ref, step, value]);
-  const stepDown = React73.useCallback(() => {
+  const stepDown = React74.useCallback(() => {
     if (typeof value === "number" && !isNaN(value)) {
       setValueAndTriggerChangeEvent(
         ref ?? inputRef,
@@ -24376,7 +24403,7 @@ var NumberField = React73.forwardRef(function NumberField2({
       );
     }
   }, [numberToString, ref, step, value]);
-  const _onKeyDown = React73.useCallback(
+  const _onKeyDown = React74.useCallback(
     (event) => {
       onKeyDown && onKeyDown(event);
       if (step <= 0) {
@@ -24395,8 +24422,8 @@ var NumberField = React73.forwardRef(function NumberField2({
     },
     [onKeyDown, step, stepDown, stepUp]
   );
-  const [textValue, setTextValue] = React73.useState(numberToString(value));
-  const _onBlur = React73.useCallback(
+  const [textValue, setTextValue] = React74.useState(numberToString(value));
+  const _onBlur = React74.useCallback(
     (event) => {
       onBlur && onBlur(event);
       const text = numberToString(value);
@@ -24458,7 +24485,7 @@ var NumberField = React73.forwardRef(function NumberField2({
       }
     )
   ] }) : endAdornment;
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     if (stringToNumber(textValue) !== value) {
       setTextValue(numberToString(value));
     }
@@ -24479,11 +24506,11 @@ var NumberField = React73.forwardRef(function NumberField2({
 var NumberField_default = NumberField;
 
 // src/components/input/DatePicker.tsx
-import * as React75 from "react";
+import * as React76 from "react";
 import { tz as tz8 } from "moment-timezone";
 
 // src/components/input/DatePickerStatic.tsx
-import * as React74 from "react";
+import * as React75 from "react";
 import { tz as tz7 } from "moment-timezone";
 import { jsx as jsx131, jsxs as jsxs66 } from "react/jsx-runtime";
 var minYear = 1900;
@@ -24494,13 +24521,13 @@ var DatePickerStatic = ({
   minDate,
   maxDate
 }) => {
-  const { timezone } = React74.useContext(IntlContext);
-  const [selectedDateParts, setSelectedDateParts] = React74.useState(void 0);
-  const [visibleMonth, setVisibleMonth] = React74.useState({
+  const { timezone } = React75.useContext(IntlContext);
+  const [selectedDateParts, setSelectedDateParts] = React75.useState(void 0);
+  const [visibleMonth, setVisibleMonth] = React75.useState({
     year: minYear,
     month: 0
   });
-  React74.useEffect(() => {
+  React75.useEffect(() => {
     if (selectedDateParts) {
       setVisibleMonth({
         year: selectedDateParts.year,
@@ -24514,7 +24541,7 @@ var DatePickerStatic = ({
       });
     }
   }, [selectedDateParts, timezone]);
-  React74.useEffect(() => {
+  React75.useEffect(() => {
     if (!value || isNaN(value.getTime())) {
       setSelectedDateParts(void 0);
       return;
@@ -24536,25 +24563,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 = React74.useMemo(
+  const options = React75.useMemo(
     () => Array.from(Array(endYear - startYear + 1)).map((_, i) => ({
       value: startYear + i
     })),
     [endYear, startYear]
   );
-  const navigatePreviousMonth = React74.useCallback(() => {
+  const navigatePreviousMonth = React75.useCallback(() => {
     setVisibleMonth({
       month: visibleMonth.month === 0 ? 11 : visibleMonth.month - 1,
       year: visibleMonth.month === 0 ? visibleMonth.year - 1 : visibleMonth.year
     });
   }, [visibleMonth]);
-  const navigateNextMonth = React74.useCallback(() => {
+  const navigateNextMonth = React75.useCallback(() => {
     setVisibleMonth({
       month: visibleMonth.month === 11 ? 0 : visibleMonth.month + 1,
       year: visibleMonth.month === 11 ? visibleMonth.year + 1 : visibleMonth.year
     });
   }, [visibleMonth]);
-  const onChangeYear = React74.useCallback(
+  const onChangeYear = React75.useCallback(
     (value2) => {
       const month = value2 === startYear ? Math.max(startMonth, visibleMonth.month) : value2 === endYear ? Math.min(endMonth, visibleMonth.month) : visibleMonth.month;
       setVisibleMonth({
@@ -24564,11 +24591,11 @@ var DatePickerStatic = ({
     },
     [endMonth, endYear, startMonth, startYear, visibleMonth.month]
   );
-  const minSimpleDate = React74.useMemo(
+  const minSimpleDate = React75.useMemo(
     () => dateToSimpleDate(minDate, timezone),
     [minDate, timezone]
   );
-  const maxSimpleDate = React74.useMemo(
+  const maxSimpleDate = React75.useMemo(
     () => dateToSimpleDate(maxDate, timezone),
     [maxDate, timezone]
   );
@@ -24680,18 +24707,18 @@ var DatePickerPopover_default = DatePickerPopover;
 
 // src/components/input/DatePicker.tsx
 import { Fragment as Fragment32, jsx as jsx133, jsxs as jsxs67 } from "react/jsx-runtime";
-var DatePicker = React75.forwardRef(
+var DatePicker = React76.forwardRef(
   function DatePicker2({ value, onChange, onBlur, onKeyDown, minDate, maxDate, ...rest }, ref) {
-    const { locale, timezone } = React75.useContext(IntlContext);
+    const { locale, timezone } = React76.useContext(IntlContext);
     const dateInputFormat = getDateInputFormatForLocale(locale);
     const { t } = useTranslation();
-    const dateInputFormatPlaceholder = React75.useMemo(
+    const dateInputFormatPlaceholder = React76.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 = React75.useRef(null);
-    const [isPopoverOpen, setPopoverOpen] = React75.useState(false);
-    const [textValue, setTextValue] = React75.useState("");
+    const _containerRef = React76.useRef(null);
+    const [isPopoverOpen, setPopoverOpen] = React76.useState(false);
+    const [textValue, setTextValue] = React76.useState("");
     let anchorEl = null;
     if (isPopoverOpen) {
       if (rest.containerRef && typeof rest.containerRef === "object" && rest.containerRef.current) {
@@ -24700,21 +24727,21 @@ var DatePicker = React75.forwardRef(
         anchorEl = _containerRef.current;
       }
     }
-    const isValidDate = React75.useCallback(
+    const isValidDate = React76.useCallback(
       (dateString) => {
         const date = parseDateForLocale(dateString, locale, timezone);
         return !isNaN(date.getTime()) && (!minDate || date >= minDate) && (!maxDate || date <= maxDate);
       },
       [locale, maxDate, minDate, timezone]
     );
-    const onSelect = React75.useCallback(
+    const onSelect = React76.useCallback(
       (date) => {
         setPopoverOpen(false);
         onChange && onChange(date);
       },
       [onChange]
     );
-    const onChangeTextField = React75.useCallback(
+    const onChangeTextField = React76.useCallback(
       (event) => {
         setTextValue(event.target.value);
         if (!event.target.value && value) {
@@ -24733,7 +24760,7 @@ var DatePicker = React75.forwardRef(
       },
       [isValidDate, locale, onChange, timezone, value]
     );
-    const onBlurTextField = React75.useCallback(
+    const onBlurTextField = React76.useCallback(
       (event) => {
         if (!isValidDate(event.target.value)) {
           value ? onChange && onChange(null) : setTextValue("");
@@ -24742,7 +24769,7 @@ var DatePicker = React75.forwardRef(
       },
       [isValidDate, onChange, onBlur, value]
     );
-    const onKeyDownTextField = React75.useCallback(
+    const onKeyDownTextField = React76.useCallback(
       (event) => {
         if (event.key === "ArrowDown") {
           setPopoverOpen(true);
@@ -24751,7 +24778,7 @@ var DatePicker = React75.forwardRef(
       },
       [onKeyDown]
     );
-    React75.useEffect(() => {
+    React76.useEffect(() => {
       const text = value && !isNaN(value.getTime()) ? tz8(value, timezone).format(dateInputFormat) : "";
       setTextValue(text);
     }, [dateInputFormat, timezone, value]);
@@ -24870,11 +24897,11 @@ var Checkbox = ({
 var Checkbox_default = Checkbox;
 
 // src/components/input/Radio.tsx
-import * as React76 from "react";
+import * as React77 from "react";
 import MuiRadio from "@mui/material/Radio";
 import { FormControlLabel as FormControlLabel2 } from "@mui/material";
 import { Fragment as Fragment34, jsx as jsx135, jsxs as jsxs69 } from "react/jsx-runtime";
-var Radio = React76.forwardRef(function Radio2({
+var Radio = React77.forwardRef(function Radio2({
   label,
   labelPlacement = "end",
   onChange,
@@ -24885,7 +24912,7 @@ var Radio = React76.forwardRef(function Radio2({
   size = "M",
   ...rest
 }, ref) {
-  const _onChange = React76.useCallback(
+  const _onChange = React77.useCallback(
     (event) => {
       onChange && onChange(event, event.target.value);
     },
@@ -24929,7 +24956,7 @@ var Radio = React76.forwardRef(function Radio2({
 var Radio_default = Radio;
 
 // src/components/input/PageSelector.tsx
-import * as React77 from "react";
+import * as React78 from "react";
 import { jsx as jsx136, jsxs as jsxs70 } from "react/jsx-runtime";
 var PageSelector = ({
   currentPage,
@@ -24938,12 +24965,12 @@ var PageSelector = ({
   text,
   onPageChange
 }) => {
-  const handlePrevious = React77.useCallback(() => {
+  const handlePrevious = React78.useCallback(() => {
     if (currentPage > 1) {
       onPageChange(Math.max(1, currentPage - 1));
     }
   }, [currentPage, onPageChange]);
-  const handleNext = React77.useCallback(() => {
+  const handleNext = React78.useCallback(() => {
     onPageChange(
       Math.min(Math.ceil(totalItems / pageSize), currentPage + 1)
     );
@@ -25041,7 +25068,7 @@ var LinearProgress = ({
 var LinearProgress_default = LinearProgress;
 
 // src/components/progress/CircularProgress.tsx
-import * as React78 from "react";
+import * as React79 from "react";
 import MuiCircularProgress from "@mui/material/CircularProgress";
 import Typography3 from "@mui/material/Typography";
 import Box4 from "@mui/material/Box";
@@ -25067,7 +25094,7 @@ var CircularProgress = ({
   typographyColor = black,
   gradientColors
 }) => {
-  const gradientName = React78.useRef(
+  const gradientName = React79.useRef(
     gradientColors ? crypto.randomUUID() : void 0
   );
   return /* @__PURE__ */ jsxs71(
@@ -25358,7 +25385,7 @@ var Loader = ({
 var Loader_default = Loader;
 
 // src/components/markdown/MarkdownRenderer.tsx
-import React79 from "react";
+import React80 from "react";
 import Markdown from "markdown-to-jsx";
 import { styled as styled8 } from "@mui/material/styles";
 import "katex/dist/katex.min.css";
@@ -25501,12 +25528,12 @@ var renderWithMath = (text) => {
   }
   return parts;
 };
-var renderChildrenWithMath = (children) => React79.Children.map(children, (child) => {
+var renderChildrenWithMath = (children) => React80.Children.map(children, (child) => {
   if (typeof child === "string") {
     return renderWithMath(child);
   }
-  if (React79.isValidElement(child)) {
-    return React79.cloneElement(child, {
+  if (React80.isValidElement(child)) {
+    return React80.cloneElement(child, {
       ...child.props,
       children: renderChildrenWithMath(child.props.children)
     });
@@ -25623,10 +25650,10 @@ var Navbar = ({
 var Navbar_default = Navbar;
 
 // src/components/navbar/NavbarButton.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import { Box as Box6, ButtonBase as ButtonBase2 } from "@mui/material";
 import { jsx as jsx144, jsxs as jsxs75 } from "react/jsx-runtime";
-var NavbarButton = React80.forwardRef(
+var NavbarButton = React81.forwardRef(
   function NavbarButton2({
     iconId,
     srcUrl,
@@ -25636,6 +25663,7 @@ var NavbarButton = React80.forwardRef(
     highlighted = false,
     ...rest
   }, ref) {
+    const { palette: palette2 } = useCustomTheme();
     const getButtonContent = (element) => {
       if (!highlighted) {
         return element;
@@ -25644,7 +25672,7 @@ var NavbarButton = React80.forwardRef(
         Box6,
         {
           sx: {
-            backgroundImage: `linear-gradient(to left, ${cornflowerBlue}, ${electricLavender})`,
+            backgroundImage: `linear-gradient(to left, ${palette2.cornflowerBlue}, ${palette2.electricLavender})`,
             padding: "2px",
             borderRadius: "100%",
             position: "relative"
@@ -25657,9 +25685,9 @@ var NavbarButton = React80.forwardRef(
                   position: "absolute",
                   width: "8px",
                   height: "8px",
-                  background: primary600,
+                  background: palette2.primary.main,
                   borderRadius: "100%",
-                  border: `4px solid ${white}`,
+                  border: `4px solid ${palette2.common.white}`,
                   right: "-2px",
                   top: "1px",
                   boxSizing: "content-box"
@@ -25670,7 +25698,7 @@ var NavbarButton = React80.forwardRef(
               Box6,
               {
                 sx: {
-                  backgroundColor: white,
+                  backgroundColor: palette2.common.white,
                   borderRadius: "100%",
                   padding: "2px"
                 },
@@ -25692,8 +25720,8 @@ var NavbarButton = React80.forwardRef(
           width: "100%",
           height: "44px",
           "&:hover > .NavbarButton-icon": {
-            backgroundColor: grey100,
-            color: primaryMain
+            backgroundColor: palette2.grey[100],
+            color: palette2.primary.main
           },
           ...sx
         },
@@ -25717,10 +25745,10 @@ var NavbarButton = React80.forwardRef(
                 sx: {
                   boxSizing: "initial",
                   padding: "8px",
-                  color: isActive ? primaryMain : grey700,
+                  color: isActive ? palette2.primary.main : palette2.grey[700],
                   borderRadius: "50%",
                   overflow: "visible",
-                  backgroundColor: isActive ? primaryOpacity32 : "transparent"
+                  backgroundColor: isActive ? palette2.primary.opacity32 : "transparent"
                 }
               }
             )
@@ -25731,7 +25759,7 @@ var NavbarButton = React80.forwardRef(
               ...badgeIconProps,
               className: `NavbarButton-badge ${badgeIconProps.className}`,
               sx: {
-                color: primaryMain,
+                color: palette2.primary.main,
                 position: "absolute",
                 bottom: 0,
                 right: "8px",
@@ -25768,10 +25796,10 @@ var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx145(
 var NavbarHeader_default = NavbarHeader;
 
 // src/components/navbar/NavbarLogo.tsx
-import * as React81 from "react";
+import * as React82 from "react";
 import { ButtonBase as ButtonBase3 } from "@mui/material";
 import { jsx as jsx146 } from "react/jsx-runtime";
-var NavbarLogo = React81.forwardRef(
+var NavbarLogo = React82.forwardRef(
   function NavbarButton3({ src, ...rest }, ref) {
     return /* @__PURE__ */ jsx146(
       ButtonBase3,
@@ -25792,7 +25820,7 @@ var NavbarLogo = React81.forwardRef(
 var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 import { Fragment as Fragment36, jsx as jsx147, jsxs as jsxs76 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
@@ -25802,8 +25830,8 @@ var DonutFocusOverlay = ({
   chipLabel,
   chipPosition = "right"
 }) => {
-  const [clientRect, setClientRect] = React82.useState();
-  React82.useEffect(() => {
+  const [clientRect, setClientRect] = React83.useState();
+  React83.useEffect(() => {
     if (!elementRef?.current) {
       setClientRect(void 0);
       return;
@@ -25952,17 +25980,17 @@ var Pager_default = Pager;
 
 // src/components/scrollable/HorizontalScrollable.tsx
 import { ButtonBase as ButtonBase4 } from "@mui/material";
-import * as React83 from "react";
+import * as React84 from "react";
 import { jsx as jsx149, jsxs as jsxs78 } from "react/jsx-runtime";
 var HorizontalScrollable = ({
   style: style3,
   children,
   stepDistance = 200
 }) => {
-  const horizontalContainerRef = React83.useRef(null);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React83.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React83.useState(true);
-  React83.useEffect(() => {
+  const horizontalContainerRef = React84.useRef(null);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React84.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React84.useState(true);
+  React84.useEffect(() => {
     if (!horizontalContainerRef.current) {
       return;
     }
@@ -26067,7 +26095,7 @@ var HorizontalScrollable = ({
 var HorizontalScrollable_default = HorizontalScrollable;
 
 // src/components/scrollable/Carousel.tsx
-import * as React84 from "react";
+import * as React85 from "react";
 import { jsx as jsx150, jsxs as jsxs79 } from "react/jsx-runtime";
 var buttonStyles = {
   color: grey800,
@@ -26086,24 +26114,24 @@ function Carousel({
   gap: gap2 = 8,
   padding: padding2 = 8
 }) {
-  const rootRef = React84.useRef(null);
-  const containerRef = React84.useRef(null);
-  const previousClientWidth = React84.useRef(null);
-  const isScrolling = React84.useRef(false);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React84.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React84.useState(true);
-  const [paddingElement, setPaddingElement] = React84.useState();
-  const [visibleCount, setVisibleCount] = React84.useState();
-  const showedElementsRef = React84.useRef();
-  const [showedElements, setShowedElements] = React84.useState();
-  const updateArrows = React84.useCallback(() => {
+  const rootRef = React85.useRef(null);
+  const containerRef = React85.useRef(null);
+  const previousClientWidth = React85.useRef(null);
+  const isScrolling = React85.useRef(false);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React85.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React85.useState(true);
+  const [paddingElement, setPaddingElement] = React85.useState();
+  const [visibleCount, setVisibleCount] = React85.useState();
+  const showedElementsRef = React85.useRef();
+  const [showedElements, setShowedElements] = React85.useState();
+  const updateArrows = React85.useCallback(() => {
     if (!showedElementsRef.current) {
       return;
     }
     setLeftArrowHidden(showedElementsRef.current.start === 0);
     setRightArrowHidden(showedElementsRef.current.end === items.length - 1);
   }, [items.length]);
-  const getUsableWidth = React84.useCallback(
+  const getUsableWidth = React85.useCallback(
     (el) => {
       let current = el;
       while (current) {
@@ -26117,7 +26145,7 @@ function Carousel({
     },
     []
   );
-  const resetCarousel = React84.useCallback(
+  const resetCarousel = React85.useCallback(
     (root, container) => {
       root.style.width = "";
       showedElementsRef.current = void 0;
@@ -26126,7 +26154,7 @@ function Carousel({
     },
     []
   );
-  const setMeasures = React84.useCallback(
+  const setMeasures = React85.useCallback(
     (root, container, nextElementsIndex) => {
       const children = Array.from(container.children);
       if (children.length === 0) {
@@ -26155,7 +26183,7 @@ function Carousel({
     },
     [gap2, getUsableWidth, items.length, padding2]
   );
-  const updateVisibleCount = React84.useCallback(() => {
+  const updateVisibleCount = React85.useCallback(() => {
     const root = rootRef.current;
     const container = containerRef.current;
     if (!container || !parent) {
@@ -26201,7 +26229,7 @@ function Carousel({
     updateArrows,
     resetCarousel
   ]);
-  const getInitialWidth = React84.useCallback(
+  const getInitialWidth = React85.useCallback(
     (el) => {
       let current = el;
       let width2 = 0;
@@ -26219,7 +26247,7 @@ function Carousel({
     },
     []
   );
-  const resizeObserverCallback = React84.useCallback(() => {
+  const resizeObserverCallback = React85.useCallback(() => {
     if (!rootRef.current || !containerRef.current) {
       return;
     }
@@ -26230,7 +26258,7 @@ function Carousel({
     previousClientWidth.current = newClientWidth;
     updateVisibleCount();
   }, [getInitialWidth, updateVisibleCount]);
-  React84.useEffect(() => {
+  React85.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -26423,7 +26451,7 @@ import {
 } from "notistack";
 
 // src/components/snackbar/Snackbar.tsx
-import * as React85 from "react";
+import * as React86 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
 import { jsx as jsx152, jsxs as jsxs80 } from "react/jsx-runtime";
@@ -26451,7 +26479,7 @@ var iconColors = {
   error: error300,
   warning: complementary300
 };
-var Snackbar = React85.forwardRef(
+var Snackbar = React86.forwardRef(
   function Snackbar2({
     severity = "info",
     message,
@@ -26463,10 +26491,10 @@ var Snackbar = React85.forwardRef(
     identifierKey: key,
     dataTestKey
   }, ref) {
-    const actionClickHandler = React85.useCallback(() => {
+    const actionClickHandler = React86.useCallback(() => {
       onActionClick && onActionClick(key);
     }, [onActionClick, key]);
-    const closeClickHandler = React85.useCallback(() => {
+    const closeClickHandler = React86.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
     return /* @__PURE__ */ jsx152(
@@ -26632,12 +26660,12 @@ var TabButton = ({
 var TabButton_default = TabButton;
 
 // src/components/tab/Tabs.tsx
-import * as React87 from "react";
+import * as React88 from "react";
 import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
-import * as React86 from "react";
-import { useEffect as useEffect23, useRef as useRef25, useState as useState34 } from "react";
+import * as React87 from "react";
+import { useEffect as useEffect22, useRef as useRef26, useState as useState34 } from "react";
 import { jsx as jsx155 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -26671,12 +26699,12 @@ function SwipeableViews({
   disableScroll = false,
   ...rootProps
 }) {
-  const containerRef = useRef25(null);
-  const scrollTimeout = useRef25();
-  const scrollingMethod = useRef25("none");
+  const containerRef = useRef26(null);
+  const scrollTimeout = useRef26();
+  const scrollingMethod = useRef26("none");
   const [previousIndex, setPreviousIndex] = useState34(index);
-  const hideScrollAnimation = useRef25(true);
-  useEffect23(() => {
+  const hideScrollAnimation = useRef26(true);
+  useEffect22(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -26736,9 +26764,9 @@ function SwipeableViews({
           );
         }, 100);
       },
-      children: React86.Children.map(children, (child, childIndex) => {
+      children: React87.Children.map(children, (child, childIndex) => {
         let mountedChild = false;
-        if (React86.isValidElement(child)) {
+        if (React87.isValidElement(child)) {
           mountedChild = !!child.props.keepMounted;
         }
         return /* @__PURE__ */ jsx155(
@@ -26781,8 +26809,8 @@ var Tabs = ({
   hideLineTabs = false,
   backgroundScrollButtons = Colors_exports.white
 }) => {
-  const tabsRef = React87.useRef(null);
-  const [value, setValue] = React87.useState(0);
+  const tabsRef = React88.useRef(null);
+  const [value, setValue] = React88.useState(0);
   const measureTextWidthRange = (child) => {
     const walker = document.createTreeWalker(child, NodeFilter.SHOW_TEXT, {
       acceptNode: (node) => node.textContent?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
@@ -26796,7 +26824,7 @@ var Tabs = ({
     const rect = range.getBoundingClientRect();
     return Math.round(rect.width);
   };
-  const waitForSmoothScrollEnd = React87.useCallback(
+  const waitForSmoothScrollEnd = React88.useCallback(
     (container, onEnd) => {
       let prev = container.scrollLeft;
       let idleFrames = 0;
@@ -26820,7 +26848,7 @@ var Tabs = ({
     },
     []
   );
-  const calculateIndicatorTabWidth = React87.useCallback((index) => {
+  const calculateIndicatorTabWidth = React88.useCallback((index) => {
     if (!tabsRef.current) {
       return null;
     }
@@ -26839,7 +26867,7 @@ var Tabs = ({
     indicator.style.width = `${textWidth}px`;
     indicator.style.left = `${left}px`;
   }, []);
-  React87.useEffect(() => {
+  React88.useEffect(() => {
     if (!tabsRef.current) {
       return;
     }
@@ -27046,12 +27074,12 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 import { jsx as jsx163 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = React88.useState(false);
-  const [showIcon, setShowIcon] = React88.useState(false);
+  const [isCopied, setIsCopied] = React89.useState(false);
+  const [showIcon, setShowIcon] = React89.useState(false);
   const manageButtonClicked = () => {
     void navigator.clipboard.writeText(textToCopy ?? text);
     if (isCopied) {
@@ -27186,9 +27214,9 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
-import * as React89 from "react";
+import * as React90 from "react";
 import { jsx as jsx168 } from "react/jsx-runtime";
-var ToolbarBreadcrumbButton = React89.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
+var ToolbarBreadcrumbButton = React90.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx168(
     ButtonBase5,
     {
@@ -27300,17 +27328,17 @@ var Toolbar = ({
 var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
-import * as React90 from "react";
+import * as React91 from "react";
 import { useState as useState37 } from "react";
 import { jsx as jsx170, jsxs as jsxs83 } from "react/jsx-runtime";
-var ToolbarTitle = React90.forwardRef(function ToolbarTitle2({
+var ToolbarTitle = React91.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
   className,
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React90.useRef(null);
+  const textElementRef = React91.useRef(null);
   const [showHoverActions, setShowHoverActions] = useState37(false);
   return /* @__PURE__ */ jsx170(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx170(
     TextEllipsisTooltip_default,
@@ -27552,7 +27580,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
-import * as React91 from "react";
+import * as React92 from "react";
 import { Fragment as Fragment38, jsx as jsx175, jsxs as jsxs85 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
@@ -27578,7 +27606,7 @@ var iconButtonsStyles = {
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   }
 };
-var MinimizableWindow = React91.forwardRef(function MinimizableWindow2({
+var MinimizableWindow = React92.forwardRef(function MinimizableWindow2({
   children,
   title,
   size = "M",
@@ -27598,17 +27626,17 @@ var MinimizableWindow = React91.forwardRef(function MinimizableWindow2({
   onBack
 }, ref) {
   const { t } = useTranslation();
-  const overlayRef = React91.useRef(null);
-  const windowRef = React91.useRef(null);
-  const headerRef = React91.useRef(null);
-  const [isDraggingState, setIsDraggingState] = React91.useState(false);
-  const diffRef = React91.useRef({ x: 0, y: 0 });
-  React91.useImperativeHandle(ref, () => ({
+  const overlayRef = React92.useRef(null);
+  const windowRef = React92.useRef(null);
+  const headerRef = React92.useRef(null);
+  const [isDraggingState, setIsDraggingState] = React92.useState(false);
+  const diffRef = React92.useRef({ x: 0, y: 0 });
+  React92.useImperativeHandle(ref, () => ({
     window: windowRef.current,
     header: headerRef.current,
     overlay: overlayRef.current
   }));
-  React91.useEffect(() => {
+  React92.useEffect(() => {
     if (open) {
       overlayRef.current?.style.removeProperty("transform");
       overlayRef.current?.style.removeProperty("opacity");
@@ -27836,31 +27864,31 @@ var MinimizableWindow = React91.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback22, useContext as useContext16 } from "react";
+import { useCallback as useCallback23, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback22(
+    formatCompactNumber: useCallback23(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback22(
+    formatNumber: useCallback23(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback22(
+    formatPercentage: useCallback23(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback22(
+    formatCurrency: useCallback23(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback22(
+    formatDate: useCallback23(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     ),
-    formatPhone: useCallback22(
+    formatPhone: useCallback23(
       (phone, format2) => formatPhone(phone, format2),
       []
     )