infinity-ui-elements 1.8.12 → 1.8.14

package/dist/index.esm.js

@@ -61,6 +61,14 @@ const iconRegistry = {
     close: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M18 6L6 18M6 6L18 18" stroke="#081416" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`,
+    upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19ZM13 9V16H11V9H6L12 3L18 9H13Z" fill="#081416"/>
+</svg>
+`,
+    file: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1111 21H4.88889C4.39797 21 4 20.5971 4 20.1V3.9C4 3.40295 4.39797 3 4.88889 3H19.1111C19.602 3 20 3.40295 20 3.9V20.1C20 20.5971 19.602 21 19.1111 21ZM18.2222 19.2V4.8H5.77778V19.2H18.2222ZM8.44444 9.3H15.5556V11.1H8.44444V9.3ZM8.44444 12.9H15.5556V14.7H8.44444V12.9Z" fill="#081416"/>
+</svg>
+`,
 };
 const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
     const svgContent = iconRegistry[name];
@@ -3421,6 +3429,208 @@ const Skeleton = React.forwardRef(({ className, containerClassName, containerSty
 });
 Skeleton.displayName = "Skeleton";
 
+const selectTriggerVariants = cva("flex items-center gap-1 transition-all font-display font-size-100 leading-100", {
+    variants: {
+        size: {
+            small: "px-2 text-xs",
+            medium: "px-2 text-sm",
+            large: "px-3 text-base",
+        },
+        validationState: {
+            none: "",
+            positive: "",
+            negative: "",
+        },
+        isDisabled: {
+            true: "opacity-60 cursor-not-allowed",
+            false: "cursor-pointer hover:opacity-80",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+    },
+});
+const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
+    const [uncontrolledTextValue, setUncontrolledTextValue] = React.useState(defaultTextValue || "");
+    const [uncontrolledSelectValue, setUncontrolledSelectValue] = React.useState(defaultSelectValue);
+    const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+    const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
+    const selectRef = React.useRef(null);
+    const dropdownContainerRef = React.useRef(null);
+    const componentRef = React.useRef(null);
+    const textValue = controlledTextValue !== undefined
+        ? controlledTextValue
+        : uncontrolledTextValue;
+    const selectValue = controlledSelectValue !== undefined
+        ? controlledSelectValue
+        : uncontrolledSelectValue;
+    // Find the selected option
+    const selectedOption = selectOptions.find((opt) => opt.value === selectValue);
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const handleTextChange = (e) => {
+        const newValue = e.target.value;
+        if (onTextChange) {
+            onTextChange(newValue);
+        }
+        else {
+            setUncontrolledTextValue(newValue);
+        }
+    };
+    const handleSelectOpenChange = (newOpen) => {
+        if (!isDisabled) {
+            setIsSelectOpen(newOpen);
+        }
+    };
+    const toggleSelectOpen = () => {
+        handleSelectOpenChange(!isSelectOpen);
+    };
+    const handleSelect = (option) => {
+        if (controlledSelectValue === undefined) {
+            setUncontrolledSelectValue(option.value);
+        }
+        onSelectChange?.(option.value, option);
+        setIsSelectOpen(false);
+    };
+    const updateDropdownPlacement = React.useCallback(() => {
+        if (typeof window === "undefined")
+            return;
+        const trigger = selectRef.current;
+        if (!trigger)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const dropdownHeight = dropdownContainerRef.current
+            ? dropdownContainerRef.current.offsetHeight
+            : 0;
+        if (dropdownHeight === 0) {
+            setDropdownPlacement(spaceBelow >= spaceAbove ? "bottom" : "top");
+            return;
+        }
+        if (spaceBelow >= dropdownHeight || spaceBelow >= spaceAbove) {
+            setDropdownPlacement("bottom");
+        }
+        else {
+            setDropdownPlacement("top");
+        }
+    }, []);
+    const attachDropdownListeners = React.useCallback(() => {
+        if (!isSelectOpen)
+            return;
+        if (typeof window === "undefined")
+            return;
+        let rafId = requestAnimationFrame(updateDropdownPlacement);
+        const handleUpdate = () => updateDropdownPlacement();
+        window.addEventListener("resize", handleUpdate);
+        window.addEventListener("scroll", handleUpdate, true);
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener("resize", handleUpdate);
+            window.removeEventListener("scroll", handleUpdate, true);
+        };
+    }, [isSelectOpen, updateDropdownPlacement]);
+    React.useEffect(() => {
+        const detach = attachDropdownListeners();
+        return () => {
+            detach?.();
+        };
+    }, [attachDropdownListeners]);
+    React.useEffect(() => {
+        if (isSelectOpen) {
+            updateDropdownPlacement();
+        }
+    }, [isSelectOpen, selectOptions.length, updateDropdownPlacement]);
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (selectRef.current &&
+                !selectRef.current.contains(target) &&
+                dropdownContainerRef.current &&
+                !dropdownContainerRef.current.contains(target)) {
+                handleSelectOpenChange(false);
+            }
+        };
+        if (isSelectOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [isSelectOpen]);
+    // Close on escape key
+    React.useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                handleSelectOpenChange(false);
+            }
+        };
+        if (isSelectOpen) {
+            document.addEventListener("keydown", handleEscape);
+            return () => {
+                document.removeEventListener("keydown", handleEscape);
+            };
+        }
+    }, [isSelectOpen]);
+    // Transform options to dropdown menu items
+    const menuItems = selectOptions.map((option) => ({
+        value: option.value,
+        label: option.label ?? String(option.value),
+        description: option.description,
+        leadingIcon: option.leadingIcon,
+        trailingIcon: option.trailingIcon,
+        isDisabled: option.isDisabled,
+        variant: option.variant,
+        onClick: () => handleSelect(option),
+    }));
+    const widthStyle = selectMenuWidth === "full"
+        ? "100%"
+        : selectMenuWidth === "auto"
+            ? "auto"
+            : selectMenuWidth;
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+        },
+        medium: {
+            gap: "gap-2",
+        },
+        large: {
+            gap: "gap-3",
+        },
+    };
+    // Create the select suffix component
+    const selectSuffix = (jsxs("div", { className: "relative flex items-center h-full", children: [jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), "border-l border-action-outline-neutral-faded pl-2 ml-2 h-full flex items-center", selectTriggerClassName), onClick: !isDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": isDisabled, children: [jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: selectedOption?.label || selectPlaceholder }), jsx(ChevronDown, { className: cn("shrink-0 transition-transform", size === "small"
+                            ? "w-3 h-3"
+                            : size === "medium"
+                                ? "w-3.5 h-3.5"
+                                : "w-4 h-4", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : currentValidationState === "positive"
+                                ? "text-feedback-ink-positive-intense"
+                                : currentValidationState === "negative"
+                                    ? "text-feedback-ink-negative-subtle"
+                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 right-0", dropdownPlacement === "bottom"
+                    ? "top-full mt-1"
+                    : "bottom-full mb-1"), children: jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: widthStyle }) }))] }));
+    return (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, suffix: selectSuffix, size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+SelectTextField.displayName = "SelectTextField";
+
 const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-all duration-200", {
     variants: {
         size: {
@@ -4013,5 +4223,356 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+const uploadBoxVariants = cva("relative flex flex-col items-center justify-center border-2 border-dashed rounded-large transition-all font-display", {
+    variants: {
+        size: {
+            small: "min-h-[120px] p-4 gap-2",
+            medium: "min-h-[160px] p-6 gap-3",
+            large: "min-h-[200px] p-8 gap-4",
+        },
+        validationState: {
+            none: `
+          border-action-outline-neutral-faded 
+          hover:border-action-outline-primary-hover 
+          focus-within:border-action-outline-primary-hover 
+          focus-within:ring-2 
+          ring-action-outline-primary-faded-hover
+          bg-surface-fill-neutral-intense`,
+            positive: `
+          border-action-outline-positive-default 
+          focus-within:border-action-outline-positive-hover
+          focus-within:ring-2
+          ring-action-outline-positive-faded-hover
+          bg-surface-fill-neutral-intense`,
+            negative: `
+          border-action-outline-negative-default 
+          focus-within:border-action-outline-negative-hover
+          focus-within:ring-2 
+          ring-action-outline-negative-faded-hover
+          bg-surface-fill-neutral-intense`,
+        },
+        isDisabled: {
+            true: `
+          border-[var(--border-width-thinner)]
+          hover:border-action-outline-neutral-disabled
+          border-action-outline-neutral-disabled
+          bg-surface-fill-neutral-intense 
+          cursor-not-allowed 
+          opacity-60`,
+            false: "cursor-pointer",
+        },
+        isDragging: {
+            true: "border-action-outline-primary-hover bg-action-fill-primary-faded",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+        isDragging: false,
+    },
+});
+const formatFileSize = (bytes) => {
+    if (bytes === 0)
+        return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+};
+const isImageFile = (file, url) => {
+    if (file) {
+        return file.type.startsWith("image/");
+    }
+    if (url) {
+        const lowerUrl = url.toLowerCase();
+        return (lowerUrl.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)(\?.*)?$/i) !== null ||
+            url.match(/data:image\//) !== null);
+    }
+    return false;
+};
+const isPdfFile = (file, url) => {
+    if (file) {
+        return file.type === "application/pdf";
+    }
+    if (url) {
+        return url.toLowerCase().match(/\.pdf(\?.*)?$/i) !== null;
+    }
+    return false;
+};
+const getFileNameFromUrl = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const pathname = urlObj.pathname;
+        const fileName = pathname.split("/").pop() || "file";
+        return decodeURIComponent(fileName);
+    }
+    catch {
+        // If URL parsing fails, try to extract from the string
+        const parts = url.split("/");
+        const lastPart = parts[parts.length - 1] || "file";
+        return decodeURIComponent(lastPart.split("?")[0]);
+    }
+};
+// Component to handle image preview with error fallback
+const ImagePreview = ({ src, alt }) => {
+    const [hasError, setHasError] = React.useState(false);
+    if (hasError) {
+        return (jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium  flex items-center justify-center bg-surface-fill-neutral-subtle", children: jsx(Icon, { name: "file", size: 24, className: "text-surface-ink-neutral-subtle" }) }));
+    }
+    return (jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium overflow-hidden ", children: jsx("img", { src: src, alt: alt, className: "w-full h-full object-cover", onError: () => setHasError(true) }) }));
+};
+const UploadBox = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, accept, multiple = false, maxSize, maxFiles, value, onChange, onFileRemove, containerClassName, labelClassName, uploadAreaClassName, previewClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, uploadText, dragText, showPreview = true, className, ...props }, ref) => {
+    const fileInputRef = React.useRef(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [uploadedFiles, setUploadedFiles] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    // Initialize uploaded files from value prop
+    React.useEffect(() => {
+        if (value) {
+            const filesArray = Array.isArray(value) ? value : [value];
+            const processedFiles = filesArray.map((item) => {
+                if (item instanceof File) {
+                    const uploadedFile = {
+                        file: item,
+                        name: item.name,
+                        size: item.size,
+                        id: `${item.name}-${item.size}-${item.lastModified}`,
+                    };
+                    if (isImageFile(item) && showPreview) {
+                        uploadedFile.preview = URL.createObjectURL(item);
+                    }
+                    return uploadedFile;
+                }
+                else if (typeof item === "string") {
+                    // It's a URL string
+                    const uploadedFile = {
+                        url: item,
+                        name: getFileNameFromUrl(item),
+                        id: `url-${item}-${Date.now()}`,
+                    };
+                    // Always set preview for URLs when showPreview is true
+                    // The rendering logic will determine if it's an image or PDF
+                    if (showPreview) {
+                        uploadedFile.preview = item;
+                    }
+                    return uploadedFile;
+                }
+                else {
+                    // It's already an UploadedFile
+                    const uploadedFile = item;
+                    // If it has a URL but no preview set, set it
+                    if (uploadedFile.url && !uploadedFile.preview && showPreview) {
+                        uploadedFile.preview = uploadedFile.url;
+                    }
+                    return uploadedFile;
+                }
+            });
+            setUploadedFiles(processedFiles);
+        }
+        else {
+            setUploadedFiles([]);
+        }
+    }, [value, showPreview]);
+    // Cleanup preview URLs (only revoke object URLs, not regular URLs)
+    React.useEffect(() => {
+        return () => {
+            uploadedFiles.forEach((uploadedFile) => {
+                // Only revoke object URLs (created with URL.createObjectURL)
+                // Regular URLs (http/https) should not be revoked
+                if (uploadedFile.preview &&
+                    uploadedFile.preview.startsWith("blob:")) {
+                    URL.revokeObjectURL(uploadedFile.preview);
+                }
+            });
+        };
+    }, [uploadedFiles]);
+    const processFiles = (files) => {
+        const fileArray = Array.from(files);
+        const validFiles = [];
+        let currentError = null;
+        // Check max files limit
+        if (maxFiles && uploadedFiles.length + fileArray.length > maxFiles) {
+            currentError = `Maximum ${maxFiles} file(s) allowed`;
+            setError(currentError);
+            return validFiles;
+        }
+        fileArray.forEach((file) => {
+            // Check file size
+            if (maxSize && file.size > maxSize) {
+                currentError = `File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`;
+                setError(currentError);
+                return;
+            }
+            // Check if file type is accepted
+            if (accept) {
+                const acceptedTypes = accept.split(",").map((type) => type.trim());
+                const isAccepted = acceptedTypes.some((type) => {
+                    if (type.startsWith(".")) {
+                        return file.name.toLowerCase().endsWith(type.toLowerCase());
+                    }
+                    if (type.includes("/*")) {
+                        const baseType = type.split("/")[0];
+                        return file.type.startsWith(baseType + "/");
+                    }
+                    return file.type === type;
+                });
+                if (!isAccepted) {
+                    currentError = `File type "${file.type}" is not accepted`;
+                    setError(currentError);
+                    return;
+                }
+            }
+            validFiles.push(file);
+        });
+        if (currentError) {
+            setError(currentError);
+        }
+        else {
+            setError(null);
+        }
+        return validFiles;
+    };
+    const handleFiles = (files) => {
+        if (files.length === 0)
+            return;
+        const newUploadedFiles = files.map((file) => {
+            const uploadedFile = {
+                file,
+                id: `${file.name}-${file.size}-${file.lastModified}-${Date.now()}`,
+            };
+            if (isImageFile(file) && showPreview) {
+                uploadedFile.preview = URL.createObjectURL(file);
+            }
+            return uploadedFile;
+        });
+        const updatedFiles = multiple
+            ? [...uploadedFiles, ...newUploadedFiles]
+            : newUploadedFiles;
+        setUploadedFiles(updatedFiles);
+        // Call onChange with File objects only (filter out URL-only items)
+        if (onChange) {
+            const filesToReturn = updatedFiles
+                .map((uf) => uf.file)
+                .filter((file) => file !== undefined);
+            onChange(multiple ? filesToReturn : filesToReturn[0] || null);
+        }
+    };
+    const handleFileInputChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const validFiles = processFiles(e.target.files);
+            if (validFiles.length > 0) {
+                handleFiles(validFiles);
+            }
+            // Reset input value to allow selecting the same file again
+            e.target.value = "";
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isDisabled) {
+            setIsDragging(true);
+        }
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (isDisabled)
+            return;
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const validFiles = processFiles(e.dataTransfer.files);
+            if (validFiles.length > 0) {
+                handleFiles(validFiles);
+            }
+        }
+    };
+    const handleClick = () => {
+        if (!isDisabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleRemoveFile = (e, uploadedFile) => {
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        // Revoke preview URL if exists
+        if (uploadedFile.preview) {
+            URL.revokeObjectURL(uploadedFile.preview);
+        }
+        const updatedFiles = uploadedFiles.filter((f) => f.id !== uploadedFile.id);
+        setUploadedFiles(updatedFiles);
+        if (onFileRemove) {
+            onFileRemove(uploadedFile);
+        }
+        if (onChange) {
+            // Only return File objects (filter out URL-only items)
+            const filesToReturn = updatedFiles
+                .map((uf) => uf.file)
+                .filter((file) => file !== undefined);
+            onChange(multiple ? filesToReturn : filesToReturn[0] || null);
+        }
+    };
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText || error;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            iconSize: 16,
+            textSize: "text-body-small-medium",
+        },
+        medium: {
+            gap: "gap-2",
+            iconSize: 16,
+            textSize: "text-body-small-medium",
+        },
+        large: {
+            gap: "gap-3",
+            iconSize: 16,
+            textSize: "text-body-small-medium",
+        },
+    };
+    const config = sizeConfig[size];
+    const defaultUploadText = "Click to upload or drag and drop";
+    const defaultDragText = "Drop files here";
+    return (jsxs("div", { ref: ref, className: cn("w-full flex flex-col", config.gap, containerClassName), ...props, children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(uploadBoxVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                    isDragging,
+                }), uploadAreaClassName, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, children: [jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, disabled: isDisabled, onChange: handleFileInputChange, className: "hidden", "aria-label": label || "File upload" }), uploadedFiles.length === 0 ? (jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center", children: [jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-surface-fill-neutral-subtle", children: jsx(Icon, { name: "upload", size: config.iconSize }) }), jsxs("div", { className: "flex flex-col gap-1", children: [jsx(Text, { variant: "body", size: "small", weight: "medium", color: isDisabled ? "disabled" : "default", children: isDragging
+                                            ? dragText || defaultDragText
+                                            : uploadText || defaultUploadText }), accept && (jsxs(Text, { variant: "caption", size: "small", color: isDisabled ? "disabled" : "muted", children: ["Accepted: ", accept] })), maxSize && (jsxs(Text, { variant: "caption", size: "small", color: isDisabled ? "disabled" : "muted", children: ["Max size: ", formatFileSize(maxSize)] }))] })] })) : (jsxs("div", { className: cn("w-full flex flex-col gap-3", previewClassName), children: [uploadedFiles.map((uploadedFile) => {
+                                const { file, url, preview, name, size, id } = uploadedFile;
+                                const fileName = name ||
+                                    file?.name ||
+                                    (url ? getFileNameFromUrl(url) : "Unknown file");
+                                const fileSize = size || file?.size;
+                                const canPreview = showPreview && preview;
+                                const isImage = isImageFile(file, url);
+                                const isPdf = isPdfFile(file, url);
+                                // For URLs, try to show as image if not explicitly a PDF
+                                // If it's a URL without extension, assume it might be an image
+                                // Always try to show URLs as images unless they're explicitly PDFs
+                                const shouldShowAsImage = canPreview && preview && (isImage || (url && !isPdf));
+                                return (jsxs("div", { className: "flex items-start gap-3 p-3 border border-surface-outline-neutral-muted rounded-large bg-surface-fill-neutral-intense", children: [shouldShowAsImage ? (jsx(ImagePreview, { src: preview, alt: fileName })) : canPreview && isPdf ? (jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium border border-action-outline-neutral-faded flex items-center justify-center bg-surface-fill-neutral-subtle", children: jsx(Icon, { name: "file", size: 24, className: "text-surface-ink-neutral-subtle" }) })) : (jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium border border-action-outline-neutral-faded flex items-center justify-center bg-surface-fill-neutral-subtle", children: jsx(Icon, { name: "file", size: 24, className: "text-surface-ink-neutral-subtle" }) })), jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [jsx("div", { className: "flex items-center gap-2", children: jsx(Text, { variant: "body", size: "small", weight: "medium", color: isDisabled ? "disabled" : "default", as: "span", className: "truncate", title: fileName, children: fileName }) }), fileSize !== undefined && (jsx(Text, { variant: "caption", size: "small", color: isDisabled ? "disabled" : "muted", as: "span", children: formatFileSize(fileSize) }))] }), !isDisabled && (jsx(IconButton, { icon: "close", size: "xsmall", onClick: (e) => handleRemoveFile(e, uploadedFile), "aria-label": `Remove ${fileName}` }))] }, id));
+                            }), multiple && !isDisabled && (jsx(Button, { variant: "tertiary", color: "primary", size: "small", onClick: handleClick, leadingIcon: jsx(Icon, { name: "add", size: 16 }), className: "mt-2 w-fit", children: "Add more files" }))] }))] }), jsx(FormFooter, { helperText: displayHelperText || undefined, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+UploadBox.displayName = "UploadBox";
+
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, SelectTextField, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
 //# sourceMappingURL=index.esm.js.map