@elementor/editor-controls 0.19.1 → 0.21.0

package/dist/index.js

@@ -36,7 +36,7 @@ __export(index_exports, {
   ControlActionsProvider: () => ControlActionsProvider,
   ControlAdornments: () => ControlAdornments,
   ControlAdornmentsProvider: () => ControlAdornmentsProvider,
-  ControlLabel: () => ControlLabel,
+  ControlFormLabel: () => ControlFormLabel,
   ControlReplacementProvider: () => ControlReplacementProvider,
   ControlToggleButtonGroup: () => ControlToggleButtonGroup,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
@@ -218,10 +218,10 @@ var resolveUnionPropType = (propType, key) => {
   return resolvedPropType;
 };
 
-// src/components/control-label.tsx
+// src/components/control-form-label.tsx
 var React3 = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
-var ControlLabel = ({ children }) => {
+var ControlFormLabel = ({ children }) => {
   return /* @__PURE__ */ React3.createElement(import_ui.FormLabel, { size: "tiny" }, children);
 };
 
@@ -350,7 +350,7 @@ function ControlActions({ children }) {
   if (items.length === 0) {
     return children;
   }
-  const menuItems = items.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React7.createElement(MenuItem4, { key: id }));
+  const menuItems = items.map(({ MenuItem, id }) => /* @__PURE__ */ React7.createElement(MenuItem, { key: id }));
   return /* @__PURE__ */ React7.createElement(FloatingBarContainer, null, /* @__PURE__ */ React7.createElement(import_ui3.UnstableFloatingActionBar, { actions: menuItems }, children));
 }
 
@@ -399,6 +399,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
 // src/controls/select-control.tsx
 var React9 = __toESM(require("react"));
 var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_ui = require("@elementor/editor-ui");
 var import_ui5 = require("@elementor/ui");
 var SelectControl = createControl(({ options, onChange }) => {
   const { value, setValue } = useBoundProp(import_editor_props2.stringPropTypeUtil);
@@ -417,7 +418,7 @@ var SelectControl = createControl(({ options, onChange }) => {
       onChange: handleChange,
       fullWidth: true
     },
-    options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(import_ui5.MenuItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+    options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(import_editor_ui.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
   ));
 });
 
@@ -427,7 +428,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 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", (0, import_i18n2.__)("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })), /* @__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(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
+    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", (0, import_i18n2.__)("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })), /* @__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 }))))));
   }
 );
 
@@ -481,6 +482,7 @@ var import_ui10 = require("@elementor/ui");
 // src/components/text-field-inner-selection.tsx
 var React13 = __toESM(require("react"));
 var import_react5 = require("react");
+var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui9 = require("@elementor/ui");
 var TextFieldInnerSelection = (0, import_react5.forwardRef)(
   ({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
@@ -524,7 +526,7 @@ var SelectionEndAdornment = ({
       ...(0, import_ui9.bindTrigger)(popupState)
     },
     value.toUpperCase()
-  ), /* @__PURE__ */ React13.createElement(import_ui9.Menu, { MenuListProps: { dense: true }, ...(0, import_ui9.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(import_ui9.MenuItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
+  ), /* @__PURE__ */ React13.createElement(import_ui9.Menu, { MenuListProps: { dense: true }, ...(0, import_ui9.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(import_editor_ui2.MenuListItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
 };
 
 // src/hooks/use-sync-external-state.tsx
@@ -670,7 +672,7 @@ var import_ui12 = require("@elementor/ui");
 var ColorControl = createControl(({ propTypeUtil = import_editor_props7.colorPropTypeUtil, ...props }) => {
   const { value, setValue } = useBoundProp(propTypeUtil);
   const handleChange = (selectedColor) => {
-    setValue(selectedColor);
+    setValue(selectedColor || null);
   };
   return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(import_ui12.UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
 });
@@ -681,10 +683,10 @@ var StrokeControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props8.strokePropTypeUtil);
   return /* @__PURE__ */ React17.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React17.createElement(SectionContent, null, /* @__PURE__ */ React17.createElement(Control, { bind: "width", label: (0, import_i18n3.__)("Stroke width", "elementor") }, /* @__PURE__ */ React17.createElement(SizeControl, { units })), /* @__PURE__ */ React17.createElement(Control, { bind: "color", label: (0, import_i18n3.__)("Stroke color", "elementor") }, /* @__PURE__ */ React17.createElement(ColorControl, null))));
 });
-var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlLabel, null, label)), /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, children)));
+var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, children)));
 
 // src/controls/box-shadow-repeater-control.tsx
-var React22 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_editor_props9 = require("@elementor/editor-props");
 var import_ui18 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
@@ -705,21 +707,43 @@ var PopoverGridContainer = ({
 }) => /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap, alignItems, flexWrap }, children);
 
 // src/components/repeater.tsx
-var React21 = __toESM(require("react"));
-var import_react7 = require("react");
+var React23 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_icons3 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
-// src/components/sortable.tsx
+// src/control-adornments/control-adornments.tsx
+var React21 = __toESM(require("react"));
+
+// src/control-adornments/control-adornments-context.tsx
 var React20 = __toESM(require("react"));
