@elementor/editor-editing-panel 4.1.0-811 → 4.1.0-813

package/dist/index.mjs

@@ -2493,7 +2493,7 @@ import { __ as __57 } from "@wordpress/i18n";
 
 // src/contexts/styles-inheritance-context.tsx
 import * as React24 from "react";
-import { createContext as createContext7, useContext as useContext7 } from "react";
+import { createContext as createContext7, useContext as useContext7, useMemo as useMemo8 } from "react";
 import { getWidgetsCache } from "@elementor/editor-elements";
 import { classesPropTypeUtil as classesPropTypeUtil3 } from "@elementor/editor-props";
 import { getBreakpointsTree as getBreakpointsTree2 } from "@elementor/editor-responsive";
@@ -2759,6 +2759,16 @@ function useStylesInheritanceChain(path) {
   }
   return context.getInheritanceChain(snapshot, path, topLevelPropType);
 }
+var EMPTY_INHERITED_VALUES = {};
+function useInheritedValues(propKeys) {
+  const snapshot = useStylesInheritanceSnapshot();
+  return useMemo8(() => {
+    if (!snapshot || propKeys.length === 0) {
+      return EMPTY_INHERITED_VALUES;
+    }
+    return Object.fromEntries(propKeys.map((key) => [key, snapshot[key]?.[0]?.value ?? null]));
+  }, [snapshot, propKeys]);
+}
 var useAppliedStyles = () => {
   const currentClassesProp = useClassesProp();
   const baseStyles = useBaseStyles();
@@ -2818,15 +2828,67 @@ function useStylesField(propName, meta) {
 }
 
 // src/controls-registry/conditional-field.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 import { useBoundProp } from "@elementor/editor-controls";
 import { isDependency as isDependency2, isDependencyMet as isDependencyMet2 } from "@elementor/editor-props";
 var ConditionalField = ({ children }) => {
-  const { propType } = useBoundProp();
+  const { propType, value, resetValue } = useBoundProp();
   const depList = getDependencies(propType);
-  const { values: depValues } = useStylesFields(depList);
-  const isHidden = !isDependencyMet2(propType?.dependencies, depValues).isMet;
+  const { values: depValues, setValues: setDepValues } = useStylesFields(depList);
+  const inheritedValues = useInheritedValues(depList);
+  const resolvedValues = resolveWithInherited(depValues, inheritedValues);
+  const isHidden = !isDependencyMet2(propType?.dependencies, resolvedValues).isMet;
+  useSyncDepsWithInherited({ isHidden, depValues, value, inheritedValues, setDepValues, resetValue });
   return isHidden ? null : children;
 };
+function wasDepsCleared(prevDepValues, depValues) {
+  if (!prevDepValues) {
+    return false;
+  }
+  return Object.keys(prevDepValues).some(
+    (key) => prevDepValues[key] && (!depValues || !depValues[key])
+  );
+}
+function useSyncDepsWithInherited({
+  isHidden,
+  depValues,
+  value,
+  inheritedValues,
+  setDepValues,
+  resetValue
+}) {
+  const syncRef = useRef4({ hasSynced: false, prevDepValues: depValues });
+  useEffect4(() => {
+    const { hasSynced, prevDepValues } = syncRef.current;
+    if (hasSynced && value && wasDepsCleared(prevDepValues, depValues)) {
+      resetValue();
+    }
+    if (isHidden || !value || !depValues) {
+      syncRef.current = { hasSynced: false, prevDepValues: depValues };
+      return;
+    }
+    if (hasSynced) {
+      syncRef.current.prevDepValues = depValues;
+      return;
+    }
+    syncRef.current = { hasSynced: true, prevDepValues: depValues };
+    Object.entries(depValues).forEach(([key, depValue]) => {
+      const inherited = inheritedValues[key];
+      if (!depValue && inherited) {
+        setDepValues({ [key]: inherited }, { history: { propDisplayName: key } });
+      }
+    });
+  }, [isHidden, depValues, value, inheritedValues, setDepValues, resetValue]);
+}
+function resolveWithInherited(localValues, inheritedValues) {
+  if (!localValues) {
+    const hasInherited = Object.keys(inheritedValues).length > 0;
+    return hasInherited ? { ...inheritedValues } : null;
+  }
+  return Object.fromEntries(
+    Object.entries(localValues).map(([key, val]) => [key, val ?? inheritedValues[key] ?? null])
+  );
+}
 function getDependencies(propType) {
   if (!propType?.dependencies?.terms.length) {
     return [];
@@ -3210,12 +3272,12 @@ var BlendModeField = () => {
 
 // src/components/style-sections/effects-section/opacity-control-field.tsx
 import * as React37 from "react";
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { SizeControl as SizeControl2 } from "@elementor/editor-controls";
 import { __ as __15 } from "@wordpress/i18n";
 var OPACITY_LABEL = __15("Opacity", "elementor");
 var OpacityControlField = () => {
-  const rowRef = useRef4(null);
+  const rowRef = useRef5(null);
   return /* @__PURE__ */ React37.createElement(StylesField, { bind: "opacity", propDisplayName: OPACITY_LABEL }, /* @__PURE__ */ React37.createElement(StylesFieldLayout, { ref: rowRef, label: OPACITY_LABEL }, /* @__PURE__ */ React37.createElement(SizeControl2, { units: ["%"], anchorRef: rowRef, defaultUnit: "%" })));
 };
 
@@ -3285,7 +3347,7 @@ import { __ as __18 } from "@wordpress/i18n";
 
 // src/components/style-sections/layout-section/utils/rotated-icon.tsx
 import * as React39 from "react";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 import { useTheme as useTheme2 } from "@elementor/ui";
 import { __ as __17 } from "@wordpress/i18n";
 var FLEX_DIRECTION_LABEL = __17("Flex direction", "elementor");
@@ -3308,7 +3370,7 @@ var RotatedIcon = ({
   offset = 0,
   disableRotationForReversed = false
 }) => {
-  const rotate = useRef5(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
+  const rotate = useRef6(useGetTargetAngle(isClockwise, offset, disableRotationForReversed));
   rotate.current = useGetTargetAngle(isClockwise, offset, disableRotationForReversed, rotate);
   return /* @__PURE__ */ React39.createElement(Icon, { fontSize: size, sx: { transition: ".3s", rotate: `${rotate.current}deg` } });
 };
@@ -3512,7 +3574,7 @@ var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ React42.creat
 
 // src/components/style-sections/layout-section/display-field.tsx
 import * as React43 from "react";
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { ToggleControl as ToggleControl5 } from "@elementor/editor-controls";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { __ as __21 } from "@wordpress/i18n";
@@ -3558,7 +3620,7 @@ var displayFieldItems = [
 var DisplayField = () => {
   const placeholder = useDisplayPlaceholderValue();
   const isGridActive = isExperimentActive("e_css_grid");
-  const items3 = useMemo8(
+  const items3 = useMemo9(
     () => isGridActive ? displayFieldItems : displayFieldItems.filter((item) => item.value !== "grid"),
     [isGridActive]
   );
@@ -3611,7 +3673,7 @@ var FlexDirectionField = () => {
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 import * as React45 from "react";
-import { useEffect as useEffect4, useMemo as useMemo9, useState as useState7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo10, useState as useState7 } from "react";
 import {
   ControlToggleButtonGroup,
   NumberControl as NumberControl2,
@@ -3663,15 +3725,15 @@ function FlexOrderFieldContent() {
   });
   const { placeholder } = useBoundProp2();
   const placeholderValue = placeholder;
-  const currentGroup = useMemo9(() => getGroupControlValue(order?.value ?? null), [order]);
+  const currentGroup = useMemo10(() => getGroupControlValue(order?.value ?? null), [order]);
   const [activeGroup, setActiveGroup] = useState7(currentGroup);
   const [customLocked, setCustomLocked] = useState7(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!customLocked) {
       setActiveGroup(currentGroup);
     }
   }, [currentGroup, customLocked]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (order === null) {
       setCustomLocked(false);
     }
@@ -3731,7 +3793,7 @@ var getGroupControlValue = (order) => {
 
 // src/components/style-sections/layout-section/flex-size-field.tsx
 import * as React46 from "react";
-import { useEffect as useEffect5, useMemo as useMemo10, useRef as useRef6, useState as useState8 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo11, useRef as useRef7, useState as useState8 } from "react";
 import {
   ControlToggleButtonGroup as ControlToggleButtonGroup2,
   NumberControl as NumberControl3,
@@ -3774,15 +3836,15 @@ var FlexSizeFieldContent = () => {
   });
   const { placeholder } = useBoundProp3();
   const flexValues = extractFlexValues(value);
-  const currentGroup = useMemo10(() => getActiveGroup(flexValues), [flexValues]);
+  const currentGroup = useMemo11(() => getActiveGroup(flexValues), [flexValues]);
   const [activeGroup, setActiveGroup] = useState8(currentGroup);
   const [customLocked, setCustomLocked] = useState8(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!customLocked) {
       setActiveGroup(currentGroup);
     }
   }, [currentGroup, customLocked]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (value === null) {
       setCustomLocked(false);
     }
@@ -3845,7 +3907,7 @@ var createFlexValueForGroup = (group, flexValue) => {
   return null;
 };
 var FlexCustomField = () => {
-  const flexBasisRowRef = useRef6(null);
+  const flexBasisRowRef = useRef7(null);
   const context = useBoundProp3(flexPropTypeUtil);
   return /* @__PURE__ */ React46.createElement(PropProvider3, { ...context }, /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(StylesFieldLayout, { label: __24("Grow", "elementor") }, /* @__PURE__ */ React46.createElement(PropKeyProvider3, { bind: "flexGrow" }, /* @__PURE__ */ React46.createElement(NumberControl3, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React46.createElement(StylesFieldLayout, { label: __24("Shrink", "elementor") }, /* @__PURE__ */ React46.createElement(PropKeyProvider3, { bind: "flexShrink" }, /* @__PURE__ */ React46.createElement(NumberControl3, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React46.createElement(StylesFieldLayout, { label: __24("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React46.createElement(PropKeyProvider3, { bind: "flexBasis" }, /* @__PURE__ */ React46.createElement(SizeControl3, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
 };
@@ -3994,7 +4056,7 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React49.createElement(StylesFi
 
 // src/components/style-sections/layout-section/grid-size-field.tsx
 import * as React50 from "react";
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { SizeComponent } from "@elementor/editor-controls";
 import { Grid as Grid4 } from "@elementor/ui";
 import { __ as __28 } from "@wordpress/i18n";
@@ -4026,7 +4088,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
   const { value, setValue } = useStylesField(cssProp, {
     history: { propDisplayName: label }
   });
-  const anchorRef = useRef7(null);
+  const anchorRef = useRef8(null);
   const trackValue = cssToTrackValue(value?.value ?? null);
   const handleChange = (newValue) => {
     const css = trackValueToCss(newValue);
@@ -4172,13 +4234,13 @@ var shouldDisplayFlexFields = (display, local) => {
 
 // src/components/style-sections/position-section/position-section.tsx
 import * as React58 from "react";
-import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef11 } from "react";
 import { useSessionStorage as useSessionStorage4 } from "@elementor/session";
 import { __ as __36 } from "@wordpress/i18n";
 
 // src/components/style-sections/position-section/dimensions-field.tsx
 import * as React54 from "react";
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 import { SizeControl as SizeControl4 } from "@elementor/editor-controls";
 import { SideBottomIcon as SideBottomIcon2, SideLeftIcon as SideLeftIcon2, SideRightIcon as SideRightIcon2, SideTopIcon as SideTopIcon2 } from "@elementor/icons";
 import { Grid as Grid5, Stack as Stack8, withDirection as withDirection10 } from "@elementor/ui";
@@ -4195,7 +4257,7 @@ var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? __32("Right", "elementor")
 var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? __32("Left", "elementor") : __32("Right", "elementor");
 var DimensionsField = () => {
   const { isSiteRtl } = useDirection();
-  const rowRefs = [useRef8(null), useRef8(null)];
+  const rowRefs = [useRef9(null), useRef9(null)];
   return /* @__PURE__ */ React54.createElement(UiProviders, null, /* @__PURE__ */ React54.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React54.createElement(DimensionField, { side: "inset-block-start", label: __32("Top", "elementor"), rowRef: rowRefs[0] }), /* @__PURE__ */ React54.createElement(
     DimensionField,
     {
@@ -4228,13 +4290,13 @@ var DimensionField = ({
 
 // src/components/style-sections/position-section/offset-field.tsx
 import * as React55 from "react";
-import { useRef as useRef9 } from "react";
+import { useRef as useRef10 } from "react";
 import { SizeControl as SizeControl5 } from "@elementor/editor-controls";
 import { __ as __33 } from "@wordpress/i18n";
 var OFFSET_LABEL = __33("Anchor offset", "elementor");
 var UNITS2 = ["px", "em", "rem", "vw", "vh"];
 var OffsetField = () => {
-  const rowRef = useRef9(null);
+  const rowRef = useRef10(null);
   return /* @__PURE__ */ React55.createElement(StylesField, { bind: "scroll-margin-top", propDisplayName: OFFSET_LABEL }, /* @__PURE__ */ React55.createElement(StylesFieldLayout, { label: OFFSET_LABEL, ref: rowRef }, /* @__PURE__ */ React55.createElement(SizeControl5, { units: UNITS2, anchorRef: rowRef })));
 };
 
@@ -4301,9 +4363,9 @@ var PositionSection = () => {
       setPositionDependentValues(CLEARED_POSITION_DEPENDENT_VALUES, meta);
     }
   }, [positionDependentValues, updateDimensionsHistory, setPositionDependentValues]);
-  const clearPositionDependentPropsRef = useRef10(clearPositionDependentProps);
+  const clearPositionDependentPropsRef = useRef11(clearPositionDependentProps);
   clearPositionDependentPropsRef.current = clearPositionDependentProps;
-  useEffect6(() => {
+  useEffect7(() => {
     if (positionValue?.value === POSITION_STATIC || positionValue === null) {
       clearPositionDependentPropsRef.current();
     }
@@ -4334,7 +4396,7 @@ var usePersistDimensions = () => {
 
 // src/components/style-sections/size-section/size-section.tsx
 import * as React63 from "react";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { AspectRatioControl, PositionControl, SizeControl as SizeControl6 } from "@elementor/editor-controls";
 import { Grid as Grid6, Stack as Stack10 } from "@elementor/ui";
 import { __ as __40 } from "@wordpress/i18n";
@@ -4501,7 +4563,7 @@ var CssSizeProps = [
 ];
 var ASPECT_RATIO_LABEL = __40("Aspect Ratio", "elementor");
 var SizeSection = () => {
-  const gridRowRefs = [useRef11(null), useRef11(null), useRef11(null)];
+  const gridRowRefs = [useRef12(null), useRef12(null), useRef12(null)];
   return /* @__PURE__ */ React63.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ React63.createElement(Grid6, { key: rowIndex, container: true, gap: 2, flexWrap: "nowrap", ref: gridRowRefs[rowIndex] }, row.map((props) => /* @__PURE__ */ React63.createElement(Grid6, { item: true, xs: 6, key: props.bind }, /* @__PURE__ */ React63.createElement(SizeField, { ...props, rowRef: gridRowRefs[rowIndex], extendedOptions: ["auto"] }))))), /* @__PURE__ */ React63.createElement(PanelDivider, null), /* @__PURE__ */ React63.createElement(Stack10, null, /* @__PURE__ */ React63.createElement(OverflowField, null)), /* @__PURE__ */ React63.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ React63.createElement(Stack10, { gap: 2, pt: 2 }, /* @__PURE__ */ React63.createElement(StylesField, { bind: "aspect-ratio", propDisplayName: ASPECT_RATIO_LABEL }, /* @__PURE__ */ React63.createElement(AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ React63.createElement(PanelDivider, null), /* @__PURE__ */ React63.createElement(ObjectFitField, null), /* @__PURE__ */ React63.createElement(StylesField, { bind: "object-position", propDisplayName: __40("Object position", "elementor") }, /* @__PURE__ */ React63.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(PositionControl, null))))));
 };
 var SizeField = ({ label, bind, rowRef, extendedOptions }) => {
@@ -4540,12 +4602,12 @@ var ColumnCountField = () => {
 
 // src/components/style-sections/typography-section/column-gap-field.tsx
 import * as React66 from "react";
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { SizeControl as SizeControl7 } from "@elementor/editor-controls";
 import { __ as __43 } from "@wordpress/i18n";
 var COLUMN_GAP_LABEL = __43("Column gap", "elementor");
 var ColumnGapField = () => {
-  const rowRef = useRef12(null);
+  const rowRef = useRef13(null);
   return /* @__PURE__ */ React66.createElement(StylesField, { bind: "column-gap", propDisplayName: COLUMN_GAP_LABEL }, /* @__PURE__ */ React66.createElement(StylesFieldLayout, { label: COLUMN_GAP_LABEL, ref: rowRef }, /* @__PURE__ */ React66.createElement(SizeControl7, { anchorRef: rowRef })));
 };
 
@@ -4573,12 +4635,12 @@ var FontFamilyField = () => {
 
 // src/components/style-sections/typography-section/font-size-field.tsx
 import * as React68 from "react";
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { SizeControl as SizeControl8 } from "@elementor/editor-controls";
 import { __ as __45 } from "@wordpress/i18n";
 var FONT_SIZE_LABEL = __45("Font size", "elementor");
 var FontSizeField = () => {
-  const rowRef = useRef13(null);
+  const rowRef = useRef14(null);
   return /* @__PURE__ */ React68.createElement(StylesField, { bind: "font-size", propDisplayName: FONT_SIZE_LABEL }, /* @__PURE__ */ React68.createElement(StylesFieldLayout, { label: FONT_SIZE_LABEL, ref: rowRef }, /* @__PURE__ */ React68.createElement(SizeControl8, { anchorRef: rowRef, ariaLabel: FONT_SIZE_LABEL })));
 };
 
@@ -4628,23 +4690,23 @@ var FontWeightField = () => {
 
 // src/components/style-sections/typography-section/letter-spacing-field.tsx
 import * as React71 from "react";
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 import { SizeControl as SizeControl9 } from "@elementor/editor-controls";
 import { __ as __48 } from "@wordpress/i18n";
 var LETTER_SPACING_LABEL = __48("Letter spacing", "elementor");
 var LetterSpacingField = () => {
-  const rowRef = useRef14(null);
+  const rowRef = useRef15(null);
   return /* @__PURE__ */ React71.createElement(StylesField, { bind: "letter-spacing", propDisplayName: LETTER_SPACING_LABEL }, /* @__PURE__ */ React71.createElement(StylesFieldLayout, { label: LETTER_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React71.createElement(SizeControl9, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
 // src/components/style-sections/typography-section/line-height-field.tsx
 import * as React72 from "react";
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { SizeControl as SizeControl10 } from "@elementor/editor-controls";
 import { __ as __49 } from "@wordpress/i18n";
 var LINE_HEIGHT_LABEL = __49("Line height", "elementor");
 var LineHeightField = () => {
-  const rowRef = useRef15(null);
+  const rowRef = useRef16(null);
   return /* @__PURE__ */ React72.createElement(StylesField, { bind: "line-height", propDisplayName: LINE_HEIGHT_LABEL }, /* @__PURE__ */ React72.createElement(StylesFieldLayout, { label: LINE_HEIGHT_LABEL, ref: rowRef }, /* @__PURE__ */ React72.createElement(SizeControl10, { anchorRef: rowRef })));
 };
 
@@ -4866,12 +4928,12 @@ var TransformField = () => /* @__PURE__ */ React79.createElement(StylesField, {
 
 // src/components/style-sections/typography-section/word-spacing-field.tsx
 import * as React80 from "react";
-import { useRef as useRef16 } from "react";
+import { useRef as useRef17 } from "react";
 import { SizeControl as SizeControl11 } from "@elementor/editor-controls";
 import { __ as __56 } from "@wordpress/i18n";
 var WORD_SPACING_LABEL = __56("Word spacing", "elementor");
 var WordSpacingField = () => {
-  const rowRef = useRef16(null);
+  const rowRef = useRef17(null);
   return /* @__PURE__ */ React80.createElement(StylesField, { bind: "word-spacing", propDisplayName: WORD_SPACING_LABEL }, /* @__PURE__ */ React80.createElement(StylesFieldLayout, { label: WORD_SPACING_LABEL, ref: rowRef }, /* @__PURE__ */ React80.createElement(SizeControl11, { anchorRef: rowRef, min: -Number.MAX_SAFE_INTEGER })));
 };
 
@@ -5147,7 +5209,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 useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { __privateListenTo as listenTo, commandStartEvent } from "@elementor/editor-v1-adapters";
 
 // src/panel.ts
@@ -5171,7 +5233,7 @@ var isAtomicWidgetSelected = () => {
 // src/hooks/use-open-editor-panel.ts
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  useEffect7(() => {
+  useEffect8(() => {
     return listenTo(commandStartEvent("panel/editor/open"), () => {
       if (isAtomicWidgetSelected()) {
         open();
@@ -5191,12 +5253,12 @@ import { AttributesControl, DisplayConditionsControl } from "@elementor/editor-c
 
 // src/components/promotions/custom-css.tsx
 import * as React86 from "react";
-import { useRef as useRef17 } from "react";
+import { useRef as useRef18 } from "react";
 import { PromotionTrigger } from "@elementor/editor-controls";
 import { __ as __60 } from "@wordpress/i18n";
 var TRACKING_DATA = { target_name: "custom_css", location_l2: "style" };
 var CustomCssSection = () => {
-  const triggerRef = useRef17(null);
+  const triggerRef = useRef18(null);
   return /* @__PURE__ */ React86.createElement(
     StyleTabSection,
     {
@@ -5634,10 +5696,10 @@ import {
 import { DatabaseIcon } from "@elementor/icons";
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
@@ -5731,7 +5793,7 @@ var usePropDynamicTagsInternal = (filterByLicense2) => {
     categories = propDynamicType?.settings.categories || [];
   }
   const categoriesKey = categories.join();
-  return useMemo11(
+  return useMemo12(
     () => getDynamicTagsByCategories(categories, filterByLicense2),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [categoriesKey, filterByLicense2]
@@ -5765,7 +5827,7 @@ var getDynamicTagsByCategories = (categories, filterByLicense2) => {
 // src/dynamics/hooks/use-dynamic-tag.ts
 var useDynamicTag = (tagName) => {
   const dynamicTags = useAllPropDynamicTags();
-  return useMemo12(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
+  return useMemo13(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
@@ -5827,7 +5889,7 @@ import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, use
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 import * as React89 from "react";
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 import { isDependencyMet as isDependencyMet3 } from "@elementor/editor-props";
 var DynamicConditionalControl = ({
   children,
@@ -5835,7 +5897,7 @@ var DynamicConditionalControl = ({
   propsSchema,
   dynamicSettings
 }) => {
-  const defaults = useMemo13(() => {
+  const defaults = useMemo14(() => {
     if (!propsSchema) {
       return {};
     }
@@ -5845,7 +5907,7 @@ var DynamicConditionalControl = ({
       return result;
     }, {});
   }, [propsSchema]);
-  const convertedSettings = useMemo13(() => {
+  const convertedSettings = useMemo14(() => {
     if (!dynamicSettings) {
       return {};
     }
@@ -5864,7 +5926,7 @@ var DynamicConditionalControl = ({
       {}
     );
   }, [dynamicSettings]);
-  const effectiveSettings = useMemo13(() => {
+  const effectiveSettings = useMemo14(() => {
     return { ...defaults, ...convertedSettings };
   }, [defaults, convertedSettings]);
   if (!propType?.dependencies?.terms.length) {
@@ -5909,7 +5971,7 @@ var DynamicControl = ({ bind, children }) => {
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React91 from "react";
-import { Fragment as Fragment14, useEffect as useEffect8, useState as useState10 } from "react";
+import { Fragment as Fragment14, useEffect as useEffect9, 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";
@@ -5929,7 +5991,7 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const isCurrentValueDynamic = !!dynamicValue;
   const options13 = useFilteredOptions(searchValue);
   const hasNoDynamicTags = !options13.length && !searchValue.trim();
-  useEffect8(() => {
+  useEffect9(() => {
     if (hasNoDynamicTags) {
       trackViewPromotion({ target_name: "dynamic_tags" });
     } else if (expired) {
@@ -6432,7 +6494,7 @@ import { __ as __70 } from "@wordpress/i18n";
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 import * as React98 from "react";
-import { useMemo as useMemo14, useRef as useRef18, useState as useState12 } from "react";
+import { useMemo as useMemo15, useRef as useRef19, useState as useState12 } from "react";
 import {
   createPropsResolver as createPropsResolver2,
   stylesInheritanceTransformersRegistry
@@ -6452,7 +6514,7 @@ import {
 import { __ as __69 } from "@wordpress/i18n";
 
 // src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx
-import { isValidElement, useEffect as useEffect9, useState as useState11 } from "react";
+import { isValidElement, useEffect as useEffect10, useState as useState11 } from "react";
 import { UnknownStyleStateError } from "@elementor/editor-canvas";
 import {
   isClassState as isClassState2,
@@ -6463,7 +6525,7 @@ import { __ as __67 } from "@wordpress/i18n";
 var MAXIMUM_ITEMS = 2;
 var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => {
   const [items3, setItems] = useState11([]);
-  useEffect9(() => {
+  useEffect10(() => {
     (async () => {
       const normalizedItems = await Promise.all(
         inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve))
@@ -6638,7 +6700,7 @@ var StylesInheritanceInfotip = ({
   isDisabled
 }) => {
   const [showInfotip, setShowInfotip] = useState12(false);
-  const triggerRef = useRef18(null);
+  const triggerRef = useRef19(null);
   const toggleInfotip = () => {
     if (isDisabled) {
       return;
@@ -6653,7 +6715,7 @@ var StylesInheritanceInfotip = ({
   };
   const key = path.join(".");
   const sectionWidth = useSectionWidth2();
-  const resolve = useMemo14(() => {
+  const resolve = useMemo15(() => {
     return createPropsResolver2({
       transformers: stylesInheritanceTransformersRegistry,
       schema: { [key]: propType }