@elementor/editor-editing-panel 4.2.0-912 → 4.2.0-913

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BaseControl: () => Control,
+  ControlLabel: () => ControlLabel,
   ControlTypeContainer: () => ControlTypeContainer,
   CustomCssIndicator: () => CustomCssIndicator,
   EditingPanelTabs: () => EditingPanelTabs,
@@ -226,14 +227,23 @@ var onConvert = (opts) => {
   });
 };
 
+// src/components/control-label.tsx
+var React5 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var ControlLabel = ({ children, infoTooltip }) => {
+  return /* @__PURE__ */ React5.createElement(import_ui.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React5.createElement(import_editor_controls.ControlFormLabel, null, children), infoTooltip && /* @__PURE__ */ React5.createElement(import_ui.Tooltip, { title: infoTooltip, placement: "top" }, /* @__PURE__ */ React5.createElement(import_icons.InfoCircleIcon, { fontSize: "tiny" })), /* @__PURE__ */ React5.createElement(import_editor_controls.ControlAdornments, null));
+};
+
 // src/components/css-classes/css-class-selector.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react10 = require("react");
 var import_editor_styles_repository11 = require("@elementor/editor-styles-repository");
 var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons3 = require("@elementor/icons");
+var import_icons4 = require("@elementor/icons");
 var import_locations2 = require("@elementor/locations");
-var import_ui8 = require("@elementor/ui");
+var import_ui9 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
 // src/utils/get-styles-provider-color.ts
@@ -284,9 +294,9 @@ var trackStyles = (provider, event, data) => {
 };
 
 // src/components/creatable-autocomplete/creatable-autocomplete.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_react6 = require("react");
