@elementor/editor-components 3.35.0-421 → 3.35.0-423

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_panels4 = require("@elementor/editor-panels");
44
44
  var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
45
45
  var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
46
46
  var import_store78 = require("@elementor/store");
47
- var import_i18n26 = require("@wordpress/i18n");
47
+ var import_i18n27 = require("@wordpress/i18n");
48
48
 
49
49
  // src/component-instance-transformer.ts
50
50
  var import_editor_canvas = require("@elementor/editor-canvas");
@@ -1635,9 +1635,17 @@ function getComponentName() {
1635
1635
  }
1636
1636
 
1637
1637
  // src/components/components-tab/components.tsx
1638
- var React16 = __toESM(require("react"));
1638
+ var React17 = __toESM(require("react"));
1639
1639
  var import_editor_ui7 = require("@elementor/editor-ui");
1640
1640
 
1641
+ // src/hooks/use-components.ts
1642
+ var import_store27 = require("@elementor/store");
1643
+ var useComponents = () => {
1644
+ const components = (0, import_store27.__useSelector)(selectComponents);
1645
+ const isLoading = (0, import_store27.__useSelector)(selectLoadIsPending);
1646
+ return { components, isLoading };
1647
+ };
1648
+
1641
1649
  // src/components/components-tab/component-search.tsx
1642
1650
  var React12 = __toESM(require("react"));
1643
1651
  var import_icons8 = require("@elementor/icons");
@@ -1687,18 +1695,12 @@ var ComponentSearch = () => {
1687
1695
  };
1688
1696
 
1689
1697
  // src/components/components-tab/components-list.tsx
1690
- var React15 = __toESM(require("react"));
1698
+ var React16 = __toESM(require("react"));
1699
+ var import_react9 = require("react");
1700
+ var import_editor_mcp = require("@elementor/editor-mcp");
1691
1701
  var import_icons10 = require("@elementor/icons");
1692
- var import_ui14 = require("@elementor/ui");
1693
- var import_i18n16 = require("@wordpress/i18n");
1694
-
1695
- // src/hooks/use-components.ts
1696
- var import_store27 = require("@elementor/store");
1697
- var useComponents = () => {
1698
- const components = (0, import_store27.__useSelector)(selectComponents);
1699
- const isLoading = (0, import_store27.__useSelector)(selectLoadIsPending);
1700
- return { components, isLoading };
1701
- };
1702
+ var import_ui15 = require("@elementor/ui");
1703
+ var import_i18n17 = require("@wordpress/i18n");
1702
1704
 
1703
1705
  // src/store/actions/rename-component.ts
1704
1706
  var import_editor_documents7 = require("@elementor/editor-documents");
@@ -2007,15 +2009,50 @@ function findComponentInstancesByUid(documentContainer, componentUid) {
2007
2009
  });
2008
2010
  }
2009
2011
 
2010
- // src/components/components-tab/components-item.tsx
2012
+ // src/components/components-tab/angie-promotion-modal.tsx
2011
2013
  var React13 = __toESM(require("react"));
