@elementor/editor-editing-panel 4.1.0-818 → 4.1.0-820

package/dist/index.js

@@ -1820,11 +1820,11 @@ var import_editor_controls54 = require("@elementor/editor-controls");
 var import_editor_elements13 = require("@elementor/editor-elements");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui8 = require("@elementor/editor-ui");
-var import_icons24 = require("@elementor/icons");
+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_ui40 = require("@elementor/ui");
+var import_ui41 = 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_ui39 = require("@elementor/ui");
+var import_ui40 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
 
 // src/contexts/scroll-context.tsx
@@ -2478,7 +2478,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_ui38 = require("@elementor/ui");
+var import_ui39 = require("@elementor/ui");
 var import_i18n59 = require("@wordpress/i18n");
 
 // src/contexts/styles-inheritance-context.tsx
@@ -4352,10 +4352,26 @@ var PositionField = ({ onChange }) => {
 // src/components/style-sections/position-section/z-index-field.tsx
 var React59 = __toESM(require("react"));
 var import_editor_controls34 = require("@elementor/editor-controls");
+var import_icons17 = require("@elementor/icons");
+var import_ui34 = require("@elementor/ui");
 var import_i18n37 = require("@wordpress/i18n");
 var Z_INDEX_LABEL = (0, import_i18n37.__)("Z-index", "elementor");
-var ZIndexField = () => {
-  return /* @__PURE__ */ React59.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(import_editor_controls34.NumberControl, null)));
+var ZIndexField = ({ disabled }) => {
+  const StyleField = /* @__PURE__ */ React59.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React59.createElement(import_editor_controls34.NumberControl, { disabled })));
+  const content = /* @__PURE__ */ React59.createElement(import_ui34.Alert, { color: "secondary", icon: /* @__PURE__ */ React59.createElement(import_icons17.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React59.createElement(import_ui34.AlertTitle, null, (0, import_i18n37.__)("Z-index", "elementor")), /* @__PURE__ */ React59.createElement(import_ui34.Box, { component: "span" }, (0, import_i18n37.__)(
+    "z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
+    "elementor"
+  )));
+  return disabled ? /* @__PURE__ */ React59.createElement(
+    import_ui34.Infotip,
+    {
+      placement: "right",
+      content,
+      color: "secondary",
+      slotProps: { popper: { sx: { width: 300 } } }
+    },
+    /* @__PURE__ */ React59.createElement(import_ui34.Box, null, StyleField)
+  ) : /* @__PURE__ */ React59.createElement(React59.Fragment, null, StyleField);
 };
 
 // src/components/style-sections/position-section/position-section.tsx
@@ -4418,7 +4434,7 @@ var PositionSection = () => {
     }
   };
   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), /* @__PURE__ */ React60.createElement(ZIndexField, null)) : null, /* @__PURE__ */ React60.createElement(PanelDivider, null), /* @__PURE__ */ React60.createElement(OffsetField, null));
