@elementor/editor-editing-panel 4.1.0-827 → 4.1.0-828

package/dist/index.js

@@ -1824,7 +1824,7 @@ var import_icons25 = require("@elementor/icons");
 var import_locations4 = require("@elementor/locations");
 var import_menus = require("@elementor/menus");
 var import_session9 = require("@elementor/session");
-var import_ui41 = require("@elementor/ui");
+var import_ui42 = require("@elementor/ui");
 var import_i18n61 = require("@wordpress/i18n");
 
 // src/editing-panel-replacement-registry.tsx
@@ -1851,7 +1851,7 @@ var import_react38 = require("react");
 var React86 = __toESM(require("react"));
 var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
-var import_ui40 = require("@elementor/ui");
+var import_ui41 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
 
 // src/contexts/scroll-context.tsx
@@ -2536,7 +2536,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_session8 = require("@elementor/session");
-var import_ui39 = require("@elementor/ui");
+var import_ui40 = require("@elementor/ui");
 var import_i18n59 = require("@wordpress/i18n");
 
 // src/contexts/styles-inheritance-context.tsx
@@ -2905,7 +2905,7 @@ function useSyncDepsWithInherited({
   const syncRef = (0, import_react21.useRef)({ hasSynced: false, prevDepValues: depValues });
   (0, import_react21.useEffect)(() => {
     const { hasSynced, prevDepValues } = syncRef.current;
-    if (hasSynced && value && wasDepsCleared(prevDepValues, depValues)) {
+    if (hasSynced && value && wasDepsCleared(prevDepValues, depValues) || isHidden && depValues && value) {
       resetValue();
     }
     if (isHidden || !value || !depValues) {
@@ -3018,7 +3018,13 @@ var StylesField = ({ bind, propDisplayName, children }) => {
 // src/components/section-content.tsx
 var React26 = __toESM(require("react"));
 var import_ui15 = require("@elementor/ui");
-var SectionContent = ({ gap = 2, sx, children, "aria-label": ariaLabel }) => /* @__PURE__ */ React26.createElement(import_ui15.Stack, { gap, sx: { ...sx }, "aria-label": ariaLabel }, children);
+var SectionContent = ({
+  gap = 2,
+  sx,
+  children,
+  "aria-label": ariaLabel,
+  className
+}) => /* @__PURE__ */ React26.createElement(import_ui15.Stack, { gap, sx: { ...sx }, "aria-label": ariaLabel, className }, children);
 
 // src/components/style-sections/background-section/background-section.tsx
 var BACKGROUND_LABEL = (0, import_i18n9.__)("Background", "elementor");
@@ -4327,6 +4333,7 @@ var shouldDisplayFlexFields = (display, local) => {
 var React60 = __toESM(require("react"));
 var import_react30 = require("react");
 var import_session7 = require("@elementor/session");
+var import_ui35 = require("@elementor/ui");
 var import_i18n38 = require("@wordpress/i18n");
 
 // src/components/style-sections/position-section/dimensions-field.tsx
@@ -4403,8 +4410,8 @@ var positionOptions = [
   { label: (0, import_i18n36.__)("Fixed", "elementor"), value: "fixed" },
   { label: (0, import_i18n36.__)("Sticky", "elementor"), value: "sticky" }
 ];
-var PositionField = ({ onChange }) => {
-  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(import_editor_controls33.SelectControl, { options: positionOptions, onChange })));
+var PositionField = () => {
+  return /* @__PURE__ */ React58.createElement(StylesField, { bind: "position", propDisplayName: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(StylesFieldLayout, { label: POSITION_LABEL }, /* @__PURE__ */ React58.createElement(import_editor_controls33.SelectControl, { options: positionOptions })));
 };
 
 // src/components/style-sections/position-section/z-index-field.tsx
@@ -4436,63 +4443,32 @@ var ZIndexField = ({ disabled }) => {
 var POSITION_STATIC = "static";
 var POSITION_LABEL2 = (0, import_i18n38.__)("Position", "elementor");
 var DIMENSIONS_LABEL = (0, import_i18n38.__)("Dimensions", "elementor");
-var POSITION_DEPENDENT_PROP_NAMES = [
+var DEPENDENT_PROP_NAMES = [
   "inset-block-start",
   "inset-block-end",
   "inset-inline-start",
   "inset-inline-end",
   "z-index"
 ];
-var CLEARED_POSITION_DEPENDENT_VALUES = {
-  "inset-block-start": null,
-  "inset-block-end": null,
-  "inset-inline-start": null,
-  "inset-inline-end": null,
-  "z-index": null
-};
 var PositionSection = () => {
-  const { value: positionValue } = useStylesField("position", {
-    history: { propDisplayName: POSITION_LABEL2 }
-  });
-  const { values: positionDependentValues, setValues: setPositionDependentValues } = useStylesFields([...POSITION_DEPENDENT_PROP_NAMES]);
-  const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
-  const clearPositionDependentProps = (0, import_react30.useCallback)(() => {
-    const dimensions = {
-      "inset-block-start": positionDependentValues?.["inset-block-start"],
-      "inset-block-end": positionDependentValues?.["inset-block-end"],
-      "inset-inline-start": positionDependentValues?.["inset-inline-start"],
-      "inset-inline-end": positionDependentValues?.["inset-inline-end"]
-    };
-    const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-    const hasValuesToClear = Object.values(dimensions).some((v) => v !== null) || positionDependentValues?.["z-index"] !== null;
-    if (hasValuesToClear) {
-      updateDimensionsHistory(dimensions);
-      setPositionDependentValues(CLEARED_POSITION_DEPENDENT_VALUES, meta);
-    }
-  }, [positionDependentValues, updateDimensionsHistory, setPositionDependentValues]);
-  const clearPositionDependentPropsRef = (0, import_react30.useRef)(clearPositionDependentProps);
-  clearPositionDependentPropsRef.current = clearPositionDependentProps;
+  const { value: position } = useStylesField("position", withHistoryLabel(POSITION_LABEL2));
+  const positionPrevRef = (0, import_react30.useRef)(position);
+  const { values: dependentValues, setValues: setDependentValues } = useStylesFields(DEPENDENT_PROP_NAMES);
+  const [savedDependentValues, saveToHistory, clearHistory] = usePersistDimensions();
   (0, import_react30.useEffect)(() => {
-    if (positionValue?.value === POSITION_STATIC || positionValue === null) {
-      clearPositionDependentPropsRef.current();
-    }
-  }, [positionValue]);
-  const onPositionChange = (newPosition, previousPosition) => {
-    const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-    if (newPosition === POSITION_STATIC) {
-      clearPositionDependentProps();
-    } else if (previousPosition === POSITION_STATIC) {
-      if (dimensionsValuesFromHistory) {
-        setPositionDependentValues(
-          { ...dimensionsValuesFromHistory, "z-index": void 0 },
-          meta
-        );
-        clearDimensionsHistory();
-      }
+    if (position && position?.value === POSITION_STATIC && hasDependentValues(dependentValues)) {
+      saveToHistory(extractDimensions(dependentValues));
     }
-  };
-  const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
-  return /* @__PURE__ */ React60.createElement(SectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement(DimensionsField, null)) : null, /* @__PURE__ */ React60.createElement(ZIndexField, { disabled: !isNotStatic }), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
+    if (positionPrevRef.current?.value === POSITION_STATIC) {
+      setDependentValues({ ...savedDependentValues }, withHistoryLabel(DIMENSIONS_LABEL));
+      clearHistory();
+    }
+    if ((!position || position?.value === POSITION_STATIC) && dependentValues?.["z-index"]) {
+      setDependentValues({ "z-index": null }, withHistoryLabel(DIMENSIONS_LABEL));
+    }
+    positionPrevRef.current = position;
+  }, [position?.value]);
+  return /* @__PURE__ */ React60.createElement(StyledSectionContent, null, /* @__PURE__ */ React60.createElement(PositionField, null), /* @__PURE__ */ React60.createElement(DimensionsField, null), /* @__PURE__ */ React60.createElement(ZIndexField, { disabled: !position || position?.value === POSITION_STATIC }), /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
 };
 var usePersistDimensions = () => {
   const { id: styleDefID, meta } = useStyle();
@@ -4500,12 +4476,52 @@ var usePersistDimensions = () => {
   const dimensionsPath = `${styleVariantPath}/dimensions`;
   return (0, import_session7.useSessionStorage)(dimensionsPath);
 };
+var withHistoryLabel = (name) => {
+  return {
+    history: { propDisplayName: name }
+  };
+};
+var hasDependentValues = (values) => {
+  if (!values) {
+    return false;
+  }
+  const dimensions = extractDimensions(values);
+  return Object.values(dimensions).some((v) => v !== null);
+};
+var extractDimensions = (values) => {
+  return DEPENDENT_PROP_NAMES.reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: values?.[key] ?? null
+    };
+  }, {});
+};
+var StyledSectionContent = (0, import_ui35.styled)(SectionContent, {
+  shouldForwardProp: (prop) => prop !== "gap"
+})(({ gap = 2, theme }) => ({
+  gap: 0,
+  "& > *": {
+    marginBottom: theme.spacing(gap)
+  },
+  "& > *:last-child": {
+    marginBottom: 0
+  },
+  "& > .MuiStack-root": {
+    marginBottom: 0
+  },
+  "& > .MuiStack-root:has(> *)": {
+    marginBottom: theme.spacing(gap)
+  },
+  "& > .MuiDivider-root": {
+    marginBottom: theme.spacing(gap)
+  }
+}));
 
 // src/components/style-sections/size-section/size-section.tsx
 var React65 = __toESM(require("react"));
 var import_react31 = require("react");
 var import_editor_controls37 = require("@elementor/editor-controls");
-var import_ui36 = require("@elementor/ui");
+var import_ui37 = require("@elementor/ui");
 var import_i18n42 = require("@wordpress/i18n");
 
 // src/components/style-tab-collapsible-content.tsx
@@ -4515,7 +4531,7 @@ var import_editor_ui6 = require("@elementor/editor-ui");
 // src/styles-inheritance/components/styles-inheritance-section-indicators.tsx
 var React61 = __toESM(require("react"));
 var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
-var import_ui35 = require("@elementor/ui");
+var import_ui36 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 var StylesInheritanceSectionIndicators = ({ fields }) => {
   const { id, meta, provider } = useStyle();
@@ -4532,7 +4548,7 @@ var StylesInheritanceSectionIndicators = ({ fields }) => {
   }
   const hasValueLabel = (0, import_i18n39.__)("Has effective styles", "elementor");
   const hasOverridesLabel = (0, import_i18n39.__)("Has overridden styles", "elementor");
-  return /* @__PURE__ */ React61.createElement(import_ui35.Tooltip, { title: (0, import_i18n39.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React61.createElement(import_ui35.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React61.createElement(import_ui36.Tooltip, { title: (0, import_i18n39.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React61.createElement(import_ui36.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React61.createElement(
     StyleIndicator,
     {
       getColor: getStylesProviderThemeColor(provider.getKey()),
@@ -4671,10 +4687,10 @@ var CssSizeProps = [
 var ASPECT_RATIO_LABEL = (0, import_i18n42.__)("Aspect Ratio", "elementor");
 var SizeSection = () => {
   const gridRowRefs = [(0, import_react31.useRef)(null), (0, import_react31.useRef)(null), (0, import_react31.useRef)(null)];
-  return /* @__PURE__ */ React65.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React65.createElement(import_ui36.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React65.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(import_ui36.Stack, null, /* @__PURE__ */ React65.createElement(OverflowField, null)), /* @__PURE__ */ React65.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React65.createElement(import_ui36.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React65.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React65.createElement(import_editor_controls37.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(ObjectFitField, null), /* @__PURE__ */ React65.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n42.__)("Object position", "elementor") }, /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.PositionControl, null))))));
+  return /* @__PURE__ */ React65.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React65.createElement(import_ui37.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React65.createElement(import_ui37.Grid, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React65.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(import_ui37.Stack, null, /* @__PURE__ */ React65.createElement(OverflowField, null)), /* @__PURE__ */ React65.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React65.createElement(import_ui37.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React65.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React65.createElement(import_editor_controls37.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React65.createElement(PanelDivider, null), /* @__PURE__ */ React65.createElement(ObjectFitField, null), /* @__PURE__ */ React65.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n42.__)("Object position", "elementor") }, /* @__PURE__ */ React65.createElement(import_ui37.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.PositionControl, null))))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
-  return /* @__PURE__ */ React65.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React65.createElement(import_ui36.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, label)), /* @__PURE__ */ React65.createElement(import_ui36.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.SizeControl, { extendedOptions, anchorRef: rowRef }))));
+  return /* @__PURE__ */ React65.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React65.createElement(import_ui37.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, label)), /* @__PURE__ */ React65.createElement(import_ui37.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(import_editor_controls37.SizeControl, { extendedOptions, anchorRef: rowRef }))));
 };
 
 // src/components/style-sections/spacing-section/spacing-section.tsx
@@ -4821,11 +4837,11 @@ var LineHeightField = () => {
 var React75 = __toESM(require("react"));
 var import_editor_controls47 = require("@elementor/editor-controls");
 var import_icons20 = require("@elementor/icons");
-var import_ui37 = require("@elementor/ui");
+var import_ui38 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
 var TEXT_ALIGNMENT_LABEL = (0, import_i18n52.__)("Text align", "elementor");
-var AlignStartIcon = (0, import_ui37.withDirection)(import_icons20.AlignLeftIcon);
-var AlignEndIcon = (0, import_ui37.withDirection)(import_icons20.AlignRightIcon);
+var AlignStartIcon = (0, import_ui38.withDirection)(import_icons20.AlignLeftIcon);
+var AlignEndIcon = (0, import_ui38.withDirection)(import_icons20.AlignRightIcon);
 var options9 = [
   {
     value: "start",
@@ -4932,7 +4948,7 @@ var import_i18n56 = require("@wordpress/i18n");
 // src/components/add-or-remove-content.tsx
 var React79 = __toESM(require("react"));
 var import_icons23 = require("@elementor/icons");
-var import_ui38 = require("@elementor/ui");
+var import_ui39 = require("@elementor/ui");
 var SIZE = "tiny";
 var AddOrRemoveContent = ({
   isAdded,
@@ -4943,7 +4959,7 @@ var AddOrRemoveContent = ({
   renderLabel
 }) => {
   return /* @__PURE__ */ React79.createElement(SectionContent, null, /* @__PURE__ */ React79.createElement(
-    import_ui38.Stack,
+    import_ui39.Stack,
     {
       direction: "row",
       sx: {
@@ -4953,8 +4969,8 @@ var AddOrRemoveContent = ({
       }
     },
     renderLabel(),
-    isAdded ? /* @__PURE__ */ React79.createElement(import_ui38.IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React79.createElement(import_icons23.MinusIcon, { fontSize: SIZE })) : /* @__PURE__ */ React79.createElement(import_ui38.IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React79.createElement(import_icons23.PlusIcon, { fontSize: SIZE }))
-  ), /* @__PURE__ */ React79.createElement(import_ui38.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React79.createElement(SectionContent, null, children)));
+    isAdded ? /* @__PURE__ */ React79.createElement(import_ui39.IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React79.createElement(import_icons23.MinusIcon, { fontSize: SIZE })) : /* @__PURE__ */ React79.createElement(import_ui39.IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React79.createElement(import_icons23.PlusIcon, { fontSize: SIZE }))
+  ), /* @__PURE__ */ React79.createElement(import_ui39.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React79.createElement(SectionContent, null, children)));
 };
 
 // src/components/style-sections/typography-section/text-stroke-field.tsx
@@ -5114,7 +5130,7 @@ var StyleTab = () => {
       },
       setMetaState: setActiveStyleState
     },
-    /* @__PURE__ */ React85.createElement(import_session8.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React85.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React85.createElement(ClassesHeader, null, /* @__PURE__ */ React85.createElement(CssClassSelector, null), /* @__PURE__ */ React85.createElement(import_ui39.Divider, null)), /* @__PURE__ */ React85.createElement(SectionsList, null, /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React85.createElement(import_session8.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React85.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React85.createElement(ClassesHeader, null, /* @__PURE__ */ React85.createElement(CssClassSelector, null), /* @__PURE__ */ React85.createElement(import_ui40.Divider, null)), /* @__PURE__ */ React85.createElement(SectionsList, null, /* @__PURE__ */ React85.createElement(
       StyleTabSection,
       {
         section: {
@@ -5240,12 +5256,12 @@ var StyleTab = () => {
           "transition"
         ]
       }
-    ), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(import_ui39.Box, { sx: { height: "150px" } })))
+    ), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(import_ui40.Box, { sx: { height: "150px" } })))
   ));
 };
 function ClassesHeader({ children }) {
   const scrollDirection = useScrollDirection();
-  return /* @__PURE__ */ React85.createElement(import_ui39.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
+  return /* @__PURE__ */ React85.createElement(import_ui40.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
 }
 function useCurrentClassesProp() {
   const { elementType } = useElement();
@@ -5275,9 +5291,9 @@ var PanelTabContent = () => {
   const isPromotedElement = !!(0, import_editor_elements12.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion;
   const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
   const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;
-  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui40.useTabs)(currentTab);
-  return /* @__PURE__ */ React86.createElement(ScrollProvider, null, /* @__PURE__ */ React86.createElement(import_ui40.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(import_ui40.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React86.createElement(
-    import_ui40.Tabs,
+  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui41.useTabs)(currentTab);
+  return /* @__PURE__ */ React86.createElement(ScrollProvider, null, /* @__PURE__ */ React86.createElement(import_ui41.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(import_ui41.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React86.createElement(
+    import_ui41.Tabs,
     {
       variant: "fullWidth",
       size: "small",
@@ -5288,10 +5304,10 @@ var PanelTabContent = () => {
         setCurrentTab(newValue);
       }
     },
-    !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui40.Tab, { label: (0, import_i18n60.__)("General", "elementor"), ...getTabProps("settings") }),
-    /* @__PURE__ */ React86.createElement(import_ui40.Tab, { label: (0, import_i18n60.__)("Style", "elementor"), ...getTabProps("style") }),
-    isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui40.Tab, { label: (0, import_i18n60.__)("Interactions", "elementor"), ...getTabProps("interactions") })
-  ), /* @__PURE__ */ React86.createElement(import_ui40.Divider, null)), !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui40.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React86.createElement(SettingsTab, null)), /* @__PURE__ */ React86.createElement(import_ui40.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React86.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui40.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React86.createElement(InteractionsTab, null))));
+    !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui41.Tab, { label: (0, import_i18n60.__)("General", "elementor"), ...getTabProps("settings") }),
+    /* @__PURE__ */ React86.createElement(import_ui41.Tab, { label: (0, import_i18n60.__)("Style", "elementor"), ...getTabProps("style") }),
+    isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui41.Tab, { label: (0, import_i18n60.__)("Interactions", "elementor"), ...getTabProps("interactions") })
+  ), /* @__PURE__ */ React86.createElement(import_ui41.Divider, null)), !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui41.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React86.createElement(SettingsTab, null)), /* @__PURE__ */ React86.createElement(import_ui41.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React86.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui41.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React86.createElement(InteractionsTab, null))));
 };
 
 // src/components/editing-panel.tsx
@@ -5310,7 +5326,7 @@ var EditingPanel = () => {
   if (ReplacementComponent) {
     panelContent = /* @__PURE__ */ React87.createElement(ReplacementComponent, null);
   }
-  return /* @__PURE__ */ React87.createElement(import_ui41.ErrorBoundary, { fallback: /* @__PURE__ */ React87.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React87.createElement(import_session9.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React87.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React87.createElement(import_editor_controls54.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React87.createElement(import_editor_controls54.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React87.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React87.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React87.createElement(PanelHeaderTopSlot, null), panelContent)))))));
+  return /* @__PURE__ */ React87.createElement(import_ui42.ErrorBoundary, { fallback: /* @__PURE__ */ React87.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React87.createElement(import_session9.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React87.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React87.createElement(import_editor_controls54.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React87.createElement(import_editor_controls54.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React87.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React87.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React87.createElement(PanelHeaderTopSlot, null), panelContent)))))));
 };
 
 // src/init.ts
