@connectif/ui-components 5.7.1 → 6.0.0

package/dist/index.js

@@ -1708,6 +1708,7 @@ import {
   mdiFullscreenExit,
   mdiFunction,
   mdiGamepad,
+  mdiGamepadCircleOutline,
   mdiGamepadVariant,
   mdiGarage,
   mdiGarageOpen,
@@ -3525,6 +3526,7 @@ var icons = {
   "fullscreen-exit": mdiFullscreenExit,
   function: mdiFunction,
   gamepad: mdiGamepad,
+  "gamepad-circle-outline": mdiGamepadCircleOutline,
   "gamepad-variant": mdiGamepadVariant,
   garage: mdiGarage,
   "garage-open": mdiGarageOpen,
@@ -11089,6 +11091,7 @@ var Chip = React28.forwardRef(function Chip2({
   iconColor,
   iconRight = false,
   iconSize,
+  iconTooltip,
   onClick,
   onDelete,
   onHover,
@@ -11116,18 +11119,19 @@ var Chip = React28.forwardRef(function Chip2({
   };
   const iconSizeCurrent = iconSize ?? iconSizes3[size];
   const variantStyles3 = getVariantStyles(theme2, variant);
-  const deleteIcon = /* @__PURE__ */ jsxs21(Stack_default, { direction: "row", children: [
-    iconId && iconRight && /* @__PURE__ */ jsx55(
-      Icon_default,
-      {
-        id: iconId,
-        size: iconSizeCurrent,
-        sx: {
-          color: iconColor ?? variantStyles3.iconColor,
-          cursor: !onClick ? "default" : void 0
-        }
+  const getIcon = (iconId2) => /* @__PURE__ */ jsx55(Tooltip_default, { title: iconTooltip || "", children: /* @__PURE__ */ jsx55(
+    Icon_default,
+    {
+      id: iconId2,
+      size: iconSizeCurrent,
+      sx: {
+        color: iconColor ?? variantStyles3.iconColor,
+        cursor: !onClick ? "default" : void 0
       }
-    ),
+    }
+  ) });
+  const deleteIcon = /* @__PURE__ */ jsxs21(Stack_default, { direction: "row", alignItems: "center", children: [
+    iconId && iconRight && getIcon(iconId),
     isDeleteable && onDelete && /* @__PURE__ */ jsx55(
       IconButton_default,
       {
@@ -11163,7 +11167,7 @@ var Chip = React28.forwardRef(function Chip2({
         {
           label,
           component,
-          icon: iconId && !iconRight ? /* @__PURE__ */ jsx55(Icon_default, { id: iconId, size: iconSizeCurrent }) : void 0,
+          icon: iconId && !iconRight ? getIcon(iconId) : void 0,
           sx: {
             boxSizing: "border-box",
             backgroundColor: !transparentBackgroundColor ? variantStyles3.backgroundColor : void 0,
@@ -11549,12 +11553,14 @@ import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs24 } from "react/jsx-r
 var TOOLTIP_DATA_TEST_ID = "chip-container-tooltip";
 var COUNTER_LABEL_DATA_TEST_ID = "chip-counter-label";
 var MAX_TOOLTIP_WIDTH = 362;
+var WIDTH_ALERT_BUTTON = 20;
 var WIDTH_DELETABLE_BUTTON = 20;
 var ChipHiddenCounter = ({
   hiddenChips,
   isDeletable,
   preventHiddenChipsTooltip,
-  renderChip
+  renderChip,
+  getWarningTooltip
 }) => {
   const counterRef = React30.useRef(null);
   const popperRef = React30.useRef(null);
@@ -11572,6 +11578,11 @@ var ChipHiddenCounter = ({
   const closePopover = () => {
     setIsOpenPopover(false);
   };
+  const getRenderChipWidth = (chipName) => {
+    const warningTooltip = getWarningTooltip && getWarningTooltip(chipName);
+    const alertButtonWidth = !warningTooltip ? 0 : WIDTH_ALERT_BUTTON;
+    return !isDeletable ? `${MAX_TOOLTIP_WIDTH - alertButtonWidth}px` : `${MAX_TOOLTIP_WIDTH - WIDTH_DELETABLE_BUTTON - alertButtonWidth}px`;
+  };
   return /* @__PURE__ */ jsx62(Fragment7, { children: hiddenChips.length > 0 && /* @__PURE__ */ jsxs24(Fragment7, { children: [
     /* @__PURE__ */ jsx62(
       Box_default2,
@@ -11591,6 +11602,30 @@ var ChipHiddenCounter = ({
       Popper,
       {
         ref: popperRef,
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: ({
+                placement
+              }) => {
+                if (placement.startsWith("bottom")) {
+                  return [0, -2];
+                }
+                if (placement.startsWith("top")) {
+                  return [0, 2];
+                }
+                if (placement.startsWith("left")) {
+                  return [2, 0];
+                }
+                if (placement.startsWith("right")) {
+                  return [-2, 0];
+                }
+                return [0, 0];
+              }
+            }
+          }
+        ],
         onMouseEnter: openPopover,
         onMouseLeave: closePopover,
         anchorEl: counterRef.current,
@@ -11625,7 +11660,7 @@ var ChipHiddenCounter = ({
                   (value, index) => renderChip({
                     chipName: value,
                     index,
-                    maxWidth: !isDeletable ? `${MAX_TOOLTIP_WIDTH}px` : `${MAX_TOOLTIP_WIDTH - WIDTH_DELETABLE_BUTTON}px`
+                    maxWidth: getRenderChipWidth(value)
                   })
                 )
               }
@@ -11655,7 +11690,8 @@ var ChipContainer = ({
   clickable,
   preventHiddenChipsTooltip,
   dataTestId = DEFAULT_DATA_TEST_ID,
-  renderChip
+  renderChip,
+  getWarningTooltip
 }) => /* @__PURE__ */ jsxs25(
   Stack_default,
   {
@@ -11694,7 +11730,8 @@ var ChipContainer = ({
           hiddenChips,
           renderChip,
           isDeletable,
-          preventHiddenChipsTooltip: !!preventHiddenChipsTooltip
+          preventHiddenChipsTooltip: !!preventHiddenChipsTooltip,
+          getWarningTooltip
         }
       )
     ]
@@ -11736,7 +11773,8 @@ var ChipViewer = ({
   renderChipLabel,
   onRemoveChip,
   onClickChip,
-  onHasHiddenChipsChange
+  onHasHiddenChipsChange,
+  getWarningTooltip
 }) => {
   const rootNodeRef = React31.useRef(null);
   const containerRef = React31.useRef(null);
@@ -11938,47 +11976,57 @@ var ChipViewer = ({
     index,
     maxWidth: maxWidth2,
     isCounterLabel
-  }) => /* @__PURE__ */ jsx64(
-    Chip_default,
-    {
-      variant: chipVariant,
-      sx: {
-        "& > span": {
-          padding: "8px"
+  }) => {
+    const warningTooltip = getWarningTooltip && getWarningTooltip(chipName);
+    return /* @__PURE__ */ jsx64(
+      Chip_default,
+      {
+        variant: chipVariant,
+        ...!!warningTooltip && {
+          iconId: "alert",
+          iconColor: complementary600,
+          iconRight: true,
+          iconSize: "XS",
+          iconTooltip: warningTooltip
         },
-        border: "none",
-        cursor: onClickChip ? "pointer" : "default",
-        ...chipViewerStyle[variant],
-        paddingRight: "8px",
-        "& .MuiChip-label": {
-          paddingRight: "4px"
+        sx: {
+          "& > span": {
+            padding: "8px"
+          },
+          border: "none",
+          cursor: onClickChip ? "pointer" : "default",
+          ...chipViewerStyle[variant],
+          paddingRight: "8px",
+          "& .MuiChip-label": {
+            paddingRight: !warningTooltip ? "4px" : "8px"
+          },
+          "& .MuiChip-deleteIcon > button": {
+            padding: 0,
+            color: Colors_exports.grey800
+          },
+          ...chipSx && { ...chipSx }
         },
-        "& .MuiChip-deleteIcon > button": {
-          padding: 0,
-          color: Colors_exports.grey800
+        size: chipSize,
+        label: /* @__PURE__ */ jsx64(
+          TextEllipsis_default,
+          {
+            lines: 1,
+            typographyVariant,
+            text: renderChipLabel && !isCounterLabel ? renderChipLabel(chipName) : chipName,
+            ...maxWidth2 && { maxWidth: maxWidth2 }
+          }
+        ),
+        onClick: onClickChip ? () => onClickChip(chipName) : void 0,
+        isDeleteable: !!onRemoveChip && !isCounterLabel,
+        ...onRemoveChip && {
+          onDelete: (event) => onRemoveChip(event, chipName)
         },
-        ...chipSx && { ...chipSx }
+        "data-testid": CHIP_DATA_TEST_ID,
+        disableDeleteRipple: true
       },
-      size: chipSize,
-      label: /* @__PURE__ */ jsx64(
-        TextEllipsis_default,
-        {
-          lines: 1,
-          typographyVariant,
-          text: renderChipLabel && !isCounterLabel ? renderChipLabel(chipName) : chipName,
-          ...maxWidth2 && { maxWidth: maxWidth2 }
-        }
-      ),
-      onClick: onClickChip ? () => onClickChip(chipName) : void 0,
-      isDeleteable: !!onRemoveChip && !isCounterLabel,
-      ...onRemoveChip && {
-        onDelete: (event) => onRemoveChip(event, chipName)
-      },
-      "data-testid": CHIP_DATA_TEST_ID,
-      disableDeleteRipple: true
-    },
-    `chip-${index}`
-  );
+      `chip-${index}`
+    );
+  };
   return /* @__PURE__ */ jsx64(Stack4, { ref: rootNodeRef, "data-testid": CHIP_VIEWER_ROOT_ID, children: /* @__PURE__ */ jsx64(
     ChipContainer_default,
     {
@@ -11993,7 +12041,8 @@ var ChipViewer = ({
       renderChip: getRenderChip,
       clickable: !!onClickChip,
       isDeletable: !!onRemoveChip,
-      preventHiddenChipsTooltip
+      preventHiddenChipsTooltip,
+      getWarningTooltip
     }
   ) });
 };
@@ -15019,9 +15068,9 @@ __export(en_exports6, {
   default: () => en_default6
 });
 var MINIMIZABLE_WINDOW = {
-  CLOSE: "Cerrar",
-  GO_BACK: "Ir atr\xE1s",
-  MINIMIZE: "Minimizar"
+  CLOSE: "Close",
+  GO_BACK: "Go back",
+  MINIMIZE: "Minimize"
 };
 var en_default6 = {
   MINIMIZABLE_WINDOW
@@ -16855,6 +16904,9 @@ function getDisplayEndDate(date, timezone, includeTime) {
   return tz(date, timezone).subtract(1, "day").toDate();
 }
 function applyTimeToDate(date, time) {
+  if (!time) {
+    return date;
+  }
   if (isNaN(date.getTime()) || isNaN(time.getTime())) {
     return /* @__PURE__ */ new Date(NaN);
   }
@@ -20822,11 +20874,7 @@ var DateIntervalPickerPopover = ({
       timezone,
       { includeTime: !!showTime }
     );
-    const displayEndDate2 = getDisplayEndDate(
-      result.endDate,
-      timezone,
-      !!showTime
-    );
+    const displayEndDate2 = variant !== "input" ? getDisplayEndDate(result.endDate, timezone, !!showTime) : result.endDate;
     return {
       startDate: dateInputFormatter(result.startDate),
       endDate: dateInputFormatter(displayEndDate2),
@@ -20880,17 +20928,17 @@ var DateIntervalPickerPopover = ({
       )
     };
   };
-  const displayEndDate = endDate ? getDisplayEndDate(endDate, timezone, !!showTime) : void 0;
+  const displayEndDate = endDate ? variant !== "input" ? getDisplayEndDate(endDate, timezone, !!showTime) : endDate : void 0;
   const displayComparisonEndDate = comparisonEndDate && getDisplayEndDate(comparisonEndDate, timezone, !!showTime);
   const initialState = {
     interval,
     highlightedInput: "startDate",
     focusedDateInCalendar: dateToSimpleDate(startDate, timezone),
     startDate: startDate ? dateInputFormatter(startDate) : void 0,
-    startTime: startDate,
+    startTime: showTime ? startDate : void 0,
     startSimpleDate: dateToSimpleDate(startDate, timezone),
     endDate: displayEndDate ? dateInputFormatter(displayEndDate) : displayEndDate,
-    endTime: displayEndDate,
+    endTime: showTime ? displayEndDate : void 0,
     endSimpleDate: dateToSimpleDate(displayEndDate, timezone),
     comparisonInterval: comparisonInterval ?? "previousPeriod",
     comparisonStartDate: comparisonStartDate ? dateInputFormatter(comparisonStartDate) : "",
@@ -20921,7 +20969,13 @@ var DateIntervalPickerPopover = ({
       if (!dateString || !simpleDate) {
         throw new Error("Invalid date state");
       }
-      const parsed = parseDate(dateString);
+      const parsed = variant !== "input" ? parseDate(dateString) : new Date(
+        Date.UTC(
+          simpleDate.year,
+          simpleDate.month,
+          simpleDate.day
+        )
+      );
       if (isNaN(parsed.getTime()) || parsed < minDate || parsed > maxDate) {
         return tz5(
           {
@@ -20936,17 +20990,17 @@ var DateIntervalPickerPopover = ({
     };
     const parseEndDateSafe = (dateString, simpleDate) => {
       const parsed = safeParseDate(dateString, simpleDate);
-      return !showTime ? tz5(parsed, timezone).add(1, "day").toDate() : parsed;
+      return variant !== "input" && !showTime ? tz5(parsed, timezone).add(1, "day").toDate() : parsed;
     };
     onApply({
       interval: state.interval ?? "custom",
       startDate: applyTimeToDate(
         safeParseDate(state.startDate, state.startSimpleDate),
-        state.startTime ?? new Date(state.startDate)
+        state.startTime
       ),
       endDate: applyTimeToDate(
         parseEndDateSafe(state.endDate, state.endSimpleDate),
-        state.endTime ?? new Date(state.endDate)
+        state.endTime
       ),
       comparisonInterval: state.isComparing ? state.comparisonInterval : null,
       comparisonStartDate: state.isComparing ? applyTimeToDate(
@@ -21338,11 +21392,7 @@ var DateIntervalPicker = ({
   };
   const internalMaxDate = maxDate ?? tz7(timezone).toDate();
   const internalMinDate = minDate ?? tz7(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate();
-  const displayEndDate = rest.endDate !== void 0 ? getDisplayEndDate(
-    rest.endDate,
-    timezone,
-    rest.variant !== "input" ? !!rest.showTime : false
-  ) : void 0;
+  const displayEndDate = rest.endDate !== void 0 ? rest.variant !== "input" ? getDisplayEndDate(rest.endDate, timezone, !!rest.showTime) : rest.endDate : void 0;
   const isEndDateVisible = displayEndDate !== void 0 && !isSameDate(rest.startDate, displayEndDate);
   return /* @__PURE__ */ jsxs54("div", { style: { display: "inline-flex" }, children: [
     rest.variant !== "input" && /* @__PURE__ */ jsx116(
@@ -21854,6 +21904,11 @@ var Select = function Select2({
     {
       className: `Cn-Select ${className}`,
       sx: {
+        ...variant !== "transparent" && {
+          "&.Mui-focused": {
+            backgroundColor: "white"
+          }
+        },
         ...variant === "transparent" && {
           backgroundColor: "transparent",
           borderColor: "transparent",
@@ -23237,6 +23292,7 @@ var SelectPopover = function SelectPopover2({
             )
           }
         ),
+        itemsTitle,
         /* @__PURE__ */ jsx130(
           InfiniteScroll,
           {
@@ -23280,7 +23336,6 @@ var SelectPopover = function SelectPopover2({
                   }
                 },
                 children: [
-                  itemsTitle,
                   currentItems.map(
                     (item) => maxSelectedItems ? getItemElement({
                       item: {
@@ -23409,8 +23464,6 @@ var ItemSelector = function ItemSelector2({
   disabled,
   helperText,
   isError,
-  limitItemChips = 2,
-  itemChipWidth = 150,
   isLoading,
   isLoadingSubtitle2,
   hasMore,
@@ -23425,6 +23478,7 @@ var ItemSelector = function ItemSelector2({
   selectableItemComponent,
   renderChipLabel = (item) => item.id,
   renderItem = (item) => ({
+    ...item,
     title: item.id,
     subtitle1: "",
     subtitle2: ""
@@ -23432,12 +23486,14 @@ var ItemSelector = function ItemSelector2({
   onChange,
   onLoadMore,
   onSearch,
-  onClose
+  onClose,
+  getWarningTooltip
 }) {
   const [anchorEl, setAnchorEl] = React71.useState();
   const [searchText, setSearchText] = React71.useState("");
   const allShownItemsRef = React71.useRef(items);
   const selectRef = React71.useRef(null);
+  const { t } = useTranslation();
   React71.useEffect(() => {
     if (anchorEl) {
       onSearch(searchText);
@@ -23453,32 +23509,6 @@ var ItemSelector = function ItemSelector2({
       )
     );
   }, [items]);
-  const ItemChip = ({
-    item
-  }) => {
-    const [ref, { contentWidth: width2 }] = useResizeObserver();
-    return /* @__PURE__ */ jsx131(
-      Chip_default,
-      {
-        ref,
-        sx: {
-          maxWidth: `${itemChipWidth}px`
-        },
-        label: renderChipLabel(item),
-        size: "S",
-        variant: "dark",
-        tooltip: width2 >= itemChipWidth ? renderChipLabel(item) : void 0,
-        isDeleteable: !disabled && !item.hideDeleteChip,
-        onDelete: () => {
-          onChange(selectedItems.filter((i) => i.id !== item.id));
-        },
-        onMouseDownDelete: (event) => {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      }
-    );
-  };
   const isMultiple = () => !maxSelectedItems || maxSelectedItems > 1;
   const getSelectedValue = () => {
     if (isMultiple()) {
@@ -23489,155 +23519,151 @@ var ItemSelector = function ItemSelector2({
   };
   return /* @__PURE__ */ jsxs61(Fragment30, { children: [
     /* @__PURE__ */ jsx131(
-      Select_default,
+      Stack_default,
       {
-        ref: selectRef,
-        open: false,
-        multiple: isMultiple(),
-        variant,
-        disabled,
-        options: selectedItems.map((item) => ({
-          value: item.id,
-          label: renderChipLabel(item)
-        })),
-        value: getSelectedValue(),
-        renderValue: (value) => {
-          let component;
-          if (!value || !Array.isArray(value) || value.length === 0) {
-            component = /* @__PURE__ */ jsxs61(Fragment30, { children: [
-              /* @__PURE__ */ jsx131(
-                Stack_default,
-                {
-                  direction: "row",
-                  flexWrap: "wrap",
-                  padding: "6px 0",
-                  children: /* @__PURE__ */ jsx131(Typography_default, { variant: "body2", color: grey600, children: placeholder })
-                }
-              ),
-              /* @__PURE__ */ jsx131(
-                Divider_default,
-                {
-                  variant: "middle",
-                  orientation: "vertical",
-                  flexItem: true
-                }
-              )
-            ] });
-          } else {
-            component = /* @__PURE__ */ jsxs61(Fragment30, { children: [
-              /* @__PURE__ */ jsxs61(
+        onClick: () => selectRef.current && setAnchorEl(selectRef.current),
+        children: /* @__PURE__ */ jsx131(
+          Select_default,
+          {
+            ref: selectRef,
+            open: false,
+            multiple: isMultiple(),
+            variant,
+            disabled,
+            options: selectedItems.map((item) => ({
+              value: item.id,
+              label: renderChipLabel(item)
+            })),
+            value: getSelectedValue(),
+            renderValue: (value) => {
+              let component;
+              if (!value || !Array.isArray(value) || value.length === 0) {
+                component = /* @__PURE__ */ jsx131(Fragment30, { children: /* @__PURE__ */ jsx131(
+                  Stack_default,
+                  {
+                    direction: "row",
+                    flexWrap: "wrap",
+                    padding: "6px 0",
+                    children: /* @__PURE__ */ jsx131(
+                      Typography_default,
+                      {
+                        variant: "body2",
+                        color: grey600,
+                        children: placeholder
+                      }
+                    )
+                  }
+                ) });
+              } else {
+                component = /* @__PURE__ */ jsxs61(
+                  Stack_default,
+                  {
+                    direction: "row",
+                    alignItems: "center",
+                    gap: "8px",
+                    width: "100%",
+                    justifyContent: "space-between",
+                    children: [
+                      /* @__PURE__ */ jsx131(Stack_default, { flex: 1, children: /* @__PURE__ */ jsx131(
+                        ChipViewer_default,
+                        {
+                          chipSx: {
+                            alignSelf: "center"
+                          },
+                          chipVariant: "dark",
+                          values: value,
+                          ...!disabled && {
+                            onRemoveChip: (event, id) => {
+                              onChange(
+                                selectedItems.filter(
+                                  (i) => i.id !== id
+                                )
+                              );
+                              event.stopPropagation();
+                            }
+                          },
+                          numberLines: 1,
+                          renderChipLabel: (id) => {
+                            const item = selectedItems.find(
+                              (i) => i.id === id
+                            );
+                            return item ? renderChipLabel(item) : "";
+                          },
+                          getWarningTooltip: (chipId) => {
+                            if (getWarningTooltip) {
+                              const selectedItem = selectedItems.find(
+                                (selectedItem2) => selectedItem2.id === chipId
+                              );
+                              if (selectedItem) {
+                                return getWarningTooltip(
+                                  selectedItem
+                                );
+                              }
+                            }
+                            return "";
+                          },
+                          forceRecalculate: disabled
+                        }
+                      ) }),
+                      !disabled && isMultiple() && value.length > 1 && /* @__PURE__ */ jsx131(
+                        Tooltip_default,
+                        {
+                          title: t("AUTOCOMPLETE.CLEAR"),
+                          children: /* @__PURE__ */ jsx131(
+                            IconButton_default,
+                            {
+                              iconId: "close",
+                              size: "M",
+                              sx: {
+                                padding: 0
+                              },
+                              onClick: (event) => {
+                                onChange([]);
+                                event.stopPropagation();
+                                event.preventDefault();
+                              },
+                              "data-test": "clear-autocomplete"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsxs61(
                 Stack_default,
                 {
                   direction: "row",
-                  flexWrap: "nowrap",
-                  padding: "3px 0",
-                  overflow: "hidden",
+                  justifyContent: "space-between",
                   alignItems: "center",
-                  gap: "4px",
+                  height: "100%",
                   children: [
-                    value.slice(0, limitItemChips).map((id) => {
-                      const item = selectedItems.find(
-                        (i) => i.id === id
-                      );
-                      return item ? /* @__PURE__ */ jsx131(
-                        ItemChip,
-                        {
-                          item: {
-                            ...item,
-                            hideDeleteChip: !isMultiple()
-                          }
-                        },
-                        id
-                      ) : /* @__PURE__ */ jsx131(Fragment30, {});
-                    }),
-                    value.length - limitItemChips > 0 ? /* @__PURE__ */ jsx131(
-                      Tooltip_default,
+                    component,
+                    /* @__PURE__ */ jsx131(
+                      Divider_default,
                       {
-                        interactive: true,
-                        variant: "white",
-                        title: /* @__PURE__ */ jsx131(
-                          Stack_default,
-                          {
-                            direction: "row",
-                            sx: {
-                              gap: "8px",
-                              alignItems: "center",
-                              maxWidth: "300px",
-                              flexWrap: "wrap"
-                            },
-                            children: value.slice(
-                              limitItemChips,
-                              value.length
-                            ).map((id) => {
-                              const item = selectedItems.find(
-                                (i) => i.id === id
-                              );
-                              return item ? /* @__PURE__ */ jsx131(
-                                ItemChip,
-                                {
-                                  item
-                                },
-                                id
-                              ) : /* @__PURE__ */ jsx131(Fragment30, {});
-                            })
-                          }
-                        ),
-                        children: /* @__PURE__ */ jsx131(Typography_default, { variant: "body2", children: `+${value.length - limitItemChips}` })
+                        variant: "middle",
+                        orientation: "vertical",
+                        flexItem: true
                       }
-                    ) : void 0
+                    )
                   ]
                 }
-              ),
-              !disabled && /* @__PURE__ */ jsxs61(Stack_default, { direction: "row", children: [
-                /* @__PURE__ */ jsx131(
-                  IconButton_default,
-                  {
-                    iconId: "close",
-                    sx: {
-                      color: grey600
-                    },
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      event.preventDefault();
-                      onChange([]);
-                    },
-                    onMouseDown: (event) => {
-                      event.stopPropagation();
-                      event.preventDefault();
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx131(
-                  Divider_default,
-                  {
-                    variant: "middle",
-                    orientation: "vertical",
-                    flexItem: true
-                  }
-                )
-              ] })
-            ] });
-          }
-          return /* @__PURE__ */ jsx131(
-            Stack_default,
-            {
-              direction: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-              children: component
+              );
+            },
+            sx: {
+              "& .MuiInputBase-input.MuiSelect-select": {
+                height: "34px",
+                lineHeight: "24px"
+              },
+              width: "100%",
+              ...isError ? {
+                borderColor: errorMain
+              } : {}
             }
-          );
-        },
-        onOpen: () => selectRef.current && setAnchorEl(selectRef.current),
-        sx: {
-          "& .MuiInputBase-input.MuiSelect-select": {
-            height: "34px",
-            lineHeight: "24px"
-          },
-          ...isError ? {
-            borderColor: errorMain
-          } : {}
-        }
+          }
+        )
       }
     ),
     helperText && /* @__PURE__ */ jsx131(InputHelperText_default, { severity: isError ? "error" : "info", children: helperText }),
@@ -23660,11 +23686,18 @@ var ItemSelector = function ItemSelector2({
         isLoading,
         isLoadingSubtitle2,
         onApply: (itemIds) => {
-          onChange(
-            allShownItemsRef.current.filter(
-              (segment) => itemIds.includes(segment.id)
-            )
+          const shownItems = allShownItemsRef.current;
+          const shownItemsIds = new Set(
+            allShownItemsRef.current.map((item) => item.id)
+          );
+          const itemIdsSet = new Set(itemIds);
+          const notShownSelectedItems = selectedItems.filter(
+            (item) => !shownItemsIds.has(item.id)
+          );
+          const shownSelectedItems = shownItems.filter(
+            (item) => itemIdsSet.has(item.id)
           );
+          onChange([...notShownSelectedItems, ...shownSelectedItems]);
           setAnchorEl(void 0);
           setSearchText("");
           onClose && onClose();
@@ -25243,6 +25276,7 @@ var PhoneField = React79.forwardRef(function PhoneField2({
       options: countryCodeOptions,
       onChange: onChangeCountryCode,
       variant: "rounded",
+      disabled: rest.disabled,
       sx: {
         ":not(:hover)": {
           borderRight: "1px solid transparent"