@elementor/editor-controls 3.32.0-73 → 3.32.0-75

package/dist/index.mjs

@@ -2299,85 +2299,83 @@ import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid8, Stack as Stack8, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
-var LinkedDimensionsControl = createControl(
-  ({
-    label,
-    isSiteRtl = false,
-    extendedOptions,
-    min
-  }) => {
-    const {
-      value: sizeValue,
-      setValue: setSizeValue,
-      disabled: sizeDisabled,
-      placeholder: sizePlaceholder
-    } = useBoundProp(sizePropTypeUtil4);
-    const gridRowRefs = [useRef9(null), useRef9(null)];
-    const {
+var LinkedDimensionsControl = ({
+  label,
+  isSiteRtl = false,
+  extendedOptions,
+  min
+}) => {
+  const {
+    value: sizeValue,
+    setValue: setSizeValue,
+    disabled: sizeDisabled,
+    placeholder: sizePlaceholder
+  } = useBoundProp(sizePropTypeUtil4);
+  const gridRowRefs = [useRef9(null), useRef9(null)];
+  const {
+    value: dimensionsValue,
+    setValue: setDimensionsValue,
+    propType,
+    placeholder: dimensionsPlaceholder,
+    disabled: dimensionsDisabled
+  } = useBoundProp(dimensionsPropTypeUtil);
+  const hasUserValues = !!(dimensionsValue || sizeValue);
+  const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
+  const isLinked = !hasUserValues && !hasPlaceholders || (hasPlaceholders ? !!sizePlaceholder : !!sizeValue);
+  const onLinkToggle = () => {
+    if (!isLinked) {
+      setSizeValue(dimensionsValue["block-start"]?.value ?? null);
+      return;
+    }
+    const value = sizeValue ? sizePropTypeUtil4.create(sizeValue) : null;
+    setDimensionsValue({
+      "block-start": value,
+      "block-end": value,
+      "inline-start": value,
+      "inline-end": value
+    });
+  };
+  const tooltipLabel = label.toLowerCase();
+  const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+  const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const disabled = sizeDisabled || dimensionsDisabled;
+  return /* @__PURE__ */ React38.createElement(
+    PropProvider,
+    {
+      propType,
       value: dimensionsValue,
       setValue: setDimensionsValue,
-      propType,
       placeholder: dimensionsPlaceholder,
-      disabled: dimensionsDisabled
-    } = useBoundProp(dimensionsPropTypeUtil);
-    const hasUserValues = !!(dimensionsValue || sizeValue);
-    const hasPlaceholders = !!(sizePlaceholder || dimensionsPlaceholder);
-    const isLinked = !hasUserValues && !hasPlaceholders || (hasPlaceholders ? !!sizePlaceholder : !!sizeValue);
-    const onLinkToggle = () => {
-      if (!isLinked) {
-        setSizeValue(dimensionsValue["block-start"]?.value ?? null);
-        return;
-      }
-      const value = sizeValue ? sizePropTypeUtil4.create(sizeValue) : null;
-      setDimensionsValue({
-        "block-start": value,
-        "block-end": value,
-        "inline-start": value,
-        "inline-end": value
-      });
-    };
-    const tooltipLabel = label.toLowerCase();
-    const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-    const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
-    const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
-    const disabled = sizeDisabled || dimensionsDisabled;
-    return /* @__PURE__ */ React38.createElement(
-      PropProvider,
+      isDisabled: () => disabled
+    },
+    /* @__PURE__ */ React38.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React38.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React38.createElement(
+      StyledToggleButton,
       {
-        propType,
-        value: dimensionsValue,
-        setValue: setDimensionsValue,
-        placeholder: dimensionsPlaceholder,
-        isDisabled: () => disabled
+        "aria-label": isLinked ? unlinkedLabel : linkedLabel,
+        size: "tiny",
+        value: "check",
+        selected: isLinked,
+        sx: { marginLeft: "auto" },
+        onChange: onLinkToggle,
+        disabled,
+        isPlaceholder: hasPlaceholders
       },
-      /* @__PURE__ */ React38.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React38.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React38.createElement(
-        StyledToggleButton,
-        {
-          "aria-label": isLinked ? unlinkedLabel : linkedLabel,
-          size: "tiny",
-          value: "check",
-          selected: isLinked,
-          sx: { marginLeft: "auto" },
-          onChange: onLinkToggle,
-          disabled,
-          isPlaceholder: hasPlaceholders
-        },
-        /* @__PURE__ */ React38.createElement(LinkedIcon, { fontSize: "tiny" })
-      ))),
-      getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React38.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React38.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React38.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(Label, { ...props })), /* @__PURE__ */ React38.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(
-        Control3,
-        {
-          bind: props.bind,
-          startIcon: icon,
-          isLinked,
-          extendedOptions,
-          anchorRef: gridRowRefs[index],
-          min
-        }
-      ))))))
-    );
-  }
-);
+      /* @__PURE__ */ React38.createElement(LinkedIcon, { fontSize: "tiny" })
+    ))),
+    getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React38.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React38.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React38.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(Label, { ...props })), /* @__PURE__ */ React38.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(
+      Control3,
+      {
+        bind: props.bind,
+        startIcon: icon,
+        isLinked,
+        extendedOptions,
+        anchorRef: gridRowRefs[index],
+        min
+      }
+    ))))))
+  );
+};
 var Control3 = ({
   bind,
   startIcon,
@@ -3037,7 +3035,7 @@ import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil5 } fr
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid10, Stack as Stack11, ToggleButton as ToggleButton3, Tooltip as Tooltip5 } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
-var GapControl = createControl(({ label }) => {
+var GapControl = ({ label }) => {
   const {
     value: directionValue,
     setValue: setDirectionValue,
@@ -3076,7 +3074,7 @@ var GapControl = createControl(({ label }) => {
     },
     /* @__PURE__ */ React46.createElement(LinkedIcon, { fontSize: "tiny" })
   ))), /* @__PURE__ */ React46.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React46.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, __15("Column", "elementor"))), /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React46.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, __15("Row", "elementor"))), /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
