@elementor/editor-editing-panel 4.0.0-520 → 4.0.0-522

package/dist/index.d.mts

@@ -1318,6 +1318,13 @@ declare const registerEditingPanelReplacement: ({ id, priority, ...props }: Omit
     priority?: number;
 }) => void;
 
+type V4PromotionData = {
+    title: string;
+    content: string;
+    image: string;
+    ctaUrl: string;
+};
+
 declare function doGetAppliedClasses(elementId: string, classesPropType?: string): string[];
 declare function doApplyClasses(elementId: string, classIds: StyleDefinitionID[], classesPropType?: string): void;
 declare function doUnapplyClass(elementId: string, classId: StyleDefinitionID, classesPropType?: string): boolean;
@@ -1361,4 +1368,4 @@ type TagInstance = {
 
 declare const isDynamicPropValue: (prop: PropValue) => prop is DynamicPropValue;
 
-export { Control as BaseControl, type ControlType, CustomCssIndicator, type DynamicTag, type DynamicTags, type DynamicTagsManager, ElementProvider, FIELD_TYPE, HISTORY_DEBOUNCE_WAIT, SectionContent, SettingsControl, SettingsField, StyleIndicator, StyleTabSection, StylesProviderCannotUpdatePropsError, type ValidationEvent, type ValidationResult, controlsRegistry, createTopLevelObjectType, doApplyClasses, doGetAppliedClasses, doUnapplyClass, getFieldIndicators, getSubtitle, getTitle, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, injectIntoPanelHeaderTop, injectIntoStyleTab, isDynamicPropValue, registerEditingPanelReplacement, registerFieldIndicator, registerStyleProviderToColors, setLicenseConfig, useClassesProp, useCustomCss, useElement, usePanelActions, usePanelStatus, useStateByElement, useStyle, useStylesRerender };
+export { Control as BaseControl, type ControlType, CustomCssIndicator, type DynamicTag, type DynamicTags, type DynamicTagsManager, ElementProvider, FIELD_TYPE, HISTORY_DEBOUNCE_WAIT, SectionContent, SettingsControl, SettingsField, StyleIndicator, StyleTabSection, StylesProviderCannotUpdatePropsError, type V4PromotionData, type ValidationEvent, type ValidationResult, controlsRegistry, createTopLevelObjectType, doApplyClasses, doGetAppliedClasses, doUnapplyClass, getFieldIndicators, getSubtitle, getTitle, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, injectIntoPanelHeaderTop, injectIntoStyleTab, isDynamicPropValue, registerEditingPanelReplacement, registerFieldIndicator, registerStyleProviderToColors, setLicenseConfig, useClassesProp, useCustomCss, useElement, usePanelActions, usePanelStatus, useStateByElement, useStyle, useStylesRerender };

package/dist/index.d.ts

@@ -1318,6 +1318,13 @@ declare const registerEditingPanelReplacement: ({ id, priority, ...props }: Omit
     priority?: number;
 }) => void;
 
+type V4PromotionData = {
+    title: string;
+    content: string;
+    image: string;
+    ctaUrl: string;
+};
+
 declare function doGetAppliedClasses(elementId: string, classesPropType?: string): string[];
 declare function doApplyClasses(elementId: string, classIds: StyleDefinitionID[], classesPropType?: string): void;
 declare function doUnapplyClass(elementId: string, classId: StyleDefinitionID, classesPropType?: string): boolean;