@@ -5403,7 +5419,7 @@ var import_editor_controls58 = require("@elementor/editor-controls");
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
 var import_icons26 = require("@elementor/icons");
-var import_ui42 = require("@elementor/ui");
+var import_ui43 = require("@elementor/ui");
 var import_i18n64 = require("@wordpress/i18n");
 
 // src/controls-registry/element-controls/get-element-by-type.ts
@@ -5685,7 +5701,7 @@ var TabsControlContent = ({ label }) => {
 };
 var ItemLabel = ({ value, index }) => {
   const elementTitle = value?.title;
-  return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React89.createElement("span", null, elementTitle), /* @__PURE__ */ React89.createElement(ItemDefaultTab, { index }));
+  return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React89.createElement("span", null, elementTitle), /* @__PURE__ */ React89.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
   const { value: defaultItem } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
@@ -5693,19 +5709,19 @@ var ItemDefaultTab = ({ index }) => {
   if (!isDefault) {
     return null;
   }
-  return /* @__PURE__ */ React89.createElement(import_ui42.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n64.__)("Default", "elementor") });
+  return /* @__PURE__ */ React89.createElement(import_ui43.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n64.__)("Default", "elementor") });
 };
 var ItemContent = ({ value, index }) => {
   if (!value.id) {
     return null;
   }
-  return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React89.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React89.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React89.createElement(DefaultTabControl, { tabIndex: index })));
+  return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React89.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React89.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React89.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
   const { value, setValue } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
   const isDefault = value === tabIndex;
