@elementor/editor-controls 0.34.2 → 0.36.0

package/dist/index.mjs

@@ -187,8 +187,8 @@ var resolveUnionPropType = (propType, key) => {
 // src/components/control-form-label.tsx
 import * as React3 from "react";
 import { FormLabel } from "@elementor/ui";
-var ControlFormLabel = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, children);
+var ControlFormLabel = (props) => {
+  return /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny", ...props });
 };
 
 // src/create-control.tsx
@@ -393,7 +393,7 @@ var ImageControl = createControl(
     const propContext = useBoundProp(imagePropTypeUtil);
     const { data: allowSvgUpload } = useUnfilteredFilesUpload();
     const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
-    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, ["all", "media"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", __2("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })) : null, ["all", "sizes"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes })))) : null));
+    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, ["all", "media"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, __2("Image", "elementor")), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })) : null, ["all", "sizes"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, resolutionLabel)), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes })))) : null));
   }
 );
 
@@ -805,11 +805,12 @@ import {
 var SortableProvider = (props) => {
   return /* @__PURE__ */ React22.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React22.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
-var SortableItem = ({ id, children }) => {
+var SortableItem = ({ id, children, disabled }) => {
   return /* @__PURE__ */ React22.createElement(
     UnstableSortableItem,
     {
       id,
+      disabled,
       render: ({
         itemProps,
         triggerProps,
@@ -818,7 +819,7 @@ var SortableItem = ({ id, children }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React22.createElement(StyledListItem, { ...itemProps, style: itemStyle }, /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle }));
+        return /* @__PURE__ */ React22.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
@@ -946,7 +947,6 @@ var Repeater = ({
       });
     });
   };
-  const ItemWrapper = disabled ? React23.Fragment : SortableItem;
   return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
     Stack5,
     {
@@ -974,7 +974,7 @@ var Repeater = ({
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React23.createElement(ItemWrapper, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React23.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled }, /* @__PURE__ */ React23.createElement(
       RepeaterItem,
       {
         disabled,
@@ -1060,7 +1060,7 @@ var usePopover = (openOnMount, onOpen) => {
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue, disabled }, /* @__PURE__ */ React24.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -1082,8 +1082,8 @@ var ItemContent = ({ anchorEl, bind }) => {
   return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Content, { anchorEl }));
 };
 var Content = ({ anchorEl }) => {
-  const { propType, value, setValue } = useBoundProp(shadowPropTypeUtil);
-  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
+  const context = useBoundProp(shadowPropTypeUtil);
+  return /* @__PURE__ */ React24.createElement(PropProvider, { ...context }, /* @__PURE__ */ React24.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "color", label: __5("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
     SelectControl,
     {
       options: [
@@ -1439,7 +1439,7 @@ import { __ as __6 } from "@wordpress/i18n";
 import * as React29 from "react";
 import { Stack as Stack6 } from "@elementor/ui";
 var ControlLabel = ({ children }) => {
-  return /* @__PURE__ */ React29.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 1 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React29.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React29.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React29.createElement(ControlAdornments, null));
 };
 
 // src/controls/equal-unequal-sizes-control.tsx
@@ -1469,7 +1469,7 @@ function EqualUnequalSizesControl({
     setValue: setMultiSizeValue,
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil2);
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil2);
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
@@ -1496,8 +1496,9 @@ function EqualUnequalSizesControl({
     }
     return splitEqualValue() ?? null;
   };
+  const isShowingGeneralIndicator = !isExperimentActive("e_v_3_30") || !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label)), /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React30.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React30.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React30.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React30.createElement(ControlLabel, null, label)), /* @__PURE__ */ React30.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React30.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React30.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -1505,8 +1506,7 @@ function EqualUnequalSizesControl({
       sx: { marginLeft: "auto" },
       ...bindToggle(popupState),
       selected: popupState.isOpen,
-      "aria-label": tooltipLabel,
-      disabled: multiSizeDisabled || sizeDisabled
+      "aria-label": tooltipLabel
     },
     icon
   ))))), /* @__PURE__ */ React30.createElement(
@@ -1527,7 +1527,16 @@ function EqualUnequalSizesControl({
         paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React30.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5, pt: 2.5, pb: 3 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[3] }))))
+    /* @__PURE__ */ React30.createElement(
+      PropProvider,
+      {
+        propType: multiSizePropType,
+        value: getMultiSizeValues(),
+        setValue: setNestedProp,
+        disabled: multiSizeDisabled
+      },
+      /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5, pt: 2.5, pb: 3 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React30.createElement(MultiSizeValueControl, { item: items[3] })))
+    )
   ));
 }
 var MultiSizeValueControl = ({ item }) => {
@@ -1574,63 +1583,75 @@ var LinkedDimensionsControl = createControl(
     const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
     const linkedLabel = __7("Link %s", "elementor").replace("%s", tooltipLabel);
     const unlinkedLabel = __7("Unlink %s", "elementor").replace("%s", tooltipLabel);
-    return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
-      ToggleButton3,
+    const disabled = sizeDisabled || dimensionsDisabled;
+    return /* @__PURE__ */ React31.createElement(
+      PropProvider,
       {
-        "aria-label": isLinked ? unlinkedLabel : linkedLabel,
-        size: "tiny",
-        value: "check",
-        selected: isLinked,
-        sx: { marginLeft: "auto" },
-        onChange: onLinkToggle,
-        disabled: sizeDisabled || dimensionsDisabled
+        propType,
+        value: dimensionsValue,
+        setValue: setDimensionsValue,
+        disabled
       },
-      /* @__PURE__ */ React31.createElement(LinkedIcon, { fontSize: "tiny" })
-    ))), /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-start", label: __7("Top", "elementor") })), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "block-start",
-        startIcon: /* @__PURE__ */ React31.createElement(SideTopIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Label,
-      {
-        bind: "inline-end",
-        label: isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor")
-      }
-    )), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "inline-end",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(SideRightIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    )))), /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-end", label: __7("Bottom", "elementor") })), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "block-end",
-        startIcon: /* @__PURE__ */ React31.createElement(SideBottomIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Label,
-      {
-        bind: "inline-start",
-        label: isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor")
-      }
-    )), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "inline-start",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(SideLeftIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    )))));
+      /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
+        ToggleButton3,
+        {
+          "aria-label": isLinked ? unlinkedLabel : linkedLabel,
+          size: "tiny",
+          value: "check",
+          selected: isLinked,
+          sx: { marginLeft: "auto" },
+          onChange: onLinkToggle,
+          disabled
+        },
+        /* @__PURE__ */ React31.createElement(LinkedIcon, { fontSize: "tiny" })
+      ))),
+      /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-start", label: __7("Top", "elementor") })), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "block-start",
+          startIcon: /* @__PURE__ */ React31.createElement(SideTopIcon, { fontSize: "tiny" }),
+          isLinked,
+          extendedValues
+        }
+      ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Label,
+        {
+          bind: "inline-end",
+          label: isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor")
+        }
+      )), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "inline-end",
+          startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(SideRightIcon, { fontSize: "tiny" }),
+          isLinked,
+          extendedValues
+        }
+      )))),
+      /* @__PURE__ */ React31.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-end", label: __7("Bottom", "elementor") })), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "block-end",
+          startIcon: /* @__PURE__ */ React31.createElement(SideBottomIcon, { fontSize: "tiny" }),
+          isLinked,
+          extendedValues
+        }
+      ))), /* @__PURE__ */ React31.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Label,
+        {
+          bind: "inline-start",
+          label: isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor")
+        }
+      )), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "inline-start",
+          isLinked,
+          extendedValues,
+          startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(SideLeftIcon, { fontSize: "tiny" })
+        }
+      ))))
+    );
   }
 );
 var Control3 = ({
@@ -1653,32 +1674,38 @@ var Label = ({ label, bind }) => {
 };
 
 // src/controls/font-family-control/font-family-control.tsx
-import * as React32 from "react";
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import * as React33 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
-import { ChevronDownIcon as ChevronDownIcon2, SearchIcon, TextIcon, XIcon as XIcon2 } from "@elementor/icons";
+import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
+import { bindPopover as bindPopover3, bindTrigger as bindTrigger3, Popover as Popover3, UnstableTag as UnstableTag2, usePopupState as usePopupState4 } from "@elementor/ui";
+
+// src/components/font-family-selector.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import * as React32 from "react";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { SearchIcon, TextIcon } from "@elementor/icons";
 import {
-  bindPopover as bindPopover3,
-  bindTrigger as bindTrigger3,
   Box as Box3,
   Divider as Divider2,
-  IconButton as IconButton2,
   InputAdornment as InputAdornment3,
   Link,
   MenuList,
   MenuSubheader,
-  Popover as Popover3,
   Stack as Stack9,
   styled as styled4,
   TextField as TextField5,
-  Typography as Typography3,
-  UnstableTag as UnstableTag2,
-  usePopupState as usePopupState4
+  Typography as Typography3
 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { __ as __8 } from "@wordpress/i18n";
 
+// src/controls/font-family-control/enqueue-font.tsx
+var enqueueFont = (fontFamily, context = "editor") => {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
+};
+
 // src/hooks/use-filtered-font-families.ts
 var useFilteredFontFamilies = (fontFamilies, searchValue) => {
   return fontFamilies.reduce((acc, category) => {
@@ -1695,98 +1722,76 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
   }, []);
 };
 
-// src/controls/font-family-control/enqueue-font.tsx
-var enqueueFont = (fontFamily, context = "editor") => {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
-};
-
-// src/controls/font-family-control/font-family-control.tsx
+// src/components/font-family-selector.tsx
 var SIZE2 = "tiny";
-var FontFamilyControl = createControl(({ fontFamilies }) => {
+var FontFamilySelector = ({
+  fontFamilies,
+  fontFamily,
+  onFontFamilyChange,
+  onClose
+}) => {
   const [searchValue, setSearchValue] = useState5("");
-  const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(stringPropTypeUtil6);
-  const popoverState = usePopupState4({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
   const handleClose = () => {
     setSearchValue("");
-    popoverState.close();
+    onClose();
   };
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
-    UnstableTag2,
+  return /* @__PURE__ */ React32.createElement(Stack9, null, /* @__PURE__ */ React32.createElement(
+    PopoverHeader,
     {
-      variant: "outlined",
-      label: fontFamily,
-      endIcon: /* @__PURE__ */ React32.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
-      ...bindTrigger3(popoverState),
-      fullWidth: true,
-      disabled
+      title: __8("Font Family", "elementor"),
+      onClose: handleClose,
+      icon: /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: SIZE2 })
     }
-  )), /* @__PURE__ */ React32.createElement(
-    Popover3,
+  ), /* @__PURE__ */ React32.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
+    TextField5,
     {
-      disablePortal: true,
-      disableScrollLock: true,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...bindPopover3(popoverState),
-      onClose: handleClose
-    },
-    /* @__PURE__ */ React32.createElement(Stack9, null, /* @__PURE__ */ React32.createElement(Stack9, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React32.createElement(Typography3, { variant: "subtitle2" }, __8("Font Family", "elementor")), /* @__PURE__ */ React32.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React32.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React32.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
-      TextField5,
-      {
-        autoFocus: true,
-        fullWidth: true,
-        size: SIZE2,
-        value: searchValue,
-        placeholder: __8("Search", "elementor"),
-        onChange: handleSearch,
-        InputProps: {
-          startAdornment: /* @__PURE__ */ React32.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React32.createElement(SearchIcon, { fontSize: SIZE2 }))
-        }
+      autoFocus: true,
+      fullWidth: true,
+      size: SIZE2,
+      value: searchValue,
+      placeholder: __8("Search", "elementor"),
+      onChange: handleSearch,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React32.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React32.createElement(SearchIcon, { fontSize: SIZE2 }))
       }
-    )), /* @__PURE__ */ React32.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React32.createElement(
-      FontList,
-      {
-        fontListItems: filteredFontFamilies,
-        setFontFamily,
-        handleClose,
-        fontFamily
+    }
+  )), /* @__PURE__ */ React32.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React32.createElement(
+    FontList,
+    {
+      fontListItems: filteredFontFamilies,
+      setFontFamily: onFontFamilyChange,
+      handleClose,
+      fontFamily
+    }
+  ) : /* @__PURE__ */ React32.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React32.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React32.createElement(Box3, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React32.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React32.createElement(
+    Typography3,
+    {
+      variant: "subtitle2",
+      color: "text.secondary",
+      sx: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center"
       }
-    ) : /* @__PURE__ */ React32.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React32.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React32.createElement(Box3, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React32.createElement(Typography3, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React32.createElement(
-      Typography3,
-      {
-        variant: "subtitle2",
-        color: "text.secondary",
-        sx: {
-          display: "flex",
-          width: "100%",
-          justifyContent: "center"
-        }
-      },
-      /* @__PURE__ */ React32.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React32.createElement(
-        "span",
-        {
-          style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
-        },
-        searchValue
-      ),
-      /* @__PURE__ */ React32.createElement("span", null, "\u201D.")
-    )), /* @__PURE__ */ React32.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React32.createElement(
-      Link,
-      {
-        color: "secondary",
-        variant: "caption",
-        component: "button",
-        onClick: () => setSearchValue("")
-      },
-      __8("Clear & try again", "elementor")
-    )))))
-  ));
-});
+    },
+    /* @__PURE__ */ React32.createElement("span", null, "\u201C"),
+    /* @__PURE__ */ React32.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
+    /* @__PURE__ */ React32.createElement("span", null, "\u201D.")
+  )), /* @__PURE__ */ React32.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React32.createElement(
+    Link,
+    {
+      color: "secondary",
+      variant: "caption",
+      component: "button",
+      onClick: () => setSearchValue("")
+    },
+    __8("Clear & try again", "elementor")
+  )))));
+};
 var LIST_ITEM_HEIGHT = 36;
 var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
