@elementor/editor-components 3.35.0-482 → 3.35.0-484

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -44,7 +44,7 @@ var import_editor_panels5 = require("@elementor/editor-panels");
44
44
  var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
45
45
  var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
46
46
  var import_store80 = require("@elementor/store");
47
- var import_i18n31 = require("@wordpress/i18n");
47
+ var import_i18n30 = require("@wordpress/i18n");
48
48
 
49
49
  // src/component-instance-transformer.ts
50
50
  var import_editor_canvas = require("@elementor/editor-canvas");
@@ -2200,7 +2200,7 @@ function getComponentName() {
2200
2200
  }
2201
2201
 
2202
2202
  // src/components/components-tab/components.tsx
2203
- var React19 = __toESM(require("react"));
2203
+ var React18 = __toESM(require("react"));
2204
2204
  var import_editor_ui10 = require("@elementor/editor-ui");
2205
2205
 
2206
2206
  // src/hooks/use-components.ts
@@ -2271,12 +2271,10 @@ var ComponentSearch = () => {
2271
2271
  };
2272
2272
 
2273
2273
  // src/components/components-tab/components-list.tsx
2274
- var React17 = __toESM(require("react"));
2275
- var import_react9 = require("react");
2276
- var import_editor_mcp = require("@elementor/editor-mcp");
2274
+ var React16 = __toESM(require("react"));
2277
2275
  var import_icons10 = require("@elementor/icons");
2278
- var import_ui15 = require("@elementor/ui");
2279
- var import_i18n20 = require("@wordpress/i18n");
2276
+ var import_ui14 = require("@elementor/ui");
2277
+ var import_i18n19 = require("@wordpress/i18n");
2280
2278
 
2281
2279
  // src/hooks/use-components-permissions.ts
2282
2280
  var import_editor_current_user2 = require("@elementor/editor-current-user");
@@ -2324,60 +2322,25 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
2324
2322
  });
2325
2323
  }
2326
2324
 
2327
- // src/components/components-tab/angie-promotion-modal.tsx
2328
- var React13 = __toESM(require("react"));
2329
- var import_ui12 = require("@elementor/ui");
2330
- var import_i18n15 = require("@wordpress/i18n");
2331
- var ANGIE_INSTALL_URL = "/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie";
2332
- var PLACEHOLDER_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/components-angie-promo.svg";
2333
- var AngiePromotionModal = ({ children, open, onClose }) => {
2334
- return /* @__PURE__ */ React13.createElement(import_ui12.Infotip, { placement: "right-end", arrow: true, content: /* @__PURE__ */ React13.createElement(AngiePromotionCard, { onClose }), open }, children);
2335
- };
2336
- function AngiePromotionCard({ onClose }) {
2337
- const handleCtaClick = () => {
2338
- window.open(ANGIE_INSTALL_URL, "_blank");
2339
- onClose();
2340
- };
2341
- return /* @__PURE__ */ React13.createElement(import_ui12.ClickAwayListener, { disableReactTree: true, mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onClose }, /* @__PURE__ */ React13.createElement(import_ui12.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
2342
- import_ui12.CardHeader,
2343
- {
2344
- title: (0, import_i18n15.__)("Add new component with AI", "elementor"),
2345
- titleTypographyProps: { variant: "subtitle2" },
2346
- action: /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
2347
- }
2348
- ), /* @__PURE__ */ React13.createElement(
2349
- import_ui12.CardMedia,
2350
- {
2351
- component: "img",
2352
- image: PLACEHOLDER_IMAGE_URL,
2353
- alt: "",
2354
- sx: { width: "100%", aspectRatio: "16 / 9" }
2355
- }
2356
- ), /* @__PURE__ */ React13.createElement(import_ui12.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n15.__)(
2357
- "Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
2358
- "elementor"
2359
- ))), /* @__PURE__ */ React13.createElement(import_ui12.CardActions, { sx: { justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(import_ui12.Button, { size: "medium", variant: "contained", color: "accent", onClick: handleCtaClick }, (0, import_i18n15.__)("Get Angie", "elementor")))));
2360
- }
2361
-
2362
2325
  // src/components/components-tab/components-item.tsx
2363
- var React15 = __toESM(require("react"));
2326
+ var React14 = __toESM(require("react"));
2364
2327
  var import_react8 = require("react");
2365
2328
  var import_editor_canvas5 = require("@elementor/editor-canvas");
2366
2329
  var import_editor_elements8 = require("@elementor/editor-elements");
2367
2330
  var import_editor_ui8 = require("@elementor/editor-ui");
2368
2331
  var import_icons9 = require("@elementor/icons");
2369
- var import_ui13 = require("@elementor/ui");
2370
- var import_i18n19 = require("@wordpress/i18n");
2332
+ var import_ui12 = require("@elementor/ui");
2333
+ var import_i18n18 = require("@wordpress/i18n");
2371
2334
 
2372
2335
  // src/store/actions/archive-component.ts
2373
2336
  var import_editor_documents8 = require("@elementor/editor-documents");
2374
2337
  var import_editor_notifications = require("@elementor/editor-notifications");
2375
2338
  var import_store35 = require("@elementor/store");
2376
- var import_i18n16 = require("@wordpress/i18n");
2339
+ var import_i18n15 = require("@wordpress/i18n");
2377
2340
  var successNotification = (componentId, componentName) => ({
2378
2341
  type: "success",
2379
2342
  /* translators: %s: component name */
2380
- message: (0, import_i18n16.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
2343
+ message: (0, import_i18n15.__)("Successfully deleted component %s", "elementor").replace("%s", componentName),
2381
2344
  id: `success-archived-components-notification-${componentId}`
2382
2345
  });
2383
2346
  var archiveComponent = (componentId, componentName) => {
@@ -2510,14 +2473,14 @@ var import_store41 = require("@elementor/store");
2510
2473
 
2511
2474
  // src/components/create-component-form/utils/component-form-schema.ts
2512
2475
  var import_schema5 = require("@elementor/schema");
2513
- var import_i18n17 = require("@wordpress/i18n");
2476
+ var import_i18n16 = require("@wordpress/i18n");
2514
2477
  var MIN_NAME_LENGTH = 2;
2515
2478
  var MAX_NAME_LENGTH = 50;
2516
- var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n17.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
2479
+ var baseComponentSchema = import_schema5.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n16.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
2517
2480
  var createBaseComponentSchema = (existingNames) => {
2518
2481
  return import_schema5.z.object({
2519
2482
  componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
2520
- message: (0, import_i18n17.__)("Component name already exists", "elementor")
2483
+ message: (0, import_i18n16.__)("Component name already exists", "elementor")
2521
2484
  })
2522
2485
  });
2523
2486
  };
@@ -2525,9 +2488,9 @@ var createSubmitComponentSchema = (existingNames) => {
2525
2488
  const baseSchema = createBaseComponentSchema(existingNames);
2526
2489
  return baseSchema.extend({
2527
2490
  componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
2528
- message: (0, import_i18n17.__)("Component name is required.", "elementor")
2491
+ message: (0, import_i18n16.__)("Component name is required.", "elementor")
2529
2492
  }).refine((value) => value.length >= MIN_NAME_LENGTH, {
2530
- message: (0, import_i18n17.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
2493
+ message: (0, import_i18n16.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
2531
2494
  })
2532
2495
  });
2533
2496
  };
@@ -2618,14 +2581,14 @@ var createComponentModel2 = (component) => {
2618
2581
  };
2619
2582
 
2620
2583
  // src/components/components-tab/delete-confirmation-dialog.tsx
2621
- var React14 = __toESM(require("react"));
2584
+ var React13 = __toESM(require("react"));
2622
2585
  var import_editor_ui7 = require("@elementor/editor-ui");
2623
- var import_i18n18 = require("@wordpress/i18n");
2586
+ var import_i18n17 = require("@wordpress/i18n");
2624
2587
  function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
2625
- return /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n18.__)("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n18.__)(
2588
+ return /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n17.__)("Delete this component?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n17.__)(
2626
2589
  "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
2627
2590
  "elementor"
2628
- ))), /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose, onConfirm }));
2591
+ ))), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose, onConfirm }));
2629
2592
  }
2630
2593
 
2631
2594
  // src/components/components-tab/components-item.tsx
@@ -2646,7 +2609,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2646
2609
  validation: validateComponentTitle
2647
2610
  });
2648
2611
  const componentModel = createComponentModel2(component);