@@ -1361,4 +1368,4 @@ type TagInstance = {
 
 declare const isDynamicPropValue: (prop: PropValue) => prop is DynamicPropValue;
 
-export { Control as BaseControl, type ControlType, CustomCssIndicator, type DynamicTag, type DynamicTags, type DynamicTagsManager, ElementProvider, FIELD_TYPE, HISTORY_DEBOUNCE_WAIT, SectionContent, SettingsControl, SettingsField, StyleIndicator, StyleTabSection, StylesProviderCannotUpdatePropsError, type ValidationEvent, type ValidationResult, controlsRegistry, createTopLevelObjectType, doApplyClasses, doGetAppliedClasses, doUnapplyClass, getFieldIndicators, getSubtitle, getTitle, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, injectIntoPanelHeaderTop, injectIntoStyleTab, isDynamicPropValue, registerEditingPanelReplacement, registerFieldIndicator, registerStyleProviderToColors, setLicenseConfig, useClassesProp, useCustomCss, useElement, usePanelActions, usePanelStatus, useStateByElement, useStyle, useStylesRerender };
+export { Control as BaseControl, type ControlType, CustomCssIndicator, type DynamicTag, type DynamicTags, type DynamicTagsManager, ElementProvider, FIELD_TYPE, HISTORY_DEBOUNCE_WAIT, SectionContent, SettingsControl, SettingsField, StyleIndicator, StyleTabSection, StylesProviderCannotUpdatePropsError, type V4PromotionData, type ValidationEvent, type ValidationResult, controlsRegistry, createTopLevelObjectType, doApplyClasses, doGetAppliedClasses, doUnapplyClass, getFieldIndicators, getSubtitle, getTitle, init, injectIntoClassSelectorActions, injectIntoCssClassConvert, injectIntoPanelHeaderTop, injectIntoStyleTab, isDynamicPropValue, registerEditingPanelReplacement, registerFieldIndicator, registerStyleProviderToColors, setLicenseConfig, useClassesProp, useCustomCss, useElement, usePanelActions, usePanelStatus, useStateByElement, useStyle, useStylesRerender };

package/dist/index.js

@@ -2419,6 +2419,7 @@ var import_editor_props8 = require("@elementor/editor-props");
 
 // src/styles-inheritance/create-snapshots-manager.ts
 var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_variables = require("@elementor/editor-variables");
 
 // src/styles-inheritance/utils.ts
 var DEFAULT_STATE = "normal";
@@ -2451,11 +2452,11 @@ function createSnapshotsManager(getStylesByMeta, breakpointsRoot) {
         )
       };
     }
