@elementor/editor-ui 4.0.0-549 → 4.0.0-550

package/dist/index.js

@@ -600,24 +600,20 @@ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.create
     role: "dialog",
     "aria-label": "promotion-alert",
     size: "small",
-    sx: { m: 2, mt: 1, mb: 1, pt: 0.25, pb: 1 }
+    sx: { m: 2, mt: 1, pt: 0.5, pb: 0.5 }
   },
   message,
   /* @__PURE__ */ React16.createElement(
-    import_ui16.Box,
+    import_ui16.Button,
     {
-      component: "a",
-      href: upgradeUrl,
+      size: "tiny",
+      variant: "text",
+      color: "promotion",
       target: "_blank",
+      href: upgradeUrl,
       rel: "noopener noreferrer",
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
-        color: "promotion.main"
-      }
+      startIcon: /* @__PURE__ */ React16.createElement(import_icons7.CrownFilledIcon, { fontSize: "tiny" })
     },
-    /* @__PURE__ */ React16.createElement(import_icons7.CrownFilledIcon, { fontSize: "tiny" }),
     (0, import_i18n4.__)("Upgrade now", "elementor")
   )
 );

package/dist/index.mjs

@@ -554,7 +554,7 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
 // src/components/promotion-alert.tsx
 import * as React16 from "react";
 import { CrownFilledIcon as CrownFilledIcon4 } from "@elementor/icons";
-import { Alert as Alert4, Box as Box6 } from "@elementor/ui";
+import { Alert as Alert4, Button as Button4 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.createElement(
   Alert4,
@@ -565,24 +565,20 @@ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.create
     role: "dialog",
     "aria-label": "promotion-alert",
     size: "small",
-    sx: { m: 2, mt: 1, mb: 1, pt: 0.25, pb: 1 }
+    sx: { m: 2, mt: 1, pt: 0.5, pb: 0.5 }
   },
   message,
   /* @__PURE__ */ React16.createElement(
-    Box6,
+    Button4,
     {
-      component: "a",
-      href: upgradeUrl,
+      size: "tiny",
+      variant: "text",
+      color: "promotion",
       target: "_blank",
+      href: upgradeUrl,
       rel: "noopener noreferrer",
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
-        color: "promotion.main"
-      }
+      startIcon: /* @__PURE__ */ React16.createElement(CrownFilledIcon4, { fontSize: "tiny" })
     },
-    /* @__PURE__ */ React16.createElement(CrownFilledIcon4, { fontSize: "tiny" }),
     __4("Upgrade now", "elementor")
   )
 );
@@ -617,13 +613,13 @@ function useFloatingActionsBar() {
 
 // src/components/popover/body.tsx
 import * as React18 from "react";
-import { Box as Box7 } from "@elementor/ui";
+import { Box as Box6 } from "@elementor/ui";
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
   return /* @__PURE__ */ React18.createElement(
-    Box7,
+    Box6,
     {
       display: "flex",
       flexDirection: "column",
@@ -675,7 +671,7 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
 // src/components/popover/menu-list.tsx
 import * as React21 from "react";
 import { useEffect as useEffect8, useMemo, useRef as useRef4 } from "react";
-import { Box as Box8, ListItem, MenuList, MenuSubheader, styled as styled4, useTheme } from "@elementor/ui";
+import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled4, useTheme } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
@@ -796,7 +792,7 @@ var PopoverMenuList = ({
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React21.createElement(Box8, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React21.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -952,7 +948,7 @@ import * as React23 from "react";
 import { useState as useState7 } from "react";
 import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
-  Button as Button4,
+  Button as Button5,
   Dialog as Dialog3,
   DialogActions as DialogActions2,
   DialogContent,
@@ -985,7 +981,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React23.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React23.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React23.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React23.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React23.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React23.createElement(Button5, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React23.createElement(Button5, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React23.createElement(Button5, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -1002,7 +998,7 @@ var useDialog = () => {
 import * as React24 from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
-  Button as Button5,
+  Button as Button6,
   Dialog as Dialog4,
   DialogActions as DialogActions3,
   DialogContent as DialogContent2,
@@ -1020,7 +1016,7 @@ var ConfirmationDialogActions = ({
   onConfirm,
   cancelLabel,
   confirmLabel
-}) => /* @__PURE__ */ React24.createElement(DialogActions3, null, /* @__PURE__ */ React24.createElement(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __5("Not now", "elementor")), /* @__PURE__ */ React24.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __5("Delete", "elementor")));
+}) => /* @__PURE__ */ React24.createElement(DialogActions3, null, /* @__PURE__ */ React24.createElement(Button6, { color: "secondary", onClick: onClose }, cancelLabel ?? __5("Not now", "elementor")), /* @__PURE__ */ React24.createElement(Button6, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __5("Delete", "elementor")));
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
 ConfirmationDialog.ContentText = ConfirmationDialogContentText;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "4.0.0-549",
+  "version": "4.0.0-550",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "4.0.0-549",
+    "@elementor/editor-v1-adapters": "4.0.0-550",
     "@elementor/icons": "^1.63.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/promotion-alert.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CrownFilledIcon } from '@elementor/icons';
-import { Alert, Box } from '@elementor/ui';
+import { Alert, Button } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 type PromotionAlertProps = {
@@ -16,23 +16,19 @@ export const PromotionAlert = ( { message, upgradeUrl }: PromotionAlertProps ) =
 		role="dialog"
 		aria-label="promotion-alert"
 		size="small"
-		sx={ { m: 2, mt: 1, mb: 1, pt: 0.25, pb: 1 } }
+		sx={ { m: 2, mt: 1, pt: 0.5, pb: 0.5 } }
 	>
 		{ message }
-		<Box
-			component="a"
-			href={ upgradeUrl }
+		<Button
+			size={ 'tiny' }
+			variant={ 'text' }
+			color={ 'promotion' }
 			target="_blank"
+			href={ upgradeUrl }
 			rel="noopener noreferrer"
-			sx={ {
-				display: 'flex',
-				alignItems: 'center',
-				gap: 0.5,
-				color: 'promotion.main',
-			} }
+			startIcon={ <CrownFilledIcon fontSize="tiny" /> }
 		>
-			<CrownFilledIcon fontSize="tiny" />
 			{ __( 'Upgrade now', 'elementor' ) }
-		</Box>
+		</Button>
 	</Alert>
 );