@elementor/editor-controls 0.35.0 → 0.36.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @elementor/editor-controls
 
+## 0.36.0
+
+### Minor Changes
+
+- ea5d3df: Export fontFamily components from editor-controls and editing-panel
+- 80dbf43: Extract popover headers to a standalone component inside the Editor UI package.
+- 6eeb59e: Disable controls panel labels by permission.
+
+### Patch Changes
+
+- af4e938: Add indicators to group headers
+- Updated dependencies [80dbf43]
+  - @elementor/editor-ui@0.11.0
+
 ## 0.35.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode, ComponentType, PropsWithChildren } from 'react';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, PropType, CreateOptions } from '@elementor/editor-props';
-import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
+import { UnstableColorFieldProps, ToggleButtonProps, StackProps, FormLabelProps } from '@elementor/ui';
 import * as _elementor_locations from '@elementor/locations';
 
 type ImageControlProps = {
@@ -167,9 +167,15 @@ declare const BackgroundControl: ControlComponent<() => React.JSX.Element>;
 
 declare const SwitchControl: ControlComponent<() => React.JSX.Element>;
 
-declare const ControlFormLabel: ({ children }: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
+declare const ControlFormLabel: (props: FormLabelProps) => React.JSX.Element;
+
+type FontFamilySelectorProps = {
+    fontFamilies: FontCategory[];
+    fontFamily: string | null;
+    onFontFamilyChange: (fontFamily: string) => void;
+    onClose: () => void;
+};
+declare const FontFamilySelector: ({ fontFamilies, fontFamily, onFontFamilyChange, onClose, }: FontFamilySelectorProps) => React.JSX.Element;
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
@@ -273,4 +279,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };
+export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, FontFamilySelector, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactNode, ComponentType, PropsWithChildren } from 'react';
 import { StringPropValue, PropTypeUtil, PropValue, PropKey, SizePropValue, PropType, CreateOptions } from '@elementor/editor-props';
-import { UnstableColorFieldProps, ToggleButtonProps, StackProps } from '@elementor/ui';
+import { UnstableColorFieldProps, ToggleButtonProps, StackProps, FormLabelProps } from '@elementor/ui';
 import * as _elementor_locations from '@elementor/locations';
 
 type ImageControlProps = {
@@ -167,9 +167,15 @@ declare const BackgroundControl: ControlComponent<() => React.JSX.Element>;
 
 declare const SwitchControl: ControlComponent<() => React.JSX.Element>;
 
-declare const ControlFormLabel: ({ children }: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
+declare const ControlFormLabel: (props: FormLabelProps) => React.JSX.Element;
+
+type FontFamilySelectorProps = {
+    fontFamilies: FontCategory[];
+    fontFamily: string | null;
+    onFontFamilyChange: (fontFamily: string) => void;
+    onClose: () => void;
+};
+declare const FontFamilySelector: ({ fontFamilies, fontFamily, onFontFamilyChange, onClose, }: FontFamilySelectorProps) => React.JSX.Element;
 
 type AnyComponentType = ComponentType<any>;
 declare const brandSymbol: unique symbol;
@@ -273,4 +279,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue) => void];
 
-export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };
+export { AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedValue, type FontCategory, FontFamilyControl, FontFamilySelector, GapControl, ImageControl, LinkControl, LinkedDimensionsControl, NumberControl, PropKeyProvider, PropProvider, type PropProviderProps, SelectControl, type SetValue, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, UrlControl, createControlReplacementsRegistry, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, useBoundProp, useControlActions, useSyncExternalState };

package/dist/index.js

