@elementor/editor-editing-panel 1.47.0 → 1.50.0

package/dist/index.mjs

@@ -148,6 +148,12 @@ var getStylesProviderThemeColor = (provider) => {
   }
   return getStyleProviderColors(provider).getThemeColor;
 };
+function getTempStylesProviderThemeColor(provider) {
+  if (isElementsStylesProvider(provider)) {
+    return (theme) => theme.palette.primary.main;
+  }
+  return getStylesProviderThemeColor(provider);
+}
 
 // src/components/creatable-autocomplete/creatable-autocomplete.tsx
 import * as React4 from "react";
@@ -492,6 +498,7 @@ import {
   bindTrigger,
   Chip as Chip2,
   Stack as Stack2,
+  ThemeProvider,
   Typography as Typography2,
   UnstableChipGroup,
   usePopupState
@@ -833,7 +840,7 @@ function StateMenuItem({ state, closeMenu, ...props }) {
         StyleIndicator,
         {
           "aria-label": __2("Has style", "elementor"),
-          getColor: getStylesProviderThemeColor(provider ?? "")
+          getColor: getTempStylesProviderThemeColor(provider ?? "")
         }
       ), state ?? "normal")
     )
@@ -910,7 +917,7 @@ function CssClassItem(props) {
   const providerActions = provider ? stylesRepository3.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(
+  return /* @__PURE__ */ React7.createElement(ThemeProvider, { palette: "default" }, /* @__PURE__ */ React7.createElement(
     UnstableChipGroup,
     {
       ref: setChipRef,
@@ -988,7 +995,7 @@ var EMPTY_OPTION = {
   label: __4("local", "elementor"),
   value: null,
   fixed: true,
-  color: "accent",
+  color: getTempStylesProviderColorName("accent"),
   icon: /* @__PURE__ */ React8.createElement(MapPinIcon, null),
   provider: null
 };
@@ -1099,13 +1106,19 @@ function useOptions() {
         label: styleDef.label,
         value: styleDef.id,
         fixed: isElements,
-        color: getStylesProviderColorName(provider.getKey()),
+        color: getTempStylesProviderColorName(getStylesProviderColorName(provider.getKey())),
         icon: isElements ? /* @__PURE__ */ React8.createElement(MapPinIcon, null) : null,
         provider: provider.getKey()
       };
     });
   });
 }