@@ -1920,14 +1925,49 @@ var useDebounce = (fn, delay) => {
   return debouncedFn;
 };
 
+// src/controls/font-family-control/font-family-control.tsx
+var SIZE3 = "tiny";
+var FontFamilyControl = createControl(({ fontFamilies }) => {
+  const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp(stringPropTypeUtil6);
+  const popoverState = usePopupState4({ variant: "popover" });
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
+    UnstableTag2,
+    {
+      variant: "outlined",
+      label: fontFamily,
+      endIcon: /* @__PURE__ */ React33.createElement(ChevronDownIcon2, { fontSize: SIZE3 }),
+      ...bindTrigger3(popoverState),
+      fullWidth: true,
+      disabled
+    }
+  )), /* @__PURE__ */ React33.createElement(
+    Popover3,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      ...bindPopover3(popoverState)
+    },
+    /* @__PURE__ */ React33.createElement(
+      FontFamilySelector,
+      {
+        fontFamilies,
+        fontFamily,
+        onFontFamilyChange: setFontFamily,
+        onClose: popoverState.close
+      }
+    )
+  ));
+});
+
 // src/controls/url-control.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue, disabled } = useBoundProp(urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
     TextField6,
     {
       size: "tiny",
@@ -1941,7 +1981,7 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { useMemo as useMemo2, useState as useState6 } from "react";
 import { getLinkInLinkRestriction, selectElement } from "@elementor/editor-elements";
 import {
@@ -1955,18 +1995,18 @@ import { InfoTipCard } from "@elementor/editor-ui";
 import { httpService as httpService2 } from "@elementor/http-client";
 import { AlertTriangleIcon, MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
-import { Box as Box5, Collapse, Grid as Grid7, IconButton as IconButton4, Infotip, Stack as Stack10, Switch } from "@elementor/ui";
+import { Box as Box5, Collapse, Grid as Grid7, IconButton as IconButton3, Infotip, Stack as Stack10, Switch } from "@elementor/ui";
 import { debounce as debounce2 } from "@elementor/utils";
 import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import { forwardRef as forwardRef2 } from "react";
-import { XIcon as XIcon3 } from "@elementor/icons";
+import { XIcon as XIcon2 } from "@elementor/icons";
 import {
   Autocomplete as AutocompleteBase,
   Box as Box4,
-  IconButton as IconButton3,
+  IconButton as IconButton2,
   InputAdornment as InputAdornment4,
   TextField as TextField7
 } from "@elementor/ui";
@@ -1986,7 +2026,7 @@ var Autocomplete = forwardRef2((props, ref) => {
   const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
   const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
   const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     AutocompleteBase,
     {
       ...restProps,
@@ -2004,8 +2044,8 @@ var Autocomplete = forwardRef2((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React34.createElement(Box4, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React34.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React35.createElement(Box4, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React35.createElement(
         TextInput,
         {
           params,
@@ -2028,7 +2068,7 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     TextField7,
     {
       ...params,
@@ -2041,7 +2081,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React34.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React35.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -2050,7 +2090,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React34.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React34.createElement(IconButton3, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React34.createElement(XIcon3, { fontSize: params.size })));
+}) => /* @__PURE__ */ React35.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React35.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React35.createElement(XIcon2, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2072,7 +2112,7 @@ function _factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/controls/link-control.tsx
-var SIZE3 = "tiny";
+var SIZE4 = "tiny";
 var learnMoreButton = {
   label: __9("Learn More", "elementor"),
   href: "https://go.elementor.com/element-link-inside-link-infotip"
@@ -2149,7 +2189,7 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React35.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React35.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React36.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(
     Stack10,
     {
       direction: "row",
@@ -2159,8 +2199,8 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React35.createElement(ControlFormLabel, null, __9("Link", "elementor")),
-    /* @__PURE__ */ React35.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __9("Link", "elementor")),
+    /* @__PURE__ */ React36.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React36.createElement(
       ToggleIconControl,
       {
         disabled: shouldDisableAddingLink,
@@ -2169,7 +2209,7 @@ var LinkControl = createControl((props) => {
         label: __9("Toggle link", "elementor")
       }
     ))
-  ), /* @__PURE__ */ React35.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React35.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React35.createElement(ControlActions, null, /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React36.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React36.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React36.createElement(ControlActions, null, /* @__PURE__ */ React36.createElement(
     Autocomplete,
     {
       options,
@@ -2180,10 +2220,10 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React35.createElement(SwitchControl, { disabled: !value }))))));
+  ))), /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React36.createElement(SwitchControl, { disabled: propContext.disabled || !value }))))));
 });
 var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React35.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React35.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React35.createElement(PlusIcon2, { fontSize: SIZE3 }));
+  return /* @__PURE__ */ React36.createElement(IconButton3, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React36.createElement(MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React36.createElement(PlusIcon2, { fontSize: SIZE4 }));
 };
 var SwitchControl = ({ disabled }) => {
   const { value = false, setValue } = useBoundProp(booleanPropTypeUtil);
@@ -2195,7 +2235,7 @@ var SwitchControl = ({ disabled }) => {
       opacity: 0
     }
   } : {};
-  return /* @__PURE__ */ React35.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React35.createElement(Grid7, { item: true }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React35.createElement(Grid7, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React35.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
+  return /* @__PURE__ */ React36.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React36.createElement(Grid7, { item: true }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React36.createElement(Grid7, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React36.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -2232,15 +2272,15 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
       selectElement(elementId);
     }
   };
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React35.createElement(
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React36.createElement(
     Infotip,
     {
       placement: "right",
-      content: /* @__PURE__ */ React35.createElement(
+      content: /* @__PURE__ */ React36.createElement(
         InfoTipCard,
         {
           content: INFOTIP_CONTENT[reason],
-          svgIcon: /* @__PURE__ */ React35.createElement(AlertTriangleIcon, null),
+          svgIcon: /* @__PURE__ */ React36.createElement(AlertTriangleIcon, null),
           learnMoreButton,
           ctaButton: {
             label: __9("Take me there", "elementor"),
@@ -2249,16 +2289,16 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
         }
       )
     },
-    /* @__PURE__ */ React35.createElement(Box5, null, children)
-  ) : /* @__PURE__ */ React35.createElement(React35.Fragment, null, children);
+    /* @__PURE__ */ React36.createElement(Box5, null, children)
+  ) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, children);
 };
 var INFOTIP_CONTENT = {
-  descendant: /* @__PURE__ */ React35.createElement(React35.Fragment, null, __9("To add a link to this container,", "elementor"), /* @__PURE__ */ React35.createElement("br", null), __9("first remove the link from the elements inside of it.", "elementor")),
-  ancestor: /* @__PURE__ */ React35.createElement(React35.Fragment, null, __9("To add a link to this element,", "elementor"), /* @__PURE__ */ React35.createElement("br", null), __9("first remove the link from its parent container.", "elementor"))
+  descendant: /* @__PURE__ */ React36.createElement(React36.Fragment, null, __9("To add a link to this container,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), __9("first remove the link from the elements inside of it.", "elementor")),
+  ancestor: /* @__PURE__ */ React36.createElement(React36.Fragment, null, __9("To add a link to this element,", "elementor"), /* @__PURE__ */ React36.createElement("br", null), __9("first remove the link from its parent container.", "elementor"))
 };
 
 // src/controls/gap-control.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid8, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
@@ -2287,7 +2327,8 @@ var GapControl = createControl(({ label }) => {
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
   const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
-  return /* @__PURE__ */ React36.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React36.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(ControlLabel, null, label), /* @__PURE__ */ React36.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React36.createElement(
+  const disabled = sizeDisabled || directionDisabled;
+  return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React37.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label), /* @__PURE__ */ React37.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
     ToggleButton4,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2296,20 +2337,20 @@ var GapControl = createControl(({ label }) => {
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: onLinkToggle,
-      disabled: sizeDisabled || directionDisabled
+      disabled
     },
-    /* @__PURE__ */ React36.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React36.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React36.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React36.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(Control4, { bind: "row", isLinked })))));
+    /* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React37.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React37.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "row", isLinked })))));
 });
 var Control4 = ({ bind, isLinked }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React36.createElement(SizeControl, null);
+    return /* @__PURE__ */ React37.createElement(SizeControl, null);
   }
-  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(SizeControl, null));
+  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(SizeControl, null));
 };
 
 // src/controls/aspect-ratio-control.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import { useState as useState7 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil8 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
