@elementor/editor-editing-panel 4.0.0-manual → 4.0.0

package/dist/index.mjs

@@ -2083,6 +2083,15 @@ import {
   isDependencyMet
 } from "@elementor/editor-props";
 import { getSessionStorageItem as getSessionStorageItem2, removeSessionStorageItem, setSessionStorageItem as setSessionStorageItem2 } from "@elementor/session";
+function getElementSettingsWithDefaults(propsSchema, elementSettings) {
+  const elementSettingsWithDefaults = { ...elementSettings };
+  Object.keys(propsSchema).forEach((key) => {
+    if (elementSettingsWithDefaults[key] === null && propsSchema[key].default !== null) {
+      elementSettingsWithDefaults[key] = propsSchema[key].default;
+    }
+  });
+  return elementSettingsWithDefaults;
+}
 function extractOrderedDependencies(dependenciesPerTargetMapping) {
   return Object.values(dependenciesPerTargetMapping).flat().filter((dependent, index, self) => self.indexOf(dependent) === index);
 }
@@ -2228,19 +2237,8 @@ var createTopLevelObjectType = ({ schema }) => {
 
 // src/controls-registry/settings-field.tsx
 var HISTORY_DEBOUNCE_WAIT2 = 800;
-var getElementSettigsWithDefaults = (propsSchema, elementSettings) => {
-  const elementSettingsWithDefaults = { ...elementSettings };
-  Object.keys(propsSchema).forEach((key) => {
-    if (!(key in elementSettingsWithDefaults)) {
-      if (propsSchema[key].default !== null) {
-        elementSettingsWithDefaults[key] = propsSchema[key].default;
-      }
-    }
-  });
-  return elementSettingsWithDefaults;
-};
 var extractDependencyEffect = (bind, propsSchema, currentElementSettings) => {
-  const elementSettingsForDepCheck = getElementSettigsWithDefaults(propsSchema, currentElementSettings);
+  const elementSettingsForDepCheck = getElementSettingsWithDefaults(propsSchema, currentElementSettings);
   const propType = propsSchema[bind];
   const depCheck = isDependencyMet2(propType?.dependencies, elementSettingsForDepCheck);
   const isHidden = !depCheck.isMet && !isDependency(depCheck.failingDependencies[0]) && depCheck.failingDependencies[0]?.effect === "hide";
@@ -3878,6 +3876,7 @@ var shouldDisplayFlexFields = (display, local) => {
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React54 from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef9 } from "react";
 import { useSessionStorage as useSessionStorage3 } from "@elementor/session";
 import { __ as __32 } from "@wordpress/i18n";
 
@@ -3969,42 +3968,65 @@ var ZIndexField = () => {
 };
 
 // src/components/style-sections/position-section/position-section.tsx
+var POSITION_STATIC = "static";
 var POSITION_LABEL2 = __32("Position", "elementor");
 var DIMENSIONS_LABEL = __32("Dimensions", "elementor");
+var POSITION_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": void 0,
+  "inset-block-end": void 0,
+  "inset-inline-start": void 0,
+  "inset-inline-end": void 0,
+  "z-index": void 0
+};
 var PositionSection = () => {
   const { value: positionValue } = useStylesField("position", {
     history: { propDisplayName: POSITION_LABEL2 }
   });
-  const { values: dimensions, setValues: setDimensions } = useStylesFields([
-    "inset-block-start",
-    "inset-block-end",
-    "inset-inline-start",
-    "inset-inline-end"
-  ]);
+  const { values: positionDependentValues, setValues: setPositionDependentValues } = useStylesFields([...POSITION_DEPENDENT_PROP_NAMES]);
   const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
+  const clearPositionDependentProps = useCallback2(() => {
+    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 = useRef9(clearPositionDependentProps);
+  clearPositionDependentPropsRef.current = clearPositionDependentProps;
+  useEffect6(() => {
+    if (positionValue?.value === POSITION_STATIC || positionValue === null) {
+      clearPositionDependentPropsRef.current();
+    }
+  }, [positionValue]);
   const onPositionChange = (newPosition, previousPosition) => {
     const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-    if (newPosition === "static") {
-      if (dimensions) {
-        updateDimensionsHistory(dimensions);
-        setDimensions(
-          {
-            "inset-block-start": void 0,
-            "inset-block-end": void 0,
-            "inset-inline-start": void 0,
-            "inset-inline-end": void 0
-          },
+    if (newPosition === POSITION_STATIC) {
+      clearPositionDependentProps();
+    } else if (previousPosition === POSITION_STATIC) {
+      if (dimensionsValuesFromHistory) {
+        setPositionDependentValues(
+          { ...dimensionsValuesFromHistory, "z-index": void 0 },
           meta
         );
-      }
-    } else if (previousPosition === "static") {
-      if (dimensionsValuesFromHistory) {
-        setDimensions(dimensionsValuesFromHistory, meta);
         clearDimensionsHistory();
       }
     }
   };
-  const isNotStatic = positionValue && positionValue?.value !== "static";
+  const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
   return /* @__PURE__ */ React54.createElement(SectionContent, null, /* @__PURE__ */ React54.createElement(PositionField, { onChange: onPositionChange }), isNotStatic ? /* @__PURE__ */ React54.createElement(React54.Fragment, null, /* @__PURE__ */ React54.createElement(DimensionsField, null), /* @__PURE__ */ React54.createElement(ZIndexField, null)) : null, /* @__PURE__ */ React54.createElement(PanelDivider, null), /* @__PURE__ */ React54.createElement(OffsetField, null));
 };
 var usePersistDimensions = () => {
@@ -4016,7 +4038,7 @@ var usePersistDimensions = () => {
 
 // src/components/style-sections/size-section/size-section.tsx
 import * as React59 from "react";
-import { useRef as useRef9 } from "react";
+import { useRef as useRef10 } from "react";
 import { AspectRatioControl, PositionControl, SizeControl as SizeControl6 } from "@elementor/editor-controls";
 import { Grid as Grid4, Stack as Stack10 } from "@elementor/ui";
 import { __ as __36 } from "@wordpress/i18n";
@@ -4183,7 +4205,7 @@ var CssSizeProps = [
 ];
 var ASPECT_RATIO_LABEL = __36("Aspect Ratio", "elementor");
 var SizeSection = () => {
-  const gridRowRefs = [useRef9(null), useRef9(null), useRef9(null)];
+  const gridRowRefs = [useRef10(null), useRef10(null), useRef10(null)];
   return /* @__PURE__ */ React59.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React59.createElement(Grid4, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React59.createElement(Grid4, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React59.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React59.createElement(PanelDivider, null), /* @__PURE__ */ React59.createElement(Stack10, null, /* @__PURE__ */ React59.createElement(OverflowField, null)), /* @__PURE__ */ React59.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React59.createElement(Stack10, { gap: 2, pt: 2 }, /* @__PURE__ */ React59.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React59.createElement(AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React59.createElement(PanelDivider, null), /* @__PURE__ */ React59.createElement(ObjectFitField, null), /* @__PURE__ */ React59.createElement(StylesField, { bind: "object-position", propDisplayName: __36("Object position", "elementor") }, /* @__PURE__ */ React59.createElement(Grid4, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(PositionControl, null))))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
@@ -4223,12 +4245,12 @@ var ColumnCountField = () => {
 
 // src/components/style-sections/typography-section/column-gap-field.tsx
 import * as React62 from "react";
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 import { SizeControl as SizeControl7 } from "@elementor/editor-controls";
 import { __ as __39 } from "@wordpress/i18n";
 var COLUMN_GAP_LABEL = __39("Column gap", "elementor");
 var ColumnGapField = () => {
-  const rowRef = useRef10(null);
+  const rowRef = useRef11(null);
   return /* @__PURE__ */ React62.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React62.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React62.createElement(SizeControl7, { anchorRef: rowRef })));
 };
 
@@ -4256,12 +4278,12 @@ var FontFamilyField = () => {
 
 // src/components/style-sections/typography-section/font-size-field.tsx
 import * as React64 from "react";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
 import { __ as __41 } from "@wordpress/i18n";
 var FONT_SIZE_LABEL = __41("Font size", "elementor");
 var FontSizeField = () => {
-  const rowRef = useRef11(null);
+  const rowRef = useRef12(null);
   return /* @__PURE__ */ React64.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React64.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React64.createElement(SizeControl8, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
 };
 
@@ -4311,23 +4333,23 @@ var FontWeightField = () => {
 
 // src/components/style-sections/typography-section/letter-spacing-field.tsx
 import * as React67 from "react";
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
 import { __ as __44 } from "@wordpress/i18n";
 var LETTER_SPACING_LABEL = __44("Letter spacing", "elementor");
 var LetterSpacingField = () => {
-  const rowRef = useRef12(null);
+  const rowRef = useRef13(null);
   return /* @__PURE__ */ React67.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React67.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React67.createElement(SizeControl9, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
 // src/components/style-sections/typography-section/line-height-field.tsx
 import * as React68 from "react";
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { SizeControl as SizeControl10 } from "@elementor/editor-controls";
 import { __ as __45 } from "@wordpress/i18n";
 var LINE_HEIGHT_LABEL = __45("Line height", "elementor");
 var LineHeightField = () => {
-  const rowRef = useRef13(null);
+  const rowRef = useRef14(null);
   return /* @__PURE__ */ React68.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React68.createElement(SizeControl10, { anchorRef: rowRef })));
 };
 
@@ -4549,12 +4571,12 @@ var TransformField = () => /* @__PURE__ */ React75.createElement(StylesField, {
 
 // src/components/style-sections/typography-section/word-spacing-field.tsx
 import * as React76 from "react";
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 import { SizeControl as SizeControl11 } from "@elementor/editor-controls";
 import { __ as __52 } from "@wordpress/i18n";
 var WORD_SPACING_LABEL = __52("Word spacing", "elementor");
 var WordSpacingField = () => {
-  const rowRef = useRef14(null);
+  const rowRef = useRef15(null);
   return /* @__PURE__ */ React76.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React76.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React76.createElement(SizeControl11, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
@@ -4827,7 +4849,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-open-editor-panel.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { __privateListenTo as listenTo, commandStartEvent } from "@elementor/editor-v1-adapters";
 
 // src/panel.ts
@@ -4851,7 +4873,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  useEffect6(() => {
+  useEffect7(() => {
     return listenTo(commandStartEvent("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -4871,11 +4893,12 @@ import { AttributesControl, DisplayConditionsControl } from "@elementor/editor-c
 
 // src/components/promotions/custom-css.tsx
 import * as React82 from "react";
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { PromotionTrigger } from "@elementor/editor-controls";
 import { __ as __56 } from "@wordpress/i18n";
+var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
 var CustomCssSection = () => {
-  const triggerRef = useRef15(null);
+  const triggerRef = useRef16(null);
   return /* @__PURE__ */ React82.createElement(
     StyleTabSection,
     {
@@ -4883,7 +4906,7 @@ var CustomCssSection = () => {
         name: "Custom CSS",
         title: __56("Custom CSS", "elementor"),
         action: {
-          component: /* @__PURE__ */ React82.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "customCss" }),
+          component: /* @__PURE__ */ React82.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "customCss", trackingData: TRACKING_DATA }),
           onClick: () => triggerRef.current?.toggle()
         }
       }
@@ -5586,9 +5609,9 @@ var DynamicControl = ({ bind, children }) => {
 };
 
 // src/dynamics/components/dynamic-selection.tsx
-import { Fragment as Fragment13, useState as useState10 } from "react";
 import * as React87 from "react";
-import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+import { Fragment as Fragment14, useEffect as useEffect8, useState as useState10 } from "react";
+import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
 import { Divider as Divider7, Link as Link2, Stack as Stack15, Typography as Typography5, useTheme as useTheme3 } from "@elementor/ui";
@@ -5607,6 +5630,13 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const isCurrentValueDynamic = !!dynamicValue;
   const options12 = useFilteredOptions(searchValue);
   const hasNoDynamicTags = !options12.length && !searchValue.trim();
+  useEffect8(() => {
+    if (hasNoDynamicTags) {
+      trackViewPromotion({ target_name: "dynamic_tags" });
+    } else if (expired) {
+      trackViewPromotion({ target_name: "dynamic_tags" });
+    }
+  }, [hasNoDynamicTags, expired]);
   const handleSearch = (value) => {
     setSearchValue(value);
   };
@@ -5637,7 +5667,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
     if (expired) {
       return /* @__PURE__ */ React87.createElement(ExpiredDynamicTags, null);
     }
-    return /* @__PURE__ */ React87.createElement(Fragment13, null, /* @__PURE__ */ React87.createElement(
+    return /* @__PURE__ */ React87.createElement(Fragment14, null, /* @__PURE__ */ React87.createElement(
       SearchField,
       {
         value: searchValue,
@@ -5694,7 +5724,14 @@ var NoDynamicTags = () => /* @__PURE__ */ React87.createElement(React87.Fragment
   /* @__PURE__ */ React87.createElement(DatabaseIcon2, { fontSize: "large" }),
   /* @__PURE__ */ React87.createElement(Typography5, { align: "center", variant: "subtitle2" }, __59("Streamline your workflow with dynamic tags", "elementor")),
   /* @__PURE__ */ React87.createElement(Typography5, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, __59("Upgrade now to display your content dynamically.", "elementor")),
-  /* @__PURE__ */ React87.createElement(CtaButton, { size: "small", href: PRO_DYNAMIC_TAGS_URL })
+  /* @__PURE__ */ React87.createElement(
+    CtaButton,
+    {
+      size: "small",
+      href: PRO_DYNAMIC_TAGS_URL,
+      onClick: () => trackUpgradePromotionClick({ target_name: "dynamic_tags" })
+    }
+  )
 ));
 var ExpiredDynamicTags = () => /* @__PURE__ */ React87.createElement(React87.Fragment, null, /* @__PURE__ */ React87.createElement(Divider7, null), /* @__PURE__ */ React87.createElement(
   Stack15,
@@ -5710,7 +5747,15 @@ var ExpiredDynamicTags = () => /* @__PURE__ */ React87.createElement(React87.Fra
   /* @__PURE__ */ React87.createElement(DatabaseIcon2, { fontSize: "large" }),
   /* @__PURE__ */ React87.createElement(Typography5, { align: "center", variant: "subtitle2" }, __59("Unlock your Dynamic tags again", "elementor")),
   /* @__PURE__ */ React87.createElement(Typography5, { align: "center", variant: "caption", width: PROMO_TEXT_WIDTH }, __59("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")),
-  /* @__PURE__ */ React87.createElement(CtaButton, { size: "small", href: RENEW_DYNAMIC_TAGS_URL, children: __59("Renew Now", "elementor") })
+  /* @__PURE__ */ React87.createElement(
+    CtaButton,
+    {
+      size: "small",
+      href: RENEW_DYNAMIC_TAGS_URL,
+      onClick: () => trackUpgradePromotionClick({ target_name: "dynamic_tags" }),
+      children: __59("Renew Now", "elementor")
+    }
+  )
 ));
 var useFilteredOptions = (searchValue) => {
   const dynamicTags = usePropDynamicTags();
@@ -6088,7 +6133,7 @@ import { __ as __66 } from "@wordpress/i18n";
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 import * as React94 from "react";
-import { useMemo as useMemo13, useRef as useRef16, useState as useState12 } from "react";
+import { useMemo as useMemo13, useRef as useRef17, useState as useState12 } from "react";
 import {
   createPropsResolver as createPropsResolver2,
   stylesInheritanceTransformersRegistry
@@ -6103,12 +6148,12 @@ import {
   IconButton as IconButton3,
   Infotip as Infotip2,
   Stack as Stack17,
-  Tooltip as Tooltip4
+  Tooltip as Tooltip5
 } from "@elementor/ui";
 import { __ as __65 } from "@wordpress/i18n";
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
-import { isValidElement, useEffect as useEffect7, useState as useState11 } from "react";
+import { isValidElement, useEffect as useEffect9, useState as useState11 } from "react";
 import { UnknownStyleStateError } from "@elementor/editor-canvas";
 import {
   isClassState as isClassState2,
@@ -6119,7 +6164,7 @@ import { __ as __63 } from "@wordpress/i18n";
 var MAXIMUM_ITEMS = 2;
 var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
   const [items3, setItems] = useState11([]);
-  useEffect7(() => {
+  useEffect9(() => {
     (async () => {
       const normalizedItems = await Promise.all(
         inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve))
@@ -6254,9 +6299,9 @@ var LabelChip = ({ displayLabel, provider }) => {
 
 // src/styles-inheritance/components/infotip/value-component.tsx
 import * as React92 from "react";
-import { Typography as Typography6 } from "@elementor/ui";
+import { Tooltip as Tooltip4, Typography as Typography6 } from "@elementor/ui";
 var ValueComponent = ({ index, value }) => {
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React92.createElement(Tooltip4, { title: value, placement: "top" }, /* @__PURE__ */ React92.createElement(
     Typography6,
     {
       variant: "caption",
@@ -6265,15 +6310,16 @@ var ValueComponent = ({ index, value }) => {
         mt: "1px",
         textDecoration: index === 0 ? "none" : "line-through",
         overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
+        display: "-webkit-box",
+        WebkitLineClamp: 1,
+        WebkitBoxOrient: "vertical",
         pl: 2.5,
         minWidth: 0,
         maxWidth: "100%"
       }
     },
     value
-  );
+  ));
 };
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
@@ -6300,7 +6346,7 @@ var StylesInheritanceInfotip = ({
   isDisabled
 }) => {
   const [showInfotip, setShowInfotip] = useState12(false);
-  const triggerRef = useRef16(null);
+  const triggerRef = useRef17(null);
   const toggleInfotip = () => {
     if (isDisabled) {
       return;
@@ -6361,7 +6407,7 @@ var StylesInheritanceInfotip = ({
           }
         }
       },
-      /* @__PURE__ */ React94.createElement(Stack17, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
+      /* @__PURE__ */ React94.createElement(Stack17, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React94.createElement(
           Box8,
           {
@@ -6456,21 +6502,19 @@ function TooltipOrInfotip({
             sx: { mx: 2 }
           }
         },
-        slotProps: {
-          popper: {
-            modifiers: [
-              {
-                name: "offset",
-                options: { offset: [offsetX, 0] }
-              }
-            ]
-          }
+        PopperProps: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [offsetX, 0] }
+            }
+          ]
         }
       },
       children
     ));
   }
-  return /* @__PURE__ */ React94.createElement(Tooltip4, { title: __65("Style origin", "elementor"), placement: "top" }, children);
+  return /* @__PURE__ */ React94.createElement(Tooltip5, { title: __65("Style origin", "elementor"), placement: "top" }, children);
 }
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
@@ -6545,19 +6589,22 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
 // src/styles-inheritance/transformers/array-transformer.tsx
 import * as React96 from "react";
 import { createTransformer as createTransformer2 } from "@elementor/editor-canvas";
-import { Stack as Stack18 } from "@elementor/ui";
 var arrayTransformer = createTransformer2((values) => {
   if (!values || values.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React96.createElement(Stack18, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React96.createElement(Stack18, { key: index }, item)));
+  const allStrings = values.every((item) => typeof item === "string" || typeof item === "number");
+  if (allStrings) {
+    return values.join(" ");
+  }
+  return /* @__PURE__ */ React96.createElement(React96.Fragment, null, values.map((item, index) => /* @__PURE__ */ React96.createElement(React96.Fragment, { key: index }, index > 0 && " ", item)));
 });
 
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
 import * as React97 from "react";
 import { createTransformer as createTransformer3 } from "@elementor/editor-canvas";
-import { Stack as Stack19, styled as styled6, UnstableColorIndicator } from "@elementor/ui";
-var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */ React97.createElement(Stack19, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemLabelColor, { value })));
+import { Stack as Stack18, styled as styled6, UnstableColorIndicator } from "@elementor/ui";
+var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */ React97.createElement(Stack18, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React97.createElement("span", null, color);
 };
@@ -6572,9 +6619,9 @@ var StyledUnstableColorIndicator = styled6(UnstableColorIndicator)(({ theme }) =
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
 import * as React98 from "react";
 import { createTransformer as createTransformer4 } from "@elementor/editor-canvas";
-import { Stack as Stack20 } from "@elementor/ui";
+import { Stack as Stack19 } from "@elementor/ui";
 import { __ as __67 } from "@wordpress/i18n";
-var backgroundGradientOverlayTransformer = createTransformer4((value) => /* @__PURE__ */ React98.createElement(Stack20, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React98.createElement(ItemLabelGradient, { value })));
+var backgroundGradientOverlayTransformer = createTransformer4((value) => /* @__PURE__ */ React98.createElement(Stack19, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React98.createElement(ItemLabelGradient, { value })));
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
   return /* @__PURE__ */ React98.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
@@ -6597,9 +6644,9 @@ var getGradientValue = (gradient) => {
 import * as React99 from "react";
 import { createTransformer as createTransformer5 } from "@elementor/editor-canvas";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
-import { CardMedia, Stack as Stack21 } from "@elementor/ui";
+import { CardMedia, Stack as Stack20 } from "@elementor/ui";
 import { useWpMediaAttachment } from "@elementor/wp-media";
-var backgroundImageOverlayTransformer = createTransformer5((value) => /* @__PURE__ */ React99.createElement(Stack21, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemIconImage, { value }), /* @__PURE__ */ React99.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = createTransformer5((value) => /* @__PURE__ */ React99.createElement(Stack20, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemIconImage, { value }), /* @__PURE__ */ React99.createElement(ItemLabelImage, { value })));
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
   return /* @__PURE__ */ React99.createElement(
@@ -6645,7 +6692,6 @@ var getFileExtensionFromFilename = (filename) => {
 // src/styles-inheritance/transformers/box-shadow-transformer.tsx
 import * as React100 from "react";
 import { createTransformer as createTransformer6 } from "@elementor/editor-canvas";
-import { Stack as Stack22 } from "@elementor/ui";
 var boxShadowTransformer = createTransformer6((value) => {
   if (!value) {
     return null;
@@ -6654,13 +6700,13 @@ var boxShadowTransformer = createTransformer6((value) => {
   const colorValue = color || "#000000";
   const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
   const positionValue = position || "outset";
-  return /* @__PURE__ */ React100.createElement(Stack22, { direction: "column", gap: 0.5, pb: 1 }, /* @__PURE__ */ React100.createElement("span", null, colorValue, " ", positionValue, ", ", sizes));
+  return /* @__PURE__ */ React100.createElement(React100.Fragment, null, colorValue, " ", positionValue, ", ", sizes);
 });
 
 // src/styles-inheritance/transformers/color-transformer.tsx
 import * as React101 from "react";
 import { createTransformer as createTransformer7 } from "@elementor/editor-canvas";
-import { Stack as Stack23, styled as styled7, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Stack as Stack21, styled as styled7, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
@@ -6678,24 +6724,18 @@ var colorTransformer = createTransformer7((value) => {
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React101.createElement(Stack23, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React101.createElement("span", null, value));
+  return /* @__PURE__ */ React101.createElement(Stack21, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React101.createElement(StyledColorIndicator, { size: "inherit", component: "span", value }), /* @__PURE__ */ React101.createElement("span", null, value));
 });
 
 // src/styles-inheritance/transformers/repeater-to-items-transformer.tsx
-import * as React102 from "react";
 import { createTransformer as createTransformer8 } from "@elementor/editor-canvas";
-import { Stack as Stack24 } from "@elementor/ui";
-var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
+var createRepeaterToItemsTransformer = (originalTransformer) => {
   return createTransformer8((value, options12) => {
     const stringResult = originalTransformer(value, options12);
     if (!stringResult || typeof stringResult !== "string") {
       return stringResult;
     }
-    const parts = stringResult.split(separator).filter(Boolean);
-    if (parts.length <= 1) {
-      return stringResult;
-    }
-    return /* @__PURE__ */ React102.createElement(Stack24, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React102.createElement(Stack24, { key: index }, part.trim())));
+    return stringResult;
   });
 };
 
@@ -6734,7 +6774,7 @@ function registerCustomTransformers(originalStyleTransformers) {
   );
   stylesInheritanceTransformersRegistry2.register(
     "transition",
-    createRepeaterToItemsTransformer(originalStyleTransformers.transition, ", ")
+    createRepeaterToItemsTransformer(originalStyleTransformers.transition)
   );
   ["background-overlay", "box-shadow", "transform-functions"].forEach(
     (propType) => stylesInheritanceTransformersRegistry2.register(propType, arrayTransformer)
@@ -6774,6 +6814,7 @@ var blockV1Panel = () => {
 };
 export {
   Control as BaseControl,
+  ControlTypeContainer,
   CustomCssIndicator,
   ElementProvider,
   FIELD_TYPE,