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

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BaseControl: () => Control,
+  ControlTypeContainer: () => ControlTypeContainer,
   CustomCssIndicator: () => CustomCssIndicator,
   ElementProvider: () => ElementProvider,
   FIELD_TYPE: () => FIELD_TYPE,
@@ -1772,7 +1773,7 @@ function EditorPanelErrorFallback() {
 }
 
 // src/components/editing-panel-tabs.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var React80 = __toESM(require("react"));
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_ui35 = require("@elementor/ui");
@@ -2404,7 +2405,7 @@ function isControl(control) {
 
 // src/components/style-tab.tsx
 var React79 = __toESM(require("react"));
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_editor_props14 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_locations3 = require("@elementor/locations");
@@ -3810,6 +3811,7 @@ var shouldDisplayFlexFields = (display, local) => {
 
 // src/components/style-sections/position-section/position-section.tsx
 var React54 = __toESM(require("react"));
+var import_react26 = require("react");
 var import_session6 = require("@elementor/session");
 var import_i18n32 = require("@wordpress/i18n");
 
@@ -3901,42 +3903,65 @@ var ZIndexField = () => {
 };
 
 // src/components/style-sections/position-section/position-section.tsx
+var POSITION_STATIC = "static";
 var POSITION_LABEL2 = (0, import_i18n32.__)("Position", "elementor");
 var DIMENSIONS_LABEL = (0, import_i18n32.__)("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 = (0, import_react26.useCallback)(() => {
+    const dimensions = {
+      "inset-block-start": positionDependentValues?.["inset-block-start"],
+      "inset-block-end": positionDependentValues?.["inset-block-end"],
+      "inset-inline-start": positionDependentValues?.["inset-inline-start"],
+      "inset-inline-end": positionDependentValues?.["inset-inline-end"]
+    };
+    const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
+    const hasValuesToClear = Object.values(dimensions).some((v) => v !== null) || positionDependentValues?.["z-index"] !== null;
+    if (hasValuesToClear) {
+      updateDimensionsHistory(dimensions);
+      setPositionDependentValues(CLEARED_POSITION_DEPENDENT_VALUES, meta);
+    }
+  }, [positionDependentValues, updateDimensionsHistory, setPositionDependentValues]);
+  const clearPositionDependentPropsRef = (0, import_react26.useRef)(clearPositionDependentProps);
+  clearPositionDependentPropsRef.current = clearPositionDependentProps;
+  (0, import_react26.useEffect)(() => {
+    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 = () => {
@@ -3948,7 +3973,7 @@ var usePersistDimensions = () => {
 
 // src/components/style-sections/size-section/size-section.tsx
 var React59 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_editor_controls32 = require("@elementor/editor-controls");
 var import_ui31 = require("@elementor/ui");
 var import_i18n36 = require("@wordpress/i18n");
@@ -4115,7 +4140,7 @@ var CssSizeProps = [
 ];
 var ASPECT_RATIO_LABEL = (0, import_i18n36.__)("Aspect Ratio", "elementor");
 var SizeSection = () => {
-  const gridRowRefs = [(0, import_react26.useRef)(null), (0, import_react26.useRef)(null), (0, import_react26.useRef)(null)];
+  const gridRowRefs = [(0, import_react27.useRef)(null), (0, import_react27.useRef)(null), (0, import_react27.useRef)(null)];
   return /* @__PURE__ */ React59.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React59.createElement(import_ui31.Grid, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React59.createElement(import_ui31.Grid, { 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(import_ui31.Stack, null, /* @__PURE__ */ React59.createElement(OverflowField, null)), /* @__PURE__ */ React59.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React59.createElement(import_ui31.Stack, { gap: 2, pt: 2 }, /* @__PURE__ */ React59.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React59.createElement(import_editor_controls32.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React59.createElement(PanelDivider, null), /* @__PURE__ */ React59.createElement(ObjectFitField, null), /* @__PURE__ */ React59.createElement(StylesField, { bind: "object-position", propDisplayName: (0, import_i18n36.__)("Object position", "elementor") }, /* @__PURE__ */ React59.createElement(import_ui31.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React59.createElement(import_editor_controls32.PositionControl, null))))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
@@ -4155,12 +4180,12 @@ var ColumnCountField = () => {
 
 // src/components/style-sections/typography-section/column-gap-field.tsx
 var React62 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_editor_controls35 = require("@elementor/editor-controls");
 var import_i18n39 = require("@wordpress/i18n");
 var COLUMN_GAP_LABEL = (0, import_i18n39.__)("Column gap", "elementor");
 var ColumnGapField = () => {
-  const rowRef = (0, import_react27.useRef)(null);
+  const rowRef = (0, import_react28.useRef)(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(import_editor_controls35.SizeControl, { anchorRef: rowRef })));
 };
 
@@ -4188,12 +4213,12 @@ var FontFamilyField = () => {
 
 // src/components/style-sections/typography-section/font-size-field.tsx
 var React64 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_editor_controls37 = require("@elementor/editor-controls");
 var import_i18n41 = require("@wordpress/i18n");
 var FONT_SIZE_LABEL = (0, import_i18n41.__)("Font size", "elementor");
 var FontSizeField = () => {
-  const rowRef = (0, import_react28.useRef)(null);
+  const rowRef = (0, import_react29.useRef)(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(import_editor_controls37.SizeControl, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
 };
 
@@ -4243,23 +4268,23 @@ var FontWeightField = () => {
 
 // src/components/style-sections/typography-section/letter-spacing-field.tsx
 var React67 = __toESM(require("react"));
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_editor_controls40 = require("@elementor/editor-controls");
 var import_i18n44 = require("@wordpress/i18n");
 var LETTER_SPACING_LABEL = (0, import_i18n44.__)("Letter spacing", "elementor");
 var LetterSpacingField = () => {
-  const rowRef = (0, import_react29.useRef)(null);
+  const rowRef = (0, import_react30.useRef)(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(import_editor_controls40.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
 // src/components/style-sections/typography-section/line-height-field.tsx
 var React68 = __toESM(require("react"));
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_editor_controls41 = require("@elementor/editor-controls");
 var import_i18n45 = require("@wordpress/i18n");
 var LINE_HEIGHT_LABEL = (0, import_i18n45.__)("Line height", "elementor");
 var LineHeightField = () => {
-  const rowRef = (0, import_react30.useRef)(null);
+  const rowRef = (0, import_react31.useRef)(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(import_editor_controls41.SizeControl, { anchorRef: rowRef })));
 };
 
@@ -4481,12 +4506,12 @@ var TransformField = () => /* @__PURE__ */ React75.createElement(StylesField, {
 
 // src/components/style-sections/typography-section/word-spacing-field.tsx
 var React76 = __toESM(require("react"));
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_editor_controls48 = require("@elementor/editor-controls");
 var import_i18n52 = require("@wordpress/i18n");
 var WORD_SPACING_LABEL = (0, import_i18n52.__)("Word spacing", "elementor");
 var WordSpacingField = () => {
-  const rowRef = (0, import_react31.useRef)(null);
+  const rowRef = (0, import_react32.useRef)(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(import_editor_controls48.SizeControl, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
@@ -4544,7 +4569,7 @@ var stickyHeaderStyles = {
 var StyleTab = () => {
   const currentClassesProp = useCurrentClassesProp();
   const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp ?? "");
-  const [activeStyleState, setActiveStyleState] = (0, import_react32.useState)(null);
+  const [activeStyleState, setActiveStyleState] = (0, import_react33.useState)(null);
   const breakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
   if (!currentClassesProp) {
     return null;
@@ -4707,7 +4732,7 @@ var EditingPanelTabs = () => {
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React80.createElement(import_react33.Fragment, { key: element.id }, /* @__PURE__ */ React80.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React80.createElement(import_react34.Fragment, { key: element.id }, /* @__PURE__ */ React80.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -4759,7 +4784,7 @@ var import_editor_panels3 = require("@elementor/editor-panels");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-open-editor-panel.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/panel.ts
@@ -4783,7 +4808,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     return (0, import_editor_v1_adapters8.__privateListenTo)((0, import_editor_v1_adapters8.commandStartEvent)("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -4803,12 +4828,12 @@ var import_editor_controls51 = require("@elementor/editor-controls");
 
 // src/components/promotions/custom-css.tsx
 var React82 = __toESM(require("react"));
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_editor_controls50 = require("@elementor/editor-controls");
 var import_i18n56 = require("@wordpress/i18n");
 var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
 var CustomCssSection = () => {
-  const triggerRef = (0, import_react35.useRef)(null);
+  const triggerRef = (0, import_react36.useRef)(null);
   return /* @__PURE__ */ React82.createElement(
     StyleTabSection,
     {
@@ -5226,17 +5251,17 @@ var import_editor_props18 = require("@elementor/editor-props");
 var import_icons23 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_editor_controls54 = require("@elementor/editor-controls");
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 
 // src/hooks/use-license-config.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 var config = { expired: false };
 var listeners = /* @__PURE__ */ new Set();
 function setLicenseConfig(newConfig) {
@@ -5251,7 +5276,7 @@ function subscribe(listener) {
   return () => listeners.delete(listener);
 }
 function useLicenseConfig() {
-  return (0, import_react36.useSyncExternalStore)(subscribe, getLicenseConfig, getLicenseConfig);
+  return (0, import_react37.useSyncExternalStore)(subscribe, getLicenseConfig, getLicenseConfig);
 }
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
@@ -5320,7 +5345,7 @@ var usePropDynamicTagsInternal = (filterByLicense2) => {
     categories = propDynamicType?.settings.categories || [];
   }
   const categoriesKey = categories.join();
-  return (0, import_react37.useMemo)(
+  return (0, import_react38.useMemo)(
     () => getDynamicTagsByCategories(categories, filterByLicense2),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [categoriesKey, filterByLicense2]
@@ -5354,7 +5379,7 @@ var getDynamicTagsByCategories = (categories, filterByLicense2) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (tagName) => {
   const dynamicTags = useAllPropDynamicTags();
-  return (0, import_react38.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return (0, import_react39.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
@@ -5477,7 +5502,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 var React87 = __toESM(require("react"));
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_editor_controls57 = require("@elementor/editor-controls");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
@@ -5488,7 +5513,7 @@ var PROMO_TEXT_WIDTH = 170;
 var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/";
 var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew-modal/";
 var DynamicSelection = ({ close: closePopover, expired = false }) => {
-  const [searchValue, setSearchValue] = (0, import_react39.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react40.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = (0, import_ui38.useTheme)();
   const { value: anyValue } = (0, import_editor_controls57.useBoundProp)();
@@ -5497,7 +5522,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const isCurrentValueDynamic = !!dynamicValue;
   const options12 = useFilteredOptions(searchValue);
   const hasNoDynamicTags = !options12.length && !searchValue.trim();
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (hasNoDynamicTags) {
       (0, import_editor_controls57.trackViewPromotion)({ target_name: "dynamic_tags" });
     } else if (expired) {
@@ -5534,7 +5559,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
     if (expired) {
       return /* @__PURE__ */ React87.createElement(ExpiredDynamicTags, null);
     }
-    return /* @__PURE__ */ React87.createElement(import_react39.Fragment, null, /* @__PURE__ */ React87.createElement(
+    return /* @__PURE__ */ React87.createElement(import_react40.Fragment, null, /* @__PURE__ */ React87.createElement(
       import_editor_ui8.SearchField,
       {
         value: searchValue,
@@ -6000,22 +6025,22 @@ var import_i18n66 = require("@wordpress/i18n");
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var React94 = __toESM(require("react"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_ui44 = require("@elementor/ui");
 var import_i18n65 = require("@wordpress/i18n");
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_styles8 = require("@elementor/editor-styles");
 var import_editor_styles_repository14 = require("@elementor/editor-styles-repository");
 var import_i18n63 = require("@wordpress/i18n");
 var MAXIMUM_ITEMS = 2;
 var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
-  const [items3, setItems] = (0, import_react40.useState)([]);
-  (0, import_react40.useEffect)(() => {
+  const [items3, setItems] = (0, import_react41.useState)([]);
+  (0, import_react41.useEffect)(() => {
     (async () => {
       const normalizedItems = await Promise.all(
         inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve))
@@ -6066,7 +6091,7 @@ var getTransformedValue = async (item, bind, resolve) => {
       }
     });
     const value = result?.[bind] ?? result;
-    if ((0, import_react40.isValidElement)(value)) {
+    if ((0, import_react41.isValidElement)(value)) {
       return value;
     }
     if (typeof value === "object") {
@@ -6144,7 +6169,7 @@ var LabelChip = ({ displayLabel, provider }) => {
 var React92 = __toESM(require("react"));
 var import_ui42 = require("@elementor/ui");
 var ValueComponent = ({ index, value }) => {
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React92.createElement(import_ui42.Tooltip, { title: value, placement: "top" }, /* @__PURE__ */ React92.createElement(
     import_ui42.Typography,
     {
       variant: "caption",
@@ -6153,15 +6178,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
@@ -6187,8 +6213,8 @@ var StylesInheritanceInfotip = ({
   children,
   isDisabled
 }) => {
-  const [showInfotip, setShowInfotip] = (0, import_react41.useState)(false);
-  const triggerRef = (0, import_react41.useRef)(null);
+  const [showInfotip, setShowInfotip] = (0, import_react42.useState)(false);
+  const triggerRef = (0, import_react42.useRef)(null);
   const toggleInfotip = () => {
     if (isDisabled) {
       return;
@@ -6203,7 +6229,7 @@ var StylesInheritanceInfotip = ({
   };
   const key = path.join(".");
   const sectionWidth = (0, import_editor_ui10.useSectionWidth)();
-  const resolve = (0, import_react41.useMemo)(() => {
+  const resolve = (0, import_react42.useMemo)(() => {
     return (0, import_editor_canvas5.createPropsResolver)({
       transformers: import_editor_canvas5.stylesInheritanceTransformersRegistry,
       schema: { [key]: propType }
@@ -6249,7 +6275,7 @@ var StylesInheritanceInfotip = ({
           }
         }
       },
-      /* @__PURE__ */ React94.createElement(import_ui44.Stack, { gap: 1.5, sx: { pl: 3, pr: 1, pb: 2 }, role: "list" }, items3.map((item, index) => {
+      /* @__PURE__ */ React94.createElement(import_ui44.Stack, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React94.createElement(
           import_ui44.Box,
           {
@@ -6344,15 +6370,13 @@ function TooltipOrInfotip({
             sx: { mx: 2 }
           }
         },
-        slotProps: {
-          popper: {
-            modifiers: [
-              {
-                name: "offset",
-                options: { offset: [offsetX, 0] }
-              }
-            ]
-          }
+        PopperProps: {
+          modifiers: [
+            {
+              name: "offset",
+              options: { offset: [offsetX, 0] }
+            }
+          ]
         }
       },
       children
@@ -6429,23 +6453,26 @@ var excludePropTypeTransformers = /* @__PURE__ */ new Set([
 // src/styles-inheritance/transformers/array-transformer.tsx
 var React96 = __toESM(require("react"));
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_ui45 = require("@elementor/ui");
 var arrayTransformer = (0, import_editor_canvas6.createTransformer)((values) => {
   if (!values || values.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React96.createElement(import_ui45.Stack, { direction: "column" }, values.map((item, index) => /* @__PURE__ */ React96.createElement(import_ui45.Stack, { 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
 var React97 = __toESM(require("react"));
 var import_editor_canvas7 = require("@elementor/editor-canvas");
-var import_ui46 = require("@elementor/ui");
-var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React97.createElement(import_ui46.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemLabelColor, { value })));
+var import_ui45 = require("@elementor/ui");
+var backgroundColorOverlayTransformer = (0, import_editor_canvas7.createTransformer)((value) => /* @__PURE__ */ React97.createElement(import_ui45.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React97.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React97.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = (0, import_ui46.styled)(import_ui46.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = (0, import_ui45.styled)(import_ui45.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6456,9 +6483,9 @@ var StyledUnstableColorIndicator = (0, import_ui46.styled)(import_ui46.UnstableC
 // src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx
 var React98 = __toESM(require("react"));
 var import_editor_canvas8 = require("@elementor/editor-canvas");
-var import_ui47 = require("@elementor/ui");
+var import_ui46 = require("@elementor/ui");
 var import_i18n67 = require("@wordpress/i18n");
-var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React98.createElement(import_ui47.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React98.createElement(ItemIconGradient, { value }), /* @__PURE__ */ React98.createElement(ItemLabelGradient, { value })));
+var backgroundGradientOverlayTransformer = (0, import_editor_canvas8.createTransformer)((value) => /* @__PURE__ */ React98.createElement(import_ui46.Stack, { 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 });
@@ -6481,13 +6508,13 @@ var getGradientValue = (gradient) => {
 var React99 = __toESM(require("react"));
 var import_editor_canvas9 = require("@elementor/editor-canvas");
 var import_editor_ui11 = require("@elementor/editor-ui");
-var import_ui48 = require("@elementor/ui");
+var import_ui47 = require("@elementor/ui");
 var import_wp_media = require("@elementor/wp-media");
-var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React99.createElement(import_ui48.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React99.createElement(ItemIconImage, { value }), /* @__PURE__ */ React99.createElement(ItemLabelImage, { value })));
+var backgroundImageOverlayTransformer = (0, import_editor_canvas9.createTransformer)((value) => /* @__PURE__ */ React99.createElement(import_ui47.Stack, { 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(
-    import_ui48.CardMedia,
+    import_ui47.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -6529,7 +6556,6 @@ var getFileExtensionFromFilename = (filename) => {
 // src/styles-inheritance/transformers/box-shadow-transformer.tsx
 var React100 = __toESM(require("react"));
 var import_editor_canvas10 = require("@elementor/editor-canvas");
-var import_ui49 = require("@elementor/ui");
 var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value) => {
   if (!value) {
     return null;
@@ -6538,20 +6564,20 @@ var boxShadowTransformer = (0, import_editor_canvas10.createTransformer)((value)
   const colorValue = color || "#000000";
   const sizes = [hOffset || "0px", vOffset || "0px", blur || "10px", spread || "0px"].join(" ");
   const positionValue = position || "outset";
-  return /* @__PURE__ */ React100.createElement(import_ui49.Stack, { 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
 var React101 = __toESM(require("react"));
 var import_editor_canvas11 = require("@elementor/editor-canvas");
-var import_ui50 = require("@elementor/ui");
+var import_ui48 = require("@elementor/ui");
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = (0, import_ui50.styled)(import_ui50.UnstableColorIndicator)(({ theme }) => ({
+var StyledColorIndicator = (0, import_ui48.styled)(import_ui48.UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6562,24 +6588,18 @@ var colorTransformer = (0, import_editor_canvas11.createTransformer)((value) =>
   if (!isValidCSSColor(value)) {
     return value;
   }
-  return /* @__PURE__ */ React101.createElement(import_ui50.Stack, { 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(import_ui48.Stack, { 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
-var React102 = __toESM(require("react"));
 var import_editor_canvas12 = require("@elementor/editor-canvas");
-var import_ui51 = require("@elementor/ui");
-var createRepeaterToItemsTransformer = (originalTransformer, separator = " ") => {
+var createRepeaterToItemsTransformer = (originalTransformer) => {
   return (0, import_editor_canvas12.createTransformer)((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(import_ui51.Stack, { direction: "column", gap: 0.5 }, parts.map((part, index) => /* @__PURE__ */ React102.createElement(import_ui51.Stack, { key: index }, part.trim())));
+    return stringResult;
   });
 };
 
@@ -6618,7 +6638,7 @@ function registerCustomTransformers(originalStyleTransformers) {
   );
   import_editor_canvas13.stylesInheritanceTransformersRegistry.register(
     "transition",
-    createRepeaterToItemsTransformer(originalStyleTransformers.transition, ", ")
+    createRepeaterToItemsTransformer(originalStyleTransformers.transition)
   );
   ["background-overlay", "box-shadow", "transform-functions"].forEach(
     (propType) => import_editor_canvas13.stylesInheritanceTransformersRegistry.register(propType, arrayTransformer)
@@ -6659,6 +6679,7 @@ var blockV1Panel = () => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BaseControl,
+  ControlTypeContainer,
   CustomCssIndicator,
   ElementProvider,
   FIELD_TYPE,