@evolve.ui/core-components 1.0.0

package/FileUpload-p_pl9NXr.mjs

@@ -0,0 +1,1706 @@
+import { DotsSixVertical, DotsThreeOutlineVertical, FileArchive, FileCsv, FilePdf, FileText, Files, ImageSquare, ImagesSquare, Paperclip, Trash, UploadSimple } from "./Icons.mjs";
+import { BodyPrimary, BodySecondary, Caption, H4, LabelMini } from "./Typography/Text.mjs";
+import { f as useWindowWidth, l as useWindowIsMobile } from "./windowSizeProvider-sYwAqaOy.mjs";
+import { SubtleLink } from "./Typography/Links.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { Badge } from "./Badge.mjs";
+import { t as Checkbox } from "./ChoiceListItem-BqZ3bIj9.mjs";
+import { formatFileSize } from "./utils/formatFileSize.mjs";
+import { d as builtInErrorCodes, i as UploadValidationProvider, n as useFileValidation, o as resolveContextAwareMessage, s as createMessageContext, t as useImageFilePreviewUrl, u as ACCEPTED_MIME_TYPES } from "./hooks-D4sJ62Xl.mjs";
+import { Tabs } from "./tabs.mjs";
+import { t as Table } from "./Table-M-rANdMt.mjs";
+import { r as MenuItem, t as Menu } from "./Menu-Cxu8CaX1.mjs";
+import { t as ProgressCircle } from "./ProgressCircle-ae8cvZhe.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { breakpoints } from "@evolve.ui/theme-system/themes/common";
+import { useDropzone } from "react-dropzone";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/FileUpload/providers/FileUploadProvider.tsx
+/**
+* React context for file upload state and operations
+* Used by the useFileUploadContext hook
+*/
+const FileUploadContext = createContext(void 0);
+/**
+* Provider component for file upload functionality
+*
+* This provider manages both file state and validation rules:
+* 1. Maintains file state (selected/uploaded files)
+* 2. Provides context for drag/drop operations and file management
+* 3. Wraps children with validation context for enforcing file rules
+*
+* While FileDropzone and FilePreviewList can function as standalone components,
+* using this provider offers coordinated state management when using multiple
+* file upload components together.
+*
+* @example
+* ```tsx
+* <FileUploadProvider
+*   accept="images"
+*   maxFiles={5}
+*   maxSize={2 * 1024 * 1024}
+*   onDropAccepted={(files) => console.log('Accepted:', files)}
+* >
+*   <FileDropzone />
+*   <FilePreviewList />
+* </FileUploadProvider>
+* ```
+*/
+const FileUploadProvider = ({ accept, children, disabled = false, error, initialFiles = [], maxFiles, maxSize, onDrop, onDropAccepted, onDropRejected, onFileDelete, strictValidation, validator }) => {
+	const [files, setFiles] = useState(initialFiles);
+	const value = {
+		accept,
+		disabled,
+		files,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		onFileDelete,
+		setFiles
+	};
+	return /* @__PURE__ */ jsx(UploadValidationProvider, {
+		accept,
+		error,
+		maxFiles,
+		maxSize,
+		strictValidation,
+		validator,
+		children: /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+			value,
+			children
+		})
+	});
+};
+FileUploadProvider.displayName = "FileUploadProvider";
+/**
+* Hook to access the file upload context
+*
+* Provides access to the current files array and operations for
+* managing file uploads within the FileUploadProvider.
+*
+* @throws Error if used outside of a FileUploadProvider
+* @returns The FileUploadContextType object with files array and handlers
+*
+* @example
+* ```tsx
+* const { files, setFiles, onFileDelete } = useFileUploadContext();
+*
+* // Remove a file
+* const handleDelete = (fileToDelete) => {
+*   onFileDelete?.(fileToDelete);
+*   setFiles(files.filter(file => file.name !== fileToDelete.name));
+* };
+* ```
+*/
+const useFileUploadContext = () => {
+	const context = useContext(FileUploadContext);
+	if (!context) throw new Error("useFileUploadContext must be used within FileUploadProvider");
+	return context;
+};
+//#endregion
+//#region src/FileUpload/hooks/upload/useHandleDragEnter/useHandleDragEnter.ts
+const useHandleDragEnter = ({ files, mimeTypes, validation, validator }) => {
+	const { accept, clearAllValidation, formattedMaxSize, getValidationMessage, maxFiles, maxSize, setDragValidationError, validateCustomRules, validateFileCount, validateFileType } = validation;
+	return useCallback((event) => {
+		clearAllValidation();
+		const items = event.dataTransfer.items;
+		if (items.length === 0) return;
+		if (validator) {
+			const file = items[0];
+			const validationResult = validateCustomRules(file);
+			if (validationResult) {
+				const result = validationResult[0];
+				const messageContext = createMessageContext({
+					accept,
+					code: result.code,
+					count: items.length,
+					dragItems: items,
+					formattedMaxSize,
+					maxFiles,
+					maxSize,
+					messageType: "drag"
+				});
+				setDragValidationError({
+					code: result.code,
+					message: resolveContextAwareMessage(result.message, messageContext)
+				});
+				return;
+			}
+		}
+		if (!validateFileCount(files.length, items.length)) {
+			const overflowCount = files.length + items.length - (maxFiles ?? Infinity);
+			const errorCode = "too-many-files";
+			const errorMessage = getValidationMessage({
+				code: errorCode,
+				count: overflowCount,
+				messageType: "drag"
+			});
+			setDragValidationError({
+				code: errorCode,
+				message: errorMessage
+			});
+			return;
+		}
+		const invalidTypeFiles = Array.from(items).filter((item) => {
+			if (!item.type || item.kind === "directory") return false;
+			return !validateFileType(item.type, mimeTypes);
+		});
+		if (invalidTypeFiles.length > 0) {
+			const errorCode = "file-invalid-type";
+			const errorMessage = getValidationMessage({
+				code: errorCode,
+				count: invalidTypeFiles.length,
+				messageType: "drag"
+			});
+			setDragValidationError({
+				code: errorCode,
+				message: errorMessage
+			});
+			return;
+		}
+	}, [
+		files.length,
+		mimeTypes,
+		clearAllValidation,
+		setDragValidationError,
+		getValidationMessage,
+		validateFileCount,
+		maxFiles,
+		validateFileType,
+		validateCustomRules,
+		validator,
+		accept,
+		formattedMaxSize,
+		maxSize
+	]);
+};
+//#endregion
+//#region src/FileUpload/hooks/upload/useHandleDrop/createFileRejectionHelpers.ts
+/**
+* Creates helper functions for processing file rejections and formatting error messages
+* @param validation Validation context containing message formatters and validation rules
+* @returns Object with helper functions for processing file rejections
+*/
+const createRejectionHelpers = (validation) => {
+	const { accept, formattedMaxSize, getValidationMessage, maxFiles, maxSize, strictValidation, validateFileCount } = validation;
+	/**
+	* Ensures an error group exists for the given code, creating one if necessary
+	*
+	* @param errorGroups - Record of existing error groups indexed by error code
+	* @param code - The error code to get or create a group for
+	* @param message - Optional error message to use when creating a new group
+	* @returns The existing or newly created error group for the specified code
+	* @remarks
+	* - Error groups track files that failed with the same error code
+	* - Each group maintains a count of files, file references, and a shared message
+	* - New groups are initialized with empty arrays and zero counts
+	*/
+	const getOrCreateErrorGroup = (errorGroups, code, message) => {
+		if (!(code in errorGroups)) errorGroups[code] = {
+			count: 0,
+			files: [],
+			message: message ?? ""
+		};
+		return errorGroups[code];
+	};
+	return {
+		/**
+		* Formats a human-readable error message for display based on error code and grouped files
+		*
+		* This function handles two types of validation errors:
+		*
+		* 1. System errors (built-in): For standard error codes like 'file-too-large' or 'too-many-files',
+		*    it uses the built-in message system with appropriate pluralization and formatting.
+		*
+		* 2. Custom validator errors: For custom error codes from user-defined validators,
+		*    it enriches the message with context about the rejected files (count, names, etc.).
+		*
+		* Used in two key scenarios:
+		* - Creating consolidated error messages for the UI (one message per error type)
+		* - Formatting individual file rejection messages for callbacks
+		*
+		* @param code - The error code identifying the validation failure
+		* @param error - The error object containing the message (string or function)
+		* @param errorGroups - Record of grouped errors with counts and file references
+		* @returns A formatted, human-readable error message ready for display
+		*/
+		getFormattedErrorGroupMessage: (code, error, errorGroups) => {
+			const isSystemError = builtInErrorCodes.includes(code);
+			const errorGroup = errorGroups[code];
+			if (isSystemError) return getValidationMessage({
+				code,
+				count: errorGroup.count,
+				messageType: "drop"
+			});
+			const messageContext = createMessageContext({
+				accept,
+				code,
+				count: errorGroup.count,
+				dropFiles: errorGroup.files,
+				formattedMaxSize,
+				maxFiles,
+				maxSize,
+				messageType: "drop"
+			});
+			return resolveContextAwareMessage(error.message, messageContext);
+		},
+		getOrCreateErrorGroup,
+		/**
+		* Handles file count limits and returns updated accepted/rejected files
+		*
+		* This function enforces the maxFiles constraint by calculating whether adding
+		* new files would exceed the configured limit.
+		*
+		* @param currentFiles - Existing files already uploaded or selected
+		* @param droppedAcceptedFiles - New files that passed initial type/size validation
+		* @param droppedRejectedFiles - New files that already failed validation for other reasons
+		* @returns Object containing the final accepted and rejected files after limit checks
+		* @remarks
+		* - Considers both existing files and newly dropped files when checking limits
+		* - Handles two validation modes:
+		*   1. Strict validation (strictValidation: true):
+		*      If adding any files would exceed the limit, ALL files are rejected
+		*   2. Partial upload (strictValidation: false):
+		*      Accepts files up to the remaining limit, rejecting only overflow files
+		* - Calculates remaining slots as (maxFiles - currentFiles.length)
+		* - When no maxFiles is defined, accepts all files (Infinity limit)
+		* - Adds appropriate error metadata to the rejected files for UI feedback
+		*/
+		handleFileCountLimits: (currentFiles, droppedAcceptedFiles, droppedRejectedFiles) => {
+			let acceptedResult = droppedAcceptedFiles;
+			let rejectionsResult = [...droppedRejectedFiles];
+			const totalDroppedFiles = droppedAcceptedFiles.length + droppedRejectedFiles.length;
+			const wouldExceedLimit = !validateFileCount(currentFiles.length, totalDroppedFiles);
+			const remainingSlots = maxFiles ? maxFiles - currentFiles.length : Infinity;
+			if (wouldExceedLimit) {
+				const overflowCount = currentFiles.length + totalDroppedFiles - (maxFiles ?? Infinity);
+				const errorCode = "too-many-files";
+				const maxFilesError = {
+					code: errorCode,
+					message: getValidationMessage({
+						code: errorCode,
+						count: overflowCount,
+						messageType: "drop"
+					})
+				};
+				const fileCountRejections = acceptedResult.slice(remainingSlots).map((file) => ({
+					errors: [maxFilesError],
+					file
+				}));
+				rejectionsResult = [...rejectionsResult, ...fileCountRejections];
+				if (!strictValidation) acceptedResult = acceptedResult.slice(0, remainingSlots);
+				else acceptedResult = [];
+			}
+			return {
+				allAcceptedFiles: acceptedResult,
+				allRejections: rejectionsResult
+			};
+		},
+		/**
+		* Handles file size validation and returns updated accepted/rejected files
+		*
+		* This function checks if files exceed the maximum allowed size (maxSize)
+		* and updates accept/reject lists accordingly.
+		*
+		* @param acceptedFiles - Files that have passed previous validation steps
+		* @returns Object containing validated files and size-related rejections
+		* @remarks
+		* - Files exceeding maxSize are identified and grouped with a 'file-too-large' error
+		* - Handles two validation modes:
+		*   1. Strict validation (strictValidation: true):
+		*      If ANY file exceeds the size limit, ALL files are rejected
+		*   2. Partial upload (strictValidation: false):
+		*      Only oversized files are rejected, others proceed normally
+		* - When maxSize is undefined, all files pass size validation
+		* - Adds appropriate error metadata to rejected files for UI feedback
+		* - The returned object has separate lists for valid files and size rejections
+		*/
+		handleFileSizeValidation: (acceptedFiles) => {
+			let validFiles = [...acceptedFiles];
+			let sizeRejections = [];
+			const oversizedFiles = acceptedFiles.filter((file) => maxSize && file.size > maxSize);
+			if (oversizedFiles.length > 0) {
+				const errorCode = "file-too-large";
+				const fileSizeError = {
+					code: errorCode,
+					message: getValidationMessage({
+						code: errorCode,
+						count: oversizedFiles.length,
+						messageType: "drop"
+					})
+				};
+				sizeRejections = oversizedFiles.map((file) => ({
+					errors: [fileSizeError],
+					file
+				}));
+				if (!strictValidation) validFiles = acceptedFiles.filter((file) => !maxSize || file.size <= maxSize);
+				else validFiles = [];
+			}
+			return {
+				sizeRejections,
+				validFiles
+			};
+		},
+		/**
+		* Processes file rejections and groups them by error code
+		*
+		* This function takes an array of file rejections and organizes them into
+		* error groups based on the error codes. Each group tracks a count of affected
+		* files and the file references.
+		*
+		* @param rejections - Array of file rejections to process
+		* @returns A record of error groups indexed by error code
+		* @remarks
+		* - Multiple files with the same error code are consolidated into a single group
+		* - A file can appear in multiple groups if it has multiple error codes
+		* - Each group tracks:
+		*   - count: Number of files affected by this error
+		*   - files: References to the affected files
+		*   - message: The error message (shared across the group)
+		* - Used for generating consolidated error messages and UI summaries
+		*/
+		processRejections: (rejections) => {
+			const groups = {};
+			rejections.forEach((rejection) => {
+				rejection.errors.forEach((error) => {
+					const group = getOrCreateErrorGroup(groups, error.code, error.message);
+					group.count++;
+					group.files.push(rejection.file);
+				});
+			});
+			return groups;
+		}
+	};
+};
+//#endregion
+//#region src/FileUpload/hooks/upload/useHandleDrop/useHandleDrop.ts
+const useHandleDrop = ({ files, onDrop, onDropAccepted, onDropRejected, setFiles, validation }) => {
+	const { clearAllValidation, setDropValidationErrors, setFileRejections, strictValidation } = validation;
+	return useCallback((acceptedFiles, rejectedFiles) => {
+		const { getFormattedErrorGroupMessage, handleFileCountLimits, handleFileSizeValidation, processRejections } = createRejectionHelpers(validation);
+		const { sizeRejections, validFiles } = handleFileSizeValidation(acceptedFiles);
+		const { allAcceptedFiles, allRejections } = handleFileCountLimits(files.filter((file) => file instanceof File), validFiles, [...rejectedFiles, ...sizeRejections]);
+		const errorGroups = processRejections(allRejections);
+		const errors = Object.entries(errorGroups).map(([code]) => ({
+			code,
+			message: getFormattedErrorGroupMessage(code, {
+				code,
+				message: errorGroups[code].message
+			}, errorGroups)
+		}));
+		const processedRejections = allRejections.map((rejection) => ({
+			errors: rejection.errors.map((error) => ({
+				code: error.code,
+				message: getFormattedErrorGroupMessage(error.code, error, errorGroups)
+			})),
+			file: rejection.file
+		}));
+		const hasRejections = processedRejections.length > 0;
+		if (strictValidation && hasRejections) {
+			const strictRejections = [...processedRejections, ...allAcceptedFiles.map((file) => ({
+				errors,
+				file
+			}))];
+			setFileRejections(strictRejections);
+			setDropValidationErrors(errors);
+			onDropRejected?.(strictRejections);
+			onDrop?.([], strictRejections);
+			return;
+		}
+		setFileRejections(processedRejections);
+		setDropValidationErrors(errors);
+		onDropRejected?.(processedRejections);
+		if (allAcceptedFiles.length > 0) {
+			if (!hasRejections) clearAllValidation();
+			setFiles([...files, ...allAcceptedFiles]);
+			onDropAccepted?.(allAcceptedFiles);
+		}
+		onDrop?.(allAcceptedFiles, processedRejections);
+	}, [
+		files,
+		clearAllValidation,
+		setDropValidationErrors,
+		setFiles,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		setFileRejections,
+		strictValidation,
+		validation
+	]);
+};
+//#endregion
+//#region src/FileUpload/hooks/upload/useUploadAvailability/useUploadAvailability.ts
+const useUploadAvailability = ({ disabled = false, files, maxFiles }) => {
+	const hasReachedFileLimit = maxFiles !== void 0 && files.length >= maxFiles;
+	return {
+		hasReachedFileLimit,
+		isDisabled: disabled || hasReachedFileLimit
+	};
+};
+//#endregion
+//#region src/FileUpload/hooks/validation/createDropzoneValidator.ts
+/**
+* Creates an optimized validator function for React-Dropzone that preserves
+* function-based validation messages for later resolution
+*
+* @param validationContext - The validation context containing the custom validator
+* @returns A validator function compatible with React-Dropzone
+*/
+const createDropzoneValidator = (validationContext) => {
+	const { validateCustomRules } = validationContext;
+	if (typeof validateCustomRules !== "function") return;
+	return (file) => {
+		const validationResult = validateCustomRules(file);
+		if (!validationResult) return null;
+		if (validationResult.length === 0) return null;
+		return validationResult.map((error) => ({
+			code: error.code,
+			message: error.message
+		}));
+	};
+};
+//#endregion
+//#region src/FileUpload/utils/getMimeTypes.ts
+/**
+* Utility function that converts file type restrictions into MIME type format for react-dropzone
+* @param accept - Optional file type restrictions, can be either:
+*   - A preset category from CommonFileTypes (e.g., 'images', 'pdfs', 'documents')
+*   - An array of specific MIME types (e.g., ['image/jpeg', 'image/png'])
+* @returns Object mapping MIME types to empty arrays for react-dropzone's accept prop
+* @remarks
+* - Returns undefined when no restrictions are provided (accepts all file types)
+* - Handles both preset categories and custom MIME type arrays
+* - Formats MIME types to match react-dropzone's expected structure
+*/
+const getMimeTypes = (accept) => {
+	if (!accept) return;
+	if (Array.isArray(accept)) return accept.reduce((acc, curr) => ({
+		...acc,
+		[curr]: []
+	}), {});
+	return ACCEPTED_MIME_TYPES[accept].reduce((acc, curr) => ({
+		...acc,
+		[curr]: []
+	}), {});
+};
+//#endregion
+//#region src/FileUpload/utils/styles.ts
+const getUploadZoneStyles = ({ disabled, disableDragValidation, isDragActive, validationError }) => {
+	const isInvalid = Boolean(validationError);
+	const isErrorState = disableDragValidation ? false : isInvalid;
+	return cn([
+		"relative",
+		"flex flex-col",
+		"h-full w-full",
+		"items-center justify-center",
+		"rounded-container",
+		"outline-dashed outline-1 -outline-offset-1",
+		"p-sm",
+		"transition-colors",
+		"hover:bg-background-hover hover:outline-border-hover"
+	], ["hui-focus-visible-outline"], {
+		"cursor-not-allowed bg-background-disabled outline-border-disabled hover:bg-background-disabled hover:outline-border-disabled": disabled,
+		"cursor-pointer active:bg-background-pressed active:outline active:outline-4 active:outline-focus-primary": !disabled,
+		"outline outline-4 outline-offset-0 outline-focus-primary": isDragActive && !disabled
+	}, {
+		"bg-background-critical-light outline-dashed outline-1 -outline-offset-1 outline-border-critical": isErrorState && !disabled,
+		"bg-background-hover": isDragActive && (disableDragValidation || !isInvalid) && !isErrorState && !disabled,
+		"bg-background-primary outline-border-secondary": !isDragActive && !isErrorState && !disabled
+	});
+};
+//#endregion
+//#region src/FileUpload/components/FileDropzone/components/DropzoneContent/DropzoneText.tsx
+const DropzoneText = ({ disableDragValidation, filePluralizationText, hasReachedFileLimit, isDisabled, isDragActive, isDragReject, maxFiles, validation }) => {
+	const isMobile = useWindowIsMobile();
+	const { dragValidationError } = validation;
+	return /* @__PURE__ */ jsx(Fragment, { children: useMemo(() => {
+		if (hasReachedFileLimit) return /* @__PURE__ */ jsx(Fragment, { children: `${maxFiles} file limit reached. Remove files to upload more.` });
+		if (isDragActive && dragValidationError?.code) return /* @__PURE__ */ jsx(Fragment, { children: dragValidationError.message });
+		if (isDragActive && (disableDragValidation || !isDragReject)) return /* @__PURE__ */ jsx(Fragment, { children: "Drop files here to upload" });
+		if (isMobile) return /* @__PURE__ */ jsx(Fragment, { children: `Click to browse and add ${filePluralizationText}` });
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(SubtleLink, {
+				className: "group-hover:underline",
+				disabled: isDisabled,
+				href: "#",
+				onClick: (e) => e.preventDefault(),
+				children: "Browse"
+			}),
+			" ",
+			"or drag ",
+			filePluralizationText,
+			" here to upload"
+		] });
+	}, [
+		filePluralizationText,
+		hasReachedFileLimit,
+		isDisabled,
+		isDragActive,
+		isDragReject,
+		disableDragValidation,
+		maxFiles,
+		isMobile,
+		dragValidationError
+	]) });
+};
+DropzoneText.displayName = "DropzoneText";
+//#endregion
+//#region src/FileUpload/components/FileDropzone/components/DropzoneContent/DropzoneContent.tsx
+const DropzoneContent = ({ dropzoneTextProps, isDisabled }) => {
+	const dropzoneTextColor = isDisabled ? "disabled" : "primary";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col items-center gap-xs",
+		children: [/* @__PURE__ */ jsx(UploadSimple, { color: dropzoneTextColor }), /* @__PURE__ */ jsx(BodyPrimary, {
+			className: "text-center",
+			color: dropzoneTextColor,
+			children: /* @__PURE__ */ jsx(DropzoneText, { ...dropzoneTextProps })
+		})]
+	});
+};
+DropzoneContent.displayName = "DropzoneContent";
+//#endregion
+//#region src/FileUpload/components/FileDropzone/components/FileDropzoneDebugger/FileRejectionsDisplay.tsx
+const BadgeCell = ({ codes }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col justify-start gap-[4px]",
+		children: (Array.isArray(codes) ? codes : [codes]).map((code, index) => /* @__PURE__ */ jsx(Badge, {
+			className: "my-[2px]",
+			color: "critical",
+			"data-testid": `badge-${code}`,
+			emphasis: builtInErrorCodes.includes(code) ? "subtle" : "bold",
+			size: "xs",
+			children: code
+		}, `${code}-${index}`))
+	});
+};
+const FileRejectionsDisplay = ({ displayMode, fileRejections = [] }) => {
+	const totalErrors = fileRejections.reduce((sum, rejection) => sum + rejection.errors.length, 0);
+	const tableData = displayMode === "by-error" ? fileRejections.flatMap((rejection, fileIndex) => rejection.errors.map((error, errorIndex) => ({
+		col1: rejection.file.name,
+		col2: error.code,
+		col3: error.message,
+		key: `${rejection.file.name}-${fileIndex}-${errorIndex}`
+	}))) : fileRejections.map((rejection, index) => ({
+		col1: rejection.file.name,
+		col2: rejection.errors.map((error) => error.code),
+		col3: rejection.errors.map((error) => error.message),
+		key: `${rejection.file.name}-${index}`
+	}));
+	const columns = [
+		{
+			align: "left",
+			header: "File Name",
+			key: "col1"
+		},
+		{
+			header: displayMode === "by-error" ? "Error Code" : "Error Codes",
+			key: "col2",
+			renderItem: (data) => /* @__PURE__ */ jsx(BadgeCell, { codes: data.col2 })
+		},
+		{
+			header: displayMode === "by-error" ? "Message" : "Messages",
+			key: "col3",
+			renderItem: displayMode === "by-file" ? (data) => /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-[2px]",
+				children: data.col3.map((message, index) => /* @__PURE__ */ jsx("span", { children: message }, index))
+			}) : void 0
+		}
+	];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "mb-xs mt-sm flex items-center justify-between px-[2px]",
+		children: [/* @__PURE__ */ jsxs(H4, { children: ["File Rejections ", displayMode === "by-error" ? "(by Error)" : "(by File)"] }), /* @__PURE__ */ jsxs(BodyPrimary, { children: [
+			fileRejections.length,
+			" files (",
+			totalErrors,
+			" errors)"
+		] })]
+	}), /* @__PURE__ */ jsx(Table, {
+		columns,
+		data: tableData,
+		emptyStateHeaderText: "No files rejected",
+		emptyStateSupportingText: "Upload files to monitor rejections",
+		fillHorizontal: true,
+		hideBorder: true,
+		rowDensity: "sm"
+	})] });
+};
+FileRejectionsDisplay.displayName = "FileRejectionsDisplay";
+//#endregion
+//#region src/FileUpload/components/FileDropzone/components/FileDropzoneDebugger/FileDropzoneDebugger.tsx
+const FileDropzoneDebugger = ({ fileRejections = [] }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mt-md rounded-container p-sm outline-dashed outline-1 -outline-offset-1 outline-border-secondary",
+		children: /* @__PURE__ */ jsx(Tabs, { tabs: [{
+			content: /* @__PURE__ */ jsx(FileRejectionsDisplay, {
+				displayMode: "by-error",
+				fileRejections
+			}),
+			contentId: "rejections-by-error",
+			label: "Errors"
+		}, {
+			content: /* @__PURE__ */ jsx(FileRejectionsDisplay, {
+				displayMode: "by-file",
+				fileRejections
+			}),
+			contentId: "rejections-by-file",
+			label: "Files"
+		}] })
+	});
+};
+FileDropzoneDebugger.displayName = "FileDropzoneDebugger";
+//#endregion
+//#region src/FileUpload/components/FileDropzone/FileDropzone.tsx
+/**
+* FileDropzone component for handling file uploads with drag and drop support.
+* This is a versatile file input component that can work both as a standalone
+* component or as part of the FileUpload system.
+*/
+/**
+* Handles the dual-mode functionality of the FileDropzone component, supporting both standalone usage
+* and provider-wrapped usage.
+*
+* ## Validation Modes
+* - **Provider Mode**: Uses validation context from FileUploadProvider for coordinated validation across components
+* - **Standalone Mode**: Creates local validation instance for independent operation
+*
+* ## Props & Context Resolution
+* The component follows a specific precedence order for each property:
+* 1. Direct props take highest priority (for granular control)
+* 2. Context values serve as fallbacks (for coordinated state)
+* 3. Default values as final fallbacks (for safety)
+*
+* This enables two key use cases:
+* 1. Standalone Usage: <FileDropzone maxFiles={5} onDrop={handleDrop} />
+* 2. Provider Usage:
+*    <FileUploadProvider maxFiles={5}>
+*      <FileDropzone /> // Inherits provider config
+*      <FileDropzone maxFiles={1} /> // Overrides specific provider values
+*    </FileUploadProvider>
+*/
+const FileDropzone = ({ accept: acceptProp, ariaLabel = "Browse or drag files here to upload.", className, "data-testid": dataTestId = "file-dropzone", disabled: disabledProp = false, disableDragValidation = false, error, files: filesProp, helpText, helpTextAlignCenter, hideErrors = false, hideHelpText = false, labelText, maxFiles: maxFilesProp, maxSize: maxSizeProp, onDrop: onDropProp, onDropAccepted: onDropAcceptedProp, onDropRejected: onDropRejectedProp, onFilesChange: onFilesChangeProp, showDebugger, strictValidation, validator }) => {
+	const uploadContext = useContext(FileUploadContext);
+	const validation = useFileValidation({
+		accept: acceptProp,
+		error,
+		maxFiles: maxFilesProp,
+		maxSize: maxSizeProp,
+		strictValidation,
+		validator
+	});
+	const files = filesProp ?? uploadContext?.files ?? [];
+	const setFiles = onFilesChangeProp ?? uploadContext?.setFiles ?? (() => {});
+	const disabled = disabledProp || uploadContext?.disabled;
+	const onDrop = onDropProp ?? uploadContext?.onDrop;
+	const onDropAccepted = onDropAcceptedProp ?? uploadContext?.onDropAccepted;
+	const onDropRejected = onDropRejectedProp ?? uploadContext?.onDropRejected;
+	const maxFiles = maxFilesProp ?? validation.maxFiles;
+	const maxSize = maxSizeProp ?? validation.maxSize;
+	const accept = acceptProp ?? validation.accept;
+	const { hasReachedFileLimit, isDisabled } = useUploadAvailability({
+		disabled,
+		files,
+		maxFiles
+	});
+	const formattedMaxSize = maxSize ? formatFileSize(maxSize) : void 0;
+	const defaultHelpText = formattedMaxSize ? `File size must be smaller than ${formattedMaxSize}` : void 0;
+	const helpTextToDisplay = hideHelpText ? void 0 : helpText ?? defaultHelpText;
+	const allowMultipleFiles = maxFiles === void 0 || maxFiles > 1;
+	const filePluralizationText = allowMultipleFiles ? "files" : "a file";
+	const mimeTypes = getMimeTypes(accept);
+	const handleDrop = useHandleDrop({
+		files,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		setFiles,
+		validation
+	});
+	const handleDragEnter = useHandleDragEnter({
+		files,
+		mimeTypes,
+		validation,
+		validator
+	});
+	const { getInputProps, getRootProps, isDragActive, isDragReject } = useDropzone({
+		accept: mimeTypes,
+		disabled: isDisabled,
+		maxSize,
+		multiple: allowMultipleFiles,
+		onDragEnter: disableDragValidation ? validation.clearAllValidation : handleDragEnter,
+		onDragLeave: validation.clearAllValidation,
+		onDrop: handleDrop,
+		validator: createDropzoneValidator(validation)
+	});
+	const uploadZoneStyles = getUploadZoneStyles({
+		disabled: isDisabled,
+		disableDragValidation,
+		isDragActive,
+		validationError: isDragActive ? validation.dragValidationError : validation.dropValidationErrors[0]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": ariaLabel,
+		className: cn("flex h-full w-full flex-col gap-[4px]", className),
+		role: "region",
+		children: [
+			labelText && /* @__PURE__ */ jsx(LabelMini, {
+				color: isDisabled ? "disabled" : "secondary",
+				children: labelText
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				...getRootProps({
+					"aria-disabled": isDisabled,
+					className: cn("group min-h-[88px] w-full", uploadZoneStyles),
+					"data-testid": `${dataTestId}-container`,
+					onClick: validation.clearAllValidation,
+					role: "button"
+				}),
+				children: [/* @__PURE__ */ jsx("input", { ...getInputProps({
+					"aria-label": `Upload ${filePluralizationText}`,
+					"data-testid": `${dataTestId}-input`
+				}) }), /* @__PURE__ */ jsx(DropzoneContent, {
+					dropzoneTextProps: {
+						disableDragValidation,
+						filePluralizationText,
+						hasReachedFileLimit,
+						isDisabled,
+						isDragActive,
+						isDragReject,
+						maxFiles,
+						validation
+					},
+					isDisabled
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("relative flex flex-col gap-[4px]", { "items-center": helpTextAlignCenter }),
+				children: [helpTextToDisplay && /* @__PURE__ */ jsx(Caption, {
+					color: isDisabled ? "disabled" : "secondary",
+					children: helpTextToDisplay
+				}), !hideErrors && validation.dropValidationErrors.map((error, index) => /* @__PURE__ */ jsx(Caption, {
+					color: "critical",
+					role: "alert",
+					children: error.message
+				}, `${error.code}-${index}`))]
+			}),
+			showDebugger && /* @__PURE__ */ jsx(FileDropzoneDebugger, { fileRejections: validation.fileRejections })
+		]
+	});
+};
+FileDropzone.displayName = "FileDropzone";
+//#endregion
+//#region src/FileUpload/components/GridFileCard/utils/sortable.ts
+/**
+* Helper function to check if an element or its parents have the data-no-drag attribute
+* Exported for testing, you should probably be using the `dataNoDragSortable` function instead
+* @param element - The element to check
+* @returns Whether the element or any of its parents have the data-no-drag attribute
+*/
+const hasDataNoDragOrParent = (element) => {
+	if (!element) return false;
+	if (element.hasAttribute("data-no-drag")) return true;
+	if (element.parentElement) return hasDataNoDragOrParent(element.parentElement);
+	return false;
+};
+/**
+* Modified sortable object that stops propagation if the parent element has the data-no-drag attribute
+* @param sortable - The sortable object to modify
+* @returns The modified sortable object
+*/
+const dataNoDragSortable = (sortable) => {
+	if (!sortable) return null;
+	return {
+		...sortable,
+		attributes: { ...sortable.attributes },
+		listeners: {
+			...sortable.listeners,
+			onPointerDown: (e) => {
+				if (hasDataNoDragOrParent(e.target)) {
+					e.stopPropagation();
+					return;
+				}
+				sortable.listeners?.onPointerDown?.(e);
+			}
+		}
+	};
+};
+//#endregion
+//#region src/FileUpload/components/GridFileCard/GridFileCard.tsx
+/**
+* Actions to render. First 3 actions will be visible buttons,
+* remaining will appear in overflow menu.
+*/
+const MAX_VISIBLE_ACTIONS = 3;
+const GridFileCard = ({ actions = [], badge, className, "data-testid": dataTestId = "grid-file-card", draggable, errorMessage, fileName, hideFileName = false, hideFileSize = false, hideFileStatus = false, imageSource, isSelected, onDelete, onImageError, onSelect, progress, selectable, sortable, status = "default", statusIcon, statusText }) => {
+	const previewUrl = useImageFilePreviewUrl(imageSource);
+	const isRemoteFile = "url" in imageSource;
+	const fileSize = isRemoteFile ? "" : formatFileSize(imageSource.size);
+	const shouldHideFileSize = hideFileSize || isRemoteFile;
+	const defaultFileName = isRemoteFile ? imageSource.url.split("/").pop() ?? "image" : imageSource.name;
+	const fileDisplayName = fileName ?? defaultFileName;
+	const isError = status === "error";
+	const isPending = status === "pending";
+	const isProgressing = status === "progressing";
+	const isComplete = status === "complete";
+	const isDragging = sortable?.isDragging ?? false;
+	const shouldShowProgressCircle = !statusIcon && (isPending || isProgressing || isComplete);
+	let fileStatusText = null;
+	if (isError && errorMessage && !hideFileStatus) fileStatusText = /* @__PURE__ */ jsx(BodySecondary, {
+		className: "text-text-critical",
+		"data-no-drag": true,
+		children: errorMessage
+	});
+	else if ((isProgressing || isPending) && !hideFileStatus) fileStatusText = /* @__PURE__ */ jsx(BodySecondary, {
+		color: "secondary",
+		"data-no-drag": true,
+		children: statusText ?? (isPending ? "Pending" : "Uploading")
+	});
+	else if (!shouldHideFileSize) fileStatusText = /* @__PURE__ */ jsx(BodySecondary, {
+		color: isError ? "critical" : "secondary",
+		"data-no-drag": true,
+		children: fileSize
+	});
+	const actionsWithDelete = [...actions, ...onDelete ? [{
+		icon: Trash,
+		iconStyle: "regular",
+		name: "Delete",
+		onClick: (_, fileResource) => onDelete(fileResource)
+	}] : []];
+	const modifiedSortable = dataNoDragSortable(sortable);
+	const visibleActions = actionsWithDelete.slice(0, MAX_VISIBLE_ACTIONS);
+	const overflowActions = actionsWithDelete.slice(MAX_VISIBLE_ACTIONS);
+	let progressCircleStatus;
+	if (isPending) progressCircleStatus = "pending";
+	else if (isProgressing) progressCircleStatus = "progressing";
+	else progressCircleStatus = "complete";
+	const isProcessing = isPending || isProgressing;
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-busy": isProcessing || void 0,
+		className: cn("group/grid-file-card relative flex w-full min-w-0 cursor-pointer flex-col gap-xs", "rounded-container p-xs", "ring-1", "transition-all duration-200", "hover:z-10", "focus-within:z-10", {
+			"bg-background-critical-light ring-border-critical focus-within:bg-background-critical-light focus-within:ring-border-critical hover:bg-background-critical-light hover:ring-border-critical": isError && !isDragging,
+			"bg-background-primary ring-transparent focus-within:bg-background-subdued focus-within:ring-border-secondary hover:bg-background-subdued hover:ring-border-secondary": !isError && !isDragging,
+			"z-50 scale-105 border-border-selected bg-background-secondary shadow-01": isDragging
+		}, className),
+		"data-testid": dataTestId,
+		ref: modifiedSortable?.setNodeRef,
+		style: modifiedSortable?.styles,
+		...modifiedSortable?.attributes,
+		...modifiedSortable?.listeners,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative aspect-square min-w-0 items-center justify-center rounded-container bg-background-subdued",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "absolute left-0 top-0 z-10 flex items-center gap-[2px] p-xs",
+					children: [selectable && /* @__PURE__ */ jsx("div", {
+						"data-no-drag": true,
+						children: /* @__PURE__ */ jsx(Checkbox.Option, {
+							checked: isSelected,
+							className: "![grid-template-columns:24px_0px_1fr]",
+							onChange: (e) => {
+								e.stopPropagation();
+								onSelect?.(imageSource, e.target.checked);
+							}
+						})
+					}), badge && /* @__PURE__ */ jsx(Badge, {
+						className: "mt-[3px]",
+						color: "neutral",
+						emphasis: "bold",
+						round: true,
+						size: "xs",
+						children: badge
+					})]
+				}),
+				draggable && /* @__PURE__ */ jsx("div", {
+					className: "absolute right-[4.4px] top-[8px] z-10 p-[2px]",
+					children: /* @__PURE__ */ jsx(DotsSixVertical, {
+						className: "flex-shrink-0 cursor-grab",
+						color: "inverse",
+						size: "sm",
+						style: "bold"
+					})
+				}),
+				previewUrl ? /* @__PURE__ */ jsx("img", {
+					alt: fileDisplayName,
+					className: "absolute inset-0 h-full w-full rounded-container object-cover",
+					onError: () => onImageError?.(imageSource),
+					src: previewUrl
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 flex items-center justify-center",
+					children: /* @__PURE__ */ jsx(Paperclip, {
+						color: "primary",
+						size: "md"
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("absolute inset-0", "flex items-end justify-center", "rounded-container bg-background-overlay/20 p-xs", "opacity-0 transition-opacity duration-200", "group-focus-within/grid-file-card:opacity-100 group-hover/grid-file-card:opacity-100", "cursor-pointer", { "cursor-grab": draggable }),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-xs",
+						children: [visibleActions.map((action, index) => /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": action.name,
+							"data-no-drag": true,
+							disabled: isProcessing,
+							hideTooltip: true,
+							icon: action.icon,
+							iconStyle: action.iconStyle,
+							onClick: (e) => {
+								e.stopPropagation();
+								action.onClick(e, imageSource);
+							},
+							shape: "circle",
+							size: "xs",
+							style: "inverse",
+							type: "button",
+							variant: "transparent"
+						}, `${action.name}-${index}`)), overflowActions.length > 0 && /* @__PURE__ */ jsx(Menu, {
+							"data-no-drag": true,
+							hasRoundedBorders: true,
+							menuPlacement: "bottom-start",
+							menuSize: "sm",
+							numberOfColumns: 3,
+							trigger: /* @__PURE__ */ jsx(IconButton, {
+								"data-no-drag": true,
+								disabled: isProcessing,
+								hideTooltip: true,
+								icon: DotsThreeOutlineVertical,
+								iconStyle: "fill",
+								onClick: () => {},
+								shape: "circle",
+								size: "xs",
+								style: "inverse",
+								type: "button",
+								variant: "transparent"
+							}),
+							children: overflowActions.map((action, index) => /* @__PURE__ */ jsx(MenuItem, {
+								color: action.name === "Delete" ? "critical" : void 0,
+								"data-no-drag": true,
+								id: `${action.name}-${fileDisplayName}`,
+								leftIcon: action.icon,
+								onClick: () => {
+									action.onClick({}, imageSource);
+								},
+								primaryLabel: action.name
+							}, `${action.name}-${index}`))
+						})]
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-[2px]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 cursor-auto flex-col gap-[2px]",
+				children: [!hideFileName && /* @__PURE__ */ jsx(BodyPrimary, {
+					className: "truncate",
+					color: isError ? "critical" : "primary",
+					"data-no-drag": true,
+					children: fileDisplayName
+				}), fileStatusText]
+			}), shouldShowProgressCircle ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				"data-testid": "grid-file-card-progress-circle",
+				children: /* @__PURE__ */ jsx(ProgressCircle, {
+					progress,
+					size: "sm",
+					status: progressCircleStatus
+				})
+			}) : statusIcon ? statusIcon.type === "progressCircle" ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				"data-testid": "grid-file-card-progress-circle",
+				children: /* @__PURE__ */ jsx(ProgressCircle, {
+					centerIcon: statusIcon.centerIcon,
+					color: statusIcon.color,
+					indeterminateAnimation: statusIcon.indeterminateAnimation,
+					progress,
+					size: "sm",
+					status: progressCircleStatus
+				})
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				"data-testid": "grid-file-card-status-icon",
+				children: /* @__PURE__ */ jsx(statusIcon.icon, {
+					color: statusIcon.color,
+					size: "sm",
+					style: statusIcon.style
+				})
+			}) : null]
+		})]
+	});
+};
+GridFileCard.displayName = "GridFileCard";
+//#endregion
+//#region src/FileUpload/components/ListFileCard/ListFileCard.tsx
+const ListFileCard = ({ actions, cardStyle, className, "data-testid": dataTestId = "list-file-card", draggable, errorMessage, fileName, hideFileName = false, hideFileSize = false, hideFileStatus = false, imageSource, isSelected, onDelete, onImageError, onSelect, progress, selectable, showActionsOnHover, status = "default", statusIcon, statusText }) => {
+	const previewUrl = useImageFilePreviewUrl(imageSource);
+	const isRemoteFile = "url" in imageSource;
+	const fileSize = isRemoteFile ? "" : formatFileSize(imageSource.size);
+	const shouldHideFileSize = hideFileSize || isRemoteFile;
+	const defaultFileName = isRemoteFile ? imageSource.url.split("/").pop() ?? "image" : imageSource.name;
+	const fileDisplayName = fileName ?? defaultFileName;
+	const isError = status === "error";
+	const isPending = status === "pending";
+	const isProgressing = status === "progressing";
+	const isComplete = status === "complete";
+	const isDragging = false;
+	const shouldShowProgressCircle = !statusIcon && (isPending || isProgressing || isComplete);
+	let fileStatusText = null;
+	if (isError && errorMessage && !hideFileStatus) fileStatusText = /* @__PURE__ */ jsx(BodySecondary, {
+		className: "text-text-critical",
+		children: errorMessage
+	});
+	else if ((isProgressing || isPending) && !hideFileStatus) fileStatusText = /* @__PURE__ */ jsx(BodySecondary, {
+		color: "secondary",
+		children: statusText ?? (isPending ? "Pending" : "Uploading")
+	});
+	else if (!shouldHideFileSize) fileStatusText = /* @__PURE__ */ jsx(BodySecondary, {
+		color: isError ? "critical" : "secondary",
+		children: fileSize
+	});
+	const actionBtnClasses = showActionsOnHover ? cn("opacity-0 group-focus-within/list-file-card:opacity-100 group-hover/list-file-card:opacity-100", "focus:opacity-100", "transition-opacity duration-200") : "";
+	const isProcessing = isPending || isProgressing;
+	let progressCircleStatus;
+	if (isPending) progressCircleStatus = "pending";
+	else if (isProgressing) progressCircleStatus = "progressing";
+	else progressCircleStatus = "complete";
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-busy": isProcessing || void 0,
+		className: cn("group/list-file-card flex w-full min-w-0 cursor-pointer items-center justify-between p-xs", "transition-all duration-200", {
+			"bg-background-critical-light": isError && true,
+			"bg-background-primary": !isError && true,
+			"z-50 scale-105 border-border-selected bg-background-secondary shadow-01": isDragging
+		}, cardStyle === "contained" ? cn("rounded-container border", {
+			"border-border-critical hover:border-border-critical hover:bg-background-critical-light": isError && true,
+			"border-border-secondary hover:border-border-secondary hover:bg-background-hover": !isError && true
+		}) : cn("rounded-b-none border-b", {
+			"border-b-border-critical focus-within:border-b-border-critical hover:bg-background-critical-light": isError && true,
+			"border-b-border-secondary hover:bg-background-hover": !isError && true
+		}), className),
+		"data-testid": dataTestId,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 items-center gap-xs",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-[4px]",
+				children: [selectable ? /* @__PURE__ */ jsx(Checkbox.Option, {
+					checked: isSelected,
+					className: "![grid-template-columns:24px_0px_1fr]",
+					"data-testid": "list-file-card-select-checkbox",
+					onChange: (e) => {
+						e.stopPropagation();
+						onSelect?.(imageSource, e.target.checked);
+					}
+				}) : draggable ? /* @__PURE__ */ jsx(DotsSixVertical, {
+					color: "primary",
+					size: "sm",
+					style: "bold"
+				}) : null, previewUrl ? /* @__PURE__ */ jsx("div", {
+					className: "relative h-xl w-xl items-center justify-center overflow-hidden rounded-container bg-background-subdued",
+					children: /* @__PURE__ */ jsx("img", {
+						alt: fileDisplayName,
+						className: "absolute inset-0 h-full w-full object-cover",
+						onError: () => {
+							onImageError?.(imageSource);
+						},
+						src: previewUrl
+					})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex aspect-square min-w-xl items-center justify-center rounded-container bg-background-subdued",
+					children: /* @__PURE__ */ jsx(Paperclip, {
+						color: "primary",
+						size: "sm"
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-[2px]",
+				children: [!hideFileName && /* @__PURE__ */ jsx(BodyPrimary, {
+					className: "truncate",
+					color: isError ? "critical" : "primary",
+					children: fileDisplayName
+				}), fileStatusText]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-[4px]",
+			children: [
+				actions?.map((action, index) => /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": action.name,
+					className: actionBtnClasses,
+					disabled: isProcessing,
+					icon: action.icon,
+					onClick: (e) => {
+						e.stopPropagation();
+						action.onClick(e, imageSource);
+					},
+					size: "sm",
+					type: "button"
+				}, `${action.name}-${index}`)),
+				onDelete && /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Remove file",
+					className: actionBtnClasses,
+					"data-testid": "remove-file-button",
+					disabled: isProcessing,
+					icon: Trash,
+					onClick: () => onDelete(imageSource),
+					size: "sm",
+					type: "button"
+				}),
+				shouldShowProgressCircle ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center",
+					"data-testid": "list-file-card-progress-circle",
+					children: /* @__PURE__ */ jsx(ProgressCircle, {
+						progress,
+						size: "sm",
+						status: progressCircleStatus
+					})
+				}) : statusIcon ? statusIcon.type === "progressCircle" ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center",
+					"data-testid": "list-file-card-progress-circle",
+					children: /* @__PURE__ */ jsx(ProgressCircle, {
+						centerIcon: statusIcon.centerIcon,
+						color: statusIcon.color,
+						indeterminateAnimation: statusIcon.indeterminateAnimation,
+						progress,
+						size: "sm",
+						status: progressCircleStatus
+					})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex items-center",
+					"data-testid": "list-file-card-status-icon",
+					children: /* @__PURE__ */ jsx(statusIcon.icon, {
+						color: statusIcon.color,
+						size: "md",
+						style: statusIcon.style
+					})
+				}) : null
+			]
+		})]
+	});
+};
+ListFileCard.displayName = "ListFileCard";
+//#endregion
+//#region src/FileUpload/components/FileCard/FileCard.tsx
+const FileCard = ({ badge, cardStyle = "contained", "data-testid": dataTestId, errorMessage, progress, showActionsOnHover = false, status, statusIcon, statusText, ...props }) => cardStyle === "card" ? /* @__PURE__ */ jsx(GridFileCard, {
+	...props,
+	badge,
+	"data-testid": dataTestId,
+	errorMessage,
+	progress,
+	status,
+	statusIcon,
+	statusText
+}) : /* @__PURE__ */ jsx(ListFileCard, {
+	...props,
+	cardStyle,
+	"data-testid": dataTestId,
+	errorMessage,
+	progress,
+	showActionsOnHover,
+	status,
+	statusIcon,
+	statusText
+});
+FileCard.displayName = "FileCard";
+//#endregion
+//#region src/FileUpload/components/FilePreviewList/virtualizerComponents/FilePreviewVirtualizedList/FilePreviewVirtualizedList.tsx
+/**
+* A virtualized list component for efficiently rendering large lists of file previews
+* Only renders items that are currently visible in the viewport
+*/
+const FilePreviewVirtualizedList = ({ createFileCardProps, files, previewStyle }) => {
+	const scrollRef = useRef(null);
+	const listItemHeight = previewStyle === "list" ? 66 : 65;
+	const listItemGap = previewStyle === "list" ? 8 : 0;
+	const virtualizer = useVirtualizer({
+		count: files.length,
+		estimateSize: () => listItemHeight,
+		gap: listItemGap,
+		getScrollElement: () => scrollRef.current,
+		overscan: 5
+	});
+	const virtualItems = virtualizer.getVirtualItems();
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative h-full overflow-y-auto",
+		ref: scrollRef,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: cn("flex flex-col", previewStyle === "list" && "gap-xs"),
+			"data-testid": "file-preview-virtualized-list-element",
+			style: {
+				height: `${virtualizer.getTotalSize()}px`,
+				position: "relative",
+				width: "100%"
+			},
+			children: virtualItems.map((virtualItem) => {
+				const file = files[virtualItem.index];
+				return /* @__PURE__ */ jsx("li", {
+					"data-index": virtualItem.index,
+					"data-testid": `file-preview-virtualized-list-item-${virtualItem.index}`,
+					style: {
+						height: `${virtualItem.size}px`,
+						left: 0,
+						position: "absolute",
+						top: 0,
+						transform: `translateY(${virtualItem.start}px)`,
+						width: "100%"
+					},
+					children: /* @__PURE__ */ jsx(FileCard, {
+						"data-testid": `file-preview-virtualized-list-card-${virtualItem.index}`,
+						...createFileCardProps(file, virtualItem.index)
+					})
+				}, virtualItem.key);
+			})
+		})
+	});
+};
+FilePreviewVirtualizedList.displayName = "FilePreviewVirtualizedList";
+//#endregion
+//#region src/FileUpload/components/FilePreviewList/FilePreviewList.tsx
+const VIEW_TO_CARD_STYLE = {
+	compactList: "compact",
+	grid: "card",
+	list: "contained"
+};
+const FilePreviewList = ({ bulkSelectionEnabled = false, className, colsByBreakpoint = {
+	lg: 5,
+	md: 4,
+	sm: 3,
+	xl: 5,
+	xs: 3
+}, "data-testid": dataTestId = "file-preview-list", draggable = false, files: filesProp, getFileStatusConfig, hideDeleteAction = false, hideFileNames = false, hideFileSizes = false, hideFileStatuses = false, onDelete, onSelect, previewStyle = "list", showActionsOnHover = false, virtualized = false }) => {
+	const uploadContext = useContext(FileUploadContext);
+	const files = filesProp ?? uploadContext?.files ?? [];
+	const handleDeleteFile = useCallback((fileToDelete) => {
+		if (uploadContext && !onDelete) {
+			const fileToDeleteId = getItemIdentifier(fileToDelete);
+			uploadContext.setFiles((prevFiles) => prevFiles.filter((file) => getItemIdentifier(file) !== fileToDeleteId));
+		}
+		onDelete?.(fileToDelete);
+	}, [uploadContext, onDelete]);
+	const width = useWindowWidth();
+	const [selectedFiles, setSelectedFiles] = useState([]);
+	const { lgMinValue, mdMinValue, smMinValue, xlMinValue } = breakpoints;
+	const gridColumns = useMemo(() => {
+		let columns = colsByBreakpoint.xs;
+		if (width >= smMinValue && colsByBreakpoint.sm) columns = colsByBreakpoint.sm;
+		if (width >= mdMinValue && colsByBreakpoint.md) columns = colsByBreakpoint.md;
+		if (width >= lgMinValue && colsByBreakpoint.lg) columns = colsByBreakpoint.lg;
+		if (width >= xlMinValue && colsByBreakpoint.xl) columns = colsByBreakpoint.xl;
+		return columns;
+	}, [
+		width,
+		colsByBreakpoint,
+		lgMinValue,
+		mdMinValue,
+		smMinValue,
+		xlMinValue
+	]);
+	const handleSelect = useCallback((file, isSelected) => {
+		setSelectedFiles((prev) => {
+			const name = file.name;
+			if (isSelected) return [...prev, name];
+			return prev.filter((n) => n !== name);
+		});
+		onSelect?.(file, isSelected);
+	}, [onSelect]);
+	const containerClasses = cn(previewStyle === "grid" && ["grid", gridColumns && `grid-cols-${gridColumns}`], previewStyle !== "grid" && ["flex flex-col", previewStyle === "list" && "gap-xs"]);
+	const cardStyle = VIEW_TO_CARD_STYLE[previewStyle];
+	const shouldUseVirtualizedList = virtualized && (previewStyle === "list" || previewStyle === "compactList");
+	const commonProps = {
+		bulkSelectionEnabled,
+		draggable,
+		hideDeleteAction,
+		hideFileNames,
+		hideFileSizes,
+		hideFileStatuses,
+		showActionsOnHover
+	};
+	const getItemIdentifier = (item) => {
+		if ("url" in item) return item.id ?? item.url;
+		return `${item.name}-${item.size}-${item.lastModified}`;
+	};
+	const createFileCardProps = useCallback((fileResource, index) => {
+		const name = fileResource.name;
+		const isSelected = selectedFiles.includes(name);
+		const deleteHandler = hideDeleteAction ? void 0 : handleDeleteFile;
+		const statusConfig = getFileStatusConfig?.(fileResource, index);
+		return {
+			cardStyle,
+			draggable,
+			errorMessage: statusConfig?.errorMessage,
+			hideFileName: hideFileNames,
+			hideFileSize: hideFileSizes,
+			hideFileStatus: hideFileStatuses,
+			imageSource: fileResource,
+			onDelete: deleteHandler,
+			onSelect: bulkSelectionEnabled ? handleSelect : void 0,
+			...bulkSelectionEnabled ? {
+				isSelected,
+				selectable: true
+			} : { selectable: false },
+			progress: statusConfig?.progress,
+			showActionsOnHover,
+			status: statusConfig?.status,
+			statusIcon: statusConfig?.statusIcon,
+			statusText: statusConfig?.statusText
+		};
+	}, [
+		bulkSelectionEnabled,
+		cardStyle,
+		draggable,
+		getFileStatusConfig,
+		handleDeleteFile,
+		handleSelect,
+		hideDeleteAction,
+		hideFileNames,
+		hideFileSizes,
+		hideFileStatuses,
+		selectedFiles,
+		showActionsOnHover
+	]);
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": "File preview list",
+		className: cn("flex w-full flex-col", { "h-full": previewStyle !== "grid" }, className),
+		children: shouldUseVirtualizedList ? /* @__PURE__ */ jsx(FilePreviewVirtualizedList, {
+			...commonProps,
+			createFileCardProps,
+			files,
+			previewStyle,
+			selectedFiles
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: containerClasses,
+			"data-testid": dataTestId,
+			children: files.map((fileResource, index) => /* @__PURE__ */ jsx("li", {
+				"data-testid": `${dataTestId}-item-${index}`,
+				children: /* @__PURE__ */ jsx(FileCard, {
+					"data-testid": `${dataTestId}-card-${index}`,
+					...createFileCardProps(fileResource, index)
+				})
+			}, `${getItemIdentifier(fileResource)}-${index}`))
+		})
+	});
+};
+FilePreviewList.displayName = "FilePreviewList";
+//#endregion
+//#region src/FileUpload/components/FileUpload/FileUpload.tsx
+/**
+* FileUpload component for handling single or multiple file uploads
+* with built-in validation and preview capabilities.
+*
+* This is the main container component that combines the drag-and-drop area (FileDropzone)
+* and the file preview list (FilePreviewList) into a single, cohesive interface.
+* It handles the file validation, upload state management, and preview display through
+* the FileUploadProvider context.
+*
+*/
+const FileUpload = ({ disabled, error, hideFilePreview = false, initialFiles, maxFiles, maxSize, onDrop, onDropAccepted, onDropRejected, onFileDelete, previewConfig, previewStyle = "list", ...dropzoneProps }) => {
+	return /* @__PURE__ */ jsx(FileUploadProvider, {
+		accept: dropzoneProps.accept,
+		disabled,
+		error,
+		initialFiles,
+		maxFiles,
+		maxSize,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		onFileDelete,
+		strictValidation: dropzoneProps.strictValidation,
+		validator: dropzoneProps.validator,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-md",
+			children: [/* @__PURE__ */ jsx(FileDropzone, { ...dropzoneProps }), !hideFilePreview && /* @__PURE__ */ jsx(FilePreviewList, {
+				...previewConfig,
+				onDelete: onFileDelete,
+				previewStyle
+			})]
+		})
+	});
+};
+FileUpload.displayName = "FileUpload";
+//#endregion
+//#region src/FileUpload/components/FileDropzoneOverlay/components/OverlayDropzoneDragText.tsx
+const OverlayDropzoneDragText = ({ dragText, isDragActive, validation }) => {
+	const overlayText = useMemo(() => {
+		if (!isDragActive) return null;
+		if (validation.dragValidationError?.message) return validation.dragValidationError.message;
+		return dragText;
+	}, [
+		isDragActive,
+		validation.dragValidationError,
+		dragText
+	]);
+	if (!overlayText) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-xl font-medium", validation.dragValidationError ? "text-text-critical" : "text-blue-600"),
+		children: overlayText
+	});
+};
+//#endregion
+//#region src/FileUpload/components/FileDropzoneOverlay/components/OverlayDropzoneContent.tsx
+const OverlayDropzoneContent = ({ accept, customIcon, dragText, isDragActive, maxFiles, validation }) => {
+	const iconColor = validation.dragValidationError ? "critical" : "secondary";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-center",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-xs flex justify-center",
+			children: useMemo(() => {
+				if (customIcon) return customIcon;
+				const isSingleFile = maxFiles === 1;
+				if (accept === "images" || Array.isArray(accept) && accept.some((type) => type.startsWith("image/"))) {
+					if (isSingleFile) return /* @__PURE__ */ jsx(ImageSquare, {
+						color: iconColor,
+						size: "lg",
+						style: "duotone"
+					});
+					return /* @__PURE__ */ jsx(ImagesSquare, {
+						color: iconColor,
+						size: "lg",
+						style: "duotone"
+					});
+				}
+				if (accept === "documents") {
+					if (isSingleFile) return /* @__PURE__ */ jsx(FileText, {
+						color: iconColor,
+						size: "lg",
+						style: "duotone"
+					});
+					return /* @__PURE__ */ jsx(Files, {
+						color: iconColor,
+						size: "lg",
+						style: "duotone"
+					});
+				}
+				if (accept === "pdfs" || Array.isArray(accept) && accept.some((type) => type === "application/pdf")) return /* @__PURE__ */ jsx(FilePdf, {
+					color: iconColor,
+					size: "lg",
+					style: "duotone"
+				});
+				if (Array.isArray(accept) && accept.some((type) => type === "text/csv" || type === ".csv" || type.includes("csv"))) return /* @__PURE__ */ jsx(FileCsv, {
+					color: iconColor,
+					size: "lg",
+					style: "duotone"
+				});
+				if (Array.isArray(accept) && accept.some((type) => type.includes("zip") || type.includes("rar") || type.includes("7z") || type.includes("tar") || type.includes("gzip") || type === "application/x-zip-compressed" || type === "application/x-rar-compressed" || type === "application/x-7z-compressed")) return /* @__PURE__ */ jsx(FileArchive, {
+					color: iconColor,
+					size: "lg",
+					style: "duotone"
+				});
+				return /* @__PURE__ */ jsx(Files, {
+					color: iconColor,
+					size: "lg",
+					style: "duotone"
+				});
+			}, [
+				customIcon,
+				accept,
+				maxFiles,
+				iconColor
+			])
+		}), /* @__PURE__ */ jsx(OverlayDropzoneDragText, {
+			dragText,
+			isDragActive,
+			validation
+		})]
+	});
+};
+//#endregion
+//#region src/FileUpload/components/FileDropzoneOverlay/styles.ts
+const getUploadOverlayStyles = ({ disableClickThrough, disabled, disableDragValidation, isDragActive, styleOptions = {}, validationError }) => {
+	const { blurOnDrag = false, showDashedBorder = true } = styleOptions;
+	const isInvalid = Boolean(validationError);
+	const isErrorState = disableDragValidation ? false : isInvalid;
+	const isDraggedOver = isDragActive && (disableDragValidation || !isInvalid);
+	return cn([
+		"absolute inset-0",
+		"flex flex-col",
+		"h-full w-full",
+		"items-center justify-center",
+		"rounded-[var(--container-border-radius)]",
+		showDashedBorder && "outline-dashed outline-1 -outline-offset-1",
+		"transition-colors",
+		disableClickThrough && "cursor-pointer group-hover/dropzone:bg-background-hover group-hover/dropzone:outline-border-hover"
+	], !disableClickThrough && "pointer-events-none", "z-10", ["hui-focus-visible-outline"], { "outline outline-4 outline-offset-0 outline-focus-primary": isDragActive }, {
+		"backdrop-blur-[2px]": blurOnDrag && isDraggedOver && !isErrorState && !disabled,
+		"backdrop-blur-sm": blurOnDrag && isDragActive && isErrorState,
+		"bg-background-critical-light/50 outline-border-critical": isErrorState && !disabled && isDragActive,
+		"bg-background-hover bg-background-secondary/90": isDraggedOver && !isErrorState && !disabled,
+		"bg-transparent outline-border-secondary": !isDragActive
+	});
+};
+//#endregion
+//#region src/FileUpload/components/FileDropzoneOverlay/FileDropzoneOverlay.tsx
+const FileDropzoneOverlay = ({ accept: acceptProp, ariaLabel, children, className, "data-testid": dataTestId = "file-dropzone-overlay", disableClickThrough = false, disabled: disabledProp = false, disableDragValidation = false, dragText = "Drop files to upload", error, files: filesProp, icon, maxFiles: maxFilesProp, maxSize: maxSizeProp, onDrop: onDropProp, onDropAccepted: onDropAcceptedProp, onDropRejected: onDropRejectedProp, onFilesChange: onFilesChangeProp, showDebugger, strictValidation, styleOptions, validator }) => {
+	const uploadContext = useContext(FileUploadContext);
+	const validation = useFileValidation({
+		accept: acceptProp,
+		error,
+		maxFiles: maxFilesProp,
+		maxSize: maxSizeProp,
+		strictValidation,
+		validator
+	});
+	const files = filesProp ?? uploadContext?.files ?? [];
+	const setFiles = onFilesChangeProp ?? uploadContext?.setFiles ?? (() => {});
+	const disabled = disabledProp || uploadContext?.disabled;
+	const onDrop = onDropProp ?? uploadContext?.onDrop;
+	const onDropAccepted = onDropAcceptedProp ?? uploadContext?.onDropAccepted;
+	const onDropRejected = onDropRejectedProp ?? uploadContext?.onDropRejected;
+	const maxFiles = maxFilesProp ?? validation.maxFiles;
+	const maxSize = maxSizeProp ?? validation.maxSize;
+	const accept = acceptProp ?? validation.accept;
+	const { isDisabled } = useUploadAvailability({
+		disabled,
+		files,
+		maxFiles
+	});
+	const allowMultipleFiles = maxFiles === void 0 || maxFiles > 1;
+	const filePluralizationText = allowMultipleFiles ? "files" : "a file";
+	const mimeTypes = getMimeTypes(accept);
+	const handleDrop = useHandleDrop({
+		files,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		setFiles,
+		validation
+	});
+	const handleDragEnter = useHandleDragEnter({
+		files,
+		mimeTypes,
+		validation,
+		validator
+	});
+	const { getInputProps, getRootProps, isDragActive } = useDropzone({
+		accept: mimeTypes,
+		disabled: isDisabled,
+		maxSize,
+		multiple: allowMultipleFiles,
+		noClick: !disableClickThrough,
+		noKeyboard: !disableClickThrough,
+		onDragEnter: disableDragValidation ? validation.clearAllValidation : handleDragEnter,
+		onDragLeave: validation.clearAllValidation,
+		onDrop: handleDrop,
+		validator: createDropzoneValidator(validation)
+	});
+	const uploadZoneStyles = getUploadOverlayStyles({
+		disableClickThrough,
+		disabled: isDisabled,
+		disableDragValidation,
+		isDragActive,
+		styleOptions,
+		validationError: isDragActive ? validation.dragValidationError : validation.dropValidationErrors[0]
+	});
+	const innerPaddingClass = styleOptions?.innerPadding ? {
+		"2xl": "p-2xl",
+		lg: "p-lg",
+		md: "p-md",
+		sm: "p-sm",
+		xl: "p-xl",
+		xs: "p-xs"
+	}[styleOptions.innerPadding] : void 0;
+	const fillParentClass = styleOptions?.fillParent ? "h-full" : "relative";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		...getRootProps({
+			"aria-disabled": isDisabled,
+			"aria-label": ariaLabel ?? (isDragActive ? dragText : void 0),
+			className: cn("group/dropzone", fillParentClass, className),
+			"data-testid": `${dataTestId}-root`
+		}),
+		children: [
+			/* @__PURE__ */ jsx("input", { ...getInputProps({
+				"aria-label": `Upload ${filePluralizationText}`,
+				"data-testid": `${dataTestId}-input`
+			}) }),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("isolate", fillParentClass, innerPaddingClass),
+				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("w-full", uploadZoneStyles),
+				"data-testid": `${dataTestId}-container`,
+				children: isDragActive && /* @__PURE__ */ jsx(OverlayDropzoneContent, {
+					accept,
+					customIcon: icon,
+					dragText,
+					isDragActive,
+					maxFiles,
+					validation
+				})
+			})
+		]
+	}), showDebugger && /* @__PURE__ */ jsx(FileDropzoneDebugger, { fileRejections: validation.fileRejections })] });
+};
+FileDropzoneOverlay.displayName = "FileDropzoneOverlay";
+//#endregion
+//#region src/FileUpload/components/FileUploadCanvas/FileUploadCanvas.tsx
+/**
+* Empty state component displayed when no files are present
+*/
+const EmptyState = () => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full flex-col items-center justify-center gap-xs", "bg-gray-50 px-md py-2xl"),
+		children: [/* @__PURE__ */ jsx(UploadSimple, { color: "secondary" }), /* @__PURE__ */ jsx(BodyPrimary, {
+			className: "text-center",
+			color: "secondary",
+			children: "Drag files here to upload"
+		})]
+	});
+};
+/**
+* Canvas content that shows either FilePreviewList or empty state
+*/
+const CanvasContent = ({ onFileDelete, previewConfig, previewStyle }) => {
+	if ((useContext(FileUploadContext)?.files ?? []).length === 0) return /* @__PURE__ */ jsx(EmptyState, {});
+	return /* @__PURE__ */ jsx(FilePreviewList, {
+		...previewConfig,
+		onDelete: onFileDelete,
+		previewStyle
+	});
+};
+/**
+* FileUploadCanvas component - An out-of-the-box solution for drag-and-drop file uploads
+* with overlay-based interaction.
+*
+* This component wraps FilePreviewList with FileDropzoneOverlay, allowing users to drag
+* files over existing content. The overlay appears during drag operations and provides
+* visual feedback. It uses FileUploadProvider for state management.
+*
+* Key differences from FileUpload:
+* - Uses FileDropzoneOverlay (overlay-based) instead of FileDropzone (dedicated area)
+* - Supports disableClickThrough for interactive content underneath
+* - Always shows FilePreviewList (no hideFilePreview option)
+* - Ideal for gallery views and canvas-style interfaces
+*/
+const FileUploadCanvas = ({ className, disabled, error, initialFiles, maxFiles, maxSize, onDrop, onDropAccepted, onDropRejected, onFileDelete, previewConfig, previewStyle = "list", ...dropzoneOverlayProps }) => {
+	return /* @__PURE__ */ jsx(FileUploadProvider, {
+		accept: dropzoneOverlayProps.accept,
+		disabled,
+		error,
+		initialFiles,
+		maxFiles,
+		maxSize,
+		onDrop,
+		onDropAccepted,
+		onDropRejected,
+		onFileDelete,
+		strictValidation: dropzoneOverlayProps.strictValidation,
+		validator: dropzoneOverlayProps.validator,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-full w-full overflow-y-auto", className),
+			children: /* @__PURE__ */ jsx(FileDropzoneOverlay, {
+				...dropzoneOverlayProps,
+				styleOptions: {
+					...dropzoneOverlayProps.styleOptions,
+					fillParent: true
+				},
+				children: /* @__PURE__ */ jsx(CanvasContent, {
+					onFileDelete,
+					previewConfig,
+					previewStyle
+				})
+			})
+		})
+	});
+};
+FileUploadCanvas.displayName = "FileUploadCanvas";
+//#endregion
+export { FileCard as a, FileDropzone as c, useFileUploadContext as d, FilePreviewList as i, FileUploadContext as l, FileDropzoneOverlay as n, ListFileCard as o, FileUpload as r, GridFileCard as s, FileUploadCanvas as t, FileUploadProvider as u };
+
+//# sourceMappingURL=FileUpload-p_pl9NXr.mjs.map