@elementor/editor-editing-panel 1.42.0 → 1.43.0

package/dist/index.js

@@ -49,8 +49,7 @@ var { registerControlReplacement, getControlReplacements } = (0, import_editor_c
 var React8 = __toESM(require("react"));
 var import_react10 = require("react");
 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");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons2 = require("@elementor/icons");
 var import_locations = require("@elementor/locations");
@@ -468,7 +467,7 @@ var StyledGroupItems = (0, import_ui2.styled)("ul")`
 // src/components/css-classes/css-class-item.tsx
 var React7 = __toESM(require("react"));
 var import_react9 = require("react");
-var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
@@ -491,7 +490,7 @@ function CssClassProvider({ children, ...contextValue }) {
 
 // src/components/css-classes/css-class-menu.tsx
 var React6 = __toESM(require("react"));
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui4 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
@@ -523,12 +522,20 @@ var import_react8 = require("react");
 var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_props = require("@elementor/editor-props");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_i18n = require("@wordpress/i18n");
+
+// src/sync/experiments-flags.ts
+var EXPERIMENTAL_FEATURES = {
+  V_3_30: "e_v_3_30"
+};
+
+// src/components/css-classes/use-apply-and-unapply-class.ts
 function useApplyClass() {
   const { id: activeId, setId: setActiveId } = useStyle();
   const { element } = useElement();
-  const isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
+  const isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_30);
   const applyClass = useApply();
   const unapplyClass = useUnapply();
   const undoableApply = (0, import_react8.useMemo)(() => {
@@ -563,7 +570,7 @@ function useApplyClass() {
 function useUnapplyClass() {
   const { id: activeId, setId: setActiveId } = useStyle();
   const { element } = useElement();
-  const isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
+  const isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_30);
   const applyClass = useApply();
   const unapplyClass = useUnapply();
   const undoableUnapply = (0, import_react8.useMemo)(() => {
@@ -595,10 +602,58 @@ function useUnapplyClass() {
   );
   return isVersion330Active ? undoableUnapply : unapplyWithoutHistory;
 }
+function useCreateAndApplyClass() {
+  const { id: activeId, setId: setActiveId } = useStyle();
+  const isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_30);
+  const [provider, createAction] = (0, import_editor_styles_repository2.useGetStylesRepositoryCreateAction)() ?? [null, null];
+  const deleteAction = provider?.actions.delete;
+  const applyClass = useApply();
+  const unapplyClass = useUnapply();
+  const undoableCreateAndApply = (0, import_react8.useMemo)(() => {
+    if (!provider || !createAction) {
+      return;
+    }
+    return (0, import_editor_v1_adapters.undoable)(
+      {
+        do: ({ classLabel }) => {
+          const prevActiveId = activeId;
+          const createdId = createAction(classLabel);
+          applyClass(createdId);
+          return { prevActiveId, createdId };
+        },
+        undo: (_, { prevActiveId, createdId }) => {
+          unapplyClass(createdId);
+          deleteAction?.(createdId);
+          setActiveId(prevActiveId);
+        }
+      },
+      {
+        title: (0, import_i18n.__)("Class", "elementor"),
+        subtitle: ({ classLabel }) => {
+          return (0, import_i18n.__)(`%s created`, "elementor").replace("%s", classLabel);
+        }
+      }
+    );
+  }, [activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClass]);
+  const createAndApplyWithoutHistory = (0, import_react8.useCallback)(
+    ({ classLabel }) => {
+      if (!createAction) {
+        return;
+      }
+      const createdId = createAction(classLabel);
+      applyClass(createdId);
+    },
+    [applyClass, createAction]
+  );
+  if (!provider || !undoableCreateAndApply) {
+    return [null, null];
+  }
+  return isVersion330Active ? [provider, undoableCreateAndApply] : [provider, createAndApplyWithoutHistory];
+}
 function useApply() {
   const { element } = useElement();
   const { setId: setActiveId } = useStyle();
-  const { setClasses, getAppliedClasses } = useSetClasses();
+  const { setClasses, getAppliedClasses } = useClasses();
   return (0, import_react8.useCallback)(
     (classIDToApply) => {
       const appliedClasses = getAppliedClasses();
@@ -617,7 +672,7 @@ function useApply() {
 function useUnapply() {
   const { element } = useElement();
   const { id: activeId, setId: setActiveId } = useStyle();
-  const { setClasses, getAppliedClasses } = useSetClasses();
+  const { setClasses, getAppliedClasses } = useClasses();
   return (0, import_react8.useCallback)(
     (classIDToUnapply) => {
       const appliedClasses = getAppliedClasses();
@@ -635,10 +690,10 @@ function useUnapply() {
     [activeId, element.id, getAppliedClasses, setActiveId, setClasses]
   );
 }
-function useSetClasses() {
+function useClasses() {
   const { element } = useElement();
   const currentClassesProp = useClassesProp();
-  const isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)("e_v_3_30");
+  const isVersion330Active = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_30);
   return (0, import_react8.useMemo)(() => {
     const setClasses = (ids) => {
       (0, import_editor_elements.updateElementSettings)({
@@ -651,10 +706,7 @@ function useSetClasses() {
       }
     };
     const getAppliedClasses = () => (0, import_editor_elements.getElementSetting)(element.id, currentClassesProp)?.value || [];
-    return {
-      setClasses,
-      getAppliedClasses
-    };
+    return { setClasses, getAppliedClasses };
   }, [currentClassesProp, element.id, isVersion330Active]);
 }
 
@@ -696,7 +748,7 @@ function CssClassMenu({ popupState, anchorEl, fixed }) {
 }
 function useModifiedStates(styleId) {
   const { meta } = useStyle();
-  const styleDef = import_editor_styles_repository2.stylesRepository.all().find((style) => style.id === styleId);
+  const styleDef = import_editor_styles_repository3.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]) ?? []
   );
@@ -709,7 +761,7 @@ function getMenuItemsByProvider({
   if (!provider) {
     return [];
   }
-  const providerInstance = import_editor_styles_repository2.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository3.stylesRepository.getProviderByKey(provider);
   const providerActions = providerInstance?.actions;
   const canUpdate = providerActions?.update;
   const canUnapply = !fixed;
@@ -736,12 +788,12 @@ function StateMenuItem({ state, 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_repository2.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
   const modifiedStates = useModifiedStates(styleId);
-  const isUpdateAllowed = userCan(provider ?? "").updateProps;
-  const indicatorVariant = !provider || (0, import_editor_styles_repository2.isElementsStylesProvider)(provider) ? "local" : "global";
+  const isUpdateAllowed = !state || userCan(provider ?? "").updateProps;
+  const indicatorVariant = !provider || (0, import_editor_styles_repository3.isElementsStylesProvider)(provider) ? "local" : "global";
   const isStyled = modifiedStates[state ?? "normal"] ?? false;
-  const disabled = isUpdateAllowed ? false : !isStyled;
+  const disabled = !isUpdateAllowed && !isStyled;
   const isActive = styleId === activeId;
   const isSelected = state === activeState && isActive;
   return /* @__PURE__ */ React6.createElement(
@@ -763,7 +815,7 @@ function StateMenuItem({ state, closeMenu, ...props }) {
       import_editor_ui.MenuItemInfotip,
       {
         showInfoTip: disabled,
-        content: (0, import_i18n2.__)("With your role as an editor, you can only use existing states.", "elementor")
+        content: (0, import_i18n2.__)("With your current role, you can only use existing states.", "elementor")
       },
       /* @__PURE__ */ React6.createElement(import_ui4.Stack, { gap: 0.75, direction: "row", alignItems: "center" }, isStyled && /* @__PURE__ */ React6.createElement(StyleIndicator, { "aria-label": (0, import_i18n2.__)("Has style", "elementor"), variant: indicatorVariant }), state ?? "normal")
     )
@@ -786,7 +838,7 @@ function UnapplyClassMenuItem({ closeMenu, ...props }) {
 }
 function RenameClassMenuItem({ closeMenu }) {
   const { handleRename, provider } = useCssClass();
-  const { userCan } = (0, import_editor_styles_repository2.useUserStylesCapability)();
+  const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
   if (!provider) {
     return null;
   }
@@ -805,7 +857,7 @@ function RenameClassMenuItem({ closeMenu }) {
       {
         showInfoTip: !isAllowed,
         content: (0, import_i18n2.__)(
-          "With your role as an editor, you can use existing classes but can\u2019t modify them.",
+          "With your current role, you can use existing classes but can\u2019t modify them.",
           "elementor"
         )
       },
@@ -823,6 +875,7 @@ function CssClassItem(props) {
   const popupState = (0, import_ui5.usePopupState)({ variant: "popover" });
   const [chipRef, setChipRef] = (0, import_react9.useState)(null);
   const { onDelete, ...chipGroupProps } = chipProps;
+  const { userCan } = (0, import_editor_styles_repository4.useUserStylesCapability)();
   const {
     ref,
     isEditing,
@@ -836,8 +889,8 @@ function CssClassItem(props) {
     onError: setError
   });
   const color = error ? "error" : colorProp;
-  const providerActions = provider ? import_editor_styles_repository3.stylesRepository.getProviderByKey(provider)?.actions : null;
-  const allowRename = Boolean(providerActions?.update);
+  const providerActions = provider ? import_editor_styles_repository4.stylesRepository.getProviderByKey(provider)?.actions : null;
+  const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     import_ui5.UnstableChipGroup,
@@ -903,7 +956,7 @@ function CssClassItem(props) {
   ), /* @__PURE__ */ React7.createElement(CssClassProvider, { ...classProps, handleRename: openEditMode }, /* @__PURE__ */ React7.createElement(CssClassMenu, { popupState, anchorEl: chipRef, fixed })));
 }
 var validateLabel = (newLabel) => {
-  const result = (0, import_editor_styles_repository3.validateStyleLabel)(newLabel, "rename");
+  const result = (0, import_editor_styles_repository4.validateStyleLabel)(newLabel, "rename");
   if (result.isValid) {
     return null;
   }
@@ -924,15 +977,16 @@ var EMPTY_OPTION = {
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = (0, import_locations.createLocation)();
 function CssClassSelector() {
   const options12 = useOptions();
-  const { value: appliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
   const { id: activeId, setId: setActiveId } = useStyle();
   const autocompleteRef = (0, import_react10.useRef)(null);
   const [renameError, setRenameError] = (0, import_react10.useState)(null);
   const handleSelect = useHandleSelect();
-  const { create, validate, entityName } = useCreateAction({ pushAppliedId, setActiveId });
-  const applied = useAppliedOptions(options12, appliedIds);
-  const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
-  const showPlaceholder = applied.every(({ fixed }) => fixed);
+  const { create, validate, entityName } = useCreateAction();
+  const appliedOptions = useAppliedOptions(options12);
+  const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION;
+  const showPlaceholder = appliedOptions.every(({ fixed }) => fixed);
+  const { userCan } = (0, import_editor_styles_repository5.useUserStylesCapability)();
+  const canEdit = active.provider ? userCan(active.provider).updateProps : true;
   return /* @__PURE__ */ React8.createElement(import_ui6.Stack, { p: 2 }, /* @__PURE__ */ React8.createElement(import_ui6.Stack, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React8.createElement(import_ui6.FormLabel, { htmlFor: ID, size: "small" }, (0, import_i18n4.__)("Classes", "elementor")), /* @__PURE__ */ React8.createElement(import_ui6.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React8.createElement(
     import_editor_ui3.WarningInfotip,
     {
@@ -950,7 +1004,7 @@ function CssClassSelector() {
         size: "tiny",
         placeholder: showPlaceholder ? (0, import_i18n4.__)("Type class name", "elementor") : void 0,
         options: options12,
-        selected: applied,
+        selected: appliedOptions,
         entityName,
         onSelect: handleSelect,
         onCreate: create ?? void 0,
@@ -987,6 +1041,15 @@ function CssClassSelector() {
         })
       }
     )
+  ), !canEdit && /* @__PURE__ */ React8.createElement(
+    import_editor_ui3.InfoAlert,
+    {
+      content: (0, import_i18n4.__)(
+        "With your current role, you can use existing classes but can\u2019t modify them.",
+        "elementor"
+      ),
+      sx: { mt: 1 }
+    }
   ));
 }
 var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React8.createElement(import_ui6.Box, { sx: { py: 4 } }, /* @__PURE__ */ React8.createElement(
@@ -1007,7 +1070,7 @@ var updateClassByProvider = (provider, data) => {
   if (!provider) {
     return;
   }
-  const providerInstance = import_editor_styles_repository4.stylesRepository.getProviderByKey(provider);
+  const providerInstance = import_editor_styles_repository5.stylesRepository.getProviderByKey(provider);
   if (!providerInstance) {
     return;
   }
@@ -1016,8 +1079,8 @@ var updateClassByProvider = (provider, data) => {
 function useOptions() {
   const { element } = useElement();
   const isProviderEditable = (provider) => !!provider.actions.updateProps;
-  return (0, import_editor_styles_repository4.useProviders)().filter(isProviderEditable).flatMap((provider) => {
-    const isElements = (0, import_editor_styles_repository4.isElementsStylesProvider)(provider.getKey());
+  return (0, import_editor_styles_repository5.useProviders)().filter(isProviderEditable).flatMap((provider) => {
+    const isElements = (0, import_editor_styles_repository5.isElementsStylesProvider)(provider.getKey());
     const styleDefs = provider.actions.all({ elementId: element.id });
     if (isElements && styleDefs.length === 0) {
       return [EMPTY_OPTION];
@@ -1034,18 +1097,13 @@ function useOptions() {
     });
   });
 }
-function useCreateAction({
-  pushAppliedId,
-  setActiveId
-}) {
-  const [provider, createAction] = (0, import_editor_styles_repository4.useGetStylesRepositoryCreateAction)() ?? [null, null];
+function useCreateAction() {
+  const [provider, createAction] = useCreateAndApplyClass();
   if (!provider || !createAction) {
     return {};
   }
-  const create = (newClassLabel) => {
-    const createdId = createAction(newClassLabel);
-    pushAppliedId(createdId);
-    setActiveId(createdId);
+  const create = (classLabel) => {
+    createAction({ classLabel });
   };
   const validate = (newClassLabel, event) => {
     if (hasReachedLimit(provider)) {
@@ -1057,7 +1115,7 @@ function useCreateAction({
         )
       };
     }
-    return (0, import_editor_styles_repository4.validateStyleLabel)(newClassLabel, event);
+    return (0, import_editor_styles_repository5.validateStyleLabel)(newClassLabel, event);
   };
   const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
   return { create, validate, entityName };
@@ -1065,36 +1123,18 @@ function useCreateAction({
 function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
 }
-function useAppliedOptions(options12, appliedIds) {
-  const applied = options12.filter((option) => option.value && appliedIds.includes(option.value));
-  const hasElementsProviderStyleApplied = applied.some(
-    (option) => option.provider && (0, import_editor_styles_repository4.isElementsStylesProvider)(option.provider)
+function useAppliedOptions(options12) {
+  const { element } = useElement();
+  const currentClassesProp = useClassesProp();
+  const appliedIds = (0, import_editor_elements2.useElementSetting)(element.id, currentClassesProp)?.value || [];
+  const appliedOptions = options12.filter((option) => option.value && appliedIds.includes(option.value));
+  const hasElementsProviderStyleApplied = appliedOptions.some(
+    (option) => option.provider && (0, import_editor_styles_repository5.isElementsStylesProvider)(option.provider)
   );
   if (!hasElementsProviderStyleApplied) {
-    applied.unshift(EMPTY_OPTION);
+    appliedOptions.unshift(EMPTY_OPTION);
   }
-  return applied;
-}
-function useAppliedClassesIds() {
-  const { element } = useElement();
-  const currentClassesProp = useClassesProp();
-  const value = (0, import_editor_elements2.useElementSetting)(element.id, currentClassesProp)?.value || [];
-  const setValue = (ids) => {
-    (0, import_editor_elements2.updateElementSettings)({
-      id: element.id,
-      props: {
-        [currentClassesProp]: import_editor_props2.classesPropTypeUtil.create(ids)
-      }
-    });
-  };
-  const pushValue = (id) => {
-    const ids = (0, import_editor_elements2.getElementSetting)(element.id, currentClassesProp)?.value || [];
-    setValue([...ids, id]);
-  };
-  return {
-    value,
-    pushValue
-  };
+  return appliedOptions;
 }
 function useHandleSelect() {
   const apply = useApplyClass();
@@ -1268,13 +1308,6 @@ var useDefaultPanelSettings = () => {
 var import_react14 = require("react");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_session = require("@elementor/session");
-
-// src/sync/experiments-flags.ts
-var EXPERIMENTAL_FEATURES = {
-  V_3_30: "e_v_3_30"
-};
-
-// src/hooks/use-state-by-element.ts
 var useStateByElement = (key, initialValue) => {
   const { element } = useElement();
   const isFeatureActive = (0, import_editor_v1_adapters2.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_30);
@@ -1468,7 +1501,7 @@ var Control2 = ({ control }) => {
 // src/components/style-tab.tsx
 var React78 = __toESM(require("react"));
 var import_react27 = require("react");
-var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_props9 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_session4 = require("@elementor/session");
@@ -1479,10 +1512,10 @@ var import_i18n52 = require("@wordpress/i18n");
 var React19 = __toESM(require("react"));
 var import_react17 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_editor_styles = require("@elementor/editor-styles");
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
 
 // src/hooks/use-styles-rerender.ts
 var import_react16 = require("react");
@@ -1493,10 +1526,10 @@ var useStylesRerender = () => {
 };
 
 // src/styles-inheritance/create-styles-inheritance.ts
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 
 // src/styles-inheritance/create-snapshots-manager.ts
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props2 = require("@elementor/editor-props");
 
 // src/styles-inheritance/utils.ts
 var DEFAULT_STATE = "normal";
@@ -1588,7 +1621,7 @@ function buildInitialSnapshotFromStyles(styles) {
       variant: { props }
     } = styleData;
     Object.entries(props).forEach(([key, value]) => {
-      const filteredValue = (0, import_editor_props3.filterEmptyValues)(value);
+      const filteredValue = (0, import_editor_props2.filterEmptyValues)(value);
       if (filteredValue === null) {
         return;
       }
@@ -1634,7 +1667,7 @@ function createStylesInheritance(styleDefs, breakpointsRoot) {
         inheritanceChain = inheritanceChain.map(({ value: styleValue, ...rest }) => ({
           ...rest,
           value: getValueByPath(styleValue, nextFields, filterPropType)
-        })).filter(({ value: styleValue }) => !(0, import_editor_props4.isEmpty)(styleValue));
+        })).filter(({ value: styleValue }) => !(0, import_editor_props3.isEmpty)(styleValue));
       }
       return inheritanceChain;
     }
@@ -1676,7 +1709,7 @@ function getValueByPath(value, path, filterPropType) {
     if (!currentScope) {
       return null;
     }
-    if ((0, import_editor_props4.isTransformable)(currentScope)) {
+    if ((0, import_editor_props3.isTransformable)(currentScope)) {
       return currentScope.value?.[key] ?? null;
     }
     if (typeof currentScope === "object") {
@@ -1686,7 +1719,7 @@ function getValueByPath(value, path, filterPropType) {
   }, value);
 }
 function shouldUseOriginalValue(filterPropType, value) {
-  return !!filterPropType && (0, import_editor_props4.isTransformable)(value) && filterPropType.key !== value.$$type;
+  return !!filterPropType && (0, import_editor_props3.isTransformable)(value) && filterPropType.key !== value.$$type;
 }
 var getFilterPropType = (propType, path) => {
   if (!propType || propType.kind !== "union") {
@@ -1744,8 +1777,8 @@ var useAppliedStyles = () => {
   const baseStyles = useBaseStyles();
   useStylesRerender();
   const classesProp = (0, import_editor_elements4.useElementSetting)(element.id, currentClassesProp);
-  const appliedStyles = import_editor_props5.classesPropTypeUtil.extract(classesProp) ?? [];
-  return import_editor_styles_repository5.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
+  const appliedStyles = import_editor_props4.classesPropTypeUtil.extract(classesProp) ?? [];
+  return import_editor_styles_repository6.stylesRepository.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
 var useBaseStyles = () => {
   const { elementType } = useElement();
@@ -1761,7 +1794,7 @@ function useActiveStyleDefId(classProp) {
     "active-style-id",
     null
   );
-  const appliedClassesIds = useAppliedClassesIds2(classProp)?.value || [];
+  const appliedClassesIds = useAppliedClassesIds(classProp)?.value || [];
   const fallback = useFirstAppliedClass(appliedClassesIds);
   const activeAndAppliedClassId = useActiveAndAppliedClassId(activeStyledDefId, appliedClassesIds);
   return [activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId];
@@ -1771,7 +1804,7 @@ function useFirstAppliedClass(appliedClassesIds) {
   const stylesDefs = (0, import_editor_elements5.getElementStyles)(element.id) ?? {};
   return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
 }
-function useAppliedClassesIds2(classProp) {
+function useAppliedClassesIds(classProp) {
   const { element } = useElement();
   return (0, import_editor_elements5.useElementSetting)(element.id, classProp);
 }
@@ -1793,7 +1826,7 @@ var import_editor_styles3 = require("@elementor/editor-styles");
 var import_react18 = require("react");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_styles2 = require("@elementor/editor-styles");
-var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository7 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_i18n5 = require("@wordpress/i18n");
 function useStylesFields(propNames) {
@@ -1850,7 +1883,7 @@ function useUndoableCreateElementStyle() {
         do: (payload) => {
           return (0, import_editor_elements6.createElementStyle)({
             ...payload,
-            label: import_editor_styles_repository6.ELEMENTS_STYLES_RESERVED_LABEL
+            label: import_editor_styles_repository7.ELEMENTS_STYLES_RESERVED_LABEL
           });
         },
         undo: ({ elementId }, styleId) => {
@@ -1860,7 +1893,7 @@ function useUndoableCreateElementStyle() {
           return (0, import_editor_elements6.createElementStyle)({
             ...payload,
             styleId,
-            label: import_editor_styles_repository6.ELEMENTS_STYLES_RESERVED_LABEL
+            label: import_editor_styles_repository7.ELEMENTS_STYLES_RESERVED_LABEL
           });
         }
       },
@@ -1928,8 +1961,8 @@ function useStylesField(propName) {
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 var React26 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
-var import_editor_props6 = require("@elementor/editor-props");
-var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
+var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_styles_repository10 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_ui23 = require("@elementor/ui");
 var import_i18n9 = require("@wordpress/i18n");
@@ -2017,13 +2050,13 @@ var BreakpointIcon = ({ breakpoint }) => {
 
 // src/styles-inheritance/components/label-chip.tsx
 var React22 = __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_icons6 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
 var LabelChip = ({ displayLabel, provider, chipColor }) => {
-  const isBaseStyle = provider === import_editor_styles_repository7.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
+  const isBaseStyle = provider === import_editor_styles_repository8.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
   const chipIcon = isBaseStyle ? /* @__PURE__ */ React22.createElement(import_ui19.Tooltip, { title: (0, import_i18n6.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(import_icons6.InfoCircleIcon, { fontSize: SIZE4 })) : void 0;
   return /* @__PURE__ */ React22.createElement(
     import_ui19.Chip,
@@ -2078,7 +2111,7 @@ var ActionIcons = () => /* @__PURE__ */ React24.createElement(import_ui21.Box, {
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
 var import_react20 = require("react");
-var import_editor_styles_repository8 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository9 = require("@elementor/editor-styles-repository");
 var import_i18n7 = require("@wordpress/i18n");
 var MAXIMUM_ITEMS = 2;
 var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
@@ -2090,7 +2123,7 @@ var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
       );
       const validItems = normalizedItems.map((item) => ({
         ...item,
-        displayLabel: import_editor_styles_repository8.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n7.__)("Base", "elementor")
+        displayLabel: import_editor_styles_repository9.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, import_i18n7.__)("Base", "elementor")
       })).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS);
       setItems(validItems);
     })();
@@ -2136,7 +2169,7 @@ var getTransformedValue = async (item, bind, resolve) => {
 };
 var getChipColor = (item) => {
   const { provider = "", style } = item;
-  if (provider === import_editor_styles_repository8.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
+  if (provider === import_editor_styles_repository9.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
     return "default";
   }
   if (style?.label === "local") {
@@ -2299,9 +2332,9 @@ var StylesInheritanceIndicator = () => {
       }
     }) => style.id === currentStyleId && breakpoint === currentStyleMeta.breakpoint && state === currentStyleMeta.state
   );
-  const hasValue = !(0, import_editor_props6.isEmpty)(currentItem?.value);
+  const hasValue = !(0, import_editor_props5.isEmpty)(currentItem?.value);
   const [actualStyle] = inheritanceChain;
-  if (actualStyle.provider === import_editor_styles_repository9.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
+  if (actualStyle.provider === import_editor_styles_repository10.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
     return null;
   }
   const isFinalValue = currentItem === actualStyle;
@@ -2336,7 +2369,7 @@ var getVariant = ({
   currentStyleProvider
 }) => {
   if (isFinalValue) {
-    return (0, import_editor_styles_repository9.isElementsStylesProvider)(currentStyleProvider?.getKey?.()) ? "local" : "global";
+    return (0, import_editor_styles_repository10.isElementsStylesProvider)(currentStyleProvider?.getKey?.()) ? "local" : "global";
   }
   if (hasValue) {
     return "overridden";
@@ -2466,7 +2499,7 @@ var BorderStyleField = () => {
 // src/components/style-sections/border-section/border-width-field.tsx
 var React34 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_props6 = require("@elementor/editor-props");
 var import_icons8 = require("@elementor/icons");
 var import_ui29 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -2503,7 +2536,7 @@ var BorderWidthField = () => {
       label: (0, import_i18n12.__)("Border width", "elementor"),
       icon: /* @__PURE__ */ React34.createElement(import_icons8.SideAllIcon, { fontSize: "tiny" }),
       tooltipLabel: (0, import_i18n12.__)("Adjust borders", "elementor"),
-      multiSizePropTypeUtil: import_editor_props7.borderWidthPropTypeUtil
+      multiSizePropTypeUtil: import_editor_props6.borderWidthPropTypeUtil
     }
   ));
 };
@@ -2546,7 +2579,7 @@ var BorderField = () => {
 // src/components/style-sections/border-section/border-radius-field.tsx
 var React36 = __toESM(require("react"));
 var import_editor_controls12 = require("@elementor/editor-controls");
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_props7 = require("@elementor/editor-props");
 var import_icons9 = require("@elementor/icons");
 var import_ui30 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
@@ -2589,7 +2622,7 @@ var BorderRadiusField = () => {
       label: (0, import_i18n14.__)("Border radius", "elementor"),
       icon: /* @__PURE__ */ React36.createElement(import_icons9.BorderCornersIcon, { fontSize: "tiny" }),
       tooltipLabel: (0, import_i18n14.__)("Adjust corners", "elementor"),
-      multiSizePropTypeUtil: import_editor_props8.borderRadiusPropTypeUtil
+      multiSizePropTypeUtil: import_editor_props7.borderRadiusPropTypeUtil
     }
   ));
 };
@@ -3031,7 +3064,7 @@ var getGroupControlValue = (order) => {
 var React46 = __toESM(require("react"));
 var import_react24 = require("react");
 var import_editor_controls20 = require("@elementor/editor-controls");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_props8 = require("@elementor/editor-props");
 var import_icons15 = require("@elementor/icons");
 var import_ui38 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
@@ -3077,7 +3110,7 @@ var FlexSizeField = () => {
     if (group === "flex-grow") {
       setFields({
         "flex-basis": null,
-        "flex-grow": import_editor_props9.numberPropTypeUtil.create(DEFAULT),
+        "flex-grow": import_editor_props8.numberPropTypeUtil.create(DEFAULT),
         "flex-shrink": null
       });
       return;
@@ -3085,7 +3118,7 @@ var FlexSizeField = () => {
     setFields({
       "flex-basis": null,
       "flex-grow": null,
-      "flex-shrink": import_editor_props9.numberPropTypeUtil.create(DEFAULT)
+      "flex-shrink": import_editor_props8.numberPropTypeUtil.create(DEFAULT)
     });
   };
   return /* @__PURE__ */ React46.createElement(import_ui38.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React46.createElement(import_ui38.ThemeProvider, null, /* @__PURE__ */ React46.createElement(SectionContent, null, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(StylesField, { bind: activeGroup ?? "" }, /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlLabel, null, (0, import_i18n21.__)("Size", "elementor"))), /* @__PURE__ */ React46.createElement(import_ui38.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React46.createElement(
@@ -3937,7 +3970,7 @@ function ClassesHeader({ children }) {
 function useCurrentClassesProp() {
   const { elementType } = useElement();
   const prop = Object.entries(elementType.propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props10.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props9.CLASSES_PROP_KEY
   );
   if (!prop) {
     throw new Error("Element does not have a classes prop");
@@ -4087,7 +4120,7 @@ var getAtomicDynamicTags = () => {
 };
 
 // src/dynamics/utils.ts
-var import_editor_props11 = require("@elementor/editor-props");
+var import_editor_props10 = require("@elementor/editor-props");
 var import_schema = require("@elementor/schema");
 var DYNAMIC_PROP_TYPE_KEY = "dynamic";
 var isDynamicPropType = (prop) => prop.key === DYNAMIC_PROP_TYPE_KEY;
@@ -4096,12 +4129,12 @@ var getDynamicPropType = (propType) => {
   return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null;
 };
 var isDynamicPropValue = (prop) => {
-  return (0, import_editor_props11.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+  return (0, import_editor_props10.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
 };
 var supportsDynamic = (propType) => {
   return !!getDynamicPropType(propType);
 };
-var dynamicPropTypeUtil = (0, import_editor_props11.createPropUtils)(
+var dynamicPropTypeUtil = (0, import_editor_props10.createPropUtils)(
   DYNAMIC_PROP_TYPE_KEY,
   import_schema.z.strictObject({
     name: import_schema.z.string(),
@@ -4351,7 +4384,7 @@ var Control3 = ({ control }) => {
 
 // src/dynamics/dynamic-transformer.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_props12 = require("@elementor/editor-props");
+var import_editor_props11 = require("@elementor/editor-props");
 
 // src/dynamics/errors.ts
 var import_utils8 = require("@elementor/utils");
@@ -4369,7 +4402,7 @@ var dynamicTransformer = (0, import_editor_canvas3.createTransformer)((value) =>
 });
 function simpleTransform(props) {
   const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
-    const value = (0, import_editor_props12.isTransformable)(settingValue) ? settingValue.value : settingValue;
+    const value = (0, import_editor_props11.isTransformable)(settingValue) ? settingValue.value : settingValue;
     return [settingKey, value];
   });
   return Object.fromEntries(transformed);