-    if (state && !allBreakpointStatesSnapshots[currentBreakpointKey][stateKey]) {
+    if (state && !allBreakpointStatesSnapshots[currentBreakpointKey]?.[stateKey]) {
       allBreakpointStatesSnapshots[currentBreakpointKey][stateKey] = buildStateSnapshotSlot(
         getStylesByMeta({ breakpoint: currentBreakpointId, state }),
         parentBreakpoint,
-        allBreakpointStatesSnapshots[currentBreakpointKey],
+        allBreakpointStatesSnapshots[currentBreakpointKey] ?? {},
         state
       );
     }
@@ -2465,7 +2466,7 @@ function createSnapshotsManager(getStylesByMeta, breakpointsRoot) {
     const stateKey = getStateKey(state);
     const breakpointKey = getBreakpointKey(breakpoint);
     if (allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]) {
-      return allBreakpointStatesSnapshots[breakpointKey][stateKey].snapshot;
+      return allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]?.snapshot;
     }
     const breakpointsChain = [...breakpointsInheritancePaths[breakpointKey], breakpoint];
     breakpointsChain.forEach((breakpointId, index) => {
@@ -2519,7 +2520,8 @@ function buildInitialSnapshotFromStyles(styles) {
     } = styleData;
     Object.entries(props).forEach(([key, value]) => {
       const filteredValue = (0, import_editor_props7.filterEmptyValues)(value);
-      if (filteredValue === null) {
+      const filteredVariableValue = filteredValue?.$$type?.includes("variable") && !(0, import_editor_variables.hasVariable)(filteredValue?.value) ? null : filteredValue;
+      if (filteredVariableValue === null) {
         return;
       }
       if (!snapshot[key]) {
@@ -2527,7 +2529,7 @@ function buildInitialSnapshotFromStyles(styles) {
       }
       const snapshotPropValue = {
         ...styleData,
-        value: filteredValue
+        value: filteredVariableValue
       };
       snapshot[key].push(snapshotPropValue);
     });
@@ -4783,14 +4785,16 @@ var EditingPanelHooks = () => {
   return null;
 };
 
+// src/components/promotions/init.tsx
+var import_editor_controls50 = require("@elementor/editor-controls");
+
 // src/components/promotions/custom-css.tsx
 var React83 = __toESM(require("react"));
 var import_react36 = require("react");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_i18n57 = require("@wordpress/i18n");
 function getCustomCssPromotion() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.config?.v4Promotions?.customCss;
+  return window.elementor?.config?.v4Promotions?.customCss;
 }
 var CustomCssSection = () => {
   const [showInfoTip, setShowInfoTip] = (0, import_react36.useState)(false);
@@ -4835,12 +4839,13 @@ var init = () => {
       component: CustomCssSection,
       options: { overwrite: true }
     });
+    controlsRegistry.register("display-conditions", import_editor_controls50.DisplayConditionsControl, "two-columns");
   }
 };
 
 // src/controls-registry/element-controls/tabs-control/tabs-control.tsx
 var React84 = __toESM(require("react"));
-var import_editor_controls51 = require("@elementor/editor-controls");
+var import_editor_controls52 = require("@elementor/editor-controls");
 var import_editor_elements17 = require("@elementor/editor-elements");
 var import_editor_props16 = require("@elementor/editor-props");
 var import_icons22 = require("@elementor/icons");
@@ -4865,14 +4870,14 @@ var getElementByType = (elementId, type) => {
 };
 
 // src/controls-registry/element-controls/tabs-control/use-actions.ts
-var import_editor_controls50 = require("@elementor/editor-controls");
+var import_editor_controls51 = require("@elementor/editor-controls");
 var import_editor_elements16 = require("@elementor/editor-elements");
 var import_editor_props15 = require("@elementor/editor-props");
 var import_i18n58 = require("@wordpress/i18n");
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var useActions = () => {
-  const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls50.useBoundProp)(import_editor_props15.numberPropTypeUtil);
+  const { value, setValue: setDefaultActiveTab } = (0, import_editor_controls51.useBoundProp)(import_editor_props15.numberPropTypeUtil);
   const defaultActiveTab = value ?? 0;
   const duplicateItem = ({
     items: items3,
@@ -5102,7 +5107,7 @@ var TabsControlContent = ({ label }) => {
     }
   };
   return /* @__PURE__ */ React84.createElement(
-    import_editor_controls51.Repeater,
+    import_editor_controls52.Repeater,
     {
       showToggle: false,
       values: repeaterValues,
@@ -5126,7 +5131,7 @@ var ItemLabel = ({ value, index }) => {
   return /* @__PURE__ */ React84.createElement(import_ui38.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React84.createElement("span", null, elementTitle), /* @__PURE__ */ React84.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
-  const { value: defaultItem } = (0, import_editor_controls51.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const { value: defaultItem } = (0, import_editor_controls52.useBoundProp)(import_editor_props16.numberPropTypeUtil);
   const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
@@ -5140,9 +5145,9 @@ var ItemContent = ({ value, index }) => {
   return /* @__PURE__ */ React84.createElement(import_ui38.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React84.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React84.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n59.__)("Tabs", "elementor") }, /* @__PURE__ */ React84.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
-  const { value, setValue } = (0, import_editor_controls51.useBoundProp)(import_editor_props16.numberPropTypeUtil);
+  const { value, setValue } = (0, import_editor_controls52.useBoundProp)(import_editor_props16.numberPropTypeUtil);
   const isDefault = value === tabIndex;
-  return /* @__PURE__ */ React84.createElement(import_ui38.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React84.createElement(import_editor_controls51.ControlFormLabel, null, (0, import_i18n59.__)("Set as default tab", "elementor")), /* @__PURE__ */ React84.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React84.createElement(import_ui38.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React84.createElement(import_editor_controls52.ControlFormLabel, null, (0, import_i18n59.__)("Set as default tab", "elementor")), /* @__PURE__ */ React84.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React84.createElement(
     import_ui38.Switch,
     {
       size: "small",
@@ -5160,7 +5165,7 @@ var DefaultTabControl = ({ tabIndex }) => {
 var TabLabelControl = ({ elementId }) => {
   const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
   const label = editorSettings?.title ?? "";
-  return /* @__PURE__ */ React84.createElement(import_ui38.Stack, { gap: 1 }, /* @__PURE__ */ React84.createElement(import_editor_controls51.ControlFormLabel, null, (0, import_i18n59.__)("Tab name", "elementor")), /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React84.createElement(import_ui38.Stack, { gap: 1 }, /* @__PURE__ */ React84.createElement(import_editor_controls52.ControlFormLabel, null, (0, import_i18n59.__)("Tab name", "elementor")), /* @__PURE__ */ React84.createElement(
     import_ui38.TextField,
     {
       size: "tiny",
@@ -5214,12 +5219,12 @@ var registerElementControls = () => {
 
 // src/dynamics/init.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
-var import_editor_controls58 = require("@elementor/editor-controls");
+var import_editor_controls59 = require("@elementor/editor-controls");
 var import_menus2 = require("@elementor/menus");
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var React85 = __toESM(require("react"));
-var import_editor_controls53 = require("@elementor/editor-controls");
+var import_editor_controls54 = require("@elementor/editor-controls");
 var import_editor_props18 = require("@elementor/editor-props");
 var import_icons23 = require("@elementor/icons");
 
@@ -5228,7 +5233,7 @@ var import_react39 = require("react");
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 var import_react38 = require("react");
-var import_editor_controls52 = require("@elementor/editor-controls");
+var import_editor_controls53 = require("@elementor/editor-controls");
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
@@ -5312,7 +5317,7 @@ var useAllPropDynamicTags = () => {
 };
 var usePropDynamicTagsInternal = (filterByLicense2) => {
   let categories = [];
-  const { propType } = (0, import_editor_controls52.useBoundProp)();
+  const { propType } = (0, import_editor_controls53.useBoundProp)();
   if (propType) {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
@@ -5358,13 +5363,13 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React85.createElement(import_icons23.DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = (0, import_editor_controls53.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React85.createElement(import_editor_controls53.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React85.createElement(import_editor_controls53.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React85.createElement(Wrapper2, { rawValue: value.value })));
+  const context = (0, import_editor_controls54.useBoundProp)(import_editor_props18.backgroundImageOverlayPropTypeUtil);
+  return /* @__PURE__ */ React85.createElement(import_editor_controls54.PropProvider, { ...context, value: value.value }, /* @__PURE__ */ React85.createElement(import_editor_controls54.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React85.createElement(Wrapper2, { rawValue: value.value })));
 };
 var Wrapper2 = ({ rawValue }) => {
-  const { propType } = (0, import_editor_controls53.useBoundProp)();
+  const { propType } = (0, import_editor_controls54.useBoundProp)();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
-  return /* @__PURE__ */ React85.createElement(import_editor_controls53.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React85.createElement(import_editor_controls53.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React85.createElement(Content, { rawValue: rawValue.image })));
+  return /* @__PURE__ */ React85.createElement(import_editor_controls54.PropProvider, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React85.createElement(import_editor_controls54.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React85.createElement(Content, { rawValue: rawValue.image })));
 };
 var Content = ({ rawValue }) => {
   const src = rawValue.value.src;
@@ -5374,7 +5379,7 @@ var Content = ({ rawValue }) => {
 
 // src/dynamics/components/dynamic-selection-control.tsx
 var React89 = __toESM(require("react"));
-var import_editor_controls56 = require("@elementor/editor-controls");
+var import_editor_controls57 = require("@elementor/editor-controls");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons25 = require("@elementor/icons");
 var import_ui40 = require("@elementor/ui");
@@ -5390,7 +5395,7 @@ var usePersistDynamicValue = (propKey) => {
 
 // src/dynamics/dynamic-control.tsx
 var React87 = __toESM(require("react"));
-var import_editor_controls54 = require("@elementor/editor-controls");
+var import_editor_controls55 = require("@elementor/editor-controls");
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 var React86 = __toESM(require("react"));
@@ -5442,7 +5447,7 @@ var DynamicConditionalControl = ({
 
 // src/dynamics/dynamic-control.tsx
 var DynamicControl = ({ bind, children }) => {
-  const { value, setValue } = (0, import_editor_controls54.useBoundProp)(dynamicPropTypeUtil);
+  const { value, setValue } = (0, import_editor_controls55.useBoundProp)(dynamicPropTypeUtil);
   const { name = "", group = "", settings } = value ?? {};
   const dynamicTag = useDynamicTag(name);
   if (!dynamicTag) {
@@ -5462,7 +5467,7 @@ var DynamicControl = ({ bind, children }) => {
     });
   };
   const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
-  return /* @__PURE__ */ React87.createElement(import_editor_controls54.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React87.createElement(import_editor_controls54.PropKeyProvider, { bind }, /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React87.createElement(import_editor_controls55.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React87.createElement(import_editor_controls55.PropKeyProvider, { bind }, /* @__PURE__ */ React87.createElement(
     DynamicConditionalControl,
     {
       propType: dynamicPropType,
@@ -5476,7 +5481,7 @@ var DynamicControl = ({ bind, children }) => {
 // src/dynamics/components/dynamic-selection.tsx
 var import_react40 = require("react");
 var React88 = __toESM(require("react"));
-var import_editor_controls55 = require("@elementor/editor-controls");
+var import_editor_controls56 = require("@elementor/editor-controls");
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
 var import_ui39 = require("@elementor/ui");
@@ -5489,8 +5494,8 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const [searchValue, setSearchValue] = (0, import_react40.useState)("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = (0, import_ui39.useTheme)();
-  const { value: anyValue } = (0, import_editor_controls55.useBoundProp)();
-  const { bind, value: dynamicValue, setValue } = (0, import_editor_controls55.useBoundProp)(dynamicPropTypeUtil);
+  const { value: anyValue } = (0, import_editor_controls56.useBoundProp)();
+  const { bind, value: dynamicValue, setValue } = (0, import_editor_controls56.useBoundProp)(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
   const options12 = useFilteredOptions(searchValue);
@@ -5620,8 +5625,8 @@ var useFilteredOptions = (searchValue) => {
 var SIZE3 = "tiny";
 var tagsWithoutTabs = ["popup"];
 var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
-  const { setValue: setAnyValue, propType } = (0, import_editor_controls56.useBoundProp)();
-  const { bind, value } = (0, import_editor_controls56.useBoundProp)(dynamicPropTypeUtil);
+  const { setValue: setAnyValue, propType } = (0, import_editor_controls57.useBoundProp)();
+  const { bind, value } = (0, import_editor_controls57.useBoundProp)(dynamicPropTypeUtil);
   const { expired: readonly } = useLicenseConfig();
   const originalPropType = createTopLevelObjectType({
     schema: {
@@ -5633,7 +5638,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
   const { name: tagName = "" } = value;
   const dynamicTag = useDynamicTag(tagName);
   if (!isDynamicTagSupported(tagName) && OriginalControl) {
-    return /* @__PURE__ */ React89.createElement(import_editor_controls56.PropProvider, { propType: originalPropType, value: { [bind]: null }, setValue: setAnyValue }, /* @__PURE__ */ React89.createElement(import_editor_controls56.PropKeyProvider, { bind }, /* @__PURE__ */ React89.createElement(OriginalControl, { ...props })));
+    return /* @__PURE__ */ React89.createElement(import_editor_controls57.PropProvider, { propType: originalPropType, value: { [bind]: null }, setValue: setAnyValue }, /* @__PURE__ */ React89.createElement(import_editor_controls57.PropKeyProvider, { bind }, /* @__PURE__ */ React89.createElement(OriginalControl, { ...props })));
   }
   const removeDynamicTag = () => {
     setAnyValue(propValueFromHistory ?? null);
@@ -5782,7 +5787,7 @@ var Control2 = ({ control }) => {
     display: "grid",
     gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
   } : {};
-  return /* @__PURE__ */ React89.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React89.createElement(import_ui40.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React89.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React89.createElement(import_editor_controls56.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React89.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React89.createElement(Control, { type: control.type, props: controlProps }))));
+  return /* @__PURE__ */ React89.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React89.createElement(import_ui40.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React89.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React89.createElement(import_editor_controls57.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React89.createElement(import_ui40.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React89.createElement(Control, { type: control.type, props: controlProps }))));
 };
 function ControlsItemsStack({ items: items3 }) {
   return /* @__PURE__ */ React89.createElement(import_ui40.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
@@ -5840,11 +5845,11 @@ function getDynamicValue(name, settings) {
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 var React90 = __toESM(require("react"));
-var import_editor_controls57 = require("@elementor/editor-controls");
+var import_editor_controls58 = require("@elementor/editor-controls");
 var import_icons26 = require("@elementor/icons");
 var import_i18n62 = require("@wordpress/i18n");
 var usePropDynamicAction = () => {
-  const { propType } = (0, import_editor_controls57.useBoundProp)();
+  const { propType } = (0, import_editor_controls58.useBoundProp)();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
@@ -5857,16 +5862,16 @@ var usePropDynamicAction = () => {
 // src/dynamics/init.ts
 var { registerPopoverAction } = import_menus2.controlActionsMenu;
 var init2 = () => {
-  (0, import_editor_controls58.registerControlReplacement)({
+  (0, import_editor_controls59.registerControlReplacement)({
     component: DynamicSelectionControl,
     condition: ({ value }) => isDynamicPropValue(value)
   });
-  (0, import_editor_controls58.injectIntoRepeaterItemLabel)({
+  (0, import_editor_controls59.injectIntoRepeaterItemLabel)({
     id: "dynamic-background-image",
     condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
     component: BackgroundControlDynamicTagLabel
   });
-  (0, import_editor_controls58.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls59.injectIntoRepeaterItemIcon)({
     id: "dynamic-background-image",
     condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src),
     component: BackgroundControlDynamicTagIcon
@@ -5880,7 +5885,8 @@ var init2 = () => {
 };
 
 // src/reset-style-props.tsx
-var import_editor_controls59 = require("@elementor/editor-controls");
+var import_editor_controls60 = require("@elementor/editor-controls");
+var import_editor_variables2 = require("@elementor/editor-variables");
 var import_icons27 = require("@elementor/icons");
 var import_menus3 = require("@elementor/menus");
 var import_i18n63 = require("@wordpress/i18n");
@@ -5938,13 +5944,16 @@ function initResetStyleProps() {
 }
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
-  const { value, resetValue, propType } = (0, import_editor_controls59.useBoundProp)();
+  const { value, resetValue, propType } = (0, import_editor_controls60.useBoundProp)();
   const hasValue = value !== null && value !== void 0;
   const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
   const isRequired = !!propType.settings?.required;
   const shouldHide = !!propType.settings?.hide_reset;
+  const isPropTypeValue = value;
+  const isVariable = isPropTypeValue?.$$type?.includes("variable");
+  const variableExists = isVariable && (0, import_editor_variables2.hasVariable)(isPropTypeValue?.value);
   function calculateVisibility() {
-    if (!isStyle || !hasValue || shouldHide) {
+    if (!isStyle || !hasValue || shouldHide || isVariable && !variableExists) {
       return false;
     }
     if (hasInitial) {
@@ -5963,7 +5972,7 @@ function useResetStyleValueProps() {
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
 var React96 = __toESM(require("react"));
-var import_editor_controls60 = require("@elementor/editor-controls");
+var import_editor_controls61 = require("@elementor/editor-controls");
 var import_editor_props21 = require("@elementor/editor-props");
 var import_editor_styles_repository16 = require("@elementor/editor-styles-repository");
 var import_i18n67 = require("@wordpress/i18n");
@@ -6335,7 +6344,7 @@ function TooltipOrInfotip({
 var StylesInheritanceIndicator = ({
   customContext
 }) => {
-  const context = (0, import_editor_controls60.useBoundProp)();
+  const context = (0, import_editor_controls61.useBoundProp)();
   const { path, propType } = customContext || context;
   const inheritanceChain = useStylesInheritanceChain(path);
   if (!path || !inheritanceChain.length) {