-  return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Set as default tab", "elementor")), /* @__PURE__ */ React89.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React89.createElement(
-    import_ui42.Switch,
+  return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Set as default tab", "elementor")), /* @__PURE__ */ React89.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React89.createElement(
+    import_ui43.Switch,
     {
       size: "small",
       checked: isDefault,
@@ -5722,8 +5738,8 @@ var DefaultTabControl = ({ tabIndex }) => {
 var TabLabelControl = ({ elementId }) => {
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
   const label = editorSettings?.title ?? "";
-  return /* @__PURE__ */ React89.createElement(import_ui42.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Tab name", "elementor")), /* @__PURE__ */ React89.createElement(
-    import_ui42.TextField,
+  return /* @__PURE__ */ React89.createElement(import_ui43.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Tab name", "elementor")), /* @__PURE__ */ React89.createElement(
+    import_ui43.TextField,
     {
       size: "tiny",
       value: label,
@@ -5744,18 +5760,18 @@ var ConditionalTooltip = ({
     return children;
   }
   return /* @__PURE__ */ React89.createElement(
-    import_ui42.Infotip,
+    import_ui43.Infotip,
     {
       arrow: false,
       content: /* @__PURE__ */ React89.createElement(
-        import_ui42.Alert,
+        import_ui43.Alert,
         {
           color: "secondary",
           icon: /* @__PURE__ */ React89.createElement(import_icons26.InfoCircleFilledIcon, { fontSize: "tiny" }),
           size: "small",
           sx: { width: 288 }
         },
-        /* @__PURE__ */ React89.createElement(import_ui42.Typography, { variant: "body2" }, (0, import_i18n64.__)("To change the default tab, simply set another tab as default.", "elementor"))
+        /* @__PURE__ */ React89.createElement(import_ui43.Typography, { variant: "body2" }, (0, import_i18n64.__)("To change the default tab, simply set another tab as default.", "elementor"))
       )
     },
     /* @__PURE__ */ React89.createElement("span", null, children)
@@ -5939,7 +5955,7 @@ var React94 = __toESM(require("react"));
 var import_editor_controls63 = require("@elementor/editor-controls");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons29 = require("@elementor/icons");
-var import_ui44 = require("@elementor/ui");
+var import_ui45 = require("@elementor/ui");
 var import_i18n66 = require("@wordpress/i18n");
 
 // src/hooks/use-persist-dynamic-value.ts
@@ -6042,7 +6058,7 @@ var import_react45 = require("react");
 var import_editor_controls62 = require("@elementor/editor-controls");
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_icons28 = require("@elementor/icons");
-var import_ui43 = require("@elementor/ui");
+var import_ui44 = require("@elementor/ui");
 var import_i18n65 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
 var PROMO_TEXT_WIDTH = 170;
@@ -6051,7 +6067,7 @@ var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew
 var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const [searchValue, setSearchValue] = (0, import_react45.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-  const theme = (0, import_ui43.useTheme)();
+  const theme = (0, import_ui44.useTheme)();
   const { value: anyValue } = (0, import_editor_controls62.useBoundProp)();
   const { bind, value: dynamicValue, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
@@ -6102,7 +6118,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
         onSearch: handleSearch,
         placeholder: (0, import_i18n65.__)("Search dynamic tags\u2026", "elementor")
       }
-    ), /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
+    ), /* @__PURE__ */ React93.createElement(import_ui44.Divider, null), /* @__PURE__ */ React93.createElement(
       import_editor_ui9.PopoverMenuList,
       {
         items: virtualizedItems,
@@ -6124,7 +6140,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   ), getPopOverContent());
 };
 var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React93.createElement(
-  import_ui43.Stack,
+  import_ui44.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6135,11 +6151,11 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React93.createElem
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React93.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n65.__)("Try something else.", "elementor"), /* @__PURE__ */ React93.createElement(import_ui43.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n65.__)("Clear & try again", "elementor")))
+  /* @__PURE__ */ React93.createElement(import_ui44.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React93.createElement("br", null), "\u201C", searchValue, "\u201D."),
+  /* @__PURE__ */ React93.createElement(import_ui44.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n65.__)("Try something else.", "elementor"), /* @__PURE__ */ React93.createElement(import_ui44.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n65.__)("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
-  import_ui43.Stack,
+var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui44.Divider, null), /* @__PURE__ */ React93.createElement(
+  import_ui44.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6150,8 +6166,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Upgrade now to display your content dynamically.", "elementor")),
+  /* @__PURE__ */ React93.createElement(import_ui44.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Streamline your workflow with dynamic tags", "elementor")),
+  /* @__PURE__ */ React93.createElement(import_ui44.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Upgrade now to display your content dynamically.", "elementor")),
   /* @__PURE__ */ React93.createElement(
     import_editor_ui9.CtaButton,
     {
@@ -6161,8 +6177,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment
     }
   )
 ));
-var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
-  import_ui43.Stack,
+var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui44.Divider, null), /* @__PURE__ */ React93.createElement(
+  import_ui44.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6173,8 +6189,8 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fra
     sx: { pb: 3.5 }
   },
   /* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Unlock your Dynamic tags again", "elementor")),
-  /* @__PURE__ */ React93.createElement(import_ui43.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
+  /* @__PURE__ */ React93.createElement(import_ui44.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Unlock your Dynamic tags again", "elementor")),
+  /* @__PURE__ */ React93.createElement(import_ui44.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
   /* @__PURE__ */ React93.createElement(
     import_editor_ui9.CtaButton,
     {
@@ -6214,7 +6230,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
     }
   });
   const [propValueFromHistory] = usePersistDynamicValue(bind);
-  const selectionPopoverState = (0, import_ui44.usePopupState)({ variant: "popover" });
+  const selectionPopoverState = (0, import_ui45.usePopupState)({ variant: "popover" });
   const { name: tagName = "" } = value;
   const dynamicTag = useDynamicTag(tagName);
   if (!isDynamicTagSupported(tagName) && OriginalControl) {
@@ -6226,16 +6242,16 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React94.createElement(import_ui44.Box, null, /* @__PURE__ */ React94.createElement(
-    import_ui44.UnstableTag,
+  return /* @__PURE__ */ React94.createElement(import_ui45.Box, null, /* @__PURE__ */ React94.createElement(
+    import_ui45.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
       startIcon: /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE3 }),
-      ...(0, import_ui44.bindTrigger)(selectionPopoverState),
+      ...(0, import_ui45.bindTrigger)(selectionPopoverState),
       actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React94.createElement(
-        import_ui44.IconButton,
+        import_ui45.IconButton,
         {
           size: SIZE3,
           onClick: removeDynamicTag,
@@ -6245,7 +6261,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
       ))
     }
   ), /* @__PURE__ */ React94.createElement(
-    import_ui44.Popover,
+    import_ui45.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -6254,7 +6270,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui44.bindPopover)(selectionPopoverState)
+      ...(0, import_ui45.bindPopover)(selectionPopoverState)
     },
     /* @__PURE__ */ React94.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React94.createElement(DynamicSelection, { close: selectionPopoverState.close, expired: readonly }))
   ));
@@ -6263,22 +6279,22 @@ var DynamicSettingsPopover = ({
   dynamicTag,
   disabled = false
 }) => {
-  const popupState = (0, import_ui44.usePopupState)({ variant: "popover" });
+  const popupState = (0, import_ui45.usePopupState)({ variant: "popover" });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
     return null;
   }
   return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(
-    import_ui44.IconButton,
+    import_ui45.IconButton,
     {
       size: SIZE3,
       disabled,
-      ...!disabled && (0, import_ui44.bindTrigger)(popupState),
+      ...!disabled && (0, import_ui45.bindTrigger)(popupState),
       "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor")
     },
     /* @__PURE__ */ React94.createElement(import_icons29.SettingsIcon, { fontSize: SIZE3 })
   ), /* @__PURE__ */ React94.createElement(
-    import_ui44.Popover,
+    import_ui45.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -6287,7 +6303,7 @@ var DynamicSettingsPopover = ({
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui44.bindPopover)(popupState)
+      ...(0, import_ui45.bindPopover)(popupState)
     },
     /* @__PURE__ */ React94.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React94.createElement(
       import_editor_ui10.PopoverHeader,
@@ -6301,25 +6317,25 @@ var DynamicSettingsPopover = ({
 };
 var DynamicSettings = ({ controls, tagName }) => {
   const tabs = controls.filter(({ type }) => type === "section");
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui44.useTabs)(0);
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui45.useTabs)(0);
   if (!tabs.length) {
     return null;
   }
   if (tagsWithoutTabs.includes(tagName)) {
     const singleTab = tabs[0];
-    return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui44.Divider, null), /* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: singleTab.value.items }));
+    return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui45.Divider, null), /* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: singleTab.value.items }));
   }
-  return /* @__PURE__ */ React94.createElement(React94.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React94.createElement(import_ui44.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React94.createElement(
-    import_ui44.Tab,
+  return /* @__PURE__ */ React94.createElement(React94.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React94.createElement(import_ui45.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React94.createElement(
+    import_ui45.Tab,
     {
       key: index,
       label: value.label,
       sx: { px: 1, py: 0.5 },
       ...getTabProps(index)
     }
-  ))), /* @__PURE__ */ React94.createElement(import_ui44.Divider, null), tabs.map(({ value }, index) => {
+  ))), /* @__PURE__ */ React94.createElement(import_ui45.Divider, null), tabs.map(({ value }, index) => {
     return /* @__PURE__ */ React94.createElement(
-      import_ui44.TabPanel,
+      import_ui45.TabPanel,
       {
         key: index,
         sx: { flexGrow: 1, py: 0, overflowY: "auto" },
@@ -6367,10 +6383,10 @@ var Control2 = ({ control }) => {
     display: "grid",
     gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
   } : {};
-  return /* @__PURE__ */ React94.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React94.createElement(import_ui44.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React94.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(import_editor_controls63.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React94.createElement(import_ui44.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(Control, { type: control.type, props: controlProps }))));
+  return /* @__PURE__ */ React94.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React94.createElement(import_ui45.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React94.createElement(import_ui45.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(import_editor_controls63.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React94.createElement(import_ui45.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(Control, { type: control.type, props: controlProps }))));
 };
 function ControlsItemsStack({ items: items3 }) {
-  return /* @__PURE__ */ React94.createElement(import_ui44.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
+  return /* @__PURE__ */ React94.createElement(import_ui45.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
     (item) => item.type === "control" ? /* @__PURE__ */ React94.createElement(Control2, { key: item.value.bind, control: item.value }) : null
   ));
 }
@@ -6564,7 +6580,7 @@ var React100 = __toESM(require("react"));
 var import_react47 = require("react");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_ui11 = require("@elementor/editor-ui");
-var import_ui49 = require("@elementor/ui");
+var import_ui50 = require("@elementor/ui");
 var import_i18n71 = require("@wordpress/i18n");
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
@@ -6643,7 +6659,7 @@ var getTransformedValue = async (item, bind, resolve) => {
 var React96 = __toESM(require("react"));
 var import_editor_responsive4 = require("@elementor/editor-responsive");
 var import_icons32 = require("@elementor/icons");
-var import_ui45 = require("@elementor/ui");
+var import_ui46 = require("@elementor/ui");
 var SIZE4 = "tiny";
 var DEFAULT_BREAKPOINT3 = "desktop";
 var breakpointIconMap = {
@@ -6663,21 +6679,21 @@ var BreakpointIcon = ({ breakpoint }) => {
     return null;
   }
   const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
-  return /* @__PURE__ */ React96.createElement(import_ui45.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
+  return /* @__PURE__ */ React96.createElement(import_ui46.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
 };
 
 // src/styles-inheritance/components/infotip/label-chip.tsx
 var React97 = __toESM(require("react"));
 var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
 var import_icons33 = require("@elementor/icons");
-var import_ui46 = require("@elementor/ui");
+var import_ui47 = require("@elementor/ui");
 var import_i18n70 = require("@wordpress/i18n");
 var SIZE5 = "tiny";
 var LabelChip = ({ displayLabel, provider }) => {
   const isBaseStyle = provider === import_editor_styles_repository16.ELEMENTS_BASE_STYLES_PROVIDER_KEY;
-  const chipIcon = isBaseStyle ? /* @__PURE__ */ React97.createElement(import_ui46.Tooltip, { title: (0, import_i18n70.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React97.createElement(import_icons33.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
+  const chipIcon = isBaseStyle ? /* @__PURE__ */ React97.createElement(import_ui47.Tooltip, { title: (0, import_i18n70.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React97.createElement(import_icons33.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
   return /* @__PURE__ */ React97.createElement(
-    import_ui46.Chip,
+    import_ui47.Chip,
     {
       label: displayLabel,
       size: SIZE5,
@@ -6703,10 +6719,10 @@ var LabelChip = ({ displayLabel, provider }) => {
 
 // src/styles-inheritance/components/infotip/value-component.tsx
 var React98 = __toESM(require("react"));
-var import_ui47 = require("@elementor/ui");
+var import_ui48 = require("@elementor/ui");
 var ValueComponent = ({ index, value }) => {
-  return /* @__PURE__ */ React98.createElement(import_ui47.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React98.createElement(
-    import_ui47.Typography,
+  return /* @__PURE__ */ React98.createElement(import_ui48.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React98.createElement(
+    import_ui48.Typography,
     {
       variant: "caption",
       color: "text.tertiary",
@@ -6728,8 +6744,8 @@ var ValueComponent = ({ index, value }) => {
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
 var React99 = __toESM(require("react"));
-var import_ui48 = require("@elementor/ui");
-var ActionIcons = () => /* @__PURE__ */ React99.createElement(import_ui48.Box, { display: "flex", gap: 0.5, alignItems: "center" });
+var import_ui49 = require("@elementor/ui");
+var ActionIcons = () => /* @__PURE__ */ React99.createElement(import_ui49.Box, { display: "flex", gap: 0.5, alignItems: "center" });
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var SECTION_PADDING_INLINE = 32;
@@ -6765,8 +6781,8 @@ var StylesInheritanceInfotip = ({
     });
   }, [key, propType]);
   const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
-  const infotipContent = /* @__PURE__ */ React100.createElement(import_ui49.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React100.createElement(
-    import_ui49.Card,
+  const infotipContent = /* @__PURE__ */ React100.createElement(import_ui50.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React100.createElement(
+    import_ui50.Card,
     {
       elevation: 0,
       sx: {
@@ -6779,7 +6795,7 @@ var StylesInheritanceInfotip = ({
       }
     },
     /* @__PURE__ */ React100.createElement(
-      import_ui49.Box,
+      import_ui50.Box,
       {
         sx: {
           position: "sticky",
@@ -6791,7 +6807,7 @@ var StylesInheritanceInfotip = ({
       /* @__PURE__ */ React100.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n71.__)("Style origin", "elementor"), onClose: closeInfotip })
     ),
     /* @__PURE__ */ React100.createElement(
-      import_ui49.CardContent,
+      import_ui50.CardContent,
       {
         sx: {
           display: "flex",
@@ -6804,9 +6820,9 @@ var StylesInheritanceInfotip = ({
           }
         }
       },
-      /* @__PURE__ */ React100.createElement(import_ui49.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
+      /* @__PURE__ */ React100.createElement(import_ui50.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React100.createElement(
-          import_ui49.Box,
+          import_ui50.Box,
           {
             key: item.id,
             display: "flex",
@@ -6818,7 +6834,7 @@ var StylesInheritanceInfotip = ({
             )
           },
           /* @__PURE__ */ React100.createElement(
-            import_ui49.Box,
+            import_ui50.Box,
             {
               display: "flex",
               gap: 0.5,
@@ -6834,9 +6850,9 @@ var StylesInheritanceInfotip = ({
     )
   ));
   if (isDisabled) {
-    return /* @__PURE__ */ React100.createElement(import_ui49.Box, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React100.createElement(import_ui50.Box, { sx: { display: "inline-flex" } }, children);
   }
-  return /* @__PURE__ */ React100.createElement(import_ui49.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React100.createElement(import_ui50.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
     TooltipOrInfotip,
     {
       showInfotip,
@@ -6845,7 +6861,7 @@ var StylesInheritanceInfotip = ({
       isDisabled
     },
     /* @__PURE__ */ React100.createElement(
-      import_ui49.IconButton,
+      import_ui50.IconButton,
       {
         onClick: toggleInfotip,
         "aria-label": label,
@@ -6864,11 +6880,11 @@ function TooltipOrInfotip({
   isDisabled
 }) {
   if (isDisabled) {
-    return /* @__PURE__ */ React100.createElement(import_ui49.Box, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React100.createElement(import_ui50.Box, { sx: { display: "inline-flex" } }, children);
   }
   if (showInfotip) {
     return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
-      import_ui49.Backdrop,
+      import_ui50.Backdrop,
       {
         open: showInfotip,
         onClick: onClose,
@@ -6878,7 +6894,7 @@ function TooltipOrInfotip({
         }
       }
     ), /* @__PURE__ */ React100.createElement(
-      import_ui49.Infotip,
+      import_ui50.Infotip,
       {
         placement: "top-end",
         content: infotipContent,
@@ -6889,7 +6905,7 @@ function TooltipOrInfotip({
       children
     ));
   }
-  return /* @__PURE__ */ React100.createElement(import_ui49.Tooltip, { title: (0, import_i18n71.__)("Style origin", "elementor"), placement: "top" }, children);
+  return /* @__PURE__ */ React100.createElement(import_ui50.Tooltip, { title: (0, import_i18n71.__)("Style origin", "elementor"), placement: "top" }, children);
 }
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
@@ -6974,12 +6990,12 @@ var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) =>
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
 var React103 = __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__ */ React103.createElement(import_ui50.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemLabelColor, { value })));
+var import_ui51 = require("@elementor/ui");
+var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React103.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React103.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui51.styled)(import_ui51.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6990,9 +7006,9 @@ var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableC
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
 var React104 = __toESM(require("react"));
 var import_editor_canvas8 = require("@elementor/editor-canvas");
-var import_ui51 = require("@elementor/ui");
+var import_ui52 = require("@elementor/ui");
 var import_i18n73 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React104.createElement(import_ui51.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React104.createElement(ItemLabelGradient, { value })));
+var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React104.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React104.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React104.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
   return /* @__PURE__ */ React104.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
@@ -7015,13 +7031,13 @@ var getGradientValue = (gradient) => {
 var React105 = __toESM(require("react"));
 var import_editor_canvas9 = require("@elementor/editor-canvas");
 var import_editor_ui12 = require("@elementor/editor-ui");
-var import_ui52 = require("@elementor/ui");
+var import_ui53 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React105.createElement(import_ui52.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(ItemIconImage, { value }), /* @__PURE__ */ React105.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React105.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React105.createElement(ItemIconImage, { value }), /* @__PURE__ */ React105.createElement(ItemLabelImage, { value })));
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
   return /* @__PURE__ */ React105.createElement(
-    import_ui52.CardMedia,
+    import_ui53.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -7077,14 +7093,14 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
 // src/styles-inheritance/transformers/color-transformer.tsx
 var React107 = __toESM(require("react"));
 var import_editor_canvas11 = require("@elementor/editor-canvas");
-var import_ui53 = require("@elementor/ui");
+var import_ui54 = require("@elementor/ui");
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui54.styled)(import_ui54.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -7095,7 +7111,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React107.createElement(import_ui53.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React107.createElement("span", null, value));
+  return /* @__PURE__ */ React107.createElement(import_ui54.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React107.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React107.createElement("span", null, value));
 });
 
 // src/styles-inheritance/transformers/repeater-to-items-transformer.tsx