@elementor/editor-controls 0.20.0 → 0.24.0

package/dist/index.mjs

@@ -153,10 +153,10 @@ var resolveUnionPropType = (propType, key) => {
   return resolvedPropType;
 };
 
-// src/components/control-label.tsx
+// src/components/control-form-label.tsx
 import * as React3 from "react";
 import { FormLabel } from "@elementor/ui";
-var ControlLabel = ({ children }) => {
+var ControlFormLabel = ({ children }) => {
   return /* @__PURE__ */ React3.createElement(FormLabel, { size: "tiny" }, children);
 };
 
@@ -363,7 +363,7 @@ var ImageControl = createControl(
     const propContext = useBoundProp(imagePropTypeUtil);
     const { data: allowSvgUpload } = useUnfilteredFilesUpload();
     const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
-    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", __2("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
+    return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", __2("Image", "elementor"), " "), /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes })), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlFormLabel, null, " ", resolutionLabel, " ")), /* @__PURE__ */ React10.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }))))));
   }
 );
 
@@ -456,11 +456,11 @@ var SelectionEndAdornment = ({
     Button2,
     {
       size: "small",
-      color: "inherit",
-      sx: { font: "inherit", minWidth: "initial" },
+      color: "secondary",
+      sx: { font: "inherit", minWidth: "initial", textTransform: "uppercase" },
       ...bindTrigger(popupState)
     },
-    value.toUpperCase()
+    value
   ), /* @__PURE__ */ React13.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(MenuListItem2, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
 };
 
@@ -607,7 +607,7 @@ import { UnstableColorField } from "@elementor/ui";
 var ColorControl = createControl(({ propTypeUtil = colorPropTypeUtil, ...props }) => {
   const { value, setValue } = useBoundProp(propTypeUtil);
   const handleChange = (selectedColor) => {
-    setValue(selectedColor);
+    setValue(selectedColor || null);
   };
   return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
 });
@@ -618,10 +618,10 @@ var StrokeControl = createControl(() => {
   const propContext = useBoundProp(strokePropTypeUtil);
   return /* @__PURE__ */ React17.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React17.createElement(SectionContent, null, /* @__PURE__ */ React17.createElement(Control, { bind: "width", label: __3("Stroke width", "elementor") }, /* @__PURE__ */ React17.createElement(SizeControl, { units })), /* @__PURE__ */ React17.createElement(Control, { bind: "color", label: __3("Stroke color", "elementor") }, /* @__PURE__ */ React17.createElement(ColorControl, null))));
 });
-var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlLabel, null, label)), /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, children)));
+var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React17.createElement(Grid2, { item: true, xs: 6 }, children)));
 
 // src/controls/box-shadow-repeater-control.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 import { FormLabel as FormLabel2, Grid as Grid4, UnstableColorIndicator } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
@@ -642,7 +642,7 @@ var PopoverGridContainer = ({
 }) => /* @__PURE__ */ React19.createElement(Grid3, { container: true, gap, alignItems, flexWrap }, children);
 
 // src/components/repeater.tsx
