@elementor/editor-editing-panel 1.41.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");
@@ -1948,7 +1981,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
   "image",
   "background-overlay"
 ]);
-var isUsingIndicatorPopover = () => (0, import_editor_v1_adapters5.isExperimentActive)("e_indications_popover");
+var isUsingIndicatorPopover = () => (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
 
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 var React25 = __toESM(require("react"));
@@ -2017,21 +2050,23 @@ 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 }) => {
+var LabelChip = ({ displayLabel, provider, chipColor }) => {
+  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,
     {
       label: displayLabel,
       size: SIZE4,
-      color: "global",
+      color: chipColor,
       variant: "standard",
       state: "enabled",
-      icon: provider === import_editor_styles_repository7.ELEMENTS_BASE_STYLES_PROVIDER_KEY ? /* @__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,
+      icon: chipIcon,
       sx: (theme) => ({
         lineHeight: 1,
         flexWrap: "nowrap",
@@ -2076,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) => {
@@ -2088,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);
     })();
@@ -2109,7 +2144,8 @@ var normalizeInheritanceItem = async (item, index, bind, resolve) => {
     provider: item.provider || "",
     breakpoint: breakpoint ?? DEFAULT_BREAKPOINT3,
     displayLabel,
-    value: await getTransformedValue(item, bind, resolve)
+    value: await getTransformedValue(item, bind, resolve),
+    chipColor: getChipColor(item)
   };
 };
 var getTransformedValue = async (item, bind, resolve) => {
@@ -2131,6 +2167,16 @@ var getTransformedValue = async (item, bind, resolve) => {
     return "";
   }
 };
+var getChipColor = (item) => {
+  const { provider = "", style } = item;
+  if (provider === import_editor_styles_repository9.ELEMENTS_BASE_STYLES_PROVIDER_KEY) {
+    return "default";
+  }
+  if (style?.label === "local") {
+    return "accent";
+  }
+  return "global";
+};
 
 // src/styles-inheritance/styles-inheritance-transformers-registry.tsx
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -2139,8 +2185,9 @@ var stylesInheritanceTransformersRegistry = (0, import_editor_canvas.createTrans
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 var SIZE5 = "tiny";
 var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children }) => {
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  const { isSiteRtl } = useDirection();
+  const [showInfotip, setShowInfotip] = (0, import_react21.useState)(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
   const key = path.join(".");
   const sectionContentRef = useSectionContentRef();
   const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
@@ -2151,12 +2198,7 @@ var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children
     });
   }, [key, propType]);
   const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
-  const toggleOpen = () => setOpen((prev) => !prev);
-  const closeInfotip = () => {
-    setOpen(false);
-  };
-  const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
-  const infotipContent = /* @__PURE__ */ React25.createElement(
+  const infotipContent = /* @__PURE__ */ React25.createElement(import_ui22.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React25.createElement(
     import_ui22.Card,
     {
       elevation: 0,
@@ -2187,54 +2229,90 @@ var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children
           onClick: closeInfotip
         }
       )),
-      /* @__PURE__ */ React25.createElement(import_ui22.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" }, role: "list" }, items3.map((item, index) => {
-        return /* @__PURE__ */ React25.createElement(
-          import_ui22.Box,
-          {
-            key: item.id,
-            display: "flex",
-            gap: 0.5,
-            role: "listitem",
-            "aria-label": (0, import_i18n8.__)("Inheritance item: %s", "elementor").replace(
-              "%s",
-              item.displayLabel
-            )
-          },
-          /* @__PURE__ */ React25.createElement(import_ui22.Box, { display: "flex", gap: 0.5, sx: { flexWrap: "wrap", width: "100%" } }, /* @__PURE__ */ React25.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ React25.createElement(LabelChip, { displayLabel: item.displayLabel, provider: item.provider }), /* @__PURE__ */ React25.createElement(ValueComponent, { index, value: item.value })),
-          /* @__PURE__ */ React25.createElement(ActionIcons, null)
-        );
-      }))
+      /* @__PURE__ */ React25.createElement(
+        import_ui22.Stack,
+        {
+          gap: 1.5,
+          sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" },
+          role: "list"
+        },
+        items3.map((item, index) => {
+          return /* @__PURE__ */ React25.createElement(
+            import_ui22.Box,
+            {
+              key: item.id,
+              display: "flex",
+              gap: 0.5,
+              role: "listitem",
+              "aria-label": (0, import_i18n8.__)("Inheritance item: %s", "elementor").replace(
+                "%s",
+                item.displayLabel
+              )
+            },
+            /* @__PURE__ */ React25.createElement(import_ui22.Box, { display: "flex", gap: 0.5, sx: { flexWrap: "wrap", width: "100%" } }, /* @__PURE__ */ React25.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ React25.createElement(
+              LabelChip,
+              {
+                displayLabel: item.displayLabel,
+                provider: item.provider,
+                chipColor: item.chipColor
+              }
+            ), /* @__PURE__ */ React25.createElement(ValueComponent, { index, value: item.value })),
+            /* @__PURE__ */ React25.createElement(ActionIcons, null)
+          );
+        })
+      )
     )
-  );
-  return /* @__PURE__ */ React25.createElement(
-    import_ui22.Infotip,
-    {
-      placement: "top",
-      content: infotipContent,
-      open,
-      onClose: closeInfotip,
-      disableHoverListener: true,
-      componentsProps: {
-        tooltip: {
-          sx: {
-            mx: 2
+  ));
+  return /* @__PURE__ */ React25.createElement(TooltipOrInfotip, { showInfotip, onClose: closeInfotip, infotipContent }, /* @__PURE__ */ React25.createElement(import_ui22.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" } }, children));
+};
+function TooltipOrInfotip({
+  children,
+  showInfotip,
+  onClose,
+  infotipContent
+}) {
+  const { isSiteRtl } = useDirection();
+  const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
+  if (showInfotip) {
+    return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
+      import_ui22.Backdrop,
+      {
+        open: showInfotip,
+        onClick: onClose,
+        sx: {
+          backgroundColor: "transparent",
+          zIndex: (theme) => theme.zIndex.modal - 1
+        }
+      }
+    ), /* @__PURE__ */ React25.createElement(
+      import_ui22.Infotip,
+      {
+        placement: "top",
+        content: infotipContent,
+        open: showInfotip,
+        onClose,
+        disableHoverListener: true,
+        componentsProps: {
+          tooltip: {
+            sx: { mx: 2 }
+          }
+        },
+        slotProps: {
+          popper: {
+            modifiers: [
+              {
+                name: "offset",
+                options: { offset: [forceInfotipAlignLeft, 0] }
+              }
+            ]
           }
         }
       },
-      slotProps: {
-        popper: {
-          modifiers: [
-            {
-              name: "offset",
-              options: { offset: [forceInfotipAlignLeft, 0] }
-            }
-          ]
-        }
-      }
-    },
-    /* @__PURE__ */ React25.createElement(import_ui22.IconButton, { onClick: toggleOpen, "aria-label": label, sx: { my: "-1px" } }, children)
-  );
-};
+      children
+    ));
+  }
+  return /* @__PURE__ */ React25.createElement(import_ui22.Tooltip, { title: (0, import_i18n8.__)("Style origin", "elementor"), placement: "top" }, children);
+}
 
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 var StylesInheritanceIndicator = () => {
@@ -2254,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;
@@ -2291,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";
@@ -2421,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");
@@ -2458,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
     }
   ));
 };