2014
+ var import_ui12 = require("@elementor/ui");
2015
+ var import_i18n14 = require("@wordpress/i18n");
2016
+ var ANGIE_INSTALL_URL = "/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie";
2017
+ var PLACEHOLDER_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/components-angie-promo.svg";
2018
+ var AngiePromotionModal = ({ children, open, onClose }) => {
2019
+ return /* @__PURE__ */ React13.createElement(import_ui12.Infotip, { placement: "right-end", arrow: true, content: /* @__PURE__ */ React13.createElement(AngiePromotionCard, { onClose }), open }, children);
2020
+ };
2021
+ function AngiePromotionCard({ onClose }) {
2022
+ const handleCtaClick = () => {
2023
+ window.open(ANGIE_INSTALL_URL, "_blank");
2024
+ onClose();
2025
+ };
2026
+ 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(
2027
+ import_ui12.CardHeader,
2028
+ {
2029
+ title: (0, import_i18n14.__)("Add new component with AI", "elementor"),
2030
+ titleTypographyProps: { variant: "subtitle2" },
2031
+ action: /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
2032
+ }
2033
+ ), /* @__PURE__ */ React13.createElement(
2034
+ import_ui12.CardMedia,
2035
+ {
2036
+ component: "img",
2037
+ image: PLACEHOLDER_IMAGE_URL,
2038
+ alt: "",
2039
+ sx: { width: "100%", aspectRatio: "16 / 9" }
2040
+ }
2041
+ ), /* @__PURE__ */ React13.createElement(import_ui12.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n14.__)(
2042
+ "Angie our AI assistant can easily create new components and save you the hassle of doing it yourself",
2043
+ "elementor"
2044
+ ))), /* @__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_i18n14.__)("Get Angie", "elementor")))));
2045
+ }
2046
+
2047
+ // src/components/components-tab/components-item.tsx
2048
+ var React14 = __toESM(require("react"));
2012
2049
  var import_react8 = require("react");
2013
2050
  var import_editor_canvas5 = require("@elementor/editor-canvas");
2014
2051
  var import_editor_elements8 = require("@elementor/editor-elements");
2015
2052
  var import_editor_ui6 = require("@elementor/editor-ui");
2016
2053
  var import_icons9 = require("@elementor/icons");
2017
- var import_ui12 = require("@elementor/ui");
2018
- var import_i18n15 = require("@wordpress/i18n");
2054
+ var import_ui13 = require("@elementor/ui");
2055
+ var import_i18n16 = require("@wordpress/i18n");
2019
2056
 
2020
2057
  // src/store/actions/archive-component.ts
2021
2058
  var import_editor_documents8 = require("@elementor/editor-documents");
@@ -2143,14 +2180,14 @@ var import_store41 = require("@elementor/store");
2143
2180
 
2144
2181
  // src/components/create-component-form/utils/component-form-schema.ts
2145
2182
  var import_schema = require("@elementor/schema");
2146
- var import_i18n14 = require("@wordpress/i18n");
2183
+ var import_i18n15 = require("@wordpress/i18n");
2147
2184
  var MIN_NAME_LENGTH = 2;
2148
2185
  var MAX_NAME_LENGTH = 50;
2149
- var baseComponentSchema = import_schema.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n14.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
2186
+ var baseComponentSchema = import_schema.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n15.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
2150
2187
  var createBaseComponentSchema = (existingNames) => {
2151
2188
  return import_schema.z.object({
2152
2189
  componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
2153
- message: (0, import_i18n14.__)("Component name already exists", "elementor")
2190
+ message: (0, import_i18n15.__)("Component name already exists", "elementor")
2154
2191
  })
2155
2192
  });
2156
2193
  };
@@ -2158,9 +2195,9 @@ var createSubmitComponentSchema = (existingNames) => {
2158
2195
  const baseSchema = createBaseComponentSchema(existingNames);
2159
2196
  return baseSchema.extend({
2160
2197
  componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
2161
- message: (0, import_i18n14.__)("Component name is required.", "elementor")
2198
+ message: (0, import_i18n15.__)("Component name is required.", "elementor")
2162
2199
  }).refine((value) => value.length >= MIN_NAME_LENGTH, {
2163
- message: (0, import_i18n14.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
2200
+ message: (0, import_i18n15.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
2164
2201
  })
2165
2202
  });
2166
2203
  };
@@ -2266,7 +2303,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2266
2303
  validation: validateComponentTitle
2267
2304
  });
2268
2305
  const componentModel = createComponentModel2(component);
2269
- const popupState = (0, import_ui12.usePopupState)({
2306
+ const popupState = (0, import_ui13.usePopupState)({
2270
2307
  variant: "popover",
2271
2308
  disableAutoFocus: true
2272
2309
  });
@@ -2284,7 +2321,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2284
2321
  }
2285
2322
  archiveComponent(component.id);
2286
2323
  };
2287
- return /* @__PURE__ */ React13.createElement(import_ui12.Stack, null, /* @__PURE__ */ React13.createElement(
2324
+ return /* @__PURE__ */ React14.createElement(import_ui13.Stack, null, /* @__PURE__ */ React14.createElement(
2288
2325
  import_editor_ui6.WarningInfotip,
2289
2326
  {
2290
2327
  open: Boolean(error),
@@ -2293,8 +2330,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2293
2330
  width: itemRef.current?.getBoundingClientRect().width,
2294
2331
  offset: [0, -15]
2295
2332
  },
2296
- /* @__PURE__ */ React13.createElement(
2297
- import_ui12.ListItemButton,
2333
+ /* @__PURE__ */ React14.createElement(
2334
+ import_ui13.ListItemButton,
2298
2335
  {
2299
2336
  draggable: true,
2300
2337
  onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
@@ -2312,8 +2349,8 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2312
2349
  gap: 1
2313
2350
  }
2314
2351
  },
2315
- /* @__PURE__ */ React13.createElement(
2316
- import_ui12.Box,
2352
+ /* @__PURE__ */ React14.createElement(
2353
+ import_ui13.Box,
2317
2354
  {
2318
2355
  display: "flex",
2319
2356
  alignItems: "center",
@@ -2322,31 +2359,31 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2322
2359
  flexGrow: 1,
2323
2360
  onClick: handleClick
2324
2361
  },
2325
- /* @__PURE__ */ React13.createElement(import_ui12.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
2326
- /* @__PURE__ */ React13.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React13.createElement(import_ui12.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React13.createElement(
2362
+ /* @__PURE__ */ React14.createElement(import_ui13.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React14.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
2363
+ /* @__PURE__ */ React14.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React14.createElement(import_ui13.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React14.createElement(
2327
2364
  import_editor_ui6.EditableField,
2328
2365
  {
2329
2366
  ref: editableRef,
2330
- as: import_ui12.Typography,
2367
+ as: import_ui13.Typography,
2331
2368
  variant: "caption",
2332
2369
  ...getEditableProps()
2333
2370
  }
2334
- ) : /* @__PURE__ */ React13.createElement(
2371
+ ) : /* @__PURE__ */ React14.createElement(
2335
2372
  import_editor_ui6.EllipsisWithTooltip,
2336
2373
  {
2337
2374
  title: component.name,
2338
- as: import_ui12.Typography,
2375
+ as: import_ui13.Typography,
2339
2376
  variant: "caption",
2340
2377
  color: "text.primary"
2341
2378
  }
2342
2379
  )))
2343
2380
  ),
2344
- /* @__PURE__ */ React13.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
2381
+ /* @__PURE__ */ React14.createElement(import_ui13.IconButton, { size: "tiny", ...(0, import_ui13.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React14.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
2345
2382
  )
2346
- ), /* @__PURE__ */ React13.createElement(
2347
- import_ui12.Menu,
2383
+ ), /* @__PURE__ */ React14.createElement(
2384
+ import_ui13.Menu,
2348
2385
  {
2349
- ...(0, import_ui12.bindMenu)(popupState),
2386
+ ...(0, import_ui13.bindMenu)(popupState),
2350
2387
  anchorOrigin: {
2351
2388
  vertical: "bottom",
2352
2389
  horizontal: "right"
@@ -2356,7 +2393,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2356
2393
  horizontal: "right"
2357
2394
  }
2358
2395
  },
2359
- /* @__PURE__ */ React13.createElement(
2396
+ /* @__PURE__ */ React14.createElement(
2360
2397
  import_editor_ui6.MenuListItem,
2361
2398
  {
2362
2399
  sx: { minWidth: "160px" },
@@ -2365,9 +2402,9 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
2365
2402
  openEditMode();
2366
2403
  }
2367
2404
  },
2368
- (0, import_i18n15.__)("Rename", "elementor")
2405
+ (0, import_i18n16.__)("Rename", "elementor")
2369
2406
  ),
2370
- /* @__PURE__ */ React13.createElement(import_editor_ui6.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n15.__)("Archive", "elementor")))
2407
+ /* @__PURE__ */ React14.createElement(import_editor_ui6.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React14.createElement(import_ui13.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n16.__)("Archive", "elementor")))
2371
2408
  ));
2372
2409
  };
2373
2410
  var addComponentToPage = (model) => {
@@ -2389,7 +2426,7 @@ var validateComponentTitle = (newTitle) => {
2389
2426
  }
2390
2427
  return result.errorMessage;
2391
2428
  };
2392
- var Indicator = (0, import_ui12.styled)(import_ui12.Box, {
2429
+ var Indicator = (0, import_ui13.styled)(import_ui13.Box, {
2393
2430
  shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
2394
2431
  })(({ theme, isActive, isError }) => ({
2395
2432
  display: "flex",
@@ -2412,13 +2449,13 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
2412
2449
  };
2413
2450
 
2414
2451
  // src/components/components-tab/loading-components.tsx
2415
- var React14 = __toESM(require("react"));
2416
- var import_ui13 = require("@elementor/ui");
2452
+ var React15 = __toESM(require("react"));
2453
+ var import_ui14 = require("@elementor/ui");
2417
2454
  var ROWS_COUNT = 6;
2418
2455
  var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
2419
2456
  var LoadingComponents = () => {
2420
- return /* @__PURE__ */ React14.createElement(
2421
- import_ui13.Stack,
2457
+ return /* @__PURE__ */ React15.createElement(
2458
+ import_ui14.Stack,
2422
2459
  {
2423
2460
  "aria-label": "Loading components",
2424
2461
  gap: 1,
@@ -2439,32 +2476,37 @@ var LoadingComponents = () => {
2439
2476
  }
2440
2477
  }
2441
2478
  },
2442
- rows.map((row) => /* @__PURE__ */ React14.createElement(
2443
- import_ui13.ListItemButton,
2479
+ rows.map((row) => /* @__PURE__ */ React15.createElement(
2480
+ import_ui14.ListItemButton,
2444
2481
  {
2445
2482
  key: row,
2446
2483
  sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
2447
2484
  shape: "rounded"
2448
2485
  },
2449
- /* @__PURE__ */ React14.createElement(import_ui13.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React14.createElement(import_ui13.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React14.createElement(import_ui13.Skeleton, { variant: "text", width: "100%", height: "36px" }))
2486
+ /* @__PURE__ */ React15.createElement(import_ui14.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React15.createElement(import_ui14.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React15.createElement(import_ui14.Skeleton, { variant: "text", width: "100%", height: "36px" }))
2450
2487
  ))
2451
2488
  );
2452
2489
  };
2453
2490
 
2454
2491
  // src/components/components-tab/components-list.tsx
2492
+ var LEARN_MORE_URL = "http://go.elementor.com/components-guide-article";
2493
+ var SUBTITLE_OVERRIDE_SX = {
2494
+ fontSize: "0.875rem !important",
2495
+ fontWeight: "500 !important"
2496
+ };
2455
2497
  function ComponentsList() {
2456
2498
  const { components, isLoading, searchValue } = useFilteredComponents();
2457
2499
  if (isLoading) {
2458
- return /* @__PURE__ */ React15.createElement(LoadingComponents, null);
2500
+ return /* @__PURE__ */ React16.createElement(LoadingComponents, null);
2459
2501
  }
2460
2502
  const isEmpty = !components || components.length === 0;
2461
2503
  if (isEmpty) {
2462
2504
  if (searchValue.length > 0) {
2463
- return /* @__PURE__ */ React15.createElement(EmptySearchResult, null);
2505
+ return /* @__PURE__ */ React16.createElement(EmptySearchResult, null);
2464
2506
  }
2465
- return /* @__PURE__ */ React15.createElement(EmptyState, null);
2507
+ return /* @__PURE__ */ React16.createElement(EmptyState, null);
2466
2508
  }
2467
- return /* @__PURE__ */ React15.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(
2509
+ return /* @__PURE__ */ React16.createElement(import_ui15.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React16.createElement(
2468
2510
  ComponentItem,
2469
2511
  {
2470
2512
  key: component.uid,
@@ -2476,42 +2518,63 @@ function ComponentsList() {
2476
2518
  )));
2477
2519
  }
2478
2520
  var EmptyState = () => {
2479
- return /* @__PURE__ */ React15.createElement(
2480
- import_ui14.Stack,
2521
+ const [isAngieModalOpen, setIsAngieModalOpen] = (0, import_react9.useState)(false);
2522
+ const handleCreateWithAI = () => {
2523
+ const sdk = (0, import_editor_mcp.getAngieSdk)();
2524
+ if (sdk.isAngieReady()) {
2525
+ sdk.triggerAngie({
2526
+ prompt: (0, import_i18n17.__)(
2527
+ "Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]",
2528
+ "elementor"
2529
+ ),
2530
+ context: { source: "components-panel-empty-state" }
2531
+ });
2532
+ } else {
2533
+ setIsAngieModalOpen(true);
2534
+ }
2535
+ };
2536
+ return /* @__PURE__ */ React16.createElement(
2537
+ import_ui15.Stack,
2481
2538
  {
2482
2539
  alignItems: "center",
2483
- justifyContent: "center",
2540
+ justifyContent: "start",
2484
2541
  height: "100%",
2485
- sx: { px: 2.5, pt: 10 },
2486
- gap: 1.75,
2542
+ sx: { px: 2, py: 4 },
2543
+ gap: 2,
2487
2544
  overflow: "hidden"
2488
2545
  },
2489
- /* @__PURE__ */ React15.createElement(import_ui14.Icon, { fontSize: "large" }, /* @__PURE__ */ React15.createElement(import_icons10.EyeIcon, { fontSize: "large" })),
2490
- /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n16.__)("Text that explains that there are no Components yet.", "elementor")),
2491
- /* @__PURE__ */ React15.createElement(import_ui14.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n16.__)(
2492
- "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
2493
- "elementor"
2494
- )),
2495
- /* @__PURE__ */ React15.createElement(import_ui14.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
2496
- /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n16.__)("To create a component, first design it, then choose one of three options:", "elementor")),
2497
- /* @__PURE__ */ React15.createElement(
2498
- import_ui14.Typography,
2546
+ /* @__PURE__ */ React16.createElement(import_ui15.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, { fontSize: "large", sx: { color: "text.secondary" } }), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n17.__)("No components yet", "elementor")), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 200 } }, (0, import_i18n17.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ */ React16.createElement("br", null), (0, import_i18n17.__)("Create once, use everywhere.", "elementor")), /* @__PURE__ */ React16.createElement(
2547
+ import_ui15.Link,
2499
2548
  {
2500
- align: "left",
2549
+ href: LEARN_MORE_URL,
2550
+ target: "_blank",
2551
+ rel: "noopener noreferrer",
2501
2552
  variant: "caption",
2502
- color: "text.secondary",
2503
- sx: { display: "flex", flexDirection: "column" }
2553
+ color: "info.main"
2504
2554
  },
2505
- /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n16.__)("1. Right-click and select Create Component", "elementor")),
2506
- /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n16.__)("2. Use the component icon in the Structure panel", "elementor")),
2507
- /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n16.__)("3. Use the component icon in the Edit panel header", "elementor"))
2508
- )
2555
+ (0, import_i18n17.__)("Learn more about components", "elementor")
2556
+ )),
2557
+ /* @__PURE__ */ React16.createElement(import_ui15.Divider, { sx: { width: "100%" } }),
2558
+ /* @__PURE__ */ React16.createElement(import_ui15.Stack, { alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n17.__)("Create your first one:", "elementor")), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary", sx: { maxWidth: 228 } }, (0, import_i18n17.__)(
2559
+ 'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
2560
+ "elementor"
2561
+ )), /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "secondary" }, (0, import_i18n17.__)("Or", "elementor")), /* @__PURE__ */ React16.createElement(AngiePromotionModal, { open: isAngieModalOpen, onClose: () => setIsAngieModalOpen(false) }, /* @__PURE__ */ React16.createElement(
2562
+ import_ui15.Button,
2563
+ {
2564
+ color: "secondary",
2565
+ variant: "outlined",
2566
+ size: "small",
2567
+ onClick: handleCreateWithAI,
2568
+ endIcon: /* @__PURE__ */ React16.createElement(import_icons10.AIIcon, null)
2569
+ },
2570
+ (0, import_i18n17.__)("Create component with AI", "elementor")
2571
+ )))
2509
2572
  );
