@elementor/editor-ui 4.1.0-822 → 4.1.0-824

package/dist/index.d.mts

@@ -88,19 +88,19 @@ type DialogContent = {
 declare const openDialog: ({ component }: DialogContent) => void;
 declare const closeDialog: () => void;
 
-type Props$1 = {
+type Props$3 = {
     value: string;
     onSearch: (search: string) => void;
     placeholder: string;
     id?: string;
 } & BoxProps;
-declare const SearchField: ({ value, onSearch, placeholder, id, sx }: Props$1) => React$1.JSX.Element;
+declare const SearchField: ({ value, onSearch, placeholder, id, sx }: Props$3) => React$1.JSX.Element;
 
-type Props = PropsWithChildren<{
+type Props$2 = PropsWithChildren<{
     onSubmit?: () => void;
     'data-testid'?: string;
 }>;
-declare const Form: ({ children, onSubmit, "data-testid": dataTestId }: Props) => React$1.JSX.Element;
+declare const Form: ({ children, onSubmit, "data-testid": dataTestId }: Props$2) => React$1.JSX.Element;
 
 type CtaButtonProps = {
     href: string;
@@ -154,6 +154,24 @@ declare function useFloatingActionsBar(): {
     setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
 };
 
+type Props$1 = {
+    onFileSelected: (file: File) => void;
+    allowedFileTypes: `${string}/${string}`[];
+    accept: string;
+    regionLabel?: string;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    helperText?: string;
+};
+declare const FileUploadDropzone: ({ onFileSelected, allowedFileTypes, accept, regionLabel, primaryLabel, secondaryLabel, helperText, }: Props$1) => React$1.JSX.Element;
+
+type Props = {
+    file: File;
+    onRemove: () => void;
+    statusLabel?: string;
+};
+declare const FileUploadRow: ({ file, onRemove, statusLabel }: Props) => React$1.JSX.Element;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -290,4 +308,4 @@ declare const useTextFieldAutoSelect: () => React$1.RefObject<HTMLInputElement>;
 
 declare const useCanvasClickHandler: (isActive: boolean, onClickAway: (e: MouseEvent) => void) => void;
 
-export { CollapseIcon, CollapsibleContent, type CollapsibleValue, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, getCollapsibleValue, openDialog, useCanvasClickHandler, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };
+export { CollapseIcon, CollapsibleContent, type CollapsibleValue, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FileUploadDropzone, FileUploadRow, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, getCollapsibleValue, openDialog, useCanvasClickHandler, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };

package/dist/index.d.ts

@@ -88,19 +88,19 @@ type DialogContent = {
 declare const openDialog: ({ component }: DialogContent) => void;
 declare const closeDialog: () => void;
 
-type Props$1 = {
+type Props$3 = {
     value: string;
     onSearch: (search: string) => void;
     placeholder: string;
     id?: string;
 } & BoxProps;
-declare const SearchField: ({ value, onSearch, placeholder, id, sx }: Props$1) => React$1.JSX.Element;
+declare const SearchField: ({ value, onSearch, placeholder, id, sx }: Props$3) => React$1.JSX.Element;
 
-type Props = PropsWithChildren<{
+type Props$2 = PropsWithChildren<{
     onSubmit?: () => void;
     'data-testid'?: string;
 }>;
-declare const Form: ({ children, onSubmit, "data-testid": dataTestId }: Props) => React$1.JSX.Element;
+declare const Form: ({ children, onSubmit, "data-testid": dataTestId }: Props$2) => React$1.JSX.Element;
 
 type CtaButtonProps = {
     href: string;
@@ -154,6 +154,24 @@ declare function useFloatingActionsBar(): {
     setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
 };
 
+type Props$1 = {
+    onFileSelected: (file: File) => void;
+    allowedFileTypes: `${string}/${string}`[];
+    accept: string;
+    regionLabel?: string;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    helperText?: string;
+};
+declare const FileUploadDropzone: ({ onFileSelected, allowedFileTypes, accept, regionLabel, primaryLabel, secondaryLabel, helperText, }: Props$1) => React$1.JSX.Element;
+
+type Props = {
+    file: File;
+    onRemove: () => void;
+    statusLabel?: string;
+};
+declare const FileUploadRow: ({ file, onRemove, statusLabel }: Props) => React$1.JSX.Element;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -290,4 +308,4 @@ declare const useTextFieldAutoSelect: () => React$1.RefObject<HTMLInputElement>;
 
 declare const useCanvasClickHandler: (isActive: boolean, onClickAway: (e: MouseEvent) => void) => void;
 
-export { CollapseIcon, CollapsibleContent, type CollapsibleValue, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, getCollapsibleValue, openDialog, useCanvasClickHandler, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };
+export { CollapseIcon, CollapsibleContent, type CollapsibleValue, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FileUploadDropzone, FileUploadRow, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, getCollapsibleValue, openDialog, useCanvasClickHandler, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };

package/dist/index.js

@@ -36,6 +36,8 @@ __export(index_exports, {
   CtaButton: () => CtaButton,
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
+  FileUploadDropzone: () => FileUploadDropzone,
+  FileUploadRow: () => FileUploadRow,
   FloatingActionsBar: () => FloatingActionsBar,
   Form: () => Form,
   GlobalDialog: () => GlobalDialog,
@@ -770,15 +772,103 @@ function useFloatingActionsBar() {
   return context;
 }
 
-// src/components/popover/body.tsx
+// src/components/file-upload/file-upload-dropzone.tsx
 var React19 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_icons8 = require("@elementor/icons");
 var import_ui19 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+var cardSx = {
+  minHeight: 152,
+  border: "2px dashed",
+  borderColor: "divider",
+  borderRadius: 1
+};
+var FileUploadDropzone = ({
+  onFileSelected,
+  allowedFileTypes,
+  accept,
+  regionLabel,
+  primaryLabel,
+  secondaryLabel,
+  helperText
+}) => {
+  const fileInputRef = (0, import_react16.useRef)(null);
+  const { getDropZoneProps } = (0, import_ui19.useUnstableDropZone)({
+    allowedFileTypes,
+    onChange: ({ valid }) => {
+      if (valid[0]) {
+        onFileSelected(valid[0]);
+      }
+    }
+  });
+  const dropZoneProps = getDropZoneProps();
+  const handleBrowseClick = () => fileInputRef.current?.click();
+  const handleFileInputChange = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onFileSelected(file);
+    }
+    event.target.value = "";
+  };
+  return /* @__PURE__ */ React19.createElement(
+    import_ui19.Card,
+    {
+      variant: "outlined",
+      role: "region",
+      "aria-label": regionLabel ?? (0, import_i18n6.__)("File dropzone", "elementor"),
+      onDrop: dropZoneProps.onDrop,
+      onDragEnter: dropZoneProps.onDragEnter,
+      onDragLeave: dropZoneProps.onDragLeave,
+      onDragOver: dropZoneProps.onDragOver,
+      sx: cardSx
+    },
+    /* @__PURE__ */ React19.createElement(import_ui19.Stack, { alignItems: "center", spacing: 1, padding: 3 }, /* @__PURE__ */ React19.createElement(import_icons8.UploadIcon, { fontSize: "medium" }), /* @__PURE__ */ React19.createElement(import_ui19.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui19.Link, { component: "button", type: "button", underline: "always", onClick: handleBrowseClick }, /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "body1", component: "span" }, primaryLabel ?? (0, import_i18n6.__)("Upload file", "elementor"))), /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "body1" }, secondaryLabel ?? (0, import_i18n6.__)("or drag and drop", "elementor"))), helperText ? /* @__PURE__ */ React19.createElement(import_ui19.Typography, { variant: "caption", color: "text.secondary" }, helperText) : null),
+    /* @__PURE__ */ React19.createElement("input", { ref: fileInputRef, type: "file", accept, hidden: true, onChange: handleFileInputChange })
+  );
+};
+
+// src/components/file-upload/file-upload-row.tsx
+var React20 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+var BYTES_PER_KILOBYTE = 1024;
+var cardSx2 = {
+  minHeight: 152,
+  border: "2px dashed",
+  borderColor: "divider",
+  borderRadius: 1
+};
+var formatFileSize = (sizeInBytes) => {
+  const kilobytes = Math.max(1, Math.round(sizeInBytes / BYTES_PER_KILOBYTE));
+  return `${kilobytes}kb`;
+};
+var FileUploadRow = ({ file, onRemove, statusLabel }) => {
+  return /* @__PURE__ */ React20.createElement(import_ui20.Card, { variant: "outlined", sx: cardSx2 }, /* @__PURE__ */ React20.createElement(
+    import_ui20.Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: 2,
+      spacing: 2,
+      minHeight: 152
+    },
+    /* @__PURE__ */ React20.createElement(import_ui20.Stack, { direction: "column", spacing: 0.5, minWidth: 0, flex: 1 }, /* @__PURE__ */ React20.createElement(import_ui20.Typography, { variant: "subtitle2", noWrap: true }, file.name), /* @__PURE__ */ React20.createElement(import_ui20.Typography, { variant: "caption", color: "text.secondary", noWrap: true }, formatFileSize(file.size), " \xB7 ", statusLabel ?? (0, import_i18n7.__)("Complete", "elementor"))),
+    /* @__PURE__ */ React20.createElement(import_ui20.IconButton, { size: "small", onClick: onRemove, "aria-label": (0, import_i18n7.__)("Remove file", "elementor") }, /* @__PURE__ */ React20.createElement(import_icons9.XIcon, { fontSize: "inherit" }))
+  ));
+};
+
+// src/components/popover/body.tsx
+var React21 = __toESM(require("react"));
+var import_ui21 = require("@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__ */ React19.createElement(
-    import_ui19.Box,
+  return /* @__PURE__ */ React21.createElement(
+    import_ui21.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -795,13 +885,13 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/section-popover-body.tsx
-var React20 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 
 // src/contexts/section-context.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var FALLBACK_SECTION_WIDTH = 320;
-var SectionRefContext = (0, import_react16.createContext)(null);
-var useSectionRef = () => (0, import_react16.useContext)(SectionRefContext);
+var SectionRefContext = (0, import_react17.createContext)(null);
+var useSectionRef = () => (0, import_react17.useContext)(SectionRefContext);
 var useSectionWidth = () => {
   const sectionRef = useSectionRef();
   return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
@@ -810,12 +900,12 @@ var useSectionWidth = () => {
 // src/components/popover/section-popover-body.tsx
 var SectionPopoverBody = (props) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React20.createElement(PopoverBody, { ...props, width: sectionWidth });
+  return /* @__PURE__ */ React22.createElement(PopoverBody, { ...props, width: sectionWidth });
 };
 
 // src/components/popover/header.tsx
-var React21 = __toESM(require("react"));
-var import_ui20 = require("@elementor/ui");
+var React23 = __toESM(require("react"));
+var import_ui22 = require("@elementor/ui");
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -824,13 +914,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React21.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React21.createElement(import_ui20.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React21.createElement(import_ui20.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React21.createElement(import_ui20.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React23.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React23.createElement(import_ui22.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React23.createElement(import_ui22.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React23.createElement(import_ui22.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React22 = __toESM(require("react"));
-var import_react17 = require("react");
-var import_ui21 = require("@elementor/ui");
+var React24 = __toESM(require("react"));
+var import_react18 = require("react");
+var import_ui23 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 var ITEM_HEIGHT = 32;
 var LIST_ITEMS_BUFFER = 6;
@@ -857,11 +947,11 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = (0, import_react17.useRef)(null);
+  const containerRef = (0, import_react18.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
-  const theme = (0, import_ui21.useTheme)();
+  const theme = (0, import_ui23.useTheme)();
   const MenuListComponent = CustomMenuList || StyledMenuList;
-  const stickyIndices = (0, import_react17.useMemo)(
+  const stickyIndices = (0, import_react18.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
       if (item.type === "category") {
         categoryIndices.push(index);
@@ -895,12 +985,12 @@ var PopoverMenuList = ({
     rangeExtractor: getActiveItemIndices,
     onChange: onChangeCallback
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     onChangeCallback(virtualizer);
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React22.createElement(import_ui21.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(import_ui23.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React24.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -918,8 +1008,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React22.createElement(
-          import_ui21.MenuSubheader,
+        return /* @__PURE__ */ React24.createElement(
+          import_ui23.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -929,8 +1019,8 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React22.createElement(
-        import_ui21.ListItem,
+      return /* @__PURE__ */ React24.createElement(
+        import_ui23.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -969,7 +1059,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui21.styled)(import_ui21.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui23.styled)(import_ui23.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -999,16 +1089,16 @@ var StyledMenuList = (0, import_ui21.styled)(import_ui21.MenuList)(({ theme }) =
 }));
 
 // src/components/popover/popover-action.tsx
-var React23 = __toESM(require("react"));
-var import_ui22 = require("@elementor/ui");
+var React25 = __toESM(require("react"));
+var import_ui24 = require("@elementor/ui");
 var SIZE3 = "tiny";
 function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
   const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui22.Tooltip, { placement: "top", title }, /* @__PURE__ */ React23.createElement(import_ui22.IconButton, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React23.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React23.createElement(
-    import_ui22.Popover,
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui24.Tooltip, { placement: "top", title }, /* @__PURE__ */ React25.createElement(import_ui24.IconButton, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React25.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React25.createElement(
+    import_ui24.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -1024,14 +1114,14 @@ function PopoverAction({ title, visible = true, icon: Icon, content: PopoverCont
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React23.createElement(PopoverContent, { close: popupState.close })
+    /* @__PURE__ */ React25.createElement(PopoverContent, { close: popupState.close })
   ));
 }
 function useFloatingActionsPopover() {
   const { setOpen } = useFloatingActionsBar();
-  const popupState = (0, import_ui22.usePopupState)({ variant: "popover" });
-  const triggerProps = (0, import_ui22.bindTrigger)(popupState);
-  const popoverProps = (0, import_ui22.bindPopover)(popupState);
+  const popupState = (0, import_ui24.usePopupState)({ variant: "popover" });
+  const triggerProps = (0, import_ui24.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui24.bindPopover)(popupState);
   const onClick = (e) => {
     triggerProps.onClick(e);
     setOpen(true);
@@ -1052,14 +1142,14 @@ function useFloatingActionsPopover() {
 }
 
 // src/components/save-changes-dialog.tsx
-var React24 = __toESM(require("react"));
-var import_react18 = require("react");
-var import_icons8 = require("@elementor/icons");
-var import_ui23 = require("@elementor/ui");
+var React26 = __toESM(require("react"));
+var import_react19 = require("react");
+var import_icons10 = require("@elementor/icons");
+var import_ui25 = require("@elementor/ui");
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React24.createElement(import_ui23.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React24.createElement(
-  import_ui23.DialogTitle,
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React26.createElement(import_ui25.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React26.createElement(
+  import_ui25.DialogTitle,
   {
     id: TITLE_ID,
     display: "flex",
@@ -1067,47 +1157,47 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React24.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React24.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React24.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React24.createElement(import_ui23.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React24.createElement(import_icons8.XIcon, null))
+  /* @__PURE__ */ React26.createElement(import_ui25.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(import_icons10.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React26.createElement(import_ui25.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React26.createElement(import_icons10.XIcon, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React26.createElement(import_ui25.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React26.createElement(import_ui25.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = (0, import_react18.useState)(false);
+  const [isConfirming, setIsConfirming] = (0, import_react19.useState)(false);
   const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React24.createElement(import_ui23.DialogActions, null, cancel && /* @__PURE__ */ React24.createElement(import_ui23.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React24.createElement(import_ui23.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React24.createElement(import_ui23.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React26.createElement(import_ui25.DialogActions, null, cancel && /* @__PURE__ */ React26.createElement(import_ui25.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React26.createElement(import_ui25.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React26.createElement(import_ui25.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
 SaveChangesDialog.ContentText = SaveChangesDialogContentText;
 SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   return { isOpen, open, close };
 };
 
 // src/components/confirmation-dialog.tsx
-var React25 = __toESM(require("react"));
-var import_react19 = require("react");
-var import_icons9 = require("@elementor/icons");
-var import_ui24 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var React27 = __toESM(require("react"));
+var import_react20 = require("react");
+var import_icons11 = require("@elementor/icons");
+var import_ui26 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React25.createElement(import_ui24.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "sm" }, children);
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React27.createElement(import_ui26.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "sm" }, children);
 var ConfirmationDialogTitle = ({
   children,
-  icon: Icon = import_icons9.AlertOctagonFilledIcon,
+  icon: Icon = import_icons11.AlertOctagonFilledIcon,
   iconColor = "error"
-}) => /* @__PURE__ */ React25.createElement(import_ui24.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React25.createElement(Icon, { color: iconColor }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContent, { sx: { mt: 2 } }, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContentText, { variant: "body2", color: "secondary", ...props });
+}) => /* @__PURE__ */ React27.createElement(import_ui26.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React27.createElement(Icon, { color: iconColor }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React27.createElement(import_ui26.DialogContent, { sx: { mt: 2 } }, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React27.createElement(import_ui26.DialogContentText, { variant: "body2", color: "secondary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
@@ -1115,20 +1205,20 @@ var ConfirmationDialogActions = ({
   confirmLabel,
   color = "error",
   onSuppressMessage,
-  suppressLabel = (0, import_i18n6.__)("Don't show this again", "elementor")
+  suppressLabel = (0, import_i18n8.__)("Don't show this again", "elementor")
 }) => {
-  const [dontShowAgain, setDontShowAgain] = (0, import_react19.useState)(false);
+  const [dontShowAgain, setDontShowAgain] = (0, import_react20.useState)(false);
   const handleConfirm = () => {
     if (dontShowAgain && onSuppressMessage) {
       onSuppressMessage();
     }
     onConfirm();
   };
-  return /* @__PURE__ */ React25.createElement(import_ui24.DialogActions, { sx: onSuppressMessage ? { justifyContent: "space-between", alignItems: "center" } : void 0 }, onSuppressMessage && /* @__PURE__ */ React25.createElement(
-    import_ui24.FormControlLabel,
+  return /* @__PURE__ */ React27.createElement(import_ui26.DialogActions, { sx: onSuppressMessage ? { justifyContent: "space-between", alignItems: "center" } : void 0 }, onSuppressMessage && /* @__PURE__ */ React27.createElement(
+    import_ui26.FormControlLabel,
     {
-      control: /* @__PURE__ */ React25.createElement(
-        import_ui24.Checkbox,
+      control: /* @__PURE__ */ React27.createElement(
+        import_ui26.Checkbox,
         {
           checked: dontShowAgain,
           onChange: (event) => setDontShowAgain(event.target.checked),
@@ -1136,9 +1226,9 @@ var ConfirmationDialogActions = ({
           color: "secondary"
         }
       ),
-      label: /* @__PURE__ */ React25.createElement(import_ui24.Typography, { variant: "body2", color: "text.secondary" }, suppressLabel)
+      label: /* @__PURE__ */ React27.createElement(import_ui26.Typography, { variant: "body2", color: "text.secondary" }, suppressLabel)
     }
-  ), /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement(import_ui24.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n6.__)("Not now", "elementor")), /* @__PURE__ */ React25.createElement(import_ui24.Button, { autoFocus: true, variant: "contained", color, onClick: handleConfirm, sx: { ml: 1 } }, confirmLabel ?? (0, import_i18n6.__)("Delete", "elementor"))));
+  ), /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement(import_ui26.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n8.__)("Not now", "elementor")), /* @__PURE__ */ React27.createElement(import_ui26.Button, { autoFocus: true, variant: "contained", color, onClick: handleConfirm, sx: { ml: 1 } }, confirmLabel ?? (0, import_i18n8.__)("Delete", "elementor"))));
 };
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
@@ -1146,10 +1236,10 @@ ConfirmationDialog.ContentText = ConfirmationDialogContentText;
 ConfirmationDialog.Actions = ConfirmationDialogActions;
 
 // src/hooks/use-editable.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react20.useState)(false);
-  const [error, setError] = (0, import_react20.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react21.useState)(false);
+  const [error, setError] = (0, import_react21.useState)(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -1231,8 +1321,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const ref = (0, import_react21.useRef)(null);
+  (0, import_react21.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -1257,6 +1347,8 @@ var selectAll = (el) => {
   CtaButton,
   EditableField,
   EllipsisWithTooltip,
+  FileUploadDropzone,
+  FileUploadRow,
   FloatingActionsBar,
   Form,
   GlobalDialog,

package/dist/index.mjs

@@ -732,14 +732,102 @@ function useFloatingActionsBar() {
   return context;
 }
 
-// src/components/popover/body.tsx
+// src/components/file-upload/file-upload-dropzone.tsx
 import * as React19 from "react";
+import { useRef as useRef4 } from "react";
+import { UploadIcon } from "@elementor/icons";
+import { Card as Card3, Link as Link2, Stack as Stack2, Typography as Typography5, useUnstableDropZone } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+var cardSx = {
+  minHeight: 152,
+  border: "2px dashed",
+  borderColor: "divider",
+  borderRadius: 1
+};
+var FileUploadDropzone = ({
+  onFileSelected,
+  allowedFileTypes,
+  accept,
+  regionLabel,
+  primaryLabel,
+  secondaryLabel,
+  helperText
+}) => {
+  const fileInputRef = useRef4(null);
+  const { getDropZoneProps } = useUnstableDropZone({
+    allowedFileTypes,
+    onChange: ({ valid }) => {
+      if (valid[0]) {
+        onFileSelected(valid[0]);
+      }
+    }
+  });
+  const dropZoneProps = getDropZoneProps();
+  const handleBrowseClick = () => fileInputRef.current?.click();
+  const handleFileInputChange = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onFileSelected(file);
+    }
+    event.target.value = "";
+  };
+  return /* @__PURE__ */ React19.createElement(
+    Card3,
+    {
+      variant: "outlined",
+      role: "region",
+      "aria-label": regionLabel ?? __6("File dropzone", "elementor"),
+      onDrop: dropZoneProps.onDrop,
+      onDragEnter: dropZoneProps.onDragEnter,
+      onDragLeave: dropZoneProps.onDragLeave,
+      onDragOver: dropZoneProps.onDragOver,
+      sx: cardSx
+    },
+    /* @__PURE__ */ React19.createElement(Stack2, { alignItems: "center", spacing: 1, padding: 3 }, /* @__PURE__ */ React19.createElement(UploadIcon, { fontSize: "medium" }), /* @__PURE__ */ React19.createElement(Stack2, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React19.createElement(Link2, { component: "button", type: "button", underline: "always", onClick: handleBrowseClick }, /* @__PURE__ */ React19.createElement(Typography5, { variant: "body1", component: "span" }, primaryLabel ?? __6("Upload file", "elementor"))), /* @__PURE__ */ React19.createElement(Typography5, { variant: "body1" }, secondaryLabel ?? __6("or drag and drop", "elementor"))), helperText ? /* @__PURE__ */ React19.createElement(Typography5, { variant: "caption", color: "text.secondary" }, helperText) : null),
+    /* @__PURE__ */ React19.createElement("input", { ref: fileInputRef, type: "file", accept, hidden: true, onChange: handleFileInputChange })
+  );
+};
+
+// src/components/file-upload/file-upload-row.tsx
+import * as React20 from "react";
+import { XIcon as XIcon2 } from "@elementor/icons";
+import { Card as Card4, IconButton as IconButton2, Stack as Stack3, Typography as Typography6 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
+var BYTES_PER_KILOBYTE = 1024;
+var cardSx2 = {
+  minHeight: 152,
+  border: "2px dashed",
+  borderColor: "divider",
+  borderRadius: 1
+};
+var formatFileSize = (sizeInBytes) => {
+  const kilobytes = Math.max(1, Math.round(sizeInBytes / BYTES_PER_KILOBYTE));
+  return `${kilobytes}kb`;
+};
+var FileUploadRow = ({ file, onRemove, statusLabel }) => {
+  return /* @__PURE__ */ React20.createElement(Card4, { variant: "outlined", sx: cardSx2 }, /* @__PURE__ */ React20.createElement(
+    Stack3,
+    {
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: 2,
+      spacing: 2,
+      minHeight: 152
+    },
+    /* @__PURE__ */ React20.createElement(Stack3, { direction: "column", spacing: 0.5, minWidth: 0, flex: 1 }, /* @__PURE__ */ React20.createElement(Typography6, { variant: "subtitle2", noWrap: true }, file.name), /* @__PURE__ */ React20.createElement(Typography6, { variant: "caption", color: "text.secondary", noWrap: true }, formatFileSize(file.size), " \xB7 ", statusLabel ?? __7("Complete", "elementor"))),
+    /* @__PURE__ */ React20.createElement(IconButton2, { size: "small", onClick: onRemove, "aria-label": __7("Remove file", "elementor") }, /* @__PURE__ */ React20.createElement(XIcon2, { fontSize: "inherit" }))
+  ));
+};
+
+// src/components/popover/body.tsx
+import * as React21 from "react";
 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__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(
     Box6,
     {
       display: "flex",
@@ -757,7 +845,7 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/section-popover-body.tsx
-import * as React20 from "react";
+import * as React22 from "react";
 
 // src/contexts/section-context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -772,12 +860,12 @@ var useSectionWidth = () => {
 // src/components/popover/section-popover-body.tsx
 var SectionPopoverBody = (props) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React20.createElement(PopoverBody, { ...props, width: sectionWidth });
+  return /* @__PURE__ */ React22.createElement(PopoverBody, { ...props, width: sectionWidth });
 };
 
 // src/components/popover/header.tsx
-import * as React21 from "react";
-import { CloseButton as CloseButton2, Stack as Stack2, Typography as Typography5 } from "@elementor/ui";
+import * as React23 from "react";
+import { CloseButton as CloseButton2, Stack as Stack4, Typography as Typography7 } from "@elementor/ui";
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -786,12 +874,12 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React21.createElement(Stack2, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React21.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React21.createElement(Stack2, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React21.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React23.createElement(Stack4, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React23.createElement(Typography7, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React23.createElement(Stack4, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React23.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React22 from "react";
-import { useEffect as useEffect8, useMemo, useRef as useRef4 } from "react";
+import * as React24 from "react";
+import { useEffect as useEffect8, useMemo, useRef as useRef5 } from "react";
 import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled5, useTheme } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 var ITEM_HEIGHT = 32;
@@ -819,7 +907,7 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = useRef4(null);
+  const containerRef = useRef5(null);
   const scrollTop = useScrollTop({ containerRef });
   const theme = useTheme();
   const MenuListComponent = CustomMenuList || StyledMenuList;
@@ -862,7 +950,7 @@ var PopoverMenuList = ({
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React22.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React24.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -880,7 +968,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React22.createElement(
+        return /* @__PURE__ */ React24.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -891,7 +979,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React22.createElement(
+      return /* @__PURE__ */ React24.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -961,15 +1049,15 @@ var StyledMenuList = styled5(MenuList)(({ theme }) => ({
 }));
 
 // src/components/popover/popover-action.tsx
-import * as React23 from "react";
-import { bindPopover, bindTrigger, IconButton as IconButton2, Popover, Tooltip as Tooltip3, usePopupState } from "@elementor/ui";
+import * as React25 from "react";
+import { bindPopover, bindTrigger, IconButton as IconButton3, Popover, Tooltip as Tooltip3, usePopupState } from "@elementor/ui";
 var SIZE3 = "tiny";
 function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
   const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(Tooltip3, { placement: "top", title }, /* @__PURE__ */ React23.createElement(IconButton2, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React23.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(Tooltip3, { placement: "top", title }, /* @__PURE__ */ React25.createElement(IconButton3, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React25.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React25.createElement(
     Popover,
     {
       disableScrollLock: true,
@@ -986,7 +1074,7 @@ function PopoverAction({ title, visible = true, icon: Icon, content: PopoverCont
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React23.createElement(PopoverContent, { close: popupState.close })
+    /* @__PURE__ */ React25.createElement(PopoverContent, { close: popupState.close })
   ));
 }
 function useFloatingActionsPopover() {
@@ -1014,9 +1102,9 @@ function useFloatingActionsPopover() {
 }
 
 // src/components/save-changes-dialog.tsx
-import * as React24 from "react";
+import * as React26 from "react";
 import { useState as useState8 } from "react";
-import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
+import { AlertTriangleFilledIcon, XIcon as XIcon3 } from "@elementor/icons";
 import {
   Button as Button6,
   Dialog as Dialog3,
@@ -1024,12 +1112,12 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle as DialogTitle2,
-  IconButton as IconButton3,
-  Stack as Stack3
+  IconButton as IconButton4,
+  Stack as Stack5
 } from "@elementor/ui";
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React24.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React24.createElement(
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React26.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React26.createElement(
   DialogTitle2,
   {
     id: TITLE_ID,
@@ -1038,11 +1126,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React24.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React24.createElement(Stack3, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React24.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React24.createElement(IconButton3, { onClick: onClose, size: "small" }, /* @__PURE__ */ React24.createElement(XIcon2, null))
+  /* @__PURE__ */ React26.createElement(Stack5, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React26.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React26.createElement(IconButton4, { onClick: onClose, size: "small" }, /* @__PURE__ */ React26.createElement(XIcon3, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React24.createElement(DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React24.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React26.createElement(DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React26.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = useState8(false);
   const { cancel, confirm, discard } = actions;
@@ -1051,7 +1139,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React24.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React24.createElement(Button6, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React24.createElement(Button6, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React24.createElement(Button6, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React26.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React26.createElement(Button6, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React26.createElement(Button6, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React26.createElement(Button6, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -1065,7 +1153,7 @@ var useDialog = () => {
 };
 
 // src/components/confirmation-dialog.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import { useState as useState9 } from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
@@ -1077,18 +1165,18 @@ import {
   DialogContentText as DialogContentText2,
   DialogTitle as DialogTitle3,
   FormControlLabel as FormControlLabel2,
-  Typography as Typography6
+  Typography as Typography8
 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React25.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "sm" }, children);
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React27.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "sm" }, children);
 var ConfirmationDialogTitle = ({
   children,
   icon: Icon = AlertOctagonFilledIcon,
   iconColor = "error"
-}) => /* @__PURE__ */ React25.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React25.createElement(Icon, { color: iconColor }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React25.createElement(DialogContent2, { sx: { mt: 2 } }, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React25.createElement(DialogContentText2, { variant: "body2", color: "secondary", ...props });
+}) => /* @__PURE__ */ React27.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React27.createElement(Icon, { color: iconColor }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React27.createElement(DialogContent2, { sx: { mt: 2 } }, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React27.createElement(DialogContentText2, { variant: "body2", color: "secondary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
@@ -1096,7 +1184,7 @@ var ConfirmationDialogActions = ({
   confirmLabel,
   color = "error",
   onSuppressMessage,
-  suppressLabel = __6("Don't show this again", "elementor")
+  suppressLabel = __8("Don't show this again", "elementor")
 }) => {
   const [dontShowAgain, setDontShowAgain] = useState9(false);
   const handleConfirm = () => {
@@ -1105,10 +1193,10 @@ var ConfirmationDialogActions = ({
     }
     onConfirm();
   };
-  return /* @__PURE__ */ React25.createElement(DialogActions3, { sx: onSuppressMessage ? { justifyContent: "space-between", alignItems: "center" } : void 0 }, onSuppressMessage && /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(DialogActions3, { sx: onSuppressMessage ? { justifyContent: "space-between", alignItems: "center" } : void 0 }, onSuppressMessage && /* @__PURE__ */ React27.createElement(
     FormControlLabel2,
     {
-      control: /* @__PURE__ */ React25.createElement(
+      control: /* @__PURE__ */ React27.createElement(
         Checkbox2,
         {
           checked: dontShowAgain,
@@ -1117,9 +1205,9 @@ var ConfirmationDialogActions = ({
           color: "secondary"
         }
       ),
-      label: /* @__PURE__ */ React25.createElement(Typography6, { variant: "body2", color: "text.secondary" }, suppressLabel)
+      label: /* @__PURE__ */ React27.createElement(Typography8, { variant: "body2", color: "text.secondary" }, suppressLabel)
     }
-  ), /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement(Button7, { color: "secondary", onClick: onClose }, cancelLabel ?? __6("Not now", "elementor")), /* @__PURE__ */ React25.createElement(Button7, { autoFocus: true, variant: "contained", color, onClick: handleConfirm, sx: { ml: 1 } }, confirmLabel ?? __6("Delete", "elementor"))));
+  ), /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement(Button7, { color: "secondary", onClick: onClose }, cancelLabel ?? __8("Not now", "elementor")), /* @__PURE__ */ React27.createElement(Button7, { autoFocus: true, variant: "contained", color, onClick: handleConfirm, sx: { ml: 1 } }, confirmLabel ?? __8("Delete", "elementor"))));
 };
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
@@ -1127,7 +1215,7 @@ ConfirmationDialog.ContentText = ConfirmationDialogContentText;
 ConfirmationDialog.Actions = ConfirmationDialogActions;
 
 // src/hooks/use-editable.ts
-import { useEffect as useEffect9, useRef as useRef5, useState as useState10 } from "react";
+import { useEffect as useEffect9, useRef as useRef6, useState as useState10 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   const [isEditing, setIsEditing] = useState10(false);
   const [error, setError] = useState10(null);
@@ -1212,7 +1300,7 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useEffect9(() => {
     if (isEditing) {
       selectAll(ref.current);
@@ -1237,6 +1325,8 @@ export {
   CtaButton,
   EditableField,
   EllipsisWithTooltip,
+  FileUploadDropzone,
+  FileUploadRow,
   FloatingActionsBar,
   Form,
   GlobalDialog,

package/package.json

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

package/src/components/file-upload/file-upload-dropzone.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { UploadIcon } from '@elementor/icons';
+import { Card, Link, Stack, Typography, useUnstableDropZone } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const cardSx = {
+	minHeight: 152,
+	border: '2px dashed',
+	borderColor: 'divider',
+	borderRadius: 1,
+};
+
+type Props = {
+	onFileSelected: ( file: File ) => void;
+	allowedFileTypes: `${ string }/${ string }`[];
+	accept: string;
+	regionLabel?: string;
+	primaryLabel?: string;
+	secondaryLabel?: string;
+	helperText?: string;
+};
+
+export const FileUploadDropzone = ( {
+	onFileSelected,
+	allowedFileTypes,
+	accept,
+	regionLabel,
+	primaryLabel,
+	secondaryLabel,
+	helperText,
+}: Props ) => {
+	const fileInputRef = useRef< HTMLInputElement >( null );
+
+	const { getDropZoneProps } = useUnstableDropZone( {
+		allowedFileTypes,
+		onChange: ( { valid } ) => {
+			if ( valid[ 0 ] ) {
+				onFileSelected( valid[ 0 ] );
+			}
+		},
+	} );
+
+	const dropZoneProps = getDropZoneProps();
+
+	const handleBrowseClick = () => fileInputRef.current?.click();
+
+	const handleFileInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const file = event.target.files?.[ 0 ];
+		if ( file ) {
+			onFileSelected( file );
+		}
+		event.target.value = '';
+	};
+
+	return (
+		<Card
+			variant="outlined"
+			role="region"
+			aria-label={ regionLabel ?? __( 'File dropzone', 'elementor' ) }
+			onDrop={ dropZoneProps.onDrop }
+			onDragEnter={ dropZoneProps.onDragEnter }
+			onDragLeave={ dropZoneProps.onDragLeave }
+			onDragOver={ dropZoneProps.onDragOver }
+			sx={ cardSx }
+		>
+			<Stack alignItems="center" spacing={ 1 } padding={ 3 }>
+				<UploadIcon fontSize="medium" />
+				<Stack direction="row" spacing={ 0.5 } alignItems="center">
+					<Link component="button" type="button" underline="always" onClick={ handleBrowseClick }>
+						<Typography variant="body1" component="span">
+							{ primaryLabel ?? __( 'Upload file', 'elementor' ) }
+						</Typography>
+					</Link>
+					<Typography variant="body1">{ secondaryLabel ?? __( 'or drag and drop', 'elementor' ) }</Typography>
+				</Stack>
+				{ helperText ? (
+					<Typography variant="caption" color="text.secondary">
+						{ helperText }
+					</Typography>
+				) : null }
+			</Stack>
+			<input ref={ fileInputRef } type="file" accept={ accept } hidden onChange={ handleFileInputChange } />
+		</Card>
+	);
+};

package/src/components/file-upload/file-upload-row.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { XIcon } from '@elementor/icons';
+import { Card, IconButton, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const BYTES_PER_KILOBYTE = 1024;
+
+const cardSx = {
+	minHeight: 152,
+	border: '2px dashed',
+	borderColor: 'divider',
+	borderRadius: 1,
+};
+
+type Props = {
+	file: File;
+	onRemove: () => void;
+	statusLabel?: string;
+};
+
+const formatFileSize = ( sizeInBytes: number ) => {
+	const kilobytes = Math.max( 1, Math.round( sizeInBytes / BYTES_PER_KILOBYTE ) );
+	return `${ kilobytes }kb`;
+};
+
+export const FileUploadRow = ( { file, onRemove, statusLabel }: Props ) => {
+	return (
+		<Card variant="outlined" sx={ cardSx }>
+			<Stack
+				direction="row"
+				alignItems="center"
+				justifyContent="space-between"
+				padding={ 2 }
+				spacing={ 2 }
+				minHeight={ 152 }
+			>
+				<Stack direction="column" spacing={ 0.5 } minWidth={ 0 } flex={ 1 }>
+					<Typography variant="subtitle2" noWrap>
+						{ file.name }
+					</Typography>
+					<Typography variant="caption" color="text.secondary" noWrap>
+						{ formatFileSize( file.size ) } · { statusLabel ?? __( 'Complete', 'elementor' ) }
+					</Typography>
+				</Stack>
+				<IconButton size="small" onClick={ onRemove } aria-label={ __( 'Remove file', 'elementor' ) }>
+					<XIcon fontSize="inherit" />
+				</IconButton>
+			</Stack>
+		</Card>
+	);
+};

package/src/components/file-upload/index.ts

@@ -0,0 +1,2 @@
+export { FileUploadDropzone } from './file-upload-dropzone';
+export { FileUploadRow } from './file-upload-row';

package/src/index.ts

@@ -18,6 +18,7 @@ export { PromotionPopover } from './components/promotions/promotion-popover';
 export { PromotionChip } from './components/promotions/promotion-chip';
 export { PromotionAlert } from './components/promotions/promotion-alert';
 export { FloatingActionsBar, useFloatingActionsBar } from './components/floating-bar';
+export { FileUploadDropzone, FileUploadRow } from './components/file-upload';
 
 export * from './components/popover';
 export * from './components/save-changes-dialog';