@elementor/editor-controls 0.35.0 → 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 = ({
@@ -1661,11 +1682,11 @@ import { bindPopover as bindPopover3, bindTrigger as bindTrigger3, Popover as Po
 // src/components/font-family-selector.tsx
 import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
 import * as React32 from "react";
-import { SearchIcon, TextIcon, XIcon as XIcon2 } from "@elementor/icons";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { SearchIcon, TextIcon } from "@elementor/icons";
 import {
   Box as Box3,
   Divider as Divider2,
-  IconButton as IconButton2,
   InputAdornment as InputAdornment3,
   Link,
   MenuList,
@@ -1718,7 +1739,14 @@ var FontFamilySelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__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(
+  return /* @__PURE__ */ React32.createElement(Stack9, null, /* @__PURE__ */ React32.createElement(
+    PopoverHeader,
+    {
+      title: __8("Font Family", "elementor"),
+      onClose: handleClose,
+      icon: /* @__PURE__ */ React32.createElement(TextIcon, { fontSize: SIZE2 })
+    }
+  ), /* @__PURE__ */ React32.createElement(Box3, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
     TextField5,
     {
       autoFocus: true,
@@ -1898,6 +1926,7 @@ var useDebounce = (fn, delay) => {
 };
 
 // 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" });
@@ -1906,7 +1935,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React33.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React33.createElement(ChevronDownIcon2, { fontSize: SIZE3 }),
       ...bindTrigger3(popoverState),
       fullWidth: true,
       disabled
@@ -1966,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 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";
@@ -2061,7 +2090,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React35.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React35.createElement(IconButton3, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React35.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());
@@ -2083,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"
@@ -2191,10 +2220,10 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React36.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__ */ React36.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React36.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React36.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);
@@ -2298,6 +2327,7 @@ 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);
+  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,
     {
@@ -2307,7 +2337,7 @@ var GapControl = createControl(({ label }) => {
       selected: isLinked,
       sx: { marginLeft: "auto" },
       onChange: onLinkToggle,
-      disabled: sizeDisabled || directionDisabled
+      disabled
     },
     /* @__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 })))));
@@ -2744,10 +2774,11 @@ var BackgroundImageOverlayPosition = () => {
   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__ */ 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);
@@ -2755,7 +2786,7 @@ var BackgroundImageOverlayPosition = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
 import * as React44 from "react";
-import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
+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 = [
@@ -2780,7 +2811,7 @@ var repeatControlOptions = [
   {
     value: "no-repeat",
     label: __16("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(XIcon4, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -2843,8 +2874,9 @@ var BackgroundImageOverlaySize = () => {
     {
       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__ */ 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,
@@ -2962,7 +2994,7 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue, disabled } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: overlayValues, setValue, disabled }, /* @__PURE__ */ React46.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -3147,6 +3179,7 @@ export {
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
+  FontFamilySelector,
   GapControl,
   ImageControl,
   LinkControl,