@heymantle/litho 0.0.1

package/dist/esm/components/DropZone.js

@@ -0,0 +1,537 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { tv } from "tailwind-variants";
+import { Button, Icon, InlineError, Label, Link, SkeletonText, Spinner, Text } from "../index.js";
+import { CancelMajor, CircleAlertMajor, FileMinor, ImageMajor, ImagesMajor } from "@shopify/polaris-icons";
+var dropZoneStyles = tv({
+    base: "Litho-DropZone w-full flex items-center justify-center p-4 border border-form-border border-dashed rounded-md focus:outline-hidden",
+    variants: {
+        uploading: {
+            true: "bg-form-bg-disabled",
+            false: ""
+        },
+        disabled: {
+            true: "pointer-events-none user-select-none",
+            false: "cursor-pointer bg-form-bg hover:bg-form-bg-hover"
+        },
+        hasFocusWithin: {
+            true: "ring ring-form-focus border-form-border-focus",
+            false: ""
+        },
+        dragOver: {
+            true: "bg-form-bg-hover border-form-border-focus ring ring-form-focus",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        disabled: false,
+        uploading: false,
+        dragOver: false
+    }
+});
+/**
+ * DropZone component for handling file uploads with previews.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - The ID for the DropZone input.
+ * @param {string} [props.label] - Label for the DropZone.
+ * @param {boolean} [props.labelHidden] - Whether the label is hidden.
+ * @param {Object} [props.labelAction] - Action for the label, including `onAction` and `content`.
+ * @param {string} [props.tooltip] - Tooltip for the label.
+ * @param {string} [props.labelVariant] - Variant for the label styling.
+ * @param {string} [props.type="file"] - The type of files accepted (e.g., "file", "image").
+ * @param {string|string[]} [props.accept] - Accepted file types.
+ * @param {boolean} [props.allowMultiple=false] - Whether multiple files can be uploaded.
+ * @param {boolean} [props.showDropZoneWhenDisabled=true] - Whether the DropZone is shown when disabled.
+ * @param {boolean} [props.disabled] - Whether the DropZone is disabled.
+ * @param {Function} [props.onDrop] - Callback for when files are dropped.
+ * @param {Function} [props.onDropAccepted] - Callback for accepted files.
+ * @param {Function} [props.onDropRejected] - Callback for rejected files.
+ * @param {string} [props.helpText] - Help text displayed below the DropZone.
+ * @param {string} [props.error] - Error message to display.
+ * @param {boolean} [props.uploading=false] - Whether a file upload is in progress.
+ * @param {Array} [props.uploadedFiles=[]] - Array of uploaded files.
+ * @param {string} [props.uploadLabel="Drag and drop files or click to upload"] - Label for upload prompt.
+ * @param {string} [props.uploadingLabel="Uploading..."] - Label shown during file uploads.
+ * @param {string} [props.dragLabel="Release to upload"] - Label for the drag area.
+ * @param {boolean} [props.showFilePreview=true] - Whether file previews are displayed.
+ * @param {boolean} [props.previewLoading] - Whether file previews are loading.
+ * @param {number} [props.previewRows=2] - Number of preview rows to display.
+ * @param {Function} [props.onRemove] - Callback for removing a file.
+ * @param {Function} [props.onFilePreviewClick] - Callback for clicking a file preview.
+ * @param {string} [props.filename] - Name of the file being uploaded.
+ * @returns {JSX.Element} DropZone component.
+ */ function DropZone() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _props_accept = props.accept, accept = _props_accept === void 0 ? typeof props.accept === "string" ? [
+        props.accept
+    ] : props.accept : _props_accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
+    var inputRef = useRef(null);
+    var _useState = _sliced_to_array(useState(false), 2), hasFocusWithin = _useState[0], setHasFocusWithin = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), isDraggingOver = _useState1[0], setIsDraggingOver = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), dragFileCount = _useState2[0], setDragFileCount = _useState2[1];
+    var showFilePreview = _showFilePreview && (uploadedFiles.length > 0 || previewLoading);
+    var getTypeSettings = function(type) {
+        switch(type){
+            case "image":
+                return {
+                    accept: accept.length > 0 ? accept : [
+                        "image/*"
+                    ],
+                    icon: allowMultiple ? ImagesMajor : ImageMajor
+                };
+            case "video":
+                return {
+                    accept: accept.length > 0 ? accept : [
+                        "video/*"
+                    ],
+                    icon: allowMultiple ? ImagesMajor : ImageMajor
+                };
+            default:
+                return {
+                    accept: accept.length > 0 ? accept : [
+                        "*/*"
+                    ],
+                    icon: FileMinor
+                };
+        }
+    };
+    var _getTypeSettings = getTypeSettings(type), typeAccept = _getTypeSettings.accept, typeIcon = _getTypeSettings.icon;
+    var disabled = _disabled || uploading || allowMultiple === false && uploadedFiles && uploadedFiles.length > 0;
+    var showDropZone = !previewLoading && (uploading || !disabled || showDropZoneWhenDisabled);
+    var dropAreaClasses = dropZoneStyles({
+        uploading: uploading,
+        disabled: disabled,
+        hasFocusWithin: hasFocusWithin && !disabled,
+        dragOver: isDraggingOver && !disabled
+    });
+    var handleDragOver = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled) {
+            setIsDraggingOver(true);
+            setDragFileCount(event.dataTransfer.items.length);
+        }
+    };
+    var handleDragLeave = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDraggingOver(false);
+        setDragFileCount(0);
+    };
+    var handleDrop = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDraggingOver(false);
+        setDragFileCount(0);
+        if (disabled) return;
+        var droppedFiles = Array.from(event.dataTransfer.files);
+        var acceptedFiles = [];
+        var rejectedFiles = [];
+        droppedFiles.forEach(function(file) {
+            var isValidType = typeAccept.length === 0 || typeAccept.some(function(type) {
+                if (type.endsWith("/*")) {
+                    return file.type.startsWith("".concat(type.split("/")[0], "/"));
+                }
+                return file.type === type;
+            });
+            var isValid = isValidType;
+            if (isValid) {
+                acceptedFiles.push(file);
+            } else {
+                rejectedFiles.push(file);
+            }
+        });
+        if (onDrop) {
+            onDrop(droppedFiles);
+        }
+        if (onDropAccepted && acceptedFiles.length > 0) {
+            onDropAccepted(acceptedFiles);
+        }
+        if (onDropRejected && rejectedFiles.length > 0) {
+            onDropRejected(rejectedFiles);
+        }
+    };
+    var handleFileChange = function(event) {
+        var selectedFiles = Array.from(event.target.files);
+        var acceptedFiles = [];
+        var rejectedFiles = [];
+        selectedFiles.forEach(function(file) {
+            var isValidType = typeAccept.length === 0 || typeAccept.some(function(type) {
+                if (type.endsWith("/*")) {
+                    return file.type.startsWith("".concat(type.split("/")[0], "/"));
+                }
+                return file.type === type;
+            });
+            var isValid = isValidType;
+            if (isValid) {
+                acceptedFiles.push(file);
+            } else {
+                rejectedFiles.push(file);
+            }
+        });
+        if (onDrop) {
+            onDrop(selectedFiles);
+        }
+        if (onDropAccepted && acceptedFiles.length > 0) {
+            onDropAccepted(acceptedFiles);
+        }
+        if (onDropRejected && rejectedFiles.length > 0) {
+            onDropRejected(rejectedFiles);
+        }
+    };
+    var handleKeyDown = function(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (inputRef.current) {
+                inputRef.current.click();
+            }
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "Litho-DropZone flex flex-col gap-2",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-1",
+                children: [
+                    label && !labelHidden && /*#__PURE__*/ _jsxs("div", {
+                        className: "flex justify-between items-end",
+                        children: [
+                            /*#__PURE__*/ _jsx(Label, {
+                                id: id,
+                                hidden: labelHidden,
+                                disabled: disabled,
+                                tooltip: tooltip,
+                                variant: labelVariant,
+                                children: label
+                            }),
+                            labelAction && /*#__PURE__*/ _jsx(Link, {
+                                onClick: labelAction.onAction,
+                                removeUnderline: true,
+                                children: labelAction.content
+                            })
+                        ]
+                    }),
+                    showDropZone && /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: dropAreaClasses,
+                                tabIndex: 0,
+                                onFocus: function() {
+                                    return setHasFocusWithin(true);
+                                },
+                                onBlur: function() {
+                                    return setHasFocusWithin(false);
+                                },
+                                onKeyDown: function(e) {
+                                    return handleKeyDown(e);
+                                },
+                                onDragOver: handleDragOver,
+                                onDragLeave: handleDragLeave,
+                                onDrop: handleDrop,
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        ref: inputRef,
+                                        id: id,
+                                        type: "file",
+                                        accept: typeAccept,
+                                        multiple: allowMultiple,
+                                        disabled: disabled || uploading,
+                                        className: "hidden",
+                                        onBlur: function() {
+                                            return setHasFocusWithin(false);
+                                        },
+                                        onChange: handleFileChange
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center justify-center gap-2",
+                                        children: [
+                                            uploading ? /*#__PURE__*/ _jsx(Spinner, {
+                                                size: "small"
+                                            }) : /*#__PURE__*/ _jsx(Icon, {
+                                                source: typeIcon,
+                                                color: disabled ? "disabled" : "subdued"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                fontWeight: "medium",
+                                                color: disabled ? "disabled" : "subdued",
+                                                children: uploading ? uploadingLabel : isDraggingOver ? "".concat(dragLabel, " ").concat(dragFileCount, " file").concat(dragFileCount !== 1 ? "s" : "") : uploadLabel
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            error && /*#__PURE__*/ _jsx(InlineError, {
+                                message: error,
+                                icon: CircleAlertMajor
+                            }),
+                            helpText && /*#__PURE__*/ _jsx(Text, {
+                                color: "subdued",
+                                children: helpText
+                            })
+                        ]
+                    })
+                ]
+            }),
+            showFilePreview && /*#__PURE__*/ _jsx(FilePreview, {
+                files: uploadedFiles,
+                loading: previewLoading,
+                previewRows: allowMultiple ? previewRows : 1,
+                onRemove: onRemove,
+                filename: filename,
+                onClick: onFilePreviewClick
+            })
+        ]
+    });
+}
+var previewContainerStyles = tv({
+    base: "flex flex-col",
+    variants: {
+        onClick: {
+            true: "",
+            false: "gap-2"
+        },
+        display: {
+            column: "",
+            row: "@lg:flex-row @lg:overflow-x-auto"
+        }
+    }
+});
+var previewStyles = tv({
+    base: "flex gap-2 items-center shrink",
+    variants: {
+        onClick: {
+            true: "cursor-pointer p-1 pr-3 rounded-md hover"
+        }
+    }
+});
+/**
+ * FilePreview component for displaying file preview thumbnails.
+ *
+ * @param {Object} props - Component props.
+ * @param {Array} [props.files] - Array of file objects to preview.
+ * @param {boolean} [props.loading] - Whether the file previews are loading.
+ * @param {number} [props.previewRows=2] - Number of preview rows to display.
+ * @param {Function} [props.onRemove] - Callback for removing a file.
+ * @param {Function} [props.onClick] - Callback for clicking a file preview.
+ * @param {string} [props.filename] - Name of the file being uploaded.
+ * @returns {JSX.Element} FilePreview component.
+ */ function FilePreview() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var files = props.files, onRemove = props.onRemove, loading = props.loading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onClick = props.onClick, filename = props.filename, _props_display = props.display, display = _props_display === void 0 ? "column" : _props_display;
+    var previewContainerClasses = previewContainerStyles({
+        onClick: !!onClick,
+        display: display
+    });
+    var previewClasses = previewStyles({
+        onClick: !!onClick
+    });
+    if (loading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-2",
+            children: _to_consumable_array(Array(previewRows)).map(function(_, index) {
+                return /*#__PURE__*/ _jsxs("div", {
+                    className: "flex justify-between items-center gap-2",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-2 items-center shrink",
+                            children: [
+                                /*#__PURE__*/ _jsx(FileThumbnail, {
+                                    loading: true
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "w-20",
+                                    children: /*#__PURE__*/ _jsx(SkeletonText, {
+                                        lines: 2,
+                                        gap: "small"
+                                    })
+                                })
+                            ]
+                        }),
+                        onRemove && /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            icon: CancelMajor,
+                            disabled: true,
+                            className: "shrink-0 opacity-30"
+                        })
+                    ]
+                }, index);
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: previewContainerClasses,
+        children: files.map(function(file, index) {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "flex justify-between items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: previewClasses,
+                        onClick: onClick ? function() {
+                            return onClick(file);
+                        } : undefined,
+                        children: [
+                            /*#__PURE__*/ _jsx(FileThumbnail, {
+                                file: file
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: display === "row" ? "@lg:max-w-32" : "",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        fontWeight: "medium",
+                                        truncate: true,
+                                        children: filename || file.fileName
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        truncate: true,
+                                        variant: "bodySm",
+                                        children: formatFileSize(file.fileSize)
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    onRemove && /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        icon: CancelMajor,
+                        tooltip: "Remove",
+                        onClick: function() {
+                            return onRemove(file.fileKey);
+                        },
+                        className: "shrink-0"
+                    })
+                ]
+            }, "file-".concat(index));
+        })
+    });
+}
+DropZone.FilePreview = FilePreview;
+var thumbnailSizeStyles = tv({
+    base: "Litho-FileThumbnail h-9 w-9 shrink-0 flex items-center justify-center rounded-md bg-tint-2 dark:bg-tint-alt-2 overflow-hidden bg-cover bg-center border border-tint-4 dark:border-tint-alt-4"
+});
+/**
+ * FileThumbnail component for displaying a file thumbnail or spinner.
+ *
+ * @param {Object} props - Component props.
+ * @param {Object} [props.file] - File object to display.
+ * @param {boolean} [props.loading] - Whether the thumbnail is loading.
+ * @returns {JSX.Element} FileThumbnail component.
+ */ function FileThumbnail() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _file_fileType, _file_fileType1;
+    var file = props.file, loading = props.loading;
+    var _useState = _sliced_to_array(useState(file === null || file === void 0 ? void 0 : file.url), 2), imagePreview = _useState[0], setImagePreview = _useState[1];
+    var thumbnailClasses = thumbnailSizeStyles();
+    useEffect(function() {
+        var _file_fileType;
+        if (file && !imagePreview && !file.url && ((_file_fileType = file.fileType) === null || _file_fileType === void 0 ? void 0 : _file_fileType.startsWith("image"))) {
+            var reader = new FileReader();
+            reader.onloadend = function() {
+                setImagePreview(reader.result);
+            };
+            reader.readAsDataURL(file.file);
+        }
+    }, [
+        file
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        className: thumbnailClasses,
+        style: (file === null || file === void 0 ? void 0 : (_file_fileType = file.fileType) === null || _file_fileType === void 0 ? void 0 : _file_fileType.startsWith("image")) ? {
+            backgroundImage: "url(".concat(imagePreview, ")")
+        } : {},
+        children: loading ? /*#__PURE__*/ _jsx(Spinner, {
+            size: "small",
+            color: "subdued"
+        }) : file && !((_file_fileType1 = file.fileType) === null || _file_fileType1 === void 0 ? void 0 : _file_fileType1.startsWith("image")) && /*#__PURE__*/ _jsx(Icon, {
+            source: FileMinor,
+            color: "subdued"
+        })
+    });
+}
+DropZone.FileThumbnail = FileThumbnail;
+/**
+ * Formats a file size into a human-readable string.
+ *
+ * @param {number} fileSize - Size of the file in bytes.
+ * @returns {string} Formatted file size (e.g., "1.2 MB").
+ */ var formatFileSize = function(fileSize) {
+    if (typeof fileSize !== "number" || isNaN(fileSize)) {
+        return "0 Bytes";
+    }
+    var units = [
+        "Bytes",
+        "KB",
+        "MB",
+        "GB",
+        "TB"
+    ];
+    var index = 0;
+    while(fileSize >= 1024 && index < units.length - 1){
+        fileSize /= 1024;
+        index++;
+    }
+    return "".concat(fileSize.toFixed(1), " ").concat(units[index]);
+};
+DropZone.formatFileSize = formatFileSize;
+export default DropZone;

