@elementor/editor-editing-panel 4.1.0-838 → 4.1.0-beta2

package/dist/index.js

@@ -227,8 +227,9 @@ var onConvert = (opts) => {
 // src/components/css-classes/css-class-selector.tsx
 var React11 = __toESM(require("react"));
 var import_react10 = require("react");
-var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
 var import_editor_ui4 = require("@elementor/editor-ui");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_icons2 = require("@elementor/icons");
 var import_locations2 = require("@elementor/locations");
 var import_ui7 = require("@elementor/ui");
@@ -431,14 +432,20 @@ function useCreateOption(params) {
 
 // src/components/creatable-autocomplete/use-filter-options.ts
 var import_ui = 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_ui.createFilterOptions)({
+    matchFrom: "any"
+  });
   const filterOptions = (optionList, params) => {
     const selectedValues = selected.map((option) => option.value);
     const filteredOptions = filter(
       optionList.filter((option) => !selectedValues.includes(option.value)),
-      params
+      { ...params, inputValue: normalizeClassSearch(params.inputValue) }
     );
     const isExisting = options13.some((option) => params.inputValue === option.label);
     const allowCreate = Boolean(onCreate) && params.inputValue !== "" && !selectedValues.includes(params.inputValue) && !isExisting;
@@ -611,7 +618,7 @@ var StyledGroupItems = (0, import_ui2.styled)("ul")`
 var React10 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_editor_styles = require("@elementor/editor-styles");
-var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
+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_session3 = require("@elementor/session");
@@ -635,7 +642,7 @@ function CssClassProvider({ children, ...contextValue }) {
 
 // src/components/css-classes/css-class-menu.tsx
 var React9 = __toESM(require("react"));
-var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
+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_i18n4 = require("@wordpress/i18n");
@@ -659,7 +666,7 @@ var StyleIndicator = (0, import_ui3.styled)("div", {
 
 // src/components/css-classes/duplicate-class-menu-item.tsx
 var React7 = __toESM(require("react"));
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_session2 = require("@elementor/session");
 var import_i18n2 = require("@wordpress/i18n");
@@ -667,7 +674,7 @@ var import_i18n2 = require("@wordpress/i18n");
 // src/components/css-classes/use-apply-and-unapply-class.ts
 var import_react8 = require("react");
 var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
 
@@ -675,6 +682,7 @@ var import_i18n = require("@wordpress/i18n");
 var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 function doGetAppliedClasses(elementId, classesPropType = "classes") {
   return (0, import_editor_elements2.getElementSetting)(elementId, classesPropType)?.value || [];
 }
@@ -685,6 +693,17 @@ function doApplyClasses(elementId, classIds, classesPropType = "classes") {
     withHistory: false
   });
   (0, import_editor_documents.setDocumentModifiedStatus)(true);
+  ensureClassesAreLoaded(classIds);
+}
+function ensureClassesAreLoaded(classIds) {
+  const providers = import_editor_styles_repository4.stylesRepository.getProviders();
+  classIds.forEach((classId) => {
+    import_editor_styles_repository4.stylesRepository.getProviderByKey(classId)?.actions.get(classId);
+    const owningProvider = providers.find(
+      (provider) => provider.actions.all().some((style) => style.id === classId)
+    );
+    owningProvider?.actions.get(classId);
+  });
 }
 function doUnapplyClass(elementId, classId, classesPropType = "classes") {
   const appliedClasses = (0, import_editor_elements2.getElementSetting)(elementId, classesPropType)?.value || [];
@@ -753,7 +772,7 @@ function useUnapplyClass() {
 }
 function useCreateAndApplyClass() {
   const { id: activeId, setId: setActiveId } = useStyle();
-  const [provider, createAction] = (0, import_editor_styles_repository4.useGetStylesRepositoryCreateAction)() ?? [null, null];
+  const [provider, createAction] = (0, import_editor_styles_repository5.useGetStylesRepositoryCreateAction)() ?? [null, null];
   const deleteAction = provider?.actions.delete;
   const applyClass = useApply();
   const unapplyClass = useUnapply();
@@ -859,13 +878,13 @@ function getUniqueDuplicateLabel(originalLabel, existingLabels) {
 }
 function DuplicateClassMenuItem({ closeMenu }) {
   const { id: classId, provider } = useCssClass();
-  const { userCan } = (0, import_editor_styles_repository5.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository6.useUserStylesCapability)();
   const applyClass = useApplyClass();
   const [, setPendingEditId] = (0, import_session2.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app");
   if (!provider || !classId) {
     return null;
   }
-  const providerInstance = import_editor_styles_repository5.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository6.stylesRepository.getProviderByKey(provider);
   const createAction = providerInstance?.actions.create;
   const getAction = providerInstance?.actions.get;
   if (!createAction || !getAction) {
@@ -903,12 +922,12 @@ var import_ui4 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/css-classes/use-can-convert-local-class-to-global.ts
-var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
 var useCanConvertLocalClassToGlobal = () => {
   const { element } = useElement();
   const { provider, id, meta } = useStyle();
   const styleDef = provider?.actions.get(id, { elementId: element.id, ...meta });
-  const isLocalStylesProvider = provider && (0, import_editor_styles_repository6.isElementsStylesProvider)(provider?.getKey());
+  const isLocalStylesProvider = provider && (0, import_editor_styles_repository7.isElementsStylesProvider)(provider?.getKey());
   const variants = styleDef?.variants || [];
   const canConvert = !!(isLocalStylesProvider && variants.length);
   return {
@@ -944,7 +963,7 @@ function usePseudoStates() {
 }
 function CssClassMenu({ popupState, anchorEl, fixed }) {
   const { provider } = useCssClass();
-  const isLocalStyle2 = provider ? (0, import_editor_styles_repository7.isElementsStylesProvider)(provider) : true;
+  const isLocalStyle2 = provider ? (0, import_editor_styles_repository8.isElementsStylesProvider)(provider) : true;
   const pseudoStates = usePseudoStates();
   const handleKeyDown = (e) => {
     e.stopPropagation();
@@ -1021,7 +1040,7 @@ function useElementStates() {
 }
 function useModifiedStates(styleId) {
   const { meta } = useStyle();
-  const styleDef = import_editor_styles_repository7.stylesRepository.all().find((style) => style.id === styleId);
+  const styleDef = import_editor_styles_repository8.stylesRepository.all().find((style) => style.id === styleId);
   return Object.fromEntries(
     styleDef?.variants.filter((variant) => meta.breakpoint === variant.meta.breakpoint).map((variant) => [variant.meta.state ?? "normal", true]) ?? []
   );
@@ -1034,7 +1053,7 @@ function getMenuItemsByProvider({
   if (!provider) {
     return [];
   }
-  const providerInstance = import_editor_styles_repository7.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository8.stylesRepository.getProviderByKey(provider);
   const providerActions = providerInstance?.actions;
   const canUpdate = providerActions?.update;
   const canDuplicate = providerActions?.create && providerActions?.get;
@@ -1063,7 +1082,7 @@ function StateMenuItem({ state, label, closeMenu, ...props }) {
   const { id: styleId, provider } = useCssClass();
   const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
   const { state: activeState } = meta;
-  const { userCan } = (0, import_editor_styles_repository7.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository8.useUserStylesCapability)();
   const modifiedStates = useModifiedStates(styleId);
   const isUpdateAllowed = !state || userCan(provider ?? "").updateProps;
   const isStyled = modifiedStates[state ?? "normal"] ?? false;
@@ -1128,7 +1147,7 @@ function UnapplyClassMenuItem({ closeMenu, ...props }) {
 }
 function RenameClassMenuItem({ closeMenu }) {
   const { handleRename, provider } = useCssClass();
-  const { userCan } = (0, import_editor_styles_repository7.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository8.useUserStylesCapability)();
   if (!provider) {
     return null;
   }
@@ -1166,7 +1185,7 @@ function CssClassItem(props) {
   const popupState = (0, import_ui6.usePopupState)({ variant: "popover" });
   const [chipRef, setChipRef] = (0, import_react9.useState)(null);
   const { onDelete, ...chipGroupProps } = chipProps;
-  const { userCan } = (0, import_editor_styles_repository8.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository9.useUserStylesCapability)();
   const [convertedFromLocalId, , clearConvertedFromLocalId] = (0, import_session3.useSessionStorage)(
     PENDING_CLASS_RENAME_SESSION_KEY,
     "app"
@@ -1184,7 +1203,7 @@ function CssClassItem(props) {
     onError: setError
   });
   const color = error ? "error" : colorProp;
-  const providerActions = provider ? import_editor_styles_repository8.stylesRepository.getProviderByKey(provider)?.actions : null;
+  const providerActions = provider ? import_editor_styles_repository9.stylesRepository.getProviderByKey(provider)?.actions : null;
   const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
   const stateLabel = (0, import_react9.useMemo)(() => {
@@ -1263,7 +1282,7 @@ function CssClassItem(props) {
   ), /* @__PURE__ */ React10.createElement(CssClassProvider, { ...classProps, handleRename: openEditMode }, /* @__PURE__ */ React10.createElement(CssClassMenu, { popupState, anchorEl: chipRef, fixed })));
 }
 var validateLabel = (newLabel) => {
-  const result = (0, import_editor_styles_repository8.validateStyleLabel)(newLabel, "rename");
+  const result = (0, import_editor_styles_repository9.validateStyleLabel)(newLabel, "rename");
   if (result.isValid) {
     return null;
   }
@@ -1273,6 +1292,19 @@ var validateLabel = (newLabel) => {
 // src/components/css-classes/css-class-selector.tsx
 var ID = "elementor-css-class-selector";
 var TAGS_LIMIT = 50;
+var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
+var EVENT_TOGGLE_DESIGN_SYSTEM = "elementor/toggle-design-system";
+function openClassManagerPanel() {
+  if ((0, import_editor_v1_adapters2.isExperimentActive)("e_editor_design_system_panel")) {
+    window.dispatchEvent(
+      new CustomEvent(EVENT_TOGGLE_DESIGN_SYSTEM, {
+        detail: { tab: "classes" }
+      })
+    );
+    return;
+  }
+  window.dispatchEvent(new CustomEvent(EVENT_OPEN_GLOBAL_CLASSES_MANAGER));
+}
 var EMPTY_OPTION = {
   label: (0, import_i18n6.__)("local", "elementor"),
   value: null,
@@ -1288,11 +1320,11 @@ function CssClassSelector() {
   const autocompleteRef = (0, import_react10.useRef)(null);
   const [renameError, setRenameError] = (0, import_react10.useState)(null);
   const handleSelect = useHandleSelect();
-  const { create, validate, entityName } = useCreateAction();
+  const { create, validate, entityName, isAtLimit, limitCount } = useCreateAction();
   const appliedOptions = useAppliedOptions(options13);
   const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION;
   const showPlaceholder = appliedOptions.every(({ fixed }) => fixed);
-  const { userCan } = (0, import_editor_styles_repository9.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository10.useUserStylesCapability)();
   const canEdit = active.provider ? userCan(active.provider).updateProps : true;
   return /* @__PURE__ */ React11.createElement(import_ui7.Stack, { p: 2 }, /* @__PURE__ */ React11.createElement(import_ui7.Stack, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React11.createElement(import_ui7.FormLabel, { htmlFor: ID, size: "small" }, (0, import_i18n6.__)("Classes", "elementor")), /* @__PURE__ */ React11.createElement(import_ui7.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React11.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React11.createElement(
     import_editor_ui4.WarningInfotip,
@@ -1317,7 +1349,7 @@ function CssClassSelector() {
         onCreate: create ?? void 0,
         validate: validate ?? void 0,
         limitTags: TAGS_LIMIT,
-        renderEmptyState: EmptyState,
+        renderEmptyState: isAtLimit && typeof limitCount === "number" ? (props) => /* @__PURE__ */ React11.createElement(LimitReachedEmptyState, { limitCount, onClear: props.onClear }) : EmptyState,
         getLimitTagsText: (more) => /* @__PURE__ */ React11.createElement(import_ui7.Chip, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
         renderTags: (values, getTagProps) => values.map((value, index) => {
           const chipProps = getTagProps({ index });
@@ -1356,7 +1388,7 @@ function CssClassSelector() {
     )
   ), !canEdit && /* @__PURE__ */ React11.createElement(import_editor_ui4.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n6.__)("With your current role, you can use existing classes but can\u2019t modify them.", "elementor")));
 }
-var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React11.createElement(import_ui7.Box, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
+var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ React11.createElement(import_ui7.Box, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
   import_ui7.Stack,
   {
     gap: 1,
@@ -1367,14 +1399,59 @@ var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React11.createEle
   },
   /* @__PURE__ */ React11.createElement(import_icons2.ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
   /* @__PURE__ */ React11.createElement(import_ui7.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n6.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React11.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React11.createElement(import_ui7.Typography, { align: "center", variant: "caption", sx: { mb: 2 } }, (0, import_i18n6.__)("With your current role,", "elementor"), /* @__PURE__ */ React11.createElement("br", null), (0, import_i18n6.__)("you can only use existing classes.", "elementor")),
+  children,
   /* @__PURE__ */ React11.createElement(import_ui7.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n6.__)("Clear & try again", "elementor"))
 ));
+var EmptyState = (props) => /* @__PURE__ */ React11.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ React11.createElement(import_ui7.Typography, { align: "center", variant: "caption", sx: { mb: 2 } }, (0, import_i18n6.__)("With your current role,", "elementor"), /* @__PURE__ */ React11.createElement("br", null), (0, import_i18n6.__)("you can only use existing classes.", "elementor")));
+var LimitReachedEmptyState = ({
+  limitCount,
+  onClear
+}) => /* @__PURE__ */ React11.createElement(import_ui7.Box, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
+  import_ui7.Stack,
+  {
+    gap: 1,
+    alignItems: "center",
+    color: "text.secondary",
+    justifyContent: "center",
+    sx: { px: 1, m: "auto", maxWidth: "260px" }
+  },
+  /* @__PURE__ */ React11.createElement(import_icons2.ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
+  /* @__PURE__ */ React11.createElement(
+    import_ui7.Typography,
+    { align: "center", variant: "subtitle2" },
+    /* translators: %s is the maximum number of classes */
+    (0, import_i18n6.__)("Limit of %s classes reached", "elementor").replace("%s", String(limitCount))
+  ),
+  /* @__PURE__ */ React11.createElement(import_ui7.Typography, { align: "center", variant: "caption", component: "div" }, (0, import_i18n6.__)("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ React11.createElement(
+    import_ui7.Link,
+    {
+      color: "inherit",
+      variant: "caption",
+      component: "button",
+      onClick: onClear,
+      sx: { verticalAlign: "baseline" }
+    },
+    (0, import_i18n6.__)("Clear", "elementor")
+  )),
+  /* @__PURE__ */ React11.createElement(
+    import_ui7.Button,
+    {
+      variant: "outlined",
+      color: "secondary",
+      size: "small",
+      onClick: () => {
+        openClassManagerPanel();
+        onClear();
+      }
+    },
+    (0, import_i18n6.__)("Class Manager", "elementor")
+  )
+));
 var updateClassByProvider = (provider, data) => {
   if (!provider) {
     return;
   }
-  const providerInstance = import_editor_styles_repository9.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository10.stylesRepository.getProviderByKey(provider);
   if (!providerInstance) {
     return;
   }
@@ -1383,8 +1460,8 @@ var updateClassByProvider = (provider, data) => {
 function useOptions() {
   const { element } = useElement();
   const isProviderEditable = (provider) => !!provider.actions.updateProps;
-  return (0, import_editor_styles_repository9.useProviders)().filter(isProviderEditable).flatMap((provider) => {
-    const isElements = (0, import_editor_styles_repository9.isElementsStylesProvider)(provider.getKey());
+  return (0, import_editor_styles_repository10.useProviders)().filter(isProviderEditable).flatMap((provider) => {
+    const isElements = (0, import_editor_styles_repository10.isElementsStylesProvider)(provider.getKey());
     const styleDefs = provider.actions.all({ elementId: element.id });
     if (isElements && styleDefs.length === 0) {
       return [EMPTY_OPTION];
@@ -1412,6 +1489,11 @@ function useCreateAction() {
   if (!provider || !createAction) {
     return {};
   }
+  const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
+  const validate = (newClassLabel, event) => (0, import_editor_styles_repository10.validateStyleLabel)(newClassLabel, event);
+  if (hasReachedLimit(provider)) {
+    return { entityName, isAtLimit: true, limitCount: provider.limit, validate };
+  }
   const create = (classLabel) => {
     const { createdId } = createAction({ classLabel });
     trackStyles(provider.getKey() ?? "", "classCreated", {
@@ -1420,21 +1502,7 @@ function useCreateAction() {
       classId: createdId
     });
   };
-  const validate = (newClassLabel, event) => {
-    if (hasReachedLimit(provider)) {
-      return {
-        isValid: false,
-        /* translators: %s is the maximum number of classes */
-        errorMessage: (0, import_i18n6.__)(
-          "You\u2019ve reached the limit of %s classes. Please remove an existing one to create a new class.",
-          "elementor"
-        ).replace("%s", provider.limit.toString())
-      };
-    }
-    return (0, import_editor_styles_repository9.validateStyleLabel)(newClassLabel, event);
-  };
-  const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
-  return { create, validate, entityName };
+  return { create, validate, entityName, isAtLimit: false };
 }
 function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
@@ -1444,7 +1512,7 @@ function useAppliedOptions(options13) {
   const appliedIds = usePanelElementSetting(currentClassesProp)?.value ?? [];
   const appliedOptions = options13.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = appliedOptions.some(
-    (option) => option.provider && (0, import_editor_styles_repository9.isElementsStylesProvider)(option.provider)
+    (option) => option.provider && (0, import_editor_styles_repository10.isElementsStylesProvider)(option.provider)
   );
   if (!hasElementsProviderStyleApplied) {
     appliedOptions.unshift(EMPTY_OPTION);
@@ -1488,17 +1556,17 @@ var import_react13 = require("react");
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_props3 = require("@elementor/editor-props");
 var import_editor_styles3 = require("@elementor/editor-styles");
-var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_styles_repository13 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_utils2 = require("@elementor/utils");
 
 // src/hooks/use-styles-fields.ts
 var import_react12 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
 var import_editor_styles2 = require("@elementor/editor-styles");
-var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
 var import_editor_styles_repository11 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_styles_repository12 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_i18n7 = require("@wordpress/i18n");
 
 // src/hooks/use-styles-rerender.ts
@@ -1548,8 +1616,8 @@ function useUndoableActions({
   const classesProp = useClassesProp();
   return (0, import_react12.useMemo)(() => {
     const meta = { breakpoint, state };
-    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository11.ELEMENTS_STYLES_RESERVED_LABEL };
-    return (0, import_editor_v1_adapters2.undoable)(
+    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository12.ELEMENTS_STYLES_RESERVED_LABEL };
+    return (0, import_editor_v1_adapters3.undoable)(
       {
         do: (payload) => {
           if ((0, import_editor_elements4.shouldCreateNewLocalStyle)(payload)) {
@@ -1632,7 +1700,7 @@ var localStyleHistoryTitles = {
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
-var isLocalStyle = (provider, styleId) => !provider || !styleId || (0, import_editor_styles_repository10.isElementsStylesProvider)(provider.getKey());
+var isLocalStyle = (provider, styleId) => !provider || !styleId || (0, import_editor_styles_repository11.isElementsStylesProvider)(provider.getKey());
 var getTitle = ({ provider, styleId, elementId }) => {
   const isLocal = isLocalStyle(provider, styleId);
   if (isLocal) {
@@ -1687,8 +1755,8 @@ function useUndoableActions2({
   const classesProp = useClassesProp();
   return (0, import_react13.useMemo)(() => {
     const meta = { breakpoint, state };
-    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository12.ELEMENTS_STYLES_RESERVED_LABEL };
-    return (0, import_editor_v1_adapters3.undoable)(
+    const createStyleArgs = { elementId, classesProp, meta, label: import_editor_styles_repository13.ELEMENTS_STYLES_RESERVED_LABEL };
+    return (0, import_editor_v1_adapters4.undoable)(
       {
         do: (payload) => {
           if ((0, import_editor_elements5.shouldCreateNewLocalStyle)(payload)) {
@@ -1850,7 +1918,7 @@ function EditorPanelErrorFallback() {
 var import_react38 = require("react");
 var React86 = __toESM(require("react"));
 var import_editor_elements12 = require("@elementor/editor-elements");
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 var import_ui41 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
 
@@ -2146,7 +2214,7 @@ var import_react19 = require("react");
 var import_editor_controls2 = 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");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/utils/prop-dependency-utils.ts
@@ -2404,7 +2472,7 @@ function useUndoableUpdateElementProp({
   propDisplayName
 }) {
   return (0, import_react19.useMemo)(() => {
-    return (0, import_editor_v1_adapters4.undoable)(
+    return (0, import_editor_v1_adapters5.undoable)(
       {
         do: (newSettings) => {
           const prevPropValue = (0, import_editor_elements6.getElementSettings)(elementId, Object.keys(newSettings));
@@ -2552,7 +2620,7 @@ var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_props8 = require("@elementor/editor-props");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles5 = require("@elementor/editor-styles");
-var import_editor_styles_repository13 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
 
 // src/styles-inheritance/create-styles-inheritance.ts
 var import_editor_props7 = require("@elementor/editor-props");
@@ -2826,7 +2894,7 @@ var useAppliedStyles = () => {
   useStylesRerender();
   const classesProp = usePanelElementSetting(currentClassesProp);
   const appliedStyles = import_editor_props8.classesPropTypeUtil.extract(classesProp) ?? [];
-  return import_editor_styles_repository13.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
+  return import_editor_styles_repository14.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
 var useBaseStyles = () => {
   const { elementType } = useElement();
@@ -3100,11 +3168,11 @@ var import_ui19 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/use-direction.ts
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_ui17 = require("@elementor/ui");
 function useDirection() {
   const theme = (0, import_ui17.useTheme)();
-  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!(0, import_editor_v1_adapters5.getElementorFrontendConfig)()?.is_rtl;
+  const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!(0, import_editor_v1_adapters6.getElementorFrontendConfig)()?.is_rtl;
   return { isSiteRtl, isUiRtl };
 }
 
@@ -3350,18 +3418,18 @@ var EffectsSection = () => {
 var React55 = __toESM(require("react"));
 var import_editor_controls30 = require("@elementor/editor-controls");
 var import_editor_elements11 = require("@elementor/editor-elements");
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_i18n33 = require("@wordpress/i18n");
 
 // src/hooks/use-computed-style.ts
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 function useComputedStyle(elementId) {
-  return (0, import_editor_v1_adapters6.__privateUseListenTo)(
+  return (0, import_editor_v1_adapters7.__privateUseListenTo)(
     [
-      (0, import_editor_v1_adapters6.windowEvent)("elementor/device-mode/change"),
-      (0, import_editor_v1_adapters6.commandEndEvent)("document/elements/reset-style"),
-      (0, import_editor_v1_adapters6.commandEndEvent)("document/elements/settings"),
-      (0, import_editor_v1_adapters6.commandEndEvent)("document/elements/paste-style")
+      (0, import_editor_v1_adapters7.windowEvent)("elementor/device-mode/change"),
+      (0, import_editor_v1_adapters7.commandEndEvent)("document/elements/reset-style"),
+      (0, import_editor_v1_adapters7.commandEndEvent)("document/elements/settings"),
+      (0, import_editor_v1_adapters7.commandEndEvent)("document/elements/paste-style")
     ],
     () => {
       if (!elementId) {
@@ -3651,7 +3719,7 @@ var getOptions2 = (parentStyleDirection) => {
 var React44 = __toESM(require("react"));
 var import_react24 = require("react");
 var import_editor_controls19 = require("@elementor/editor-controls");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 var import_i18n22 = require("@wordpress/i18n");
 var DISPLAY_LABEL = (0, import_i18n22.__)("Display", "elementor");
 var displayFieldItems = [
@@ -3694,7 +3762,7 @@ var displayFieldItems = [
 ];
 var DisplayField = () => {
   const placeholder = useDisplayPlaceholderValue();
-  const isGridActive = (0, import_editor_v1_adapters7.isExperimentActive)("e_css_grid");
+  const isGridActive = (0, import_editor_v1_adapters8.isExperimentActive)("e_css_grid");
   const items3 = (0, import_react24.useMemo)(
     () => isGridActive ? displayFieldItems : displayFieldItems.filter((item) => item.value !== "grid"),
     [isGridActive]
@@ -4301,7 +4369,7 @@ var LayoutSection = () => {
     history: { propDisplayName: DISPLAY_LABEL2 }
   });
   const displayPlaceholder = useDisplayPlaceholderValue();
-  const isGridExperimentActive = (0, import_editor_v1_adapters8.isExperimentActive)("e_css_grid");
+  const isGridExperimentActive = (0, import_editor_v1_adapters9.isExperimentActive)("e_css_grid");
   const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
   const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value);
   const { element } = useElement();
@@ -4536,7 +4604,7 @@ var import_editor_ui6 = require("@elementor/editor-ui");
 
 // src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
 var React61 = __toESM(require("react"));
-var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
 var import_ui36 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 var StylesInheritanceSectionIndicators = ({ fields }) => {
@@ -4558,7 +4626,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
     StyleIndicator,
     {
       getColor: getStylesProviderThemeColor(provider.getKey()),
-      "data-variant": (0, import_editor_styles_repository14.isElementsStylesProvider)(provider.getKey()) ? "local" : "global",
+      "data-variant": (0, import_editor_styles_repository15.isElementsStylesProvider)(provider.getKey()) ? "local" : "global",
       role: "listitem",
       "aria-label": hasValueLabel
     }
@@ -5293,7 +5361,7 @@ var PanelTabContent = () => {
   const { element } = useElement();
   const editorDefaults = useDefaultPanelSettings();
   const defaultComponentTab = editorDefaults.defaultTab;
-  const isInteractionsActive = (0, import_editor_v1_adapters9.isExperimentActive)("e_interactions");
+  const isInteractionsActive = (0, import_editor_v1_adapters10.isExperimentActive)("e_interactions");
   const isPromotedElement = !!(0, import_editor_elements12.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
   const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
   const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
@@ -5338,11 +5406,11 @@ var EditingPanel = () => {
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-open-editor-panel.ts
 var import_react39 = require("react");
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 
 // src/panel.ts
 var import_editor_panels2 = require("@elementor/editor-panels");
@@ -5366,7 +5434,7 @@ var isAtomicWidgetSelected = () => {
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
   (0, import_react39.useEffect)(() => {
-    return (0, import_editor_v1_adapters10.__privateListenTo)((0, import_editor_v1_adapters10.commandStartEvent)("panel/editor/open"), () => {
+    return (0, import_editor_v1_adapters11.__privateListenTo)((0, import_editor_v1_adapters11.commandStartEvent)("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
       }
@@ -5815,7 +5883,7 @@ var import_react42 = require("react");
 var import_editor_controls59 = require("@elementor/editor-controls");
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-license-config.ts
 var import_react41 = require("react");
@@ -5838,7 +5906,7 @@ function useLicenseConfig() {
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
 var getAtomicDynamicTags = (shouldFilterByLicense = true) => {
-  const { atomicDynamicTags } = (0, import_editor_v1_adapters11.getElementorConfig)();
+  const { atomicDynamicTags } = (0, import_editor_v1_adapters12.getElementorConfig)();
   if (!atomicDynamicTags) {
     return null;
   }
@@ -5861,7 +5929,7 @@ var filterByLicense = (tags) => {
 
 // src/dynamics/utils.ts
 var import_editor_props17 = require("@elementor/editor-props");
-var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_schema = require("@elementor/schema");
 var DYNAMIC_PROP_TYPE_KEY = "dynamic";
 var dynamicPropTypeUtil = (0, import_editor_props17.createPropUtils)(
@@ -5873,7 +5941,7 @@ var dynamicPropTypeUtil = (0, import_editor_props17.createPropUtils)(
   })
 );
 var isDynamicTagSupported = (tagName) => {
-  return !!(0, import_editor_v1_adapters12.getElementorConfig)()?.atomicDynamicTags?.tags?.[tagName];
+  return !!(0, import_editor_v1_adapters13.getElementorConfig)()?.atomicDynamicTags?.tags?.[tagName];
 };
 var isDynamicPropType = (prop) => prop.key === DYNAMIC_PROP_TYPE_KEY;
 var getDynamicPropType = (propType) => {
@@ -6578,7 +6646,7 @@ function useResetStyleValueProps() {
 var React101 = __toESM(require("react"));
 var import_editor_controls67 = require("@elementor/editor-controls");
 var import_editor_props21 = require("@elementor/editor-props");
-var import_editor_styles_repository17 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository18 = require("@elementor/editor-styles-repository");
 var import_i18n72 = require("@wordpress/i18n");
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
@@ -6593,7 +6661,7 @@ var import_i18n71 = require("@wordpress/i18n");
 var import_react46 = require("react");
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_styles8 = require("@elementor/editor-styles");
-var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
 var import_i18n69 = require("@wordpress/i18n");
 var MAXIMUM_ITEMS = 2;
 var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
@@ -6605,7 +6673,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
       );
       const validItems = normalizedItems.map((item) => ({
         ...item,
-        displayLabel: import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n69.__)("Base", "elementor")
+        displayLabel: import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n69.__)("Base", "elementor")
       })).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
       setItems(validItems);
     })();
@@ -6690,13 +6758,13 @@ var BreakpointIcon = ({ breakpoint }) => {
 
 // src/styles-inheritance/components/infotip/label-chip.tsx
 var React97 = __toESM(require("react"));
-var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository17 = require("@elementor/editor-styles-repository");
 var import_icons33 = require("@elementor/icons");
 var import_ui47 = require("@elementor/ui");
 var import_i18n70 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var LabelChip = ({ displayLabel, provider }) => {
-  const isBaseStyle = provider === import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
+  const isBaseStyle = provider === import_editor_styles_repository17.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
   const chipIcon = isBaseStyle ? /* @__PURE__ */ React97.createElement(import_ui47.Tooltip, { title: (0, import_i18n70.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React97.createElement(import_icons33.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
   return /* @__PURE__ */ React97.createElement(
     import_ui47.Chip,
@@ -6931,7 +6999,7 @@ var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => {
   const currentItem = currentStyleId ? getValueFromInheritanceChain(inheritanceChain, currentStyleId, currentStyleMeta) : null;
   const hasValue = !(0, import_editor_props21.isEmpty)(currentItem?.value);
   const [actualStyle] = inheritanceChain;
-  if (actualStyle.provider === import_editor_styles_repository17.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
+  if (actualStyle.provider === import_editor_styles_repository18.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
     return null;
   }
   const isFinalValue = currentItem === actualStyle;
@@ -7200,7 +7268,7 @@ function init4() {
   init();
 }
 var blockV1Panel = () => {
-  (0, import_editor_v1_adapters13.blockCommand)({
+  (0, import_editor_v1_adapters14.blockCommand)({
     command: "panel/editor/open",
     condition: isAtomicWidgetSelected
   });