@connectif/ui-components 3.0.0 → 3.0.2

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;
@@ -5326,7 +5326,9 @@ var tabsTheme = {
   styleOverrides: {
     root: {
       borderBottom: "none",
-      minHeight: "40px"
+      minHeight: "40px",
+      marginRight: "0px",
+      position: "relative"
     },
     indicator: {
       bottom: "0",
@@ -5334,7 +5336,26 @@ var tabsTheme = {
       borderRadius: "8px"
     },
     scrollButtons: {
-      width: "24px"
+      width: "24px",
+      position: "absolute",
+      top: 0,
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      zIndex: 2,
+      "&:not(.Mui-disabled)": {
+        opacity: 1
+      },
+      "&:first-of-type": {
+        left: 0,
+        right: "auto",
+        justifyContent: "start"
+      },
+      "&:last-of-type": {
+        right: 0,
+        left: "auto",
+        justifyContent: "end"
+      }
     }
   }
 };
@@ -16078,104 +16099,138 @@ 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, options) {
+function getDateRangeFromInterval(interval, maxSelectableDays, timezone) {
   const end = tz(timezone).startOf("day");
   const endDate = end.toDate();
-  let finalStartDate;
-  let finalEndDate;
   switch (interval) {
-    case "today": {
-      finalStartDate = end.toDate();
-      finalEndDate = end.add(1, "day").toDate();
-      break;
-    }
-    case "yesterday": {
-      finalStartDate = end.subtract(1, "day").toDate();
-      finalEndDate = endDate;
-      break;
-    }
-    case "thisWeekFromSunday": {
-      finalStartDate = end.clone().day(0).toDate();
-      finalEndDate = end.add(1, "day").toDate();
-      break;
-    }
-    case "thisWeekFromMonday": {
-      finalStartDate = end.clone().day(1).toDate();
-      finalEndDate = end.add(1, "day").toDate();
-      break;
-    }
-    case "thisMonth": {
-      finalStartDate = end.clone().date(1).toDate();
-      finalEndDate = end.add(1, "day").toDate();
-      break;
-    }
-    case "thisYear": {
-      finalStartDate = end.clone().month(0).date(1).toDate();
-      finalEndDate = end.add(1, "day").toDate();
-      break;
-    }
-    case "last7Days": {
-      finalStartDate = end.subtract(7, "days").toDate();
-      finalEndDate = endDate;
-      break;
-    }
-    case "last30Days": {
-      finalStartDate = end.subtract(30, "day").toDate();
-      finalEndDate = endDate;
-      break;
-    }
-    case "last90Days": {
-      finalStartDate = end.subtract(90, "day").toDate();
-      finalEndDate = endDate;
-      break;
-    }
-    case "last12Months": {
-      finalStartDate = end.subtract(12, "month").toDate();
-      finalEndDate = endDate;
-      break;
-    }
-    case "all": {
-      finalStartDate = end.subtract(maxSelectableDays - 1, "day").toDate();
-      finalEndDate = endDate;
-      break;
-    }
+    case "today":
+      return {
+        startDate: end.toDate(),
+        endDate: end.add(1, "day").toDate()
+      };
+    case "yesterday":
+      return {
+        startDate: end.clone().subtract(1, "day").toDate(),
+        endDate
+      };
+    case "thisWeekFromSunday":
+      return {
+        startDate: end.clone().day(0).toDate(),
+        endDate: end.clone().add(1, "day").toDate()
+      };
+    case "thisWeekFromMonday":
+      return {
+        startDate: end.clone().day(1).toDate(),
+        endDate: end.clone().add(1, "day").toDate()
+      };
+    case "thisMonth":
+      return {
+        startDate: end.clone().date(1).toDate(),
+        endDate: end.clone().add(1, "day").toDate()
+      };
+    case "thisYear":
+      return {
+        startDate: end.clone().month(0).date(1).toDate(),
+        endDate: end.clone().add(1, "day").toDate()
+      };
+    case "last7Days":
+      return {
+        startDate: end.clone().subtract(7, "days").toDate(),
+        endDate
+      };
+    case "last30Days":
+      return {
+        startDate: end.clone().subtract(30, "day").toDate(),
+        endDate
+      };
+    case "last90Days":
+      return {
+        startDate: end.clone().subtract(90, "day").toDate(),
+        endDate
+      };
+    case "last12Months":
+      return {
+        startDate: end.clone().subtract(12, "month").toDate(),
+        endDate
+      };
+    case "all":
+      return {
+        startDate: end.clone().subtract(maxSelectableDays - 1, "day").toDate(),
+        endDate
+      };
   }
-  if (!options?.includeTime) {
-    return { startDate: finalStartDate, endDate: finalEndDate };
-  }
-  const now = tz(timezone);
-  const hour = now.hour();
-  const minute = now.minute();
-  const second = now.second();
-  const millisecond = now.millisecond();
-  const startMoment = tz(finalStartDate, timezone).hour(hour).minute(minute).second(second).millisecond(millisecond);
-  const endMoment = tz(finalEndDate, timezone).hour(hour).minute(minute).second(second).millisecond(millisecond);
+}
+function getDateRangeWithTimeFromInterval(interval, maxSelectableDays, timezone) {
+  const currentMoment = tz(timezone);
+  const currentDate = currentMoment.toDate();
   switch (interval) {
     case "today":
       return {
-        startDate: finalStartDate,
-        endDate: endMoment.toDate()
+        startDate: currentMoment.clone().startOf("day").toDate(),
+        endDate: currentDate
       };
     case "yesterday":
       return {
-        startDate: finalStartDate,
-        endDate: tz(finalEndDate, timezone).endOf("day").toDate()
+        startDate: currentMoment.clone().subtract(1, "day").startOf("day").toDate(),
+        endDate: currentMoment.clone().subtract(1, "day").endOf("day").toDate()
       };
-    case "thisYear":
-    case "thisMonth":
-    case "thisWeekFromMonday":
     case "thisWeekFromSunday":
       return {
-        startDate: finalStartDate,
-        endDate: endMoment.toDate()
+        startDate: currentMoment.clone().day(0).startOf("day").toDate(),
+        endDate: currentDate
       };
-    default:
+    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: startMoment.toDate(),
-        endDate: endMoment.toDate()
+        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(
     {
@@ -16239,7 +16294,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) {
@@ -17706,6 +17764,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";
@@ -17763,17 +17847,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,
@@ -17791,15 +17880,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,
@@ -17811,12 +17900,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,
@@ -17824,7 +17913,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: {
@@ -17864,12 +17953,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: {
@@ -17885,7 +17974,7 @@ var Header = ({
           ]
         }
       ),
-      subtitle && /* @__PURE__ */ jsx91(
+      subtitle && /* @__PURE__ */ jsx92(
         Box_default2,
         {
           sx: {
@@ -17893,10 +17982,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 })
     ] })
   }
 ) });
@@ -17908,7 +17997,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,
@@ -18147,7 +18236,7 @@ var ImageEditor = ({
       document.head.removeChild(style3);
     };
   }, []);
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx93(
     Box_default2,
     {
       sx: {
@@ -18214,7 +18303,7 @@ var ImageEditor = ({
         },
         height: "100%"
       },
-      children: /* @__PURE__ */ jsx92(
+      children: /* @__PURE__ */ jsx93(
         FilerobotImageEditor,
         {
           source: imageUrl,
@@ -18334,7 +18423,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}`,
@@ -18379,7 +18468,7 @@ var InfoBox = ({
         ...sx && { sx }
       },
       children: [
-        /* @__PURE__ */ jsx93(
+        /* @__PURE__ */ jsx94(
           Box_default2,
           {
             sx: !expanded && showExpandButton ? {
@@ -18397,7 +18486,7 @@ var InfoBox = ({
             children
           }
         ),
-        showExpandButton && /* @__PURE__ */ jsx93(
+        showExpandButton && /* @__PURE__ */ jsx94(
           IconButton_default,
           {
             iconId: expanded ? "chevron-up" : "chevron-down",
@@ -18416,7 +18505,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",
@@ -18431,7 +18520,7 @@ var TextFieldContainer = React47.forwardRef(function TextFieldContainer2({
   sx,
   "data-test": dataTest
 }, ref) {
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     Box_default2,
     {
       className: `Cn-TextFieldContainer ${className}`,
@@ -18521,7 +18610,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
@@ -18547,7 +18636,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",
@@ -18569,7 +18658,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
@@ -18585,13 +18674,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"
 };
@@ -18732,7 +18821,7 @@ var TextField = React50.forwardRef(function TextField2({
               gap: "8px"
             },
             children: [
-              iconId && /* @__PURE__ */ jsx97(
+              iconId && /* @__PURE__ */ jsx98(
                 Icon_default,
                 {
                   id: iconId,
@@ -18745,7 +18834,7 @@ var TextField = React50.forwardRef(function TextField2({
                 }
               ),
               !groupElements && startAdornment,
-              multiline && /* @__PURE__ */ jsx97(
+              multiline && /* @__PURE__ */ jsx98(
                 StyledTextarea,
                 {
                   ref: ref || inputRef,
@@ -18779,7 +18868,7 @@ var TextField = React50.forwardRef(function TextField2({
                   ...restProps
                 }
               ),
-              !multiline && /* @__PURE__ */ jsx97(
+              !multiline && /* @__PURE__ */ jsx98(
                 StyledInput,
                 {
                   type,
@@ -18817,7 +18906,7 @@ var TextField = React50.forwardRef(function TextField2({
               gap: "8px"
             },
             children: [
-              existsClearButton && /* @__PURE__ */ jsx97(
+              existsClearButton && /* @__PURE__ */ jsx98(
                 IconButton_default,
                 {
                   size: "M",
@@ -18847,8 +18936,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,
@@ -18901,7 +18990,7 @@ var TextField = React50.forwardRef(function TextField2({
       }
     ),
     !groupElements && getTextFieldContainer(),
-    helperText && /* @__PURE__ */ jsx97(
+    helperText && /* @__PURE__ */ jsx98(
       InputHelperText_default,
       {
         severity: isError ? "error" : "info",
@@ -18916,7 +19005,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(
@@ -18930,7 +19019,7 @@ var DebouncedTextField = React51.forwardRef(function DebouncedTextField2({ value
   useEffect10(() => {
     setText(value);
   }, [value]);
-  return /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsx99(
     TextField_default,
     {
       value: text,
@@ -18955,7 +19044,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",
@@ -18963,7 +19052,7 @@ var Popover = ({
   anchorVerticalAlign = "bottom",
   centeredInScreen = false,
   ...props
-}) => /* @__PURE__ */ jsx99(
+}) => /* @__PURE__ */ jsx100(
   MuiPopover,
   {
     disableRestoreFocus: props.disableRestoreFocus,
@@ -18996,7 +19085,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,
@@ -19015,8 +19104,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 })
     ]
   }
 );
@@ -19034,7 +19123,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 = ({
@@ -19052,7 +19141,7 @@ var CalendarDay = ({
   allowKeyboardNavigation = false
 }) => {
   const theme2 = useTheme5();
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(
     CalendarDayButton,
     {
       "data-testid": `calendar-day-${children}`,
@@ -19095,7 +19184,7 @@ var CalendarDay = ({
       },
       role: "button",
       onClick,
-      children: /* @__PURE__ */ jsx101(
+      children: /* @__PURE__ */ jsx102(
         Typography_default,
         {
           sx: {
@@ -19123,7 +19212,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,
@@ -19301,7 +19390,7 @@ var CalendarMonth = ({
       },
       "data-testid": `calendar-month-${year}-${month}`,
       children: [
-        /* @__PURE__ */ jsx102(
+        /* @__PURE__ */ jsx103(
           Typography_default,
           {
             sx: {
@@ -19312,7 +19401,7 @@ var CalendarMonth = ({
                 textTransform: "uppercase"
               }
             },
-            children: /* @__PURE__ */ jsx102(
+            children: /* @__PURE__ */ jsx103(
               DateFormatter_default,
               {
                 date: firstDayOfMonth.toDate(),
@@ -19321,8 +19410,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,
@@ -19340,7 +19429,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(
@@ -19351,7 +19440,7 @@ var DaysOfWeekRow = () => {
     () => getWeekDayNamesForLocale(locale, "narrow", timezone),
     [locale, timezone]
   );
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx104(
     Stack_default,
     {
       direction: "row",
@@ -19361,7 +19450,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: {
@@ -19378,7 +19467,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,
@@ -19403,7 +19492,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,
@@ -19428,14 +19517,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,
@@ -19457,7 +19546,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",
@@ -19492,7 +19581,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(
@@ -19504,13 +19593,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,
@@ -19521,7 +19610,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,
@@ -19547,14 +19636,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,
@@ -19583,7 +19672,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,
@@ -19602,7 +19691,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,
@@ -19633,7 +19722,7 @@ var DateIntervalPickerInputs = ({
     hourLabel,
     color: color3
   }) => /* @__PURE__ */ jsxs48(Stack7, { children: [
-    /* @__PURE__ */ jsx107(
+    /* @__PURE__ */ jsx108(
       TextField_default,
       {
         "data-testid": dataTestId,
@@ -19647,7 +19736,7 @@ var DateIntervalPickerInputs = ({
         activeColor: color3
       }
     ),
-    showTime && /* @__PURE__ */ jsx107(
+    showTime && /* @__PURE__ */ jsx108(
       TimeField_default,
       {
         activeColor: color3,
@@ -19691,7 +19780,7 @@ var DateIntervalPickerInputs = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx107(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
+    /* @__PURE__ */ jsx108(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
       Box_default2,
       {
         sx: {
@@ -19723,7 +19812,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,
@@ -19771,7 +19860,11 @@ var DateIntervalPickerPopover = ({
       timezone,
       { includeTime: !!showTime }
     );
-    const displayEndDate2 = getDisplayEndDate(result.endDate, timezone);
+    const displayEndDate2 = getDisplayEndDate(
+      result.endDate,
+      timezone,
+      !!showTime
+    );
     return {
       startDate: dateInputFormatter(result.startDate),
       endDate: dateInputFormatter(displayEndDate2),
@@ -19825,8 +19918,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",
@@ -19862,7 +19955,7 @@ var DateIntervalPickerPopover = ({
     });
   };
   const handleApply = () => {
-    const parseEndDate = (dateString) => tz4(parseDate(dateString), timezone).add(1, "day").toDate();
+    const parseEndDate = (dateString) => !showTime ? tz4(parseDate(dateString), timezone).add(1, "day").toDate() : tz4(parseDate(dateString), timezone).toDate();
     onApply({
       interval: state.interval,
       startDate: applyTimeToDate(
@@ -20135,7 +20228,7 @@ var DateIntervalPickerPopover = ({
           maxWidth: `${250 + 8 * 2 + 32 * 7}px`
         },
         children: [
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             Box_default2,
             {
               sx: {
@@ -20147,7 +20240,7 @@ var DateIntervalPickerPopover = ({
                 overflowY: "auto"
               },
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx109(
                 DateIntervalPickerList_default,
                 {
                   allowCompare,
@@ -20163,13 +20256,13 @@ var DateIntervalPickerPopover = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             Box_default2,
             {
               sx: {
                 gridArea: "inputs"
               },
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx109(
                 DateIntervalPickerInputs_default,
                 {
                   color: color2,
@@ -20194,13 +20287,13 @@ var DateIntervalPickerPopover = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             Box_default2,
             {
               sx: {
                 gridArea: "calendar"
               },
-              children: /* @__PURE__ */ jsx108(
+              children: /* @__PURE__ */ jsx109(
                 CalendarScrollPicker_default,
                 {
                   minDate: {
@@ -20239,11 +20332,11 @@ var DateIntervalPickerPopover = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx108(
+    /* @__PURE__ */ jsx109(
       PopoverActions_default,
       {
         sx: { padding: "16px 24px" },
-        leftContent: /* @__PURE__ */ jsx108(
+        leftContent: /* @__PURE__ */ jsx109(
           Button_default,
           {
             variant: "contained",
@@ -20252,7 +20345,7 @@ var DateIntervalPickerPopover = ({
             text: t("DATE_INTERVAL_PICKER.CANCEL")
           }
         ),
-        rightContent: /* @__PURE__ */ jsx108(
+        rightContent: /* @__PURE__ */ jsx109(
           Button_default,
           {
             variant: "contained",
@@ -20269,7 +20362,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,
@@ -20307,7 +20400,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();
@@ -20327,7 +20420,7 @@ var DateIntervalPicker = ({
         disabled,
         onClick: handleButtonClick,
         children: [
-          /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx110(
             "span",
             {
               style: {
@@ -20337,7 +20430,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]}`
               ) })
             }
@@ -20352,7 +20445,7 @@ var DateIntervalPicker = ({
               },
               children: [
                 /* @__PURE__ */ jsxs50("div", { children: [
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx110(
                     DateFormatter_default,
                     {
                       date: startDate,
@@ -20362,7 +20455,7 @@ var DateIntervalPicker = ({
                     }
                   ),
                   isEndDateVisible && " - ",
-                  isEndDateVisible && /* @__PURE__ */ jsx109(
+                  isEndDateVisible && /* @__PURE__ */ jsx110(
                     DateFormatter_default,
                     {
                       date: displayEndDate,
@@ -20383,7 +20476,7 @@ var DateIntervalPicker = ({
                     children: [
                       t("DATE_INTERVAL_PICKER.COMPARE"),
                       ": ",
-                      /* @__PURE__ */ jsx109(
+                      /* @__PURE__ */ jsx110(
                         DateFormatter_default,
                         {
                           date: comparisonStartDate,
@@ -20393,7 +20486,7 @@ var DateIntervalPicker = ({
                         }
                       ),
                       " - ",
-                      /* @__PURE__ */ jsx109(
+                      /* @__PURE__ */ jsx110(
                         DateFormatter_default,
                         {
                           date: comparisonEndDate,
@@ -20408,11 +20501,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,
       {
         ...{
@@ -20445,7 +20538,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,
@@ -20459,7 +20552,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: {
@@ -20493,7 +20586,7 @@ var SelectPopoverItem = ({
                 boxSizing: "border-box"
               },
               children: [
-                /* @__PURE__ */ jsx110(
+                /* @__PURE__ */ jsx111(
                   TextEllipsis_default,
                   {
                     color: Colors_exports.grey800,
@@ -20502,8 +20595,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,
@@ -20521,7 +20614,7 @@ var SelectPopoverItem = ({
                     ] })
                   }
                 ),
-                subtitle1 && /* @__PURE__ */ jsx110(
+                subtitle1 && /* @__PURE__ */ jsx111(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20531,7 +20624,7 @@ var SelectPopoverItem = ({
                     children: subtitle1
                   }
                 ),
-                isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                isLoadingSubtitle2 && /* @__PURE__ */ jsx111(
                   Skeleton_default,
                   {
                     variant: "text",
@@ -20543,7 +20636,7 @@ var SelectPopoverItem = ({
                     }
                   }
                 ),
-                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
+                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx111(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20556,7 +20649,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,
@@ -20587,7 +20680,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",
@@ -20618,7 +20711,7 @@ var BootstrapInput = styled7(InputBase)(() => ({
     borderColor: grey800
   }
 }));
-var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx111(
+var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx112(
   Icon_default,
   {
     id: "chevron-down",
@@ -20636,7 +20729,7 @@ var SelectOption = ({
   selected,
   colors,
   ...rest
-}) => /* @__PURE__ */ jsx111(
+}) => /* @__PURE__ */ jsx112(
   ListItemButton_default,
   {
     role: "option",
@@ -20703,7 +20796,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() ?? "",
@@ -20734,7 +20827,7 @@ var Select = function Select2({
       currentValue ?? ""
     );
   };
-  const getVirtualizedSelect = () => /* @__PURE__ */ jsx111(
+  const getVirtualizedSelect = () => /* @__PURE__ */ jsx112(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20770,8 +20863,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();
@@ -20787,7 +20880,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;
       },
@@ -20820,7 +20913,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,
@@ -20834,7 +20927,7 @@ var Select = function Select2({
       ) })
     }
   );
-  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx111(
+  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx112(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20874,9 +20967,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();
@@ -20892,7 +20985,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);
@@ -20901,7 +20994,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;
         }
@@ -20926,7 +21019,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() ?? "",
@@ -20943,7 +21036,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
@@ -20954,7 +21047,7 @@ var TimezoneSelector = ({
     onTimezoneChange(timezone);
   };
   const timeZones = moment2.tz.names();
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx113(
     Select_default,
     {
       value: selectedTimezone,
@@ -20968,7 +21061,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(
@@ -20988,7 +21081,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
     "saturday",
     "sunday"
   ];
-  return /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx114(
     Stack_default,
     {
       direction: "row",
@@ -20997,7 +21090,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: {
@@ -21020,7 +21113,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))
     }
@@ -21033,7 +21126,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 = [
@@ -21104,7 +21197,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",
@@ -21126,8 +21219,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,
@@ -21152,7 +21245,7 @@ var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
         ref
       }
     ),
-    /* @__PURE__ */ jsx114(
+    /* @__PURE__ */ jsx115(
       Popover_default,
       {
         anchorEl,
@@ -21161,7 +21254,7 @@ var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
         onMouseUp: () => {
           setValidPickerChange(true);
         },
-        children: /* @__PURE__ */ jsx114(
+        children: /* @__PURE__ */ jsx115(
           Box_default2,
           {
             className: "Cn-Color-Gradient-Box",
@@ -21205,7 +21298,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",
@@ -21236,7 +21329,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,
@@ -21250,7 +21343,7 @@ var UploadClickableArea = ({
       display: "inline-block"
     },
     children: [
-      /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsx116(
         "input",
         {
           type: "file",
@@ -21268,8 +21361,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",
@@ -21364,8 +21457,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,
@@ -21380,7 +21473,7 @@ var CategorizedPicker = function CategorizedPicker2({
         value: value?.name || "",
         displayEmpty: true,
         disabled,
-        input: /* @__PURE__ */ jsx116(
+        input: /* @__PURE__ */ jsx117(
           BootstrapInput,
           {
             sx: {
@@ -21389,7 +21482,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();
@@ -21397,10 +21490,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,
@@ -21422,7 +21515,7 @@ var CategorizedPicker = function CategorizedPicker2({
           }
         },
         children: /* @__PURE__ */ jsxs54(Grid3, { container: true, children: [
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx117(
             Grid3,
             {
               size: {
@@ -21430,7 +21523,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               padding: "8px",
               borderBottom: `1px solid ${grey200}`,
-              children: /* @__PURE__ */ jsx116(
+              children: /* @__PURE__ */ jsx117(
                 DebouncedTextField_default,
                 {
                   placeholder: t(
@@ -21438,12 +21531,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: {
@@ -21452,14 +21545,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",
@@ -21467,10 +21560,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,
@@ -21488,7 +21581,7 @@ var CategorizedPicker = function CategorizedPicker2({
               )) })
             }
           ),
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx117(
             Grid3,
             {
               size: {
@@ -21496,7 +21589,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",
@@ -21508,7 +21601,7 @@ var CategorizedPicker = function CategorizedPicker2({
                   )
                 }
               ) }) : selectedCategory.categoryOptions.map(
-                (option, idx) => /* @__PURE__ */ jsx116(
+                (option, idx) => /* @__PURE__ */ jsx117(
                   ListItemButton_default,
                   {
                     selected: value?.id === option.id,
@@ -21517,10 +21610,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,
@@ -21553,7 +21646,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: ""
@@ -21698,14 +21791,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",
@@ -21720,7 +21813,7 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsx118(
           InfiniteScroll,
           {
             height: 300,
@@ -21782,7 +21875,7 @@ var SelectPopover = function SelectPopover2({
                       onItemSelected
                     ) : getItemElement(item, onItemSelected)
                   ),
-                  isLoading && /* @__PURE__ */ jsx117(
+                  isLoading && /* @__PURE__ */ jsx118(
                     Skeleton_default,
                     {
                       variant: "text",
@@ -21795,13 +21888,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 : ""
                 ]
@@ -21809,11 +21902,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",
@@ -21823,7 +21916,7 @@ var SelectPopover = function SelectPopover2({
                 onClick: closePopover
               }
             ),
-            rightContent: /* @__PURE__ */ jsx117(
+            rightContent: /* @__PURE__ */ jsx118(
               Button_default,
               {
                 variant: "contained",
@@ -21847,7 +21940,7 @@ var SelectPopover = function SelectPopover2({
   );
 };
 function getItemElement(item, onItemClick) {
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx118(
     SelectPopoverItem_default,
     {
       id: item.id,
@@ -21876,7 +21969,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,
@@ -21930,7 +22023,7 @@ var ItemSelector = function ItemSelector2({
     item
   }) => {
     const [ref, { contentWidth: width2 }] = useResizeObserver();
-    return /* @__PURE__ */ jsx118(
+    return /* @__PURE__ */ jsx119(
       Chip_default,
       {
         ref,
@@ -21960,8 +22053,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,
@@ -21977,17 +22070,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",
@@ -21997,7 +22090,7 @@ var ItemSelector = function ItemSelector2({
               )
             ] });
           } else {
-            component = /* @__PURE__ */ jsxs56(Fragment24, { children: [
+            component = /* @__PURE__ */ jsxs56(Fragment25, { children: [
               /* @__PURE__ */ jsxs56(
                 Stack_default,
                 {
@@ -22012,7 +22105,7 @@ var ItemSelector = function ItemSelector2({
                       const item = selectedItems.find(
                         (i) => i.id === id
                       );
-                      return item ? /* @__PURE__ */ jsx118(
+                      return item ? /* @__PURE__ */ jsx119(
                         ItemChip,
                         {
                           item: {
@@ -22021,14 +22114,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",
@@ -22045,24 +22138,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",
@@ -22080,7 +22173,7 @@ var ItemSelector = function ItemSelector2({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx118(
+                /* @__PURE__ */ jsx119(
                   Divider_default,
                   {
                     variant: "middle",
@@ -22091,7 +22184,7 @@ var ItemSelector = function ItemSelector2({
               ] })
             ] });
           }
-          return /* @__PURE__ */ jsx118(
+          return /* @__PURE__ */ jsx119(
             Stack_default,
             {
               direction: "row",
@@ -22113,8 +22206,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) => {
@@ -22179,7 +22272,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",
@@ -22375,7 +22468,7 @@ var Autocomplete = function Autocomplete2({
     style: style3
   }) => {
     const option = filteredOptions[index];
-    return /* @__PURE__ */ jsx119(
+    return /* @__PURE__ */ jsx120(
       ListItemButton_default,
       {
         selected: index === selectedIndex,
@@ -22384,7 +22477,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"
@@ -22396,8 +22489,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,
@@ -22487,7 +22580,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)(
@@ -22507,12 +22600,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",
@@ -22525,7 +22618,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),
@@ -22545,7 +22638,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}` })
                 }
               ) : ""
             ]
@@ -22562,7 +22655,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",
@@ -22585,7 +22678,7 @@ var Autocomplete = function Autocomplete2({
                   "data-test": "clear-autocomplete"
                 }
               ) }),
-              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx119(
+              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx120(
                 Divider_default,
                 {
                   variant: "middle",
@@ -22593,11 +22686,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,
@@ -22619,7 +22712,7 @@ var Autocomplete = function Autocomplete2({
         autoComplete: "off"
       }
     ),
-    /* @__PURE__ */ jsx119(
+    /* @__PURE__ */ jsx120(
       ClickAwayListener,
       {
         onClickAway: (event) => {
@@ -22644,13 +22737,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: {
@@ -22662,22 +22755,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,
@@ -22745,7 +22838,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"
@@ -22767,7 +22860,7 @@ var CodeEditor = function CodeEditor2({
     linter(linterOptions?.source || null, linterOptions?.config),
     ...extensions
   ] : extensions;
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx121(
     CodeMirror,
     {
       ...rest,
@@ -22786,7 +22879,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 = ({
@@ -22829,8 +22922,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,
@@ -22849,7 +22942,7 @@ var CodeEditorPopup = ({
             justifyContent: "space-between",
             paddingTop: "20px",
             children: [
-              /* @__PURE__ */ jsx121(
+              /* @__PURE__ */ jsx122(
                 Box_default2,
                 {
                   flexGrow: 1,
@@ -22866,7 +22959,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,
@@ -22895,7 +22988,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"
                         ) })
                       ]
@@ -22903,13 +22996,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(
@@ -22926,7 +23019,7 @@ var CodeEditorPopup = ({
         )
       }
     ),
-    !readonly && /* @__PURE__ */ jsx121(
+    !readonly && /* @__PURE__ */ jsx122(
       ConfirmationDialog_default,
       {
         fullScreen: true,
@@ -22945,7 +23038,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",
@@ -22953,7 +23046,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,
@@ -22982,7 +23075,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"
               ) })
             ]
@@ -22995,7 +23088,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",
@@ -23281,8 +23374,8 @@ var TextEditor = function TextEditor2({
         };
     }
   };
-  return /* @__PURE__ */ jsxs59(Fragment27, { children: [
-    /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs59(Fragment28, { children: [
+    /* @__PURE__ */ jsx123(
       Editor,
       {
         id,
@@ -23302,7 +23395,7 @@ var TextEditor = function TextEditor2({
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx122(
+    /* @__PURE__ */ jsx123(
       CodeEditorPopup_default,
       {
         value: contentValue,
@@ -23338,7 +23431,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,
@@ -23401,7 +23494,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",
@@ -23417,13 +23510,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
       ] }),
@@ -23437,7 +23530,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,
@@ -23600,12 +23693,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,
@@ -23616,12 +23709,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,
@@ -23641,7 +23734,7 @@ var NumberField = React70.forwardRef(function NumberField2({
       setTextValue(numberToString(value));
     }
   }, [numberToString, stringToNumber, textValue, value]);
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx125(
     TextField_default,
     {
       ...rest,
@@ -23663,7 +23756,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 = ({
@@ -23771,7 +23864,7 @@ var DatePickerStatic = ({
             spacing: 2,
             justifyContent: "space-between",
             children: [
-              /* @__PURE__ */ jsx125(
+              /* @__PURE__ */ jsx126(
                 Select_default,
                 {
                   value: visibleMonth.year,
@@ -23780,7 +23873,7 @@ var DatePickerStatic = ({
                 }
               ),
               /* @__PURE__ */ jsxs62(Stack_default, { direction: "row", spacing: 2, children: [
-                /* @__PURE__ */ jsx125(
+                /* @__PURE__ */ jsx126(
                   IconButton_default,
                   {
                     disabled: isDisabledPreviousMonth,
@@ -23788,7 +23881,7 @@ var DatePickerStatic = ({
                     onClick: navigatePreviousMonth
                   }
                 ),
-                /* @__PURE__ */ jsx125(
+                /* @__PURE__ */ jsx126(
                   IconButton_default,
                   {
                     disabled: isDisabledNextMonth,
@@ -23800,8 +23893,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,
@@ -23838,14 +23931,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,
@@ -23857,7 +23950,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);
@@ -23933,8 +24026,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,
@@ -23945,7 +24038,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",
@@ -23957,7 +24050,7 @@ var DatePicker = React72.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ jsx127(
+      /* @__PURE__ */ jsx128(
         DatePickerPopover_default,
         {
           anchorEl,
@@ -23976,14 +24069,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,
@@ -24009,8 +24102,8 @@ var Checkbox = ({
   inputClass,
   onChange,
   tabIndex
-}) => /* @__PURE__ */ jsxs64(Fragment30, { children: [
-  !label && /* @__PURE__ */ jsx128(
+}) => /* @__PURE__ */ jsxs64(Fragment31, { children: [
+  !label && /* @__PURE__ */ jsx129(
     MaterialCheckbox,
     {
       disabled,
@@ -24021,11 +24114,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,
@@ -24036,7 +24129,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,
@@ -24051,7 +24144,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",
@@ -24069,7 +24162,7 @@ var Radio = React73.forwardRef(function Radio2({
     },
     [onChange]
   );
-  const radio = /* @__PURE__ */ jsx129(
+  const radio = /* @__PURE__ */ jsx130(
     MuiRadio,
     {
       className: `Cn-Radio ${className}`,
@@ -24088,13 +24181,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,
@@ -24108,7 +24201,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,
@@ -24135,7 +24228,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: {
@@ -24144,7 +24237,7 @@ var PageSelector = ({
           }
         ) }),
         /* @__PURE__ */ jsxs66(Stack_default, { direction: "row", alignItems: "center", children: [
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             IconButton_default,
             {
               iconId: "chevron-left",
@@ -24152,7 +24245,7 @@ var PageSelector = ({
               disabled: currentPage <= 1
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             NumberField_default,
             {
               value: currentPage,
@@ -24170,7 +24263,7 @@ var PageSelector = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             IconButton_default,
             {
               iconId: "chevron-right",
@@ -24190,13 +24283,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,
@@ -24223,7 +24316,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",
@@ -24262,7 +24355,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,
@@ -24271,14 +24364,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%",
@@ -24288,7 +24381,7 @@ var CircularProgress = ({
             ]
           }
         ) }) }),
-        showCircularBackground && /* @__PURE__ */ jsx132(
+        showCircularBackground && /* @__PURE__ */ jsx133(
           Box4,
           {
             sx: {
@@ -24301,7 +24394,7 @@ var CircularProgress = ({
                 maxHeight: circularSizes[size]
               }
             },
-            children: /* @__PURE__ */ jsx132(
+            children: /* @__PURE__ */ jsx133(
               MuiCircularProgress,
               {
                 variant: "determinate",
@@ -24313,7 +24406,7 @@ var CircularProgress = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx132(
+        /* @__PURE__ */ jsx133(
           MuiCircularProgress,
           {
             variant,
@@ -24342,7 +24435,7 @@ var CircularProgress = ({
             thickness
           }
         ),
-        variant !== "indeterminate" && /* @__PURE__ */ jsx132(
+        variant !== "indeterminate" && /* @__PURE__ */ jsx133(
           Box4,
           {
             sx: {
@@ -24357,7 +24450,7 @@ var CircularProgress = ({
               height: circularSizes[size],
               width: circularSizes[size]
             },
-            children: typeof label === "string" ? /* @__PURE__ */ jsx132(
+            children: typeof label === "string" ? /* @__PURE__ */ jsx133(
               Typography3,
               {
                 variant: typographyVariant,
@@ -24377,7 +24470,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: {
@@ -24414,8 +24507,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",
@@ -24434,7 +24527,7 @@ var DonutProgress = ({
         width: "fit-content"
       },
       children: [
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx134(
           CircularProgress_default,
           {
             variant: "determinate",
@@ -24450,7 +24543,7 @@ var DonutProgress = ({
             color: variants2[variant].emptyColor
           }
         ),
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx134(
           Box5,
           {
             sx: {
@@ -24458,7 +24551,7 @@ var DonutProgress = ({
               top: 0,
               left: 0
             },
-            children: /* @__PURE__ */ jsx133(
+            children: /* @__PURE__ */ jsx134(
               CircularProgress_default,
               {
                 variant: "determinate",
@@ -24473,7 +24566,7 @@ var DonutProgress = ({
             )
           }
         ),
-        variant !== "empty" && labelChip && /* @__PURE__ */ jsx133(
+        variant !== "empty" && labelChip && /* @__PURE__ */ jsx134(
           Box5,
           {
             sx: {
@@ -24490,7 +24583,7 @@ var DonutProgress = ({
               justifyContent: "center",
               boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsx133(
+            children: /* @__PURE__ */ jsx134(
               Typography_default,
               {
                 variant: "tooltip",
@@ -24507,14 +24600,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: {
@@ -24530,7 +24623,7 @@ var Loader = ({
       backgroundColor: whiteOpacity32,
       ...sx
     },
-    children: !hideProgress && /* @__PURE__ */ jsx134(CircularProgress_default, { size })
+    children: !hideProgress && /* @__PURE__ */ jsx135(CircularProgress_default, { size })
   }
 ) });
 var Loader_default = Loader;
@@ -24543,14 +24636,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: $",
@@ -24561,7 +24654,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,
@@ -24665,11 +24758,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;
@@ -24699,11 +24792,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 = ({
@@ -24713,19 +24806,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 }
             }
@@ -24740,7 +24833,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,
@@ -24748,7 +24841,7 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs70(Fragment32, { children: [
+}) => /* @__PURE__ */ jsxs70(Fragment33, { children: [
   /* @__PURE__ */ jsxs70(
     Box_default2,
     {
@@ -24764,8 +24857,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 })
       ]
     }
   ),
@@ -24792,8 +24885,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 })
       ]
     }
   )
@@ -24803,7 +24896,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,
@@ -24828,7 +24921,7 @@ var NavbarButton = React77.forwardRef(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Box6,
               {
                 sx: {
@@ -24844,7 +24937,7 @@ var NavbarButton = React77.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Box6,
               {
                 sx: {
@@ -24877,7 +24970,7 @@ var NavbarButton = React77.forwardRef(
         },
         children: [
           srcUrl ? getButtonContent(
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Avatar_default,
               {
                 className: "NavbarButton-icon",
@@ -24887,7 +24980,7 @@ var NavbarButton = React77.forwardRef(
               }
             )
           ) : getButtonContent(
-            /* @__PURE__ */ jsx138(
+            /* @__PURE__ */ jsx139(
               Icon_default,
               {
                 id: iconId,
@@ -24903,7 +24996,7 @@ var NavbarButton = React77.forwardRef(
               }
             )
           ),
-          badgeIconProps && /* @__PURE__ */ jsx138(
+          badgeIconProps && /* @__PURE__ */ jsx139(
             Icon_default,
             {
               ...badgeIconProps,
@@ -24925,8 +25018,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: {
@@ -24948,10 +25041,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,
@@ -24962,7 +25055,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" })
       }
     );
   }
@@ -24971,7 +25064,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,
@@ -25012,8 +25105,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: {
@@ -25030,7 +25123,7 @@ var DonutFocusOverlay = ({
         }
       }
     ),
-    chipLabel && /* @__PURE__ */ jsx141(
+    chipLabel && /* @__PURE__ */ jsx142(
       Chip_default,
       {
         label: chipLabel,
@@ -25057,7 +25150,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,
@@ -25071,10 +25164,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,
@@ -25083,9 +25176,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,
@@ -25108,7 +25201,7 @@ var Pager = ({
       " ",
       total
     ] }),
-    /* @__PURE__ */ jsx142(
+    /* @__PURE__ */ jsx143(
       IconButton_default,
       {
         disabled: page <= 1,
@@ -25116,7 +25209,7 @@ var Pager = ({
         onClick: () => onPageChange(page - 1, pageSize)
       }
     ),
-    /* @__PURE__ */ jsx142(
+    /* @__PURE__ */ jsx143(
       IconButton_default,
       {
         disabled: page > total / pageSize,
@@ -25131,7 +25224,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,
@@ -25181,7 +25274,7 @@ var HorizontalScrollable = ({
     current.scrollBy(stepDistance, 0);
   };
   return /* @__PURE__ */ jsxs74(Box_default2, { sx: { position: "relative", ...style3 }, children: [
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx144(
       ButtonBase4,
       {
         sx: {
@@ -25198,10 +25291,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,
@@ -25220,7 +25313,7 @@ var HorizontalScrollable = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx144(
       ButtonBase4,
       {
         sx: {
@@ -25237,7 +25330,7 @@ var HorizontalScrollable = ({
           ...isRightArrowHidden && { display: "none" }
         },
         onClick: () => rightScroll(),
-        children: /* @__PURE__ */ jsx143(Icon_default, { id: "chevron-right" })
+        children: /* @__PURE__ */ jsx144(Icon_default, { id: "chevron-right" })
       }
     )
   ] });
@@ -25246,7 +25339,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",
@@ -25502,7 +25595,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: {
@@ -25514,7 +25607,7 @@ function Carousel({
         }
       },
       children: [
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx145(
           IconButton_default,
           {
             iconId: "chevron-left",
@@ -25527,7 +25620,7 @@ function Carousel({
             onClick: () => scrollToNext("left")
           }
         ),
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx145(
           Box_default2,
           {
             ref: containerRef,
@@ -25540,7 +25633,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: {
@@ -25555,7 +25648,7 @@ function Carousel({
             ))
           }
         ),
-        /* @__PURE__ */ jsx144(
+        /* @__PURE__ */ jsx145(
           IconButton_default,
           {
             iconId: "chevron-right",
@@ -25578,12 +25671,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,
@@ -25604,7 +25697,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",
@@ -25647,7 +25740,7 @@ var Snackbar = React82.forwardRef(
     const closeClickHandler = React82.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
-    return /* @__PURE__ */ jsx146(
+    return /* @__PURE__ */ jsx147(
       SnackbarContent,
       {
         ref,
@@ -25672,7 +25765,7 @@ var Snackbar = React82.forwardRef(
             spacing: 2,
             sx: { width: "100%", alignItems: "center" },
             children: [
-              withIcon && /* @__PURE__ */ jsx146(
+              withIcon && /* @__PURE__ */ jsx147(
                 Box_default2,
                 {
                   sx: {
@@ -25680,10 +25773,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",
@@ -25691,7 +25784,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: {
@@ -25706,7 +25799,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",
@@ -25731,7 +25824,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,
@@ -25747,7 +25840,7 @@ var enqueueSnackbar = (message, options = {}) => {
     autoHideDuration: autoHideDurationMs ?? 1e4,
     persist: persist ?? false,
     content(key, message2) {
-      return /* @__PURE__ */ jsx147(
+      return /* @__PURE__ */ jsx148(
         Snackbar_default,
         {
           identifierKey: key,
@@ -25764,18 +25857,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 = "center",
-  marginRight = "24px",
+  marginRight = "0px",
   dataTestId,
   ...rest
-}) => /* @__PURE__ */ jsx148(
+}) => /* @__PURE__ */ jsx149(
   MuiTab,
   {
-    label: /* @__PURE__ */ jsx148(
+    label: /* @__PURE__ */ jsx149(
       "div",
       {
         style: {
@@ -25783,7 +25876,6 @@ var TabButton = ({
           flexDirection: "column",
           alignItems: textAlign === "left" ? "start" : "center",
           width: textAlign === "center" ? "100%" : void 0,
-          marginRight: "24px",
           textTransform: "none",
           ...variants["body1-semibold"]
         },
@@ -25794,7 +25886,7 @@ var TabButton = ({
       minHeight: "36px",
       alignItems: "start",
       justifyContent: "center",
-      padding: "10px 0",
+      padding: "8px 12px",
       marginRight,
       borderRadius: "8px",
       transition: "background 0.2s",
@@ -25817,7 +25909,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%",
@@ -25892,7 +25984,7 @@ function SwipeableViews({
     }
   }, [index]);
   const hasShowTab = (childIndex) => childIndex === index || childIndex === previousIndex;
-  return /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsx150(
     "div",
     {
       ...rootProps,
@@ -25920,7 +26012,7 @@ function SwipeableViews({
         if (React83.isValidElement(child)) {
           mountedChild = !!child.props.keepMounted;
         }
-        return /* @__PURE__ */ jsx149(
+        return /* @__PURE__ */ jsx150(
           "div",
           {
             style: Object.assign(
@@ -25945,7 +26037,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,
@@ -25957,7 +26049,8 @@ var Tabs = ({
   scrollbarGutter,
   disableContentScroll = false,
   hideScrollButtons = false,
-  hideLineTabs = false
+  hideLineTabs = false,
+  backgroundScrollButtons = Colors_exports.white
 }) => {
   const tabsRef = React84.useRef(null);
   const [value, setValue] = React84.useState(0);
@@ -26057,7 +26150,7 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx151(
           MuiTabs,
           {
             ref: tabsRef,
@@ -26079,6 +26172,12 @@ var Tabs = ({
                 sx: {
                   "&.Mui-disabled": {
                     display: contained ? "none" : void 0
+                  },
+                  "&:first-of-type": {
+                    background: `linear-gradient(to left, transparent 0%, transparent 5%, ${backgroundScrollButtons} 28%, ${backgroundScrollButtons} 100%);`
+                  },
+                  "&:last-of-type": {
+                    background: `linear-gradient(to right, transparent 0%, transparent 5%, ${backgroundScrollButtons} 28%, ${backgroundScrollButtons} 100%);`
                   }
                 }
               }
@@ -26090,7 +26189,7 @@ var Tabs = ({
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx151(
           Box_default2,
           {
             sx: {
@@ -26099,7 +26198,7 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx150(
+            children: /* @__PURE__ */ jsx151(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
@@ -26128,8 +26227,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: {
@@ -26146,8 +26245,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,
@@ -26160,8 +26259,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
@@ -26169,21 +26268,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",
@@ -26194,7 +26293,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx156(
+}) => /* @__PURE__ */ jsx157(
   MuiTableCell2,
   {
     ...rest,
@@ -26219,7 +26318,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);
@@ -26237,7 +26336,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",
@@ -26246,7 +26345,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 : "",
@@ -26276,21 +26375,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" : ""}`,
@@ -26302,14 +26401,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,
@@ -26318,14 +26417,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",
@@ -26335,7 +26434,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx161(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx161(
+          /* @__PURE__ */ jsx162(
             Typography_default,
             {
               color: grey500,
@@ -26359,9 +26458,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}`,
@@ -26380,14 +26479,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,
@@ -26428,7 +26527,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx163(
+            leftActions && /* @__PURE__ */ jsx164(
               Box_default2,
               {
                 className: `Cn-Toolbar-left`,
@@ -26438,7 +26537,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx163(
+            /* @__PURE__ */ jsx164(
               Box_default2,
               {
                 className: `Cn-Toolbar-children`,
@@ -26453,7 +26552,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx163(
+      rightActions && /* @__PURE__ */ jsx164(
         Box_default2,
         {
           className: `Cn-Toolbar-right`,
@@ -26474,7 +26573,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",
@@ -26484,7 +26583,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",
@@ -26507,7 +26606,7 @@ var ToolbarTitle = React87.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx164(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx165(
               Box_default2,
               {
                 sx: {
@@ -26536,13 +26635,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,
@@ -26568,7 +26667,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx165(
+          groupLabel && /* @__PURE__ */ jsx166(
             Typography_default,
             {
               variant: "overline",
@@ -26600,7 +26699,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx165(
+                    iconColor && /* @__PURE__ */ jsx166(
                       Icon_default,
                       {
                         id: iconId,
@@ -26611,7 +26710,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx165(
+                    label && /* @__PURE__ */ jsx166(
                       Typography_default,
                       {
                         variant: "caption",
@@ -26620,7 +26719,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx165(
+                    value && /* @__PURE__ */ jsx166(
                       Typography_default,
                       {
                         sx: style3,
@@ -26629,7 +26728,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx165(
+                    incrementLabelValue && /* @__PURE__ */ jsx166(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -26655,8 +26754,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",
@@ -26680,8 +26779,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: {
@@ -26695,8 +26794,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: {
@@ -26706,7 +26805,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx168(
+    children: /* @__PURE__ */ jsx169(
       Typography_default,
       {
         variant: "subtitle2",
@@ -26720,12 +26819,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,
@@ -26839,8 +26938,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: {
@@ -26856,7 +26955,7 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx169(
+    /* @__PURE__ */ jsx170(
       Box_default2,
       {
         ref: overlayRef,
@@ -26898,19 +26997,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,
@@ -26923,7 +27022,7 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                         ) : backButton)
                       }
                     ),
-                    /* @__PURE__ */ jsx169(
+                    /* @__PURE__ */ jsx170(
                       Box_default2,
                       {
                         sx: {
@@ -26931,7 +27030,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(
@@ -26941,13 +27040,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,
@@ -26963,13 +27062,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,
@@ -26986,7 +27085,7 @@ var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx169(
+              /* @__PURE__ */ jsx170(
                 Stack_default,
                 {
                   sx: {
@@ -27028,6 +27127,10 @@ var useFormatters = () => {
     formatDate: useCallback21(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
+    ),
+    formatPhone: useCallback21(
+      (phone, format2) => formatPhone(phone, format2),
+      []
     )
   };
 };
@@ -27136,6 +27239,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,
@@ -27207,6 +27311,7 @@ export {
   formatDate,
   formatNumber,
   formatPercentage,
+  formatPhone,
   getComparisonInterval,
   getCountryCode,
   getDateInputFormatForLocale,