@elementor/editor-editing-panel 3.35.0-340 → 3.35.0-342

package/dist/index.js

@@ -54,6 +54,7 @@ __export(index_exports, {
   injectIntoPanelHeaderTop: () => injectIntoPanelHeaderTop,
   injectIntoStyleTab: () => injectIntoStyleTab,
   registerControlReplacement: () => registerControlReplacement,
+  registerEditingPanelReplacement: () => registerEditingPanelReplacement,
   registerFieldIndicator: () => registerFieldIndicator,
   registerStyleProviderToColors: () => registerStyleProviderToColors,
   stylesInheritanceTransformersRegistry: () => stylesInheritanceTransformersRegistry,
@@ -65,6 +66,7 @@ __export(index_exports, {
   usePanelActions: () => usePanelActions,
   usePanelStatus: () => usePanelStatus,
   useSectionWidth: () => useSectionWidth,
+  useStateByElement: () => useStateByElement,
   useStyle: () => useStyle,
   useStylesRerender: () => useStylesRerender
 });
@@ -1728,11 +1730,11 @@ var React84 = __toESM(require("react"));
 var import_editor_controls51 = require("@elementor/editor-controls");
 var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons22 = require("@elementor/icons");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_icons21 = require("@elementor/icons");
 var import_locations4 = require("@elementor/locations");
 var import_session8 = require("@elementor/session");
-var import_ui40 = require("@elementor/ui");
+var import_ui39 = require("@elementor/ui");
 var import_i18n57 = require("@wordpress/i18n");
 
 // src/control-replacement.tsx
@@ -1815,6 +1817,18 @@ var controlActionsMenu = (0, import_menus.createMenu)({
   }
 });
 
+// src/editing-panel-replacement-registry.tsx
+var registry = /* @__PURE__ */ new Map();
+var DEFAULT_PRIORITY = 10;
+var registerEditingPanelReplacement = ({
+  id,
+  priority = DEFAULT_PRIORITY,
+  ...props
+}) => {
+  registry.set(id, { ...props, priority });
+};
+var getEditingPanelReplacement = (element, elementType) => Array.from(registry.values()).filter(({ condition }) => condition(element, elementType)).sort((a, b) => a.priority - b.priority)?.[0] ?? null;
+
 // src/components/editing-panel-error-fallback.tsx
 var React14 = __toESM(require("react"));
 var import_ui10 = require("@elementor/ui");
@@ -1826,7 +1840,7 @@ function EditorPanelErrorFallback() {
 var import_react36 = require("react");
 var React83 = __toESM(require("react"));
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_ui39 = require("@elementor/ui");
+var import_ui38 = require("@elementor/ui");
 var import_i18n56 = require("@wordpress/i18n");
 
 // src/contexts/scroll-context.tsx
@@ -1936,7 +1950,8 @@ var import_session5 = require("@elementor/session");
 // src/components/section.tsx
 var React19 = __toESM(require("react"));
 var import_react19 = require("react");
-var import_ui15 = require("@elementor/ui");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_ui14 = require("@elementor/ui");
 
 // src/contexts/section-context.tsx
 var import_react17 = require("react");
@@ -1948,24 +1963,13 @@ var useSectionWidth = () => {
   return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
 };
 
-// src/components/collapse-icon.tsx
-var import_icons3 = require("@elementor/icons");
-var import_ui13 = require("@elementor/ui");
-var CollapseIcon = (0, import_ui13.styled)(import_icons3.ChevronDownIcon, {
-  shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
-  transform: open ? "rotate(180deg)" : "rotate(0deg)",
-  transition: theme.transitions.create("transform", {
-    duration: theme.transitions.duration.standard
-  })
-}));
-
 // src/components/collapsible-content.tsx
 var React18 = __toESM(require("react"));
 var import_react18 = require("react");
-var import_ui14 = require("@elementor/ui");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_ui13 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
-var IndicatorsWrapper = (0, import_ui14.styled)("div")`
+var IndicatorsWrapper = (0, import_ui13.styled)("div")`
 	position: absolute;
 	top: 0;
 	right: ${({ theme }) => theme.spacing(3)};
@@ -1980,20 +1984,20 @@ var CollapsibleContent = ({ children, defaultOpen = false, titleEnd = null }) =>
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
-  return /* @__PURE__ */ React18.createElement(import_ui14.Stack, null, /* @__PURE__ */ React18.createElement(import_ui14.Stack, { sx: { position: "relative" } }, /* @__PURE__ */ React18.createElement(
-    import_ui14.Button,
+  return /* @__PURE__ */ React18.createElement(import_ui13.Stack, null, /* @__PURE__ */ React18.createElement(import_ui13.Stack, { sx: { position: "relative" } }, /* @__PURE__ */ React18.createElement(
+    import_ui13.Button,
     {
       fullWidth: true,
       size: "small",
       color: "secondary",
       variant: "outlined",
       onClick: handleToggle,
-      endIcon: /* @__PURE__ */ React18.createElement(CollapseIcon, { open }),
+      endIcon: /* @__PURE__ */ React18.createElement(import_editor_ui4.CollapseIcon, { open }),
       sx: { my: 0.5 },
       "aria-label": open ? "Show less" : "Show more"
     },
     open ? (0, import_i18n7.__)("Show less", "elementor") : (0, import_i18n7.__)("Show more", "elementor")
-  ), titleEnd && /* @__PURE__ */ React18.createElement(IndicatorsWrapper, null, getCollapsibleValue(titleEnd, open))), /* @__PURE__ */ React18.createElement(import_ui14.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
+  ), titleEnd && /* @__PURE__ */ React18.createElement(IndicatorsWrapper, null, getCollapsibleValue(titleEnd, open))), /* @__PURE__ */ React18.createElement(import_ui13.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
 };
 function getCollapsibleValue(value, isOpen) {
   if (typeof value === "function") {
@@ -2013,7 +2017,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
-    import_ui15.ListItemButton,
+    import_ui14.ListItemButton,
     {
       id: labelId,
       "aria-controls": contentId,
@@ -2021,17 +2025,17 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       onClick: handleClick,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React19.createElement(import_ui15.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React19.createElement(
-      import_ui15.ListItemText,
+    /* @__PURE__ */ React19.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React19.createElement(
+      import_ui14.ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     ), getCollapsibleValue(titleEnd, isOpen)),
-    /* @__PURE__ */ React19.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+    /* @__PURE__ */ React19.createElement(import_editor_ui5.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
   ), /* @__PURE__ */ React19.createElement(
-    import_ui15.Collapse,
+    import_ui14.Collapse,
     {
       id: contentId,
       "aria-labelledby": labelId,
@@ -2039,14 +2043,14 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       timeout: "auto",
       unmountOnExit
     },
-    /* @__PURE__ */ React19.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React19.createElement(import_ui15.Stack, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
-  ), /* @__PURE__ */ React19.createElement(import_ui15.Divider, null));
+    /* @__PURE__ */ React19.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React19.createElement(import_ui14.Stack, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
+  ), /* @__PURE__ */ React19.createElement(import_ui14.Divider, null));
 }
 
 // src/components/settings-control.tsx
 var React24 = __toESM(require("react"));
 var import_editor_controls6 = require("@elementor/editor-controls");
-var import_ui18 = require("@elementor/ui");
+var import_ui17 = require("@elementor/ui");
 
 // src/controls-registry/control.tsx
 var React20 = __toESM(require("react"));
@@ -2119,14 +2123,14 @@ var Control = ({ props, type }) => {
 
 // src/controls-registry/control-type-container.tsx
 var React21 = __toESM(require("react"));
-var import_ui16 = require("@elementor/ui");
+var import_ui15 = require("@elementor/ui");
 var ControlTypeContainer = ({ children, layout }) => {
   if (layout === "custom") {
     return children;
   }
   return /* @__PURE__ */ React21.createElement(StyledContainer, { layout }, children);
 };
-var StyledContainer = (0, import_ui16.styled)(import_ui16.Box, {
+var StyledContainer = (0, import_ui15.styled)(import_ui15.Box, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
 })(({ layout, theme }) => ({
   display: "grid",
@@ -2380,7 +2384,7 @@ var indicatorsRegistry = {
   settings: /* @__PURE__ */ new Map(),
   styles: /* @__PURE__ */ new Map()
 };
-var DEFAULT_PRIORITY = 10;
+var DEFAULT_PRIORITY2 = 10;
 var FIELD_TYPE = {
   SETTINGS: "settings",
   STYLES: "styles"
@@ -2389,7 +2393,7 @@ var registerFieldIndicator = ({
   fieldType,
   id,
   indicator,
-  priority = DEFAULT_PRIORITY
+  priority = DEFAULT_PRIORITY2
 }) => {
   indicatorsRegistry[fieldType].set(id, { id, indicator, priority });
 };
@@ -2398,13 +2402,13 @@ var getFieldIndicators = (fieldType) => Array.from(indicatorsRegistry[fieldType]
 // src/components/control-label.tsx
 var React23 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
-var import_ui17 = require("@elementor/ui");
+var import_ui16 = require("@elementor/ui");
 var ControlLabel = ({ children }) => {
-  return /* @__PURE__ */ React23.createElement(import_ui17.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React23.createElement(import_editor_controls5.ControlFormLabel, null, children), /* @__PURE__ */ React23.createElement(import_editor_controls5.ControlAdornments, null));
+  return /* @__PURE__ */ React23.createElement(import_ui16.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React23.createElement(import_editor_controls5.ControlFormLabel, null, children), /* @__PURE__ */ React23.createElement(import_editor_controls5.ControlAdornments, null));
 };
 
 // src/components/settings-control.tsx
-var Wrapper = (0, import_ui18.styled)("span")`
+var Wrapper = (0, import_ui17.styled)("span")`
 	display: contents;
 `;
 var SettingsControl = ({ control: { value, type } }) => {
@@ -2427,7 +2431,7 @@ var ControlLayout = ({
   controlProps
 }) => {
   const controlType = control.type;
-  return /* @__PURE__ */ React24.createElement(import_editor_controls6.ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, control.meta?.topDivider && /* @__PURE__ */ React24.createElement(import_ui18.Divider, null), /* @__PURE__ */ React24.createElement(Wrapper, { "data-type": "settings-field" }, /* @__PURE__ */ React24.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React24.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ React24.createElement(Control, { type: controlType, props: controlProps }))));
+  return /* @__PURE__ */ React24.createElement(import_editor_controls6.ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, control.meta?.topDivider && /* @__PURE__ */ React24.createElement(import_ui17.Divider, null), /* @__PURE__ */ React24.createElement(Wrapper, { "data-type": "settings-field" }, /* @__PURE__ */ React24.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React24.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ React24.createElement(Control, { type: controlType, props: controlProps }))));
 };
 function populateChildControlProps(props) {
   if (props.childControlType) {
@@ -2491,7 +2495,7 @@ var import_editor_props14 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_locations3 = require("@elementor/locations");
 var import_session7 = require("@elementor/session");
-var import_ui38 = require("@elementor/ui");
+var import_ui37 = require("@elementor/ui");
 var import_i18n55 = require("@wordpress/i18n");
 
 // src/contexts/styles-inheritance-context.tsx
@@ -2864,8 +2868,8 @@ var StylesField = ({ bind, propDisplayName, children }) => {
 
 // src/components/section-content.tsx
 var React28 = __toESM(require("react"));
-var import_ui19 = require("@elementor/ui");
-var SectionContent = ({ gap = 2, sx, children, "aria-label": ariaLabel }) => /* @__PURE__ */ React28.createElement(import_ui19.Stack, { gap, sx: { ...sx }, "aria-label": ariaLabel }, children);
+var import_ui18 = require("@elementor/ui");
+var SectionContent = ({ gap = 2, sx, children, "aria-label": ariaLabel }) => /* @__PURE__ */ React28.createElement(import_ui18.Stack, { gap, sx: { ...sx }, "aria-label": ariaLabel }, children);
 
 // src/components/style-sections/background-section/background-section.tsx
 var BACKGROUND_LABEL = (0, import_i18n9.__)("Background", "elementor");
@@ -2883,7 +2887,7 @@ var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/styles-field-layout.tsx
 var React30 = __toESM(require("react"));
-var import_ui20 = require("@elementor/ui");
+var import_ui19 = require("@elementor/ui");
 var StylesFieldLayout = React30.forwardRef((props, ref) => {
   const { direction = "row", children, label } = props;
   const LayoutComponent = direction === "row" ? Row : Column;
@@ -2892,7 +2896,7 @@ var StylesFieldLayout = React30.forwardRef((props, ref) => {
 var Row = React30.forwardRef(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ React30.createElement(
-      import_ui20.Grid,
+      import_ui19.Grid,
       {
         container: true,
         gap: 2,
@@ -2901,9 +2905,9 @@ var Row = React30.forwardRef(
         ref,
         "aria-label": `${label} control`
       },
-      /* @__PURE__ */ React30.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label)),
+      /* @__PURE__ */ React30.createElement(import_ui19.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label)),
       /* @__PURE__ */ React30.createElement(
-        import_ui20.Grid,
+        import_ui19.Grid,
         {
           item: true,
           xs: 6,
@@ -2918,7 +2922,7 @@ var Row = React30.forwardRef(
 );
 var Column = React30.forwardRef(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ React30.createElement(import_ui20.Stack, { gap: 0.75, ref }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label), children);
+    return /* @__PURE__ */ React30.createElement(import_ui19.Stack, { gap: 0.75, ref }, /* @__PURE__ */ React30.createElement(ControlLabel, null, label), children);
   }
 );
 
@@ -2930,12 +2934,12 @@ var BorderColorField = () => /* @__PURE__ */ React31.createElement(StylesField,
 var React33 = __toESM(require("react"));
 var import_editor_controls11 = require("@elementor/editor-controls");
 var import_editor_props11 = require("@elementor/editor-props");
-var import_icons4 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
+var import_icons3 = require("@elementor/icons");
+var import_ui22 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
 // src/hooks/use-direction.ts
-var import_ui21 = require("@elementor/ui");
+var import_ui20 = require("@elementor/ui");
 
 // src/sync/get-elementor-globals.ts
 var getElementorConfig = () => {
@@ -2949,25 +2953,25 @@ var getElementorFrontendConfig = () => {
 
 // src/hooks/use-direction.ts
 function useDirection() {
-  const theme = (0, import_ui21.useTheme)();
+  const theme = (0, import_ui20.useTheme)();
   const isUiRtl = "rtl" === theme.direction, isSiteRtl = !!getElementorFrontendConfig()?.is_rtl;
   return { isSiteRtl, isUiRtl };
 }
 
 // src/styles-inheritance/components/ui-providers.tsx
 var React32 = __toESM(require("react"));
-var import_ui22 = require("@elementor/ui");
+var import_ui21 = require("@elementor/ui");
 var UiProviders = ({ children }) => {
   const { isSiteRtl } = useDirection();
-  return /* @__PURE__ */ React32.createElement(import_ui22.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui22.ThemeProvider, null, children));
+  return /* @__PURE__ */ React32.createElement(import_ui21.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ React32.createElement(import_ui21.ThemeProvider, null, children));
 };
 
 // src/components/style-sections/border-section/border-radius-field.tsx
 var BORDER_RADIUS_LABEL = (0, import_i18n11.__)("Border radius", "elementor");
-var StartStartIcon = (0, import_ui23.withDirection)(import_icons4.RadiusTopLeftIcon);
-var StartEndIcon = (0, import_ui23.withDirection)(import_icons4.RadiusTopRightIcon);
-var EndStartIcon = (0, import_ui23.withDirection)(import_icons4.RadiusBottomLeftIcon);
-var EndEndIcon = (0, import_ui23.withDirection)(import_icons4.RadiusBottomRightIcon);
+var StartStartIcon = (0, import_ui22.withDirection)(import_icons3.RadiusTopLeftIcon);
+var StartEndIcon = (0, import_ui22.withDirection)(import_icons3.RadiusTopRightIcon);
+var EndStartIcon = (0, import_ui22.withDirection)(import_icons3.RadiusBottomLeftIcon);
+var EndEndIcon = (0, import_ui22.withDirection)(import_icons3.RadiusBottomRightIcon);
 var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n11.__)("Top right", "elementor") : (0, import_i18n11.__)("Top left", "elementor");
 var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n11.__)("Top left", "elementor") : (0, import_i18n11.__)("Top right", "elementor");
 var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n11.__)("Bottom right", "elementor") : (0, import_i18n11.__)("Bottom left", "elementor");
@@ -3001,7 +3005,7 @@ var BorderRadiusField = () => {
     {
       items: getCorners(isSiteRtl),
       label: BORDER_RADIUS_LABEL,
-      icon: /* @__PURE__ */ React33.createElement(import_icons4.BorderCornersIcon, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React33.createElement(import_icons3.BorderCornersIcon, { fontSize: "tiny" }),
       tooltipLabel: (0, import_i18n11.__)("Adjust corners", "elementor"),
       multiSizePropTypeUtil: import_editor_props11.borderRadiusPropTypeUtil
     }
@@ -3030,16 +3034,16 @@ var BorderStyleField = () => /* @__PURE__ */ React34.createElement(StylesField,
 var React35 = __toESM(require("react"));
 var import_editor_controls13 = require("@elementor/editor-controls");
 var import_editor_props12 = require("@elementor/editor-props");
-var import_icons5 = require("@elementor/icons");
-var import_ui24 = require("@elementor/ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui23 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
 var BORDER_WIDTH_LABEL = (0, import_i18n13.__)("Border width", "elementor");
-var InlineStartIcon = (0, import_ui24.withDirection)(import_icons5.SideRightIcon);
-var InlineEndIcon = (0, import_ui24.withDirection)(import_icons5.SideLeftIcon);
+var InlineStartIcon = (0, import_ui23.withDirection)(import_icons4.SideRightIcon);
+var InlineEndIcon = (0, import_ui23.withDirection)(import_icons4.SideLeftIcon);
 var getEdges = (isSiteRtl) => [
   {
     label: (0, import_i18n13.__)("Top", "elementor"),
-    icon: /* @__PURE__ */ React35.createElement(import_icons5.SideTopIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React35.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
     bind: "block-start"
   },
   {
@@ -3049,7 +3053,7 @@ var getEdges = (isSiteRtl) => [
   },
   {
     label: (0, import_i18n13.__)("Bottom", "elementor"),
-    icon: /* @__PURE__ */ React35.createElement(import_icons5.SideBottomIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React35.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
     bind: "block-end"
   },
   {
@@ -3065,7 +3069,7 @@ var BorderWidthField = () => {
     {
       items: getEdges(isSiteRtl),
       label: BORDER_WIDTH_LABEL,
-      icon: /* @__PURE__ */ React35.createElement(import_icons5.SideAllIcon, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React35.createElement(import_icons4.SideAllIcon, { fontSize: "tiny" }),
       tooltipLabel: (0, import_i18n13.__)("Adjust borders", "elementor"),
       multiSizePropTypeUtil: import_editor_props12.borderWidthPropTypeUtil
     }
@@ -3111,8 +3115,8 @@ var getRecentlyUsedList = async (elementId) => {
 
 // src/components/panel-divider.tsx
 var React37 = __toESM(require("react"));
-var import_ui25 = require("@elementor/ui");
-var PanelDivider = () => /* @__PURE__ */ React37.createElement(import_ui25.Divider, { sx: { my: 0.5 } });
+var import_ui24 = require("@elementor/ui");
+var PanelDivider = () => /* @__PURE__ */ React37.createElement(import_ui24.Divider, { sx: { my: 0.5 } });
 
 // src/components/style-sections/effects-section/blend-mode-field.tsx
 var React38 = __toESM(require("react"));
@@ -3203,14 +3207,14 @@ function useComputedStyle(elementId) {
 // src/components/style-sections/layout-section/align-content-field.tsx
 var React42 = __toESM(require("react"));
 var import_editor_controls17 = require("@elementor/editor-controls");
-var import_icons6 = require("@elementor/icons");
-var import_ui27 = require("@elementor/ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui26 = require("@elementor/ui");
 var import_i18n18 = require("@wordpress/i18n");
 
 // src/components/style-sections/layout-section/utils/rotated-icon.tsx
 var React41 = __toESM(require("react"));
 var import_react23 = require("react");
-var import_ui26 = require("@elementor/ui");
+var import_ui25 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
 var FLEX_DIRECTION_LABEL = (0, import_i18n17.__)("Flex direction", "elementor");
 var CLOCKWISE_ANGLES = {
@@ -3240,7 +3244,7 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
   const { value: direction } = useStylesField("flex-direction", {
     history: { propDisplayName: FLEX_DIRECTION_LABEL }
   });
-  const isRtl = "rtl" === (0, import_ui26.useTheme)().direction;
+  const isRtl = "rtl" === (0, import_ui25.useTheme)().direction;
   const rotationMultiplier = isRtl ? -1 : 1;
   const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
   const currentDirection = direction?.value || "row";
@@ -3256,8 +3260,8 @@ var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existi
 
 // src/components/style-sections/layout-section/align-content-field.tsx
 var ALIGN_CONTENT_LABEL = (0, import_i18n18.__)("Align content", "elementor");
-var StartIcon = (0, import_ui27.withDirection)(import_icons6.JustifyTopIcon);
-var EndIcon = (0, import_ui27.withDirection)(import_icons6.JustifyBottomIcon);
+var StartIcon = (0, import_ui26.withDirection)(import_icons5.JustifyTopIcon);
+var EndIcon = (0, import_ui26.withDirection)(import_icons5.JustifyBottomIcon);
 var iconProps = {
   isClockwise: false,
   offset: 0,
@@ -3273,7 +3277,7 @@ var options = [
   {
     value: "center",
     label: (0, import_i18n18.__)("Center", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons6.JustifyCenterIcon, size, ...iconProps }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons5.JustifyCenterIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
@@ -3285,19 +3289,19 @@ var options = [
   {
     value: "space-between",
     label: (0, import_i18n18.__)("Space between", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons6.JustifySpaceBetweenVerticalIcon, size, ...iconProps }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons5.JustifySpaceBetweenVerticalIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
     value: "space-around",
     label: (0, import_i18n18.__)("Space around", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons6.JustifySpaceAroundVerticalIcon, size, ...iconProps }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons5.JustifySpaceAroundVerticalIcon, size, ...iconProps }),
     showTooltip: true
   },
   {
     value: "space-evenly",
     label: (0, import_i18n18.__)("Space evenly", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons6.JustifyDistributeVerticalIcon, size, ...iconProps }),
+    renderContent: ({ size }) => /* @__PURE__ */ React42.createElement(RotatedIcon, { icon: import_icons5.JustifyDistributeVerticalIcon, size, ...iconProps }),
     showTooltip: true
   }
 ];
@@ -3306,12 +3310,12 @@ var AlignContentField = () => /* @__PURE__ */ React42.createElement(StylesField,
 // src/components/style-sections/layout-section/align-items-field.tsx
 var React43 = __toESM(require("react"));
 var import_editor_controls18 = require("@elementor/editor-controls");
-var import_icons7 = require("@elementor/icons");
-var import_ui28 = require("@elementor/ui");
+var import_icons6 = require("@elementor/icons");
+var import_ui27 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 var ALIGN_ITEMS_LABEL = (0, import_i18n19.__)("Align items", "elementor");
-var StartIcon2 = (0, import_ui28.withDirection)(import_icons7.LayoutAlignLeftIcon);
-var EndIcon2 = (0, import_ui28.withDirection)(import_icons7.LayoutAlignRightIcon);
+var StartIcon2 = (0, import_ui27.withDirection)(import_icons6.LayoutAlignLeftIcon);
+var EndIcon2 = (0, import_ui27.withDirection)(import_icons6.LayoutAlignRightIcon);
 var iconProps2 = {
   isClockwise: false,
   offset: 90
@@ -3326,7 +3330,7 @@ var options2 = [
   {
     value: "center",
     label: (0, import_i18n19.__)("Center", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon, { icon: import_icons7.LayoutAlignCenterIcon, size, ...iconProps2 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon, { icon: import_icons6.LayoutAlignCenterIcon, size, ...iconProps2 }),
     showTooltip: true
   },
   {
@@ -3338,7 +3342,7 @@ var options2 = [
   {
     value: "stretch",
     label: (0, import_i18n19.__)("Stretch", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon, { icon: import_icons7.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React43.createElement(RotatedIcon, { icon: import_icons6.LayoutDistributeVerticalIcon, size, ...iconProps2 }),
     showTooltip: true
   }
 ];
@@ -3349,8 +3353,8 @@ var AlignItemsField = () => {
 // src/components/style-sections/layout-section/align-self-child-field.tsx
 var React44 = __toESM(require("react"));
 var import_editor_controls19 = require("@elementor/editor-controls");
-var import_icons8 = require("@elementor/icons");
-var import_ui29 = require("@elementor/ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui28 = require("@elementor/ui");
 var import_i18n20 = require("@wordpress/i18n");
 var ALIGN_SELF_LABEL = (0, import_i18n20.__)("Align self", "elementor");
 var ALIGN_SELF_CHILD_OFFSET_MAP = {
@@ -3359,8 +3363,8 @@ var ALIGN_SELF_CHILD_OFFSET_MAP = {
   column: 0,
   "column-reverse": 0
 };
-var StartIcon3 = (0, import_ui29.withDirection)(import_icons8.LayoutAlignLeftIcon);
-var EndIcon3 = (0, import_ui29.withDirection)(import_icons8.LayoutAlignRightIcon);
+var StartIcon3 = (0, import_ui28.withDirection)(import_icons7.LayoutAlignLeftIcon);
+var EndIcon3 = (0, import_ui28.withDirection)(import_icons7.LayoutAlignRightIcon);
 var iconProps3 = {
   isClockwise: false
 };
@@ -3385,7 +3389,7 @@ var getOptions = (parentStyleDirection) => [
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(
       RotatedIcon,
       {
-        icon: import_icons8.LayoutAlignCenterIcon,
+        icon: import_icons7.LayoutAlignCenterIcon,
         size,
         offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
         ...iconProps3
@@ -3413,7 +3417,7 @@ var getOptions = (parentStyleDirection) => [
     renderContent: ({ size }) => /* @__PURE__ */ React44.createElement(
       RotatedIcon,
       {
-        icon: import_icons8.LayoutDistributeVerticalIcon,
+        icon: import_icons7.LayoutDistributeVerticalIcon,
         size,
         offset: ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection],
         ...iconProps3
@@ -3470,8 +3474,8 @@ var useDisplayPlaceholderValue = () => useStylesInheritanceChain(["display"])[0]
 // src/components/style-sections/layout-section/flex-direction-field.tsx
 var React46 = __toESM(require("react"));
 var import_editor_controls21 = require("@elementor/editor-controls");
-var import_icons9 = require("@elementor/icons");
-var import_ui30 = require("@elementor/ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui29 = require("@elementor/ui");
 var import_i18n22 = require("@wordpress/i18n");
 var FLEX_DIRECTION_LABEL2 = (0, import_i18n22.__)("Direction", "elementor");
 var options3 = [
@@ -3479,7 +3483,7 @@ var options3 = [
     value: "row",
     label: (0, import_i18n22.__)("Row", "elementor"),
     renderContent: ({ size }) => {
-      const StartIcon5 = (0, import_ui30.withDirection)(import_icons9.ArrowRightIcon);
+      const StartIcon5 = (0, import_ui29.withDirection)(import_icons8.ArrowRightIcon);
       return /* @__PURE__ */ React46.createElement(StartIcon5, { fontSize: size });
     },
     showTooltip: true
@@ -3487,14 +3491,14 @@ var options3 = [
   {
     value: "column",
     label: (0, import_i18n22.__)("Column", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons9.ArrowDownSmallIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons8.ArrowDownSmallIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "row-reverse",
     label: (0, import_i18n22.__)("Reversed row", "elementor"),
     renderContent: ({ size }) => {
-      const EndIcon5 = (0, import_ui30.withDirection)(import_icons9.ArrowLeftIcon);
+      const EndIcon5 = (0, import_ui29.withDirection)(import_icons8.ArrowLeftIcon);
       return /* @__PURE__ */ React46.createElement(EndIcon5, { fontSize: size });
     },
     showTooltip: true
@@ -3502,7 +3506,7 @@ var options3 = [
   {
     value: "column-reverse",
     label: (0, import_i18n22.__)("Reversed column", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons9.ArrowUpSmallIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React46.createElement(import_icons8.ArrowUpSmallIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -3514,8 +3518,8 @@ var FlexDirectionField = () => {
 var React47 = __toESM(require("react"));
 var import_react24 = require("react");
 var import_editor_controls22 = require("@elementor/editor-controls");
-var import_icons10 = require("@elementor/icons");
-var import_ui31 = require("@elementor/ui");
+var import_icons9 = require("@elementor/icons");
+var import_ui30 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
 var ORDER_LABEL = (0, import_i18n23.__)("Order", "elementor");
 var FIRST_DEFAULT_VALUE = -99999;
@@ -3531,19 +3535,19 @@ var items = [
   {
     value: FIRST,
     label: (0, import_i18n23.__)("First", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons10.ArrowUpSmallIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons9.ArrowUpSmallIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: LAST,
     label: (0, import_i18n23.__)("Last", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons10.ArrowDownSmallIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons9.ArrowDownSmallIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: CUSTOM,
     label: (0, import_i18n23.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons10.PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React47.createElement(import_icons9.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -3603,7 +3607,7 @@ function FlexOrderFieldContent() {
       placeholder: groupPlaceholder,
       disabled: !canEdit
     }
-  )), isCustomVisible && /* @__PURE__ */ React47.createElement(import_ui31.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, (0, import_i18n23.__)("Custom order", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui31.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React47.createElement(
+  )), isCustomVisible && /* @__PURE__ */ React47.createElement(import_ui30.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(import_ui30.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, (0, import_i18n23.__)("Custom order", "elementor"))), /* @__PURE__ */ React47.createElement(import_ui30.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "end" } }, /* @__PURE__ */ React47.createElement(
     import_editor_controls22.NumberControl,
     {
       min: FIRST_DEFAULT_VALUE + 1,
@@ -3631,7 +3635,7 @@ var React48 = __toESM(require("react"));
 var import_react25 = require("react");
 var import_editor_controls23 = require("@elementor/editor-controls");
 var import_editor_props13 = require("@elementor/editor-props");
-var import_icons11 = require("@elementor/icons");
+var import_icons10 = require("@elementor/icons");
 var import_i18n24 = require("@wordpress/i18n");
 var FLEX_SIZE_LABEL = (0, import_i18n24.__)("Flex Size", "elementor");
 var DEFAULT = 1;
@@ -3639,19 +3643,19 @@ var items2 = [
   {
     value: "flex-grow",
     label: (0, import_i18n24.__)("Grow", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons11.ExpandIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons10.ExpandIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "flex-shrink",
     label: (0, import_i18n24.__)("Shrink", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons11.ShrinkIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons10.ShrinkIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: (0, import_i18n24.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons11.PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(import_icons10.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -3771,12 +3775,12 @@ var GapControlField = () => {
 // src/components/style-sections/layout-section/justify-content-field.tsx
 var React50 = __toESM(require("react"));
 var import_editor_controls25 = require("@elementor/editor-controls");
-var import_icons12 = require("@elementor/icons");
-var import_ui32 = require("@elementor/ui");
+var import_icons11 = require("@elementor/icons");
+var import_ui31 = require("@elementor/ui");
 var import_i18n26 = require("@wordpress/i18n");
 var JUSTIFY_CONTENT_LABEL = (0, import_i18n26.__)("Justify content", "elementor");
-var StartIcon4 = (0, import_ui32.withDirection)(import_icons12.JustifyTopIcon);
-var EndIcon4 = (0, import_ui32.withDirection)(import_icons12.JustifyBottomIcon);
+var StartIcon4 = (0, import_ui31.withDirection)(import_icons11.JustifyTopIcon);
+var EndIcon4 = (0, import_ui31.withDirection)(import_icons11.JustifyBottomIcon);
 var iconProps4 = {
   isClockwise: true,
   offset: -90
@@ -3791,7 +3795,7 @@ var options4 = [
   {
     value: "center",
     label: (0, import_i18n26.__)("Center", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons12.JustifyCenterIcon, size, ...iconProps4 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons11.JustifyCenterIcon, size, ...iconProps4 }),
     showTooltip: true
   },
   {
@@ -3803,19 +3807,19 @@ var options4 = [
   {
     value: "space-between",
     label: (0, import_i18n26.__)("Space between", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceBetweenVerticalIcon, size, ...iconProps4 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons11.JustifySpaceBetweenVerticalIcon, size, ...iconProps4 }),
     showTooltip: true
   },
   {
     value: "space-around",
     label: (0, import_i18n26.__)("Space around", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons12.JustifySpaceAroundVerticalIcon, size, ...iconProps4 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons11.JustifySpaceAroundVerticalIcon, size, ...iconProps4 }),
     showTooltip: true
   },
   {
     value: "space-evenly",
     label: (0, import_i18n26.__)("Space evenly", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons12.JustifyDistributeVerticalIcon, size, ...iconProps4 }),
+    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(RotatedIcon, { icon: import_icons11.JustifyDistributeVerticalIcon, size, ...iconProps4 }),
     showTooltip: true
   }
 ];
@@ -3824,26 +3828,26 @@ var JustifyContentField = () => /* @__PURE__ */ React50.createElement(StylesFiel
 // src/components/style-sections/layout-section/wrap-field.tsx
 var React51 = __toESM(require("react"));
 var import_editor_controls26 = require("@elementor/editor-controls");
-var import_icons13 = require("@elementor/icons");
+var import_icons12 = require("@elementor/icons");
 var import_i18n27 = require("@wordpress/i18n");
 var FLEX_WRAP_LABEL = (0, import_i18n27.__)("Wrap", "elementor");
 var options5 = [
   {
     value: "nowrap",
     label: (0, import_i18n27.__)("No wrap", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons13.ArrowRightIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons12.ArrowRightIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "wrap",
     label: (0, import_i18n27.__)("Wrap", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons13.ArrowBackIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons12.ArrowBackIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "wrap-reverse",
     label: (0, import_i18n27.__)("Reversed wrap", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons13.ArrowForwardIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(import_icons12.ArrowForwardIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -3890,14 +3894,14 @@ var import_i18n33 = require("@wordpress/i18n");
 var React53 = __toESM(require("react"));
 var import_react26 = require("react");
 var import_editor_controls28 = require("@elementor/editor-controls");
-var import_icons14 = require("@elementor/icons");
-var import_ui33 = require("@elementor/ui");
+var import_icons13 = require("@elementor/icons");
+var import_ui32 = require("@elementor/ui");
 var import_i18n29 = require("@wordpress/i18n");
-var InlineStartIcon2 = (0, import_ui33.withDirection)(import_icons14.SideLeftIcon);
-var InlineEndIcon2 = (0, import_ui33.withDirection)(import_icons14.SideRightIcon);
+var InlineStartIcon2 = (0, import_ui32.withDirection)(import_icons13.SideLeftIcon);
+var InlineEndIcon2 = (0, import_ui32.withDirection)(import_icons13.SideRightIcon);
 var sideIcons = {
-  "inset-block-start": /* @__PURE__ */ React53.createElement(import_icons14.SideTopIcon, { fontSize: "tiny" }),
-  "inset-block-end": /* @__PURE__ */ React53.createElement(import_icons14.SideBottomIcon, { fontSize: "tiny" }),
+  "inset-block-start": /* @__PURE__ */ React53.createElement(import_icons13.SideTopIcon, { fontSize: "tiny" }),
+  "inset-block-end": /* @__PURE__ */ React53.createElement(import_icons13.SideBottomIcon, { fontSize: "tiny" }),
   "inset-inline-start": /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: InlineStartIcon2, size: "tiny" }),
   "inset-inline-end": /* @__PURE__ */ React53.createElement(RotatedIcon, { icon: InlineEndIcon2, size: "tiny" })
 };
@@ -3906,14 +3910,14 @@ var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n29.__)("Left",
 var DimensionsField = () => {
   const { isSiteRtl } = useDirection();
   const rowRefs = [(0, import_react26.useRef)(null), (0, import_react26.useRef)(null)];
-  return /* @__PURE__ */ React53.createElement(UiProviders, null, /* @__PURE__ */ React53.createElement(import_ui33.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React53.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n29.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React53.createElement(UiProviders, null, /* @__PURE__ */ React53.createElement(import_ui32.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React53.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n29.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React53.createElement(
     DimensionField,
     {
       side: "inset-inline-end",
       label: getInlineEndLabel(isSiteRtl),
       rowRef: rowRefs[0]
     }
-  )), /* @__PURE__ */ React53.createElement(import_ui33.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React53.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n29.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React53.createElement(
+  )), /* @__PURE__ */ React53.createElement(import_ui32.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[1] }, /* @__PURE__ */ React53.createElement(DimensionField, { side: "inset-block-end", label: (0, import_i18n29.__)("Bottom", "elementor"), rowRef: rowRefs[1] }), /* @__PURE__ */ React53.createElement(
     DimensionField,
     {
       side: "inset-inline-start",
@@ -3926,7 +3930,7 @@ var DimensionField = ({
   side,
   label,
   rowRef
-}) => /* @__PURE__ */ React53.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React53.createElement(import_ui33.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React53.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, label)), /* @__PURE__ */ React53.createElement(import_ui33.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(
+}) => /* @__PURE__ */ React53.createElement(StylesField, { bind: side, propDisplayName: label }, /* @__PURE__ */ React53.createElement(import_ui32.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React53.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(ControlLabel, null, label)), /* @__PURE__ */ React53.createElement(import_ui32.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(
   import_editor_controls28.SizeControl,
   {
     startIcon: sideIcons[side],
@@ -4023,7 +4027,7 @@ var usePersistDimensions = () => {
 var React62 = __toESM(require("react"));
 var import_react28 = require("react");
 var import_editor_controls34 = require("@elementor/editor-controls");
-var import_ui35 = require("@elementor/ui");
+var import_ui34 = require("@elementor/ui");
 var import_i18n37 = require("@wordpress/i18n");
 
 // src/components/style-tab-collapsible-content.tsx
@@ -4032,7 +4036,7 @@ var React59 = __toESM(require("react"));
 // src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
 var React58 = __toESM(require("react"));
 var import_editor_styles_repository13 = require("@elementor/editor-styles-repository");
-var import_ui34 = require("@elementor/ui");
+var import_ui33 = require("@elementor/ui");
 var import_i18n34 = require("@wordpress/i18n");
 var StylesInheritanceSectionIndicators = ({ fields }) => {
   const { id, meta, provider } = useStyle();
@@ -4049,7 +4053,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
   }
   const hasValueLabel = (0, import_i18n34.__)("Has effective styles", "elementor");
   const hasOverridesLabel = (0, import_i18n34.__)("Has overridden styles", "elementor");
-  return /* @__PURE__ */ React58.createElement(import_ui34.Tooltip, { title: (0, import_i18n34.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React58.createElement(import_ui34.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React58.createElement(import_ui33.Tooltip, { title: (0, import_i18n34.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React58.createElement(import_ui33.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React58.createElement(
     StyleIndicator,
     {
       getColor: getStylesProviderThemeColor(provider.getKey()),
@@ -4125,26 +4129,26 @@ var ObjectFitField = () => {
 // src/components/style-sections/size-section/overflow-field.tsx
 var React61 = __toESM(require("react"));
 var import_editor_controls33 = require("@elementor/editor-controls");
-var import_icons15 = require("@elementor/icons");
+var import_icons14 = require("@elementor/icons");
 var import_i18n36 = require("@wordpress/i18n");
 var OVERFLOW_LABEL = (0, import_i18n36.__)("Overflow", "elementor");
 var options6 = [
   {
     value: "visible",
     label: (0, import_i18n36.__)("Visible", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(import_icons15.EyeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(import_icons14.EyeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "hidden",
     label: (0, import_i18n36.__)("Hidden", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(import_icons15.EyeOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(import_icons14.EyeOffIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "auto",
     label: (0, import_i18n36.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(import_icons15.LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(import_icons14.LetterAIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4188,10 +4192,10 @@ var CssSizeProps = [
 var ASPECT_RATIO_LABEL = (0, import_i18n37.__)("Aspect Ratio", "elementor");
 var SizeSection = () => {
   const gridRowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null), (0, import_react28.useRef)(null)];
-  return /* @__PURE__ */ React62.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React62.createElement(import_ui35.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React62.createElement(import_ui35.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React62.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(import_ui35.Stack, null, /* @__PURE__ */ React62.createElement(OverflowField, null)), /* @__PURE__ */ React62.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React62.createElement(import_ui35.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React62.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React62.createElement(import_editor_controls34.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(ObjectFitField, null), /* @__PURE__ */ React62.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n37.__)("Object position", "elementor") }, /* @__PURE__ */ React62.createElement(import_ui35.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(import_editor_controls34.PositionControl, null))))));
+  return /* @__PURE__ */ React62.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React62.createElement(import_ui34.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React62.createElement(import_ui34.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React62.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(import_ui34.Stack, null, /* @__PURE__ */ React62.createElement(OverflowField, null)), /* @__PURE__ */ React62.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React62.createElement(import_ui34.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React62.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React62.createElement(import_editor_controls34.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React62.createElement(PanelDivider, null), /* @__PURE__ */ React62.createElement(ObjectFitField, null), /* @__PURE__ */ React62.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n37.__)("Object position", "elementor") }, /* @__PURE__ */ React62.createElement(import_ui34.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(import_editor_controls34.PositionControl, null))))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
-  return /* @__PURE__ */ React62.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React62.createElement(import_ui35.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React62.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, label)), /* @__PURE__ */ React62.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(import_editor_controls34.SizeControl, { extendedOptions, anchorRef: rowRef }))));
+  return /* @__PURE__ */ React62.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React62.createElement(import_ui34.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React62.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, label)), /* @__PURE__ */ React62.createElement(import_ui34.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(import_editor_controls34.SizeControl, { extendedOptions, anchorRef: rowRef }))));
 };
 
 // src/components/style-sections/spacing-section/spacing-section.tsx
@@ -4310,20 +4314,20 @@ var FontSizeField = () => {
 // src/components/style-sections/typography-section/font-style-field.tsx
 var React68 = __toESM(require("react"));
 var import_editor_controls40 = require("@elementor/editor-controls");
-var import_icons16 = require("@elementor/icons");
+var import_icons15 = require("@elementor/icons");
 var import_i18n44 = require("@wordpress/i18n");
 var FONT_STYLE_LABEL = (0, import_i18n44.__)("Font style", "elementor");
 var options7 = [
   {
     value: "normal",
     label: (0, import_i18n44.__)("Normal", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(import_icons16.MinusIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(import_icons15.MinusIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "italic",
     label: (0, import_i18n44.__)("Italic", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(import_icons16.ItalicIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(import_icons15.ItalicIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4376,12 +4380,12 @@ var LineHeightField = () => {
 // src/components/style-sections/typography-section/text-alignment-field.tsx
 var React72 = __toESM(require("react"));
 var import_editor_controls44 = require("@elementor/editor-controls");
-var import_icons17 = require("@elementor/icons");
-var import_ui36 = require("@elementor/ui");
+var import_icons16 = require("@elementor/icons");
+var import_ui35 = require("@elementor/ui");
 var import_i18n48 = require("@wordpress/i18n");
 var TEXT_ALIGNMENT_LABEL = (0, import_i18n48.__)("Text align", "elementor");
-var AlignStartIcon = (0, import_ui36.withDirection)(import_icons17.AlignLeftIcon);
-var AlignEndIcon = (0, import_ui36.withDirection)(import_icons17.AlignRightIcon);
+var AlignStartIcon = (0, import_ui35.withDirection)(import_icons16.AlignLeftIcon);
+var AlignEndIcon = (0, import_ui35.withDirection)(import_icons16.AlignRightIcon);
 var options8 = [
   {
     value: "start",
@@ -4392,7 +4396,7 @@ var options8 = [
   {
     value: "center",
     label: (0, import_i18n48.__)("Center", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons17.AlignCenterIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons16.AlignCenterIcon, { fontSize: size }),
     showTooltip: true
   },
   {
@@ -4404,7 +4408,7 @@ var options8 = [
   {
     value: "justify",
     label: (0, import_i18n48.__)("Justify", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons17.AlignJustifiedIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React72.createElement(import_icons16.AlignJustifiedIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4424,33 +4428,33 @@ var TextColorField = () => {
 // src/components/style-sections/typography-section/text-decoration-field.tsx
 var React74 = __toESM(require("react"));
 var import_editor_controls46 = require("@elementor/editor-controls");
-var import_icons18 = require("@elementor/icons");
+var import_icons17 = require("@elementor/icons");
 var import_i18n50 = require("@wordpress/i18n");
 var TEXT_DECORATION_LABEL = (0, import_i18n50.__)("Line decoration", "elementor");
 var options9 = [
   {
     value: "none",
     label: (0, import_i18n50.__)("None", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons18.MinusIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons17.MinusIcon, { fontSize: size }),
     showTooltip: true,
     exclusive: true
   },
   {
     value: "underline",
     label: (0, import_i18n50.__)("Underline", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons18.UnderlineIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons17.UnderlineIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "line-through",
     label: (0, import_i18n50.__)("Line-through", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons18.StrikethroughIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons17.StrikethroughIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "overline",
     label: (0, import_i18n50.__)("Overline", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons18.OverlineIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React74.createElement(import_icons17.OverlineIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4459,20 +4463,20 @@ var TextDecorationField = () => /* @__PURE__ */ React74.createElement(StylesFiel
 // src/components/style-sections/typography-section/text-direction-field.tsx
 var React75 = __toESM(require("react"));
 var import_editor_controls47 = require("@elementor/editor-controls");
-var import_icons19 = require("@elementor/icons");
+var import_icons18 = require("@elementor/icons");
 var import_i18n51 = require("@wordpress/i18n");
 var TEXT_DIRECTION_LABEL = (0, import_i18n51.__)("Direction", "elementor");
 var options10 = [
   {
     value: "ltr",
     label: (0, import_i18n51.__)("Left to right", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons19.TextDirectionLtrIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons18.TextDirectionLtrIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "rtl",
     label: (0, import_i18n51.__)("Right to left", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons19.TextDirectionRtlIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons18.TextDirectionRtlIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4487,8 +4491,8 @@ var import_i18n52 = require("@wordpress/i18n");
 
 // src/components/add-or-remove-content.tsx
 var React76 = __toESM(require("react"));
-var import_icons20 = require("@elementor/icons");
-var import_ui37 = require("@elementor/ui");
+var import_icons19 = require("@elementor/icons");
+var import_ui36 = require("@elementor/ui");
 var SIZE3 = "tiny";
 var AddOrRemoveContent = ({
   isAdded,
@@ -4499,7 +4503,7 @@ var AddOrRemoveContent = ({
   renderLabel
 }) => {
   return /* @__PURE__ */ React76.createElement(SectionContent, null, /* @__PURE__ */ React76.createElement(
-    import_ui37.Stack,
+    import_ui36.Stack,
     {
       direction: "row",
       sx: {
@@ -4509,8 +4513,8 @@ var AddOrRemoveContent = ({
       }
     },
     renderLabel(),
-    isAdded ? /* @__PURE__ */ React76.createElement(import_ui37.IconButton, { size: SIZE3, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React76.createElement(import_icons20.MinusIcon, { fontSize: SIZE3 })) : /* @__PURE__ */ React76.createElement(import_ui37.IconButton, { size: SIZE3, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React76.createElement(import_icons20.PlusIcon, { fontSize: SIZE3 }))
-  ), /* @__PURE__ */ React76.createElement(import_ui37.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React76.createElement(SectionContent, null, children)));
+    isAdded ? /* @__PURE__ */ React76.createElement(import_ui36.IconButton, { size: SIZE3, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React76.createElement(import_icons19.MinusIcon, { fontSize: SIZE3 })) : /* @__PURE__ */ React76.createElement(import_ui36.IconButton, { size: SIZE3, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React76.createElement(import_icons19.PlusIcon, { fontSize: SIZE3 }))
+  ), /* @__PURE__ */ React76.createElement(import_ui36.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React76.createElement(SectionContent, null, children)));
 };
 
 // src/components/style-sections/typography-section/text-stroke-field.tsx
@@ -4558,32 +4562,32 @@ var TextStrokeField = () => {
 // src/components/style-sections/typography-section/transform-field.tsx
 var React78 = __toESM(require("react"));
 var import_editor_controls49 = require("@elementor/editor-controls");
-var import_icons21 = require("@elementor/icons");
+var import_icons20 = require("@elementor/icons");
 var import_i18n53 = require("@wordpress/i18n");
 var TEXT_TRANSFORM_LABEL = (0, import_i18n53.__)("Text transform", "elementor");
 var options11 = [
   {
     value: "none",
     label: (0, import_i18n53.__)("None", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.MinusIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons20.MinusIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "capitalize",
     label: (0, import_i18n53.__)("Capitalize", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.LetterCaseIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons20.LetterCaseIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "uppercase",
     label: (0, import_i18n53.__)("Uppercase", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.LetterCaseUpperIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons20.LetterCaseUpperIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "lowercase",
     label: (0, import_i18n53.__)("Lowercase", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.LetterCaseLowerIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons20.LetterCaseLowerIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4669,7 +4673,7 @@ var StyleTab = () => {
       },
       setMetaState: setActiveStyleState
     },
-    /* @__PURE__ */ React82.createElement(import_session7.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React82.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React82.createElement(ClassesHeader, null, /* @__PURE__ */ React82.createElement(CssClassSelector, null), /* @__PURE__ */ React82.createElement(import_ui38.Divider, null)), /* @__PURE__ */ React82.createElement(SectionsList, null, /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React82.createElement(import_session7.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React82.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React82.createElement(ClassesHeader, null, /* @__PURE__ */ React82.createElement(CssClassSelector, null), /* @__PURE__ */ React82.createElement(import_ui37.Divider, null)), /* @__PURE__ */ React82.createElement(SectionsList, null, /* @__PURE__ */ React82.createElement(
       StyleTabSection,
       {
         section: {
@@ -4792,12 +4796,12 @@ var StyleTab = () => {
           "transition"
         ]
       }
-    ), /* @__PURE__ */ React82.createElement(StyleTabSlot, null)), /* @__PURE__ */ React82.createElement(import_ui38.Box, { sx: { height: "150px" } })))
+    ), /* @__PURE__ */ React82.createElement(StyleTabSlot, null)), /* @__PURE__ */ React82.createElement(import_ui37.Box, { sx: { height: "150px" } })))
   ));
 };
 function ClassesHeader({ children }) {
   const scrollDirection = useScrollDirection();
-  return /* @__PURE__ */ React82.createElement(import_ui38.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
+  return /* @__PURE__ */ React82.createElement(import_ui37.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
 }
 function useCurrentClassesProp() {
   const { elementType } = useElement();
@@ -4824,9 +4828,9 @@ var PanelTabContent = () => {
   const defaultComponentTab = editorDefaults.defaultTab;
   const isInteractionsActive = (0, import_editor_v1_adapters6.isExperimentActive)("e_interactions");
   const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
-  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui39.useTabs)(currentTab);
-  return /* @__PURE__ */ React83.createElement(ScrollProvider, null, /* @__PURE__ */ React83.createElement(import_ui39.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React83.createElement(import_ui39.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React83.createElement(
-    import_ui39.Tabs,
+  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui38.useTabs)(currentTab);
+  return /* @__PURE__ */ React83.createElement(ScrollProvider, null, /* @__PURE__ */ React83.createElement(import_ui38.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React83.createElement(import_ui38.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React83.createElement(
+    import_ui38.Tabs,
     {
       variant: "fullWidth",
       size: "small",
@@ -4837,10 +4841,10 @@ var PanelTabContent = () => {
         setCurrentTab(newValue);
       }
     },
-    /* @__PURE__ */ React83.createElement(import_ui39.Tab, { label: (0, import_i18n56.__)("General", "elementor"), ...getTabProps("settings") }),
-    /* @__PURE__ */ React83.createElement(import_ui39.Tab, { label: (0, import_i18n56.__)("Style", "elementor"), ...getTabProps("style") }),
-    isInteractionsActive && /* @__PURE__ */ React83.createElement(import_ui39.Tab, { label: (0, import_i18n56.__)("Interactions", "elementor"), ...getTabProps("interactions") })
-  ), /* @__PURE__ */ React83.createElement(import_ui39.Divider, null)), /* @__PURE__ */ React83.createElement(import_ui39.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React83.createElement(SettingsTab, null)), /* @__PURE__ */ React83.createElement(import_ui39.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React83.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React83.createElement(import_ui39.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React83.createElement(InteractionsTab, null))));
+    /* @__PURE__ */ React83.createElement(import_ui38.Tab, { label: (0, import_i18n56.__)("General", "elementor"), ...getTabProps("settings") }),
+    /* @__PURE__ */ React83.createElement(import_ui38.Tab, { label: (0, import_i18n56.__)("Style", "elementor"), ...getTabProps("style") }),
+    isInteractionsActive && /* @__PURE__ */ React83.createElement(import_ui38.Tab, { label: (0, import_i18n56.__)("Interactions", "elementor"), ...getTabProps("interactions") })
+  ), /* @__PURE__ */ React83.createElement(import_ui38.Divider, null)), /* @__PURE__ */ React83.createElement(import_ui38.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React83.createElement(SettingsTab, null)), /* @__PURE__ */ React83.createElement(import_ui38.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React83.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React83.createElement(import_ui38.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React83.createElement(InteractionsTab, null))));
 };
 
 // src/components/editing-panel.tsx
@@ -4854,15 +4858,20 @@ var EditingPanel = () => {
     return null;
   }
   const panelTitle = (0, import_i18n57.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React84.createElement(import_ui40.ErrorBoundary, { fallback: /* @__PURE__ */ React84.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React84.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React84.createElement(import_editor_ui4.ThemeProvider, null, /* @__PURE__ */ React84.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React84.createElement(PanelHeaderTopSlot, null), /* @__PURE__ */ React84.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React84.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React84.createElement(import_icons22.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React84.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React84.createElement(import_editor_controls51.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React84.createElement(import_editor_controls51.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React84.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React84.createElement(EditingPanelTabs, null)))))))));
+  const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
+  let panelContent = /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React84.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React84.createElement(import_icons21.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React84.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React84.createElement(EditingPanelTabs, null)));
+  if (ReplacementComponent) {
+    panelContent = /* @__PURE__ */ React84.createElement(ReplacementComponent, null);
+  }
+  return /* @__PURE__ */ React84.createElement(import_ui39.ErrorBoundary, { fallback: /* @__PURE__ */ React84.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React84.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React84.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React84.createElement(import_editor_controls51.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React84.createElement(import_editor_controls51.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React84.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React84.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React84.createElement(PanelHeaderTopSlot, null), panelContent)))))));
 };
 
 // src/components/popover-body.tsx
 var React85 = __toESM(require("react"));
-var import_editor_ui5 = require("@elementor/editor-ui");
+var import_editor_ui7 = require("@elementor/editor-ui");
 var PopoverBody = (props) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React85.createElement(import_editor_ui5.PopoverBody, { ...props, width: sectionWidth });
+  return /* @__PURE__ */ React85.createElement(import_editor_ui7.PopoverBody, { ...props, width: sectionWidth });
 };
 
 // src/init.ts
@@ -4915,8 +4924,8 @@ var React86 = __toESM(require("react"));
 var import_editor_controls53 = require("@elementor/editor-controls");
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
-var import_icons23 = require("@elementor/icons");
-var import_ui41 = require("@elementor/ui");
+var import_icons22 = require("@elementor/icons");
+var import_ui40 = require("@elementor/ui");
 var import_i18n59 = require("@wordpress/i18n");
 
 // src/controls-registry/element-controls/get-element-by-type.ts
@@ -5171,7 +5180,7 @@ var ItemLabel = ({ value, index }) => {
   const id = value.id ?? "";
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(id);
   const elementTitle = editorSettings?.title;
-  return /* @__PURE__ */ React86.createElement(import_ui41.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React86.createElement("span", null, elementTitle), /* @__PURE__ */ React86.createElement(ItemDefaultTab, { index }));
+  return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React86.createElement("span", null, elementTitle), /* @__PURE__ */ React86.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
   const { value: defaultItem } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
@@ -5179,19 +5188,19 @@ var ItemDefaultTab = ({ index }) => {
   if (!isDefault) {
     return null;
   }
-  return /* @__PURE__ */ React86.createElement(import_ui41.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n59.__)("Default", "elementor") });
+  return /* @__PURE__ */ React86.createElement(import_ui40.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n59.__)("Default", "elementor") });
 };
 var ItemContent = ({ value, index }) => {
   if (!value.id) {
     return null;
   }
-  return /* @__PURE__ */ React86.createElement(import_ui41.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React86.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React86.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n59.__)("Tabs", "elementor") }, /* @__PURE__ */ React86.createElement(DefaultTabControl, { tabIndex: index })));
+  return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React86.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React86.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n59.__)("Tabs", "elementor") }, /* @__PURE__ */ React86.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
   const { value, setValue } = (0, import_editor_controls53.useBoundProp)(import_editor_props16.numberPropTypeUtil);
   const isDefault = value === tabIndex;
-  return /* @__PURE__ */ React86.createElement(import_ui41.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React86.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n59.__)("Set as default tab", "elementor")), /* @__PURE__ */ React86.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React86.createElement(
-    import_ui41.Switch,
+  return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React86.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n59.__)("Set as default tab", "elementor")), /* @__PURE__ */ React86.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React86.createElement(
+    import_ui40.Switch,
     {
       size: "small",
       checked: isDefault,
@@ -5208,8 +5217,8 @@ var DefaultTabControl = ({ tabIndex }) => {
 var TabLabelControl = ({ elementId }) => {
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
   const label = editorSettings?.title ?? "";
-  return /* @__PURE__ */ React86.createElement(import_ui41.Stack, { gap: 1 }, /* @__PURE__ */ React86.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n59.__)("Tab name", "elementor")), /* @__PURE__ */ React86.createElement(
-    import_ui41.TextField,
+  return /* @__PURE__ */ React86.createElement(import_ui40.Stack, { gap: 1 }, /* @__PURE__ */ React86.createElement(import_editor_controls53.ControlFormLabel, null, (0, import_i18n59.__)("Tab name", "elementor")), /* @__PURE__ */ React86.createElement(
+    import_ui40.TextField,
     {
       size: "tiny",
       value: label,
@@ -5230,18 +5239,18 @@ var ConditionalTooltip = ({
     return children;
   }
   return /* @__PURE__ */ React86.createElement(
-    import_ui41.Infotip,
+    import_ui40.Infotip,
     {
       arrow: false,
       content: /* @__PURE__ */ React86.createElement(
-        import_ui41.Alert,
+        import_ui40.Alert,
         {
           color: "secondary",
-          icon: /* @__PURE__ */ React86.createElement(import_icons23.InfoCircleFilledIcon, { fontSize: "tiny" }),
+          icon: /* @__PURE__ */ React86.createElement(import_icons22.InfoCircleFilledIcon, { fontSize: "tiny" }),
           size: "small",
           sx: { width: 288 }
         },
-        /* @__PURE__ */ React86.createElement(import_ui41.Typography, { variant: "body2" }, (0, import_i18n59.__)("To change the default tab, simply set another tab as default.", "elementor"))
+        /* @__PURE__ */ React86.createElement(import_ui40.Typography, { variant: "body2" }, (0, import_i18n59.__)("To change the default tab, simply set another tab as default.", "elementor"))
       )
     },
     /* @__PURE__ */ React86.createElement("span", null, children)
@@ -5268,7 +5277,7 @@ var import_editor_controls60 = require("@elementor/editor-controls");
 var React87 = __toESM(require("react"));
 var import_editor_controls55 = require("@elementor/editor-controls");
 var import_editor_props18 = require("@elementor/editor-props");
-var import_icons24 = require("@elementor/icons");
+var import_icons23 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
 var import_react39 = require("react");
@@ -5361,7 +5370,7 @@ var useDynamicTag = (tagName) => {
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
-var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React87.createElement(import_icons24.DatabaseIcon, { fontSize: "tiny" });
+var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React87.createElement(import_icons23.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
   const context = (0, import_editor_controls55.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React87.createElement(import_editor_controls55.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React87.createElement(import_editor_controls55.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React87.createElement(Wrapper2, { rawValue: value.value })));
@@ -5380,9 +5389,9 @@ var Content = ({ rawValue }) => {
 // src/dynamics/components/dynamic-selection-control.tsx
 var React91 = __toESM(require("react"));
 var import_editor_controls58 = require("@elementor/editor-controls");
-var import_editor_ui7 = require("@elementor/editor-ui");
-var import_icons26 = require("@elementor/icons");
-var import_ui43 = require("@elementor/ui");
+var import_editor_ui9 = require("@elementor/editor-ui");
+var import_icons25 = require("@elementor/icons");
+var import_ui42 = require("@elementor/ui");
 var import_i18n61 = require("@wordpress/i18n");
 
 // src/hooks/use-persist-dynamic-value.ts
@@ -5482,15 +5491,15 @@ var DynamicControl = ({ bind, children }) => {
 var import_react40 = require("react");
 var React90 = __toESM(require("react"));
 var import_editor_controls57 = require("@elementor/editor-controls");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons25 = require("@elementor/icons");
-var import_ui42 = require("@elementor/ui");
+var import_editor_ui8 = require("@elementor/editor-ui");
+var import_icons24 = require("@elementor/icons");
+var import_ui41 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
 var DynamicSelection = ({ close: closePopover }) => {
   const [searchValue, setSearchValue] = (0, import_react40.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-  const theme = (0, import_ui42.useTheme)();
+  const theme = (0, import_ui41.useTheme)();
   const { value: anyValue } = (0, import_editor_controls57.useBoundProp)();
   const { bind, value: dynamicValue, setValue } = (0, import_editor_controls57.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
@@ -5521,21 +5530,21 @@ var DynamicSelection = ({ close: closePopover }) => {
     }))
   ]);
   return /* @__PURE__ */ React90.createElement(PopoverBody, { "aria-label": (0, import_i18n60.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React90.createElement(
-    import_editor_ui6.PopoverHeader,
+    import_editor_ui8.PopoverHeader,
     {
       title: (0, import_i18n60.__)("Dynamic tags", "elementor"),
       onClose: closePopover,
-      icon: /* @__PURE__ */ React90.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE4 })
+      icon: /* @__PURE__ */ React90.createElement(import_icons24.DatabaseIcon, { fontSize: SIZE4 })
     }
   ), hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(import_react40.Fragment, null, /* @__PURE__ */ React90.createElement(
-    import_editor_ui6.SearchField,
+    import_editor_ui8.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,
       placeholder: (0, import_i18n60.__)("Search dynamic tags\u2026", "elementor")
     }
-  ), /* @__PURE__ */ React90.createElement(import_ui42.Divider, null), /* @__PURE__ */ React90.createElement(
-    import_editor_ui6.PopoverMenuList,
+  ), /* @__PURE__ */ React90.createElement(import_ui41.Divider, null), /* @__PURE__ */ React90.createElement(
+    import_editor_ui8.PopoverMenuList,
     {
       items: virtualizedItems,
       onSelect: handleSetDynamicTag,
@@ -5547,7 +5556,7 @@ var DynamicSelection = ({ close: closePopover }) => {
   )));
 };
 var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElement(
-  import_ui42.Stack,
+  import_ui41.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -5557,12 +5566,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElem
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React90.createElement(import_icons25.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React90.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React90.createElement(import_ui42.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n60.__)("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(import_ui42.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n60.__)("Clear & try again", "elementor")))
+  /* @__PURE__ */ React90.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
+  /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n60.__)("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(import_ui41.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n60.__)("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(import_ui42.Divider, null), /* @__PURE__ */ React90.createElement(
-  import_ui42.Stack,
+var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(import_ui41.Divider, null), /* @__PURE__ */ React90.createElement(
+  import_ui41.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -5572,9 +5581,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(React90.Fragment
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React90.createElement(import_icons25.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React90.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React90.createElement(import_ui42.Typography, { align: "center", variant: "caption" }, (0, import_i18n60.__)("You'll need Elementor Pro to use this feature.", "elementor"))
+  /* @__PURE__ */ React90.createElement(import_icons24.DatabaseIcon, { fontSize: "large" }),
+  /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n60.__)("Streamline your workflow with dynamic tags", "elementor")),
+  /* @__PURE__ */ React90.createElement(import_ui41.Typography, { align: "center", variant: "caption" }, (0, import_i18n60.__)("You'll need Elementor Pro to use this feature.", "elementor"))
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -5599,7 +5608,7 @@ var DynamicSelectionControl = () => {
   const { setValue: setAnyValue } = (0, import_editor_controls58.useBoundProp)();
   const { bind, value } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
-  const selectionPopoverState = (0, import_ui43.usePopupState)({ variant: "popover" });
+  const selectionPopoverState = (0, import_ui42.usePopupState)({ variant: "popover" });
   const { name: tagName = "" } = value;
   const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
@@ -5608,26 +5617,26 @@ var DynamicSelectionControl = () => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React91.createElement(import_ui43.Box, null, /* @__PURE__ */ React91.createElement(
-    import_ui43.UnstableTag,
+  return /* @__PURE__ */ React91.createElement(import_ui42.Box, null, /* @__PURE__ */ React91.createElement(
+    import_ui42.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
-      startIcon: /* @__PURE__ */ React91.createElement(import_icons26.DatabaseIcon, { fontSize: SIZE5 }),
-      ...(0, import_ui43.bindTrigger)(selectionPopoverState),
+      startIcon: /* @__PURE__ */ React91.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE5 }),
+      ...(0, import_ui42.bindTrigger)(selectionPopoverState),
       actions: /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(DynamicSettingsPopover, { dynamicTag }), /* @__PURE__ */ React91.createElement(
-        import_ui43.IconButton,
+        import_ui42.IconButton,
         {
           size: SIZE5,
           onClick: removeDynamicTag,
           "aria-label": (0, import_i18n61.__)("Remove dynamic value", "elementor")
         },
-        /* @__PURE__ */ React91.createElement(import_icons26.XIcon, { fontSize: SIZE5 })
+        /* @__PURE__ */ React91.createElement(import_icons25.XIcon, { fontSize: SIZE5 })
       ))
     }
   ), /* @__PURE__ */ React91.createElement(
-    import_ui43.Popover,
+    import_ui42.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -5636,27 +5645,27 @@ var DynamicSelectionControl = () => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui43.bindPopover)(selectionPopoverState)
+      ...(0, import_ui42.bindPopover)(selectionPopoverState)
     },
     /* @__PURE__ */ React91.createElement(PopoverBody, { "aria-label": (0, import_i18n61.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React91.createElement(DynamicSelection, { close: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupState = (0, import_ui43.usePopupState)({ variant: "popover" });
+  const popupState = (0, import_ui42.usePopupState)({ variant: "popover" });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
     return null;
   }
   return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(
-    import_ui43.IconButton,
+    import_ui42.IconButton,
     {
       size: SIZE5,
-      ...(0, import_ui43.bindTrigger)(popupState),
+      ...(0, import_ui42.bindTrigger)(popupState),
       "aria-label": (0, import_i18n61.__)("Dynamic settings", "elementor")
     },
-    /* @__PURE__ */ React91.createElement(import_icons26.SettingsIcon, { fontSize: SIZE5 })
+    /* @__PURE__ */ React91.createElement(import_icons25.SettingsIcon, { fontSize: SIZE5 })
   ), /* @__PURE__ */ React91.createElement(
-    import_ui43.Popover,
+    import_ui42.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -5665,39 +5674,39 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui43.bindPopover)(popupState)
+      ...(0, import_ui42.bindPopover)(popupState)
     },
     /* @__PURE__ */ React91.createElement(PopoverBody, { "aria-label": (0, import_i18n61.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React91.createElement(
-      import_editor_ui7.PopoverHeader,
+      import_editor_ui9.PopoverHeader,
       {
         title: dynamicTag.label,
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React91.createElement(import_icons26.DatabaseIcon, { fontSize: SIZE5 })
+        icon: /* @__PURE__ */ React91.createElement(import_icons25.DatabaseIcon, { fontSize: SIZE5 })
       }
     ), /* @__PURE__ */ React91.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
   ));
 };
 var DynamicSettings = ({ controls, tagName }) => {
   const tabs = controls.filter(({ type }) => type === "section");
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui43.useTabs)(0);
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui42.useTabs)(0);
   if (!tabs.length) {
     return null;
   }
   if (tagsWithoutTabs.includes(tagName)) {
     const singleTab = tabs[0];
-    return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui43.Divider, null), /* @__PURE__ */ React91.createElement(ControlsItemsStack, { items: singleTab.value.items }));
+    return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui42.Divider, null), /* @__PURE__ */ React91.createElement(ControlsItemsStack, { items: singleTab.value.items }));
   }
-  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React91.createElement(import_ui43.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React91.createElement(
-    import_ui43.Tab,
+  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React91.createElement(import_ui42.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React91.createElement(
+    import_ui42.Tab,
     {
       key: index,
       label: value.label,
       sx: { px: 1, py: 0.5 },
       ...getTabProps(index)
     }
-  ))), /* @__PURE__ */ React91.createElement(import_ui43.Divider, null), tabs.map(({ value }, index) => {
+  ))), /* @__PURE__ */ React91.createElement(import_ui42.Divider, null), tabs.map(({ value }, index) => {
     return /* @__PURE__ */ React91.createElement(
-      import_ui43.TabPanel,
+      import_ui42.TabPanel,
       {
         key: index,
         sx: { flexGrow: 1, py: 0, overflowY: "auto" },
@@ -5745,10 +5754,10 @@ var Control2 = ({ control }) => {
     display: "grid",
     gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
   } : {};
-  return /* @__PURE__ */ React91.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React91.createElement(import_ui43.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React91.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React91.createElement(import_editor_controls58.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React91.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React91.createElement(Control, { type: control.type, props: controlProps }))));
+  return /* @__PURE__ */ React91.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React91.createElement(import_ui42.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React91.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React91.createElement(import_editor_controls58.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React91.createElement(import_ui42.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React91.createElement(Control, { type: control.type, props: controlProps }))));
 };
 function ControlsItemsStack({ items: items3 }) {
-  return /* @__PURE__ */ React91.createElement(import_ui43.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
+  return /* @__PURE__ */ React91.createElement(import_ui42.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
     (item) => item.type === "control" ? /* @__PURE__ */ React91.createElement(Control2, { key: item.value.bind, control: item.value }) : null
   ));
 }
@@ -5805,14 +5814,14 @@ function getDynamicValue(name, settings) {
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 var React92 = __toESM(require("react"));
 var import_editor_controls59 = require("@elementor/editor-controls");
-var import_icons27 = require("@elementor/icons");
+var import_icons26 = require("@elementor/icons");
 var import_i18n62 = require("@wordpress/i18n");
 var usePropDynamicAction = () => {
   const { propType } = (0, import_editor_controls59.useBoundProp)();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
-    icon: import_icons27.DatabaseIcon,
+    icon: import_icons26.DatabaseIcon,
     title: (0, import_i18n62.__)("Dynamic tags", "elementor"),
     content: ({ close }) => /* @__PURE__ */ React92.createElement(DynamicSelection, { close })
   };
@@ -5845,7 +5854,7 @@ var init = () => {
 
 // src/reset-style-props.tsx
 var import_editor_controls61 = require("@elementor/editor-controls");
-var import_icons28 = require("@elementor/icons");
+var import_icons27 = require("@elementor/icons");
 var import_i18n63 = require("@wordpress/i18n");
 
 // src/utils/is-equal.ts
@@ -5919,7 +5928,7 @@ function useResetStyleValueProps() {
   return {
     visible,
     title: (0, import_i18n63.__)("Clear", "elementor"),
-    icon: import_icons28.BrushBigIcon,
+    icon: import_icons27.BrushBigIcon,
     onClick: () => resetValue()
   };
 }
@@ -5935,8 +5944,8 @@ var import_i18n67 = require("@wordpress/i18n");
 var React97 = __toESM(require("react"));
 var import_react42 = require("react");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_ui8 = require("@elementor/editor-ui");
-var import_ui48 = require("@elementor/ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
+var import_ui47 = require("@elementor/ui");
 var import_i18n66 = require("@wordpress/i18n");
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
@@ -6014,18 +6023,18 @@ var stylesInheritanceTransformersRegistry = (0, import_editor_canvas4.createTran
 // src/styles-inheritance/components/infotip/breakpoint-icon.tsx
 var React93 = __toESM(require("react"));
 var import_editor_responsive4 = require("@elementor/editor-responsive");
-var import_icons29 = require("@elementor/icons");
-var import_ui44 = require("@elementor/ui");
+var import_icons28 = require("@elementor/icons");
+var import_ui43 = require("@elementor/ui");
 var SIZE6 = "tiny";
 var DEFAULT_BREAKPOINT3 = "desktop";
 var breakpointIconMap = {
-  widescreen: import_icons29.WidescreenIcon,
-  desktop: import_icons29.DesktopIcon,
-  laptop: import_icons29.LaptopIcon,
-  tablet_extra: import_icons29.TabletLandscapeIcon,
-  tablet: import_icons29.TabletPortraitIcon,
-  mobile_extra: import_icons29.MobileLandscapeIcon,
-  mobile: import_icons29.MobilePortraitIcon
+  widescreen: import_icons28.WidescreenIcon,
+  desktop: import_icons28.DesktopIcon,
+  laptop: import_icons28.LaptopIcon,
+  tablet_extra: import_icons28.TabletLandscapeIcon,
+  tablet: import_icons28.TabletPortraitIcon,
+  mobile_extra: import_icons28.MobileLandscapeIcon,
+  mobile: import_icons28.MobilePortraitIcon
 };
 var BreakpointIcon = ({ breakpoint }) => {
   const breakpoints = (0, import_editor_responsive4.useBreakpoints)();
@@ -6035,21 +6044,21 @@ var BreakpointIcon = ({ breakpoint }) => {
     return null;
   }
   const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
-  return /* @__PURE__ */ React93.createElement(import_ui44.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(IconComponent, { fontSize: SIZE6, sx: { mt: "2px" } }));
+  return /* @__PURE__ */ React93.createElement(import_ui43.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React93.createElement(IconComponent, { fontSize: SIZE6, sx: { mt: "2px" } }));
 };
 
 // src/styles-inheritance/components/infotip/label-chip.tsx
 var React94 = __toESM(require("react"));
 var import_editor_styles_repository15 = require("@elementor/editor-styles-repository");
-var import_icons30 = require("@elementor/icons");
-var import_ui45 = require("@elementor/ui");
+var import_icons29 = require("@elementor/icons");
+var import_ui44 = require("@elementor/ui");
 var import_i18n65 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
 var LabelChip = ({ displayLabel, provider }) => {
   const isBaseStyle = provider === import_editor_styles_repository15.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
-  const chipIcon = isBaseStyle ? /* @__PURE__ */ React94.createElement(import_ui45.Tooltip, { title: (0, import_i18n65.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React94.createElement(import_icons30.InfoCircleIcon, { fontSize: SIZE7 })) : void 0;
+  const chipIcon = isBaseStyle ? /* @__PURE__ */ React94.createElement(import_ui44.Tooltip, { title: (0, import_i18n65.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React94.createElement(import_icons29.InfoCircleIcon, { fontSize: SIZE7 })) : void 0;
   return /* @__PURE__ */ React94.createElement(
-    import_ui45.Chip,
+    import_ui44.Chip,
     {
       label: displayLabel,
       size: SIZE7,
@@ -6075,10 +6084,10 @@ var LabelChip = ({ displayLabel, provider }) => {
 
 // src/styles-inheritance/components/infotip/value-component.tsx
 var React95 = __toESM(require("react"));
-var import_ui46 = require("@elementor/ui");
+var import_ui45 = require("@elementor/ui");
 var ValueComponent = ({ index, value }) => {
   return /* @__PURE__ */ React95.createElement(
-    import_ui46.Typography,
+    import_ui45.Typography,
     {
       variant: "caption",
       color: "text.tertiary",
@@ -6099,8 +6108,8 @@ var ValueComponent = ({ index, value }) => {
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
 var React96 = __toESM(require("react"));
-var import_ui47 = require("@elementor/ui");
-var ActionIcons = () => /* @__PURE__ */ React96.createElement(import_ui47.Box, { display: "flex", gap: 0.5, alignItems: "center" });
+var import_ui46 = require("@elementor/ui");
+var ActionIcons = () => /* @__PURE__ */ React96.createElement(import_ui46.Box, { display: "flex", gap: 0.5, alignItems: "center" });
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var SECTION_PADDING_INLINE = 32;
@@ -6134,8 +6143,8 @@ var StylesInheritanceInfotip = ({
     });
   }, [key, propType]);
   const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
-  const infotipContent = /* @__PURE__ */ React97.createElement(import_ui48.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React97.createElement(
-    import_ui48.Card,
+  const infotipContent = /* @__PURE__ */ React97.createElement(import_ui47.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React97.createElement(
+    import_ui47.Card,
     {
       elevation: 0,
       sx: {
@@ -6148,7 +6157,7 @@ var StylesInheritanceInfotip = ({
       }
     },
     /* @__PURE__ */ React97.createElement(
-      import_ui48.Box,
+      import_ui47.Box,
       {
         sx: {
           position: "sticky",
@@ -6157,10 +6166,10 @@ var StylesInheritanceInfotip = ({
           backgroundColor: "background.paper"
         }
       },
-      /* @__PURE__ */ React97.createElement(import_editor_ui8.PopoverHeader, { title: (0, import_i18n66.__)("Style origin", "elementor"), onClose: closeInfotip })
+      /* @__PURE__ */ React97.createElement(import_editor_ui10.PopoverHeader, { title: (0, import_i18n66.__)("Style origin", "elementor"), onClose: closeInfotip })
     ),
     /* @__PURE__ */ React97.createElement(
-      import_ui48.CardContent,
+      import_ui47.CardContent,
       {
         sx: {
           display: "flex",
@@ -6173,9 +6182,9 @@ var StylesInheritanceInfotip = ({
           }
         }
       },
-      /* @__PURE__ */ React97.createElement(import_ui48.Stack, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
+      /* @__PURE__ */ React97.createElement(import_ui47.Stack, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React97.createElement(
-          import_ui48.Box,
+          import_ui47.Box,
           {
             key: item.id,
             display: "flex",
@@ -6187,7 +6196,7 @@ var StylesInheritanceInfotip = ({
             )
           },
           /* @__PURE__ */ React97.createElement(
-            import_ui48.Box,
+            import_ui47.Box,
             {
               display: "flex",
               gap: 0.5,
@@ -6203,7 +6212,7 @@ var StylesInheritanceInfotip = ({
     )
   ));
   if (isDisabled) {
-    return /* @__PURE__ */ React97.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React97.createElement(import_ui47.Box, { sx: { display: "inline-flex" } }, children);
   }
   return /* @__PURE__ */ React97.createElement(
     TooltipOrInfotip,
@@ -6213,7 +6222,7 @@ var StylesInheritanceInfotip = ({
       infotipContent,
       isDisabled
     },
-    /* @__PURE__ */ React97.createElement(import_ui48.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" }, disabled: isDisabled }, children)
+    /* @__PURE__ */ React97.createElement(import_ui47.IconButton, { onClick: toggleInfotip, "aria-label": label, sx: { my: "-1px" }, disabled: isDisabled }, children)
   );
 };
 function TooltipOrInfotip({
@@ -6227,11 +6236,11 @@ function TooltipOrInfotip({
   const isSiteRtl = direction.isSiteRtl;
   const forceInfotipAlignLeft = isSiteRtl ? 9999999 : -9999999;
   if (isDisabled) {
-    return /* @__PURE__ */ React97.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React97.createElement(import_ui47.Box, { sx: { display: "inline-flex" } }, children);
   }
   if (showInfotip) {
     return /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
-      import_ui48.Backdrop,
+      import_ui47.Backdrop,
       {
         open: showInfotip,
         onClick: onClose,
@@ -6241,7 +6250,7 @@ function TooltipOrInfotip({
         }
       }
     ), /* @__PURE__ */ React97.createElement(
-      import_ui48.Infotip,
+      import_ui47.Infotip,
       {
         placement: "top",
         content: infotipContent,
@@ -6267,7 +6276,7 @@ function TooltipOrInfotip({
       children
     ));
   }
-  return /* @__PURE__ */ React97.createElement(import_ui48.Tooltip, { title: (0, import_i18n66.__)("Style origin", "elementor"), placement: "top" }, children);
+  return /* @__PURE__ */ React97.createElement(import_ui47.Tooltip, { title: (0, import_i18n66.__)("Style origin", "elementor"), placement: "top" }, children);
 }
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
@@ -6338,23 +6347,23 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
 // src/styles-inheritance/transformers/array-transformer.tsx
 var React99 = __toESM(require("react"));
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_ui49 = require("@elementor/ui");
+var import_ui48 = require("@elementor/ui");
 var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
   if (!values || values.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React99.createElement(import_ui49.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React99.createElement(import_ui49.Stack, { key: index }, item)));
+  return /* @__PURE__ */ React99.createElement(import_ui48.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React99.createElement(import_ui48.Stack, { key: index }, item)));
 });
 
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
 var React100 = __toESM(require("react"));
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_ui50 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React100.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(ItemLabelColor, { value })));
+var import_ui49 = require("@elementor/ui");
+var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React100.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React100.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6365,9 +6374,9 @@ var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableC
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
 var React101 = __toESM(require("react"));
 var import_editor_canvas8 = require("@elementor/editor-canvas");
-var import_ui51 = require("@elementor/ui");
+var import_ui50 = require("@elementor/ui");
 var import_i18n68 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React101.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React101.createElement(ItemLabelGradient, { value })));
+var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React101.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React101.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
   return /* @__PURE__ */ React101.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
@@ -6389,14 +6398,14 @@ var getGradientValue = (gradient) => {
 // src/styles-inheritance/transformers/background-image-overlay-transformer.tsx
 var React102 = __toESM(require("react"));
 var import_editor_canvas9 = require("@elementor/editor-canvas");
-var import_editor_ui9 = require("@elementor/editor-ui");
-var import_ui52 = require("@elementor/ui");
+var import_editor_ui11 = require("@elementor/editor-ui");
+var import_ui51 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React102.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React102.createElement(ItemIconImage, { value }), /* @__PURE__ */ React102.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React102.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React102.createElement(ItemIconImage, { value }), /* @__PURE__ */ React102.createElement(ItemLabelImage, { value })));
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
   return /* @__PURE__ */ React102.createElement(
-    import_ui52.CardMedia,
+    import_ui51.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -6411,7 +6420,7 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React102.createElement(import_editor_ui9.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React102.createElement("span", null, imageTitle));
+  return /* @__PURE__ */ React102.createElement(import_editor_ui11.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ React102.createElement("span", null, imageTitle));
 };
 var useImage = (image) => {
   let imageTitle, imageUrl = null;
@@ -6438,7 +6447,7 @@ var getFileExtensionFromFilename = (filename) => {
 // src/styles-inheritance/transformers/box-shadow-transformer.tsx
 var React103 = __toESM(require("react"));
 var import_editor_canvas10 = require("@elementor/editor-canvas");
-var import_ui53 = require("@elementor/ui");
+var import_ui52 = require("@elementor/ui");
 var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
   if (!value) {
     return null;
@@ -6447,20 +6456,20 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
   const colorValue = color || "#000000";
   const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
   const positionValue = position || "outset";
-  return /* @__PURE__ */ React103.createElement(import_ui53.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React103.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
+  return /* @__PURE__ */ React103.createElement(import_ui52.Stack, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React103.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
 });
 
 // src/styles-inheritance/transformers/color-transformer.tsx
 var React104 = __toESM(require("react"));
 var import_editor_canvas11 = require("@elementor/editor-canvas");
-var import_ui54 = require("@elementor/ui");
+var import_ui53 = require("@elementor/ui");
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = (0, import_ui54.styled)(import_ui54.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6471,13 +6480,13 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React104.createElement(import_ui54.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React104.createElement("span", null, value));
+  return /* @__PURE__ */ React104.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React104.createElement("span", null, value));
 });
 
 // src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
 var React105 = __toESM(require("react"));
 var import_editor_canvas12 = require("@elementor/editor-canvas");
-var import_ui55 = require("@elementor/ui");
+var import_ui54 = require("@elementor/ui");
 var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
   return (0, import_editor_canvas12.createTransformer)((value, options12) => {
     const stringResult = originalTransformer(value, options12);
@@ -6488,7 +6497,7 @@ var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") =>
     if (parts.length <= 1) {
       return stringResult;
     }
-    return /* @__PURE__ */ React105.createElement(import_ui55.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React105.createElement(import_ui55.Stack, { key: index }, part.trim())));
+    return /* @__PURE__ */ React105.createElement(import_ui54.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React105.createElement(import_ui54.Stack, { key: index }, part.trim())));
   });
 };
 
@@ -6590,6 +6599,7 @@ var blockV1Panel = () => {
   injectIntoPanelHeaderTop,
   injectIntoStyleTab,
   registerControlReplacement,
+  registerEditingPanelReplacement,
   registerFieldIndicator,
   registerStyleProviderToColors,
   stylesInheritanceTransformersRegistry,
@@ -6601,6 +6611,7 @@ var blockV1Panel = () => {
   usePanelActions,
   usePanelStatus,
   useSectionWidth,
+  useStateByElement,
   useStyle,
   useStylesRerender
 });