@connectif/ui-components 2.3.4 → 2.4.1

package/dist/index.js

@@ -373,7 +373,7 @@ var require_factoryWithTypeCheckers = __commonJS({
     function emptyFunctionThatReturnsNull() {
       return null;
     }
-    module.exports = function(isValidElement4, throwOnDirectAccess) {
+    module.exports = function(isValidElement5, throwOnDirectAccess) {
       var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
       var FAUX_ITERATOR_SYMBOL = "@@iterator";
       function getIteratorFn(maybeIterable) {
@@ -501,7 +501,7 @@ var require_factoryWithTypeCheckers = __commonJS({
       function createElementTypeChecker() {
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
-          if (!isValidElement4(propValue)) {
+          if (!isValidElement5(propValue)) {
             var propType = getPropType(propValue);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
           }
@@ -689,7 +689,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             if (Array.isArray(propValue)) {
               return propValue.every(isNode);
             }
-            if (propValue === null || isValidElement4(propValue)) {
+            if (propValue === null || isValidElement5(propValue)) {
               return true;
             }
             var iteratorFn = getIteratorFn(propValue);
@@ -1255,6 +1255,7 @@ import {
   mdiCellphoneLink,
   mdiCellphoneLinkOff,
   mdiCellphoneMessage,
+  mdiCellphoneOff,
   mdiCellphoneSettings,
   mdiCertificate,
   mdiChairSchool,
@@ -1585,6 +1586,7 @@ import {
   mdiFilmstrip,
   mdiFilmstripOff,
   mdiFilter,
+  mdiFilterOff,
   mdiFilterOutline,
   mdiFilterRemove,
   mdiFilterRemoveOutline,
@@ -2423,6 +2425,7 @@ import {
   mdiTag,
   mdiTagFaces,
   mdiTagHeart,
+  mdiTagHidden,
   mdiTagMultiple,
   mdiTagOutline,
   mdiTagPlus,
@@ -3001,6 +3004,7 @@ var icons = {
   "cellphone-link": mdiCellphoneLink,
   "cellphone-link-off": mdiCellphoneLinkOff,
   "cellphone-message": mdiCellphoneMessage,
+  "cellphone-off": mdiCellphoneOff,
   "cellphone-settings": mdiCellphoneSettings,
   certificate: mdiCertificate,
   "chair-school": mdiChairSchool,
@@ -3388,6 +3392,7 @@ var icons = {
   filmstrip: mdiFilmstrip,
   "filmstrip-off": mdiFilmstripOff,
   filter: mdiFilter,
+  "filter-off": mdiFilterOff,
   "filter-outline": mdiFilterOutline,
   "filter-remove": mdiFilterRemove,
   "filter-remove-outline": mdiFilterRemoveOutline,
@@ -4360,6 +4365,7 @@ var icons = {
   tag: mdiTag,
   "tag-faces": mdiTagFaces,
   "tag-heart": mdiTagHeart,
+  "tag-hidden": mdiTagHidden,
   "tag-multiple": mdiTagMultiple,
   "tag-outline": mdiTagOutline,
   "tag-plus": mdiTagPlus,
@@ -11554,8 +11560,11 @@ var EnhancedCard = React30.forwardRef(
     disableGap = false,
     enableAuxClick = false,
     hoverComponent,
+    sx,
     onClick,
-    onMouseDown
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave
   }, ref) {
     const [isHovered, setIsHovered] = React30.useState(false);
     const [isMenuOpen, setIsMenuOpen] = React30.useState(false);
@@ -11575,7 +11584,8 @@ var EnhancedCard = React30.forwardRef(
       ...selected && {
         boxShadow: "0 0 0 3px",
         color: primary600
-      }
+      },
+      ...sx
     };
     const centerColumnStyle = getCenterColumnStyle(
       size,
@@ -11642,11 +11652,15 @@ var EnhancedCard = React30.forwardRef(
         onClick,
         onAuxClick: enableAuxClick && !isMenuOpen ? onClick : void 0,
         onMouseDown,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => {
+        onMouseEnter: (e) => {
+          setIsHovered(true);
+          onMouseEnter && onMouseEnter(e);
+        },
+        onMouseLeave: (e) => {
           if (!isMenuOpen) {
             setIsHovered(false);
           }
+          onMouseLeave && onMouseLeave(e);
         },
         onMouseMove: (ev) => {
           const element = ev.currentTarget;
@@ -14238,8 +14252,9 @@ var DATE_INTERVAL_PICKER = {
     YESTERDAY: "Yesterday"
   },
   END_DATE: "End date",
+  END_HOUR: "End hour",
   START_DATE: "Start date",
-  TO: "to"
+  START_HOUR: "Start hour"
 };
 var SELECT_POPOVER = {
   APPLY: "Apply",
@@ -14524,8 +14539,9 @@ var DATE_INTERVAL_PICKER2 = {
     YESTERDAY: "Ayer"
   },
   END_DATE: "Fecha de fin",
+  END_HOUR: "Hora de fin",
   START_DATE: "Fecha de inicio",
-  TO: "a"
+  START_HOUR: "Hora de inicio"
 };
 var SELECT_POPOVER2 = {
   APPLY: "Aplicar",
@@ -14825,8 +14841,9 @@ var DATE_INTERVAL_PICKER3 = {
     YESTERDAY: "Hier"
   },
   END_DATE: "Date de fin",
+  END_HOUR: "Heure de fin",
   START_DATE: "Date de d\xE9but",
-  TO: "\xE0"
+  START_HOUR: "Heure de d\xE9but"
 };
 var SELECT_POPOVER3 = {
   APPLY: "Appliquer",
@@ -15111,8 +15128,9 @@ var DATE_INTERVAL_PICKER4 = {
     YESTERDAY: "Ieri"
   },
   END_DATE: "Data di fine",
+  END_HOUR: "Ora di fine",
   START_DATE: "Data di inizio",
-  TO: "a"
+  START_HOUR: "Ora di inizio"
 };
 var SELECT_POPOVER4 = {
   APPLY: "Applica",
@@ -15382,8 +15400,9 @@ var DATE_INTERVAL_PICKER5 = {
     YESTERDAY: "Ontem"
   },
   END_DATE: "Data final",
+  END_HOUR: "Hora de encerramento",
   START_DATE: "Data de in\xEDcio",
-  TO: "a"
+  START_HOUR: "Hora de in\xEDcio"
 };
 var SELECT_POPOVER5 = {
   APPLY: "Aplicar",
@@ -16186,6 +16205,19 @@ function dateToSimpleDate(date, timezone) {
 function getDisplayEndDate(date, timezone) {
   return tz(date, timezone).subtract(1, "day").toDate();
 }
+function applyTimeToDate(date, time) {
+  if (isNaN(date.getTime()) || isNaN(time.getTime())) {
+    return /* @__PURE__ */ new Date(NaN);
+  }
+  const result = new Date(date);
+  result.setHours(
+    time.getHours(),
+    time.getMinutes(),
+    time.getSeconds(),
+    time.getMilliseconds()
+  );
+  return result;
+}
 
 // src/utils/NumberFormatter.ts
 function formatNumber(value, locale, fractionSize) {
@@ -18878,11 +18910,11 @@ var DebouncedTextField_default = DebouncedTextField;
 
 // src/components/input/DateIntervalPicker.tsx
 import { ButtonBase } from "@mui/material";
-import * as React56 from "react";
+import * as React57 from "react";
 
 // src/components/input/DateIntervalPickerPopover.tsx
-import * as React55 from "react";
-import { tz as tz3 } from "moment-timezone";
+import * as React56 from "react";
+import { tz as tz4 } from "moment-timezone";
 
 // src/components/popover/Popover.tsx
 import MuiPopover from "@mui/material/Popover";
@@ -18892,12 +18924,14 @@ var Popover = ({
   anchorHorizontalOrigin = "center",
   verticalAlign = "top",
   anchorVerticalAlign = "bottom",
+  centeredInScreen = false,
   ...props
 }) => /* @__PURE__ */ jsx99(
   MuiPopover,
   {
     disableRestoreFocus: props.disableRestoreFocus,
     open: !!props.anchorEl,
+    ...centeredInScreen && { anchorReference: "none" },
     anchorOrigin: {
       vertical: anchorVerticalAlign,
       horizontal: anchorHorizontalOrigin
@@ -18906,6 +18940,18 @@ var Popover = ({
       vertical: verticalAlign,
       horizontal: horizontalAlign
     },
+    ...centeredInScreen && {
+      slotProps: {
+        paper: {
+          sx: {
+            position: "fixed",
+            top: "50% !important",
+            left: "50% !important",
+            transform: "translate(-50%, -50%) !important"
+          }
+        }
+      }
+    },
     ...props
   }
 );
@@ -19456,23 +19502,127 @@ var DateIntervalPickerList = ({
 var DateIntervalPickerList_default = DateIntervalPickerList;
 
 // src/components/input/DateIntervalPickerInputs.tsx
-import { Collapse as Collapse6 } from "@mui/material";
-import { jsx as jsx106, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Collapse as Collapse6, Stack as Stack7 } from "@mui/material";
+
+// src/components/input/TimeField.tsx
+import * as React55 from "react";
+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";
+var ExtendedTextField = ({
+  inputProps,
+  ownerState,
+  InputProps,
+  error,
+  ...rest
+}) => /* @__PURE__ */ jsx106(TextField_default, { ...inputProps, ...rest });
+var TimeField = function TimeField2({
+  onChange,
+  value,
+  showMinutes = true,
+  showSeconds = false,
+  ...rest
+}) {
+  const { locale, timezone } = React55.useContext(IntlContext);
+  const hour12 = React55.useMemo(() => {
+    const resolvedOptions = Intl.DateTimeFormat(locale, {
+      hour: "numeric"
+    }).resolvedOptions();
+    return resolvedOptions.hour12;
+  }, [locale]);
+  const format2 = `${hour12 ? "hh" : "HH"}${showSeconds || showMinutes ? ":mm" : ""}${showSeconds ? ":ss" : ""}${hour12 ? " a" : ""}`;
+  const momentValue = React55.useMemo(() => {
+    if (value && !isNaN(value.getTime())) {
+      return tz3(value, timezone);
+    }
+    return null;
+  }, [timezone, value]);
+  const _onChange = React55.useCallback(
+    (momentValue2, context) => {
+      const value2 = momentValue2 && momentValue2.isValid() ? momentValue2.toDate() : null;
+      onChange && onChange(value2, context);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx106(LocalizationProvider, { dateAdapter: AdapterMoment, children: /* @__PURE__ */ jsx106(
+    MuiTimeField,
+    {
+      onChange: _onChange,
+      value: momentValue,
+      format: format2,
+      slots: {
+        textField: ExtendedTextField
+      },
+      slotProps: {
+        textField: rest
+      },
+      enableAccessibleFieldDOMStructure: false
+    }
+  ) });
+};
+var TimeField_default = TimeField;
+
+// src/components/input/DateIntervalPickerInputs.tsx
+import { jsx as jsx107, jsxs as jsxs48 } from "react/jsx-runtime";
 var DateIntervalPickerInputs = ({
   startDate,
+  startTime,
   endDate,
+  endTime,
   comparisonStartDate,
+  comparisonStartTime,
   comparisonEndDate,
+  comparisonEndTime,
   placeholder,
   highlightedInput,
   color: color2,
   comparisonColor,
   isComparing,
+  showTime,
   onChange,
+  onChangeTime,
   onFocus,
   onBlur
 }) => {
   const { t } = useTranslation();
+  const getDateField = ({
+    dataTestId,
+    dateLabel,
+    date,
+    dateTime,
+    focusableInput,
+    hourLabel,
+    color: color3
+  }) => /* @__PURE__ */ jsxs48(Stack7, { children: [
+    /* @__PURE__ */ jsx107(
+      TextField_default,
+      {
+        "data-testid": dataTestId,
+        label: dateLabel,
+        placeholder,
+        value: date,
+        onChange: (event) => onChange(event.target.value),
+        onFocus: () => onFocus(focusableInput),
+        onBlur: (event) => onBlur(focusableInput, event.target.value),
+        highlighted: highlightedInput === focusableInput,
+        activeColor: color3
+      }
+    ),
+    showTime && /* @__PURE__ */ jsx107(
+      TimeField_default,
+      {
+        activeColor: color3,
+        label: hourLabel,
+        value: dateTime,
+        onFocus: () => onFocus(focusableInput),
+        onBlur: (event) => onBlur(focusableInput, event.target.value),
+        onChange: onChangeTime,
+        highlighted: highlightedInput === focusableInput
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxs48(Box_default2, { sx: { padding: "8px" }, children: [
     /* @__PURE__ */ jsxs48(
       Box_default2,
@@ -19483,40 +19633,28 @@ var DateIntervalPickerInputs = ({
           gap: "8px"
         },
         children: [
-          /* @__PURE__ */ jsx106("div", { children: /* @__PURE__ */ jsx106(
-            TextField_default,
-            {
-              "data-testid": "startDateInput",
-              autoFocus: true,
-              label: t("DATE_INTERVAL_PICKER.START_DATE"),
-              placeholder,
-              value: startDate,
-              onChange: (event) => onChange(event.target.value),
-              onFocus: () => onFocus("startDate"),
-              onBlur: (event) => onBlur("startDate", event.target.value),
-              highlighted: highlightedInput === "startDate",
-              activeColor: color2
-            }
-          ) }),
-          /* @__PURE__ */ jsx106(InputLabel_default, { children: t("DATE_INTERVAL_PICKER.TO") }),
-          /* @__PURE__ */ jsx106("div", { children: /* @__PURE__ */ jsx106(
-            TextField_default,
-            {
-              "data-testid": "endDateInput",
-              label: t("DATE_INTERVAL_PICKER.END_DATE"),
-              placeholder,
-              value: endDate,
-              onChange: (event) => onChange(event.target.value),
-              onFocus: () => onFocus("endDate"),
-              onBlur: (event) => onBlur("endDate", event.target.value),
-              highlighted: highlightedInput === "endDate",
-              activeColor: color2
-            }
-          ) })
+          getDateField({
+            dataTestId: "startDateInput",
+            date: startDate,
+            dateTime: startTime,
+            dateLabel: t("DATE_INTERVAL_PICKER.START_DATE"),
+            focusableInput: "startDate",
+            hourLabel: t("DATE_INTERVAL_PICKER.START_HOUR"),
+            color: color2
+          }),
+          getDateField({
+            dataTestId: "endDateInput",
+            date: endDate,
+            dateTime: endTime,
+            dateLabel: t("DATE_INTERVAL_PICKER.END_DATE"),
+            focusableInput: "endDate",
+            hourLabel: t("DATE_INTERVAL_PICKER.END_HOUR"),
+            color: color2
+          })
         ]
       }
     ),
-    /* @__PURE__ */ jsx106(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
+    /* @__PURE__ */ jsx107(Collapse6, { in: isComparing, children: /* @__PURE__ */ jsxs48(
       Box_default2,
       {
         sx: {
@@ -19525,40 +19663,21 @@ var DateIntervalPickerInputs = ({
           gap: "8px"
         },
         children: [
-          /* @__PURE__ */ jsx106("div", { children: /* @__PURE__ */ jsx106(
-            TextField_default,
-            {
-              "data-testid": "comparisonStartDateInput",
-              label: t("DATE_INTERVAL_PICKER.COMPARE_WITH"),
-              placeholder,
-              value: comparisonStartDate,
-              onChange: (event) => onChange(event.target.value),
-              onFocus: () => onFocus("comparisonStartDate"),
-              onBlur: (event) => onBlur(
-                "comparisonStartDate",
-                event.target.value
-              ),
-              highlighted: highlightedInput === "comparisonStartDate",
-              activeColor: comparisonColor
-            }
-          ) }),
-          /* @__PURE__ */ jsx106(InputLabel_default, { children: t("DATE_INTERVAL_PICKER.TO") }),
-          /* @__PURE__ */ jsxs48("div", { children: [
-            /* @__PURE__ */ jsx106("label", { children: "\xA0" }),
-            /* @__PURE__ */ jsx106(
-              TextField_default,
-              {
-                "data-testid": "comparisonEndDateInput",
-                placeholder,
-                value: comparisonEndDate,
-                onChange: (event) => onChange(event.target.value),
-                onFocus: () => onFocus("comparisonEndDate"),
-                onBlur: (event) => onBlur("comparisonEndDate", event.target.value),
-                highlighted: highlightedInput === "comparisonEndDate",
-                activeColor: comparisonColor
-              }
-            )
-          ] })
+          getDateField({
+            dataTestId: "comparisonStartDateInput",
+            date: comparisonStartDate,
+            dateTime: comparisonStartTime,
+            dateLabel: t("DATE_INTERVAL_PICKER.COMPARE_WITH"),
+            focusableInput: "comparisonStartDate",
+            color: comparisonColor
+          }),
+          getDateField({
+            dataTestId: "comparisonEndDateInput",
+            date: comparisonEndDate,
+            dateTime: comparisonEndTime,
+            focusableInput: "comparisonEndDate",
+            color: comparisonColor
+          })
         ]
       }
     ) })
@@ -19567,7 +19686,7 @@ var DateIntervalPickerInputs = ({
 var DateIntervalPickerInputs_default = DateIntervalPickerInputs;
 
 // src/components/input/DateIntervalPickerPopover.tsx
-import { jsx as jsx107, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs49 } from "react/jsx-runtime";
 var DateIntervalPickerPopover = ({
   interval,
   startDate,
@@ -19584,17 +19703,18 @@ var DateIntervalPickerPopover = ({
   minDate,
   maxDate,
   allowedIntervals,
+  showTime,
   onApply,
   onCancel
 }) => {
-  const { locale, timezone } = React55.useContext(IntlContext);
+  const { locale, timezone } = React56.useContext(IntlContext);
   const dateInputFormat = getDateInputFormatForLocale(locale);
   const { t } = useTranslation();
   const dateInputFormatPlaceholder = dateInputFormat.replace(/Y/g, t("DATE_COMPONENTS.YEAR_LETTER")).replace(/M/g, t("DATE_COMPONENTS.MONTH_LETTER")).replace(/D/g, t("DATE_COMPONENTS.DAY_LETTER"));
-  const minDateTz = tz3(minDate, timezone);
-  const maxDateTz = tz3(maxDate, timezone);
-  const dateInputFormatter = (date) => tz3(date, timezone).format(dateInputFormat);
-  const formatSimpleDate = (date) => tz3(
+  const minDateTz = tz4(minDate, timezone);
+  const maxDateTz = tz4(maxDate, timezone);
+  const dateInputFormatter = (date) => tz4(date, timezone).format(dateInputFormat);
+  const formatSimpleDate = (date) => tz4(
     { year: date.year, month: date.month, date: date.day },
     timezone
   ).format(dateInputFormat);
@@ -19646,11 +19766,11 @@ var DateIntervalPickerPopover = ({
       minDate
     );
     return {
-      comparisonStartDate: tz3(
+      comparisonStartDate: tz4(
         interval2.comparisonStartDate,
         timezone
       ).format(dateInputFormat),
-      comparisonEndDate: tz3(interval2.comparisonEndDate, timezone).format(
+      comparisonEndDate: tz4(interval2.comparisonEndDate, timezone).format(
         dateInputFormat
       ),
       comparisonStartSimpleDate: dateToSimpleDate(
@@ -19670,17 +19790,21 @@ var DateIntervalPickerPopover = ({
     highlightedInput: "startDate",
     focusedDateInCalendar: dateToSimpleDate(startDate, timezone),
     startDate: dateInputFormatter(startDate),
+    startTime: startDate,
     startSimpleDate: dateToSimpleDate(startDate, timezone),
     endDate: dateInputFormatter(displayEndDate),
+    endTime: displayEndDate,
     endSimpleDate: dateToSimpleDate(displayEndDate, timezone),
     comparisonInterval: comparisonInterval ?? "previousPeriod",
     comparisonStartDate: comparisonStartDate ? dateInputFormatter(comparisonStartDate) : "",
+    comparisonStartTime: comparisonStartDate ? comparisonStartDate : /* @__PURE__ */ new Date(),
     comparisonStartSimpleDate: comparisonStartDate ? dateToSimpleDate(comparisonStartDate, timezone) : null,
     comparisonEndDate: displayComparisonEndDate ? dateInputFormatter(displayComparisonEndDate) : "",
+    comparisonEndTime: displayComparisonEndDate ? displayComparisonEndDate : /* @__PURE__ */ new Date(),
     comparisonEndSimpleDate: displayComparisonEndDate ? dateToSimpleDate(displayComparisonEndDate, timezone) : null,
     isComparing: allowCompare && !!(comparisonStartDate && comparisonEndDate)
   };
-  const [state, setState] = React55.useState(initialState);
+  const [state, setState] = React56.useState(initialState);
   const handleChangeIsComparing = (checked) => {
     setState({
       ...state,
@@ -19696,14 +19820,26 @@ var DateIntervalPickerPopover = ({
     });
   };
   const handleApply = () => {
-    const parseEndDate = (dateString) => tz3(parseDate(dateString), timezone).add(1, "day").toDate();
+    const parseEndDate = (dateString) => tz4(parseDate(dateString), timezone).add(1, "day").toDate();
     onApply({
       interval: state.interval,
-      startDate: parseDate(state.startDate),
-      endDate: parseEndDate(state.endDate),
+      startDate: applyTimeToDate(
+        parseDate(state.startDate),
+        state.startTime
+      ),
+      endDate: applyTimeToDate(
+        parseEndDate(state.endDate),
+        state.endTime
+      ),
       comparisonInterval: state.isComparing ? state.comparisonInterval : null,
-      comparisonStartDate: state.isComparing ? parseDate(state.comparisonStartDate) : null,
-      comparisonEndDate: state.isComparing ? parseEndDate(state.comparisonEndDate) : null
+      comparisonStartDate: state.isComparing ? applyTimeToDate(
+        parseDate(state.comparisonStartDate),
+        state.comparisonStartTime
+      ) : null,
+      comparisonEndDate: state.isComparing ? applyTimeToDate(
+        parseEndDate(state.comparisonEndDate),
+        state.comparisonEndTime
+      ) : null
     });
   };
   const handleCancel = () => {
@@ -19749,6 +19885,24 @@ var DateIntervalPickerPopover = ({
       [state.highlightedInput]: value
     });
   };
+  const getTimePropertyName = (focusableInputDate) => {
+    switch (focusableInputDate) {
+      case "startDate":
+        return "startTime";
+      case "endDate":
+        return "endTime";
+      case "comparisonStartDate":
+        return "comparisonStartTime";
+      case "comparisonEndDate":
+        return "comparisonEndTime";
+    }
+  };
+  const handleChangeTime = (value) => {
+    setState({
+      ...state,
+      [getTimePropertyName(state.highlightedInput)]: value
+    });
+  };
   const handleFocusInputDate = (inputDate) => {
     setState((state2) => {
       const newState = {
@@ -19938,7 +20092,7 @@ var DateIntervalPickerPopover = ({
           maxWidth: `${250 + 8 * 2 + 32 * 7}px`
         },
         children: [
-          /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx108(
             Box_default2,
             {
               sx: {
@@ -19950,7 +20104,7 @@ var DateIntervalPickerPopover = ({
                 overflowY: "auto"
               },
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx107(
+              children: /* @__PURE__ */ jsx108(
                 DateIntervalPickerList_default,
                 {
                   allowCompare,
@@ -19966,38 +20120,44 @@ var DateIntervalPickerPopover = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx108(
             Box_default2,
             {
               sx: {
                 gridArea: "inputs"
               },
-              children: /* @__PURE__ */ jsx107(
+              children: /* @__PURE__ */ jsx108(
                 DateIntervalPickerInputs_default,
                 {
                   color: color2,
                   comparisonColor,
                   comparisonEndDate: state.comparisonEndDate,
+                  comparisonEndTime: state.comparisonEndTime,
                   comparisonStartDate: state.comparisonStartDate,
+                  comparisonStartTime: state.comparisonStartTime,
                   endDate: state.endDate,
+                  endTime: state.endTime,
                   highlightedInput: state.highlightedInput,
                   onBlur: handleBlurInputDate,
                   onChange: handleChangeInputDate,
+                  onChangeTime: handleChangeTime,
                   onFocus: handleFocusInputDate,
                   placeholder: dateInputFormatPlaceholder,
                   startDate: state.startDate,
-                  isComparing: state.isComparing
+                  startTime: state.startTime,
+                  isComparing: state.isComparing,
+                  showTime
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx108(
             Box_default2,
             {
               sx: {
                 gridArea: "calendar"
               },
-              children: /* @__PURE__ */ jsx107(
+              children: /* @__PURE__ */ jsx108(
                 CalendarScrollPicker_default,
                 {
                   minDate: {
@@ -20036,10 +20196,10 @@ var DateIntervalPickerPopover = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx107(
+    /* @__PURE__ */ jsx108(
       PopoverActions_default,
       {
-        leftContent: /* @__PURE__ */ jsx107(
+        leftContent: /* @__PURE__ */ jsx108(
           Button_default,
           {
             variant: "text",
@@ -20048,7 +20208,7 @@ var DateIntervalPickerPopover = ({
             disabled: isApplyButtonDisabled()
           }
         ),
-        rightContent: /* @__PURE__ */ jsx107(
+        rightContent: /* @__PURE__ */ jsx108(
           Button_default,
           {
             variant: "text",
@@ -20063,8 +20223,8 @@ var DateIntervalPickerPopover = ({
 var DateIntervalPickerPopover_default = DateIntervalPickerPopover;
 
 // src/components/input/DateIntervalPicker.tsx
-import { tz as tz4 } from "moment-timezone";
-import { jsx as jsx108, jsxs as jsxs50 } from "react/jsx-runtime";
+import { tz as tz5 } from "moment-timezone";
+import { jsx as jsx109, jsxs as jsxs50 } from "react/jsx-runtime";
 var DateIntervalPicker = ({
   interval,
   startDate,
@@ -20081,11 +20241,12 @@ var DateIntervalPicker = ({
   minDate,
   maxDate,
   allowedIntervals,
+  showTime,
   onChange
 }) => {
   const { t } = useTranslation();
-  const { timezone } = React56.useContext(IntlContext);
-  const [anchorEl, setAnchorEl] = React56.useState(
+  const { timezone } = React57.useContext(IntlContext);
+  const [anchorEl, setAnchorEl] = React57.useState(
     null
   );
   const isSameDate = (date1, date2) => date1?.getTime() === date2?.getTime();
@@ -20103,8 +20264,8 @@ var DateIntervalPicker = ({
   };
   const displayEndDate = getDisplayEndDate(endDate, timezone);
   const isEndDateVisible = !isSameDate(startDate, displayEndDate);
-  const internalMaxDate = maxDate ?? tz4(timezone).toDate();
-  const internalMinDate = minDate ?? tz4(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate();
+  const internalMaxDate = maxDate ?? tz5(timezone).toDate();
+  const internalMinDate = minDate ?? tz5(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate();
   return /* @__PURE__ */ jsxs50("div", { style: { display: "inline-flex" }, children: [
     /* @__PURE__ */ jsxs50(
       ButtonBase,
@@ -20121,7 +20282,7 @@ var DateIntervalPicker = ({
         disabled,
         onClick: handleButtonClick,
         children: [
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             "span",
             {
               style: {
@@ -20131,7 +20292,7 @@ var DateIntervalPicker = ({
                 borderRadius: "2px",
                 alignSelf: "center"
               },
-              children: /* @__PURE__ */ jsx108(Typography_default, { variant: "body2", children: t(
+              children: /* @__PURE__ */ jsx109(Typography_default, { variant: "body2", children: t(
                 `DATE_INTERVAL_PICKER.DATE_INTERVALS.${dateIntervals[interval]}`
               ) })
             }
@@ -20146,9 +20307,25 @@ var DateIntervalPicker = ({
               },
               children: [
                 /* @__PURE__ */ jsxs50("div", { children: [
-                  /* @__PURE__ */ jsx108(DateFormatter_default, { date: startDate }),
+                  /* @__PURE__ */ jsx109(
+                    DateFormatter_default,
+                    {
+                      date: startDate,
+                      ...showTime && {
+                        format: "dateTimeLongFormat"
+                      }
+                    }
+                  ),
                   isEndDateVisible && " - ",
-                  isEndDateVisible && /* @__PURE__ */ jsx108(DateFormatter_default, { date: displayEndDate })
+                  isEndDateVisible && /* @__PURE__ */ jsx109(
+                    DateFormatter_default,
+                    {
+                      date: displayEndDate,
+                      ...showTime && {
+                        format: "dateTimeLongFormat"
+                      }
+                    }
+                  )
                 ] }),
                 comparisonStartDate && comparisonEndDate ? /* @__PURE__ */ jsxs50(
                   "div",
@@ -20161,20 +20338,36 @@ var DateIntervalPicker = ({
                     children: [
                       t("DATE_INTERVAL_PICKER.COMPARE"),
                       ": ",
-                      /* @__PURE__ */ jsx108(DateFormatter_default, { date: comparisonStartDate }),
+                      /* @__PURE__ */ jsx109(
+                        DateFormatter_default,
+                        {
+                          date: comparisonStartDate,
+                          ...showTime && {
+                            format: "dateTimeLongFormat"
+                          }
+                        }
+                      ),
                       " - ",
-                      /* @__PURE__ */ jsx108(DateFormatter_default, { date: comparisonEndDate })
+                      /* @__PURE__ */ jsx109(
+                        DateFormatter_default,
+                        {
+                          date: comparisonEndDate,
+                          ...showTime && {
+                            format: "dateTimeLongFormat"
+                          }
+                        }
+                      )
                     ]
                   }
                 ) : []
               ]
             }
           ),
-          /* @__PURE__ */ jsx108(Icon_default, { id: "menu-down", sx: { color: grey400 } })
+          /* @__PURE__ */ jsx109(Icon_default, { id: "menu-down", sx: { color: grey400 } })
         ]
       }
     ),
-    anchorEl !== null && /* @__PURE__ */ jsx108(
+    anchorEl !== null && /* @__PURE__ */ jsx109(
       DateIntervalPickerPopover_default,
       {
         ...{
@@ -20194,6 +20387,7 @@ var DateIntervalPicker = ({
           maxDate: internalMaxDate,
           anchorEl,
           allowedIntervals,
+          showTime,
           onCancel: handlePopoverCancel,
           onApply: handleApply
         }
@@ -20204,9 +20398,9 @@ var DateIntervalPicker = ({
 var DateIntervalPicker_default = DateIntervalPicker;
 
 // src/components/input/SelectPopoverItem.tsx
-import { Grid as Grid2, Stack as Stack7 } from "@mui/material";
+import { Grid as Grid2, Stack as Stack8 } from "@mui/material";
 import { lighten as lighten3 } from "@mui/material";
-import { Fragment as Fragment21, jsx as jsx109, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx110, jsxs as jsxs51 } from "react/jsx-runtime";
 var bgColorLightCoefficient2 = 0.9;
 var SelectPopoverItem = ({
   id,
@@ -20220,14 +20414,14 @@ var SelectPopoverItem = ({
   tooltip,
   isLoadingSubtitle2,
   onClick
-}) => /* @__PURE__ */ jsx109(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx109(
+}) => /* @__PURE__ */ jsx110(Tooltip_default, { title: tooltip || "", children: /* @__PURE__ */ jsx110(
   Grid2,
   {
     size: {
       xs: 6
     },
     children: /* @__PURE__ */ jsxs51(
-      Stack7,
+      Stack8,
       {
         direction: "row",
         sx: {
@@ -20254,7 +20448,7 @@ var SelectPopoverItem = ({
                 boxSizing: "border-box"
               },
               children: [
-                /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsx110(
                   TextEllipsis_default,
                   {
                     color: Colors_exports.grey800,
@@ -20264,7 +20458,7 @@ var SelectPopoverItem = ({
                     },
                     typographyVariant: "body1",
                     text: /* @__PURE__ */ jsxs51(Fragment21, { children: [
-                      iconId && /* @__PURE__ */ jsx109(
+                      iconId && /* @__PURE__ */ jsx110(
                         Icon_default,
                         {
                           id: iconId,
@@ -20282,7 +20476,7 @@ var SelectPopoverItem = ({
                     ] })
                   }
                 ),
-                subtitle1 && /* @__PURE__ */ jsx109(
+                subtitle1 && /* @__PURE__ */ jsx110(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20292,7 +20486,7 @@ var SelectPopoverItem = ({
                     children: subtitle1
                   }
                 ),
-                isLoadingSubtitle2 && /* @__PURE__ */ jsx109(
+                isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
                   Skeleton_default,
                   {
                     variant: "text",
@@ -20304,7 +20498,7 @@ var SelectPopoverItem = ({
                     }
                   }
                 ),
-                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx109(
+                subtitle2 && !isLoadingSubtitle2 && /* @__PURE__ */ jsx110(
                   Typography_default,
                   {
                     variant: "body2",
@@ -20317,7 +20511,7 @@ var SelectPopoverItem = ({
               ]
             }
           ),
-          chipText && /* @__PURE__ */ jsx109(Box_default2, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx109(
+          chipText && /* @__PURE__ */ jsx110(Box_default2, { sx: { minWidth: "72px", flexShrink: 0 }, children: /* @__PURE__ */ jsx110(
             Chip_default,
             {
               label: chipText,
@@ -20338,17 +20532,17 @@ var SelectPopoverItem = ({
 var SelectPopoverItem_default = SelectPopoverItem;
 
 // src/components/input/TimezoneSelector.tsx
-import * as React58 from "react";
+import * as React59 from "react";
 import * as moment2 from "moment-timezone";
 
 // src/components/input/Select.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 import { styled as styled7 } from "@mui/material/styles";
 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 jsx110 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var BootstrapInput = styled7(InputBase)(() => ({
   boxShadow: shadows[0],
   borderRadius: "16px",
@@ -20379,7 +20573,7 @@ var BootstrapInput = styled7(InputBase)(() => ({
     borderColor: grey800
   }
 }));
-var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx110(
+var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx111(
   Icon_default,
   {
     id: "chevron-down",
@@ -20397,7 +20591,7 @@ var SelectOption = ({
   selected,
   colors,
   ...rest
-}) => /* @__PURE__ */ jsx110(
+}) => /* @__PURE__ */ jsx111(
   ListItemButton_default,
   {
     role: "option",
@@ -20447,7 +20641,7 @@ var Select = function Select2({
   onOpen,
   ...rest
 }, ref) {
-  const [_isOpen, setOpen] = React57.useState(false);
+  const [_isOpen, setOpen] = React58.useState(false);
   const isOpen = open ?? _isOpen;
   const valueIndex = options.findIndex(
     (op) => op.value === value
@@ -20464,7 +20658,7 @@ var Select = function Select2({
   }) => {
     const { value: currentValue, label, ...rest2 } = options[index];
     const isSelected = value === currentValue;
-    return /* @__PURE__ */ jsx110(
+    return /* @__PURE__ */ jsx111(
       ListItemButton_default,
       {
         text: label ?? currentValue?.toString() ?? "",
@@ -20495,7 +20689,7 @@ var Select = function Select2({
       currentValue ?? ""
     );
   };
-  const getVirtualizedSelect = () => /* @__PURE__ */ jsx110(
+  const getVirtualizedSelect = () => /* @__PURE__ */ jsx111(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20531,8 +20725,8 @@ var Select = function Select2({
       displayEmpty: true,
       variant: "standard",
       value,
-      IconComponent: () => /* @__PURE__ */ jsx110(ChevronIcon, { disabled: rest.disabled }),
-      input: /* @__PURE__ */ jsx110(BootstrapInput, { placeholder }),
+      IconComponent: () => /* @__PURE__ */ jsx111(ChevronIcon, { disabled: rest.disabled }),
+      input: /* @__PURE__ */ jsx111(BootstrapInput, { placeholder }),
       onOpen: () => {
         setOpen(true);
         onOpen && onOpen();
@@ -20548,7 +20742,7 @@ var Select = function Select2({
           return renderValue(value2, options);
         }
         if (!value2) {
-          return /* @__PURE__ */ jsx110("span", { style: { color: grey900 }, children: placeholder });
+          return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
         }
         return options.find((o) => o.value === value2)?.label ?? value2;
       },
@@ -20581,7 +20775,7 @@ var Select = function Select2({
           }
         }
       },
-      children: /* @__PURE__ */ jsx110(AutoSizer4, { disableWidth: true, children: ({ height: height2 }) => /* @__PURE__ */ jsx110(
+      children: /* @__PURE__ */ jsx111(AutoSizer4, { disableWidth: true, children: ({ height: height2 }) => /* @__PURE__ */ jsx111(
         FixedSizeList2,
         {
           height: height2,
@@ -20595,7 +20789,7 @@ var Select = function Select2({
       ) })
     }
   );
-  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx110(
+  const getNotVirtualizedSelect = () => /* @__PURE__ */ jsx111(
     MuiSelect,
     {
       className: `Cn-Select ${className}`,
@@ -20635,9 +20829,9 @@ var Select = function Select2({
       },
       multiple,
       value,
-      IconComponent: () => /* @__PURE__ */ jsx110(ChevronIcon, { disabled: rest.disabled }),
+      IconComponent: () => /* @__PURE__ */ jsx111(ChevronIcon, { disabled: rest.disabled }),
       open,
-      input: /* @__PURE__ */ jsx110(BootstrapInput, { placeholder }),
+      input: /* @__PURE__ */ jsx111(BootstrapInput, { placeholder }),
       onOpen: () => {
         setOpen(true);
         onOpen && onOpen();
@@ -20653,7 +20847,7 @@ var Select = function Select2({
         }
         if (Array.isArray(value2)) {
           if (value2.length === 0) {
-            return /* @__PURE__ */ jsx110("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
           } else {
             return value2.map((v) => {
               const option = options.find((o) => o.value === v);
@@ -20662,7 +20856,7 @@ var Select = function Select2({
           }
         } else {
           if (!value2) {
-            return /* @__PURE__ */ jsx110("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx111("span", { style: { color: grey900 }, children: placeholder });
           }
           return options.find((o) => o.value === value2)?.label ?? value2;
         }
@@ -20687,7 +20881,7 @@ var Select = function Select2({
         }
       },
       ...rest,
-      children: children ?? options.map(({ label, value: value2, ...rest2 }) => /* @__PURE__ */ jsx110(
+      children: children ?? options.map(({ label, value: value2, ...rest2 }) => /* @__PURE__ */ jsx111(
         SelectOption,
         {
           label: label ?? value2?.toString() ?? "",
@@ -20701,21 +20895,21 @@ var Select = function Select2({
   );
   return virtualized ? getVirtualizedSelect() : getNotVirtualizedSelect();
 };
-var Select_default = React57.forwardRef(Select);
+var Select_default = React58.forwardRef(Select);
 
 // src/components/input/TimezoneSelector.tsx
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var TimezoneSelector = ({
   initialTimezone,
   onTimezoneChange
 }) => {
-  const [selectedTimezone, setSelectedTimezone] = React58.useState(initialTimezone);
+  const [selectedTimezone, setSelectedTimezone] = React59.useState(initialTimezone);
   const handleChange = (timezone) => {
     setSelectedTimezone(timezone);
     onTimezoneChange(timezone);
   };
   const timeZones = moment2.tz.names();
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx112(
     Select_default,
     {
       value: selectedTimezone,
@@ -20728,15 +20922,15 @@ var TimezoneSelector = ({
 var TimezoneSelector_default = TimezoneSelector;
 
 // src/components/input/DaysOfWeekPicker.tsx
-import * as React59 from "react";
-import { jsx as jsx112 } from "react/jsx-runtime";
+import * as React60 from "react";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var DaysOfWeekPicker = ({ value, onChange }) => {
-  const { locale, timezone } = React59.useContext(IntlContext);
-  const daysOfWeekLong = React59.useMemo(
+  const { locale, timezone } = React60.useContext(IntlContext);
+  const daysOfWeekLong = React60.useMemo(
     () => getWeekDayNamesForLocale(locale, "long", timezone),
     [locale, timezone]
   );
-  const daysOfWeek = React59.useMemo(
+  const daysOfWeek = React60.useMemo(
     () => getWeekDayNamesForLocale(locale, "narrow", timezone),
     [locale, timezone]
   );
@@ -20749,7 +20943,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
     "saturday",
     "sunday"
   ];
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx113(
     Stack_default,
     {
       direction: "row",
@@ -20758,7 +20952,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
         height: "34px",
         alignItems: "center"
       },
-      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx112("div", { style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx112(
+      children: daysOfWeek.map((day, index) => /* @__PURE__ */ jsx113("div", { style: { margin: "0 2px" }, children: /* @__PURE__ */ jsx113(
         ToggleButton_default,
         {
           sx: {
@@ -20781,7 +20975,7 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
               onChange(value.concat([currentValue]));
             }
           },
-          children: /* @__PURE__ */ jsx112(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx112("span", { children: day }) }, index)
+          children: /* @__PURE__ */ jsx113(Tooltip_default, { title: daysOfWeekLong[index], children: /* @__PURE__ */ jsx113("span", { children: day }) }, index)
         }
       ) }, index))
     }
@@ -20790,11 +20984,11 @@ var DaysOfWeekPicker = ({ value, onChange }) => {
 var DaysOfWeekPicker_default = DaysOfWeekPicker;
 
 // src/components/input/ColorPicker.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 import GradientColorPicker, {
   useColorPicker
 } from "react-best-gradient-color-picker";
-import { Fragment as Fragment22, jsx as jsx113, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx114, 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 = [
@@ -20817,7 +21011,7 @@ var colorPickerDefaultColors = [
   "rgb(64,64,64)",
   "rgb(255,165,0)"
 ];
-var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
+var ColorPicker = React61.forwardRef(function ColorPickerWrapper({
   value,
   label,
   width: width2,
@@ -20830,22 +21024,22 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
   onChange
 }, ref) {
   const { t } = useTranslation();
-  const [previousColors, setPreviousColors] = React60.useState(
+  const [previousColors, setPreviousColors] = React61.useState(
     colorPickerDefaultColors
   );
   const currentColorPreset = presets || previousColors;
-  const [internalPickerValue, setInternalPickerValue] = React60.useState(
+  const [internalPickerValue, setInternalPickerValue] = React61.useState(
     value || white
   );
   const { valueToHex } = useColorPicker(
     internalPickerValue ?? "",
     setInternalPickerValue
   );
-  const [textFieldValue, setTextFieldValue] = React60.useState(
+  const [textFieldValue, setTextFieldValue] = React61.useState(
     value ? valueToHex() : ""
   );
-  const [isValidPickerChange, setValidPickerChange] = React60.useState(false);
-  const [anchorEl, setAnchorEl] = React60.useState();
+  const [isValidPickerChange, setValidPickerChange] = React61.useState(false);
+  const [anchorEl, setAnchorEl] = React61.useState();
   const handleTextFieldChange = (event) => {
     const newValue = event.target.value;
     setValidPickerChange(false);
@@ -20865,7 +21059,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
       return hex.length === 1 ? "0" + hex : hex;
     }).join("");
   };
-  const iconColor = /* @__PURE__ */ jsx113(
+  const iconColor = /* @__PURE__ */ jsx114(
     IconButton_default,
     {
       iconId: value ? "color-square" : "transparent",
@@ -20876,7 +21070,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
       sx: { color: value || grey600 }
     }
   );
-  React60.useEffect(() => {
+  React61.useEffect(() => {
     const handleColorChange = (color2) => {
       setPreviousColors((prev) => [color2, ...prev.slice(0, 17)]);
       setTextFieldValue(valueToHex());
@@ -20888,7 +21082,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
     }
   }, [value, internalPickerValue, onChange, isValidPickerChange, valueToHex]);
   return /* @__PURE__ */ jsxs52(Fragment22, { children: [
-    /* @__PURE__ */ jsx113(
+    /* @__PURE__ */ jsx114(
       TextField_default,
       {
         value: textFieldValue,
@@ -20913,7 +21107,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
         ref
       }
     ),
-    /* @__PURE__ */ jsx113(
+    /* @__PURE__ */ jsx114(
       Popover_default,
       {
         anchorEl,
@@ -20922,7 +21116,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
         onMouseUp: () => {
           setValidPickerChange(true);
         },
-        children: /* @__PURE__ */ jsx113(
+        children: /* @__PURE__ */ jsx114(
           Box_default2,
           {
             className: "Cn-Color-Gradient-Box",
@@ -20966,7 +21160,7 @@ var ColorPicker = React60.forwardRef(function ColorPickerWrapper({
                 fontFamily: "Source Sans Pro, sans-serif"
               }
             },
-            children: /* @__PURE__ */ jsx113(
+            children: /* @__PURE__ */ jsx114(
               GradientColorPicker,
               {
                 className: "Cn-Color-Gradient-Picker",
@@ -20997,7 +21191,7 @@ var ColorPicker_default = ColorPicker;
 
 // src/components/input/UploadClickableArea.tsx
 import { Box as Box3 } from "@mui/material";
-import { jsx as jsx114, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs53 } from "react/jsx-runtime";
 var UploadClickableArea = ({
   accept,
   onFilesChanged,
@@ -21011,7 +21205,7 @@ var UploadClickableArea = ({
       display: "inline-block"
     },
     children: [
-      /* @__PURE__ */ jsx114(
+      /* @__PURE__ */ jsx115(
         "input",
         {
           type: "file",
@@ -21027,10 +21221,10 @@ var UploadClickableArea = ({
 var UploadClickableArea_default = UploadClickableArea;
 
 // src/components/input/CategorizedPicker.tsx
-import React61 from "react";
-import { Grid as Grid3, Popover as Popover2, Select as Select3, Stack as Stack8 } from "@mui/material";
-import { Fragment as Fragment23, jsx as jsx115, jsxs as jsxs54 } from "react/jsx-runtime";
-var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx115(
+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(
   Icon_default,
   {
     id: "chevron-down",
@@ -21052,38 +21246,38 @@ var CategorizedPicker = function CategorizedPicker2({
   onChange
 }) {
   const { t } = useTranslation();
-  const anchorRef = React61.useRef(null);
-  const [open, setOpen] = React61.useState(false);
-  const [search, setSearch] = React61.useState("");
-  const [unfilteredCategories] = React61.useState(
+  const anchorRef = React62.useRef(null);
+  const [open, setOpen] = React62.useState(false);
+  const [search, setSearch] = React62.useState("");
+  const [unfilteredCategories] = React62.useState(
     categories.map((category) => ({
       ...category,
       categoryOptions: options.filter(category.filter)
     })).filter((category) => category.categoryOptions.length > 0)
   );
-  const [filteredCategories, setFilteredCategories] = React61.useState(unfilteredCategories);
-  const getDefaultSelectedCategory = React61.useCallback(
+  const [filteredCategories, setFilteredCategories] = React62.useState(unfilteredCategories);
+  const getDefaultSelectedCategory = React62.useCallback(
     () => filteredCategories.find(
       (category) => category.categoryOptions.some((option) => option.id === value?.id)
     ),
     [filteredCategories, value?.id]
   );
-  const [selectedCategory, setSelectedCategory] = React61.useState(getDefaultSelectedCategory());
-  const onTypeSearch = React61.useCallback(
+  const [selectedCategory, setSelectedCategory] = React62.useState(getDefaultSelectedCategory());
+  const onTypeSearch = React62.useCallback(
     (event) => {
       setSearch(event.target.value);
     },
     []
   );
-  const openPopover = React61.useCallback(() => {
+  const openPopover = React62.useCallback(() => {
     setOpen(true);
     setSearch("");
     setSelectedCategory(getDefaultSelectedCategory());
   }, [getDefaultSelectedCategory]);
-  const closePopover = React61.useCallback(() => {
+  const closePopover = React62.useCallback(() => {
     setOpen(false);
   }, []);
-  React61.useEffect(() => {
+  React62.useEffect(() => {
     const tokens = search.split(",").map((s) => s.trim()).filter((s) => !!s);
     if (tokens.length === 0) {
       setFilteredCategories(unfilteredCategories);
@@ -21113,7 +21307,7 @@ var CategorizedPicker = function CategorizedPicker2({
     }).filter((category) => !!category);
     setFilteredCategories(nextCategories);
   }, [categories, options, search, unfilteredCategories]);
-  React61.useEffect(() => {
+  React62.useEffect(() => {
     const filteredSelectedCategory = selectedCategory && filteredCategories.find(
       (category) => category.name === selectedCategory.name
     );
@@ -21126,7 +21320,7 @@ var CategorizedPicker = function CategorizedPicker2({
     }
   }, [filteredCategories, selectedCategory]);
   return /* @__PURE__ */ jsxs54(Fragment23, { children: [
-    /* @__PURE__ */ jsx115(
+    /* @__PURE__ */ jsx116(
       Select3,
       {
         ref: anchorRef,
@@ -21141,7 +21335,7 @@ var CategorizedPicker = function CategorizedPicker2({
         value: value?.name || "",
         displayEmpty: true,
         disabled,
-        input: /* @__PURE__ */ jsx115(
+        input: /* @__PURE__ */ jsx116(
           BootstrapInput,
           {
             sx: {
@@ -21150,7 +21344,7 @@ var CategorizedPicker = function CategorizedPicker2({
           }
         ),
         renderValue: (value2) => value2 || placeholder,
-        IconComponent: () => /* @__PURE__ */ jsx115(ChevronIcon2, { disabled }),
+        IconComponent: () => /* @__PURE__ */ jsx116(ChevronIcon2, { disabled }),
         onClick: !disabled ? (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -21158,10 +21352,10 @@ var CategorizedPicker = function CategorizedPicker2({
         } : void 0,
         open: false,
         "data-testid": dataTestId,
-        children: options.map((option) => /* @__PURE__ */ jsx115("option", { value: option.name }, option.id))
+        children: options.map((option) => /* @__PURE__ */ jsx116("option", { value: option.name }, option.id))
       }
     ),
-    /* @__PURE__ */ jsx115(
+    /* @__PURE__ */ jsx116(
       Popover2,
       {
         anchorEl: anchorRef.current,
@@ -21183,7 +21377,7 @@ var CategorizedPicker = function CategorizedPicker2({
           }
         },
         children: /* @__PURE__ */ jsxs54(Grid3, { container: true, children: [
-          /* @__PURE__ */ jsx115(
+          /* @__PURE__ */ jsx116(
             Grid3,
             {
               size: {
@@ -21191,7 +21385,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               padding: "8px",
               borderBottom: `1px solid ${grey200}`,
-              children: /* @__PURE__ */ jsx115(
+              children: /* @__PURE__ */ jsx116(
                 DebouncedTextField_default,
                 {
                   placeholder: t(
@@ -21199,12 +21393,12 @@ var CategorizedPicker = function CategorizedPicker2({
                   ),
                   value: search,
                   onChange: onTypeSearch,
-                  startAdornment: /* @__PURE__ */ jsx115(Icon_default, { id: "magnify" })
+                  startAdornment: /* @__PURE__ */ jsx116(Icon_default, { id: "magnify" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx115(
+          /* @__PURE__ */ jsx116(
             Grid3,
             {
               size: {
@@ -21213,14 +21407,14 @@ var CategorizedPicker = function CategorizedPicker2({
               sx: { borderRight: `1px solid ${grey200}` },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx115(Stack8, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx115(
+              children: /* @__PURE__ */ jsx116(Stack9, { children: filteredCategories.map((category, idx) => /* @__PURE__ */ jsx116(
                 ListItemButton_default,
                 {
                   selected: selectedCategory === category,
                   onClick: () => {
                     setSelectedCategory(category);
                   },
-                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx115(
+                  endAdornment: selectedCategory === category ? /* @__PURE__ */ jsx116(
                     Icon_default,
                     {
                       id: "menu-right",
@@ -21228,10 +21422,10 @@ var CategorizedPicker = function CategorizedPicker2({
                     }
                   ) : void 0,
                   buttonDataTest: dataTestId ? dataTestId + "-category-" + idx : void 0,
-                  children: /* @__PURE__ */ jsx115(
+                  children: /* @__PURE__ */ jsx116(
                     TextEllipsis_default,
                     {
-                      text: /* @__PURE__ */ jsx115(
+                      text: /* @__PURE__ */ jsx116(
                         TextMarker_default,
                         {
                           searchText: search,
@@ -21249,7 +21443,7 @@ var CategorizedPicker = function CategorizedPicker2({
               )) })
             }
           ),
-          /* @__PURE__ */ jsx115(
+          /* @__PURE__ */ jsx116(
             Grid3,
             {
               size: {
@@ -21257,7 +21451,7 @@ var CategorizedPicker = function CategorizedPicker2({
               },
               height: "316px",
               className: "Slim-Vertical-Scroll",
-              children: /* @__PURE__ */ jsx115(Stack8, { children: /* @__PURE__ */ jsx115(Stack8, { children: !selectedCategory ? /* @__PURE__ */ jsx115(Stack8, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx115(
+              children: /* @__PURE__ */ jsx116(Stack9, { children: /* @__PURE__ */ jsx116(Stack9, { children: !selectedCategory ? /* @__PURE__ */ jsx116(Stack9, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx116(
                 Typography_default,
                 {
                   variant: "body2",
@@ -21269,7 +21463,7 @@ var CategorizedPicker = function CategorizedPicker2({
                   )
                 }
               ) }) : selectedCategory.categoryOptions.map(
-                (option, idx) => /* @__PURE__ */ jsx115(
+                (option, idx) => /* @__PURE__ */ jsx116(
                   ListItemButton_default,
                   {
                     selected: value?.id === option.id,
@@ -21278,10 +21472,10 @@ var CategorizedPicker = function CategorizedPicker2({
                       closePopover();
                     },
                     buttonDataTest: dataTestId ? dataTestId + "-option-" + idx : void 0,
-                    children: /* @__PURE__ */ jsx115(
+                    children: /* @__PURE__ */ jsx116(
                       TextEllipsis_default,
                       {
-                        text: /* @__PURE__ */ jsx115(
+                        text: /* @__PURE__ */ jsx116(
                           TextMarker_default,
                           {
                             searchText: search,
@@ -21307,14 +21501,14 @@ var CategorizedPicker = function CategorizedPicker2({
 var CategorizedPicker_default = CategorizedPicker;
 
 // src/components/input/ItemSelector.tsx
-import * as React63 from "react";
+import * as React64 from "react";
 
 // src/components/input/SelectPopover.tsx
-import * as React62 from "react";
-import { Grid as Grid4, Stack as Stack9 } from "@mui/material";
+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 jsx116, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs55 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
   selectedColor: Colors_exports.primaryMain,
   disabledColor: ""
@@ -21341,14 +21535,16 @@ var SelectPopover = function SelectPopover2({
   maxSelectedItems,
   keepCurrentSelectionOnSearch = true,
   emptyListPlaceholder,
-  disableApplyWithoutChanges = false
+  disableApplyWithoutChanges = false,
+  centeredInScreen = false,
+  paddingContent
 }) {
   const { t } = useTranslation();
   const [searchText, setSearchText] = useState22("");
   const [isScrollBottom, setIsScrollBottom] = useState22(false);
   const [currentItems, setCurrentItems] = useState22([]);
-  const [currentSelectedItems, setCurrentSelectedItems] = React62.useState([]);
-  const prevSelectedItemsIdsRef = React62.useRef([]);
+  const [currentSelectedItems, setCurrentSelectedItems] = React63.useState([]);
+  const prevSelectedItemsIdsRef = React63.useRef([]);
   const onSearchTextChanged = (text) => {
     onSearch(text);
     setSearchText(text);
@@ -21360,7 +21556,7 @@ var SelectPopover = function SelectPopover2({
     }
     setCurrentSelectedItems(selectedItemsIds);
   };
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     const prevSelectedItemsIds = prevSelectedItemsIdsRef.current;
     if (keepCurrentSelectionOnSearch && anchorEl) {
       let nextSelectedItems = currentSelectedItems;
@@ -21452,18 +21648,19 @@ var SelectPopover = function SelectPopover2({
   return /* @__PURE__ */ jsxs55(
     Popover_default,
     {
+      centeredInScreen,
       onClose: closePopover,
       anchorEl,
       disableRestoreFocus,
       children: [
-        /* @__PURE__ */ jsx116(
+        /* @__PURE__ */ jsx117(
           Box_default2,
           {
             sx: {
               borderBottom: `1px solid ${Colors_exports.grey200}`,
               padding: "8px"
             },
-            children: /* @__PURE__ */ jsx116(
+            children: /* @__PURE__ */ jsx117(
               DebouncedTextField_default,
               {
                 iconId: "magnify",
@@ -21478,7 +21675,7 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsx116(
+        /* @__PURE__ */ jsx117(
           InfiniteScroll,
           {
             height: 300,
@@ -21503,8 +21700,11 @@ var SelectPopover = function SelectPopover2({
                 container: true,
                 spacing: 1,
                 sx: {
-                  padding: "12px 0px 12px 12px",
+                  padding: paddingContent || "12px 0px 12px 12px",
                   width: "100%",
+                  ...!isLoading && currentItems.length === 0 && {
+                    height: "100%"
+                  },
                   "&::before": {
                     content: `''`,
                     position: "absolute",
@@ -21537,7 +21737,7 @@ var SelectPopover = function SelectPopover2({
                       onItemSelected
                     ) : getItemElement(item, onItemSelected)
                   ),
-                  isLoading && /* @__PURE__ */ jsx116(
+                  isLoading && /* @__PURE__ */ jsx117(
                     Skeleton_default,
                     {
                       variant: "text",
@@ -21550,25 +21750,25 @@ var SelectPopover = function SelectPopover2({
                       }
                     }
                   ),
-                  !isLoading && currentItems.length === 0 ? /* @__PURE__ */ jsx116(
-                    Stack9,
+                  !isLoading && currentItems.length === 0 ? typeof emptyListPlaceholder === "string" ? /* @__PURE__ */ jsx117(
+                    Stack10,
                     {
                       alignItems: "center",
                       justifyContent: "center",
                       width: "100%",
-                      children: /* @__PURE__ */ jsx116(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
+                      children: /* @__PURE__ */ jsx117(Typography_default, { variant: "body2", color: grey600, children: emptyListPlaceholder })
                     }
-                  ) : ""
+                  ) : emptyListPlaceholder : ""
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx116(
+        /* @__PURE__ */ jsx117(
           PopoverActions_default,
           {
             sx: { padding: "16px 24px" },
-            leftContent: /* @__PURE__ */ jsx116(
+            leftContent: /* @__PURE__ */ jsx117(
               Button_default,
               {
                 variant: "contained",
@@ -21578,7 +21778,7 @@ var SelectPopover = function SelectPopover2({
                 onClick: closePopover
               }
             ),
-            rightContent: /* @__PURE__ */ jsx116(
+            rightContent: /* @__PURE__ */ jsx117(
               Button_default,
               {
                 variant: "contained",
@@ -21602,7 +21802,7 @@ var SelectPopover = function SelectPopover2({
   );
 };
 function getItemElement(item, onItemClick) {
-  return /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsx117(
     SelectPopoverItem_default,
     {
       id: item.id,
@@ -21631,7 +21831,7 @@ var arraysEqual = (a, b) => {
 var SelectPopover_default = SelectPopover;
 
 // src/components/input/ItemSelector.tsx
-import { Fragment as Fragment24, jsx as jsx117, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx118, jsxs as jsxs56 } from "react/jsx-runtime";
 var ItemSelector = function ItemSelector2({
   items,
   selectedItems,
@@ -21662,16 +21862,16 @@ var ItemSelector = function ItemSelector2({
   onSearch,
   onClose
 }) {
-  const [anchorEl, setAnchorEl] = React63.useState();
-  const [searchText, setSearchText] = React63.useState("");
-  const allShownItemsRef = React63.useRef(items);
-  const selectRef = React63.useRef(null);
-  React63.useEffect(() => {
+  const [anchorEl, setAnchorEl] = React64.useState();
+  const [searchText, setSearchText] = React64.useState("");
+  const allShownItemsRef = React64.useRef(items);
+  const selectRef = React64.useRef(null);
+  React64.useEffect(() => {
     if (anchorEl) {
       onSearch(searchText);
     }
   }, [anchorEl, onSearch, searchText]);
-  React63.useEffect(() => {
+  React64.useEffect(() => {
     const allShownItems = allShownItemsRef.current;
     allShownItemsRef.current = allShownItems.concat(
       items.filter(
@@ -21685,7 +21885,7 @@ var ItemSelector = function ItemSelector2({
     item
   }) => {
     const [ref, { contentWidth: width2 }] = useResizeObserver();
-    return /* @__PURE__ */ jsx117(
+    return /* @__PURE__ */ jsx118(
       Chip_default,
       {
         ref,
@@ -21716,7 +21916,7 @@ var ItemSelector = function ItemSelector2({
     return selectedItem ? [selectedItem] : "";
   };
   return /* @__PURE__ */ jsxs56(Fragment24, { children: [
-    /* @__PURE__ */ jsx117(
+    /* @__PURE__ */ jsx118(
       Select_default,
       {
         ref: selectRef,
@@ -21733,16 +21933,16 @@ var ItemSelector = function ItemSelector2({
           let component;
           if (!value || !Array.isArray(value) || value.length === 0) {
             component = /* @__PURE__ */ jsxs56(Fragment24, { children: [
-              /* @__PURE__ */ jsx117(
+              /* @__PURE__ */ jsx118(
                 Stack_default,
                 {
                   direction: "row",
                   flexWrap: "wrap",
                   padding: "6px 0",
-                  children: /* @__PURE__ */ jsx117(Typography_default, { variant: "body2", color: grey600, children: placeholder })
+                  children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", color: grey600, children: placeholder })
                 }
               ),
-              /* @__PURE__ */ jsx117(
+              /* @__PURE__ */ jsx118(
                 Divider_default,
                 {
                   variant: "middle",
@@ -21767,7 +21967,7 @@ var ItemSelector = function ItemSelector2({
                       const item = selectedItems.find(
                         (i) => i.id === id
                       );
-                      return item ? /* @__PURE__ */ jsx117(
+                      return item ? /* @__PURE__ */ jsx118(
                         ItemChip,
                         {
                           item: {
@@ -21776,14 +21976,14 @@ var ItemSelector = function ItemSelector2({
                           }
                         },
                         id
-                      ) : /* @__PURE__ */ jsx117(Fragment24, {});
+                      ) : /* @__PURE__ */ jsx118(Fragment24, {});
                     }),
-                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx117(
+                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx118(
                       Tooltip_default,
                       {
                         interactive: true,
                         variant: "white",
-                        title: /* @__PURE__ */ jsx117(
+                        title: /* @__PURE__ */ jsx118(
                           Stack_default,
                           {
                             direction: "row",
@@ -21800,24 +22000,24 @@ var ItemSelector = function ItemSelector2({
                               const item = selectedItems.find(
                                 (i) => i.id === id
                               );
-                              return item ? /* @__PURE__ */ jsx117(
+                              return item ? /* @__PURE__ */ jsx118(
                                 ItemChip,
                                 {
                                   item
                                 },
                                 id
-                              ) : /* @__PURE__ */ jsx117(Fragment24, {});
+                              ) : /* @__PURE__ */ jsx118(Fragment24, {});
                             })
                           }
                         ),
-                        children: /* @__PURE__ */ jsx117(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
+                        children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
                       }
                     ) : void 0
                   ]
                 }
               ),
               !disabled && /* @__PURE__ */ jsxs56(Stack_default, { direction: "row", children: [
-                /* @__PURE__ */ jsx117(
+                /* @__PURE__ */ jsx118(
                   IconButton_default,
                   {
                     iconId: "close",
@@ -21835,7 +22035,7 @@ var ItemSelector = function ItemSelector2({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx117(
+                /* @__PURE__ */ jsx118(
                   Divider_default,
                   {
                     variant: "middle",
@@ -21846,7 +22046,7 @@ var ItemSelector = function ItemSelector2({
               ] })
             ] });
           }
-          return /* @__PURE__ */ jsx117(
+          return /* @__PURE__ */ jsx118(
             Stack_default,
             {
               direction: "row",
@@ -21868,8 +22068,8 @@ var ItemSelector = function ItemSelector2({
         }
       }
     ),
-    helperText && /* @__PURE__ */ jsx117(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
-    /* @__PURE__ */ jsx117(
+    helperText && /* @__PURE__ */ jsx118(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
+    /* @__PURE__ */ jsx118(
       SelectPopover_default,
       {
         items: items.map((item) => {
@@ -21917,7 +22117,7 @@ var ItemSelector = function ItemSelector2({
 var ItemSelector_default = ItemSelector;
 
 // src/components/input/Autocomplete.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import { Popper, ClickAwayListener } from "@mui/material";
 import { FixedSizeList as FixedSizeList3 } from "react-window";
 import AutoSizer5 from "react-virtualized-auto-sizer";
@@ -21934,7 +22134,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 jsx118, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx119, jsxs as jsxs57 } from "react/jsx-runtime";
 var AUTOCOMPLETE_ITEM_HEIGHT = 44;
 var Autocomplete = function Autocomplete2({
   variant = "default",
@@ -21964,19 +22164,19 @@ var Autocomplete = function Autocomplete2({
   disableClear
 }, ref) {
   const { t } = useTranslation();
-  const anchorRef = React64.useRef(null);
-  const inputRef = React64.useRef(null);
-  const expandSelectButtonRef = React64.useRef(null);
-  const listRef = React64.useRef(null);
-  const virtualListRef = React64.createRef();
-  const [isOpen, setOpen] = React64.useState(false);
-  const [isDirty, setDirty] = React64.useState(false);
-  const [selectedIndex, setSelectedIndex] = React64.useState(void 0);
-  const [placeholder, setPlaceholder] = React64.useState(
+  const anchorRef = React65.useRef(null);
+  const inputRef = React65.useRef(null);
+  const expandSelectButtonRef = React65.useRef(null);
+  const listRef = React65.useRef(null);
+  const virtualListRef = React65.createRef();
+  const [isOpen, setOpen] = React65.useState(false);
+  const [isDirty, setDirty] = React65.useState(false);
+  const [selectedIndex, setSelectedIndex] = React65.useState(void 0);
+  const [placeholder, setPlaceholder] = React65.useState(
     textFieldProps?.placeholder || ""
   );
-  const _renderLabel = React64.useCallback((id) => id, []);
-  const [inputValue, setInputValue] = React64.useState(
+  const _renderLabel = React65.useCallback((id) => id, []);
+  const [inputValue, setInputValue] = React65.useState(
     multiple ? "" : (renderLabel ?? _renderLabel)(value)
   );
   const dirty = !!inputValue || Array.isArray(value) && value.length > 0;
@@ -22039,7 +22239,7 @@ var Autocomplete = function Autocomplete2({
   if (allowFreeText && freeOption.id !== "" && !filteredOptions.includes(freeOption) && !options.some((option) => option.id === freeOption.id)) {
     filteredOptions.unshift(freeOption);
   }
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     if (isOpen) {
       if (typeof selectedIndex === "number") {
         virtualListRef.current?.scrollToItem(selectedIndex);
@@ -22073,12 +22273,12 @@ var Autocomplete = function Autocomplete2({
     filteredOptions.length,
     virtualListRef
   ]);
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     if (!multiple) {
       setInputValue((renderLabel ?? _renderLabel)(value));
     }
   }, [value]);
-  React64.useEffect(() => {
+  React65.useEffect(() => {
     if (!isOpen && !allowFreeText) {
       if (multiple) {
         setInputValue("");
@@ -22130,7 +22330,7 @@ var Autocomplete = function Autocomplete2({
     style: style3
   }) => {
     const option = filteredOptions[index];
-    return /* @__PURE__ */ jsx118(
+    return /* @__PURE__ */ jsx119(
       ListItemButton_default,
       {
         selected: index === selectedIndex,
@@ -22139,7 +22339,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__ */ jsx118(Icon_default, { sx: { color: primaryMain }, id: "check" }) : /* @__PURE__ */ jsx118(
+        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(
           Icon_default,
           {
             id: Array.isArray(value) && value.includes(option.id) ? "close" : "plus"
@@ -22152,7 +22352,7 @@ var Autocomplete = function Autocomplete2({
     );
   };
   return /* @__PURE__ */ jsxs57(Fragment25, { children: [
-    /* @__PURE__ */ jsx118(
+    /* @__PURE__ */ jsx119(
       DebouncedTextField_default,
       {
         ref: ref ?? inputRef,
@@ -22242,7 +22442,7 @@ var Autocomplete = function Autocomplete2({
               alignItems: "center"
             },
             children: [
-              value.slice(0, limitValueTags || value.length).map((id) => /* @__PURE__ */ jsx118(
+              value.slice(0, limitValueTags || value.length).map((id) => /* @__PURE__ */ jsx119(
                 Chip_default,
                 {
                   label: (renderLabel ?? _renderLabel)(
@@ -22262,12 +22462,12 @@ var Autocomplete = function Autocomplete2({
                 },
                 id
               )),
-              limitValueTags && value.length - limitValueTags > 0 ? /* @__PURE__ */ jsx118(
+              limitValueTags && value.length - limitValueTags > 0 ? /* @__PURE__ */ jsx119(
                 Tooltip_default,
                 {
                   interactive: true,
                   variant: "white",
-                  title: /* @__PURE__ */ jsx118(
+                  title: /* @__PURE__ */ jsx119(
                     Stack_default,
                     {
                       direction: "row",
@@ -22280,7 +22480,7 @@ var Autocomplete = function Autocomplete2({
                       children: value.slice(
                         limitValueTags,
                         value.length
-                      ).map((id) => /* @__PURE__ */ jsx118(
+                      ).map((id) => /* @__PURE__ */ jsx119(
                         Chip_default,
                         {
                           label: (renderLabel ?? _renderLabel)(id),
@@ -22300,7 +22500,7 @@ var Autocomplete = function Autocomplete2({
                       ))
                     }
                   ),
-                  children: /* @__PURE__ */ jsx118(Typography_default, { variant: "body2", children: `+${value.length - limitValueTags}` })
+                  children: /* @__PURE__ */ jsx119(Typography_default, { variant: "body2", children: `+${value.length - limitValueTags}` })
                 }
               ) : ""
             ]
@@ -22317,7 +22517,7 @@ var Autocomplete = function Autocomplete2({
             spacing: 1,
             children: [
               textFieldProps?.endAdornment,
-              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx118(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx118(
+              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx119(Tooltip_default, { title: t("AUTOCOMPLETE.CLEAR"), children: /* @__PURE__ */ jsx119(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -22340,7 +22540,7 @@ var Autocomplete = function Autocomplete2({
                   "data-test": "clear-autocomplete"
                 }
               ) }),
-              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx118(
+              !disabled && dirty && showClearButton && /* @__PURE__ */ jsx119(
                 Divider_default,
                 {
                   variant: "middle",
@@ -22348,11 +22548,11 @@ var Autocomplete = function Autocomplete2({
                   flexItem: true
                 }
               ),
-              !disabled && variant !== "text" && /* @__PURE__ */ jsx118(
+              !disabled && variant !== "text" && /* @__PURE__ */ jsx119(
                 Tooltip_default,
                 {
                   title: isOpen ? t("AUTOCOMPLETE.COLLAPSE") : t("AUTOCOMPLETE.EXPAND"),
-                  children: /* @__PURE__ */ jsx118(
+                  children: /* @__PURE__ */ jsx119(
                     IconButton_default,
                     {
                       ref: expandSelectButtonRef,
@@ -22374,7 +22574,7 @@ var Autocomplete = function Autocomplete2({
         autoComplete: "off"
       }
     ),
-    /* @__PURE__ */ jsx118(
+    /* @__PURE__ */ jsx119(
       ClickAwayListener,
       {
         onClickAway: (event) => {
@@ -22399,13 +22599,13 @@ var Autocomplete = function Autocomplete2({
           }
         },
         mouseEvent: "onMouseDown",
-        children: /* @__PURE__ */ jsx118(
+        children: /* @__PURE__ */ jsx119(
           Popper,
           {
             anchorEl: anchorRef.current,
             open: isOpen,
             sx: { zIndex: 3e3 },
-            children: /* @__PURE__ */ jsx118(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs57(
+            children: /* @__PURE__ */ jsx119(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs57(
               Box_default2,
               {
                 sx: {
@@ -22417,22 +22617,22 @@ var Autocomplete = function Autocomplete2({
                 className: "Slim-Vertical-Scroll",
                 ref: listRef,
                 children: [
-                  isLoading && /* @__PURE__ */ jsx118(
+                  isLoading && /* @__PURE__ */ jsx119(
                     ListItem_default,
                     {
                       text: loadingText ?? t("AUTOCOMPLETE.LOADING")
                     }
                   ),
-                  !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx118(
+                  !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx119(
                     ListItem_default,
                     {
                       text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
                     }
                   ),
-                  !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx118(AutoSizer5, { children: ({
+                  !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx119(AutoSizer5, { children: ({
                     height: height2,
                     width: width2
-                  }) => /* @__PURE__ */ jsx118(
+                  }) => /* @__PURE__ */ jsx119(
                     FixedSizeList3,
                     {
                       overscanCount: 3,
@@ -22455,22 +22655,22 @@ var Autocomplete = function Autocomplete2({
     )
   ] });
 };
-var Autocomplete_default = React64.forwardRef(Autocomplete);
+var Autocomplete_default = React65.forwardRef(Autocomplete);
 function escapeRegExp2(source) {
   return source.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function elementIsDescendantOrEqual(parent, descendant) {
-  if (!parent || !descendant || parent === document.body || descendant.parentElement === null) {
+function elementIsDescendantOrEqual(parent2, descendant) {
+  if (!parent2 || !descendant || parent2 === document.body || descendant.parentElement === null) {
     return false;
   }
-  if (parent === descendant) {
+  if (parent2 === descendant) {
     return true;
   }
-  return elementIsDescendantOrEqual(parent, descendant.parentElement);
+  return elementIsDescendantOrEqual(parent2, descendant.parentElement);
 }
 
 // src/components/input/TextEditor.tsx
-import React67 from "react";
+import React68 from "react";
 import { Editor } from "@tinymce/tinymce-react";
 import "tinymce/tinymce";
 import "tinymce/models/dom/model";
@@ -22491,16 +22691,16 @@ import "tinymce/plugins/wordcount";
 import "tinymce/plugins/emoticons/js/emojis";
 
 // src/components/input/CodeEditorPopup.tsx
-import React66 from "react";
+import React67 from "react";
 
 // src/components/input/CodeEditor.tsx
-import React65 from "react";
+import React66 from "react";
 import CodeMirror, {
   EditorView
 } from "@uiw/react-codemirror";
 import { html } from "@codemirror/lang-html";
 import { linter, lintGutter } from "@codemirror/lint";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 var removeFocusOutline = EditorView.baseTheme({
   "&.cm-focused": {
     outline: "none"
@@ -22522,7 +22722,7 @@ var CodeEditor = function CodeEditor2({
     linter(linterOptions?.source || null, linterOptions?.config),
     ...extensions
   ] : extensions;
-  return /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx120(
     CodeMirror,
     {
       ...rest,
@@ -22537,11 +22737,11 @@ var CodeEditor = function CodeEditor2({
     }
   );
 };
-var CodeEditor_default = React65.forwardRef(CodeEditor);
+var CodeEditor_default = React66.forwardRef(CodeEditor);
 
 // src/components/input/CodeEditorPopup.tsx
 import format from "html-format";
-import { Fragment as Fragment26, jsx as jsx120, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx121, jsxs as jsxs58 } from "react/jsx-runtime";
 var FORMAT_CHARACTERS_LINE = 120;
 var FORMAT_NUMBER_SPACES_INDENTATION = 2;
 var CodeEditorPopup = ({
@@ -22557,9 +22757,9 @@ var CodeEditorPopup = ({
   onCancel
 }) => {
   const { t } = useTranslation();
-  const [valueModified, setValueModified] = React66.useState(value);
-  const [hasErrors, setHasErrors] = React66.useState(false);
-  React66.useEffect(() => {
+  const [valueModified, setValueModified] = React67.useState(value);
+  const [hasErrors, setHasErrors] = React67.useState(false);
+  React67.useEffect(() => {
     if (open) {
       setValueModified(value);
     }
@@ -22585,7 +22785,7 @@ var CodeEditorPopup = ({
     FORMAT_CHARACTERS_LINE
   );
   return /* @__PURE__ */ jsxs58(Fragment26, { children: [
-    readonly && /* @__PURE__ */ jsx120(
+    readonly && /* @__PURE__ */ jsx121(
       Dialog_default,
       {
         open,
@@ -22604,7 +22804,7 @@ var CodeEditorPopup = ({
             justifyContent: "space-between",
             paddingTop: "20px",
             children: [
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 Box_default2,
                 {
                   flexGrow: 1,
@@ -22621,7 +22821,7 @@ var CodeEditorPopup = ({
                         }
                       },
                       children: [
-                        /* @__PURE__ */ jsx120(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx120(
+                        /* @__PURE__ */ jsx121(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx121(
                           CodeEditor_default,
                           {
                             autoFocus: true,
@@ -22650,7 +22850,7 @@ var CodeEditorPopup = ({
                           }
                         ) }),
                         messageNode,
-                        hasErrors && /* @__PURE__ */ jsx120(Alert_default, { severity: "info", children: t(
+                        hasErrors && /* @__PURE__ */ jsx121(Alert_default, { severity: "info", children: t(
                           "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
                         ) })
                       ]
@@ -22658,13 +22858,13 @@ var CodeEditorPopup = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(
                 Box_default2,
                 {
                   sx: {
                     padding: "16px 24px 16px 24px"
                   },
-                  children: /* @__PURE__ */ jsx120(
+                  children: /* @__PURE__ */ jsx121(
                     Button_default,
                     {
                       text: t(
@@ -22681,7 +22881,7 @@ var CodeEditorPopup = ({
         )
       }
     ),
-    !readonly && /* @__PURE__ */ jsx120(
+    !readonly && /* @__PURE__ */ jsx121(
       ConfirmationDialog_default,
       {
         fullScreen: true,
@@ -22700,7 +22900,7 @@ var CodeEditorPopup = ({
               }
             },
             children: [
-              codeEditorSubtitle && /* @__PURE__ */ jsx120(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx120(
+              codeEditorSubtitle && /* @__PURE__ */ jsx121(Box_default2, { sx: { marginTop: "4px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx121(
                 Typography_default,
                 {
                   variant: "body2",
@@ -22708,7 +22908,7 @@ var CodeEditorPopup = ({
                   children: codeEditorSubtitle
                 }
               ) }),
-              /* @__PURE__ */ jsx120(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx120(
+              /* @__PURE__ */ jsx121(Box_default2, { flexGrow: 1, minHeight: 0, children: /* @__PURE__ */ jsx121(
                 CodeEditor_default,
                 {
                   autoFocus: true,
@@ -22737,7 +22937,7 @@ var CodeEditorPopup = ({
                 }
               ) }),
               messageNode,
-              hasErrors && /* @__PURE__ */ jsx120(Alert_default, { severity: "info", children: t(
+              hasErrors && /* @__PURE__ */ jsx121(Alert_default, { severity: "info", children: t(
                 "TEXT_EDITOR.SOURCE_CODE.VALIDATION_ERRORS_FOUND"
               ) })
             ]
@@ -22750,7 +22950,7 @@ var CodeEditorPopup = ({
 var CodeEditorPopup_default = CodeEditorPopup;
 
 // src/components/input/TextEditor.tsx
-import { Fragment as Fragment27, jsx as jsx121, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx122, jsxs as jsxs59 } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR_INSERT_MENU_ITEMS = [
   "link",
   "image",
@@ -22789,15 +22989,15 @@ var TextEditor = function TextEditor2({
   ...rest
 }) {
   const { t } = useTranslation();
-  const editorRef = React67.useRef(null);
-  const [internalValue] = React67.useState(
+  const editorRef = React68.useRef(null);
+  const [internalValue] = React68.useState(
     initialValue ?? t("TEXT_EDITOR.INITIAL_VALUE")
   );
-  const [contentValue, setContentValue] = React67.useState("");
-  const [codeEditorChanges, setCodeEditorChanges] = React67.useState("");
-  const [isCodeEditorDirty, setIsCodeEditorDirty] = React67.useState(false);
-  const [isCodeEditorOpened, setIsCodeEditorOpened] = React67.useState(false);
-  const [isDirty, setIsDirty] = React67.useState(false);
+  const [contentValue, setContentValue] = React68.useState("");
+  const [codeEditorChanges, setCodeEditorChanges] = React68.useState("");
+  const [isCodeEditorDirty, setIsCodeEditorDirty] = React68.useState(false);
+  const [isCodeEditorOpened, setIsCodeEditorOpened] = React68.useState(false);
+  const [isDirty, setIsDirty] = React68.useState(false);
   const codeEditorButtonIndexToUse = codeEditorButtonIndex ?? customToolbarGroups.insert?.items?.length ?? DEFAULT_TOOLBAR_INSERT_MENU_ITEMS.length;
   const defaultToolbarInsertMenuItemsWithCodeEditor = DEFAULT_TOOLBAR_INSERT_MENU_ITEMS.slice();
   defaultToolbarInsertMenuItemsWithCodeEditor.splice(
@@ -22811,12 +23011,12 @@ var TextEditor = function TextEditor2({
     0,
     "cnCodeEditor"
   );
-  const onTextChange = React67.useCallback(() => {
+  const onTextChange = React68.useCallback(() => {
     if (editorRef.current) {
       onChange(editorRef.current?.getContent());
     }
   }, [onChange]);
-  const onTextEditorDirty = React67.useCallback(
+  const onTextEditorDirty = React68.useCallback(
     (textEditorDirty) => {
       editorRef.current?.setDirty(textEditorDirty);
       setIsDirty(textEditorDirty);
@@ -22829,7 +23029,7 @@ var TextEditor = function TextEditor2({
     },
     [onDirty, onTextChange]
   );
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (resetDirty && editorRef.current?.isDirty()) {
       onTextEditorDirty(false);
     }
@@ -22837,7 +23037,7 @@ var TextEditor = function TextEditor2({
       onResetDirty();
     }
   }, [onResetDirty, onTextEditorDirty, resetDirty]);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (newValue && editorRef.current) {
       editorRef.current.setContent(newValue);
       if (onNewValueSetter) {
@@ -22845,7 +23045,7 @@ var TextEditor = function TextEditor2({
       }
     }
   }, [newValue, onNewValueSetter]);
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (forceCloseCodeEditor) {
       setIsCodeEditorOpened(false);
       if (onForceCloseCodeEditor) {
@@ -23037,7 +23237,7 @@ var TextEditor = function TextEditor2({
     }
   };
   return /* @__PURE__ */ jsxs59(Fragment27, { children: [
-    /* @__PURE__ */ jsx121(
+    /* @__PURE__ */ jsx122(
       Editor,
       {
         id,
@@ -23057,7 +23257,7 @@ var TextEditor = function TextEditor2({
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx121(
+    /* @__PURE__ */ jsx122(
       CodeEditorPopup_default,
       {
         value: contentValue,
@@ -23091,66 +23291,6 @@ var TextEditor = function TextEditor2({
 };
 var TextEditor_default = TextEditor;
 
-// src/components/input/TimeField.tsx
-import * as React68 from "react";
-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 tz6 } from "moment-timezone";
-import { jsx as jsx122 } from "react/jsx-runtime";
-var ExtendedTextField = ({
-  inputProps,
-  ownerState,
-  InputProps,
-  error,
-  ...rest
-}) => /* @__PURE__ */ jsx122(TextField_default, { ...inputProps, ...rest });
-var TimeField = function TimeField2({
-  onChange,
-  value,
-  showMinutes = true,
-  showSeconds = false,
-  ...rest
-}) {
-  const { locale, timezone } = React68.useContext(IntlContext);
-  const hour12 = React68.useMemo(() => {
-    const resolvedOptions = Intl.DateTimeFormat(locale, {
-      hour: "numeric"
-    }).resolvedOptions();
-    return resolvedOptions.hour12;
-  }, [locale]);
-  const format2 = `${hour12 ? "hh" : "HH"}${showSeconds || showMinutes ? ":mm" : ""}${showSeconds ? ":ss" : ""}${hour12 ? " a" : ""}`;
-  const momentValue = React68.useMemo(() => {
-    if (value && !isNaN(value.getTime())) {
-      return tz6(value, timezone);
-    }
-    return null;
-  }, [timezone, value]);
-  const _onChange = React68.useCallback(
-    (momentValue2, context) => {
-      const value2 = momentValue2 && momentValue2.isValid() ? momentValue2.toDate() : null;
-      onChange && onChange(value2, context);
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsx122(LocalizationProvider, { dateAdapter: AdapterMoment, children: /* @__PURE__ */ jsx122(
-    MuiTimeField,
-    {
-      onChange: _onChange,
-      value: momentValue,
-      format: format2,
-      slots: {
-        textField: ExtendedTextField
-      },
-      slotProps: {
-        textField: rest
-      },
-      enableAccessibleFieldDOMStructure: false
-    }
-  ) });
-};
-var TimeField_default = TimeField;
-
 // src/components/input/PhoneField.tsx
 import * as React69 from "react";
 import { Fragment as Fragment28, jsx as jsx123, jsxs as jsxs60 } from "react/jsx-runtime";
@@ -24191,7 +24331,7 @@ var CircularProgress_default = CircularProgress;
 
 // src/components/progress/DonutProgress.tsx
 import Box5 from "@mui/material/Box";
-import { Stack as Stack10 } from "@mui/material";
+import { Stack as Stack11 } from "@mui/material";
 import { jsx as jsx133, jsxs as jsxs68 } from "react/jsx-runtime";
 var CIRCULAR_PROGRESS_PERCENTAGE = 85;
 var variants2 = {
@@ -24228,7 +24368,7 @@ var DonutProgress = ({
   labelChip,
   showPercentageSymbol
 }) => {
-  const getPercentageWithSymbol = () => /* @__PURE__ */ jsxs68(Stack10, { direction: "row", alignItems: "center", position: "relative", children: [
+  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(
       Typography_default,
@@ -25059,16 +25199,346 @@ var HorizontalScrollable = ({
 };
 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";
+var buttonStyles = {
+  color: grey800,
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: 1,
+  backgroundColor: white,
+  border: `1px solid ${grey200}`,
+  cursor: "pointer",
+  transition: "opacity 0.3s ease"
+};
+function Carousel({
+  items,
+  renderItem,
+  gap: gap2 = 8,
+  padding: padding2 = 8
+}) {
+  const rootRef = React81.useRef(null);
+  const containerRef = React81.useRef(null);
+  const previousClientWidth = React81.useRef(null);
+  const isScrolling = React81.useRef(false);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React81.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React81.useState(true);
+  const [paddingElement, setPaddingElement] = React81.useState();
+  const [visibleCount, setVisibleCount] = React81.useState();
+  const showedElementsRef = React81.useRef();
+  const [showedElements, setShowedElements] = React81.useState();
+  const updateArrows = React81.useCallback(() => {
+    if (!showedElementsRef.current) {
+      return;
+    }
+    setLeftArrowHidden(showedElementsRef.current.start === 0);
+    setRightArrowHidden(showedElementsRef.current.end === items.length - 1);
+  }, [items.length]);
+  const getUsableWidth = React81.useCallback(
+    (el) => {
+      let current = el;
+      while (current) {
+        const w = current.clientWidth;
+        if (w > 0 && w < window.innerWidth) {
+          return w;
+        }
+        current = current.parentElement;
+      }
+      return el?.clientWidth ?? 0;
+    },
+    []
+  );
+  const resetCarousel = React81.useCallback(
+    (root, container) => {
+      root.style.width = "";
+      showedElementsRef.current = void 0;
+      setShowedElements(void 0);
+      container.scrollTo({ left: 0, behavior: "instant" });
+    },
+    []
+  );
+  const setMeasures = React81.useCallback(
+    (root, container, nextElementsIndex) => {
+      const children = Array.from(container.children);
+      if (children.length === 0) {
+        setVisibleCount(0);
+        return;
+      }
+      const containerWidth = getUsableWidth(root);
+      const initialHorizontalPadding = padding2 * 2;
+      let count = 0;
+      let accumulatedWidth = initialHorizontalPadding;
+      let nextChild = children[nextElementsIndex.start];
+      while (nextChild && accumulatedWidth + nextChild.offsetWidth <= containerWidth) {
+        accumulatedWidth += nextChild.offsetWidth + (count > 0 ? gap2 : 0);
+        count++;
+        nextChild = children[nextElementsIndex.start + count];
+      }
+      const addGap = nextElementsIndex.start + count < items.length;
+      const diffWidth = containerWidth - accumulatedWidth + initialHorizontalPadding + (addGap ? gap2 : 0);
+      setPaddingElement(`${diffWidth / 2}px`);
+      setVisibleCount(count);
+      showedElementsRef.current = nextElementsIndex;
+      setShowedElements(nextElementsIndex);
+      return {
+        childrenWidth: accumulatedWidth
+      };
+    },
+    [gap2, getUsableWidth, items.length, padding2]
+  );
+  const updateVisibleCount = React81.useCallback(() => {
+    const root = rootRef.current;
+    const container = containerRef.current;
+    if (!container || !parent) {
+      return;
+    }
+    if (root) {
+      resetCarousel(root, container);
+    }
+    const children = Array.from(container.children);
+    if (children.length === 0) {
+      setVisibleCount(0);
+      return;
+    }
+    const containerWidth = getUsableWidth(root);
+    const initialHorizontalPadding = padding2 * 2;
+    let count = 0;
+    let accumulatedWidth = initialHorizontalPadding;
+    for (const child of children) {
+      if (accumulatedWidth + child.offsetWidth <= containerWidth) {
+        accumulatedWidth += child.offsetWidth + (count > 0 ? gap2 : 0);
+        count++;
+      } else {
+        break;
+      }
+    }
+    const addGap = count < items.length;
+    const diffWidth = containerWidth - accumulatedWidth + initialHorizontalPadding + (addGap ? gap2 : 0);
+    const newPaddingSize = `${diffWidth / 2}px`;
+    setPaddingElement(newPaddingSize);
+    setVisibleCount(count);
+    const newVisible = { start: 0, end: count - 1 };
+    showedElementsRef.current = newVisible;
+    setShowedElements(newVisible);
+    if (root) {
+      root.style.width = `${containerWidth}px`;
+    }
+    updateArrows();
+  }, [
+    getUsableWidth,
+    padding2,
+    items.length,
+    gap2,
+    updateArrows,
+    resetCarousel
+  ]);
+  const getInitialWidth = React81.useCallback(
+    (el) => {
+      let current = el;
+      let width2 = 0;
+      while (current) {
+        const w = current.clientWidth;
+        if (w && w > window.innerWidth) {
+          return width2;
+        }
+        if (w > 0 && w <= window.innerWidth) {
+          width2 = w;
+        }
+        current = current.parentElement;
+      }
+      return width2 > 0 ? width2 : el?.clientWidth ?? 0;
+    },
+    []
+  );
+  const resizeObserverCallback = React81.useCallback(() => {
+    if (!rootRef.current || !containerRef.current) {
+      return;
+    }
+    const newClientWidth = getInitialWidth(rootRef.current);
+    if (previousClientWidth.current && previousClientWidth.current === newClientWidth) {
+      return;
+    }
+    previousClientWidth.current = newClientWidth;
+    updateVisibleCount();
+  }, [getInitialWidth, updateVisibleCount]);
+  React81.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    window.addEventListener("resize", resizeObserverCallback);
+    const resizeObserver = new ResizeObserver(resizeObserverCallback);
+    resizeObserver.observe(container);
+    const mutationObserver = new MutationObserver(resizeObserverCallback);
+    mutationObserver.observe(container, { childList: true, subtree: true });
+    return () => {
+      window.removeEventListener("resize", resizeObserverCallback);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [resizeObserverCallback]);
+  const waitForSmoothScrollEnd = (container, onEnd) => {
+    let prev = container.scrollLeft;
+    let idleFrames = 0;
+    const check = () => {
+      const current = container.scrollLeft;
+      const isMoving = current !== prev;
+      prev = current;
+      if (isMoving) {
+        idleFrames = 0;
+        requestAnimationFrame(check);
+        return;
+      }
+      if (idleFrames < 5) {
+        idleFrames++;
+        requestAnimationFrame(check);
+        return;
+      }
+      onEnd();
+    };
+    requestAnimationFrame(check);
+  };
+  const scrollHorizontal = ({
+    elementsIndex
+  }, direction) => {
+    const container = containerRef.current;
+    const root = rootRef.current;
+    if (!container || !root) {
+      return;
+    }
+    const newMeasures = setMeasures(root, container, elementsIndex);
+    if (newMeasures) {
+      const scrollLeft = (elementsIndex.end < items.length - 1 ? container.scrollLeft + container.clientWidth : container.scrollWidth - newMeasures.childrenWidth) + padding2 * 2;
+      const targetLeft = direction === "right" ? scrollLeft : Math.max(
+        container.scrollLeft - newMeasures.childrenWidth,
+        0
+      );
+      waitForSmoothScrollEnd(container, () => {
+        isScrolling.current = false;
+        updateArrows();
+      });
+      showedElementsRef.current = elementsIndex;
+      setShowedElements(elementsIndex);
+      container.scrollTo({ left: targetLeft, behavior: "smooth" });
+    }
+  };
+  const scrollToNext = (direction) => {
+    if (!containerRef.current || !showedElementsRef.current || isScrolling.current) {
+      return;
+    }
+    isScrolling.current = true;
+    const children = Array.from(
+      containerRef.current.children
+    );
+    const visibleCountDefined = visibleCount ?? 0;
+    let scrollData;
+    if (direction === "right") {
+      const firstHidden = showedElementsRef.current.end + 1;
+      const rightChildren = children.slice(
+        firstHidden,
+        firstHidden + visibleCountDefined
+      );
+      scrollData = {
+        elementsIndex: {
+          start: showedElementsRef.current.start + rightChildren.length,
+          end: showedElementsRef.current.end + rightChildren.length
+        }
+      };
+    } else {
+      const rest = showedElementsRef.current.start - visibleCountDefined;
+      const toMove = rest > 0 ? visibleCountDefined : visibleCountDefined + rest;
+      const start = showedElementsRef.current.start - toMove;
+      const end = showedElementsRef.current.end - toMove;
+      scrollData = {
+        elementsIndex: { start, end }
+      };
+    }
+    scrollHorizontal(scrollData, direction);
+  };
+  return /* @__PURE__ */ jsx144(Box_default2, { ref: rootRef, width: "100%", children: /* @__PURE__ */ jsxs75(
+    Box_default2,
+    {
+      sx: {
+        position: "relative",
+        alignSelf: "center",
+        padding: `${padding2}px`,
+        ...paddingElement && {
+          padding: `${padding2}px ${paddingElement}`
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx144(
+          IconButton_default,
+          {
+            iconId: "chevron-left",
+            size: "M",
+            sx: {
+              ...buttonStyles,
+              left: `${-16 + (paddingElement ? parseInt(paddingElement, 10) : 0)}px`,
+              opacity: isLeftArrowHidden ? 0 : 1
+            },
+            onClick: () => scrollToNext("left")
+          }
+        ),
+        /* @__PURE__ */ jsx144(
+          Box_default2,
+          {
+            ref: containerRef,
+            sx: {
+              width: "100%",
+              overflowX: "hidden",
+              display: "flex",
+              scrollBehavior: "smooth",
+              scrollbarWidth: "none",
+              "::-webkit-scrollbar": { display: "none" },
+              gap: `${gap2}px`
+            },
+            children: items.map((item, index) => /* @__PURE__ */ jsx144(
+              Box_default2,
+              {
+                sx: {
+                  ...showedElements && (index < showedElements.start || index > showedElements.end) && {
+                    opacity: 0
+                  },
+                  transition: "opacity 0.5s ease"
+                },
+                children: renderItem(item, index)
+              },
+              index
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx144(
+          IconButton_default,
+          {
+            iconId: "chevron-right",
+            size: "M",
+            sx: {
+              ...buttonStyles,
+              right: `${-16 + (paddingElement ? parseInt(paddingElement, 10) : 0)}px`,
+              opacity: isRightArrowHidden ? 0 : 1
+            },
+            onClick: () => scrollToNext("right")
+          }
+        )
+      ]
+    }
+  ) });
+}
+var Carousel_default = Carousel;
+
 // src/components/snackbar/SnackbarProvider.tsx
 import {
   SnackbarProvider as NotistackSnackbarProvider
 } from "notistack";
-import { jsx as jsx144 } from "react/jsx-runtime";
+import { jsx as jsx145 } from "react/jsx-runtime";
 var SnackbarProvider = ({
   children,
   maxSnack = 3,
   domRoot
-}) => /* @__PURE__ */ jsx144(
+}) => /* @__PURE__ */ jsx145(
   NotistackSnackbarProvider,
   {
     maxSnack,
@@ -25086,10 +25556,10 @@ import {
 } from "notistack";
 
 // src/components/snackbar/Snackbar.tsx
-import * as React81 from "react";
+import * as React82 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx145, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs76 } from "react/jsx-runtime";
 var sizeStyles5 = {
   M: {
     width: "344px",
@@ -25114,7 +25584,7 @@ var iconColors = {
   error: error300,
   warning: complementary300
 };
-var Snackbar = React81.forwardRef(
+var Snackbar = React82.forwardRef(
   function Snackbar2({
     severity = "info",
     message,
@@ -25126,13 +25596,13 @@ var Snackbar = React81.forwardRef(
     identifierKey: key,
     dataTestKey
   }, ref) {
-    const actionClickHandler = React81.useCallback(() => {
+    const actionClickHandler = React82.useCallback(() => {
       onActionClick && onActionClick(key);
     }, [onActionClick, key]);
-    const closeClickHandler = React81.useCallback(() => {
+    const closeClickHandler = React82.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
-    return /* @__PURE__ */ jsx145(
+    return /* @__PURE__ */ jsx146(
       SnackbarContent,
       {
         ref,
@@ -25150,14 +25620,14 @@ var Snackbar = React81.forwardRef(
         ...dataTestKey && {
           "data-test": dataTestKey
         },
-        children: /* @__PURE__ */ jsxs75(
+        children: /* @__PURE__ */ jsxs76(
           Stack_default,
           {
             direction: "row",
             spacing: 2,
             sx: { width: "100%", alignItems: "center" },
             children: [
-              withIcon && /* @__PURE__ */ jsx145(
+              withIcon && /* @__PURE__ */ jsx146(
                 Box_default2,
                 {
                   sx: {
@@ -25165,10 +25635,10 @@ var Snackbar = React81.forwardRef(
                     flexShrink: 0,
                     color: iconColors[severity]
                   },
-                  children: /* @__PURE__ */ jsx145(Icon_default, { id: severityIcons[severity] })
+                  children: /* @__PURE__ */ jsx146(Icon_default, { id: severityIcons[severity] })
                 }
               ),
-              /* @__PURE__ */ jsx145(
+              /* @__PURE__ */ jsx146(
                 Typography4,
                 {
                   variant: "body2",
@@ -25176,7 +25646,7 @@ var Snackbar = React81.forwardRef(
                   children: message
                 }
               ),
-              actionText && /* @__PURE__ */ jsx145(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx145(
+              actionText && /* @__PURE__ */ jsx146(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx146(
                 Button_default,
                 {
                   sx: {
@@ -25191,7 +25661,7 @@ var Snackbar = React81.forwardRef(
                   onClick: actionClickHandler
                 }
               ) }),
-              /* @__PURE__ */ jsx145(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx145(
+              /* @__PURE__ */ jsx146(Box_default2, { sx: { flexGrow: 0, flexShrink: 0 }, children: /* @__PURE__ */ jsx146(
                 IconButton_default,
                 {
                   iconId: "close",
@@ -25216,7 +25686,7 @@ var Snackbar_default = Snackbar;
 
 // src/components/snackbar/enqueueSnackbar.tsx
 import { closeSnackbar as closeSnackbar2 } from "notistack";
-import { jsx as jsx146 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "react/jsx-runtime";
 var enqueueSnackbar = (message, options = {}) => {
   const {
     persist,
@@ -25232,7 +25702,7 @@ var enqueueSnackbar = (message, options = {}) => {
     autoHideDuration: autoHideDurationMs ?? 1e4,
     persist: persist ?? false,
     content(key, message2) {
-      return /* @__PURE__ */ jsx146(
+      return /* @__PURE__ */ jsx147(
         Snackbar_default,
         {
           identifierKey: key,
@@ -25249,7 +25719,7 @@ var enqueueSnackbar = (message, options = {}) => {
 
 // src/components/tab/TabButton.tsx
 import MuiTab from "@mui/material/Tab";
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx148 } from "react/jsx-runtime";
 var TabButton = ({
   children,
   disabled = false,
@@ -25258,10 +25728,10 @@ var TabButton = ({
   dataTestId,
   disableUppercase = false,
   ...rest
-}) => /* @__PURE__ */ jsx147(
+}) => /* @__PURE__ */ jsx148(
   MuiTab,
   {
-    label: /* @__PURE__ */ jsx147(
+    label: /* @__PURE__ */ jsx148(
       "div",
       {
         style: {
@@ -25293,13 +25763,13 @@ var TabButton = ({
 var TabButton_default = TabButton;
 
 // src/components/tab/Tabs.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
-import * as React82 from "react";
-import { useEffect as useEffect21, useRef as useRef22, useState as useState31 } from "react";
-import { jsx as jsx148 } from "react/jsx-runtime";
+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";
 var styles = {
   container: {
     maxHeight: "100%",
@@ -25329,13 +25799,14 @@ function SwipeableViews({
   slideStyle,
   onChangeIndex,
   children,
+  disableScroll = false,
   ...rootProps
 }) {
-  const containerRef = useRef22(null);
-  const scrollTimeout = useRef22();
-  const scrollingMethod = useRef22("none");
-  const [previousIndex, setPreviousIndex] = useState31(index);
-  useEffect21(() => {
+  const containerRef = useRef23(null);
+  const scrollTimeout = useRef23();
+  const scrollingMethod = useRef23("none");
+  const [previousIndex, setPreviousIndex] = useState32(index);
+  useEffect22(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -25370,7 +25841,8 @@ function SwipeableViews({
       return () => cancelAnimationFrame(animationFrame);
     }
   }, [index]);
-  return /* @__PURE__ */ jsx148(
+  const hasShowTab = (childIndex) => childIndex === index || childIndex === previousIndex;
+  return /* @__PURE__ */ jsx149(
     "div",
     {
       ...rootProps,
@@ -25393,20 +25865,34 @@ function SwipeableViews({
           );
         }, 100);
       },
-      children: React82.Children.map(children, (child, childIndex) => /* @__PURE__ */ jsx148(
-        "div",
-        {
-          className: "Slim-Vertical-Scroll",
-          style: Object.assign({}, styles.slide, slideStyle),
-          children: childIndex === index || childIndex === previousIndex ? child : null
+      children: React83.Children.map(children, (child, childIndex) => {
+        let mountedChild = false;
+        if (React83.isValidElement(child)) {
+          mountedChild = !!child.props.keepMounted;
         }
-      ))
+        return /* @__PURE__ */ jsx149(
+          "div",
+          {
+            style: Object.assign(
+              {
+                ...!hasShowTab(childIndex) && mountedChild && { display: "none" }
+              },
+              styles.slide,
+              slideStyle
+            ),
+            ...!disableScroll && {
+              className: "Slim-Vertical-Scroll"
+            },
+            children: hasShowTab(childIndex) || mountedChild ? child : null
+          }
+        );
+      })
     }
   );
 }
 
 // src/components/tab/Tabs.tsx
-import { jsx as jsx149, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs77 } from "react/jsx-runtime";
 var Tabs = ({
   tabButtons,
   children,
@@ -25415,9 +25901,10 @@ var Tabs = ({
   variant = "scrollable",
   fullHeight = false,
   contained = false,
-  scrollbarGutter
+  scrollbarGutter,
+  disableContentScroll = false
 }) => {
-  const [value, setValue] = React83.useState(0);
+  const [value, setValue] = React84.useState(0);
   const handleChangeIndex = (index) => {
     onChangeTab?.(index);
     setValue(index);
@@ -25428,7 +25915,7 @@ var Tabs = ({
     bottom: 0,
     borderRadius: "8px 8px 0 0"
   };
-  return /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsxs77(
     Box_default2,
     {
       sx: {
@@ -25442,7 +25929,7 @@ var Tabs = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx149(
+        /* @__PURE__ */ jsx150(
           MuiTabs,
           {
             value: currentTabIndex ?? value,
@@ -25468,7 +25955,7 @@ var Tabs = ({
             children: tabButtons
           }
         ),
-        /* @__PURE__ */ jsx149(
+        /* @__PURE__ */ jsx150(
           Box_default2,
           {
             sx: {
@@ -25477,10 +25964,11 @@ var Tabs = ({
                 height: "100%"
               }
             },
-            children: /* @__PURE__ */ jsx149(
+            children: /* @__PURE__ */ jsx150(
               SwipeableViews,
               {
                 index: currentTabIndex ?? value,
+                disableScroll: disableContentScroll,
                 onChangeIndex: handleChangeIndex,
                 style: {
                   ...fullHeight && {
@@ -25505,8 +25993,8 @@ var Tabs = ({
 var Tabs_default = Tabs;
 
 // src/components/tab/TabContent.tsx
-import { jsx as jsx150 } from "react/jsx-runtime";
-var TabContent = ({ children }) => /* @__PURE__ */ jsx150(
+import { jsx as jsx151 } from "react/jsx-runtime";
+var TabContent = ({ children }) => /* @__PURE__ */ jsx151(
   Box_default2,
   {
     sx: {
@@ -25523,8 +26011,8 @@ import {
   TableRow as MuiTableRow,
   TableCell as MuiTableCell
 } from "@mui/material";
-import { jsx as jsx151 } from "react/jsx-runtime";
-var TableDivider = () => /* @__PURE__ */ jsx151(MuiTableRow, { children: /* @__PURE__ */ jsx151(
+import { jsx as jsx152 } from "react/jsx-runtime";
+var TableDivider = () => /* @__PURE__ */ jsx152(MuiTableRow, { children: /* @__PURE__ */ jsx152(
   MuiTableCell,
   {
     colSpan: 1e3,
@@ -25537,8 +26025,8 @@ var TableDivider_default = TableDivider;
 import {
   TableSortLabel as MuiTableSortLabel
 } from "@mui/material";
-import { jsx as jsx152 } from "react/jsx-runtime";
-var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx152(MuiTableSortLabel, { ...rest, children });
+import { jsx as jsx153 } from "react/jsx-runtime";
+var TableSortLabel = ({ children, ...rest }) => /* @__PURE__ */ jsx153(MuiTableSortLabel, { ...rest, children });
 var TableSortLabel_default = TableSortLabel;
 
 // src/components/table/Table.tsx
@@ -25546,21 +26034,21 @@ import {
   TableContainer,
   Table as MuiTable
 } from "@mui/material";
-import { jsx as jsx153 } from "react/jsx-runtime";
-var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx153(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx153(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
+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 }) });
 var Table_default = Table;
 
 // src/components/table/TableBody.tsx
 import { TableBody as MuiTableBody } from "@mui/material";
-import { jsx as jsx154 } from "react/jsx-runtime";
-var TableBody = ({ children }) => /* @__PURE__ */ jsx154(MuiTableBody, { children });
+import { jsx as jsx155 } from "react/jsx-runtime";
+var TableBody = ({ children }) => /* @__PURE__ */ jsx155(MuiTableBody, { children });
 var TableBody_default = TableBody;
 
 // src/components/table/TableCell.tsx
 import {
   TableCell as MuiTableCell2
 } from "@mui/material";
-import { jsx as jsx155 } from "react/jsx-runtime";
+import { jsx as jsx156 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   size = "M",
@@ -25571,7 +26059,7 @@ var TableCell = ({
   onClick,
   noBorder = false,
   ...rest
-}) => /* @__PURE__ */ jsx155(
+}) => /* @__PURE__ */ jsx156(
   MuiTableCell2,
   {
     ...rest,
@@ -25595,12 +26083,12 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
-import * as React84 from "react";
-import { jsx as jsx156 } from "react/jsx-runtime";
+import * as React85 from "react";
+import { jsx as jsx157 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = React84.useState(false);
-  const [showIcon, setShowIcon] = React84.useState(false);
+  const [isCopied, setIsCopied] = React85.useState(false);
+  const [showIcon, setShowIcon] = React85.useState(false);
   const manageButtonClicked = () => {
     void navigator.clipboard.writeText(textToCopy ?? text);
     if (isCopied) {
@@ -25614,7 +26102,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
   const getIconId = () => !isCopied ? "content-copy" : "check";
   const iconHiddenClass = "icon-hidden";
   const iconCopiedClass = "icon-copied";
-  return /* @__PURE__ */ jsx156(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx156(
+  return /* @__PURE__ */ jsx157(TableCell_default, { ...rest, sx: { padding: 0 }, children: /* @__PURE__ */ jsx157(
     Stack_default,
     {
       direction: "row",
@@ -25623,7 +26111,7 @@ var TableCellCopy = ({ text, textToCopy, ...rest }) => {
       onMouseEnter: () => setShowIcon(true),
       onMouseLeave: () => setShowIcon(false),
       onClick: manageButtonClicked,
-      children: /* @__PURE__ */ jsx156(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx156(
+      children: /* @__PURE__ */ jsx157(Tooltip_default, { title: t(!isCopied ? "COPY" : "COPIED"), children: /* @__PURE__ */ jsx157(
         Button_default,
         {
           className: isCopied ? iconCopiedClass : !showIcon ? iconHiddenClass : "",
@@ -25653,21 +26141,21 @@ var TableCellCopy_default = TableCellCopy;
 
 // src/components/table/TableHead.tsx
 import { TableHead as MuiTableHead } from "@mui/material";
-import { jsx as jsx157 } from "react/jsx-runtime";
-var TableHead = ({ children }) => /* @__PURE__ */ jsx157(MuiTableHead, { children });
+import { jsx as jsx158 } from "react/jsx-runtime";
+var TableHead = ({ children }) => /* @__PURE__ */ jsx158(MuiTableHead, { children });
 var TableHead_default = TableHead;
 
 // src/components/table/TableRow.tsx
 import {
   TableRow as MuiTableRow2
 } from "@mui/material";
-import { jsx as jsx158 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
 var TableRow = ({
   children,
   isFollowedByNestedTable = false,
   fadeInLeftAnimation = false,
   sx
-}) => /* @__PURE__ */ jsx158(
+}) => /* @__PURE__ */ jsx159(
   MuiTableRow2,
   {
     className: `${isFollowedByNestedTable ? "Followed-By-Nested-Table" : ""} ${fadeInLeftAnimation ? "animated fadeInLeft" : ""}`,
@@ -25679,14 +26167,14 @@ var TableRow_default = TableRow;
 
 // src/components/table/NestedTable.tsx
 import { Collapse as Collapse7 } from "@mui/material";
-import { jsx as jsx159 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
 var NestedTable = ({
   colSpan,
   children,
   className = "",
   sx,
   isVisible = true
-}) => /* @__PURE__ */ jsx159(TableRow_default, { children: /* @__PURE__ */ jsx159(
+}) => /* @__PURE__ */ jsx160(TableRow_default, { children: /* @__PURE__ */ jsx160(
   TableCell_default,
   {
     colSpan,
@@ -25695,14 +26183,14 @@ var NestedTable = ({
       height: "auto",
       ...!isVisible && { borderBottom: "none" }
     },
-    children: /* @__PURE__ */ jsx159(Collapse7, { in: isVisible, children: /* @__PURE__ */ jsx159(Box_default2, { sx: { padding: "16px", backgroundColor: grey100 }, children: /* @__PURE__ */ jsx159(Paper_default, { children: /* @__PURE__ */ jsx159(Table_default, { sx, className: `Nested-Table ${className}`, children }) }) }) })
+    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 }) }) }) })
   }
 ) });
 var NestedTable_default = NestedTable;
 
 // src/components/toolbar/ToolbarBreadcrumb.tsx
-import { jsx as jsx160 } from "react/jsx-runtime";
-var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx160(
+import { jsx as jsx161 } from "react/jsx-runtime";
+var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx161(
   Stack_default,
   {
     direction: "row",
@@ -25712,7 +26200,7 @@ var ToolbarBreadcrumb = ({ parts = [] }) => /* @__PURE__ */ jsx160(
       (previous, current, index) => [
         ...previous,
         ...index > 0 ? [
-          /* @__PURE__ */ jsx160(
+          /* @__PURE__ */ jsx161(
             Typography_default,
             {
               color: grey500,
@@ -25735,10 +26223,10 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
-import * as React85 from "react";
-import { jsx as jsx161 } from "react/jsx-runtime";
-var ToolbarBreadcrumbButton = React85.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx161(
+import * as React86 from "react";
+import { jsx as jsx162 } from "react/jsx-runtime";
+var ToolbarBreadcrumbButton = React86.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx162(
     ButtonBase5,
     {
       className: `Cn-ToolbarBreadcrumbButton ${className}`,
@@ -25757,14 +26245,14 @@ var ToolbarBreadcrumbButton = React85.forwardRef(function ToolbarBreadcrumbButto
         }
       },
       ...rest,
-      children: /* @__PURE__ */ jsx161(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
+      children: /* @__PURE__ */ jsx162(Typography_default, { color: "inherit", component: "div", variant: "h6", noWrap: true, children: text })
     }
   );
 });
 var ToolbarBreadcrumbButton_default = ToolbarBreadcrumbButton;
 
 // src/components/toolbar/Toolbar.tsx
-import { jsx as jsx162, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs78 } from "react/jsx-runtime";
 var Toolbar = ({
   children,
   rightActions,
@@ -25773,7 +26261,7 @@ var Toolbar = ({
   sx,
   dataTestId,
   onClickToolbar
-}) => /* @__PURE__ */ jsxs77(
+}) => /* @__PURE__ */ jsxs78(
   Box_default2,
   {
     className: `Cn-Toolbar ${className}`,
@@ -25793,7 +26281,7 @@ var Toolbar = ({
     onClick: onClickToolbar,
     "data-testid": dataTestId,
     children: [
-      /* @__PURE__ */ jsxs77(
+      /* @__PURE__ */ jsxs78(
         Box_default2,
         {
           sx: {
@@ -25805,7 +26293,7 @@ var Toolbar = ({
             width: "100%"
           },
           children: [
-            leftActions && /* @__PURE__ */ jsx162(
+            leftActions && /* @__PURE__ */ jsx163(
               Box_default2,
               {
                 className: `Cn-Toolbar-left`,
@@ -25815,7 +26303,7 @@ var Toolbar = ({
                 children: leftActions
               }
             ),
-            /* @__PURE__ */ jsx162(
+            /* @__PURE__ */ jsx163(
               Box_default2,
               {
                 className: `Cn-Toolbar-children`,
@@ -25830,7 +26318,7 @@ var Toolbar = ({
           ]
         }
       ),
-      rightActions && /* @__PURE__ */ jsx162(
+      rightActions && /* @__PURE__ */ jsx163(
         Box_default2,
         {
           className: `Cn-Toolbar-right`,
@@ -25849,24 +26337,24 @@ var Toolbar = ({
 var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
-import * as React86 from "react";
-import { useState as useState34 } from "react";
-import { jsx as jsx163, jsxs as jsxs78 } from "react/jsx-runtime";
-var ToolbarTitle = React86.forwardRef(function ToolbarTitle2({
+import * as React87 from "react";
+import { useState as useState35 } from "react";
+import { jsx as jsx164, jsxs as jsxs79 } from "react/jsx-runtime";
+var ToolbarTitle = React87.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
   className,
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React86.useRef(null);
-  const [showHoverActions, setShowHoverActions] = useState34(false);
-  return /* @__PURE__ */ jsx163(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx163(
+  const textElementRef = React87.useRef(null);
+  const [showHoverActions, setShowHoverActions] = useState35(false);
+  return /* @__PURE__ */ jsx164(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx164(
     TextEllipsisTooltip_default,
     {
       title: title ?? "\xA0",
       textEllipsableElement: textElementRef,
-      children: /* @__PURE__ */ jsxs78(
+      children: /* @__PURE__ */ jsxs79(
         Typography_default,
         {
           color: color2,
@@ -25884,7 +26372,7 @@ var ToolbarTitle = React86.forwardRef(function ToolbarTitle2({
           },
           children: [
             title || "\xA0",
-            hoverActions && showHoverActions && /* @__PURE__ */ jsx163(
+            hoverActions && showHoverActions && /* @__PURE__ */ jsx164(
               Box_default2,
               {
                 sx: {
@@ -25913,13 +26401,13 @@ var Slide_default = Slide;
 
 // src/components/widget/WidgetLegendItem.tsx
 import { ButtonBase as ButtonBase6 } from "@mui/material";
-import { jsx as jsx164, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs80 } from "react/jsx-runtime";
 var WidgetLegendItem = ({
   groupLabel,
   legendDirection = "column",
   items = [],
   onClick
-}) => /* @__PURE__ */ jsx164(
+}) => /* @__PURE__ */ jsx165(
   ButtonBase6,
   {
     tabIndex: onClick ? 0 : -1,
@@ -25933,7 +26421,7 @@ var WidgetLegendItem = ({
       p: "2px 12px",
       cursor: onClick ? "pointer" : "default"
     },
-    children: /* @__PURE__ */ jsxs79(
+    children: /* @__PURE__ */ jsxs80(
       Box_default2,
       {
         sx: {
@@ -25945,7 +26433,7 @@ var WidgetLegendItem = ({
           color: grey800
         },
         children: [
-          groupLabel && /* @__PURE__ */ jsx164(
+          groupLabel && /* @__PURE__ */ jsx165(
             Typography_default,
             {
               variant: "overline",
@@ -25967,7 +26455,7 @@ var WidgetLegendItem = ({
               style: style3
             }, i) => {
               const incrementLabelIconId = incrementLabelType && incrementLabelStyles[incrementLabelType].icon;
-              return /* @__PURE__ */ jsxs79(
+              return /* @__PURE__ */ jsxs80(
                 Box_default2,
                 {
                   sx: {
@@ -25977,7 +26465,7 @@ var WidgetLegendItem = ({
                     paddingRight: legendDirection === "row" ? "12px" : "inherit"
                   },
                   children: [
-                    iconColor && /* @__PURE__ */ jsx164(
+                    iconColor && /* @__PURE__ */ jsx165(
                       Icon_default,
                       {
                         id: iconId,
@@ -25988,7 +26476,7 @@ var WidgetLegendItem = ({
                         size: iconSize
                       }
                     ),
-                    label && /* @__PURE__ */ jsx164(
+                    label && /* @__PURE__ */ jsx165(
                       Typography_default,
                       {
                         variant: "caption",
@@ -25997,7 +26485,7 @@ var WidgetLegendItem = ({
                         children: label
                       }
                     ),
-                    value && /* @__PURE__ */ jsx164(
+                    value && /* @__PURE__ */ jsx165(
                       Typography_default,
                       {
                         sx: style3,
@@ -26006,7 +26494,7 @@ var WidgetLegendItem = ({
                         children: value
                       }
                     ),
-                    incrementLabelValue && /* @__PURE__ */ jsx164(
+                    incrementLabelValue && /* @__PURE__ */ jsx165(
                       IncrementLabel_default,
                       {
                         label: incrementLabelValue,
@@ -26032,8 +26520,8 @@ var WidgetLegendItem_default = WidgetLegendItem;
 
 // src/components/widget/Widget.tsx
 import MuiCard2 from "@mui/material/Card";
-import { jsx as jsx165 } from "react/jsx-runtime";
-var Widget = ({ children }) => /* @__PURE__ */ jsx165(
+import { jsx as jsx166 } from "react/jsx-runtime";
+var Widget = ({ children }) => /* @__PURE__ */ jsx166(
   MuiCard2,
   {
     variant: "elevation",
@@ -26057,8 +26545,8 @@ var Widget = ({ children }) => /* @__PURE__ */ jsx165(
 var Widget_default = Widget;
 
 // src/components/widget/WidgetActions.tsx
-import { jsx as jsx166 } from "react/jsx-runtime";
-var WidgetActions = ({ children }) => /* @__PURE__ */ jsx166(
+import { jsx as jsx167 } from "react/jsx-runtime";
+var WidgetActions = ({ children }) => /* @__PURE__ */ jsx167(
   Box_default2,
   {
     sx: {
@@ -26072,8 +26560,8 @@ var WidgetActions = ({ children }) => /* @__PURE__ */ jsx166(
 var WidgetActions_default = WidgetActions;
 
 // src/components/widget/WidgetTitle.tsx
-import { jsx as jsx167 } from "react/jsx-runtime";
-var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx167(
+import { jsx as jsx168 } from "react/jsx-runtime";
+var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE__ */ jsx168(
   Box_default2,
   {
     sx: {
@@ -26083,7 +26571,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       maxWidth: "100%",
       ...sx
     },
-    children: /* @__PURE__ */ jsx167(
+    children: /* @__PURE__ */ jsx168(
       Typography_default,
       {
         variant: "subtitle2",
@@ -26097,12 +26585,12 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
       }
     )
   }
-) : /* @__PURE__ */ jsx167("span", {});
+) : /* @__PURE__ */ jsx168("span", {});
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
-import * as React87 from "react";
-import { Fragment as Fragment35, jsx as jsx168, jsxs as jsxs80 } from "react/jsx-runtime";
+import * as React88 from "react";
+import { Fragment as Fragment35, jsx as jsx169, jsxs as jsxs81 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
   L: 500,
@@ -26127,7 +26615,7 @@ var iconButtonsStyles = {
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   }
 };
-var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
+var MinimizableWindow = React88.forwardRef(function MinimizableWindow2({
   children,
   title,
   size = "M",
@@ -26144,17 +26632,17 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
   onBack
 }, ref) {
   const { t } = useTranslation();
-  const overlayRef = React87.useRef(null);
-  const windowRef = React87.useRef(null);
-  const headerRef = React87.useRef(null);
-  const [isDraggingState, setIsDraggingState] = React87.useState(false);
-  const diffRef = React87.useRef({ x: 0, y: 0 });
-  React87.useImperativeHandle(ref, () => ({
+  const overlayRef = React88.useRef(null);
+  const windowRef = React88.useRef(null);
+  const headerRef = React88.useRef(null);
+  const [isDraggingState, setIsDraggingState] = React88.useState(false);
+  const diffRef = React88.useRef({ x: 0, y: 0 });
+  React88.useImperativeHandle(ref, () => ({
     window: windowRef.current,
     header: headerRef.current,
     overlay: overlayRef.current
   }));
-  React87.useEffect(() => {
+  React88.useEffect(() => {
     if (open) {
       overlayRef.current?.style.removeProperty("transform");
       overlayRef.current?.style.removeProperty("opacity");
@@ -26216,8 +26704,8 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
       }
     }, 750);
   };
-  return /* @__PURE__ */ jsxs80(Fragment35, { children: [
-    isDraggingState && /* @__PURE__ */ jsx168(
+  return /* @__PURE__ */ jsxs81(Fragment35, { children: [
+    isDraggingState && /* @__PURE__ */ jsx169(
       Box_default2,
       {
         sx: {
@@ -26233,7 +26721,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
         onMouseMove: (ev) => handleMouseMove(ev)
       }
     ),
-    /* @__PURE__ */ jsx168(
+    /* @__PURE__ */ jsx169(
       Box_default2,
       {
         ref: overlayRef,
@@ -26250,7 +26738,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
           ...!open && { pointerEvents: "none" },
           transition: "transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
         },
-        children: /* @__PURE__ */ jsxs80(
+        children: /* @__PURE__ */ jsxs81(
           Stack_default,
           {
             sx: {
@@ -26261,7 +26749,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
             width: `${sizes6[size]}px`,
             height: contentHeight !== void 0 && headerRef.current ? `${contentHeight + contentPadding + headerRef.current.scrollHeight}px` : void 0,
             children: [
-              /* @__PURE__ */ jsxs80(
+              /* @__PURE__ */ jsxs81(
                 Stack_default,
                 {
                   ref: headerRef,
@@ -26275,19 +26763,19 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                   onMouseDown: handleMouseDown,
                   minHeight: "44px",
                   children: [
-                    /* @__PURE__ */ jsx168(
+                    /* @__PURE__ */ jsx169(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
-                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx168(
+                        children: showBackButton && (!backButton ? /* @__PURE__ */ jsx169(
                           Tooltip_default,
                           {
                             title: t("MINIMIZABLE_WINDOW.GO_BACK"),
                             zIndex: 999999,
                             placement: "top",
-                            children: /* @__PURE__ */ jsx168(
+                            children: /* @__PURE__ */ jsx169(
                               IconButton_default,
                               {
                                 size: iconSizes4,
@@ -26300,7 +26788,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                         ) : backButton)
                       }
                     ),
-                    /* @__PURE__ */ jsx168(
+                    /* @__PURE__ */ jsx169(
                       Box_default2,
                       {
                         sx: {
@@ -26308,23 +26796,23 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                           left: "50%",
                           transform: "translateX(-50%)"
                         },
-                        children: typeof title === "string" ? /* @__PURE__ */ jsx168(Typography_default, { children: title }) : title
+                        children: typeof title === "string" ? /* @__PURE__ */ jsx169(Typography_default, { children: title }) : title
                       }
                     ),
-                    /* @__PURE__ */ jsxs80(
+                    /* @__PURE__ */ jsxs81(
                       Stack_default,
                       {
                         direction: "row",
                         alignItems: "center",
                         onMouseDown: (ev) => ev.stopPropagation(),
                         children: [
-                          /* @__PURE__ */ jsx168(Box_default2, { children: /* @__PURE__ */ jsx168(
+                          /* @__PURE__ */ jsx169(Box_default2, { children: /* @__PURE__ */ jsx169(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.MINIMIZE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx168(
+                              children: /* @__PURE__ */ jsx169(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -26340,13 +26828,13 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                               )
                             }
                           ) }),
-                          closeable && /* @__PURE__ */ jsx168(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx168(
+                          closeable && /* @__PURE__ */ jsx169(Box_default2, { sx: { padding: "0 8px" }, children: /* @__PURE__ */ jsx169(
                             Tooltip_default,
                             {
                               title: t("MINIMIZABLE_WINDOW.CLOSE"),
                               zIndex: 999999,
                               placement: "top",
-                              children: /* @__PURE__ */ jsx168(
+                              children: /* @__PURE__ */ jsx169(
                                 IconButton_default,
                                 {
                                   size: iconSizes4,
@@ -26363,7 +26851,7 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx168(
+              /* @__PURE__ */ jsx169(
                 Stack_default,
                 {
                   sx: {
@@ -26382,27 +26870,27 @@ var MinimizableWindow = React87.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback19, useContext as useContext16 } from "react";
+import { useCallback as useCallback20, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback19(
+    formatCompactNumber: useCallback20(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback19(
+    formatNumber: useCallback20(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback19(
+    formatPercentage: useCallback20(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback19(
+    formatCurrency: useCallback20(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback19(
+    formatDate: useCallback20(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     )
@@ -26430,6 +26918,7 @@ export {
   CardTable_default as CardTable,
   CardTitle_default as CardTitle,
   CardTitleWithIcon_default as CardTitleWithIcon,
+  Carousel_default as Carousel,
   CategorizedPicker_default as CategorizedPicker,
   Chat_default as Chat,
   ChatMessage_default as ChatMessage,
@@ -26568,6 +27057,7 @@ export {
   WidgetLegendItem_default as WidgetLegendItem,
   WidgetTitle_default as WidgetTitle,
   allCountries,
+  applyTimeToDate,
   areSameSimpleDate,
   closeSnackbar2 as closeSnackbar,
   colorPickerDefaultColors,