+  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));
 };
 var usePersistDimensions = () => {
   const { id: styleDefID, meta } = useStyle();
@@ -4431,7 +4447,7 @@ var usePersistDimensions = () => {
 var React65 = __toESM(require("react"));
 var import_react31 = require("react");
 var import_editor_controls37 = require("@elementor/editor-controls");
-var import_ui35 = require("@elementor/ui");
+var import_ui36 = require("@elementor/ui");
 var import_i18n42 = require("@wordpress/i18n");
 
 // src/components/style-tab-collapsible-content.tsx
@@ -4441,7 +4457,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_ui34 = require("@elementor/ui");
+var import_ui35 = require("@elementor/ui");
 var import_i18n39 = require("@wordpress/i18n");
 var StylesInheritanceSectionIndicators = ({ fields }) => {
   const { id, meta, provider } = useStyle();
@@ -4458,7 +4474,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_ui34.Tooltip, { title: (0, import_i18n39.__)("Has styles", "elementor"), placement: "top" }, /* @__PURE__ */ React61.createElement(import_ui34.Stack, { direction: "row", sx: { "& > *": { marginInlineStart: -0.25 } }, role: "list" }, hasValues && provider && /* @__PURE__ */ React61.createElement(
+  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(
     StyleIndicator,
     {
       getColor: getStylesProviderThemeColor(provider.getKey()),
@@ -4534,26 +4550,26 @@ var ObjectFitField = () => {
 // src/components/style-sections/size-section/overflow-field.tsx
 var React64 = __toESM(require("react"));
 var import_editor_controls36 = require("@elementor/editor-controls");
-var import_icons17 = require("@elementor/icons");
+var import_icons18 = require("@elementor/icons");
 var import_i18n41 = require("@wordpress/i18n");
 var OVERFLOW_LABEL = (0, import_i18n41.__)("Overflow", "elementor");
 var options7 = [
   {
     value: "visible",
     label: (0, import_i18n41.__)("Visible", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons17.EyeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.EyeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "hidden",
     label: (0, import_i18n41.__)("Hidden", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons17.EyeOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.EyeOffIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "auto",
     label: (0, import_i18n41.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons17.LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(import_icons18.LetterAIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4597,10 +4613,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_ui35.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React65.createElement(import_ui35.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_ui35.Stack, null, /* @__PURE__ */ React65.createElement(OverflowField, null)), /* @__PURE__ */ React65.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React65.createElement(import_ui35.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_ui35.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_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))))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
-  return /* @__PURE__ */ React65.createElement(StylesField, { bind, propDisplayName: label }, /* @__PURE__ */ React65.createElement(import_ui35.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React65.createElement(import_ui35.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, label)), /* @__PURE__ */ React65.createElement(import_ui35.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_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 }))));
 };
 
 // src/components/style-sections/spacing-section/spacing-section.tsx
@@ -4680,20 +4696,20 @@ var FontSizeField = () => {
 // src/components/style-sections/typography-section/font-style-field.tsx
 var React71 = __toESM(require("react"));
 var import_editor_controls43 = require("@elementor/editor-controls");
-var import_icons18 = require("@elementor/icons");
+var import_icons19 = require("@elementor/icons");
 var import_i18n48 = require("@wordpress/i18n");
 var FONT_STYLE_LABEL = (0, import_i18n48.__)("Font style", "elementor");
 var options8 = [
   {
     value: "normal",
     label: (0, import_i18n48.__)("Normal", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons18.MinusIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons19.MinusIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "italic",
     label: (0, import_i18n48.__)("Italic", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons18.ItalicIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React71.createElement(import_icons19.ItalicIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4746,12 +4762,12 @@ var LineHeightField = () => {
 // src/components/style-sections/typography-section/text-alignment-field.tsx
 var React75 = __toESM(require("react"));
 var import_editor_controls47 = require("@elementor/editor-controls");
-var import_icons19 = require("@elementor/icons");
-var import_ui36 = require("@elementor/ui");
+var import_icons20 = require("@elementor/icons");
+var import_ui37 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
 var TEXT_ALIGNMENT_LABEL = (0, import_i18n52.__)("Text align", "elementor");
-var AlignStartIcon = (0, import_ui36.withDirection)(import_icons19.AlignLeftIcon);
-var AlignEndIcon = (0, import_ui36.withDirection)(import_icons19.AlignRightIcon);
+var AlignStartIcon = (0, import_ui37.withDirection)(import_icons20.AlignLeftIcon);
+var AlignEndIcon = (0, import_ui37.withDirection)(import_icons20.AlignRightIcon);
 var options9 = [
   {
     value: "start",
@@ -4762,7 +4778,7 @@ var options9 = [
   {
     value: "center",
     label: (0, import_i18n52.__)("Center", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons19.AlignCenterIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons20.AlignCenterIcon, { fontSize: size }),
     showTooltip: true
   },
   {
@@ -4774,7 +4790,7 @@ var options9 = [
   {
     value: "justify",
     label: (0, import_i18n52.__)("Justify", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons19.AlignJustifiedIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React75.createElement(import_icons20.AlignJustifiedIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4794,33 +4810,33 @@ var TextColorField = () => {
 // src/components/style-sections/typography-section/text-decoration-field.tsx
 var React77 = __toESM(require("react"));
 var import_editor_controls49 = require("@elementor/editor-controls");
-var import_icons20 = require("@elementor/icons");
+var import_icons21 = require("@elementor/icons");
 var import_i18n54 = require("@wordpress/i18n");
 var TEXT_DECORATION_LABEL = (0, import_i18n54.__)("Line decoration", "elementor");
 var options10 = [
   {
     value: "none",
     label: (0, import_i18n54.__)("None", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.MinusIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.MinusIcon, { fontSize: size }),
     showTooltip: true,
     exclusive: true
   },
   {
     value: "underline",
     label: (0, import_i18n54.__)("Underline", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.UnderlineIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.UnderlineIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "line-through",
     label: (0, import_i18n54.__)("Line-through", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.StrikethroughIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.StrikethroughIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "overline",
     label: (0, import_i18n54.__)("Overline", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons20.OverlineIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React77.createElement(import_icons21.OverlineIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4829,20 +4845,20 @@ var TextDecorationField = () => /* @__PURE__ */ React77.createElement(StylesFiel
 // src/components/style-sections/typography-section/text-direction-field.tsx
 var React78 = __toESM(require("react"));
 var import_editor_controls50 = require("@elementor/editor-controls");
-var import_icons21 = require("@elementor/icons");
+var import_icons22 = require("@elementor/icons");
 var import_i18n55 = require("@wordpress/i18n");
 var TEXT_DIRECTION_LABEL = (0, import_i18n55.__)("Direction", "elementor");
 var options11 = [
   {
     value: "ltr",
     label: (0, import_i18n55.__)("Left to right", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.TextDirectionLtrIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons22.TextDirectionLtrIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "rtl",
     label: (0, import_i18n55.__)("Right to left", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons21.TextDirectionRtlIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React78.createElement(import_icons22.TextDirectionRtlIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -4857,8 +4873,8 @@ var import_i18n56 = require("@wordpress/i18n");
 
 // src/components/add-or-remove-content.tsx
 var React79 = __toESM(require("react"));
-var import_icons22 = require("@elementor/icons");
-var import_ui37 = require("@elementor/ui");
+var import_icons23 = require("@elementor/icons");
+var import_ui38 = require("@elementor/ui");
 var SIZE = "tiny";
 var AddOrRemoveContent = ({
   isAdded,
@@ -4869,7 +4885,7 @@ var AddOrRemoveContent = ({
   renderLabel
 }) => {
   return /* @__PURE__ */ React79.createElement(SectionContent, null, /* @__PURE__ */ React79.createElement(
-    import_ui37.Stack,
+    import_ui38.Stack,
     {
       direction: "row",
       sx: {
@@ -4879,8 +4895,8 @@ var AddOrRemoveContent = ({
       }
     },
     renderLabel(),
-    isAdded ? /* @__PURE__ */ React79.createElement(import_ui37.IconButton, { size: SIZE, onClick: onRemove, "aria-label": "Remove", disabled }, /* @__PURE__ */ React79.createElement(import_icons22.MinusIcon, { fontSize: SIZE })) : /* @__PURE__ */ React79.createElement(import_ui37.IconButton, { size: SIZE, onClick: onAdd, "aria-label": "Add", disabled }, /* @__PURE__ */ React79.createElement(import_icons22.PlusIcon, { fontSize: SIZE }))
-  ), /* @__PURE__ */ React79.createElement(import_ui37.Collapse, { in: isAdded, unmountOnExit: true }, /* @__PURE__ */ React79.createElement(SectionContent, null, children)));
+    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)));
 };
 
 // src/components/style-sections/typography-section/text-stroke-field.tsx
@@ -4928,32 +4944,32 @@ var TextStrokeField = () => {
 // src/components/style-sections/typography-section/transform-field.tsx
 var React81 = __toESM(require("react"));
 var import_editor_controls52 = require("@elementor/editor-controls");
-var import_icons23 = require("@elementor/icons");
+var import_icons24 = require("@elementor/icons");
 var import_i18n57 = require("@wordpress/i18n");
 var TEXT_TRANSFORM_LABEL = (0, import_i18n57.__)("Text transform", "elementor");
 var options12 = [
   {
     value: "none",
     label: (0, import_i18n57.__)("None", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.MinusIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.MinusIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "capitalize",
     label: (0, import_i18n57.__)("Capitalize", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.LetterCaseIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.LetterCaseIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "uppercase",
     label: (0, import_i18n57.__)("Uppercase", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.LetterCaseUpperIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.LetterCaseUpperIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "lowercase",
     label: (0, import_i18n57.__)("Lowercase", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons23.LetterCaseLowerIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React81.createElement(import_icons24.LetterCaseLowerIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -5040,7 +5056,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_ui38.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_ui39.Divider, null)), /* @__PURE__ */ React85.createElement(SectionsList, null, /* @__PURE__ */ React85.createElement(
       StyleTabSection,
       {
         section: {
@@ -5166,12 +5182,12 @@ var StyleTab = () => {
           "transition"
         ]
       }
-    ), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(import_ui38.Box, { sx: { height: "150px" } })))
+    ), /* @__PURE__ */ React85.createElement(StyleTabSlot, null)), /* @__PURE__ */ React85.createElement(import_ui39.Box, { sx: { height: "150px" } })))
   ));
 };
 function ClassesHeader({ children }) {
   const scrollDirection = useScrollDirection();
-  return /* @__PURE__ */ React85.createElement(import_ui38.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
+  return /* @__PURE__ */ React85.createElement(import_ui39.Stack, { sx: { ...stickyHeaderStyles, top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 } }, children);
 }
 function useCurrentClassesProp() {
   const { elementType } = useElement();
@@ -5201,9 +5217,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_ui39.useTabs)(currentTab);
-  return /* @__PURE__ */ React86.createElement(ScrollProvider, null, /* @__PURE__ */ React86.createElement(import_ui39.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(import_ui39.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React86.createElement(
-    import_ui39.Tabs,
+  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,
     {
       variant: "fullWidth",
       size: "small",
@@ -5214,10 +5230,10 @@ var PanelTabContent = () => {
         setCurrentTab(newValue);
       }
     },
-    !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui39.Tab, { label: (0, import_i18n60.__)("General", "elementor"), ...getTabProps("settings") }),
-    /* @__PURE__ */ React86.createElement(import_ui39.Tab, { label: (0, import_i18n60.__)("Style", "elementor"), ...getTabProps("style") }),
-    isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui39.Tab, { label: (0, import_i18n60.__)("Interactions", "elementor"), ...getTabProps("interactions") })
-  ), /* @__PURE__ */ React86.createElement(import_ui39.Divider, null)), !isPromotedElement && /* @__PURE__ */ React86.createElement(import_ui39.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React86.createElement(SettingsTab, null)), /* @__PURE__ */ React86.createElement(import_ui39.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React86.createElement(StyleTab, null)), isInteractionsActive && /* @__PURE__ */ React86.createElement(import_ui39.TabPanel, { ...getTabPanelProps("interactions"), disablePadding: true }, /* @__PURE__ */ React86.createElement(InteractionsTab, null))));
+    !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))));
 };
 
 // src/components/editing-panel.tsx
@@ -5232,11 +5248,11 @@ var EditingPanel = () => {
   }
   const panelTitle = (0, import_i18n61.__)("Edit %s", "elementor").replace("%s", elementType.title);
   const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
-  let panelContent = /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React87.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React87.createElement(import_icons24.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React87.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React87.createElement(EditingPanelTabs, null)));
+  let panelContent = /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React87.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React87.createElement(import_icons25.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React87.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React87.createElement(EditingPanelTabs, null)));
   if (ReplacementComponent) {
     panelContent = /* @__PURE__ */ React87.createElement(ReplacementComponent, null);
   }
-  return /* @__PURE__ */ React87.createElement(import_ui40.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_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)))))));
 };
 
 // src/init.ts
@@ -5328,8 +5344,8 @@ var React89 = __toESM(require("react"));
 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_icons25 = require("@elementor/icons");
-var import_ui41 = require("@elementor/ui");
+var import_icons26 = require("@elementor/icons");
+var import_ui42 = require("@elementor/ui");
 var import_i18n64 = require("@wordpress/i18n");
 
 // src/controls-registry/element-controls/get-element-by-type.ts
@@ -5611,7 +5627,7 @@ var TabsControlContent = ({ label }) => {
 };
 var ItemLabel = ({ value, index }) => {
   const elementTitle = value?.title;
-  return /* @__PURE__ */ React89.createElement(import_ui41.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_ui42.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);
@@ -5619,19 +5635,19 @@ var ItemDefaultTab = ({ index }) => {
   if (!isDefault) {
     return null;
   }
-  return /* @__PURE__ */ React89.createElement(import_ui41.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n64.__)("Default", "elementor") });
+  return /* @__PURE__ */ React89.createElement(import_ui42.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_ui41.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_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 })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
   const { value, setValue } = (0, import_editor_controls58.useBoundProp)(import_editor_props16.numberPropTypeUtil);
   const isDefault = value === tabIndex;
-  return /* @__PURE__ */ React89.createElement(import_ui41.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_ui41.Switch,
+  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,
     {
       size: "small",
       checked: isDefault,
@@ -5648,8 +5664,8 @@ var DefaultTabControl = ({ tabIndex }) => {
 var TabLabelControl = ({ elementId }) => {
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
   const label = editorSettings?.title ?? "";
-  return /* @__PURE__ */ React89.createElement(import_ui41.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(import_editor_controls58.ControlFormLabel, null, (0, import_i18n64.__)("Tab name", "elementor")), /* @__PURE__ */ React89.createElement(
-    import_ui41.TextField,
+  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,
     {
       size: "tiny",
       value: label,
@@ -5670,18 +5686,18 @@ var ConditionalTooltip = ({
     return children;
   }
   return /* @__PURE__ */ React89.createElement(
-    import_ui41.Infotip,
+    import_ui42.Infotip,
     {
       arrow: false,
       content: /* @__PURE__ */ React89.createElement(
-        import_ui41.Alert,
+        import_ui42.Alert,
         {
           color: "secondary",
-          icon: /* @__PURE__ */ React89.createElement(import_icons25.InfoCircleFilledIcon, { fontSize: "tiny" }),
+          icon: /* @__PURE__ */ React89.createElement(import_icons26.InfoCircleFilledIcon, { fontSize: "tiny" }),
           size: "small",
           sx: { width: 288 }
         },
-        /* @__PURE__ */ React89.createElement(import_ui41.Typography, { variant: "body2" }, (0, import_i18n64.__)("To change the default tab, simply set another tab as default.", "elementor"))
+        /* @__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("span", null, children)
@@ -5709,7 +5725,7 @@ var import_menus2 = require("@elementor/menus");
 var React90 = __toESM(require("react"));
 var import_editor_controls60 = require("@elementor/editor-controls");
 var import_editor_props18 = require("@elementor/editor-props");
-var import_icons26 = require("@elementor/icons");
+var import_icons27 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
 var import_react43 = require("react");
@@ -5844,7 +5860,7 @@ var useDynamicTag = (tagName) => {
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
-var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React90.createElement(import_icons26.DatabaseIcon, { fontSize: "tiny" });
+var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React90.createElement(import_icons27.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
   const context = (0, import_editor_controls60.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React90.createElement(import_editor_controls60.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React90.createElement(import_editor_controls60.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React90.createElement(Wrapper2, { rawValue: value.value })));
@@ -5864,8 +5880,8 @@ var Content = ({ rawValue }) => {
 var React94 = __toESM(require("react"));
 var import_editor_controls63 = require("@elementor/editor-controls");
 var import_editor_ui10 = require("@elementor/editor-ui");
-var import_icons28 = require("@elementor/icons");
-var import_ui43 = require("@elementor/ui");
+var import_icons29 = require("@elementor/icons");
+var import_ui44 = require("@elementor/ui");
 var import_i18n66 = require("@wordpress/i18n");
 
 // src/hooks/use-persist-dynamic-value.ts
@@ -5967,8 +5983,8 @@ var React93 = __toESM(require("react"));
 var import_react45 = require("react");
 var import_editor_controls62 = require("@elementor/editor-controls");
 var import_editor_ui9 = require("@elementor/editor-ui");
-var import_icons27 = require("@elementor/icons");
-var import_ui42 = require("@elementor/ui");
+var import_icons28 = require("@elementor/icons");
+var import_ui43 = require("@elementor/ui");
 var import_i18n65 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
 var PROMO_TEXT_WIDTH = 170;
@@ -5977,7 +5993,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_ui42.useTheme)();
+  const theme = (0, import_ui43.useTheme)();
   const { value: anyValue } = (0, import_editor_controls62.useBoundProp)();
   const { bind, value: dynamicValue, setValue } = (0, import_editor_controls62.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
@@ -6028,7 +6044,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
         onSearch: handleSearch,
         placeholder: (0, import_i18n65.__)("Search dynamic tags\u2026", "elementor")
       }
-    ), /* @__PURE__ */ React93.createElement(import_ui42.Divider, null), /* @__PURE__ */ React93.createElement(
+    ), /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
       import_editor_ui9.PopoverMenuList,
       {
         items: virtualizedItems,
@@ -6045,12 +6061,12 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
     {
       title: (0, import_i18n65.__)("Dynamic tags", "elementor"),
       onClose: closePopover,
-      icon: /* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: SIZE2 })
+      icon: /* @__PURE__ */ React93.createElement(import_icons28.DatabaseIcon, { fontSize: SIZE2 })
     }
   ), getPopOverContent());
 };
 var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React93.createElement(
-  import_ui42.Stack,
+  import_ui43.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6060,12 +6076,12 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React93.createElem
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React93.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n65.__)("Try something else.", "elementor"), /* @__PURE__ */ React93.createElement(import_ui42.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n65.__)("Clear & try again", "elementor")))
+  /* @__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")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui42.Divider, null), /* @__PURE__ */ React93.createElement(
-  import_ui42.Stack,
+var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
+  import_ui43.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6075,9 +6091,9 @@ var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Streamline your workflow with dynamic tags", "elementor")),
-  /* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, (0, import_i18n65.__)("Upgrade now to display your content dynamically.", "elementor")),
+  /* @__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_editor_ui9.CtaButton,
     {
@@ -6087,8 +6103,8 @@ var NoDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment
     }
   )
 ));
-var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui42.Divider, null), /* @__PURE__ */ React93.createElement(
-  import_ui42.Stack,
+var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(import_ui43.Divider, null), /* @__PURE__ */ React93.createElement(
+  import_ui43.Stack,
   {
     gap: 1,
     alignItems: "center",
@@ -6098,9 +6114,9 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React93.createElement(React93.Fra
     color: "text.secondary",
     sx: { pb: 3.5 }
   },
-  /* @__PURE__ */ React93.createElement(import_icons27.DatabaseIcon, { fontSize: "large" }),
-  /* @__PURE__ */ React93.createElement(import_ui42.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n65.__)("Unlock your Dynamic tags again", "elementor")),
-  /* @__PURE__ */ React93.createElement(import_ui42.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_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_editor_ui9.CtaButton,
     {
@@ -6140,7 +6156,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
     }
   });
   const [propValueFromHistory] = usePersistDynamicValue(bind);
-  const selectionPopoverState = (0, import_ui43.usePopupState)({ variant: "popover" });
+  const selectionPopoverState = (0, import_ui44.usePopupState)({ variant: "popover" });
   const { name: tagName = "" } = value;
   const dynamicTag = useDynamicTag(tagName);
   if (!isDynamicTagSupported(tagName) && OriginalControl) {
@@ -6152,26 +6168,26 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React94.createElement(import_ui43.Box, null, /* @__PURE__ */ React94.createElement(
-    import_ui43.UnstableTag,
+  return /* @__PURE__ */ React94.createElement(import_ui44.Box, null, /* @__PURE__ */ React94.createElement(
+    import_ui44.UnstableTag,
     {
       fullWidth: true,
       showActionsOnHover: true,
       label: dynamicTag.label,
-      startIcon: /* @__PURE__ */ React94.createElement(import_icons28.DatabaseIcon, { fontSize: SIZE3 }),
-      ...(0, import_ui43.bindTrigger)(selectionPopoverState),
+      startIcon: /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE3 }),
+      ...(0, import_ui44.bindTrigger)(selectionPopoverState),
       actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(DynamicSettingsPopover, { dynamicTag, disabled: readonly }), /* @__PURE__ */ React94.createElement(
-        import_ui43.IconButton,
+        import_ui44.IconButton,
         {
           size: SIZE3,
           onClick: removeDynamicTag,
           "aria-label": (0, import_i18n66.__)("Remove dynamic value", "elementor")
         },
-        /* @__PURE__ */ React94.createElement(import_icons28.XIcon, { fontSize: SIZE3 })
+        /* @__PURE__ */ React94.createElement(import_icons29.XIcon, { fontSize: SIZE3 })
       ))
     }
   ), /* @__PURE__ */ React94.createElement(
-    import_ui43.Popover,
+    import_ui44.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -6180,7 +6196,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui43.bindPopover)(selectionPopoverState)
+      ...(0, import_ui44.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 }))
   ));
@@ -6189,22 +6205,22 @@ var DynamicSettingsPopover = ({
   dynamicTag,
   disabled = false
 }) => {
-  const popupState = (0, import_ui43.usePopupState)({ variant: "popover" });
+  const popupState = (0, import_ui44.usePopupState)({ variant: "popover" });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
     return null;
   }
   return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(
-    import_ui43.IconButton,
+    import_ui44.IconButton,
     {
       size: SIZE3,
       disabled,
-      ...!disabled && (0, import_ui43.bindTrigger)(popupState),
+      ...!disabled && (0, import_ui44.bindTrigger)(popupState),
       "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor")
     },
-    /* @__PURE__ */ React94.createElement(import_icons28.SettingsIcon, { fontSize: SIZE3 })
+    /* @__PURE__ */ React94.createElement(import_icons29.SettingsIcon, { fontSize: SIZE3 })
   ), /* @__PURE__ */ React94.createElement(
-    import_ui43.Popover,
+    import_ui44.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -6213,39 +6229,39 @@ var DynamicSettingsPopover = ({
       PaperProps: {
         sx: { my: 1 }
       },
-      ...(0, import_ui43.bindPopover)(popupState)
+      ...(0, import_ui44.bindPopover)(popupState)
     },
     /* @__PURE__ */ React94.createElement(import_editor_ui10.SectionPopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React94.createElement(
       import_editor_ui10.PopoverHeader,
       {
         title: dynamicTag.label,
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React94.createElement(import_icons28.DatabaseIcon, { fontSize: SIZE3 })
+        icon: /* @__PURE__ */ React94.createElement(import_icons29.DatabaseIcon, { fontSize: SIZE3 })
       }
     ), /* @__PURE__ */ React94.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_ui44.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_ui43.Divider, null), /* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: singleTab.value.items }));
+    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, tabs.length > 1 && /* @__PURE__ */ React94.createElement(import_ui43.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React94.createElement(
-    import_ui43.Tab,
+  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,
     {
       key: index,
       label: value.label,
       sx: { px: 1, py: 0.5 },
       ...getTabProps(index)
     }
-  ))), /* @__PURE__ */ React94.createElement(import_ui43.Divider, null), tabs.map(({ value }, index) => {
+  ))), /* @__PURE__ */ React94.createElement(import_ui44.Divider, null), tabs.map(({ value }, index) => {
     return /* @__PURE__ */ React94.createElement(
-      import_ui43.TabPanel,
+      import_ui44.TabPanel,
       {
         key: index,
         sx: { flexGrow: 1, py: 0, overflowY: "auto" },
@@ -6293,10 +6309,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_ui43.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React94.createElement(import_ui43.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(import_editor_controls63.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React94.createElement(import_ui43.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_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 }))));
 };
 function ControlsItemsStack({ items: items3 }) {
-  return /* @__PURE__ */ React94.createElement(import_ui43.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
+  return /* @__PURE__ */ React94.createElement(import_ui44.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
   ));
 }
@@ -6352,14 +6368,14 @@ function getDynamicValue(name, settings) {
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 var React95 = __toESM(require("react"));
 var import_editor_controls64 = require("@elementor/editor-controls");
-var import_icons29 = require("@elementor/icons");
+var import_icons30 = require("@elementor/icons");
 var import_i18n67 = require("@wordpress/i18n");
 var usePropDynamicAction = () => {
   const { propType } = (0, import_editor_controls64.useBoundProp)();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
-    icon: import_icons29.DatabaseIcon,
+    icon: import_icons30.DatabaseIcon,
     title: (0, import_i18n67.__)("Dynamic tags", "elementor"),
     content: ({ close }) => /* @__PURE__ */ React95.createElement(DynamicSelection, { close })
   };
@@ -6394,7 +6410,7 @@ var init2 = () => {
 // src/reset-style-props.tsx
 var import_editor_controls66 = require("@elementor/editor-controls");
 var import_editor_variables2 = require("@elementor/editor-variables");
-var import_icons30 = require("@elementor/icons");
+var import_icons31 = require("@elementor/icons");
 var import_menus3 = require("@elementor/menus");
 var import_i18n68 = require("@wordpress/i18n");
 
@@ -6473,7 +6489,7 @@ function useResetStyleValueProps() {
   return {
     visible,
     title: (0, import_i18n68.__)("Clear", "elementor"),
-    icon: import_icons30.BrushBigIcon,
+    icon: import_icons31.BrushBigIcon,
     onClick: () => resetValue()
   };
 }
@@ -6490,7 +6506,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_ui48 = require("@elementor/ui");
+var import_ui49 = require("@elementor/ui");
 var import_i18n71 = require("@wordpress/i18n");
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
@@ -6568,18 +6584,18 @@ var getTransformedValue = async (item, bind, resolve) => {
 // src/styles-inheritance/components/infotip/breakpoint-icon.tsx
 var React96 = __toESM(require("react"));
 var import_editor_responsive4 = require("@elementor/editor-responsive");
-var import_icons31 = require("@elementor/icons");
-var import_ui44 = require("@elementor/ui");
+var import_icons32 = require("@elementor/icons");
+var import_ui45 = require("@elementor/ui");
 var SIZE4 = "tiny";
 var DEFAULT_BREAKPOINT3 = "desktop";
 var breakpointIconMap = {
-  widescreen: import_icons31.WidescreenIcon,
-  desktop: import_icons31.DesktopIcon,
-  laptop: import_icons31.LaptopIcon,
-  tablet_extra: import_icons31.TabletLandscapeIcon,
-  tablet: import_icons31.TabletPortraitIcon,
-  mobile_extra: import_icons31.MobileLandscapeIcon,
-  mobile: import_icons31.MobilePortraitIcon
+  widescreen: import_icons32.WidescreenIcon,
+  desktop: import_icons32.DesktopIcon,
+  laptop: import_icons32.LaptopIcon,
+  tablet_extra: import_icons32.TabletLandscapeIcon,
+  tablet: import_icons32.TabletPortraitIcon,
+  mobile_extra: import_icons32.MobileLandscapeIcon,
+  mobile: import_icons32.MobilePortraitIcon
 };
 var BreakpointIcon = ({ breakpoint }) => {
   const breakpoints = (0, import_editor_responsive4.useBreakpoints)();
@@ -6589,21 +6605,21 @@ var BreakpointIcon = ({ breakpoint }) => {
     return null;
   }
   const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label;
-  return /* @__PURE__ */ React96.createElement(import_ui44.Tooltip, { title: breakpointLabel, placement: "top" }, /* @__PURE__ */ React96.createElement(IconComponent, { fontSize: SIZE4, sx: { mt: "2px" } }));
+  return /* @__PURE__ */ React96.createElement(import_ui45.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_icons32 = require("@elementor/icons");
-var import_ui45 = require("@elementor/ui");
+var import_icons33 = require("@elementor/icons");
+var import_ui46 = 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_ui45.Tooltip, { title: (0, import_i18n70.__)("Inherited from base styles", "elementor"), placement: "top" }, /* @__PURE__ */ React97.createElement(import_icons32.InfoCircleIcon, { fontSize: SIZE5 })) : void 0;
+  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;
   return /* @__PURE__ */ React97.createElement(
-    import_ui45.Chip,
+    import_ui46.Chip,
     {
       label: displayLabel,
       size: SIZE5,
@@ -6629,10 +6645,10 @@ var LabelChip = ({ displayLabel, provider }) => {
 
 // src/styles-inheritance/components/infotip/value-component.tsx
 var React98 = __toESM(require("react"));
-var import_ui46 = require("@elementor/ui");
+var import_ui47 = require("@elementor/ui");
 var ValueComponent = ({ index, value }) => {
-  return /* @__PURE__ */ React98.createElement(import_ui46.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React98.createElement(
-    import_ui46.Typography,
+  return /* @__PURE__ */ React98.createElement(import_ui47.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React98.createElement(
+    import_ui47.Typography,
     {
       variant: "caption",
       color: "text.tertiary",
@@ -6654,8 +6670,8 @@ var ValueComponent = ({ index, value }) => {
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
 var React99 = __toESM(require("react"));
-var import_ui47 = require("@elementor/ui");
-var ActionIcons = () => /* @__PURE__ */ React99.createElement(import_ui47.Box, { display: "flex", gap: 0.5, alignItems: "center" });
+var import_ui48 = require("@elementor/ui");
+var ActionIcons = () => /* @__PURE__ */ React99.createElement(import_ui48.Box, { display: "flex", gap: 0.5, alignItems: "center" });
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var SECTION_PADDING_INLINE = 32;
@@ -6691,8 +6707,8 @@ var StylesInheritanceInfotip = ({
     });
   }, [key, propType]);
   const items3 = useNormalizedInheritanceChainItems(inheritanceChain, key, resolve);
-  const infotipContent = /* @__PURE__ */ React100.createElement(import_ui48.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React100.createElement(
-    import_ui48.Card,
+  const infotipContent = /* @__PURE__ */ React100.createElement(import_ui49.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ React100.createElement(
+    import_ui49.Card,
     {
       elevation: 0,
       sx: {
@@ -6705,7 +6721,7 @@ var StylesInheritanceInfotip = ({
       }
     },
     /* @__PURE__ */ React100.createElement(
-      import_ui48.Box,
+      import_ui49.Box,
       {
         sx: {
           position: "sticky",
@@ -6717,7 +6733,7 @@ var StylesInheritanceInfotip = ({
       /* @__PURE__ */ React100.createElement(import_editor_ui11.PopoverHeader, { title: (0, import_i18n71.__)("Style origin", "elementor"), onClose: closeInfotip })
     ),
     /* @__PURE__ */ React100.createElement(
-      import_ui48.CardContent,
+      import_ui49.CardContent,
       {
         sx: {
           display: "flex",
@@ -6730,9 +6746,9 @@ var StylesInheritanceInfotip = ({
           }
         }
       },
-      /* @__PURE__ */ React100.createElement(import_ui48.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_ui49.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_ui48.Box,
+          import_ui49.Box,
           {
             key: item.id,
             display: "flex",
@@ -6744,7 +6760,7 @@ var StylesInheritanceInfotip = ({
             )
           },
           /* @__PURE__ */ React100.createElement(
-            import_ui48.Box,
+            import_ui49.Box,
             {
               display: "flex",
               gap: 0.5,
@@ -6760,9 +6776,9 @@ var StylesInheritanceInfotip = ({
     )
   ));
   if (isDisabled) {
-    return /* @__PURE__ */ React100.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React100.createElement(import_ui49.Box, { sx: { display: "inline-flex" } }, children);
   }
-  return /* @__PURE__ */ React100.createElement(import_ui48.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React100.createElement(import_ui49.Box, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React100.createElement(
     TooltipOrInfotip,
     {
       showInfotip,
@@ -6771,7 +6787,7 @@ var StylesInheritanceInfotip = ({
       isDisabled
     },
     /* @__PURE__ */ React100.createElement(
-      import_ui48.IconButton,
+      import_ui49.IconButton,
       {
         onClick: toggleInfotip,
         "aria-label": label,
@@ -6790,11 +6806,11 @@ function TooltipOrInfotip({
   isDisabled
 }) {
   if (isDisabled) {
-    return /* @__PURE__ */ React100.createElement(import_ui48.Box, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React100.createElement(import_ui49.Box, { sx: { display: "inline-flex" } }, children);
   }
   if (showInfotip) {
     return /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
-      import_ui48.Backdrop,
+      import_ui49.Backdrop,
       {
         open: showInfotip,
         onClick: onClose,
@@ -6804,7 +6820,7 @@ function TooltipOrInfotip({
         }
       }
     ), /* @__PURE__ */ React100.createElement(
-      import_ui48.Infotip,
+      import_ui49.Infotip,
       {
         placement: "top-end",
         content: infotipContent,
@@ -6815,7 +6831,7 @@ function TooltipOrInfotip({
       children
     ));
   }
-  return /* @__PURE__ */ React100.createElement(import_ui48.Tooltip, { title: (0, import_i18n71.__)("Style origin", "elementor"), placement: "top" }, children);
+  return /* @__PURE__ */ React100.createElement(import_ui49.Tooltip, { title: (0, import_i18n71.__)("Style origin", "elementor"), placement: "top" }, children);
 }
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
@@ -6900,12 +6916,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_ui49 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React103.createElement(import_ui49.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React103.createElement(ItemLabelColor, { value })));
+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 ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React103.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6916,9 +6932,9 @@ var StyledUnstableColorIndicator = (0, import_ui49.styled)(import_ui49.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_ui50 = require("@elementor/ui");
+var import_ui51 = require("@elementor/ui");
 var import_i18n73 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React104.createElement(import_ui50.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_ui51.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 });
@@ -6941,13 +6957,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_ui51 = require("@elementor/ui");
+var import_ui52 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React105.createElement(import_ui51.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_ui52.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_ui51.CardMedia,
+    import_ui52.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -7003,14 +7019,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_ui52 = 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_ui52.styled)(import_ui52.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui53.styled)(import_ui53.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -7021,7 +7037,7 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React107.createElement(import_ui52.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_ui53.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