@elementor/editor-controls 3.32.0-28 → 3.32.0-30

package/dist/index.js

@@ -66,7 +66,6 @@ __export(index_exports, {
   ToggleControl: () => ToggleControl,
   TransformRepeaterControl: () => TransformRepeaterControl,
   TransitionRepeaterControl: () => TransitionRepeaterControl,
-  UnstableTransformRepeaterControl: () => UnstableTransformRepeaterControl,
   UrlControl: () => UrlControl,
   createControlReplacementsRegistry: () => createControlReplacementsRegistry,
   enqueueFont: () => enqueueFont,
@@ -1952,7 +1951,7 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content6, showTooltip }) => {
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content4, showTooltip }) => {
       const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
       return /* @__PURE__ */ React32.createElement(
         ConditionalTooltip,
@@ -1970,7 +1969,7 @@ var ControlToggleButtonGroup = ({
             fullWidth,
             isPlaceholder
           },
-          /* @__PURE__ */ React32.createElement(Content6, { size })
+          /* @__PURE__ */ React32.createElement(Content4, { size })
         )
       );
     }),
@@ -3332,15 +3331,16 @@ var import_ui55 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
 var import_i18n28 = require("@wordpress/i18n");
 
-// src/components/unstable-repeater/actions/add-item-action.tsx
+// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
 var React50 = __toESM(require("react"));
 var import_icons15 = require("@elementor/icons");
-var import_ui41 = require("@elementor/ui");
+var import_ui42 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
 // src/components/unstable-repeater/context/repeater-context.tsx
 var React49 = __toESM(require("react"));
 var import_react30 = require("react");
