@elementor/editor-editing-panel 4.2.0-beta1 → 4.2.0-beta2

package/dist/index.mjs

@@ -992,6 +992,9 @@ function ClassStatesMenu({ closeMenu }) {
 var CLASS_STATES_MAP = {
   selected: {
     label: __4("selected", "elementor")
+  },
+  disabled: {
+    label: __4("disabled", "elementor")
   }
 };
 function useElementStates() {
@@ -2722,7 +2725,7 @@ import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { createLocation as createLocation4 } from "@elementor/locations";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
-import { Box as Box6, Divider as Divider5, Stack as Stack13 } from "@elementor/ui";
+import { Box as Box7, Divider as Divider5, Stack as Stack13 } from "@elementor/ui";
 import { __ as __62 } from "@wordpress/i18n";
 
 // src/contexts/styles-inheritance-context.tsx
@@ -4301,7 +4304,7 @@ var GapControlField = () => {
 
 // src/components/style-sections/layout-section/grid-auto-flow-field.tsx
 import * as React53 from "react";
-import { ControlToggleButtonGroup as ControlToggleButtonGroup3 } from "@elementor/editor-controls";
+import { ControlToggleButtonGroup as ControlToggleButtonGroup3, useBoundProp as useBoundProp4 } 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 __29 } from "@wordpress/i18n";
@@ -4324,7 +4327,7 @@ var directionOptions = [
 ];
 var parseAutoFlow = (value) => {
   if (!value) {
-    return { direction: "row", dense: false };
+    return { direction: null, dense: false };
   }
   const dense = value.includes("dense");
   const direction = value.replace(/\s*dense\s*/, "").trim();
@@ -4334,27 +4337,33 @@ var composeAutoFlow = (direction, dense) => {
   return dense ? `${direction} dense` : direction;
 };
 var GridAutoFlowFieldContent = () => {
-  const { value, setValue } = useStylesField("grid-auto-flow", {
+  const { value, setValue, canEdit } = useStylesField("grid-auto-flow", {
     history: { propDisplayName: AUTO_FLOW_LABEL }
   });
+  const { placeholder } = useBoundProp4();
   const { direction, dense } = parseAutoFlow(value?.value ?? null);
+  const directionPlaceholder = parseAutoFlow(placeholder?.value ?? null).direction;
   const handleDirectionChange = (newDirection) => {
     if (!newDirection) {
+      setValue(null);
       return;
     }
     setValue({ $$type: "string", value: composeAutoFlow(newDirection, dense) });
   };
   const handleDenseToggle = () => {
-    setValue({ $$type: "string", value: composeAutoFlow(direction, !dense) });
+    const nextDirection = direction ?? "row";
+    setValue({ $$type: "string", value: composeAutoFlow(nextDirection, !dense) });
   };
   return /* @__PURE__ */ React53.createElement(StylesFieldLayout, { label: AUTO_FLOW_LABEL }, /* @__PURE__ */ React53.createElement(Grid3, { container: true, gap: 1, flexWrap: "nowrap", alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ React53.createElement(Grid3, { item: true, sx: { width: 64, maxWidth: "100%" } }, /* @__PURE__ */ React53.createElement(
     ControlToggleButtonGroup3,
     {
       items: directionOptions,
       value: direction,
+      placeholder: directionPlaceholder,
       onChange: handleDirectionChange,
       exclusive: true,
-      fullWidth: true
+      fullWidth: true,
+      disabled: !canEdit
     }
   )), /* @__PURE__ */ React53.createElement(Grid3, { item: true }, /* @__PURE__ */ React53.createElement(Tooltip3, { title: DENSE_LABEL, placement: "top" }, /* @__PURE__ */ React53.createElement(
     ToggleButton,
@@ -4363,7 +4372,8 @@ var GridAutoFlowFieldContent = () => {
       selected: dense,
       onChange: handleDenseToggle,
       size: "tiny",
-      "aria-label": DENSE_LABEL
+      "aria-label": DENSE_LABEL,
+      disabled: !canEdit
     },
     /* @__PURE__ */ React53.createElement(LayoutDashboardIcon, { fontSize: "tiny" })
   )))));
@@ -4460,17 +4470,34 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React55.createElement(StylesFi
 
 // src/components/style-sections/layout-section/grid-outline-field.tsx
 import * as React56 from "react";
-import { SwitchControl as SwitchControl2 } from "@elementor/editor-controls";
+import { updateElementEditorSettings, useElementEditorSettings } from "@elementor/editor-elements";
+import { Box as Box5, Switch } from "@elementor/ui";
 import { __ as __32 } from "@wordpress/i18n";
 var GRID_OUTLINE_LABEL = __32("Show Grid Outline", "elementor");
 var GridOutlineField = () => {
-  return /* @__PURE__ */ React56.createElement(SettingsField, { bind: "grid_outline", propDisplayName: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(SwitchControl2, null)));
+  const { element } = useElement();
+  const settings = useElementEditorSettings(element.id);
+  const value = settings?.grid_outline ?? true;
+  return /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(Box5, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React56.createElement(
+    Switch,
+    {
+      "aria-label": GRID_OUTLINE_LABEL,
+      checked: value,
+      onChange: (event) => {
+        updateElementEditorSettings({
+          elementId: element.id,
+          settings: { grid_outline: event.target.checked }
+        });
+      },
+      size: "small"
+    }
+  )));
 };
 
 // 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 useBoundProp4 } from "@elementor/editor-controls";
+import { ControlActions, createControl, SizeComponent, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { Grid as Grid4 } from "@elementor/ui";
 import { __ as __33 } from "@wordpress/i18n";
 
@@ -4589,7 +4616,7 @@ var GridTrackFieldContent = ({ cssProp, label }) => {
   const { value, setValue } = useStylesField(cssProp, {
     history: { propDisplayName: label }
   });
-  const { placeholder: inheritedPlaceholder } = useBoundProp4();
+  const { placeholder: inheritedPlaceholder } = useBoundProp5();
   const anchorRef = useRef9(null);
   const local = parseValue(value);
   const inherited = parseValue(inheritedPlaceholder);
@@ -4848,12 +4875,12 @@ var PositionField = () => {
 import * as React65 from "react";
 import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Alert as Alert3, AlertTitle as AlertTitle2, Box as Box5, Infotip } from "@elementor/ui";
+import { Alert as Alert3, AlertTitle as AlertTitle2, Box as Box6, Infotip } from "@elementor/ui";
 import { __ as __41 } from "@wordpress/i18n";
 var Z_INDEX_LABEL = __41("Z-index", "elementor");
 var ZIndexField = ({ disabled }) => {
   const StyleField = /* @__PURE__ */ React65.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(NumberControl4, { disabled })));
-  const content = /* @__PURE__ */ React65.createElement(Alert3, { color: "secondary", icon: /* @__PURE__ */ React65.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React65.createElement(AlertTitle2, null, __41("Z-index", "elementor")), /* @__PURE__ */ React65.createElement(Box5, { component: "span" }, __41(
+  const content = /* @__PURE__ */ React65.createElement(Alert3, { color: "secondary", icon: /* @__PURE__ */ React65.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React65.createElement(AlertTitle2, null, __41("Z-index", "elementor")), /* @__PURE__ */ React65.createElement(Box6, { component: "span" }, __41(
     "z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
     "elementor"
   )));
@@ -4865,7 +4892,7 @@ var ZIndexField = ({ disabled }) => {
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React65.createElement(Box5, null, StyleField)
+    /* @__PURE__ */ React65.createElement(Box6, null, StyleField)
   ) : /* @__PURE__ */ React65.createElement(React65.Fragment, null, StyleField);
 };
 
@@ -5607,7 +5634,7 @@ var StyleTab = () => {
           "transition"
         ]
       }
-    ), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(Box6, { sx: { height: "150px" } })))
+    ), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(Box7, { sx: { height: "150px" } })))
   ));
 };
 function ClassesHeader({ children }) {
@@ -5769,16 +5796,16 @@ import * as React93 from "react";
 import {
   ControlFormLabel as ControlFormLabel3,
   Repeater,
-  useBoundProp as useBoundProp6
+  useBoundProp as useBoundProp7
 } from "@elementor/editor-controls";
 import {
-  updateElementEditorSettings,
+  updateElementEditorSettings as updateElementEditorSettings2,
   useElementChildren,
-  useElementEditorSettings
+  useElementEditorSettings as useElementEditorSettings2
 } from "@elementor/editor-elements";
 import { numberPropTypeUtil as numberPropTypeUtil4 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { Alert as Alert4, Chip as Chip4, Infotip as Infotip2, Stack as Stack15, Switch, TextField as TextField2, Typography as Typography5 } from "@elementor/ui";
+import { Alert as Alert4, Chip as Chip4, Infotip as Infotip2, Stack as Stack15, Switch as Switch2, TextField as TextField2, Typography as Typography5 } from "@elementor/ui";
 import { __ as __67 } from "@wordpress/i18n";
 
 // src/controls-registry/element-controls/get-element-by-type.ts
@@ -5795,7 +5822,7 @@ var getElementByType = (elementId, type) => {
 };
 
 // src/controls-registry/element-controls/tabs-control/use-actions.ts
-import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import {
   createElements,
   duplicateElements,
@@ -5808,7 +5835,7 @@ import { __ as __66 } from "@wordpress/i18n";
 var TAB_ELEMENT_TYPE = "e-tab";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content";
 var useActions = () => {
-  const { value, setValue: setDefaultActiveTab } = useBoundProp5(numberPropTypeUtil3);
+  const { value, setValue: setDefaultActiveTab } = useBoundProp6(numberPropTypeUtil3);
   const defaultActiveTab = value ?? 0;
   const duplicateItem = ({
     items: items3,
@@ -6069,7 +6096,7 @@ var ItemLabel = ({ value, index }) => {
   return /* @__PURE__ */ React93.createElement(Stack15, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React93.createElement("span", null, elementTitle), /* @__PURE__ */ React93.createElement(ItemDefaultTab, { index }));
 };
 var ItemDefaultTab = ({ index }) => {
-  const { value: defaultItem } = useBoundProp6(numberPropTypeUtil4);
+  const { value: defaultItem } = useBoundProp7(numberPropTypeUtil4);
   const isDefault = defaultItem === index;
   if (!isDefault) {
     return null;
@@ -6083,10 +6110,10 @@ var ItemContent = ({ value, index }) => {
   return /* @__PURE__ */ React93.createElement(Stack15, { p: 2, gap: 1.5 }, /* @__PURE__ */ React93.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React93.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: __67("Tabs", "elementor") }, /* @__PURE__ */ React93.createElement(DefaultTabControl, { tabIndex: index })));
 };
 var DefaultTabControl = ({ tabIndex }) => {
-  const { value, setValue } = useBoundProp6(numberPropTypeUtil4);
+  const { value, setValue } = useBoundProp7(numberPropTypeUtil4);
   const isDefault = value === tabIndex;
   return /* @__PURE__ */ React93.createElement(Stack15, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React93.createElement(ControlFormLabel3, null, __67("Set as default tab", "elementor")), /* @__PURE__ */ React93.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React93.createElement(
-    Switch,
+    Switch2,
     {
       size: "small",
       checked: isDefault,
@@ -6101,7 +6128,7 @@ var DefaultTabControl = ({ tabIndex }) => {
   )));
 };
 var TabLabelControl = ({ elementId }) => {
-  const editorSettings = useElementEditorSettings(elementId);
+  const editorSettings = useElementEditorSettings2(elementId);
   const label = editorSettings?.title ?? "";
   return /* @__PURE__ */ React93.createElement(Stack15, { gap: 1 }, /* @__PURE__ */ React93.createElement(ControlFormLabel3, null, __67("Tab name", "elementor")), /* @__PURE__ */ React93.createElement(
     TextField2,
@@ -6109,7 +6136,7 @@ var TabLabelControl = ({ elementId }) => {
       size: "tiny",
       value: label,
       onChange: ({ target }) => {
-        updateElementEditorSettings({
+        updateElementEditorSettings2({
           elementId,
           settings: { title: target.value }
         });
@@ -6166,7 +6193,7 @@ import { controlActionsMenu as controlActionsMenu2 } from "@elementor/menus";
 
 // src/dynamics/components/background-control-dynamic-tag.tsx
 import * as React94 from "react";
-import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider4, PropProvider as PropProvider4, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import {
   backgroundImageOverlayPropTypeUtil
 } from "@elementor/editor-props";
@@ -6177,7 +6204,7 @@ import { useMemo as useMemo12 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 import { useMemo as useMemo11 } from "react";
-import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 
 // src/dynamics/sync/get-atomic-dynamic-tags.ts
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
@@ -6264,7 +6291,7 @@ var useAllPropDynamicTags = () => {
 };
 var usePropDynamicTagsInternal = (filterByLicense2) => {
   let categories = [];
-  const { propType } = useBoundProp7();
+  const { propType } = useBoundProp8();
   if (propType) {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
@@ -6310,11 +6337,11 @@ var useDynamicTag = (tagName) => {
 // src/dynamics/components/background-control-dynamic-tag.tsx
 var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ React94.createElement(DatabaseIcon, { fontSize: "tiny" });
 var BackgroundControlDynamicTagLabel = ({ value }) => {
-  const context = useBoundProp8(backgroundImageOverlayPropTypeUtil);
+  const context = useBoundProp9(backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React94.createElement(PropProvider4, { ...context, value: value.value }, /* @__PURE__ */ React94.createElement(PropKeyProvider4, { bind: "image" }, /* @__PURE__ */ React94.createElement(Wrapper2, { rawValue: value.value })));
 };
 var Wrapper2 = ({ rawValue }) => {
-  const { propType } = useBoundProp8();
+  const { propType } = useBoundProp9();
   const imageOverlayPropType = propType.prop_types["background-image-overlay"];
   return /* @__PURE__ */ React94.createElement(PropProvider4, { propType: imageOverlayPropType.shape.image, value: rawValue, setValue: () => void 0 }, /* @__PURE__ */ React94.createElement(PropKeyProvider4, { bind: "src" }, /* @__PURE__ */ React94.createElement(Content, { rawValue: rawValue.image })));
 };
@@ -6330,14 +6357,14 @@ import {
   ControlFormLabel as ControlFormLabel4,
   PropKeyProvider as PropKeyProvider6,
   PropProvider as PropProvider6,
-  useBoundProp as useBoundProp11
+  useBoundProp as useBoundProp12
 } from "@elementor/editor-controls";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
 import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/icons";
 import {
   bindPopover,
   bindTrigger as bindTrigger2,
-  Box as Box7,
+  Box as Box8,
   Divider as Divider8,
   Grid as Grid8,
   IconButton as IconButton2,
@@ -6362,7 +6389,7 @@ var usePersistDynamicValue = (propKey) => {
 
 // src/dynamics/dynamic-control.tsx
 import * as React96 from "react";
-import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider5, PropProvider as PropProvider5, useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 
 // src/dynamics/components/dynamic-conditional-control.tsx
 import * as React95 from "react";
@@ -6415,7 +6442,7 @@ var DynamicConditionalControl = ({
 
 // src/dynamics/dynamic-control.tsx
 var DynamicControl = ({ bind, children }) => {
-  const { value, setValue } = useBoundProp9(dynamicPropTypeUtil);
+  const { value, setValue } = useBoundProp10(dynamicPropTypeUtil);
   const { name = "", group = "", settings } = value ?? {};
   const dynamicTag = useDynamicTag(name);
   if (!dynamicTag) {
@@ -6449,7 +6476,7 @@ var DynamicControl = ({ bind, children }) => {
 // src/dynamics/components/dynamic-selection.tsx
 import * as React97 from "react";
 import { Fragment as Fragment14, useEffect as useEffect9, useState as useState10 } from "react";
-import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
+import { trackUpgradePromotionClick, trackViewPromotion, useBoundProp as useBoundProp11 } 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 Stack16, Typography as Typography6, useTheme as useTheme3 } from "@elementor/ui";
@@ -6462,8 +6489,8 @@ var DynamicSelection = ({ close: closePopover, expired = false }) => {
   const [searchValue, setSearchValue] = useState10("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
   const theme = useTheme3();
-  const { value: anyValue } = useBoundProp10();
-  const { bind, value: dynamicValue, setValue } = useBoundProp10(dynamicPropTypeUtil);
+  const { value: anyValue } = useBoundProp11();
+  const { bind, value: dynamicValue, setValue } = useBoundProp11(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
   const options13 = useFilteredOptions(searchValue);
@@ -6615,8 +6642,8 @@ var useFilteredOptions = (searchValue) => {
 var SIZE3 = "tiny";
 var tagsWithoutTabs = ["popup"];
 var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
-  const { setValue: setAnyValue, propType } = useBoundProp11();
-  const { bind, value } = useBoundProp11(dynamicPropTypeUtil);
+  const { setValue: setAnyValue, propType } = useBoundProp12();
+  const { bind, value } = useBoundProp12(dynamicPropTypeUtil);
   const { expired: readonly } = useLicenseConfig();
   const originalPropType = createTopLevelObjectType({
     schema: {
@@ -6636,7 +6663,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React98.createElement(Box7, null, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React98.createElement(Box8, null, /* @__PURE__ */ React98.createElement(
     Tag,
     {
       fullWidth: true,
@@ -6839,11 +6866,11 @@ function getDynamicValue(name, settings, renderPostId) {
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 import * as React99 from "react";
-import { useBoundProp as useBoundProp12 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp13 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon4 } from "@elementor/icons";
 import { __ as __70 } from "@wordpress/i18n";
 var usePropDynamicAction = () => {
-  const { propType } = useBoundProp12();
+  const { propType } = useBoundProp13();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
@@ -6880,7 +6907,7 @@ var init2 = () => {
 };
 
 // src/reset-style-props.tsx
-import { useBoundProp as useBoundProp13 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp14 } from "@elementor/editor-controls";
 import { hasVariable as hasVariable2 } from "@elementor/editor-variables";
 import { BrushBigIcon } from "@elementor/icons";
 import { controlActionsMenu as controlActionsMenu3 } from "@elementor/menus";
@@ -6940,7 +6967,7 @@ function initResetStyleProps() {
 }
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
-  const { value, resetValue, propType } = useBoundProp13();
+  const { value, resetValue, propType } = useBoundProp14();
   const hasValue = value !== null && value !== void 0;
   const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null;
   const isRequired = !!propType.settings?.required;
@@ -6968,7 +6995,7 @@ function useResetStyleValueProps() {
 
 // src/styles-inheritance/components/styles-inheritance-indicator.tsx
 import * as React105 from "react";
-import { useBoundProp as useBoundProp14 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp15 } 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 __75 } from "@wordpress/i18n";
@@ -6983,7 +7010,7 @@ import {
 import { PopoverHeader as PopoverHeader3, useSectionWidth as useSectionWidth2 } from "@elementor/editor-ui";
 import {
   Backdrop,
-  Box as Box9,
+  Box as Box10,
   Card,
   CardContent,
   ClickAwayListener,
@@ -7166,8 +7193,8 @@ var ValueComponent = ({ index, value }) => {
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
 import * as React103 from "react";
-import { Box as Box8 } from "@elementor/ui";
-var ActionIcons = () => /* @__PURE__ */ React103.createElement(Box8, { display: "flex", gap: 0.5, alignItems: "center" });
+import { Box as Box9 } from "@elementor/ui";
+var ActionIcons = () => /* @__PURE__ */ React103.createElement(Box9, { display: "flex", gap: 0.5, alignItems: "center" });
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var SECTION_PADDING_INLINE = 32;
@@ -7217,7 +7244,7 @@ var StylesInheritanceInfotip = ({
       }
     },
     /* @__PURE__ */ React104.createElement(
-      Box9,
+      Box10,
       {
         sx: {
           position: "sticky",
@@ -7244,7 +7271,7 @@ var StylesInheritanceInfotip = ({
       },
       /* @__PURE__ */ React104.createElement(Stack18, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React104.createElement(
-          Box9,
+          Box10,
           {
             key: item.id,
             display: "flex",
@@ -7256,7 +7283,7 @@ var StylesInheritanceInfotip = ({
             )
           },
           /* @__PURE__ */ React104.createElement(
-            Box9,
+            Box10,
             {
               display: "flex",
               gap: 0.5,
@@ -7272,9 +7299,9 @@ var StylesInheritanceInfotip = ({
     )
   ));
   if (isDisabled) {
-    return /* @__PURE__ */ React104.createElement(Box9, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React104.createElement(Box10, { sx: { display: "inline-flex" } }, children);
   }
-  return /* @__PURE__ */ React104.createElement(Box9, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React104.createElement(Box10, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React104.createElement(
     TooltipOrInfotip,
     {
       showInfotip,
@@ -7302,7 +7329,7 @@ function TooltipOrInfotip({
   isDisabled
 }) {
   if (isDisabled) {
-    return /* @__PURE__ */ React104.createElement(Box9, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React104.createElement(Box10, { sx: { display: "inline-flex" } }, children);
   }
   if (showInfotip) {
     return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(
@@ -7334,7 +7361,7 @@ function TooltipOrInfotip({
 var StylesInheritanceIndicator = ({
   customContext
 }) => {
-  const context = useBoundProp14();
+  const context = useBoundProp15();
   const { path, propType } = customContext || context;
   const inheritanceChain = useStylesInheritanceChain(path);
   if (!path || !inheritanceChain.length) {