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

package/dist/index.mjs

@@ -147,8 +147,17 @@ var onConvert = (opts) => {
   });
 };
 
+// src/components/control-label.tsx
+import * as React5 from "react";
+import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
+import { InfoCircleIcon } from "@elementor/icons";
+import { Stack, Tooltip } from "@elementor/ui";
+var ControlLabel = ({ children, infoTooltip }) => {
+  return /* @__PURE__ */ React5.createElement(Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React5.createElement(ControlFormLabel, null, children), infoTooltip && /* @__PURE__ */ React5.createElement(Tooltip, { title: infoTooltip, placement: "top" }, /* @__PURE__ */ React5.createElement(InfoCircleIcon, { fontSize: "tiny" })), /* @__PURE__ */ React5.createElement(ControlAdornments, null));
+};
+
 // src/components/css-classes/css-class-selector.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { useCallback as useCallback2, useRef, useState as useState4 } from "react";
 import {
   isElementsStylesProvider as isElementsStylesProvider4,
@@ -166,7 +175,7 @@ import {
   Chip as Chip3,
   FormLabel,
   Link,
-  Stack as Stack3,
+  Stack as Stack4,
   Typography as Typography4
 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
@@ -219,7 +228,7 @@ var trackStyles = (provider, event, data) => {
 };
 
 // src/components/creatable-autocomplete/creatable-autocomplete.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { useId, useMemo } from "react";
 import {
   Autocomplete,
@@ -408,7 +417,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,
@@ -437,11 +446,11 @@ 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(
+  return /* @__PURE__ */ React6.createElement(
     Autocomplete,
     {
       renderTags: (tagValue, getTagProps) => {
-        return tagValue.map((option, index) => /* @__PURE__ */ React5.createElement(
+        return tagValue.map((option, index) => /* @__PURE__ */ React6.createElement(
           Chip,
           {
             size: "tiny",
@@ -467,11 +476,11 @@ 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(
+        return /* @__PURE__ */ React6.createElement(
           TextField,
           {
             ...params,
@@ -499,7 +508,7 @@ function CreatableAutocompleteInner({
       groupBy: (option) => option._group ?? "",
       renderOption: (optionProps, option) => {
         const { _group, label } = option;
-        return /* @__PURE__ */ React5.createElement(
+        return /* @__PURE__ */ React6.createElement(
           "li",
           {
             ...optionProps,
@@ -527,10 +536,10 @@ function CreatableAutocompleteInner({
 }
 var Group = (params) => {
   const id = `combobox-group-${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(
+var ErrorText = React6.forwardRef(({ error = "error" }, ref) => {
+  return /* @__PURE__ */ React6.createElement(
     Box,
     {
       ref,
@@ -538,7 +547,7 @@ var ErrorText = React5.forwardRef(({ error = "error" }, ref) => {
         padding: theme.spacing(2)
       })
     },
-    /* @__PURE__ */ React5.createElement(Typography, { variant: "caption", sx: { color: "error.main", display: "inline-block" } }, error)
+    /* @__PURE__ */ React6.createElement(Typography, { variant: "caption", sx: { color: "error.main", display: "inline-block" } }, error)
   );
 });
 var StyledGroup = styled("li")`
@@ -558,7 +567,7 @@ var StyledGroupItems = styled("ul")`
 `;
 
 // src/components/css-classes/css-class-item.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { useEffect, useMemo as useMemo3, useState as useState3 } from "react";
 import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository6, useUserStylesCapability as useUserStylesCapability4, validateStyleLabel } from "@elementor/editor-styles-repository";
@@ -568,7 +577,7 @@ import { useSessionStorage as useSessionStorage3 } from "@elementor/session";
 import {
   bindTrigger,
   Chip as Chip2,
-  Stack as Stack2,
+  Stack as Stack3,
   ThemeProvider,
   Typography as Typography2,
   UnstableChipGroup,
@@ -577,7 +586,7 @@ import {
 import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/css-classes/css-class-context.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { createContext as createContext4, useContext as useContext4 } from "react";
 var CssClassContext = createContext4(null);
 var useCssClass = () => {
@@ -588,18 +597,18 @@ 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
-import * as React9 from "react";
+import * as React10 from "react";
 import {
   isElementsStylesProvider as isElementsStylesProvider3,
   stylesRepository as stylesRepository5,
   useUserStylesCapability as useUserStylesCapability3
 } from "@elementor/editor-styles-repository";
 import { MenuItemInfotip, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { bindMenu, Divider, Menu, MenuSubheader as MenuSubheader2, Stack } from "@elementor/ui";
+import { bindMenu, Divider, Menu, MenuSubheader as MenuSubheader2, Stack as Stack2 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/style-indicator.tsx
@@ -620,7 +629,7 @@ var StyleIndicator = styled2("div", {
 `;
 
 // src/components/css-classes/duplicate-class-menu-item.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { stylesRepository as stylesRepository4, useUserStylesCapability as useUserStylesCapability2 } from "@elementor/editor-styles-repository";
 import { MenuListItem } from "@elementor/editor-ui";
 import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
@@ -872,11 +881,11 @@ function DuplicateClassMenuItem({ closeMenu }) {
     }
     closeMenu();
   };
-  return /* @__PURE__ */ React7.createElement(MenuListItem, { onClick: handleDuplicate }, __2("Duplicate", "elementor"));
+  return /* @__PURE__ */ React8.createElement(MenuListItem, { onClick: handleDuplicate }, __2("Duplicate", "elementor"));
 }
 
 // src/components/css-classes/local-class-sub-menu.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { MenuSubheader } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 
@@ -900,7 +909,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(MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __3("Local Class", "elementor")), /* @__PURE__ */ React8.createElement(CssClassConvert, { canConvert, styleDef, closeMenu: props.popupState.close }));
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(MenuSubheader, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __3("Local Class", "elementor")), /* @__PURE__ */ React9.createElement(CssClassConvert, { canConvert, styleDef, closeMenu: props.popupState.close }));
 };
 
 // src/components/css-classes/css-class-menu.tsx
@@ -927,7 +936,7 @@ function CssClassMenu({ popupState, anchorEl, fixed }) {
   const handleKeyDown = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Menu,
     {
       MenuListProps: { dense: true, sx: { minWidth: "160px" } },
@@ -944,11 +953,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(MenuSubheader2, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __4("States", "elementor")),
+    /* @__PURE__ */ React10.createElement(MenuSubheader2, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, __4("States", "elementor")),
     pseudoStates.map((state) => {
-      return /* @__PURE__ */ React9.createElement(
+      return /* @__PURE__ */ React10.createElement(
         StateMenuItem,
         {
           key: state.key,
@@ -958,7 +967,7 @@ function CssClassMenu({ popupState, anchorEl, fixed }) {
         }
       );
     }),
-    /* @__PURE__ */ React9.createElement(ClassStatesMenu, { closeMenu: popupState.close })
+    /* @__PURE__ */ React10.createElement(ClassStatesMenu, { closeMenu: popupState.close })
   );
 }
 function ClassStatesMenu({ closeMenu }) {
@@ -967,8 +976,8 @@ function ClassStatesMenu({ closeMenu }) {
     return null;
   }
   const customTitle = __4("%s States", "elementor").replace("%s", elementTitle);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Divider, null), /* @__PURE__ */ React9.createElement(MenuSubheader2, { 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(Divider, null), /* @__PURE__ */ React10.createElement(MenuSubheader2, { sx: { typography: "caption", color: "text.secondary", pb: 0.5, pt: 1 } }, customTitle), elementStates.map((state) => {
+    return /* @__PURE__ */ React10.createElement(
       StateMenuItem,
       {
         key: state.key,
@@ -1018,13 +1027,13 @@ 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(
+      /* @__PURE__ */ React10.createElement(
         MenuSubheader2,
         {
           key: "provider-label",
@@ -1033,7 +1042,7 @@ function getMenuItemsByProvider({
         providerInstance?.labels?.singular
       )
     );
-    actions.push(/* @__PURE__ */ React9.createElement(Divider, { key: "provider-actions-divider" }));
+    actions.push(/* @__PURE__ */ React10.createElement(Divider, { key: "provider-actions-divider" }));
   }
   return actions;
 }
@@ -1048,7 +1057,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(
     MenuListItem2,
     {
       ...props,
@@ -1068,13 +1077,13 @@ function StateMenuItem({ state, label, closeMenu, ...props }) {
         closeMenu();
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       MenuItemInfotip,
       {
         showInfoTip: disabled,
         content: __4("With your current role, you can only use existing states.", "elementor")
       },
-      /* @__PURE__ */ React9.createElement(Stack, { gap: 0.75, direction: "row", alignItems: "center" }, isStyled && /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React10.createElement(Stack2, { gap: 0.75, direction: "row", alignItems: "center" }, isStyled && /* @__PURE__ */ React10.createElement(
         StyleIndicator,
         {
           "aria-label": __4("Has style", "elementor"),
@@ -1087,7 +1096,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(
     MenuListItem2,
     {
       ...props,
@@ -1111,7 +1120,7 @@ function RenameClassMenuItem({ closeMenu }) {
     return null;
   }
   const isAllowed = userCan(provider).update;
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     MenuListItem2,
     {
       disabled: !isAllowed,
@@ -1120,7 +1129,7 @@ function RenameClassMenuItem({ closeMenu }) {
         handleRename();
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       MenuItemInfotip,
       {
         showInfoTip: !isAllowed,
@@ -1177,7 +1186,7 @@ function CssClassItem(props) {
       openEditMode();
     }
   }, [id, convertedFromLocalId]);
-  return /* @__PURE__ */ React10.createElement(ThemeProvider, { palette: "default" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(ThemeProvider, { palette: "default" }, /* @__PURE__ */ React11.createElement(
     UnstableChipGroup,
     {
       ref: setChipRef,
@@ -1188,11 +1197,11 @@ function CssClassItem(props) {
         "&.MuiChipGroup-root.MuiAutocomplete-tag": { margin: theme.spacing(0.125) }
       })
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       Chip2,
       {
         size: CHIP_SIZE,
-        label: isEditing ? /* @__PURE__ */ React10.createElement(EditableField, { ref, ...getEditableProps() }) : /* @__PURE__ */ React10.createElement(EllipsisWithTooltip, { maxWidth: "10ch", title: label, as: "div" }),
+        label: isEditing ? /* @__PURE__ */ React11.createElement(EditableField, { ref, ...getEditableProps() }) : /* @__PURE__ */ React11.createElement(EllipsisWithTooltip, { maxWidth: "10ch", title: label, as: "div" }),
         variant: isActive && !meta.state && !isEditing ? "filled" : "standard",
         shape: "rounded",
         icon,
@@ -1219,12 +1228,12 @@ function CssClassItem(props) {
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ React10.createElement(
+    !isEditing && /* @__PURE__ */ React11.createElement(
       Chip2,
       {
-        icon: isShowingState ? void 0 : /* @__PURE__ */ React10.createElement(DotsVerticalIcon, { fontSize: "tiny" }),
+        icon: isShowingState ? void 0 : /* @__PURE__ */ React11.createElement(DotsVerticalIcon, { fontSize: "tiny" }),
         size: CHIP_SIZE,
-        label: isShowingState ? /* @__PURE__ */ React10.createElement(Stack2, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React10.createElement(Typography2, { variant: "inherit" }, stateLabel), /* @__PURE__ */ React10.createElement(DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
+        label: isShowingState ? /* @__PURE__ */ React11.createElement(Stack3, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React11.createElement(Typography2, { variant: "inherit" }, stateLabel), /* @__PURE__ */ React11.createElement(DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
         variant: "filled",
         shape: "rounded",
         color,
@@ -1238,7 +1247,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 = validateStyleLabel(newLabel, "rename");
@@ -1249,22 +1258,22 @@ var validateLabel = (newLabel) => {
 };
 
 // src/components/css-classes/missing-classes-alert.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
 import { Alert, AlertTitle, Typography as Typography3 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 function MissingClassesAlert({ onDismiss }) {
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Alert,
     {
       severity: "warning",
       onClose: onDismiss,
       size: "small",
-      icon: /* @__PURE__ */ React11.createElement(AlertTriangleFilledIcon, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React12.createElement(AlertTriangleFilledIcon, { fontSize: "tiny" }),
       sx: { mt: 1 }
     },
-    /* @__PURE__ */ React11.createElement(AlertTitle, null, __6("Some classes are missing", "elementor")),
-    /* @__PURE__ */ React11.createElement(Typography3, { variant: "caption", textColor: "primary" }, __6("A class was removed from your site and is no longer active on this element", "elementor"))
+    /* @__PURE__ */ React12.createElement(AlertTitle, null, __6("Some classes are missing", "elementor")),
+    /* @__PURE__ */ React12.createElement(Typography3, { variant: "caption", textColor: "primary" }, __6("A class was removed from your site and is no longer active on this element", "elementor"))
   );
 }
 
@@ -1295,7 +1304,7 @@ var EMPTY_OPTION = {
   value: null,
   fixed: true,
   color: getTempStylesProviderColorName("accent"),
-  icon: /* @__PURE__ */ React12.createElement(MapPinIcon, null),
+  icon: /* @__PURE__ */ React13.createElement(MapPinIcon, null),
   provider: null
 };
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation2();
@@ -1317,7 +1326,7 @@ function CssClassSelector() {
   const clearMissingClasses = useCallback2(() => {
     unapplyClasses(missingClassesIds);
   }, [missingClassesIds, unapplyClasses]);
-  return /* @__PURE__ */ React12.createElement(Stack3, { p: 2 }, /* @__PURE__ */ React12.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React12.createElement(FormLabel, { htmlFor: ID, size: "small" }, __7("Classes", "elementor")), /* @__PURE__ */ React12.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(Stack4, { p: 2 }, /* @__PURE__ */ React13.createElement(Stack4, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React13.createElement(FormLabel, { htmlFor: ID, size: "small" }, __7("Classes", "elementor")), /* @__PURE__ */ React13.createElement(Stack4, { direction: "row", gap: 1 }, /* @__PURE__ */ React13.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React13.createElement(
     WarningInfotip,
     {
       open: Boolean(renameError),
@@ -1326,7 +1335,7 @@ function CssClassSelector() {
       width: autocompleteRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       CreatableAutocomplete,
       {
         id: ID,
@@ -1340,8 +1349,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(Chip3, { 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(Chip3, { 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;
@@ -1357,7 +1366,7 @@ function CssClassSelector() {
             });
             return updateClassByProvider(value.provider, { label: newLabel, id: value.value });
           };
-          return /* @__PURE__ */ React12.createElement(
+          return /* @__PURE__ */ React13.createElement(
             CssClassItem,
             {
               key: chipProps.key,
@@ -1377,10 +1386,10 @@ function CssClassSelector() {
         })
       }
     )
-  ), hasMissingClasses && /* @__PURE__ */ React12.createElement(MissingClassesAlert, { onDismiss: clearMissingClasses }), !canEdit && /* @__PURE__ */ React12.createElement(InfoAlert, { sx: { mt: 1 } }, __7("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(InfoAlert, { sx: { mt: 1 } }, __7("With your current role, you can use existing classes but can\u2019t modify them.", "elementor")));
 }
-var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ React12.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React12.createElement(
-  Stack3,
+var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ React13.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React13.createElement(
+  Stack4,
   {
     gap: 1,
     alignItems: "center",
@@ -1388,17 +1397,17 @@ var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ R
     justifyContent: "center",
     sx: { px: 2, m: "auto", maxWidth: "236px" }
   },
-  /* @__PURE__ */ React12.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
-  /* @__PURE__ */ React12.createElement(Typography4, { align: "center", variant: "subtitle2" }, __7("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React12.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React13.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
+  /* @__PURE__ */ React13.createElement(Typography4, { align: "center", variant: "subtitle2" }, __7("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React13.createElement("br", null), "\u201C", searchValue, "\u201D."),
   children,
-  /* @__PURE__ */ React12.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __7("Clear & try again", "elementor"))
+  /* @__PURE__ */ React13.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __7("Clear & try again", "elementor"))
 ));
-var EmptyState = (props) => /* @__PURE__ */ React12.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ React12.createElement(Typography4, { align: "center", variant: "caption", sx: { mb: 2 } }, __7("With your current role,", "elementor"), /* @__PURE__ */ React12.createElement("br", null), __7("you can only use existing classes.", "elementor")));
+var EmptyState = (props) => /* @__PURE__ */ React13.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ React13.createElement(Typography4, { align: "center", variant: "caption", sx: { mb: 2 } }, __7("With your current role,", "elementor"), /* @__PURE__ */ React13.createElement("br", null), __7("you can only use existing classes.", "elementor")));
 var LimitReachedEmptyState = ({
   limitCount,
   onClear
-}) => /* @__PURE__ */ React12.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React12.createElement(
-  Stack3,
+}) => /* @__PURE__ */ React13.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React13.createElement(
+  Stack4,
   {
     gap: 1,
     alignItems: "center",
@@ -1406,14 +1415,14 @@ var LimitReachedEmptyState = ({
     justifyContent: "center",
     sx: { px: 1, m: "auto", maxWidth: "260px" }
   },
-  /* @__PURE__ */ React12.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React13.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
+  /* @__PURE__ */ React13.createElement(
     Typography4,
     { align: "center", variant: "subtitle2" },
     /* translators: %s is the maximum number of classes */
     __7("Limit of %s classes reached", "elementor").replace("%s", String(limitCount))
   ),
-  /* @__PURE__ */ React12.createElement(Typography4, { align: "center", variant: "caption", component: "div" }, __7("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React13.createElement(Typography4, { align: "center", variant: "caption", component: "div" }, __7("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ React13.createElement(
     Link,
     {
       color: "inherit",
@@ -1424,7 +1433,7 @@ var LimitReachedEmptyState = ({
     },
     __7("Clear", "elementor")
   )),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React13.createElement(
     Button,
     {
       variant: "outlined",
@@ -1463,7 +1472,7 @@ function useOptions() {
         value: styleDef.id,
         fixed: isElements,
         color: getTempStylesProviderColorName(getStylesProviderColorName(provider.getKey())),
-        icon: isElements ? /* @__PURE__ */ React12.createElement(MapPinIcon, null) : null,
+        icon: isElements ? /* @__PURE__ */ React13.createElement(MapPinIcon, null) : null,
         provider: provider.getKey()
       };
     });
@@ -1537,7 +1546,7 @@ function useHandleSelect() {
 }
 
 // src/components/custom-css-indicator.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { useMemo as useMemo6 } from "react";
 import { getBreakpointsTree } from "@elementor/editor-responsive";
 import { getVariantByMeta as getVariantByMeta3 } from "@elementor/editor-styles";
@@ -1847,11 +1856,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) {
@@ -1914,10 +1923,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
-import * as React14 from "react";
+import * as React15 from "react";
 import { Alert as Alert2, Box as Box3 } from "@elementor/ui";
 function EditorPanelErrorFallback() {
-  return /* @__PURE__ */ React14.createElement(Box3, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React14.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React14.createElement("strong", null, "Something went wrong")));
+  return /* @__PURE__ */ React15.createElement(Box3, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React15.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React15.createElement("strong", null, "Something went wrong")));
 }
 
 // src/components/editing-panel-tabs.tsx
@@ -1929,7 +1938,7 @@ import { Divider as Divider6, Stack as Stack14, Tab, TabPanel, Tabs, useTabs } f
 import { __ as __63 } from "@wordpress/i18n";
 
 // src/contexts/scroll-context.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { createContext as createContext5, useContext as useContext5, useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
 import { styled as styled3 } from "@elementor/ui";
 var ScrollContext = createContext5(void 0);
@@ -1961,7 +1970,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 useContext5(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION;
@@ -2017,20 +2026,20 @@ var useStateByElement = (key, initialValue) => {
 };
 
 // src/components/interactions-tab.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { InteractionsTab as InteractionsTabContent } from "@elementor/editor-interactions";
 
 // src/components/sections-list.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { List } from "@elementor/ui";
 function SectionsList(props) {
-  return /* @__PURE__ */ React16.createElement(List, { disablePadding: true, component: "div", ...props });
+  return /* @__PURE__ */ React17.createElement(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(InteractionsTabContent, { elementId: element.id }));
+  return /* @__PURE__ */ React18.createElement(SectionsList, null, /* @__PURE__ */ React18.createElement(InteractionsTabContent, { elementId: element.id }));
 };
 
 // src/components/settings-tab.tsx
@@ -2251,10 +2260,10 @@ function removePreviousValueFromStorage({ path, elementId }) {
 }
 
 // src/components/section.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { useId as useId2, useRef as useRef3 } from "react";
 import { CollapseIcon, getCollapsibleValue, SectionRefContext } from "@elementor/editor-ui";
-import { Collapse, Divider as Divider2, ListItemButton, ListItemText, Stack as Stack4 } from "@elementor/ui";
+import { Collapse, Divider as Divider2, ListItemButton, ListItemText, Stack as Stack5 } from "@elementor/ui";
 function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true, action }) {
   const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded);
   const ref = useRef3(null);
@@ -2269,7 +2278,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
   const id = useId2();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     ListItemButton,
     {
       id: labelId,
@@ -2278,7 +2287,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       onClick: handleClick,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React18.createElement(Stack4, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(Stack5, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React19.createElement(
       ListItemText,
       {
         secondary: title,
@@ -2287,7 +2296,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       }
     ), getCollapsibleValue(titleEnd, isOpen)),
     action?.component,
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       CollapseIcon,
       {
         open: isOpen,
@@ -2297,7 +2306,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
         sx: { ml: 1 }
       }
     )
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Collapse,
     {
       id: contentId,
@@ -2306,8 +2315,8 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       timeout: "auto",
       unmountOnExit
     },
-    /* @__PURE__ */ React18.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React18.createElement(Stack4, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
-  ), /* @__PURE__ */ React18.createElement(Divider2, null));
+    /* @__PURE__ */ React19.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React19.createElement(Stack5, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
+  ), /* @__PURE__ */ React19.createElement(Divider2, null));
 }
 
 // src/components/settings-control.tsx
@@ -2316,7 +2325,7 @@ import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { Divider as Divider3, styled as styled5 } from "@elementor/ui";
 
 // src/controls-registry/control.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 
 // src/controls-registry/controls-registry.tsx
 import {
@@ -2447,17 +2456,17 @@ 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
-import * as React20 from "react";
+import * as React21 from "react";
 import { Box as Box4, styled as styled4 } from "@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 = styled4(Box4, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
@@ -2485,7 +2494,7 @@ var getStyleByLayout = (layout) => {
 };
 
 // src/controls-registry/settings-field.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { useMemo as useMemo7 } from "react";
 import { PropKeyProvider, PropProvider } from "@elementor/editor-controls";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
@@ -2535,7 +2544,7 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
       updateElementSettings3({ id: elementId, props: settings, withHistory: false });
     }
   };
-  return /* @__PURE__ */ React21.createElement(PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React21.createElement(PropKeyProvider, { bind }, children));
+  return /* @__PURE__ */ React22.createElement(PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React22.createElement(PropKeyProvider, { bind }, children));
 };
 function useUndoableUpdateElementProp({
   elementId,
@@ -2584,15 +2593,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
-import * as React22 from "react";
-import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
-import { InfoCircleIcon } from "@elementor/icons";
-import { Stack as Stack5, Tooltip } from "@elementor/ui";
-var ControlLabel = ({ children, infoTooltip }) => {
-  return /* @__PURE__ */ React22.createElement(Stack5, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React22.createElement(ControlFormLabel, null, children), infoTooltip && /* @__PURE__ */ React22.createElement(Tooltip, { title: infoTooltip, placement: "top" }, /* @__PURE__ */ React22.createElement(InfoCircleIcon, { fontSize: "tiny" })), /* @__PURE__ */ React22.createElement(ControlAdornments, null));
-};
-
 // src/components/settings-control.tsx
 var Wrapper = styled5("span")`
 	display: contents;
@@ -7617,6 +7617,7 @@ var blockV1Panel = () => {
 };
 export {
   Control as BaseControl,
+  ControlLabel,
   ControlTypeContainer,
   CustomCssIndicator,
   EditingPanelTabs,