+var import_ui41 = require("@elementor/ui");
 var RepeaterContext = (0, import_react30.createContext)(null);
 var EMPTY_OPEN_ITEM2 = -1;
 var useRepeaterContext = () => {
@@ -3348,28 +3348,12 @@ var useRepeaterContext = () => {
   if (!context) {
     throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
   }
-  return {
-    isOpen: context.isOpen,
-    openItem: context.openItem,
-    setOpenItem: context.setOpenItem,
-    items: context.items,
-    setItems: context.setItems,
-    uniqueKeys: context.uniqueKeys,
-    setUniqueKeys: context.setUniqueKeys,
-    initial: context.initial,
-    isSortable: context.isSortable,
-    generateNextKey: context.generateNextKey,
-    sortItemsByKeys: context.sortItemsByKeys,
-    addItem: context.addItem,
-    updateItem: context.updateItem,
-    removeItem: context.removeItem
-  };
+  return context;
 };
 var RepeaterContextProvider = ({
   children,
   initial,
-  propTypeUtil,
-  isSortable = true
+  propTypeUtil
 }) => {
   const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp(propTypeUtil);
   const [items2, setItems] = useSyncExternalState({
@@ -3378,52 +3362,51 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [openItem, setOpenItem] = (0, import_react30.useState)(EMPTY_OPEN_ITEM2);
-  const [uniqueKeys, setUniqueKeys] = (0, import_react30.useState)(items2?.map((_, index) => index) ?? []);
-  const isOpen = openItem !== EMPTY_OPEN_ITEM2;
-  const sortItemsByKeys = (keysOrder) => {
-    setUniqueKeys(keysOrder);
-    setItems(
-      (prevItems) => keysOrder.map((key) => {
-        const index = uniqueKeys.indexOf(key);
-        return prevItems[index];
-      })
-    );
+  const itemWithKeysState = (0, import_react30.useState)(
+    items2?.map((item, index) => ({ key: index, item })) ?? []
+  );
+  const itemsWithKeys = itemWithKeysState[0];
+  const setItemsWithKeys = (newItems) => {
+    itemWithKeysState[1](newItems);
+    setItems(newItems.map(({ item }) => item));
   };
-  const addItem = (config) => {
+  const [openItemIndex, setOpenItemIndex] = (0, import_react30.useState)(EMPTY_OPEN_ITEM2);
+  const [rowRef, setRowRef] = (0, import_react30.useState)(null);
+  const isOpen = openItemIndex !== EMPTY_OPEN_ITEM2;
+  const popoverState = (0, import_ui41.usePopupState)({ variant: "popover" });
+  const addItem = (ev, config) => {
     const item = config?.item ?? initial;
-    const index = config?.index ?? items2.length;
-    const newItems = [...items2];
-    newItems.splice(index, 0, item);
-    setItems(newItems);
-    setUniqueKeys(newItems.map((_, i) => i));
-    setOpenItem(index);
+    const newIndex = config?.index ?? items2.length;
+    const newKey = generateNextKey(itemsWithKeys.map(({ key }) => key));
+    const newItemsWithKeys = [...itemsWithKeys];
+    newItemsWithKeys.splice(newIndex, 0, { item, key: newKey });
+    setItemsWithKeys(newItemsWithKeys);
+    setOpenItemIndex(newIndex);
+    popoverState.open(rowRef ?? ev);
   };
   const removeItem = (index) => {
-    setItems((prevItems) => prevItems.filter((_, pos) => pos !== index));
-    setUniqueKeys((prevKeys) => prevKeys.slice(0, -1));
+    setItemsWithKeys(itemsWithKeys.filter((_, pos) => pos !== index));
   };
   const updateItem = (updatedItem, index) => {
-    setItems((prevItems) => prevItems.map((item, pos) => pos === index ? updatedItem : item));
+    const item = itemsWithKeys[index];
+    setItemsWithKeys(itemsWithKeys.toSpliced(index, 1, { ...item, item: updatedItem }));
   };
   return /* @__PURE__ */ React49.createElement(
     RepeaterContext.Provider,
     {
       value: {
         isOpen,
-        openItem,
-        setOpenItem,
-        items: items2 ?? [],
-        setItems,
+        openItemIndex,
+        setOpenItemIndex,
+        items: itemsWithKeys ?? [],
+        setItems: setItemsWithKeys,
+        popoverState,
         initial,
-        uniqueKeys,
-        setUniqueKeys,
-        isSortable,
-        generateNextKey,
-        sortItemsByKeys,
-        addItem,
         updateItem,
-        removeItem
+        addItem,
+        removeItem,
+        rowRef,
+        setRowRef
       }
     },
     children
@@ -3433,83 +3416,96 @@ var generateNextKey = (source) => {
   return 1 + Math.max(0, ...source);
 };
 
-// src/components/unstable-repeater/actions/add-item-action.tsx
+// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
 var SIZE4 = "tiny";
-var AddItemAction = ({
+var TooltipAddItemAction = ({
   disabled = false,
-  tooltip = false,
+  enableTooltip = false,
   tooltipContent = null,
   newItemIndex
 }) => {
   const { addItem } = useRepeaterContext();
-  const shouldShowTooltip = tooltip && tooltipContent;
-  const onClick = () => addItem({ index: newItemIndex });
-  return /* @__PURE__ */ React50.createElement(ConditionalToolTip, { content: tooltipContent, shouldShowTooltip: !!shouldShowTooltip }, /* @__PURE__ */ React50.createElement(
-    import_ui41.IconButton,
+  const onClick = (ev) => addItem(ev, { index: newItemIndex });
+  return /* @__PURE__ */ React50.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React50.createElement(import_ui42.Box, { sx: { ml: "auto" } }, /* @__PURE__ */ React50.createElement(
+    import_ui42.IconButton,
     {
       size: SIZE4,
-      sx: { ml: "auto" },
       disabled,
       onClick,
       "aria-label": (0, import_i18n19.__)("Add item", "elementor")
     },
     /* @__PURE__ */ React50.createElement(import_icons15.PlusIcon, { fontSize: SIZE4 })
-  ));
+  )));
 };
 var ConditionalToolTip = ({
   children,
-  content,
-  shouldShowTooltip
-}) => {
-  return shouldShowTooltip ? /* @__PURE__ */ React50.createElement(import_ui41.Tooltip, { title: content }, children) : children;
-};
+  enable,
+  content
+}) => enable && content ? /* @__PURE__ */ React50.createElement(
+  import_ui42.Infotip,
+  {
+    placement: "right",
+    content: /* @__PURE__ */ React50.createElement(
+      import_ui42.Box,
+      {
+        component: "span",
+        "aria-label": void 0,
+        sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
+      },
+      content
+    )
+  },
+  children
+) : children;
 
 // src/components/unstable-repeater/header/header.tsx
 var React51 = __toESM(require("react"));
-var import_ui42 = require("@elementor/ui");
+var import_ui43 = require("@elementor/ui");
 var Header = ({ label, children }) => {
   const { value } = useBoundProp();
-  return /* @__PURE__ */ React51.createElement(import_ui42.Stack, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React51.createElement(import_ui42.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React51.createElement(RepeaterHeaderActionsSlot, { value }), /* @__PURE__ */ React51.createElement(SlotChildren, { whitelist: [AddItemAction] }, children), /* @__PURE__ */ React51.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React51.createElement(import_ui43.Stack, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React51.createElement(import_ui43.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React51.createElement(RepeaterHeaderActionsSlot, { value }), /* @__PURE__ */ React51.createElement(SlotChildren, { whitelist: [TooltipAddItemAction] }, children), /* @__PURE__ */ React51.createElement(ControlAdornments, null));
 };
 
 // src/components/unstable-repeater/items/items-container.tsx
 var React52 = __toESM(require("react"));
 var ItemsContainer = ({
   itemTemplate,
+  isSortable = true,
   children
 }) => {
-  const { items: items2, uniqueKeys, openItem, isSortable, sortItemsByKeys } = useRepeaterContext();
+  const { items: items2, setItems } = useRepeaterContext();
+  const keys = items2.map(({ key }) => key);
   if (!itemTemplate) {
     return null;
   }
-  const onChangeOrder = (newOrder) => {
-    sortItemsByKeys(newOrder);
+  const onChangeOrder = (newKeys) => {
+    setItems(
+      newKeys.map((key) => {
+        const index = items2.findIndex((item) => item.key === key);
+        return items2[index];
+      })
+    );
   };
-  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys?.map((key, index) => {
-    const value = items2?.[index];
-    if (!value) {
-      return null;
-    }
+  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
+    const value = items2[index].item;
     return /* @__PURE__ */ React52.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React52.isValidElement(itemTemplate) ? React52.cloneElement(itemTemplate, {
       key,
       value,
       index,
-      openOnMount: key === openItem,
       children
     }) : null);
   })));
 };
 
 // src/components/unstable-repeater/items/item.tsx
-var React57 = __toESM(require("react"));
-var import_react32 = require("react");
-var import_ui48 = require("@elementor/ui");
+var React56 = __toESM(require("react"));
+var import_ui47 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 
 // src/components/unstable-repeater/actions/disable-item-action.tsx
 var React53 = __toESM(require("react"));
 var import_icons16 = require("@elementor/icons");
-var import_ui43 = require("@elementor/ui");
+var import_ui44 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var DisableItemAction = ({ index = -1 }) => {
@@ -3517,23 +3513,23 @@ var DisableItemAction = ({ index = -1 }) => {
   if (index === -1) {
     return null;
   }
-  const propDisabled = items2[index]?.disabled ?? false;
+  const propDisabled = items2[index].item.disabled ?? false;
   const toggleLabel = propDisabled ? (0, import_i18n20.__)("Show", "elementor") : (0, import_i18n20.__)("Hide", "elementor");
   const onClick = () => {
-    const self = structuredClone(items2[index]);
+    const self = structuredClone(items2[index].item);
     self.disabled = !self.disabled;
     if (!self.disabled) {
       delete self.disabled;
     }
     updateItem(self, index);
   };
-  return /* @__PURE__ */ React53.createElement(import_ui43.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React53.createElement(import_ui43.IconButton, { size: SIZE5, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React53.createElement(import_icons16.EyeOffIcon, { fontSize: SIZE5 }) : /* @__PURE__ */ React53.createElement(import_icons16.EyeIcon, { fontSize: SIZE5 })));
+  return /* @__PURE__ */ React53.createElement(import_ui44.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React53.createElement(import_ui44.IconButton, { size: SIZE5, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React53.createElement(import_icons16.EyeOffIcon, { fontSize: SIZE5 }) : /* @__PURE__ */ React53.createElement(import_icons16.EyeIcon, { fontSize: SIZE5 })));
 };
 
 // src/components/unstable-repeater/actions/duplicate-item-action.tsx
 var React54 = __toESM(require("react"));
 var import_icons17 = require("@elementor/icons");
-var import_ui44 = require("@elementor/ui");
+var import_ui45 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var DuplicateItemAction = ({ index = -1 }) => {
@@ -3542,17 +3538,17 @@ var DuplicateItemAction = ({ index = -1 }) => {
     return null;
   }
   const duplicateLabel = (0, import_i18n21.__)("Duplicate", "elementor");
-  const onClick = () => {
-    const newItem = structuredClone(items2[index]);
-    addItem({ item: newItem, index: index + 1 });
+  const onClick = (ev) => {
+    const newItem = structuredClone(items2[index]?.item);
+    addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React54.createElement(import_ui44.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React54.createElement(import_ui44.IconButton, { size: SIZE6, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React54.createElement(import_icons17.CopyIcon, { fontSize: SIZE6 })));
+  return /* @__PURE__ */ React54.createElement(import_ui45.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React54.createElement(import_ui45.IconButton, { size: SIZE6, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React54.createElement(import_icons17.CopyIcon, { fontSize: SIZE6 })));
 };
 
 // src/components/unstable-repeater/actions/remove-item-action.tsx
 var React55 = __toESM(require("react"));
 var import_icons18 = require("@elementor/icons");
-var import_ui45 = require("@elementor/ui");
+var import_ui46 = require("@elementor/ui");
 var import_i18n22 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var RemoveItemAction = ({ index = -1 }) => {
@@ -3562,80 +3558,39 @@ var RemoveItemAction = ({ index = -1 }) => {
   }
   const removeLabel = (0, import_i18n22.__)("Remove", "elementor");
   const onClick = () => removeItem(index);
-  return /* @__PURE__ */ React55.createElement(import_ui45.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React55.createElement(import_ui45.IconButton, { size: SIZE7, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React55.createElement(import_icons18.XIcon, { fontSize: SIZE7 })));
-};
-
-// src/components/unstable-repeater/items/edit-item-popover.tsx
-var React56 = __toESM(require("react"));
-var import_ui46 = require("@elementor/ui");
-var EditItemPopover = ({ children, anchorRef, setAnchorEl, popoverProps }) => {
-  return /* @__PURE__ */ React56.createElement(
-    import_ui46.Popover,
-    {
-      disablePortal: true,
-      slotProps: {
-        paper: {
-          ref: setAnchorEl,
-          sx: { mt: 0.5, width: anchorRef?.offsetWidth }
-        }
-      },
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      anchorEl: anchorRef,
-      ...popoverProps
-    },
-    /* @__PURE__ */ React56.createElement(import_ui46.Box, null, children)
-  );
-};
-
-// src/components/unstable-repeater/items/use-popover.tsx
-var import_react31 = require("react");
-var import_ui47 = require("@elementor/ui");
-var usePopover2 = (openOnMount, onOpen) => {
-  const [ref, setRef] = (0, import_react31.useState)(null);
-  const popoverState = (0, import_ui47.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui47.bindPopover)(popoverState);
-  (0, import_react31.useEffect)(() => {
-    if (openOnMount && ref) {
-      popoverState.open(ref);
-      onOpen?.();
-    }
-  }, [ref]);
-  return {
-    popoverState,
-    ref,
-    setRef,
-    popoverProps
-  };
+  return /* @__PURE__ */ React55.createElement(import_ui46.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React55.createElement(import_ui46.IconButton, { size: SIZE7, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React55.createElement(import_icons18.XIcon, { fontSize: SIZE7 })));
 };
 
 // src/components/unstable-repeater/items/item.tsx
 var Item = ({
   Label: Label3,
   Icon,
-  Content: Content6,
-  key,
   value,
-  index,
-  openOnMount,
+  index = -1,
   children
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
-  const { popoverState, popoverProps, ref, setRef } = usePopover2(openOnMount, () => {
-  });
-  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
-    import_ui48.UnstableTag,
+  const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
+  const triggerProps = (0, import_ui47.bindTrigger)(popoverState);
+  const key = items2[index].key ?? -1;
+  const onClick = (ev) => {
+    triggerProps.onClick(ev);
+    setOpenItemIndex(index);
+  };
+  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(
+    import_ui47.UnstableTag,
     {
       key,
       disabled: false,
-      label: /* @__PURE__ */ React57.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React57.createElement(Label3, { value })),
+      label: /* @__PURE__ */ React56.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React56.createElement(Label3, { value })),
       showActionsOnHover: true,
       fullWidth: true,
-      ref: setRef,
+      ref: (ref) => ref && openItemIndex === index && setRowRef(ref),
       variant: "outlined",
       "aria-label": (0, import_i18n23.__)("Open item", "elementor"),
-      ...(0, import_ui48.bindTrigger)(popoverState),
-      startIcon: /* @__PURE__ */ React57.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React57.createElement(Icon, { value })),
-      actions: /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React57.createElement(
+      ...triggerProps,
+      onClick,
+      startIcon: /* @__PURE__ */ React56.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React56.createElement(Icon, { value })),
+      actions: /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React56.createElement(
         SlotChildren,
         {
           whitelist: [DuplicateItemAction, DisableItemAction, RemoveItemAction],
@@ -3645,17 +3600,52 @@ var Item = ({
         children
       ))
     }
-  ), /* @__PURE__ */ React57.createElement(EditItemPopover, { anchorRef: ref, setAnchorEl, popoverProps }, /* @__PURE__ */ React57.createElement(Content6, { anchorEl, bind: String(index), value })));
+  ));
 };
 
 // src/components/unstable-repeater/unstable-repeater.tsx
 var React58 = __toESM(require("react"));
+
+// src/components/unstable-repeater/items/edit-item-popover.tsx
+var React57 = __toESM(require("react"));
+var import_ui48 = require("@elementor/ui");
+var EditItemPopover = ({ children }) => {
+  const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
+  const popoverProps = (0, import_ui48.bindPopover)(popoverState);
+  if (!isOpen || !rowRef) {
+    return null;
+  }
+  const bind = items2[openItemIndex].item.$$type;
+  const onClose = () => {
+    popoverProps.onClose?.();
+    setRowRef(null);
+    setOpenItemIndex(EMPTY_OPEN_ITEM2);
+  };
+  return /* @__PURE__ */ React57.createElement(
+    import_ui48.Popover,
+    {
+      disablePortal: true,
+      slotProps: {
+        paper: {
+          sx: { mt: 0.5, width: rowRef.offsetWidth }
+        }
+      },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      ...popoverProps,
+      anchorEl: rowRef,
+      onClose
+    },
+    /* @__PURE__ */ React57.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React57.createElement(import_ui48.Box, null, React57.isValidElement(children) && React57.cloneElement(children, { bind, index: openItemIndex })))
+  );
+};
+
+// src/components/unstable-repeater/unstable-repeater.tsx
 var UnstableRepeater = ({
   children,
   initial,
   propTypeUtil
 }) => {
-  return /* @__PURE__ */ React58.createElement(SectionContent, null, /* @__PURE__ */ React58.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React58.createElement(SlotChildren, { whitelist: [Header, ItemsContainer], sorted: true }, children)));
+  return /* @__PURE__ */ React58.createElement(SectionContent, null, /* @__PURE__ */ React58.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React58.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
 };
 
 // src/env.ts
@@ -3752,7 +3742,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React61 = __toESM(require("react"));
-var import_react33 = require("react");
+var import_react31 = require("react");
 var import_editor_props26 = require("@elementor/editor-props");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons20 = require("@elementor/icons");
@@ -3774,7 +3764,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props26.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props26.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react33.useRef)(null);
+  const rowRef = (0, import_react31.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -3845,7 +3835,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React63 = __toESM(require("react"));
-var import_react34 = require("react");
+var import_react32 = require("react");
 var import_editor_props27 = require("@elementor/editor-props");
 var import_icons22 = require("@elementor/icons");
 var import_ui53 = require("@elementor/ui");
@@ -3880,7 +3870,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props27.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props27.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react34.useRef)(null);
+  const rowRef = (0, import_react32.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -3915,7 +3905,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react35 = require("react");
+var import_react33 = require("react");
 var import_editor_props28 = require("@elementor/editor-props");
 var import_ui54 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -3936,7 +3926,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui54.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react35.useRef)({
+  const valuesHistory = (0, import_react33.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -4010,18 +4000,25 @@ var backgroundResolutionOptions = [
   { label: (0, import_i18n28.__)("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: backgroundValues, setValue } = useBoundProp(import_editor_props29.backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React64.createElement(PropProvider, { propType, value: backgroundValues, setValue }, /* @__PURE__ */ React64.createElement(UnstableRepeater, { initial: getInitialBackgroundOverlay(), propTypeUtil: import_editor_props29.backgroundOverlayPropTypeUtil }, /* @__PURE__ */ React64.createElement(Header, { label: (0, import_i18n28.__)("Overlay", "elementor") }, /* @__PURE__ */ React64.createElement(AddItemAction, { newItemIndex: 0 })), /* @__PURE__ */ React64.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React64.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3, Content: ItemContent3 }) }, /* @__PURE__ */ React64.createElement(DuplicateItemAction, null), /* @__PURE__ */ React64.createElement(DisableItemAction, null), /* @__PURE__ */ React64.createElement(RemoveItemAction, null))));
+  const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props29.backgroundOverlayPropTypeUtil);
+  return /* @__PURE__ */ React64.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React64.createElement(
+    UnstableRepeater,
+    {
+      initial: getInitialBackgroundOverlay(),
+      propTypeUtil: import_editor_props29.backgroundOverlayPropTypeUtil
+    },
+    /* @__PURE__ */ React64.createElement(Header, { label: (0, import_i18n28.__)("Overlay", "elementor") }, /* @__PURE__ */ React64.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React64.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React64.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 }) }, /* @__PURE__ */ React64.createElement(DuplicateItemAction, null), /* @__PURE__ */ React64.createElement(DisableItemAction, null), /* @__PURE__ */ React64.createElement(RemoveItemAction, null)),
+    /* @__PURE__ */ React64.createElement(EditItemPopover, null, /* @__PURE__ */ React64.createElement(ItemContent3, null))
+  ));
 });
-var ItemContent3 = ({ anchorEl = null, bind }) => {
-  return /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React64.createElement(Content3, { anchorEl }));
-};
-var Content3 = ({ anchorEl }) => {
+var ItemContent3 = () => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
     image: getInitialBackgroundOverlay().value,
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
+  const { rowRef } = useRepeaterContext();
   return /* @__PURE__ */ React64.createElement(import_ui55.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React64.createElement(import_ui55.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React64.createElement(
     import_ui55.Tabs,
     {
@@ -4033,7 +4030,7 @@ var Content3 = ({ anchorEl }) => {
     /* @__PURE__ */ React64.createElement(import_ui55.Tab, { label: (0, import_i18n28.__)("Image", "elementor"), ...getTabProps("image") }),
     /* @__PURE__ */ React64.createElement(import_ui55.Tab, { label: (0, import_i18n28.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
     /* @__PURE__ */ React64.createElement(import_ui55.Tab, { label: (0, import_i18n28.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React64.createElement(import_ui55.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React64.createElement(import_ui55.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React64.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React64.createElement(import_ui55.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ColorOverlayContent, { anchorEl }))));
+  )), /* @__PURE__ */ React64.createElement(import_ui55.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React64.createElement(import_ui55.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React64.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React64.createElement(import_ui55.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon3 = ({ value }) => {
   switch (value.$$type) {
@@ -4152,15 +4149,15 @@ var BackgroundControl = createControl(() => {
 
 // src/controls/repeatable-control.tsx
 var React66 = __toESM(require("react"));
-var import_react37 = require("react");
+var import_react35 = require("react");
 var import_editor_props31 = require("@elementor/editor-props");
 var import_ui57 = require("@elementor/ui");
 
 // src/hooks/use-repeatable-control-context.ts
-var import_react36 = require("react");
-var RepeatableControlContext = (0, import_react36.createContext)(void 0);
+var import_react34 = require("react");
+var RepeatableControlContext = (0, import_react34.createContext)(void 0);
 var useRepeatableControlContext = () => {
-  const context = (0, import_react36.useContext)(RepeatableControlContext);
+  const context = (0, import_react34.useContext)(RepeatableControlContext);
   if (!context) {
     throw new Error("useRepeatableControlContext must be used within RepeatableControl");
   }
@@ -4184,11 +4181,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil = (0, import_react37.useMemo)(
+    const childArrayPropTypeUtil = (0, import_react35.useMemo)(
       () => (0, import_editor_props31.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = (0, import_react37.useMemo)(
+    const contextValue = (0, import_react35.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -4218,10 +4215,10 @@ var RepeatableControl = createControl(
   }
 );
 var ItemContent4 = ({ bind }) => {
-  return /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React66.createElement(Content4, null));
+  return /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React66.createElement(Content3, null));
 };
 var ItemIcon4 = () => /* @__PURE__ */ React66.createElement(React66.Fragment, null);
-var Content4 = () => {
+var Content3 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
   return /* @__PURE__ */ React66.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(ChildControl, { ...props })));
 };
@@ -4294,21 +4291,21 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 var React67 = __toESM(require("react"));
-var import_react38 = require("react");
+var import_react36 = require("react");
 var import_editor_props32 = require("@elementor/editor-props");
 var import_ui58 = require("@elementor/ui");
 var import_i18n30 = require("@wordpress/i18n");
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props32.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react38.useState)("");
-  const [valueError, setValueError] = (0, import_react38.useState)("");
-  const [sessionState, setSessionState] = (0, import_react38.useState)({
+  const [keyError, setKeyError] = (0, import_react36.useState)("");
+  const [valueError, setValueError] = (0, import_react36.useState)("");
+  const [sessionState, setSessionState] = (0, import_react36.useState)({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
   const keyLabel = props.keyName || (0, import_i18n30.__)("Key", "elementor");
   const valueLabel = props.valueName || (0, import_i18n30.__)("Value", "elementor");
-  const [keyRegex, valueRegex, errMsg] = (0, import_react38.useMemo)(
+  const [keyRegex, valueRegex, errMsg] = (0, import_react36.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -4418,22 +4415,11 @@ var PositionControl = () => {
 // src/controls/transform-control/transform-repeater-control.tsx
 var React78 = __toESM(require("react"));
 var import_editor_props40 = require("@elementor/editor-props");
+var import_icons29 = require("@elementor/icons");
+var import_ui69 = require("@elementor/ui");
 var import_i18n38 = require("@wordpress/i18n");
 
-// src/controls/transform-control/transform-content.tsx
-var React75 = __toESM(require("react"));
-var import_ui67 = require("@elementor/ui");
-var import_i18n36 = require("@wordpress/i18n");
-
-// src/controls/transform-control/functions/move.tsx
-var React70 = __toESM(require("react"));
-var import_react39 = require("react");
-var import_editor_props35 = require("@elementor/editor-props");
-var import_icons24 = require("@elementor/icons");
-var import_ui61 = require("@elementor/ui");
-var import_i18n32 = require("@wordpress/i18n");
-
-// src/controls/transform-control/types.ts
+// src/controls/transform-control/initial-values.ts
 var import_editor_props34 = require("@elementor/editor-props");
 var TransformFunctionKeys = {
   move: "transform-move",
@@ -4479,6 +4465,19 @@ var initialSkewValue = import_editor_props34.skewTransformPropTypeUtil.create({
   y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
 });
 
+// src/controls/transform-control/transform-content.tsx
+var React75 = __toESM(require("react"));
+var import_ui67 = require("@elementor/ui");
+var import_i18n36 = require("@wordpress/i18n");
+
+// src/controls/transform-control/functions/move.tsx
+var React70 = __toESM(require("react"));
+var import_react37 = require("react");
+var import_editor_props35 = require("@elementor/editor-props");
+var import_icons24 = require("@elementor/icons");
+var import_ui61 = require("@elementor/ui");
+var import_i18n32 = require("@wordpress/i18n");
+
 // src/controls/transform-control/functions/axis-row.tsx
 var React69 = __toESM(require("react"));
 var import_ui60 = require("@elementor/ui");
@@ -4506,13 +4505,13 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props35.moveTransformPropTypeUtil);
-  const rowRef = (0, import_react39.useRef)(null);
+  const rowRef = (0, import_react37.useRef)(null);
   return /* @__PURE__ */ React70.createElement(import_ui61.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React70.createElement(PropProvider, { ...context }, /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control) => /* @__PURE__ */ React70.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/functions/rotate.tsx
 var React71 = __toESM(require("react"));
-var import_react40 = require("react");
+var import_react38 = require("react");
 var import_editor_props36 = require("@elementor/editor-props");
 var import_icons25 = require("@elementor/icons");
 var import_ui62 = require("@elementor/ui");
@@ -4537,13 +4536,13 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props36.rotateTransformPropTypeUtil);
-  const rowRef = (0, import_react40.useRef)(null);
+  const rowRef = (0, import_react38.useRef)(null);
   return /* @__PURE__ */ React71.createElement(import_ui62.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(PropProvider, { ...context }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control) => /* @__PURE__ */ React71.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: rotateUnits })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
 var React73 = __toESM(require("react"));
-var import_react41 = require("react");
+var import_react39 = require("react");
 var import_editor_props37 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
 var import_ui64 = require("@elementor/ui");
@@ -4576,13 +4575,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props37.scaleTransformPropTypeUtil);
-  const rowRef = (0, import_react41.useRef)(null);
+  const rowRef = (0, import_react39.useRef)(null);
   return /* @__PURE__ */ React73.createElement(import_ui64.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(PropProvider, { ...context }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control) => /* @__PURE__ */ React73.createElement(ScaleAxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 var React74 = __toESM(require("react"));
-var import_react42 = require("react");
+var import_react40 = require("react");
 var import_editor_props38 = require("@elementor/editor-props");
 var import_icons27 = require("@elementor/icons");
 var import_ui65 = require("@elementor/ui");
@@ -4602,12 +4601,12 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props38.skewTransformPropTypeUtil);
-  const rowRef = (0, import_react42.useRef)(null);
+  const rowRef = (0, import_react40.useRef)(null);
   return /* @__PURE__ */ React74.createElement(import_ui65.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control) => /* @__PURE__ */ React74.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: skewUnits })))));
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-var import_react43 = require("react");
+var import_react41 = require("react");
 var import_editor_props39 = require("@elementor/editor-props");
 var import_ui66 = require("@elementor/ui");
 var useTransformTabsHistory = ({
@@ -4620,6 +4619,7 @@ var useTransformTabsHistory = ({
   const { value: scaleValue, setValue: setScaleValue } = useBoundProp(import_editor_props39.scaleTransformPropTypeUtil);
   const { value: rotateValue, setValue: setRotateValue } = useBoundProp(import_editor_props39.rotateTransformPropTypeUtil);
   const { value: skewValue, setValue: setSkewValue } = useBoundProp(import_editor_props39.skewTransformPropTypeUtil);
+  const { openItemIndex, items: items2 } = useRepeaterContext();
   const getCurrentTransformType = () => {
     switch (true) {
       case !!scaleValue:
@@ -4633,7 +4633,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui66.useTabs)(getCurrentTransformType());
-  const valuesHistory = (0, import_react43.useRef)({
+  const valuesHistory = (0, import_react41.useRef)({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -4673,18 +4673,21 @@ var useTransformTabsHistory = ({
     }
     return getTabsProps().onChange(e, tabName);
   };
+  const isTabDisabled = (tabKey) => {
+    return !!items2.find(({ item: { $$type: key } }, pos) => tabKey === key && pos !== openItemIndex);
+  };
   return {
-    getTabProps,
+    getTabProps: (value) => ({
+      ...getTabProps(value),
+      disabled: isTabDisabled(value)
+    }),
     getTabPanelProps,
     getTabsProps: () => ({ ...getTabsProps(), onChange: onTabChange })
   };
 };
 
 // src/controls/transform-control/transform-content.tsx
-var TransformContent = ({ bind }) => {
-  return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React75.createElement(Content5, null));
-};
-var Content5 = () => {
+var TransformContent = () => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useTransformTabsHistory({
     move: initialTransformValue.value,
     scale: initialScaleValue.value,
@@ -4770,25 +4773,31 @@ var Label2 = ({ label, value }) => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var TransformRepeaterControl = createControl(() => {
-  const { propType, value: transformValues, setValue, disabled } = useBoundProp(import_editor_props40.transformPropTypeUtil);
+  const { propType, value: transformValues, setValue } = useBoundProp(import_editor_props40.transformPropTypeUtil);
+  const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
+  const getInitialValue = () => {
+    return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
+  };
+  const shouldDisableAddItem = !getInitialValue();
   return /* @__PURE__ */ React78.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React78.createElement(
-    Repeater,
+    UnstableRepeater,
     {
-      openOnAdd: true,
-      disabled,
-      values: transformValues ?? [],
-      setValues: setValue,
-      label: (0, import_i18n38.__)("Transform", "elementor"),
-      showDuplicate: false,
-      itemSettings: {
-        Icon: TransformIcon,
-        Label: TransformLabel,
-        Content: TransformContent,
-        initialValues: initialTransformValue
+      initial: getInitialValue() ?? initialTransformValue,
+      propTypeUtil: import_editor_props40.transformPropTypeUtil
+    },
+    /* @__PURE__ */ React78.createElement(Header, { label: (0, import_i18n38.__)("Transform", "elementor") }, /* @__PURE__ */ React78.createElement(
+      TooltipAddItemAction,
+      {
+        disabled: shouldDisableAddItem,
+        tooltipContent: ToolTip,
+        enableTooltip: shouldDisableAddItem
       }
-    }
+    )),
+    /* @__PURE__ */ React78.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React78.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React78.createElement(DisableItemAction, null), /* @__PURE__ */ React78.createElement(RemoveItemAction, null)),
+    /* @__PURE__ */ React78.createElement(EditItemPopover, null, /* @__PURE__ */ React78.createElement(TransformContent, null))
   ));
 });
+var ToolTip = /* @__PURE__ */ React78.createElement(React78.Fragment, null, /* @__PURE__ */ React78.createElement(import_icons29.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React78.createElement(import_ui69.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n38.__)("You can use each kind of transform only once per element.", "elementor")));
 
 // src/controls/transition-control/transition-repeater-control.tsx
 var React81 = __toESM(require("react"));
@@ -4797,14 +4806,14 @@ var import_i18n40 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
 var React79 = __toESM(require("react"));
-var import_react44 = require("react");
+var import_react42 = require("react");
 var import_editor_props41 = require("@elementor/editor-props");
-var import_ui69 = require("@elementor/ui");
+var import_ui70 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props41.selectionSizePropTypeUtil);
-    const rowRef = (0, import_react44.useRef)(null);
-    const currentSizeConfig = (0, import_react44.useMemo)(() => {
+    const rowRef = (0, import_react42.useRef)(null);
+    const currentSizeConfig = (0, import_react42.useMemo)(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -4815,7 +4824,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React79.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React79.createElement(import_ui69.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React79.createElement(import_ui69.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React79.createElement(import_ui69.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React79.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(import_ui69.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React79.createElement(import_ui69.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React79.createElement(
+    return /* @__PURE__ */ React79.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React79.createElement(import_ui70.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React79.createElement(import_ui70.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React79.createElement(import_ui70.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React79.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(import_ui70.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React79.createElement(import_ui70.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React79.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -4852,10 +4861,10 @@ var transitionsItemsList = transitionProperties.map((category) => ({
 
 // src/controls/transition-control/transition-selector.tsx
 var React80 = __toESM(require("react"));
-var import_react45 = require("react");
+var import_react43 = require("react");
 var import_editor_props42 = require("@elementor/editor-props");
-var import_icons29 = require("@elementor/icons");
-var import_ui70 = require("@elementor/ui");
+var import_icons30 = require("@elementor/icons");
+var import_ui71 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
@@ -4883,8 +4892,8 @@ var TransitionSelector = ({ recentlyUsedList }) => {
     value: { value: transitionValue },
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = (0, import_react45.useRef)(null);
-  const popoverState = (0, import_ui70.usePopupState)({ variant: "popover" });
+  const defaultRef = (0, import_react43.useRef)(null);
+  const popoverState = (0, import_ui71.usePopupState)({ variant: "popover" });
   const getItemList = () => {
     const recentItems = recentlyUsedList.map((item) => findByValue(item)).filter((item) => !!item);
     const filteredItems = transitionsItemsList.map((category) => {
@@ -4922,21 +4931,21 @@ var TransitionSelector = ({ recentlyUsedList }) => {
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React80.createElement(import_ui70.Box, { ref: defaultRef }, /* @__PURE__ */ React80.createElement(
-    import_ui70.UnstableTag,
+  return /* @__PURE__ */ React80.createElement(import_ui71.Box, { ref: defaultRef }, /* @__PURE__ */ React80.createElement(
+    import_ui71.UnstableTag,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React80.createElement(import_icons29.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui70.bindTrigger)(popoverState),
+      endIcon: /* @__PURE__ */ React80.createElement(import_icons30.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui71.bindTrigger)(popoverState),
       fullWidth: true
     }
   ), /* @__PURE__ */ React80.createElement(
-    import_ui70.Popover,
+    import_ui71.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
-      ...(0, import_ui70.bindPopover)(popoverState),
+      ...(0, import_ui71.bindPopover)(popoverState),
       anchorReference: "anchorPosition",
       anchorPosition: getAnchorPosition(),
       anchorOrigin: { vertical: "top", horizontal: "right" },
@@ -4951,7 +4960,7 @@ var TransitionSelector = ({ recentlyUsedList }) => {
         onClose: popoverState.close,
         sectionWidth: 268,
         title: (0, import_i18n39.__)("Transition Property", "elementor"),
-        icon: import_icons29.VariationsIcon
+        icon: import_icons30.VariationsIcon
       }
     )
   ));
@@ -5010,31 +5019,15 @@ var TransitionRepeaterControl = createControl((props) => {
   );
 });
 
-// src/controls/unstable-transform-control/unstable-transform-repeater-control.tsx
-var React82 = __toESM(require("react"));
-var import_editor_props44 = require("@elementor/editor-props");
-var import_i18n41 = require("@wordpress/i18n");
-var UnstableTransformRepeaterControl = createControl(() => {
-  const { propType, value: transformValues, setValue } = useBoundProp(import_editor_props44.transformPropTypeUtil);
-  return /* @__PURE__ */ React82.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React82.createElement(UnstableRepeater, { initial: initialTransformValue, propTypeUtil: import_editor_props44.transformPropTypeUtil }, /* @__PURE__ */ React82.createElement(Header, { label: (0, import_i18n41.__)("Transform", "elementor") }, /* @__PURE__ */ React82.createElement(AddItemAction, null)), /* @__PURE__ */ React82.createElement(
-    ItemsContainer,
-    {
-      itemTemplate: /* @__PURE__ */ React82.createElement(Item, { Icon: TransformIcon, Label: TransformLabel, Content: TransformContent })
-    },
-    /* @__PURE__ */ React82.createElement(DisableItemAction, null),
-    /* @__PURE__ */ React82.createElement(RemoveItemAction, null)
-  )));
-});
-
 // src/components/css-code-editor/css-editor.tsx
-var React84 = __toESM(require("react"));
+var React83 = __toESM(require("react"));
 var import_editor_responsive2 = require("@elementor/editor-responsive");
-var import_ui72 = require("@elementor/ui");
-var import_react46 = require("@monaco-editor/react");
+var import_ui73 = require("@elementor/ui");
+var import_react44 = require("@monaco-editor/react");
 
 // src/components/css-code-editor/css-editor.styles.ts
-var import_ui71 = require("@elementor/ui");
-var EditorWrapper = (0, import_ui71.styled)(import_ui71.Box)`
+var import_ui72 = require("@elementor/ui");
+var EditorWrapper = (0, import_ui72.styled)(import_ui72.Box)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;
@@ -5045,7 +5038,7 @@ var EditorWrapper = (0, import_ui71.styled)(import_ui71.Box)`
 		z-index: 99999999 !important;
 	}
 `;
-var ResizeHandle = (0, import_ui71.styled)(import_ui71.Button)`
+var ResizeHandle = (0, import_ui72.styled)(import_ui72.Button)`
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -5078,25 +5071,25 @@ var ResizeHandle = (0, import_ui71.styled)(import_ui71.Button)`
 `;
 
 // src/components/css-code-editor/css-validation.ts
-var import_i18n42 = require("@wordpress/i18n");
+var import_i18n41 = require("@wordpress/i18n");
 var forbiddenPatterns = [
   {
     pattern: ":hover",
-    message: (0, import_i18n42.__)(
+    message: (0, import_i18n41.__)(
       "The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
       "elementor"
     )
   },
   {
     pattern: ":active",
-    message: (0, import_i18n42.__)(
+    message: (0, import_i18n41.__)(
       "The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
       "elementor"
     )
   },
   {
     pattern: "@media",
-    message: (0, import_i18n42.__)(
+    message: (0, import_i18n41.__)(
       "The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.",
       "elementor"
     )
@@ -5135,9 +5128,9 @@ function validate(editor, monaco) {
 }
 
 // src/components/css-code-editor/resize-handle.tsx
-var React83 = __toESM(require("react"));
+var React82 = __toESM(require("react"));
 var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
-  const handleResizeMove = React83.useCallback(
+  const handleResizeMove = React82.useCallback(
     (e) => {
       const container = containerRef.current;
       if (!container) {
@@ -5150,11 +5143,11 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [containerRef, onResize, onHeightChange]
   );
-  const handleResizeEnd = React83.useCallback(() => {
+  const handleResizeEnd = React82.useCallback(() => {
     document.removeEventListener("mousemove", handleResizeMove);
     document.removeEventListener("mouseup", handleResizeEnd);
   }, [handleResizeMove]);
-  const handleResizeStart = React83.useCallback(
+  const handleResizeStart = React82.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5163,13 +5156,13 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [handleResizeMove, handleResizeEnd]
   );
-  React83.useEffect(() => {
+  React82.useEffect(() => {
     return () => {
       document.removeEventListener("mousemove", handleResizeMove);
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [handleResizeMove, handleResizeEnd]);
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React82.createElement(
     ResizeHandle,
     {
       onMouseDown: handleResizeStart,
@@ -5252,22 +5245,22 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
   };
 };
 var CssEditor = ({ value, onChange }) => {
-  const theme = (0, import_ui72.useTheme)();
-  const containerRef = React84.useRef(null);
-  const editorRef = React84.useRef(null);
-  const monacoRef = React84.useRef(null);
-  const debounceTimer = React84.useRef(null);
+  const theme = (0, import_ui73.useTheme)();
+  const containerRef = React83.useRef(null);
+  const editorRef = React83.useRef(null);
+  const monacoRef = React83.useRef(null);
+  const debounceTimer = React83.useRef(null);
   const activeBreakpoint = (0, import_editor_responsive2.useActiveBreakpoint)();
-  const handleResize = React84.useCallback(() => {
+  const handleResize = React83.useCallback(() => {
     editorRef.current?.layout();
   }, []);
-  const handleHeightChange = React84.useCallback((height) => {
+  const handleHeightChange = React83.useCallback((height) => {
     if (containerRef.current) {
       containerRef.current.style.height = `${height}px`;
     }
   }, []);
   const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, debounceTimer, onChange);
-  React84.useEffect(() => {
+  React83.useEffect(() => {
     const timerRef = debounceTimer;
     return () => {
       const timer = timerRef.current;
@@ -5276,8 +5269,8 @@ var CssEditor = ({ value, onChange }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React84.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React84.createElement(
-    import_react46.Editor,
+  return /* @__PURE__ */ React83.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React83.createElement(
+    import_react44.Editor,
     {
       key: activeBreakpoint,
       height: "100%",
@@ -5297,7 +5290,7 @@ var CssEditor = ({ value, onChange }) => {
         fixedOverflowWidgets: true
       }
     }
-  ), /* @__PURE__ */ React84.createElement(
+  ), /* @__PURE__ */ React83.createElement(
     ResizeHandleComponent,
     {
       onResize: handleResize,
@@ -5344,7 +5337,6 @@ var CssEditor = ({ value, onChange }) => {
   ToggleControl,
   TransformRepeaterControl,
   TransitionRepeaterControl,
-  UnstableTransformRepeaterControl,
   UrlControl,
   createControlReplacementsRegistry,
   enqueueFont,