@elementor/editor-editing-panel 4.4.0-1086 → 4.4.0-1088

package/dist/index.mjs

@@ -2394,6 +2394,7 @@ import {
   InlineEditingControl,
   KeyValueControl,
   LinkControl,
+  NoticeControl,
   NumberControl,
   QueryChipsControl,
   QueryControl,
@@ -2468,7 +2469,8 @@ var controlTypes = {
     layout: "custom",
     propTypeUtil: timeRangePropTypeUtil
   },
-  "attachment-type": { component: AttachmentTypeControl, layout: "custom", propTypeUtil: stringPropTypeUtil2 }
+  "attachment-type": { component: AttachmentTypeControl, layout: "custom", propTypeUtil: stringPropTypeUtil2 },
+  notice: { component: NoticeControl, layout: "full", propTypeUtil: stringPropTypeUtil2 }
 };
 var ControlsRegistry = class {
   constructor(controlsRegistry2) {
@@ -2551,12 +2553,33 @@ var getStyleByLayout = (layout) => {
 // src/controls-registry/settings-field.tsx
 import * as React23 from "react";
 import { useMemo as useMemo7 } from "react";
-import { PropKeyProvider, PropProvider } from "@elementor/editor-controls";
+import { PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
 import { getElementLabel as getElementLabel3, getElementSettings, updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
+import {
+  responsiveFallbackChain,
+  responsivePropTypeUtil
+} from "@elementor/editor-props";
+import { useActiveBreakpoint, useBreakpoints } from "@elementor/editor-responsive";
 import { undoable as undoable4 } from "@elementor/editor-v1-adapters";
 import { __ as __10 } from "@wordpress/i18n";
 
+// src/utils/is-responsive-prop-type.ts
+function isResponsivePropType(propType) {
+  if (!propType) {
+    return false;
+  }
+  if ("key" in propType && propType.key === "responsive") {
+    return true;
+  }
+  if (propType.kind === "union") {
+    return Object.values(propType.prop_types).some(
+      (inner) => isResponsivePropType(inner)
+    );
+  }
+  return false;
+}
+
 // src/controls-registry/create-top-level-object-type.ts
 var createTopLevelObjectType = ({ schema }) => {
   const schemaPropType = {
@@ -2572,6 +2595,7 @@ var createTopLevelObjectType = ({ schema }) => {
 
 // src/controls-registry/settings-field.tsx
 var HISTORY_DEBOUNCE_WAIT2 = 800;
+var DESKTOP_BREAKPOINT = "desktop";
 var SettingsField = ({ bind, children, propDisplayName }) => {
   const {
     element: { id: elementId },
@@ -2599,7 +2623,24 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
       updateElementSettings3({ id: elementId, props: settings, withHistory: false });
     }
   };
-  return /* @__PURE__ */ React23.createElement(PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React23.createElement(PropKeyProvider, { bind }, children));
+  return /* @__PURE__ */ React23.createElement(PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React23.createElement(PropKeyProvider, { bind }, isResponsivePropType(propsSchema[bind]) ? /* @__PURE__ */ React23.createElement(ResponsiveBinding, null, children) : children));
+};
+var ResponsiveBinding = ({ children }) => {
+  const { value, setValue, propType, disabled } = useBoundProp(responsivePropTypeUtil);
+  const breakpoint = useActiveBreakpoint() ?? DESKTOP_BREAKPOINT;
+  const activeBreakpoints = (useBreakpoints() ?? []).map(({ id }) => id);
+  const inherited = responsiveFallbackChain(breakpoint).filter((key) => key !== breakpoint && activeBreakpoints.includes(key)).map((key) => value?.[key]).find((entry) => entry !== null && entry !== void 0);
+  return /* @__PURE__ */ React23.createElement(
+    PropProvider,
+    {
+      propType,
+      value,
+      setValue,
+      placeholder: { [breakpoint]: inherited },
+      isDisabled: () => disabled
+    },
+    /* @__PURE__ */ React23.createElement(PropKeyProvider, { bind: breakpoint }, children)
+  );
 };
 function useUndoableUpdateElementProp({
   elementId,
@@ -2758,7 +2799,7 @@ function isControlHiddenByDependencies(control, propsSchema, settings) {
 import * as React90 from "react";
 import { useState as useState9 } from "react";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
-import { useActiveBreakpoint } from "@elementor/editor-responsive";
+import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
 import { createLocation as createLocation4 } from "@elementor/locations";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
 import { Box as Box7, Divider as Divider5, Stack as Stack13 } from "@elementor/ui";
@@ -3143,10 +3184,10 @@ 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 { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 import { isDependency as isDependency2, isDependencyMet as isDependencyMet2 } from "@elementor/editor-props";
 var ConditionalField = ({ children }) => {
-  const { propType, value, resetValue } = useBoundProp();
+  const { propType, value, resetValue } = useBoundProp2();
   const depList = getDependencies(propType);
   const { values: depValues, setValues: setDepValues } = useStylesFields(depList);
   const inheritedValues = useInheritedValues(depList);
@@ -4106,7 +4147,7 @@ import { useEffect as useEffect5, useMemo as useMemo9, useState as useState7 } f
 import {
   ControlToggleButtonGroup,
   NumberControl as NumberControl2,
-  useBoundProp as useBoundProp2
+  useBoundProp as useBoundProp3
 } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowUpSmallIcon as ArrowUpSmallIcon2, PencilIcon } from "@elementor/icons";
 import { Grid as Grid2 } from "@elementor/ui";
@@ -4152,7 +4193,7 @@ function FlexOrderFieldContent() {
   } = useStylesField("order", {
     history: { propDisplayName: ORDER_LABEL }
   });
-  const { placeholder } = useBoundProp2();
+  const { placeholder } = useBoundProp3();
   const placeholderValue = placeholder;
   const currentGroup = useMemo9(() => getGroupControlValue(order?.value ?? null), [order]);
   const [activeGroup, setActiveGroup] = useState7(currentGroup);
@@ -4229,7 +4270,7 @@ import {
   PropKeyProvider as PropKeyProvider3,
   PropProvider as PropProvider3,
   SizeControl as SizeControl3,
-  useBoundProp as useBoundProp3
+  useBoundProp as useBoundProp4
 } from "@elementor/editor-controls";
 import { flexPropTypeUtil, numberPropTypeUtil as numberPropTypeUtil2, sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 import { ExpandIcon, PencilIcon as PencilIcon2, ShrinkIcon } from "@elementor/icons";
@@ -4263,7 +4304,7 @@ var FlexSizeFieldContent = () => {
   const { value, setValue, canEdit } = useStylesField("flex", {
     history: { propDisplayName: FLEX_SIZE_LABEL }
   });
-  const { placeholder } = useBoundProp3();
+  const { placeholder } = useBoundProp4();
   const flexValues = extractFlexValues(value);
   const currentGroup = useMemo10(() => getActiveGroup(flexValues), [flexValues]);
   const [activeGroup, setActiveGroup] = useState8(currentGroup);
@@ -4337,7 +4378,7 @@ var createFlexValueForGroup = (group, flexValue) => {
 };
 var FlexCustomField = () => {
   const flexBasisRowRef = useRef7(null);
-  const context = useBoundProp3(flexPropTypeUtil);
+  const context = useBoundProp4(flexPropTypeUtil);
   return /* @__PURE__ */ React51.createElement(PropProvider3, { ...context }, /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: __28("Grow", "elementor") }, /* @__PURE__ */ React51.createElement(PropKeyProvider3, { bind: "flexGrow" }, /* @__PURE__ */ React51.createElement(NumberControl3, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: __28("Shrink", "elementor") }, /* @__PURE__ */ React51.createElement(PropKeyProvider3, { bind: "flexShrink" }, /* @__PURE__ */ React51.createElement(NumberControl3, { min: 0, shouldForceInt: true }))), /* @__PURE__ */ React51.createElement(StylesFieldLayout, { label: __28("Basis", "elementor"), ref: flexBasisRowRef }, /* @__PURE__ */ React51.createElement(PropKeyProvider3, { bind: "flexBasis" }, /* @__PURE__ */ React51.createElement(SizeControl3, { extendedOptions: ["auto"], anchorRef: flexBasisRowRef })))));
 };
 var getActiveGroup = ({
@@ -4372,7 +4413,7 @@ var GapControlField = () => {
 
 // src/components/style-sections/layout-section/grid-auto-flow-field.tsx
 import * as React53 from "react";
-import { ControlToggleButtonGroup as ControlToggleButtonGroup3, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { ControlToggleButtonGroup as ControlToggleButtonGroup3, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon as ArrowDownSmallIcon3, ArrowRightIcon as ArrowRightIcon2, LayoutDashboardIcon } from "@elementor/icons";
 import { Grid as Grid3, ToggleButton, Tooltip as Tooltip3, withDirection as withDirection7 } from "@elementor/ui";
 import { __ as __30 } from "@wordpress/i18n";
@@ -4408,7 +4449,7 @@ var GridAutoFlowFieldContent = () => {
   const { value, setValue, canEdit } = useStylesField("grid-auto-flow", {
     history: { propDisplayName: AUTO_FLOW_LABEL }
   });
-  const { placeholder } = useBoundProp4();
+  const { placeholder } = useBoundProp5();
   const { direction, dense } = parseAutoFlow(value?.value ?? null);
   const directionPlaceholder = parseAutoFlow(placeholder?.value ?? null).direction;
   const handleDirectionChange = (newDirection) => {
@@ -4565,7 +4606,7 @@ var GridOutlineField = () => {
 // src/components/style-sections/layout-section/grid-size-field.tsx
 import * as React57 from "react";
 import { useRef as useRef9 } from "react";
-import { ControlActions, createControl, SizeComponent, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { ControlActions, createControl, SizeComponent, useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { Grid as Grid4 } from "@elementor/ui";
 import { __ as __34 } from "@wordpress/i18n";
 
@@ -4684,7 +4725,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
   const { value, setValue } = useStylesField(cssProp, {
     history: { propDisplayName: label }
   });
-  const { placeholder: inheritedPlaceholder } = useBoundProp5();
+  const { placeholder: inheritedPlaceholder } = useBoundProp6();
   const anchorRef = useRef9(null);
   const local = parseValue(value);
   const inherited = parseValue(inheritedPlaceholder);
@@ -5679,7 +5720,7 @@ var StyleTab = () => {
   const currentClassesProp = useCurrentClassesProp();
   const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp ?? "");
   const [activeStyleState, setActiveStyleState] = useState9(null);
-  const breakpoint = useActiveBreakpoint();
+  const breakpoint = useActiveBreakpoint2();
   if (!currentClassesProp) {
     return null;
   }
@@ -6556,7 +6597,7 @@ import * as React97 from "react";
 import {
   ControlFormLabel as ControlFormLabel5,
   Repeater as Repeater3,
-  useBoundProp as useBoundProp7
+  useBoundProp as useBoundProp8
 } from "@elementor/editor-controls";
 import {
   updateElementEditorSettings as updateElementEditorSettings4,
@@ -6582,7 +6623,7 @@ var getElementByType = (elementId, type) => {
 };
 
 // src/controls-registry/element-controls/tabs-control/use-actions.ts
-import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import {
   createElements as createElements3,
   duplicateElements as duplicateElements3,
@@ -6595,7 +6636,7 @@ import { __ as __74 } from "@wordpress/i18n";
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var useActions2 = () => {
-  const { value, setValue: setDefaultActiveTab } = useBoundProp6(numberPropTypeUtil3);
+  const { value, setValue: setDefaultActiveTab } = useBoundProp7(numberPropTypeUtil3);
   const defaultActiveTab = value ?? 0;
   const duplicateItem2 = ({
     items: items3,
@@ -6856,7 +6897,7 @@ var ItemLabel3 = ({ value, index }) => {
   return /* @__PURE__ */ React97.createElement(Stack17, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React97.createElement("span", null, elementTitle), /* @__PURE__ */ React97.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
-  const { value: defaultItem } = useBoundProp7(numberPropTypeUtil4);
+  const { value: defaultItem } = useBoundProp8(numberPropTypeUtil4);
   const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
@@ -6870,7 +6911,7 @@ var ItemContent3 = ({ value, index }) => {
   return /* @__PURE__ */ React97.createElement(Stack17, { p: 2, gap: 1.5 }, /* @__PURE__ */ React97.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React97.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: __75("Tabs", "elementor") }, /* @__PURE__ */ React97.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
-  const { value, setValue } = useBoundProp7(numberPropTypeUtil4);
+  const { value, setValue } = useBoundProp8(numberPropTypeUtil4);
   const isDefault = value === tabIndex;
   return /* @__PURE__ */ React97.createElement(Stack17, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React97.createElement(ControlFormLabel5, null, __75("Set as default tab", "elementor")), /* @__PURE__ */ React97.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React97.createElement(
     Switch2,
@@ -6955,7 +6996,7 @@ import { controlActionsMenu as controlActionsMenu2 } from "@elementor/menus";
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
 import * as React98 from "react";
-import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import {
   backgroundImageOverlayPropTypeUtil
 } from "@elementor/editor-props";
@@ -6966,7 +7007,7 @@ import { useMemo as useMemo12 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 import { useMemo as useMemo11 } from "react";
-import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
@@ -7053,7 +7094,7 @@ var useAllPropDynamicTags = () => {
 };
 var usePropDynamicTagsInternal = (filterByLicense2) => {
   let categories = [];
-  const { propType } = useBoundProp8();
+  const { propType } = useBoundProp9();
   if (propType) {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
@@ -7099,11 +7140,11 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React98.createElement(DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = useBoundProp9(backgroundImageOverlayPropTypeUtil);
+  const context = useBoundProp10(backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React98.createElement(PropProvider4, { ...context, value: value.value }, /* @__PURE__ */ React98.createElement(PropKeyProvider4, { bind: "image" }, /* @__PURE__ */ React98.createElement(Wrapper2, { rawValue: value.value })));
 };
 var Wrapper2 = ({ rawValue }) => {
-  const { propType } = useBoundProp9();
+  const { propType } = useBoundProp10();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
   return /* @__PURE__ */ React98.createElement(PropProvider4, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React98.createElement(PropKeyProvider4, { bind: "src" }, /* @__PURE__ */ React98.createElement(Content, { rawValue: rawValue.image })));
 };
@@ -7119,7 +7160,7 @@ import {
   ControlFormLabel as ControlFormLabel6,
   PropKeyProvider as PropKeyProvider6,
   PropProvider as PropProvider6,
-  useBoundProp as useBoundProp12
+  useBoundProp as useBoundProp13
 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/icons";
@@ -7151,7 +7192,7 @@ var usePersistDynamicValue = (propKey) => {
 
 // src/dynamics/dynamic-control.tsx
 import * as React100 from "react";
-import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 import * as React99 from "react";
@@ -7204,7 +7245,7 @@ var DynamicConditionalControl = ({
 
 // src/dynamics/dynamic-control.tsx
 var DynamicControl = ({ bind, children }) => {
-  const { value, setValue } = useBoundProp10(dynamicPropTypeUtil);
+  const { value, setValue } = useBoundProp11(dynamicPropTypeUtil);
   const { name = "", group = "", settings } = value ?? {};
   const dynamicTag = useDynamicTag(name);
   if (!dynamicTag) {
@@ -7238,7 +7279,7 @@ var DynamicControl = ({ bind, children }) => {
 // src/dynamics/components/dynamic-selection.tsx
 import * as React101 from "react";
 import { Fragment as Fragment16, useEffect as useEffect11, useState as useState10 } from "react";
-import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
+import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
 import { CtaButton, PopoverHeader, PopoverMenuList, SearchField, SectionPopoverBody } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
 import { Divider as Divider7, Link as Link2, Stack as Stack18, Typography as Typography6, useTheme as useTheme3 } from "@elementor/ui";
@@ -7251,8 +7292,8 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const [searchValue, setSearchValue] = useState10("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = useTheme3();
-  const { value: anyValue } = useBoundProp11();
-  const { bind, value: dynamicValue, setValue } = useBoundProp11(dynamicPropTypeUtil);
+  const { value: anyValue } = useBoundProp12();
+  const { bind, value: dynamicValue, setValue } = useBoundProp12(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
   const options13 = useFilteredOptions(searchValue);
@@ -7404,8 +7445,8 @@ var useFilteredOptions = (searchValue) => {
 var SIZE3 = "tiny";
 var tagsWithoutTabs = ["popup"];
 var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
-  const { setValue: setAnyValue, propType } = useBoundProp12();
-  const { bind, value } = useBoundProp12(dynamicPropTypeUtil);
+  const { setValue: setAnyValue, propType } = useBoundProp13();
+  const { bind, value } = useBoundProp13(dynamicPropTypeUtil);
   const { expired: readonly } = useLicenseConfig();
   const originalPropType = createTopLevelObjectType({
     schema: {
@@ -7628,11 +7669,11 @@ function getDynamicValue(name, settings, renderPostId) {
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 import * as React103 from "react";
-import { useBoundProp as useBoundProp13 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp14 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon4 } from "@elementor/icons";
 import { __ as __78 } from "@wordpress/i18n";
 var usePropDynamicAction = () => {
-  const { propType } = useBoundProp13();
+  const { propType } = useBoundProp14();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
@@ -7669,7 +7710,7 @@ var init2 = () => {
 };
 
 // src/reset-style-props.tsx
-import { useBoundProp as useBoundProp14 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp15 } from "@elementor/editor-controls";
 import { hasVariable as hasVariable2 } from "@elementor/editor-variables";
 import { BrushBigIcon } from "@elementor/icons";
 import { controlActionsMenu as controlActionsMenu3 } from "@elementor/menus";
@@ -7729,7 +7770,7 @@ function initResetStyleProps() {
 }
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
-  const { value, resetValue, propType } = useBoundProp14();
+  const { value, resetValue, propType } = useBoundProp15();
   const hasValue = value !== null && value !== void 0;
   const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
   const isRequired = !!propType.settings?.required;
@@ -7757,7 +7798,7 @@ function useResetStyleValueProps() {
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
 import * as React109 from "react";
-import { useBoundProp as useBoundProp15 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp16 } from "@elementor/editor-controls";
 import { isEmpty as isEmpty3 } from "@elementor/editor-props";
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY as ELEMENTS_BASE_STYLES_PROVIDER_KEY4 } from "@elementor/editor-styles-repository";
 import { __ as __83 } from "@wordpress/i18n";
@@ -7860,7 +7901,7 @@ var getTransformedValue = async (item, bind, resolve) => {
 
 // src/styles-inheritance/components/infotip/breakpoint-icon.tsx
 import * as React104 from "react";
-import { useBreakpoints } from "@elementor/editor-responsive";
+import { useBreakpoints as useBreakpoints2 } from "@elementor/editor-responsive";
 import {
   DesktopIcon,
   LaptopIcon,
@@ -7883,7 +7924,7 @@ var breakpointIconMap = {
   mobile: MobilePortraitIcon
 };
 var BreakpointIcon = ({ breakpoint }) => {
-  const breakpoints = useBreakpoints();
+  const breakpoints = useBreakpoints2();
   const currentBreakpoint = breakpoint || DEFAULT_BREAKPOINT3;
   const IconComponent = breakpointIconMap[currentBreakpoint];
   if (!IconComponent) {
@@ -8123,7 +8164,7 @@ function TooltipOrInfotip({
 var StylesInheritanceIndicator = ({
   customContext
 }) => {
-  const context = useBoundProp15();
+  const context = useBoundProp16();
   const { path, propType } = customContext || context;
   const inheritanceChain = useStylesInheritanceChain(path);
   if (!path || !inheritanceChain.length) {