@elementor/editor-editing-panel 4.1.0-733 → 4.1.0-735

package/dist/index.js

@@ -1406,6 +1406,7 @@ function useHandleSelect() {
 
 // src/components/custom-css-indicator.tsx
 var React11 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_editor_styles4 = require("@elementor/editor-styles");
 
@@ -1690,12 +1691,12 @@ var CustomCssIndicator = () => {
   const {
     element: { id: elementId }
   } = useElement();
-  const style = React11.useMemo(
+  const style = (0, import_react14.useMemo)(
     () => styleId && provider ? provider.actions.get(styleId, { elementId }) : null,
     [styleId, provider, elementId]
   );
   const hasContent = Boolean(customCss?.raw?.trim());
-  const hasInheritedContent = React11.useMemo(() => {
+  const hasInheritedContent = (0, import_react14.useMemo)(() => {
     if (hasContent) {
       return false;
     }
@@ -1773,7 +1774,7 @@ function EditorPanelErrorFallback() {
 }
 
 // src/components/editing-panel-tabs.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var React80 = __toESM(require("react"));
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_ui35 = require("@elementor/ui");
@@ -1781,19 +1782,19 @@ var import_i18n54 = require("@wordpress/i18n");
 
 // src/contexts/scroll-context.tsx
 var React13 = __toESM(require("react"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_ui9 = require("@elementor/ui");
-var ScrollContext = (0, import_react14.createContext)(void 0);
+var ScrollContext = (0, import_react15.createContext)(void 0);
 var ScrollPanel = (0, import_ui9.styled)("div")`
 	height: 100%;
 	overflow-y: auto;
 `;
 var DEFAULT_SCROLL_DIRECTION = "up";
 function ScrollProvider({ children }) {
-  const [direction, setDirection] = (0, import_react14.useState)(DEFAULT_SCROLL_DIRECTION);
-  const ref = (0, import_react14.useRef)(null);
-  const scrollPos = (0, import_react14.useRef)(0);
-  (0, import_react14.useEffect)(() => {
+  const [direction, setDirection] = (0, import_react15.useState)(DEFAULT_SCROLL_DIRECTION);
+  const ref = (0, import_react15.useRef)(null);
+  const scrollPos = (0, import_react15.useRef)(0);
+  (0, import_react15.useEffect)(() => {
     const scrollElement = ref.current;
     if (!scrollElement) {
       return;
@@ -1815,11 +1816,11 @@ function ScrollProvider({ children }) {
   return /* @__PURE__ */ React13.createElement(ScrollContext.Provider, { value: { direction } }, /* @__PURE__ */ React13.createElement(ScrollPanel, { ref }, children));
 }
 function useScrollDirection() {
-  return (0, import_react14.useContext)(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION;
+  return (0, import_react15.useContext)(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION;
 }
 
 // src/hooks/use-default-panel-settings.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var fallbackEditorSettings = {
   defaultSectionsExpanded: {
     settings: ["Content", "Settings"],
@@ -1827,7 +1828,7 @@ var fallbackEditorSettings = {
   },
   defaultTab: "settings"
 };
-var defaultPanelSettingsContext = (0, import_react15.createContext)({
+var defaultPanelSettingsContext = (0, import_react16.createContext)({
   "e-div-block": {
     defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
     defaultTab: "style"
@@ -1843,18 +1844,18 @@ var defaultPanelSettingsContext = (0, import_react15.createContext)({
 });
 var useDefaultPanelSettings = () => {
   const { element } = useElement();
-  const defaults = (0, import_react15.useContext)(defaultPanelSettingsContext)[element.type];
+  const defaults = (0, import_react16.useContext)(defaultPanelSettingsContext)[element.type];
   return defaults || fallbackEditorSettings;
 };
 
 // src/hooks/use-state-by-element.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_session3 = require("@elementor/session");
 var useStateByElement = (key, initialValue) => {
   const { element } = useElement();
   const lookup = `elementor/editor-state/${element.id}/${key}`;
   const storedValue = (0, import_session3.getSessionStorageItem)(lookup);
-  const [value, setValue] = (0, import_react16.useState)(storedValue ?? initialValue);
+  const [value, setValue] = (0, import_react17.useState)(storedValue ?? initialValue);
   const doUpdate = (newValue) => {
     (0, import_session3.setSessionStorageItem)(lookup, newValue);
     setValue(newValue);
@@ -1885,12 +1886,12 @@ var import_session5 = require("@elementor/session");
 
 // src/components/section.tsx
 var React16 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_ui11 = require("@elementor/ui");
 function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true, action }) {
   const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded);
-  const ref = (0, import_react17.useRef)(null);
+  const ref = (0, import_react18.useRef)(null);
   const isDisabled = !!action;
   const handleClick = () => {
     if (isDisabled) {
@@ -1899,7 +1900,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       setIsOpen(!isOpen);
     }
   };
-  const id = (0, import_react17.useId)();
+  const id = (0, import_react18.useId)();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
@@ -2056,7 +2057,7 @@ var getStyleByLayout = (layout) => {
 
 // src/controls-registry/settings-field.tsx
 var React19 = __toESM(require("react"));
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_elements6 = require("@elementor/editor-elements");
@@ -2271,7 +2272,7 @@ function useUndoableUpdateElementProp({
   elementId,
   propDisplayName
 }) {
-  return (0, import_react18.useMemo)(() => {
+  return (0, import_react19.useMemo)(() => {
     return (0, import_editor_v1_adapters4.undoable)(
       {
         do: (newSettings) => {
@@ -2405,7 +2406,7 @@ function isControl(control) {
 
 // src/components/style-tab.tsx
 var React79 = __toESM(require("react"));
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_editor_props15 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_locations3 = require("@elementor/locations");
@@ -2415,7 +2416,7 @@ var import_i18n53 = require("@wordpress/i18n");
 
 // src/contexts/styles-inheritance-context.tsx
 var React23 = __toESM(require("react"));
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_props9 = require("@elementor/editor-props");
 var import_editor_responsive2 = require("@elementor/editor-responsive");
@@ -2647,7 +2648,7 @@ var getFilterPropType = (propType, path) => {
 };
 
 // src/contexts/styles-inheritance-context.tsx
-var Context4 = (0, import_react19.createContext)(null);
+var Context4 = (0, import_react20.createContext)(null);
 function StyleInheritanceProvider({ children }) {
   const styleDefs = useAppliedStyles();
   const breakpointsTree = (0, import_editor_responsive2.getBreakpointsTree)();
@@ -2655,7 +2656,7 @@ function StyleInheritanceProvider({ children }) {
   return /* @__PURE__ */ React23.createElement(Context4.Provider, { value: { getSnapshot, getInheritanceChain } }, children);
 }
 function useStylesInheritanceSnapshot() {
-  const context = (0, import_react19.useContext)(Context4);
+  const context = (0, import_react20.useContext)(Context4);
   const { meta } = useStyle();
   if (!context) {
     throw new Error("useStylesInheritanceSnapshot must be used within a StyleInheritanceProvider");
@@ -2666,7 +2667,7 @@ function useStylesInheritanceSnapshot() {
   return context.getSnapshot(meta) ?? null;
 }
 function useStylesInheritanceChain(path) {
-  const context = (0, import_react19.useContext)(Context4);
+  const context = (0, import_react20.useContext)(Context4);
   if (!context) {
     throw new Error("useStylesInheritanceChain must be used within a StyleInheritanceProvider");
   }
@@ -3118,12 +3119,12 @@ var BlendModeField = () => {
 
 // src/components/style-sections/effects-section/opacity-control-field.tsx
 var React36 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_editor_controls13 = require("@elementor/editor-controls");
 var import_i18n14 = require("@wordpress/i18n");
 var OPACITY_LABEL = (0, import_i18n14.__)("Opacity", "elementor");
 var OpacityControlField = () => {
-  const rowRef = (0, import_react20.useRef)(null);
+  const rowRef = (0, import_react21.useRef)(null);
   return /* @__PURE__ */ React36.createElement(StylesField, { bind: "opacity", propDisplayName: OPACITY_LABEL }, /* @__PURE__ */ React36.createElement(StylesFieldLayout, { ref: rowRef, label: OPACITY_LABEL }, /* @__PURE__ */ React36.createElement(import_editor_controls13.SizeControl, { units: ["%"], anchorRef: rowRef, defaultUnit: "%" })));
 };
 
@@ -3185,7 +3186,7 @@ var import_i18n17 = require("@wordpress/i18n");
 
 // src/components/style-sections/layout-section/utils/rotated-icon.tsx
 var React38 = __toESM(require("react"));
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_ui22 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var FLEX_DIRECTION_LABEL = (0, import_i18n16.__)("Flex direction", "elementor");
@@ -3208,7 +3209,7 @@ var RotatedIcon = ({
   offset = 0,
   disableRotationForReversed = false
 }) => {
-  const rotate = (0, import_react21.useRef)(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
+  const rotate = (0, import_react22.useRef)(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
   rotate.current = useGetTargetAngle(isClockwise, offset, disableRotationForReversed, rotate);
   return /* @__PURE__ */ React38.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
 };
@@ -3488,7 +3489,7 @@ var FlexDirectionField = () => {
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 var React44 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_editor_controls20 = require("@elementor/editor-controls");
 var import_icons9 = require("@elementor/icons");
 var import_ui27 = require("@elementor/ui");
@@ -3536,15 +3537,15 @@ function FlexOrderFieldContent() {
   });
   const { placeholder } = (0, import_editor_controls20.useBoundProp)();
   const placeholderValue = placeholder;
-  const currentGroup = (0, import_react22.useMemo)(() => getGroupControlValue(order?.value ?? null), [order]);
-  const [activeGroup, setActiveGroup] = (0, import_react22.useState)(currentGroup);
-  const [customLocked, setCustomLocked] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const currentGroup = (0, import_react23.useMemo)(() => getGroupControlValue(order?.value ?? null), [order]);
+  const [activeGroup, setActiveGroup] = (0, import_react23.useState)(currentGroup);
+  const [customLocked, setCustomLocked] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     if (!customLocked) {
       setActiveGroup(currentGroup);
     }
   }, [currentGroup, customLocked]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (order === null) {
       setCustomLocked(false);
     }
@@ -3604,7 +3605,7 @@ var getGroupControlValue = (order) => {
 
 // src/components/style-sections/layout-section/flex-size-field.tsx
 var React45 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_editor_controls21 = require("@elementor/editor-controls");
 var import_editor_props14 = require("@elementor/editor-props");
 var import_icons10 = require("@elementor/icons");
@@ -3640,15 +3641,15 @@ var FlexSizeFieldContent = () => {
   });
   const { placeholder } = (0, import_editor_controls21.useBoundProp)();
   const flexValues = extractFlexValues(value);
-  const currentGroup = (0, import_react23.useMemo)(() => getActiveGroup(flexValues), [flexValues]);
-  const [activeGroup, setActiveGroup] = (0, import_react23.useState)(currentGroup);
-  const [customLocked, setCustomLocked] = (0, import_react23.useState)(false);
-  (0, import_react23.useEffect)(() => {
+  const currentGroup = (0, import_react24.useMemo)(() => getActiveGroup(flexValues), [flexValues]);
+  const [activeGroup, setActiveGroup] = (0, import_react24.useState)(currentGroup);
+  const [customLocked, setCustomLocked] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     if (!customLocked) {
       setActiveGroup(currentGroup);
     }
   }, [currentGroup, customLocked]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (value === null) {
       setCustomLocked(false);
     }
@@ -3711,7 +3712,7 @@ var createFlexValueForGroup = (group, flexValue) => {
   return null;
 };
 var FlexCustomField = () => {
-  const flexBasisRowRef = (0, import_react23.useRef)(null);
+  const flexBasisRowRef = (0, import_react24.useRef)(null);
   const context = (0, import_editor_controls21.useBoundProp)(import_editor_props14.flexPropTypeUtil);
   return /* @__PURE__ */ React45.createElement(import_editor_controls21.PropProvider, { ...context }, /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: (0, import_i18n23.__)("Grow", "elementor") }, /* @__PURE__ */ React45.createElement(import_editor_controls21.PropKeyProvider, { bind: "flexGrow" }, /* @__PURE__ */ React45.createElement(import_editor_controls21.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: (0, import_i18n23.__)("Shrink", "elementor") }, /* @__PURE__ */ React45.createElement(import_editor_controls21.PropKeyProvider, { bind: "flexShrink" }, /* @__PURE__ */ React45.createElement(import_editor_controls21.NumberControl, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React45.createElement(StylesFieldLayout, { label: (0, import_i18n23.__)("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React45.createElement(import_editor_controls21.PropKeyProvider, { bind: "flexBasis" }, /* @__PURE__ */ React45.createElement(import_editor_controls21.SizeControl, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
 };
@@ -3860,13 +3861,13 @@ 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_react27 = require("react");
 var import_session6 = require("@elementor/session");
 var import_i18n32 = require("@wordpress/i18n");
 
 // src/components/style-sections/position-section/dimensions-field.tsx
 var React50 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_editor_controls26 = require("@elementor/editor-controls");
 var import_icons13 = require("@elementor/icons");
 var import_ui29 = require("@elementor/ui");
@@ -3883,7 +3884,7 @@ var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n28.__)("Righ
 var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, import_i18n28.__)("Left", "elementor") : (0, import_i18n28.__)("Right", "elementor");
 var DimensionsField = () => {
   const { isSiteRtl } = useDirection();
-  const rowRefs = [(0, import_react24.useRef)(null), (0, import_react24.useRef)(null)];
+  const rowRefs = [(0, import_react25.useRef)(null), (0, import_react25.useRef)(null)];
   return /* @__PURE__ */ React50.createElement(UiProviders, null, /* @__PURE__ */ React50.createElement(import_ui29.Stack, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React50.createElement(DimensionField, { side: "inset-block-start", label: (0, import_i18n28.__)("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React50.createElement(
     DimensionField,
     {
@@ -3916,13 +3917,13 @@ var DimensionField = ({
 
 // src/components/style-sections/position-section/offset-field.tsx
 var React51 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_editor_controls27 = require("@elementor/editor-controls");
 var import_i18n29 = require("@wordpress/i18n");
 var OFFSET_LABEL = (0, import_i18n29.__)("Anchor offset", "elementor");
 var UNITS = ["px", "em", "rem", "vw", "vh"];
 var OffsetField = () => {
-  const rowRef = (0, import_react25.useRef)(null);
+  const rowRef = (0, import_react26.useRef)(null);
   return /* @__PURE__ */ React51.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React51.createElement(import_editor_controls27.SizeControl, { units: UNITS, anchorRef: rowRef })));
 };
 
@@ -3975,7 +3976,7 @@ var PositionSection = () => {
   });
   const { values: positionDependentValues, setValues: setPositionDependentValues } = useStylesFields([...POSITION_DEPENDENT_PROP_NAMES]);
   const [dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory] = usePersistDimensions();
-  const clearPositionDependentProps = (0, import_react26.useCallback)(() => {
+  const clearPositionDependentProps = (0, import_react27.useCallback)(() => {
     const dimensions = {
       "inset-block-start": positionDependentValues?.["inset-block-start"],
       "inset-block-end": positionDependentValues?.["inset-block-end"],
@@ -3989,9 +3990,9 @@ var PositionSection = () => {
       setPositionDependentValues(CLEARED_POSITION_DEPENDENT_VALUES, meta);
     }
   }, [positionDependentValues, updateDimensionsHistory, setPositionDependentValues]);
-  const clearPositionDependentPropsRef = (0, import_react26.useRef)(clearPositionDependentProps);
+  const clearPositionDependentPropsRef = (0, import_react27.useRef)(clearPositionDependentProps);
   clearPositionDependentPropsRef.current = clearPositionDependentProps;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (positionValue?.value === POSITION_STATIC || positionValue === null) {
       clearPositionDependentPropsRef.current();
     }
@@ -4022,7 +4023,7 @@ var usePersistDimensions = () => {
 
 // src/components/style-sections/size-section/size-section.tsx
 var React59 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_editor_controls32 = require("@elementor/editor-controls");
 var import_ui31 = require("@elementor/ui");
 var import_i18n36 = require("@wordpress/i18n");
@@ -4189,7 +4190,7 @@ var CssSizeProps = [
 ];
 var ASPECT_RATIO_LABEL = (0, import_i18n36.__)("Aspect Ratio", "elementor");
 var SizeSection = () => {
-  const gridRowRefs = [(0, import_react27.useRef)(null), (0, import_react27.useRef)(null), (0, import_react27.useRef)(null)];
+  const gridRowRefs = [(0, import_react28.useRef)(null), (0, import_react28.useRef)(null), (0, import_react28.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 }) => {
@@ -4229,12 +4230,12 @@ var ColumnCountField = () => {
 
 // src/components/style-sections/typography-section/column-gap-field.tsx
 var React62 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = 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_react28.useRef)(null);
+  const rowRef = (0, import_react29.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 })));
 };
 
@@ -4262,12 +4263,12 @@ var FontFamilyField = () => {
 
 // src/components/style-sections/typography-section/font-size-field.tsx
 var React64 = __toESM(require("react"));
-var import_react29 = require("react");
+var import_react30 = 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_react29.useRef)(null);
+  const rowRef = (0, import_react30.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 })));
 };
 
@@ -4317,23 +4318,23 @@ var FontWeightField = () => {
 
 // src/components/style-sections/typography-section/letter-spacing-field.tsx
 var React67 = __toESM(require("react"));
-var import_react30 = require("react");
+var import_react31 = 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_react30.useRef)(null);
+  const rowRef = (0, import_react31.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_react31 = require("react");
+var import_react32 = 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_react31.useRef)(null);
+  const rowRef = (0, import_react32.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 })));
 };
 
@@ -4555,12 +4556,12 @@ var TransformField = () => /* @__PURE__ */ React75.createElement(StylesField, {
 
 // src/components/style-sections/typography-section/word-spacing-field.tsx
 var React76 = __toESM(require("react"));
-var import_react32 = require("react");
+var import_react33 = 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_react32.useRef)(null);
+  const rowRef = (0, import_react33.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 })));
 };
 
@@ -4618,7 +4619,7 @@ var stickyHeaderStyles = {
 var StyleTab = () => {
   const currentClassesProp = useCurrentClassesProp();
   const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp ?? "");
-  const [activeStyleState, setActiveStyleState] = (0, import_react33.useState)(null);
+  const [activeStyleState, setActiveStyleState] = (0, import_react34.useState)(null);
   const breakpoint = (0, import_editor_responsive3.useActiveBreakpoint)();
   if (!currentClassesProp) {
     return null;
@@ -4781,7 +4782,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_react34.Fragment, { key: element.id }, /* @__PURE__ */ React80.createElement(PanelTabContent, null))
+    /* @__PURE__ */ React80.createElement(import_react35.Fragment, { key: element.id }, /* @__PURE__ */ React80.createElement(PanelTabContent, null))
   );
 };
 var PanelTabContent = () => {
@@ -4833,7 +4834,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_react35 = require("react");
+var import_react36 = require("react");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/panel.ts
@@ -4857,7 +4858,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     return (0, import_editor_v1_adapters8.__privateListenTo)((0, import_editor_v1_adapters8.commandStartEvent)("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -4877,12 +4878,12 @@ var import_editor_controls51 = require("@elementor/editor-controls");
 
 // src/components/promotions/custom-css.tsx
 var React82 = __toESM(require("react"));
-var import_react36 = require("react");
+var import_react37 = 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_react36.useRef)(null);
+  const triggerRef = (0, import_react37.useRef)(null);
   return /* @__PURE__ */ React82.createElement(
     StyleTabSection,
     {
@@ -5300,17 +5301,17 @@ var import_editor_props19 = require("@elementor/editor-props");
 var import_icons23 = require("@elementor/icons");
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-var import_react38 = require("react");
+var import_react39 = 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_react37 = require("react");
+var import_react38 = require("react");
 var config = { expired: false };
 var listeners = /* @__PURE__ */ new Set();
 function setLicenseConfig(newConfig) {
@@ -5325,7 +5326,7 @@ function subscribe(listener) {
   return () => listeners.delete(listener);
 }
 function useLicenseConfig() {
-  return (0, import_react37.useSyncExternalStore)(subscribe, getLicenseConfig, getLicenseConfig);
+  return (0, import_react38.useSyncExternalStore)(subscribe, getLicenseConfig, getLicenseConfig);
 }
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
@@ -5394,7 +5395,7 @@ var usePropDynamicTagsInternal = (filterByLicense2) => {
     categories = propDynamicType?.settings.categories || [];
   }
   const categoriesKey = categories.join();
-  return (0, import_react38.useMemo)(
+  return (0, import_react39.useMemo)(
     () => getDynamicTagsByCategories(categories, filterByLicense2),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [categoriesKey, filterByLicense2]
@@ -5428,7 +5429,7 @@ var getDynamicTagsByCategories = (categories, filterByLicense2) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (tagName) => {
   const dynamicTags = useAllPropDynamicTags();
-  return (0, import_react39.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return (0, import_react40.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
@@ -5470,6 +5471,7 @@ var import_editor_controls56 = require("@elementor/editor-controls");
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 var React85 = __toESM(require("react"));
+var import_react41 = require("react");
 var import_editor_props20 = require("@elementor/editor-props");
 var DynamicConditionalControl = ({
   children,
@@ -5477,7 +5479,7 @@ var DynamicConditionalControl = ({
   propsSchema,
   dynamicSettings
 }) => {
-  const defaults = React85.useMemo(() => {
+  const defaults = (0, import_react41.useMemo)(() => {
     if (!propsSchema) {
       return {};
     }
@@ -5487,7 +5489,7 @@ var DynamicConditionalControl = ({
       return result;
     }, {});
   }, [propsSchema]);
-  const convertedSettings = React85.useMemo(() => {
+  const convertedSettings = (0, import_react41.useMemo)(() => {
     if (!dynamicSettings) {
       return {};
     }
@@ -5506,7 +5508,7 @@ var DynamicConditionalControl = ({
       {}
     );
   }, [dynamicSettings]);
-  const effectiveSettings = React85.useMemo(() => {
+  const effectiveSettings = (0, import_react41.useMemo)(() => {
     return { ...defaults, ...convertedSettings };
   }, [defaults, convertedSettings]);
   if (!propType?.dependencies?.terms.length) {
@@ -5551,7 +5553,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 var React87 = __toESM(require("react"));
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_editor_controls57 = require("@elementor/editor-controls");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
@@ -5562,7 +5564,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_react40.useState)("");
+  const [searchValue, setSearchValue] = (0, import_react42.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = (0, import_ui38.useTheme)();
   const { value: anyValue } = (0, import_editor_controls57.useBoundProp)();
@@ -5571,7 +5573,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const isCurrentValueDynamic = !!dynamicValue;
   const options12 = useFilteredOptions(searchValue);
   const hasNoDynamicTags = !options12.length && !searchValue.trim();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (hasNoDynamicTags) {
       (0, import_editor_controls57.trackViewPromotion)({ target_name: "dynamic_tags" });
     } else if (expired) {
@@ -5608,7 +5610,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
     if (expired) {
       return /* @__PURE__ */ React87.createElement(ExpiredDynamicTags, null);
     }
-    return /* @__PURE__ */ React87.createElement(import_react40.Fragment, null, /* @__PURE__ */ React87.createElement(
+    return /* @__PURE__ */ React87.createElement(import_react42.Fragment, null, /* @__PURE__ */ React87.createElement(
       import_editor_ui8.SearchField,
       {
         value: searchValue,
@@ -6074,22 +6076,22 @@ var import_i18n66 = require("@wordpress/i18n");
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var React94 = __toESM(require("react"));
-var import_react42 = require("react");
+var import_react44 = 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_react41 = require("react");
+var import_react43 = 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_react41.useState)([]);
-  (0, import_react41.useEffect)(() => {
+  const [items3, setItems] = (0, import_react43.useState)([]);
+  (0, import_react43.useEffect)(() => {
     (async () => {
       const normalizedItems = await Promise.all(
         inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve))
@@ -6140,7 +6142,7 @@ var getTransformedValue = async (item, bind, resolve) => {
       }
     });
     const value = result?.[bind] ?? result;
-    if ((0, import_react41.isValidElement)(value)) {
+    if ((0, import_react43.isValidElement)(value)) {
       return value;
     }
     if (typeof value === "object") {
@@ -6255,8 +6257,8 @@ var StylesInheritanceInfotip = ({
   children,
   isDisabled
 }) => {
-  const [showInfotip, setShowInfotip] = (0, import_react42.useState)(false);
-  const triggerRef = (0, import_react42.useRef)(null);
+  const [showInfotip, setShowInfotip] = (0, import_react44.useState)(false);
+  const triggerRef = (0, import_react44.useRef)(null);
   const toggleInfotip = () => {
     if (isDisabled) {
       return;
@@ -6271,7 +6273,7 @@ var StylesInheritanceInfotip = ({
   };
   const key = path.join(".");
   const sectionWidth = (0, import_editor_ui10.useSectionWidth)();
-  const resolve = (0, import_react42.useMemo)(() => {
+  const resolve = (0, import_react44.useMemo)(() => {
     return (0, import_editor_canvas5.createPropsResolver)({
       transformers: import_editor_canvas5.stylesInheritanceTransformersRegistry,
       schema: { [key]: propType }