-});
+};
 var Control4 = ({
   bind,
   isLinked,
@@ -3377,13 +3375,13 @@ var SvgMediaControl = createControl(() => {
 });
 
 // src/controls/background-control/background-control.tsx
-import * as React69 from "react";
+import * as React66 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid18 } from "@elementor/ui";
-import { __ as __32 } from "@wordpress/i18n";
+import { Grid as Grid16 } from "@elementor/ui";
+import { __ as __29 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React68 from "react";
+import * as React65 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
@@ -3392,7 +3390,7 @@ import {
 } from "@elementor/editor-props";
 import { Box as Box11, CardMedia as CardMedia3, styled as styled7, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
-import { __ as __31 } from "@wordpress/i18n";
+import { __ as __28 } from "@wordpress/i18n";
 
 // src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
 import * as React51 from "react";
@@ -3495,7 +3493,7 @@ var TooltipAddItemAction = ({
 }) => {
   const { addItem } = useRepeaterContext();
   const onClick = (ev) => addItem(ev, { index: newItemIndex });
-  return /* @__PURE__ */ React51.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React51.createElement(Box8, { sx: { ml: "auto", cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React51.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React51.createElement(Box8, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React51.createElement(
     IconButton4,
     {
       size: SIZE4,
@@ -3513,159 +3511,15 @@ var ConditionalToolTip = ({
 }) => enable && content ? /* @__PURE__ */ React51.createElement(Infotip2, { placement: "right", color: "secondary", content }, children) : children;
 
 // src/components/unstable-repeater/header/header.tsx
-import * as React55 from "react";
-import { Box as Box9, Stack as Stack16, Typography as Typography5 } from "@elementor/ui";
-
-// src/controls/transform-control/transform-base-control.tsx
-import * as React54 from "react";
-import { useRef as useRef11 } from "react";
-import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
-import { AdjustmentsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover5, bindTrigger as bindTrigger4, Divider as Divider6, IconButton as IconButton5, Popover as Popover5, usePopupState as usePopupState7 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
-
-// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 import * as React52 from "react";
-import { sizePropTypeUtil as sizePropTypeUtil6 } from "@elementor/editor-props";
-import { Divider as Divider4, Grid as Grid12, Stack as Stack14 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
-var ORIGIN_UNITS = ["px", "%", "em", "rem"];
-var CHILDREN_PERSPECTIVE_FIELDS = [
-  {
-    label: __20("Perspective", "elementor"),
-    bindValue: "perspective",
-    units: lengthUnits
-  },
-  {
-    label: __20("Origin X", "elementor"),
-    bindValue: "perspective-origin-x",
-    units: ORIGIN_UNITS
-  },
-  {
-    label: __20("Origin Y", "elementor"),
-    bindValue: "perspective-origin-y",
-    units: ORIGIN_UNITS
-  }
-];
-var ChildrenPerspectiveControl = ({ rowRef }) => {
-  return /* @__PURE__ */ React52.createElement(Stack14, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React52.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, __20("Children perspective", "elementor")), /* @__PURE__ */ React52.createElement(Grid12, { container: true, spacing: 1.5, ref: rowRef }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React52.createElement(ControlFields, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React52.createElement(Divider4, { sx: { py: 3 } })));
-};
-var ControlFields = ({
-  control,
-  rowRef
-}) => {
-  const context = useBoundProp(sizePropTypeUtil6);
-  return /* @__PURE__ */ React52.createElement(PropProvider, { ...context }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React52.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(Grid12, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React52.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React52.createElement(Grid12, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React52.createElement(
-    SizeControl,
-    {
-      variant: "length",
-      units: [...control.units],
-      anchorRef: rowRef,
-      disableCustom: true
-    }
-  ))))));
-};
-
-// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-import * as React53 from "react";
-import { sizePropTypeUtil as sizePropTypeUtil7 } from "@elementor/editor-props";
-import { Divider as Divider5, Grid as Grid13, Stack as Stack15 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
-var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
-var TRANSFORM_ORIGIN_FIELDS = [
-  {
-    label: __21("Origin X", "elementor"),
-    bindValue: "x",
-    units: TRANSFORM_ORIGIN_UNITS
-  },
-  {
-    label: __21("Origin Y", "elementor"),
-    bindValue: "y",
-    units: TRANSFORM_ORIGIN_UNITS
-  },
-  {
-    label: __21("Origin Z", "elementor"),
-    bindValue: "z",
-    units: TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%")
-  }
-];
-var TransformOriginControl = ({ rowRef }) => {
-  return /* @__PURE__ */ React53.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React53.createElement(ControlFormLabel, { sx: { pt: 1.5, pl: 1.5 } }, __21("Transform", "elementor")), /* @__PURE__ */ React53.createElement(Grid13, { container: true, spacing: 1.5, ref: rowRef }, TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React53.createElement(ControlFields2, { control, rowRef, key: control.bindValue })), /* @__PURE__ */ React53.createElement(Divider5, { sx: { py: 3 } })));
-};
-var ControlFields2 = ({
-  control,
-  rowRef
-}) => {
-  const context = useBoundProp(sizePropTypeUtil7);
-  return /* @__PURE__ */ React53.createElement(PropProvider, { ...context }, /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind: control.bindValue }, /* @__PURE__ */ React53.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React53.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, control.label)), /* @__PURE__ */ React53.createElement(Grid13, { item: true, xs: 6, sx: { pr: 3 } }, /* @__PURE__ */ React53.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true }))))));
-};
-
-// src/controls/transform-control/transform-base-control.tsx
-var SIZE5 = "tiny";
-var TransformBaseControl = ({ anchorRef }) => {
-  const rowRef = useRef11(null);
-  const popupState = usePopupState7({ variant: "popover" });
-  const popupProps = bindPopover5({
-    ...popupState,
-    anchorEl: anchorRef.current ?? void 0
-  });
-  return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(
-    IconButton5,
-    {
-      size: SIZE5,
-      "aria-label": __22("Base Transform", "elementor"),
-      ...bindTrigger4(popupState)
-    },
-    /* @__PURE__ */ React54.createElement(AdjustmentsIcon, { fontSize: SIZE5 })
-  ), /* @__PURE__ */ React54.createElement(
-    Popover5,
-    {
-      disablePortal: true,
-      slotProps: {
-        paper: {
-          sx: {
-            width: anchorRef.current?.offsetWidth + "px"
-          }
-        }
-      },
-      ...popupProps
-    },
-    /* @__PURE__ */ React54.createElement(
-      PopoverHeader3,
-      {
-        title: __22("Base Transform", "elementor"),
-        onClose: popupState.close,
-        icon: /* @__PURE__ */ React54.createElement(AdjustmentsIcon, { fontSize: SIZE5 })
-      }
-    ),
-    /* @__PURE__ */ React54.createElement(Divider6, null),
-    /* @__PURE__ */ React54.createElement(TransformOriginControl, { rowRef }),
-    /* @__PURE__ */ React54.createElement(Divider6, null),
-    /* @__PURE__ */ React54.createElement(ChildrenPerspectiveControl, { rowRef })
-  ));
-};
-
-// src/components/unstable-repeater/header/header.tsx
-var Header = ({ label, children }) => {
+import { Box as Box9, Stack as Stack14, Typography as Typography5 } from "@elementor/ui";
+var Header = React52.forwardRef(({ label, children }, ref) => {
   const { value } = useBoundProp();
-  return /* @__PURE__ */ React55.createElement(
-    Stack16,
-    {
-      direction: "row",
-      justifyContent: "start",
-      alignItems: "center",
-      gap: 1,
-      sx: { marginInlineEnd: -0.75, py: 0.25 }
-    },
-    /* @__PURE__ */ React55.createElement(Typography5, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label),
-    /* @__PURE__ */ React55.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React55.createElement(RepeaterHeaderActionsSlot, { value }),
-    /* @__PURE__ */ React55.createElement(Box9, { sx: { ml: "auto" } }, /* @__PURE__ */ React55.createElement(SlotChildren, { whitelist: [TransformBaseControl, TooltipAddItemAction], sorted: true }, children))
-  );
-};
+  return /* @__PURE__ */ React52.createElement(Stack14, { direction: "row", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75, py: 0.25 }, ref }, /* @__PURE__ */ React52.createElement(Box9, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React52.createElement(Typography5, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label), /* @__PURE__ */ React52.createElement(ControlAdornments, null)), /* @__PURE__ */ React52.createElement(RepeaterHeaderActionsSlot, { value }), /* @__PURE__ */ React52.createElement(SlotChildren, { whitelist: [TooltipAddItemAction], sorted: true }, children));
+});
 
 // src/components/unstable-repeater/items/items-container.tsx