-var import_ui2 = require("@elementor/ui");
+var import_ui3 = require("@elementor/ui");
 
 // src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts
 function addGroupToOptions(options13, pluralEntityName) {
@@ -432,14 +442,14 @@ function useCreateOption(params) {
 }
 
 // src/components/creatable-autocomplete/use-filter-options.ts
-var import_ui = require("@elementor/ui");
+var import_ui2 = require("@elementor/ui");
 var STRIP_NON_CLASS_CHARS = /[^a-zA-Z0-9_-]/g;
 function normalizeClassSearch(value) {
   return value.replace(STRIP_NON_CLASS_CHARS, "").toLowerCase();
 }
 function useFilterOptions(parameters) {
   const { options: options13, selected, onCreate, entityName } = parameters;
-  const filter = (0, import_ui.createFilterOptions)({
+  const filter = (0, import_ui2.createFilterOptions)({
     matchFrom: "any"
   });
   const filterOptions = (optionList, params) => {
@@ -466,7 +476,7 @@ function useFilterOptions(parameters) {
 
 // src/components/creatable-autocomplete/creatable-autocomplete.tsx
 var MIN_INPUT_LENGTH = 2;
-var CreatableAutocomplete = React5.forwardRef(CreatableAutocompleteInner);
+var CreatableAutocomplete = React6.forwardRef(CreatableAutocompleteInner);
 function CreatableAutocompleteInner({
   selected,
   options: options13,
@@ -495,12 +505,12 @@ function CreatableAutocompleteInner({
   const filterOptions = useFilterOptions({ options: options13, selected, onCreate, entityName });
   const isCreatable = Boolean(onCreate);
   const freeSolo = isCreatable || inputValue.length < MIN_INPUT_LENGTH || void 0;
-  return /* @__PURE__ */ React5.createElement(
-    import_ui2.Autocomplete,
+  return /* @__PURE__ */ React6.createElement(
+    import_ui3.Autocomplete,
     {
       renderTags: (tagValue, getTagProps) => {
-        return tagValue.map((option, index) => /* @__PURE__ */ React5.createElement(
-          import_ui2.Chip,
+        return tagValue.map((option, index) => /* @__PURE__ */ React6.createElement(
+          import_ui3.Chip,
           {
             size: "tiny",
             ...getTagProps({ index }),
@@ -525,12 +535,12 @@ function CreatableAutocompleteInner({
       disableCloseOnSelect: true,
       value: internalSelected,
       options: internalOptions,
-      ListboxComponent: error ? React5.forwardRef((_, errorTextRef) => /* @__PURE__ */ React5.createElement(ErrorText, { ref: errorTextRef, error })) : void 0,
-      renderGroup: (params) => /* @__PURE__ */ React5.createElement(Group, { ...params }),
+      ListboxComponent: error ? React6.forwardRef((_, errorTextRef) => /* @__PURE__ */ React6.createElement(ErrorText, { ref: errorTextRef, error })) : void 0,
+      renderGroup: (params) => /* @__PURE__ */ React6.createElement(Group, { ...params }),
       inputValue,
       renderInput: (params) => {
-        return /* @__PURE__ */ React5.createElement(
-          import_ui2.TextField,
+        return /* @__PURE__ */ React6.createElement(
+          import_ui3.TextField,
           {
             ...params,
             error: Boolean(error),
@@ -557,7 +567,7 @@ function CreatableAutocompleteInner({
       groupBy: (option) => option._group ?? "",
       renderOption: (optionProps, option) => {
         const { _group, label } = option;
-        return /* @__PURE__ */ React5.createElement(
+        return /* @__PURE__ */ React6.createElement(
           "li",
           {
             ...optionProps,
@@ -585,49 +595,49 @@ function CreatableAutocompleteInner({
 }
 var Group = (params) => {
   const id = `combobox-group-${(0, import_react6.useId)().replace(/:/g, "_")}`;
-  return /* @__PURE__ */ React5.createElement(StyledGroup, { role: "group", "aria-labelledby": id }, /* @__PURE__ */ React5.createElement(StyledGroupHeader, { id }, " ", params.group), /* @__PURE__ */ React5.createElement(StyledGroupItems, { role: "listbox" }, params.children));
+  return /* @__PURE__ */ React6.createElement(StyledGroup, { role: "group", "aria-labelledby": id }, /* @__PURE__ */ React6.createElement(StyledGroupHeader, { id }, " ", params.group), /* @__PURE__ */ React6.createElement(StyledGroupItems, { role: "listbox" }, params.children));
 };
-var ErrorText = React5.forwardRef(({ error = "error" }, ref) => {
-  return /* @__PURE__ */ React5.createElement(
-    import_ui2.Box,
+var ErrorText = React6.forwardRef(({ error = "error" }, ref) => {
+  return /* @__PURE__ */ React6.createElement(
+    import_ui3.Box,
     {
       ref,
       sx: (theme) => ({
         padding: theme.spacing(2)
       })
     },
-    /* @__PURE__ */ React5.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "error.main", display: "inline-block" } }, error)
+    /* @__PURE__ */ React6.createElement(import_ui3.Typography, { variant: "caption", sx: { color: "error.main", display: "inline-block" } }, error)
   );
 });
-var StyledGroup = (0, import_ui2.styled)("li")`
+var StyledGroup = (0, import_ui3.styled)("li")`
 	&:not( :last-of-type ) {
 		border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 	}
 `;
-var StyledGroupHeader = (0, import_ui2.styled)(import_ui2.Box)(({ theme }) => ({
+var StyledGroupHeader = (0, import_ui3.styled)(import_ui3.Box)(({ theme }) => ({
   position: "sticky",
   top: "-8px",
   padding: theme.spacing(1, 2),
   color: theme.palette.text.tertiary,
   backgroundColor: theme.palette.primary.contrastText
 }));
-var StyledGroupItems = (0, import_ui2.styled)("ul")`
+var StyledGroupItems = (0, import_ui3.styled)("ul")`
 	padding: 0;
 `;
 
 // src/components/css-classes/css-class-item.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_editor_styles = require("@elementor/editor-styles");
 var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons = require("@elementor/icons");
+var import_icons2 = require("@elementor/icons");
 var import_session3 = require("@elementor/session");
-var import_ui6 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/css-classes/css-class-context.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_react7 = require("react");
 var CssClassContext = (0, import_react7.createContext)(null);
 var useCssClass = () => {
@@ -638,19 +648,19 @@ var useCssClass = () => {
   return context;
 };
 function CssClassProvider({ children, ...contextValue }) {
-  return /* @__PURE__ */ React6.createElement(CssClassContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React7.createElement(CssClassContext.Provider, { value: contextValue }, children);
 }
 
 // src/components/css-classes/css-class-menu.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui5 = require("@elementor/ui");
+var import_ui6 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/style-indicator.tsx
-var import_ui3 = require("@elementor/ui");
-var StyleIndicator = (0, import_ui3.styled)("div", {
+var import_ui4 = require("@elementor/ui");
+var StyleIndicator = (0, import_ui4.styled)("div", {
   shouldForwardProp: (prop) => !["isOverridden", "getColor"].includes(prop)
 })`
 	width: 5px;
@@ -666,7 +676,7 @@ var StyleIndicator = (0, import_ui3.styled)("div", {
 `;
 
 // src/components/css-classes/duplicate-class-menu-item.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_session2 = require("@elementor/session");
@@ -918,12 +928,12 @@ function DuplicateClassMenuItem({ closeMenu }) {
     }
     closeMenu();
   };
-  return /* @__PURE__ */ React7.createElement(import_editor_ui.MenuListItem, { onClick: handleDuplicate }, (0, import_i18n2.__)("Duplicate", "elementor"));
+  return /* @__PURE__ */ React8.createElement(import_editor_ui.MenuListItem, { onClick: handleDuplicate }, (0, import_i18n2.__)("Duplicate", "elementor"));
 }
 
 // src/components/css-classes/local-class-sub-menu.tsx
-var React8 = __toESM(require("react"));
-var import_ui4 = require("@elementor/ui");
+var React9 = __toESM(require("react"));
+var import_ui5 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/css-classes/use-can-convert-local-class-to-global.ts
@@ -946,7 +956,7 @@ var useCanConvertLocalClassToGlobal = () => {
 // src/components/css-classes/local-class-sub-menu.tsx
 var LocalClassSubMenu = (props) => {
   const { canConvert, styleDef } = useCanConvertLocalClassToGlobal();
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui4.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, (0, import_i18n3.__)("Local Class", "elementor")), /* @__PURE__ */ React8.createElement(CssClassConvert, { canConvert, styleDef, closeMenu: props.popupState.close }));
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui5.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, (0, import_i18n3.__)("Local Class", "elementor")), /* @__PURE__ */ React9.createElement(CssClassConvert, { canConvert, styleDef, closeMenu: props.popupState.close }));
 };
 
 // src/components/css-classes/css-class-menu.tsx
@@ -973,11 +983,11 @@ function CssClassMenu({ popupState, anchorEl, fixed }) {
   const handleKeyDown = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ React9.createElement(
-    import_ui5.Menu,
+  return /* @__PURE__ */ React10.createElement(
+    import_ui6.Menu,
     {
       MenuListProps: { dense: true, sx: { minWidth: "160px" } },
-      ...(0, import_ui5.bindMenu)(popupState),
+      ...(0, import_ui6.bindMenu)(popupState),
       anchorEl,
       anchorOrigin: {
         vertical: "bottom",
@@ -990,11 +1000,11 @@ function CssClassMenu({ popupState, anchorEl, fixed }) {
       onKeyDown: handleKeyDown,
       disableAutoFocusItem: true
     },
-    isLocalStyle2 && /* @__PURE__ */ React9.createElement(LocalClassSubMenu, { popupState }),
+    isLocalStyle2 && /* @__PURE__ */ React10.createElement(LocalClassSubMenu, { popupState }),
     getMenuItemsByProvider({ provider, closeMenu: popupState.close, fixed }),
-    /* @__PURE__ */ React9.createElement(import_ui5.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, (0, import_i18n4.__)("States", "elementor")),
+    /* @__PURE__ */ React10.createElement(import_ui6.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, (0, import_i18n4.__)("States", "elementor")),
     pseudoStates.map((state) => {
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(
         StateMenuItem,
         {
           key: state.key,
@@ -1004,7 +1014,7 @@ function CssClassMenu({ popupState, anchorEl, fixed }) {
         }
       );
     }),
-    /* @__PURE__ */ React9.createElement(ClassStatesMenu, { closeMenu: popupState.close })
+    /* @__PURE__ */ React10.createElement(ClassStatesMenu, { closeMenu: popupState.close })
   );
 }
 function ClassStatesMenu({ closeMenu }) {
@@ -1013,8 +1023,8 @@ function ClassStatesMenu({ closeMenu }) {
     return null;
   }
   const customTitle = (0, import_i18n4.__)("%s States", "elementor").replace("%s", elementTitle);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(import_ui5.Divider, null), /* @__PURE__ */ React9.createElement(import_ui5.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, customTitle), elementStates.map((state) => {
-    return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui6.Divider, null), /* @__PURE__ */ React10.createElement(import_ui6.MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, customTitle), elementStates.map((state) => {
+    return /* @__PURE__ */ React10.createElement(
       StateMenuItem,
       {
         key: state.key,
@@ -1064,14 +1074,14 @@ function getMenuItemsByProvider({
   const canDuplicate = providerActions?.create && providerActions?.get;
   const canUnapply = !fixed;
   const actions = [
-    canUpdate && /* @__PURE__ */ React9.createElement(RenameClassMenuItem, { key: "rename-class", closeMenu }),
-    canDuplicate && /* @__PURE__ */ React9.createElement(DuplicateClassMenuItem, { key: "duplicate-class", closeMenu }),
-    canUnapply && /* @__PURE__ */ React9.createElement(UnapplyClassMenuItem, { key: "unapply-class", closeMenu })
+    canUpdate && /* @__PURE__ */ React10.createElement(RenameClassMenuItem, { key: "rename-class", closeMenu }),
+    canDuplicate && /* @__PURE__ */ React10.createElement(DuplicateClassMenuItem, { key: "duplicate-class", closeMenu }),
+    canUnapply && /* @__PURE__ */ React10.createElement(UnapplyClassMenuItem, { key: "unapply-class", closeMenu })
   ].filter(Boolean);
   if (actions.length) {
     actions.unshift(
-      /* @__PURE__ */ React9.createElement(
-        import_ui5.MenuSubheader,
+      /* @__PURE__ */ React10.createElement(
+        import_ui6.MenuSubheader,
         {
           key: "provider-label",
           sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1, textTransform: "capitalize" }
@@ -1079,7 +1089,7 @@ function getMenuItemsByProvider({
         providerInstance?.labels?.singular
       )
     );
-    actions.push(/* @__PURE__ */ React9.createElement(import_ui5.Divider, { key: "provider-actions-divider" }));
+    actions.push(/* @__PURE__ */ React10.createElement(import_ui6.Divider, { key: "provider-actions-divider" }));
   }
   return actions;
 }
@@ -1094,7 +1104,7 @@ function StateMenuItem({ state, label, closeMenu, ...props }) {
   const disabled = !isUpdateAllowed && !isStyled;
   const isActive = styleId === activeId;
   const isSelected = state === activeState && isActive;
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     import_editor_ui2.MenuListItem,
     {
       ...props,
@@ -1114,13 +1124,13 @@ function StateMenuItem({ state, label, closeMenu, ...props }) {
         closeMenu();
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       import_editor_ui2.MenuItemInfotip,
       {
         showInfoTip: disabled,
         content: (0, import_i18n4.__)("With your current role, you can only use existing states.", "elementor")
       },
-      /* @__PURE__ */ React9.createElement(import_ui5.Stack, { gap: 0.75, direction: "row", alignItems: "center" }, isStyled && /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 0.75, direction: "row", alignItems: "center" }, isStyled && /* @__PURE__ */ React10.createElement(
         StyleIndicator,
         {
           "aria-label": (0, import_i18n4.__)("Has style", "elementor"),
@@ -1133,7 +1143,7 @@ function StateMenuItem({ state, label, closeMenu, ...props }) {
 function UnapplyClassMenuItem({ closeMenu, ...props }) {
   const { id: classId, label: classLabel, provider } = useCssClass();
   const unapplyClass = useUndoableUnapplyClass();
-  return classId ? /* @__PURE__ */ React9.createElement(
+  return classId ? /* @__PURE__ */ React10.createElement(
     import_editor_ui2.MenuListItem,
     {
       ...props,
@@ -1157,7 +1167,7 @@ function RenameClassMenuItem({ closeMenu }) {
     return null;
   }
   const isAllowed = userCan(provider).update;
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     import_editor_ui2.MenuListItem,
     {
       disabled: !isAllowed,
@@ -1166,7 +1176,7 @@ function RenameClassMenuItem({ closeMenu }) {
         handleRename();
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       import_editor_ui2.MenuItemInfotip,
       {
         showInfoTip: !isAllowed,
@@ -1187,7 +1197,7 @@ function CssClassItem(props) {
   const { id, provider, label, isActive, onClickActive, renameLabel, setError } = classProps;
   const { elementStates } = useElementStates();
   const { meta, setMetaState } = useStyle();
-  const popupState = (0, import_ui6.usePopupState)({ variant: "popover" });
+  const popupState = (0, import_ui7.usePopupState)({ variant: "popover" });
   const [chipRef, setChipRef] = (0, import_react9.useState)(null);
   const { onDelete, ...chipGroupProps } = chipProps;
   const { userCan } = (0, import_editor_styles_repository9.useUserStylesCapability)();
@@ -1223,8 +1233,8 @@ function CssClassItem(props) {
       openEditMode();
     }
   }, [id, convertedFromLocalId]);
-  return /* @__PURE__ */ React10.createElement(import_ui6.ThemeProvider, { palette: "default" }, /* @__PURE__ */ React10.createElement(
-    import_ui6.UnstableChipGroup,
+  return /* @__PURE__ */ React11.createElement(import_ui7.ThemeProvider, { palette: "default" }, /* @__PURE__ */ React11.createElement(
+    import_ui7.UnstableChipGroup,
     {
       ref: setChipRef,
       ...chipGroupProps,
@@ -1234,11 +1244,11 @@ function CssClassItem(props) {
         "&.MuiChipGroup-root.MuiAutocomplete-tag": { margin: theme.spacing(0.125) }
       })
     },
-    /* @__PURE__ */ React10.createElement(
-      import_ui6.Chip,
+    /* @__PURE__ */ React11.createElement(
+      import_ui7.Chip,
       {
         size: CHIP_SIZE,
-        label: isEditing ? /* @__PURE__ */ React10.createElement(import_editor_ui3.EditableField, { ref, ...getEditableProps() }) : /* @__PURE__ */ React10.createElement(import_editor_ui3.EllipsisWithTooltip, { maxWidth: "10ch", title: label, as: "div" }),
+        label: isEditing ? /* @__PURE__ */ React11.createElement(import_editor_ui3.EditableField, { ref, ...getEditableProps() }) : /* @__PURE__ */ React11.createElement(import_editor_ui3.EllipsisWithTooltip, { maxWidth: "10ch", title: label, as: "div" }),
         variant: isActive && !meta.state && !isEditing ? "filled" : "standard",
         shape: "rounded",
         icon,
@@ -1265,16 +1275,16 @@ function CssClassItem(props) {
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ React10.createElement(
-      import_ui6.Chip,
+    !isEditing && /* @__PURE__ */ React11.createElement(
+      import_ui7.Chip,
       {
-        icon: isShowingState ? void 0 : /* @__PURE__ */ React10.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" }),
+        icon: isShowingState ? void 0 : /* @__PURE__ */ React11.createElement(import_icons2.DotsVerticalIcon, { fontSize: "tiny" }),
         size: CHIP_SIZE,
-        label: isShowingState ? /* @__PURE__ */ React10.createElement(import_ui6.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui6.Typography, { variant: "inherit" }, stateLabel), /* @__PURE__ */ React10.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
+        label: isShowingState ? /* @__PURE__ */ React11.createElement(import_ui7.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui7.Typography, { variant: "inherit" }, stateLabel), /* @__PURE__ */ React11.createElement(import_icons2.DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
         variant: "filled",
         shape: "rounded",
         color,
-        ...(0, import_ui6.bindTrigger)(popupState),
+        ...(0, import_ui7.bindTrigger)(popupState),
         "aria-label": (0, import_i18n5.__)("Open CSS Class Menu", "elementor"),
         sx: (theme) => ({
           borderRadius: `${theme.shape.borderRadius * 0.75}px`,
@@ -1284,7 +1294,7 @@ function CssClassItem(props) {
         })
       }
     )
-  ), /* @__PURE__ */ React10.createElement(CssClassProvider, { ...classProps, handleRename: openEditMode }, /* @__PURE__ */ React10.createElement(CssClassMenu, { popupState, anchorEl: chipRef, fixed })));
+  ), /* @__PURE__ */ React11.createElement(CssClassProvider, { ...classProps, handleRename: openEditMode }, /* @__PURE__ */ React11.createElement(CssClassMenu, { popupState, anchorEl: chipRef, fixed })));
 }
 var validateLabel = (newLabel) => {
   const result = (0, import_editor_styles_repository9.validateStyleLabel)(newLabel, "rename");
@@ -1295,22 +1305,22 @@ var validateLabel = (newLabel) => {
 };
 
 // src/components/css-classes/missing-classes-alert.tsx
-var React11 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
+var React12 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 function MissingClassesAlert({ onDismiss }) {
-  return /* @__PURE__ */ React11.createElement(
-    import_ui7.Alert,
+  return /* @__PURE__ */ React12.createElement(
+    import_ui8.Alert,
     {
       severity: "warning",
       onClose: onDismiss,
       size: "small",
-      icon: /* @__PURE__ */ React11.createElement(import_icons2.AlertTriangleFilledIcon, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React12.createElement(import_icons3.AlertTriangleFilledIcon, { fontSize: "tiny" }),
       sx: { mt: 1 }
     },
-    /* @__PURE__ */ React11.createElement(import_ui7.AlertTitle, null, (0, import_i18n6.__)("Some classes are missing", "elementor")),
-    /* @__PURE__ */ React11.createElement(import_ui7.Typography, { variant: "caption", textColor: "primary" }, (0, import_i18n6.__)("A class was removed from your site and is no longer active on this element", "elementor"))
+    /* @__PURE__ */ React12.createElement(import_ui8.AlertTitle, null, (0, import_i18n6.__)("Some classes are missing", "elementor")),
+    /* @__PURE__ */ React12.createElement(import_ui8.Typography, { variant: "caption", textColor: "primary" }, (0, import_i18n6.__)("A class was removed from your site and is no longer active on this element", "elementor"))
   );
 }
 
@@ -1341,7 +1351,7 @@ var EMPTY_OPTION = {
   value: null,
   fixed: true,
   color: getTempStylesProviderColorName("accent"),
-  icon: /* @__PURE__ */ React12.createElement(import_icons3.MapPinIcon, null),
+  icon: /* @__PURE__ */ React13.createElement(import_icons4.MapPinIcon, null),
   provider: null
 };
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = (0, import_locations2.createLocation)();
@@ -1363,7 +1373,7 @@ function CssClassSelector() {
   const clearMissingClasses = (0, import_react10.useCallback)(() => {
     unapplyClasses(missingClassesIds);
   }, [missingClassesIds, unapplyClasses]);
-  return /* @__PURE__ */ React12.createElement(import_ui8.Stack, { p: 2 }, /* @__PURE__ */ React12.createElement(import_ui8.Stack, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React12.createElement(import_ui8.FormLabel, { htmlFor: ID, size: "small" }, (0, import_i18n7.__)("Classes", "elementor")), /* @__PURE__ */ React12.createElement(import_ui8.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(import_ui9.Stack, { p: 2 }, /* @__PURE__ */ React13.createElement(import_ui9.Stack, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React13.createElement(import_ui9.FormLabel, { htmlFor: ID, size: "small" }, (0, import_i18n7.__)("Classes", "elementor")), /* @__PURE__ */ React13.createElement(import_ui9.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React13.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React13.createElement(
     import_editor_ui4.WarningInfotip,
     {
       open: Boolean(renameError),
@@ -1372,7 +1382,7 @@ function CssClassSelector() {
       width: autocompleteRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       CreatableAutocomplete,
       {
         id: ID,
@@ -1386,8 +1396,8 @@ function CssClassSelector() {
         onCreate: create ?? void 0,
         validate: validate ?? void 0,
         limitTags: TAGS_LIMIT,
-        renderEmptyState: isAtLimit && typeof limitCount === "number" ? (props) => /* @__PURE__ */ React12.createElement(LimitReachedEmptyState, { limitCount, onClear: props.onClear }) : EmptyState,
-        getLimitTagsText: (more) => /* @__PURE__ */ React12.createElement(import_ui8.Chip, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
+        renderEmptyState: isAtLimit && typeof limitCount === "number" ? (props) => /* @__PURE__ */ React13.createElement(LimitReachedEmptyState, { limitCount, onClear: props.onClear }) : EmptyState,
+        getLimitTagsText: (more) => /* @__PURE__ */ React13.createElement(import_ui9.Chip, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
         renderTags: (values, getTagProps) => values.map((value, index) => {
           const chipProps = getTagProps({ index });
           const isActive = value.value === active?.value;
@@ -1403,7 +1413,7 @@ function CssClassSelector() {
             });
             return updateClassByProvider(value.provider, { label: newLabel, id: value.value });
           };
-          return /* @__PURE__ */ React12.createElement(
+          return /* @__PURE__ */ React13.createElement(
             CssClassItem,
             {
               key: chipProps.key,
@@ -1423,10 +1433,10 @@ function CssClassSelector() {
         })
       }
     )
-  ), hasMissingClasses && /* @__PURE__ */ React12.createElement(MissingClassesAlert, { onDismiss: clearMissingClasses }), !canEdit && /* @__PURE__ */ React12.createElement(import_editor_ui4.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n7.__)("With your current role, you can use existing classes but can\u2019t modify them.", "elementor")));
+  ), hasMissingClasses && /* @__PURE__ */ React13.createElement(MissingClassesAlert, { onDismiss: clearMissingClasses }), !canEdit && /* @__PURE__ */ React13.createElement(import_editor_ui4.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n7.__)("With your current role, you can use existing classes but can\u2019t modify them.", "elementor")));
 }
-var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ React12.createElement(import_ui8.Box, { sx: { py: 4 } }, /* @__PURE__ */ React12.createElement(
-  import_ui8.Stack,
+var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ React13.createElement(import_ui9.Box, { sx: { py: 4 } }, /* @__PURE__ */ React13.createElement(
+  import_ui9.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -1434,17 +1444,17 @@ var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ R
     justifyContent: "center",
     sx: { px: 2, m: "auto", maxWidth: "236px" }
   },
-  /* @__PURE__ */ React12.createElement(import_icons3.ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
-  /* @__PURE__ */ React12.createElement(import_ui8.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n7.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React12.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React13.createElement(import_icons4.ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
+  /* @__PURE__ */ React13.createElement(import_ui9.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n7.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React13.createElement("br", null), "\u201C", searchValue, "\u201D."),
   children,
-  /* @__PURE__ */ React12.createElement(import_ui8.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n7.__)("Clear & try again", "elementor"))
+  /* @__PURE__ */ React13.createElement(import_ui9.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n7.__)("Clear & try again", "elementor"))
 ));
-var EmptyState = (props) => /* @__PURE__ */ React12.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ React12.createElement(import_ui8.Typography, { align: "center", variant: "caption", sx: { mb: 2 } }, (0, import_i18n7.__)("With your current role,", "elementor"), /* @__PURE__ */ React12.createElement("br", null), (0, import_i18n7.__)("you can only use existing classes.", "elementor")));
+var EmptyState = (props) => /* @__PURE__ */ React13.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ React13.createElement(import_ui9.Typography, { align: "center", variant: "caption", sx: { mb: 2 } }, (0, import_i18n7.__)("With your current role,", "elementor"), /* @__PURE__ */ React13.createElement("br", null), (0, import_i18n7.__)("you can only use existing classes.", "elementor")));
 var LimitReachedEmptyState = ({
   limitCount,
   onClear
-}) => /* @__PURE__ */ React12.createElement(import_ui8.Box, { sx: { py: 4 } }, /* @__PURE__ */ React12.createElement(
-  import_ui8.Stack,
+}) => /* @__PURE__ */ React13.createElement(import_ui9.Box, { sx: { py: 4 } }, /* @__PURE__ */ React13.createElement(
+  import_ui9.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -1452,15 +1462,15 @@ var LimitReachedEmptyState = ({
     justifyContent: "center",
     sx: { px: 1, m: "auto", maxWidth: "260px" }
   },
-  /* @__PURE__ */ React12.createElement(import_icons3.ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
-  /* @__PURE__ */ React12.createElement(
-    import_ui8.Typography,
+  /* @__PURE__ */ React13.createElement(import_icons4.ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
+  /* @__PURE__ */ React13.createElement(
+    import_ui9.Typography,
     { align: "center", variant: "subtitle2" },
     /* translators: %s is the maximum number of classes */
     (0, import_i18n7.__)("Limit of %s classes reached", "elementor").replace("%s", String(limitCount))
   ),
-  /* @__PURE__ */ React12.createElement(import_ui8.Typography, { align: "center", variant: "caption", component: "div" }, (0, import_i18n7.__)("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ React12.createElement(
-    import_ui8.Link,
+  /* @__PURE__ */ React13.createElement(import_ui9.Typography, { align: "center", variant: "caption", component: "div" }, (0, import_i18n7.__)("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ React13.createElement(
+    import_ui9.Link,
     {
       color: "inherit",
       variant: "caption",
@@ -1470,8 +1480,8 @@ var LimitReachedEmptyState = ({
     },
     (0, import_i18n7.__)("Clear", "elementor")
   )),
-  /* @__PURE__ */ React12.createElement(
-    import_ui8.Button,
+  /* @__PURE__ */ React13.createElement(
+    import_ui9.Button,
     {
       variant: "outlined",
       color: "secondary",
@@ -1509,7 +1519,7 @@ function useOptions() {
         value: styleDef.id,
         fixed: isElements,
         color: getTempStylesProviderColorName(getStylesProviderColorName(provider.getKey())),
-        icon: isElements ? /* @__PURE__ */ React12.createElement(import_icons3.MapPinIcon, null) : null,
+        icon: isElements ? /* @__PURE__ */ React13.createElement(import_icons4.MapPinIcon, null) : null,
         provider: provider.getKey()
       };
     });
@@ -1583,7 +1593,7 @@ function useHandleSelect() {
 }
 
 // src/components/custom-css-indicator.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_react14 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_editor_styles4 = require("@elementor/editor-styles");
@@ -1882,11 +1892,11 @@ var CustomCssIndicator = () => {
   }, [hasContent, style, meta]);
   if (!hasContent) {
     if (hasInheritedContent) {
-      return /* @__PURE__ */ React13.createElement(StyleIndicator, null);
+      return /* @__PURE__ */ React14.createElement(StyleIndicator, null);
     }
     return null;
   }
-  return /* @__PURE__ */ React13.createElement(StyleIndicator, { getColor: provider ? getStylesProviderThemeColor(provider.getKey()) : void 0 });
+  return /* @__PURE__ */ React14.createElement(StyleIndicator, { getColor: provider ? getStylesProviderThemeColor(provider.getKey()) : void 0 });
 };
 var hasInheritedCustomCss = (style, meta) => {
   if (!style || !meta) {
@@ -1945,10 +1955,10 @@ var registerEditingPanelReplacement = ({
 var getEditingPanelReplacement = (element, elementType) => Array.from(registry.values()).filter(({ condition }) => condition(element, elementType)).sort((a, b) => a.priority - b.priority)?.[0] ?? null;
 
 // src/components/editing-panel-error-fallback.tsx
-var React14 = __toESM(require("react"));
-var import_ui9 = require("@elementor/ui");
+var React15 = __toESM(require("react"));
+var import_ui10 = require("@elementor/ui");
 function EditorPanelErrorFallback() {
-  return /* @__PURE__ */ React14.createElement(import_ui9.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React14.createElement(import_ui9.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React14.createElement("strong", null, "Something went wrong")));
+  return /* @__PURE__ */ React15.createElement(import_ui10.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React15.createElement(import_ui10.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React15.createElement("strong", null, "Something went wrong")));
 }
 
 // src/components/editing-panel-tabs.tsx
@@ -1960,11 +1970,11 @@ var import_ui43 = require("@elementor/ui");
 var import_i18n63 = require("@wordpress/i18n");
 
 // src/contexts/scroll-context.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_react15 = require("react");
-var import_ui10 = require("@elementor/ui");
+var import_ui11 = require("@elementor/ui");
 var ScrollContext = (0, import_react15.createContext)(void 0);
-var ScrollPanel = (0, import_ui10.styled)("div")`
+var ScrollPanel = (0, import_ui11.styled)("div")`
 	height: 100%;
 	overflow-y: auto;
 `;
@@ -1992,7 +2002,7 @@ function ScrollProvider({ children }) {
       scrollElement.removeEventListener("scroll", handleScroll);
     };
   });
-  return /* @__PURE__ */ React15.createElement(ScrollContext.Provider, { value: { direction } }, /* @__PURE__ */ React15.createElement(ScrollPanel, { ref }, children));
+  return /* @__PURE__ */ React16.createElement(ScrollContext.Provider, { value: { direction } }, /* @__PURE__ */ React16.createElement(ScrollPanel, { ref }, children));
 }
 function useScrollDirection() {
   return (0, import_react15.useContext)(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION;
@@ -2048,20 +2058,20 @@ var useStateByElement = (key, initialValue) => {
 };
 
 // src/components/interactions-tab.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_editor_interactions = require("@elementor/editor-interactions");
 
 // src/components/sections-list.tsx
-var React16 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
+var React17 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
 function SectionsList(props) {
-  return /* @__PURE__ */ React16.createElement(import_ui11.List, { disablePadding: true, component: "div", ...props });
+  return /* @__PURE__ */ React17.createElement(import_ui12.List, { disablePadding: true, component: "div", ...props });
 }
 
 // src/components/interactions-tab.tsx
 var InteractionsTab = () => {
   const { element } = useElement();
-  return /* @__PURE__ */ React17.createElement(SectionsList, null, /* @__PURE__ */ React17.createElement(import_editor_interactions.InteractionsTab, { elementId: element.id }));
+  return /* @__PURE__ */ React18.createElement(SectionsList, null, /* @__PURE__ */ React18.createElement(import_editor_interactions.InteractionsTab, { elementId: element.id }));
 };
 
 // src/components/settings-tab.tsx
@@ -2275,10 +2285,10 @@ function removePreviousValueFromStorage({ path, elementId }) {
 }
 
 // src/components/section.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_react17 = require("react");
 var import_editor_ui5 = require("@elementor/editor-ui");
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true, action }) {
   const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded);
   const ref = (0, import_react17.useRef)(null);
@@ -2293,8 +2303,8 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
   const id = (0, import_react17.useId)();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
-    import_ui12.ListItemButton,
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    import_ui13.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -2302,8 +2312,8 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       onClick: handleClick,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React18.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React18.createElement(
-      import_ui12.ListItemText,
+    /* @__PURE__ */ React19.createElement(import_ui13.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React19.createElement(
+      import_ui13.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
@@ -2311,7 +2321,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       }
     ), (0, import_editor_ui5.getCollapsibleValue)(titleEnd, isOpen)),
     action?.component,
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       import_editor_ui5.CollapseIcon,
       {
         open: isOpen,
@@ -2321,8 +2331,8 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
         sx: { ml: 1 }
       }
     )
-  ), /* @__PURE__ */ React18.createElement(
-    import_ui12.Collapse,
+  ), /* @__PURE__ */ React19.createElement(
+    import_ui13.Collapse,
     {
       id: contentId,
       "aria-labelledby": labelId,
@@ -2330,8 +2340,8 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       timeout: "auto",
       unmountOnExit
     },
-    /* @__PURE__ */ React18.createElement(import_editor_ui5.SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React18.createElement(import_ui12.Stack, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
-  ), /* @__PURE__ */ React18.createElement(import_ui12.Divider, null));
+    /* @__PURE__ */ React19.createElement(import_editor_ui5.SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React19.createElement(import_ui13.Stack, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
+  ), /* @__PURE__ */ React19.createElement(import_ui13.Divider, null));
 }
 
 // src/components/settings-control.tsx
@@ -2340,50 +2350,50 @@ var import_editor_controls4 = require("@elementor/editor-controls");
 var import_ui15 = require("@elementor/ui");
 
 // src/controls-registry/control.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 
 // src/controls-registry/controls-registry.tsx
-var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_props5 = require("@elementor/editor-props");
 var queryArrayPropTypeUtil = (0, import_editor_props5.createArrayPropUtils)(import_editor_props5.queryPropTypeUtil.key, import_editor_props5.queryPropTypeUtil.schema);
 var controlTypes = {
-  image: { component: import_editor_controls.ImageControl, layout: "custom", propTypeUtil: import_editor_props5.imagePropTypeUtil },
-  "svg-media": { component: import_editor_controls.SvgMediaControl, layout: "full", propTypeUtil: import_editor_props5.svgSrcPropTypeUtil },
-  text: { component: import_editor_controls.TextControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
-  textarea: { component: import_editor_controls.TextAreaControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
-  size: { component: import_editor_controls.SizeControl, layout: "two-columns", propTypeUtil: import_editor_props5.sizePropTypeUtil },
-  select: { component: import_editor_controls.SelectControlWrapper, layout: "two-columns", propTypeUtil: import_editor_props5.stringPropTypeUtil },
-  chips: { component: import_editor_controls.ChipsControl, layout: "full", propTypeUtil: import_editor_props5.stringArrayPropTypeUtil },
-  link: { component: import_editor_controls.LinkControl, layout: "custom", propTypeUtil: import_editor_props5.linkPropTypeUtil },
-  query: { component: import_editor_controls.QueryControl, layout: "full", propTypeUtil: import_editor_props5.queryPropTypeUtil },
-  "query-chips": { component: import_editor_controls.QueryChipsControl, layout: "full", propTypeUtil: queryArrayPropTypeUtil },
+  image: { component: import_editor_controls2.ImageControl, layout: "custom", propTypeUtil: import_editor_props5.imagePropTypeUtil },
+  "svg-media": { component: import_editor_controls2.SvgMediaControl, layout: "full", propTypeUtil: import_editor_props5.svgSrcPropTypeUtil },
+  text: { component: import_editor_controls2.TextControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
+  textarea: { component: import_editor_controls2.TextAreaControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
+  size: { component: import_editor_controls2.SizeControl, layout: "two-columns", propTypeUtil: import_editor_props5.sizePropTypeUtil },
+  select: { component: import_editor_controls2.SelectControlWrapper, layout: "two-columns", propTypeUtil: import_editor_props5.stringPropTypeUtil },
+  chips: { component: import_editor_controls2.ChipsControl, layout: "full", propTypeUtil: import_editor_props5.stringArrayPropTypeUtil },
+  link: { component: import_editor_controls2.LinkControl, layout: "custom", propTypeUtil: import_editor_props5.linkPropTypeUtil },
+  query: { component: import_editor_controls2.QueryControl, layout: "full", propTypeUtil: import_editor_props5.queryPropTypeUtil },
+  "query-chips": { component: import_editor_controls2.QueryChipsControl, layout: "full", propTypeUtil: queryArrayPropTypeUtil },
   "query-filter-repeater": {
-    component: import_editor_controls.QueryFilterRepeaterControl,
+    component: import_editor_controls2.QueryFilterRepeaterControl,
     layout: "full",
     propTypeUtil: import_editor_props5.queryFilterArrayPropTypeUtil
   },
-  url: { component: import_editor_controls.UrlControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
-  switch: { component: import_editor_controls.SwitchControl, layout: "two-columns", propTypeUtil: import_editor_props5.booleanPropTypeUtil },
-  number: { component: import_editor_controls.NumberControl, layout: "two-columns", propTypeUtil: import_editor_props5.numberPropTypeUtil },
-  repeatable: { component: import_editor_controls.RepeatableControl, layout: "full", propTypeUtil: void 0 },
-  "key-value": { component: import_editor_controls.KeyValueControl, layout: "full", propTypeUtil: import_editor_props5.keyValuePropTypeUtil },
-  "html-tag": { component: import_editor_controls.HtmlTagControl, layout: "two-columns", propTypeUtil: import_editor_props5.stringPropTypeUtil },
-  toggle: { component: import_editor_controls.ToggleControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
-  "date-time": { component: import_editor_controls.DateTimeControl, layout: "full", propTypeUtil: import_editor_props5.DateTimePropTypeUtil },
-  video: { component: import_editor_controls.VideoMediaControl, layout: "full", propTypeUtil: import_editor_props5.videoSrcPropTypeUtil },
-  "inline-editing": { component: import_editor_controls.InlineEditingControl, layout: "full", propTypeUtil: import_editor_props5.htmlV3PropTypeUtil },
-  email: { component: import_editor_controls.EmailFormActionControl, layout: "custom", propTypeUtil: import_editor_props5.emailsPropTypeUtil },
+  url: { component: import_editor_controls2.UrlControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
+  switch: { component: import_editor_controls2.SwitchControl, layout: "two-columns", propTypeUtil: import_editor_props5.booleanPropTypeUtil },
+  number: { component: import_editor_controls2.NumberControl, layout: "two-columns", propTypeUtil: import_editor_props5.numberPropTypeUtil },
+  repeatable: { component: import_editor_controls2.RepeatableControl, layout: "full", propTypeUtil: void 0 },
+  "key-value": { component: import_editor_controls2.KeyValueControl, layout: "full", propTypeUtil: import_editor_props5.keyValuePropTypeUtil },
+  "html-tag": { component: import_editor_controls2.HtmlTagControl, layout: "two-columns", propTypeUtil: import_editor_props5.stringPropTypeUtil },
+  toggle: { component: import_editor_controls2.ToggleControl, layout: "full", propTypeUtil: import_editor_props5.stringPropTypeUtil },
+  "date-time": { component: import_editor_controls2.DateTimeControl, layout: "full", propTypeUtil: import_editor_props5.DateTimePropTypeUtil },
+  video: { component: import_editor_controls2.VideoMediaControl, layout: "full", propTypeUtil: import_editor_props5.videoSrcPropTypeUtil },
+  "inline-editing": { component: import_editor_controls2.InlineEditingControl, layout: "full", propTypeUtil: import_editor_props5.htmlV3PropTypeUtil },
+  email: { component: import_editor_controls2.EmailFormActionControl, layout: "custom", propTypeUtil: import_editor_props5.emailsPropTypeUtil },
   "date-range": {
-    component: import_editor_controls.DateRangeControl,
+    component: import_editor_controls2.DateRangeControl,
     layout: "custom",
     propTypeUtil: import_editor_props5.dateRangePropTypeUtil
   },
   "time-range": {
-    component: import_editor_controls.TimeRangeControl,
+    component: import_editor_controls2.TimeRangeControl,
     layout: "custom",
     propTypeUtil: import_editor_props5.timeRangePropTypeUtil
   },
-  "attachment-type": { component: import_editor_controls.AttachmentTypeControl, layout: "custom", propTypeUtil: import_editor_props5.stringPropTypeUtil }
+  "attachment-type": { component: import_editor_controls2.AttachmentTypeControl, layout: "custom", propTypeUtil: import_editor_props5.stringPropTypeUtil }
 };
 var ControlsRegistry = class {
   constructor(controlsRegistry2) {
@@ -2426,19 +2436,19 @@ var Control = ({ props, type }) => {
       context: { controlType: type }
     });
   }
-  return /* @__PURE__ */ React19.createElement(ControlByType, { ...props, context: { elementId: element.id } });
+  return /* @__PURE__ */ React20.createElement(ControlByType, { ...props, context: { elementId: element.id } });
 };
 
 // src/controls-registry/control-type-container.tsx
-var React20 = __toESM(require("react"));
-var import_ui13 = require("@elementor/ui");
+var React21 = __toESM(require("react"));
+var import_ui14 = require("@elementor/ui");
 var ControlTypeContainer = ({ children, layout }) => {
   if (layout === "custom") {
     return children;
   }
-  return /* @__PURE__ */ React20.createElement(StyledContainer, { layout }, children);
+  return /* @__PURE__ */ React21.createElement(StyledContainer, { layout }, children);
 };
-var StyledContainer = (0, import_ui13.styled)(import_ui13.Box, {
+var StyledContainer = (0, import_ui14.styled)(import_ui14.Box, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
 })(({ layout, theme }) => ({
   display: "grid",
@@ -2464,9 +2474,9 @@ var getStyleByLayout = (layout) => {
 };
 
 // src/controls-registry/settings-field.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_react18 = require("react");
-var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
@@ -2514,7 +2524,7 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
       (0, import_editor_elements6.updateElementSettings)({ id: elementId, props: settings, withHistory: false });
     }
   };
-  return /* @__PURE__ */ React21.createElement(import_editor_controls2.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React21.createElement(import_editor_controls2.PropKeyProvider, { bind }, children));
+  return /* @__PURE__ */ React22.createElement(import_editor_controls3.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React22.createElement(import_editor_controls3.PropKeyProvider, { bind }, children));
 };
 function useUndoableUpdateElementProp({
   elementId,
@@ -2563,15 +2573,6 @@ var registerFieldIndicator = ({
 };
 var getFieldIndicators = (fieldType) => Array.from(indicatorsRegistry[fieldType].values()).sort((a, b) => a.priority - b.priority).map(({ id, indicator: Adornment }) => ({ id, Adornment }));
 
-// src/components/control-label.tsx
-var React22 = __toESM(require("react"));
-var import_editor_controls3 = require("@elementor/editor-controls");
-var import_icons4 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
-var ControlLabel = ({ children, infoTooltip }) => {
-  return /* @__PURE__ */ React22.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React22.createElement(import_editor_controls3.ControlFormLabel, null, children), infoTooltip && /* @__PURE__ */ React22.createElement(import_ui14.Tooltip, { title: infoTooltip, placement: "top" }, /* @__PURE__ */ React22.createElement(import_icons4.InfoCircleIcon, { fontSize: "tiny" })), /* @__PURE__ */ React22.createElement(import_editor_controls3.ControlAdornments, null));
-};
-
 // src/components/settings-control.tsx
 var Wrapper = (0, import_ui15.styled)("span")`
 	display: contents;
@@ -7464,6 +7465,7 @@ var blockV1Panel = () => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BaseControl,
+  ControlLabel,
   ControlTypeContainer,
   CustomCssIndicator,
   EditingPanelTabs,