+var import_react7 = require("react");
+var Context2 = (0, import_react7.createContext)(null);
+var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React20.createElement(Context2.Provider, { value: { items } }, children);
+var useControlAdornments = () => {
+  const context = (0, import_react7.useContext)(Context2);
+  return context?.items ?? [];
+};
+
+// src/control-adornments/control-adornments.tsx
+function ControlAdornments() {
+  const items = useControlAdornments();
+  if (items?.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React21.createElement(Adornment, { key: id })));
+}
+
+// src/components/sortable.tsx
+var React22 = __toESM(require("react"));
 var import_icons2 = require("@elementor/icons");
 var import_ui16 = require("@elementor/ui");
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React20.createElement(import_ui16.List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React20.createElement(import_ui16.UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...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 }) => {
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React22.createElement(
     import_ui16.UnstableSortableItem,
     {
       id,
@@ -732,16 +756,16 @@ var SortableItem = ({ id, children }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React20.createElement(
+        return /* @__PURE__ */ React22.createElement(
           StyledListItem,
           {
             ...itemProps,
             style: itemStyle,
             sx: { backgroundColor: isDragOverlay ? "background.paper" : void 0 }
           },
-          /* @__PURE__ */ React20.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
+          /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
           children,
-          showDropIndication && /* @__PURE__ */ React20.createElement(StyledDivider, { style: dropIndicationStyle })
+          showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle })
         );
       }
     }
@@ -771,7 +795,7 @@ var StyledListItem = (0, import_ui16.styled)(import_ui16.ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React20.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React20.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" }));
+var SortableTrigger = (props) => /* @__PURE__ */ React22.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React22.createElement(import_icons2.GripVerticalIcon, { fontSize: "tiny" }));
 var StyledDivider = (0, import_ui16.styled)(import_ui16.Divider)`
 	height: 0px;
 	border: none;
@@ -799,14 +823,14 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = (0, import_react7.useState)(-1);
+  const [openItem, setOpenItem] = (0, import_react8.useState)(-1);
   const [items, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = (0, import_react7.useState)(items.map((_, index) => index));
+  const [uniqueKeys, setUniqueKeys] = (0, import_react8.useState)(items.map((_, index) => index));
   const generateNextKey = (source) => {
     return 1 + Math.max(0, ...source);
   };
@@ -863,24 +887,33 @@ var Repeater = ({
       });
     });
   };
-  return /* @__PURE__ */ React21.createElement(SectionContent, null, /* @__PURE__ */ React21.createElement(import_ui17.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React21.createElement(import_ui17.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React21.createElement(import_ui17.IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": (0, import_i18n4.__)("Add item", "elementor") }, /* @__PURE__ */ React21.createElement(import_icons3.PlusIcon, { fontSize: SIZE }))), 0 < uniqueKeys.length && /* @__PURE__ */ React21.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+  return /* @__PURE__ */ React23.createElement(SectionContent, null, /* @__PURE__ */ React23.createElement(import_ui17.Stack, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_ui17.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React23.createElement(ControlAdornments, null), /* @__PURE__ */ React23.createElement(
+    import_ui17.IconButton,
+    {
+      sx: { ml: "auto" },
+      size: SIZE,
+      onClick: addRepeaterItem,
+      "aria-label": (0, import_i18n4.__)("Add item", "elementor")
+    },
+    /* @__PURE__ */ React23.createElement(import_icons3.PlusIcon, { fontSize: SIZE })
+  )), 0 < uniqueKeys.length && /* @__PURE__ */ React23.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React21.createElement(SortableItem, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React23.createElement(SortableItem, { id: key, key: `sortable-${key}` }, /* @__PURE__ */ React23.createElement(
       RepeaterItem,
       {
         bind: String(index),
         disabled: value?.disabled,
-        label: /* @__PURE__ */ React21.createElement(itemSettings.Label, { value }),
-        startIcon: /* @__PURE__ */ React21.createElement(itemSettings.Icon, { value }),
+        label: /* @__PURE__ */ React23.createElement(itemSettings.Label, { value }),
+        startIcon: /* @__PURE__ */ React23.createElement(itemSettings.Icon, { value }),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
         openOnMount: openOnAdd && openItem === key
       },
-      (props) => /* @__PURE__ */ React21.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React23.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -894,12 +927,12 @@ var RepeaterItem = ({
   toggleDisableItem,
   openOnMount
 }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react7.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react8.useState)(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount);
   const duplicateLabel = (0, import_i18n4.__)("Duplicate", "elementor");
   const toggleLabel = disabled ? (0, import_i18n4.__)("Show", "elementor") : (0, import_i18n4.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n4.__)("Remove", "elementor");
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
     import_ui17.UnstableTag,
     {
       label,
@@ -910,10 +943,10 @@ var RepeaterItem = ({
       "aria-label": (0, import_i18n4.__)("Open item", "elementor"),
       ...(0, import_ui17.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React21.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React21.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React21.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React21.createElement(import_icons3.XIcon, { fontSize: SIZE })))),
+      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(import_icons3.CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(import_icons3.EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(import_ui17.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui17.IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(import_icons3.XIcon, { fontSize: SIZE })))),
       sx: { backgroundColor: "background.paper" }
     }
-  ), /* @__PURE__ */ React21.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     import_ui17.Popover,
     {
       disablePortal: true,
@@ -927,14 +960,14 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React21.createElement(import_ui17.Box, null, children({ anchorEl }))
+    /* @__PURE__ */ React23.createElement(import_ui17.Box, null, children({ anchorEl }))
   ));
 };
 var usePopover = (openOnMount) => {
-  const [ref, setRef] = (0, import_react7.useState)(null);
+  const [ref, setRef] = (0, import_react8.useState)(null);
   const popoverState = (0, import_ui17.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui17.bindPopover)(popoverState);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
     }
@@ -950,7 +983,7 @@ var usePopover = (openOnMount) => {
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue } = useBoundProp(import_editor_props9.boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React22.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React24.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -966,13 +999,13 @@ var BoxShadowRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon = ({ value }) => /* @__PURE__ */ React22.createElement(import_ui18.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
+var ItemIcon = ({ value }) => /* @__PURE__ */ React24.createElement(import_ui18.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
 var ItemContent = ({ anchorEl, bind }) => {
-  return /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(Content, { anchorEl }));
+  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__ */ React22.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React22.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React22.createElement(
+  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,
     {
       slotProps: {
@@ -989,7 +1022,7 @@ var Content = ({ anchorEl }) => {
         }
       }
     }
-  )), /* @__PURE__ */ React22.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React22.createElement(
+  )), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
     SelectControl,
     {
       options: [
@@ -997,14 +1030,14 @@ var Content = ({ anchorEl }) => {
         { label: (0, import_i18n5.__)("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "hOffset", label: (0, import_i18n5.__)("Horizontal", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)), /* @__PURE__ */ React22.createElement(Control2, { bind: "vOffset", label: (0, import_i18n5.__)("Vertical", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null))), /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "blur", label: (0, import_i18n5.__)("Blur", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)), /* @__PURE__ */ React22.createElement(Control2, { bind: "spread", label: (0, import_i18n5.__)("Spread", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)))));
+  ))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "hOffset", label: (0, import_i18n5.__)("Horizontal", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "vOffset", label: (0, import_i18n5.__)("Vertical", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "blur", label: (0, import_i18n5.__)("Blur", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "spread", label: (0, import_i18n5.__)("Spread", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 6, sx }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(import_ui18.FormLabel, { size: "tiny" }, label)), /* @__PURE__ */ React22.createElement(import_ui18.Grid, { item: true, xs: 12 }, children))));
+}) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(import_ui18.Grid, { item: true, xs: 6, sx }, /* @__PURE__ */ React24.createElement(import_ui18.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(import_ui18.FormLabel, { size: "tiny" }, label)), /* @__PURE__ */ React24.createElement(import_ui18.Grid, { item: true, xs: 12 }, children))));
 var ItemLabel = ({ value }) => {
   const { position, hOffset, vOffset, blur, spread } = value.value;
   const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
@@ -1018,7 +1051,7 @@ var ItemLabel = ({ value }) => {
     blurSize + blurUnit,
     spreadSize + spreadUnit
   ].join(" ");
-  return /* @__PURE__ */ React22.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
+  return /* @__PURE__ */ React24.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
 };
 var initialShadow = {
   $$type: "shadow",
@@ -1048,11 +1081,11 @@ var initialShadow = {
 };
 
 // src/controls/toggle-control.tsx
-var React24 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_editor_props10 = require("@elementor/editor-props");
 
 // src/components/control-toggle-button-group.tsx
-var React23 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_ui19 = require("@elementor/ui");
 var StyledToggleButtonGroup = (0, import_ui19.styled)(import_ui19.ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
@@ -1070,7 +1103,7 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -1085,7 +1118,7 @@ var ControlToggleButtonGroup = ({
       }
     },
     items.map(
-      ({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React23.createElement(import_ui19.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React23.createElement(import_ui19.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React23.createElement(Content3, { size }))) : /* @__PURE__ */ React23.createElement(
+      ({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React25.createElement(import_ui19.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React25.createElement(import_ui19.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React25.createElement(Content3, { size }))) : /* @__PURE__ */ React25.createElement(
         import_ui19.ToggleButton,
         {
           key: buttonValue,
@@ -1094,7 +1127,7 @@ var ControlToggleButtonGroup = ({
           size,
           fullWidth
         },
-        /* @__PURE__ */ React23.createElement(Content3, { size })
+        /* @__PURE__ */ React25.createElement(Content3, { size })
       )
     )
   );
@@ -1121,7 +1154,7 @@ var ToggleControl = createControl(
       fullWidth,
       size
     };
-    return exclusive ? /* @__PURE__ */ React24.createElement(
+    return exclusive ? /* @__PURE__ */ React26.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1129,7 +1162,7 @@ var ToggleControl = createControl(
         onChange: setValue,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React24.createElement(
+    ) : /* @__PURE__ */ React26.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1142,7 +1175,7 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-var React25 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_editor_props11 = require("@elementor/editor-props");
 var import_ui20 = require("@elementor/ui");
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
@@ -1164,7 +1197,7 @@ var NumberControl = createControl(
       const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
       setValue(Math.min(Math.max(formattedValue, min), max));
     };
-    return /* @__PURE__ */ React25.createElement(ControlActions, null, /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React27.createElement(ControlActions, null, /* @__PURE__ */ React27.createElement(
       import_ui20.TextField,
       {
         size: "tiny",
@@ -1180,11 +1213,20 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-var React26 = __toESM(require("react"));
-var import_react8 = require("react");
+var React29 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_editor_props12 = require("@elementor/editor-props");
-var import_ui21 = require("@elementor/ui");
+var import_ui22 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
+
+// src/components/control-label.tsx
+var React28 = __toESM(require("react"));
+var import_ui21 = require("@elementor/ui");
+var ControlLabel = ({ children }) => {
+  return /* @__PURE__ */ React28.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 1 }, /* @__PURE__ */ React28.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React28.createElement(ControlAdornments, null));
+};
+
+// src/controls/equal-unequal-sizes-control.tsx
 var isEqualSizes = (propValue, items) => {
   const values = Object.values(propValue);
   if (values.length !== items.length) {
@@ -1202,9 +1244,9 @@ function EqualUnequalSizesControl({
   items,
   multiSizePropTypeUtil
 }) {
-  const popupId = (0, import_react8.useId)();
-  const controlRef = (0, import_react8.useRef)(null);
-  const popupState = (0, import_ui21.usePopupState)({ variant: "popover", popupId });
+  const popupId = (0, import_react9.useId)();
+  const controlRef = (0, import_react9.useRef)(null);
+  const popupState = (0, import_ui22.usePopupState)({ variant: "popover", popupId });
   const {
     propType: multiSizePropType,
     value: multiSizeValue,
@@ -1238,19 +1280,19 @@ function EqualUnequalSizesControl({
     return splitEqualValue() ?? null;
   };
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label)), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React26.createElement(import_ui21.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(
-    import_ui21.ToggleButton,
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, label)), /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React29.createElement(SizeControl, { placeholder: isMixed ? (0, import_i18n6.__)("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React29.createElement(import_ui22.Tooltip, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React29.createElement(
+    import_ui22.ToggleButton,
     {
       size: "tiny",
       value: "check",
       sx: { marginLeft: "auto" },
-      ...(0, import_ui21.bindToggle)(popupState),
+      ...(0, import_ui22.bindToggle)(popupState),
       selected: popupState.isOpen,
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React26.createElement(
-    import_ui21.Popover,
+  ))))), /* @__PURE__ */ React29.createElement(
+    import_ui22.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -1262,21 +1304,22 @@ function EqualUnequalSizesControl({
         vertical: "top",
         horizontal: "right"
       },
-      ...(0, import_ui21.bindPopover)(popupState),
+      ...(0, import_ui22.bindPopover)(popupState),
       slotProps: {
+        // eslint-disable-next-line react-compiler/react-compiler
         paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React26.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React26.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React26.createElement(PopoverGridContainer, null, /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React26.createElement(MultiSizeValueControl, { item: items[3] }))))
+    /* @__PURE__ */ React29.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React29.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React29.createElement(PopoverGridContainer, null, /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React29.createElement(PopoverGridContainer, null, /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[2] }), /* @__PURE__ */ React29.createElement(MultiSizeValueControl, { item: items[3] }))))
   ));
 }
-var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React26.createElement(import_ui21.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon: item.icon })))));
+var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React29.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(SizeControl, { startIcon: item.icon })))));
 
 // src/controls/linked-dimensions-control.tsx
-var React27 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_editor_props13 = require("@elementor/editor-props");
 var import_icons4 = require("@elementor/icons");
-var import_ui22 = require("@elementor/ui");
+var import_ui23 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 var LinkedDimensionsControl = createControl(
   ({
@@ -1308,8 +1351,8 @@ var LinkedDimensionsControl = createControl(
     const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.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__ */ React27.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(import_ui22.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(
-      import_ui22.ToggleButton,
+    return /* @__PURE__ */ React30.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label), /* @__PURE__ */ React30.createElement(import_ui23.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
+      import_ui23.ToggleButton,
       {
         "aria-label": isLinked ? unlinkedLabel : linkedLabel,
         size: "tiny",
@@ -1318,36 +1361,36 @@ var LinkedDimensionsControl = createControl(
         sx: { marginLeft: "auto" },
         onChange: onLinkToggle
       },
-      /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
-    ))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React30.createElement(LinkedIcon, { fontSize: "tiny" })
+    ))), /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "block-start",
-        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
+        startIcon: /* @__PURE__ */ React30.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, isSiteRtl ? (0, import_i18n7.__)("Left", "elementor") : (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "inline-end",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React27.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
+        startIcon: isSiteRtl ? /* @__PURE__ */ React30.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React30.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
-    )))), /* @__PURE__ */ React27.createElement(import_ui22.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    )))), /* @__PURE__ */ React30.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "block-end",
-        startIcon: /* @__PURE__ */ React27.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
+        startIcon: /* @__PURE__ */ React30.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, isSiteRtl ? (0, import_i18n7.__)("Right", "elementor") : (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "inline-start",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React27.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
+        startIcon: isSiteRtl ? /* @__PURE__ */ React30.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React30.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
@@ -1361,17 +1404,17 @@ var Control3 = ({
   extendedValues
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React27.createElement(SizeControl, { startIcon, extendedValues });
+    return /* @__PURE__ */ React30.createElement(SizeControl, { startIcon, extendedValues });
   }
-  return /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(SizeControl, { startIcon, extendedValues }));
+  return /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(SizeControl, { startIcon, extendedValues }));
 };
 
 // src/controls/font-family-control/font-family-control.tsx
-var React28 = __toESM(require("react"));
-var import_react9 = require("react");
+var React31 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_editor_props14 = require("@elementor/editor-props");
 var import_icons5 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
+var import_ui24 = require("@elementor/ui");
 var import_utils2 = require("@elementor/utils");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n8 = require("@wordpress/i18n");
@@ -1401,9 +1444,9 @@ var enqueueFont = (fontFamily, context = "editor") => {
 // src/controls/font-family-control/font-family-control.tsx
 var SIZE2 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies }) => {
-  const [searchValue, setSearchValue] = (0, import_react9.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react10.useState)("");
   const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props14.stringPropTypeUtil);
-  const popoverState = (0, import_ui23.usePopupState)({ variant: "popover" });
+  const popoverState = (0, import_ui24.usePopupState)({ variant: "popover" });
   const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
@@ -1412,26 +1455,26 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     setSearchValue("");
     popoverState.close();
   };
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
-    import_ui23.UnstableTag,
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
+    import_ui24.UnstableTag,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React28.createElement(import_icons5.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui23.bindTrigger)(popoverState),
+      endIcon: /* @__PURE__ */ React31.createElement(import_icons5.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui24.bindTrigger)(popoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React28.createElement(
-    import_ui23.Popover,
+  ), /* @__PURE__ */ React31.createElement(
+    import_ui24.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...(0, import_ui23.bindPopover)(popoverState),
+      ...(0, import_ui24.bindPopover)(popoverState),
       onClose: handleClose
     },
-    /* @__PURE__ */ React28.createElement(import_ui23.Stack, null, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(import_icons5.TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { variant: "subtitle2" }, (0, import_i18n8.__)("Font Family", "elementor")), /* @__PURE__ */ React28.createElement(import_ui23.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(import_ui23.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
-      import_ui23.TextField,
+    /* @__PURE__ */ React31.createElement(import_ui24.Stack, null, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React31.createElement(import_icons5.TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React31.createElement(import_ui24.Typography, { variant: "subtitle2" }, (0, import_i18n8.__)("Font Family", "elementor")), /* @__PURE__ */ React31.createElement(import_ui24.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React31.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React31.createElement(import_ui24.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React31.createElement(
+      import_ui24.TextField,
       {
         fullWidth: true,
         size: SIZE2,
@@ -1439,10 +1482,10 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         placeholder: (0, import_i18n8.__)("Search", "elementor"),
         onChange: handleSearch,
         InputProps: {
-          startAdornment: /* @__PURE__ */ React28.createElement(import_ui23.InputAdornment, { position: "start" }, /* @__PURE__ */ React28.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
+          startAdornment: /* @__PURE__ */ React31.createElement(import_ui24.InputAdornment, { position: "start" }, /* @__PURE__ */ React31.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React28.createElement(import_ui23.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React28.createElement(
+    )), /* @__PURE__ */ React31.createElement(import_ui24.Divider, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React31.createElement(
       FontList,
       {
         fontListItems: filteredFontFamilies,
@@ -1450,8 +1493,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         handleClose,
         fontFamily
       }
-    ) : /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React28.createElement(import_icons5.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(import_ui23.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React28.createElement(
-      import_ui23.Typography,
+    ) : /* @__PURE__ */ React31.createElement(import_ui24.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React31.createElement(import_ui24.Stack, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React31.createElement(import_icons5.TextIcon, { fontSize: "large" }), /* @__PURE__ */ React31.createElement(import_ui24.Box, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React31.createElement(import_ui24.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n8.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React31.createElement(
+      import_ui24.Typography,
       {
         variant: "subtitle2",
         color: "text.secondary",
@@ -1461,17 +1504,17 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
           justifyContent: "center"
         }
       },
-      /* @__PURE__ */ React28.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React28.createElement(
+      /* @__PURE__ */ React31.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React31.createElement(
         "span",
         {
           style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
         },
         searchValue
       ),
-      /* @__PURE__ */ React28.createElement("span", null, "\u201D.")
-    )), /* @__PURE__ */ React28.createElement(import_ui23.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React28.createElement(
-      import_ui23.Link,
+      /* @__PURE__ */ React31.createElement("span", null, "\u201D.")
+    )), /* @__PURE__ */ React31.createElement(import_ui24.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n8.__)("Try something else.", "elementor"), /* @__PURE__ */ React31.createElement(
+      import_ui24.Link,
       {
         color: "secondary",
         variant: "caption",
@@ -1485,7 +1528,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
 var LIST_ITEM_HEIGHT = 36;
 var LIST_ITEMS_BUFFER = 6;
 var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const containerRef = (0, import_react9.useRef)(null);
+  const containerRef = (0, import_react10.useRef)(null);
   const selectedItem = fontListItems.find((item) => item.value === fontFamily);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
@@ -1502,15 +1545,16 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     overscan: LIST_ITEMS_BUFFER,
     onChange: debouncedVirtualizeChange
   });
-  (0, import_react9.useEffect)(
+  (0, import_react10.useEffect)(
     () => {
       virtualizer.scrollToIndex(fontListItems.findIndex((item) => item.value === fontFamily));
     },
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [fontFamily]
   );
-  return /* @__PURE__ */ React28.createElement(
-    import_ui23.Box,
+  return /* @__PURE__ */ React31.createElement(
+    import_ui24.Box,
     {
       ref: containerRef,
       sx: {
@@ -1519,7 +1563,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
         width: 220
       }
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React31.createElement(
       StyledMenuList,
       {
         role: "listbox",
@@ -1535,8 +1579,8 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
         const isSelected = selectedItem?.value === item.value;
         const tabIndexFallback = !selectedItem ? 0 : -1;
         if (item.type === "category") {
-          return /* @__PURE__ */ React28.createElement(
-            import_ui23.ListSubheader,
+          return /* @__PURE__ */ React31.createElement(
+            import_ui24.MenuSubheader,
             {
               key: virtualRow.key,
               style: {
@@ -1546,7 +1590,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
             item.value
           );
         }
-        return /* @__PURE__ */ React28.createElement(
+        return /* @__PURE__ */ React31.createElement(
           "li",
           {
             key: virtualRow.key,
@@ -1582,7 +1626,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     )
   );
 };
-var StyledMenuList = (0, import_ui23.styled)(import_ui23.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui24.styled)(import_ui24.MenuList)(({ theme }) => ({
   "& > li": {
     height: LIST_ITEM_HEIGHT,
     position: "absolute",
@@ -1607,20 +1651,20 @@ var StyledMenuList = (0, import_ui23.styled)(import_ui23.MenuList)(({ theme }) =
   position: "relative"
 }));
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = (0, import_react9.useState)(() => (0, import_utils2.debounce)(fn, delay));
-  (0, import_react9.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = (0, import_react10.useState)(() => (0, import_utils2.debounce)(fn, delay));
+  (0, import_react10.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
 // src/controls/url-control.tsx
-var React29 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var import_editor_props15 = require("@elementor/editor-props");
-var import_ui24 = require("@elementor/ui");
+var import_ui25 = require("@elementor/ui");
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue } = useBoundProp(import_editor_props15.urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React29.createElement(ControlActions, null, /* @__PURE__ */ React29.createElement(
-    import_ui24.TextField,
+  return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
+    import_ui25.TextField,
     {
       size: "tiny",
       fullWidth: true,
@@ -1632,22 +1676,23 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-var React31 = __toESM(require("react"));
-var import_react11 = require("react");
+var React34 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
 var import_http2 = require("@elementor/http");
 var import_icons7 = require("@elementor/icons");
 var import_session = require("@elementor/session");
-var import_ui26 = require("@elementor/ui");
+var import_ui27 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/components/autocomplete.tsx
-var React30 = __toESM(require("react"));
-var import_react10 = require("react");
+var React33 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_icons6 = require("@elementor/icons");
-var import_ui25 = require("@elementor/ui");
-var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
+var import_ui26 = require("@elementor/ui");
+var Autocomplete = (0, import_react11.forwardRef)((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -1663,8 +1708,8 @@ var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
   const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
   const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
   const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
-  return /* @__PURE__ */ React30.createElement(
-    import_ui25.Autocomplete,
+  return /* @__PURE__ */ React33.createElement(
+    import_ui26.Autocomplete,
     {
       ...restProps,
       ref,
@@ -1681,8 +1726,8 @@ var Autocomplete = (0, import_react10.forwardRef)((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React30.createElement(import_ui25.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React30.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React33.createElement(import_ui26.Box, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React33.createElement(
         TextInput,
         {
           params,
@@ -1705,8 +1750,8 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React30.createElement(
-    import_ui25.TextField,
+  return /* @__PURE__ */ React33.createElement(
+    import_ui26.TextField,
     {
       ...params,
       placeholder,
@@ -1718,7 +1763,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React30.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React33.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -1727,7 +1772,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React30.createElement(import_ui25.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React30.createElement(import_ui25.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React30.createElement(import_icons6.XIcon, { fontSize: params.size })));
+}) => /* @__PURE__ */ React33.createElement(import_ui26.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React33.createElement(import_ui26.IconButton, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React33.createElement(import_icons6.XIcon, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -1748,42 +1793,12 @@ function _factoryFilter(newValue, options, minInputLength) {
   );
 }
 
-// src/utils/link-restriction.ts
-var import_editor_elements = require("@elementor/editor-elements");
-function getLinkRestriction(elementId) {
-  if (getAncestorAnchor(elementId)) {
-    return {
-      shouldRestrict: true,
-      restrictReason: "ancestor"
-    };
-  }
-  if (getDescendantAnchor(elementId)) {
-    return {
-      shouldRestrict: true,
-      restrictReason: "descendant"
-    };
-  }
-  return { shouldRestrict: false };
-}
-function getAncestorAnchor(elementId) {
-  const element = getElementView(elementId);
-  return element?.closest("a") || null;
-}
-function getDescendantAnchor(elementId) {
-  const element = getElementView(elementId);
-  return element?.querySelector("a") || null;
-}
-function getElementView(id) {
-  const elementContainer = (0, import_editor_elements.getContainer)(id);
-  return elementContainer?.view?.el || null;
-}
-
 // src/controls/link-control.tsx
 var SIZE3 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props16.linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
-  const [isEnabled, setIsEnabled] = (0, import_react11.useState)(!!value);
+  const [isEnabled, setIsEnabled] = (0, import_react12.useState)(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -1791,11 +1806,11 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
-  const [options, setOptions] = (0, import_react11.useState)(
+  const [options, setOptions] = (0, import_react12.useState)(
     generateFirstLoadedOption(value)
   );
   const onEnabledChange = () => {
-    const { shouldRestrict } = getLinkRestriction(elementId);
+    const shouldRestrict = (0, import_editor_elements.getAncestorWithAnchorTag)(elementId) || (0, import_editor_elements.getDescendantWithAnchorTag)(elementId);
     if (shouldRestrict && !isEnabled) {
       return;
     }
@@ -1832,7 +1847,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = (0, import_react11.useMemo)(
+  const debounceFetch = (0, import_react12.useMemo)(
     () => (0, import_utils3.debounce)(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -1841,8 +1856,8 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React31.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React31.createElement(import_ui26.Stack, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(import_ui26.Divider, null), /* @__PURE__ */ React31.createElement(
-    import_ui26.Stack,
+  return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(import_ui27.Divider, null), /* @__PURE__ */ React34.createElement(
+    import_ui27.Stack,
     {
       direction: "row",
       sx: {
@@ -1850,8 +1865,8 @@ var LinkControl = createControl((props) => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n9.__)("Link", "elementor")),
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React34.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Link", "elementor")),
+    /* @__PURE__ */ React34.createElement(
       ToggleIconControl,
       {
         enabled: isEnabled,
@@ -1859,28 +1874,28 @@ var LinkControl = createControl((props) => {
         label: (0, import_i18n9.__)("Toggle link", "elementor")
       }
     )
-  ), /* @__PURE__ */ React31.createElement(import_ui26.Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React31.createElement(import_ui26.Stack, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React31.createElement(ControlActions, null, /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React34.createElement(import_ui27.Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React34.createElement(import_ui27.Stack, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(
     Autocomplete,
     {
       options,
       allowCustomValues,
       placeholder,
-      value: value?.destination?.value,
+      value: value?.destination?.value?.settings?.label || value?.destination?.value,
       onOptionChange,
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React31.createElement(SwitchControl, null))))));
+  ))), /* @__PURE__ */ React34.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React34.createElement(SwitchControl, null))))));
 });
 var ToggleIconControl = ({ enabled, onIconClick, label }) => {
-  return /* @__PURE__ */ React31.createElement(import_ui26.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React31.createElement(import_icons7.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React31.createElement(import_icons7.PlusIcon, { fontSize: SIZE3 }));
+  return /* @__PURE__ */ React34.createElement(import_ui27.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React34.createElement(import_icons7.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React34.createElement(import_icons7.PlusIcon, { fontSize: SIZE3 }));
 };
 var SwitchControl = () => {
   const { value = false, setValue } = useBoundProp(import_editor_props16.booleanPropTypeUtil);
   const onClick = () => {
     setValue(!value);
   };
-  return /* @__PURE__ */ React31.createElement(import_ui26.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true }, /* @__PURE__ */ React31.createElement(ControlLabel, null, (0, import_i18n9.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React31.createElement(import_ui26.Grid, { item: true }, /* @__PURE__ */ React31.createElement(import_ui26.Switch, { checked: value, onClick })));
+  return /* @__PURE__ */ React34.createElement(import_ui27.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, (0, import_i18n9.__)("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(import_ui27.Grid, { item: true }, /* @__PURE__ */ React34.createElement(import_ui27.Switch, { checked: value, onClick })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -1912,10 +1927,10 @@ function generateFirstLoadedOption(unionValue) {
 }
 
 // src/controls/gap-control.tsx
-var React32 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_editor_props17 = require("@elementor/editor-props");
 var import_icons8 = require("@elementor/icons");
-var import_ui27 = require("@elementor/ui");
+var import_ui28 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
 var GapControl = createControl(({ label }) => {
   const {
@@ -1940,8 +1955,8 @@ var GapControl = createControl(({ label }) => {
   const LinkedIcon = isLinked ? import_icons8.LinkIcon : import_icons8.DetachIcon;
   const linkedLabel = (0, import_i18n10.__)("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = (0, import_i18n10.__)("Unlink %s", "elementor").replace("%s", tooltipLabel);
-  return /* @__PURE__ */ React32.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(import_ui27.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(
-    import_ui27.ToggleButton,
+  return /* @__PURE__ */ React35.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React35.createElement(import_ui28.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(ControlLabel, null, label), /* @__PURE__ */ React35.createElement(import_ui28.Tooltip, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React35.createElement(
+    import_ui28.ToggleButton,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
       size: "tiny",
@@ -1950,30 +1965,30 @@ var GapControl = createControl(({ label }) => {
       sx: { marginLeft: "auto" },
       onChange: onLinkToggle
     },
-    /* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React32.createElement(import_ui27.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React32.createElement(import_ui27.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
+    /* @__PURE__ */ React35.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React35.createElement(import_ui28.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Column", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, (0, import_i18n10.__)("Row", "elementor"))), /* @__PURE__ */ React35.createElement(import_ui28.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Control4, { bind: "row", isLinked })))));
 });
 var Control4 = ({ bind, isLinked }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React32.createElement(SizeControl, null);
+    return /* @__PURE__ */ React35.createElement(SizeControl, null);
   }
-  return /* @__PURE__ */ React32.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React32.createElement(SizeControl, null));
+  return /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React35.createElement(SizeControl, null));
 };
 
 // src/controls/svg-media-control.tsx
-var React34 = __toESM(require("react"));
-var import_react13 = require("react");
+var React37 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_editor_props18 = require("@elementor/editor-props");
 var import_icons9 = require("@elementor/icons");
-var import_ui29 = require("@elementor/ui");
+var import_ui30 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
 var import_i18n12 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
-var React33 = __toESM(require("react"));
-var import_react12 = require("react");
+var React36 = __toESM(require("react"));
+var import_react13 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
-var import_ui28 = require("@elementor/ui");
+var import_ui29 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 var ADMIN_TITLE_TEXT = (0, import_i18n11.__)("Enable Unfiltered Uploads", "elementor");
 var ADMIN_CONTENT_TEXT = (0, import_i18n11.__)(
@@ -1994,7 +2009,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = (0, import_editor_current_user.useCurrentUserCapabilities)();
-  const [isError, setIsError] = (0, import_react12.useState)(false);
+  const [isError, setIsError] = (0, import_react13.useState)(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2013,10 +2028,10 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React33.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React33.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React36.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React36.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React33.createElement(import_ui28.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React33.createElement(import_ui28.DialogHeader, { logo: false }, /* @__PURE__ */ React33.createElement(import_ui28.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React33.createElement(import_ui28.Divider, null), /* @__PURE__ */ React33.createElement(import_ui28.DialogContent, null, /* @__PURE__ */ React33.createElement(import_ui28.DialogContentText, null, isError ? /* @__PURE__ */ React33.createElement(React33.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React33.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React33.createElement(import_ui28.DialogActions, null, /* @__PURE__ */ React33.createElement(import_ui28.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n11.__)("Cancel", "elementor")), /* @__PURE__ */ React33.createElement(
-  import_ui28.Button,
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React36.createElement(import_ui29.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React36.createElement(import_ui29.DialogHeader, { logo: false }, /* @__PURE__ */ React36.createElement(import_ui29.DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.Divider, null), /* @__PURE__ */ React36.createElement(import_ui29.DialogContent, null, /* @__PURE__ */ React36.createElement(import_ui29.DialogContentText, null, isError ? /* @__PURE__ */ React36.createElement(React36.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React36.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.DialogActions, null, /* @__PURE__ */ React36.createElement(import_ui29.Button, { size: "medium", color: "secondary", onClick: () => onClose(false) }, (0, import_i18n11.__)("Cancel", "elementor")), /* @__PURE__ */ React36.createElement(
+  import_ui29.Button,
   {
     size: "medium",
     onClick: () => handleEnable(),
@@ -2024,16 +2039,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React33.createElement(import_ui28.CircularProgress, { size: 24 }) : (0, import_i18n11.__)("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React36.createElement(import_ui29.CircularProgress, { size: 24 }) : (0, import_i18n11.__)("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React33.createElement(import_ui28.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React33.createElement(import_ui28.DialogHeader, { logo: false }, /* @__PURE__ */ React33.createElement(import_ui28.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React33.createElement(import_ui28.Divider, null), /* @__PURE__ */ React33.createElement(import_ui28.DialogContent, null, /* @__PURE__ */ React33.createElement(import_ui28.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React33.createElement(import_ui28.DialogActions, null, /* @__PURE__ */ React33.createElement(import_ui28.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n11.__)("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React36.createElement(import_ui29.Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React36.createElement(import_ui29.DialogHeader, { logo: false }, /* @__PURE__ */ React36.createElement(import_ui29.DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.Divider, null), /* @__PURE__ */ React36.createElement(import_ui29.DialogContent, null, /* @__PURE__ */ React36.createElement(import_ui29.DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React36.createElement(import_ui29.DialogActions, null, /* @__PURE__ */ React36.createElement(import_ui29.Button, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, (0, import_i18n11.__)("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = (0, import_ui29.styled)(import_ui29.Card)`
+var StyledCard = (0, import_ui30.styled)(import_ui30.Card)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -2042,7 +2057,7 @@ var StyledCard = (0, import_ui29.styled)(import_ui29.Card)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = (0, import_ui29.styled)(import_ui29.Stack)`
+var StyledCardMediaContainer = (0, import_ui30.styled)(import_ui30.Stack)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -2059,7 +2074,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react13.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react14.useState)(false);
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
@@ -2087,16 +2102,16 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React34.createElement(import_ui29.Stack, { gap: 1 }, /* @__PURE__ */ React34.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React34.createElement(ControlLabel, null, " ", (0, import_i18n12.__)("SVG", "elementor"), " "), /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React34.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React34.createElement(import_ui29.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React34.createElement(
-    import_ui29.CardMedia,
+  return /* @__PURE__ */ React37.createElement(import_ui30.Stack, { gap: 1 }, /* @__PURE__ */ React37.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React37.createElement(ControlFormLabel, null, " ", (0, import_i18n12.__)("SVG", "elementor"), " "), /* @__PURE__ */ React37.createElement(ControlActions, null, /* @__PURE__ */ React37.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React37.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React37.createElement(import_ui30.CircularProgress, { role: "progressbar" }) : /* @__PURE__ */ React37.createElement(
+    import_ui30.CardMedia,
     {
       component: "img",
       image: src,
       alt: (0, import_i18n12.__)("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React34.createElement(
-    import_ui29.CardOverlay,
+  )), /* @__PURE__ */ React37.createElement(
+    import_ui30.CardOverlay,
     {
       sx: {
         "&:hover": {
@@ -2104,8 +2119,8 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React34.createElement(import_ui29.Stack, { gap: 1 }, /* @__PURE__ */ React34.createElement(
-      import_ui29.Button,
+    /* @__PURE__ */ React37.createElement(import_ui30.Stack, { gap: 1 }, /* @__PURE__ */ React37.createElement(
+      import_ui30.Button,
       {
         size: "tiny",
         color: "inherit",
@@ -2113,13 +2128,13 @@ var SvgMediaControl = createControl(() => {
         onClick: () => handleClick(MODE_BROWSE)
       },
       (0, import_i18n12.__)("Select SVG", "elementor")
-    ), /* @__PURE__ */ React34.createElement(
-      import_ui29.Button,
+    ), /* @__PURE__ */ React37.createElement(
+      import_ui30.Button,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React34.createElement(import_icons9.UploadIcon, null),
+        startIcon: /* @__PURE__ */ React37.createElement(import_icons9.UploadIcon, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
       (0, import_i18n12.__)("Upload", "elementor")
@@ -2128,15 +2143,15 @@ var SvgMediaControl = createControl(() => {
 });
 
 // src/controls/background-control/background-control.tsx
-var React41 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var import_editor_props24 = require("@elementor/editor-props");
-var import_ui37 = require("@elementor/ui");
+var import_ui38 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-var React40 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_editor_props23 = require("@elementor/editor-props");
-var import_ui36 = require("@elementor/ui");
+var import_ui37 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
 var import_i18n17 = require("@wordpress/i18n");
 
@@ -2145,9 +2160,9 @@ var import_env = require("@elementor/env");
 var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-var React35 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 var import_editor_props19 = require("@elementor/editor-props");
-var import_ui30 = require("@elementor/ui");
+var import_ui31 = require("@elementor/ui");
 var BackgroundGradientColorControl = createControl(() => {
   const { value, setValue } = useBoundProp(import_editor_props19.backgroundGradientOverlayPropTypeUtil);
   const handleChange = (newValue) => {
@@ -2185,8 +2200,8 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React35.createElement(ControlActions, null, /* @__PURE__ */ React35.createElement(
-    import_ui30.UnstableGradientBox,
+  return /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(
+    import_ui31.UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
       value: normalizeValue(),
@@ -2210,33 +2225,34 @@ var initialBackgroundGradientOverlay = import_editor_props19.backgroundGradientO
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-var React36 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
-var import_ui31 = require("@elementor/ui");
+var import_ui32 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
     label: (0, import_i18n13.__)("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons10.PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons10.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: (0, import_i18n13.__)("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(import_icons10.PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons10.PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, (0, import_i18n13.__)("Attachment", "elementor"))), /* @__PURE__ */ React36.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React36.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlFormLabel, null, (0, import_i18n13.__)("Attachment", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-var React37 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var import_editor_props20 = require("@elementor/editor-props");
+var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
-var import_ui32 = require("@elementor/ui");
+var import_ui33 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
   { label: (0, import_i18n14.__)("Center center", "elementor"), value: "center center" },
@@ -2262,82 +2278,82 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React37.createElement(import_ui32.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, (0, import_i18n14.__)("Position", "elementor"))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React37.createElement(
-    import_ui32.Select,
+  return /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, (0, import_i18n14.__)("Position", "elementor"))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(
+    import_ui33.Select,
     {
       size: "tiny",
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? "",
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React37.createElement(import_ui32.MenuItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React37.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(import_icons11.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React37.createElement(import_ui32.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(import_icons11.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React40.createElement(import_editor_ui3.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React40.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(import_icons11.LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React40.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(import_icons11.LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-var React38 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 var import_icons12 = require("@elementor/icons");
-var import_ui33 = require("@elementor/ui");
+var import_ui34 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
     label: (0, import_i18n15.__)("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons12.GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: (0, import_i18n15.__)("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons12.DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: (0, import_i18n15.__)("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons12.DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: (0, import_i18n15.__)("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(import_icons12.XIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(import_icons12.XIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, (0, import_i18n15.__)("Repeat", "elementor"))), /* @__PURE__ */ React38.createElement(import_ui33.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React38.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React41.createElement(PopoverGridContainer, null, /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, (0, import_i18n15.__)("Repeat", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-var React39 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var import_editor_props21 = require("@elementor/editor-props");
 var import_icons13 = require("@elementor/icons");
-var import_ui34 = require("@elementor/ui");
+var import_ui35 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
     label: (0, import_i18n16.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons13.LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: (0, import_i18n16.__)("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons13.ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: (0, import_i18n16.__)("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons13.ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: (0, import_i18n16.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(import_icons13.PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(import_icons13.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -2352,7 +2368,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React39.createElement(import_ui34.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React39.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React39.createElement(import_ui34.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React42.createElement(import_ui35.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, (0, import_i18n16.__)("Size", "elementor"))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React42.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -2360,25 +2376,25 @@ var BackgroundImageOverlaySize = () => {
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
       onChange: handleSizeChange
     }
-  )))), isCustom ? /* @__PURE__ */ React39.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React39.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React39.createElement(
+  )))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React39.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React42.createElement(import_icons13.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React39.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React39.createElement(
+  ))), /* @__PURE__ */ React42.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React39.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React42.createElement(import_icons13.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor_props22 = require("@elementor/editor-props");
-var import_ui35 = require("@elementor/ui");
+var import_ui36 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
   image: initialBackgroundImageOverlay,
@@ -2396,8 +2412,8 @@ var useBackgroundTabsHistory = ({
     }
     return "image";
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui35.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react14.useRef)({
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui36.useTabs)(getCurrentOverlayType());
+  const valuesHistory = (0, import_react15.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -2472,7 +2488,7 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props23.backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React40.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React43.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React43.createElement(
     Repeater,
     {
       openOnAdd: true,
@@ -2489,7 +2505,7 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
   ));
 });
 var ItemContent2 = ({ bind }) => {
-  return /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React40.createElement(Content2, null));
+  return /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React43.createElement(Content2, null));
 };
 var Content2 = () => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
@@ -2497,27 +2513,27 @@ var Content2 = () => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React40.createElement(import_ui36.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React40.createElement(import_ui36.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React40.createElement(
-    import_ui36.Tabs,
+  return /* @__PURE__ */ React43.createElement(import_ui37.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React43.createElement(import_ui37.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React43.createElement(
+    import_ui37.Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
       "aria-label": (0, import_i18n17.__)("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React40.createElement(import_ui36.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React40.createElement(import_ui36.Tab, { label: (0, import_i18n17.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React40.createElement(import_ui36.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React40.createElement(import_ui36.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React40.createElement(PopoverContent, null, /* @__PURE__ */ React40.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React40.createElement(import_ui36.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React40.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React40.createElement(import_ui36.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React40.createElement(PopoverContent, null, /* @__PURE__ */ React40.createElement(ColorOverlayContent, null))));
+    /* @__PURE__ */ React43.createElement(import_ui37.Tab, { label: (0, import_i18n17.__)("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React43.createElement(import_ui37.Tab, { label: (0, import_i18n17.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React43.createElement(import_ui37.Tab, { label: (0, import_i18n17.__)("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React43.createElement(import_ui37.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React43.createElement(PopoverContent, null, /* @__PURE__ */ React43.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React43.createElement(import_ui37.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React43.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React43.createElement(import_ui37.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React43.createElement(PopoverContent, null, /* @__PURE__ */ React43.createElement(ColorOverlayContent, null))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React40.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React43.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React40.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React43.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React40.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React43.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -2530,56 +2546,70 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React40.createElement(import_ui36.UnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React43.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React40.createElement(import_ui36.CardMedia, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
+  return /* @__PURE__ */ React43.createElement(
+    import_ui37.CardMedia,
+    {
+      image: imageUrl,
+      sx: (theme) => ({
+        height: "1em",
+        width: "1em",
+        borderRadius: `${theme.shape.borderRadius / 2}px`,
+        outline: `1px solid ${theme.palette.action.disabled}`
+      })
+    }
+  );
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React40.createElement(import_ui36.UnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React43.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React40.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React43.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React40.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React43.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React40.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React43.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React40.createElement("span", null, color);
+  return /* @__PURE__ */ React43.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React40.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React43.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React40.createElement("span", null, (0, import_i18n17.__)("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React43.createElement("span", null, (0, import_i18n17.__)("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React40.createElement("span", null, (0, import_i18n17.__)("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React43.createElement("span", null, (0, import_i18n17.__)("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = () => {
   const propContext = useBoundProp(import_editor_props23.backgroundColorOverlayPropTypeUtil);
-  return /* @__PURE__ */ React40.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React40.createElement(ColorControl, null)));
+  return /* @__PURE__ */ React43.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React43.createElement(ColorControl, null)));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(import_editor_props23.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React40.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React40.createElement(import_ui36.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React40.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React43.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React43.createElement(import_ui37.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React43.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(
     ImageControl,
     {
       resolutionLabel: (0, import_i18n17.__)("Resolution", "elementor"),
       sizes: backgroundResolutionOptions
     }
-  )))), /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React40.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React40.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React40.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React40.createElement(BackgroundImageOverlayAttachment, null)));
+  )))), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React43.createElement(BackgroundImageOverlayAttachment, null)));
 };
+var StyledUnstableColorIndicator = (0, import_ui37.styled)(import_ui37.UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
   const imageSrc = image?.value.image.value?.src.value;
@@ -2606,28 +2636,8 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props24.backgroundPropTypeUtil);
-  return /* @__PURE__ */ React41.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React41.createElement(SectionContent, null, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React41.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React41.createElement(import_ui37.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React41.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ColorControl, null))))));
+  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React44.createElement(SectionContent, null, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React44.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React44.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, (0, import_i18n18.__)("Color", "elementor"))), /* @__PURE__ */ React44.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ColorControl, null))))));
 });
-
-// src/control-adornments/control-adornments-context.tsx
-var React42 = __toESM(require("react"));
-var import_react15 = require("react");
-var Context2 = (0, import_react15.createContext)(null);
-var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React42.createElement(Context2.Provider, { value: { items } }, children);
-var useControlAdornments = () => {
-  const context = (0, import_react15.useContext)(Context2);
-  return context?.items ?? [];
-};
-
-// src/control-adornments/control-adornments.tsx
-var React43 = __toESM(require("react"));
-function ControlAdornments() {
-  const items = useControlAdornments();
-  if (items?.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, items.map(({ Adornment, id }) => /* @__PURE__ */ React43.createElement(Adornment, { key: id })));
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BackgroundControl,
@@ -2636,7 +2646,7 @@ function ControlAdornments() {
   ControlActionsProvider,
   ControlAdornments,
   ControlAdornmentsProvider,
-  ControlLabel,
+  ControlFormLabel,
   ControlReplacementProvider,
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,