2510
2573
  };
2511
2574
  var EmptySearchResult = () => {
2512
2575
  const { searchValue, clearSearch } = useSearch();
2513
- return /* @__PURE__ */ React15.createElement(
2514
- import_ui14.Stack,
2576
+ return /* @__PURE__ */ React16.createElement(
2577
+ import_ui15.Stack,
2515
2578
  {
2516
2579
  color: "text.secondary",
2517
2580
  pt: 5,
@@ -2520,28 +2583,29 @@ var EmptySearchResult = () => {
2520
2583
  overflow: "hidden",
2521
2584
  justifySelf: "center"
2522
2585
  },
2523
- /* @__PURE__ */ React15.createElement(import_icons10.ComponentsIcon, null),
2524
- /* @__PURE__ */ React15.createElement(
2525
- import_ui14.Box,
2586
+ /* @__PURE__ */ React16.createElement(import_icons10.ComponentsIcon, null),
2587
+ /* @__PURE__ */ React16.createElement(
2588
+ import_ui15.Box,
2526
2589
  {
2527
2590
  sx: {
2528
2591
  width: "100%"
2529
2592
  }
2530
2593
  },
2531
- /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n16.__)("Sorry, nothing matched", "elementor")),
2532
- searchValue && /* @__PURE__ */ React15.createElement(
2533
- import_ui14.Typography,
2594
+ /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "subtitle2", color: "inherit", sx: SUBTITLE_OVERRIDE_SX }, (0, import_i18n17.__)("Sorry, nothing matched", "elementor")),
2595
+ searchValue && /* @__PURE__ */ React16.createElement(
2596
+ import_ui15.Typography,
2534
2597
  {
2535
2598
  variant: "subtitle2",
2536
2599
  color: "inherit",
2537
2600
  sx: {
2601
+ ...SUBTITLE_OVERRIDE_SX,
2538
2602
  display: "flex",
2539
2603
  width: "100%",
2540
2604
  justifyContent: "center"
2541
2605
  }
2542
2606
  },
2543
- /* @__PURE__ */ React15.createElement("span", null, "\u201C"),
2544
- /* @__PURE__ */ React15.createElement(
2607
+ /* @__PURE__ */ React16.createElement("span", null, "\u201C"),
2608
+ /* @__PURE__ */ React16.createElement(
2545
2609
  "span",
2546
2610
  {
2547
2611
  style: {
@@ -2552,11 +2616,11 @@ var EmptySearchResult = () => {
2552
2616
  },
2553
2617
  searchValue
2554
2618
  ),
2555
- /* @__PURE__ */ React15.createElement("span", null, "\u201D.")
2619
+ /* @__PURE__ */ React16.createElement("span", null, "\u201D.")
2556
2620
  )
2557
2621
  ),
2558
- /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n16.__)("Try something else.", "elementor")),
2559
- /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(import_ui14.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n16.__)("Clear & try again", "elementor")))
2622
+ /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n17.__)("Try something else.", "elementor")),
2623
+ /* @__PURE__ */ React16.createElement(import_ui15.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui15.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n17.__)("Clear & try again", "elementor")))
2560
2624
  );
2561
2625
  };
2562
2626
  var useFilteredComponents = () => {
@@ -2572,23 +2636,28 @@ var useFilteredComponents = () => {
2572
2636
  };
2573
2637
 
2574
2638
  // src/components/components-tab/components.tsx
2639
+ var ComponentsContent = () => {
2640
+ const { components, isLoading } = useComponents();
2641
+ const hasComponents = !isLoading && components.length > 0;
2642
+ return /* @__PURE__ */ React17.createElement(React17.Fragment, null, hasComponents && /* @__PURE__ */ React17.createElement(ComponentSearch, null), /* @__PURE__ */ React17.createElement(ComponentsList, null));
2643
+ };
2575
2644
  var Components = () => {
2576
- return /* @__PURE__ */ React16.createElement(import_editor_ui7.ThemeProvider, null, /* @__PURE__ */ React16.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React16.createElement(ComponentSearch, null), /* @__PURE__ */ React16.createElement(ComponentsList, null)));
2645
+ return /* @__PURE__ */ React17.createElement(import_editor_ui7.ThemeProvider, null, /* @__PURE__ */ React17.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React17.createElement(ComponentsContent, null)));
2577
2646
  };
2578
2647
 
2579
2648
  // src/components/consts.ts
2580
2649
  var COMPONENT_DOCUMENT_TYPE = "elementor_component";
2581
2650
 
2582
2651
  // src/components/create-component-form/create-component-form.tsx
2583
- var React17 = __toESM(require("react"));
2584
- var import_react10 = require("react");
2652
+ var React18 = __toESM(require("react"));
2653
+ var import_react11 = require("react");
2585
2654
  var import_editor_elements10 = require("@elementor/editor-elements");
2586
2655
  var import_editor_notifications2 = require("@elementor/editor-notifications");
2587
2656
  var import_editor_ui8 = require("@elementor/editor-ui");
2588
2657
  var import_icons11 = require("@elementor/icons");
2589
2658
  var import_store47 = require("@elementor/store");
