@elementor/editor-editing-panel 1.41.0 → 1.43.0

package/dist/index.mjs

@@ -8,16 +8,15 @@ var { registerControlReplacement, getControlReplacements } = createControlReplac
 // src/components/css-classes/css-class-selector.tsx
 import * as React8 from "react";
 import { useRef, useState as useState4 } from "react";
-import { getElementSetting as getElementSetting2, updateElementSettings as updateElementSettings2, useElementSetting } from "@elementor/editor-elements";
-import { classesPropTypeUtil as classesPropTypeUtil2 } from "@elementor/editor-props";
+import { useElementSetting } from "@elementor/editor-elements";
 import {
   isElementsStylesProvider as isElementsStylesProvider2,
   stylesRepository as stylesRepository4,
-  useGetStylesRepositoryCreateAction,
   useProviders,
+  useUserStylesCapability as useUserStylesCapability4,
   validateStyleLabel as validateStyleLabel2
 } from "@elementor/editor-styles-repository";
-import { WarningInfotip } from "@elementor/editor-ui";
+import { InfoAlert, WarningInfotip } from "@elementor/editor-ui";
 import { ColorSwatchIcon, MapPinIcon } from "@elementor/icons";
 import { createLocation } from "@elementor/locations";
 import { Box as Box2, Chip as Chip3, FormLabel, Link, Stack as Stack3, Typography as Typography3 } from "@elementor/ui";