-import * as React21 from "react";
+import * as React23 from "react";
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
 import {
@@ -659,8 +659,30 @@ import {
 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 
-// src/components/sortable.tsx
+// src/control-adornments/control-adornments.tsx
+import * as React21 from "react";
+
+// src/control-adornments/control-adornments-context.tsx
 import * as React20 from "react";
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var Context2 = createContext5(null);
+var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React20.createElement(Context2.Provider, { value: { items } }, children);
+var useControlAdornments = () => {
+  const context = useContext5(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
+import * as React22 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Divider,
@@ -671,10 +693,10 @@ import {
   UnstableSortableProvider
 } from "@elementor/ui";
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React20.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React20.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
+  return /* @__PURE__ */ React22.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React22.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
 var SortableItem = ({ id, children }) => {
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React22.createElement(
     UnstableSortableItem,
     {
       id,
@@ -683,21 +705,10 @@ var SortableItem = ({ id, children }) => {
         triggerProps,
         itemStyle,
         triggerStyle,
-        isDragOverlay,
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React20.createElement(
-          StyledListItem,
-          {
-            ...itemProps,
-            style: itemStyle,
-            sx: { backgroundColor: isDragOverlay ? "background.paper" : void 0 }
-          },
-          /* @__PURE__ */ React20.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }),
-          children,
-          showDropIndication && /* @__PURE__ */ React20.createElement(StyledDivider, { style: dropIndicationStyle })
-        );
+        return /* @__PURE__ */ React22.createElement(StyledListItem, { ...itemProps, style: itemStyle }, /* @__PURE__ */ React22.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React22.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
@@ -720,13 +731,18 @@ var StyledListItem = styled2(ListItem)`
 		transform: translate( -75%, -50% );
 	}
 
+	&[aria-describedby=''] > .MuiTag-root {
+		background-color: ${({ theme }) => theme.palette.background.paper};
+		box-shadow: ${({ theme }) => theme.shadows[3]};
+	}
+
 	&:hover {
 		& .class-item-sortable-trigger {
 			visibility: visible;
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React20.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React20.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var SortableTrigger = (props) => /* @__PURE__ */ React22.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React22.createElement(GripVerticalIcon, { fontSize: "tiny" }));
 var StyledDivider = styled2(Divider)`
 	height: 0px;
 	border: none;
@@ -746,6 +762,7 @@ var StyledDivider = styled2(Divider)`
 
 // src/components/repeater.tsx
 var SIZE = "tiny";
+var EMPTY_OPEN_ITEM = -1;
 var Repeater = ({
   label,
   itemSettings,
@@ -754,7 +771,7 @@ var Repeater = ({
   values: repeaterValues = [],
   setValues: setRepeaterValues
 }) => {
-  const [openItem, setOpenItem] = useState2(-1);
+  const [openItem, setOpenItem] = useState2(EMPTY_OPEN_ITEM);
   const [items, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
@@ -818,24 +835,33 @@ var Repeater = ({
       });
     });
   };
-  return /* @__PURE__ */ React21.createElement(SectionContent, null, /* @__PURE__ */ React21.createElement(Stack5, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React21.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": __4("Add item", "elementor") }, /* @__PURE__ */ React21.createElement(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(Stack5, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React23.createElement(ControlAdornments, null), /* @__PURE__ */ React23.createElement(
+    IconButton,
+    {
+      sx: { ml: "auto" },
+      size: SIZE,
+      onClick: addRepeaterItem,
+      "aria-label": __4("Add item", "elementor")
+    },
+    /* @__PURE__ */ React23.createElement(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
+        openOnMount: openOnAdd && openItem === key,
+        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM)
       },
-      (props) => /* @__PURE__ */ React21.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React23.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -847,14 +873,15 @@ var RepeaterItem = ({
   removeItem,
   duplicateItem,
   toggleDisableItem,
-  openOnMount
+  openOnMount,
+  onOpen
 }) => {
   const [anchorEl, setAnchorEl] = useState2(null);
-  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount);
+  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
   const duplicateLabel = __4("Duplicate", "elementor");
   const toggleLabel = disabled ? __4("Show", "elementor") : __4("Hide", "elementor");
   const removeLabel = __4("Remove", "elementor");
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
     UnstableTag,
     {
       label,
@@ -865,10 +892,9 @@ var RepeaterItem = ({
       "aria-label": __4("Open item", "elementor"),
       ...bindTrigger2(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React21.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React21.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React21.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React21.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React21.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React21.createElement(XIcon, { fontSize: SIZE })))),
-      sx: { backgroundColor: "background.paper" }
+      actions: /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React23.createElement(CopyIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: toggleDisableItem, "aria-label": toggleLabel }, disabled ? /* @__PURE__ */ React23.createElement(EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React23.createElement(EyeIcon, { fontSize: SIZE }))), /* @__PURE__ */ React23.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React23.createElement(IconButton, { size: SIZE, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React23.createElement(XIcon, { fontSize: SIZE }))))
     }
-  ), /* @__PURE__ */ React21.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     Popover,
     {
       disablePortal: true,
@@ -882,16 +908,17 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React21.createElement(Box, null, children({ anchorEl }))
+    /* @__PURE__ */ React23.createElement(Box, null, children({ anchorEl }))
   ));
 };
-var usePopover = (openOnMount) => {
+var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = useState2(null);
   const popoverState = usePopupState2({ variant: "popover" });
   const popoverProps = bindPopover(popoverState);
   useEffect2(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
+      onOpen?.();
     }
   }, [ref]);
   return {
@@ -905,7 +932,7 @@ var usePopover = (openOnMount) => {
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue } = useBoundProp(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,
@@ -921,13 +948,13 @@ var BoxShadowRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon = ({ value }) => /* @__PURE__ */ React22.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
+var ItemIcon = ({ value }) => /* @__PURE__ */ React24.createElement(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(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: __5("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: __5("Color", "elementor") }, /* @__PURE__ */ React24.createElement(
     ColorControl,
     {
       slotProps: {
@@ -944,7 +971,7 @@ var Content = ({ anchorEl }) => {
         }
       }
     }
-  )), /* @__PURE__ */ React22.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React22.createElement(
+  )), /* @__PURE__ */ React24.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
     SelectControl,
     {
       options: [
@@ -952,14 +979,14 @@ var Content = ({ anchorEl }) => {
         { label: __5("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)), /* @__PURE__ */ React22.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null))), /* @__PURE__ */ React22.createElement(PopoverGridContainer, null, /* @__PURE__ */ React22.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)), /* @__PURE__ */ React22.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React22.createElement(SizeControl, null)))));
+  ))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "hOffset", label: __5("Horizontal", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "vOffset", label: __5("Vertical", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null))), /* @__PURE__ */ React24.createElement(PopoverGridContainer, null, /* @__PURE__ */ React24.createElement(Control2, { bind: "blur", label: __5("Blur", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)), /* @__PURE__ */ React24.createElement(Control2, { bind: "spread", label: __5("Spread", "elementor") }, /* @__PURE__ */ React24.createElement(SizeControl, null)))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React22.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React22.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React22.createElement(Grid4, { item: true, xs: 12 }, children))));
+}) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React24.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React24.createElement(Grid4, { item: true, xs: 12 }, children))));
 var ItemLabel = ({ value }) => {
   const { position, hOffset, vOffset, blur, spread } = value.value;
   const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
@@ -973,7 +1000,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",
@@ -1003,11 +1030,11 @@ var initialShadow = {
 };
 
 // src/controls/toggle-control.tsx
-import * as React24 from "react";
+import * as React26 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 import {
   styled as styled3,
   ToggleButton,
@@ -1031,7 +1058,7 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -1046,7 +1073,7 @@ var ControlToggleButtonGroup = ({
       }
     },
     items.map(
-      ({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React23.createElement(Tooltip2, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React23.createElement(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(Tooltip2, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React25.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React25.createElement(Content3, { size }))) : /* @__PURE__ */ React25.createElement(
         ToggleButton,
         {
           key: buttonValue,
@@ -1055,7 +1082,7 @@ var ControlToggleButtonGroup = ({
           size,
           fullWidth
         },
-        /* @__PURE__ */ React23.createElement(Content3, { size })
+        /* @__PURE__ */ React25.createElement(Content3, { size })
       )
     )
   );
@@ -1082,7 +1109,7 @@ var ToggleControl = createControl(
       fullWidth,
       size
     };
-    return exclusive ? /* @__PURE__ */ React24.createElement(
+    return exclusive ? /* @__PURE__ */ React26.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1090,7 +1117,7 @@ var ToggleControl = createControl(
         onChange: setValue,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React24.createElement(
+    ) : /* @__PURE__ */ React26.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -1103,7 +1130,7 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField4 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
@@ -1125,7 +1152,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(
       TextField4,
       {
         size: "tiny",
@@ -1141,11 +1168,20 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-import * as React26 from "react";
+import * as React29 from "react";
 import { useId as useId2, useRef } from "react";
 import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
-import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack6, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState3 } from "@elementor/ui";
+import { bindPopover as bindPopover2, bindToggle, Grid as Grid5, Popover as Popover2, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip3, usePopupState as usePopupState3 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
+
+// src/components/control-label.tsx
+import * as React28 from "react";
+import { Stack as Stack6 } from "@elementor/ui";
+var ControlLabel = ({ children }) => {
+  return /* @__PURE__ */ React28.createElement(Stack6, { 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) {
@@ -1199,7 +1235,7 @@ function EqualUnequalSizesControl({
     return splitEqualValue() ?? null;
   };
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, label)), /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React26.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React29.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, label)), /* @__PURE__ */ React29.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React29.createElement(SizeControl, { placeholder: isMixed ? __6("Mixed", "elementor") : void 0 }), /* @__PURE__ */ React29.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React29.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -1210,7 +1246,7 @@ function EqualUnequalSizesControl({
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React26.createElement(
+  ))))), /* @__PURE__ */ React29.createElement(
     Popover2,
     {
       disablePortal: true,
@@ -1229,16 +1265,16 @@ function EqualUnequalSizesControl({
         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(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React26.createElement(Grid5, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React26.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React26.createElement(SizeControl, { startIcon: item.icon })))));
+var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React29.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(Grid5, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React29.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React29.createElement(Grid5, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(SizeControl, { startIcon: item.icon })))));
 
 // src/controls/linked-dimensions-control.tsx
-import * as React27 from "react";
+import * as React30 from "react";
 import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
-import { Grid as Grid6, Stack as Stack7, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } from "@elementor/ui";
+import { Grid as Grid6, Stack as Stack8, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
 var LinkedDimensionsControl = createControl(
   ({
@@ -1270,7 +1306,7 @@ var LinkedDimensionsControl = createControl(
     const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
     const linkedLabel = __7("Link %s", "elementor").replace("%s", tooltipLabel);
     const unlinkedLabel = __7("Unlink %s", "elementor").replace("%s", tooltipLabel);
-    return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(ControlLabel, null, label), /* @__PURE__ */ React27.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React30.createElement(PropProvider, { propType, value: dimensionsValue, setValue: setDimensionsValue }, /* @__PURE__ */ React30.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label), /* @__PURE__ */ React30.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React30.createElement(
       ToggleButton3,
       {
         "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -1280,36 +1316,36 @@ var LinkedDimensionsControl = createControl(
         sx: { marginLeft: "auto" },
         onChange: onLinkToggle
       },
-      /* @__PURE__ */ React27.createElement(LinkedIcon, { fontSize: "tiny" })
-    ))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React30.createElement(LinkedIcon, { fontSize: "tiny" })
+    ))), /* @__PURE__ */ React30.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, __7("Top", "elementor"))), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "block-start",
-        startIcon: /* @__PURE__ */ React27.createElement(SideTopIcon, { fontSize: "tiny" }),
+        startIcon: /* @__PURE__ */ React30.createElement(SideTopIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__PURE__ */ React30.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, isSiteRtl ? __7("Left", "elementor") : __7("Right", "elementor"))), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "inline-end",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }),
+        startIcon: isSiteRtl ? /* @__PURE__ */ React30.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React30.createElement(SideRightIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
-    )))), /* @__PURE__ */ React27.createElement(Stack7, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    )))), /* @__PURE__ */ React30.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, __7("Bottom", "elementor"))), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "block-end",
-        startIcon: /* @__PURE__ */ React27.createElement(SideBottomIcon, { fontSize: "tiny" }),
+        startIcon: /* @__PURE__ */ React30.createElement(SideBottomIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
-    ))), /* @__PURE__ */ React27.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(ControlLabel, null, isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"))), /* @__PURE__ */ React27.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(
+    ))), /* @__PURE__ */ React30.createElement(Grid6, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, isSiteRtl ? __7("Right", "elementor") : __7("Left", "elementor"))), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 12 }, /* @__PURE__ */ React30.createElement(
       Control3,
       {
         bind: "inline-start",
-        startIcon: isSiteRtl ? /* @__PURE__ */ React27.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React27.createElement(SideLeftIcon, { fontSize: "tiny" }),
+        startIcon: isSiteRtl ? /* @__PURE__ */ React30.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React30.createElement(SideLeftIcon, { fontSize: "tiny" }),
         isLinked,
         extendedValues
       }
@@ -1323,13 +1359,13 @@ 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
-import * as React28 from "react";
+import * as React31 from "react";
 import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil6 } from "@elementor/editor-props";
 import { ChevronDownIcon, SearchIcon, TextIcon, XIcon as XIcon2 } from "@elementor/icons";
@@ -1344,7 +1380,7 @@ import {
   MenuList,
   MenuSubheader,
   Popover as Popover3,
-  Stack as Stack8,
+  Stack as Stack9,
   styled as styled4,
   TextField as TextField5,
   Typography as Typography2,
@@ -1391,16 +1427,16 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
     setSearchValue("");
     popoverState.close();
   };
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
     UnstableTag2,
     {
       variant: "outlined",
       label: fontFamily,
-      endIcon: /* @__PURE__ */ React28.createElement(ChevronDownIcon, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React31.createElement(ChevronDownIcon, { fontSize: "tiny" }),
       ...bindTrigger3(popoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React28.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -1409,7 +1445,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
       ...bindPopover3(popoverState),
       onClose: handleClose
     },
-    /* @__PURE__ */ React28.createElement(Stack8, null, /* @__PURE__ */ React28.createElement(Stack8, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React28.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React28.createElement(Typography2, { variant: "subtitle2" }, __8("Font Family", "elementor")), /* @__PURE__ */ React28.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React28.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React28.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React31.createElement(Stack9, null, /* @__PURE__ */ React31.createElement(Stack9, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React31.createElement(TextIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React31.createElement(Typography2, { variant: "subtitle2" }, __8("Font Family", "elementor")), /* @__PURE__ */ React31.createElement(IconButton2, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React31.createElement(XIcon2, { fontSize: SIZE2 }))), /* @__PURE__ */ React31.createElement(Box2, { px: 1.5, pb: 1 }, /* @__PURE__ */ React31.createElement(
       TextField5,
       {
         fullWidth: true,
@@ -1418,10 +1454,10 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         placeholder: __8("Search", "elementor"),
         onChange: handleSearch,
         InputProps: {
-          startAdornment: /* @__PURE__ */ React28.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React28.createElement(SearchIcon, { fontSize: SIZE2 }))
+          startAdornment: /* @__PURE__ */ React31.createElement(InputAdornment3, { position: "start" }, /* @__PURE__ */ React31.createElement(SearchIcon, { fontSize: SIZE2 }))
         }
       }
-    )), /* @__PURE__ */ React28.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React28.createElement(
+    )), /* @__PURE__ */ React31.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React31.createElement(
       FontList,
       {
         fontListItems: filteredFontFamilies,
@@ -1429,7 +1465,7 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
         handleClose,
         fontFamily
       }
-    ) : /* @__PURE__ */ React28.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React28.createElement(Stack8, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React28.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React28.createElement(Box2, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(Typography2, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React28.createElement(
+    ) : /* @__PURE__ */ React31.createElement(Box2, { sx: { overflowY: "auto", height: 260, width: 220 } }, /* @__PURE__ */ React31.createElement(Stack9, { alignItems: "center", p: 2.5, gap: 1.5, overflow: "hidden" }, /* @__PURE__ */ React31.createElement(TextIcon, { fontSize: "large" }), /* @__PURE__ */ React31.createElement(Box2, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React31.createElement(Typography2, { align: "center", variant: "subtitle2", color: "text.secondary" }, __8("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React31.createElement(
       Typography2,
       {
         variant: "subtitle2",
@@ -1440,16 +1476,16 @@ 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(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React28.createElement(
+      /* @__PURE__ */ React31.createElement("span", null, "\u201D.")
+    )), /* @__PURE__ */ React31.createElement(Typography2, { align: "center", variant: "caption", color: "text.secondary" }, __8("Try something else.", "elementor"), /* @__PURE__ */ React31.createElement(
       Link,
       {
         color: "secondary",
@@ -1489,7 +1525,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [fontFamily]
   );
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React31.createElement(
     Box2,
     {
       ref: containerRef,
@@ -1499,7 +1535,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
         width: 220
       }
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React31.createElement(
       StyledMenuList,
       {
         role: "listbox",
@@ -1515,7 +1551,7 @@ 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(
+          return /* @__PURE__ */ React31.createElement(
             MenuSubheader,
             {
               key: virtualRow.key,
@@ -1526,7 +1562,7 @@ var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
             item.value
           );
         }
-        return /* @__PURE__ */ React28.createElement(
+        return /* @__PURE__ */ React31.createElement(
           "li",
           {
             key: virtualRow.key,
@@ -1568,7 +1604,9 @@ var StyledMenuList = styled4(MenuList)(({ theme }) => ({
     position: "absolute",
     top: 0,
     left: 0,
-    width: "100%"
+    width: "100%",
+    display: "flex",
+    alignItems: "center"
   },
   '& > [role="option"]': {
     ...theme.typography.caption,
@@ -1593,13 +1631,13 @@ var useDebounce = (fn, delay) => {
 };
 
 // src/controls/url-control.tsx
-import * as React29 from "react";
+import * as React32 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField6 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue } = useBoundProp(urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React29.createElement(ControlActions, null, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
     TextField6,
     {
       size: "tiny",
@@ -1612,9 +1650,9 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-import * as React31 from "react";
+import * as React34 from "react";
 import { useMemo, useState as useState4 } from "react";
-import { getAncestorWithAnchorTag, getDescendantWithAnchorTag } from "@elementor/editor-elements";
+import { getLinkInLinkRestriction, selectElement } from "@elementor/editor-elements";
 import {
   booleanPropTypeUtil,
   linkPropTypeUtil,
@@ -1622,15 +1660,16 @@ import {
   stringPropTypeUtil as stringPropTypeUtil7,
   urlPropTypeUtil as urlPropTypeUtil2
 } from "@elementor/editor-props";
+import { InfoTipCard } from "@elementor/editor-ui";
 import { httpService as httpService2 } from "@elementor/http";
-import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
+import { AlertTriangleIcon, MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
-import { Collapse, Divider as Divider3, Grid as Grid7, IconButton as IconButton4, Stack as Stack9, Switch } from "@elementor/ui";
+import { Box as Box4, Collapse, Divider as Divider3, Grid as Grid7, IconButton as IconButton4, Infotip, Stack as Stack10, Switch } from "@elementor/ui";
 import { debounce as debounce2 } from "@elementor/utils";
 import { __ as __9 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
-import * as React30 from "react";
+import * as React33 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { XIcon as XIcon3 } from "@elementor/icons";
 import {
@@ -1656,7 +1695,7 @@ var Autocomplete = forwardRef2((props, ref) => {
   const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
   const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
   const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React33.createElement(
     AutocompleteBase,
     {
       ...restProps,
@@ -1674,8 +1713,8 @@ var Autocomplete = forwardRef2((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React30.createElement(Box3, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React30.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React33.createElement(Box3, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React33.createElement(
         TextInput,
         {
           params,
@@ -1698,7 +1737,7 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React33.createElement(
     TextField7,
     {
       ...params,
@@ -1711,7 +1750,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React30.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React33.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -1720,7 +1759,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React30.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React30.createElement(IconButton3, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React30.createElement(XIcon3, { fontSize: params.size })));
+}) => /* @__PURE__ */ React33.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React33.createElement(IconButton3, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React33.createElement(XIcon3, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -1743,10 +1782,14 @@ function _factoryFilter(newValue, options, minInputLength) {
 
 // src/controls/link-control.tsx
 var SIZE3 = "tiny";
+var learnMoreButton = {
+  label: __9("Learn More", "elementor"),
+  href: "https://go.elementor.com/element-link-inside-link-infotip"
+};
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isEnabled, setIsEnabled] = useState4(!!value);
+  const [isActive, setIsActive] = useState4(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
@@ -1754,17 +1797,19 @@ var LinkControl = createControl((props) => {
     minInputLength = 2,
     context: { elementId }
   } = props || {};
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState4(getLinkInLinkRestriction(elementId));
   const [options, setOptions] = useState4(
     generateFirstLoadedOption(value)
   );
+  const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
   const onEnabledChange = () => {
-    const shouldRestrict = getAncestorWithAnchorTag(elementId) || getDescendantWithAnchorTag(elementId);
-    if (shouldRestrict && !isEnabled) {
+    setLinkInLinkRestriction(getLinkInLinkRestriction(elementId));
+    if (linkInLinkRestriction.shouldRestrict && !isActive) {
       return;
     }
-    setIsEnabled((prevState) => !prevState);
-    setValue(isEnabled ? null : linkSessionValue?.value ?? null);
-    setLinkSessionValue({ value, meta: { isEnabled: !isEnabled } });
+    setIsActive((prevState) => !prevState);
+    setValue(isActive ? null : linkSessionValue?.value ?? null);
+    setLinkSessionValue({ value, meta: { isEnabled: !isActive } });
   };
   const onOptionChange = (newValue) => {
     const valueToSave = newValue ? {
@@ -1804,8 +1849,8 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React31.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React31.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(Divider3, null), /* @__PURE__ */ React31.createElement(
-    Stack9,
+  return /* @__PURE__ */ React34.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React34.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React34.createElement(Divider3, null), /* @__PURE__ */ React34.createElement(
+    Stack10,
     {
       direction: "row",
       sx: {
@@ -1813,37 +1858,43 @@ var LinkControl = createControl((props) => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React31.createElement(ControlLabel, null, __9("Link", "elementor")),
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Link", "elementor")),
+    /* @__PURE__ */ React34.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React34.createElement(
       ToggleIconControl,
       {
-        enabled: isEnabled,
+        disabled: shouldDisableAddingLink,
+        active: isActive,
         onIconClick: onEnabledChange,
         label: __9("Toggle link", "elementor")
       }
-    )
-  ), /* @__PURE__ */ React31.createElement(Collapse, { in: isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React31.createElement(Stack9, { gap: 1.5 }, /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React31.createElement(ControlActions, null, /* @__PURE__ */ React31.createElement(
+    ))
+  ), /* @__PURE__ */ React34.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React34.createElement(Stack10, { 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, { disabled: !value }))))));
 });
-var ToggleIconControl = ({ enabled, onIconClick, label }) => {
-  return /* @__PURE__ */ React31.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React31.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React31.createElement(PlusIcon2, { fontSize: SIZE3 }));
+var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
+  return /* @__PURE__ */ React34.createElement(IconButton4, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React34.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React34.createElement(PlusIcon2, { fontSize: SIZE3 }));
 };
-var SwitchControl = () => {
+var SwitchControl = ({ disabled }) => {
   const { value = false, setValue } = useBoundProp(booleanPropTypeUtil);
   const onClick = () => {
     setValue(!value);
   };
-  return /* @__PURE__ */ React31.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(ControlLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React31.createElement(Grid7, { item: true }, /* @__PURE__ */ React31.createElement(Switch, { checked: value, onClick })));
+  const inputProps = disabled ? {
+    style: {
+      opacity: 0
+    }
+  } : {};
+  return /* @__PURE__ */ React34.createElement(Grid7, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(ControlFormLabel, null, __9("Open in a new tab", "elementor"))), /* @__PURE__ */ React34.createElement(Grid7, { item: true }, /* @__PURE__ */ React34.createElement(Switch, { checked: value, onClick, disabled, inputProps })));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -1873,12 +1924,43 @@ function generateFirstLoadedOption(unionValue) {
     }
   ] : [];
 }
+var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
+  const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+  const handleTakeMeClick = () => {
+    if (elementId) {
+      selectElement(elementId);
+    }
+  };
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React34.createElement(
+    Infotip,
+    {
+      placement: "right",
+      content: /* @__PURE__ */ React34.createElement(
+        InfoTipCard,
+        {
+          content: INFOTIP_CONTENT[reason],
+          svgIcon: /* @__PURE__ */ React34.createElement(AlertTriangleIcon, null),
+          learnMoreButton,
+          ctaButton: {
+            label: __9("Take me there", "elementor"),
+            onClick: handleTakeMeClick
+          }
+        }
+      )
+    },
+    /* @__PURE__ */ React34.createElement(Box4, null, children)
+  ) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, children);
+};
+var INFOTIP_CONTENT = {
+  descendant: /* @__PURE__ */ React34.createElement(React34.Fragment, null, __9("To add a link to this container,", "elementor"), /* @__PURE__ */ React34.createElement("br", null), __9("first remove the link from the elements inside of it.", "elementor")),
+  ancestor: /* @__PURE__ */ React34.createElement(React34.Fragment, null, __9("To add a link to this element,", "elementor"), /* @__PURE__ */ React34.createElement("br", null), __9("first remove the link from its parent container.", "elementor"))
+};
 
 // src/controls/gap-control.tsx
-import * as React32 from "react";
+import * as React35 from "react";
 import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
-import { Grid as Grid8, Stack as Stack10, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
+import { Grid as Grid8, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
 var GapControl = createControl(({ label }) => {
   const {
@@ -1903,7 +1985,7 @@ var GapControl = createControl(({ label }) => {
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
   const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
   const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
-  return /* @__PURE__ */ React32.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(ControlLabel, null, label), /* @__PURE__ */ React32.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React35.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React35.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(ControlLabel, null, label), /* @__PURE__ */ React35.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React35.createElement(
     ToggleButton4,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -1913,27 +1995,27 @@ var GapControl = createControl(({ label }) => {
       sx: { marginLeft: "auto" },
       onChange: onLinkToggle
     },
-    /* @__PURE__ */ React32.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React32.createElement(Stack10, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React32.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(ControlLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React32.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React32.createElement(Control4, { bind: "row", isLinked })))));
+    /* @__PURE__ */ React35.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React35.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React35.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, __10("Column", "elementor"))), /* @__PURE__ */ React35.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(Control4, { bind: "column", isLinked }))), /* @__PURE__ */ React35.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React35.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, __10("Row", "elementor"))), /* @__PURE__ */ React35.createElement(Grid8, { 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
-import * as React34 from "react";
+import * as React37 from "react";
 import { useState as useState6 } from "react";
 import { imageSrcPropTypeUtil as imageSrcPropTypeUtil2 } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
-import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack11, styled as styled5 } from "@elementor/ui";
+import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack12, styled as styled5 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
 import { __ as __12 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React33 from "react";
+import * as React36 from "react";
 import { useState as useState5 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import {
@@ -1986,9 +2068,9 @@ 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(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React33.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React33.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React33.createElement(Divider4, null), /* @__PURE__ */ React33.createElement(DialogContent, null, /* @__PURE__ */ React33.createElement(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(DialogActions, null, /* @__PURE__ */ React33.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __11("Cancel", "elementor")), /* @__PURE__ */ React33.createElement(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React36.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React36.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React36.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React36.createElement(Divider4, null), /* @__PURE__ */ React36.createElement(DialogContent, null, /* @__PURE__ */ React36.createElement(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(DialogActions, null, /* @__PURE__ */ React36.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __11("Cancel", "elementor")), /* @__PURE__ */ React36.createElement(
   Button3,
   {
     size: "medium",
@@ -1997,9 +2079,9 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React33.createElement(CircularProgress2, { size: 24 }) : __11("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React36.createElement(CircularProgress2, { size: 24 }) : __11("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React33.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React33.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React33.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React33.createElement(Divider4, null), /* @__PURE__ */ React33.createElement(DialogContent, null, /* @__PURE__ */ React33.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React33.createElement(DialogActions, null, /* @__PURE__ */ React33.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __11("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React36.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React36.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React36.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React36.createElement(Divider4, null), /* @__PURE__ */ React36.createElement(DialogContent, null, /* @__PURE__ */ React36.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React36.createElement(DialogActions, null, /* @__PURE__ */ React36.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __11("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
@@ -2015,7 +2097,7 @@ var StyledCard = styled5(Card2)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = styled5(Stack11)`
+var StyledCardMediaContainer = styled5(Stack12)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -2060,7 +2142,7 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  return /* @__PURE__ */ React34.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React34.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React34.createElement(ControlLabel, null, " ", __12("SVG", "elementor"), " "), /* @__PURE__ */ React34.createElement(ControlActions, null, /* @__PURE__ */ React34.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React34.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React34.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React37.createElement(Stack12, { gap: 1 }, /* @__PURE__ */ React37.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React37.createElement(ControlFormLabel, null, " ", __12("SVG", "elementor"), " "), /* @__PURE__ */ React37.createElement(ControlActions, null, /* @__PURE__ */ React37.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React37.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React37.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React37.createElement(
     CardMedia2,
     {
       component: "img",
@@ -2068,7 +2150,7 @@ var SvgMediaControl = createControl(() => {
       alt: __12("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React34.createElement(
+  )), /* @__PURE__ */ React37.createElement(
     CardOverlay2,
     {
       sx: {
@@ -2077,7 +2159,7 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React34.createElement(Stack11, { gap: 1 }, /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React37.createElement(Stack12, { gap: 1 }, /* @__PURE__ */ React37.createElement(
       Button4,
       {
         size: "tiny",
@@ -2086,13 +2168,13 @@ var SvgMediaControl = createControl(() => {
         onClick: () => handleClick(MODE_BROWSE)
       },
       __12("Select SVG", "elementor")
-    ), /* @__PURE__ */ React34.createElement(
+    ), /* @__PURE__ */ React37.createElement(
       Button4,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React34.createElement(UploadIcon2, null),
+        startIcon: /* @__PURE__ */ React37.createElement(UploadIcon2, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
       __12("Upload", "elementor")
@@ -2101,20 +2183,20 @@ var SvgMediaControl = createControl(() => {
 });
 
 // src/controls/background-control/background-control.tsx
-import * as React41 from "react";
+import * as React44 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid14 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React40 from "react";
+import * as React43 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box4, CardMedia as CardMedia3, Grid as Grid13, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box5, CardMedia as CardMedia3, Grid as Grid13, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
 import { __ as __17 } from "@wordpress/i18n";
 
@@ -2123,7 +2205,7 @@ import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React35 from "react";
+import * as React38 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -2170,7 +2252,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React35.createElement(ControlActions, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -2195,7 +2277,7 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React36 from "react";
+import * as React39 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid9 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
@@ -2203,22 +2285,22 @@ var attachmentControlOptions = [
   {
     value: "fixed",
     label: __13("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: __13("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React36.createElement(PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React36.createElement(PopoverGridContainer, null, /* @__PURE__ */ React36.createElement(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __13("Attachment", "elementor"))), /* @__PURE__ */ React36.createElement(Grid9, { 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(Grid9, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlFormLabel, null, __13("Attachment", "elementor"))), /* @__PURE__ */ React39.createElement(Grid9, { 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
-import * as React37 from "react";
+import * as React40 from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
@@ -2248,7 +2330,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React37.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React37.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, __14("Position", "elementor"))), /* @__PURE__ */ React37.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React40.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, null, /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, __14("Position", "elementor"))), /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React40.createElement(
     Select2,
     {
       size: "tiny",
@@ -2256,12 +2338,12 @@ var BackgroundImageOverlayPosition = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React37.createElement(MenuListItem3, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React37.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React37.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React37.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React37.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: /* @__PURE__ */ React37.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React40.createElement(MenuListItem3, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React40.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(Grid10, { container: true, spacing: 1.5 }, /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(LetterXIcon, { fontSize: "tiny" }) }))), /* @__PURE__ */ React40.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React40.createElement(SizeControl, { startIcon: /* @__PURE__ */ React40.createElement(LetterYIcon, { fontSize: "tiny" }) })))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React38 from "react";
+import * as React41 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
 import { Grid as Grid11 } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
@@ -2269,34 +2351,34 @@ var repeatControlOptions = [
   {
     value: "repeat",
     label: __15("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: __15("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: __15("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: __15("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React38.createElement(XIcon4, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React41.createElement(XIcon4, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React38.createElement(PopoverGridContainer, null, /* @__PURE__ */ React38.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React38.createElement(ControlLabel, null, __15("Repeat", "elementor"))), /* @__PURE__ */ React38.createElement(Grid11, { 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(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, __15("Repeat", "elementor"))), /* @__PURE__ */ React41.createElement(Grid11, { 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
-import * as React39 from "react";
+import * as React42 from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -2312,25 +2394,25 @@ var sizeControlOptions = [
   {
     value: "auto",
     label: __16("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: __16("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: __16("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: __16("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React39.createElement(PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -2345,7 +2427,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React39.createElement(Grid12, { container: true, spacing: 1.5 }, /* @__PURE__ */ React39.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel, null, __16("Size", "elementor"))), /* @__PURE__ */ React39.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React42.createElement(Grid12, { container: true, spacing: 1.5 }, /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(ControlFormLabel, null, __16("Size", "elementor"))), /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React42.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -2353,16 +2435,16 @@ var BackgroundImageOverlaySize = () => {
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value,
       onChange: handleSizeChange
     }
-  )))), isCustom ? /* @__PURE__ */ React39.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React39.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React39.createElement(PopoverGridContainer, null, /* @__PURE__ */ React39.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React39.createElement(
+  )))), isCustom ? /* @__PURE__ */ React42.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 12 }, /* @__PURE__ */ React42.createElement(PopoverGridContainer, null, /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React39.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React42.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React39.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React39.createElement(
+  ))), /* @__PURE__ */ React42.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React42.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React42.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React39.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React42.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedValues: ["auto"]
     }
   )))))) : null);
@@ -2469,7 +2551,7 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(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,
@@ -2486,7 +2568,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({
@@ -2494,7 +2576,7 @@ var Content2 = () => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React40.createElement(Box4, { sx: { width: "100%" } }, /* @__PURE__ */ React40.createElement(Box4, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React43.createElement(Box5, { sx: { width: "100%" } }, /* @__PURE__ */ React43.createElement(Box5, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React43.createElement(
     Tabs,
     {
       size: "small",
@@ -2502,19 +2584,19 @@ var Content2 = () => {
       ...getTabsProps(),
       "aria-label": __17("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React40.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React40.createElement(Tab, { label: __17("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React40.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React40.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React40.createElement(PopoverContent, null, /* @__PURE__ */ React40.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React40.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React40.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React40.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React40.createElement(PopoverContent, null, /* @__PURE__ */ React40.createElement(ColorOverlayContent, null))));
+    /* @__PURE__ */ React43.createElement(Tab, { label: __17("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React43.createElement(Tab, { label: __17("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React43.createElement(Tab, { label: __17("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React43.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React43.createElement(PopoverContent, null, /* @__PURE__ */ React43.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React43.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React43.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React43.createElement(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;
   }
@@ -2527,62 +2609,76 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React40.createElement(UnstableColorIndicator2, { 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(CardMedia3, { image: imageUrl, sx: { height: 13, width: 13, borderRadius: "4px" } });
+  return /* @__PURE__ */ React43.createElement(
+    CardMedia3,
+    {
+      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(UnstableColorIndicator2, { 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, __17("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React43.createElement("span", null, __17("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React40.createElement("span", null, __17("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React43.createElement("span", null, __17("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = () => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  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(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React40.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React40.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React40.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React43.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React43.createElement(Grid13, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React43.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React43.createElement(
     ImageControl,
     {
       resolutionLabel: __17("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 = styled6(UnstableColorIndicator2)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
   const imageSrc = image?.value.image.value?.src.value;
   const { data: attachment } = useWpMediaAttachment3(imageSrc.id?.value || null);
   if (imageSrc.id) {
-    const imageFileTypeExtension = attachment?.subtype ? `.${attachment.subtype}` : "";
+    const imageFileTypeExtension = getFileExtensionFromFilename(attachment?.filename);
     imageTitle = `${attachment?.title}${imageFileTypeExtension}` || null;
     imageUrl = attachment?.url || null;
   } else if (imageSrc.url) {
@@ -2591,6 +2687,13 @@ var useImage = (image) => {
   }
   return { imageTitle, imageUrl };
 };
+var getFileExtensionFromFilename = (filename) => {
+  if (!filename) {
+    return "";
+  }
+  const extension = filename.substring(filename.lastIndexOf(".") + 1);
+  return `.${extension}`;
+};
 var getGradientValue = (value) => {
   const gradient = value.value;
   const stops = gradient.stops.value?.map(({ value: { color, offset } }) => `${color.value} ${offset.value ?? 0}%`)?.join(",");
@@ -2603,28 +2706,8 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(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(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel, null, __18("Color", "elementor"))), /* @__PURE__ */ React41.createElement(Grid14, { 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(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, __18("Color", "elementor"))), /* @__PURE__ */ React44.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(ColorControl, null))))));
 });
-
-// src/control-adornments/control-adornments-context.tsx
-import * as React42 from "react";
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var Context2 = createContext5(null);
-var ControlAdornmentsProvider = ({ children, items }) => /* @__PURE__ */ React42.createElement(Context2.Provider, { value: { items } }, children);
-var useControlAdornments = () => {
-  const context = useContext5(Context2);
-  return context?.items ?? [];
-};
-
-// src/control-adornments/control-adornments.tsx
-import * as React43 from "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 })));
-}
 export {
   BackgroundControl,
   BoxShadowRepeaterControl,
@@ -2632,7 +2715,7 @@ export {
   ControlActionsProvider,
   ControlAdornments,
   ControlAdornmentsProvider,
-  ControlLabel,
+  ControlFormLabel,
   ControlReplacementProvider,
   ControlToggleButtonGroup,
   EqualUnequalSizesControl,