@connectif/ui-components 2.4.3 → 3.0.1

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 Fragment36 = REACT_FRAGMENT_TYPE;
+        var Fragment37 = 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 = Fragment36;
+        exports.Fragment = Fragment37;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -5329,9 +5329,9 @@ var tabsTheme = {
       minHeight: "40px"
     },
     indicator: {
-      bottom: "initial",
-      height: "4px",
-      borderRadius: "0 0 4px 4px"
+      bottom: "0",
+      height: "2px",
+      borderRadius: "8px"
     },
     scrollButtons: {
       width: "24px"
@@ -16078,7 +16078,7 @@ function parseDateForLocale(dateString, locale, timezone) {
   const m = tz({ year, month, date }, timezone);
   return m.isValid() ? m.toDate() : /* @__PURE__ */ new Date(NaN);
 }
-function getDatesFromDateInterval(interval, maxSelectableDays, timezone) {
+function getDateRangeFromInterval(interval, maxSelectableDays, timezone) {
   const end = tz(timezone).startOf("day");
   const endDate = end.toDate();
   switch (interval) {
@@ -16089,56 +16089,127 @@ function getDatesFromDateInterval(interval, maxSelectableDays, timezone) {
       };
     case "yesterday":
       return {
-        startDate: end.subtract(1, "day").toDate(),
+        startDate: end.clone().subtract(1, "day").toDate(),
         endDate
       };
     case "thisWeekFromSunday":
       return {
         startDate: end.clone().day(0).toDate(),
-        endDate: end.add(1, "day").toDate()
+        endDate: end.clone().add(1, "day").toDate()
       };
     case "thisWeekFromMonday":
       return {
         startDate: end.clone().day(1).toDate(),
-        endDate: end.add(1, "day").toDate()
+        endDate: end.clone().add(1, "day").toDate()
       };
     case "thisMonth":
       return {
         startDate: end.clone().date(1).toDate(),
-        endDate: end.add(1, "day").toDate()
+        endDate: end.clone().add(1, "day").toDate()
       };
     case "thisYear":
       return {
         startDate: end.clone().month(0).date(1).toDate(),
-        endDate: end.add(1, "day").toDate()
+        endDate: end.clone().add(1, "day").toDate()
       };
     case "last7Days":
       return {
-        startDate: end.subtract(7, "days").toDate(),
+        startDate: end.clone().subtract(7, "days").toDate(),
         endDate
       };
     case "last30Days":
       return {
-        startDate: end.subtract(30, "day").toDate(),
+        startDate: end.clone().subtract(30, "day").toDate(),
         endDate
       };
     case "last90Days":
       return {
-        startDate: end.subtract(90, "day").toDate(),
+        startDate: end.clone().subtract(90, "day").toDate(),
         endDate
       };
     case "last12Months":
       return {
-        startDate: end.subtract(12, "month").toDate(),
+        startDate: end.clone().subtract(12, "month").toDate(),
         endDate
       };
     case "all":
       return {
-        startDate: end.subtract(maxSelectableDays - 1, "day").toDate(),
+        startDate: end.clone().subtract(maxSelectableDays - 1, "day").toDate(),
         endDate
       };
   }
 }
+function getDateRangeWithTimeFromInterval(interval, maxSelectableDays, timezone) {
+  const currentMoment = tz(timezone);
+  const currentDate = currentMoment.toDate();
+  switch (interval) {
+    case "today":
+      return {
+        startDate: currentMoment.clone().startOf("day").toDate(),
+        endDate: currentDate
+      };
+    case "yesterday":
+      return {
+        startDate: currentMoment.clone().subtract(1, "day").startOf("day").toDate(),
+        endDate: currentMoment.clone().subtract(1, "day").endOf("day").toDate()
+      };
+    case "thisWeekFromSunday":
+      return {
+        startDate: currentMoment.clone().day(0).startOf("day").toDate(),
+        endDate: currentDate
+      };
+    case "thisWeekFromMonday":
+      return {
+        startDate: currentMoment.clone().day(1).startOf("day").toDate(),
+        endDate: currentDate
+      };
+    case "thisMonth":
+      return {
+        startDate: currentMoment.clone().date(1).startOf("day").toDate(),
+        endDate: currentDate
+      };
+    case "thisYear":
+      return {
+        startDate: currentMoment.clone().month(0).date(1).startOf("day").toDate(),
+        endDate: currentDate
+      };
+    case "last7Days":
+      return {
+        startDate: currentMoment.clone().subtract(7, "days").toDate(),
+        endDate: currentDate
+      };
+    case "last30Days":
+      return {
+        startDate: currentMoment.clone().subtract(30, "day").toDate(),
+        endDate: currentDate
+      };
+    case "last90Days":
+      return {
+        startDate: currentMoment.clone().subtract(90, "day").toDate(),
+        endDate: currentDate
+      };
+    case "last12Months":
+      return {
+        startDate: currentMoment.clone().subtract(12, "month").toDate(),
+        endDate: currentDate
+      };
+    case "all":
+      return {
+        startDate: currentMoment.clone().subtract(maxSelectableDays - 1, "day").toDate(),
+        endDate: currentDate
+      };
+  }
+}
+function getDatesFromDateInterval(interval, maxSelectableDays, timezone, options) {
+  if (!options?.includeTime) {
+    return getDateRangeFromInterval(interval, maxSelectableDays, timezone);
+  }
+  return getDateRangeWithTimeFromInterval(
+    interval,
+    maxSelectableDays,
+    timezone
+  );
+}
 function getComparisonInterval(comparisonInterval, startSimpleDate, endSimpleDate, timezone, minDate) {
   const startMoment = tz(
     {
@@ -16202,7 +16273,10 @@ function dateToSimpleDate(date, timezone) {
     day: momentDate.date()
   };
 }
-function getDisplayEndDate(date, timezone) {
+function getDisplayEndDate(date, timezone, includeTime) {
+  if (includeTime) {
+    return tz(date, timezone).toDate();
+  }
   return tz(date, timezone).subtract(1, "day").toDate();
 }
 function applyTimeToDate(date, time) {
@@ -17669,6 +17743,32 @@ function isValidPhoneNumber(phone) {
   const phoneRegex = /^\+[1-9]\d{6,14}$/;
   return phoneRegex.test(phone) && getCountryCode(phone) !== "";
 }
+function getPhoneNumber(phone) {
+  const countryCode = getCountryCode(phone);
+  if (!countryCode) {
+    return phone;
+  }
+  return phone.substring(countryCode.length + 1);
+}
+function getCountryCodeWithPlus(phone) {
+  const countryCode = getCountryCode(phone);
+  if (!countryCode) {
+    return "";
+  }
+  return `+${countryCode}`;
+}
+function formatPhone(phone, format2) {
+  switch (format2) {
+    case "country":
+      return getCountryCodeWithPlus(phone);
+    case "phone": {
+      return getPhoneNumber(phone);
+    }
+    default: {
+      return `${getCountryCodeWithPlus(phone)} ${getPhoneNumber(phone)}`.trim();
+    }
+  }
+}
 
 // src/components/formatter/CompactNumberFormatter.tsx
 import { Fragment as Fragment15, jsx as jsx84 } from "react/jsx-runtime";
@@ -17726,17 +17826,22 @@ var DateFormatter = ({ date, format: format2 }) => {
 };
 var DateFormatter_default = DateFormatter;
 
+// src/components/formatter/PhoneFormatter.tsx
+import { Fragment as Fragment20, jsx as jsx89 } from "react/jsx-runtime";
+var PhoneFormatter = ({ phone, format: format2 }) => /* @__PURE__ */ jsx89(Fragment20, { children: formatPhone(phone, format2) });
+var PhoneFormatter_default = PhoneFormatter;
+
 // src/components/header/HeaderTitle.tsx
 import * as React43 from "react";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var HeaderTitle = ({ text }) => {
   const textElementRef = React43.useRef(null);
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     TextEllipsisTooltip_default,
     {
       title: text ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsx89(
+      children: /* @__PURE__ */ jsx90(
         Typography_default,
         {
           color: grey800,
@@ -17754,15 +17859,15 @@ var HeaderTitle_default = HeaderTitle;
 
 // src/components/header/HeaderSubtitle.tsx
 import * as React44 from "react";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var HeaderSubtitle = ({ text }) => {
   const textElementRef = React44.useRef(null);
-  return typeof text === "string" ? /* @__PURE__ */ jsx90(
+  return typeof text === "string" ? /* @__PURE__ */ jsx91(
     TextEllipsisTooltip_default,
     {
       title: text ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsx90(
+      children: /* @__PURE__ */ jsx91(
         Typography_default,
         {
           color: grey800,
@@ -17774,12 +17879,12 @@ var HeaderSubtitle = ({ text }) => {
         }
       )
     }
-  ) : /* @__PURE__ */ jsx90(Typography_default, { color: grey800, component: "div", variant: "body1", noWrap: true, children: text });
+  ) : /* @__PURE__ */ jsx91(Typography_default, { color: grey800, component: "div", variant: "body1", noWrap: true, children: text });
 };
 var HeaderSubtitle_default = HeaderSubtitle;
 
 // src/components/header/Header.tsx
-import { jsx as jsx91, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs40 } from "react/jsx-runtime";
 var Header = ({
   title,
   subtitle,
@@ -17787,7 +17892,7 @@ var Header = ({
   isElevated = false,
   actions,
   children
-}) => /* @__PURE__ */ jsx91(PageScrollContext.Consumer, { children: (value) => /* @__PURE__ */ jsx91(
+}) => /* @__PURE__ */ jsx92(PageScrollContext.Consumer, { children: (value) => /* @__PURE__ */ jsx92(
   Box_default2,
   {
     sx: {
@@ -17827,12 +17932,12 @@ var Header = ({
                   overflow: "clip"
                 },
                 children: [
-                  iconId && /* @__PURE__ */ jsx91(Avatar_default, { iconId, size: "L" }),
-                  /* @__PURE__ */ jsx91(HeaderTitle_default, { text: title })
+                  iconId && /* @__PURE__ */ jsx92(Avatar_default, { iconId, size: "L" }),
+                  /* @__PURE__ */ jsx92(HeaderTitle_default, { text: title })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx91(
+            /* @__PURE__ */ jsx92(
               Box_default2,
               {
                 sx: {
@@ -17848,7 +17953,7 @@ var Header = ({
           ]
         }
       ),
-      subtitle && /* @__PURE__ */ jsx91(
+      subtitle && /* @__PURE__ */ jsx92(
         Box_default2,
         {
           sx: {
@@ -17856,10 +17961,10 @@ var Header = ({
             ...iconId && { paddingLeft: "56px" },
             paddingBottom: "8px"
           },
-          children: /* @__PURE__ */ jsx91(HeaderSubtitle_default, { text: subtitle })
+          children: /* @__PURE__ */ jsx92(HeaderSubtitle_default, { text: subtitle })
         }
       ),
-      children && /* @__PURE__ */ jsx91(Box_default2, { children })
+      children && /* @__PURE__ */ jsx92(Box_default2, { children })
     ] })
   }
 ) });
@@ -17871,7 +17976,7 @@ import FilerobotImageEditor, {
   TABS,
   TOOLS
 } from "react-filerobot-image-editor";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var ImageEditor = ({
   imageUrl,
   maxWidth: maxWidth2,
@@ -18110,7 +18215,7 @@ var ImageEditor = ({
       document.head.removeChild(style3);
     };
   }, []);
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx93(
     Box_default2,
     {
       sx: {
@@ -18177,7 +18282,7 @@ var ImageEditor = ({
         },
         height: "100%"
       },
-      children: /* @__PURE__ */ jsx92(
+      children: /* @__PURE__ */ jsx93(
         FilerobotImageEditor,
         {
           source: imageUrl,
@@ -18297,7 +18402,7 @@ function useResizeObserver() {
 }
 
 // src/components/info/InfoBox.tsx
-import { jsx as jsx93, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs41 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: {
     borderLeft: `2px solid ${electricLavender}`,
@@ -18342,7 +18447,7 @@ var InfoBox = ({
         ...sx && { sx }
       },
       children: [
-        /* @__PURE__ */ jsx93(
+        /* @__PURE__ */ jsx94(
           Box_default2,
           {
             sx: !expanded && showExpandButton ? {
@@ -18360,7 +18465,7 @@ var InfoBox = ({
             children
           }
         ),
-        showExpandButton && /* @__PURE__ */ jsx93(
+        showExpandButton && /* @__PURE__ */ jsx94(
           IconButton_default,
           {
             iconId: expanded ? "chevron-up" : "chevron-down",
@@ -18379,7 +18484,7 @@ var InfoBox_default = InfoBox;
 // src/components/input/TextFieldContainer.tsx
 import * as React47 from "react";
 import { lighten } from "@mui/material";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var TextFieldContainer = React47.forwardRef(function TextFieldContainer2({
   children,
   variant = "default",
@@ -18394,7 +18499,7 @@ var TextFieldContainer = React47.forwardRef(function TextFieldContainer2({
   sx,
   "data-test": dataTest
 }, ref) {
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     Box_default2,
     {
       className: `Cn-TextFieldContainer ${className}`,
@@ -18484,7 +18589,7 @@ import { styled as styled6 } from "@mui/material";
 // src/components/input/InputLabel.tsx
 import * as React48 from "react";
 import { styled as styled4 } from "@mui/material";
-import { jsx as jsx95, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs42 } from "react/jsx-runtime";
 var severityColors = {
   info: grey900,
   error: errorMain
@@ -18510,7 +18615,7 @@ var InputLabel = React48.forwardRef(
         ref,
         children: [
           children,
-          infoText && /* @__PURE__ */ jsx95(Tooltip_default, { textVariant: "caption", title: infoText, children: /* @__PURE__ */ jsx95(
+          infoText && /* @__PURE__ */ jsx96(Tooltip_default, { textVariant: "caption", title: infoText, children: /* @__PURE__ */ jsx96(
             Icon_default,
             {
               id: "information-outline",
@@ -18532,7 +18637,7 @@ var InputLabel_default = InputLabel;
 // src/components/input/InputHelperText.tsx
 import { styled as styled5 } from "@mui/material";
 import * as React49 from "react";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var severityColors2 = {
   info: grey800,
   error: errorMain
@@ -18548,13 +18653,13 @@ var StyledDiv = styled5("div", {
 );
 var InputHelperText = React49.forwardRef(
   function InputLabel3({ severity = "info", ...rest }, ref) {
-    return /* @__PURE__ */ jsx96(StyledDiv, { ...rest, ref, severity });
+    return /* @__PURE__ */ jsx97(StyledDiv, { ...rest, ref, severity });
   }
 );
 var InputHelperText_default = InputHelperText;
 
 // src/components/input/TextField.tsx
-import { Fragment as Fragment20, jsx as jsx97, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx98, jsxs as jsxs43 } from "react/jsx-runtime";
 var commonInputStylesOptions = {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "typographyVariant"
 };
@@ -18695,7 +18800,7 @@ var TextField = React50.forwardRef(function TextField2({
               gap: "8px"
             },
             children: [
-              iconId && /* @__PURE__ */ jsx97(
+              iconId && /* @__PURE__ */ jsx98(
                 Icon_default,
                 {
                   id: iconId,
@@ -18708,7 +18813,7 @@ var TextField = React50.forwardRef(function TextField2({
                 }
               ),
               !groupElements && startAdornment,
-              multiline && /* @__PURE__ */ jsx97(
+              multiline && /* @__PURE__ */ jsx98(
                 StyledTextarea,
                 {
                   ref: ref || inputRef,
@@ -18742,7 +18847,7 @@ var TextField = React50.forwardRef(function TextField2({
                   ...restProps
                 }
               ),
-              !multiline && /* @__PURE__ */ jsx97(
+              !multiline && /* @__PURE__ */ jsx98(
                 StyledInput,
                 {
                   type,
@@ -18780,7 +18885,7 @@ var TextField = React50.forwardRef(function TextField2({
               gap: "8px"
             },
             children: [
-              existsClearButton && /* @__PURE__ */ jsx97(
+              existsClearButton && /* @__PURE__ */ jsx98(
                 IconButton_default,
                 {
                   size: "M",
@@ -18810,8 +18915,8 @@ var TextField = React50.forwardRef(function TextField2({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs43(Fragment20, { children: [
-    label && /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsxs43(Fragment21, { children: [
+    label && /* @__PURE__ */ jsx98(
       InputLabel_default,
       {
         htmlFor: customId ?? id,
@@ -18864,7 +18969,7 @@ var TextField = React50.forwardRef(function TextField2({
       }
     ),
     !groupElements && getTextFieldContainer(),
-    helperText && /* @__PURE__ */ jsx97(
+    helperText && /* @__PURE__ */ jsx98(
       InputHelperText_default,
       {
         severity: isError ? "error" : "info",
@@ -18879,7 +18984,7 @@ var TextField = React50.forwardRef(function TextField2({
 var TextField_default = TextField;
 
 // src/components/input/DebouncedTextField.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var DebouncedTextField = React51.forwardRef(function DebouncedTextField2({ value, onChange, debounce = 100, ...rest }, ref) {
   const [text, setText] = useState15(value);
   const onChangeDebounced = useDebouncedCallback(
@@ -18893,7 +18998,7 @@ var DebouncedTextField = React51.forwardRef(function DebouncedTextField2({ value
   useEffect10(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99(
     TextField_default,
     {
       value: text,
@@ -18918,7 +19023,7 @@ import { tz as tz4 } from "moment-timezone";
 
 // src/components/popover/Popover.tsx
 import MuiPopover from "@mui/material/Popover";
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var Popover = ({
   horizontalAlign = "center",
   anchorHorizontalOrigin = "center",
@@ -18926,7 +19031,7 @@ var Popover = ({
   anchorVerticalAlign = "bottom",
   centeredInScreen = false,
   ...props
-}) => /* @__PURE__ */ jsx99(
+}) => /* @__PURE__ */ jsx100(
   MuiPopover,
   {
     disableRestoreFocus: props.disableRestoreFocus,
@@ -18959,7 +19064,7 @@ var Popover_default = Popover;
 
 // src/components/popover/PopoverActions.tsx
 import { Stack as Stack6 } from "@mui/material";
-import { jsx as jsx100, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs44 } from "react/jsx-runtime";
 var PopoverActions = ({
   leftContent,
   rightContent,
@@ -18978,8 +19083,8 @@ var PopoverActions = ({
       ...sx
     },
     children: [
-      /* @__PURE__ */ jsx100("div", { children: leftContent }),
-      /* @__PURE__ */ jsx100("div", { children: rightContent })
+      /* @__PURE__ */ jsx101("div", { children: leftContent }),
+      /* @__PURE__ */ jsx101("div", { children: rightContent })
     ]
   }
 );
@@ -18997,7 +19102,7 @@ import { lighten as lighten2 } from "@mui/material";
 
 // src/components/input/CalendarDay.tsx
 import { useTheme as useTheme5 } from "@mui/material/styles";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
 var calendarDayButtonSize = 32;
 var CalendarDayButton = styled_default("button")({});
 var CalendarDay = ({
@@ -19015,7 +19120,7 @@ var CalendarDay = ({
   allowKeyboardNavigation = false
 }) => {
   const theme2 = useTheme5();
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(
     CalendarDayButton,
     {
       "data-testid": `calendar-day-${children}`,
@@ -19058,7 +19163,7 @@ var CalendarDay = ({
       },
       role: "button",
       onClick,
-      children: /* @__PURE__ */ jsx101(
+      children: /* @__PURE__ */ jsx102(
         Typography_default,
         {
           sx: {
@@ -19086,7 +19191,7 @@ var CalendarDay = ({
 var CalendarDay_default = CalendarDay;
 
 // src/components/input/CalendarMonth.tsx
-import { jsx as jsx102, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs45 } from "react/jsx-runtime";
 var bgColorLightCoefficient = 0.6;
 var CalendarMonth = ({
   minDate = null,
@@ -19264,7 +19369,7 @@ var CalendarMonth = ({
       },
       "data-testid": `calendar-month-${year}-${month}`,
       children: [
-        /* @__PURE__ */ jsx102(
+        /* @__PURE__ */ jsx103(
           Typography_default,
           {
             sx: {
@@ -19275,7 +19380,7 @@ var CalendarMonth = ({
                 textTransform: "uppercase"
               }
             },
-            children: /* @__PURE__ */ jsx102(
+            children: /* @__PURE__ */ jsx103(
               DateFormatter_default,
               {
                 date: firstDayOfMonth.toDate(),
@@ -19284,8 +19389,8 @@ var CalendarMonth = ({
             )
           }
         ),
-        isMonthInFullLine && indexOfDay > 0 && /* @__PURE__ */ jsx102("span", { style: { gridColumn: `span ${indexOfDay}` }, children: "\xA0" }),
-        dayList.map((day) => /* @__PURE__ */ jsx102(
+        isMonthInFullLine && indexOfDay > 0 && /* @__PURE__ */ jsx103("span", { style: { gridColumn: `span ${indexOfDay}` }, children: "\xA0" }),
+        dayList.map((day) => /* @__PURE__ */ jsx103(
           CalendarDay_default,
           {
             allowKeyboardNavigation,
@@ -19303,7 +19408,7 @@ var CalendarMonth_default = CalendarMonth;
 
 // src/components/input/DaysOfWeekRow.tsx
 import * as React53 from "react";
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var DaysOfWeekRow = () => {
   const { locale, timezone } = React53.useContext(IntlContext);
   const daysOfWeekLong = React53.useMemo(
@@ -19314,7 +19419,7 @@ var DaysOfWeekRow = () => {
     () => getWeekDayNamesForLocale(locale, "narrow", timezone),
     [locale, timezone]
   );
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx104(
     Stack_default,
     {
       direction: "row",
@@ -19324,7 +19429,7 @@ var DaysOfWeekRow = () => {
         backgroundColor: grey100,
         alignItems: "center"
       },
-      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx103(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx103(
+      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx104(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx104(
         Typography_default,
         {
           sx: {
@@ -19341,7 +19446,7 @@ var DaysOfWeekRow = () => {
 var DaysOfWeekRow_default = DaysOfWeekRow;
 
 // src/components/input/CalendarScrollPicker.tsx
-import { jsx as jsx104, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs46 } from "react/jsx-runtime";
 var CalendarScrollPicker = ({
   minDate,
   maxDate,
@@ -19366,7 +19471,7 @@ var CalendarScrollPicker = ({
   }) => {
     const month = (minDate.month + index) % 12;
     const year = Math.floor((minDate.month + index) / 12) + minDate.year;
-    return /* @__PURE__ */ jsx104(Box_default2, { sx: { ...style3, paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsx105(Box_default2, { sx: { ...style3, paddingLeft: "8px", boxSizing: "border-box" }, children: /* @__PURE__ */ jsx105(
       CalendarMonth_default,
       {
         minDate,
@@ -19391,14 +19496,14 @@ var CalendarScrollPicker = ({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsx104(DaysOfWeekRow_default, {}),
-        /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx105(DaysOfWeekRow_default, {}),
+        /* @__PURE__ */ jsx105(
           Box_default2,
           {
             sx: {
               flex: "1 1 0"
             },
-            children: /* @__PURE__ */ jsx104(AutoSizer3, { children: ({ height: height2, width: width2 }) => /* @__PURE__ */ jsx104(
+            children: /* @__PURE__ */ jsx105(AutoSizer3, { children: ({ height: height2, width: width2 }) => /* @__PURE__ */ jsx105(
               FixedSizeList,
               {
                 ref: listRefCallback,
@@ -19420,7 +19525,7 @@ var CalendarScrollPicker = ({
 var CalendarScrollPicker_default = CalendarScrollPicker;
 
 // src/components/input/DateIntervalPickerList.tsx
-import { jsx as jsx105, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs47 } from "react/jsx-runtime";
 var dateIntervals = {
   today: "TODAY",
   yesterday: "YESTERDAY",
@@ -19455,7 +19560,7 @@ var DateIntervalPickerList = ({
 }) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs47(List_default, { children: [
-    Object.keys(dateIntervals).filter((i) => maxSelectableDays > 90 || !isLongInterval(i)).filter((i) => !allowedIntervals || allowedIntervals.includes(i)).map((key) => /* @__PURE__ */ jsx105(
+    Object.keys(dateIntervals).filter((i) => maxSelectableDays > 90 || !isLongInterval(i)).filter((i) => !allowedIntervals || allowedIntervals.includes(i)).map((key) => /* @__PURE__ */ jsx106(
       ListItemButton_default,
       {
         text: t(
@@ -19467,13 +19572,13 @@ var DateIntervalPickerList = ({
       },
       key
     )),
-    allowCompare && /* @__PURE__ */ jsx105(Divider_default, {}),
-    allowCompare && /* @__PURE__ */ jsx105(
+    allowCompare && /* @__PURE__ */ jsx106(Divider_default, {}),
+    allowCompare && /* @__PURE__ */ jsx106(
       ListItem_default,
       {
         text: t("DATE_INTERVAL_PICKER.COMPARE"),
         typographyVariant: "body1",
-        endAdornment: /* @__PURE__ */ jsx105(
+        endAdornment: /* @__PURE__ */ jsx106(
           Switch_default,
           {
             checked: isComparing,
@@ -19484,7 +19589,7 @@ var DateIntervalPickerList = ({
     ),
     allowCompare && Object.keys(comparisonIntervals).filter(
       (i) => maxSelectableDays > 90 || !isLongComparisonInterval(i)
-    ).map((key) => /* @__PURE__ */ jsx105(
+    ).map((key) => /* @__PURE__ */ jsx106(
       ListItemButton_default,
       {
         disabled: !isComparing,
@@ -19510,14 +19615,14 @@ import { TimeField as MuiTimeField } from "@mui/x-date-pickers";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { tz as tz3 } from "moment-timezone";
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var ExtendedTextField = ({
   inputProps,
   ownerState,
   InputProps,
   error,
   ...rest
-}) => /* @__PURE__ */ jsx106(TextField_default, { ...inputProps, ...rest });
+}) => /* @__PURE__ */ jsx107(TextField_default, { ...inputProps, ...rest });
 var TimeField = function TimeField2({
   onChange,
   value,
@@ -19546,7 +19651,7 @@ var TimeField = function TimeField2({
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsx106(LocalizationProvider, { dateAdapter: AdapterMoment, children: /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(LocalizationProvider, { dateAdapter: AdapterMoment, children: /* @__PURE__ */ jsx107(
     MuiTimeField,
     {
       onChange: _onChange,
@@ -19565,7 +19670,7 @@ var TimeField = function TimeField2({
 var TimeField_default = TimeField;
 
 // src/components/input/DateIntervalPickerInputs.tsx
-import { jsx as jsx107, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs48 } from "react/jsx-runtime";
 var DateIntervalPickerInputs = ({
   startDate,
   startTime,
@@ -19596,7 +19701,7 @@ var DateIntervalPickerInputs = ({
     hourLabel,
     color: color3
   }) => /* @__PURE__ */ jsxs48(Stack7, { children: [
-    /* @__PURE__ */ jsx107(
+    /* @__PURE__ */ jsx108(
       TextField_default,
       {
         "data-testid": dataTestId,
@@ -19610,7 +19715,7 @@ var DateIntervalPickerInputs = ({
         activeColor: color3
       }
     ),
-    showTime && /* @__PURE__ */ jsx107(
+    showTime && /* @__PURE__ */ jsx108(
       TimeField_default,
       {
         activeColor: color3,
@@ -19654,7 +19759,7 @@ var DateIntervalPickerInputs = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx107(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
+    /* @__PURE__ */ jsx108(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
       Box_default2,
       {
         sx: {
@@ -19686,7 +19791,7 @@ var DateIntervalPickerInputs = ({
 var DateIntervalPickerInputs_default = DateIntervalPickerInputs;
 
 // src/components/input/DateIntervalPickerPopover.tsx
-import { jsx as jsx108, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs49 } from "react/jsx-runtime";
 var DateIntervalPickerPopover = ({
   interval,
   startDate,
@@ -19731,14 +19836,23 @@ var DateIntervalPickerPopover = ({
     const result = getDatesFromDateInterval(
       interval2,
       maxSelectableDays,
-      timezone
+      timezone,
+      { includeTime: !!showTime }
+    );
+    const displayEndDate2 = getDisplayEndDate(
+      result.endDate,
+      timezone,
+      !!showTime
     );
-    const displayEndDate2 = getDisplayEndDate(result.endDate, timezone);
     return {
       startDate: dateInputFormatter(result.startDate),
       endDate: dateInputFormatter(displayEndDate2),
       startSimpleDate: dateToSimpleDate(result.startDate, timezone),
-      endSimpleDate: dateToSimpleDate(displayEndDate2, timezone)
+      endSimpleDate: dateToSimpleDate(displayEndDate2, timezone),
+      startTime: result.startDate,
+      endTime: result.endDate,
+      comparisonStartTime: result.startDate,
+      comparisonEndTime: result.endDate
     };
   };
   const getStateFieldsForComparisonInterval = (comparisonInterval2, startSimpleDate, endSimpleDate) => {
@@ -19783,8 +19897,8 @@ var DateIntervalPickerPopover = ({
       )
     };
   };
-  const displayEndDate = getDisplayEndDate(endDate, timezone);
-  const displayComparisonEndDate = comparisonEndDate && getDisplayEndDate(comparisonEndDate, timezone);
+  const displayEndDate = getDisplayEndDate(endDate, timezone, !!showTime);
+  const displayComparisonEndDate = comparisonEndDate && getDisplayEndDate(comparisonEndDate, timezone, !!showTime);
   const initialState = {
     interval,
     highlightedInput: "startDate",
@@ -19820,7 +19934,7 @@ var DateIntervalPickerPopover = ({
     });
   };
   const handleApply = () => {
-    const parseEndDate = (dateString) => tz4(parseDate(dateString), timezone).add(1, "day").toDate();
+    const parseEndDate = (dateString) => showTime ? new Date(dateString) : tz4(parseDate(dateString), timezone).add(1, "day").toDate();
     onApply({
       interval: state.interval,
       startDate: applyTimeToDate(
@@ -19900,7 +20014,8 @@ var DateIntervalPickerPopover = ({
   const handleChangeTime = (value) => {
     setState({
       ...state,
-      [getTimePropertyName(state.highlightedInput)]: value
+      [getTimePropertyName(state.highlightedInput)]: value,
+      interval: "custom"
     });
   };
   const handleFocusInputDate = (inputDate) => {
@@ -20092,7 +20207,7 @@ var DateIntervalPickerPopover = ({
           maxWidth: `${250 + 8 * 2 + 32 * 7}px`
         },
         children: [
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             Box_default2,
             {
               sx: {
@@ -20104,7 +20219,7 @@ var DateIntervalPickerPopover = ({
                 overflowY: "auto"
               },
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx109(
                 DateIntervalPickerList_default,
                 {
                   allowCompare,
@@ -20120,13 +20235,13 @@ var DateIntervalPickerPopover = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             Box_default2,
             {
               sx: {
                 gridArea: "inputs"
               },
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx109(
                 DateIntervalPickerInputs_default,
                 {
                   color: color2,
@@ -20151,13 +20266,13 @@ var DateIntervalPickerPopover = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             Box_default2,
             {
               sx: {
                 gridArea: "calendar"
               },
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx109(
                 CalendarScrollPicker_default,
                 {
                   minDate: {
@@ -20196,24 +20311,26 @@ var DateIntervalPickerPopover = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx108(
+    /* @__PURE__ */ jsx109(
       PopoverActions_default,
       {
-        leftContent: /* @__PURE__ */ jsx108(
+        sx: { padding: "16px 24px" },
+        leftContent: /* @__PURE__ */ jsx109(
           Button_default,
           {
-            variant: "text",
-            onClick: handleApply,
-            text: t("DATE_INTERVAL_PICKER.APPLY"),
-            disabled: isApplyButtonDisabled()
+            variant: "contained",
+            color: "white",
+            onClick: handleCancel,
+            text: t("DATE_INTERVAL_PICKER.CANCEL")
           }
         ),
-        rightContent: /* @__PURE__ */ jsx108(
+        rightContent: /* @__PURE__ */ jsx109(
           Button_default,
           {
-            variant: "text",
-            onClick: handleCancel,
-            text: t("DATE_INTERVAL_PICKER.CANCEL")
+            variant: "contained",
+            onClick: handleApply,
+            text: t("DATE_INTERVAL_PICKER.APPLY"),
+            disabled: isApplyButtonDisabled()
           }
         )
       }
@@ -20224,7 +20341,7 @@ var DateIntervalPickerPopover_default = DateIntervalPickerPopover;
 
 // src/components/input/DateIntervalPicker.tsx
 import { tz as tz5 } from "moment-timezone";
-import { jsx as jsx109, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs50 } from "react/jsx-runtime";
 var DateIntervalPicker = ({
   interval,
   startDate,
@@ -20262,7 +20379,7 @@ var DateIntervalPicker = ({
     }
     setAnchorEl(null);
   };
-  const displayEndDate = getDisplayEndDate(endDate, timezone);
+  const displayEndDate = getDisplayEndDate(endDate, timezone, !!showTime);
   const isEndDateVisible = !isSameDate(startDate, displayEndDate);
   const internalMaxDate = maxDate ?? tz5(timezone).toDate();
   const internalMinDate = minDate ?? tz5(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate();
@@ -20282,7 +20399,7 @@ var DateIntervalPicker = ({
         disabled,
         onClick: handleButtonClick,
         children: [
-          /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx110(
             "span",
             {
               style: {
@@ -20292,7 +20409,7 @@ var DateIntervalPicker = ({
                 borderRadius: "2px",
                 alignSelf: "center"
               },
-              children: /* @__PURE__ */ jsx109(Typography_default, { variant: "body2", children: t(
+              children: /* @__PURE__ */ jsx110(Typography_default, { variant: "body2", children: t(
                 `DATE_INTERVAL_PICKER.DATE_INTERVALS.${dateIntervals[interval]}`
               ) })
             }
@@ -20307,7 +20424,7 @@ var DateIntervalPicker = ({
               },
               children: [
                 /* @__PURE__ */ jsxs50("div", { children: [
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx110(
                     DateFormatter_default,
                     {
                       date: startDate,
@@ -20317,7 +20434,7 @@ var DateIntervalPicker = ({
                     }
                   ),
                   isEndDateVisible && " - ",
-                  isEndDateVisible && /* @__PURE__ */ jsx109(
+                  isEndDateVisible && /* @__PURE__ */ jsx110(
                     DateFormatter_default,
                     {
                       date: displayEndDate,
@@ -20338,7 +20455,7 @@ var DateIntervalPicker = ({
                     children: [
                       t("DATE_INTERVAL_PICKER.COMPARE"),
                       ": ",
-                      /* @__PURE__ */ jsx109(
+                      /* @__PURE__ */ jsx110(
                         DateFormatter_default,
                         {
                           date: comparisonStartDate,
@@ -20348,7 +20465,7 @@ var DateIntervalPicker = ({
                         }
                       ),
                       " - ",
-                      /* @__PURE__ */ jsx109(
+                      /* @__PURE__ */ jsx110(
                         DateFormatter_default,
                         {
                           date: comparisonEndDate,
@@ -20363,11 +20480,11 @@ var DateIntervalPicker = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx109(Icon_default, { id: "menu-down", sx: { color: grey400 } })
+          /* @__PURE__ */ jsx110(Icon_default, { id: "menu-down", sx: { color: grey400 } })
         ]
       }
     ),
-    anchorEl !== null && /* @__PURE__ */ jsx109(
+    anchorEl !== null && /* @__PURE__ */ jsx110(
       DateIntervalPickerPopover_default,
       {
         ...{
@@ -20400,7 +20517,7 @@ var DateIntervalPicker_default = DateIntervalPicker;
 // src/components/input/SelectPopoverItem.tsx
 import { Grid as Grid2, Stack as Stack8 } from "@mui/material";
 import { lighten as lighten3 } from "@mui/material";
-import { Fragment as Fragment21, jsx as jsx110, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx111, jsxs as jsxs51 } from "react/jsx-runtime";
 var bgColorLightCoefficient2 = 0.9;
 var SelectPopoverItem = ({
   id,
@@ -20414,7 +20531,7 @@ var SelectPopoverItem = ({
   tooltip,
   isLoadingSubtitle2,
   onClick
-}) => /* @__PURE__ */ jsx110(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx110(
+}) => /* @__PURE__ */ jsx111(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx111(
   Grid2,
   {
     size: {
@@ -20448,7 +20565,7 @@ var SelectPopoverItem = ({
                 boxSizing: "border-box"
               },
               children: [
-                /* @__PURE__ */ jsx110(
+                /* @__PURE__ */ jsx111(
                   TextEllipsis_default,
                   {
                     color: Colors_exports.grey800,
@@ -20457,8 +20574,8 @@ var SelectPopoverItem = ({
                       cursor: disabled ? "default" : "pointer"
                     },
                     typographyVariant: "body1",
-                    text: /* @__PURE__ */ jsxs51(Fragment21, { children: [
-                      iconId && /* @__PURE__ */ jsx110(
+                    text: /* @__PURE__ */ jsxs51(Fragment22, { children: [
+                      iconId && /* @__PURE__ */ jsx111(
                         Icon_default,
                         {
                           id: iconId,
@@ -20476,7 +20593,7 @@ var SelectPopoverItem = ({
                     ] })
                   }
                 ),
-                subtitle1 && /* @__PURE__ */ jsx110(
+                subtitle1 && /* @__PURE__ */ jsx111(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20486,7 +20603,7 @@ var SelectPopoverItem = ({
                     children: subtitle1
                   }
                 ),
-                isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                isLoadingSubtitle2 && /* @__PURE__ */ jsx111(
                   Skeleton_default,
                   {
                     variant: "text",
@@ -20498,7 +20615,7 @@ var SelectPopoverItem = ({
                     }
                   }
                 ),
-                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx111(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20511,7 +20628,7 @@ var SelectPopoverItem = ({
               ]
             }
           ),
-          chipText && /* @__PURE__ */ jsx110(Box_default2, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx110(
+          chipText && /* @__PURE__ */ jsx111(Box_default2, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx111(
             Chip_default,
             {
               label: chipText,
@@ -20542,7 +20659,7 @@ import MuiSelect from "@mui/material/Select";
 import InputBase from "@mui/material/InputBase";
 import { FixedSizeList as FixedSizeList2 } from "react-window";
 import AutoSizer4 from "react-virtualized-auto-sizer";
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var BootstrapInput = styled7(InputBase)(() => ({
   boxShadow: shadows[0],
   borderRadius: "16px",
@@ -20573,7 +20690,7 @@ var BootstrapInput = styled7(InputBase)(() => ({
     borderColor: grey800
   }
 }));
-var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx111(
+var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx112(
   Icon_default,
   {
     id: "chevron-down",
@@ -20591,7 +20708,7 @@ var SelectOption = ({
   selected,
   colors,
   ...rest
-}) => /* @__PURE__ */ jsx111(
+}) => /* @__PURE__ */ jsx112(
   ListItemButton_default,
   {
     role: "option",
@@ -20658,7 +20775,7 @@ var Select = function Select2({
   }) => {
     const { value: currentValue, label, ...rest2 } = options[index];
     const isSelected = value === currentValue;
-    return /* @__PURE__ */ jsx111(
+    return /* @__PURE__ */ jsx112(
       ListItemButton_default,
       {
         text: label ?? currentValue?.toString() ?? "",
@@ -20689,7 +20806,7 @@ var Select = function Select2({
       currentValue ?? ""
     );
   };
-  const getVirtualizedSelect = () => /* @__PURE__ */ jsx111(
+  const getVirtualizedSelect = () => /* @__PURE__ */ jsx112(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20725,8 +20842,8 @@ var Select = function Select2({
       displayEmpty: true,
       variant: "standard",
       value,
-      IconComponent: () => /* @__PURE__ */ jsx111(ChevronIcon, { disabled: rest.disabled }),
-      input: /* @__PURE__ */ jsx111(BootstrapInput, { placeholder }),
+      IconComponent: () => /* @__PURE__ */ jsx112(ChevronIcon, { disabled: rest.disabled }),
+      input: /* @__PURE__ */ jsx112(BootstrapInput, { placeholder }),
       onOpen: () => {
         setOpen(true);
         onOpen && onOpen();
@@ -20742,7 +20859,7 @@ var Select = function Select2({
           return renderValue(value2, options);
         }
         if (!value2) {
-          return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
+          return /* @__PURE__ */ jsx112("span", { style: { color: grey900 }, children: placeholder });
         }
         return options.find((o) => o.value === value2)?.label ?? value2;
       },
@@ -20775,7 +20892,7 @@ var Select = function Select2({
           }
         }
       },
-      children: /* @__PURE__ */ jsx111(AutoSizer4, { disableWidth: true, children: ({ height: height2 }) => /* @__PURE__ */ jsx111(
+      children: /* @__PURE__ */ jsx112(AutoSizer4, { disableWidth: true, children: ({ height: height2 }) => /* @__PURE__ */ jsx112(
         FixedSizeList2,
         {
           height: height2,
@@ -20789,7 +20906,7 @@ var Select = function Select2({
       ) })
     }
   );
-  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx111(
+  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx112(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20829,9 +20946,9 @@ var Select = function Select2({
       },
       multiple,
       value,
-      IconComponent: () => /* @__PURE__ */ jsx111(ChevronIcon, { disabled: rest.disabled }),
+      IconComponent: () => /* @__PURE__ */ jsx112(ChevronIcon, { disabled: rest.disabled }),
       open,
-      input: /* @__PURE__ */ jsx111(BootstrapInput, { placeholder }),
+      input: /* @__PURE__ */ jsx112(BootstrapInput, { placeholder }),
       onOpen: () => {
         setOpen(true);
         onOpen && onOpen();
@@ -20847,7 +20964,7 @@ var Select = function Select2({
         }
         if (Array.isArray(value2)) {
           if (value2.length === 0) {
-            return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx112("span", { style: { color: grey900 }, children: placeholder });
           } else {
             return value2.map((v) => {
               const option = options.find((o) => o.value === v);
@@ -20856,7 +20973,7 @@ var Select = function Select2({
           }
         } else {
           if (!value2) {
-            return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx112("span", { style: { color: grey900 }, children: placeholder });
           }
           return options.find((o) => o.value === value2)?.label ?? value2;
         }
@@ -20881,7 +20998,7 @@ var Select = function Select2({
         }
       },
       ...rest,
-      children: children ?? options.map(({ label, value: value2, ...rest2 }) => /* @__PURE__ */ jsx111(
+      children: children ?? options.map(({ label, value: value2, ...rest2 }) => /* @__PURE__ */ jsx112(
         SelectOption,
         {
           label: label ?? value2?.toString() ?? "",
@@ -20898,7 +21015,7 @@ var Select = function Select2({
 var Select_default = React58.forwardRef(Select);
 
 // src/components/input/TimezoneSelector.tsx
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var TimezoneSelector = ({
   initialTimezone,
   onTimezoneChange
@@ -20909,7 +21026,7 @@ var TimezoneSelector = ({
     onTimezoneChange(timezone);
   };
   const timeZones = moment2.tz.names();
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx113(
     Select_default,
     {
       value: selectedTimezone,
@@ -20923,7 +21040,7 @@ var TimezoneSelector_default = TimezoneSelector;
 
 // src/components/input/DaysOfWeekPicker.tsx
 import * as React60 from "react";
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
 var DaysOfWeekPicker = ({ value, onChange }) => {
   const { locale, timezone } = React60.useContext(IntlContext);
   const daysOfWeekLong = React60.useMemo(
@@ -20943,7 +21060,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
     "saturday",
     "sunday"
   ];
-  return /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx114(
     Stack_default,
     {
       direction: "row",
@@ -20952,7 +21069,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
         height: "34px",
         alignItems: "center"
       },
-      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx113("div", { style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx113(
+      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx114("div", { style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx114(
         ToggleButton_default,
         {
           sx: {
@@ -20975,7 +21092,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
               onChange(value.concat([currentValue]));
             }
           },
-          children: /* @__PURE__ */ jsx113(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx113("span", { children: day }) }, index)
+          children: /* @__PURE__ */ jsx114(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx114("span", { children: day }) }, index)
         }
       ) }, index))
     }
@@ -20988,7 +21105,7 @@ import * as React61 from "react";
 import GradientColorPicker, {
   useColorPicker
 } from "react-best-gradient-color-picker";
-import { Fragment as Fragment22, jsx as jsx114, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx115, jsxs as jsxs52 } from "react/jsx-runtime";
 var colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^rgba?\((\d{1,3}), {0,1}(\d{1,3}), {0,1}(\d{1,3})(, {0,1}([01]|0?\.\d+))?\)$/;
 var isValidColor = (color2) => colorRegex.test(color2);
 var colorPickerDefaultColors = [
@@ -21059,7 +21176,7 @@ var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
       return hex.length === 1 ? "0" + hex : hex;
     }).join("");
   };
-  const iconColor = /* @__PURE__ */ jsx114(
+  const iconColor = /* @__PURE__ */ jsx115(
     IconButton_default,
     {
       iconId: value ? "color-square" : "transparent",
@@ -21081,8 +21198,8 @@ var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
       handleColorChange(internalPickerValue);
     }
   }, [value, internalPickerValue, onChange, isValidPickerChange, valueToHex]);
-  return /* @__PURE__ */ jsxs52(Fragment22, { children: [
-    /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsxs52(Fragment23, { children: [
+    /* @__PURE__ */ jsx115(
       TextField_default,
       {
         value: textFieldValue,
@@ -21107,7 +21224,7 @@ var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
         ref
       }
     ),
-    /* @__PURE__ */ jsx114(
+    /* @__PURE__ */ jsx115(
       Popover_default,
       {
         anchorEl,
@@ -21116,7 +21233,7 @@ var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
         onMouseUp: () => {
           setValidPickerChange(true);
         },
-        children: /* @__PURE__ */ jsx114(
+        children: /* @__PURE__ */ jsx115(
           Box_default2,
           {
             className: "Cn-Color-Gradient-Box",
@@ -21160,7 +21277,7 @@ var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
                 fontFamily: "Source Sans Pro, sans-serif"
               }
             },
-            children: /* @__PURE__ */ jsx114(
+            children: /* @__PURE__ */ jsx115(
               GradientColorPicker,
               {
                 className: "Cn-Color-Gradient-Picker",
@@ -21191,7 +21308,7 @@ var ColorPicker_default = ColorPicker;
 
 // src/components/input/UploadClickableArea.tsx
 import { Box as Box3 } from "@mui/material";
-import { jsx as jsx115, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs53 } from "react/jsx-runtime";
 var UploadClickableArea = ({
   accept,
   onFilesChanged,
@@ -21205,7 +21322,7 @@ var UploadClickableArea = ({
       display: "inline-block"
     },
     children: [
-      /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsx116(
         "input",
         {
           type: "file",
@@ -21223,8 +21340,8 @@ var UploadClickableArea_default = UploadClickableArea;
 // src/components/input/CategorizedPicker.tsx
 import React62 from "react";
 import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack9 } from "@mui/material";
-import { Fragment as Fragment23, jsx as jsx116, jsxs as jsxs54 } from "react/jsx-runtime";
-var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx116(
+import { Fragment as Fragment24, jsx as jsx117, jsxs as jsxs54 } from "react/jsx-runtime";
+var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx117(
   Icon_default,
   {
     id: "chevron-down",
@@ -21319,8 +21436,8 @@ var CategorizedPicker = function CategorizedPicker2({
       setSelectedCategory(filteredSelectedCategory);
     }
   }, [filteredCategories, selectedCategory]);
-  return /* @__PURE__ */ jsxs54(Fragment23, { children: [
-    /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsxs54(Fragment24, { children: [
+    /* @__PURE__ */ jsx117(
       Select3,
       {
         ref: anchorRef,
@@ -21335,7 +21452,7 @@ var CategorizedPicker = function CategorizedPicker2({
         value: value?.name || "",
         displayEmpty: true,
         disabled,
-        input: /* @__PURE__ */ jsx116(
+        input: /* @__PURE__ */ jsx117(
           BootstrapInput,
           {
             sx: {
@@ -21344,7 +21461,7 @@ var CategorizedPicker = function CategorizedPicker2({
           }
         ),
         renderValue: (value2) => value2 || placeholder,
-        IconComponent: () => /* @__PURE__ */ jsx116(ChevronIcon2, { disabled }),
+        IconComponent: () => /* @__PURE__ */ jsx117(ChevronIcon2, { disabled }),
         onClick: !disabled ? (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -21352,10 +21469,10 @@ var CategorizedPicker = function CategorizedPicker2({
         } : void 0,
         open: false,
         "data-testid": dataTestId,
-        children: options.map((option) => /* @__PURE__ */ jsx116("option", { value: option.name }, option.id))
+        children: options.map((option) => /* @__PURE__ */ jsx117("option", { value: option.name }, option.id))
       }
     ),
-    /* @__PURE__ */ jsx116(
+    /* @__PURE__ */ jsx117(
       Popover2,
       {
         anchorEl: anchorRef.current,
@@ -21377,7 +21494,7 @@ var CategorizedPicker = function CategorizedPicker2({
           }
         },
         children: /* @__PURE__ */ jsxs54(Grid3, { container: true, children: [
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx117(
             Grid3,
             {
               size: {
@@ -21385,7 +21502,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               padding: "8px",
               borderBottom: `1px solid ${grey200}`,
-              children: /* @__PURE__ */ jsx116(
+              children: /* @__PURE__ */ jsx117(
                 DebouncedTextField_default,
                 {
                   placeholder: t(
@@ -21393,12 +21510,12 @@ var CategorizedPicker = function CategorizedPicker2({
                   ),
                   value: search,
                   onChange: onTypeSearch,
-                  startAdornment: /* @__PURE__ */ jsx116(Icon_default, { id: "magnify" })
+                  startAdornment: /* @__PURE__ */ jsx117(Icon_default, { id: "magnify" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx117(
             Grid3,
             {
               size: {
@@ -21407,14 +21524,14 @@ var CategorizedPicker = function CategorizedPicker2({
               sx: { borderRight: `1px solid ${grey200}` },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx116(Stack9, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx116(
+              children: /* @__PURE__ */ jsx117(Stack9, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx117(
                 ListItemButton_default,
                 {
                   selected: selectedCategory === category,
                   onClick: () => {
                     setSelectedCategory(category);
                   },
-                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx116(
+                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx117(
                     Icon_default,
                     {
                       id: "menu-right",
@@ -21422,10 +21539,10 @@ var CategorizedPicker = function CategorizedPicker2({
                     }
                   ) : void 0,
                   buttonDataTest: dataTestId ? dataTestId + "-category-" + idx : void 0,
-                  children: /* @__PURE__ */ jsx116(
+                  children: /* @__PURE__ */ jsx117(
                     TextEllipsis_default,
                     {
-                      text: /* @__PURE__ */ jsx116(
+                      text: /* @__PURE__ */ jsx117(
                         TextMarker_default,
                         {
                           searchText: search,
@@ -21443,7 +21560,7 @@ var CategorizedPicker = function CategorizedPicker2({
               )) })
             }
           ),
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx117(
             Grid3,
             {
               size: {
@@ -21451,7 +21568,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx116(Stack9, { children: /* @__PURE__ */ jsx116(Stack9, { children: !selectedCategory ? /* @__PURE__ */ jsx116(Stack9, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx116(
+              children: /* @__PURE__ */ jsx117(Stack9, { children: /* @__PURE__ */ jsx117(Stack9, { children: !selectedCategory ? /* @__PURE__ */ jsx117(Stack9, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx117(
                 Typography_default,
                 {
                   variant: "body2",
@@ -21463,7 +21580,7 @@ var CategorizedPicker = function CategorizedPicker2({
                   )
                 }
               ) }) : selectedCategory.categoryOptions.map(
-                (option, idx) => /* @__PURE__ */ jsx116(
+                (option, idx) => /* @__PURE__ */ jsx117(
                   ListItemButton_default,
                   {
                     selected: value?.id === option.id,
@@ -21472,10 +21589,10 @@ var CategorizedPicker = function CategorizedPicker2({
                       closePopover();
                     },
                     buttonDataTest: dataTestId ? dataTestId + "-option-" + idx : void 0,
-                    children: /* @__PURE__ */ jsx116(
+                    children: /* @__PURE__ */ jsx117(
                       TextEllipsis_default,
                       {
-                        text: /* @__PURE__ */ jsx116(
+                        text: /* @__PURE__ */ jsx117(
                           TextMarker_default,
                           {
                             searchText: search,
@@ -21508,7 +21625,7 @@ import * as React63 from "react";
 import { Grid as Grid4, Stack as Stack10 } from "@mui/material";
 import { useState as useState22 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { jsx as jsx117, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs55 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
   selectedColor: Colors_exports.primaryMain,
   disabledColor: ""
@@ -21653,14 +21770,14 @@ var SelectPopover = function SelectPopover2({
       anchorEl,
       disableRestoreFocus,
       children: [
-        /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsx118(
           Box_default2,
           {
             sx: {
               borderBottom: `1px solid ${Colors_exports.grey200}`,
               padding: "8px"
             },
-            children: /* @__PURE__ */ jsx117(
+            children: /* @__PURE__ */ jsx118(
               DebouncedTextField_default,
               {
                 iconId: "magnify",
@@ -21675,7 +21792,7 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsx118(
           InfiniteScroll,
           {
             height: 300,
@@ -21737,7 +21854,7 @@ var SelectPopover = function SelectPopover2({
                       onItemSelected
                     ) : getItemElement(item, onItemSelected)
                   ),
-                  isLoading && /* @__PURE__ */ jsx117(
+                  isLoading && /* @__PURE__ */ jsx118(
                     Skeleton_default,
                     {
                       variant: "text",
@@ -21750,13 +21867,13 @@ var SelectPopover = function SelectPopover2({
                       }
                     }
                   ),
-                  !isLoading && currentItems.length === 0 ? typeof emptyListPlaceholder === "string" ? /* @__PURE__ */ jsx117(
+                  !isLoading && currentItems.length === 0 ? typeof emptyListPlaceholder === "string" ? /* @__PURE__ */ jsx118(
                     Stack10,
                     {
                       alignItems: "center",
                       justifyContent: "center",
                       width: "100%",
-                      children: /* @__PURE__ */ jsx117(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
+                      children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
                     }
                   ) : emptyListPlaceholder : ""
                 ]
@@ -21764,11 +21881,11 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsx118(
           PopoverActions_default,
           {
             sx: { padding: "16px 24px" },
-            leftContent: /* @__PURE__ */ jsx117(
+            leftContent: /* @__PURE__ */ jsx118(
               Button_default,
               {
                 variant: "contained",
@@ -21778,7 +21895,7 @@ var SelectPopover = function SelectPopover2({
                 onClick: closePopover
               }
             ),
-            rightContent: /* @__PURE__ */ jsx117(
+            rightContent: /* @__PURE__ */ jsx118(
               Button_default,
               {
                 variant: "contained",
@@ -21802,7 +21919,7 @@ var SelectPopover = function SelectPopover2({
   );
 };
 function getItemElement(item, onItemClick) {
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx118(
     SelectPopoverItem_default,
     {
       id: item.id,
@@ -21831,7 +21948,7 @@ var arraysEqual = (a, b) => {
 var SelectPopover_default = SelectPopover;
 
 // src/components/input/ItemSelector.tsx
-import { Fragment as Fragment24, jsx as jsx118, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx119, jsxs as jsxs56 } from "react/jsx-runtime";
 var ItemSelector = function ItemSelector2({
   items,
   selectedItems,
@@ -21885,7 +22002,7 @@ var ItemSelector = function ItemSelector2({
     item
   }) => {
     const [ref, { contentWidth: width2 }] = useResizeObserver();
-    return /* @__PURE__ */ jsx118(
+    return /* @__PURE__ */ jsx119(
       Chip_default,
       {
         ref,
@@ -21915,8 +22032,8 @@ var ItemSelector = function ItemSelector2({
     const selectedItem = selectedItems[0]?.id;
     return selectedItem ? [selectedItem] : "";
   };
-  return /* @__PURE__ */ jsxs56(Fragment24, { children: [
-    /* @__PURE__ */ jsx118(
+  return /* @__PURE__ */ jsxs56(Fragment25, { children: [
+    /* @__PURE__ */ jsx119(
       Select_default,
       {
         ref: selectRef,
@@ -21932,17 +22049,17 @@ var ItemSelector = function ItemSelector2({
         renderValue: (value) => {
           let component;
           if (!value || !Array.isArray(value) || value.length === 0) {
-            component = /* @__PURE__ */ jsxs56(Fragment24, { children: [
-              /* @__PURE__ */ jsx118(
+            component = /* @__PURE__ */ jsxs56(Fragment25, { children: [
+              /* @__PURE__ */ jsx119(
                 Stack_default,
                 {
                   direction: "row",
                   flexWrap: "wrap",
                   padding: "6px 0",
-                  children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", color: grey600, children: placeholder })
+                  children: /* @__PURE__ */ jsx119(Typography_default, { variant: "body2", color: grey600, children: placeholder })
                 }
               ),
-              /* @__PURE__ */ jsx118(
+              /* @__PURE__ */ jsx119(
                 Divider_default,
                 {
                   variant: "middle",
@@ -21952,7 +22069,7 @@ var ItemSelector = function ItemSelector2({
               )
             ] });
           } else {
-            component = /* @__PURE__ */ jsxs56(Fragment24, { children: [
+            component = /* @__PURE__ */ jsxs56(Fragment25, { children: [
               /* @__PURE__ */ jsxs56(
                 Stack_default,
                 {
@@ -21967,7 +22084,7 @@ var ItemSelector = function ItemSelector2({
                       const item = selectedItems.find(
                         (i) => i.id === id
                       );
-                      return item ? /* @__PURE__ */ jsx118(
+                      return item ? /* @__PURE__ */ jsx119(
                         ItemChip,
                         {
                           item: {
@@ -21976,14 +22093,14 @@ var ItemSelector = function ItemSelector2({
                           }
                         },
                         id
-                      ) : /* @__PURE__ */ jsx118(Fragment24, {});
+                      ) : /* @__PURE__ */ jsx119(Fragment25, {});
                     }),
-                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx118(
+                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx119(
                       Tooltip_default,
                       {
                         interactive: true,
                         variant: "white",
-                        title: /* @__PURE__ */ jsx118(
+                        title: /* @__PURE__ */ jsx119(
                           Stack_default,
                           {
                             direction: "row",
@@ -22000,24 +22117,24 @@ var ItemSelector = function ItemSelector2({
                               const item = selectedItems.find(
                                 (i) => i.id === id
                               );
-                              return item ? /* @__PURE__ */ jsx118(
+                              return item ? /* @__PURE__ */ jsx119(
                                 ItemChip,
                                 {
                                   item
                                 },
                                 id
-                              ) : /* @__PURE__ */ jsx118(Fragment24, {});
+                              ) : /* @__PURE__ */ jsx119(Fragment25, {});
                             })
                           }
                         ),
-                        children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
+                        children: /* @__PURE__ */ jsx119(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
                       }
                     ) : void 0
                   ]
                 }
               ),
               !disabled && /* @__PURE__ */ jsxs56(Stack_default, { direction: "row", children: [
-                /* @__PURE__ */ jsx118(
+                /* @__PURE__ */ jsx119(
                   IconButton_default,
                   {
                     iconId: "close",
@@ -22035,7 +22152,7 @@ var ItemSelector = function ItemSelector2({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx118(
+                /* @__PURE__ */ jsx119(
                   Divider_default,
                   {
                     variant: "middle",
@@ -22046,7 +22163,7 @@ var ItemSelector = function ItemSelector2({
               ] })
             ] });
           }
-          return /* @__PURE__ */ jsx118(
+          return /* @__PURE__ */ jsx119(
             Stack_default,
             {
               direction: "row",
@@ -22068,8 +22185,8 @@ var ItemSelector = function ItemSelector2({
         }
       }
     ),
-    helperText && /* @__PURE__ */ jsx118(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
-    /* @__PURE__ */ jsx118(
+    helperText && /* @__PURE__ */ jsx119(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
+    /* @__PURE__ */ jsx119(
       SelectPopover_default,
       {
         items: items.map((item) => {
@@ -22134,7 +22251,7 @@ var map = {
 var toDiacriticInsensitiveString = (input) => Array.from(input).map((char) => map[char] ? `[${map[char]}]` : char).join("");
 
 // src/components/input/Autocomplete.tsx
-import { Fragment as Fragment25, jsx as jsx119, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx120, jsxs as jsxs57 } from "react/jsx-runtime";
 var AUTOCOMPLETE_ITEM_HEIGHT = 44;
 var Autocomplete = function Autocomplete2({
   variant = "default",
@@ -22330,7 +22447,7 @@ var Autocomplete = function Autocomplete2({
     style: style3
   }) => {
     const option = filteredOptions[index];
-    return /* @__PURE__ */ jsx119(
+    return /* @__PURE__ */ jsx120(
       ListItemButton_default,
       {
         selected: index === selectedIndex,
@@ -22339,7 +22456,7 @@ var Autocomplete = function Autocomplete2({
         sx: style3,
         color: Array.isArray(value) && value.includes(option.id) ? "primary" : void 0,
         text: getText(option),
-        endAdornment: multiple && (options.some((elem) => elem.id === option.id) ? Array.isArray(value) && value.includes(option.id) && /* @__PURE__ */ jsx119(Icon_default, { sx: { color: primaryMain }, id: "check" }) : /* @__PURE__ */ jsx119(
+        endAdornment: multiple && (options.some((elem) => elem.id === option.id) ? Array.isArray(value) && value.includes(option.id) && /* @__PURE__ */ jsx120(Icon_default, { sx: { color: primaryMain }, id: "check" }) : /* @__PURE__ */ jsx120(
           Icon_default,
           {
             id: Array.isArray(value) && value.includes(option.id) ? "close" : "plus"
@@ -22351,8 +22468,8 @@ var Autocomplete = function Autocomplete2({
       option.id
     );
   };
-  return /* @__PURE__ */ jsxs57(Fragment25, { children: [
-    /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsxs57(Fragment26, { children: [
+    /* @__PURE__ */ jsx120(
       DebouncedTextField_default,
       {
         ref: ref ?? inputRef,
@@ -22442,7 +22559,7 @@ var Autocomplete = function Autocomplete2({
               alignItems: "center"
             },
             children: [
-              value.slice(0, limitValueTags || value.length).map((id) => /* @__PURE__ */ jsx119(
+              value.slice(0, limitValueTags || value.length).map((id) => /* @__PURE__ */ jsx120(
                 Chip_default,
                 {
                   label: (renderLabel ?? _renderLabel)(
@@ -22462,12 +22579,12 @@ var Autocomplete = function Autocomplete2({
                 },
                 id
               )),
-              limitValueTags && value.length - limitValueTags > 0 ? /* @__PURE__ */ jsx119(
+              limitValueTags && value.length - limitValueTags > 0 ? /* @__PURE__ */ jsx120(
                 Tooltip_default,
                 {
                   interactive: true,
                   variant: "white",
-                  title: /* @__PURE__ */ jsx119(
+                  title: /* @__PURE__ */ jsx120(
                     Stack_default,
                     {
                       direction: "row",
@@ -22480,7 +22597,7 @@ var Autocomplete = function Autocomplete2({
                       children: value.slice(
                         limitValueTags,
                         value.length
-                      ).map((id) => /* @__PURE__ */ jsx119(
+                      ).map((id) => /* @__PURE__ */ jsx120(
                         Chip_default,
                         {
                           label: (renderLabel ?? _renderLabel)(id),
@@ -22500,7 +22617,7 @@ var Autocomplete = function Autocomplete2({
                       ))
                     }
                   ),
-                  children: /* @__PURE__ */ jsx119(Typography_default, { variant: "body2", children: `+${value.length - limitValueTags}` })
+                  children: /* @__PURE__ */ jsx120(Typography_default, { variant: "body2", children: `+${value.length - limitValueTags}` })
                 }
               ) : ""
             ]
@@ -22517,7 +22634,7 @@ var Autocomplete = function Autocomplete2({
             spacing: 1,
             children: [
               textFieldProps?.endAdornment,
-              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx119(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx119(
+              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx120(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx120(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -22540,7 +22657,7 @@ var Autocomplete = function Autocomplete2({
                   "data-test": "clear-autocomplete"
                 }
               ) }),
-              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx119(
+              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx120(
                 Divider_default,
                 {
                   variant: "middle",
@@ -22548,11 +22665,11 @@ var Autocomplete = function Autocomplete2({
                   flexItem: true
                 }
               ),
-              !disabled && variant !== "text" && /* @__PURE__ */ jsx119(
+              !disabled && variant !== "text" && /* @__PURE__ */ jsx120(
                 Tooltip_default,
                 {
                   title: isOpen ? t("AUTOCOMPLETE.COLLAPSE") : t("AUTOCOMPLETE.EXPAND"),
-                  children: /* @__PURE__ */ jsx119(
+                  children: /* @__PURE__ */ jsx120(
                     IconButton_default,
                     {
                       ref: expandSelectButtonRef,
@@ -22574,7 +22691,7 @@ var Autocomplete = function Autocomplete2({
         autoComplete: "off"
       }
     ),
-    /* @__PURE__ */ jsx119(
+    /* @__PURE__ */ jsx120(
       ClickAwayListener,
       {
         onClickAway: (event) => {
@@ -22599,13 +22716,13 @@ var Autocomplete = function Autocomplete2({
           }
         },
         mouseEvent: "onMouseDown",
-        children: /* @__PURE__ */ jsx119(
+        children: /* @__PURE__ */ jsx120(
           Popper,
           {
             anchorEl: anchorRef.current,
             open: isOpen,
             sx: { zIndex: 3e3 },
-            children: /* @__PURE__ */ jsx119(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs57(
+            children: /* @__PURE__ */ jsx120(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs57(
               Box_default2,
               {
                 sx: {
@@ -22617,22 +22734,22 @@ var Autocomplete = function Autocomplete2({
                 className: "Slim-Vertical-Scroll",
                 ref: listRef,
                 children: [
-                  isLoading && /* @__PURE__ */ jsx119(
+                  isLoading && /* @__PURE__ */ jsx120(
                     ListItem_default,
                     {
                       text: loadingText ?? t("AUTOCOMPLETE.LOADING")
                     }
                   ),
-                  !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx119(
+                  !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx120(
                     ListItem_default,
                     {
                       text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
                     }
                   ),
-                  !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx119(AutoSizer5, { children: ({
+                  !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx120(AutoSizer5, { children: ({
                     height: height2,
                     width: width2
-                  }) => /* @__PURE__ */ jsx119(
+                  }) => /* @__PURE__ */ jsx120(
                     FixedSizeList3,
                     {
                       overscanCount: 3,
@@ -22700,7 +22817,7 @@ import CodeMirror, {
 } from "@uiw/react-codemirror";
 import { html } from "@codemirror/lang-html";
 import { linter, lintGutter } from "@codemirror/lint";
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var removeFocusOutline = EditorView.baseTheme({
   "&.cm-focused": {
     outline: "none"
@@ -22722,7 +22839,7 @@ var CodeEditor = function CodeEditor2({
     linter(linterOptions?.source || null, linterOptions?.config),
     ...extensions
   ] : extensions;
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx121(
     CodeMirror,
     {
       ...rest,
@@ -22741,7 +22858,7 @@ var CodeEditor_default = React66.forwardRef(CodeEditor);
 
 // src/components/input/CodeEditorPopup.tsx
 import format from "html-format";
-import { Fragment as Fragment26, jsx as jsx121, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx122, jsxs as jsxs58 } from "react/jsx-runtime";
 var FORMAT_CHARACTERS_LINE = 120;
 var FORMAT_NUMBER_SPACES_INDENTATION = 2;
 var CodeEditorPopup = ({
@@ -22784,8 +22901,8 @@ var CodeEditorPopup = ({
     " ".repeat(FORMAT_NUMBER_SPACES_INDENTATION),
     FORMAT_CHARACTERS_LINE
   );
-  return /* @__PURE__ */ jsxs58(Fragment26, { children: [
-    readonly && /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsxs58(Fragment27, { children: [
+    readonly && /* @__PURE__ */ jsx122(
       Dialog_default,
       {
         open,
@@ -22804,7 +22921,7 @@ var CodeEditorPopup = ({
             justifyContent: "space-between",
             paddingTop: "20px",
             children: [
-              /* @__PURE__ */ jsx121(
+              /* @__PURE__ */ jsx122(
                 Box_default2,
                 {
                   flexGrow: 1,
@@ -22821,7 +22938,7 @@ var CodeEditorPopup = ({
                         }
                       },
                       children: [
-                        /* @__PURE__ */ jsx121(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx121(
+                        /* @__PURE__ */ jsx122(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx122(
                           CodeEditor_default,
                           {
                             autoFocus: true,
@@ -22850,7 +22967,7 @@ var CodeEditorPopup = ({
                           }
                         ) }),
                         messageNode,
-                        hasErrors && /* @__PURE__ */ jsx121(Alert_default, { severity: "info", children: t(
+                        hasErrors && /* @__PURE__ */ jsx122(Alert_default, { severity: "info", children: t(
                           "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
                         ) })
                       ]
@@ -22858,13 +22975,13 @@ var CodeEditorPopup = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx121(
+              /* @__PURE__ */ jsx122(
                 Box_default2,
                 {
                   sx: {
                     padding: "16px 24px 16px 24px"
                   },
-                  children: /* @__PURE__ */ jsx121(
+                  children: /* @__PURE__ */ jsx122(
                     Button_default,
                     {
                       text: t(
@@ -22881,7 +22998,7 @@ var CodeEditorPopup = ({
         )
       }
     ),
-    !readonly && /* @__PURE__ */ jsx121(
+    !readonly && /* @__PURE__ */ jsx122(
       ConfirmationDialog_default,
       {
         fullScreen: true,
@@ -22900,7 +23017,7 @@ var CodeEditorPopup = ({
               }
             },
             children: [
-              codeEditorSubtitle && /* @__PURE__ */ jsx121(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx121(
+              codeEditorSubtitle && /* @__PURE__ */ jsx122(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx122(
                 Typography_default,
                 {
                   variant: "body2",
@@ -22908,7 +23025,7 @@ var CodeEditorPopup = ({
                   children: codeEditorSubtitle
                 }
               ) }),
-              /* @__PURE__ */ jsx121(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx121(
+              /* @__PURE__ */ jsx122(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx122(
                 CodeEditor_default,
                 {
                   autoFocus: true,
@@ -22937,7 +23054,7 @@ var CodeEditorPopup = ({
                 }
               ) }),
               messageNode,
-              hasErrors && /* @__PURE__ */ jsx121(Alert_default, { severity: "info", children: t(
+              hasErrors && /* @__PURE__ */ jsx122(Alert_default, { severity: "info", children: t(
                 "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
               ) })
             ]
@@ -22950,7 +23067,7 @@ var CodeEditorPopup = ({
 var CodeEditorPopup_default = CodeEditorPopup;
 
 // src/components/input/TextEditor.tsx
-import { Fragment as Fragment27, jsx as jsx122, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx123, jsxs as jsxs59 } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR_INSERT_MENU_ITEMS = [
   "link",
   "image",
@@ -23236,8 +23353,8 @@ var TextEditor = function TextEditor2({
         };
     }
   };
-  return /* @__PURE__ */ jsxs59(Fragment27, { children: [
-    /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs59(Fragment28, { children: [
+    /* @__PURE__ */ jsx123(
       Editor,
       {
         id,
@@ -23257,7 +23374,7 @@ var TextEditor = function TextEditor2({
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx122(
+    /* @__PURE__ */ jsx123(
       CodeEditorPopup_default,
       {
         value: contentValue,
@@ -23293,7 +23410,7 @@ var TextEditor_default = TextEditor;
 
 // src/components/input/PhoneField.tsx
 import * as React69 from "react";
-import { Fragment as Fragment28, jsx as jsx123, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx124, jsxs as jsxs60 } from "react/jsx-runtime";
 var maxPhoneLengthWithPrefix = 16;
 var PhoneField = React69.forwardRef(function PhoneField2({
   value,
@@ -23356,7 +23473,7 @@ var PhoneField = React69.forwardRef(function PhoneField2({
     setCountryCode(countryCode2);
     setTextValue(phone);
   }, [value]);
-  const select = /* @__PURE__ */ jsx123(
+  const select = /* @__PURE__ */ jsx124(
     Select_default,
     {
       className: "Cn-PhoneField-countryCodeSelector",
@@ -23372,13 +23489,13 @@ var PhoneField = React69.forwardRef(function PhoneField2({
       }
     }
   );
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx124(
     TextField_default,
     {
       groupElements: true,
       ...rest,
       className: `Cn-PhoneField ${className}`,
-      startAdornment: /* @__PURE__ */ jsxs60(Fragment28, { children: [
+      startAdornment: /* @__PURE__ */ jsxs60(Fragment29, { children: [
         rest.startAdornment,
         select
       ] }),
@@ -23392,7 +23509,7 @@ var PhoneField_default = PhoneField;
 
 // src/components/input/NumberField.tsx
 import * as React70 from "react";
-import { jsx as jsx124, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs61 } from "react/jsx-runtime";
 var setValueAndTriggerChangeEvent = (r2, value) => {
   const propDescriptor = Object.getOwnPropertyDescriptor(
     window["HTMLInputElement"].prototype,
@@ -23555,12 +23672,12 @@ var NumberField = React70.forwardRef(function NumberField2({
           }
         },
         children: [
-          /* @__PURE__ */ jsx124(
+          /* @__PURE__ */ jsx125(
             Tooltip_default,
             {
               title: stepUpDisabledTooltip && stepUpDisabled ? stepUpDisabledTooltip : "",
               allowDisabled: true,
-              children: /* @__PURE__ */ jsx124(
+              children: /* @__PURE__ */ jsx125(
                 IconButton_default,
                 {
                   disabled: stepUpDisabled,
@@ -23571,12 +23688,12 @@ var NumberField = React70.forwardRef(function NumberField2({
               )
             }
           ),
-          /* @__PURE__ */ jsx124(
+          /* @__PURE__ */ jsx125(
             Tooltip_default,
             {
               title: stepDownDisabledTooltip && stepDownDisabled ? stepDownDisabledTooltip : "",
               allowDisabled: true,
-              children: /* @__PURE__ */ jsx124(
+              children: /* @__PURE__ */ jsx125(
                 IconButton_default,
                 {
                   disabled: stepDownDisabled,
@@ -23596,7 +23713,7 @@ var NumberField = React70.forwardRef(function NumberField2({
       setTextValue(numberToString(value));
     }
   }, [numberToString, stringToNumber, textValue, value]);
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx125(
     TextField_default,
     {
       ...rest,
@@ -23618,7 +23735,7 @@ import { tz as tz8 } from "moment-timezone";
 // src/components/input/DatePickerStatic.tsx
 import * as React71 from "react";
 import { tz as tz7 } from "moment-timezone";
-import { jsx as jsx125, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs62 } from "react/jsx-runtime";
 var minYear = 1900;
 var maxYear = 2100;
 var DatePickerStatic = ({
@@ -23726,7 +23843,7 @@ var DatePickerStatic = ({
             spacing: 2,
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsx125(
+              /* @__PURE__ */ jsx126(
                 Select_default,
                 {
                   value: visibleMonth.year,
@@ -23735,7 +23852,7 @@ var DatePickerStatic = ({
                 }
               ),
               /* @__PURE__ */ jsxs62(Stack_default, { direction: "row", spacing: 2, children: [
-                /* @__PURE__ */ jsx125(
+                /* @__PURE__ */ jsx126(
                   IconButton_default,
                   {
                     disabled: isDisabledPreviousMonth,
@@ -23743,7 +23860,7 @@ var DatePickerStatic = ({
                     onClick: navigatePreviousMonth
                   }
                 ),
-                /* @__PURE__ */ jsx125(
+                /* @__PURE__ */ jsx126(
                   IconButton_default,
                   {
                     disabled: isDisabledNextMonth,
@@ -23755,8 +23872,8 @@ var DatePickerStatic = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx125(DaysOfWeekRow_default, {}),
-        /* @__PURE__ */ jsx125(Box_default2, { sx: { padding: "8px" }, children: /* @__PURE__ */ jsx125(
+        /* @__PURE__ */ jsx126(DaysOfWeekRow_default, {}),
+        /* @__PURE__ */ jsx126(Box_default2, { sx: { padding: "8px" }, children: /* @__PURE__ */ jsx126(
           CalendarMonth_default,
           {
             allowKeyboardNavigation: true,
@@ -23793,14 +23910,14 @@ var DatePickerStatic = ({
 var DatePickerStatic_default = DatePickerStatic;
 
 // src/components/input/DatePickerPopover.tsx
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 var DatePickerPopover = ({
   value,
   onSelect,
   minDate,
   maxDate,
   ...rest
-}) => /* @__PURE__ */ jsx126(Popover_default, { anchorHorizontalOrigin: "right", horizontalAlign: "right", ...rest, children: /* @__PURE__ */ jsx126(
+}) => /* @__PURE__ */ jsx127(Popover_default, { anchorHorizontalOrigin: "right", horizontalAlign: "right", ...rest, children: /* @__PURE__ */ jsx127(
   DatePickerStatic_default,
   {
     value,
@@ -23812,7 +23929,7 @@ var DatePickerPopover = ({
 var DatePickerPopover_default = DatePickerPopover;
 
 // src/components/input/DatePicker.tsx
-import { Fragment as Fragment29, jsx as jsx127, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx128, jsxs as jsxs63 } from "react/jsx-runtime";
 var DatePicker = React72.forwardRef(
   function DatePicker2({ value, onChange, onBlur, onKeyDown, minDate, maxDate, ...rest }, ref) {
     const { locale, timezone } = React72.useContext(IntlContext);
@@ -23888,8 +24005,8 @@ var DatePicker = React72.forwardRef(
       const text = value && !isNaN(value.getTime()) ? tz8(value, timezone).format(dateInputFormat) : "";
       setTextValue(text);
     }, [dateInputFormat, timezone, value]);
-    return /* @__PURE__ */ jsxs63(Fragment29, { children: [
-      /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsxs63(Fragment30, { children: [
+      /* @__PURE__ */ jsx128(
         TextField_default,
         {
           ref,
@@ -23900,7 +24017,7 @@ var DatePicker = React72.forwardRef(
           onChange: onChangeTextField,
           onBlur: onBlurTextField,
           onKeyDown: onKeyDownTextField,
-          endAdornment: /* @__PURE__ */ jsx127(
+          endAdornment: /* @__PURE__ */ jsx128(
             IconButton_default,
             {
               "data-testid": "date-picker-open-button",
@@ -23912,7 +24029,7 @@ var DatePicker = React72.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ jsx127(
+      /* @__PURE__ */ jsx128(
         DatePickerPopover_default,
         {
           anchorEl,
@@ -23931,14 +24048,14 @@ var DatePicker_default = DatePicker;
 // src/components/input/Checkbox.tsx
 import MuiCheckbox from "@mui/material/Checkbox";
 import { FormControlLabel, FormGroup } from "@mui/material";
-import { Fragment as Fragment30, jsx as jsx128, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx129, jsxs as jsxs64 } from "react/jsx-runtime";
 var MaterialCheckbox = ({
   checked,
   disabled,
   inputClass,
   indeterminate,
   onChange
-}) => /* @__PURE__ */ jsx128(
+}) => /* @__PURE__ */ jsx129(
   MuiCheckbox,
   {
     disabled,
@@ -23964,8 +24081,8 @@ var Checkbox = ({
   inputClass,
   onChange,
   tabIndex
-}) => /* @__PURE__ */ jsxs64(Fragment30, { children: [
-  !label && /* @__PURE__ */ jsx128(
+}) => /* @__PURE__ */ jsxs64(Fragment31, { children: [
+  !label && /* @__PURE__ */ jsx129(
     MaterialCheckbox,
     {
       disabled,
@@ -23976,11 +24093,11 @@ var Checkbox = ({
       inputClass
     }
   ),
-  label && /* @__PURE__ */ jsx128(FormGroup, { children: /* @__PURE__ */ jsx128(
+  label && /* @__PURE__ */ jsx129(FormGroup, { children: /* @__PURE__ */ jsx129(
     FormControlLabel,
     {
       value: label,
-      control: /* @__PURE__ */ jsx128(
+      control: /* @__PURE__ */ jsx129(
         MaterialCheckbox,
         {
           disabled,
@@ -23991,7 +24108,7 @@ var Checkbox = ({
           inputClass
         }
       ),
-      label: /* @__PURE__ */ jsx128(Typography_default, { variant: "body2", children: label }),
+      label: /* @__PURE__ */ jsx129(Typography_default, { variant: "body2", children: label }),
       labelPlacement,
       sx: {
         margin: 0,
@@ -24006,7 +24123,7 @@ var Checkbox_default = Checkbox;
 import * as React73 from "react";
 import MuiRadio from "@mui/material/Radio";
 import { FormControlLabel as FormControlLabel2 } from "@mui/material";
-import { Fragment as Fragment31, jsx as jsx129, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx130, jsxs as jsxs65 } from "react/jsx-runtime";
 var Radio = React73.forwardRef(function Radio2({
   label,
   labelPlacement = "end",
@@ -24024,7 +24141,7 @@ var Radio = React73.forwardRef(function Radio2({
     },
     [onChange]
   );
-  const radio = /* @__PURE__ */ jsx129(
+  const radio = /* @__PURE__ */ jsx130(
     MuiRadio,
     {
       className: `Cn-Radio ${className}`,
@@ -24043,13 +24160,13 @@ var Radio = React73.forwardRef(function Radio2({
       size: size === "S" ? "small" : "medium"
     }
   );
-  return /* @__PURE__ */ jsxs65(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs65(Fragment32, { children: [
     !label && radio,
-    label && /* @__PURE__ */ jsx129(
+    label && /* @__PURE__ */ jsx130(
       FormControlLabel2,
       {
         control: radio,
-        label: /* @__PURE__ */ jsx129(Typography_default, { variant: "body2", children: label }),
+        label: /* @__PURE__ */ jsx130(Typography_default, { variant: "body2", children: label }),
         labelPlacement,
         sx: {
           margin: 0,
@@ -24063,7 +24180,7 @@ var Radio_default = Radio;
 
 // src/components/input/PageSelector.tsx
 import * as React74 from "react";
-import { jsx as jsx130, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs66 } from "react/jsx-runtime";
 var PageSelector = ({
   currentPage,
   pageSize,
@@ -24090,7 +24207,7 @@ var PageSelector = ({
       justifyContent: "flex-end",
       flexGrow: 1,
       children: [
-        text && /* @__PURE__ */ jsx130(Typography_default, { variant: "body2", children: /* @__PURE__ */ jsx130(
+        text && /* @__PURE__ */ jsx131(Typography_default, { variant: "body2", children: /* @__PURE__ */ jsx131(
           "div",
           {
             dangerouslySetInnerHTML: {
@@ -24099,7 +24216,7 @@ var PageSelector = ({
           }
         ) }),
         /* @__PURE__ */ jsxs66(Stack_default, { direction: "row", alignItems: "center", children: [
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             IconButton_default,
             {
               iconId: "chevron-left",
@@ -24107,7 +24224,7 @@ var PageSelector = ({
               disabled: currentPage <= 1
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             NumberField_default,
             {
               value: currentPage,
@@ -24125,7 +24242,7 @@ var PageSelector = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             IconButton_default,
             {
               iconId: "chevron-right",
@@ -24145,13 +24262,13 @@ import Fade from "@mui/material/Fade";
 
 // src/components/progress/LinearProgress.tsx
 import MuiLinearProgress from "@mui/material/LinearProgress";
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
 var LinearProgress = ({
   color: color2,
   backgroundColor: backgroundColor2,
   variant = "indeterminate",
   ...rest
-}) => /* @__PURE__ */ jsx131(
+}) => /* @__PURE__ */ jsx132(
   MuiLinearProgress,
   {
     ...rest,
@@ -24178,7 +24295,7 @@ import * as React75 from "react";
 import MuiCircularProgress from "@mui/material/CircularProgress";
 import Typography3 from "@mui/material/Typography";
 import Box4 from "@mui/material/Box";
-import { jsx as jsx132, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs67 } from "react/jsx-runtime";
 var circularSizes = {
   XS: "20px",
   SM: "24px",
@@ -24217,7 +24334,7 @@ var CircularProgress = ({
         }
       },
       children: [
-        gradientColors && /* @__PURE__ */ jsx132("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx132("defs", { children: /* @__PURE__ */ jsxs67(
+        gradientColors && /* @__PURE__ */ jsx133("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx133("defs", { children: /* @__PURE__ */ jsxs67(
           "linearGradient",
           {
             id: gradientName.current,
@@ -24226,14 +24343,14 @@ var CircularProgress = ({
             x2: "0%",
             y2: "100%",
             children: [
-              /* @__PURE__ */ jsx132(
+              /* @__PURE__ */ jsx133(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: gradientColors.startColor
                 }
               ),
-              /* @__PURE__ */ jsx132(
+              /* @__PURE__ */ jsx133(
                 "stop",
                 {
                   offset: "100%",
@@ -24243,7 +24360,7 @@ var CircularProgress = ({
             ]
           }
         ) }) }),
-        showCircularBackground && /* @__PURE__ */ jsx132(
+        showCircularBackground && /* @__PURE__ */ jsx133(
           Box4,
           {
             sx: {
@@ -24256,7 +24373,7 @@ var CircularProgress = ({
                 maxHeight: circularSizes[size]
               }
             },
-            children: /* @__PURE__ */ jsx132(
+            children: /* @__PURE__ */ jsx133(
               MuiCircularProgress,
               {
                 variant: "determinate",
@@ -24268,7 +24385,7 @@ var CircularProgress = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx132(
+        /* @__PURE__ */ jsx133(
           MuiCircularProgress,
           {
             variant,
@@ -24297,7 +24414,7 @@ var CircularProgress = ({
             thickness
           }
         ),
-        variant !== "indeterminate" && /* @__PURE__ */ jsx132(
+        variant !== "indeterminate" && /* @__PURE__ */ jsx133(
           Box4,
           {
             sx: {
@@ -24312,7 +24429,7 @@ var CircularProgress = ({
               height: circularSizes[size],
               width: circularSizes[size]
             },
-            children: typeof label === "string" ? /* @__PURE__ */ jsx132(
+            children: typeof label === "string" ? /* @__PURE__ */ jsx133(
               Typography3,
               {
                 variant: typographyVariant,
@@ -24332,7 +24449,7 @@ var CircularProgress_default = CircularProgress;
 // src/components/progress/DonutProgress.tsx
 import Box5 from "@mui/material/Box";
 import { Stack as Stack11 } from "@mui/material";
-import { jsx as jsx133, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs68 } from "react/jsx-runtime";
 var CIRCULAR_PROGRESS_PERCENTAGE = 85;
 var variants2 = {
   empty: {
@@ -24369,8 +24486,8 @@ var DonutProgress = ({
   showPercentageSymbol
 }) => {
   const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs68(Stack11, { direction: "row", alignItems: "center", position: "relative", children: [
-    /* @__PURE__ */ jsx133(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
-    /* @__PURE__ */ jsx133(
+    /* @__PURE__ */ jsx134(Typography_default, { variant: "h6", component: "div", color: grey800, children: label }),
+    /* @__PURE__ */ jsx134(
       Typography_default,
       {
         variant: "tooltip",
@@ -24389,7 +24506,7 @@ var DonutProgress = ({
         width: "fit-content"
       },
       children: [
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx134(
           CircularProgress_default,
           {
             variant: "determinate",
@@ -24405,7 +24522,7 @@ var DonutProgress = ({
             color: variants2[variant].emptyColor
           }
         ),
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx134(
           Box5,
           {
             sx: {
@@ -24413,7 +24530,7 @@ var DonutProgress = ({
               top: 0,
               left: 0
             },
-            children: /* @__PURE__ */ jsx133(
+            children: /* @__PURE__ */ jsx134(
               CircularProgress_default,
               {
                 variant: "determinate",
@@ -24428,7 +24545,7 @@ var DonutProgress = ({
             )
           }
         ),
-        variant !== "empty" && labelChip && /* @__PURE__ */ jsx133(
+        variant !== "empty" && labelChip && /* @__PURE__ */ jsx134(
           Box5,
           {
             sx: {
@@ -24445,7 +24562,7 @@ var DonutProgress = ({
               justifyContent: "center",
               boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsx133(
+            children: /* @__PURE__ */ jsx134(
               Typography_default,
               {
                 variant: "tooltip",
@@ -24462,14 +24579,14 @@ var DonutProgress = ({
 var DonutProgress_default = DonutProgress;
 
 // src/components/loader/Loader.tsx
-import { jsx as jsx134 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 var Loader = ({
   isVisible,
   zIndex = 1e4,
   size,
   hideProgress = false,
   sx
-}) => /* @__PURE__ */ jsx134(Fade, { in: isVisible, children: /* @__PURE__ */ jsx134(
+}) => /* @__PURE__ */ jsx135(Fade, { in: isVisible, children: /* @__PURE__ */ jsx135(
   Box_default2,
   {
     sx: {
@@ -24485,7 +24602,7 @@ var Loader = ({
       backgroundColor: whiteOpacity32,
       ...sx
     },
-    children: !hideProgress && /* @__PURE__ */ jsx134(CircularProgress_default, { size })
+    children: !hideProgress && /* @__PURE__ */ jsx135(CircularProgress_default, { size })
   }
 ) });
 var Loader_default = Loader;
@@ -24498,14 +24615,14 @@ import "katex/dist/katex.min.css";
 
 // src/components/markdown/KatexRenderer.tsx
 import katex from "katex";
-import { jsx as jsx135, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs69 } from "react/jsx-runtime";
 var KatexRenderer = ({ children, block }) => {
   try {
     const html2 = katex.renderToString(children, {
       throwOnError: false,
       displayMode: block
     });
-    return /* @__PURE__ */ jsx135("span", { dangerouslySetInnerHTML: { __html: html2 } });
+    return /* @__PURE__ */ jsx136("span", { dangerouslySetInnerHTML: { __html: html2 } });
   } catch (err) {
     return /* @__PURE__ */ jsxs69("pre", { style: { color: "red" }, children: [
       "KaTeX error: $",
@@ -24516,7 +24633,7 @@ var KatexRenderer = ({ children, block }) => {
 var KatexRenderer_default = KatexRenderer;
 
 // src/components/markdown/MarkdownRenderer.tsx
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var MarkdownContainer = styled8("div")(
   ({
     color: color2,
@@ -24620,11 +24737,11 @@ var renderWithMath = (text) => {
     const inline = match[2];
     if (block !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx136(KatexRenderer_default, { block: true, children: block.trim() }, start)
+        /* @__PURE__ */ jsx137(KatexRenderer_default, { block: true, children: block.trim() }, start)
       );
     } else if (inline !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx136(KatexRenderer_default, { children: inline.trim() }, start)
+        /* @__PURE__ */ jsx137(KatexRenderer_default, { children: inline.trim() }, start)
       );
     }
     lastIndex = regex.lastIndex;
@@ -24654,11 +24771,11 @@ var CodeOrMath = ({ children, ...props }) => {
   if (m) {
     const expr = m[1] || m[2] || "";
     const isBlock = Boolean(m[1]);
-    return /* @__PURE__ */ jsx136(KatexRenderer_default, { block: isBlock, children: expr.trim() });
+    return /* @__PURE__ */ jsx137(KatexRenderer_default, { block: isBlock, children: expr.trim() });
   }
   const maybe = renderWithMath(s);
   const onlyText = maybe.length === 1 && typeof maybe[0] === "string";
-  return onlyText ? /* @__PURE__ */ jsx136("code", { ...props, children }) : /* @__PURE__ */ jsx136("span", { children: maybe });
+  return onlyText ? /* @__PURE__ */ jsx137("code", { ...props, children }) : /* @__PURE__ */ jsx137("span", { children: maybe });
 };
 var escapeInlineUnderscores = (s) => s.replace(/(\S)_(\S)/g, "$1\\_$2");
 var MarkdownRenderer = ({
@@ -24668,19 +24785,19 @@ var MarkdownRenderer = ({
 }) => {
   const protectedText = escapeInlineUnderscores(text || "");
   const normalized = normalizeLatexDelimiters(protectedText);
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx137(
     MarkdownContainer,
     {
       className: `markdown-container ${className || ""}`,
       ...rest,
-      children: /* @__PURE__ */ jsx136(
+      children: /* @__PURE__ */ jsx137(
         Markdown,
         {
           options: {
             forceBlock: true,
             overrides: {
               p: {
-                component: ({ children, ...props }) => /* @__PURE__ */ jsx136("p", { ...props, children: renderChildrenWithMath(children) })
+                component: ({ children, ...props }) => /* @__PURE__ */ jsx137("p", { ...props, children: renderChildrenWithMath(children) })
               },
               code: { component: CodeOrMath }
             }
@@ -24695,7 +24812,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
 import { Drawer as Drawer2 } from "@mui/material";
-import { Fragment as Fragment32, jsx as jsx137, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx138, jsxs as jsxs70 } from "react/jsx-runtime";
 var Navbar = ({
   topContent,
   bottomContent,
@@ -24703,7 +24820,7 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs70(Fragment32, { children: [
+}) => /* @__PURE__ */ jsxs70(Fragment33, { children: [
   /* @__PURE__ */ jsxs70(
     Box_default2,
     {
@@ -24719,8 +24836,8 @@ var Navbar = ({
       },
       className: "Slim-Vertical-Scroll",
       children: [
-        /* @__PURE__ */ jsx137(Box_default2, { children: topContent }),
-        /* @__PURE__ */ jsx137(Box_default2, { children: bottomContent })
+        /* @__PURE__ */ jsx138(Box_default2, { children: topContent }),
+        /* @__PURE__ */ jsx138(Box_default2, { children: bottomContent })
       ]
     }
   ),
@@ -24747,8 +24864,8 @@ var Navbar = ({
       },
       onClose,
       children: [
-        /* @__PURE__ */ jsx137("div", { children: drawerTopContent }),
-        /* @__PURE__ */ jsx137("div", { children: drawerBottomContent })
+        /* @__PURE__ */ jsx138("div", { children: drawerTopContent }),
+        /* @__PURE__ */ jsx138("div", { children: drawerBottomContent })
       ]
     }
   )
@@ -24758,7 +24875,7 @@ var Navbar_default = Navbar;
 // src/components/navbar/NavbarButton.tsx
 import * as React77 from "react";
 import { Box as Box6, ButtonBase as ButtonBase2 } from "@mui/material";
-import { jsx as jsx138, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs71 } from "react/jsx-runtime";
 var NavbarButton = React77.forwardRef(
   function NavbarButton2({
     iconId,
@@ -24783,7 +24900,7 @@ var NavbarButton = React77.forwardRef(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Box6,
               {
                 sx: {
@@ -24799,7 +24916,7 @@ var NavbarButton = React77.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Box6,
               {
                 sx: {
@@ -24832,7 +24949,7 @@ var NavbarButton = React77.forwardRef(
         },
         children: [
           srcUrl ? getButtonContent(
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Avatar_default,
               {
                 className: "NavbarButton-icon",
@@ -24842,7 +24959,7 @@ var NavbarButton = React77.forwardRef(
               }
             )
           ) : getButtonContent(
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Icon_default,
               {
                 id: iconId,
@@ -24858,7 +24975,7 @@ var NavbarButton = React77.forwardRef(
               }
             )
           ),
-          badgeIconProps && /* @__PURE__ */ jsx138(
+          badgeIconProps && /* @__PURE__ */ jsx139(
             Icon_default,
             {
               ...badgeIconProps,
@@ -24880,8 +24997,8 @@ var NavbarButton = React77.forwardRef(
 var NavbarButton_default = NavbarButton;
 
 // src/components/navbar/NavbarHeader.tsx
-import { jsx as jsx139 } from "react/jsx-runtime";
-var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx139(
+import { jsx as jsx140 } from "react/jsx-runtime";
+var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx140(
   Typography_default,
   {
     sx: {
@@ -24903,10 +25020,10 @@ var NavbarHeader_default = NavbarHeader;
 // src/components/navbar/NavbarLogo.tsx
 import * as React78 from "react";
 import { ButtonBase as ButtonBase3 } from "@mui/material";
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
 var NavbarLogo = React78.forwardRef(
   function NavbarButton3({ src, ...rest }, ref) {
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx141(
       ButtonBase3,
       {
         ref,
@@ -24917,7 +25034,7 @@ var NavbarLogo = React78.forwardRef(
           borderBottom: `1px solid ${grey200}`,
           boxSizing: "border-box"
         },
-        children: /* @__PURE__ */ jsx140("img", { src, width: "32px", height: "32px" })
+        children: /* @__PURE__ */ jsx141("img", { src, width: "32px", height: "32px" })
       }
     );
   }
@@ -24926,7 +25043,7 @@ var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
 import * as React79 from "react";
-import { Fragment as Fragment33, jsx as jsx141, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx142, jsxs as jsxs72 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
   elementRef,
@@ -24967,8 +25084,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__ */ jsxs72(Fragment33, { children: [
-    /* @__PURE__ */ jsx141(
+  return /* @__PURE__ */ jsxs72(Fragment34, { children: [
+    /* @__PURE__ */ jsx142(
       Box_default2,
       {
         sx: {
@@ -24985,7 +25102,7 @@ var DonutFocusOverlay = ({
         }
       }
     ),
-    chipLabel && /* @__PURE__ */ jsx141(
+    chipLabel && /* @__PURE__ */ jsx142(
       Chip_default,
       {
         label: chipLabel,
@@ -25012,7 +25129,7 @@ var DonutFocusOverlay = ({
 var DonutFocusOverlay_default = DonutFocusOverlay;
 
 // src/components/pager/Pager.tsx
-import { Fragment as Fragment34, jsx as jsx142, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx143, jsxs as jsxs73 } from "react/jsx-runtime";
 var Pager = ({
   page,
   pageSize,
@@ -25026,10 +25143,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__ */ jsx142(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
+  const Label = ({ children }) => /* @__PURE__ */ jsx143(Typography_default, { color: Colors_exports.grey400, sx: { padding: "0 8px" }, children });
   return /* @__PURE__ */ jsxs73(Stack_default, { direction: "row", sx: { alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx142(Label, { children: t("PAGER.PAGE") }),
-    /* @__PURE__ */ jsx142(
+    /* @__PURE__ */ jsx143(Label, { children: t("PAGER.PAGE") }),
+    /* @__PURE__ */ jsx143(
       Select_default,
       {
         value: page,
@@ -25038,9 +25155,9 @@ var Pager = ({
         sx: { minWidth: 78 }
       }
     ),
-    allowedPageSizes && /* @__PURE__ */ jsxs73(Fragment34, { children: [
-      /* @__PURE__ */ jsx142(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
-      /* @__PURE__ */ jsx142(
+    allowedPageSizes && /* @__PURE__ */ jsxs73(Fragment35, { children: [
+      /* @__PURE__ */ jsx143(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
+      /* @__PURE__ */ jsx143(
         Select_default,
         {
           value: pageSize,
@@ -25063,7 +25180,7 @@ var Pager = ({
       " ",
       total
     ] }),
-    /* @__PURE__ */ jsx142(
+    /* @__PURE__ */ jsx143(
       IconButton_default,
       {
         disabled: page <= 1,
@@ -25071,7 +25188,7 @@ var Pager = ({
         onClick: () => onPageChange(page - 1, pageSize)
       }
     ),
-    /* @__PURE__ */ jsx142(
+    /* @__PURE__ */ jsx143(
       IconButton_default,
       {
         disabled: page > total / pageSize,
@@ -25086,7 +25203,7 @@ var Pager_default = Pager;
 // src/components/scrollable/HorizontalScrollable.tsx
 import { ButtonBase as ButtonBase4 } from "@mui/material";
 import * as React80 from "react";
-import { jsx as jsx143, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs74 } from "react/jsx-runtime";
 var HorizontalScrollable = ({
   style: style3,
   children,
@@ -25136,7 +25253,7 @@ var HorizontalScrollable = ({
     current.scrollBy(stepDistance, 0);
   };
   return /* @__PURE__ */ jsxs74(Box_default2, { sx: { position: "relative", ...style3 }, children: [
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx144(
       ButtonBase4,
       {
         sx: {
@@ -25153,10 +25270,10 @@ var HorizontalScrollable = ({
           ...isLeftArrowHidden && { display: "none" }
         },
         onClick: () => leftScroll(),
-        children: /* @__PURE__ */ jsx143(Icon_default, { id: "chevron-left" })
+        children: /* @__PURE__ */ jsx144(Icon_default, { id: "chevron-left" })
       }
     ),
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx144(
       Box_default2,
       {
         ref: horizontalContainerRef,
@@ -25175,7 +25292,7 @@ var HorizontalScrollable = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx144(
       ButtonBase4,
       {
         sx: {
@@ -25192,7 +25309,7 @@ var HorizontalScrollable = ({
           ...isRightArrowHidden && { display: "none" }
         },
         onClick: () => rightScroll(),
-        children: /* @__PURE__ */ jsx143(Icon_default, { id: "chevron-right" })
+        children: /* @__PURE__ */ jsx144(Icon_default, { id: "chevron-right" })
       }
     )
   ] });
@@ -25201,7 +25318,7 @@ var HorizontalScrollable_default = HorizontalScrollable;
 
 // src/components/scrollable/Carousel.tsx
 import * as React81 from "react";
-import { jsx as jsx144, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs75 } from "react/jsx-runtime";
 var buttonStyles = {
   color: grey800,
   position: "absolute",
@@ -25457,7 +25574,7 @@ function Carousel({
     }
     scrollHorizontal(scrollData, direction);
   };
-  return /* @__PURE__ */ jsx144(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsx145(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs75(
     Box_default2,
     {
       sx: {
@@ -25469,7 +25586,7 @@ function Carousel({
         }
       },
       children: [
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx145(
           IconButton_default,
           {
             iconId: "chevron-left",
@@ -25482,7 +25599,7 @@ function Carousel({
             onClick: () => scrollToNext("left")
           }
         ),
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx145(
           Box_default2,
           {
             ref: containerRef,
@@ -25495,7 +25612,7 @@ function Carousel({
               "::-webkit-scrollbar": { display: "none" },
               gap: `${gap2}px`
             },
-            children: items.map((item, index) => /* @__PURE__ */ jsx144(
+            children: items.map((item, index) => /* @__PURE__ */ jsx145(
               Box_default2,
               {
                 sx: {
@@ -25510,7 +25627,7 @@ function Carousel({
             ))
           }
         ),
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx145(
           IconButton_default,
           {
             iconId: "chevron-right",
@@ -25533,12 +25650,12 @@ var Carousel_default = Carousel;
 import {
   SnackbarProvider as NotistackSnackbarProvider
 } from "notistack";
-import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx146 } from "react/jsx-runtime";
 var SnackbarProvider = ({
   children,
   maxSnack = 3,
   domRoot
-}) => /* @__PURE__ */ jsx145(
+}) => /* @__PURE__ */ jsx146(
   NotistackSnackbarProvider,
   {
     maxSnack,
@@ -25559,7 +25676,7 @@ import {
 import * as React82 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx146, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs76 } from "react/jsx-runtime";
 var sizeStyles5 = {
   M: {
     width: "344px",
@@ -25602,7 +25719,7 @@ var Snackbar = React82.forwardRef(
     const closeClickHandler = React82.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
-    return /* @__PURE__ */ jsx146(
+    return /* @__PURE__ */ jsx147(
       SnackbarContent,
       {
         ref,
@@ -25627,7 +25744,7 @@ var Snackbar = React82.forwardRef(
             spacing: 2,
             sx: { width: "100%", alignItems: "center" },
             children: [
-              withIcon && /* @__PURE__ */ jsx146(
+              withIcon && /* @__PURE__ */ jsx147(
                 Box_default2,
                 {
                   sx: {
@@ -25635,10 +25752,10 @@ var Snackbar = React82.forwardRef(
                     flexShrink: 0,
                     color: iconColors[severity]
                   },
-                  children: /* @__PURE__ */ jsx146(Icon_default, { id: severityIcons[severity] })
+                  children: /* @__PURE__ */ jsx147(Icon_default, { id: severityIcons[severity] })
                 }
               ),
-              /* @__PURE__ */ jsx146(
+              /* @__PURE__ */ jsx147(
                 Typography4,
                 {
                   variant: "body2",
@@ -25646,7 +25763,7 @@ var Snackbar = React82.forwardRef(
                   children: message
                 }
               ),
-              actionText && /* @__PURE__ */ jsx146(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx146(
+              actionText && /* @__PURE__ */ jsx147(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx147(
                 Button_default,
                 {
                   sx: {
@@ -25661,7 +25778,7 @@ var Snackbar = React82.forwardRef(
                   onClick: actionClickHandler
                 }
               ) }),
-              /* @__PURE__ */ jsx146(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx146(
+              /* @__PURE__ */ jsx147(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx147(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -25686,7 +25803,7 @@ var Snackbar_default = Snackbar;
 
 // src/components/snackbar/enqueueSnackbar.tsx
 import { closeSnackbar as closeSnackbar2 } from "notistack";
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx148 } from "react/jsx-runtime";
 var enqueueSnackbar = (message, options = {}) => {
   const {
     persist,
@@ -25702,7 +25819,7 @@ var enqueueSnackbar = (message, options = {}) => {
     autoHideDuration: autoHideDurationMs ?? 1e4,
     persist: persist ?? false,
     content(key, message2) {
-      return /* @__PURE__ */ jsx147(
+      return /* @__PURE__ */ jsx148(
         Snackbar_default,
         {
           identifierKey: key,
@@ -25719,19 +25836,18 @@ var enqueueSnackbar = (message, options = {}) => {
 
 // src/components/tab/TabButton.tsx
 import MuiTab from "@mui/material/Tab";
-import { jsx as jsx148 } from "react/jsx-runtime";
+import { jsx as jsx149 } from "react/jsx-runtime";
 var TabButton = ({
   children,
   disabled = false,
-  textAlign = "left",
+  textAlign = "center",
   marginRight = "24px",
   dataTestId,
-  disableUppercase = false,
   ...rest
-}) => /* @__PURE__ */ jsx148(
+}) => /* @__PURE__ */ jsx149(
   MuiTab,
   {
-    label: /* @__PURE__ */ jsx148(
+    label: /* @__PURE__ */ jsx149(
       "div",
       {
         style: {
@@ -25740,10 +25856,8 @@ var TabButton = ({
           alignItems: textAlign === "left" ? "start" : "center",
           width: textAlign === "center" ? "100%" : void 0,
           marginRight: "24px",
-          ...disableUppercase ? {
-            textTransform: "none",
-            ...variants.body1
-          } : variants.caption
+          textTransform: "none",
+          ...variants["body1-semibold"]
         },
         children
       }
@@ -25751,9 +25865,15 @@ var TabButton = ({
     sx: {
       minHeight: "36px",
       alignItems: "start",
-      justifyContent: "start",
+      justifyContent: "center",
       padding: "10px 0",
-      marginRight
+      marginRight,
+      borderRadius: "8px",
+      transition: "background 0.2s",
+      color: grey700,
+      "&:not(.Mui-selected):hover": {
+        backgroundColor: grey100
+      }
     },
     disabled,
     "data-testid": dataTestId,
@@ -25769,7 +25889,7 @@ import MuiTabs from "@mui/material/Tabs";
 // src/components/layout/SwipeableViews.tsx
 import * as React83 from "react";
 import { useEffect as useEffect22, useRef as useRef23, useState as useState32 } from "react";
-import { jsx as jsx149 } from "react/jsx-runtime";
+import { jsx as jsx150 } from "react/jsx-runtime";
 var styles = {
   container: {
     maxHeight: "100%",
@@ -25806,6 +25926,7 @@ function SwipeableViews({
   const scrollTimeout = useRef23();
   const scrollingMethod = useRef23("none");
   const [previousIndex, setPreviousIndex] = useState32(index);
+  const hideScrollAnimation = useRef23(true);
   useEffect22(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
@@ -25835,14 +25956,15 @@ function SwipeableViews({
       };
       container.scrollTo({
         left: scrollPosition,
-        behavior: "smooth"
+        behavior: !hideScrollAnimation.current ? "smooth" : "instant"
       });
+      hideScrollAnimation.current = false;
       animationFrame = requestAnimationFrame(checkScrollCompletion);
       return () => cancelAnimationFrame(animationFrame);
     }
   }, [index]);
   const hasShowTab = (childIndex) => childIndex === index || childIndex === previousIndex;
-  return /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsx150(
     "div",
     {
       ...rootProps,
@@ -25870,12 +25992,15 @@ function SwipeableViews({
         if (React83.isValidElement(child)) {
           mountedChild = !!child.props.keepMounted;
         }
-        return /* @__PURE__ */ jsx149(
+        return /* @__PURE__ */ jsx150(
           "div",
           {
             style: Object.assign(
               {
-                ...!hasShowTab(childIndex) && mountedChild && { display: "none" }
+                ...!hasShowTab(childIndex) && mountedChild && {
+                  visibility: "hidden",
+                  pointerEvents: "none"
+                }
               },
               styles.slide,
               slideStyle
@@ -25892,7 +26017,7 @@ function SwipeableViews({
 }
 
 // src/components/tab/Tabs.tsx
-import { jsx as jsx150, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx151, jsxs as jsxs77 } from "react/jsx-runtime";
 var Tabs = ({
   tabButtons,
   children,
@@ -25902,9 +26027,84 @@ var Tabs = ({
   fullHeight = false,
   contained = false,
   scrollbarGutter,
-  disableContentScroll = false
+  disableContentScroll = false,
+  hideScrollButtons = false,
+  hideLineTabs = false
 }) => {
+  const tabsRef = React84.useRef(null);
   const [value, setValue] = React84.useState(0);
+  const measureTextWidthRange = (child) => {
+    const walker = document.createTreeWalker(child, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => node.textContent?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+    });
+    const textNode = walker.nextNode();
+    if (!textNode) {
+      return Math.round(child.getBoundingClientRect().width);
+    }
+    const range = document.createRange();
+    range.selectNodeContents(textNode);
+    const rect = range.getBoundingClientRect();
+    return Math.round(rect.width);
+  };
+  const waitForSmoothScrollEnd = React84.useCallback(
+    (container, onEnd) => {
+      let prev = container.scrollLeft;
+      let idleFrames = 0;
+      const check = () => {
+        const current = container.scrollLeft;
+        const isMoving = current !== prev;
+        prev = current;
+        if (isMoving) {
+          idleFrames = 0;
+          requestAnimationFrame(check);
+          return;
+        }
+        if (idleFrames < 5) {
+          idleFrames++;
+          requestAnimationFrame(check);
+          return;
+        }
+        onEnd();
+      };
+      requestAnimationFrame(check);
+    },
+    []
+  );
+  const calculateIndicatorTabWidth = React84.useCallback((index) => {
+    if (!tabsRef.current) {
+      return null;
+    }
+    const tabsContainer = tabsRef.current.querySelector(
+      ".MuiTabs-list"
+    );
+    const indicator = tabsRef.current.querySelector(
+      ".MuiTabs-indicator"
+    );
+    const child = Array.from(tabsContainer.children)[index];
+    const textWidth = measureTextWidthRange(child);
+    const childRect = child.getBoundingClientRect();
+    const listRect = tabsContainer.getBoundingClientRect();
+    const left = childRect.left + (childRect.width - textWidth) / 2 - listRect.left;
+    indicator.style.display = "block";
+    indicator.style.width = `${textWidth}px`;
+    indicator.style.left = `${left}px`;
+  }, []);
+  React84.useEffect(() => {
+    if (!tabsRef.current) {
+      return;
+    }
+    const tabsScroller = tabsRef.current.querySelector(
+      ".MuiTabs-scroller"
+    );
+    waitForSmoothScrollEnd(tabsScroller, () => {
+      calculateIndicatorTabWidth(currentTabIndex ?? value);
+    });
+  }, [
+    calculateIndicatorTabWidth,
+    currentTabIndex,
+    value,
+    waitForSmoothScrollEnd
+  ]);
   const handleChangeIndex = (index) => {
     onChangeTab?.(index);
     setValue(index);
@@ -25913,7 +26113,7 @@ var Tabs = ({
     top: 0
   } : {
     bottom: 0,
-    borderRadius: "8px 8px 0 0"
+    borderRadius: "8px"
   };
   return /* @__PURE__ */ jsxs77(
     Box_default2,
@@ -25929,33 +26129,40 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx151(
           MuiTabs,
           {
+            ref: tabsRef,
             value: currentTabIndex ?? value,
             onChange: (_event, index) => {
               handleChangeIndex(index);
             },
             variant,
-            scrollButtons: true,
+            scrollButtons: !hideScrollButtons,
             allowScrollButtonsMobile: true,
-            TabScrollButtonProps: {
-              sx: {
-                "&.Mui-disabled": {
-                  display: contained ? "none" : void 0
+            slotProps: {
+              indicator: {
+                sx: {
+                  ...highlightedPositionSx,
+                  display: "none"
+                }
+              },
+              scrollButtons: {
+                sx: {
+                  "&.Mui-disabled": {
+                    display: contained ? "none" : void 0
+                  }
                 }
               }
             },
-            TabIndicatorProps: {
-              sx: highlightedPositionSx
-            },
             sx: {
-              borderBottom: contained ? `1px solid ${grey200}` : void 0
+              borderBottom: contained && !hideLineTabs ? `1px solid ${grey200}` : void 0,
+              borderTop: !contained && !hideLineTabs ? `1px solid ${grey200}` : void 0
             },
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx151(
           Box_default2,
           {
             sx: {
@@ -25964,7 +26171,7 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx150(
+            children: /* @__PURE__ */ jsx151(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
@@ -25993,8 +26200,8 @@ var Tabs = ({
 var Tabs_default = Tabs;
 
 // src/components/tab/TabContent.tsx
-import { jsx as jsx151 } from "react/jsx-runtime";
-var TabContent = ({ children }) => /* @__PURE__ */ jsx151(
+import { jsx as jsx152 } from "react/jsx-runtime";
+var TabContent = ({ children }) => /* @__PURE__ */ jsx152(
   Box_default2,
   {
     sx: {
@@ -26011,8 +26218,8 @@ import {
   TableRow as MuiTableRow,
   TableCell as MuiTableCell
 } from "@mui/material";
-import { jsx as jsx152 } from "react/jsx-runtime";
-var TableDivider = () => /* @__PURE__ */ jsx152(MuiTableRow, { children: /* @__PURE__ */ jsx152(
+import { jsx as jsx153 } from "react/jsx-runtime";
+var TableDivider = () => /* @__PURE__ */ jsx153(MuiTableRow, { children: /* @__PURE__ */ jsx153(
   MuiTableCell,
   {
     colSpan: 1e3,
@@ -26025,8 +26232,8 @@ var TableDivider_default = TableDivider;
 import {
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { jsx as jsx153 } from "react/jsx-runtime";
-var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx153(MuiTableSortLabel, { ...rest, children });
+import { jsx as jsx154 } from "react/jsx-runtime";
+var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx154(MuiTableSortLabel, { ...rest, children });
 var TableSortLabel_default = TableSortLabel;
 
 // src/components/table/Table.tsx
@@ -26034,21 +26241,21 @@ import {
   TableContainer,
   Table as MuiTable
 } from "@mui/material";
-import { jsx as jsx154 } from "react/jsx-runtime";
-var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx154(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx154(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
+import { jsx as jsx155 } from "react/jsx-runtime";
+var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx155(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx155(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
 var Table_default = Table;
 
 // src/components/table/TableBody.tsx
 import { TableBody as MuiTableBody } from "@mui/material";
-import { jsx as jsx155 } from "react/jsx-runtime";
-var TableBody = ({ children }) => /* @__PURE__ */ jsx155(MuiTableBody, { children });
+import { jsx as jsx156 } from "react/jsx-runtime";
+var TableBody = ({ children }) => /* @__PURE__ */ jsx156(MuiTableBody, { children });
 var TableBody_default = TableBody;
 
 // src/components/table/TableCell.tsx
 import {
   TableCell as MuiTableCell2
 } from "@mui/material";
-import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx157 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   size = "M",
@@ -26059,7 +26266,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx156(
+}) => /* @__PURE__ */ jsx157(
   MuiTableCell2,
   {
     ...rest,
@@ -26084,7 +26291,7 @@ var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
 import * as React85 from "react";
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const { t } = useTranslation();
   const [isCopied, setIsCopied] = React85.useState(false);
@@ -26102,7 +26309,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const getIconId = () => !isCopied ? "content-copy" : "check";
   const iconHiddenClass = "icon-hidden";
   const iconCopiedClass = "icon-copied";
-  return /* @__PURE__ */ jsx157(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx157(
+  return /* @__PURE__ */ jsx158(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx158(
     Stack_default,
     {
       direction: "row",
@@ -26111,7 +26318,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
       onMouseEnter: () => setShowIcon(true),
       onMouseLeave: () => setShowIcon(false),
       onClick: manageButtonClicked,
-      children: /* @__PURE__ */ jsx157(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx157(
+      children: /* @__PURE__ */ jsx158(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx158(
         Button_default,
         {
           className: isCopied ? iconCopiedClass : !showIcon ? iconHiddenClass : "",
@@ -26141,21 +26348,21 @@ var TableCellCopy_default = TableCellCopy;
 
 // src/components/table/TableHead.tsx
 import { TableHead as MuiTableHead } from "@mui/material";
-import { jsx as jsx158 } from "react/jsx-runtime";
-var TableHead = ({ children }) => /* @__PURE__ */ jsx158(MuiTableHead, { children });
+import { jsx as jsx159 } from "react/jsx-runtime";
+var TableHead = ({ children }) => /* @__PURE__ */ jsx159(MuiTableHead, { children });
 var TableHead_default = TableHead;
 
 // src/components/table/TableRow.tsx
 import {
   TableRow as MuiTableRow2
 } from "@mui/material";
-import { jsx as jsx159 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
 var TableRow = ({
   children,
   isFollowedByNestedTable = false,
   fadeInLeftAnimation = false,
   sx
-}) => /* @__PURE__ */ jsx159(
+}) => /* @__PURE__ */ jsx160(
   MuiTableRow2,
   {
     className: `${isFollowedByNestedTable ? "Followed-By-Nested-Table" : ""} ${fadeInLeftAnimation ? "animated fadeInLeft" : ""}`,
@@ -26167,14 +26374,14 @@ var TableRow_default = TableRow;
 
 // src/components/table/NestedTable.tsx
 import { Collapse as Collapse7 } from "@mui/material";
-import { jsx as jsx160 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
 var NestedTable = ({
   colSpan,
   children,
   className = "",
   sx,
   isVisible = true
-}) => /* @__PURE__ */ jsx160(TableRow_default, { children: /* @__PURE__ */ jsx160(
+}) => /* @__PURE__ */ jsx161(TableRow_default, { children: /* @__PURE__ */ jsx161(
   TableCell_default,
   {
     colSpan,
@@ -26183,14 +26390,14 @@ var NestedTable = ({
       height: "auto",
       ...!isVisible && { borderBottom: "none" }
     },
-    children: /* @__PURE__ */ jsx160(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx160(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx160(Paper_default, { children: /* @__PURE__ */ jsx160(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
+    children: /* @__PURE__ */ jsx161(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx161(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx161(Paper_default, { children: /* @__PURE__ */ jsx161(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
   }
 ) });
 var NestedTable_default = NestedTable;
 
 // src/components/toolbar/ToolbarBreadcrumb.tsx
-import { jsx as jsx161 } from "react/jsx-runtime";
-var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx161(
+import { jsx as jsx162 } from "react/jsx-runtime";
+var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx162(
   Stack_default,
   {
     direction: "row",
@@ -26200,7 +26407,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx161(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx161(
+          /* @__PURE__ */ jsx162(
             Typography_default,
             {
               color: grey500,
@@ -26224,9 +26431,9 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
 import * as React86 from "react";
-import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx163 } from "react/jsx-runtime";
 var ToolbarBreadcrumbButton = React86.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx162(
+  return /* @__PURE__ */ jsx163(
     ButtonBase5,
     {
       className: `Cn-ToolbarBreadcrumbButton ${className}`,
@@ -26245,14 +26452,14 @@ var ToolbarBreadcrumbButton = React86.forwardRef(function ToolbarBreadcrumbButto
         }
       },
       ...rest,
-      children: /* @__PURE__ */ jsx162(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
+      children: /* @__PURE__ */ jsx163(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
     }
   );
 });
 var ToolbarBreadcrumbButton_default = ToolbarBreadcrumbButton;
 
 // src/components/toolbar/Toolbar.tsx
-import { jsx as jsx163, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs78 } from "react/jsx-runtime";
 var Toolbar = ({
   children,
   rightActions,
@@ -26293,7 +26500,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx163(
+            leftActions && /* @__PURE__ */ jsx164(
               Box_default2,
               {
                 className: `Cn-Toolbar-left`,
@@ -26303,7 +26510,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx163(
+            /* @__PURE__ */ jsx164(
               Box_default2,
               {
                 className: `Cn-Toolbar-children`,
@@ -26318,7 +26525,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx163(
+      rightActions && /* @__PURE__ */ jsx164(
         Box_default2,
         {
           className: `Cn-Toolbar-right`,
@@ -26339,7 +26546,7 @@ var Toolbar_default = Toolbar;
 // src/components/toolbar/ToolbarTitle.tsx
 import * as React87 from "react";
 import { useState as useState35 } from "react";
-import { jsx as jsx164, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs79 } from "react/jsx-runtime";
 var ToolbarTitle = React87.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
@@ -26349,7 +26556,7 @@ var ToolbarTitle = React87.forwardRef(function ToolbarTitle2({
 }, ref) {
   const textElementRef = React87.useRef(null);
   const [showHoverActions, setShowHoverActions] = useState35(false);
-  return /* @__PURE__ */ jsx164(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx164(
+  return /* @__PURE__ */ jsx165(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx165(
     TextEllipsisTooltip_default,
     {
       title: title ?? "\xA0",
@@ -26372,7 +26579,7 @@ var ToolbarTitle = React87.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx164(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx165(
               Box_default2,
               {
                 sx: {
@@ -26401,13 +26608,13 @@ var Slide_default = Slide;
 
 // src/components/widget/WidgetLegendItem.tsx
 import { ButtonBase as ButtonBase6 } from "@mui/material";
-import { jsx as jsx165, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs80 } from "react/jsx-runtime";
 var WidgetLegendItem = ({
   groupLabel,
   legendDirection = "column",
   items = [],
   onClick
-}) => /* @__PURE__ */ jsx165(
+}) => /* @__PURE__ */ jsx166(
   ButtonBase6,
   {
     tabIndex: onClick ? 0 : -1,
@@ -26433,7 +26640,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx165(
+          groupLabel && /* @__PURE__ */ jsx166(
             Typography_default,
             {
               variant: "overline",
@@ -26465,7 +26672,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx165(
+                    iconColor && /* @__PURE__ */ jsx166(
                       Icon_default,
                       {
                         id: iconId,
@@ -26476,7 +26683,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx165(
+                    label && /* @__PURE__ */ jsx166(
                       Typography_default,
                       {
                         variant: "caption",
@@ -26485,7 +26692,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx165(
+                    value && /* @__PURE__ */ jsx166(
                       Typography_default,
                       {
                         sx: style3,
@@ -26494,7 +26701,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx165(
+                    incrementLabelValue && /* @__PURE__ */ jsx166(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -26520,8 +26727,8 @@ var WidgetLegendItem_default = WidgetLegendItem;
 
 // src/components/widget/Widget.tsx
 import MuiCard2 from "@mui/material/Card";
-import { jsx as jsx166 } from "react/jsx-runtime";
-var Widget = ({ children }) => /* @__PURE__ */ jsx166(
+import { jsx as jsx167 } from "react/jsx-runtime";
+var Widget = ({ children }) => /* @__PURE__ */ jsx167(
   MuiCard2,
   {
     variant: "elevation",
@@ -26545,8 +26752,8 @@ var Widget = ({ children }) => /* @__PURE__ */ jsx166(
 var Widget_default = Widget;
 
 // src/components/widget/WidgetActions.tsx
-import { jsx as jsx167 } from "react/jsx-runtime";
-var WidgetActions = ({ children }) => /* @__PURE__ */ jsx167(
+import { jsx as jsx168 } from "react/jsx-runtime";
+var WidgetActions = ({ children }) => /* @__PURE__ */ jsx168(
   Box_default2,
   {
     sx: {
@@ -26560,8 +26767,8 @@ var WidgetActions = ({ children }) => /* @__PURE__ */ jsx167(
 var WidgetActions_default = WidgetActions;
 
 // src/components/widget/WidgetTitle.tsx
-import { jsx as jsx168 } from "react/jsx-runtime";
-var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx168(
+import { jsx as jsx169 } from "react/jsx-runtime";
+var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx169(
   Box_default2,
   {
     sx: {
@@ -26571,7 +26778,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx168(
+    children: /* @__PURE__ */ jsx169(
       Typography_default,
       {
         variant: "subtitle2",
@@ -26585,12 +26792,12 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       }
     )
   }
-) : /* @__PURE__ */ jsx168("span", {});
+) : /* @__PURE__ */ jsx169("span", {});
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
 import * as React88 from "react";
-import { Fragment as Fragment35, jsx as jsx169, jsxs as jsxs81 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx170, jsxs as jsxs81 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
   L: 500,
@@ -26704,8 +26911,8 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
       }
     }, 750);
   };
-  return /* @__PURE__ */ jsxs81(Fragment35, { children: [
-    isDraggingState && /* @__PURE__ */ jsx169(
+  return /* @__PURE__ */ jsxs81(Fragment36, { children: [
+    isDraggingState && /* @__PURE__ */ jsx170(
       Box_default2,
       {
         sx: {
@@ -26721,7 +26928,7 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx169(
+    /* @__PURE__ */ jsx170(
       Box_default2,
       {
         ref: overlayRef,
@@ -26763,19 +26970,19 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                   onMouseDown: handleMouseDown,
                   minHeight: "44px",
                   children: [
-                    /* @__PURE__ */ jsx169(
+                    /* @__PURE__ */ jsx170(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
-                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx169(
+                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx170(
                           Tooltip_default,
                           {
                             title: t("MINIMIZABLE_WINDOW.GO_BACK"),
                             zIndex: 999999,
                             placement: "top",
-                            children: /* @__PURE__ */ jsx169(
+                            children: /* @__PURE__ */ jsx170(
                               IconButton_default,
                               {
                                 size: iconSizes4,
@@ -26788,7 +26995,7 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                         ) : backButton)
                       }
                     ),
-                    /* @__PURE__ */ jsx169(
+                    /* @__PURE__ */ jsx170(
                       Box_default2,
                       {
                         sx: {
@@ -26796,7 +27003,7 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                           left: "50%",
                           transform: "translateX(-50%)"
                         },
-                        children: typeof title === "string" ? /* @__PURE__ */ jsx169(Typography_default, { children: title }) : title
+                        children: typeof title === "string" ? /* @__PURE__ */ jsx170(Typography_default, { children: title }) : title
                       }
                     ),
                     /* @__PURE__ */ jsxs81(
@@ -26806,13 +27013,13 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
-                          /* @__PURE__ */ jsx169(Box_default2, { children: /* @__PURE__ */ jsx169(
+                          /* @__PURE__ */ jsx170(Box_default2, { children: /* @__PURE__ */ jsx170(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.MINIMIZE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx169(
+                              children: /* @__PURE__ */ jsx170(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -26828,13 +27035,13 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                               )
                             }
                           ) }),
-                          closeable && /* @__PURE__ */ jsx169(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx169(
+                          closeable && /* @__PURE__ */ jsx170(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx170(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx169(
+                              children: /* @__PURE__ */ jsx170(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -26851,7 +27058,7 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx169(
+              /* @__PURE__ */ jsx170(
                 Stack_default,
                 {
                   sx: {
@@ -26870,29 +27077,33 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback20, useContext as useContext16 } from "react";
+import { useCallback as useCallback21, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback20(
+    formatCompactNumber: useCallback21(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback20(
+    formatNumber: useCallback21(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback20(
+    formatPercentage: useCallback21(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback20(
+    formatCurrency: useCallback21(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback20(
+    formatDate: useCallback21(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
+    ),
+    formatPhone: useCallback21(
+      (phone, format2) => formatPhone(phone, format2),
+      []
     )
   };
 };
@@ -27001,6 +27212,7 @@ export {
   Paper_default as Paper,
   PercentageFormatter_default as PercentageFormatter,
   PhoneField_default as PhoneField,
+  PhoneFormatter_default as PhoneFormatter,
   Popover_default as Popover,
   PopoverActions_default as PopoverActions,
   Radio_default as Radio,
@@ -27072,6 +27284,7 @@ export {
   formatDate,
   formatNumber,
   formatPercentage,
+  formatPhone,
   getComparisonInterval,
   getCountryCode,
   getDateInputFormatForLocale,