@elementor/editor-components 3.35.0-461 → 3.35.0-462

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook4 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __30 } from "@wordpress/i18n";
+import { __ as __31 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -1683,7 +1683,7 @@ function getComponentName() {
 }
 
 // src/components/components-tab/components.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 
 // src/hooks/use-components.ts
@@ -1694,6 +1694,17 @@ var useComponents = () => {
   return { components, isLoading };
 };
 
+// src/utils/is-pro-user.ts
+function isProUser() {
+  const extendedWindow = window;
+  const hasPro = extendedWindow.elementor?.helpers?.hasPro?.() ?? false;
+  if (!hasPro) {
+    return false;
+  }
+  const isProActive = extendedWindow.elementorPro?.config?.isActive ?? false;
+  return isProActive;
+}
+
 // src/components/components-tab/component-search.tsx
 import * as React12 from "react";
 import { SearchIcon } from "@elementor/icons";
@@ -2783,14 +2794,26 @@ var useFilteredComponents = () => {
   };
 };
 
+// src/components/components-tab/components-pro-notification.tsx
+import * as React18 from "react";
+import { InfoAlert } from "@elementor/editor-ui";
+import { Box as Box12, Typography as Typography10 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
+function ComponentsProNotification() {
+  return /* @__PURE__ */ React18.createElement(Box12, { sx: { px: 2 } }, /* @__PURE__ */ React18.createElement(InfoAlert, null, /* @__PURE__ */ React18.createElement(Typography10, { variant: "caption", component: "span" }, /* @__PURE__ */ React18.createElement(Typography10, { variant: "caption", component: "span", fontWeight: "bold" }, __21("Try Components for free:", "elementor")), " ", __21(
+    "Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
+    "elementor"
+  ))));
+}
+
 // src/components/components-tab/components.tsx
 var ComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, hasComponents && /* @__PURE__ */ React18.createElement(ComponentSearch, null), /* @__PURE__ */ React18.createElement(ComponentsList, null));
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, hasComponents && /* @__PURE__ */ React19.createElement(ComponentSearch, null), hasComponents && !isProUser() && /* @__PURE__ */ React19.createElement(ComponentsProNotification, null), /* @__PURE__ */ React19.createElement(ComponentsList, null));
 };
 var Components = () => {
-  return /* @__PURE__ */ React18.createElement(ThemeProvider2, null, /* @__PURE__ */ React18.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React18.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React19.createElement(ThemeProvider2, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
 };
 
 // src/components/consts.ts
@@ -2798,15 +2821,15 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
 
 // src/components/create-component-form/create-component-form.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef5, useState as useState9 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
 import { notify as notify3 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon3 } from "@elementor/icons";
 import { __getState as getState15 } from "@elementor/store";
-import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack11, TextField as TextField3, Typography as Typography10 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { Button as Button5, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Stack as Stack11, TextField as TextField3, Typography as Typography11 } from "@elementor/ui";
+import { __ as __23 } from "@wordpress/i18n";
 
 // src/prevent-non-atomic-nesting.ts
 import { isAtomicWidget } from "@elementor/editor-canvas";
@@ -2814,10 +2837,10 @@ import { getAllDescendants as getAllDescendants2, getElementType } from "@elemen
 import { notify as notify2 } from "@elementor/editor-notifications";
 import { blockCommand } from "@elementor/editor-v1-adapters";
 import { __getStore as getStore } from "@elementor/store";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: __21("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: __22("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -3037,7 +3060,7 @@ function CreateComponentForm() {
       if (nonAtomicElements.length > 0) {
         notify3({
           type: "default",
-          message: __22(
+          message: __23(
             "Components require atomic elements only. Remove widgets to create this component.",
             "elementor"
           ),
@@ -3076,12 +3099,12 @@ function CreateComponentForm() {
       }
       notify3({
         type: "success",
-        message: __22("Component created successfully.", "elementor"),
+        message: __23("Component created successfully.", "elementor"),
         id: `component-saved-successfully-${uid}`
       });
       resetAndClosePopup();
     } catch {
-      const errorMessage = __22("Failed to create component. Please try again.", "elementor");
+      const errorMessage = __23("Failed to create component. Please try again.", "elementor");
       notify3({
         type: "error",
         message: errorMessage,
@@ -3100,7 +3123,7 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React19.createElement(ThemeProvider3, null, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(ThemeProvider3, null, /* @__PURE__ */ React20.createElement(
     Popover3,
     {
       open: element !== null,
@@ -3108,7 +3131,7 @@ function CreateComponentForm() {
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React19.createElement(
+    element !== null && /* @__PURE__ */ React20.createElement(
       Form2,
       {
         initialValues: { componentName: element.elementLabel },
@@ -3144,13 +3167,13 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: __22("Create component", "elementor"),
-    name: __22("Name", "elementor"),
-    cancel: __22("Cancel", "elementor"),
-    create: __22("Create", "elementor")
+    heading: __23("Create component", "elementor"),
+    name: __23("Name", "elementor"),
+    cancel: __23("Cancel", "elementor"),
+    create: __23("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React19.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
     Stack11,
     {
       direction: "row",
@@ -3159,9 +3182,9 @@ var Form2 = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React19.createElement(ComponentsIcon3, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React19.createElement(Typography10, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
-  ), /* @__PURE__ */ React19.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(FormLabel2, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(ComponentsIcon3, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React20.createElement(Typography11, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React20.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React20.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(FormLabel2, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React20.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
     TextField3,
     {
       id: nameInputId,
@@ -3173,11 +3196,11 @@ var Form2 = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React19.createElement(Stack11, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(Button5, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React19.createElement(Button5, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React20.createElement(Stack11, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(Button5, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React20.createElement(Button5, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/components/edit-component/edit-component.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { useEffect as useEffect5 } from "react";
 import { getV1DocumentsManager as getV1DocumentsManager5 } from "@elementor/editor-documents";
 import { __privateListenTo as listenTo, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
@@ -3200,10 +3223,10 @@ function updateCurrentComponent({
 }
 
 // src/components/edit-component/component-modal.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __23 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import {
@@ -3296,7 +3319,7 @@ function ComponentModal({ element, onClose }) {
     return null;
   }
   return createPortal(
-    /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(BlockEditPage, null), /* @__PURE__ */ React20.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(BlockEditPage, null), /* @__PURE__ */ React21.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
     canvasDocument.body
   );
 }
@@ -3320,7 +3343,7 @@ function Backdrop({ canvas, element, onClose }) {
       onClose();
     }
   };
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(
     "div",
     {
       style: backdropStyle,
@@ -3328,7 +3351,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __23("Exit component editing mode", "elementor")
+      "aria-label": __24("Exit component editing mode", "elementor")
     }
   );
 }
@@ -3372,7 +3395,7 @@ function BlockEditPage() {
 		}
 	}
 	`;
-  return /* @__PURE__ */ React20.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+  return /* @__PURE__ */ React21.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
 }
 
 // src/components/edit-component/edit-component.tsx
@@ -3385,7 +3408,7 @@ function EditComponent() {
   if (!elementDom) {
     return null;
   }
-  return /* @__PURE__ */ React21.createElement(ComponentModal, { element: elementDom, onClose });
+  return /* @__PURE__ */ React22.createElement(ComponentModal, { element: elementDom, onClose });
 }
 function useHandleDocumentSwitches() {
   const documentsManager = getV1DocumentsManager5();
@@ -3455,26 +3478,26 @@ function getComponentDOMElement(id2) {
 }
 
 // src/components/in-edit-mode.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Box as Box12, Button as Button6, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack12, Typography as Typography11 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { Box as Box13, Button as Button6, DialogActions, DialogContent, DialogHeader, Icon, Stack as Stack12, Typography as Typography12 } from "@elementor/ui";
+import { __ as __25 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
-    component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
+    component: /* @__PURE__ */ React23.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __24("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(Typography11, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(DialogContent, null, /* @__PURE__ */ React22.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(Typography11, { variant: "body2" }, __24(
+  const content = __25("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React23.createElement(Box13, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React23.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React23.createElement(Typography12, { variant: "subtitle1" }, content))), /* @__PURE__ */ React23.createElement(DialogContent, null, /* @__PURE__ */ React23.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React23.createElement(Typography12, { variant: "body2" }, __25(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React22.createElement(DialogActions, null, /* @__PURE__ */ React22.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __24("Close", "elementor"))))));
+  )), /* @__PURE__ */ React23.createElement(DialogActions, null, /* @__PURE__ */ React23.createElement(Button6, { color: "secondary", variant: "contained", onClick: closeDialog }, __25("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
 import { getFieldIndicators } from "@elementor/editor-editing-panel";
 import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
@@ -3482,7 +3505,7 @@ import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon4, PencilIcon as PencilIcon2 } from "@elementor/icons";
 import { Divider as Divider4, IconButton as IconButton6, Stack as Stack17, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __26 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
 import { useElement } from "@elementor/editor-editing-panel";
@@ -3548,20 +3571,20 @@ function useComponentInstanceSettings() {
 }
 
 // src/components/instance-editing-panel/empty-state.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
-import { Button as Button7, Stack as Stack13, Typography as Typography12 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
+import { Button as Button7, Stack as Stack13, Typography as Typography13 } from "@elementor/ui";
+import { __ as __26 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   const { canEdit } = useComponentsPermissions();
-  const message = canEdit ? __25(
+  const message = canEdit ? __26(
     "Edit the component to add properties, manage them or update the design across all instances.",
     "elementor"
-  ) : __25(
+  ) : __26(
     "With your current role, you cannot edit this component. Contact an administrator to add properties.",
     "elementor"
   );
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     Stack13,
     {
       alignItems: "center",
@@ -3571,22 +3594,22 @@ var EmptyState2 = ({ onEditComponent }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
       gap: 1.5
     },
-    /* @__PURE__ */ React23.createElement(ComponentPropListIcon4, { fontSize: "large" }),
-    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "subtitle2" }, __25("No properties yet", "elementor")),
-    /* @__PURE__ */ React23.createElement(Typography12, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && /* @__PURE__ */ React23.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(PencilIcon, { fontSize: "small" }), __25("Edit component", "elementor"))
+    /* @__PURE__ */ React24.createElement(ComponentPropListIcon4, { fontSize: "large" }),
+    /* @__PURE__ */ React24.createElement(Typography13, { align: "center", variant: "subtitle2" }, __26("No properties yet", "elementor")),
+    /* @__PURE__ */ React24.createElement(Typography13, { align: "center", variant: "caption", maxWidth: "170px" }, message),
+    canEdit && /* @__PURE__ */ React24.createElement(Button7, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React24.createElement(PencilIcon, { fontSize: "small" }), __26("Edit component", "elementor"))
   );
 };
 
 // src/components/instance-editing-panel/override-props-group.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Box as Box13, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack16 } from "@elementor/ui";
+import { Box as Box14, Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack16 } from "@elementor/ui";
 
 // src/components/instance-editing-panel/override-prop-control.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
 import {
   BaseControl,
@@ -3632,11 +3655,11 @@ function getControlsByBind(controls) {
 }
 
 // src/provider/overridable-prop-context.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var OverridablePropContext = createContext2(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React25.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
 var useComponentInstanceElement = () => useContext2(OverridablePropContext)?.componentInstanceElement;
@@ -3730,11 +3753,11 @@ function getPropType({ widgetType, propKey }) {
 }
 
 // src/components/control-label.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { ControlAdornments, ControlFormLabel } from "@elementor/editor-controls";
 import { Stack as Stack14 } from "@elementor/ui";
 var ControlLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ React25.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React25.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React25.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React26.createElement(Stack14, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React26.createElement(ControlFormLabel, { ...props }, children), /* @__PURE__ */ React26.createElement(ControlAdornments, null));
 };
 
 // src/components/errors.ts
@@ -3746,7 +3769,7 @@ var OverrideControlInnerElementNotFoundError = createError({
 
 // src/components/instance-editing-panel/override-prop-control.tsx
 function OverridePropControl({ overridableProp, overrides }) {
-  return /* @__PURE__ */ React26.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
+  return /* @__PURE__ */ React27.createElement(SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(OverrideControl, { overridableProp, overrides }));
 }
 function OverrideControl({ overridableProp, overrides }) {
   const componentInstanceElement = useElement2();
@@ -3817,13 +3840,13 @@ function OverrideControl({ overridableProp, overrides }) {
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     OverridablePropProvider,
     {
       value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
       componentInstanceElement
     },
-    /* @__PURE__ */ React26.createElement(ElementProvider2, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React26.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React27.createElement(ElementProvider2, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React27.createElement(SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(
       PropProvider,
       {
         propType: propTypeSchema,
@@ -3833,7 +3856,7 @@ function OverrideControl({ overridableProp, overrides }) {
           return false;
         }
       },
-      /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React26.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React26.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React26.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React26.createElement(OriginalControl, { control, controlProps }))))
+      /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React27.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React27.createElement(Stack15, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React27.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React27.createElement(OriginalControl, { control, controlProps }))))
     )))
   );
 }
@@ -3897,7 +3920,7 @@ function getControlParams(controls, originPropFields, label) {
 }
 function OriginalControl({ control, controlProps }) {
   const { value } = control;
-  return /* @__PURE__ */ React26.createElement(BaseControl, { type: value.type, props: controlProps });
+  return /* @__PURE__ */ React27.createElement(BaseControl, { type: value.type, props: controlProps });
 }
 function getControlLayout(control) {
   return control.value.meta?.layout || controlsRegistry.getLayout(control.value.type);
@@ -3928,7 +3951,7 @@ function OverridePropsGroup({ group, props, overrides }) {
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
-  return /* @__PURE__ */ React27.createElement(Box13, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(Box14, { "aria-label": `${title} section` }, /* @__PURE__ */ React28.createElement(
     ListItemButton3,
     {
       id: labelId,
@@ -3938,7 +3961,7 @@ function OverridePropsGroup({ group, props, overrides }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React27.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(Stack16, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React28.createElement(
       ListItemText,
       {
         secondary: title,
@@ -3946,8 +3969,8 @@ function OverridePropsGroup({ group, props, overrides }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React27.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React27.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React27.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React28.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React28.createElement(Stack16, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React28.createElement(
     OverridePropControl,
     {
       key: overrideKey,
@@ -3969,23 +3992,23 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __26("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __27("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(Stack17, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(EllipsisWithTooltip2, { title: component.name, as: PanelHeaderTitle2 }), canEdit && /* @__PURE__ */ React28.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React28.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(PanelBody2, null, /* @__PURE__ */ React28.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(Stack17, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(EllipsisWithTooltip2, { title: component.name, as: PanelHeaderTitle2 }), canEdit && /* @__PURE__ */ React29.createElement(Tooltip4, { title: panelTitle }, /* @__PURE__ */ React29.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React29.createElement(PanelBody2, null, /* @__PURE__ */ React29.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(Stack17, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
     OverridePropsGroup,
     {
       group,
       props: overridableProps.props,
       overrides
     }
-  ), /* @__PURE__ */ React28.createElement(Divider4, null)))))));
+  ), /* @__PURE__ */ React29.createElement(Divider4, null)))))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import {
   ControlReplacementsProvider as ControlReplacementsProvider2,
   createControl,
@@ -4037,7 +4060,7 @@ function OverridablePropControl({
   });
   const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React29.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React30.createElement(
     PropProvider2,
     {
       ...propContext,
@@ -4048,17 +4071,17 @@ function OverridablePropControl({
       },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React29.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React29.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(Control, { ...props })))
+    /* @__PURE__ */ React30.createElement(PropKeyProvider2, { bind }, /* @__PURE__ */ React30.createElement(ControlReplacementsProvider2, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(Control, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { useElement as useElement4 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __28 } from "@wordpress/i18n";
+import { __ as __29 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
 import { __dispatch as dispatch14, __getState as getState17 } from "@elementor/store";
@@ -4125,13 +4148,13 @@ function setOverridableProp({
 }
 
 // src/components/overridable-props/indicator.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
-import { Box as Box14, styled as styled4 } from "@elementor/ui";
-import { __ as __27 } from "@wordpress/i18n";
+import { Box as Box15, styled as styled4 } from "@elementor/ui";
+import { __ as __28 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
-var IconContainer = styled4(Box14)`
+var IconContainer = styled4(Box15)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -4148,7 +4171,7 @@ var IconContainer = styled4(Box14)`
 		stroke-width: 2px;
 	}
 `;
-var Content = styled4(Box14)`
+var Content = styled4(Box15)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -4185,13 +4208,13 @@ var Content = styled4(Box14)`
 		}
 	}
 `;
-var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React30.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React30.createElement(
+var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React31.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __27("Overridable property", "elementor") : __27("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __28("Overridable property", "elementor") : __28("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React30.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(PlusIcon, { fontSize: SIZE2 })
+  isOverridable ? /* @__PURE__ */ React31.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -4215,7 +4238,7 @@ function OverridablePropIndicator() {
   if (!isPropAllowed(propType) || !componentId || !overridableProps) {
     return null;
   }
-  return /* @__PURE__ */ React31.createElement(Content2, { componentId, overridableProps });
+  return /* @__PURE__ */ React32.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
@@ -4260,7 +4283,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Tooltip5, { placement: "top", title: __28("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Tooltip5, { placement: "top", title: __29("Override Property", "elementor") }, /* @__PURE__ */ React32.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React32.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -4277,7 +4300,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -4645,11 +4668,11 @@ import { getAllDescendants as getAllDescendants3 } from "@elementor/editor-eleme
 import { notify as notify4 } from "@elementor/editor-notifications";
 import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
 import { __getState as getState19 } from "@elementor/store";
-import { __ as __29 } from "@wordpress/i18n";
+import { __ as __30 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __29("Can't add this component - components that contain each other can't be nested.", "elementor"),
+  message: __30("Can't add this component - components that contain each other can't be nested.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
@@ -5128,7 +5151,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __30("Components", "elementor"),
+    label: __31("Components", "elementor"),
     component: Components,
     position: 1
   });