@@ -441,7 +440,7 @@ var StyledGroupItems = styled("ul")`
 // src/components/css-classes/css-class-item.tsx
 import * as React7 from "react";
 import { useState as useState3 } from "react";
-import { stylesRepository as stylesRepository3, validateStyleLabel } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository3, useUserStylesCapability as useUserStylesCapability3, validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
@@ -507,12 +506,20 @@ import { useCallback, useMemo as useMemo2 } from "react";
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import { getElementLabel, getElementSetting, updateElementSettings } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
+import { useGetStylesRepositoryCreateAction } from "@elementor/editor-styles-repository";
 import { isExperimentActive, undoable } from "@elementor/editor-v1-adapters";
 import { __ } from "@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 = isExperimentActive("e_v_3_30");
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
   const applyClass = useApply();
   const unapplyClass = useUnapply();
   const undoableApply = useMemo2(() => {
@@ -547,7 +554,7 @@ function useApplyClass() {
 function useUnapplyClass() {
   const { id: activeId, setId: setActiveId } = useStyle();
   const { element } = useElement();
-  const isVersion330Active = isExperimentActive("e_v_3_30");
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
   const applyClass = useApply();
   const unapplyClass = useUnapply();
   const undoableUnapply = useMemo2(() => {
@@ -579,10 +586,58 @@ function useUnapplyClass() {
   );
   return isVersion330Active ? undoableUnapply : unapplyWithoutHistory;
 }
+function useCreateAndApplyClass() {
+  const { id: activeId, setId: setActiveId } = useStyle();
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
+  const [provider, createAction] = useGetStylesRepositoryCreateAction() ?? [null, null];
+  const deleteAction = provider?.actions.delete;
+  const applyClass = useApply();
+  const unapplyClass = useUnapply();
+  const undoableCreateAndApply = useMemo2(() => {
+    if (!provider || !createAction) {
+      return;
+    }
+    return 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: __("Class", "elementor"),
+        subtitle: ({ classLabel }) => {
+          return __(`%s created`, "elementor").replace("%s", classLabel);
+        }
+      }
+    );
+  }, [activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClass]);
+  const createAndApplyWithoutHistory = 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 useCallback(
     (classIDToApply) => {
       const appliedClasses = getAppliedClasses();
@@ -601,7 +656,7 @@ function useApply() {
 function useUnapply() {
   const { element } = useElement();
   const { id: activeId, setId: setActiveId } = useStyle();
-  const { setClasses, getAppliedClasses } = useSetClasses();
+  const { setClasses, getAppliedClasses } = useClasses();
   return useCallback(
     (classIDToUnapply) => {
       const appliedClasses = getAppliedClasses();
@@ -619,10 +674,10 @@ function useUnapply() {
     [activeId, element.id, getAppliedClasses, setActiveId, setClasses]
   );
 }
-function useSetClasses() {
+function useClasses() {
   const { element } = useElement();
   const currentClassesProp = useClassesProp();
-  const isVersion330Active = isExperimentActive("e_v_3_30");
+  const isVersion330Active = isExperimentActive(EXPERIMENTAL_FEATURES.V_3_30);
   return useMemo2(() => {
     const setClasses = (ids) => {
       updateElementSettings({
@@ -635,10 +690,7 @@ function useSetClasses() {
       }
     };
     const getAppliedClasses = () => getElementSetting(element.id, currentClassesProp)?.value || [];
-    return {
-      setClasses,
-      getAppliedClasses
-    };
+    return { setClasses, getAppliedClasses };
   }, [currentClassesProp, element.id, isVersion330Active]);
 }
 
@@ -722,10 +774,10 @@ function StateMenuItem({ state, closeMenu, ...props }) {
   const { state: activeState } = meta;
   const { userCan } = useUserStylesCapability2();
   const modifiedStates = useModifiedStates(styleId);
-  const isUpdateAllowed = userCan(provider ?? "").updateProps;
+  const isUpdateAllowed = !state || userCan(provider ?? "").updateProps;
   const indicatorVariant = !provider || 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(
@@ -747,7 +799,7 @@ function StateMenuItem({ state, closeMenu, ...props }) {
       MenuItemInfotip,
       {
         showInfoTip: disabled,
-        content: __2("With your role as an editor, you can only use existing states.", "elementor")
+        content: __2("With your current role, you can only use existing states.", "elementor")
       },
       /* @__PURE__ */ React6.createElement(Stack, { gap: 0.75, direction: "row", alignItems: "center" }, isStyled && /* @__PURE__ */ React6.createElement(StyleIndicator, { "aria-label": __2("Has style", "elementor"), variant: indicatorVariant }), state ?? "normal")
     )
@@ -789,7 +841,7 @@ function RenameClassMenuItem({ closeMenu }) {
       {
         showInfoTip: !isAllowed,
         content: __2(
-          "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"
         )
       },
@@ -807,6 +859,7 @@ function CssClassItem(props) {
   const popupState = usePopupState({ variant: "popover" });
   const [chipRef, setChipRef] = useState3(null);
   const { onDelete, ...chipGroupProps } = chipProps;
+  const { userCan } = useUserStylesCapability3();
   const {
     ref,
     isEditing,
@@ -821,7 +874,7 @@ function CssClassItem(props) {
   });
   const color = error ? "error" : colorProp;
   const providerActions = provider ? stylesRepository3.getProviderByKey(provider)?.actions : null;
-  const allowRename = Boolean(providerActions?.update);
+  const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
     UnstableChipGroup,
@@ -908,15 +961,16 @@ var EMPTY_OPTION = {
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
 function CssClassSelector() {
   const options12 = useOptions();
-  const { value: appliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
   const { id: activeId, setId: setActiveId } = useStyle();
   const autocompleteRef = useRef(null);
   const [renameError, setRenameError] = useState4(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 } = useUserStylesCapability4();
+  const canEdit = active.provider ? userCan(active.provider).updateProps : true;
   return /* @__PURE__ */ React8.createElement(Stack3, { p: 2 }, /* @__PURE__ */ React8.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React8.createElement(FormLabel, { htmlFor: ID, size: "small" }, __4("Classes", "elementor")), /* @__PURE__ */ React8.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React8.createElement(
     WarningInfotip,
     {
@@ -934,7 +988,7 @@ function CssClassSelector() {
         size: "tiny",
         placeholder: showPlaceholder ? __4("Type class name", "elementor") : void 0,
         options: options12,
-        selected: applied,
+        selected: appliedOptions,
         entityName,
         onSelect: handleSelect,
         onCreate: create ?? void 0,
@@ -971,6 +1025,15 @@ function CssClassSelector() {
         })
       }
     )
+  ), !canEdit && /* @__PURE__ */ React8.createElement(
+    InfoAlert,
+    {
+      content: __4(
+        "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(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React8.createElement(
@@ -1018,18 +1081,13 @@ function useOptions() {
     });
   });
 }
-function useCreateAction({
-  pushAppliedId,
-  setActiveId
-}) {
-  const [provider, createAction] = 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)) {
@@ -1049,36 +1107,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(
+function useAppliedOptions(options12) {
+  const { element } = useElement();
+  const currentClassesProp = useClassesProp();
+  const appliedIds = useElementSetting(element.id, currentClassesProp)?.value || [];
+  const appliedOptions = options12.filter((option) => option.value && appliedIds.includes(option.value));
+  const hasElementsProviderStyleApplied = appliedOptions.some(
     (option) => option.provider && isElementsStylesProvider2(option.provider)
   );
   if (!hasElementsProviderStyleApplied) {
-    applied.unshift(EMPTY_OPTION);
+    appliedOptions.unshift(EMPTY_OPTION);
   }
-  return applied;
-}
-function useAppliedClassesIds() {
-  const { element } = useElement();
-  const currentClassesProp = useClassesProp();
-  const value = useElementSetting(element.id, currentClassesProp)?.value || [];
-  const setValue = (ids) => {
-    updateElementSettings2({
-      id: element.id,
-      props: {
-        [currentClassesProp]: classesPropTypeUtil2.create(ids)
-      }
-    });
-  };
-  const pushValue = (id) => {
-    const ids = getElementSetting2(element.id, currentClassesProp)?.value || [];
-    setValue([...ids, id]);
-  };
-  return {
-    value,
-    pushValue
-  };
+  return appliedOptions;
 }
 function useHandleSelect() {
   const apply = useApplyClass();
@@ -1179,7 +1219,7 @@ function EditorPanelErrorFallback() {
 
 // src/components/editing-panel-tabs.tsx
 import * as React79 from "react";
-import { Fragment as Fragment9 } from "react";
+import { Fragment as Fragment10 } from "react";
 import { isExperimentActive as isExperimentActive11 } from "@elementor/editor-v1-adapters";
 import { Divider as Divider6, Stack as Stack18, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
@@ -1252,13 +1292,6 @@ var useDefaultPanelSettings = () => {
 import { useState as useState6 } from "react";
 import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { getSessionStorageItem, setSessionStorageItem } from "@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 = isExperimentActive2(EXPERIMENTAL_FEATURES.V_3_30);
@@ -1344,7 +1377,7 @@ var getGridLayout = (layout) => ({
 // src/controls-registry/settings-field.tsx
 import * as React15 from "react";
 import { PropKeyProvider, PropProvider } from "@elementor/editor-controls";
-import { updateElementSettings as updateElementSettings3, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
+import { updateElementSettings as updateElementSettings2, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
 
 // src/controls-registry/create-top-level-object-type.ts
 var createTopLevelOjectType = ({ schema }) => {
@@ -1366,7 +1399,7 @@ var SettingsField = ({ bind, children }) => {
   const value = { [bind]: settingsValue };
   const propType = createTopLevelOjectType({ schema: elementType.propsSchema });
   const setValue = (newValue) => {
-    updateElementSettings3({
+    updateElementSettings2({
       id: element.id,
       props: { ...newValue }
     });
@@ -1473,7 +1506,7 @@ import { __ as __52 } from "@wordpress/i18n";
 import * as React19 from "react";
 import { createContext as createContext7, useContext as useContext7 } from "react";
 import { getWidgetsCache, useElementSetting as useElementSetting3 } from "@elementor/editor-elements";
-import { classesPropTypeUtil as classesPropTypeUtil3 } from "@elementor/editor-props";
+import { classesPropTypeUtil as classesPropTypeUtil2 } from "@elementor/editor-props";
 import { getBreakpointsTree } from "@elementor/editor-responsive";
 import { getStylesSchema } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository5 } from "@elementor/editor-styles-repository";
@@ -1741,7 +1774,7 @@ var useAppliedStyles = () => {
   const baseStyles = useBaseStyles();
   useStylesRerender();
   const classesProp = useElementSetting3(element.id, currentClassesProp);
-  const appliedStyles = classesPropTypeUtil3.extract(classesProp) ?? [];
+  const appliedStyles = classesPropTypeUtil2.extract(classesProp) ?? [];
   return stylesRepository5.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
 var useBaseStyles = () => {
@@ -1758,7 +1791,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];
@@ -1768,7 +1801,7 @@ function useFirstAppliedClass(appliedClassesIds) {
   const stylesDefs = getElementStyles(element.id) ?? {};
   return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
 }
-function useAppliedClassesIds2(classProp) {
+function useAppliedClassesIds(classProp) {
   const { element } = useElement();
   return useElementSetting4(element.id, classProp);
 }
@@ -1932,7 +1965,7 @@ import { useBoundProp } from "@elementor/editor-controls";
 import { isEmpty as isEmpty2 } from "@elementor/editor-props";
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY3, isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
 import { isExperimentActive as isExperimentActive5 } from "@elementor/editor-v1-adapters";
-import { Tooltip as Tooltip5 } from "@elementor/ui";
+import { Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
 
 // src/styles-inheritance/consts.ts
@@ -1949,13 +1982,25 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
   "image",
   "background-overlay"
 ]);
-var isUsingIndicatorPopover = () => isExperimentActive4("e_indications_popover");
+var isUsingIndicatorPopover = () => isExperimentActive4("e_v_3_30");
 
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 import * as React25 from "react";
 import { useMemo as useMemo4, useState as useState8 } from "react";
 import { createPropsResolver } from "@elementor/editor-canvas";
-import { Box as Box6, Card, CardContent, CloseButton, IconButton as IconButton3, Infotip, Stack as Stack7, Typography as Typography6 } from "@elementor/ui";
+import {
+  Backdrop,
+  Box as Box6,
+  Card,
+  CardContent,
+  ClickAwayListener,
+  CloseButton,
+  IconButton as IconButton3,
+  Infotip,
+  Stack as Stack7,
+  Tooltip as Tooltip5,
+  Typography as Typography6
+} from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
 
 // src/components/section-content.tsx
@@ -2031,16 +2076,18 @@ import { InfoCircleIcon } from "@elementor/icons";
 import { Chip as Chip4, Tooltip as Tooltip4 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
-var LabelChip = ({ displayLabel, provider }) => {
+var LabelChip = ({ displayLabel, provider, chipColor }) => {
+  const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY;
+  const chipIcon = isBaseStyle ? /* @__PURE__ */ React22.createElement(Tooltip4, { title: __6("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(InfoCircleIcon, { fontSize: SIZE4 })) : void 0;
   return /* @__PURE__ */ React22.createElement(
     Chip4,
     {
       label: displayLabel,
       size: SIZE4,
-      color: "global",
+      color: chipColor,
       variant: "standard",
       state: "enabled",
-      icon: provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ? /* @__PURE__ */ React22.createElement(Tooltip4, { title: __6("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React22.createElement(InfoCircleIcon, { fontSize: SIZE4 })) : void 0,
+      icon: chipIcon,
       sx: (theme) => ({
         lineHeight: 1,
         flexWrap: "nowrap",
@@ -2118,7 +2165,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) => {
@@ -2140,6 +2188,16 @@ var getTransformedValue = async (item, bind, resolve) => {
     return "";
   }
 };
+var getChipColor = (item) => {
+  const { provider = "", style } = item;
+  if (provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY2) {
+    return "default";
+  }
+  if (style?.label === "local") {
+    return "accent";
+  }
+  return "global";
+};
 
 // src/styles-inheritance/styles-inheritance-transformers-registry.tsx
 import { createTransformersRegistry } from "@elementor/editor-canvas";
@@ -2148,8 +2206,9 @@ var stylesInheritanceTransformersRegistry = createTransformersRegistry();
 // src/styles-inheritance/styles-inheritance-infotip.tsx
 var SIZE5 = "tiny";
 var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children }) => {
-  const [open, setOpen] = useState8(false);
-  const { isSiteRtl } = useDirection();
+  const [showInfotip, setShowInfotip] = useState8(false);
+  const toggleInfotip = () => setShowInfotip((prev) => !prev);
+  const closeInfotip = () => setShowInfotip(false);
   const key = path.join(".");
   const sectionContentRef = useSectionContentRef();
   const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
@@ -2160,12 +2219,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(ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React25.createElement(
     Card,
     {
       elevation: 0,
@@ -2196,54 +2250,90 @@ var StyleIndicatorInfotip = ({ inheritanceChain, propType, path, label, children
           onClick: closeInfotip
         }
       )),
-      /* @__PURE__ */ React25.createElement(Stack7, { gap: 1.5, sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" }, role: "list" }, items3.map((item, index) => {
-        return /* @__PURE__ */ React25.createElement(
-          Box6,
-          {
-            key: item.id,
-            display: "flex",
-            gap: 0.5,
-            role: "listitem",
-            "aria-label": __8("Inheritance item: %s", "elementor").replace(
-              "%s",
-              item.displayLabel
-            )
-          },
-          /* @__PURE__ */ React25.createElement(Box6, { 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(
+        Stack7,
+        {
+          gap: 1.5,
+          sx: { pl: 2, pr: 1, pb: 2, overflowX: "hidden", overflowY: "auto" },
+          role: "list"
+        },
+        items3.map((item, index) => {
+          return /* @__PURE__ */ React25.createElement(
+            Box6,
+            {
+              key: item.id,
+              display: "flex",
+              gap: 0.5,
+              role: "listitem",
+              "aria-label": __8("Inheritance item: %s", "elementor").replace(
+                "%s",
+                item.displayLabel
+              )
+            },
+            /* @__PURE__ */ React25.createElement(Box6, { 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(
-    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(IconButton3, { 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(
+      Backdrop,
+      {
+        open: showInfotip,
+        onClick: onClose,
+        sx: {
+          backgroundColor: "transparent",
+          zIndex: (theme) => theme.zIndex.modal - 1
+        }
+      }
+    ), /* @__PURE__ */ React25.createElement(
+      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(IconButton3, { onClick: toggleOpen, "aria-label": label, sx: { my: "-1px" } }, children)
-  );
-};
+      children
+    ));
+  }
+  return /* @__PURE__ */ React25.createElement(Tooltip5, { title: __8("Style origin", "elementor"), placement: "top" }, children);
+}
 
 // src/styles-inheritance/styles-inheritance-indicator.tsx
 var StylesInheritanceIndicator = () => {
@@ -2272,7 +2362,7 @@ var StylesInheritanceIndicator = () => {
   const label = getLabel({ isFinalValue, hasValue });
   const variantType = getVariant({ isFinalValue, hasValue, currentStyleProvider });
   if (!isUsingIndicatorPopover()) {
-    return /* @__PURE__ */ React26.createElement(Tooltip5, { title: __9("Style origin", "elementor"), placement: "top" }, /* @__PURE__ */ React26.createElement(StyleIndicator, { variant: variantType, "aria-label": label }));
+    return /* @__PURE__ */ React26.createElement(Tooltip6, { title: __9("Style origin", "elementor"), placement: "top" }, /* @__PURE__ */ React26.createElement(StyleIndicator, { variant: variantType, "aria-label": label }));
   }
   return /* @__PURE__ */ React26.createElement(
     StyleIndicatorInfotip,
@@ -3383,8 +3473,8 @@ var positionOptions2 = [
   { label: __31("None", "elementor"), value: "none" },
   { label: __31("Scale down", "elementor"), value: "scale-down" }
 ];
-var ObjectFitField = ({ onChange }) => {
-  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, __31("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(SelectControl4, { options: positionOptions2, onChange }))));
+var ObjectFitField = () => {
+  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "object-fit" }, /* @__PURE__ */ React57.createElement(Grid13, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, __31("Object fit", "elementor"))), /* @__PURE__ */ React57.createElement(Grid13, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React57.createElement(SelectControl4, { options: positionOptions2 }))));
 };
 
 // src/components/style-sections/size-section/object-position-field.tsx
@@ -3403,8 +3493,8 @@ var positionOptions3 = [
   { label: __32("Bottom left", "elementor"), value: "bottom left" },
   { label: __32("Bottom right", "elementor"), value: "bottom right" }
 ];
-var ObjectPositionField = ({ onChange }) => {
-  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, __32("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(SelectControl5, { options: positionOptions3, onChange }))));
+var ObjectPositionField = () => {
+  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "object-position" }, /* @__PURE__ */ React58.createElement(Grid14, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React58.createElement(ControlLabel, null, __32("Object position", "elementor"))), /* @__PURE__ */ React58.createElement(Grid14, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React58.createElement(SelectControl5, { options: positionOptions3 }))));
 };
 
 // src/components/style-sections/size-section/overflow-field.tsx
@@ -3439,16 +3529,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 = isExperimentActive8("e_v_3_30");
   return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "width", label: __34("Width", "elementor"), extendedValues: ["auto"] })), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "height", label: __34("Height", "elementor"), extendedValues: ["auto"] }))), /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(
     SizeField,
@@ -3464,7 +3546,7 @@ var SizeSection = () => {
       label: __34("Min height", "elementor"),
       extendedValues: ["auto"]
     }
-  ))), /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: __34("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: __34("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(Stack16, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(Stack16, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(AspectRatioControl, { label: __34("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, { onChange: onFitChange }), isNotFill && /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
+  ))), /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-width", label: __34("Max width", "elementor") })), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(SizeField, { bind: "max-height", label: __34("Max height", "elementor") }))), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(Stack16, null, /* @__PURE__ */ React60.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React60.createElement(CollapsibleContent, null, /* @__PURE__ */ React60.createElement(Stack16, { gap: 2 }, /* @__PURE__ */ React60.createElement(StylesField, { bind: "aspect-ratio" }, /* @__PURE__ */ React60.createElement(AspectRatioControl, { label: __34("Aspect Ratio", "elementor") })), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(ObjectFitField, null), isNotFill && /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ObjectPositionField, null)))));
 };
 var SizeField = ({ label, bind, extendedValues }) => {
   return /* @__PURE__ */ React60.createElement(StylesField, { bind }, /* @__PURE__ */ React60.createElement(Grid16, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, label)), /* @__PURE__ */ React60.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React60.createElement(SizeControl5, { extendedValues }))));
@@ -3957,7 +4039,7 @@ var EditingPanelTabs = () => {
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React79.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React79.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React79.createElement(Fragment10, { key: element.id }, /* @__PURE__ */ React79.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -4188,7 +4270,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React83 from "react";
-import { Fragment as Fragment10, useState as useState13 } from "react";
+import { Fragment as Fragment11, useState as useState13 } from "react";
 import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { DatabaseIcon, SearchIcon } from "@elementor/icons";
 import {
@@ -4224,7 +4306,7 @@ var DynamicSelection = ({ onSelect }) => {
     setValue({ name: value, settings: { label } });
     onSelect?.();
   };
-  return /* @__PURE__ */ React83.createElement(Stack20, null, hasNoDynamicTags ? /* @__PURE__ */ React83.createElement(NoDynamicTags, null) : /* @__PURE__ */ React83.createElement(Fragment10, null, /* @__PURE__ */ React83.createElement(Box7, { px: 1.5, pb: 1 }, /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React83.createElement(Stack20, null, hasNoDynamicTags ? /* @__PURE__ */ React83.createElement(NoDynamicTags, null) : /* @__PURE__ */ React83.createElement(Fragment11, null, /* @__PURE__ */ React83.createElement(Box7, { px: 1.5, pb: 1 }, /* @__PURE__ */ React83.createElement(
     TextField2,
     {
       fullWidth: true,
@@ -4236,7 +4318,7 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React83.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React83.createElement(SearchIcon, { fontSize: SIZE7 }))
       }
     }
-  )), /* @__PURE__ */ React83.createElement(Divider7, null), /* @__PURE__ */ React83.createElement(Box7, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React83.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React83.createElement(Fragment10, { key: index }, /* @__PURE__ */ React83.createElement(
+  )), /* @__PURE__ */ React83.createElement(Divider7, null), /* @__PURE__ */ React83.createElement(Box7, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React83.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React83.createElement(Fragment11, { key: index }, /* @__PURE__ */ React83.createElement(
     MenuSubheader2,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }