@elementor/editor-controls 3.32.0-29 → 3.32.0-31

package/dist/index.mjs

@@ -1906,7 +1906,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,
@@ -1924,7 +1924,7 @@ var ControlToggleButtonGroup = ({
             fullWidth,
             isPlaceholder
           },
-          /* @__PURE__ */ React32.createElement(Content6, { size })
+          /* @__PURE__ */ React32.createElement(Content4, { size })
         )
       );
     }),
@@ -3308,19 +3308,20 @@ import {
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box9, CardMedia as CardMedia3, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box10, CardMedia as CardMedia3, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
 import { __ as __28 } from "@wordpress/i18n";
 
-// src/components/unstable-repeater/actions/add-item-action.tsx
+// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
 import * as React50 from "react";
 import { PlusIcon as PlusIcon3 } from "@elementor/icons";
-import { IconButton as IconButton4, Tooltip as Tooltip6 } from "@elementor/ui";
+import { Box as Box8, IconButton as IconButton4, Infotip as Infotip2 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/unstable-repeater/context/repeater-context.tsx
 import * as React49 from "react";
 import { createContext as createContext7, useState as useState12 } from "react";
+import { usePopupState as usePopupState6 } from "@elementor/ui";
 var RepeaterContext = createContext7(null);
 var EMPTY_OPEN_ITEM2 = -1;
 var useRepeaterContext = () => {
@@ -3328,28 +3329,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({
@@ -3358,52 +3343,51 @@ var RepeaterContextProvider = ({
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [openItem, setOpenItem] = useState12(EMPTY_OPEN_ITEM2);
-  const [uniqueKeys, setUniqueKeys] = useState12(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 = useState12(
+    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] = useState12(EMPTY_OPEN_ITEM2);
+  const [rowRef, setRowRef] = useState12(null);
+  const isOpen = openItemIndex !== EMPTY_OPEN_ITEM2;
+  const popoverState = usePopupState6({ 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
@@ -3413,83 +3397,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(
+  const onClick = (ev) => addItem(ev, { index: newItemIndex });
+  return /* @__PURE__ */ React50.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React50.createElement(Box8, { sx: { ml: "auto" } }, /* @__PURE__ */ React50.createElement(
     IconButton4,
     {
       size: SIZE4,
-      sx: { ml: "auto" },
       disabled,
       onClick,
       "aria-label": __19("Add item", "elementor")
     },
     /* @__PURE__ */ React50.createElement(PlusIcon3, { fontSize: SIZE4 })
-  ));
+  )));
 };
 var ConditionalToolTip = ({
   children,
-  content,
-  shouldShowTooltip
-}) => {
-  return shouldShowTooltip ? /* @__PURE__ */ React50.createElement(Tooltip6, { title: content }, children) : children;
-};
+  enable,
+  content
+}) => enable && content ? /* @__PURE__ */ React50.createElement(
+  Infotip2,
+  {
+    placement: "right",
+    content: /* @__PURE__ */ React50.createElement(
+      Box8,
+      {
+        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
 import * as React51 from "react";
 import { Stack as Stack14, Typography as Typography5 } from "@elementor/ui";
 var Header = ({ label, children }) => {
   const { value } = useBoundProp();
-  return /* @__PURE__ */ React51.createElement(Stack14, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React51.createElement(Typography5, { 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(Stack14, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React51.createElement(Typography5, { 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
 import * as React52 from "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
-import * as React57 from "react";
-import { useState as useState14 } from "react";
+import * as React56 from "react";
 import { bindTrigger as bindTrigger4, UnstableTag as UnstableTag3 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
 
 // src/components/unstable-repeater/actions/disable-item-action.tsx
 import * as React53 from "react";
 import { EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2 } from "@elementor/icons";
-import { IconButton as IconButton5, Tooltip as Tooltip7 } from "@elementor/ui";
+import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
 var SIZE5 = "tiny";
 var DisableItemAction = ({ index = -1 }) => {
@@ -3497,23 +3494,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 ? __20("Show", "elementor") : __20("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(Tooltip7, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React53.createElement(IconButton5, { size: SIZE5, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React53.createElement(EyeOffIcon2, { fontSize: SIZE5 }) : /* @__PURE__ */ React53.createElement(EyeIcon2, { fontSize: SIZE5 })));
+  return /* @__PURE__ */ React53.createElement(Tooltip6, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React53.createElement(IconButton5, { size: SIZE5, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React53.createElement(EyeOffIcon2, { fontSize: SIZE5 }) : /* @__PURE__ */ React53.createElement(EyeIcon2, { fontSize: SIZE5 })));
 };
 
 // src/components/unstable-repeater/actions/duplicate-item-action.tsx
 import * as React54 from "react";
 import { CopyIcon as CopyIcon2 } from "@elementor/icons";
-import { IconButton as IconButton6, Tooltip as Tooltip8 } from "@elementor/ui";
+import { IconButton as IconButton6, Tooltip as Tooltip7 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
 var DuplicateItemAction = ({ index = -1 }) => {
@@ -3522,17 +3519,17 @@ var DuplicateItemAction = ({ index = -1 }) => {
     return null;
   }
   const duplicateLabel = __21("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(Tooltip8, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React54.createElement(IconButton6, { size: SIZE6, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React54.createElement(CopyIcon2, { fontSize: SIZE6 })));
+  return /* @__PURE__ */ React54.createElement(Tooltip7, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React54.createElement(IconButton6, { size: SIZE6, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React54.createElement(CopyIcon2, { fontSize: SIZE6 })));
 };
 
 // src/components/unstable-repeater/actions/remove-item-action.tsx
 import * as React55 from "react";
 import { XIcon as XIcon3 } from "@elementor/icons";
-import { IconButton as IconButton7, Tooltip as Tooltip9 } from "@elementor/ui";
+import { IconButton as IconButton7, Tooltip as Tooltip8 } from "@elementor/ui";
 import { __ as __22 } from "@wordpress/i18n";
 var SIZE7 = "tiny";
 var RemoveItemAction = ({ index = -1 }) => {
@@ -3542,80 +3539,39 @@ var RemoveItemAction = ({ index = -1 }) => {
   }
   const removeLabel = __22("Remove", "elementor");
   const onClick = () => removeItem(index);
-  return /* @__PURE__ */ React55.createElement(Tooltip9, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React55.createElement(IconButton7, { size: SIZE7, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React55.createElement(XIcon3, { fontSize: SIZE7 })));
-};
-
-// src/components/unstable-repeater/items/edit-item-popover.tsx
-import * as React56 from "react";
-import { Box as Box8, Popover as Popover5 } from "@elementor/ui";
-var EditItemPopover = ({ children, anchorRef, setAnchorEl, popoverProps }) => {
-  return /* @__PURE__ */ React56.createElement(
-    Popover5,
-    {
-      disablePortal: true,
-      slotProps: {
-        paper: {
-          ref: setAnchorEl,
-          sx: { mt: 0.5, width: anchorRef?.offsetWidth }
-        }
-      },
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      anchorEl: anchorRef,
-      ...popoverProps
-    },
-    /* @__PURE__ */ React56.createElement(Box8, null, children)
-  );
-};
-
-// src/components/unstable-repeater/items/use-popover.tsx
-import { useEffect as useEffect8, useState as useState13 } from "react";
-import { bindPopover as bindPopover5, usePopupState as usePopupState6 } from "@elementor/ui";
-var usePopover2 = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState13(null);
-  const popoverState = usePopupState6({ variant: "popover" });
-  const popoverProps = bindPopover5(popoverState);
-  useEffect8(() => {
-    if (openOnMount && ref) {
-      popoverState.open(ref);
-      onOpen?.();
-    }
-  }, [ref]);
-  return {
-    popoverState,
-    ref,
-    setRef,
-    popoverProps
-  };
+  return /* @__PURE__ */ React55.createElement(Tooltip8, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React55.createElement(IconButton7, { size: SIZE7, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React55.createElement(XIcon3, { 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] = useState14(null);
-  const { popoverState, popoverProps, ref, setRef } = usePopover2(openOnMount, () => {
-  });
-  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
+  const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
+  const triggerProps = bindTrigger4(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(
     UnstableTag3,
     {
       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": __23("Open item", "elementor"),
-      ...bindTrigger4(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],
@@ -3625,17 +3581,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
 import * as React58 from "react";
+
+// src/components/unstable-repeater/items/edit-item-popover.tsx
+import * as React57 from "react";
+import { bindPopover as bindPopover5, Box as Box9, Popover as Popover5 } from "@elementor/ui";
+var EditItemPopover = ({ children }) => {
+  const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
+  const popoverProps = bindPopover5(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(
+    Popover5,
+    {
+      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(Box9, 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
@@ -4008,19 +3999,26 @@ var backgroundResolutionOptions = [
   { label: __28("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: backgroundValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React64.createElement(PropProvider, { propType, value: backgroundValues, setValue }, /* @__PURE__ */ React64.createElement(UnstableRepeater, { initial: getInitialBackgroundOverlay(), propTypeUtil: backgroundOverlayPropTypeUtil }, /* @__PURE__ */ React64.createElement(Header, { label: __28("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(backgroundOverlayPropTypeUtil);
+  return /* @__PURE__ */ React64.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React64.createElement(
+    UnstableRepeater,
+    {
+      initial: getInitialBackgroundOverlay(),
+      propTypeUtil: backgroundOverlayPropTypeUtil
+    },
+    /* @__PURE__ */ React64.createElement(Header, { label: __28("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
   });
-  return /* @__PURE__ */ React64.createElement(Box9, { sx: { width: "100%" } }, /* @__PURE__ */ React64.createElement(Box9, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React64.createElement(
+  const { rowRef } = useRepeaterContext();
+  return /* @__PURE__ */ React64.createElement(Box10, { sx: { width: "100%" } }, /* @__PURE__ */ React64.createElement(Box10, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React64.createElement(
     Tabs,
     {
       size: "small",
@@ -4031,7 +4029,7 @@ var Content3 = ({ anchorEl }) => {
     /* @__PURE__ */ React64.createElement(Tab, { label: __28("Image", "elementor"), ...getTabProps("image") }),
     /* @__PURE__ */ React64.createElement(Tab, { label: __28("Gradient", "elementor"), ...getTabProps("gradient") }),
     /* @__PURE__ */ React64.createElement(Tab, { label: __28("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React64.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ColorOverlayContent, { anchorEl }))));
+  )), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React64.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React64.createElement(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,7 +4150,7 @@ var BackgroundControl = createControl(() => {
 import * as React66 from "react";
 import { useMemo as useMemo5 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
-import { Box as Box10 } from "@elementor/ui";
+import { Box as Box11 } from "@elementor/ui";
 
 // src/hooks/use-repeatable-control-context.ts
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -4216,10 +4214,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 })));
 };
@@ -4283,7 +4281,7 @@ var ItemLabel4 = ({ value }) => {
   const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const color = showPlaceholder ? "text.tertiary" : "text.primary";
-  return /* @__PURE__ */ React66.createElement(Box10, { component: "span", color }, label);
+  return /* @__PURE__ */ React66.createElement(Box11, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -4292,7 +4290,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React67 from "react";
-import { useMemo as useMemo6, useState as useState15 } from "react";
+import { useMemo as useMemo6, useState as useState13 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -4302,9 +4300,9 @@ import { FormHelperText, FormLabel as FormLabel3, Grid as Grid17 } from "@elemen
 import { __ as __30 } from "@wordpress/i18n";
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState15("");
-  const [valueError, setValueError] = useState15("");
-  const [sessionState, setSessionState] = useState15({
+  const [keyError, setKeyError] = useState13("");
+  const [valueError, setValueError] = useState13("");
+  const [sessionState, setSessionState] = useState13({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
@@ -4420,22 +4418,11 @@ var PositionControl = () => {
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React78 from "react";
 import { transformPropTypeUtil } from "@elementor/editor-props";
+import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
+import { Typography as Typography6 } from "@elementor/ui";
 import { __ as __38 } from "@wordpress/i18n";
 
-// src/controls/transform-control/transform-content.tsx
-import * as React75 from "react";
-import { Box as Box11, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
-import { __ as __36 } from "@wordpress/i18n";
-
-// src/controls/transform-control/functions/move.tsx
-import * as React70 from "react";
-import { useRef as useRef14 } from "react";
-import { moveTransformPropTypeUtil } from "@elementor/editor-props";
-import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
-import { Grid as Grid20 } from "@elementor/ui";
-import { __ as __32 } from "@wordpress/i18n";
-
-// src/controls/transform-control/types.ts
+// src/controls/transform-control/initial-values.ts
 import {
   numberPropTypeUtil as numberPropTypeUtil4,
   rotateTransformPropTypeUtil,
@@ -4486,6 +4473,19 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
   y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
 });
 
+// src/controls/transform-control/transform-content.tsx
+import * as React75 from "react";
+import { Box as Box12, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { __ as __36 } from "@wordpress/i18n";
+
+// src/controls/transform-control/functions/move.tsx
+import * as React70 from "react";
+import { useRef as useRef14 } from "react";
+import { moveTransformPropTypeUtil } from "@elementor/editor-props";
+import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
+import { Grid as Grid20 } from "@elementor/ui";
+import { __ as __32 } from "@wordpress/i18n";
+
 // src/controls/transform-control/functions/axis-row.tsx
 import * as React69 from "react";
 import { Grid as Grid19 } from "@elementor/ui";
@@ -4632,6 +4632,7 @@ var useTransformTabsHistory = ({
   const { value: scaleValue, setValue: setScaleValue } = useBoundProp(scaleTransformPropTypeUtil3);
   const { value: rotateValue, setValue: setRotateValue } = useBoundProp(rotateTransformPropTypeUtil3);
   const { value: skewValue, setValue: setSkewValue } = useBoundProp(skewTransformPropTypeUtil3);
+  const { openItemIndex, items: items2 } = useRepeaterContext();
   const getCurrentTransformType = () => {
     switch (true) {
       case !!scaleValue:
@@ -4685,25 +4686,28 @@ 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,
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React75.createElement(PopoverContent, null, /* @__PURE__ */ React75.createElement(Box11, { sx: { width: "100%" } }, /* @__PURE__ */ React75.createElement(Box11, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React75.createElement(PopoverContent, null, /* @__PURE__ */ React75.createElement(Box12, { sx: { width: "100%" } }, /* @__PURE__ */ React75.createElement(Box12, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React75.createElement(
     Tabs2,
     {
       size: "small",
@@ -4743,7 +4747,7 @@ var TransformIcon = ({ value }) => {
 
 // src/controls/transform-control/transform-label.tsx
 import * as React77 from "react";
-import { Box as Box12 } from "@elementor/ui";
+import { Box as Box13 } from "@elementor/ui";
 import { __ as __37 } from "@wordpress/i18n";
 var transformMoveValue = (value) => Object.values(value).map((axis) => {
   const size = axis?.value?.size ?? defaultValues.move.size;
@@ -4777,30 +4781,36 @@ var TransformLabel = (props) => {
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React77.createElement(Box12, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React77.createElement(Box13, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var TransformRepeaterControl = createControl(() => {
-  const { propType, value: transformValues, setValue, disabled } = useBoundProp(transformPropTypeUtil);
+  const { propType, value: transformValues, setValue } = useBoundProp(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: __38("Transform", "elementor"),
-      showDuplicate: false,
-      itemSettings: {
-        Icon: TransformIcon,
-        Label: TransformLabel,
-        Content: TransformContent,
-        initialValues: initialTransformValue
+      initial: getInitialValue() ?? initialTransformValue,
+      propTypeUtil: transformPropTypeUtil
+    },
+    /* @__PURE__ */ React78.createElement(Header, { label: __38("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(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }), /* @__PURE__ */ React78.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __38("You can use each kind of transform only once per element.", "elementor")));
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React81 from "react";
@@ -4867,7 +4877,7 @@ import * as React80 from "react";
 import { useRef as useRef20 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box13, Popover as Popover6, UnstableTag as UnstableTag4, usePopupState as usePopupState7 } from "@elementor/ui";
+import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box14, Popover as Popover6, UnstableTag as UnstableTag4, usePopupState as usePopupState7 } from "@elementor/ui";
 import { __ as __39 } from "@wordpress/i18n";
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
@@ -4934,7 +4944,7 @@ var TransitionSelector = ({ recentlyUsedList }) => {
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React80.createElement(Box13, { ref: defaultRef }, /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React80.createElement(Box14, { ref: defaultRef }, /* @__PURE__ */ React80.createElement(
     UnstableTag4,
     {
       variant: "outlined",
@@ -5022,31 +5032,15 @@ var TransitionRepeaterControl = createControl((props) => {
   );
 });
 
-// src/controls/unstable-transform-control/unstable-transform-repeater-control.tsx
-import * as React82 from "react";
-import { transformPropTypeUtil as transformPropTypeUtil2 } from "@elementor/editor-props";
-import { __ as __41 } from "@wordpress/i18n";
-var UnstableTransformRepeaterControl = createControl(() => {
-  const { propType, value: transformValues, setValue } = useBoundProp(transformPropTypeUtil2);
-  return /* @__PURE__ */ React82.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React82.createElement(UnstableRepeater, { initial: initialTransformValue, propTypeUtil: transformPropTypeUtil2 }, /* @__PURE__ */ React82.createElement(Header, { label: __41("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
-import * as React84 from "react";
+import * as React83 from "react";
 import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
 import { useTheme as useTheme2 } from "@elementor/ui";
 import { Editor } from "@monaco-editor/react";
 
 // src/components/css-code-editor/css-editor.styles.ts
-import { Box as Box14, Button as Button5, styled as styled7 } from "@elementor/ui";
-var EditorWrapper = styled7(Box14)`
+import { Box as Box15, Button as Button5, styled as styled7 } from "@elementor/ui";
+var EditorWrapper = styled7(Box15)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;
@@ -5090,25 +5084,25 @@ var ResizeHandle = styled7(Button5)`
 `;
 
 // src/components/css-code-editor/css-validation.ts
-import { __ as __42 } from "@wordpress/i18n";
+import { __ as __41 } from "@wordpress/i18n";
 var forbiddenPatterns = [
   {
     pattern: ":hover",
-    message: __42(
+    message: __41(
       "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: __42(
+    message: __41(
       "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: __42(
+    message: __41(
       "The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.",
       "elementor"
     )
@@ -5147,9 +5141,9 @@ function validate(editor, monaco) {
 }
 
 // src/components/css-code-editor/resize-handle.tsx
-import * as React83 from "react";
+import * as React82 from "react";
 var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
-  const handleResizeMove = React83.useCallback(
+  const handleResizeMove = React82.useCallback(
     (e) => {
       const container = containerRef.current;
       if (!container) {
@@ -5162,11 +5156,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();
@@ -5175,13 +5169,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,
@@ -5265,21 +5259,21 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
 };
 var CssEditor = ({ value, onChange }) => {
   const theme = useTheme2();
-  const containerRef = React84.useRef(null);
-  const editorRef = React84.useRef(null);
-  const monacoRef = React84.useRef(null);
-  const debounceTimer = React84.useRef(null);
+  const containerRef = React83.useRef(null);
+  const editorRef = React83.useRef(null);
+  const monacoRef = React83.useRef(null);
+  const debounceTimer = React83.useRef(null);
   const activeBreakpoint = useActiveBreakpoint2();
-  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;
@@ -5288,7 +5282,7 @@ var CssEditor = ({ value, onChange }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React84.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React83.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React83.createElement(
     Editor,
     {
       key: activeBreakpoint,
@@ -5309,7 +5303,7 @@ var CssEditor = ({ value, onChange }) => {
         fixedOverflowWidgets: true
       }
     }
-  ), /* @__PURE__ */ React84.createElement(
+  ), /* @__PURE__ */ React83.createElement(
     ResizeHandleComponent,
     {
       onResize: handleResize,
@@ -5355,7 +5349,6 @@ export {
   ToggleControl,
   TransformRepeaterControl,
   TransitionRepeaterControl,
-  UnstableTransformRepeaterControl,
   UrlControl,
   createControlReplacementsRegistry,
   enqueueFont,