2590
- var import_ui15 = require("@elementor/ui");
2591
- var import_i18n18 = require("@wordpress/i18n");
2659
+ var import_ui16 = require("@elementor/ui");
2660
+ var import_i18n19 = require("@wordpress/i18n");
2592
2661
 
2593
2662
  // src/prevent-non-atomic-nesting.ts
2594
2663
  var import_editor_canvas6 = require("@elementor/editor-canvas");
@@ -2596,10 +2665,10 @@ var import_editor_elements9 = require("@elementor/editor-elements");
2596
2665
  var import_editor_notifications = require("@elementor/editor-notifications");
2597
2666
  var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
2598
2667
  var import_store43 = require("@elementor/store");
2599
- var import_i18n17 = require("@wordpress/i18n");
2668
+ var import_i18n18 = require("@wordpress/i18n");
2600
2669
  var NON_ATOMIC_ELEMENT_ALERT = {
2601
2670
  type: "default",
2602
- message: (0, import_i18n17.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
2671
+ message: (0, import_i18n18.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
2603
2672
  id: "non-atomic-element-blocked"
2604
2673
  };
2605
2674
  function initNonAtomicNestingPrevention() {
@@ -2730,11 +2799,11 @@ async function createUnpublishedComponent(name, element, eventData, overridableP
2730
2799
  }
2731
2800
 
2732
2801
  // src/components/create-component-form/hooks/use-form.ts
2733
- var import_react9 = require("react");
2802
+ var import_react10 = require("react");
2734
2803
  var useForm = (initialValues) => {
2735
- const [values, setValues] = (0, import_react9.useState)(initialValues);
2736
- const [errors, setErrors] = (0, import_react9.useState)({});
2737
- const isValid = (0, import_react9.useMemo)(() => {
2804
+ const [values, setValues] = (0, import_react10.useState)(initialValues);
2805
+ const [errors, setErrors] = (0, import_react10.useState)({});
2806
+ const isValid = (0, import_react10.useMemo)(() => {
2738
2807
  return !Object.values(errors).some((error) => error);
2739
2808
  }, [errors]);
2740
2809
  const handleChange = (e, field, validationSchema) => {
@@ -2809,18 +2878,18 @@ function countNestedElements(container) {
2809
2878
 
2810
2879
  // src/components/create-component-form/create-component-form.tsx
2811
2880
  function CreateComponentForm() {
2812
- const [element, setElement] = (0, import_react10.useState)(null);
2813
- const [anchorPosition, setAnchorPosition] = (0, import_react10.useState)();
2814
- const [resultNotification, setResultNotification] = (0, import_react10.useState)(null);
2815
- const eventData = (0, import_react10.useRef)(null);
2816
- (0, import_react10.useEffect)(() => {
2881
+ const [element, setElement] = (0, import_react11.useState)(null);
2882
+ const [anchorPosition, setAnchorPosition] = (0, import_react11.useState)();
2883
+ const [resultNotification, setResultNotification] = (0, import_react11.useState)(null);
2884
+ const eventData = (0, import_react11.useRef)(null);
2885
+ (0, import_react11.useEffect)(() => {
2817
2886
  const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
2818
2887
  const openPopup = (event) => {
2819
2888
  const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
2820
2889
  if (nonAtomicElements.length > 0) {
2821
2890
  (0, import_editor_notifications2.notify)({
2822
2891
  type: "default",
2823
- message: (0, import_i18n18.__)(
2892
+ message: (0, import_i18n19.__)(
2824
2893
  "Components require atomic elements only. Remove widgets to create this component.",
2825
2894
  "elementor"
2826
2895
  ),
@@ -2860,12 +2929,12 @@ function CreateComponentForm() {
2860
2929
  setResultNotification({
2861
2930
  show: true,
2862
2931
  // Translators: %1$s: Component name, %2$s: Component UID
2863
- message: (0, import_i18n18.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
2932
+ message: (0, import_i18n19.__)("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
2864
2933
  type: "success"
2865
2934
  });
2866
2935
  resetAndClosePopup();
2867
2936
  } catch {
2868
- const errorMessage = (0, import_i18n18.__)("Failed to save component. Please try again.", "elementor");
2937
+ const errorMessage = (0, import_i18n19.__)("Failed to save component. Please try again.", "elementor");
2869
2938
  setResultNotification({
2870
2939
  show: true,
2871
2940
  message: errorMessage,
@@ -2884,15 +2953,15 @@ function CreateComponentForm() {
2884
2953
  ...eventData.current
2885
2954
  });
2886
2955
  };
2887
- return /* @__PURE__ */ React17.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React17.createElement(
2888
- import_ui15.Popover,
2956
+ return /* @__PURE__ */ React18.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React18.createElement(
2957
+ import_ui16.Popover,
2889
2958
  {
2890
2959
  open: element !== null,
2891
2960
  onClose: cancelSave,
2892
2961
  anchorReference: "anchorPosition",
2893
2962
  anchorPosition
2894
2963
  },
2895
- element !== null && /* @__PURE__ */ React17.createElement(
2964
+ element !== null && /* @__PURE__ */ React18.createElement(
2896
2965
  Form2,
2897
2966
  {
2898
2967
  initialValues: { componentName: element.elementLabel },
@@ -2900,8 +2969,8 @@ function CreateComponentForm() {
2900
2969
  closePopup: cancelSave
2901
2970
  }
2902
2971
  )
2903
- ), /* @__PURE__ */ React17.createElement(import_ui15.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React17.createElement(
2904
- import_ui15.Alert,
2972
+ ), /* @__PURE__ */ React18.createElement(import_ui16.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React18.createElement(
2973
+ import_ui16.Alert,
2905
2974
  {
2906
2975
  onClose: () => setResultNotification(null),
2907
2976
  severity: resultNotification?.type,
@@ -2918,14 +2987,14 @@ var Form2 = ({
2918
2987
  }) => {
2919
2988
  const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
2920
2989
  const { components } = useComponents();
2921
- const existingComponentNames = (0, import_react10.useMemo)(() => {
2990
+ const existingComponentNames = (0, import_react11.useMemo)(() => {
2922
2991
  return components?.map((component) => component.name) ?? [];
2923
2992
  }, [components]);
2924
- const changeValidationSchema = (0, import_react10.useMemo)(
2993
+ const changeValidationSchema = (0, import_react11.useMemo)(
2925
2994
  () => createBaseComponentSchema(existingComponentNames),
2926
2995
  [existingComponentNames]
2927
2996
  );
2928
- const submitValidationSchema = (0, import_react10.useMemo)(
2997
+ const submitValidationSchema = (0, import_react11.useMemo)(
2929
2998
  () => createSubmitComponentSchema(existingComponentNames),
2930
2999
  [existingComponentNames]
2931
3000
  );
@@ -2936,14 +3005,14 @@ var Form2 = ({
2936
3005
  }
2937
3006
  };
2938
3007
  const texts = {
2939
- heading: (0, import_i18n18.__)("Save as a component", "elementor"),
2940
- name: (0, import_i18n18.__)("Name", "elementor"),
2941
- cancel: (0, import_i18n18.__)("Cancel", "elementor"),
2942
- create: (0, import_i18n18.__)("Create", "elementor")
3008
+ heading: (0, import_i18n19.__)("Save as a component", "elementor"),
3009
+ name: (0, import_i18n19.__)("Name", "elementor"),
3010
+ cancel: (0, import_i18n19.__)("Cancel", "elementor"),
3011
+ create: (0, import_i18n19.__)("Create", "elementor")
2943
3012
  };
2944
3013
  const nameInputId = "component-name";
2945
- return /* @__PURE__ */ React17.createElement(import_editor_ui8.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React17.createElement(
2946
- import_ui15.Stack,
3014
+ return /* @__PURE__ */ React18.createElement(import_editor_ui8.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React18.createElement(import_ui16.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React18.createElement(
3015
+ import_ui16.Stack,
2947
3016
  {
2948
3017
  direction: "row",
2949
3018
  alignItems: "center",
@@ -2951,10 +3020,10 @@ var Form2 = ({
2951
3020
  px: 1.5,
2952
3021
  sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
2953
3022
  },
2954
- /* @__PURE__ */ React17.createElement(import_icons11.StarIcon, { fontSize: FONT_SIZE }),
2955
- /* @__PURE__ */ React17.createElement(import_ui15.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
2956
- ), /* @__PURE__ */ React17.createElement(import_ui15.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React17.createElement(import_ui15.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(import_ui15.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React17.createElement(import_ui15.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React17.createElement(
2957
- import_ui15.TextField,
3023
+ /* @__PURE__ */ React18.createElement(import_icons11.StarIcon, { fontSize: FONT_SIZE }),
3024
+ /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
3025
+ ), /* @__PURE__ */ React18.createElement(import_ui16.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React18.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(import_ui16.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React18.createElement(import_ui16.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React18.createElement(
3026
+ import_ui16.TextField,
2958
3027
  {
2959
3028
  id: nameInputId,
2960
3029
  size: FONT_SIZE,
@@ -2965,12 +3034,12 @@ var Form2 = ({
2965
3034
  error: Boolean(errors.componentName),
2966
3035
  helperText: errors.componentName
2967
3036
  }
2968
- ))), /* @__PURE__ */ React17.createElement(import_ui15.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React17.createElement(import_ui15.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React17.createElement(import_ui15.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
3037
+ ))), /* @__PURE__ */ React18.createElement(import_ui16.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React18.createElement(import_ui16.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React18.createElement(import_ui16.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
2969
3038
  };
2970
3039
 
2971
3040
  // src/components/edit-component/edit-component.tsx
2972
- var React19 = __toESM(require("react"));
2973
- var import_react13 = require("react");
3041
+ var React20 = __toESM(require("react"));
3042
+ var import_react14 = require("react");
2974
3043
  var import_editor_documents11 = require("@elementor/editor-documents");
2975
3044
  var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
2976
3045
  var import_store51 = require("@elementor/store");
@@ -2992,10 +3061,10 @@ function updateCurrentComponent({
2992
3061
  }
2993
3062
 
2994
3063
  // src/components/edit-component/component-modal.tsx
2995
- var React18 = __toESM(require("react"));
2996
- var import_react12 = require("react");
3064
+ var React19 = __toESM(require("react"));
3065
+ var import_react13 = require("react");
2997
3066
  var import_react_dom = require("react-dom");
2998
- var import_i18n19 = require("@wordpress/i18n");
3067
+ var import_i18n20 = require("@wordpress/i18n");
2999
3068
 
3000
3069
  // src/hooks/use-canvas-document.ts
3001
3070
  var import_editor_canvas7 = require("@elementor/editor-canvas");
@@ -3005,10 +3074,10 @@ function useCanvasDocument() {
3005
3074
  }
3006
3075
 
3007
3076
  // src/hooks/use-element-rect.ts
3008
- var import_react11 = require("react");
3077
+ var import_react12 = require("react");
3009
3078
  var import_utils5 = require("@elementor/utils");
3010
3079
  function useElementRect(element) {
3011
- const [rect, setRect] = (0, import_react11.useState)(new DOMRect(0, 0, 0, 0));
3080
+ const [rect, setRect] = (0, import_react12.useState)(new DOMRect(0, 0, 0, 0));
3012
3081
  const onChange = (0, import_utils5.throttle)(
3013
3082
  () => {
3014
3083
  setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -3019,7 +3088,7 @@ function useElementRect(element) {
3019
3088
  useScrollListener({ element, onChange });
3020
3089
  useResizeListener({ element, onChange });
3021
3090
  useMutationsListener({ element, onChange });
3022
- (0, import_react11.useEffect)(
3091
+ (0, import_react12.useEffect)(
3023
3092
  () => () => {
3024
3093
  onChange.cancel();
3025
3094
  },
@@ -3028,7 +3097,7 @@ function useElementRect(element) {
3028
3097
  return rect;
3029
3098
  }
3030
3099
  function useScrollListener({ element, onChange }) {
3031
- (0, import_react11.useEffect)(() => {
3100
+ (0, import_react12.useEffect)(() => {
3032
3101
  if (!element) {
3033
3102
  return;
3034
3103
  }
@@ -3040,7 +3109,7 @@ function useScrollListener({ element, onChange }) {
3040
3109
  }, [element, onChange]);
3041
3110
  }
3042
3111
  function useResizeListener({ element, onChange }) {
3043
- (0, import_react11.useEffect)(() => {
3112
+ (0, import_react12.useEffect)(() => {
3044
3113
  if (!element) {
3045
3114
  return;
3046
3115
  }
@@ -3055,7 +3124,7 @@ function useResizeListener({ element, onChange }) {
3055
3124
  }, [element, onChange]);
3056
3125
  }
3057
3126
  function useMutationsListener({ element, onChange }) {
3058
- (0, import_react11.useEffect)(() => {
3127
+ (0, import_react12.useEffect)(() => {
3059
3128
  if (!element) {
3060
3129
  return;
3061
3130
  }
@@ -3070,7 +3139,7 @@ function useMutationsListener({ element, onChange }) {
3070
3139
  // src/components/edit-component/component-modal.tsx
3071
3140
  function ComponentModal({ element, onClose }) {
3072
3141
  const canvasDocument = useCanvasDocument();
3073
- (0, import_react12.useEffect)(() => {
3142
+ (0, import_react13.useEffect)(() => {
3074
3143
  const handleEsc = (event) => {
3075
3144
  if (event.key === "Escape") {
3076
3145
  onClose();
@@ -3085,7 +3154,7 @@ function ComponentModal({ element, onClose }) {
3085
3154
  return null;
3086
3155
  }
3087
3156
  return (0, import_react_dom.createPortal)(
3088
- /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(BlockEditPage, null), /* @__PURE__ */ React18.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
3157
+ /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(BlockEditPage, null), /* @__PURE__ */ React19.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
3089
3158
  canvasDocument.body
3090
3159
  );
3091
3160
  }
@@ -3109,7 +3178,7 @@ function Backdrop({ canvas, element, onClose }) {
3109
3178
  onClose();
3110
3179
  }
3111
3180
  };
3112
- return /* @__PURE__ */ React18.createElement(
3181
+ return /* @__PURE__ */ React19.createElement(
3113
3182
  "div",
3114
3183
  {
3115
3184
  style: backdropStyle,
@@ -3117,7 +3186,7 @@ function Backdrop({ canvas, element, onClose }) {
3117
3186
  onKeyDown: handleKeyDown,
3118
3187
  role: "button",
3119
3188
  tabIndex: 0,
3120
- "aria-label": (0, import_i18n19.__)("Exit component editing mode", "elementor")
3189
+ "aria-label": (0, import_i18n20.__)("Exit component editing mode", "elementor")
3121
3190
  }
3122
3191
  );
3123
3192
  }
@@ -3167,7 +3236,7 @@ function BlockEditPage() {
3167
3236
  }
3168
3237
  }
3169
3238
  `;
3170
- return /* @__PURE__ */ React18.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
3239
+ return /* @__PURE__ */ React19.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
3171
3240
  }
3172
3241
 
3173
3242
  // src/components/edit-component/edit-component.tsx
@@ -3180,13 +3249,13 @@ function EditComponent() {
3180
3249
  if (!elementDom) {
3181
3250
  return null;
3182
3251
  }
3183
- return /* @__PURE__ */ React19.createElement(ComponentModal, { element: elementDom, onClose });
3252
+ return /* @__PURE__ */ React20.createElement(ComponentModal, { element: elementDom, onClose });
3184
3253
  }
3185
3254
  function useHandleDocumentSwitches() {
3186
3255
  const documentsManager = (0, import_editor_documents11.getV1DocumentsManager)();
3187
3256
  const currentComponentId = useCurrentComponentId();
3188
3257
  const path = (0, import_store51.__useSelector)(selectPath);
3189
- (0, import_react13.useEffect)(() => {
3258
+ (0, import_react14.useEffect)(() => {
3190
3259
  return (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.commandEndEvent)("editor/documents/open"), () => {
3191
3260
  const nextDocument = documentsManager.getCurrent();
3192
3261
  if (nextDocument.id === currentComponentId) {
@@ -3250,33 +3319,33 @@ function getComponentDOMElement(id2) {
3250
3319
  }
3251
3320
 
3252
3321
  // src/components/in-edit-mode.tsx
3253
- var React20 = __toESM(require("react"));
3322
+ var React21 = __toESM(require("react"));
3254
3323
  var import_editor_ui9 = require("@elementor/editor-ui");
3255
3324
  var import_icons12 = require("@elementor/icons");
3256
- var import_ui16 = require("@elementor/ui");
3257
- var import_i18n20 = require("@wordpress/i18n");
3325
+ var import_ui17 = require("@elementor/ui");
3326
+ var import_i18n21 = require("@wordpress/i18n");
3258
3327
  var openEditModeDialog = (lockedBy) => {
3259
3328
  (0, import_editor_ui9.openDialog)({
3260
- component: /* @__PURE__ */ React20.createElement(EditModeDialog, { lockedBy })
3329
+ component: /* @__PURE__ */ React21.createElement(EditModeDialog, { lockedBy })
3261
3330
  });
3262
3331
  };
3263
3332
  var EditModeDialog = ({ lockedBy }) => {
3264
- const content = (0, import_i18n20.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
3265
- return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui16.DialogHeader, { logo: false }, /* @__PURE__ */ React20.createElement(import_ui16.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(import_ui16.Icon, { color: "secondary" }, /* @__PURE__ */ React20.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React20.createElement(import_ui16.DialogContent, null, /* @__PURE__ */ React20.createElement(import_ui16.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React20.createElement(import_ui16.Typography, { variant: "body2" }, (0, import_i18n20.__)(
3333
+ const content = (0, import_i18n21.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
3334
+ return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui17.DialogHeader, { logo: false }, /* @__PURE__ */ React21.createElement(import_ui17.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React21.createElement(import_ui17.Icon, { color: "secondary" }, /* @__PURE__ */ React21.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React21.createElement(import_ui17.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React21.createElement(import_ui17.DialogContent, null, /* @__PURE__ */ React21.createElement(import_ui17.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React21.createElement(import_ui17.Typography, { variant: "body2" }, (0, import_i18n21.__)(
3266
3335
  "You can wait for them to finish or reach out to coordinate your changes together.",
3267
3336
  "elementor"
3268
- )), /* @__PURE__ */ React20.createElement(import_ui16.DialogActions, null, /* @__PURE__ */ React20.createElement(import_ui16.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui9.closeDialog }, (0, import_i18n20.__)("Close", "elementor"))))));
3337
+ )), /* @__PURE__ */ React21.createElement(import_ui17.DialogActions, null, /* @__PURE__ */ React21.createElement(import_ui17.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui9.closeDialog }, (0, import_i18n21.__)("Close", "elementor"))))));
3269
3338
  };
3270
3339
 
3271
3340
  // src/components/instance-editing-panel/instance-editing-panel.tsx
3272
- var React25 = __toESM(require("react"));
3341
+ var React26 = __toESM(require("react"));
3273
3342
  var import_editor_controls4 = require("@elementor/editor-controls");
3274
3343
  var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
3275
3344
  var import_editor_elements14 = require("@elementor/editor-elements");
3276
3345
  var import_editor_panels3 = require("@elementor/editor-panels");
3277
3346
  var import_icons14 = require("@elementor/icons");
3278
- var import_ui21 = require("@elementor/ui");
3279
- var import_i18n22 = require("@wordpress/i18n");
3347
+ var import_ui22 = require("@elementor/ui");
3348
+ var import_i18n23 = require("@wordpress/i18n");
3280
3349
 
3281
3350
  // src/hooks/use-component-instance-settings.ts
3282
3351
  var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
@@ -3342,13 +3411,13 @@ function useComponentInstanceSettings() {
3342
3411
  }
3343
3412
 
3344
3413
  // src/components/instance-editing-panel/empty-state.tsx
3345
- var React21 = __toESM(require("react"));
3414
+ var React22 = __toESM(require("react"));
3346
3415
  var import_icons13 = require("@elementor/icons");
3347
- var import_ui17 = require("@elementor/ui");
3348
- var import_i18n21 = require("@wordpress/i18n");
3416
+ var import_ui18 = require("@elementor/ui");
3417
+ var import_i18n22 = require("@wordpress/i18n");
3349
3418
  var EmptyState2 = ({ onEditComponent }) => {
3350
- return /* @__PURE__ */ React21.createElement(
3351
- import_ui17.Stack,
3419
+ return /* @__PURE__ */ React22.createElement(
3420
+ import_ui18.Stack,
3352
3421
  {
3353
3422
  alignItems: "center",
3354
3423
  justifyContent: "start",
@@ -3357,28 +3426,28 @@ var EmptyState2 = ({ onEditComponent }) => {
3357
3426
  sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
3358
3427
  gap: 1.5
3359
3428
  },
3360
- /* @__PURE__ */ React21.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
3361
- /* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n21.__)("No properties yet", "elementor")),
3362
- /* @__PURE__ */ React21.createElement(import_ui17.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n21.__)(
3429
+ /* @__PURE__ */ React22.createElement(import_icons13.ComponentPropListIcon, { fontSize: "large" }),
3430
+ /* @__PURE__ */ React22.createElement(import_ui18.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n22.__)("No properties yet", "elementor")),
3431
+ /* @__PURE__ */ React22.createElement(import_ui18.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n22.__)(
3363
3432
  "Edit the component to add properties, manage them or update the design across all instances.",
3364
3433
  "elementor"
3365
3434
  )),
3366
- /* @__PURE__ */ React21.createElement(import_ui17.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n21.__)("Edit component", "elementor"))
3435
+ /* @__PURE__ */ React22.createElement(import_ui18.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React22.createElement(import_icons13.PencilIcon, { fontSize: "small" }), (0, import_i18n22.__)("Edit component", "elementor"))
3367
3436
  );
3368
3437
  };
3369
3438
 
3370
3439
  // src/components/instance-editing-panel/override-props-group.tsx
3371
- var React24 = __toESM(require("react"));
3372
- var import_react14 = require("react");
3440
+ var React25 = __toESM(require("react"));
3441
+ var import_react15 = require("react");
3373
3442
  var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
3374
3443
  var import_editor_ui10 = require("@elementor/editor-ui");
3375
- var import_ui20 = require("@elementor/ui");
3444
+ var import_ui21 = require("@elementor/ui");
3376
3445
 
3377
3446
  // src/components/instance-editing-panel/override-prop-control.tsx
3378
- var React23 = __toESM(require("react"));
3447
+ var React24 = __toESM(require("react"));
3379
3448
  var import_editor_controls3 = require("@elementor/editor-controls");
3380
3449
  var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
3381
- var import_ui19 = require("@elementor/ui");
3450
+ var import_ui20 = require("@elementor/ui");
3382
3451
 
3383
3452
  // src/hooks/use-controls-by-widget-type.ts
3384
3453
  var import_editor_elements12 = require("@elementor/editor-elements");
@@ -3465,16 +3534,16 @@ function getPropType({ widgetType, propKey }) {
3465
3534
  }
3466
3535
 
3467
3536
  // src/components/control-label.tsx
3468
- var React22 = __toESM(require("react"));
3537
+ var React23 = __toESM(require("react"));
3469
3538
  var import_editor_controls2 = require("@elementor/editor-controls");
3470
- var import_ui18 = require("@elementor/ui");
3539
+ var import_ui19 = require("@elementor/ui");
3471
3540
  var ControlLabel = ({ children, ...props }) => {
3472
- return /* @__PURE__ */ React22.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React22.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React22.createElement(import_editor_controls2.ControlAdornments, null));
3541
+ return /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React23.createElement(import_editor_controls2.ControlFormLabel, { ...props }, children), /* @__PURE__ */ React23.createElement(import_editor_controls2.ControlAdornments, null));
3473
3542
  };
3474
3543
 
3475
3544
  // src/components/instance-editing-panel/override-prop-control.tsx
3476
3545
  function OverridePropControl({ overridableProp, overrides }) {
3477
- return /* @__PURE__ */ React23.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React23.createElement(OverrideControl, { overridableProp, overrides }));
3546
+ return /* @__PURE__ */ React24.createElement(import_editor_editing_panel3.SettingsField, { bind: "component_instance", propDisplayName: overridableProp.label }, /* @__PURE__ */ React24.createElement(OverrideControl, { overridableProp, overrides }));
3478
3547
  }
3479
3548
  function OverrideControl({ overridableProp, overrides }) {
3480
3549
  const componentId = useCurrentComponentId();
@@ -3521,7 +3590,7 @@ function OverrideControl({ overridableProp, overrides }) {
3521
3590
  updateOverridableProp(componentId, overridableValue, { elType, widgetType, propKey });
3522
3591
  }
3523
3592
  };
3524
- return /* @__PURE__ */ React23.createElement(
3593
+ return /* @__PURE__ */ React24.createElement(
3525
3594
  import_editor_controls3.PropProvider,
3526
3595
  {
3527
3596
  propType: propTypeSchema,
@@ -3531,7 +3600,7 @@ function OverrideControl({ overridableProp, overrides }) {
3531
3600
  return false;
3532
3601
  }
3533
3602
  },
3534
- /* @__PURE__ */ React23.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React23.createElement(import_ui19.Stack, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
3603
+ /* @__PURE__ */ React24.createElement(import_editor_controls3.PropKeyProvider, { bind: overridableProp.overrideKey }, /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "column", gap: 1, mb: 1.5 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, overridableProp.label), getControl(controls, overridableProp?.originPropFields ?? overridableProp)))
3535
3604
  );
3536
3605
  }
3537
3606
  function getPropValue(value) {
@@ -3584,7 +3653,7 @@ function createOverrideValue(overrideKey, overrideValue, componentId) {
3584
3653
  function getControl(controls, originPropFields) {
3585
3654
  const ControlComponent = import_editor_editing_panel3.controlsRegistry.get(controls[originPropFields.propKey].value.type);
3586
3655
  const controlProps = controls[originPropFields.propKey].value.props;
3587
- return /* @__PURE__ */ React23.createElement(ControlComponent, { ...controlProps });
3656
+ return /* @__PURE__ */ React24.createElement(ControlComponent, { ...controlProps });
3588
3657
  }
3589
3658
 
3590
3659
  // src/components/instance-editing-panel/override-props-group.tsx
@@ -3593,12 +3662,12 @@ function OverridePropsGroup({ group, props, overrides }) {
3593
3662
  const handleClick = () => {
3594
3663
  setIsOpen(!isOpen);
3595
3664
  };
3596
- const id2 = (0, import_react14.useId)();
3665
+ const id2 = (0, import_react15.useId)();
3597
3666
  const labelId = `label-${id2}`;
3598
3667
  const contentId = `content-${id2}`;
3599
3668
  const title = group.label;
3600
- return /* @__PURE__ */ React24.createElement(import_ui20.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React24.createElement(
3601
- import_ui20.ListItemButton,
3669
+ return /* @__PURE__ */ React25.createElement(import_ui21.Box, { "aria-label": `${title} section` }, /* @__PURE__ */ React25.createElement(
3670
+ import_ui21.ListItemButton,
3602
3671
  {
3603
3672
  id: labelId,
3604
3673
  "aria-controls": contentId,
@@ -3607,16 +3676,16 @@ function OverridePropsGroup({ group, props, overrides }) {
3607
3676
  p: 0,
3608
3677
  sx: { "&:hover": { backgroundColor: "transparent" } }
3609
3678
  },
3610
- /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React24.createElement(
3611
- import_ui20.ListItemText,
3679
+ /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React25.createElement(
3680
+ import_ui21.ListItemText,
3612
3681
  {
3613
3682
  secondary: title,
3614
3683
  secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
3615
3684
  sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
3616
3685
  }
3617
3686
  )),
3618
- /* @__PURE__ */ React24.createElement(import_editor_ui10.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
3619
- ), /* @__PURE__ */ React24.createElement(import_ui20.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React24.createElement(import_ui20.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React24.createElement(
3687
+ /* @__PURE__ */ React25.createElement(import_editor_ui10.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
3688
+ ), /* @__PURE__ */ React25.createElement(import_ui21.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React25.createElement(
3620
3689
  OverridePropControl,
3621
3690
  {
3622
3691
  key: overrideKey,
@@ -3637,12 +3706,12 @@ function InstanceEditingPanel() {
3637
3706
  if (!componentId || !overridableProps || !component) {
3638
3707
  return null;
3639
3708
  }
3640
- const panelTitle = (0, import_i18n22.__)("Edit %s", "elementor").replace("%s", component.name);
3709
+ const panelTitle = (0, import_i18n23.__)("Edit %s", "elementor").replace("%s", component.name);
3641
3710
  const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
3642
3711
  const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
3643
3712
  const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
3644
3713
  const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
3645
- return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React25.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React25.createElement(import_editor_panels3.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React25.createElement(import_ui21.Tooltip, { title: panelTitle }, /* @__PURE__ */ React25.createElement(import_ui21.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React25.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React25.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React25.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React25.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React25.createElement(import_ui21.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React25.createElement(
3714
+ return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React26.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React26.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React26.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React26.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React26.createElement(import_editor_panels3.PanelBody, null, /* @__PURE__ */ React26.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React26.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React26.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React26.createElement(
3646
3715
  OverridePropsGroup,
3647
3716
  {
3648
3717
  key: group.id,
@@ -3654,18 +3723,18 @@ function InstanceEditingPanel() {
3654
3723
  }
3655
3724
 
3656
3725
  // src/components/overridable-props/overridable-prop-control.tsx
3657
- var React27 = __toESM(require("react"));
3726
+ var React28 = __toESM(require("react"));
3658
3727
  var import_editor_controls5 = require("@elementor/editor-controls");
3659
3728
  var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
3660
3729
 
3661
3730
  // src/provider/overridable-prop-context.tsx
3662
- var React26 = __toESM(require("react"));
3663
- var import_react15 = require("react");
3664
- var OverridablePropContext = (0, import_react15.createContext)(null);
3731
+ var React27 = __toESM(require("react"));
3732
+ var import_react16 = require("react");
3733
+ var OverridablePropContext = (0, import_react16.createContext)(null);
3665
3734
  function OverridablePropProvider({ children, ...props }) {
3666
- return /* @__PURE__ */ React26.createElement(OverridablePropContext.Provider, { value: props }, children);
3735
+ return /* @__PURE__ */ React27.createElement(OverridablePropContext.Provider, { value: props }, children);
3667
3736
  }
3668
- var useOverridablePropValue = () => (0, import_react15.useContext)(OverridablePropContext)?.value;
3737
+ var useOverridablePropValue = () => (0, import_react16.useContext)(OverridablePropContext)?.value;
3669
3738
 
3670
3739
  // src/components/overridable-props/overridable-prop-control.tsx
3671
3740
  function OverridablePropControl({
@@ -3702,7 +3771,7 @@ function OverridablePropControl({
3702
3771
  });
3703
3772
  const propValue = isComponentInstance2 ? (value.origin_value?.value).override_value : value.origin_value;
3704
3773
  const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
3705
- return /* @__PURE__ */ React27.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React27.createElement(
3774
+ return /* @__PURE__ */ React28.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React28.createElement(
3706
3775
  import_editor_controls5.PropProvider,
3707
3776
  {
3708
3777
  ...propContext,
@@ -3713,17 +3782,17 @@ function OverridablePropControl({
3713
3782
  },
3714
3783
  placeholder: objectPlaceholder
3715
3784
  },
3716
- /* @__PURE__ */ React27.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React27.createElement(OriginalControl, { ...props })))
3785
+ /* @__PURE__ */ React28.createElement(import_editor_controls5.PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(import_editor_controls5.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React28.createElement(OriginalControl, { ...props })))
3717
3786
  ));
3718
3787
  }
3719
3788
 
3720
3789
  // src/components/overridable-props/overridable-prop-indicator.tsx
3721
- var React29 = __toESM(require("react"));
3790
+ var React30 = __toESM(require("react"));
3722
3791
  var import_editor_controls6 = require("@elementor/editor-controls");
3723
3792
  var import_editor_editing_panel7 = require("@elementor/editor-editing-panel");
3724
3793
  var import_editor_elements15 = require("@elementor/editor-elements");
3725
- var import_ui23 = require("@elementor/ui");
3726
- var import_i18n24 = require("@wordpress/i18n");
3794
+ var import_ui24 = require("@elementor/ui");
3795
+ var import_i18n25 = require("@wordpress/i18n");
3727
3796
 
3728
3797
  // src/store/actions/set-overridable-prop.ts
3729
3798
  var import_store58 = require("@elementor/store");
@@ -3790,13 +3859,13 @@ function setOverridableProp({
3790
3859
  }
3791
3860
 
3792
3861
  // src/components/overridable-props/indicator.tsx
3793
- var React28 = __toESM(require("react"));
3794
- var import_react16 = require("react");
3862
+ var React29 = __toESM(require("react"));
3863
+ var import_react17 = require("react");
3795
3864
  var import_icons15 = require("@elementor/icons");
3796
- var import_ui22 = require("@elementor/ui");
3797
- var import_i18n23 = require("@wordpress/i18n");
3865
+ var import_ui23 = require("@elementor/ui");
3866
+ var import_i18n24 = require("@wordpress/i18n");
3798
3867
  var SIZE2 = "tiny";
3799
- var IconContainer = (0, import_ui22.styled)(import_ui22.Box)`
3868
+ var IconContainer = (0, import_ui23.styled)(import_ui23.Box)`
3800
3869
  pointer-events: none;
3801
3870
  opacity: 0;
3802
3871
  transition: opacity 0.2s ease-in-out;
@@ -3813,7 +3882,7 @@ var IconContainer = (0, import_ui22.styled)(import_ui22.Box)`
3813
3882
  stroke-width: 2px;
3814
3883
  }
3815
3884
  `;
3816
- var Content = (0, import_ui22.styled)(import_ui22.Box)`
3885
+ var Content = (0, import_ui23.styled)(import_ui23.Box)`
3817
3886
  position: relative;
3818
3887
  display: flex;
3819
3888
  align-items: center;
@@ -3850,13 +3919,13 @@ var Content = (0, import_ui22.styled)(import_ui22.Box)`
3850
3919
  }
3851
3920
  }
3852
3921
  `;
3853
- var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
3922
+ var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React29.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React29.createElement(
3854
3923
  IconContainer,
3855
3924
  {
3856
3925
  className: "icon",
3857
- "aria-label": isOverridable ? (0, import_i18n23.__)("Overridable property", "elementor") : (0, import_i18n23.__)("Make prop overridable", "elementor")
3926
+ "aria-label": isOverridable ? (0, import_i18n24.__)("Overridable property", "elementor") : (0, import_i18n24.__)("Make prop overridable", "elementor")
3858
3927
  },
3859
- isOverridable ? /* @__PURE__ */ React28.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React28.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
3928
+ isOverridable ? /* @__PURE__ */ React29.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React29.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
3860
3929
  )));
3861
3930
 
3862
3931
  // src/components/overridable-props/utils/get-overridable-prop.ts
@@ -3881,7 +3950,7 @@ function OverridablePropIndicator() {
3881
3950
  if (!isPropAllowed(bind) || !componentId || !overridableProps) {
3882
3951
  return null;
3883
3952
  }
3884
- return /* @__PURE__ */ React29.createElement(Content2, { componentId, overridableProps });
3953
+ return /* @__PURE__ */ React30.createElement(Content2, { componentId, overridableProps });
3885
3954
  }
3886
3955
  function Content2({ componentId, overridableProps }) {
3887
3956
  const {
@@ -3894,11 +3963,11 @@ function Content2({ componentId, overridableProps }) {
3894
3963
  componentOverridablePropTypeUtil
3895
3964
  );
3896
3965
  const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
3897
- const popupState = (0, import_ui23.usePopupState)({
3966
+ const popupState = (0, import_ui24.usePopupState)({
3898
3967
  variant: "popover"
3899
3968
  });
3900
- const triggerProps = (0, import_ui23.bindTrigger)(popupState);
3901
- const popoverProps = (0, import_ui23.bindPopover)(popupState);
3969
+ const triggerProps = (0, import_ui24.bindTrigger)(popupState);
3970
+ const popoverProps = (0, import_ui24.bindPopover)(popupState);
3902
3971
  const { elType } = (0, import_editor_elements15.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
3903
3972
  const handleSubmit = ({ label, group }) => {
3904
3973
  const propTypeDefault = propType.default ?? {};
@@ -3925,8 +3994,8 @@ function Content2({ componentId, overridableProps }) {
3925
3994
  popupState.close();
3926
3995
  };
3927
3996
  const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
3928
- return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { placement: "top", title: (0, import_i18n24.__)("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
3929
- import_ui23.Popover,
3997
+ return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(import_ui24.Tooltip, { placement: "top", title: (0, import_i18n25.__)("Override Property", "elementor") }, /* @__PURE__ */ React30.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React30.createElement(
3998
+ import_ui24.Popover,
3930
3999
  {
3931
4000
  disableScrollLock: true,
3932
4001
  anchorOrigin: {
@@ -3942,7 +4011,7 @@ function Content2({ componentId, overridableProps }) {
3942
4011
  },
3943
4012
  ...popoverProps
3944
4013
  },
3945
- /* @__PURE__ */ React29.createElement(
4014
+ /* @__PURE__ */ React30.createElement(
3946
4015
  OverridablePropForm,
3947
4016
  {
3948
4017
  onSubmit: handleSubmit,
@@ -4039,12 +4108,12 @@ function hasOverrides(settings) {
4039
4108
  }
4040
4109
 
4041
4110
  // src/mcp/index.ts
4042
- var import_editor_mcp2 = require("@elementor/editor-mcp");
4111
+ var import_editor_mcp3 = require("@elementor/editor-mcp");
4043
4112
 
4044
4113
  // src/mcp/save-as-component-tool.ts
4045
4114
  var import_editor_canvas8 = require("@elementor/editor-canvas");
4046
4115
  var import_editor_elements17 = require("@elementor/editor-elements");
4047
- var import_editor_mcp = require("@elementor/editor-mcp");
4116
+ var import_editor_mcp2 = require("@elementor/editor-mcp");
4048
4117
  var import_http_client2 = require("@elementor/http-client");
4049
4118
  var import_schema6 = require("@elementor/schema");
4050
4119
  var import_utils9 = require("@elementor/utils");
@@ -4210,7 +4279,7 @@ function getValidElementTypes() {
4210
4279
  }, []);
4211
4280
  }
4212
4281
  var generatePrompt = () => {
4213
- const saveAsComponentPrompt = (0, import_editor_mcp.toolPrompts)("save-as-component");
4282
+ const saveAsComponentPrompt = (0, import_editor_mcp2.toolPrompts)("save-as-component");
4214
4283
  saveAsComponentPrompt.description(`
4215
4284
  Save an existing element as a reusable component in the Elementor editor.
4216
4285
 
@@ -4354,7 +4423,7 @@ Component with overridable properties:
4354
4423
  return saveAsComponentPrompt.prompt();
4355
4424
  };
4356
4425
  var initSaveAsComponentTool = () => {
4357
- return (0, import_editor_mcp.getMCPByDomain)("components").addTool({
4426
+ return (0, import_editor_mcp2.getMCPByDomain)("components").addTool({
4358
4427
  name: "save-as-component",
4359
4428
  schema: InputSchema,
4360
4429
  outputSchema: OutputSchema,
@@ -4365,7 +4434,7 @@ var initSaveAsComponentTool = () => {
4365
4434
 
4366
4435
  // src/mcp/index.ts
4367
4436
  function initMcp() {
4368
- const { setMCPDescription } = (0, import_editor_mcp2.getMCPByDomain)("components");
4437
+ const { setMCPDescription } = (0, import_editor_mcp3.getMCPByDomain)("components");
4369
4438
  setMCPDescription(
4370
4439
  `Elementor Editor Components MCP - Tools for creating and managing reusable components.
4371
4440
  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.`
@@ -4374,10 +4443,10 @@ function initMcp() {
4374
4443
  }
4375
4444
 
4376
4445
  // src/populate-store.ts
4377
- var import_react17 = require("react");
4446
+ var import_react18 = require("react");
4378
4447
  var import_store63 = require("@elementor/store");
4379
4448
  function PopulateStore() {
4380
- (0, import_react17.useEffect)(() => {
4449
+ (0, import_react18.useEffect)(() => {
4381
4450
  (0, import_store63.__dispatch)(loadComponents());
4382
4451
  }, []);
4383
4452
  return null;
@@ -4388,11 +4457,11 @@ var import_editor_elements18 = require("@elementor/editor-elements");
4388
4457
  var import_editor_notifications3 = require("@elementor/editor-notifications");
4389
4458
  var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
4390
4459
  var import_store64 = require("@elementor/store");
4391
- var import_i18n25 = require("@wordpress/i18n");
4460
+ var import_i18n26 = require("@wordpress/i18n");
4392
4461
  var COMPONENT_TYPE = "e-component";
4393
4462
  var COMPONENT_CIRCULAR_NESTING_ALERT = {
4394
4463
  type: "default",
4395
- message: (0, import_i18n25.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
4464
+ message: (0, import_i18n26.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
4396
4465
  id: "circular-component-nesting-blocked"
4397
4466
  };
4398
4467
  function initCircularNestingPrevention() {
@@ -4733,7 +4802,7 @@ function init() {
4733
4802
  window.elementorCommon.__beforeSave = beforeSave;
4734
4803
  (0, import_editor_elements_panel.injectTab)({
4735
4804
  id: "components",
4736
- label: (0, import_i18n26.__)("Components", "elementor"),
4805
+ label: (0, import_i18n27.__)("Components", "elementor"),
4737
4806
  component: Components
4738
4807
  });
4739
4808
  (0, import_editor.injectIntoTop)({