@elementor/editor-controls 3.33.0-147 → 3.33.0-149

package/dist/index.js

@@ -1223,29 +1223,16 @@ var import_editor_props10 = require("@elementor/editor-props");
 var import_ui28 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
-// src/components/popover-content.tsx
-var React22 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
-var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React22.createElement(import_ui17.Stack, { ...props, gap }, children);
-
-// src/components/popover-grid-container.tsx
-var import_react15 = require("react");
+// src/components/control-repeater/actions/tooltip-add-item-action.tsx
 var React23 = __toESM(require("react"));
-var import_ui18 = require("@elementor/ui");
-var PopoverGridContainer = (0, import_react15.forwardRef)(
-  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap, alignItems, flexWrap, ref }, children)
-);
-
-// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
-var React25 = __toESM(require("react"));
 var import_icons4 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
+var import_ui18 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
-// src/components/unstable-repeater/context/repeater-context.tsx
-var React24 = __toESM(require("react"));
-var import_react17 = require("react");
-var import_ui19 = require("@elementor/ui");
+// src/components/control-repeater/context/repeater-context.tsx
+var React22 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_ui17 = require("@elementor/ui");
 
 // src/services/event-bus.ts
 var EventBus = class {
@@ -1281,19 +1268,19 @@ var EventBus = class {
 };
 var eventBus = new EventBus();
 
-// src/components/unstable-repeater/context/item-context.tsx
-var import_react16 = require("react");
-var ItemContext = (0, import_react16.createContext)({
+// src/components/control-repeater/context/item-context.tsx
+var import_react15 = require("react");
+var ItemContext = (0, import_react15.createContext)({
   index: -1,
   value: {}
 });
 
-// src/components/unstable-repeater/context/repeater-context.tsx
-var RepeaterContext = (0, import_react17.createContext)(null);
+// src/components/control-repeater/context/repeater-context.tsx
+var RepeaterContext = (0, import_react16.createContext)(null);
 var EMPTY_OPEN_ITEM = -1;
 var useRepeaterContext = () => {
-  const context = React24.useContext(RepeaterContext);
-  const itemContext = React24.useContext(ItemContext);
+  const context = React22.useContext(RepeaterContext);
+  const itemContext = React22.useContext(ItemContext);
   if (!context) {
     throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
   }
@@ -1311,10 +1298,10 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [itemsWithKeys, setItemsWithKeys] = (0, import_react17.useState)(() => {
+  const [itemsWithKeys, setItemsWithKeys] = (0, import_react16.useState)(() => {
     return items2?.map((item) => ({ key: generateUniqueKey(), item })) ?? [];
   });
-  React24.useEffect(() => {
+  React22.useEffect(() => {
     setItemsWithKeys((prevItemsWithKeys) => {
       const newItemsWithKeys = items2?.map((item) => {
         const existingItem = prevItemsWithKeys.find((i) => i.item === item);
@@ -1326,10 +1313,10 @@ var RepeaterContextProvider = ({
   const handleSetItems = (newItemsWithKeys) => {
     setItems(newItemsWithKeys.map(({ item }) => item));
   };
-  const [openItemIndex, setOpenItemIndex] = (0, import_react17.useState)(EMPTY_OPEN_ITEM);
-  const [rowRef, setRowRef] = (0, import_react17.useState)(null);
+  const [openItemIndex, setOpenItemIndex] = (0, import_react16.useState)(EMPTY_OPEN_ITEM);
+  const [rowRef, setRowRef] = (0, import_react16.useState)(null);
   const isOpen = openItemIndex !== EMPTY_OPEN_ITEM;
-  const popoverState = (0, import_ui19.usePopupState)({ variant: "popover" });
+  const popoverState = (0, import_ui17.usePopupState)({ variant: "popover" });
   const addItem = (ev, config) => {
     const item = config?.item ?? { ...initial };
     const newIndex = config?.index ?? items2.length;
@@ -1353,7 +1340,7 @@ var RepeaterContextProvider = ({
     const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
     setItems(newItems);
   };
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React22.createElement(
     RepeaterContext.Provider,
     {
       value: {
@@ -1378,7 +1365,7 @@ var generateUniqueKey = () => {
   return Date.now() + Math.floor(Math.random() * 1e6);
 };
 
-// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
+// src/components/control-repeater/actions/tooltip-add-item-action.tsx
 var SIZE2 = "tiny";
 var TooltipAddItemAction = ({
   disabled = false,
@@ -1389,37 +1376,37 @@ var TooltipAddItemAction = ({
 }) => {
   const { addItem } = useRepeaterContext();
   const onClick = (ev) => addItem(ev, { index: newItemIndex });
-  return /* @__PURE__ */ React25.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React25.createElement(import_ui20.Box, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React25.createElement(
-    import_ui20.IconButton,
+  return /* @__PURE__ */ React23.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React23.createElement(import_ui18.Box, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React23.createElement(
+    import_ui18.IconButton,
     {
       size: SIZE2,
       disabled,
       onClick,
       "aria-label": (0, import_i18n5.sprintf)((0, import_i18n5.__)("Add %s item", "elementor"), ariaLabel?.toLowerCase())
     },
-    /* @__PURE__ */ React25.createElement(import_icons4.PlusIcon, { fontSize: SIZE2 })
+    /* @__PURE__ */ React23.createElement(import_icons4.PlusIcon, { fontSize: SIZE2 })
   )));
 };
 var ConditionalToolTip = ({
   children,
   enable,
   content
-}) => enable && content ? /* @__PURE__ */ React25.createElement(import_ui20.Infotip, { placement: "right", color: "secondary", content }, children) : children;
+}) => enable && content ? /* @__PURE__ */ React23.createElement(import_ui18.Infotip, { placement: "right", color: "secondary", content }, children) : children;
 
-// src/components/unstable-repeater/header/header.tsx
-var React28 = __toESM(require("react"));
-var import_ui21 = require("@elementor/ui");
+// src/components/control-repeater/header/header.tsx
+var React26 = __toESM(require("react"));
+var import_ui19 = require("@elementor/ui");
 
 // src/control-adornments/control-adornments.tsx
-var React27 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 
 // src/control-adornments/control-adornments-context.tsx
-var React26 = __toESM(require("react"));
-var import_react18 = require("react");
-var Context2 = (0, import_react18.createContext)(null);
-var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React26.createElement(Context2.Provider, { value: { items: items2 } }, children);
+var React24 = __toESM(require("react"));
+var import_react17 = require("react");
+var Context2 = (0, import_react17.createContext)(null);
+var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React24.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlAdornments = () => {
-  const context = (0, import_react18.useContext)(Context2);
+  const context = (0, import_react17.useContext)(Context2);
   return context?.items ?? [];
 };
 
@@ -1431,18 +1418,18 @@ function ControlAdornments({
   if (items2?.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React27.createElement(Adornment, { key: id, customContext })));
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React25.createElement(Adornment, { key: id, customContext })));
 }
 
-// src/components/unstable-repeater/header/header.tsx
-var Header = React28.forwardRef(
+// src/components/control-repeater/header/header.tsx
+var Header = React26.forwardRef(
   ({
     label,
     children,
     adornment: Adornment = ControlAdornments
   }, ref) => {
-    return /* @__PURE__ */ React28.createElement(
-      import_ui21.Stack,
+    return /* @__PURE__ */ React26.createElement(
+      import_ui19.Stack,
       {
         direction: "row",
         alignItems: "center",
@@ -1450,26 +1437,26 @@ var Header = React28.forwardRef(
         sx: { marginInlineEnd: -0.75, py: 0.25 },
         ref
       },
-      /* @__PURE__ */ React28.createElement(import_ui21.Box, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React28.createElement(import_ui21.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label), /* @__PURE__ */ React28.createElement(Adornment, null)),
+      /* @__PURE__ */ React26.createElement(import_ui19.Box, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React26.createElement(import_ui19.Typography, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label), /* @__PURE__ */ React26.createElement(Adornment, null)),
       children
     );
   }
 );
 
-// src/components/unstable-repeater/items/items-container.tsx
-var React30 = __toESM(require("react"));
+// src/components/control-repeater/items/items-container.tsx
+var React28 = __toESM(require("react"));
 
 // src/components/sortable.tsx
-var React29 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_icons5 = require("@elementor/icons");
-var import_ui22 = require("@elementor/ui");
+var import_ui20 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React29.createElement(import_ui22.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React29.createElement(import_ui22.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
+  return /* @__PURE__ */ React27.createElement(import_ui20.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React27.createElement(import_ui20.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
 var SortableItem = ({ id, children, disabled }) => {
-  return /* @__PURE__ */ React29.createElement(
-    import_ui22.UnstableSortableItem,
+  return /* @__PURE__ */ React27.createElement(
+    import_ui20.UnstableSortableItem,
     {
       id,
       disabled,
@@ -1481,12 +1468,12 @@ var SortableItem = ({ id, children, disabled }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React29.createElement(StyledListItem, { ...itemProps, style: itemStyle, tabIndex: -1 }, !disabled && /* @__PURE__ */ React29.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React29.createElement(StyledDivider, { style: dropIndicationStyle }));
+        return /* @__PURE__ */ React27.createElement(StyledListItem, { ...itemProps, style: itemStyle, tabIndex: -1 }, !disabled && /* @__PURE__ */ React27.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React27.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
 };
-var StyledListItem = (0, import_ui22.styled)(import_ui22.ListItem)`
+var StyledListItem = (0, import_ui20.styled)(import_ui20.ListItem)`
 	position: relative;
 	margin-inline: 0px;
 	padding-inline: 0px;
@@ -1516,7 +1503,7 @@ var StyledListItem = (0, import_ui22.styled)(import_ui22.ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React29.createElement(
+var SortableTrigger = (props) => /* @__PURE__ */ React27.createElement(
   "div",
   {
     ...props,
@@ -1525,9 +1512,9 @@ var SortableTrigger = (props) => /* @__PURE__ */ React29.createElement(
     tabIndex: 0,
     "aria-label": (0, import_i18n6.__)("Drag item", "elementor")
   },
-  /* @__PURE__ */ React29.createElement(import_icons5.GripVerticalIcon, { fontSize: "tiny" })
+  /* @__PURE__ */ React27.createElement(import_icons5.GripVerticalIcon, { fontSize: "tiny" })
 );
-var StyledDivider = (0, import_ui22.styled)(import_ui22.Divider)`
+var StyledDivider = (0, import_ui20.styled)(import_ui20.Divider)`
 	height: 0px;
 	border: none;
 	overflow: visible;
@@ -1544,7 +1531,7 @@ var StyledDivider = (0, import_ui22.styled)(import_ui22.Divider)`
 	}
 `;
 
-// src/components/unstable-repeater/items/items-container.tsx
+// src/components/control-repeater/items/items-container.tsx
 var ItemsContainer = ({
   isSortable = true,
   children
@@ -1562,27 +1549,27 @@ var ItemsContainer = ({
       })
     );
   };
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
     const value = items2[index].item;
-    return /* @__PURE__ */ React30.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React30.createElement(ItemContext.Provider, { value: { index, value } }, children));
+    return /* @__PURE__ */ React28.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React28.createElement(ItemContext.Provider, { value: { index, value } }, children));
   })));
 };
 
-// src/components/unstable-repeater/items/item.tsx
-var React31 = __toESM(require("react"));
-var import_ui23 = require("@elementor/ui");
+// src/components/control-repeater/items/item.tsx
+var React29 = __toESM(require("react"));
+var import_ui21 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
-// src/components/unstable-repeater/locations.ts
+// src/components/control-repeater/locations.ts
 var import_locations = require("@elementor/locations");
 var { Slot: RepeaterItemIconSlot, inject: injectIntoRepeaterItemIcon } = (0, import_locations.createReplaceableLocation)();
 var { Slot: RepeaterItemLabelSlot, inject: injectIntoRepeaterItemLabel } = (0, import_locations.createReplaceableLocation)();
 var { Slot: RepeaterItemActionsSlot, inject: injectIntoRepeaterItemActions } = (0, import_locations.createLocation)();
 
-// src/components/unstable-repeater/items/item.tsx
+// src/components/control-repeater/items/item.tsx
 var Item = ({ Label: Label3, Icon, actions }) => {
   const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex, index = -1, value } = useRepeaterContext();
-  const triggerProps = (0, import_ui23.bindTrigger)(popoverState);
+  const triggerProps = (0, import_ui21.bindTrigger)(popoverState);
   const key = items2[index].key ?? -1;
   const onClick = (ev) => {
     triggerProps.onClick(ev);
@@ -1595,12 +1582,12 @@ var Item = ({ Label: Label3, Icon, actions }) => {
     setRowRef(ref);
     popoverState.setAnchorEl(ref);
   };
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
-    import_ui23.UnstableTag,
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(
+    import_ui21.UnstableTag,
     {
       key,
       disabled: false,
-      label: /* @__PURE__ */ React31.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React31.createElement(Label3, { value })),
+      label: /* @__PURE__ */ React29.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React29.createElement(Label3, { value })),
       showActionsOnHover: true,
       fullWidth: true,
       ref: setRef,
@@ -1609,26 +1596,26 @@ var Item = ({ Label: Label3, Icon, actions }) => {
       sx: { minHeight: (theme) => theme.spacing(3.5) },
       ...triggerProps,
       onClick,
-      startIcon: /* @__PURE__ */ React31.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React31.createElement(Icon, { value })),
-      actions: /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), actions)
+      startIcon: /* @__PURE__ */ React29.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React29.createElement(Icon, { value })),
+      actions: /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), actions)
     }
   ));
 };
 
-// src/components/unstable-repeater/unstable-repeater.tsx
-var React32 = __toESM(require("react"));
-var UnstableRepeater = ({
+// src/components/control-repeater/control-repeater.tsx
+var React30 = __toESM(require("react"));
+var ControlRepeater = ({
   children,
   initial,
   propTypeUtil
 }) => {
-  return /* @__PURE__ */ React32.createElement(SectionContent, null, /* @__PURE__ */ React32.createElement(RepeaterContextProvider, { initial, propTypeUtil }, children));
+  return /* @__PURE__ */ React30.createElement(SectionContent, null, /* @__PURE__ */ React30.createElement(RepeaterContextProvider, { initial, propTypeUtil }, children));
 };
 
-// src/components/unstable-repeater/actions/disable-item-action.tsx
-var React33 = __toESM(require("react"));
+// src/components/control-repeater/actions/disable-item-action.tsx
+var React31 = __toESM(require("react"));
 var import_icons6 = require("@elementor/icons");
-var import_ui24 = require("@elementor/ui");
+var import_ui22 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 var SIZE3 = "tiny";
 var DisableItemAction = () => {
@@ -1646,13 +1633,13 @@ var DisableItemAction = () => {
     }
     updateItem(self, index);
   };
-  return /* @__PURE__ */ React33.createElement(import_ui24.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(import_ui24.IconButton, { size: SIZE3, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React33.createElement(import_icons6.EyeOffIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React33.createElement(import_icons6.EyeIcon, { fontSize: SIZE3 })));
+  return /* @__PURE__ */ React31.createElement(import_ui22.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(import_ui22.IconButton, { size: SIZE3, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React31.createElement(import_icons6.EyeOffIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React31.createElement(import_icons6.EyeIcon, { fontSize: SIZE3 })));
 };
 
-// src/components/unstable-repeater/actions/duplicate-item-action.tsx
-var React34 = __toESM(require("react"));
+// src/components/control-repeater/actions/duplicate-item-action.tsx
+var React32 = __toESM(require("react"));
 var import_icons7 = require("@elementor/icons");
-var import_ui25 = require("@elementor/ui");
+var import_ui23 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
 var DuplicateItemAction = () => {
@@ -1665,13 +1652,13 @@ var DuplicateItemAction = () => {
     const newItem = structuredClone(items2[index]?.item);
     addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React34.createElement(import_ui25.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React34.createElement(import_ui25.IconButton, { size: SIZE4, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React34.createElement(import_icons7.CopyIcon, { fontSize: SIZE4 })));
+  return /* @__PURE__ */ React32.createElement(import_ui23.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(import_ui23.IconButton, { size: SIZE4, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React32.createElement(import_icons7.CopyIcon, { fontSize: SIZE4 })));
 };
 
-// src/components/unstable-repeater/actions/remove-item-action.tsx
-var React35 = __toESM(require("react"));
+// src/components/control-repeater/actions/remove-item-action.tsx
+var React33 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
-var import_ui26 = require("@elementor/ui");
+var import_ui24 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var RemoveItemAction = () => {
@@ -1681,12 +1668,12 @@ var RemoveItemAction = () => {
   }
   const removeLabel = (0, import_i18n10.__)("Remove", "elementor");
   const onClick = () => removeItem(index);
-  return /* @__PURE__ */ React35.createElement(import_ui26.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React35.createElement(import_ui26.IconButton, { size: SIZE5, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React35.createElement(import_icons8.XIcon, { fontSize: SIZE5 })));
+  return /* @__PURE__ */ React33.createElement(import_ui24.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(import_ui24.IconButton, { size: SIZE5, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React33.createElement(import_icons8.XIcon, { fontSize: SIZE5 })));
 };
 
-// src/components/unstable-repeater/items/edit-item-popover.tsx
-var React36 = __toESM(require("react"));
-var import_ui27 = require("@elementor/ui");
+// src/components/control-repeater/items/edit-item-popover.tsx
+var React34 = __toESM(require("react"));
+var import_ui25 = require("@elementor/ui");
 var EditItemPopover = ({ children }) => {
   const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef } = useRepeaterContext();
   if (!isOpen || !rowRef) {
@@ -1697,8 +1684,8 @@ var EditItemPopover = ({ children }) => {
     popoverState.setAnchorEl(null);
     setOpenItemIndex(EMPTY_OPEN_ITEM);
   };
-  return /* @__PURE__ */ React36.createElement(
-    import_ui27.Popover,
+  return /* @__PURE__ */ React34.createElement(
+    import_ui25.Popover,
     {
       disablePortal: true,
       slotProps: {
@@ -1707,17 +1694,30 @@ var EditItemPopover = ({ children }) => {
         }
       },
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...(0, import_ui27.bindPopover)(popoverState),
+      ...(0, import_ui25.bindPopover)(popoverState),
       onClose
     },
-    /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React36.createElement(import_ui27.Box, null, children))
+    /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React34.createElement(import_ui25.Box, null, children))
   );
 };
 
+// src/components/popover-content.tsx
+var React35 = __toESM(require("react"));
+var import_ui26 = require("@elementor/ui");
+var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React35.createElement(import_ui26.Stack, { ...props, gap }, children);
+
+// src/components/popover-grid-container.tsx
+var import_react18 = require("react");
+var React36 = __toESM(require("react"));
+var import_ui27 = require("@elementor/ui");
+var PopoverGridContainer = (0, import_react18.forwardRef)(
+  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React36.createElement(import_ui27.Grid, { container: true, gap, alignItems, flexWrap, ref }, children)
+);
+
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(import_editor_props10.boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React37.createElement(UnstableRepeater, { initial: initialShadow, propTypeUtil: import_editor_props10.boxShadowPropTypeUtil }, /* @__PURE__ */ React37.createElement(Header, { label: (0, import_i18n11.__)("Box shadow", "elementor") }, /* @__PURE__ */ React37.createElement(TooltipAddItemAction, { newItemIndex: 0, disabled, ariaLabel: "Box shadow" })), /* @__PURE__ */ React37.createElement(ItemsContainer, null, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React37.createElement(ControlRepeater, { initial: initialShadow, propTypeUtil: import_editor_props10.boxShadowPropTypeUtil }, /* @__PURE__ */ React37.createElement(Header, { label: (0, import_i18n11.__)("Box shadow", "elementor") }, /* @__PURE__ */ React37.createElement(TooltipAddItemAction, { newItemIndex: 0, disabled, ariaLabel: "Box shadow" })), /* @__PURE__ */ React37.createElement(ItemsContainer, null, /* @__PURE__ */ React37.createElement(
     Item,
     {
       Icon: ItemIcon,
@@ -2100,7 +2100,7 @@ var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
 });
 var Repeater = ({ propTypeUtil, label, filterPropName }) => {
   const { getInitialValue } = useFilterConfig();
-  return /* @__PURE__ */ React46.createElement(UnstableRepeater, { initial: getInitialValue(), propTypeUtil }, /* @__PURE__ */ React46.createElement(Header, { label }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React46.createElement(ControlRepeater, { initial: getInitialValue(), propTypeUtil }, /* @__PURE__ */ React46.createElement(Header, { label }, /* @__PURE__ */ React46.createElement(
     TooltipAddItemAction,
     {
       newItemIndex: 0,
@@ -4081,7 +4081,7 @@ var backgroundResolutionOptions = [
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props32.backgroundOverlayPropTypeUtil);
   return /* @__PURE__ */ React72.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React72.createElement(
-    UnstableRepeater,
+    ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: import_editor_props32.backgroundOverlayPropTypeUtil
@@ -4297,7 +4297,7 @@ var RepeatableControl = createControl(
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
     return /* @__PURE__ */ React74.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React74.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React74.createElement(
-      UnstableRepeater,
+      ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil
@@ -5100,7 +5100,7 @@ var Repeater2 = ({
   };
   const shouldDisableAddItem = !getInitialValue();
   return /* @__PURE__ */ React89.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React89.createElement(
-    UnstableRepeater,
+    ControlRepeater,
     {
       initial: getInitialValue() ?? initialTransformValue,
       propTypeUtil: import_editor_props45.transformFunctionsPropTypeUtil