@elementor/editor-editing-panel 1.29.1 → 1.30.0

package/dist/index.mjs

@@ -2,8 +2,8 @@
 import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 
 // src/control-replacement.tsx
-import { createControlReplacement } from "@elementor/editor-controls";
-var { replaceControl, getControlReplacement } = createControlReplacement();
+import { createControlReplacementsRegistry } from "@elementor/editor-controls";
+var { registerControlReplacement, getControlReplacements } = createControlReplacementsRegistry();
 
 // src/components/css-classes/css-class-selector.tsx
 import * as React7 from "react";
@@ -105,7 +105,7 @@ import { Autocomplete, createFilterOptions, TextField } from "@elementor/ui";
 function MultiCombobox({
   actions = [],
   selected,
-  options: options13,
+  options: options12,
   onSelect,
   placeholder,
   ...props
@@ -124,7 +124,7 @@ function MultiCombobox({
       handleHomeEndKeys: true,
       disabled: loading,
       value: selected,
-      options: options13,
+      options: options12,
       renderInput: (params) => /* @__PURE__ */ React4.createElement(
         TextField,
         {
@@ -142,7 +142,7 @@ function MultiCombobox({
         const inputValue = selectedOrInputValue.find((option) => typeof option === "string");
         const optionsAndActions = selectedOrInputValue.filter((option) => typeof option !== "string");
         if (reason === "createOption") {
-          const [firstAction] = filterActions(actions, { options: options13, inputValue: inputValue ?? "" });
+          const [firstAction] = filterActions(actions, { options: options12, inputValue: inputValue ?? "" });
           if (firstAction?.value) {
             return run(firstAction.apply, firstAction.value);
           }
@@ -151,7 +151,7 @@ function MultiCombobox({
         if (reason === "selectOption" && action?.value) {
           return run(action.apply, action.value);
         }
-        const fixedValues = options13.filter((option) => !!option.fixed);
+        const fixedValues = options12.filter((option) => !!option.fixed);
         onSelect?.([.../* @__PURE__ */ new Set([...optionsAndActions, ...fixedValues])]);
       },
       getOptionLabel: (option) => typeof option === "string" ? option : option.label,
@@ -191,8 +191,8 @@ function useActionRunner() {
   };
   return { run, loading };
 }
-function filterActions(actions, { options: options13, inputValue }) {
-  return actions.filter((action) => action.condition(options13, inputValue)).map((action, index) => ({
+function filterActions(actions, { options: options12, inputValue }) {
+  return actions.filter((action) => action.condition(options12, inputValue)).map((action, index) => ({
     label: action.label(inputValue),
     value: inputValue,
     group: action.group,
@@ -489,6 +489,7 @@ function CssClassItem({
         },
         "aria-pressed": isActive,
         sx: (theme) => ({
+          lineHeight: 1,
           cursor: isActive && allowRename && !isShowingState ? "text" : "pointer",
           borderRadius: `${theme.shape.borderRadius * 0.75}px`,
           "&.Mui-focusVisible": {
@@ -548,12 +549,12 @@ var EMPTY_OPTION = {
 };
 var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
 function CssClassSelector() {
-  const options13 = useOptions();
+  const options12 = useOptions();
   const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
   const { id: activeId, setId: setActiveId } = useStyle();
   const actions = useCreateActions({ pushAppliedId, setActiveId });
   const handleApply = useHandleApply(appliedIds, setAppliedIds);
-  const applied = useAppliedOptions(options13, appliedIds);
+  const applied = useAppliedOptions(options12, appliedIds);
   const active = applied.find((option) => option.value === activeId) ?? EMPTY_OPTION;
   const showPlaceholder = applied.every(({ fixed }) => fixed);
   return /* @__PURE__ */ React7.createElement(Stack3, { p: 2 }, /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React7.createElement(FormLabel, { htmlFor: ID, size: "small" }, __3("Classes", "elementor")), /* @__PURE__ */ React7.createElement(Stack3, { direction: "row", gap: 1 }, /* @__PURE__ */ React7.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ React7.createElement(
@@ -562,7 +563,7 @@ function CssClassSelector() {
       id: ID,
       size: "tiny",
       placeholder: showPlaceholder ? __3("Type class name", "elementor") : void 0,
-      options: options13,
+      options: options12,
       selected: applied,
       onSelect: handleApply,
       limitTags: TAGS_LIMIT,
@@ -654,8 +655,8 @@ function useCreateActions({
 function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
 }
-function useAppliedOptions(options13, appliedIds) {
-  const applied = options13.filter((option) => option.value && appliedIds.includes(option.value));
+function useAppliedOptions(options12, appliedIds) {
+  const applied = options12.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = applied.some(
     (option) => option.provider && isElementsStylesProvider2(option.provider)
   );
@@ -712,7 +713,7 @@ import { __createPanel as createPanel } from "@elementor/editor-panels";
 
 // src/components/editing-panel.tsx
 import * as React67 from "react";
-import { ControlActionsProvider, ControlReplacementProvider } from "@elementor/editor-controls";
+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 ThemeProvider9 } from "@elementor/editor-ui";
@@ -1860,41 +1861,78 @@ import {
 } from "@elementor/icons";
 import { DirectionProvider as DirectionProvider3, Grid as Grid4, ThemeProvider as ThemeProvider3, withDirection as withDirection5 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
+var ALIGN_SELF_CHILD_OFFSET_MAP = {
+  row: 90,
+  "row-reverse": 90,
+  column: 0,
+  "column-reverse": 0
+};
 var StartIcon3 = withDirection5(LayoutAlignLeftIcon2);
 var EndIcon3 = withDirection5(LayoutAlignRightIcon2);
 var iconProps3 = {
-  isClockwise: false,
-  offset: 90
+  isClockwise: false
 };
-var options3 = [
+var getOptions = (parentStyleDirection) => [
   {
     value: "start",
     label: __13("Start", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: StartIcon3, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: StartIcon3,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   },
   {
     value: "center",
     label: __13("Center", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: CenterIcon3, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: CenterIcon3,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   },
   {
     value: "end",
     label: __13("End", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: EndIcon3, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: EndIcon3,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   },
   {
     value: "stretch",
     label: __13("Stretch", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(RotatedIcon, { icon: JustifyIcon2, size, ...iconProps3 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React34.createElement(
+      RotatedIcon,
+      {
+        icon: JustifyIcon2,
+        size,
+        offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
+        ...iconProps3
+      }
+    ),
     showTooltip: true
   }
 ];
-var AlignSelfChild = () => {
+var AlignSelfChild = ({ parentStyleDirection }) => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React34.createElement(DirectionProvider3, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(ThemeProvider3, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React34.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, __13("Align self", "elementor"))), /* @__PURE__ */ React34.createElement(Grid4, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React34.createElement(ToggleControl3, { options: options3 }))))));
+  return /* @__PURE__ */ React34.createElement(DirectionProvider3, { rtl: isSiteRtl }, /* @__PURE__ */ React34.createElement(ThemeProvider3, null, /* @__PURE__ */ React34.createElement(StylesField, { bind: "align-self" }, /* @__PURE__ */ React34.createElement(Grid4, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React34.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React34.createElement(ControlLabel, null, __13("Align self", "elementor"))), /* @__PURE__ */ React34.createElement(Grid4, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React34.createElement(ToggleControl3, { options: getOptions(parentStyleDirection) }))))));
 };
 
 // src/components/style-sections/layout-section/display-field.tsx
@@ -1940,7 +1978,7 @@ import { ToggleControl as ToggleControl5 } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
 import { DirectionProvider as DirectionProvider4, Grid as Grid5, ThemeProvider as ThemeProvider4, withDirection as withDirection6 } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
-var options4 = [
+var options3 = [
   {
     value: "row",
     label: __15("Row", "elementor"),
@@ -1974,7 +2012,7 @@ var options4 = [
 ];
 var FlexDirectionField = () => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React36.createElement(DirectionProvider4, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(ThemeProvider4, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React36.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __15("Direction", "elementor"))), /* @__PURE__ */ React36.createElement(Grid5, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React36.createElement(ToggleControl5, { options: options4 }))))));
+  return /* @__PURE__ */ React36.createElement(DirectionProvider4, { rtl: isSiteRtl }, /* @__PURE__ */ React36.createElement(ThemeProvider4, null, /* @__PURE__ */ React36.createElement(StylesField, { bind: "flex-direction" }, /* @__PURE__ */ React36.createElement(Grid5, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React36.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, __15("Direction", "elementor"))), /* @__PURE__ */ React36.createElement(Grid5, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React36.createElement(ToggleControl5, { options: options3 }))))));
 };
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
@@ -2174,7 +2212,7 @@ var iconProps4 = {
   isClockwise: true,
   offset: -90
 };
-var options5 = [
+var options4 = [
   {
     value: "flex-start",
     label: __19("Start", "elementor"),
@@ -2214,7 +2252,7 @@ var options5 = [
 ];
 var JustifyContentField = () => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React40.createElement(DirectionProvider7, { rtl: isSiteRtl }, /* @__PURE__ */ React40.createElement(ThemeProvider7, null, /* @__PURE__ */ React40.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React40.createElement(Stack12, { gap: 0.75 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, __19("Justify content", "elementor")), /* @__PURE__ */ React40.createElement(ToggleControl6, { options: options5, fullWidth: true })))));
+  return /* @__PURE__ */ React40.createElement(DirectionProvider7, { rtl: isSiteRtl }, /* @__PURE__ */ React40.createElement(ThemeProvider7, null, /* @__PURE__ */ React40.createElement(StylesField, { bind: "justify-content" }, /* @__PURE__ */ React40.createElement(Stack12, { gap: 0.75 }, /* @__PURE__ */ React40.createElement(ControlLabel, null, __19("Justify content", "elementor")), /* @__PURE__ */ React40.createElement(ToggleControl6, { options: options4, fullWidth: true })))));
 };
 
 // src/components/style-sections/layout-section/wrap-field.tsx
@@ -2223,7 +2261,7 @@ import { ToggleControl as ToggleControl7 } from "@elementor/editor-controls";
 import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
 import { DirectionProvider as DirectionProvider8, Grid as Grid8, ThemeProvider as ThemeProvider8 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
-var options6 = [
+var options5 = [
   {
     value: "nowrap",
     label: __20("No wrap", "elementor"),
@@ -2245,7 +2283,7 @@ var options6 = [
 ];
 var WrapField = () => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React41.createElement(DirectionProvider8, { rtl: isSiteRtl }, /* @__PURE__ */ React41.createElement(ThemeProvider8, null, /* @__PURE__ */ React41.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React41.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel, null, __20("Wrap", "elementor"))), /* @__PURE__ */ React41.createElement(Grid8, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(ToggleControl7, { options: options6 }))))));
+  return /* @__PURE__ */ React41.createElement(DirectionProvider8, { rtl: isSiteRtl }, /* @__PURE__ */ React41.createElement(ThemeProvider8, null, /* @__PURE__ */ React41.createElement(StylesField, { bind: "flex-wrap" }, /* @__PURE__ */ React41.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React41.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlLabel, null, __20("Wrap", "elementor"))), /* @__PURE__ */ React41.createElement(Grid8, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(ToggleControl7, { options: options5 }))))));
 };
 
 // src/components/style-sections/layout-section/layout-section.tsx
@@ -2256,13 +2294,14 @@ var LayoutSection = () => {
   const { element } = useElement();
   const parent = useParentElement(element.id);
   const parentStyle = useComputedStyle(parent?.id || null);
-  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, null));
+  const parentStyleDirection = parentStyle?.flexDirection ?? "row";
+  return /* @__PURE__ */ React42.createElement(SectionContent, null, /* @__PURE__ */ React42.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ React42.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ React42.createElement(FlexChildFields, { parentStyleDirection }));
 };
 var FlexFields = () => {
   const [flexWrap] = useStylesField("flex-wrap");
   return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(FlexDirectionField, null), /* @__PURE__ */ React42.createElement(JustifyContentField, null), /* @__PURE__ */ React42.createElement(AlignItemsField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(GapControlField, null), /* @__PURE__ */ React42.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ React42.createElement(AlignContentField, null));
 };
-var FlexChildFields = () => /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(ControlFormLabel3, null, __21("Flex child", "elementor")), /* @__PURE__ */ React42.createElement(AlignSelfChild, null), /* @__PURE__ */ React42.createElement(FlexOrderField, null), /* @__PURE__ */ React42.createElement(FlexSizeField, null));
+var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(ControlFormLabel3, null, __21("Flex child", "elementor")), /* @__PURE__ */ React42.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ React42.createElement(FlexOrderField, null), /* @__PURE__ */ React42.createElement(FlexSizeField, null));
 var shouldDisplayFlexFields = (display, local) => {
   const value = display?.value ?? local?.value;
   if (!value) {
@@ -2374,7 +2413,7 @@ import { ToggleControl as ToggleControl8 } from "@elementor/editor-controls";
 import { EyeIcon, EyeOffIcon, LetterAIcon } from "@elementor/icons";
 import { Grid as Grid12 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
-var options7 = [
+var options6 = [
   {
     value: "visible",
     label: __25("Visible", "elementor"),
@@ -2395,7 +2434,7 @@ var options7 = [
   }
 ];
 var OverflowField = () => {
-  return /* @__PURE__ */ React47.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React47.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, __25("Overflow", "elementor"))), /* @__PURE__ */ React47.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(ToggleControl8, { options: options7 }))));
+  return /* @__PURE__ */ React47.createElement(StylesField, { bind: "overflow" }, /* @__PURE__ */ React47.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, __25("Overflow", "elementor"))), /* @__PURE__ */ React47.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React47.createElement(ToggleControl8, { options: options6 }))));
 };
 
 // src/components/style-sections/size-section/size-section.tsx
@@ -2488,11 +2527,11 @@ var supportedCategories = {
 };
 var getFontFamilies = () => {
   const { controls } = getElementorConfig();
-  const options13 = controls?.font?.options;
-  if (!options13) {
+  const options12 = controls?.font?.options;
+  if (!options12) {
     return null;
   }
-  return options13;
+  return options12;
 };
 var useFontFamilies = () => {
   const fontFamilies = getFontFamilies();
@@ -2539,7 +2578,7 @@ import { ControlFormLabel as ControlFormLabel4, ToggleControl as ToggleControl9
 import { ItalicIcon, MinusIcon as MinusIcon2 } from "@elementor/icons";
 import { Grid as Grid16 } from "@elementor/ui";
 import { __ as __32 } from "@wordpress/i18n";
-var options8 = [
+var options7 = [
   {
     value: "normal",
     label: __32("Normal", "elementor"),
@@ -2553,7 +2592,7 @@ var options8 = [
     showTooltip: true
   }
 ];
-var FontStyleField = () => /* @__PURE__ */ React53.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React53.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlFormLabel4, null, __32("Font style", "elementor"))), /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(ToggleControl9, { options: options8 }))));
+var FontStyleField = () => /* @__PURE__ */ React53.createElement(StylesField, { bind: "font-style" }, /* @__PURE__ */ React53.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React53.createElement(ControlFormLabel4, null, __32("Font style", "elementor"))), /* @__PURE__ */ React53.createElement(Grid16, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React53.createElement(ToggleControl9, { options: options7 }))));
 
 // src/components/style-sections/typography-section/font-weight-field.tsx
 import * as React54 from "react";
@@ -2601,7 +2640,7 @@ import { Grid as Grid20, withDirection as withDirection9 } from "@elementor/ui";
 import { __ as __36 } from "@wordpress/i18n";
 var AlignStartIcon = withDirection9(AlignLeftIcon);
 var AlignEndIcon = withDirection9(AlignRightIcon);
-var options9 = [
+var options8 = [
   {
     value: "start",
     label: __36("Start", "elementor"),
@@ -2628,7 +2667,7 @@ var options9 = [
   }
 ];
 var TextAlignmentField = () => {
-  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React57.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, __36("Text align", "elementor"))), /* @__PURE__ */ React57.createElement(Grid20, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React57.createElement(ToggleControl10, { options: options9 }))));
+  return /* @__PURE__ */ React57.createElement(StylesField, { bind: "text-align" }, /* @__PURE__ */ React57.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React57.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React57.createElement(ControlLabel, null, __36("Text align", "elementor"))), /* @__PURE__ */ React57.createElement(Grid20, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React57.createElement(ToggleControl10, { options: options8 }))));
 };
 
 // src/components/style-sections/typography-section/text-color-field.tsx
@@ -2646,7 +2685,7 @@ import { ToggleControl as ToggleControl11 } from "@elementor/editor-controls";
 import { MinusIcon as MinusIcon3, OverlineIcon, StrikethroughIcon, UnderlineIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
 import { __ as __38 } from "@wordpress/i18n";
-var options10 = [
+var options9 = [
   {
     value: "none",
     label: __38("None", "elementor"),
@@ -2673,7 +2712,7 @@ var options10 = [
     showTooltip: true
   }
 ];
-var TextDecorationField = () => /* @__PURE__ */ React59.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React59.createElement(Grid22, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, __38("Line decoration", "elementor"))), /* @__PURE__ */ React59.createElement(Grid22, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React59.createElement(ToggleControl11, { options: options10, exclusive: false }))));
+var TextDecorationField = () => /* @__PURE__ */ React59.createElement(StylesField, { bind: "text-decoration" }, /* @__PURE__ */ React59.createElement(Grid22, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React59.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(ControlLabel, null, __38("Line decoration", "elementor"))), /* @__PURE__ */ React59.createElement(Grid22, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React59.createElement(ToggleControl11, { options: options9, exclusive: false }))));
 
 // src/components/style-sections/typography-section/text-direction-field.tsx
 import * as React60 from "react";
@@ -2681,7 +2720,7 @@ import { ToggleControl as ToggleControl12 } from "@elementor/editor-controls";
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from "@elementor/icons";
 import { Grid as Grid23 } from "@elementor/ui";
 import { __ as __39 } from "@wordpress/i18n";
-var options11 = [
+var options10 = [
   {
     value: "ltr",
     label: __39("Left to right", "elementor"),
@@ -2696,7 +2735,7 @@ var options11 = [
   }
 ];
 var TextDirectionField = () => {
-  return /* @__PURE__ */ React60.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React60.createElement(Grid23, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, __39("Direction", "elementor"))), /* @__PURE__ */ React60.createElement(Grid23, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(ToggleControl12, { options: options11 }))));
+  return /* @__PURE__ */ React60.createElement(StylesField, { bind: "direction" }, /* @__PURE__ */ React60.createElement(Grid23, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React60.createElement(Grid23, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlLabel, null, __39("Direction", "elementor"))), /* @__PURE__ */ React60.createElement(Grid23, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React60.createElement(ToggleControl12, { options: options10 }))));
 };
 
 // src/components/style-sections/typography-section/text-stroke-field.tsx
@@ -2746,7 +2785,7 @@ import { ToggleControl as ToggleControl13 } from "@elementor/editor-controls";
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon as MinusIcon4 } from "@elementor/icons";
 import { Grid as Grid24 } from "@elementor/ui";
 import { __ as __41 } from "@wordpress/i18n";
-var options12 = [
+var options11 = [
   {
     value: "none",
     label: __41("None", "elementor"),
@@ -2772,7 +2811,7 @@ var options12 = [
     showTooltip: true
   }
 ];
-var TransformField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React62.createElement(Grid24, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, __41("Text transform", "elementor"))), /* @__PURE__ */ React62.createElement(Grid24, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(ToggleControl13, { options: options12 }))));
+var TransformField = () => /* @__PURE__ */ React62.createElement(StylesField, { bind: "text-transform" }, /* @__PURE__ */ React62.createElement(Grid24, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, __41("Text transform", "elementor"))), /* @__PURE__ */ React62.createElement(Grid24, { item: true, xs: 6, display: "flex", justifyContent: "end" }, /* @__PURE__ */ React62.createElement(ToggleControl13, { options: options11 }))));
 
 // src/components/style-sections/typography-section/word-spacing-field.tsx
 import * as React63 from "react";
@@ -2834,13 +2873,13 @@ var EditingPanelTabs = () => {
 var { useMenuItems } = controlActionsMenu;
 var EditingPanel = () => {
   const { element, elementType } = useSelectedElement();
-  const controlReplacement = getControlReplacement();
+  const controlReplacements = getControlReplacements();
   const menuItems = useMenuItems().default;
   if (!element || !elementType) {
     return null;
   }
   const panelTitle = __45("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React67.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React67.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React67.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React67.createElement(ThemeProvider9, null, /* @__PURE__ */ React67.createElement(Panel, null, /* @__PURE__ */ React67.createElement(PanelHeader, null, /* @__PURE__ */ React67.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React67.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React67.createElement(PanelBody, null, /* @__PURE__ */ React67.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React67.createElement(ControlReplacementProvider, { ...controlReplacement }, /* @__PURE__ */ React67.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React67.createElement(EditingPanelTabs, null)))))))));
+  return /* @__PURE__ */ React67.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React67.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React67.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React67.createElement(ThemeProvider9, null, /* @__PURE__ */ React67.createElement(Panel, null, /* @__PURE__ */ React67.createElement(PanelHeader, null, /* @__PURE__ */ React67.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React67.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React67.createElement(PanelBody, null, /* @__PURE__ */ React67.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React67.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React67.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React67.createElement(EditingPanelTabs, null)))))))));
 };
 
 // src/panel.ts
@@ -2893,7 +2932,6 @@ import { settingsTransformersRegistry, styleTransformersRegistry } from "@elemen
 
 // src/dynamics/components/dynamic-selection-control.tsx
 import * as React71 from "react";
-import { useId as useId3 } from "react";
 import { ControlFormLabel as ControlFormLabel5, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon2, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
@@ -3061,8 +3099,8 @@ var DynamicSelection = ({ onSelect }) => {
   const { bind, value: dynamicValue, setValue } = useBoundProp4(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
-  const options13 = useFilteredOptions(searchValue);
-  const hasNoDynamicTags = !options13.length && !searchValue.trim();
+  const options12 = useFilteredOptions(searchValue);
+  const hasNoDynamicTags = !options12.length && !searchValue.trim();
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
@@ -3085,7 +3123,7 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React70.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React70.createElement(SearchIcon, { fontSize: SIZE3 }))
       }
     }
-  )), /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, options13.length > 0 ? /* @__PURE__ */ React70.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options13.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(Fragment9, { key: index }, /* @__PURE__ */ React70.createElement(
+  )), /* @__PURE__ */ React70.createElement(Divider6, null), /* @__PURE__ */ React70.createElement(Box3, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React70.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React70.createElement(Fragment9, { key: index }, /* @__PURE__ */ React70.createElement(
     MenuSubheader2,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
@@ -3138,7 +3176,7 @@ var NoDynamicTags = () => /* @__PURE__ */ React70.createElement(Box3, { sx: { ov
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
-  const options13 = dynamicTags.reduce((categories, { name, label, group }) => {
+  const options12 = dynamicTags.reduce((categories, { name, label, group }) => {
     const isVisible = label.toLowerCase().includes(searchValue.trim().toLowerCase());
     if (!isVisible) {
       return categories;
@@ -3149,7 +3187,7 @@ var useFilteredOptions = (searchValue) => {
     categories.get(group)?.push({ label, value: name });
     return categories;
   }, /* @__PURE__ */ new Map());
-  return [...options13];
+  return [...options12];
 };
 
 // src/dynamics/components/dynamic-selection-control.tsx
@@ -3158,9 +3196,8 @@ var DynamicSelectionControl = () => {
   const { setValue: setAnyValue } = useBoundProp5();
   const { bind, value } = useBoundProp5(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
+  const selectionPopoverState = usePopupState3({ variant: "popover" });
   const { name: tagName = "" } = value;
-  const selectionPopoverId = useId3();
-  const selectionPopoverState = usePopupState3({ variant: "popover", popupId: selectionPopoverId });
   const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
     setAnyValue(propValueFromHistory ?? null);
@@ -3198,28 +3235,20 @@ var DynamicSelectionControl = () => {
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupId = useId3();
-  const settingsPopupState = usePopupState3({ variant: "popover", popupId });
+  const popupState = usePopupState3({ variant: "popover" });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
     return null;
   }
-  return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
-    IconButton3,
-    {
-      size: SIZE4,
-      ...bindTrigger2(settingsPopupState),
-      "aria-label": __47("Settings", "elementor")
-    },
-    /* @__PURE__ */ React71.createElement(SettingsIcon, { fontSize: SIZE4 })
-  ), /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(IconButton3, { size: SIZE4, ...bindTrigger2(popupState), "aria-label": __47("Settings", "elementor") }, /* @__PURE__ */ React71.createElement(SettingsIcon, { fontSize: SIZE4 })), /* @__PURE__ */ React71.createElement(
     Popover2,
     {
+      disablePortal: true,
       disableScrollLock: true,
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
-      ...bindPopover2(settingsPopupState)
+      ...bindPopover2(popupState)
     },
-    /* @__PURE__ */ React71.createElement(Paper, { component: Stack19, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography4, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: settingsPopupState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    /* @__PURE__ */ React71.createElement(Paper, { component: Stack19, sx: { minHeight: "300px", width: "220px" } }, /* @__PURE__ */ React71.createElement(Stack19, { direction: "row", alignItems: "center", px: 1.5, pt: 2, pb: 1 }, /* @__PURE__ */ React71.createElement(DatabaseIcon2, { fontSize: SIZE4, sx: { mr: 0.5 } }), /* @__PURE__ */ React71.createElement(Typography4, { variant: "subtitle2" }, dynamicTag.label), /* @__PURE__ */ React71.createElement(IconButton3, { sx: { ml: "auto" }, size: SIZE4, onClick: popupState.close }, /* @__PURE__ */ React71.createElement(XIcon2, { fontSize: SIZE4 }))), /* @__PURE__ */ React71.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -3312,7 +3341,7 @@ var usePropDynamicAction = () => {
 // src/dynamics/init.ts
 var { registerPopoverAction } = controlActionsMenu;
 var init = () => {
-  replaceControl({
+  registerControlReplacement({
     component: DynamicSelectionControl,
     condition: ({ value }) => isDynamicPropValue(value)
   });
@@ -3345,9 +3374,10 @@ var blockV1Panel = () => {
   });
 };
 export {
+  controlActionsMenu,
   init2 as init,
   injectIntoClassSelectorActions,
-  replaceControl,
+  registerControlReplacement,
   useBoundProp7 as useBoundProp,
   usePanelActions,
   usePanelStatus