+function getTempStylesProviderColorName(color) {
+  if (color === "accent") {
+    return "primary";
+  }
+  return color;
+}
 function useCreateAction() {
   const [provider, createAction] = useCreateAndApplyClass();
   if (!provider || !createAction) {
@@ -1171,11 +1184,11 @@ import * as React86 from "react";
 import { ControlActionsProvider, ControlReplacementsProvider } from "@elementor/editor-controls";
 import { useSelectedElement } from "@elementor/editor-elements";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
-import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
+import { ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { AtomIcon } from "@elementor/icons";
 import { SessionStorageProvider as SessionStorageProvider3 } from "@elementor/session";
 import { ErrorBoundary } from "@elementor/ui";
-import { __ as __59 } from "@wordpress/i18n";
+import { __ as __62 } from "@wordpress/i18n";
 
 // src/controls-actions.ts
 import { createMenu } from "@elementor/menus";
@@ -1249,10 +1262,10 @@ function EditorPanelErrorFallback() {
 
 // src/components/editing-panel-tabs.tsx
 import * as React85 from "react";
-import { Fragment as Fragment10 } from "react";
-import { isExperimentActive as isExperimentActive16 } from "@elementor/editor-v1-adapters";
+import { Fragment as Fragment9 } from "react";
+import { isExperimentActive as isExperimentActive17 } from "@elementor/editor-v1-adapters";
 import { Divider as Divider6, Stack as Stack15, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
-import { __ as __58 } from "@wordpress/i18n";
+import { __ as __61 } from "@wordpress/i18n";
 
 // src/contexts/scroll-context.tsx
 import * as React12 from "react";
@@ -1434,8 +1447,9 @@ import {
   getElementLabel as getElementLabel2,
   getElementSetting as getElementSetting2,
   updateElementSettings as updateElementSettings2,
-  useElementSetting as useElementSetting2
+  useElementSettings
 } from "@elementor/editor-elements";
+import { shouldApplyEffect } from "@elementor/editor-props";
 import { isExperimentActive as isExperimentActive3, undoable as undoable2 } from "@elementor/editor-v1-adapters";
 import { __ as __5 } from "@wordpress/i18n";
 
@@ -1455,8 +1469,8 @@ var createTopLevelOjectType = ({ schema }) => {
 // src/controls-registry/settings-field.tsx
 var SettingsField = ({ bind, children, propDisplayName }) => {
   const { element, elementType } = useElement();
-  const settingsValue = useElementSetting2(element.id, bind);
-  const value = { [bind]: settingsValue };
+  const elementSettingValues = useElementSettings(element.id, Object.keys(elementType.propsSchema));
+  const value = { [bind]: elementSettingValues?.[bind] };
   const propType = createTopLevelOjectType({ schema: elementType.propsSchema });
   const undoableUpdateElementProp = useUndoableUpdateElementProp({
     propKey: bind,
@@ -1471,8 +1485,19 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
       updateElementSettings2({ id: element.id, props: newValue });
     }
   };
-  return /* @__PURE__ */ React15.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React15.createElement(PropKeyProvider, { bind }, children));
+  const isDisabled = (prop) => getDisableState(prop, elementSettingValues);
+  return /* @__PURE__ */ React15.createElement(PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React15.createElement(PropKeyProvider, { bind }, children));
 };
+function getDisableState(propType, elementValues) {
+  const disablingDependencies = propType.dependencies?.filter(({ effect }) => effect === "disable") || [];
+  if (!disablingDependencies.length) {
+    return false;
+  }
+  if (disablingDependencies.length > 1) {
+    throw new Error("Multiple disabling dependencies are not supported.");
+  }
+  return shouldApplyEffect(disablingDependencies[0], elementValues);
+}
 function useUndoableUpdateElementProp({
   propKey,
   elementId,
@@ -1669,12 +1694,12 @@ import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
 import { Divider as Divider5, Stack as Stack14 } from "@elementor/ui";
-import { __ as __57 } from "@wordpress/i18n";
+import { __ as __60 } from "@wordpress/i18n";
 
 // src/contexts/styles-inheritance-context.tsx
 import * as React20 from "react";
 import { createContext as createContext8, useContext as useContext8 } from "react";
-import { getWidgetsCache, useElementSetting as useElementSetting3 } from "@elementor/editor-elements";
+import { getWidgetsCache, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil as classesPropTypeUtil2 } from "@elementor/editor-props";
 import { getBreakpointsTree } from "@elementor/editor-responsive";
 import { getStylesSchema } from "@elementor/editor-styles";
@@ -1950,7 +1975,7 @@ var useAppliedStyles = () => {
   const currentClassesProp = useClassesProp();
   const baseStyles = useBaseStyles();
   useStylesRerender();
-  const classesProp = useElementSetting3(element.id, currentClassesProp);
+  const classesProp = useElementSetting2(element.id, currentClassesProp);
   const appliedStyles = classesPropTypeUtil2.extract(classesProp) ?? [];
   return stylesRepository5.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
@@ -1962,7 +1987,7 @@ var useBaseStyles = () => {
 };
 
 // src/hooks/use-active-style-def-id.ts
-import { getElementStyles, useElementSetting as useElementSetting4 } from "@elementor/editor-elements";
+import { getElementStyles, useElementSetting as useElementSetting3 } from "@elementor/editor-elements";
 function useActiveStyleDefId(classProp) {
   const [activeStyledDefId, setActiveStyledDefId] = useStateByElement(
     "active-style-id",
@@ -1980,7 +2005,7 @@ function useFirstAppliedClass(appliedClassesIds) {
 }
 function useAppliedClassesIds(classProp) {
   const { element } = useElement();
-  return useElementSetting4(element.id, classProp);
+  return useElementSetting3(element.id, classProp);
 }
 function useActiveAndAppliedClassId(id, appliedClassesIds) {
   const isClassApplied = !!id && appliedClassesIds.includes(id);
@@ -1996,50 +2021,31 @@ import { __ as __12 } from "@wordpress/i18n";
 import * as React27 from "react";
 import { ControlAdornmentsProvider, PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2 } from "@elementor/editor-controls";
 import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
-import { isExperimentActive as isExperimentActive8 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive9 } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-styles-fields.ts
 import { useMemo as useMemo4 } from "react";
-import {
-  createElementStyle,
-  deleteElementStyle,
-  getElementLabel as getElementLabel3
-} from "@elementor/editor-elements";
+import { createElementStyle, deleteElementStyle, getElementLabel as getElementLabel3 } from "@elementor/editor-elements";
 import { getVariantByMeta } from "@elementor/editor-styles";
+import { isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
 import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
-import { undoable as undoable3 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive6, undoable as undoable3 } from "@elementor/editor-v1-adapters";
 import { __ as __7 } from "@wordpress/i18n";
 function useStylesFields(propNames) {
-  const { element } = useElement();
-  const { id, meta, provider, canEdit } = useStyle();
-  const classesProp = useClassesProp();
-  const undoableUpdateStyle = useUndoableUpdateStyle();
-  const undoableCreateElementStyle = useUndoableCreateElementStyle();
+  const {
+    element: { id: elementId }
+  } = useElement();
+  const { id: styleId, meta, provider, canEdit } = useStyle();
+  const undoableUpdateStyle = useUndoableUpdateStyle({ elementId, meta });
+  const undoableCreateElementStyle = useUndoableCreateElementStyle({ elementId, meta });
   useStylesRerender();
-  const values = getProps({
-    elementId: element.id,
-    styleId: id,
-    provider,
-    meta,
-    propNames
-  });
-  const setValues = (props) => {
-    if (id === null) {
-      undoableCreateElementStyle({
-        elementId: element.id,
-        classesProp,
-        meta,
-        props
-      });
-      return;
+  const values = getProps({ elementId, styleId, provider, meta, propNames });
+  const setValues = (props, { history: { propDisplayName } }) => {
+    if (styleId === null) {
+      undoableCreateElementStyle({ props, propDisplayName });
+    } else {
+      undoableUpdateStyle({ provider, styleId, props, propDisplayName });
     }
-    undoableUpdateStyle({
-      elementId: element.id,
-      styleId: id,
-      provider,
-      meta,
-      props
-    });
   };
   return { values, setValues, canEdit };
 }
@@ -2056,39 +2062,52 @@ function getProps({ styleId, elementId, provider, meta, propNames }) {
     propNames.map((key) => [key, variant?.props[key] ?? null])
   );
 }
-function useUndoableCreateElementStyle() {
+function useUndoableCreateElementStyle({
+  elementId,
+  meta
+}) {
+  const classesProp = useClassesProp();
   return useMemo4(() => {
+    const isVersion331Active = isExperimentActive6(EXPERIMENTAL_FEATURES.V_3_31);
+    const createStyleArgs = { elementId, classesProp, meta, label: ELEMENTS_STYLES_RESERVED_LABEL };
     return undoable3(
       {
-        do: (payload) => {
-          return createElementStyle({
-            ...payload,
-            label: ELEMENTS_STYLES_RESERVED_LABEL
-          });
+        do: ({ props }) => {
+          return createElementStyle({ ...createStyleArgs, props });
         },
-        undo: ({ elementId }, styleId) => {
+        undo: (_, styleId) => {
           deleteElementStyle(elementId, styleId);
         },
-        redo: (payload, styleId) => {
-          return createElementStyle({
-            ...payload,
-            styleId,
-            label: ELEMENTS_STYLES_RESERVED_LABEL
-          });
+        redo: ({ props }, styleId) => {
+          return createElementStyle({ ...createStyleArgs, props, styleId });
         }
       },
       {
-        title: ({ elementId }) => getElementLabel3(elementId),
-        subtitle: __7("Style edited", "elementor")
+        title: () => {
+          if (isVersion331Active) {
+            return localStyleHistoryTitlesV331.title({ elementId });
+          }
+          return historyTitlesV330.title({ elementId });
+        },
+        subtitle: ({ propDisplayName }) => {
+          if (isVersion331Active) {
+            return localStyleHistoryTitlesV331.subtitle({ propDisplayName });
+          }
+          return historyTitlesV330.subtitle;
+        }
       }
     );
-  }, []);
+  }, [classesProp, elementId, meta]);
 }
-function useUndoableUpdateStyle() {
+function useUndoableUpdateStyle({
+  elementId,
+  meta
+}) {
   return useMemo4(() => {
+    const isVersion331Active = isExperimentActive6(EXPERIMENTAL_FEATURES.V_3_31);
     return undoable3(
       {
-        do: ({ elementId, styleId, provider, meta, props }) => {
+        do: ({ provider, styleId, props }) => {
           if (!provider.actions.updateProps) {
             throw new StylesProviderCannotUpdatePropsError({
               context: { providerKey: provider.getKey() }
@@ -2096,26 +2115,37 @@ function useUndoableUpdateStyle() {
           }
           const style = provider.actions.get(styleId, { elementId });
           const prevProps = getCurrentProps(style, meta);
-          provider.actions.updateProps(
-            {
-              id: styleId,
-              meta,
-              props
-            },
-            { elementId }
-          );
+          provider.actions.updateProps({ id: styleId, meta, props }, { elementId });
           return prevProps;
         },
-        undo: ({ elementId, styleId, meta, provider }, prevProps) => {
+        undo: ({ provider, styleId }, prevProps) => {
           provider.actions.updateProps?.({ id: styleId, meta, props: prevProps }, { elementId });
         }
       },
       {
-        title: ({ elementId }) => getElementLabel3(elementId),
-        subtitle: __7("Style edited", "elementor")
+        title: ({ provider }) => {
+          if (isVersion331Active) {
+            const isLocal = isElementsStylesProvider3(provider.getKey());
+            if (isLocal) {
+              return localStyleHistoryTitlesV331.title({ elementId });
+            }
+            return defaultHistoryTitlesV331.title({ provider });
+          }
+          return historyTitlesV330.title({ elementId });
+        },
+        subtitle: ({ provider, styleId, propDisplayName }) => {
+          if (isVersion331Active) {
+            const isLocal = isElementsStylesProvider3(provider.getKey());
+            if (isLocal) {
+              return localStyleHistoryTitlesV331.subtitle({ propDisplayName });
+            }
+            return defaultHistoryTitlesV331.subtitle({ provider, styleId, elementId, propDisplayName });
+          }
+          return historyTitlesV330.subtitle;
+        }
       }
     );
-  }, []);
+  }, [elementId, meta]);
 }
 function getCurrentProps(style, meta) {
   if (!style) {
@@ -2125,15 +2155,40 @@ function getCurrentProps(style, meta) {
   const props = variant?.props ?? {};
   return structuredClone(props);
 }
+var historyTitlesV330 = {
+  title: ({ elementId }) => getElementLabel3(elementId),
+  subtitle: __7("Style edited", "elementor")
+};
+var defaultHistoryTitlesV331 = {
+  title: ({ provider }) => {
+    const providerLabel = provider.labels?.singular;
+    return providerLabel ? capitalize(providerLabel) : __7("Style", "elementor");
+  },
+  subtitle: ({ provider, styleId, elementId, propDisplayName }) => {
+    const styleLabel = provider.actions.get(styleId, { elementId })?.label;
+    if (!styleLabel) {
+      throw new Error(`Style ${styleId} not found`);
+    }
+    return __7(`%s$1 %s$2 edited`, "elementor").replace("%s$1", styleLabel).replace("%s$2", propDisplayName);
+  }
+};
+var localStyleHistoryTitlesV331 = {
+  title: ({ elementId }) => getElementLabel3(elementId),
+  subtitle: ({ propDisplayName }) => (
+    // translators: %s is the name of the style property being edited
+    __7(`%s edited`, "elementor").replace("%s", propDisplayName)
+  )
+};
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 
 // src/hooks/use-styles-field.ts
-function useStylesField(propName) {
+function useStylesField(propName, meta) {
   const { values, setValues, canEdit } = useStylesFields([propName]);
   const value = values?.[propName] ?? null;
   const setValue = (newValue) => {
-    setValues({
-      [propName]: newValue
-    });
+    setValues({ [propName]: newValue }, meta);
   };
   return { value, setValue, canEdit };
 }
@@ -2143,12 +2198,12 @@ import * as React26 from "react";
 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_KEY4 } from "@elementor/editor-styles-repository";
-import { isExperimentActive as isExperimentActive7 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive8 } from "@elementor/editor-v1-adapters";
 import { Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 
 // src/styles-inheritance/consts.ts
-import { isExperimentActive as isExperimentActive6 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive7 } from "@elementor/editor-v1-adapters";
 var excludePropTypeTransformers = /* @__PURE__ */ new Set([
   "background-color-overlay",
   "background-image-overlay",
@@ -2161,7 +2216,7 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
   "image",
   "background-overlay"
 ]);
-var isUsingIndicatorPopover = () => isExperimentActive6("e_v_3_30");
+var isUsingIndicatorPopover = () => isExperimentActive7("e_v_3_30");
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 import * as React25 from "react";
@@ -2366,7 +2421,7 @@ var StylesInheritanceInfotip = ({ inheritanceChain, propType, path, label, child
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
   const key = path.join(".");
-  const sectionWidth = useSectionWidth() + SECTION_PADDING_INLINE;
+  const sectionWidth = useSectionWidth();
   const resolve = useMemo5(() => {
     return createPropsResolver({
       transformers: stylesInheritanceTransformersRegistry,
@@ -2479,7 +2534,7 @@ function TooltipOrInfotip({
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
 var StylesInheritanceIndicator = () => {
   const { path, propType } = useBoundProp();
-  const isUsingNestedProps = isExperimentActive7(EXPERIMENTAL_FEATURES.V_3_30);
+  const isUsingNestedProps = isExperimentActive8(EXPERIMENTAL_FEATURES.V_3_30);
   const finalPath = isUsingNestedProps ? path : path.slice(0, 1);
   const inheritanceChain = useStylesInheritanceChain(finalPath);
   if (!inheritanceChain.length) {
@@ -2492,7 +2547,7 @@ var Indicator = ({ inheritanceChain, path, propType }) => {
   const currentItem = currentStyleId ? getValueFromInheritanceChain(inheritanceChain, currentStyleId, currentStyleMeta) : null;
   const hasValue = !isEmpty2(currentItem?.value);
   const [actualStyle] = inheritanceChain;
-  if (!isExperimentActive7(EXPERIMENTAL_FEATURES.V_3_31) && actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY4) {
+  if (!isExperimentActive8(EXPERIMENTAL_FEATURES.V_3_31) && actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY4) {
     return null;
   }
   const isFinalValue = currentItem === actualStyle;
@@ -2526,9 +2581,11 @@ var getLabel = ({ isFinalValue, hasValue }) => {
 };
 
 // src/controls-registry/styles-field.tsx
-var StylesField = ({ bind, placeholder, children }) => {
-  const { value, setValue, canEdit } = useStylesField(bind);
-  const isVersion331Active = isExperimentActive8("e_v_3_31");
+var StylesField = ({ bind, placeholder, propDisplayName, children }) => {
+  const { value, setValue, canEdit } = useStylesField(bind, {
+    history: { propDisplayName }
+  });
+  const isVersion331Active = isExperimentActive9("e_v_3_31");
   const stylesInheritanceChain = useStylesInheritanceChain([bind]);
   const stylesSchema = getStylesSchema2();
   const propType = createTopLevelOjectType({ schema: stylesSchema });
@@ -2557,7 +2614,7 @@ var StylesField = ({ bind, placeholder, children }) => {
         value: values,
         setValue: setValues,
         placeholder: placeholderValues,
-        disabled: !canEdit
+        isDisabled: () => !canEdit
       },
       /* @__PURE__ */ React27.createElement(PropKeyProvider2, { bind }, children)
     )
@@ -2729,6 +2786,7 @@ var BorderWidthField = () => {
 };
 
 // src/components/style-sections/border-section/border-field.tsx
+var BORDER_LABEL = __16("Border", "elementor");
 var initialBorder = {
   "border-width": { $$type: "size", value: { size: 1, unit: "px" } },
   "border-color": { $$type: "color", value: "#000000" },
@@ -2736,15 +2794,19 @@ var initialBorder = {
 };
 var BorderField = () => {
   const { values, setValues, canEdit } = useStylesFields(Object.keys(initialBorder));
+  const meta = { history: { propDisplayName: BORDER_LABEL } };
   const addBorder = () => {
-    setValues(initialBorder);
+    setValues(initialBorder, meta);
   };
   const removeBorder = () => {
-    setValues({
-      "border-width": null,
-      "border-color": null,
-      "border-style": null
-    });
+    setValues(
+      {
+        "border-width": null,
+        "border-color": null,
+        "border-style": null
+      },
+      meta
+    );
   };
   const hasBorder = Object.values(values ?? {}).some(Boolean);
   return /* @__PURE__ */ React37.createElement(
@@ -2754,7 +2816,7 @@ var BorderField = () => {
       onAdd: addBorder,
       onRemove: removeBorder,
       disabled: !canEdit,
-      renderLabel: () => /* @__PURE__ */ React37.createElement(ControlFormLabel3, null, __16("Border", "elementor"))
+      renderLabel: () => /* @__PURE__ */ React37.createElement(ControlFormLabel3, null, BORDER_LABEL)
     },
     /* @__PURE__ */ React37.createElement(BorderWidthField, null),
     /* @__PURE__ */ React37.createElement(BorderColorField, null),
@@ -2778,10 +2840,10 @@ import { __ as __17 } from "@wordpress/i18n";
 
 // src/styles-inheritance/components/ui-providers.tsx
 import * as React38 from "react";
-import { DirectionProvider, ThemeProvider } from "@elementor/ui";
+import { DirectionProvider, ThemeProvider as ThemeProvider2 } from "@elementor/ui";
 var UiProviders = ({ children }) => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React38.createElement(DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React38.createElement(ThemeProvider, null, children));
+  return /* @__PURE__ */ React38.createElement(DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React38.createElement(ThemeProvider2, null, children));
 };
 
 // src/components/style-sections/border-section/border-radius-field.tsx
@@ -2835,8 +2897,8 @@ var BorderSection = () => /* @__PURE__ */ React40.createElement(SectionContent,
 
 // src/components/style-sections/effects-section/effects-section.tsx
 import * as React42 from "react";
-import { BoxShadowRepeaterControl, FilterRepeaterControl } from "@elementor/editor-controls";
-import { isExperimentActive as isExperimentActive9 } from "@elementor/editor-v1-adapters";
+import { BoxShadowRepeaterControl, FilterRepeaterControl, TransformRepeaterControl } from "@elementor/editor-controls";
+import { isExperimentActive as isExperimentActive10 } from "@elementor/editor-v1-adapters";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/style-sections/layout-section/opacity-control-field.tsx
@@ -2852,17 +2914,19 @@ var OpacityControlField = () => {
 
 // src/components/style-sections/effects-section/effects-section.tsx
 var BOX_SHADOW_LABEL = __19("Box shadow", "elementor");
-var FILTER_LABEL = __19("Filter", "elementor");
+var FILTER_LABEL = __19("Filters", "elementor");
+var TRANSFORM_LABEL = __19("Transform", "elementor");
+var BACKDROP_FILTER_LABEL = __19("Backdrop filters", "elementor");
 var EffectsSection = () => {
-  const isVersion331Active = isExperimentActive9(EXPERIMENTAL_FEATURES.V_3_31);
-  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(OpacityControlField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React42.createElement(BoxShadowRepeaterControl, null)), isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React42.createElement(FilterRepeaterControl, null))));
+  const isVersion331Active = isExperimentActive10(EXPERIMENTAL_FEATURES.V_3_31);
+  return /* @__PURE__ */ React42.createElement(SectionContent, null, isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(OpacityControlField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null)), /* @__PURE__ */ React42.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React42.createElement(BoxShadowRepeaterControl, null)), isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React42.createElement(TransformRepeaterControl, null)), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React42.createElement(FilterRepeaterControl, null)), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "backdrop-filter", propDisplayName: BACKDROP_FILTER_LABEL }, /* @__PURE__ */ React42.createElement(FilterRepeaterControl, { filterPropName: "backdrop-filter" }))));
 };
 
 // src/components/style-sections/layout-section/layout-section.tsx
 import * as React54 from "react";
 import { ControlFormLabel as ControlFormLabel4 } from "@elementor/editor-controls";
 import { useParentElement } from "@elementor/editor-elements";
-import { __ as __30 } from "@wordpress/i18n";
+import { __ as __31 } from "@wordpress/i18n";
 
 // src/hooks/use-computed-style.ts
 import { __privateUseListenTo as useListenTo, commandEndEvent, windowEvent } from "@elementor/editor-v1-adapters";
@@ -2901,12 +2965,14 @@ import {
   JustifyTopIcon
 } from "@elementor/icons";
 import { withDirection as withDirection3 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 
 // src/components/style-sections/layout-section/utils/rotated-icon.tsx
 import * as React43 from "react";
 import { useRef as useRef5 } from "react";
 import { useTheme as useTheme2 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
+var FLEX_DIRECTION_LABEL = __20("Flex direction", "elementor");
 var CLOCKWISE_ANGLES = {
   row: 0,
   column: 90,
@@ -2931,7 +2997,9 @@ var RotatedIcon = ({
   return /* @__PURE__ */ React43.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
 };
 var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => {
-  const { value: direction } = useStylesField("flex-direction");
+  const { value: direction } = useStylesField("flex-direction", {
+    history: { propDisplayName: FLEX_DIRECTION_LABEL }
+  });
   const isRtl = "rtl" === useTheme2().direction;
   const rotationMultiplier = isRtl ? -1 : 1;
   const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
@@ -2947,7 +3015,7 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
 };
 
 // src/components/style-sections/layout-section/align-content-field.tsx
-var ALIGN_CONTENT_LABEL = __20("Align content", "elementor");
+var ALIGN_CONTENT_LABEL = __21("Align content", "elementor");
 var StartIcon = withDirection3(JustifyTopIcon);
 var EndIcon = withDirection3(JustifyBottomIcon);
 var iconProps = {
@@ -2958,37 +3026,37 @@ var iconProps = {
 var options = [
   {
     value: "start",
-    label: __20("Start", "elementor"),
+    label: __21("Start", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: StartIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
     value: "center",
-    label: __20("Center", "elementor"),
+    label: __21("Center", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: CenterIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
     value: "end",
-    label: __20("End", "elementor"),
+    label: __21("End", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: EndIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
     value: "space-between",
-    label: __20("Space between", "elementor"),
+    label: __21("Space between", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: BetweenIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
     value: "space-around",
-    label: __20("Space around", "elementor"),
+    label: __21("Space around", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: AroundIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
     value: "space-evenly",
-    label: __20("Space evenly", "elementor"),
+    label: __21("Space evenly", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(RotatedIcon, { icon: EvenlyIcon, size, ...iconProps }),
     showTooltip: true
   }
@@ -3005,8 +3073,8 @@ import {
   LayoutDistributeVerticalIcon as JustifyIcon
 } from "@elementor/icons";
 import { withDirection as withDirection4 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
-var ALIGN_ITEMS_LABEL = __21("Align items", "elementor");
+import { __ as __22 } from "@wordpress/i18n";
+var ALIGN_ITEMS_LABEL = __22("Align items", "elementor");
 var StartIcon2 = withDirection4(LayoutAlignLeftIcon);
 var EndIcon2 = withDirection4(LayoutAlignRightIcon);
 var iconProps2 = {
@@ -3016,25 +3084,25 @@ var iconProps2 = {
 var options2 = [
   {
     value: "start",
-    label: __21("Start", "elementor"),
+    label: __22("Start", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: StartIcon2, size, ...iconProps2 }),
     showTooltip: true
   },
   {
     value: "center",
-    label: __21("Center", "elementor"),
+    label: __22("Center", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: CenterIcon2, size, ...iconProps2 }),
     showTooltip: true
   },
   {
     value: "end",
-    label: __21("End", "elementor"),
+    label: __22("End", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: EndIcon2, size, ...iconProps2 }),
     showTooltip: true
   },
   {
     value: "stretch",
-    label: __21("Stretch", "elementor"),
+    label: __22("Stretch", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React45.createElement(RotatedIcon, { icon: JustifyIcon, size, ...iconProps2 }),
     showTooltip: true
   }
@@ -3053,8 +3121,8 @@ import {
   LayoutDistributeVerticalIcon as JustifyIcon2
 } from "@elementor/icons";
 import { withDirection as withDirection5 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
-var ALIGN_SELF_LABEL = __22("Align self", "elementor");
+import { __ as __23 } from "@wordpress/i18n";
+var ALIGN_SELF_LABEL = __23("Align self", "elementor");
 var ALIGN_SELF_CHILD_OFFSET_MAP = {
   row: 90,
   "row-reverse": 90,
@@ -3069,7 +3137,7 @@ var iconProps3 = {
 var getOptions = (parentStyleDirection) => [
   {
     value: "start",
-    label: __22("Start", "elementor"),
+    label: __23("Start", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
       RotatedIcon,
       {
@@ -3083,7 +3151,7 @@ var getOptions = (parentStyleDirection) => [
   },
   {
     value: "center",
-    label: __22("Center", "elementor"),
+    label: __23("Center", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
       RotatedIcon,
       {
@@ -3097,7 +3165,7 @@ var getOptions = (parentStyleDirection) => [
   },
   {
     value: "end",
-    label: __22("End", "elementor"),
+    label: __23("End", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
       RotatedIcon,
       {
@@ -3111,7 +3179,7 @@ var getOptions = (parentStyleDirection) => [
   },
   {
     value: "stretch",
-    label: __22("Stretch", "elementor"),
+    label: __23("Stretch", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(
       RotatedIcon,
       {
@@ -3129,44 +3197,44 @@ var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ React46.creat
 // src/components/style-sections/layout-section/display-field.tsx
 import * as React47 from "react";
 import { ToggleControl as ToggleControl4 } from "@elementor/editor-controls";
-import { isExperimentActive as isExperimentActive10 } from "@elementor/editor-v1-adapters";
-import { __ as __23 } from "@wordpress/i18n";
-var DISPLAY_LABEL = __23("Display", "elementor");
+import { isExperimentActive as isExperimentActive11 } from "@elementor/editor-v1-adapters";
+import { __ as __24 } from "@wordpress/i18n";
+var DISPLAY_LABEL = __24("Display", "elementor");
 var displayFieldItems = [
   {
     value: "block",
-    renderContent: () => __23("Block", "elementor"),
-    label: __23("Block", "elementor"),
+    renderContent: () => __24("Block", "elementor"),
+    label: __24("Block", "elementor"),
     showTooltip: true
   },
   {
     value: "flex",
-    renderContent: () => __23("Flex", "elementor"),
-    label: __23("Flex", "elementor"),
+    renderContent: () => __24("Flex", "elementor"),
+    label: __24("Flex", "elementor"),
     showTooltip: true
   },
   {
     value: "inline-block",
-    renderContent: () => __23("In-blk", "elementor"),
-    label: __23("Inline-block", "elementor"),
+    renderContent: () => __24("In-blk", "elementor"),
+    label: __24("Inline-block", "elementor"),
     showTooltip: true
   }
 ];
 var DisplayField = () => {
-  const isDisplayNoneFeatureActive = isExperimentActive10(EXPERIMENTAL_FEATURES.V_3_30);
+  const isDisplayNoneFeatureActive = isExperimentActive11(EXPERIMENTAL_FEATURES.V_3_30);
   const items3 = [...displayFieldItems];
   if (isDisplayNoneFeatureActive) {
     items3.push({
       value: "none",
-      renderContent: () => __23("None", "elementor"),
-      label: __23("None", "elementor"),
+      renderContent: () => __24("None", "elementor"),
+      label: __24("None", "elementor"),
       showTooltip: true
     });
   }
   items3.push({
     value: "inline-flex",
-    renderContent: () => __23("In-flx", "elementor"),
-    label: __23("Inline-flex", "elementor"),
+    renderContent: () => __24("In-flx", "elementor"),
+    label: __24("Inline-flex", "elementor"),
     showTooltip: true
   });
   const placeholder = useDisplayPlaceholderValue();
@@ -3179,12 +3247,12 @@ import * as React48 from "react";
 import { ToggleControl as ToggleControl5 } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
 import { withDirection as withDirection6 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
-var FLEX_DIRECTION_LABEL = __24("Direction", "elementor");
+import { __ as __25 } from "@wordpress/i18n";
+var FLEX_DIRECTION_LABEL2 = __25("Direction", "elementor");
 var options3 = [
   {
     value: "row",
-    label: __24("Row", "elementor"),
+    label: __25("Row", "elementor"),
     renderContent: ({ size }) => {
       const StartIcon5 = withDirection6(ArrowRightIcon);
       return /* @__PURE__ */ React48.createElement(StartIcon5, { fontSize: size });
@@ -3193,13 +3261,13 @@ var options3 = [
   },
   {
     value: "column",
-    label: __24("Column", "elementor"),
+    label: __25("Column", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(ArrowDownSmallIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "row-reverse",
-    label: __24("Reversed row", "elementor"),
+    label: __25("Reversed row", "elementor"),
     renderContent: ({ size }) => {
       const EndIcon5 = withDirection6(ArrowLeftIcon);
       return /* @__PURE__ */ React48.createElement(EndIcon5, { fontSize: size });
@@ -3208,23 +3276,23 @@ var options3 = [
   },
   {
     value: "column-reverse",
-    label: __24("Reversed column", "elementor"),
+    label: __25("Reversed column", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(ArrowUpSmallIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var FlexDirectionField = () => {
-  return /* @__PURE__ */ React48.createElement(StylesField, { bind: "flex-direction", propDisplayName: FLEX_DIRECTION_LABEL }, /* @__PURE__ */ React48.createElement(UiProviders, null, /* @__PURE__ */ React48.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL }, /* @__PURE__ */ React48.createElement(ToggleControl5, { options: options3 }))));
+  return /* @__PURE__ */ React48.createElement(StylesField, { bind: "flex-direction", propDisplayName: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React48.createElement(UiProviders, null, /* @__PURE__ */ React48.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL2 }, /* @__PURE__ */ React48.createElement(ToggleControl5, { options: options3 }))));
 };
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 import * as React49 from "react";
-import { useState as useState10 } from "react";
+import { useEffect as useEffect4, useState as useState10 } from "react";
 import { ControlToggleButtonGroup, NumberControl } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
 import { Grid as Grid2 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
-var ORDER_LABEL = __25("Order", "elementor");
+import { __ as __26 } from "@wordpress/i18n";
+var ORDER_LABEL = __26("Order", "elementor");
 var FIRST_DEFAULT_VALUE = -99999;
 var LAST_DEFAULT_VALUE = 99999;
 var FIRST = "first";
@@ -3237,26 +3305,36 @@ var orderValueMap = {
 var items = [
   {
     value: FIRST,
-    label: __25("First", "elementor"),
+    label: __26("First", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(ArrowUpSmallIcon2, { fontSize: size }),
     showTooltip: true
   },
   {
     value: LAST,
-    label: __25("Last", "elementor"),
+    label: __26("Last", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(ArrowDownSmallIcon2, { fontSize: size }),
     showTooltip: true
   },
   {
     value: CUSTOM,
-    label: __25("Custom", "elementor"),
+    label: __26("Custom", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React49.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var FlexOrderField = () => {
-  const { value: order, setValue: setOrder, canEdit } = useStylesField("order");
+  const {
+    value: order,
+    setValue: setOrder,
+    canEdit
+  } = useStylesField("order", {
+    history: { propDisplayName: ORDER_LABEL }
+  });
   const [groupControlValue, setGroupControlValue] = useState10(getGroupControlValue(order?.value || null));
+  useEffect4(() => {
+    const newGroupControlValue = getGroupControlValue(order?.value || null);
+    setGroupControlValue(newGroupControlValue);
+  }, [order?.value]);
   const handleToggleButtonChange = (group) => {
     setGroupControlValue(group);
     if (!group || group === CUSTOM) {
@@ -3265,7 +3343,7 @@ var FlexOrderField = () => {
     }
     setOrder({ $$type: "number", value: orderValueMap[group] });
   };
-  return /* @__PURE__ */ React49.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(UiProviders, null, /* @__PURE__ */ React49.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React49.createElement(StylesField, { bind: "order", propDisplayName: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(UiProviders, null, /* @__PURE__ */ React49.createElement(SectionContent, null, /* @__PURE__ */ React49.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ React49.createElement(
     ControlToggleButtonGroup,
     {
       items,
@@ -3274,14 +3352,14 @@ var FlexOrderField = () => {
       exclusive: true,
       disabled: !canEdit
     }
-  ), CUSTOM === groupControlValue && /* @__PURE__ */ React49.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlLabel, null, __25("Custom order", "elementor"))), /* @__PURE__ */ React49.createElement(Grid2, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React49.createElement(
+  )), CUSTOM === groupControlValue && /* @__PURE__ */ React49.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React49.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(ControlLabel, null, __26("Custom order", "elementor"))), /* @__PURE__ */ React49.createElement(Grid2, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React49.createElement(
     NumberControl,
     {
       min: FIRST_DEFAULT_VALUE + 1,
       max: LAST_DEFAULT_VALUE - 1,
       shouldForceInt: true
     }
-  )))))));
+  ))))));
 };
 var getGroupControlValue = (order) => {
   if (LAST_DEFAULT_VALUE === order) {
@@ -3303,25 +3381,25 @@ import {
 } from "@elementor/editor-controls";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { ExpandIcon, PencilIcon as PencilIcon2, ShrinkIcon } from "@elementor/icons";
-import { __ as __26 } from "@wordpress/i18n";
-var FLEX_SIZE_LABEL = __26("Flex Size", "elementor");
+import { __ as __27 } from "@wordpress/i18n";
+var FLEX_SIZE_LABEL = __27("Flex Size", "elementor");
 var DEFAULT = 1;
 var items2 = [
   {
     value: "flex-grow",
-    label: __26("Grow", "elementor"),
+    label: __27("Grow", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(ExpandIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "flex-shrink",
-    label: __26("Shrink", "elementor"),
+    label: __27("Shrink", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(ShrinkIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __26("Custom", "elementor"),
+    label: __27("Custom", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(PencilIcon2, { fontSize: size }),
     showTooltip: true
   }
@@ -3334,27 +3412,27 @@ var FlexSizeField = () => {
   const currentGroup = useMemo6(() => getActiveGroup({ grow, shrink, basis }), [grow, shrink, basis]), [activeGroup, setActiveGroup] = useState11(currentGroup);
   const onChangeGroup = (group = null) => {
     setActiveGroup(group);
+    let props;
     if (!group || group === "custom") {
-      setValues({
+      props = {
         "flex-basis": null,
         "flex-grow": null,
         "flex-shrink": null
-      });
-      return;
-    }
-    if (group === "flex-grow") {
-      setValues({
+      };
+    } else if (group === "flex-grow") {
+      props = {
         "flex-basis": null,
         "flex-grow": numberPropTypeUtil.create(DEFAULT),
         "flex-shrink": null
-      });
-      return;
+      };
+    } else {
+      props = {
+        "flex-basis": null,
+        "flex-grow": null,
+        "flex-shrink": numberPropTypeUtil.create(DEFAULT)
+      };
     }
-    setValues({
-      "flex-basis": null,
-      "flex-grow": null,
-      "flex-shrink": numberPropTypeUtil.create(DEFAULT)
-    });
+    setValues(props, { history: { propDisplayName: FLEX_SIZE_LABEL } });
   };
   return /* @__PURE__ */ React50.createElement(UiProviders, null, /* @__PURE__ */ React50.createElement(SectionContent, null, /* @__PURE__ */ React50.createElement(StylesField, { bind: activeGroup ?? "", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(
     ControlToggleButtonGroup2,
@@ -3369,7 +3447,7 @@ var FlexSizeField = () => {
 };
 var FlexCustomField = () => {
   const flexBasisRowRef = useRef6(null);
-  return /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-grow", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: __26("Grow", "elementor") }, /* @__PURE__ */ React50.createElement(NumberControl2, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-shrink", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: __26("Shrink", "elementor") }, /* @__PURE__ */ React50.createElement(NumberControl2, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-basis", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: __26("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React50.createElement(SizeControl3, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef }))));
+  return /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-grow", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: __27("Grow", "elementor") }, /* @__PURE__ */ React50.createElement(NumberControl2, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-shrink", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: __27("Shrink", "elementor") }, /* @__PURE__ */ React50.createElement(NumberControl2, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React50.createElement(StylesField, { bind: "flex-basis", propDisplayName: FLEX_SIZE_LABEL }, /* @__PURE__ */ React50.createElement(StylesFieldLayout, { label: __27("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React50.createElement(SizeControl3, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef }))));
 };
 var getActiveGroup = ({
   grow,
@@ -3394,8 +3472,8 @@ var getActiveGroup = ({
 // src/components/style-sections/layout-section/gap-control-field.tsx
 import * as React51 from "react";
 import { GapControl } from "@elementor/editor-controls";
-import { __ as __27 } from "@wordpress/i18n";
-var GAPS_LABEL = __27("Gaps", "elementor");
+import { __ as __28 } from "@wordpress/i18n";
+var GAPS_LABEL = __28("Gaps", "elementor");
 var GapControlField = () => {
   return /* @__PURE__ */ React51.createElement(StylesField, { bind: "gap", propDisplayName: GAPS_LABEL }, /* @__PURE__ */ React51.createElement(GapControl, { label: GAPS_LABEL }));
 };
@@ -3412,8 +3490,8 @@ import {
   JustifyTopIcon as JustifyTopIcon2
 } from "@elementor/icons";
 import { withDirection as withDirection7 } from "@elementor/ui";
-import { __ as __28 } from "@wordpress/i18n";
-var JUSTIFY_CONTENT_LABEL = __28("Justify content", "elementor");
+import { __ as __29 } from "@wordpress/i18n";
+var JUSTIFY_CONTENT_LABEL = __29("Justify content", "elementor");
 var StartIcon4 = withDirection7(JustifyTopIcon2);
 var EndIcon4 = withDirection7(JustifyBottomIcon2);
 var iconProps4 = {
@@ -3423,37 +3501,37 @@ var iconProps4 = {
 var options4 = [
   {
     value: "flex-start",
-    label: __28("Start", "elementor"),
+    label: __29("Start", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: StartIcon4, size, ...iconProps4 }),
     showTooltip: true
   },
   {
     value: "center",
-    label: __28("Center", "elementor"),
+    label: __29("Center", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: CenterIcon4, size, ...iconProps4 }),
     showTooltip: true
   },
   {
     value: "flex-end",
-    label: __28("End", "elementor"),
+    label: __29("End", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: EndIcon4, size, ...iconProps4 }),
     showTooltip: true
   },
   {
     value: "space-between",
-    label: __28("Space between", "elementor"),
+    label: __29("Space between", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: BetweenIcon2, size, ...iconProps4 }),
     showTooltip: true
   },
   {
     value: "space-around",
-    label: __28("Space around", "elementor"),
+    label: __29("Space around", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: AroundIcon2, size, ...iconProps4 }),
     showTooltip: true
   },
   {
     value: "space-evenly",
-    label: __28("Space evenly", "elementor"),
+    label: __29("Space evenly", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React52.createElement(RotatedIcon, { icon: EvenlyIcon2, size, ...iconProps4 }),
     showTooltip: true
   }
@@ -3464,24 +3542,24 @@ var JustifyContentField = () => /* @__PURE__ */ React52.createElement(StylesFiel
 import * as React53 from "react";
 import { ToggleControl as ToggleControl7 } from "@elementor/editor-controls";
 import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
-import { __ as __29 } from "@wordpress/i18n";
-var FLEX_WRAP_LABEL = __29("Wrap", "elementor");
+import { __ as __30 } from "@wordpress/i18n";
+var FLEX_WRAP_LABEL = __30("Wrap", "elementor");
 var options5 = [
   {
     value: "nowrap",
-    label: __29("No wrap", "elementor"),
+    label: __30("No wrap", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(ArrowRightIcon2, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "wrap",
-    label: __29("Wrap", "elementor"),
+    label: __30("Wrap", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(ArrowBackIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "wrap-reverse",
-    label: __29("Reversed wrap", "elementor"),
+    label: __30("Reversed wrap", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React53.createElement(ArrowForwardIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -3491,8 +3569,12 @@ var WrapField = () => {
 };
 
 // src/components/style-sections/layout-section/layout-section.tsx
+var DISPLAY_LABEL2 = __31("Display", "elementor");
+var FLEX_WRAP_LABEL2 = __31("Flex wrap", "elementor");
 var LayoutSection = () => {
-  const { value: display } = useStylesField("display");
+  const { value: display } = useStylesField("display", {
+    history: { propDisplayName: DISPLAY_LABEL2 }
+  });
   const displayPlaceholder = useDisplayPlaceholderValue();
   const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
   const { element } = useElement();
@@ -3502,10 +3584,12 @@ var LayoutSection = () => {
   return /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React54.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React54.createElement(FlexChildFields, { parentStyleDirection }));
 };
 var FlexFields = () => {
-  const { value: flexWrap } = useStylesField("flex-wrap");
+  const { value: flexWrap } = useStylesField("flex-wrap", {
+    history: { propDisplayName: FLEX_WRAP_LABEL2 }
+  });
   return /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(FlexDirectionField, null), /* @__PURE__ */ React54.createElement(JustifyContentField, null), /* @__PURE__ */ React54.createElement(AlignItemsField, null), /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(GapControlField, null), /* @__PURE__ */ React54.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React54.createElement(AlignContentField, null));
 };
-var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(ControlFormLabel4, null, __30("Flex child", "elementor")), /* @__PURE__ */ React54.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React54.createElement(FlexOrderField, null), /* @__PURE__ */ React54.createElement(FlexSizeField, null));
+var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(ControlFormLabel4, null, __31("Flex child", "elementor")), /* @__PURE__ */ React54.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React54.createElement(FlexOrderField, null), /* @__PURE__ */ React54.createElement(FlexSizeField, null));
 var shouldDisplayFlexFields = (display, local) => {
   const value = display?.value ?? local?.value;
   if (!value) {
@@ -3516,8 +3600,9 @@ var shouldDisplayFlexFields = (display, local) => {
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React59 from "react";
-import { isExperimentActive as isExperimentActive11 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive12 } from "@elementor/editor-v1-adapters";
 import { useSessionStorage } from "@elementor/session";
+import { __ as __36 } from "@wordpress/i18n";
 
 // src/components/style-sections/position-section/dimensions-field.tsx
 import * as React55 from "react";
@@ -3525,7 +3610,7 @@ import { useRef as useRef7 } from "react";
 import { SizeControl as SizeControl4 } from "@elementor/editor-controls";
 import { SideBottomIcon as SideBottomIcon2, SideLeftIcon as SideLeftIcon2, SideRightIcon as SideRightIcon2, SideTopIcon as SideTopIcon2 } from "@elementor/icons";
 import { Grid as Grid3, Stack as Stack11, withDirection as withDirection8 } from "@elementor/ui";
-import { __ as __31 } from "@wordpress/i18n";
+import { __ as __32 } from "@wordpress/i18n";
 var InlineStartIcon2 = withDirection8(SideLeftIcon2);
 var InlineEndIcon2 = withDirection8(SideRightIcon2);
 var sideIcons = {
@@ -3534,19 +3619,19 @@ var sideIcons = {
   "inset-inline-start": /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
   "inset-inline-end": /* @__PURE__ */ React55.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
 };
-var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? __31("Right", "elementor") : __31("Left", "elementor");
-var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? __31("Left", "elementor") : __31("Right", "elementor");
+var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? __32("Right", "elementor") : __32("Left", "elementor");
+var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? __32("Left", "elementor") : __32("Right", "elementor");
 var DimensionsField = () => {
   const { isSiteRtl } = useDirection();
   const rowRefs = [useRef7(null), useRef7(null)];
-  return /* @__PURE__ */ React55.createElement(UiProviders, null, /* @__PURE__ */ React55.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-start", label: __31("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React55.createElement(UiProviders, null, /* @__PURE__ */ React55.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-start", label: __32("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React55.createElement(
     DimensionField,
     {
       side: "inset-inline-end",
       label: getInlineEndLabel(isSiteRtl),
       rowRef: rowRefs[0]
     }
-  )), /* @__PURE__ */ React55.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-end", label: __31("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React55.createElement(
+  )), /* @__PURE__ */ React55.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React55.createElement(DimensionField, { side: "inset-block-end", label: __32("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React55.createElement(
     DimensionField,
     {
       side: "inset-inline-start",
@@ -3565,8 +3650,8 @@ var DimensionField = ({
 import * as React56 from "react";
 import { useRef as useRef8 } from "react";
 import { SizeControl as SizeControl5 } from "@elementor/editor-controls";
-import { __ as __32 } from "@wordpress/i18n";
-var OFFSET_LABEL = __32("Anchor offset", "elementor");
+import { __ as __33 } from "@wordpress/i18n";
+var OFFSET_LABEL = __33("Anchor offset", "elementor");
 var UNITS = ["px", "em", "rem", "vw", "vh"];
 var OffsetField = () => {
   const rowRef = useRef8(null);
@@ -3576,14 +3661,14 @@ var OffsetField = () => {
 // src/components/style-sections/position-section/position-field.tsx
 import * as React57 from "react";
 import { SelectControl as SelectControl3 } from "@elementor/editor-controls";
-import { __ as __33 } from "@wordpress/i18n";
-var POSITION_LABEL = __33("Position", "elementor");
+import { __ as __34 } from "@wordpress/i18n";
+var POSITION_LABEL = __34("Position", "elementor");
 var positionOptions = [
-  { label: __33("Static", "elementor"), value: "static" },
-  { label: __33("Relative", "elementor"), value: "relative" },
-  { label: __33("Absolute", "elementor"), value: "absolute" },
-  { label: __33("Fixed", "elementor"), value: "fixed" },
-  { label: __33("Sticky", "elementor"), value: "sticky" }
+  { label: __34("Static", "elementor"), value: "static" },
+  { label: __34("Relative", "elementor"), value: "relative" },
+  { label: __34("Absolute", "elementor"), value: "absolute" },
+  { label: __34("Fixed", "elementor"), value: "fixed" },
+  { label: __34("Sticky", "elementor"), value: "sticky" }
 ];
 var PositionField = ({ onChange }) => {
   return /* @__PURE__ */ React57.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React57.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React57.createElement(SelectControl3, { options: positionOptions, onChange })));
@@ -3592,15 +3677,19 @@ var PositionField = ({ onChange }) => {
 // src/components/style-sections/position-section/z-index-field.tsx
 import * as React58 from "react";
 import { NumberControl as NumberControl3 } from "@elementor/editor-controls";
-import { __ as __34 } from "@wordpress/i18n";
-var Z_INDEX_LABEL = __34("Z-index", "elementor");
+import { __ as __35 } from "@wordpress/i18n";
+var Z_INDEX_LABEL = __35("Z-index", "elementor");
 var ZIndexField = () => {
   return /* @__PURE__ */ React58.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React58.createElement(NumberControl3, null)));
 };
 
 // src/components/style-sections/position-section/position-section.tsx
+var POSITION_LABEL2 = __36("Position", "elementor");
+var DIMENSIONS_LABEL = __36("Dimensions", "elementor");
 var PositionSection = () => {
-  const { value: positionValue } = useStylesField("position");
+  const { value: positionValue } = useStylesField("position", {
+    history: { propDisplayName: POSITION_LABEL2 }
+  });
   const { values: dimensions, setValues: setDimensions } = useStylesFields([
     "inset-block-start",
     "inset-block-end",
@@ -3608,21 +3697,25 @@ var PositionSection = () => {
     "inset-inline-end"
   ]);
   const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
-  const isCssIdFeatureActive = isExperimentActive11("e_v_3_30");
+  const isCssIdFeatureActive = isExperimentActive12("e_v_3_30");
   const onPositionChange = (newPosition, previousPosition) => {
+    const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
     if (newPosition === "static") {
       if (dimensions) {
         updateDimensionsHistory(dimensions);
-        setDimensions({
-          "inset-block-start": void 0,
-          "inset-block-end": void 0,
-          "inset-inline-start": void 0,
-          "inset-inline-end": void 0
-        });
+        setDimensions(
+          {
+            "inset-block-start": void 0,
+            "inset-block-end": void 0,
+            "inset-inline-start": void 0,
+            "inset-inline-end": void 0
+          },
+          meta
+        );
       }
     } else if (previousPosition === "static") {
       if (dimensionsValuesFromHistory) {
-        setDimensions(dimensionsValuesFromHistory);
+        setDimensions(dimensionsValuesFromHistory, meta);
         clearDimensionsHistory();
       }
     }
@@ -3641,19 +3734,19 @@ var usePersistDimensions = () => {
 import * as React65 from "react";
 import { useRef as useRef9 } from "react";
 import { AspectRatioControl, SizeControl as SizeControl6 } from "@elementor/editor-controls";
-import { isExperimentActive as isExperimentActive13 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive14 } from "@elementor/editor-v1-adapters";
 import { Grid as Grid4, Stack as Stack13 } from "@elementor/ui";
-import { __ as __39 } from "@wordpress/i18n";
+import { __ as __41 } from "@wordpress/i18n";
 
 // src/components/style-tab-collapsible-content.tsx
 import * as React61 from "react";
-import { isExperimentActive as isExperimentActive12 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive13 } from "@elementor/editor-v1-adapters";
 
 // src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
 import * as React60 from "react";
-import { isElementsStylesProvider as isElementsStylesProvider3 } from "@elementor/editor-styles-repository";
+import { isElementsStylesProvider as isElementsStylesProvider4 } from "@elementor/editor-styles-repository";
 import { Stack as Stack12, Tooltip as Tooltip7 } from "@elementor/ui";
-import { __ as __35 } from "@wordpress/i18n";
+import { __ as __37 } from "@wordpress/i18n";
 var StylesInheritanceSectionIndicators = ({ fields }) => {
   const { id, meta, provider } = useStyle();
   const snapshot = useStylesInheritanceSnapshot();
@@ -3664,13 +3757,13 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
   if (!hasValues && !hasOverrides) {
     return null;
   }
-  const hasValueLabel = __35("Has effective styles", "elementor");
-  const hasOverridesLabel = __35("Has overridden styles", "elementor");
-  return /* @__PURE__ */ React60.createElement(Tooltip7, { title: __35("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React60.createElement(Stack12, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React60.createElement(
+  const hasValueLabel = __37("Has effective styles", "elementor");
+  const hasOverridesLabel = __37("Has overridden styles", "elementor");
+  return /* @__PURE__ */ React60.createElement(Tooltip7, { title: __37("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React60.createElement(Stack12, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React60.createElement(
     StyleIndicator,
     {
       getColor: getStylesProviderThemeColor(provider.getKey()),
-      "data-variant": isElementsStylesProvider3(provider.getKey()) ? "local" : "global",
+      "data-variant": isElementsStylesProvider4(provider.getKey()) ? "local" : "global",
       role: "listitem",
       "aria-label": hasValueLabel
     }
@@ -3717,7 +3810,7 @@ var StyleTabCollapsibleContent = ({ fields = [], children }) => {
   return /* @__PURE__ */ React61.createElement(CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children);
 };
 function getStylesInheritanceIndicators(fields) {
-  const isUsingFieldsIndicators = isExperimentActive12(EXPERIMENTAL_FEATURES.V_3_30);
+  const isUsingFieldsIndicators = isExperimentActive13(EXPERIMENTAL_FEATURES.V_3_30);
   if (fields.length === 0 || !isUsingFieldsIndicators) {
     return null;
   }
@@ -3727,14 +3820,14 @@ function getStylesInheritanceIndicators(fields) {
 // src/components/style-sections/size-section/object-fit-field.tsx
 import * as React62 from "react";
 import { SelectControl as SelectControl4 } from "@elementor/editor-controls";
-import { __ as __36 } from "@wordpress/i18n";
-var OBJECT_FIT_LABEL = __36("Object fit", "elementor");
+import { __ as __38 } from "@wordpress/i18n";
+var OBJECT_FIT_LABEL = __38("Object fit", "elementor");
 var positionOptions2 = [
-  { label: __36("Fill", "elementor"), value: "fill" },
-  { label: __36("Cover", "elementor"), value: "cover" },
-  { label: __36("Contain", "elementor"), value: "contain" },
-  { label: __36("None", "elementor"), value: "none" },
-  { label: __36("Scale down", "elementor"), value: "scale-down" }
+  { label: __38("Fill", "elementor"), value: "fill" },
+  { label: __38("Cover", "elementor"), value: "cover" },
+  { label: __38("Contain", "elementor"), value: "contain" },
+  { label: __38("None", "elementor"), value: "none" },
+  { label: __38("Scale down", "elementor"), value: "scale-down" }
 ];
 var ObjectFitField = () => {
   return /* @__PURE__ */ React62.createElement(StylesField, { bind: "object-fit", propDisplayName: OBJECT_FIT_LABEL }, /* @__PURE__ */ React62.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ React62.createElement(SelectControl4, { options: positionOptions2 })));
@@ -3743,8 +3836,8 @@ var ObjectFitField = () => {
 // src/components/style-sections/size-section/object-position-field.tsx
 import * as React63 from "react";
 import { PositionControl } from "@elementor/editor-controls";
-import { __ as __37 } from "@wordpress/i18n";
-var OBJECT_POSITION_LABEL = __37("Object position", "elementor");
+import { __ as __39 } from "@wordpress/i18n";
+var OBJECT_POSITION_LABEL = __39("Object position", "elementor");
 var ObjectPositionField = () => {
   return /* @__PURE__ */ React63.createElement(StylesField, { bind: "object-position", propDisplayName: OBJECT_POSITION_LABEL }, /* @__PURE__ */ React63.createElement(PositionControl, null));
 };
@@ -3753,24 +3846,24 @@ var ObjectPositionField = () => {
 import * as React64 from "react";
 import { ToggleControl as ToggleControl8 } from "@elementor/editor-controls";
 import { EyeIcon, EyeOffIcon, LetterAIcon } from "@elementor/icons";
-import { __ as __38 } from "@wordpress/i18n";
-var OVERFLOW_LABEL = __38("Overflow", "elementor");
+import { __ as __40 } from "@wordpress/i18n";
+var OVERFLOW_LABEL = __40("Overflow", "elementor");
 var options6 = [
   {
     value: "visible",
-    label: __38("Visible", "elementor"),
+    label: __40("Visible", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(EyeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "hidden",
-    label: __38("Hidden", "elementor"),
+    label: __40("Hidden", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(EyeOffIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "auto",
-    label: __38("Auto", "elementor"),
+    label: __40("Auto", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -3785,40 +3878,43 @@ var CssSizeProps = [
   [
     {
       bind: "width",
-      label: __39("Width", "elementor")
+      label: __41("Width", "elementor")
     },
     {
       bind: "height",
-      label: __39("Height", "elementor")
+      label: __41("Height", "elementor")
     }
   ],
   [
     {
       bind: "min-width",
-      label: __39("Min width", "elementor")
+      label: __41("Min width", "elementor")
     },
     {
       bind: "min-height",
-      label: __39("Min height", "elementor")
+      label: __41("Min height", "elementor")
     }
   ],
   [
     {
       bind: "max-width",
-      label: __39("Max width", "elementor")
+      label: __41("Max width", "elementor")
     },
     {
       bind: "max-height",
-      label: __39("Max height", "elementor")
+      label: __41("Max height", "elementor")
     }
   ]
 ];
-var ASPECT_RATIO_LABEL = __39("Aspect Ratio", "elementor");
+var ASPECT_RATIO_LABEL = __41("Aspect Ratio", "elementor");
+var OBJECT_FIT_LABEL2 = __41("Object fit", "elementor");
 var SizeSection = () => {
-  const { value: fitValue } = useStylesField("object-fit");
+  const { value: fitValue } = useStylesField("object-fit", {
+    history: { propDisplayName: OBJECT_FIT_LABEL2 }
+  });
   const isNotFill = fitValue && fitValue?.value !== "fill";
   const gridRowRefs = [useRef9(null), useRef9(null), useRef9(null)];
-  const isVersion330Active = isExperimentActive13(EXPERIMENT_ID);
+  const isVersion330Active = isExperimentActive14(EXPERIMENT_ID);
   return /* @__PURE__ */ React65.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React65.createElement(Grid4, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React65.createElement(Grid4, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React65.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(Stack13, null, /* @__PURE__ */ React65.createElement(OverflowField, null)), isVersion330Active && /* @__PURE__ */ React65.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React65.createElement(Stack13, { gap: 2, pt: 2 }, /* @__PURE__ */ React65.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React65.createElement(AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(ObjectFitField, null), isNotFill && /* @__PURE__ */ React65.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ObjectPositionField, null)))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
@@ -3828,9 +3924,9 @@ var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
 // src/components/style-sections/spacing-section/spacing-section.tsx
 import * as React66 from "react";
 import { LinkedDimensionsControl } from "@elementor/editor-controls";
-import { __ as __40 } from "@wordpress/i18n";
-var MARGIN_LABEL = __40("Margin", "elementor");
-var PADDING_LABEL = __40("Padding", "elementor");
+import { __ as __42 } from "@wordpress/i18n";
+var MARGIN_LABEL = __42("Margin", "elementor");
+var PADDING_LABEL = __42("Padding", "elementor");
 var SpacingSection = () => {
   const { isSiteRtl } = useDirection();
   return /* @__PURE__ */ React66.createElement(SectionContent, null, /* @__PURE__ */ React66.createElement(StylesField, { bind: "margin", propDisplayName: MARGIN_LABEL }, /* @__PURE__ */ React66.createElement(
@@ -3845,13 +3941,14 @@ var SpacingSection = () => {
 
 // src/components/style-sections/typography-section/typography-section.tsx
 import * as React82 from "react";
-import { isExperimentActive as isExperimentActive14 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive15 } from "@elementor/editor-v1-adapters";
+import { __ as __59 } from "@wordpress/i18n";
 
 // src/components/style-sections/typography-section/column-count-field.tsx
 import * as React67 from "react";
 import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
-import { __ as __41 } from "@wordpress/i18n";
-var COLUMN_COUNT_LABEL = __41("Columns", "elementor");
+import { __ as __43 } from "@wordpress/i18n";
+var COLUMN_COUNT_LABEL = __43("Columns", "elementor");
 var ColumnCountField = () => {
   return /* @__PURE__ */ React67.createElement(StylesField, { bind: "column-count", propDisplayName: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ React67.createElement(NumberControl4, { shouldForceInt: true, min: 0, step: 1 })));
 };
@@ -3860,8 +3957,8 @@ var ColumnCountField = () => {
 import * as React68 from "react";
 import { useRef as useRef10 } from "react";
 import { SizeControl as SizeControl7 } from "@elementor/editor-controls";
-import { __ as __42 } from "@wordpress/i18n";
-var COLUMN_GAP_LABEL = __42("Column gap", "elementor");
+import { __ as __44 } from "@wordpress/i18n";
+var COLUMN_GAP_LABEL = __44("Column gap", "elementor");
 var ColumnGapField = () => {
   const rowRef = useRef10(null);
   return /* @__PURE__ */ React68.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React68.createElement(SizeControl7, { anchorRef: rowRef })));
@@ -3870,15 +3967,15 @@ var ColumnGapField = () => {
 // src/components/style-sections/typography-section/font-family-field.tsx
 import * as React69 from "react";
 import { FontFamilyControl } from "@elementor/editor-controls";
-import { __ as __44 } from "@wordpress/i18n";
+import { __ as __46 } from "@wordpress/i18n";
 
 // src/components/style-sections/typography-section/hooks/use-font-families.ts
 import { useMemo as useMemo7 } from "react";
-import { __ as __43 } from "@wordpress/i18n";
+import { __ as __45 } from "@wordpress/i18n";
 var supportedCategories = {
-  system: __43("System", "elementor"),
-  custom: __43("Custom Fonts", "elementor"),
-  googlefonts: __43("Google Fonts", "elementor")
+  system: __45("System", "elementor"),
+  custom: __45("Custom Fonts", "elementor"),
+  googlefonts: __45("Google Fonts", "elementor")
 };
 var getFontFamilies = () => {
   const { controls } = getElementorConfig();
@@ -3910,7 +4007,7 @@ var useFontFamilies = () => {
 };
 
 // src/components/style-sections/typography-section/font-family-field.tsx
-var FONT_FAMILY_LABEL = __44("Font family", "elementor");
+var FONT_FAMILY_LABEL = __46("Font family", "elementor");
 var FontFamilyField = () => {
   const fontFamilies = useFontFamilies();
   const sectionWidth = useSectionWidth();
@@ -3924,8 +4021,8 @@ var FontFamilyField = () => {
 import * as React70 from "react";
 import { useRef as useRef11 } from "react";
 import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
-import { __ as __45 } from "@wordpress/i18n";
-var FONT_SIZE_LABEL = __45("Font size", "elementor");
+import { __ as __47 } from "@wordpress/i18n";
+var FONT_SIZE_LABEL = __47("Font size", "elementor");
 var FontSizeField = () => {
   const rowRef = useRef11(null);
   return /* @__PURE__ */ React70.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React70.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React70.createElement(SizeControl8, { anchorRef: rowRef })));
@@ -3935,18 +4032,18 @@ var FontSizeField = () => {
 import * as React71 from "react";
 import { ToggleControl as ToggleControl9 } from "@elementor/editor-controls";
 import { ItalicIcon, MinusIcon as MinusIcon2 } from "@elementor/icons";
-import { __ as __46 } from "@wordpress/i18n";
-var FONT_STYLE_LABEL = __46("Font style", "elementor");
+import { __ as __48 } from "@wordpress/i18n";
+var FONT_STYLE_LABEL = __48("Font style", "elementor");
 var options7 = [
   {
     value: "normal",
-    label: __46("Normal", "elementor"),
+    label: __48("Normal", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(MinusIcon2, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "italic",
-    label: __46("Italic", "elementor"),
+    label: __48("Italic", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(ItalicIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -3958,18 +4055,18 @@ var FontStyleField = () => {
 // src/components/style-sections/typography-section/font-weight-field.tsx
 import * as React72 from "react";
 import { SelectControl as SelectControl5 } from "@elementor/editor-controls";
-import { __ as __47 } from "@wordpress/i18n";
-var FONT_WEIGHT_LABEL = __47("Font weight", "elementor");
+import { __ as __49 } from "@wordpress/i18n";
+var FONT_WEIGHT_LABEL = __49("Font weight", "elementor");
 var fontWeightOptions = [
-  { value: "100", label: __47("100 - Thin", "elementor") },
-  { value: "200", label: __47("200 - Extra light", "elementor") },
-  { value: "300", label: __47("300 - Light", "elementor") },
-  { value: "400", label: __47("400 - Normal", "elementor") },
-  { value: "500", label: __47("500 - Medium", "elementor") },
-  { value: "600", label: __47("600 - Semi bold", "elementor") },
-  { value: "700", label: __47("700 - Bold", "elementor") },
-  { value: "800", label: __47("800 - Extra bold", "elementor") },
-  { value: "900", label: __47("900 - Black", "elementor") }
+  { value: "100", label: __49("100 - Thin", "elementor") },
+  { value: "200", label: __49("200 - Extra light", "elementor") },
+  { value: "300", label: __49("300 - Light", "elementor") },
+  { value: "400", label: __49("400 - Normal", "elementor") },
+  { value: "500", label: __49("500 - Medium", "elementor") },
+  { value: "600", label: __49("600 - Semi bold", "elementor") },
+  { value: "700", label: __49("700 - Bold", "elementor") },
+  { value: "800", label: __49("800 - Extra bold", "elementor") },
+  { value: "900", label: __49("900 - Black", "elementor") }
 ];
 var FontWeightField = () => {
   return /* @__PURE__ */ React72.createElement(StylesField, { bind: "font-weight", propDisplayName: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ React72.createElement(SelectControl5, { options: fontWeightOptions })));
@@ -3979,8 +4076,8 @@ var FontWeightField = () => {
 import * as React73 from "react";
 import { useRef as useRef12 } from "react";
 import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
-import { __ as __48 } from "@wordpress/i18n";
-var LETTER_SPACING_LABEL = __48("Letter spacing", "elementor");
+import { __ as __50 } from "@wordpress/i18n";
+var LETTER_SPACING_LABEL = __50("Letter spacing", "elementor");
 var LetterSpacingField = () => {
   const rowRef = useRef12(null);
   return /* @__PURE__ */ React73.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React73.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React73.createElement(SizeControl9, { anchorRef: rowRef })));
@@ -3990,8 +4087,8 @@ var LetterSpacingField = () => {
 import * as React74 from "react";
 import { useRef as useRef13 } from "react";
 import { SizeControl as SizeControl10 } from "@elementor/editor-controls";
-import { __ as __49 } from "@wordpress/i18n";
-var LINE_HEIGHT_LABEL = __49("Line height", "elementor");
+import { __ as __51 } from "@wordpress/i18n";
+var LINE_HEIGHT_LABEL = __51("Line height", "elementor");
 var LineHeightField = () => {
   const rowRef = useRef13(null);
   return /* @__PURE__ */ React74.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React74.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React74.createElement(SizeControl10, { anchorRef: rowRef })));
@@ -4002,32 +4099,32 @@ import * as React75 from "react";
 import { ToggleControl as ToggleControl10 } from "@elementor/editor-controls";
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from "@elementor/icons";
 import { withDirection as withDirection9 } from "@elementor/ui";
-import { __ as __50 } from "@wordpress/i18n";
-var TEXT_ALIGNMENT_LABEL = __50("Text align", "elementor");
+import { __ as __52 } from "@wordpress/i18n";
+var TEXT_ALIGNMENT_LABEL = __52("Text align", "elementor");
 var AlignStartIcon = withDirection9(AlignLeftIcon);
 var AlignEndIcon = withDirection9(AlignRightIcon);
 var options8 = [
   {
     value: "start",
-    label: __50("Start", "elementor"),
+    label: __52("Start", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignStartIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "center",
-    label: __50("Center", "elementor"),
+    label: __52("Center", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignCenterIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "end",
-    label: __50("End", "elementor"),
+    label: __52("End", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignEndIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "justify",
-    label: __50("Justify", "elementor"),
+    label: __52("Justify", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(AlignJustifiedIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -4039,8 +4136,8 @@ var TextAlignmentField = () => {
 // src/components/style-sections/typography-section/text-color-field.tsx
 import * as React76 from "react";
 import { ColorControl as ColorControl2 } from "@elementor/editor-controls";
-import { __ as __51 } from "@wordpress/i18n";
-var TEXT_COLOR_LABEL = __51("Text color", "elementor");
+import { __ as __53 } from "@wordpress/i18n";
+var TEXT_COLOR_LABEL = __53("Text color", "elementor");
 var TextColorField = () => {
   return /* @__PURE__ */ React76.createElement(StylesField, { bind: "color", propDisplayName: TEXT_COLOR_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ React76.createElement(ColorControl2, null)));
 };
@@ -4049,31 +4146,31 @@ var TextColorField = () => {
 import * as React77 from "react";
 import { ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
 import { MinusIcon as MinusIcon3, OverlineIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
-import { __ as __52 } from "@wordpress/i18n";
-var TEXT_DECORATION_LABEL = __52("Line decoration", "elementor");
+import { __ as __54 } from "@wordpress/i18n";
+var TEXT_DECORATION_LABEL = __54("Line decoration", "elementor");
 var options9 = [
   {
     value: "none",
-    label: __52("None", "elementor"),
+    label: __54("None", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(MinusIcon3, { fontSize: size }),
     showTooltip: true,
     exclusive: true
   },
   {
     value: "underline",
-    label: __52("Underline", "elementor"),
+    label: __54("Underline", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(UnderlineIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "line-through",
-    label: __52("Line-through", "elementor"),
+    label: __54("Line-through", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(StrikethroughIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "overline",
-    label: __52("Overline", "elementor"),
+    label: __54("Overline", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(OverlineIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -4084,18 +4181,18 @@ var TextDecorationField = () => /* @__PURE__ */ React77.createElement(StylesFiel
 import * as React78 from "react";
 import { ToggleControl as ToggleControl12 } from "@elementor/editor-controls";
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
-import { __ as __53 } from "@wordpress/i18n";
-var TEXT_DIRECTION_LABEL = __53("Direction", "elementor");
+import { __ as __55 } from "@wordpress/i18n";
+var TEXT_DIRECTION_LABEL = __55("Direction", "elementor");
 var options10 = [
   {
     value: "ltr",
-    label: __53("Left to right", "elementor"),
+    label: __55("Left to right", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(TextDirectionLtrIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "rtl",
-    label: __53("Right to left", "elementor"),
+    label: __55("Right to left", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(TextDirectionRtlIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -4107,7 +4204,7 @@ var TextDirectionField = () => {
 // src/components/style-sections/typography-section/text-stroke-field.tsx
 import * as React79 from "react";
 import { StrokeControl } from "@elementor/editor-controls";
-import { __ as __54 } from "@wordpress/i18n";
+import { __ as __56 } from "@wordpress/i18n";
 var initTextStroke = {
   $$type: "stroke",
   value: {
@@ -4124,9 +4221,11 @@ var initTextStroke = {
     }
   }
 };
-var TEXT_STROKE_LABEL = __54("Text stroke", "elementor");
+var TEXT_STROKE_LABEL = __56("Text stroke", "elementor");
 var TextStrokeField = () => {
-  const { value, setValue, canEdit } = useStylesField("stroke");
+  const { value, setValue, canEdit } = useStylesField("stroke", {
+    history: { propDisplayName: TEXT_STROKE_LABEL }
+  });
   const addTextStroke = () => {
     setValue(initTextStroke);
   };
@@ -4151,30 +4250,30 @@ var TextStrokeField = () => {
 import * as React80 from "react";
 import { ToggleControl as ToggleControl13 } from "@elementor/editor-controls";
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon4 } from "@elementor/icons";
-import { __ as __55 } from "@wordpress/i18n";
-var TEXT_TRANSFORM_LABEL = __55("Text transform", "elementor");
+import { __ as __57 } from "@wordpress/i18n";
+var TEXT_TRANSFORM_LABEL = __57("Text transform", "elementor");
 var options11 = [
   {
     value: "none",
-    label: __55("None", "elementor"),
+    label: __57("None", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(MinusIcon4, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "capitalize",
-    label: __55("Capitalize", "elementor"),
+    label: __57("Capitalize", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(LetterCaseIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "uppercase",
-    label: __55("Uppercase", "elementor"),
+    label: __57("Uppercase", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(LetterCaseUpperIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "lowercase",
-    label: __55("Lowercase", "elementor"),
+    label: __57("Lowercase", "elementor"),
     renderContent: ({ size }) => /* @__PURE__ */ React80.createElement(LetterCaseLowerIcon, { fontSize: size }),
     showTooltip: true
   }
@@ -4185,18 +4284,21 @@ var TransformField = () => /* @__PURE__ */ React80.createElement(StylesField, {
 import * as React81 from "react";
 import { useRef as useRef14 } from "react";
 import { SizeControl as SizeControl11 } from "@elementor/editor-controls";
-import { __ as __56 } from "@wordpress/i18n";
-var WORD_SPACING_LABEL = __56("Word spacing", "elementor");
+import { __ as __58 } from "@wordpress/i18n";
+var WORD_SPACING_LABEL = __58("Word spacing", "elementor");
 var WordSpacingField = () => {
   const rowRef = useRef14(null);
   return /* @__PURE__ */ React81.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React81.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React81.createElement(SizeControl11, { anchorRef: rowRef })));
 };
 
 // src/components/style-sections/typography-section/typography-section.tsx
+var COLUMN_COUNT_LABEL2 = __59("Column count", "elementor");
 var TypographySection = () => {
-  const { value: columnCount } = useStylesField("column-count");
+  const { value: columnCount } = useStylesField("column-count", {
+    history: { propDisplayName: COLUMN_COUNT_LABEL2 }
+  });
   const hasMultiColumns = !!(columnCount?.value && columnCount?.value > 1);
-  const isVersion330Active = isExperimentActive14("e_v_3_30");
+  const isVersion330Active = isExperimentActive15("e_v_3_30");
   return /* @__PURE__ */ React82.createElement(SectionContent, null, /* @__PURE__ */ React82.createElement(FontFamilyField, null), /* @__PURE__ */ React82.createElement(FontWeightField, null), /* @__PURE__ */ React82.createElement(FontSizeField, null), /* @__PURE__ */ React82.createElement(PanelDivider, null), /* @__PURE__ */ React82.createElement(TextAlignmentField, null), /* @__PURE__ */ React82.createElement(TextColorField, null), /* @__PURE__ */ React82.createElement(
     StyleTabCollapsibleContent,
     {
@@ -4218,12 +4320,12 @@ var TypographySection = () => {
 
 // src/components/style-tab-section.tsx
 import * as React83 from "react";
-import { isExperimentActive as isExperimentActive15 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive16 } from "@elementor/editor-v1-adapters";
 var StyleTabSection = ({ section, fields = [] }) => {
   const { component, name, title } = section;
   const tabDefaults = useDefaultPanelSettings();
   const SectionComponent = component;
-  const isExpanded = isExperimentActive15(EXPERIMENTAL_FEATURES.V_3_30) ? tabDefaults.defaultSectionsExpanded.style?.includes(name) : false;
+  const isExpanded = isExperimentActive16(EXPERIMENTAL_FEATURES.V_3_30) ? tabDefaults.defaultSectionsExpanded.style?.includes(name) : false;
   return /* @__PURE__ */ React83.createElement(Section, { title, defaultExpanded: isExpanded, titleEnd: getStylesInheritanceIndicators(fields) }, /* @__PURE__ */ React83.createElement(SectionComponent, null));
 };
 
@@ -4231,7 +4333,7 @@ var StyleTabSection = ({ section, fields = [] }) => {
 var TABS_HEADER_HEIGHT = "37px";
 var stickyHeaderStyles = {
   position: "sticky",
-  zIndex: 1,
+  zIndex: 1100,
   opacity: 1,
   backgroundColor: "background.default",
   transition: "top 300ms ease"
@@ -4258,7 +4360,7 @@ var StyleTab = () => {
         section: {
           component: LayoutSection,
           name: "Layout",
-          title: __57("Layout", "elementor")
+          title: __60("Layout", "elementor")
         },
         fields: [
           "display",
@@ -4277,7 +4379,7 @@ var StyleTab = () => {
         section: {
           component: SpacingSection,
           name: "Spacing",
-          title: __57("Spacing", "elementor")
+          title: __60("Spacing", "elementor")
         },
         fields: ["margin", "padding"]
       }
@@ -4287,7 +4389,7 @@ var StyleTab = () => {
         section: {
           component: SizeSection,
           name: "Size",
-          title: __57("Size", "elementor")
+          title: __60("Size", "elementor")
         },
         fields: [
           "width",
@@ -4307,7 +4409,7 @@ var StyleTab = () => {
         section: {
           component: PositionSection,
           name: "Position",
-          title: __57("Position", "elementor")
+          title: __60("Position", "elementor")
         },
         fields: ["position", "z-index", "scroll-margin-top"]
       }
@@ -4317,7 +4419,7 @@ var StyleTab = () => {
         section: {
           component: TypographySection,
           name: "Typography",
-          title: __57("Typography", "elementor")
+          title: __60("Typography", "elementor")
         },
         fields: [
           "font-family",
@@ -4342,7 +4444,7 @@ var StyleTab = () => {
         section: {
           component: BackgroundSection,
           name: "Background",
-          title: __57("Background", "elementor")
+          title: __60("Background", "elementor")
         },
         fields: ["background"]
       }
@@ -4352,7 +4454,7 @@ var StyleTab = () => {
         section: {
           component: BorderSection,
           name: "Border",
-          title: __57("Border", "elementor")
+          title: __60("Border", "elementor")
         },
         fields: ["border-radius", "border-width", "border-color", "border-style"]
       }
@@ -4362,7 +4464,7 @@ var StyleTab = () => {
         section: {
           component: EffectsSection,
           name: "Effects",
-          title: __57("Effects", "elementor")
+          title: __60("Effects", "elementor")
         },
         fields: ["box-shadow"]
       }
@@ -4390,12 +4492,12 @@ 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__ */ React85.createElement(Fragment10, { key: element.id }, /* @__PURE__ */ React85.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React85.createElement(Fragment9, { key: element.id }, /* @__PURE__ */ React85.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
   const editorDefaults = useDefaultPanelSettings();
-  const defaultComponentTab = isExperimentActive16(EXPERIMENTAL_FEATURES.V_3_30) ? editorDefaults.defaultTab : "settings";
+  const defaultComponentTab = isExperimentActive17(EXPERIMENTAL_FEATURES.V_3_30) ? editorDefaults.defaultTab : "settings";
   const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
   const { getTabProps, getTabPanelProps, getTabsProps } = useTabs(currentTab);
   return /* @__PURE__ */ React85.createElement(ScrollProvider, null, /* @__PURE__ */ React85.createElement(Stack15, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(Stack15, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React85.createElement(
@@ -4410,8 +4512,8 @@ var PanelTabContent = () => {
         setCurrentTab(newValue);
       }
     },
-    /* @__PURE__ */ React85.createElement(Tab, { label: __58("General", "elementor"), ...getTabProps("settings") }),
-    /* @__PURE__ */ React85.createElement(Tab, { label: __58("Style", "elementor"), ...getTabProps("style") })
+    /* @__PURE__ */ React85.createElement(Tab, { label: __61("General", "elementor"), ...getTabProps("settings") }),
+    /* @__PURE__ */ React85.createElement(Tab, { label: __61("Style", "elementor"), ...getTabProps("style") })
   ), /* @__PURE__ */ React85.createElement(Divider6, null)), /* @__PURE__ */ React85.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React85.createElement(SettingsTab, null)), /* @__PURE__ */ React85.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React85.createElement(StyleTab, null))));
 };
 
@@ -4424,8 +4526,8 @@ var EditingPanel = () => {
   if (!element || !elementType) {
     return null;
   }
-  const panelTitle = __59("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React86.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React86.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React86.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React86.createElement(ThemeProvider2, null, /* @__PURE__ */ React86.createElement(Panel, null, /* @__PURE__ */ React86.createElement(PanelHeader, null, /* @__PURE__ */ React86.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React86.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React86.createElement(PanelBody, null, /* @__PURE__ */ React86.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React86.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React86.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React86.createElement(EditingPanelTabs, null)))))))));
+  const panelTitle = __62("Edit %s", "elementor").replace("%s", elementType.title);
+  return /* @__PURE__ */ React86.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React86.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React86.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React86.createElement(ThemeProvider3, null, /* @__PURE__ */ React86.createElement(Panel, null, /* @__PURE__ */ React86.createElement(PanelHeader, null, /* @__PURE__ */ React86.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React86.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React86.createElement(PanelBody, null, /* @__PURE__ */ React86.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React86.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React86.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React86.createElement(EditingPanelTabs, null)))))))));
 };
 
 // src/panel.ts
@@ -4434,22 +4536,21 @@ var { panel, usePanelActions, usePanelStatus } = createPanel({
   component: EditingPanel
 });
 
-// src/components/popover-scrollable-content.tsx
+// src/components/popover-body.tsx
 import * as React87 from "react";
-import { PopoverScrollableContent as BasePopoverScrollableContent } from "@elementor/editor-ui";
-var PopoverScrollableContent = (props) => {
+import { PopoverBody as BasePopoverBody } from "@elementor/editor-ui";
+var PopoverBody = (props) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React87.createElement(BasePopoverScrollableContent, { ...props, width: sectionWidth });
+  return /* @__PURE__ */ React87.createElement(BasePopoverBody, { ...props, width: sectionWidth });
 };
 
 // src/init.ts
 import { injectIntoLogic } from "@elementor/editor";
-import { PrefetchUserData } from "@elementor/editor-current-user";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { blockCommand, isExperimentActive as isExperimentActive17 } from "@elementor/editor-v1-adapters";
+import { blockCommand, isExperimentActive as isExperimentActive18 } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-open-editor-panel.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { __privateListenTo as listenTo, commandStartEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync/is-atomic-widget-selected.ts
@@ -4466,7 +4567,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  useEffect4(() => {
+  useEffect5(() => {
     return listenTo(commandStartEvent("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -4591,12 +4692,12 @@ var Content = ({ rawValue }) => {
 // src/dynamics/components/dynamic-selection-control.tsx
 import * as React91 from "react";
 import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
-import { PopoverHeader as PopoverHeader3, PopoverScrollableContent as PopoverScrollableContent2 } from "@elementor/editor-ui";
+import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
   bindTrigger as bindTrigger2,
-  Box as Box8,
+  Box as Box7,
   Divider as Divider8,
   Grid as Grid5,
   IconButton as IconButton5,
@@ -4609,7 +4710,7 @@ import {
   usePopupState as usePopupState3,
   useTabs as useTabs2
 } from "@elementor/ui";
-import { __ as __61 } from "@wordpress/i18n";
+import { __ as __64 } from "@wordpress/i18n";
 
 // src/hooks/use-persist-dynamic-value.ts
 import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
@@ -4646,13 +4747,13 @@ var DynamicControl = ({ bind, children }) => {
 };
 
 // src/dynamics/components/dynamic-selection.tsx
-import { Fragment as Fragment12, useState as useState13 } from "react";
+import { Fragment as Fragment11, useState as useState13 } from "react";
 import * as React90 from "react";
 import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader2, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
-import { Box as Box7, Divider as Divider7, Link as Link2, Stack as Stack16, Typography as Typography5, useTheme as useTheme3 } from "@elementor/ui";
-import { __ as __60 } from "@wordpress/i18n";
+import { Divider as Divider7, Link as Link2, Stack as Stack16, Typography as Typography5, useTheme as useTheme3 } from "@elementor/ui";
+import { __ as __63 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
 var DynamicSelection = ({ close: closePopover }) => {
   const [searchValue, setSearchValue] = useState13("");
@@ -4687,21 +4788,21 @@ var DynamicSelection = ({ close: closePopover }) => {
       label: item.label
     }))
   ]);
-  return /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React90.createElement(PopoverBody, null, /* @__PURE__ */ React90.createElement(
     PopoverHeader2,
     {
-      title: __60("Dynamic tags", "elementor"),
+      title: __63("Dynamic tags", "elementor"),
       onClose: closePopover,
       icon: /* @__PURE__ */ React90.createElement(DatabaseIcon2, { fontSize: SIZE6 })
     }
-  ), /* @__PURE__ */ React90.createElement(Stack16, null, hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(Fragment12, null, /* @__PURE__ */ React90.createElement(
+  ), hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(Fragment11, null, /* @__PURE__ */ React90.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __60("Search dynamic tags\u2026", "elementor")
+      placeholder: __63("Search dynamic tags\u2026", "elementor")
     }
-  ), /* @__PURE__ */ React90.createElement(Divider7, null), /* @__PURE__ */ React90.createElement(PopoverScrollableContent, null, /* @__PURE__ */ React90.createElement(
+  ), /* @__PURE__ */ React90.createElement(Divider7, null), /* @__PURE__ */ React90.createElement(
     PopoverMenuList,
     {
       items: virtualizedItems,
@@ -4711,7 +4812,7 @@ var DynamicSelection = ({ close: closePopover }) => {
       itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
       noResultsComponent: /* @__PURE__ */ React90.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
     }
-  )))));
+  )));
 };
 var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElement(
   Stack16,
@@ -4725,10 +4826,10 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElem
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React90.createElement(DatabaseIcon2, { fontSize: "large" }),
-  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "subtitle2" }, __60("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __60("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(Link2, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __60("Clear & try again", "elementor")))
+  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "subtitle2" }, __63("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, __63("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(Link2, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __63("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(Box7, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React90.createElement(Divider7, null), /* @__PURE__ */ React90.createElement(
+var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(Divider7, null), /* @__PURE__ */ React90.createElement(
   Stack16,
   {
     gap: 1,
@@ -4740,8 +4841,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(Box7, { sx: { ov
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React90.createElement(DatabaseIcon2, { fontSize: "large" }),
-  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "subtitle2" }, __60("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "caption" }, __60("You'll need Elementor Pro to use this feature.", "elementor"))
+  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "subtitle2" }, __63("Streamline your workflow with dynamic tags", "elementor")),
+  /* @__PURE__ */ React90.createElement(Typography5, { align: "center", variant: "caption" }, __63("You'll need Elementor Pro to use this feature.", "elementor"))
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -4774,7 +4875,7 @@ var DynamicSelectionControl = () => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React91.createElement(Box8, null, /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React91.createElement(Box7, null, /* @__PURE__ */ React91.createElement(
     Tag,
     {
       fullWidth: true,
@@ -4787,7 +4888,7 @@ var DynamicSelectionControl = () => {
         {
           size: SIZE7,
           onClick: removeDynamicTag,
-          "aria-label": __61("Remove dynamic value", "elementor")
+          "aria-label": __64("Remove dynamic value", "elementor")
         },
         /* @__PURE__ */ React91.createElement(XIcon, { fontSize: SIZE7 })
       ))
@@ -4804,7 +4905,7 @@ var DynamicSelectionControl = () => {
       },
       ...bindPopover2(selectionPopoverState)
     },
-    /* @__PURE__ */ React91.createElement(Stack17, null, /* @__PURE__ */ React91.createElement(DynamicSelection, { close: selectionPopoverState.close }))
+    /* @__PURE__ */ React91.createElement(PopoverBody, null, /* @__PURE__ */ React91.createElement(DynamicSelection, { close: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
@@ -4813,26 +4914,26 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
   if (!hasDynamicSettings) {
     return null;
   }
-  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(IconButton5, { size: SIZE7, ...bindTrigger2(popupState), "aria-label": __61("Settings", "elementor") }, /* @__PURE__ */ React91.createElement(SettingsIcon, { fontSize: SIZE7 })), /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(IconButton5, { size: SIZE7, ...bindTrigger2(popupState), "aria-label": __64("Settings", "elementor") }, /* @__PURE__ */ React91.createElement(SettingsIcon, { fontSize: SIZE7 })), /* @__PURE__ */ React91.createElement(
     Popover2,
     {
       disablePortal: true,
       disableScrollLock: true,
-      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
       PaperProps: {
-        sx: { my: 0.5 }
+        sx: { my: 1 }
       },
       ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React91.createElement(PopoverBody, null, /* @__PURE__ */ React91.createElement(
       PopoverHeader3,
       {
         title: dynamicTag.label,
         onClose: popupState.close,
         icon: /* @__PURE__ */ React91.createElement(DatabaseIcon3, { fontSize: SIZE7 })
       }
-    ),
-    /* @__PURE__ */ React91.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls })
+    ), /* @__PURE__ */ React91.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -4841,13 +4942,21 @@ var DynamicSettings = ({ controls }) => {
   if (!tabs.length) {
     return null;
   }
-  return /* @__PURE__ */ React91.createElement(PopoverScrollableContent2, null, /* @__PURE__ */ React91.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React91.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React91.createElement(Divider8, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React91.createElement(TabPanel2, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React91.createElement(Stack17, { p: 2, gap: 2 }, value.items.map((item) => {
-      if (item.type === "control") {
-        return /* @__PURE__ */ React91.createElement(Control3, { key: item.value.bind, control: item.value });
-      }
-      return null;
-    })));
+  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React91.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React91.createElement(Divider8, null), tabs.map(({ value }, index) => {
+    return /* @__PURE__ */ React91.createElement(
+      TabPanel2,
+      {
+        key: index,
+        sx: { flexGrow: 1, py: 0, overflowY: "auto" },
+        ...getTabPanelProps(index)
+      },
+      /* @__PURE__ */ React91.createElement(Stack17, { p: 2, gap: 2 }, value.items.map((item) => {
+        if (item.type === "control") {
+          return /* @__PURE__ */ React91.createElement(Control3, { key: item.value.bind, control: item.value });
+        }
+        return null;
+      }))
+    );
   }));
 };
 var Control3 = ({ control }) => {
@@ -4910,14 +5019,14 @@ function getDynamicValue(name, settings) {
 import * as React92 from "react";
 import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon4 } from "@elementor/icons";
-import { __ as __62 } from "@wordpress/i18n";
+import { __ as __65 } from "@wordpress/i18n";
 var usePropDynamicAction = () => {
   const { propType } = useBoundProp7();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
     icon: DatabaseIcon4,
-    title: __62("Dynamic tags", "elementor"),
+    title: __65("Dynamic tags", "elementor"),
     content: ({ close }) => /* @__PURE__ */ React92.createElement(DynamicSelection, { close })
   };
 };
@@ -4950,7 +5059,7 @@ var init = () => {
 // src/reset-style-props.tsx
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { BrushBigIcon } from "@elementor/icons";
-import { __ as __63 } from "@wordpress/i18n";
+import { __ as __66 } from "@wordpress/i18n";
 var { registerAction } = controlActionsMenu;
 function initResetStyleProps() {
   registerAction({
@@ -4958,13 +5067,13 @@ function initResetStyleProps() {
     useProps: useResetStyleValueProps
   });
 }
-var EXCLUDED_BINDS = ["order", "flex-grow", "flex-shrink", "flex-basis"];
+var EXCLUDED_BINDS = ["flex-grow", "flex-shrink", "flex-basis"];
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
   const { value, setValue, path, bind } = useBoundProp8();
   return {
     visible: isStyle && value !== null && value !== void 0 && path.length <= 2 && !EXCLUDED_BINDS.includes(bind),
-    title: __63("Clear", "elementor"),
+    title: __66("Clear", "elementor"),
     icon: BrushBigIcon,
     onClick: () => setValue(null)
   };
@@ -4993,7 +5102,7 @@ var StyledUnstableColorIndicator = styled7(UnstableColorIndicator)(({ theme }) =
 import * as React94 from "react";
 import { createTransformer as createTransformer3 } from "@elementor/editor-canvas";
 import { Stack as Stack19 } from "@elementor/ui";
-import { __ as __64 } from "@wordpress/i18n";
+import { __ as __67 } from "@wordpress/i18n";
 var backgroundGradientOverlayTransformer = createTransformer3((value) => /* @__PURE__ */ React94.createElement(Stack19, { direction: "row", gap: 10 }, /* @__PURE__ */ React94.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React94.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
@@ -5001,9 +5110,9 @@ var ItemIconGradient = ({ value }) => {
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.type === "linear") {
-    return /* @__PURE__ */ React94.createElement("span", null, __64("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React94.createElement("span", null, __67("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React94.createElement("span", null, __64("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React94.createElement("span", null, __67("Radial Gradient", "elementor"));
 };
 var getGradientValue = (gradient) => {
   const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(",");
@@ -5113,13 +5222,9 @@ function init3() {
     id: "editing-panel-hooks",
     component: EditingPanelHooks
   });
-  injectIntoLogic({
-    id: "current-user-data",
-    component: PrefetchUserData
-  });
   init();
   init2();
-  if (isExperimentActive17(EXPERIMENTAL_FEATURES.V_3_30)) {
+  if (isExperimentActive18(EXPERIMENTAL_FEATURES.V_3_30)) {
     initResetStyleProps();
   }
 }
@@ -5131,7 +5236,7 @@ var blockV1Panel = () => {
 };
 export {
   EXPERIMENTAL_FEATURES,
-  PopoverScrollableContent,
+  PopoverBody,
   controlActionsMenu,
   init3 as init,
   injectIntoClassSelectorActions,