@@ -2501,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");
@@ -2544,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
     }
   ));
 };
@@ -2986,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");
@@ -3032,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;
@@ -3040,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(
@@ -3340,8 +3418,8 @@ var positionOptions2 = [
   { label: (0, import_i18n31.__)("None", "elementor"), value: "none" },
   { label: (0, import_i18n31.__)("Scale down", "elementor"), value: "scale-down" }
 ];
-var ObjectFitField = ({ onChange }) => {
-  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n31.__)("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(import_editor_controls29.SelectControl, { options: positionOptions2, onChange }))));
+var ObjectFitField = () => {
+  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, (0, import_i18n31.__)("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(import_ui47.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(import_editor_controls29.SelectControl, { options: positionOptions2 }))));
 };
 
 // src/components/style-sections/size-section/object-position-field.tsx
@@ -3360,8 +3438,8 @@ var positionOptions3 = [
   { label: (0, import_i18n32.__)("Bottom left", "elementor"), value: "bottom left" },
   { label: (0, import_i18n32.__)("Bottom right", "elementor"), value: "bottom right" }
 ];
-var ObjectPositionField = ({ onChange }) => {
-  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, (0, import_i18n32.__)("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(import_editor_controls30.SelectControl, { options: positionOptions3, onChange }))));
+var ObjectPositionField = () => {
+  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, (0, import_i18n32.__)("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(import_ui48.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(import_editor_controls30.SelectControl, { options: positionOptions3 }))));
 };
 
 // src/components/style-sections/size-section/overflow-field.tsx
@@ -3396,16 +3474,8 @@ var OverflowField = () => {
 
 // src/components/style-sections/size-section/size-section.tsx
 var SizeSection = () => {
-  const [fitValue, setFitValue] = useStylesField("object-fit");
+  const [fitValue] = useStylesField("object-fit");
   const isNotFill = fitValue && fitValue?.value !== "fill";
-  const onFitChange = (newFit, previousValue) => {
-    if (newFit && newFit !== previousValue) {
-      setFitValue({
-        value: newFit,
-        $$type: "string"
-      });
-    }
-  };
   const isVersion330Active = (0, import_editor_v1_adapters10.isExperimentActive)("e_v_3_30");
   return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "width", label: (0, import_i18n34.__)("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "height", label: (0, import_i18n34.__)("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(
     SizeField,
@@ -3421,7 +3491,7 @@ var SizeSection = () => {
       label: (0, import_i18n34.__)("Min height", "elementor"),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: (0, import_i18n34.__)("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: (0, import_i18n34.__)("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(import_ui50.Stack, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(import_ui50.Stack, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(import_editor_controls32.AspectRatioControl, { label: (0, import_i18n34.__)("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, { onChange: onFitChange }), isNotFill && /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
+  ))), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: (0, import_i18n34.__)("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: (0, import_i18n34.__)("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(import_ui50.Stack, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(import_ui50.Stack, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(import_editor_controls32.AspectRatioControl, { label: (0, import_i18n34.__)("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, null), isNotFill && /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
 };
 var SizeField = ({ label, bind, extendedValues }) => {
   return /* @__PURE__ */ React60.createElement(StylesField, { bind }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, label)), /* @__PURE__ */ React60.createElement(import_ui50.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(import_editor_controls32.SizeControl, { extendedValues }))));
@@ -3900,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");
@@ -4050,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;
@@ -4059,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(),
@@ -4314,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");
@@ -4332,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);