2649
- const popupState = (0, import_ui13.usePopupState)({
2612
+ const popupState = (0, import_ui12.usePopupState)({
2650
2613
  variant: "popover",
2651
2614
  disableAutoFocus: true
2652
2615
  });
@@ -2671,7 +2634,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2671
2634
  const handleDeleteDialogClose = () => {
2672
2635
  setIsDeleteDialogOpen(false);
2673
2636
  };
2674
- return /* @__PURE__ */ React15.createElement(import_ui13.Stack, null, /* @__PURE__ */ React15.createElement(
2637
+ return /* @__PURE__ */ React14.createElement(import_ui12.Stack, null, /* @__PURE__ */ React14.createElement(
2675
2638
  import_editor_ui8.WarningInfotip,
2676
2639
  {
2677
2640
  open: Boolean(error),
@@ -2680,8 +2643,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2680
2643
  width: itemRef.current?.getBoundingClientRect().width,
2681
2644
  offset: [0, -15]
2682
2645
  },
2683
- /* @__PURE__ */ React15.createElement(
2684
- import_ui13.ListItemButton,
2646
+ /* @__PURE__ */ React14.createElement(
2647
+ import_ui12.ListItemButton,
2685
2648
  {
2686
2649
  draggable: true,
2687
2650
  onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
@@ -2699,8 +2662,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2699
2662
  gap: 1
2700
2663
  }
2701
2664
  },
2702
- /* @__PURE__ */ React15.createElement(
2703
- import_ui13.Box,
2665
+ /* @__PURE__ */ React14.createElement(
2666
+ import_ui12.Box,
2704
2667
  {
2705
2668
  display: "flex",
2706
2669
  alignItems: "center",
@@ -2709,31 +2672,31 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2709
2672
  flexGrow: 1,
2710
2673
  onClick: handleClick
2711
2674
  },
2712
- /* @__PURE__ */ React15.createElement(import_ui13.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React15.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
2713
- /* @__PURE__ */ React15.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React15.createElement(import_ui13.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React15.createElement(
2675
+ /* @__PURE__ */ React14.createElement(import_ui12.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React14.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
2676
+ /* @__PURE__ */ React14.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React14.createElement(import_ui12.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React14.createElement(
2714
2677
  import_editor_ui8.EditableField,
2715
2678
  {
2716
2679
  ref: editableRef,
2717
- as: import_ui13.Typography,
2680
+ as: import_ui12.Typography,
2718
2681
  variant: "caption",
2719
2682
  ...getEditableProps()
2720
2683
  }
2721
- ) : /* @__PURE__ */ React15.createElement(
2684
+ ) : /* @__PURE__ */ React14.createElement(
2722
2685
  import_editor_ui8.EllipsisWithTooltip,
2723
2686
  {
2724
2687
  title: component.name,
2725
- as: import_ui13.Typography,
2688
+ as: import_ui12.Typography,
2726
2689
  variant: "caption",
2727
2690
  color: "text.primary"
2728
2691
  }
2729
2692
  )))
2730
2693
  ),
2731
- shouldShowActions && /* @__PURE__ */ React15.createElement(import_ui13.IconButton, { size: "tiny", ...(0, import_ui13.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
2694
+ shouldShowActions && /* @__PURE__ */ React14.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React14.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
2732
2695
  )
2733
- ), shouldShowActions && /* @__PURE__ */ React15.createElement(
2734
- import_ui13.Menu,
2696
+ ), shouldShowActions && /* @__PURE__ */ React14.createElement(
2697
+ import_ui12.Menu,
2735
2698
  {
2736
- ...(0, import_ui13.bindMenu)(popupState),
2699
+ ...(0, import_ui12.bindMenu)(popupState),
2737
2700
  anchorOrigin: {
2738
2701
  vertical: "bottom",
2739
2702
  horizontal: "right"
@@ -2743,7 +2706,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2743
2706
  horizontal: "right"
2744
2707
  }
2745
2708
  },
2746
- canRename && /* @__PURE__ */ React15.createElement(
2709
+ canRename && /* @__PURE__ */ React14.createElement(
2747
2710
  import_editor_ui8.MenuListItem,
2748
2711
  {
2749
2712
  sx: { minWidth: "160px" },
@@ -2753,18 +2716,18 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2753
2716
  openEditMode();
2754
2717
  }
2755
2718
  },
2756
- (0, import_i18n19.__)("Rename", "elementor")
2719
+ (0, import_i18n18.__)("Rename", "elementor")
2757
2720
  ),
2758
- canDelete && /* @__PURE__ */ React15.createElement(
2721
+ canDelete && /* @__PURE__ */ React14.createElement(
2759
2722
  import_editor_ui8.MenuListItem,
2760
2723
  {
2761
2724
  sx: { minWidth: "160px" },
2762
2725
  primaryTypographyProps: { variant: "caption", color: "error.light" },
2763
2726
  onClick: handleDeleteClick
2764
2727
  },
2765
- (0, import_i18n19.__)("Delete", "elementor")
2728
+ (0, import_i18n18.__)("Delete", "elementor")
2766
2729
  )
2767
- ), /* @__PURE__ */ React15.createElement(
2730
+ ), /* @__PURE__ */ React14.createElement(
2768
2731
  DeleteConfirmationDialog,
2769
2732
  {
2770
2733
  open: isDeleteDialogOpen,
@@ -2792,7 +2755,7 @@ var validateComponentTitle = (newTitle) => {
2792
2755
  }
2793
2756
  return result.errorMessage;
2794
2757
  };
2795
- var Indicator = (0, import_ui13.styled)(import_ui13.Box, {
2758
+ var Indicator = (0, import_ui12.styled)(import_ui12.Box, {
2796
2759
  shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
2797
2760
  })(({ theme, isActive, isError }) => ({
2798
2761
  display: "flex",
@@ -2815,13 +2778,13 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
2815
2778
  };
2816
2779
 
2817
2780
  // src/components/components-tab/loading-components.tsx
2818
- var React16 = __toESM(require("react"));
2819
- var import_ui14 = require("@elementor/ui");
2781
+ var React15 = __toESM(require("react"));
2782
+ var import_ui13 = require("@elementor/ui");
2820
2783
  var ROWS_COUNT = 6;
2821
2784
  var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
2822
2785
  var LoadingComponents = () => {
2823
- return /* @__PURE__ */ React16.createElement(
2824
- import_ui14.Stack,
2786
+ return /* @__PURE__ */ React15.createElement(
2787
+ import_ui13.Stack,
2825
2788
  {
2826
2789
  "aria-label": "Loading components",
2827
2790
  gap: 1,
@@ -2842,14 +2805,14 @@ var LoadingComponents = () => {
2842
2805
  }
2843
2806
  }
2844
2807
  },
2845
- rows.map((row) => /* @__PURE__ */ React16.createElement(
2846
- import_ui14.ListItemButton,
2808
+ rows.map((row) => /* @__PURE__ */ React15.createElement(
2809
+ import_ui13.ListItemButton,
2847
2810
  {
2848
2811
  key: row,
2849
2812
  sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
2850
2813
  shape: "rounded"
2851
2814
  },
2852
- /* @__PURE__ */ React16.createElement(import_ui14.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(import_ui14.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React16.createElement(import_ui14.Skeleton, { variant: "text", width: "100%", height: "36px" }))
2815
+ /* @__PURE__ */ React15.createElement(import_ui13.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React15.createElement(import_ui13.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React15.createElement(import_ui13.Skeleton, { variant: "text", width: "100%", height: "36px" }))
2853
2816
  ))
2854
2817
  );
2855
2818
  };
@@ -2863,16 +2826,16 @@ var SUBTITLE_OVERRIDE_SX = {
2863
2826
  function ComponentsList() {
2864
2827
  const { components, isLoading, searchValue } = useFilteredComponents();
2865
2828
  if (isLoading) {
2866
- return /* @__PURE__ */ React17.createElement(LoadingComponents, null);
2829
+ return /* @__PURE__ */ React16.createElement(LoadingComponents, null);
2867
2830
  }
2868
2831
  const isEmpty = !components || components.length === 0;
2869
2832
  if (isEmpty) {
2870
2833
  if (searchValue.length > 0) {
2871
- return /* @__PURE__ */ React17.createElement(EmptySearchResult, null);
2834
+ return /* @__PURE__ */ React16.createElement(EmptySearchResult, null);
2872
2835
  }
2873
- return /* @__PURE__ */ React17.createElement(EmptyState, null);
2836
+ return /* @__PURE__ */ React16.createElement(EmptyState, null);
2874
2837
  }
2875
- return /* @__PURE__ */ React17.createElement(import_ui15.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React17.createElement(
2838
+ return /* @__PURE__ */ React16.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React16.createElement(
2876
2839
  ComponentItem,
2877
2840
  {
2878
2841
  key: component.uid,
@@ -2884,24 +2847,9 @@ function ComponentsList() {
2884
2847
  )));
2885
2848
  }
2886
2849
  var EmptyState = () => {
2887
- const [isAngieModalOpen, setIsAngieModalOpen] = (0, import_react9.useState)(false);
2888
2850
  const { canCreate } = useComponentsPermissions();
2889
- const handleCreateWithAI = () => {
2890
- const sdk = (0, import_editor_mcp.getAngieSdk)();
2891
- if (sdk.isAngieReady()) {
2892
- sdk.triggerAngie({
2893
- prompt: (0, import_i18n20.__)(
2894
- "Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
2895
- "elementor"
2896
- ),
2897
- context: { source: "components-panel-empty-state" }
2898
- });
2899
- } else {
2900
- setIsAngieModalOpen(true);
2901
- }
2902
- };
2903
- return /* @__PURE__ */ React17.createElement(
2904
- import_ui15.Stack,
2851
+ return /* @__PURE__ */ React16.createElement(
2852
+ import_ui14.Stack,
2905
2853
  {
2906
2854
  alignItems: "center",
2907
2855
  justifyContent: "start",
@@ -2910,11 +2858,11 @@ var EmptyState = () => {
2910
2858
  gap: 2,
2911
2859
  overflow: "hidden"
2912
2860
  },
2913
- /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("No components yet", "elementor")), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n20.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React17.createElement("br", null), canCreate ? (0, import_i18n20.__)("Create once, use everywhere.", "elementor") : (0, import_i18n20.__)(
2861
+ /* @__PURE__ */ React16.createElement(import_ui14.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n19.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), canCreate ? (0, import_i18n19.__)("Create once, use everywhere.", "elementor") : (0, import_i18n19.__)(
2914
2862
  "With your current role, you cannot create components. Contact an administrator to create one.",
2915
2863
  "elementor"
2916
- )), /* @__PURE__ */ React17.createElement(
2917
- import_ui15.Link,
2864
+ )), /* @__PURE__ */ React16.createElement(
2865
+ import_ui14.Link,
2918
2866
  {
2919
2867
  href: LEARN_MORE_URL,
2920
2868
  target: "_blank",
@@ -2922,37 +2870,27 @@ var EmptyState = () => {
2922
2870
  variant: "caption",
2923
2871
  color: "info.main"
2924
2872
  },
2925
- (0, import_i18n20.__)("Learn more about components", "elementor")
2873
+ (0, import_i18n19.__)("Learn more about components", "elementor")
2926
2874
  )),
2927
- canCreate && /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_ui15.Divider, { sx: { width: "100%" } }), /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React17.createElement(
2928
- import_ui15.Typography,
2875
+ canCreate && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(import_ui14.Divider, { sx: { width: "100%" } }), /* @__PURE__ */ React16.createElement(import_ui14.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(
2876
+ import_ui14.Typography,
2929
2877
  {
2930
2878
  align: "center",
2931
2879
  variant: "subtitle2",
2932
2880
  color: "text.secondary",
2933
2881
  sx: SUBTITLE_OVERRIDE_SX
2934
2882
  },
2935
- (0, import_i18n20.__)("Create your first one:", "elementor")
2936
- ), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n20.__)(
2883
+ (0, import_i18n19.__)("Create your first one:", "elementor")
2884
+ ), /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n19.__)(
2937
2885
  'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
2938
2886
  "elementor"
2939
- )), /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n20.__)("Or", "elementor")), /* @__PURE__ */ React17.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React17.createElement(
2940
- import_ui15.Button,
2941
- {
2942
- color: "secondary",
2943
- variant: "outlined",
2944
- size: "small",
2945
- onClick: handleCreateWithAI,
2946
- endIcon: /* @__PURE__ */ React17.createElement(import_icons10.AIIcon, null)
2947
- },
2948
- (0, import_i18n20.__)("Create component with AI", "elementor")
2949
2887
  ))))
2950
2888
  );
2951
2889
  };
2952
2890
  var EmptySearchResult = () => {
2953
2891
  const { searchValue, clearSearch } = useSearch();
2954
- return /* @__PURE__ */ React17.createElement(
2955
- import_ui15.Stack,
2892
+ return /* @__PURE__ */ React16.createElement(
2893
+ import_ui14.Stack,
2956
2894
  {
2957
2895
  color: "text.secondary",
2958
2896
  pt: 5,
@@ -2961,17 +2899,17 @@ var EmptySearchResult = () => {
2961
2899
  overflow: "hidden",
2962
2900
  justifySelf: "center"
2963
2901
  },
2964
- /* @__PURE__ */ React17.createElement(import_icons10.ComponentsIcon, null),
2965
- /* @__PURE__ */ React17.createElement(
2966
- import_ui15.Box,
2902
+ /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, null),
2903
+ /* @__PURE__ */ React16.createElement(
2904
+ import_ui14.Box,
2967
2905
  {
2968
2906
  sx: {
2969
2907
  width: "100%"
2970
2908
  }
2971
2909
  },
2972
- /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n20.__)("Sorry, nothing matched", "elementor")),
2973
- searchValue && /* @__PURE__ */ React17.createElement(
2974
- import_ui15.Typography,
2910
+ /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n19.__)("Sorry, nothing matched", "elementor")),
2911
+ searchValue && /* @__PURE__ */ React16.createElement(
2912
+ import_ui14.Typography,
2975
2913
  {
2976
2914
  variant: "subtitle2",
2977
2915
  color: "inherit",
@@ -2982,8 +2920,8 @@ var EmptySearchResult = () => {
2982
2920
  justifyContent: "center"
2983
2921
  }
2984
2922
  },
2985
- /* @__PURE__ */ React17.createElement("span", null, "\u201C"),
2986
- /* @__PURE__ */ React17.createElement(
2923
+ /* @__PURE__ */ React16.createElement("span", null, "\u201C"),
2924
+ /* @__PURE__ */ React16.createElement(
2987
2925
  "span",
2988
2926
  {
2989
2927
  style: {
@@ -2994,11 +2932,11 @@ var EmptySearchResult = () => {
2994
2932
  },
2995
2933
  searchValue
2996
2934
  ),
2997
- /* @__PURE__ */ React17.createElement("span", null, "\u201D.")
2935
+ /* @__PURE__ */ React16.createElement("span", null, "\u201D.")
2998
2936
  )
2999
2937
  ),
3000
- /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n20.__)("Try something else.", "elementor")),
3001
- /* @__PURE__ */ React17.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React17.createElement(import_ui15.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n20.__)("Clear & try again", "elementor")))
2938
+ /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n19.__)("Try something else.", "elementor")),
2939
+ /* @__PURE__ */ React16.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui14.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n19.__)("Clear & try again", "elementor")))
3002
2940
  );
3003
2941
  };
3004
2942
  var useFilteredComponents = () => {
@@ -3014,12 +2952,12 @@ var useFilteredComponents = () => {
3014
2952
  };
3015
2953
 
3016
2954
  // src/components/components-tab/components-pro-notification.tsx
3017
- var React18 = __toESM(require("react"));
2955
+ var React17 = __toESM(require("react"));
3018
2956
  var import_editor_ui9 = require("@elementor/editor-ui");
3019
- var import_ui16 = require("@elementor/ui");
3020
- var import_i18n21 = require("@wordpress/i18n");
2957
+ var import_ui15 = require("@elementor/ui");
2958
+ var import_i18n20 = require("@wordpress/i18n");
3021
2959
  function ComponentsProNotification() {
3022
- return /* @__PURE__ */ React18.createElement(import_ui16.Box, { sx: { px: 2 } }, /* @__PURE__ */ React18.createElement(import_editor_ui9.InfoAlert, null, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n21.__)("Try Components for free:", "elementor")), " ", (0, import_i18n21.__)(
2960
+ return /* @__PURE__ */ React17.createElement(import_ui15.Box, { sx: { px: 2 } }, /* @__PURE__ */ React17.createElement(import_editor_ui9.InfoAlert, null, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n20.__)("Try Components for free:", "elementor")), " ", (0, import_i18n20.__)(
3023
2961
  "Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
3024
2962
  "elementor"
3025
2963
  ))));
@@ -3029,10 +2967,10 @@ function ComponentsProNotification() {
3029
2967
  var ComponentsContent = () => {
3030
2968
  const { components, isLoading } = useComponents();
3031
2969
  const hasComponents = !isLoading && components.length > 0;
3032
- 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));
2970
+ return /* @__PURE__ */ React18.createElement(React18.Fragment, null, hasComponents && /* @__PURE__ */ React18.createElement(ComponentSearch, null), hasComponents && !isProUser() && /* @__PURE__ */ React18.createElement(ComponentsProNotification, null), /* @__PURE__ */ React18.createElement(ComponentsList, null));
3033
2971
  };
3034
2972
  var Components = () => {
3035
- return /* @__PURE__ */ React19.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
2973
+ return /* @__PURE__ */ React18.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React18.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React18.createElement(ComponentsContent, null)));
3036
2974
  };
3037
2975
 
3038
2976
  // src/components/consts.ts
@@ -3040,22 +2978,22 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
3040
2978
  var OVERRIDABLE_PROP_REPLACEMENT_ID = "overridable-prop";
3041
2979
 
3042
2980
  // src/components/create-component-form/create-component-form.tsx
3043
- var React20 = __toESM(require("react"));
3044
- var import_react11 = require("react");
2981
+ var React19 = __toESM(require("react"));
2982
+ var import_react10 = require("react");
3045
2983
  var import_editor_elements10 = require("@elementor/editor-elements");
3046
2984
  var import_editor_notifications3 = require("@elementor/editor-notifications");
3047
2985
  var import_editor_ui11 = require("@elementor/editor-ui");
3048
2986
  var import_icons11 = require("@elementor/icons");
3049
2987
  var import_store47 = require("@elementor/store");
3050
- var import_ui17 = require("@elementor/ui");
3051
- var import_i18n23 = require("@wordpress/i18n");
2988
+ var import_ui16 = require("@elementor/ui");
2989
+ var import_i18n22 = require("@wordpress/i18n");
3052
2990
 
3053
2991
  // src/prevent-non-atomic-nesting.ts
3054
2992
  var import_editor_canvas6 = require("@elementor/editor-canvas");
3055
2993
  var import_editor_elements9 = require("@elementor/editor-elements");
3056
2994
  var import_editor_notifications2 = require("@elementor/editor-notifications");
3057
2995
  var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
3058
- var import_i18n22 = require("@wordpress/i18n");
2996
+ var import_i18n21 = require("@wordpress/i18n");
3059
2997
 
3060
2998
  // src/utils/is-editing-component.ts
3061
2999
  var import_store43 = require("@elementor/store");
@@ -3070,7 +3008,7 @@ function isEditingComponent() {
3070
3008
  // src/prevent-non-atomic-nesting.ts
3071
3009
  var NON_ATOMIC_ELEMENT_ALERT = {
3072
3010
  type: "default",
3073
- message: (0, import_i18n22.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
3011
+ message: (0, import_i18n21.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
3074
3012
  id: "non-atomic-element-blocked"
3075
3013
  };
3076
3014
  function initNonAtomicNestingPrevention() {
@@ -3204,11 +3142,11 @@ async function createUnpublishedComponent({
3204
3142
  }
3205
3143
 
3206
3144
  // src/components/create-component-form/hooks/use-form.ts
3207
- var import_react10 = require("react");
3145
+ var import_react9 = require("react");
3208
3146
  var useForm = (initialValues) => {
3209
- const [values, setValues] = (0, import_react10.useState)(initialValues);
3210
- const [errors, setErrors] = (0, import_react10.useState)({});
3211
- const isValid = (0, import_react10.useMemo)(() => {
3147
+ const [values, setValues] = (0, import_react9.useState)(initialValues);
3148
+ const [errors, setErrors] = (0, import_react9.useState)({});
3149
+ const isValid = (0, import_react9.useMemo)(() => {
3212
3150
  return !Object.values(errors).some((error) => error);
3213
3151
  }, [errors]);
3214
3152
  const handleChange = (e, field, validationSchema) => {
@@ -3283,17 +3221,17 @@ function countNestedElements(container) {
3283
3221
 
3284
3222
  // src/components/create-component-form/create-component-form.tsx
3285
3223
  function CreateComponentForm() {
3286
- const [element, setElement] = (0, import_react11.useState)(null);
3287
- const [anchorPosition, setAnchorPosition] = (0, import_react11.useState)();
3288
- const eventData = (0, import_react11.useRef)(null);
3289
- (0, import_react11.useEffect)(() => {
3224
+ const [element, setElement] = (0, import_react10.useState)(null);
3225
+ const [anchorPosition, setAnchorPosition] = (0, import_react10.useState)();
3226
+ const eventData = (0, import_react10.useRef)(null);
3227
+ (0, import_react10.useEffect)(() => {
3290
3228
  const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
3291
3229
  const openPopup = (event) => {
3292
3230
  const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
3293
3231
  if (nonAtomicElements.length > 0) {
3294
3232
  (0, import_editor_notifications3.notify)({
3295
3233
  type: "default",
3296
- message: (0, import_i18n23.__)(
3234
+ message: (0, import_i18n22.__)(
3297
3235
  "Components require atomic elements only. Remove widgets to create this component.",
3298
3236
  "elementor"
3299
3237
  ),
@@ -3334,12 +3272,12 @@ function CreateComponentForm() {
3334
3272
  }
3335
3273
  (0, import_editor_notifications3.notify)({
3336
3274
  type: "success",
3337
- message: (0, import_i18n23.__)("Component created successfully.", "elementor"),
3275
+ message: (0, import_i18n22.__)("Component created successfully.", "elementor"),
3338
3276
  id: `component-saved-successfully-${uid}`
3339
3277
  });
3340
3278
  resetAndClosePopup();
3341
3279
  } catch {
3342
- const errorMessage = (0, import_i18n23.__)("Failed to create component. Please try again.", "elementor");
3280
+ const errorMessage = (0, import_i18n22.__)("Failed to create component. Please try again.", "elementor");
3343
3281
  (0, import_editor_notifications3.notify)({
3344
3282
  type: "error",
3345
3283
  message: errorMessage,
@@ -3359,15 +3297,15 @@ function CreateComponentForm() {
3359
3297
  ...eventData.current
3360
3298
  });
3361
3299
  };
3362
- return /* @__PURE__ */ React20.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React20.createElement(
3363
- import_ui17.Popover,
3300
+ return /* @__PURE__ */ React19.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React19.createElement(
3301
+ import_ui16.Popover,
3364
3302
  {
3365
3303
  open: element !== null,
3366
3304
  onClose: cancelSave,
3367
3305
  anchorReference: "anchorPosition",
3368
3306
  anchorPosition
3369
3307
  },
3370
- element !== null && /* @__PURE__ */ React20.createElement(
3308
+ element !== null && /* @__PURE__ */ React19.createElement(
3371
3309
  Form2,
3372
3310
  {
3373
3311
  initialValues: { componentName: element.elementLabel },
@@ -3385,14 +3323,14 @@ var Form2 = ({
3385
3323
  }) => {
3386
3324
  const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
3387
3325
  const { components } = useComponents();
3388
- const existingComponentNames = (0, import_react11.useMemo)(() => {
3326
+ const existingComponentNames = (0, import_react10.useMemo)(() => {
3389
3327
  return components?.map((component) => component.name) ?? [];
3390
3328
  }, [components]);
3391
- const changeValidationSchema = (0, import_react11.useMemo)(
3329
+ const changeValidationSchema = (0, import_react10.useMemo)(
3392
3330
  () => createBaseComponentSchema(existingComponentNames),
3393
3331
  [existingComponentNames]
3394
3332
  );
3395
- const submitValidationSchema = (0, import_react11.useMemo)(
3333
+ const submitValidationSchema = (0, import_react10.useMemo)(
3396
3334
  () => createSubmitComponentSchema(existingComponentNames),
3397
3335
  [existingComponentNames]
3398
3336
  );
@@ -3403,14 +3341,14 @@ var Form2 = ({
3403
3341
  }
3404
3342
  };
3405
3343
  const texts = {
3406
- heading: (0, import_i18n23.__)("Create component", "elementor"),
3407
- name: (0, import_i18n23.__)("Name", "elementor"),
3408
- cancel: (0, import_i18n23.__)("Cancel", "elementor"),
3409
- create: (0, import_i18n23.__)("Create", "elementor")
3344
+ heading: (0, import_i18n22.__)("Create component", "elementor"),
3345
+ name: (0, import_i18n22.__)("Name", "elementor"),
3346
+ cancel: (0, import_i18n22.__)("Cancel", "elementor"),
3347
+ create: (0, import_i18n22.__)("Create", "elementor")
3410
3348
  };
3411
3349
  const nameInputId = "component-name";
3412
- return /* @__PURE__ */ React20.createElement(import_editor_ui11.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(import_ui17.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
3413
- import_ui17.Stack,
3350
+ return /* @__PURE__ */ React19.createElement(import_editor_ui11.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
3351
+ import_ui16.Stack,
3414
3352
  {
3415
3353
  direction: "row",
3416
3354
  alignItems: "center",
@@ -3418,10 +3356,10 @@ var Form2 = ({
3418
3356
  px: 1.5,
3419
3357
  sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
3420
3358
  },
3421
- /* @__PURE__ */ React20.createElement(import_icons11.ComponentsIcon, { fontSize: FONT_SIZE }),
3422
- /* @__PURE__ */ React20.createElement(import_ui17.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
3423
- ), /* @__PURE__ */ React20.createElement(import_ui17.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(import_ui17.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React20.createElement(import_ui17.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React20.createElement(
3424
- import_ui17.TextField,
3359
+ /* @__PURE__ */ React19.createElement(import_icons11.ComponentsIcon, { fontSize: FONT_SIZE }),
3360
+ /* @__PURE__ */ React19.createElement(import_ui16.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
3361
+ ), /* @__PURE__ */ React19.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui16.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React19.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
3362
+ import_ui16.TextField,
3425
3363
  {
3426
3364
  id: nameInputId,
3427
3365
  size: FONT_SIZE,
@@ -3432,12 +3370,12 @@ var Form2 = ({
3432
3370
  error: Boolean(errors.componentName),
3433
3371
  helperText: errors.componentName
3434
3372
  }
3435
- ))), /* @__PURE__ */ React20.createElement(import_ui17.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React20.createElement(import_ui17.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React20.createElement(import_ui17.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
3373
+ ))), /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui16.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React19.createElement(import_ui16.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
3436
3374
  };
3437
3375
 
3438
3376
  // src/components/edit-component/edit-component.tsx
3439
- var React22 = __toESM(require("react"));
3440
- var import_react14 = require("react");
3377
+ var React21 = __toESM(require("react"));
3378
+ var import_react13 = require("react");
3441
3379
  var import_editor_documents11 = require("@elementor/editor-documents");
3442
3380
  var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
3443
3381
  var import_store51 = require("@elementor/store");
@@ -3459,10 +3397,10 @@ function updateCurrentComponent({
3459
3397
  }
3460
3398
 
3461
3399
  // src/components/edit-component/component-modal.tsx
3462
- var React21 = __toESM(require("react"));
3463
- var import_react13 = require("react");
3400
+ var React20 = __toESM(require("react"));
3401
+ var import_react12 = require("react");
3464
3402
  var import_react_dom = require("react-dom");
3465
- var import_i18n24 = require("@wordpress/i18n");
3403
+ var import_i18n23 = require("@wordpress/i18n");
3466
3404
 
3467
3405
  // src/hooks/use-canvas-document.ts
3468
3406
  var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
@@ -3471,10 +3409,10 @@ function useCanvasDocument() {
3471
3409
  }
3472
3410
 
3473
3411
  // src/hooks/use-element-rect.ts
3474
- var import_react12 = require("react");
3412
+ var import_react11 = require("react");
3475
3413
  var import_utils5 = require("@elementor/utils");
3476
3414
  function useElementRect(element) {
3477
- const [rect, setRect] = (0, import_react12.useState)(new DOMRect(0, 0, 0, 0));
3415
+ const [rect, setRect] = (0, import_react11.useState)(new DOMRect(0, 0, 0, 0));
3478
3416
  const onChange = (0, import_utils5.throttle)(
3479
3417
  () => {
3480
3418
  setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -3485,7 +3423,7 @@ function useElementRect(element) {
3485
3423
  useScrollListener({ element, onChange });
3486
3424
  useResizeListener({ element, onChange });
3487
3425
  useMutationsListener({ element, onChange });
3488
- (0, import_react12.useEffect)(
3426
+ (0, import_react11.useEffect)(
3489
3427
  () => () => {
3490
3428
  onChange.cancel();
3491
3429
  },
@@ -3494,7 +3432,7 @@ function useElementRect(element) {
3494
3432
  return rect;
3495
3433
  }
3496
3434
  function useScrollListener({ element, onChange }) {
3497
- (0, import_react12.useEffect)(() => {
3435
+ (0, import_react11.useEffect)(() => {
3498
3436
  if (!element) {
3499
3437
  return;
3500
3438
  }
@@ -3506,7 +3444,7 @@ function useScrollListener({ element, onChange }) {
3506
3444
  }, [element, onChange]);
3507
3445
  }
3508
3446
  function useResizeListener({ element, onChange }) {
3509
- (0, import_react12.useEffect)(() => {
3447
+ (0, import_react11.useEffect)(() => {
3510
3448
  if (!element) {
3511
3449
  return;
3512
3450
  }
@@ -3521,7 +3459,7 @@ function useResizeListener({ element, onChange }) {
3521
3459
  }, [element, onChange]);
3522
3460
  }
3523
3461
  function useMutationsListener({ element, onChange }) {
3524
- (0, import_react12.useEffect)(() => {
3462
+ (0, import_react11.useEffect)(() => {
3525
3463
  if (!element) {
3526
3464
  return;
3527
3465
  }
@@ -3536,7 +3474,7 @@ function useMutationsListener({ element, onChange }) {
3536
3474
  // src/components/edit-component/component-modal.tsx
3537
3475
  function ComponentModal({ topLevelElementDom, onClose }) {
3538
3476
  const canvasDocument = useCanvasDocument();
3539
- (0, import_react13.useEffect)(() => {
3477
+ (0, import_react12.useEffect)(() => {
3540
3478
  const handleEsc = (event) => {
3541
3479
  if (event.key === "Escape") {
3542
3480
  onClose();
@@ -3551,7 +3489,7 @@ function ComponentModal({ topLevelElementDom, onClose }) {
3551
3489
  return null;
3552
3490
  }
3553
3491
  return (0, import_react_dom.createPortal)(
3554
- /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(BlockEditPage, null), /* @__PURE__ */ React21.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
3492
+ /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(BlockEditPage, null), /* @__PURE__ */ React20.createElement(Backdrop, { canvas: canvasDocument, element: topLevelElementDom, onClose })),
3555
3493
  canvasDocument.body
3556
3494
  );
3557
3495
  }
@@ -3580,7 +3518,7 @@ function Backdrop({
3580
3518
  onClose();
3581
3519
  }
3582
3520
  };
3583
- return /* @__PURE__ */ React21.createElement(
3521
+ return /* @__PURE__ */ React20.createElement(
3584
3522
  "div",
3585
3523
  {
3586
3524
  style: backdropStyle,
@@ -3588,7 +3526,7 @@ function Backdrop({
3588
3526
  onKeyDown: handleKeyDown,
3589
3527
  role: "button",
3590
3528
  tabIndex: 0,
3591
- "aria-label": (0, import_i18n24.__)("Exit component editing mode", "elementor")
3529
+ "aria-label": (0, import_i18n23.__)("Exit component editing mode", "elementor")
3592
3530
  }
3593
3531
  );
3594
3532
  }
@@ -3628,7 +3566,7 @@ function BlockEditPage() {
3628
3566
  }
3629
3567
  }
3630
3568
  `;
3631
- return /* @__PURE__ */ React21.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
3569
+ return /* @__PURE__ */ React20.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
3632
3570
  }
3633
3571
 
3634
3572
  // src/components/edit-component/edit-component.tsx
@@ -3641,13 +3579,13 @@ function EditComponent() {
3641
3579
  if (!currentComponentId) {
3642
3580
  return null;
3643
3581
  }
3644
- return /* @__PURE__ */ React22.createElement(ComponentModal, { topLevelElementDom, onClose });
3582
+ return /* @__PURE__ */ React21.createElement(ComponentModal, { topLevelElementDom, onClose });
3645
3583
  }
3646
3584
  function useHandleDocumentSwitches() {
3647
3585
  const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
3648
3586
  const currentComponentId = useCurrentComponentId();
3649
3587
  const path = (0, import_store51.__useSelector)(selectPath);
3650
- (0, import_react14.useEffect)(() => {
3588
+ (0, import_react13.useEffect)(() => {
3651
3589
  return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
3652
3590
  const nextDocument = documentsManager.getCurrent();
3653
3591
  if (nextDocument.id === currentComponentId) {
@@ -3700,11 +3638,11 @@ function getInstanceTitle(instanceId, path) {
3700
3638
  }
3701
3639
  function useComponentDOMElement(id2) {
3702
3640
  const { componentContainerDomElement, topLevelElementDom } = getComponentDOMElements(id2);
3703
- const [currentElementDom, setCurrentElementDom] = (0, import_react14.useState)(topLevelElementDom);
3704
- (0, import_react14.useEffect)(() => {
3641
+ const [currentElementDom, setCurrentElementDom] = (0, import_react13.useState)(topLevelElementDom);
3642
+ (0, import_react13.useEffect)(() => {
3705
3643
  setCurrentElementDom(topLevelElementDom);
3706
3644
  }, [topLevelElementDom]);
3707
- (0, import_react14.useEffect)(() => {
3645
+ (0, import_react13.useEffect)(() => {
3708
3646
  if (!componentContainerDomElement) {
3709
3647
  return;
3710
3648
  }
@@ -3732,34 +3670,34 @@ function getComponentDOMElements(id2) {
3732
3670
  }
3733
3671
 
3734
3672
  // src/components/in-edit-mode.tsx
3735
- var React23 = __toESM(require("react"));
3673
+ var React22 = __toESM(require("react"));
3736
3674
  var import_editor_ui12 = require("@elementor/editor-ui");
3737
3675
  var import_icons12 = require("@elementor/icons");
3738
- var import_ui18 = require("@elementor/ui");
3739
- var import_i18n25 = require("@wordpress/i18n");
3676
+ var import_ui17 = require("@elementor/ui");
3677
+ var import_i18n24 = require("@wordpress/i18n");
3740
3678
  var openEditModeDialog = (lockedBy) => {
3741
3679
  (0, import_editor_ui12.openDialog)({
3742
- component: /* @__PURE__ */ React23.createElement(EditModeDialog, { lockedBy })
3680
+ component: /* @__PURE__ */ React22.createElement(EditModeDialog, { lockedBy })
3743
3681
  });
3744
3682
  };
3745
3683
  var EditModeDialog = ({ lockedBy }) => {
3746
- const content = (0, import_i18n25.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
3747
- return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.DialogHeader, { logo: false }, /* @__PURE__ */ React23.createElement(import_ui18.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_ui18.Icon, { color: "secondary" }, /* @__PURE__ */ React23.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React23.createElement(import_ui18.DialogContent, null, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "body2" }, (0, import_i18n25.__)(
3684
+ const content = (0, import_i18n24.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
3685
+ return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui17.DialogHeader, { logo: false }, /* @__PURE__ */ React22.createElement(import_ui17.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(import_ui17.Icon, { color: "secondary" }, /* @__PURE__ */ React22.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React22.createElement(import_ui17.DialogContent, null, /* @__PURE__ */ React22.createElement(import_ui17.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React22.createElement(import_ui17.Typography, { variant: "body2" }, (0, import_i18n24.__)(
3748
3686
  "You can wait for them to finish or reach out to coordinate your changes together.",
3749
3687
  "elementor"
3750
- )), /* @__PURE__ */ React23.createElement(import_ui18.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui18.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui12.closeDialog }, (0, import_i18n25.__)("Close", "elementor"))))));
3688
+ )), /* @__PURE__ */ React22.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React22.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui12.closeDialog }, (0, import_i18n24.__)("Close", "elementor"))))));
3751
3689
  };
3752
3690
 
3753
3691
  // src/components/instance-editing-panel/instance-editing-panel.tsx
3754
- var React29 = __toESM(require("react"));
3692
+ var React28 = __toESM(require("react"));
3755
3693
  var import_editor_controls4 = require("@elementor/editor-controls");
3756
3694
  var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
3757
3695
  var import_editor_elements15 = require("@elementor/editor-elements");
3758
3696
  var import_editor_panels4 = require("@elementor/editor-panels");
3759
3697
  var import_editor_ui14 = require("@elementor/editor-ui");
3760
3698
  var import_icons14 = require("@elementor/icons");
3761
- var import_ui23 = require("@elementor/ui");
3762
- var import_i18n27 = require("@wordpress/i18n");
3699
+ var import_ui22 = require("@elementor/ui");
3700
+ var import_i18n26 = require("@wordpress/i18n");
3763
3701
 
3764
3702
  // src/hooks/use-component-instance-settings.ts
3765
3703
  var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
@@ -3771,21 +3709,21 @@ function useComponentInstanceSettings() {
3771
3709
  }
3772
3710
 
3773
3711
  // src/components/instance-editing-panel/empty-state.tsx
3774
- var React24 = __toESM(require("react"));
3712
+ var React23 = __toESM(require("react"));
3775
3713
  var import_icons13 = require("@elementor/icons");
3776
- var import_ui19 = require("@elementor/ui");
3777
- var import_i18n26 = require("@wordpress/i18n");
3714
+ var import_ui18 = require("@elementor/ui");
3715
+ var import_i18n25 = require("@wordpress/i18n");
3778
3716
  var EmptyState2 = ({ onEditComponent }) => {
3779
3717
  const { canEdit } = useComponentsPermissions();
3780
- const message = canEdit ? (0, import_i18n26.__)(
3718
+ const message = canEdit ? (0, import_i18n25.__)(
3781
3719
  "Edit the component to add properties, manage them or update the design across all instances.",
3782
3720
  "elementor"
3783
- ) : (0, import_i18n26.__)(
3721
+ ) : (0, import_i18n25.__)(
3784
3722
  "With your current role, you cannot edit this component. Contact an administrator to add properties.",
3785
3723
  "elementor"
3786
3724
  );
3787
- return /* @__PURE__ */ React24.createElement(
3788
- import_ui19.Stack,
3725
+ return /* @__PURE__ */ React23.createElement(
3726
+ import_ui18.Stack,
3789
3727
  {
3790
3728
  alignItems: "center",
3791
3729
  justifyContent: "start",
@@ -3794,26 +3732,26 @@ var EmptyState2 = ({ onEditComponent }) => {
3794
3732
  sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
3795
3733
  gap: 1.5
3796
3734
  },
3797
- /* @__PURE__ */ React24.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
3798
- /* @__PURE__ */ React24.createElement(import_ui19.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n26.__)("No properties yet", "elementor")),
3799
- /* @__PURE__ */ React24.createElement(import_ui19.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
3800
- canEdit && /* @__PURE__ */ React24.createElement(import_ui19.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React24.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n26.__)("Edit component", "elementor"))
3735
+ /* @__PURE__ */ React23.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
3736
+ /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n25.__)("No properties yet", "elementor")),
3737
+ /* @__PURE__ */ React23.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
3738
+ canEdit && /* @__PURE__ */ React23.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React23.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n25.__)("Edit component", "elementor"))
3801
3739
  );
3802
3740
  };
3803
3741
 
3804
3742
  // src/components/instance-editing-panel/override-props-group.tsx
3805
- var React28 = __toESM(require("react"));
3806
- var import_react16 = require("react");
3743
+ var React27 = __toESM(require("react"));
3744
+ var import_react15 = require("react");
3807
3745
  var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
3808
3746
  var import_editor_ui13 = require("@elementor/editor-ui");
3809
- var import_ui22 = require("@elementor/ui");
3747
+ var import_ui21 = require("@elementor/ui");
3810
3748
 
3811
3749
  // src/components/instance-editing-panel/override-prop-control.tsx
3812
- var React27 = __toESM(require("react"));
3750
+ var React26 = __toESM(require("react"));
3813
3751
  var import_editor_controls3 = require("@elementor/editor-controls");
3814
3752
  var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
3815
3753
  var import_editor_elements14 = require("@elementor/editor-elements");
3816
- var import_ui21 = require("@elementor/ui");
3754
+ var import_ui20 = require("@elementor/ui");
3817
3755
 
3818
3756
  // src/hooks/use-controls-by-widget-type.ts
3819
3757
  var import_editor_elements12 = require("@elementor/editor-elements");
@@ -3847,14 +3785,14 @@ function getControlsByBind(controls) {
3847
3785
  }
3848
3786
 
3849
3787
  // src/provider/overridable-prop-context.tsx
3850
- var React25 = __toESM(require("react"));
3851
- var import_react15 = require("react");
3852
- var OverridablePropContext = (0, import_react15.createContext)(null);
3788
+ var React24 = __toESM(require("react"));
3789
+ var import_react14 = require("react");
3790
+ var OverridablePropContext = (0, import_react14.createContext)(null);
3853
3791
  function OverridablePropProvider({ children, ...props }) {
3854
- return /* @__PURE__ */ React25.createElement(OverridablePropContext.Provider, { value: props }, children);
3792
+ return /* @__PURE__ */ React24.createElement(OverridablePropContext.Provider, { value: props }, children);
3855
3793
  }
3856
- var useOverridablePropValue = () => (0, import_react15.useContext)(OverridablePropContext)?.value;
3857
- var useComponentInstanceElement = () => (0, import_react15.useContext)(OverridablePropContext)?.componentInstanceElement;
3794
+ var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePropContext)?.value;
3795
+ var useComponentInstanceElement = () => (0, import_react14.useContext)(OverridablePropContext)?.componentInstanceElement;
3858
3796
 
3859
3797
  // src/store/actions/update-overridable-prop.ts
3860
3798
  var import_store53 = require("@elementor/store");
@@ -3945,11 +3883,11 @@ function getPropType({ widgetType, propKey }) {
3945
3883
  }
3946
3884
 
3947
3885
  // src/components/control-label.tsx
3948
- var React26 = __toESM(require("react"));
3886
+ var React25 = __toESM(require("react"));
3949
3887
  var import_editor_controls2 = require("@elementor/editor-controls");
3950
- var import_ui20 = require("@elementor/ui");
3888
+ var import_ui19 = require("@elementor/ui");
3951
3889
  var ControlLabel = ({ children, ...props }) => {
3952
- return /* @__PURE__ */ React26.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React26.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React26.createElement(import_editor_controls2.ControlAdornments, null));
3890
+ return /* @__PURE__ */ React25.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React25.createElement(import_editor_controls2.ControlAdornments, null));
3953
3891
  };
3954
3892
 
3955
3893
  // src/components/errors.ts
@@ -3961,7 +3899,7 @@ var OverrideControlInnerElementNotFoundError = (0, import_utils7.createError)({
3961
3899
 
3962
3900
  // src/components/instance-editing-panel/override-prop-control.tsx
3963
3901
  function OverridePropControl({ overridableProp, overrides }) {
3964
- return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(OverrideControl, { overridableProp, overrides }));
3902
+ return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(OverrideControl, { overridableProp, overrides }));
3965
3903
  }
3966
3904
  function OverrideControl({ overridableProp, overrides }) {
3967
3905
  const componentInstanceElement = (0, import_editor_editing_panel3.useElement)();
@@ -4032,13 +3970,13 @@ function OverrideControl({ overridableProp, overrides }) {
4032
3970
  if (!elementType) {
4033
3971
  return null;
4034
3972
  }
4035
- return /* @__PURE__ */ React27.createElement(
3973
+ return /* @__PURE__ */ React26.createElement(
4036
3974
  OverridablePropProvider,
4037
3975
  {
4038
3976
  value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
4039
3977
  componentInstanceElement
4040
3978
  },
4041
- /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React27.createElement(
3979
+ /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.ElementProvider, { element: { id: elementId, type }, elementType }, /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.SettingsField, { bind: propKey, propDisplayName: overridableProp.label }, /* @__PURE__ */ React26.createElement(
4042
3980
  import_editor_controls3.PropProvider,
4043
3981
  {
4044
3982
  propType: propTypeSchema,
@@ -4048,7 +3986,7 @@ function OverrideControl({ overridableProp, overrides }) {
4048
3986
  return false;
4049
3987
  }
4050
3988
  },
4051
- /* @__PURE__ */ React27.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React27.createElement(import_editor_controls3.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React27.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React27.createElement(OriginalControl, { control, controlProps }))))
3989
+ /* @__PURE__ */ React26.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React26.createElement(import_editor_controls3.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React26.createElement(import_ui20.Stack, { direction: "column", gap: 1, mb: 1.5 }, layout !== "custom" && /* @__PURE__ */ React26.createElement(ControlLabel, null, overridableProp.label), /* @__PURE__ */ React26.createElement(OriginalControl, { control, controlProps }))))
4052
3990
  )))
4053
3991
  );
4054
3992
  }
@@ -4112,7 +4050,7 @@ function getControlParams(controls, originPropFields, label) {
4112
4050
  }
4113
4051
  function OriginalControl({ control, controlProps }) {
4114
4052
  const { value } = control;
4115
- return /* @__PURE__ */ React27.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
4053
+ return /* @__PURE__ */ React26.createElement(import_editor_editing_panel3.BaseControl, { type: value.type, props: controlProps });
4116
4054
  }
4117
4055
  function getControlLayout(control) {
4118
4056
  return control.value.meta?.layout || import_editor_editing_panel3.controlsRegistry.getLayout(control.value.type);
@@ -4139,12 +4077,12 @@ function OverridePropsGroup({ group, props, overrides }) {
4139
4077
  const handleClick = () => {
4140
4078
  setIsOpen(!isOpen);
4141
4079
  };
4142
- const id2 = (0, import_react16.useId)();
4080
+ const id2 = (0, import_react15.useId)();
4143
4081
  const labelId = `label-${id2}`;
4144
4082
  const contentId = `content-${id2}`;
4145
4083
  const title = group.label;
4146
- return /* @__PURE__ */ React28.createElement(import_ui22.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React28.createElement(
4147
- import_ui22.ListItemButton,
4084
+ return /* @__PURE__ */ React27.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React27.createElement(
4085
+ import_ui21.ListItemButton,
4148
4086
  {
4149
4087
  id: labelId,
4150
4088
  "aria-controls": contentId,
@@ -4153,16 +4091,16 @@ function OverridePropsGroup({ group, props, overrides }) {
4153
4091
  p: 0,
4154
4092
  sx: { "&:hover": { backgroundColor: "transparent" } }
4155
4093
  },
4156
- /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React28.createElement(
4157
- import_ui22.ListItemText,
4094
+ /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React27.createElement(
4095
+ import_ui21.ListItemText,
4158
4096
  {
4159
4097
  secondary: title,
4160
4098
  secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
4161
4099
  sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
4162
4100
  }
4163
4101
  )),
4164
- /* @__PURE__ */ React28.createElement(import_editor_ui13.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
4165
- ), /* @__PURE__ */ React28.createElement(import_ui22.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React28.createElement(
4102
+ /* @__PURE__ */ React27.createElement(import_editor_ui13.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
4103
+ ), /* @__PURE__ */ React27.createElement(import_ui21.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React27.createElement(import_ui21.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React27.createElement(
4166
4104
  OverridePropControl,
4167
4105
  {
4168
4106
  key: overrideKey,
@@ -4184,23 +4122,23 @@ function InstanceEditingPanel() {
4184
4122
  if (!componentId || !overridableProps || !component) {
4185
4123
  return null;
4186
4124
  }
4187
- const panelTitle = (0, import_i18n27.__)("Edit %s", "elementor").replace("%s", component.name);
4125
+ const panelTitle = (0, import_i18n26.__)("Edit %s", "elementor").replace("%s", component.name);
4188
4126
  const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
4189
4127
  const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
4190
4128
  const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
4191
4129
  const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
4192
- return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { title: panelTitle }, /* @__PURE__ */ React29.createElement(import_ui23.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React29.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React29.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(import_ui23.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
4130
+ return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React28.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React28.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React28.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React28.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React28.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React28.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React28.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React28.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: group.id }, /* @__PURE__ */ React28.createElement(
4193
4131
  OverridePropsGroup,
4194
4132
  {
4195
4133
  group,
4196
4134
  props: overridableProps.props,
4197
4135
  overrides
4198
4136
  }
4199
- ), /* @__PURE__ */ React29.createElement(import_ui23.Divider, null)))))));
4137
+ ), /* @__PURE__ */ React28.createElement(import_ui22.Divider, null)))))));
4200
4138
  }
4201
4139
 
4202
4140
  // src/components/overridable-props/overridable-prop-control.tsx
4203
- var React30 = __toESM(require("react"));
4141
+ var React29 = __toESM(require("react"));
4204
4142
  var import_editor_controls5 = require("@elementor/editor-controls");
4205
4143
  var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
4206
4144
  function OverridablePropControl({
@@ -4245,7 +4183,7 @@ function OverridablePropControl({
4245
4183
  });
4246
4184
  const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
4247
4185
  const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
4248
- return /* @__PURE__ */ React30.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React30.createElement(
4186
+ return /* @__PURE__ */ React29.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React29.createElement(
4249
4187
  import_editor_controls5.PropProvider,
4250
4188
  {
4251
4189
  ...propContext,
@@ -4256,7 +4194,7 @@ function OverridablePropControl({
4256
4194
  },
4257
4195
  placeholder: objectPlaceholder
4258
4196
  },
4259
- /* @__PURE__ */ React30.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React30.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
4197
+ /* @__PURE__ */ React29.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: filteredReplacements }, /* @__PURE__ */ React29.createElement(ControlWithReplacements, { OriginalControl: OriginalControl2, props })))
4260
4198
  ));
4261
4199
  }
4262
4200
  function ControlWithReplacements({
@@ -4266,18 +4204,18 @@ function ControlWithReplacements({
4266
4204
  const { ControlToRender, isReplaced } = (0, import_editor_controls5.useControlReplacement)(OriginalControl2);
4267
4205
  if (isReplaced) {
4268
4206
  const ReplacementControl = ControlToRender;
4269
- return /* @__PURE__ */ React30.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
4207
+ return /* @__PURE__ */ React29.createElement(ReplacementControl, { ...props, OriginalControl: OriginalControl2 });
4270
4208
  }
4271
- return /* @__PURE__ */ React30.createElement(OriginalControl2, { ...props });
4209
+ return /* @__PURE__ */ React29.createElement(OriginalControl2, { ...props });
4272
4210
  }
4273
4211
 
4274
4212
  // src/components/overridable-props/overridable-prop-indicator.tsx
4275
- var React32 = __toESM(require("react"));
4213
+ var React31 = __toESM(require("react"));
4276
4214
  var import_editor_controls6 = require("@elementor/editor-controls");
4277
4215
  var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
4278
4216
  var import_editor_elements16 = require("@elementor/editor-elements");
4279
- var import_ui25 = require("@elementor/ui");
4280
- var import_i18n29 = require("@wordpress/i18n");
4217
+ var import_ui24 = require("@elementor/ui");
4218
+ var import_i18n28 = require("@wordpress/i18n");
4281
4219
 
4282
4220
  // src/store/actions/set-overridable-prop.ts
4283
4221
  var import_store58 = require("@elementor/store");
@@ -4358,13 +4296,13 @@ function setOverridableProp({
4358
4296
  }
4359
4297
 
4360
4298
  // src/components/overridable-props/indicator.tsx
4361
- var React31 = __toESM(require("react"));
4362
- var import_react17 = require("react");
4299
+ var React30 = __toESM(require("react"));
4300
+ var import_react16 = require("react");
4363
4301
  var import_icons15 = require("@elementor/icons");
4364
- var import_ui24 = require("@elementor/ui");
4365
- var import_i18n28 = require("@wordpress/i18n");
4302
+ var import_ui23 = require("@elementor/ui");
4303
+ var import_i18n27 = require("@wordpress/i18n");
4366
4304
  var SIZE2 = "tiny";
4367
- var IconContainer = (0, import_ui24.styled)(import_ui24.Box)`
4305
+ var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
4368
4306
  pointer-events: none;
4369
4307
  opacity: 0;
4370
4308
  transition: opacity 0.2s ease-in-out;
@@ -4381,7 +4319,7 @@ var IconContainer = (0, import_ui24.styled)(import_ui24.Box)`
4381
4319
  stroke-width: 2px;
4382
4320
  }
4383
4321
  `;
4384
- var Content = (0, import_ui24.styled)(import_ui24.Box)`
4322
+ var Content = (0, import_ui23.styled)(import_ui23.Box)`
4385
4323
  position: relative;
4386
4324
  display: flex;
4387
4325
  align-items: center;
@@ -4418,13 +4356,13 @@ var Content = (0, import_ui24.styled)(import_ui24.Box)`
4418
4356
  }
4419
4357
  }
4420
4358
  `;
4421
- var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React31.createElement(
4359
+ var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React30.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React30.createElement(
4422
4360
  IconContainer,
4423
4361
  {
4424
4362
  className: "icon",
4425
- "aria-label": isOverridable ? (0, import_i18n28.__)("Overridable property", "elementor") : (0, import_i18n28.__)("Make prop overridable", "elementor")
4363
+ "aria-label": isOverridable ? (0, import_i18n27.__)("Overridable property", "elementor") : (0, import_i18n27.__)("Make prop overridable", "elementor")
4426
4364
  },
4427
- isOverridable ? /* @__PURE__ */ React31.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
4365
+ isOverridable ? /* @__PURE__ */ React30.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React30.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
4428
4366
  )));
4429
4367
 
4430
4368
  // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -4448,7 +4386,7 @@ function OverridablePropIndicator() {
4448
4386
  if (!isPropAllowed(propType) || !componentId || !overridableProps) {
4449
4387
  return null;
4450
4388
  }
4451
- return /* @__PURE__ */ React32.createElement(Content2, { componentId, overridableProps });
4389
+ return /* @__PURE__ */ React31.createElement(Content2, { componentId, overridableProps });
4452
4390
  }
4453
4391
  function Content2({ componentId, overridableProps }) {
4454
4392
  const {
@@ -4462,11 +4400,11 @@ function Content2({ componentId, overridableProps }) {
4462
4400
  componentOverridablePropTypeUtil
4463
4401
  );
4464
4402
  const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
4465
- const popupState = (0, import_ui25.usePopupState)({
4403
+ const popupState = (0, import_ui24.usePopupState)({
4466
4404
  variant: "popover"
4467
4405
  });
4468
- const triggerProps = (0, import_ui25.bindTrigger)(popupState);
4469
- const popoverProps = (0, import_ui25.bindPopover)(popupState);
4406
+ const triggerProps = (0, import_ui24.bindTrigger)(popupState);
4407
+ const popoverProps = (0, import_ui24.bindPopover)(popupState);
4470
4408
  const { elType } = (0, import_editor_elements16.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
4471
4409
  const handleSubmit = ({ label, group }) => {
4472
4410
  const propTypeDefault = propType.default ?? {};
@@ -4494,8 +4432,8 @@ function Content2({ componentId, overridableProps }) {
4494
4432
  popupState.close();
4495
4433
  };
4496
4434
  const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
4497
- return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(import_ui25.Tooltip, { placement: "top", title: (0, import_i18n29.__)("Override Property", "elementor") }, /* @__PURE__ */ React32.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React32.createElement(
4498
- import_ui25.Popover,
4435
+ return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n28.__)("Override Property", "elementor") }, /* @__PURE__ */ React31.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React31.createElement(
4436
+ import_ui24.Popover,
4499
4437
  {
4500
4438
  disableScrollLock: true,
4501
4439
  anchorOrigin: {
@@ -4511,7 +4449,7 @@ function Content2({ componentId, overridableProps }) {
4511
4449
  },
4512
4450
  ...popoverProps
4513
4451
  },
4514
- /* @__PURE__ */ React32.createElement(
4452
+ /* @__PURE__ */ React31.createElement(
4515
4453
  OverridablePropForm,
4516
4454
  {
4517
4455
  onSubmit: handleSubmit,
@@ -4530,12 +4468,12 @@ function isPropAllowed(propType) {
4530
4468
  }
4531
4469
 
4532
4470
  // src/mcp/index.ts
4533
- var import_editor_mcp3 = require("@elementor/editor-mcp");
4471
+ var import_editor_mcp2 = require("@elementor/editor-mcp");
4534
4472
 
4535
4473
  // src/mcp/save-as-component-tool.ts
4536
4474
  var import_editor_canvas7 = require("@elementor/editor-canvas");
4537
4475
  var import_editor_elements17 = require("@elementor/editor-elements");
4538
- var import_editor_mcp2 = require("@elementor/editor-mcp");
4476
+ var import_editor_mcp = require("@elementor/editor-mcp");
4539
4477
  var import_http_client2 = require("@elementor/http-client");
4540
4478
  var import_schema6 = require("@elementor/schema");
4541
4479
  var import_utils9 = require("@elementor/utils");
@@ -4708,7 +4646,7 @@ function getValidElementTypes() {
4708
4646
  }, []);
4709
4647
  }
4710
4648
  var generatePrompt = () => {
4711
- const saveAsComponentPrompt = (0, import_editor_mcp2.toolPrompts)("save-as-component");
4649
+ const saveAsComponentPrompt = (0, import_editor_mcp.toolPrompts)("save-as-component");
4712
4650
  saveAsComponentPrompt.description(`
4713
4651
  Save an existing element as a reusable component in the Elementor editor.
4714
4652
 
@@ -4852,7 +4790,7 @@ Component with overridable properties:
4852
4790
  return saveAsComponentPrompt.prompt();
4853
4791
  };
4854
4792
  var initSaveAsComponentTool = () => {
4855
- return (0, import_editor_mcp2.getMCPByDomain)("components").addTool({
4793
+ return (0, import_editor_mcp.getMCPByDomain)("components").addTool({
4856
4794
  name: "save-as-component",
4857
4795
  schema: InputSchema,
4858
4796
  outputSchema: OutputSchema,
@@ -4863,7 +4801,7 @@ var initSaveAsComponentTool = () => {
4863
4801
 
4864
4802
  // src/mcp/index.ts
4865
4803
  function initMcp() {
4866
- const { setMCPDescription } = (0, import_editor_mcp3.getMCPByDomain)("components");
4804
+ const { setMCPDescription } = (0, import_editor_mcp2.getMCPByDomain)("components");
4867
4805
  setMCPDescription(
4868
4806
  `Elementor Editor Components MCP - Tools for creating and managing reusable components.
4869
4807
  Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
@@ -4872,10 +4810,10 @@ function initMcp() {
4872
4810
  }
4873
4811
 
4874
4812
  // src/populate-store.ts
4875
- var import_react18 = require("react");
4813
+ var import_react17 = require("react");
4876
4814
  var import_store63 = require("@elementor/store");
4877
4815
  function PopulateStore() {
4878
- (0, import_react18.useEffect)(() => {
4816
+ (0, import_react17.useEffect)(() => {
4879
4817
  (0, import_store63.__dispatch)(loadComponents());
4880
4818
  }, []);
4881
4819
  return null;
@@ -4886,11 +4824,11 @@ var import_editor_elements18 = require("@elementor/editor-elements");
4886
4824
  var import_editor_notifications4 = require("@elementor/editor-notifications");
4887
4825
  var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
4888
4826
  var import_store64 = require("@elementor/store");
4889
- var import_i18n30 = require("@wordpress/i18n");
4827
+ var import_i18n29 = require("@wordpress/i18n");
4890
4828
  var COMPONENT_TYPE = "e-component";
4891
4829
  var COMPONENT_CIRCULAR_NESTING_ALERT = {
4892
4830
  type: "default",
4893
- message: (0, import_i18n30.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
4831
+ message: (0, import_i18n29.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
4894
4832
  id: "circular-component-nesting-blocked"
4895
4833
  };
4896
4834
  function initCircularNestingPrevention() {
@@ -5487,7 +5425,7 @@ function init() {
5487
5425
  window.elementorCommon.__beforeSave = beforeSave;
5488
5426
  (0, import_editor_elements_panel.injectTab)({
5489
5427
  id: "components",
5490
- label: (0, import_i18n31.__)("Components", "elementor"),
5428
+ label: (0, import_i18n30.__)("Components", "elementor"),
5491
5429
  component: Components,
5492
5430
  position: 1
5493
5431
  });