package/dist/esm/components/EmptyState.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Image, Text, ProgressBar } from "../index.js";
+import { tv } from "tailwind-variants";
+var styles = tv({
+    base: "Litho-EmptyState py-16 px-4 flex flex-col items-center text-center gap-6"
+});
+/**
+ * EmptyState component for displaying a structured layout with a title, description,
+ * icon, and action buttons when no content is available.
+ *
+ * @param {Object} props - The properties to customize the EmptyState component.
+ * @param {string} [props.description] - Text description to display in the empty state.
+ * @param {React.ReactNode} [props.icon] - React node to render a custom icon.
+ * @param {string} [props.iconSource] - Image source URL to display an icon.
+ * @param {Object} [props.primaryAction] - Primary action button configuration.
+ * @param {string} props.primaryAction.content - Label for the primary button.
+ * @param {function} props.primaryAction.onAction - Callback function for the primary action button click.
+ * @param {boolean} [props.primaryAction.disabled=false] - Disable state for the primary action button.
+ * @param {boolean} [props.primaryAction.loading=false] - Loading state for the primary action button.
+ * @param {boolean} [props.primaryAction.external=false] - Whether the primary action button should open in a new tab.
+ * @param {Object} [props.secondaryAction] - Secondary action button configuration.
+ * @param {string} props.secondaryAction.content - Label for the secondary button.
+ * @param {function} props.secondaryAction.onAction - Callback function for the secondary action button click.
+ * @param {boolean} [props.secondaryAction.disabled=false] - Disable state for the secondary action button.
+ * @param {boolean} [props.secondaryAction.loading=false] - Loading state for the secondary action button.
+ * @param {boolean} [props.secondaryAction.external=false] - Whether the secondary action button should open in a new tab.
+ * @param {string} [props.title] - Title text to display in the empty state.
+ * @param {string} [props.titleVariant="headingXl"] - Typography variant for the title, default is "headingXl".
+ * @param {string} [props.descriptionVariant="bodyLg"] - Typography variant for the description, default is "bodyLg".
+ * @param {number} [props.progress] - Progress value to display in the empty state.
+ *
+ * @returns {JSX.Element} The rendered EmptyState component.
+ */ function EmptyState() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress;
+    var classes = styles();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        children: [
+            iconSource && /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center justify-center w-16 h-16",
+                children: /*#__PURE__*/ _jsx(Image, {
+                    source: iconSource
+                })
+            }),
+            icon && /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center justify-center",
+                children: icon
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col items-center gap-4",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col items-center gap-2 max-w-112",
+                        children: [
+                            title && /*#__PURE__*/ _jsx(Text, {
+                                variant: titleVariant,
+                                children: title
+                            }),
+                            description && /*#__PURE__*/ _jsx(Text, {
+                                variant: descriptionVariant,
+                                color: "subdued",
+                                children: description
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex gap-3",
+                        children: [
+                            primaryAction && /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                onClick: primaryAction.onAction,
+                                disabled: primaryAction.disabled,
+                                url: primaryAction.url,
+                                external: primaryAction.external,
+                                loading: primaryAction.loading,
+                                children: primaryAction.content
+                            }),
+                            secondaryAction && /*#__PURE__*/ _jsx(Button, {
+                                onClick: secondaryAction.onAction,
+                                url: secondaryAction.url,
+                                external: secondaryAction.external,
+                                disabled: secondaryAction.disabled,
+                                loading: secondaryAction.loading,
+                                children: secondaryAction.content
+                            })
+                        ]
+                    }),
+                    progress !== undefined && progress !== null && /*#__PURE__*/ _jsx("div", {
+                        className: "w-full",
+                        children: /*#__PURE__*/ _jsx(ProgressBar, {
+                            animated: true,
+                            progress: progress
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default EmptyState;