-import * as React56 from "react";
+import * as React53 from "react";
 var ItemsContainer = ({
   itemTemplate,
   isSortable = true,
@@ -3684,9 +3538,9 @@ var ItemsContainer = ({
       })
     );
   };
-  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
+  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
     const value = items2[index].item;
-    return /* @__PURE__ */ React56.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React56.isValidElement(itemTemplate) ? React56.cloneElement(itemTemplate, {
+    return /* @__PURE__ */ React53.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React53.isValidElement(itemTemplate) ? React53.cloneElement(itemTemplate, {
       key,
       value,
       index,
@@ -3696,23 +3550,23 @@ var ItemsContainer = ({
 };
 
 // src/components/unstable-repeater/items/item.tsx
-import * as React60 from "react";
-import { bindTrigger as bindTrigger5, UnstableTag as UnstableTag3 } from "@elementor/ui";
-import { __ as __26 } from "@wordpress/i18n";
+import * as React57 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 React57 from "react";
+import * as React54 from "react";
 import { EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2 } from "@elementor/icons";
-import { IconButton as IconButton6, Tooltip as Tooltip6 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
-var SIZE6 = "tiny";
+import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
+var SIZE5 = "tiny";
 var DisableItemAction = ({ index = -1 }) => {
   const { items: items2, updateItem } = useRepeaterContext();
   if (index === -1) {
     return null;
   }
   const propDisabled = items2[index].item.disabled ?? false;
-  const toggleLabel = propDisabled ? __23("Show", "elementor") : __23("Hide", "elementor");
+  const toggleLabel = propDisabled ? __20("Show", "elementor") : __20("Hide", "elementor");
   const onClick = () => {
     const self = structuredClone(items2[index].item);
     self.disabled = !self.disabled;
@@ -3721,42 +3575,42 @@ var DisableItemAction = ({ index = -1 }) => {
     }
     updateItem(self, index);
   };
-  return /* @__PURE__ */ React57.createElement(Tooltip6, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React57.createElement(IconButton6, { size: SIZE6, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React57.createElement(EyeOffIcon2, { fontSize: SIZE6 }) : /* @__PURE__ */ React57.createElement(EyeIcon2, { fontSize: SIZE6 })));
+  return /* @__PURE__ */ React54.createElement(Tooltip6, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React54.createElement(IconButton5, { size: SIZE5, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React54.createElement(EyeOffIcon2, { fontSize: SIZE5 }) : /* @__PURE__ */ React54.createElement(EyeIcon2, { fontSize: SIZE5 })));
 };
 
 // src/components/unstable-repeater/actions/duplicate-item-action.tsx
-import * as React58 from "react";
+import * as React55 from "react";
 import { CopyIcon as CopyIcon2 } from "@elementor/icons";
-import { IconButton as IconButton7, Tooltip as Tooltip7 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
-var SIZE7 = "tiny";
+import { IconButton as IconButton6, Tooltip as Tooltip7 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
+var SIZE6 = "tiny";
 var DuplicateItemAction = ({ index = -1 }) => {
   const { items: items2, addItem } = useRepeaterContext();
   if (index === -1) {
     return null;
   }
-  const duplicateLabel = __24("Duplicate", "elementor");
+  const duplicateLabel = __21("Duplicate", "elementor");
   const onClick = (ev) => {
     const newItem = structuredClone(items2[index]?.item);
     addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React58.createElement(Tooltip7, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React58.createElement(IconButton7, { size: SIZE7, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React58.createElement(CopyIcon2, { fontSize: SIZE7 })));
+  return /* @__PURE__ */ React55.createElement(Tooltip7, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React55.createElement(IconButton6, { size: SIZE6, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React55.createElement(CopyIcon2, { fontSize: SIZE6 })));
 };
 
 // src/components/unstable-repeater/actions/remove-item-action.tsx
-import * as React59 from "react";
+import * as React56 from "react";
 import { XIcon as XIcon3 } from "@elementor/icons";
-import { IconButton as IconButton8, Tooltip as Tooltip8 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
-var SIZE8 = "tiny";
+import { IconButton as IconButton7, Tooltip as Tooltip8 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
+var SIZE7 = "tiny";
 var RemoveItemAction = ({ index = -1 }) => {
   const { removeItem } = useRepeaterContext();
   if (index === -1) {
     return null;
   }
-  const removeLabel = __25("Remove", "elementor");
+  const removeLabel = __22("Remove", "elementor");
   const onClick = () => removeItem(index);
-  return /* @__PURE__ */ React59.createElement(Tooltip8, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React59.createElement(IconButton8, { size: SIZE8, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React59.createElement(XIcon3, { fontSize: SIZE8 })));
+  return /* @__PURE__ */ React56.createElement(Tooltip8, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(IconButton7, { size: SIZE7, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React56.createElement(XIcon3, { fontSize: SIZE7 })));
 };
 
 // src/components/unstable-repeater/items/item.tsx
@@ -3768,28 +3622,28 @@ var Item = ({
   children
 }) => {
   const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
-  const triggerProps = bindTrigger5(popoverState);
+  const triggerProps = bindTrigger4(popoverState);
   const key = items2[index].key ?? -1;
   const onClick = (ev) => {
     triggerProps.onClick(ev);
     setOpenItemIndex(index);
   };
-  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
     UnstableTag3,
     {
       key,
       disabled: false,
-      label: /* @__PURE__ */ React60.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React60.createElement(Label3, { value })),
+      label: /* @__PURE__ */ React57.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React57.createElement(Label3, { value })),
       showActionsOnHover: true,
       fullWidth: true,
       ref: (ref) => ref && openItemIndex === index && setRowRef(ref),
       variant: "outlined",
-      "aria-label": __26("Open item", "elementor"),
+      "aria-label": __23("Open item", "elementor"),
       sx: { minHeight: (theme) => theme.spacing(4) },
       ...triggerProps,
       onClick,
-      startIcon: /* @__PURE__ */ React60.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React60.createElement(Icon, { value })),
-      actions: /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React60.createElement(
+      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(
         SlotChildren,
         {
           whitelist: [DuplicateItemAction, DisableItemAction, RemoveItemAction],
@@ -3803,14 +3657,14 @@ var Item = ({
 };
 
 // src/components/unstable-repeater/unstable-repeater.tsx
-import * as React62 from "react";
+import * as React59 from "react";
 
 // src/components/unstable-repeater/items/edit-item-popover.tsx
-import * as React61 from "react";
-import { bindPopover as bindPopover6, Box as Box10, Popover as Popover6 } from "@elementor/ui";
+import * as React58 from "react";
+import { bindPopover as bindPopover5, Box as Box10, Popover as Popover5 } from "@elementor/ui";
 var EditItemPopover = ({ children }) => {
   const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
-  const popoverProps = bindPopover6(popoverState);
+  const popoverProps = bindPopover5(popoverState);
   if (!isOpen || !rowRef) {
     return null;
   }
@@ -3820,8 +3674,8 @@ var EditItemPopover = ({ children }) => {
     setRowRef(null);
     setOpenItemIndex(EMPTY_OPEN_ITEM2);
   };
-  return /* @__PURE__ */ React61.createElement(
-    Popover6,
+  return /* @__PURE__ */ React58.createElement(
+    Popover5,
     {
       disablePortal: true,
       slotProps: {
@@ -3834,7 +3688,7 @@ var EditItemPopover = ({ children }) => {
       anchorEl: rowRef,
       onClose
     },
-    /* @__PURE__ */ React61.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React61.createElement(Box10, null, React61.isValidElement(children) && React61.cloneElement(children, { bind, index: openItemIndex })))
+    /* @__PURE__ */ React58.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React58.createElement(Box10, null, React58.isValidElement(children) && React58.cloneElement(children, { bind, index: openItemIndex })))
   );
 };
 
@@ -3844,7 +3698,7 @@ var UnstableRepeater = ({
   initial,
   propTypeUtil
 }) => {
-  return /* @__PURE__ */ React62.createElement(SectionContent, null, /* @__PURE__ */ React62.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React62.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
+  return /* @__PURE__ */ React59.createElement(SectionContent, null, /* @__PURE__ */ React59.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React59.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
 };
 
 // src/env.ts
@@ -3852,7 +3706,7 @@ import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React63 from "react";
+import * as React60 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -3899,7 +3753,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React63.createElement(ControlActions, null, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React60.createElement(ControlActions, null, /* @__PURE__ */ React60.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -3924,53 +3778,53 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React64 from "react";
+import * as React61 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
-import { Grid as Grid14 } from "@elementor/ui";
-import { __ as __27 } from "@wordpress/i18n";
+import { Grid as Grid12 } from "@elementor/ui";
+import { __ as __24 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __27("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(PinIcon, { fontSize: size }),
+    label: __24("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __27("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __24("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlFormLabel, null, __27("Attachment", "elementor"))), /* @__PURE__ */ React64.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React64.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React61.createElement(PopoverGridContainer, null, /* @__PURE__ */ React61.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(ControlFormLabel, null, __24("Attachment", "elementor"))), /* @__PURE__ */ React61.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React61.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React65 from "react";
-import { useRef as useRef12 } from "react";
+import * as React62 from "react";
+import { useRef as useRef11 } 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";
-import { Grid as Grid15, Select as Select3 } from "@elementor/ui";
-import { __ as __28 } from "@wordpress/i18n";
+import { Grid as Grid13, Select as Select3 } from "@elementor/ui";
+import { __ as __25 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { label: __28("Center center", "elementor"), value: "center center" },
-  { label: __28("Center left", "elementor"), value: "center left" },
-  { label: __28("Center right", "elementor"), value: "center right" },
-  { label: __28("Top center", "elementor"), value: "top center" },
-  { label: __28("Top left", "elementor"), value: "top left" },
-  { label: __28("Top right", "elementor"), value: "top right" },
-  { label: __28("Bottom center", "elementor"), value: "bottom center" },
-  { label: __28("Bottom left", "elementor"), value: "bottom left" },
-  { label: __28("Bottom right", "elementor"), value: "bottom right" },
-  { label: __28("Custom", "elementor"), value: "custom" }
+  { label: __25("Center center", "elementor"), value: "center center" },
+  { label: __25("Center left", "elementor"), value: "center left" },
+  { label: __25("Center right", "elementor"), value: "center right" },
+  { label: __25("Top center", "elementor"), value: "top center" },
+  { label: __25("Top left", "elementor"), value: "top left" },
+  { label: __25("Top right", "elementor"), value: "top right" },
+  { label: __25("Bottom center", "elementor"), value: "bottom center" },
+  { label: __25("Bottom left", "elementor"), value: "bottom left" },
+  { label: __25("Bottom right", "elementor"), value: "bottom right" },
+  { label: __25("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef12(null);
+  const rowRef = useRef11(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -3979,7 +3833,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React65.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React65.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(PopoverGridContainer, null, /* @__PURE__ */ React65.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlFormLabel, null, __28("Position", "elementor"))), /* @__PURE__ */ React65.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React62.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(PopoverGridContainer, null, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlFormLabel, null, __25("Position", "elementor"))), /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React62.createElement(
     Select3,
     {
       fullWidth: true,
@@ -3988,18 +3842,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React65.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React65.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React65.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React65.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React65.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React62.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React62.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(Grid13, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React62.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React65.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React62.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React65.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React65.createElement(
+  ))), /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React62.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React65.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React62.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -4007,43 +3861,43 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React66 from "react";
+import * as React63 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
-import { Grid as Grid16 } from "@elementor/ui";
-import { __ as __29 } from "@wordpress/i18n";
+import { Grid as Grid14 } from "@elementor/ui";
+import { __ as __26 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __29("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(GridDotsIcon, { fontSize: size }),
+    label: __26("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __29("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __26("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __29("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __26("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __29("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(XIcon4, { fontSize: size }),
+    label: __26("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(XIcon4, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlFormLabel, null, __29("Repeat", "elementor"))), /* @__PURE__ */ React66.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React66.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React63.createElement(PopoverGridContainer, null, /* @__PURE__ */ React63.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlFormLabel, null, __26("Repeat", "elementor"))), /* @__PURE__ */ React63.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React63.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React67 from "react";
-import { useRef as useRef13 } from "react";
+import * as React64 from "react";
+import { useRef as useRef12 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -4053,31 +3907,31 @@ import {
   LetterAIcon,
   PencilIcon
 } from "@elementor/icons";
-import { Grid as Grid17 } from "@elementor/ui";
-import { __ as __30 } from "@wordpress/i18n";
+import { Grid as Grid15 } from "@elementor/ui";
+import { __ as __27 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __30("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(LetterAIcon, { fontSize: size }),
+    label: __27("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __30("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __27("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __30("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __27("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __30("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React67.createElement(PencilIcon, { fontSize: size }),
+    label: __27("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4085,7 +3939,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil10);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef13(null);
+  const rowRef = useRef12(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -4093,7 +3947,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React67.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(PopoverGridContainer, null, /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(ControlFormLabel, null, __30("Size", "elementor"))), /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React64.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlFormLabel, null, __27("Size", "elementor"))), /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React64.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -4102,17 +3956,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React67.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React67.createElement(PopoverGridContainer, null, /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React67.createElement(
+  )))), isCustom ? /* @__PURE__ */ React64.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React64.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React67.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React64.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React67.createElement(
+  ))), /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React64.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React67.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React64.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -4120,7 +3974,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef14 } from "react";
+import { useRef as useRef13 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -4145,7 +3999,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef14({
+  const valuesHistory = useRef13({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -4213,22 +4067,22 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: __31("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: __31("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: __31("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: __31("Full", "elementor"), value: "full" }
+  { label: __28("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __28("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __28("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __28("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React68.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React65.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React65.createElement(
     UnstableRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React68.createElement(Header, { label: __31("Overlay", "elementor") }, /* @__PURE__ */ React68.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React68.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React68.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 }) }, /* @__PURE__ */ React68.createElement(DuplicateItemAction, null), /* @__PURE__ */ React68.createElement(DisableItemAction, null), /* @__PURE__ */ React68.createElement(RemoveItemAction, null)),
-    /* @__PURE__ */ React68.createElement(EditItemPopover, null, /* @__PURE__ */ React68.createElement(ItemContent3, null))
+    /* @__PURE__ */ React65.createElement(Header, { label: __28("Overlay", "elementor") }, /* @__PURE__ */ React65.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React65.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React65.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 }) }, /* @__PURE__ */ React65.createElement(DuplicateItemAction, null), /* @__PURE__ */ React65.createElement(DisableItemAction, null), /* @__PURE__ */ React65.createElement(RemoveItemAction, null)),
+    /* @__PURE__ */ React65.createElement(EditItemPopover, null, /* @__PURE__ */ React65.createElement(ItemContent3, null))
   ));
 });
 var ItemContent3 = () => {
@@ -4238,27 +4092,27 @@ var ItemContent3 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React68.createElement(Box11, { sx: { width: "100%" } }, /* @__PURE__ */ React68.createElement(Box11, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React65.createElement(Box11, { sx: { width: "100%" } }, /* @__PURE__ */ React65.createElement(Box11, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React65.createElement(
     Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": __31("Background Overlay", "elementor")
+      "aria-label": __28("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React68.createElement(Tab, { label: __31("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React68.createElement(Tab, { label: __31("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React68.createElement(Tab, { label: __31("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React68.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React68.createElement(PopoverContent, null, /* @__PURE__ */ React68.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React68.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React68.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React68.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React68.createElement(PopoverContent, null, /* @__PURE__ */ React68.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React65.createElement(Tab, { label: __28("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React65.createElement(Tab, { label: __28("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React65.createElement(Tab, { label: __28("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React65.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React65.createElement(PopoverContent, null, /* @__PURE__ */ React65.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React65.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React65.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React65.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React65.createElement(PopoverContent, null, /* @__PURE__ */ React65.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React68.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React65.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React68.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React65.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React68.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React65.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -4271,11 +4125,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React68.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React65.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React65.createElement(
     CardMedia3,
     {
       image: imageUrl,
@@ -4290,41 +4144,41 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React68.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React65.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React68.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React65.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React68.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React65.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React68.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React65.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React68.createElement("span", null, color);
+  return /* @__PURE__ */ React65.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React68.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React65.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React68.createElement("span", null, __31("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React65.createElement("span", null, __28("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React68.createElement("span", null, __31("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React65.createElement("span", null, __28("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React68.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React65.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React65.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React68.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React68.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React65.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React65.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator2 = styled7(UnstableColorIndicator3)(({ theme }) => ({
   height: "1rem",
@@ -4364,12 +4218,12 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  const colorLabel = __32("Color", "elementor");
-  return /* @__PURE__ */ React69.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React69.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React69.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ColorControl, null)))));
+  const colorLabel = __29("Color", "elementor");
+  return /* @__PURE__ */ React66.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React66.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React66.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React66.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ColorControl, null)))));
 });
 
 // src/controls/repeatable-control.tsx
-import * as React70 from "react";
+import * as React67 from "react";
 import { useMemo as useMemo5 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
 import { Box as Box12 } from "@elementor/ui";
@@ -4416,31 +4270,31 @@ var RepeatableControl = createControl(
       [childControlConfig, placeholder, patternLabel]
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    return /* @__PURE__ */ React70.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React70.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React70.createElement(
+    return /* @__PURE__ */ React67.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React67.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React67.createElement(
       UnstableRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil
       },
-      /* @__PURE__ */ React70.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React70.createElement(TooltipAddItemAction, { ...addItemTooltipProps, newItemIndex: 0 })),
-      /* @__PURE__ */ React70.createElement(
+      /* @__PURE__ */ React67.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React67.createElement(TooltipAddItemAction, { ...addItemTooltipProps, newItemIndex: 0 })),
+      /* @__PURE__ */ React67.createElement(
         ItemsContainer,
         {
           isSortable: false,
-          itemTemplate: /* @__PURE__ */ React70.createElement(Item, { Icon: ItemIcon4, Label: ItemLabel4 })
+          itemTemplate: /* @__PURE__ */ React67.createElement(Item, { Icon: ItemIcon4, Label: ItemLabel4 })
         },
-        showDuplicate && /* @__PURE__ */ React70.createElement(DuplicateItemAction, null),
-        showToggle && /* @__PURE__ */ React70.createElement(DisableItemAction, null),
-        /* @__PURE__ */ React70.createElement(RemoveItemAction, null)
+        showDuplicate && /* @__PURE__ */ React67.createElement(DuplicateItemAction, null),
+        showToggle && /* @__PURE__ */ React67.createElement(DisableItemAction, null),
+        /* @__PURE__ */ React67.createElement(RemoveItemAction, null)
       ),
-      /* @__PURE__ */ React70.createElement(EditItemPopover, null, /* @__PURE__ */ React70.createElement(Content3, null))
+      /* @__PURE__ */ React67.createElement(EditItemPopover, null, /* @__PURE__ */ React67.createElement(Content3, null))
     )));
   }
 );
-var ItemIcon4 = () => /* @__PURE__ */ React70.createElement(React70.Fragment, null);
+var ItemIcon4 = () => /* @__PURE__ */ React67.createElement(React67.Fragment, null);
 var Content3 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React70.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React70.createElement(PopoverGridContainer, null, /* @__PURE__ */ React70.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React67.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React67.createElement(PopoverGridContainer, null, /* @__PURE__ */ React67.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -4502,7 +4356,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__ */ React70.createElement(Box12, { component: "span", color }, label);
+  return /* @__PURE__ */ React67.createElement(Box12, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -4510,15 +4364,15 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React71 from "react";
+import * as React68 from "react";
 import { useMemo as useMemo6, useState as useState14 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
   stringPropTypeUtil as stringPropTypeUtil11
 } from "@elementor/editor-props";
-import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
-import { __ as __33 } from "@wordpress/i18n";
+import { FormHelperText, FormLabel as FormLabel3, Grid as Grid17 } from "@elementor/ui";
+import { __ as __30 } from "@wordpress/i18n";
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
   const [keyError, setKeyError] = useState14("");
@@ -4527,8 +4381,8 @@ var KeyValueControl = createControl((props = {}) => {
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
-  const keyLabel = props.keyName || __33("Key", "elementor");
-  const valueLabel = props.valueName || __33("Value", "elementor");
+  const keyLabel = props.keyName || __30("Key", "elementor");
+  const valueLabel = props.valueName || __30("Value", "elementor");
   const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
     keyHelper: void 0,
     valueHelper: void 0
@@ -4537,7 +4391,7 @@ var KeyValueControl = createControl((props = {}) => {
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || __33("Invalid Format", "elementor")
+      props.validationErrorMessage || __30("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
@@ -4586,7 +4440,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React71.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React71.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React71.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React71.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React71.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, helperText: keyHelper })), !!keyError && /* @__PURE__ */ React71.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React71.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React71.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React68.createElement(Grid17, { container: true, gap: 1.5 }, /* @__PURE__ */ React68.createElement(Grid17, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React68.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React68.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, helperText: keyHelper })), !!keyError && /* @__PURE__ */ React68.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React68.createElement(Grid17, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React68.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React68.createElement(
     TextControl,
     {
       inputValue: sessionState.value,
@@ -4594,27 +4448,27 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React71.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React68.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React72 from "react";
+import * as React69 from "react";
 import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
-import { Grid as Grid20, Select as Select4 } from "@elementor/ui";
-import { __ as __34 } from "@wordpress/i18n";
+import { Grid as Grid18, Select as Select4 } from "@elementor/ui";
+import { __ as __31 } from "@wordpress/i18n";
 var positionOptions = [
-  { label: __34("Center center", "elementor"), value: "center center" },
-  { label: __34("Center left", "elementor"), value: "center left" },
-  { label: __34("Center right", "elementor"), value: "center right" },
-  { label: __34("Top center", "elementor"), value: "top center" },
-  { label: __34("Top left", "elementor"), value: "top left" },
-  { label: __34("Top right", "elementor"), value: "top right" },
-  { label: __34("Bottom center", "elementor"), value: "bottom center" },
-  { label: __34("Bottom left", "elementor"), value: "bottom left" },
-  { label: __34("Bottom right", "elementor"), value: "bottom right" },
-  { label: __34("Custom", "elementor"), value: "custom" }
+  { label: __31("Center center", "elementor"), value: "center center" },
+  { label: __31("Center left", "elementor"), value: "center left" },
+  { label: __31("Center right", "elementor"), value: "center right" },
+  { label: __31("Top center", "elementor"), value: "top center" },
+  { label: __31("Top left", "elementor"), value: "top left" },
+  { label: __31("Top right", "elementor"), value: "top right" },
+  { label: __31("Bottom center", "elementor"), value: "bottom center" },
+  { label: __31("Bottom left", "elementor"), value: "bottom left" },
+  { label: __31("Bottom right", "elementor"), value: "bottom right" },
+  { label: __31("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
@@ -4628,7 +4482,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React72.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React72.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React72.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlFormLabel, null, __34("Object position", "elementor"))), /* @__PURE__ */ React72.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React69.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlFormLabel, null, __31("Object position", "elementor"))), /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React69.createElement(
     Select4,
     {
       size: "tiny",
@@ -4637,17 +4491,17 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React72.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React72.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React72.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React72.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React72.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React69.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React69.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React69.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React72.createElement(LetterXIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React69.createElement(LetterXIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React72.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React72.createElement(
+  ))), /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React69.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React72.createElement(LetterYIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React69.createElement(LetterYIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
@@ -4655,9 +4509,10 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React82 from "react";
+import { useRef as useRef21 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
-import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { Box as Box15, Typography as Typography6 } from "@elementor/ui";
+import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
+import { bindTrigger as bindTrigger5, Box as Box16, IconButton as IconButton8, Typography as Typography6, usePopupState as usePopupState7 } from "@elementor/ui";
 import { __ as __41 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
@@ -4711,14 +4566,129 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
   y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
 });
 
+// src/controls/transform-control/transform-base-control.tsx
+import * as React72 from "react";
+import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
+import { AdjustmentsIcon } from "@elementor/icons";
+import { bindPopover as bindPopover6, Box as Box13, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
+import { __ as __34 } from "@wordpress/i18n";
+
+// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
+import * as React70 from "react";
+import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
+import { Grid as Grid19, Stack as Stack15 } from "@elementor/ui";
+import { __ as __32 } from "@wordpress/i18n";
+var ORIGIN_UNITS = ["px", "%", "em", "rem"];
+var PERSPECTIVE_CONTROL_FIELD = {
+  label: __32("Perspective", "elementor"),
+  bind: "perspective",
+  units: ["px", "em", "rem", "vw", "vh"]
+};
+var CHILDREN_PERSPECTIVE_FIELDS = [
+  {
+    label: __32("Origin X", "elementor"),
+    bind: "x",
+    units: ORIGIN_UNITS
+  },
+  {
+    label: __32("Origin Y", "elementor"),
+    bind: "y",
+    units: ORIGIN_UNITS
+  }
+];
+var ChildrenPerspectiveControl = () => {
+  return /* @__PURE__ */ React70.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React70.createElement(ControlFormLabel, null, __32("Children perspective", "elementor")), /* @__PURE__ */ React70.createElement(PerspectiveControl, null), /* @__PURE__ */ React70.createElement(PerspectiveOriginControl, null));
+};
+var PerspectiveControl = () => /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React70.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
+var PerspectiveOriginControl = () => /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React70.createElement(PerspectiveOriginControlProvider, null));
+var PerspectiveOriginControlProvider = () => {
+  const context = useBoundProp(perspectiveOriginPropTypeUtil);
+  return /* @__PURE__ */ React70.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React70.createElement(ControlFields, { control }))));
+};
+var ControlFields = ({ control }) => {
+  const rowRef = React70.useRef(null);
+  return /* @__PURE__ */ React70.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React70.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React70.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+};
+
+// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
+import * as React71 from "react";
+import { transformOriginPropTypeUtil } from "@elementor/editor-props";
+import { Grid as Grid20, Stack as Stack16 } from "@elementor/ui";
+import { __ as __33 } from "@wordpress/i18n";
+var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
+var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
+var TRANSFORM_ORIGIN_FIELDS = [
+  {
+    label: __33("Origin X", "elementor"),
+    bind: "x",
+    units: TRANSFORM_ORIGIN_UNITS
+  },
+  {
+    label: __33("Origin Y", "elementor"),
+    bind: "y",
+    units: TRANSFORM_ORIGIN_UNITS
+  },
+  {
+    label: __33("Origin Z", "elementor"),
+    bind: "z",
+    units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
+  }
+];
+var TransformOriginControl = () => {
+  return /* @__PURE__ */ React71.createElement(Stack16, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, __33("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React71.createElement(ControlFields2, { control, key: control.bind })));
+};
+var ControlFields2 = ({ control }) => {
+  const context = useBoundProp(transformOriginPropTypeUtil);
+  const rowRef = React71.useRef(null);
+  return /* @__PURE__ */ React71.createElement(PropProvider, { ...context }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React71.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
+};
+
+// src/controls/transform-control/transform-base-control.tsx
+var SIZE8 = "tiny";
+var TransformBaseControl = ({
+  popupState,
+  anchorRef
+}) => {
+  const popupProps = bindPopover6({
+    ...popupState,
+    anchorEl: anchorRef.current ?? void 0
+  });
+  return /* @__PURE__ */ React72.createElement(
+    Popover6,
+    {
+      disablePortal: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      slotProps: {
+        paper: {
+          sx: {
+            width: (anchorRef.current?.offsetWidth || 0) - 6 + "px",
+            mt: 0.5
+          }
+        }
+      },
+      ...popupProps
+    },
+    /* @__PURE__ */ React72.createElement(
+      PopoverHeader3,
+      {
+        title: __34("Base Transform", "elementor"),
+        onClose: popupState.close,
+        icon: /* @__PURE__ */ React72.createElement(AdjustmentsIcon, { fontSize: SIZE8 })
+      }
+    ),
+    /* @__PURE__ */ React72.createElement(Divider4, null),
+    /* @__PURE__ */ React72.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React72.createElement(TransformOriginControl, null)), /* @__PURE__ */ React72.createElement(Box13, { sx: { my: 0.5 } }, /* @__PURE__ */ React72.createElement(Divider4, null)), /* @__PURE__ */ React72.createElement(ChildrenPerspectiveControl, null))
+  );
+};
+
 // src/controls/transform-control/transform-content.tsx
 import * as React79 from "react";
-import { Box as Box13, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { Box as Box14, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
 import { __ as __39 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
 import * as React74 from "react";
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
@@ -4763,7 +4733,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef15(null), useRef15(null), useRef15(null)];
+  const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
   return /* @__PURE__ */ React74.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React74.createElement(
     AxisRow,
     {
@@ -4778,7 +4748,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 import * as React75 from "react";
-import { useRef as useRef16 } from "react";
+import { useRef as useRef17 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid23 } from "@elementor/ui";
@@ -4803,7 +4773,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
+  const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
   return /* @__PURE__ */ React75.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React75.createElement(PropProvider, { ...context }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React75.createElement(
     AxisRow,
     {
@@ -4817,7 +4787,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 import * as React77 from "react";
-import { useRef as useRef17 } from "react";
+import { useRef as useRef18 } from "react";
 import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
 import { Grid as Grid25 } from "@elementor/ui";
@@ -4850,13 +4820,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
+  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
   return /* @__PURE__ */ React77.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...context }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React77.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 import * as React78 from "react";
-import { useRef as useRef18 } from "react";
+import { useRef as useRef19 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
 import { Grid as Grid26 } from "@elementor/ui";
@@ -4876,7 +4846,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
+  const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
   return /* @__PURE__ */ React78.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(PropProvider, { ...context }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React78.createElement(
     AxisRow,
     {
@@ -4889,7 +4859,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef19 } from "react";
+import { useRef as useRef20 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -4921,7 +4891,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef19({
+  const valuesHistory = useRef20({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -4982,7 +4952,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React79.createElement(PopoverContent, null, /* @__PURE__ */ React79.createElement(Box13, { sx: { width: "100%" } }, /* @__PURE__ */ React79.createElement(Box13, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React79.createElement(PopoverContent, null, /* @__PURE__ */ React79.createElement(Box14, { sx: { width: "100%" } }, /* @__PURE__ */ React79.createElement(Box14, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React79.createElement(
     Tabs2,
     {
       size: "small",
@@ -5022,7 +4992,7 @@ var TransformIcon = ({ value }) => {
 
 // src/controls/transform-control/transform-label.tsx
 import * as React81 from "react";
-import { Box as Box14 } from "@elementor/ui";
+import { Box as Box15 } from "@elementor/ui";
 import { __ as __40 } from "@wordpress/i18n";
 var transformMoveValue = (value) => Object.values(value).map((axis) => {
   const size = axis?.value?.size ?? defaultValues.move.size;
@@ -5056,16 +5026,25 @@ var TransformLabel = (props) => {
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React81.createElement(Box14, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React81.createElement(Box15, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
+var SIZE9 = "tiny";
 var TransformRepeaterControl = createControl(() => {
   const context = useBoundProp(transformPropTypeUtil);
-  return /* @__PURE__ */ React82.createElement(PropProvider, { ...context }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React82.createElement(Repeater2, null)));
+  const headerRef = useRef21(null);
+  const popupState = usePopupState7({ variant: "popover" });
+  const repeaterBindKey = "transform-functions";
+  injectIntoRepeaterHeaderActions({
+    id: "transform-base-control",
+    component: () => /* @__PURE__ */ React82.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey }),
+    options: { overwrite: true }
+  });
+  return /* @__PURE__ */ React82.createElement(PropProvider, { ...context }, /* @__PURE__ */ React82.createElement(TransformBaseControl, { popupState, anchorRef: headerRef }), /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: repeaterBindKey }, /* @__PURE__ */ React82.createElement(Repeater2, { headerRef })));
 });
 var ToolTip = /* @__PURE__ */ React82.createElement(
-  Box15,
+  Box16,
   {
     component: "span",
     "aria-label": void 0,
@@ -5074,7 +5053,7 @@ var ToolTip = /* @__PURE__ */ React82.createElement(
   /* @__PURE__ */ React82.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
   /* @__PURE__ */ React82.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __41("You can use each kind of transform only once per element.", "elementor"))
 );
-var Repeater2 = () => {
+var Repeater2 = ({ headerRef }) => {
   const transformFunctionsContext = useBoundProp(transformFunctionsPropTypeUtil);
   const availableValues = [initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue];
   const { value: transformValues } = transformFunctionsContext;
@@ -5088,7 +5067,7 @@ var Repeater2 = () => {
       initial: getInitialValue() ?? initialTransformValue,
       propTypeUtil: transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React82.createElement(Header, { label: __41("Transform", "elementor") }, /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React82.createElement(Header, { label: __41("Transform", "elementor"), ref: headerRef }, /* @__PURE__ */ React82.createElement(
       TooltipAddItemAction,
       {
         disabled: shouldDisableAddItem,
@@ -5100,24 +5079,31 @@ var Repeater2 = () => {
     /* @__PURE__ */ React82.createElement(EditItemPopover, null, /* @__PURE__ */ React82.createElement(TransformContent, null))
   ));
 };
+var TransformBasePopoverTrigger = ({
+  popupState,
+  repeaterBindKey
+}) => {
+  const { bind } = useBoundProp();
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React82.createElement(IconButton8, { size: SIZE9, "aria-label": __41("Base Transform", "elementor"), ...bindTrigger5(popupState) }, /* @__PURE__ */ React82.createElement(AdjustmentsIcon2, { fontSize: SIZE9 }));
+};
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React85 from "react";
 import { useEffect as useEffect9, useState as useState15 } from "react";
 import { selectionSizePropTypeUtil as selectionSizePropTypeUtil2 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle2, Box as Box17, Typography as Typography7 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle as AlertTitle2, Box as Box18, Typography as Typography7 } from "@elementor/ui";
 import { __ as __44 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React83 from "react";
-import { useMemo as useMemo7, useRef as useRef20 } from "react";
+import { useMemo as useMemo7, useRef as useRef22 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
-    const rowRef = useRef20(null);
+    const rowRef = useRef22(null);
     const currentSizeConfig = useMemo7(() => {
       switch (value.selection.$$type) {
         case "key-value":
@@ -5167,10 +5153,10 @@ var transitionsItemsList = transitionProperties.map((category) => ({
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React84 from "react";
-import { useRef as useRef21 } from "react";
+import { useRef as useRef23 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box16, Popover as Popover7, UnstableTag as UnstableTag4, usePopupState as usePopupState8 } from "@elementor/ui";
+import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box17, Popover as Popover7, UnstableTag as UnstableTag4, usePopupState as usePopupState8 } from "@elementor/ui";
 import { __ as __43 } from "@wordpress/i18n";
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
@@ -5198,7 +5184,7 @@ var TransitionSelector = ({ recentlyUsedList = [] }) => {
     value: { value: transitionValue },
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef21(null);
+  const defaultRef = useRef23(null);
   const popoverState = usePopupState8({ variant: "popover" });
   const getItemList = () => {
     const recentItems = recentlyUsedList.map((item) => findByValue(item)).filter((item) => !!item);
@@ -5239,7 +5225,7 @@ var TransitionSelector = ({ recentlyUsedList = [] }) => {
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React84.createElement(Box16, { ref: defaultRef }, /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React84.createElement(Box17, { ref: defaultRef }, /* @__PURE__ */ React84.createElement(
     UnstableTag4,
     {
       variant: "outlined",
@@ -5321,7 +5307,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React85.createElement(
     icon: /* @__PURE__ */ React85.createElement(InfoCircleFilledIcon3, null)
   },
   /* @__PURE__ */ React85.createElement(AlertTitle2, null, __44("Transitions", "elementor")),
-  /* @__PURE__ */ React85.createElement(Box17, { component: "span" }, /* @__PURE__ */ React85.createElement(Typography7, { variant: "body2" }, __44("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React85.createElement(Box18, { component: "span" }, /* @__PURE__ */ React85.createElement(Typography7, { variant: "body2" }, __44("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -5362,8 +5348,8 @@ 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 Box18, Button as Button5, styled as styled8 } from "@elementor/ui";
-var EditorWrapper = styled8(Box18)`
+import { Box as Box19, Button as Button5, styled as styled8 } from "@elementor/ui";
+var EditorWrapper = styled8(Box19)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;