@elementor/editor-controls 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -722,9 +722,10 @@ var useSyncExternalState = ({
 var DEFAULT_UNIT = "px";
 var DEFAULT_SIZE = NaN;
 var SizeControl = createControl((props) => {
+  const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
   const { units: units2 = [...defaultUnits], placeholder, startIcon, anchorRef } = props;
   const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp(sizePropTypeUtil);
-  const [internalState, setInternalState] = useState3(createStateFromSizeProp(sizeValue));
+  const [internalState, setInternalState] = useState3(createStateFromSizeProp(sizeValue, defaultUnit));
   const activeBreakpoint = useActiveBreakpoint();
   const extendedOptions = useSizeExtendedOptions(props.extendedOptions || [], props.disableCustom ?? false);
   const popupState = usePopupState2({ variant: "popover" });
@@ -741,7 +742,7 @@ var SizeControl = createControl((props) => {
       return !!newState?.numeric || newState?.numeric === 0;
     },
     fallback: (newState) => ({
-      unit: newState?.unit ?? DEFAULT_UNIT,
+      unit: newState?.unit ?? props.defaultUnit ?? DEFAULT_UNIT,
       numeric: newState?.numeric ?? DEFAULT_SIZE,
       custom: newState?.custom ?? ""
     })
@@ -776,7 +777,7 @@ var SizeControl = createControl((props) => {
     }
   };
   useEffect2(() => {
-    const newState = createStateFromSizeProp(sizeValue);
+    const newState = createStateFromSizeProp(sizeValue, defaultUnit);
     const currentUnit = isUnitExtendedOption(state.unit) ? "custom" : "numeric";
     const mergedStates = { ...state, [currentUnit]: newState[currentUnit] };
     if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
@@ -789,7 +790,7 @@ var SizeControl = createControl((props) => {
     setState(newState);
   }, [sizeValue]);
   useEffect2(() => {
-    const newState = createStateFromSizeProp(sizeValue);
+    const newState = createStateFromSizeProp(sizeValue, defaultUnit);
     if (activeBreakpoint && !areStatesEqual(newState, state)) {
       setState(newState);
     }
@@ -827,8 +828,8 @@ function formatSize(size, unit) {
   }
   return size || size === 0 ? Number(size) : NaN;
 }
-function createStateFromSizeProp(sizeValue) {
-  const unit = sizeValue?.unit ?? DEFAULT_UNIT;
+function createStateFromSizeProp(sizeValue, defaultUnit) {
+  const unit = sizeValue?.unit ?? defaultUnit;
   const size = sizeValue?.size ?? "";
   return {
     numeric: !isUnitExtendedOption(unit) && !isNaN(Number(size)) && (size || size === 0) ? Number(size) : DEFAULT_SIZE,
@@ -1076,7 +1077,9 @@ var Repeater = ({
   openOnAdd = false,
   addToBottom = false,
   values: repeaterValues = [],
-  setValues: setRepeaterValues
+  setValues: setRepeaterValues,
+  showDuplicate = true,
+  showToggle = true
 }) => {
   const [openItem, setOpenItem] = useState4(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
@@ -1180,7 +1183,9 @@ var Repeater = ({
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
         openOnMount: openOnAdd && openItem === key,
-        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM)
+        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM),
+        showDuplicate,
+        showToggle
       },
       (props) => /* @__PURE__ */ React25.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
@@ -1196,6 +1201,8 @@ var RepeaterItem = ({
   toggleDisableItem,
   openOnMount,
   onOpen,
+  showDuplicate,
+  showToggle,
   disabled
 }) => {
   const [anchorEl, setAnchorEl] = useState4(null);
@@ -1215,7 +1222,7 @@ var RepeaterItem = ({
       "aria-label": __4("Open item", "elementor"),
       ...bindTrigger2(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React25.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React25.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React25.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React25.createElement(XIcon, { fontSize: SIZE }))))
+      actions: /* @__PURE__ */ React25.createElement(React25.Fragment, null, showDuplicate && /* @__PURE__ */ React25.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React25.createElement(CopyIcon, { fontSize: SIZE }))), showToggle && /* @__PURE__ */ React25.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React25.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React25.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React25.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React25.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React25.createElement(XIcon, { fontSize: SIZE }))))
     }
   ), /* @__PURE__ */ React25.createElement(
     Popover2,
@@ -1422,14 +1429,14 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => /* @__PURE__ */ React28.createElement(
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content4, showTooltip }) => /* @__PURE__ */ React28.createElement(
       ConditionalTooltip,
       {
         key: buttonValue,
         label,
         showTooltip: showTooltip || false
       },
-      /* @__PURE__ */ React28.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React28.createElement(Content3, { size }))
+      /* @__PURE__ */ React28.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React28.createElement(Content4, { size }))
     )),
     menuItems.length && exclusive && /* @__PURE__ */ React28.createElement(
       SplitButtonGroup,
@@ -1880,24 +1887,12 @@ import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag as UnstableTag2, usePopupState as usePopupState5 } from "@elementor/ui";
 
 // src/components/font-family-selector.tsx
-import { useEffect as useEffect5, useRef as useRef7, useState as useState6 } from "react";
 import * as React34 from "react";
-import { PopoverHeader } from "@elementor/editor-ui";
-import { SearchIcon, TextIcon } from "@elementor/icons";
-import {
-  Box as Box3,
-  Divider as Divider2,
-  InputAdornment as InputAdornment3,
-  Link,
-  MenuList,
-  MenuSubheader,
-  Stack as Stack9,
-  styled as styled4,
-  TextField as TextField6,
-  Typography as Typography3
-} from "@elementor/ui";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { PopoverHeader, PopoverMenuList, PopoverScrollableContent, PopoverSearch } from "@elementor/editor-ui";
+import { TextIcon } from "@elementor/icons";
+import { Box as Box3, Divider as Divider2, Link, Stack as Stack9, Typography as Typography3 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import { __ as __8 } from "@wordpress/i18n";
 
 // src/controls/font-family-control/enqueue-font.tsx
@@ -1932,8 +1927,8 @@ var FontFamilySelector = ({
 }) => {
   const [searchValue, setSearchValue] = useState6("");
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
-  const handleSearch = (event) => {
-    setSearchValue(event.target.value);
+  const handleSearch = (value) => {
+    setSearchValue(value);
   };
   const handleClose = () => {
     setSearchValue("");
@@ -1946,20 +1941,14 @@ var FontFamilySelector = ({
       onClose: handleClose,
       icon: /* @__PURE__ */ React34.createElement(TextIcon, { fontSize: SIZE2 })
     }
-  ), /* @__PURE__ */ React34.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React34.createElement(
-    TextField6,
+  ), /* @__PURE__ */ React34.createElement(
+    PopoverSearch,
     {
-      autoFocus: true,
-      fullWidth: true,
-      size: SIZE2,
       value: searchValue,
-      placeholder: __8("Search", "elementor"),
-      onChange: handleSearch,
-      InputProps: {
-        startAdornment: /* @__PURE__ */ React34.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React34.createElement(SearchIcon, { fontSize: SIZE2 }))
-      }
+      onSearch: handleSearch,
+      placeholder: __8("Search", "elementor")
     }
-  )), /* @__PURE__ */ React34.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React34.createElement(
+  ), /* @__PURE__ */ React34.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React34.createElement(
     FontList,
     {
       fontListItems: filteredFontFamilies,
@@ -1967,7 +1956,7 @@ var FontFamilySelector = ({
       handleClose,
       fontFamily
     }
-  ) : /* @__PURE__ */ React34.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React34.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React34.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React34.createElement(Box3, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React34.createElement(
+  ) : /* @__PURE__ */ React34.createElement(PopoverScrollableContent, null, /* @__PURE__ */ React34.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React34.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React34.createElement(Box3, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React34.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React34.createElement(
     Typography3,
     {
       variant: "subtitle2",
@@ -1992,10 +1981,7 @@ var FontFamilySelector = ({
     __8("Clear & try again", "elementor")
   )))));
 };
-var LIST_ITEM_HEIGHT = 36;
-var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = useRef7(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -2005,120 +1991,19 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
       }
     });
   }, 100);
-  const virtualizer = useVirtualizer({
-    count: fontListItems.length,
-    getScrollElement: () => containerRef.current,
-    estimateSize: () => LIST_ITEM_HEIGHT,
-    overscan: LIST_ITEMS_BUFFER,
-    onChange: debouncedVirtualizeChange
-  });
-  useEffect5(
-    () => {
-      virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
-    },
-    // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [fontFamily]
-  );
   return /* @__PURE__ */ React34.createElement(
-    Box3,
+    PopoverMenuList,
     {
-      ref: containerRef,
-      sx: {
-        overflowY: "auto",
-        height: 260,
-        width: 220
-      }
-    },
-    /* @__PURE__ */ React34.createElement(
-      StyledMenuList,
-      {
-        role: "listbox",
-        style: {
-          height: `${virtualizer.getTotalSize()}px`
-        },
-        "data-testid": "font-list"
-      },
-      virtualizer.getVirtualItems().map((virtualRow) => {
-        const item = fontListItems[virtualRow.index];
-        const isLast = virtualRow.index === fontListItems.length - 1;
-        const isFirst = virtualRow.index === 1;
-        const isSelected = selectedItem?.value === item.value;
-        const tabIndexFallback = !selectedItem ? 0 : -1;
-        if (item.type === "category") {
-          return /* @__PURE__ */ React34.createElement(
-            MenuSubheader,
-            {
-              key: virtualRow.key,
-              style: {
-                transform: `translateY(${virtualRow.start}px)`
-              }
-            },
-            item.value
-          );
-        }
-        return /* @__PURE__ */ React34.createElement(
-          "li",
-          {
-            key: virtualRow.key,
-            role: "option",
-            "aria-selected": isSelected,
-            onClick: () => {
-              setFontFamily(item.value);
-              handleClose();
-            },
-            onKeyDown: (event) => {
-              if (event.key === "Enter") {
-                setFontFamily(item.value);
-                handleClose();
-              }
-              if (event.key === "ArrowDown" && isLast) {
-                event.preventDefault();
-                event.stopPropagation();
-              }
-              if (event.key === "ArrowUp" && isFirst) {
-                event.preventDefault();
-                event.stopPropagation();
-              }
-            },
-            tabIndex: isSelected ? 0 : tabIndexFallback,
-            style: {
-              transform: `translateY(${virtualRow.start}px)`,
-              fontFamily: item.value
-            }
-          },
-          item.value
-        );
-      })
-    )
+      items: fontListItems,
+      selectedValue: selectedItem?.value,
+      onChange: debouncedVirtualizeChange,
+      onSelect: setFontFamily,
+      onClose: handleClose,
+      itemStyle: (item) => ({ fontFamily: item.value }),
+      "data-testid": "font-list"
+    }
   );
 };
-var StyledMenuList = styled4(MenuList)(({ theme }) => ({
-  "& > li": {
-    height: LIST_ITEM_HEIGHT,
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    display: "flex",
-    alignItems: "center"
-  },
-  '& > [role="option"]': {
-    ...theme.typography.caption,
-    lineHeight: "inherit",
-    padding: theme.spacing(0.75, 2, 0.75, 4),
-    "&:hover, &:focus": {
-      backgroundColor: theme.palette.action.hover
-    },
-    '&[aria-selected="true"]': {
-      backgroundColor: theme.palette.action.selected
-    },
-    cursor: "pointer",
-    textOverflow: "ellipsis"
-  },
-  width: "100%",
-  position: "relative"
-}));
 var useDebounce = (fn, delay) => {
   const [debouncedFn] = useState6(() => debounce(fn, delay));
   useEffect5(() => () => debouncedFn.cancel(), [debouncedFn]);
@@ -2163,12 +2048,12 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
 // src/controls/url-control.tsx
 import * as React36 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
-import { TextField as TextField7 } from "@elementor/ui";
+import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue, disabled } = useBoundProp(urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
   return /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
-    TextField7,
+    TextField6,
     {
       size: "tiny",
       fullWidth: true,
@@ -2207,8 +2092,8 @@ import {
   Autocomplete as AutocompleteBase,
   Box as Box4,
   IconButton as IconButton2,
-  InputAdornment as InputAdornment4,
-  TextField as TextField8
+  InputAdornment as InputAdornment3,
+  TextField as TextField7
 } from "@elementor/ui";
 var Autocomplete = forwardRef4((props, ref) => {
   const {
@@ -2269,7 +2154,7 @@ var TextInput = ({
     handleChange(event.target.value);
   };
   return /* @__PURE__ */ React37.createElement(
-    TextField8,
+    TextField7,
     {
       ...params,
       placeholder,
@@ -2290,7 +2175,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React37.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React37.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React37.createElement(XIcon2, { fontSize: params.size })));
+}) => /* @__PURE__ */ React37.createElement(InputAdornment3, { position: "end" }, allowClear && /* @__PURE__ */ React37.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React37.createElement(XIcon2, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2499,7 +2384,7 @@ var INFOTIP_CONTENT = {
 
 // src/controls/gap-control.tsx
 import * as React39 from "react";
-import { useRef as useRef8 } from "react";
+import { useRef as useRef7 } from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid8, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
@@ -2511,7 +2396,7 @@ var GapControl = createControl(({ label }) => {
     propType,
     disabled: directionDisabled
   } = useBoundProp(layoutDirectionPropTypeUtil);
-  const stackRef = useRef8();
+  const stackRef = useRef7();
   const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
@@ -2561,7 +2446,7 @@ import { useState as useState8 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
-import { Grid as Grid9, Select as Select2, Stack as Stack12, TextField as TextField9 } from "@elementor/ui";
+import { Grid as Grid9, Select as Select2, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 var RATIO_OPTIONS = [
   { label: __11("Auto", "elementor"), value: "auto" },
@@ -2623,7 +2508,7 @@ var AspectRatioControl = createControl(({ label }) => {
       ({ label: optionLabel, ...props }) => /* @__PURE__ */ React40.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
   ))), isCustom && /* @__PURE__ */ React40.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React40.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(
-    TextField9,
+    TextField8,
     {
       size: "tiny",
       type: "number",
@@ -2636,7 +2521,7 @@ var AspectRatioControl = createControl(({ label }) => {
       }
     }
   )), /* @__PURE__ */ React40.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(
-    TextField9,
+    TextField8,
     {
       size: "tiny",
       type: "number",
@@ -2656,7 +2541,7 @@ import * as React42 from "react";
 import { useState as useState10 } from "react";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
-import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled5 } from "@elementor/ui";
+import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled4 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
 import { __ as __13 } from "@wordpress/i18n";
 
@@ -2734,7 +2619,7 @@ var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = styled5(Card2)`
+var StyledCard = styled4(Card2)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -2743,7 +2628,7 @@ var StyledCard = styled5(Card2)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = styled5(Stack13)`
+var StyledCardMediaContainer = styled4(Stack13)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -2843,7 +2728,7 @@ import {
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box6, CardMedia as CardMedia3, Grid as Grid14, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box6, CardMedia as CardMedia3, Grid as Grid14, styled as styled5, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
 import { __ as __18 } from "@wordpress/i18n";
 
@@ -2948,7 +2833,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React45 from "react";
-import { useRef as useRef9 } from "react";
+import { useRef as useRef8 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
@@ -2970,7 +2855,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef9();
+  const rowRef = useRef8();
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -3041,7 +2926,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React47 from "react";
-import { useRef as useRef10 } from "react";
+import { useRef as useRef9 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -3083,7 +2968,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil10);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef10();
+  const rowRef = useRef9();
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -3118,7 +3003,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef11 } from "react";
+import { useRef as useRef10 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -3143,7 +3028,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef11({
+  const valuesHistory = useRef10({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -3338,7 +3223,7 @@ var ImageOverlayContent = () => {
     }
   )))), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React48.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React48.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator = styled6(UnstableColorIndicator2)(({ theme }) => ({
+var StyledUnstableColorIndicator = styled5(UnstableColorIndicator2)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 var useImage = (image) => {
@@ -3390,6 +3275,188 @@ var SwitchControl2 = createControl(() => {
   };
   return /* @__PURE__ */ React50.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React50.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small", disabled }));
 });
+
+// src/controls/repeatable-control.tsx
+import * as React51 from "react";
+import { useMemo as useMemo4 } from "react";
+import { createArrayPropUtils } from "@elementor/editor-props";
+import { __ as __20 } from "@wordpress/i18n";
+
+// src/hooks/use-repeatable-control-context.ts
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var RepeatableControlContext = createContext6(void 0);
+var useRepeatableControlContext = () => {
+  const context = useContext6(RepeatableControlContext);
+  if (!context) {
+    throw new Error("useRepeatableControlContext must be used within RepeatableControl");
+  }
+  return context;
+};
+
+// src/controls/repeatable-control.tsx
+var RepeatableControl = createControl(
+  ({ label, childControlConfig, showDuplicate, showToggle }) => {
+    const { propTypeUtil: childPropTypeUtil } = childControlConfig;
+    if (!childPropTypeUtil) {
+      return null;
+    }
+    const childArrayPropTypeUtil = useMemo4(
+      () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema),
+      [childPropTypeUtil.key, childPropTypeUtil.schema]
+    );
+    const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
+    return /* @__PURE__ */ React51.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React51.createElement(RepeatableControlContext.Provider, { value: childControlConfig }, /* @__PURE__ */ React51.createElement(
+      Repeater,
+      {
+        openOnAdd: true,
+        values: value ?? [],
+        setValues: setValue,
+        label,
+        itemSettings: {
+          Icon: ItemIcon3,
+          Label: ItemLabel3,
+          Content: ItemContent3,
+          initialValues: childPropTypeUtil.create(null)
+        },
+        showDuplicate,
+        showToggle
+      }
+    )));
+  }
+);
+var ItemContent3 = ({ bind }) => {
+  return /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React51.createElement(Content3, null));
+};
+var ItemIcon3 = () => /* @__PURE__ */ React51.createElement(React51.Fragment, null);
+var Content3 = () => {
+  const { component: ChildControl, props = {} } = useRepeatableControlContext();
+  return /* @__PURE__ */ React51.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React51.createElement(PopoverGridContainer, null, /* @__PURE__ */ React51.createElement(ChildControl, { ...props })));
+};
+var ItemLabel3 = () => {
+  const { label = __20("Empty", "elementor") } = useRepeatableControlContext();
+  return /* @__PURE__ */ React51.createElement("span", null, label);
+};
+
+// src/controls/key-value-control.tsx
+import * as React52 from "react";
+import { useMemo as useMemo5, useState as useState11 } from "react";
+import { keyValuePropTypeUtil } from "@elementor/editor-props";
+import { FormHelperText, FormLabel as FormLabel3, Grid as Grid16, TextField as TextField9 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
+var KeyValueControl = createControl((props = {}) => {
+  const { value, setValue } = useBoundProp(keyValuePropTypeUtil);
+  const [keyError, setKeyError] = useState11(null);
+  const [valueError, setValueError] = useState11(null);
+  const keyLabel = props.keyName || __21("Key", "elementor");
+  const valueLabel = props.valueName || __21("Value", "elementor");
+  const keyValue = value?.key?.value || "";
+  const valueValue = value?.value?.value || "";
+  const [keyRegex, valueRegex, errMsg] = useMemo5(
+    () => [
+      props.regexKey ? new RegExp(props.regexKey) : void 0,
+      props.regexValue ? new RegExp(props.regexValue) : void 0,
+      props.validationErrorMessage || __21("Invalid Format", "elementor")
+    ],
+    [props.regexKey, props.regexValue, props.validationErrorMessage]
+  );
+  const validate = (newValue, FieldType) => {
+    if (FieldType === "key" && keyRegex) {
+      const isValid = keyRegex.test(newValue);
+      setKeyError(isValid ? null : errMsg);
+    } else if (FieldType === "value" && valueRegex) {
+      const isValid = valueRegex.test(newValue);
+      setValueError(isValid ? null : errMsg);
+    }
+  };
+  const handleChange = (event, fieldType) => {
+    const newValue = event.target.value;
+    validate(newValue, fieldType);
+    setValue({
+      ...value,
+      [fieldType]: {
+        value: newValue,
+        $$type: "string"
+      }
+    });
+  };
+  const isKeyInvalid = keyError !== null;
+  const isValueInvalid = valueError !== null;
+  return /* @__PURE__ */ React52.createElement(ControlActions, null, /* @__PURE__ */ React52.createElement(Grid16, { container: true, gap: 1.5, p: 1.5, sx: props.sx }, /* @__PURE__ */ React52.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(FormLabel3, { size: "tiny" }, keyLabel), /* @__PURE__ */ React52.createElement(
+    TextField9,
+    {
+      sx: { pt: 1 },
+      size: "tiny",
+      fullWidth: true,
+      value: keyValue,
+      onChange: (e) => handleChange(e, "key"),
+      error: isKeyInvalid
+    }
+  ), isKeyInvalid && /* @__PURE__ */ React52.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React52.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(FormLabel3, { size: "tiny" }, valueLabel), /* @__PURE__ */ React52.createElement(
+    TextField9,
+    {
+      sx: { pt: 1 },
+      size: "tiny",
+      fullWidth: true,
+      value: valueValue,
+      onChange: (e) => handleChange(e, "value"),
+      disabled: isKeyInvalid,
+      error: isValueInvalid
+    }
+  ), isValueInvalid && /* @__PURE__ */ React52.createElement(FormHelperText, { error: true }, valueError))));
+});
+
+// src/controls/position-control.tsx
+import * as React53 from "react";
+import { useMemo as useMemo6 } from "react";
+import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
+import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
+import { isExperimentActive as isExperimentActive5 } from "@elementor/editor-v1-adapters";
+import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
+import { Grid as Grid17, Select as Select4 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
+var positionOptions = [
+  { label: __22("Center center", "elementor"), value: "center center" },
+  { label: __22("Center left", "elementor"), value: "center left" },
+  { label: __22("Center right", "elementor"), value: "center right" },
+  { label: __22("Top center", "elementor"), value: "top center" },
+  { label: __22("Top left", "elementor"), value: "top left" },
+  { label: __22("Top right", "elementor"), value: "top right" },
+  { label: __22("Bottom center", "elementor"), value: "bottom center" },
+  { label: __22("Bottom left", "elementor"), value: "bottom left" },
+  { label: __22("Bottom right", "elementor"), value: "bottom right" }
+];
+var PositionControl = () => {
+  const positionContext = useBoundProp(positionPropTypeUtil);
+  const stringPropContext = useBoundProp(stringPropTypeUtil11);
+  const isVersion331Active = isExperimentActive5("e_v_3_31");
+  const isCustom = !!positionContext.value && isVersion331Active;
+  const availablePositionOptions = useMemo6(() => {
+    const options = [...positionOptions];
+    if (isVersion331Active) {
+      options.push({ label: __22("Custom", "elementor"), value: "custom" });
+    }
+    return options;
+  }, [isVersion331Active]);
+  const handlePositionChange = (event) => {
+    const value = event.target.value || null;
+    if (value === "custom" && isVersion331Active) {
+      positionContext.setValue({ x: null, y: null });
+    } else {
+      stringPropContext.setValue(value);
+    }
+  };
+  return /* @__PURE__ */ React53.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React53.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlFormLabel, null, __22("Object position", "elementor"))), /* @__PURE__ */ React53.createElement(Grid17, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React53.createElement(
+    Select4,
+    {
+      size: "tiny",
+      disabled: stringPropContext.disabled,
+      value: (positionContext.value ? "custom" : stringPropContext.value) ?? "",
+      onChange: handlePositionChange,
+      fullWidth: true
+    },
+    availablePositionOptions.map(({ label, value }) => /* @__PURE__ */ React53.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React53.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React53.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React53.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React53.createElement(SizeControl, { startIcon: /* @__PURE__ */ React53.createElement(LetterXIcon2, { fontSize: "tiny" }) }))), /* @__PURE__ */ React53.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React53.createElement(SizeControl, { startIcon: /* @__PURE__ */ React53.createElement(LetterYIcon2, { fontSize: "tiny" }) })))))));
+};
 export {
   AspectRatioControl,
   BackgroundControl,
@@ -3406,11 +3473,14 @@ export {
   FontFamilySelector,
   GapControl,
   ImageControl,
+  KeyValueControl,
   LinkControl,
   LinkedDimensionsControl,
   NumberControl,
+  PositionControl,
   PropKeyProvider,
   PropProvider,
+  RepeatableControl,
   SelectControl,
   SizeControl,
   StrokeControl,