@@ -42,6 +42,7 @@ __export(index_exports, {
   ControlToggleButtonGroup: () => ControlToggleButtonGroup,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
   FontFamilyControl: () => FontFamilyControl,
+  FontFamilySelector: () => FontFamilySelector,
   GapControl: () => GapControl,
   ImageControl: () => ImageControl,
   LinkControl: () => LinkControl,
@@ -256,8 +257,8 @@ var resolveUnionPropType = (propType, key) => {
 // src/components/control-form-label.tsx
 var React3 = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
-var ControlFormLabel = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement(import_ui.FormLabel, { size: "tiny" }, children);
+var ControlFormLabel = (props) => {
+  return /* @__PURE__ */ React3.createElement(import_ui.FormLabel, { size: "tiny", ...props });
 };
 
 // src/create-control.tsx
@@ -462,7 +463,7 @@ var ImageControl = createControl(
     const propContext = useBoundProp(import_editor_props3.imagePropTypeUtil);
     const { data: allowSvgUpload } = useUnfilteredFilesUpload();
     const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
-    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, ["all", "media"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", (0, import_i18n2.__)("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })) : null, ["all", "sizes"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes })))) : null));
+    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, ["all", "media"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, (0, import_i18n2.__)("Image", "elementor")), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })) : null, ["all", "sizes"].includes(showMode) ? /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, resolutionLabel)), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes })))) : null));
   }
 );
 
@@ -856,11 +857,12 @@ var import_ui16 = require("@elementor/ui");
 var SortableProvider = (props) => {
   return /* @__PURE__ */ React22.createElement(import_ui16.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React22.createElement(import_ui16.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
-var SortableItem = ({ id, children }) => {
+var SortableItem = ({ id, children, disabled }) => {
   return /* @__PURE__ */ React22.createElement(
     import_ui16.UnstableSortableItem,
     {
       id,
+      disabled,
       render: ({
         itemProps,
         triggerProps,
@@ -869,7 +871,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 }));
       }
     }
   );
@@ -997,7 +999,6 @@ var Repeater = ({
       });
     });
   };