@@ -2361,7 +2402,7 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React37.createElement(Stack12, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React37.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(Stack12, { direction: "column", pt: 2, gap: 2 }, /* @__PURE__ */ React38.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, label)), /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
     Select2,
     {
       size: "tiny",
@@ -2373,9 +2414,9 @@ var AspectRatioControl = createControl(({ label }) => {
       fullWidth: true
     },
     [...RATIO_OPTIONS, { label: __11("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React37.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React38.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React37.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+  ))), isCustom && /* @__PURE__ */ React38.createElement(Grid9, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
     TextField8,
     {
       size: "tiny",
@@ -2385,10 +2426,10 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React37.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React38.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React37.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(
+  )), /* @__PURE__ */ React38.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
     TextField8,
     {
       size: "tiny",
@@ -2398,14 +2439,14 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React37.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React38.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
-  ))));
+  )))));
 });
 
 // src/controls/svg-media-control.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { useState as useState9 } from "react";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
@@ -2414,7 +2455,7 @@ import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWp
 import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { useState as useState8 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import {
@@ -2467,9 +2508,9 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React38.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React38.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React39.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React39.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React38.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React38.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React38.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React38.createElement(Divider3, null), /* @__PURE__ */ React38.createElement(DialogContent, null, /* @__PURE__ */ React38.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React38.createElement(React38.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React38.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React38.createElement(DialogActions, null, /* @__PURE__ */ React38.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __12("Cancel", "elementor")), /* @__PURE__ */ React38.createElement(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React39.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(Divider3, null), /* @__PURE__ */ React39.createElement(DialogContent, null, /* @__PURE__ */ React39.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React39.createElement(React39.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React39.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(DialogActions, null, /* @__PURE__ */ React39.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __12("Cancel", "elementor")), /* @__PURE__ */ React39.createElement(
   Button3,
   {
     size: "medium",
@@ -2478,9 +2519,9 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React38.createElement(CircularProgress2, { size: 24 }) : __12("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React39.createElement(CircularProgress2, { size: 24 }) : __12("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React38.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React38.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React38.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React38.createElement(Divider3, null), /* @__PURE__ */ React38.createElement(DialogContent, null, /* @__PURE__ */ React38.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React38.createElement(DialogActions, null, /* @__PURE__ */ React38.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __12("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React39.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React39.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React39.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React39.createElement(Divider3, null), /* @__PURE__ */ React39.createElement(DialogContent, null, /* @__PURE__ */ React39.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React39.createElement(DialogActions, null, /* @__PURE__ */ React39.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __12("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
@@ -2541,7 +2582,7 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React39.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React39.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React39.createElement(ControlFormLabel, null, " ", __13("SVG", "elementor"), " "), /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React39.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React39.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React40.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React40.createElement(ControlFormLabel, null, " ", __13("SVG", "elementor"), " "), /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React40.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React40.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React40.createElement(
     CardMedia2,
     {
       component: "img",
@@ -2549,7 +2590,7 @@ var SvgMediaControl = createControl(() => {
       alt: __13("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React39.createElement(
+  )), /* @__PURE__ */ React40.createElement(
     CardOverlay2,
     {
       sx: {
@@ -2558,7 +2599,7 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React39.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React40.createElement(
       Button4,
       {
         size: "tiny",
@@ -2567,13 +2608,13 @@ var SvgMediaControl = createControl(() => {
         onClick: () => handleClick(MODE_BROWSE)
       },
       __13("Select SVG", "elementor")
-    ), /* @__PURE__ */ React39.createElement(
+    ), /* @__PURE__ */ React40.createElement(
       Button4,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React39.createElement(UploadIcon2, null),
+        startIcon: /* @__PURE__ */ React40.createElement(UploadIcon2, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
       __13("Upload", "elementor")
@@ -2582,14 +2623,14 @@ var SvgMediaControl = createControl(() => {
 });
 
 // src/controls/background-control/background-control.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
 import { Grid as Grid15 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
@@ -2605,7 +2646,7 @@ import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -2652,7 +2693,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(ControlActions, null, /* @__PURE__ */ React41.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -2677,7 +2718,7 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid10 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
@@ -2685,22 +2726,22 @@ var attachmentControlOptions = [
   {
     value: "fixed",
     label: __14("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: __14("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React41.createElement(PopoverGridContainer, null, /* @__PURE__ */ React41.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, __14("Attachment", "elementor"))), /* @__PURE__ */ React41.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React41.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, __14("Attachment", "elementor"))), /* @__PURE__ */ React42.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
@@ -2730,55 +2771,56 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React42.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, __15("Position", "elementor"))), /* @__PURE__ */ React42.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, __15("Position", "elementor"))), /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React43.createElement(
     Select3,
     {
+      fullWidth: true,
       size: "tiny",
-      value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
       onChange: handlePositionChange,
-      fullWidth: true
+      disabled: stringPropContext.disabled,
+      value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React42.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React42.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React42.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React42.createElement(SizeControl, { startIcon: /* @__PURE__ */ React42.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React43.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React43.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(Grid11, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React43.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React43 from "react";
-import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
+import * as React44 from "react";
+import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
 import { Grid as Grid12 } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
     label: __16("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: __16("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: __16("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: __16("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(XIcon4, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, __16("Repeat", "elementor"))), /* @__PURE__ */ React43.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, __16("Repeat", "elementor"))), /* @__PURE__ */ React44.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil11 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -2794,25 +2836,25 @@ var sizeControlOptions = [
   {
     value: "auto",
     label: __17("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: __17("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: __17("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: __17("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -2827,24 +2869,25 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React44.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, __17("Size", "elementor"))), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __17("Size", "elementor"))), /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React45.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
       items: sizeControlOptions,
-      value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
-      onChange: handleSizeChange
+      onChange: handleSizeChange,
+      disabled: stringPropContext.disabled,
+      value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React44.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React44.createElement(PopoverGridContainer, null, /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React44.createElement(
+  )))), isCustom ? /* @__PURE__ */ React45.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React45.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React44.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React45.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React44.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React44.createElement(
+  ))), /* @__PURE__ */ React45.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React45.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React44.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React45.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   )))))) : null);
@@ -2951,7 +2994,7 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue, disabled } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: overlayValues, setValue, disabled }, /* @__PURE__ */ React46.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -2969,7 +3012,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
   ));
 });
 var ItemContent2 = ({ anchorEl = null, bind }) => {
-  return /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React45.createElement(Content2, { anchorEl }));
+  return /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React46.createElement(Content2, { anchorEl }));
 };
 var Content2 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
@@ -2977,7 +3020,7 @@ var Content2 = ({ anchorEl }) => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React45.createElement(Box6, { sx: { width: "100%" } }, /* @__PURE__ */ React45.createElement(Box6, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(Box6, { sx: { width: "100%" } }, /* @__PURE__ */ React46.createElement(Box6, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React46.createElement(
     Tabs,
     {
       size: "small",
@@ -2985,19 +3028,19 @@ var Content2 = ({ anchorEl }) => {
       ...getTabsProps(),
       "aria-label": __18("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React45.createElement(Tab, { label: __18("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React45.createElement(Tab, { label: __18("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React45.createElement(Tab, { label: __18("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React45.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React45.createElement(PopoverContent, null, /* @__PURE__ */ React45.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React45.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React45.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React45.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React45.createElement(PopoverContent, null, /* @__PURE__ */ React45.createElement(ColorOverlayContent, { anchorEl }))));
+    /* @__PURE__ */ React46.createElement(Tab, { label: __18("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React46.createElement(Tab, { label: __18("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React46.createElement(Tab, { label: __18("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React46.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React46.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React46.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React46.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React46.createElement(PopoverContent, null, /* @__PURE__ */ React46.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React45.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React46.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React45.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React46.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React45.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React46.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -3010,11 +3053,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React45.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     CardMedia3,
     {
       image: imageUrl,
@@ -3029,47 +3072,47 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React45.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React46.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React45.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React46.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React45.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React46.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React45.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React46.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React45.createElement("span", null, color);
+  return /* @__PURE__ */ React46.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React45.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React46.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React45.createElement("span", null, __18("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React46.createElement("span", null, __18("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React45.createElement("span", null, __18("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React46.createElement("span", null, __18("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React45.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React45.createElement(Grid14, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React45.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React46.createElement(Grid14, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React46.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(
     ImageControl,
     {
       resolutionLabel: __18("Resolution", "elementor"),
       sizes: backgroundResolutionOptions
     }
-  )))), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React45.createElement(BackgroundImageOverlayAttachment, null)));
+  )))), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React46.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator = styled6(UnstableColorIndicator2)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -3109,11 +3152,11 @@ var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
   const isUsingNestedProps = isExperimentActive3("e_v_3_30");
   const colorLabel = __19("Color", "elementor");
-  return /* @__PURE__ */ React46.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React46.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React46.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(Grid15, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React46.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React46.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React46.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ColorControl, null)))));
+  return /* @__PURE__ */ React47.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React47.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React47.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React47.createElement(Grid15, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid15, { item: true, xs: 6 }, isUsingNestedProps ? /* @__PURE__ */ React47.createElement(ControlLabel, null, colorLabel) : /* @__PURE__ */ React47.createElement(ControlFormLabel, null, colorLabel)), /* @__PURE__ */ React47.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ColorControl, null)))));
 });
 
 // src/controls/switch-control.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import { booleanPropTypeUtil as booleanPropTypeUtil2 } from "@elementor/editor-props";
 import { Switch as Switch2 } from "@elementor/ui";
 var SwitchControl2 = createControl(() => {
@@ -3121,7 +3164,7 @@ var SwitchControl2 = createControl(() => {
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React47.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small", disabled }));
+  return /* @__PURE__ */ React48.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React48.createElement(Switch2, { checked: !!value, onChange: handleChange, size: "small", disabled }));
 });
 export {
   AspectRatioControl,
@@ -3136,6 +3179,7 @@ export {
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
+  FontFamilySelector,
   GapControl,
   ImageControl,
   LinkControl,