-  const ItemWrapper = disabled ? React23.Fragment : SortableItem;
   return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(
     import_ui17.Stack,
     {
@@ -1025,7 +1026,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,
@@ -1111,7 +1112,7 @@ var usePopover = (openOnMount, onOpen) => {
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(import_editor_props9.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,
@@ -1133,8 +1134,8 @@ var ItemContent = ({ anchorEl, bind }) => {
   return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Content, { anchorEl }));
 };
 var Content = ({ anchorEl }) => {
-  const { propType, value, setValue } = useBoundProp(import_editor_props9.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: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
+  const context = useBoundProp(import_editor_props9.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: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React24.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
     SelectControl,
     {
       options: [
@@ -1481,7 +1482,7 @@ var import_i18n6 = require("@wordpress/i18n");
 var React29 = __toESM(require("react"));
 var import_ui22 = require("@elementor/ui");
 var ControlLabel = ({ children }) => {
-  return /* @__PURE__ */ React29.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 1 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React29.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React29.createElement(import_ui22.Stack, { 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
@@ -1511,7 +1512,7 @@ function EqualUnequalSizesControl({
     setValue: setMultiSizeValue,
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(import_editor_props12.sizePropTypeUtil);
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props12.sizePropTypeUtil);
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
@@ -1538,8 +1539,9 @@ function EqualUnequalSizesControl({
     }
     return splitEqualValue() ?? null;
   };
+  const isShowingGeneralIndicator = !(0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30") || !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label)), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React30.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React30.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React30.createElement(ControlLabel, null, label)), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React30.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
     import_ui23.ToggleButton,
     {
       size: "tiny",
@@ -1547,8 +1549,7 @@ function EqualUnequalSizesControl({
       sx: { marginLeft: "auto" },
       ...(0, import_ui23.bindToggle)(popupState),
       selected: popupState.isOpen,
-      "aria-label": tooltipLabel,
-      disabled: multiSizeDisabled || sizeDisabled
+      "aria-label": tooltipLabel
     },
     icon
   ))))), /* @__PURE__ */ React30.createElement(
@@ -1569,7 +1570,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 }) => {
@@ -1616,63 +1626,75 @@ var LinkedDimensionsControl = createControl(
     const LinkedIcon = isLinked ? import_icons5.LinkIcon : import_icons5.DetachIcon;
     const linkedLabel = (0, import_i18n7.__)("Link %s", "elementor").replace("%s", tooltipLabel);
     const unlinkedLabel = (0, import_i18n7.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
-    return /* @__PURE__ */ React31.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
-      import_ui24.ToggleButton,
+    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(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-start", label: (0, import_i18n7.__)("Top", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "block-start",
-        startIcon: /* @__PURE__ */ React31.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Label,
-      {
-        bind: "inline-end",
-        label: isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor")
-      }
-    )), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "inline-end",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    )))), /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-end", label: (0, import_i18n7.__)("Bottom", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "block-end",
-        startIcon: /* @__PURE__ */ React31.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Label,
-      {
-        bind: "inline-start",
-        label: isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor")
-      }
-    )), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
-      Control3,
-      {
-        bind: "inline-start",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" }),
-        isLinked,
-        extendedValues
-      }
-    )))));
+      /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, isUsingNestedProps ? /* @__PURE__ */ React31.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React31.createElement(ControlLabel, null, label), /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(
+        import_ui24.ToggleButton,
+        {
+          "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(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-start", label: (0, import_i18n7.__)("Top", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "block-start",
+          startIcon: /* @__PURE__ */ React31.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" }),
+          isLinked,
+          extendedValues
+        }
+      ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Label,
+        {
+          bind: "inline-end",
+          label: isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor")
+        }
+      )), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "inline-end",
+          startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }),
+          isLinked,
+          extendedValues
+        }
+      )))),
+      /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(Label, { bind: "block-end", label: (0, import_i18n7.__)("Bottom", "elementor") })), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "block-end",
+          startIcon: /* @__PURE__ */ React31.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" }),
+          isLinked,
+          extendedValues
+        }
+      ))), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Label,
+        {
+          bind: "inline-start",
+          label: isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor")
+        }
+      )), /* @__PURE__ */ React31.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React31.createElement(
+        Control3,
+        {
+          bind: "inline-start",
+          isLinked,
+          extendedValues,
+          startIcon: isSiteRtl ? /* @__PURE__ */ React31.createElement(import_icons5.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React31.createElement(import_icons5.SideLeftIcon, { fontSize: "tiny" })
+        }
+      ))))
+    );
   }
 );
 var Control3 = ({
@@ -1703,6 +1725,7 @@ var import_ui26 = require("@elementor/ui");
 // src/components/font-family-selector.tsx
 var import_react13 = require("react");
 var React32 = __toESM(require("react"));
+var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
 var import_ui25 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
@@ -1748,7 +1771,14 @@ var FontFamilySelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React32.createElement(import_ui25.Stack, null, /* @__PURE__ */ React32.createElement(import_ui25.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React32.createElement(import_icons6.TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React32.createElement(import_ui25.Typography, { variant: "subtitle2" }, (0, import_i18n8.__)("Font Family", "elementor")), /* @__PURE__ */ React32.createElement(import_ui25.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React32.createElement(import_icons6.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React32.createElement(import_ui25.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React32.createElement(import_ui25.Stack, null, /* @__PURE__ */ React32.createElement(
+    import_editor_ui3.PopoverHeader,
+    {
+      title: (0, import_i18n8.__)("Font Family", "elementor"),
+      onClose: handleClose,
+      icon: /* @__PURE__ */ React32.createElement(import_icons6.TextIcon, { fontSize: SIZE2 })
+    }
+  ), /* @__PURE__ */ React32.createElement(import_ui25.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React32.createElement(
     import_ui25.TextField,
     {
       autoFocus: true,
@@ -1928,6 +1958,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(import_editor_props14.stringPropTypeUtil);
   const popoverState = (0, import_ui26.usePopupState)({ variant: "popover" });
@@ -1936,7 +1967,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React33.createElement(import_icons7.ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React33.createElement(import_icons7.ChevronDownIcon, { fontSize: SIZE3 }),
       ...(0, import_ui26.bindTrigger)(popoverState),
       fullWidth: true,
       disabled
@@ -1986,7 +2017,7 @@ var React36 = __toESM(require("react"));
 var import_react15 = require("react");
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
-var import_editor_ui3 = require("@elementor/editor-ui");
+var import_editor_ui4 = require("@elementor/editor-ui");
 var import_http_client2 = require("@elementor/http-client");
 var import_icons9 = require("@elementor/icons");
 var import_session = require("@elementor/session");
@@ -2101,7 +2132,7 @@ function _factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/controls/link-control.tsx
-var SIZE3 = "tiny";
+var SIZE4 = "tiny";
 var learnMoreButton = {
   label: (0, import_i18n9.__)("Learn More", "elementor"),
   href: "https://go.elementor.com/element-link-inside-link-infotip"
@@ -2209,10 +2240,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(import_ui29.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React36.createElement(import_icons9.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React36.createElement(import_icons9.PlusIcon, { fontSize: SIZE3 }));
+  return /* @__PURE__ */ React36.createElement(import_ui29.IconButton, { size: SIZE4, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React36.createElement(import_icons9.MinusIcon, { fontSize: SIZE4 }) : /* @__PURE__ */ React36.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }));
 };
 var SwitchControl = ({ disabled }) => {
   const { value = false, setValue } = useBoundProp(import_editor_props16.booleanPropTypeUtil);
@@ -2266,7 +2297,7 @@ var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
     {
       placement: "right",
       content: /* @__PURE__ */ React36.createElement(
-        import_editor_ui3.InfoTipCard,
+        import_editor_ui4.InfoTipCard,
         {
           content: INFOTIP_CONTENT[reason],
           svgIcon: /* @__PURE__ */ React36.createElement(import_icons9.AlertTriangleIcon, null),
@@ -2316,6 +2347,7 @@ var GapControl = createControl(({ label }) => {
   const LinkedIcon = isLinked ? import_icons10.LinkIcon : import_icons10.DetachIcon;
   const linkedLabel = (0, import_i18n10.__)("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = (0, import_i18n10.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const disabled = sizeDisabled || directionDisabled;
   return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React37.createElement(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label), /* @__PURE__ */ React37.createElement(import_ui30.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
     import_ui30.ToggleButton,
     {
@@ -2325,7 +2357,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(import_ui30.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui30.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Control4, { bind: "row", isLinked })))));
@@ -2341,7 +2373,7 @@ var Control4 = ({ bind, isLinked }) => {
 var React38 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_props18 = require("@elementor/editor-props");
-var import_editor_ui4 = require("@elementor/editor-ui");
+var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_ui31 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -2402,7 +2434,7 @@ var AspectRatioControl = createControl(({ label }) => {
       fullWidth: true
     },
     [...RATIO_OPTIONS, { label: (0, import_i18n11.__)("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React38.createElement(import_editor_ui4.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React38.createElement(import_editor_ui5.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
   ))), isCustom && /* @__PURE__ */ React38.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(
     import_ui31.TextField,
@@ -2709,7 +2741,7 @@ var BackgroundImageOverlayAttachment = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React43 = __toESM(require("react"));
 var import_editor_props21 = require("@elementor/editor-props");
-var import_editor_ui5 = require("@elementor/editor-ui");
+var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons14 = require("@elementor/icons");
 var import_ui36 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
@@ -2740,12 +2772,13 @@ var BackgroundImageOverlayPosition = () => {
   return /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(PopoverGridContainer, null, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Position", "elementor"))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React43.createElement(
     import_ui36.Select,
     {
+      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(import_editor_ui5.MenuListItem, { key: value, value: value ?? "" }, label))
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React43.createElement(import_editor_ui6.MenuListItem, { key: value, value: value ?? "" }, label))
   )))), isCustom ? /* @__PURE__ */ React43.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(import_icons14.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React43.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React43.createElement(SizeControl, { startIcon: /* @__PURE__ */ React43.createElement(import_icons14.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
@@ -2832,8 +2865,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(import_ui38.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(PopoverGridContainer, null, /* @__PURE__ */ React45.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React45.createElement(
     SizeControl,
@@ -2947,7 +2981,7 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue, disabled } = useBoundProp(import_editor_props24.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,
@@ -3133,6 +3167,7 @@ var SwitchControl2 = createControl(() => {
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,
   FontFamilyControl,
+  FontFamilySelector,
   GapControl,
   ImageControl,
   LinkControl,