@px-ui/core 4.0.0 → 4.1.0

package/dist/index.js

@@ -70,7 +70,7 @@ function cn(...inputs) {
 
 //#endregion
 //#region src/components/button.tsx
-const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors disabled:cursor-not-allowed shrink-0 [&_svg]:shrink-0 outline-none rounded-ppx-s font-medium focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30", {
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer disabled:cursor-not-allowed shrink-0 [&_svg]:shrink-0 outline-none rounded-ppx-s font-medium focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30", {
 	variants: {
 		variant: {
 			default: "bg-ppx-neutral-11 text-white shadow-xs not-disabled:hover:bg-ppx-neutral-10 not-disabled:active:bg-ppx-neutral-11 disabled:bg-ppx-neutral-6",
@@ -79,7 +79,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 			outline: "shadow-xs not-disabled:hover:bg-ppx-neutral-2 not-disabled:active:bg-ppx-neutral-3 disabled:border-ppx-neutral-7 border border-ppx-neutral-11 text-ppx-neutral-11 disabled:text-ppx-neutral-7",
 			"primary-outline": "shadow-xs not-disabled:hover:bg-ppx-primary-1 not-disabled:active:bg-ppx-primary-2/50 disabled:text-ppx-primary-2 disabled:border-ppx-primary-2 border border-ppx-primary-5 text-ppx-primary-5",
 			ghost: "not-disabled:hover:bg-ppx-neutral-2 not-disabled:active:bg-ppx-neutral-3 not-disabled:hover:text-black text-ppx-neutral-12 disabled:opacity-70",
-			link: "text-ppx-neutral-12 underline-offset-4 underline cursor-pointer not-disabled:hover:bg-ppx-neutral-2 not-disabled:active:bg-ppx-neutral-3 disabled:opacity-70"
+			link: "text-ppx-neutral-12 underline-offset-4 underline not-disabled:hover:bg-ppx-neutral-2 not-disabled:active:bg-ppx-neutral-3 disabled:opacity-70"
 		},
 		size: {
 			default: "px-4 py-2 h-10 has-[>svg]:px-3 text-ppx-base",
@@ -138,7 +138,7 @@ var dialog_exports = /* @__PURE__ */ __export({
 	Portal: () => Portal$1,
 	Root: () => Root$11,
 	Title: () => Title$3,
-	Trigger: () => Trigger$8
+	Trigger: () => Trigger$7
 });
 function Root$11({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Root, {
@@ -152,7 +152,7 @@ function Portal$1({ ...props }) {
 		...props
 	});
 }
-function Trigger$8({ ...props }) {
+function Trigger$7({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "dialog-trigger",
 		...props
@@ -247,7 +247,7 @@ var popover_exports = /* @__PURE__ */ __export({
 	Header: () => Header$2,
 	Root: () => Root$10,
 	Title: () => Title$2,
-	Trigger: () => Trigger$7
+	Trigger: () => Trigger$6
 });
 function Root$10(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
@@ -261,7 +261,7 @@ function Portal(props) {
 		...props
 	});
 }
-function Trigger$7(props) {
+function Trigger$6(props) {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
 		"data-slot": "popover-trigger",
 		...props
@@ -691,20 +691,20 @@ var combobox_exports = /* @__PURE__ */ __export({
 	Chip: () => Chip,
 	ChipsTrigger: () => ChipsTrigger,
 	Content: () => Content$4,
-	Item: () => Item$7,
-	List: () => List$2,
+	Item: () => Item$6,
+	List: () => List$3,
 	LoadingIndicator: () => LoadingIndicator,
 	MultiItem: () => MultiItem$1,
 	Root: () => Root$8,
 	Search: () => Search,
 	SearchableTrigger: () => SearchableTrigger,
 	SearchableTriggerDropdownAddon: () => SearchableTriggerDropdownAddon,
-	Trigger: () => Trigger$6,
+	Trigger: () => Trigger$5,
 	Value: () => Value$2,
 	useComboboxContext: () => useComboboxContext
 });
 const SINGLE_TEXT_CONTENT_CN = "px-4 py-2 text-ppx-sm min-h-11 flex items-center justify-center text-ppx-muted-foreground";
-const List$2 = Combobox.List;
+const List$3 = Combobox.List;
 const ComboboxContext = React$1.createContext({});
 function Root$8({ children, ...props }) {
 	const chipsTriggerRef = React$1.useRef(null);
@@ -786,7 +786,7 @@ function Content$4({ empty = "No options", portalProps, positionerProps, popupPr
 		})
 	});
 }
-function Item$7({ className, ...props }) {
+function Item$6({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Item, {
 		className: cn(DROPDOWN_ITEM_CN, className),
 		...props,
@@ -863,7 +863,7 @@ function SearchableTriggerDropdownAddon() {
 		]
 	});
 }
-function Trigger$6({ size, widthVariant, children, className, ...props }) {
+function Trigger$5({ size, widthVariant, children, className, ...props }) {
 	const { isLoading, invalid } = useComboboxContext();
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		"aria-label": "Open popup",
@@ -969,12 +969,12 @@ const BaseCombobox = Combobox;
 var select_exports = /* @__PURE__ */ __export({
 	BaseSelect: () => BaseSelect,
 	Content: () => Content$3,
-	Item: () => Item$6,
-	List: () => List$1,
+	Item: () => Item$5,
+	List: () => List$2,
 	MultiItem: () => MultiItem,
 	MultiSelectedValue: () => MultiSelectedValue,
 	Root: () => Root$7,
-	Trigger: () => Trigger$5,
+	Trigger: () => Trigger$4,
 	Value: () => Value$1
 });
 const SelectContext = React$1.createContext({});
@@ -1007,8 +1007,8 @@ function Content$3({ portalProps, positionerProps, popupProps, children, widthVa
 		})
 	});
 }
-const List$1 = Select.List;
-function Item$6({ className, ...props }) {
+const List$2 = Select.List;
+function Item$5({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.Item, {
 		className: cn(DROPDOWN_ITEM_CN, className),
 		...props,
@@ -1031,7 +1031,7 @@ function ItemIndicator(props) {
 		children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 	});
 }
-function Trigger$5({ size, widthVariant, ...props }) {
+function Trigger$4({ size, widthVariant, ...props }) {
 	const { invalid } = useSelectContext();
 	return /* @__PURE__ */ jsxs(Select.Trigger, {
 		"aria-label": "Open popup",
@@ -1086,15 +1086,15 @@ var menu_exports = /* @__PURE__ */ __export({
 	DropdownIndicator: () => DropdownIndicator,
 	Group: () => Group$3,
 	GroupLabel: () => GroupLabel,
-	Item: () => Item$5,
+	Item: () => Item$4,
 	RadioGroup: () => RadioGroup$1,
 	RadioItem: () => RadioItem,
 	Root: () => Root$6,
 	Separator: () => Separator$1,
-	Trigger: () => Trigger$4
+	Trigger: () => Trigger$3
 });
 const Root$6 = Menu.Root;
-function Trigger$4({ className, children, size, widthVariant = "fit", ...props }) {
+function Trigger$3({ className, children, size, widthVariant = "fit", ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Trigger, {
 		className: cn(triggerVariants({
 			size,
@@ -1123,7 +1123,7 @@ function Content$2({ portalProps, positionerProps, popupProps, children, widthVa
 function DropdownIndicator() {
 	return /* @__PURE__ */ jsx(ChevronDownIcon, { className: "data-popup-open:rotate-180" });
 }
-function Item$5({ className, children, ...props }) {
+function Item$4({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		className: cn(DROPDOWN_ITEM_CN, className),
 		...props,
@@ -1203,7 +1203,7 @@ const BaseProgress = Progress;
 //#endregion
 //#region src/components/segmented-control.tsx
 var segmented_control_exports = /* @__PURE__ */ __export({
-	Item: () => Item$4,
+	Item: () => Item$3,
 	Root: () => Root$4
 });
 const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", {
@@ -1227,7 +1227,7 @@ function Root$4({ className, ...props }) {
 		...props
 	});
 }
-function Item$4({ children, className, variant, size, ...props }) {
+function Item$3({ children, className, variant, size, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "segmented-control-item",
 		className: cn(segmentedControlItemVariants({
@@ -1244,9 +1244,9 @@ function Item$4({ children, className, variant, size, ...props }) {
 //#region src/components/tabs.tsx
 var tabs_exports = /* @__PURE__ */ __export({
 	Content: () => Content$1,
-	List: () => List,
+	List: () => List$1,
 	Root: () => Root$3,
-	Trigger: () => Trigger$3
+	Trigger: () => Trigger$2
 });
 const TabsContext = React$1.createContext(null);
 const useTabs = () => {
@@ -1264,7 +1264,7 @@ function Root$3({ variant = "underline", className, ...props }) {
 		})
 	});
 }
-function List({ className, children, ...props }) {
+function List$1({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Tabs.List, {
 		"data-slot": "tabs-list",
 		className: cn("text-muted-foreground h-9 gap-x-1 p-1 relative z-0 inline-flex w-fit items-center justify-center", className),
@@ -1276,7 +1276,7 @@ function List({ className, children, ...props }) {
 		]
 	});
 }
-function Trigger$3({ className, ...props }) {
+function Trigger$2({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		"data-slot": "tabs-trigger",
 		className: cn("focus-visible:ring-ring/50 [&_svg:not([class*='size-'])] gap-1.5 px-2 py-1 text-sm font-medium z-[1] flex-1 items-center justify-center text-nowrap whitespace-nowrap text-ppx-neutral-18 not-data-selected:hover:text-ppx-neutral-12 focus-visible:ring-[3px] data-selected:text-ppx-primary-b-5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
@@ -1306,7 +1306,7 @@ var tooltip_exports = /* @__PURE__ */ __export({
 	BaseRoot: () => BaseRoot,
 	Content: () => Content,
 	Root: () => Root$2,
-	Trigger: () => Trigger$2
+	Trigger: () => Trigger$1
 });
 function TooltipProvider(props) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, {
@@ -1340,7 +1340,7 @@ function Root$2({ ...props }) {
 }
 const BaseRoot = Tooltip.Root;
 const BaseProvider = Tooltip.Provider;
-function Trigger$2({ ...props }) {
+function Trigger$1({ ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...props
@@ -1437,7 +1437,7 @@ var block_checkbox_group_exports = /* @__PURE__ */ __export({
 	Description: () => Description$1,
 	Group: () => Group$2,
 	Header: () => Header$1,
-	Item: () => Item$3,
+	Item: () => Item$2,
 	Title: () => Title$1
 });
 function Group$2({ className, ...props }) {
@@ -1446,7 +1446,7 @@ function Group$2({ className, ...props }) {
 		...props
 	});
 }
-function Item$3({ className, invalid, children, ...rest }) {
+function Item$2({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-data-disabled:hover:border-ppx-neutral-6 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60 has-data-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
 		children: [/* @__PURE__ */ jsx("div", {
@@ -1483,7 +1483,7 @@ function Description$1(props) {
 //#region src/components/radio-group.tsx
 var radio_group_exports = /* @__PURE__ */ __export({
 	Group: () => Group$1,
-	Item: () => Item$1
+	Item: () => Item
 });
 function Group$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
@@ -1506,7 +1506,7 @@ const radioVariants = cva("relative inline-flex bg-ppx-background aria-invalid:b
 		size: "default"
 	}
 });
-function Item$1({ className, variant, size, ...props }) {
+function Item({ className, variant, size, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "radio-group-item",
 		className: cn(radioVariants({
@@ -1545,7 +1545,7 @@ var block_radio_group_exports = /* @__PURE__ */ __export({
 	Description: () => Description,
 	Group: () => Group,
 	Header: () => Header,
-	Item: () => Item$2,
+	Item: () => Item$1,
 	Title: () => Title
 });
 function Group({ className, ...props }) {
@@ -1555,13 +1555,13 @@ function Group({ className, ...props }) {
 		...props
 	});
 }
-function Item$2({ className, invalid, children, ...rest }) {
+function Item$1({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-data-disabled:hover:border-ppx-neutral-6 has-data-disabled:cursor-not-allowed has-data-disabled:opacity-60 has-data-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex-1",
 			children
-		}), /* @__PURE__ */ jsx(Item$1, {
+		}), /* @__PURE__ */ jsx(Item, {
 			...rest,
 			className: "ml-auto shrink-0 self-start",
 			size: "lg",
@@ -1653,7 +1653,7 @@ var collapsible_exports = /* @__PURE__ */ __export({
 	Panel: () => Panel,
 	Root: () => Root$1,
 	ToggleIcon: () => ToggleIcon,
-	Trigger: () => Trigger$1
+	Trigger: () => Trigger
 });
 function Root$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
@@ -1662,7 +1662,7 @@ function Root$1({ className, ...props }) {
 		...props
 	});
 }
-function Trigger$1(props) {
+function Trigger(props) {
 	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
 		"data-slot": "collapsible-trigger",
 		...props,
@@ -2186,7 +2186,7 @@ const replaceSizeInUrl = (url, size) => {
 function Avatar(props) {
 	return /* @__PURE__ */ jsxs(Root$2, {
 		disabled: props.hideTooltip,
-		children: [/* @__PURE__ */ jsx(Trigger$2, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
+		children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
 			...props,
 			avatarRootProps: tooltipProps
 		}) }), /* @__PURE__ */ jsx(Content, { children: props.name })]
@@ -2231,7 +2231,7 @@ function AvatarGroup({ max = 4, avatars, className }) {
 	return /* @__PURE__ */ jsx(BaseProvider, { children: /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center", className),
 		"data-slot": "avatar-group",
-		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger$2, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
+		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
 			className: "relative",
 			style: {
 				marginLeft: index > 0 ? `-${parseInt(avatar.size ?? "100px") * .25}px` : "0",
@@ -2248,7 +2248,7 @@ function AvatarGroup({ max = 4, avatars, className }) {
 				marginLeft: `-${parseInt(avatars[0].size ?? "100px") * .25}px`,
 				zIndex: 0
 			},
-			children: /* @__PURE__ */ jsxs(Root$10, { children: [/* @__PURE__ */ jsx(Trigger$7, {
+			children: /* @__PURE__ */ jsxs(Root$10, { children: [/* @__PURE__ */ jsx(Trigger$6, {
 				openOnHover: true,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: cn("bg-ppx-neutral-3 text-ppx-neutral-18 hover:bg-ppx-neutral-4 flex cursor-pointer items-center justify-center font-medium transition-colors", avatars[0].variant === "rounded" ? "rounded-full" : "rounded-ppx-s"),
@@ -2342,7 +2342,7 @@ function DatePicker({ triggerProps, placeholder = "Pick a date", format: format$
 		open,
 		onOpenChange: setOpen,
 		...popoverRootProps,
-		children: [/* @__PURE__ */ jsxs(Trigger$7, {
+		children: [/* @__PURE__ */ jsxs(Trigger$6, {
 			disabled: triggerProps?.disabled,
 			className: cn(triggerVariants({
 				size: triggerProps?.size,
@@ -2408,32 +2408,6 @@ function RetryIcon(props) {
 	});
 }
 
-//#endregion
-//#region src/icons/upload-icon.tsx
-function UploadIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		...props,
-		className: cn("shrink-0", props.className),
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-			/* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
-			/* @__PURE__ */ jsx("line", {
-				x1: "12",
-				y1: "3",
-				x2: "12",
-				y2: "15"
-			})
-		]
-	});
-}
-
 //#endregion
 //#region src/hooks/use-file-upload.ts
 const formatBytes = (bytes, decimals = 2) => {
@@ -2454,22 +2428,51 @@ const formatBytes = (bytes, decimals = 2) => {
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
 	return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];
 };
+/**
+* Extract error message from various error formats, including S3 XML errors
+*/
+function extractErrorMessage(error) {
+	if (typeof error === "string") return error;
+	if (error instanceof Error) {
+		const xmlMatch = error.message.match(/<Message>(.*?)<\/Message>/);
+		if (xmlMatch) return xmlMatch[1];
+		return error.message;
+	}
+	if (error && typeof error === "object") {
+		if ("responseText" in error && typeof error.responseText === "string") {
+			const xmlMatch = error.responseText.match(/<Message>(.*?)<\/Message>/);
+			if (xmlMatch) return xmlMatch[1];
+		}
+		if ("body" in error && typeof error.body === "string") {
+			const xmlMatch = error.body.match(/<Message>(.*?)<\/Message>/);
+			if (xmlMatch) return xmlMatch[1];
+		}
+		if ("message" in error && typeof error.message === "string") return error.message;
+		if ("error" in error) return extractErrorMessage(error.error);
+	}
+	return "Upload failed";
+}
 const useFileUpload = (options = {}) => {
 	const { upload, ...baseOptions } = options;
 	const autoUpload = upload?.autoUpload ?? true;
-	const [files, setFiles] = useState((baseOptions.initialFiles ?? []).map((file) => ({
+	const [files, setFilesState] = useState((baseOptions.initialFiles ?? []).map((file) => ({
 		file,
 		id: file.id,
 		preview: file.url,
 		progress: 100,
-		status: "success",
+		status: "complete",
 		uploadedUrl: file.url
 	})));
 	const [isUploading, setIsUploading] = useState(false);
 	const [isDragging, setIsDragging] = useState(false);
 	const [errors, setErrors] = useState([]);
+	const [instanceKey, setInstanceKey] = useState(0);
 	const inputRef = useRef(null);
 	const abortControllersRef = useRef(/* @__PURE__ */ new Map());
+	const cancelAllUploads = useCallback(() => {
+		for (const controller of abortControllersRef.current.values()) controller.abort();
+		abortControllersRef.current.clear();
+	}, []);
 	const { maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, accept = "*", multiple = false, onFilesChange, onFilesAdded } = baseOptions;
 	const validateFile = useCallback((file) => {
 		if (file.size > maxSize) return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`;
@@ -2503,13 +2506,13 @@ const useFileUpload = (options = {}) => {
 		const file = fileWithStatus.file;
 		if (!(file instanceof File)) return {
 			...fileWithStatus,
-			status: "success",
+			status: "complete",
 			progress: 100
 		};
 		const abortController = new AbortController();
 		abortControllersRef.current.set(fileWithStatus.id, abortController);
 		try {
-			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
+			setFilesState((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
 				...f,
 				status: "uploading",
 				progress: 0
@@ -2521,25 +2524,30 @@ const useFileUpload = (options = {}) => {
 				signal: abortController.signal
 			});
 			if (presignedError || !presignedResult) throw presignedError || /* @__PURE__ */ new Error("Failed to get presigned URL");
-			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
+			setFilesState((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
 				...f,
 				progress: 10
 			} : f));
 			const { result: uploadResult, error: uploadError } = await upload.uploadFile(presignedResult.url, file, presignedResult, (progress) => {
-				const scaledProgress = 10 + progress * .9;
-				setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
+				const scaledProgress = Math.min(10 + progress * .89, 99);
+				setFilesState((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
 					...f,
 					progress: Math.round(scaledProgress)
 				} : f));
 			}, abortController.signal);
 			if (uploadError) throw uploadError;
+			setFilesState((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
+				...f,
+				progress: 100
+			} : f));
+			await new Promise((resolve) => setTimeout(resolve, 150));
 			const uploadedFile = {
 				...fileWithStatus,
-				status: "success",
+				status: "complete",
 				progress: 100,
-				uploadedUrl: uploadResult?.url ?? presignedResult.fullPath
+				uploadedUrl: uploadResult?.url ?? presignedResult.full_path
 			};
-			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? uploadedFile : f));
+			setFilesState((prev) => prev.map((f) => f.id === fileWithStatus.id ? uploadedFile : f));
 			upload.onUploadComplete?.(uploadedFile);
 			return uploadedFile;
 		} catch (error) {
@@ -2548,13 +2556,13 @@ const useFileUpload = (options = {}) => {
 				status: "idle",
 				progress: 0
 			};
-			const errorMessage = error instanceof Error ? error.message : "Upload failed";
+			const errorMessage = extractErrorMessage(error);
 			const failedFile = {
 				...fileWithStatus,
 				status: "error",
 				error: errorMessage
 			};
-			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? failedFile : f));
+			setFilesState((prev) => prev.map((f) => f.id === fileWithStatus.id ? failedFile : f));
 			upload.onUploadError?.(failedFile, error);
 			return failedFile;
 		} finally {
@@ -2583,7 +2591,7 @@ const useFileUpload = (options = {}) => {
 		const newFilesArray = Array.from(newFiles);
 		const newErrors = [];
 		setErrors([]);
-		if (!multiple) setFiles((prev) => {
+		if (!multiple) setFilesState((prev) => {
 			for (const file of prev) if (file.preview && file.file instanceof File) URL.revokeObjectURL(file.preview);
 			return [];
 		});
@@ -2612,7 +2620,7 @@ const useFileUpload = (options = {}) => {
 		}
 		if (validFiles.length > 0) {
 			onFilesAdded?.(validFiles);
-			setFiles((prev) => {
+			setFilesState((prev) => {
 				const updatedFiles = !multiple ? validFiles : [...prev, ...validFiles];
 				onFilesChange?.(updatedFiles);
 				return updatedFiles;
@@ -2642,7 +2650,7 @@ const useFileUpload = (options = {}) => {
 			controller.abort();
 			abortControllersRef.current.delete(id);
 		}
-		setFiles((prev) => {
+		setFilesState((prev) => {
 			const fileToRemove = prev.find((file) => file.id === id);
 			if (fileToRemove?.preview && fileToRemove.file instanceof File) URL.revokeObjectURL(fileToRemove.preview);
 			const newFiles = prev.filter((file) => file.id !== id);
@@ -2651,23 +2659,50 @@ const useFileUpload = (options = {}) => {
 		});
 	}, [onFilesChange]);
 	const clearFiles = useCallback(() => {
-		for (const controller of abortControllersRef.current.values()) controller.abort();
-		abortControllersRef.current.clear();
-		setFiles((prev) => {
+		cancelAllUploads();
+		setFilesState((prev) => {
 			for (const file of prev) if (file.preview && file.file instanceof File) URL.revokeObjectURL(file.preview);
 			return [];
 		});
 		if (inputRef.current) inputRef.current.value = "";
 		setErrors([]);
 		onFilesChange?.([]);
-	}, [onFilesChange]);
+	}, [cancelAllUploads, onFilesChange]);
 	const clearErrors = useCallback(() => {
 		setErrors([]);
 	}, []);
+	const reset = useCallback((newFiles) => {
+		cancelAllUploads();
+		for (const file of files) if (file.preview && file.file instanceof File) URL.revokeObjectURL(file.preview);
+		if (inputRef.current) inputRef.current.value = "";
+		setErrors([]);
+		const initializedFiles = (newFiles ?? []).map((file) => ({
+			file,
+			id: file.id,
+			preview: file.url,
+			progress: 100,
+			status: "complete",
+			uploadedUrl: file.url
+		}));
+		setFilesState(initializedFiles);
+		onFilesChange?.(initializedFiles);
+		setInstanceKey((prev) => prev + 1);
+	}, [
+		cancelAllUploads,
+		files,
+		onFilesChange
+	]);
+	const setFiles = useCallback((newFiles) => {
+		setFilesState((prev) => {
+			const nextFiles = typeof newFiles === "function" ? newFiles(prev) : newFiles;
+			onFilesChange?.(nextFiles);
+			return nextFiles;
+		});
+	}, [onFilesChange]);
 	const retryUpload = useCallback(async (id) => {
 		const file = files.find((f) => f.id === id);
 		if (file && file.status === "error") {
-			setFiles((prev) => prev.map((f) => f.id === id ? {
+			setFilesState((prev) => prev.map((f) => f.id === id ? {
 				...f,
 				status: "idle",
 				error: void 0
@@ -2685,7 +2720,7 @@ const useFileUpload = (options = {}) => {
 			controller.abort();
 			abortControllersRef.current.delete(id);
 		}
-		setFiles((prev) => prev.map((f) => f.id === id ? {
+		setFilesState((prev) => prev.map((f) => f.id === id ? {
 			...f,
 			status: "idle",
 			progress: 0
@@ -2717,61 +2752,573 @@ const useFileUpload = (options = {}) => {
 	const handleFileChange = useCallback((e) => {
 		if (e.target.files?.length) addFiles(e.target.files);
 	}, [addFiles]);
-	const openFileDialog = useCallback(() => {
-		inputRef.current?.click();
-	}, []);
-	const getInputProps = useCallback((props = {}) => ({
-		...props,
-		accept: props.accept || accept,
-		multiple: props.multiple !== void 0 ? props.multiple : multiple,
-		onChange: handleFileChange,
-		ref: inputRef,
-		type: "file"
-	}), [
-		accept,
-		multiple,
-		handleFileChange
-	]);
-	return [{
+	return {
 		files,
 		isDragging,
+		isUploading,
 		errors,
-		isUploading
-	}, {
 		addFiles,
 		removeFile,
 		clearFiles,
 		clearErrors,
+		reset,
+		setFiles,
+		instanceKey,
+		uploadFiles,
+		retryUpload,
+		cancelUpload,
 		handleDragEnter,
 		handleDragLeave,
 		handleDragOver,
 		handleDrop,
 		handleFileChange,
-		openFileDialog,
-		getInputProps,
-		uploadFiles,
-		retryUpload,
-		cancelUpload
-	}];
+		openFileDialog: useCallback(() => {
+			inputRef.current?.click();
+		}, []),
+		getInputProps: useCallback((props = {}) => ({
+			...props,
+			accept: props.accept || accept,
+			multiple: props.multiple !== void 0 ? props.multiple : multiple,
+			onChange: handleFileChange,
+			ref: inputRef,
+			type: "file"
+		}), [
+			accept,
+			multiple,
+			handleFileChange
+		])
+	};
 };
 
 //#endregion
-//#region src/icons/file-icon.tsx
-function FileIcon(props) {
+//#region src/icons/pdf-icon.tsx
+function PdfIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 24 24",
 		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
 		...props,
 		className: cn("shrink-0", props.className),
-		children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" })]
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#E53935"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#FFCDD2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#E53935",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: "12",
+				y: "16",
+				textAnchor: "middle",
+				fill: "white",
+				fontSize: "5",
+				fontWeight: "bold",
+				fontFamily: "system-ui, sans-serif",
+				children: "PDF"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/word-icon.tsx
+function WordIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#1976D2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#BBDEFB"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#1976D2",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: "12",
+				y: "16",
+				textAnchor: "middle",
+				fill: "white",
+				fontSize: "5",
+				fontWeight: "bold",
+				fontFamily: "system-ui, sans-serif",
+				children: "DOC"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/excel-icon.tsx
+function ExcelIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#388E3C"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#C8E6C9"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#388E3C",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: "12",
+				y: "16",
+				textAnchor: "middle",
+				fill: "white",
+				fontSize: "5",
+				fontWeight: "bold",
+				fontFamily: "system-ui, sans-serif",
+				children: "XLS"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/image-file-icon.tsx
+function ImageFileIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#7B1FA2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#E1BEE7"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#7B1FA2",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "9",
+				cy: "13",
+				r: "1.5",
+				fill: "white"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M17 18H7l3-4 2 2 3-4 2 3",
+				stroke: "white",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				fill: "none"
+			})
+		]
 	});
 }
 
+//#endregion
+//#region src/icons/video-icon.tsx
+function VideoIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#D32F2F"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#FFCDD2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#D32F2F",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M10 12v6l5-3-5-3Z",
+				fill: "white"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/audio-icon.tsx
+function AudioIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#F57C00"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#FFE0B2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#F57C00",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12 11v5.5a2 2 0 1 1-2-2h2",
+				stroke: "white",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				fill: "none"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12 11l3-1v4",
+				stroke: "white",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				fill: "none"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/archive-icon.tsx
+function ArchiveIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#795548"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#D7CCC8"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#795548",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "9",
+				y: "11",
+				width: "2",
+				height: "2",
+				fill: "white"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "11",
+				y: "13",
+				width: "2",
+				height: "2",
+				fill: "white"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "9",
+				y: "15",
+				width: "2",
+				height: "2",
+				fill: "white"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "11",
+				y: "17",
+				width: "2",
+				height: "2",
+				fill: "white"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/code-file-icon.tsx
+function CodeFileIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#455A64"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#CFD8DC"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#455A64",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M9 12l-2 2.5L9 17",
+				stroke: "white",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M15 12l2 2.5-2 2.5",
+				stroke: "white",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/text-file-icon.tsx
+function TextFileIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#607D8B"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#CFD8DC"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#607D8B",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8 12h8M8 15h6M8 18h4",
+				stroke: "white",
+				strokeWidth: 1.5,
+				strokeLinecap: "round"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/generic-file-icon.tsx
+function GenericFileIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z",
+				fill: "#9E9E9E"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				fill: "#E0E0E0"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M14 2v6h6",
+				stroke: "#9E9E9E",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/get-file-type-icon.ts
+const extensionMap = {
+	pdf: PdfIcon,
+	doc: WordIcon,
+	docx: WordIcon,
+	rtf: WordIcon,
+	odt: WordIcon,
+	xls: ExcelIcon,
+	xlsx: ExcelIcon,
+	csv: ExcelIcon,
+	ods: ExcelIcon,
+	png: ImageFileIcon,
+	jpg: ImageFileIcon,
+	jpeg: ImageFileIcon,
+	gif: ImageFileIcon,
+	webp: ImageFileIcon,
+	svg: ImageFileIcon,
+	bmp: ImageFileIcon,
+	ico: ImageFileIcon,
+	tiff: ImageFileIcon,
+	tif: ImageFileIcon,
+	mp4: VideoIcon,
+	webm: VideoIcon,
+	mov: VideoIcon,
+	avi: VideoIcon,
+	mkv: VideoIcon,
+	wmv: VideoIcon,
+	flv: VideoIcon,
+	mp3: AudioIcon,
+	wav: AudioIcon,
+	ogg: AudioIcon,
+	flac: AudioIcon,
+	aac: AudioIcon,
+	m4a: AudioIcon,
+	wma: AudioIcon,
+	zip: ArchiveIcon,
+	rar: ArchiveIcon,
+	"7z": ArchiveIcon,
+	tar: ArchiveIcon,
+	gz: ArchiveIcon,
+	bz2: ArchiveIcon,
+	js: CodeFileIcon,
+	jsx: CodeFileIcon,
+	ts: CodeFileIcon,
+	tsx: CodeFileIcon,
+	json: CodeFileIcon,
+	html: CodeFileIcon,
+	css: CodeFileIcon,
+	scss: CodeFileIcon,
+	less: CodeFileIcon,
+	py: CodeFileIcon,
+	rb: CodeFileIcon,
+	java: CodeFileIcon,
+	c: CodeFileIcon,
+	cpp: CodeFileIcon,
+	h: CodeFileIcon,
+	go: CodeFileIcon,
+	rs: CodeFileIcon,
+	php: CodeFileIcon,
+	sql: CodeFileIcon,
+	sh: CodeFileIcon,
+	bash: CodeFileIcon,
+	yml: CodeFileIcon,
+	yaml: CodeFileIcon,
+	xml: CodeFileIcon,
+	txt: TextFileIcon,
+	md: TextFileIcon,
+	markdown: TextFileIcon,
+	log: TextFileIcon
+};
+const mimeTypeMap = {
+	"application/pdf": PdfIcon,
+	"application/msword": WordIcon,
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": WordIcon,
+	"application/rtf": WordIcon,
+	"application/vnd.oasis.opendocument.text": WordIcon,
+	"application/vnd.ms-excel": ExcelIcon,
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": ExcelIcon,
+	"text/csv": ExcelIcon,
+	"application/vnd.oasis.opendocument.spreadsheet": ExcelIcon,
+	"application/zip": ArchiveIcon,
+	"application/x-rar-compressed": ArchiveIcon,
+	"application/x-7z-compressed": ArchiveIcon,
+	"application/x-tar": ArchiveIcon,
+	"application/gzip": ArchiveIcon,
+	"application/javascript": CodeFileIcon,
+	"application/typescript": CodeFileIcon,
+	"application/json": CodeFileIcon,
+	"text/html": CodeFileIcon,
+	"text/css": CodeFileIcon,
+	"application/xml": CodeFileIcon,
+	"text/xml": CodeFileIcon,
+	"text/plain": TextFileIcon,
+	"text/markdown": TextFileIcon
+};
+/**
+* Get the appropriate file type icon component for a file.
+* Uses MIME type first, then falls back to file extension.
+*
+* @param file - Object with name and optional type (MIME type)
+* @returns React icon component for the file type
+*
+* @example
+* ```tsx
+* import { getFileTypeIcon } from "@px-ui/core";
+*
+* const Icon = getFileTypeIcon({ name: "document.pdf", type: "application/pdf" });
+* <Icon className="size-5" />
+* ```
+*/
+function getFileTypeIcon(file) {
+	if (file.type) {
+		if (file.type.startsWith("image/")) return ImageFileIcon;
+		if (file.type.startsWith("video/")) return VideoIcon;
+		if (file.type.startsWith("audio/")) return AudioIcon;
+		const mimeIcon = mimeTypeMap[file.type];
+		if (mimeIcon) return mimeIcon;
+	}
+	const extension = file.name.split(".").pop()?.toLowerCase();
+	if (extension) {
+		const extIcon = extensionMap[extension];
+		if (extIcon) return extIcon;
+	}
+	return GenericFileIcon;
+}
+
 //#endregion
 //#region src/components/file-upload.tsx
 const FileUploadContext = React$1.createContext(null);
@@ -2780,24 +3327,12 @@ function useFileUploadContext() {
 	if (!context) throw new Error("FileUpload components must be used within FileUpload.Root");
 	return context;
 }
-function Root({ children, files, addFiles, removeFile, clearFiles, retryUpload, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, isDragActive = false, isUploading = false, accept, multiple = false, disabled = false, className }) {
+function Root({ children, upload, accept, multiple = false, disabled = false, className }) {
 	const contextValue = {
-		files,
-		addFiles,
-		removeFile,
-		clearFiles,
-		retryUpload,
+		upload,
 		accept,
 		multiple,
-		disabled,
-		isDragActive,
-		isUploading,
-		openFileDialog,
-		getInputProps,
-		handleDragEnter,
-		handleDragLeave,
-		handleDragOver,
-		handleDrop
+		disabled
 	};
 	return /* @__PURE__ */ jsx(FileUploadContext.Provider, {
 		value: contextValue,
@@ -2825,8 +3360,9 @@ const dropzoneVariants = cva("flex flex-col items-center justify-center gap-4 ro
 		isDragActive: false
 	}
 });
-function Dropzone({ className, size, children, dropzoneText = "Paste Or Drag & Drop Files Here", browseText = "Browse for files", hideDefaultContent = false, ...props }) {
-	const { accept, multiple, disabled, isDragActive, isUploading, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, addFiles } = useFileUploadContext();
+function Dropzone({ className, size, dropzoneText = "Paste Or Drag & Drop Files Here", browseText = "Browse for files", render, ...props }) {
+	const { upload, accept, multiple, disabled } = useFileUploadContext();
+	const { isDragging, isUploading, files, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, addFiles } = upload;
 	const descriptionId = React$1.useId();
 	const instructionsId = React$1.useId();
 	const [announcement, setAnnouncement] = React$1.useState("");
@@ -2839,327 +3375,238 @@ function Dropzone({ className, size, children, dropzoneText = "Paste Or Drag & D
 	}, [openFileDialog]);
 	const handlePaste = React$1.useCallback((e) => {
 		if (disabled) return;
-		const files = e.clipboardData.files;
-		if (files.length > 0) {
+		const pastedFiles = e.clipboardData.files;
+		if (pastedFiles.length > 0) {
 			e.preventDefault();
-			const filesArray = Array.from(files);
+			const filesArray = Array.from(pastedFiles);
 			addFiles(filesArray);
 			setAnnouncement(`${filesArray.length} file${filesArray.length > 1 ? "s" : ""} pasted`);
 		}
 	}, [disabled, addFiles]);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "file-upload-dropzone",
-		className: cn(dropzoneVariants({
-			size,
-			isDragActive
-		}), disabled && "cursor-not-allowed opacity-60", className),
+	const handleClick = React$1.useCallback(() => {
+		if (disabled || isUploading) return;
+		openFileDialog();
+	}, [
+		disabled,
+		isUploading,
+		openFileDialog
+	]);
+	const state = {
+		isDragging,
+		isUploading,
+		disabled,
+		files
+	};
+	const renderProps = {
 		onDragEnter: handleDragEnter,
 		onDragLeave: handleDragLeave,
 		onDragOver: handleDragOver,
 		onDrop: handleDrop,
 		onPaste: handlePaste,
 		onKeyDown: handleKeyDown,
+		onClick: handleClick,
 		tabIndex: disabled ? -1 : 0,
 		role: "button",
 		"aria-disabled": disabled,
+		"data-dragging": isDragging
+	};
+	const hiddenInput = /* @__PURE__ */ jsx("input", {
+		...inputProps,
+		className: "sr-only",
+		accept,
+		multiple,
+		disabled,
+		tabIndex: -1,
+		"aria-hidden": "true"
+	});
+	const srElements = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			className: "sr-only",
+			children: announcement
+		}),
+		/* @__PURE__ */ jsx("div", {
+			id: descriptionId,
+			className: "sr-only",
+			children: dropzoneText
+		}),
+		/* @__PURE__ */ jsx("div", {
+			id: instructionsId,
+			className: "sr-only",
+			children: "Press Enter or Space to browse files, or drag and drop files here."
+		})
+	] });
+	if (render) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload-dropzone",
+		children: [
+			hiddenInput,
+			srElements,
+			render(renderProps, state)
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload-dropzone",
+		className: cn(dropzoneVariants({
+			size,
+			isDragActive: isDragging
+		}), disabled && "cursor-not-allowed opacity-60", className),
+		...renderProps,
 		"aria-describedby": `${descriptionId} ${instructionsId}`,
 		"aria-label": "File upload dropzone",
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				role: "status",
-				"aria-live": "polite",
-				"aria-atomic": "true",
-				className: "sr-only",
-				children: announcement
-			}),
-			/* @__PURE__ */ jsx("div", {
-				id: descriptionId,
-				className: "sr-only",
-				children: dropzoneText
+			srElements,
+			hiddenInput,
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-ppx-neutral-10 flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx(UploadCloudIcon, {
+					size: 40,
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-ppx-base text-ppx-neutral-13 font-medium",
+					children: dropzoneText
+				})]
 			}),
-			/* @__PURE__ */ jsx("div", {
-				id: instructionsId,
-				className: "sr-only",
-				children: "Press Enter or Space to browse files, or drag and drop files here."
-			}),
-			/* @__PURE__ */ jsx("input", {
-				...inputProps,
-				className: "sr-only",
-				accept,
-				multiple,
-				disabled,
-				tabIndex: -1,
-				"aria-hidden": "true"
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center gap-3",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx("div", { className: "bg-ppx-neutral-5 h-px flex-1" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-ppx-sm text-ppx-neutral-10 font-medium",
+						children: "OR"
+					}),
+					/* @__PURE__ */ jsx("div", { className: "bg-ppx-neutral-5 h-px flex-1" })
+				]
 			}),
-			children ? children : !hideDefaultContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "text-ppx-neutral-10 flex items-center gap-3",
-					children: [/* @__PURE__ */ jsx(UploadCloudIcon, {
-						size: 40,
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ jsx("span", {
-						className: "text-ppx-base text-ppx-neutral-13 font-medium",
-						children: dropzoneText
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex w-full items-center gap-3",
-					"aria-hidden": "true",
-					children: [
-						/* @__PURE__ */ jsx("div", { className: "bg-ppx-neutral-5 h-px flex-1" }),
-						/* @__PURE__ */ jsx("span", {
-							className: "text-ppx-sm text-ppx-neutral-10 font-medium",
-							children: "OR"
-						}),
-						/* @__PURE__ */ jsx("div", { className: "bg-ppx-neutral-5 h-px flex-1" })
-					]
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					type: "button",
-					variant: "default",
-					onClick: openFileDialog,
-					disabled: disabled || isUploading,
-					children: isUploading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "size-4 animate-spin" }), "Uploading..."] }) : browseText
-				})
-			] }) : null
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "default",
+				disabled: disabled || isUploading,
+				children: isUploading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "size-4 animate-spin" }), "Uploading..."] }) : browseText
+			})
 		]
 	});
 }
-function Trigger({ children, uploadingText = "Uploading...", showUploadingState = true, hideDefaultContent = false, ...props }) {
-	const { openFileDialog, disabled, isUploading } = useFileUploadContext();
-	return /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		onClick: openFileDialog,
-		disabled: disabled || showUploadingState && isUploading,
-		"data-slot": "file-upload-trigger",
-		className: cn(hideDefaultContent && "not-disabled:hover:bg-transparent h-auto border-none bg-transparent p-0 shadow-none hover:bg-transparent focus-visible:ring-0 active:bg-transparent", props.className),
+function HiddenInput({ className, ...props }) {
+	const { upload, accept, multiple, disabled } = useFileUploadContext();
+	return /* @__PURE__ */ jsx("input", {
+		...upload.getInputProps(),
 		...props,
-		children: showUploadingState && isUploading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "size-4 animate-spin" }), uploadingText] }) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UploadIcon, { className: "size-4" }), "Select files"] })
+		className: cn("sr-only", className),
+		accept,
+		multiple,
+		disabled,
+		tabIndex: -1,
+		"aria-hidden": "true"
 	});
 }
-function ItemList({ className, children, ...props }) {
-	const { files } = useFileUploadContext();
+function List({ className, children, ...props }) {
+	const { upload } = useFileUploadContext();
+	const { files } = upload;
 	if (files.length === 0) return null;
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "file-upload-item-list",
+		"data-slot": "file-upload-list",
 		className: cn("flex flex-col gap-2", className),
 		...props,
 		children: typeof children === "function" ? children(files) : children
 	});
 }
-const ItemContext = React$1.createContext(null);
-function useFileUploadItem() {
-	const context = React$1.useContext(ItemContext);
-	if (!context) throw new Error("FileUpload.Item* components must be used within FileUpload.Item");
-	return context;
-}
-function Item({ file, className, children, statusStyles = true, ...props }) {
-	return /* @__PURE__ */ jsx(ItemContext.Provider, {
-		value: file,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-slot": "file-upload-item",
-			"data-status": file.status,
-			className: cn("rounded-ppx-s border-ppx-neutral-4 bg-ppx-neutral-1 flex items-center gap-3 border p-3", statusStyles && file.status === "error" && "border-ppx-red-4 bg-ppx-red-1", className),
-			...props,
-			children
-		})
-	});
-}
-function ItemPreview({ className, fallback, ...props }) {
-	const file = useFileUploadItem();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "file-upload-item-preview",
-		className: cn("rounded-ppx-xs bg-ppx-neutral-3 flex size-10 shrink-0 items-center justify-center overflow-hidden", className),
-		...props,
-		children: file.preview ? /* @__PURE__ */ jsx("img", {
-			src: file.preview,
-			alt: file.file.name,
-			className: "size-full object-cover"
-		}) : fallback ?? /* @__PURE__ */ jsx(FileIcon, { className: "text-ppx-neutral-10 size-5" })
-	});
-}
-function ItemName({ className, ...props }) {
-	const file = useFileUploadItem();
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "file-upload-item-name",
-		className: cn("text-ppx-sm text-ppx-neutral-14 truncate font-medium", className),
-		...props,
-		children: file.file.name
-	});
-}
-function ItemSize({ className, ...props }) {
-	const file = useFileUploadItem();
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "file-upload-item-size",
-		className: cn("text-ppx-xs text-ppx-neutral-10", className),
-		...props,
-		children: formatBytes(file.file.size)
-	});
-}
-function ItemRemove({ className, children, ...props }) {
-	const { removeFile } = useFileUploadContext();
-	const file = useFileUploadItem();
-	return /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		variant: "ghost",
-		size: "icon-sm",
-		onClick: () => removeFile(file.id),
-		"data-slot": "file-upload-item-remove",
-		"aria-label": `Remove ${file.file.name}`,
-		className: cn("ml-auto shrink-0", className),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
-	});
-}
-function ItemProgress({ className, ...props }) {
-	const file = useFileUploadItem();
-	if (file.progress === void 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "file-upload-item-progress",
-		className: cn("bg-ppx-neutral-3 h-1.5 w-full overflow-hidden rounded-full", className),
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "bg-ppx-primary-5 h-full transition-all duration-300",
-			style: { width: `${file.progress}%` }
-		})
-	});
-}
-function ItemStatus({ className, successIcon, uploadingContent, errorContent, ...props }) {
-	const file = useFileUploadItem();
-	if (file.status === "uploading") return /* @__PURE__ */ jsx("span", {
-		"data-slot": "file-upload-item-status",
-		className: cn("text-ppx-xs text-ppx-neutral-10 shrink-0", className),
-		...props,
-		children: uploadingContent ?? `${file.progress ?? 0}%`
+function ListItem({ file, className, showIcon = true, showProgress = true, showError = true, showRemove = true, showRetry = true, icon, ...props }) {
+	const { upload, disabled } = useFileUploadContext();
+	const { removeFile, retryUpload } = upload;
+	const isUploading = file.status === "uploading";
+	const isError = file.status === "error";
+	const FileTypeIcon = getFileTypeIcon({
+		name: file.file.name,
+		type: file.file.type
 	});
-	if (file.status === "success") return /* @__PURE__ */ jsx("span", {
-		"data-slot": "file-upload-item-status",
-		className: cn("text-ppx-green-5 shrink-0", className),
-		...props,
-		children: successIcon ?? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
-	});
-	if (file.status === "error") return /* @__PURE__ */ jsx("span", {
-		"data-slot": "file-upload-item-status",
-		className: cn("text-ppx-xs text-ppx-red-5 shrink-0", className),
-		...props,
-		children: errorContent ?? "Failed"
-	});
-	return null;
-}
-function ItemError({ className, ...props }) {
-	const file = useFileUploadItem();
-	if (!file.error) return null;
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "file-upload-item-error",
-		className: cn("text-ppx-xs text-ppx-red-5", className),
-		...props,
-		children: file.error
-	});
-}
-function ItemRetry({ className, children, ...props }) {
-	const { retryUpload } = useFileUploadContext();
-	const file = useFileUploadItem();
-	if (file.status !== "error" || !retryUpload) return null;
-	return /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		variant: "ghost",
-		size: "icon-sm",
-		onClick: () => retryUpload(file.id),
-		"data-slot": "file-upload-item-retry",
-		"aria-label": `Retry uploading ${file.file.name}`,
-		className: cn("shrink-0", className),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(RetryIcon, { className: "size-4" })
-	});
-}
-function ClearButton({ children, ...props }) {
-	const { clearFiles, files } = useFileUploadContext();
-	if (files.length === 0) return null;
-	return /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		variant: "ghost",
-		onClick: clearFiles,
-		"data-slot": "file-upload-clear",
-		...props,
-		children: children ?? "Remove all files"
-	});
-}
-function ImageGrid({ className, children, ...props }) {
-	const { files } = useFileUploadContext();
-	if (files.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "file-upload-image-grid",
-		className: cn("grid grid-cols-4 gap-2", className),
-		...props,
-		children: typeof children === "function" ? children(files) : children
-	});
-}
-function ImageGridItem({ file, className, showStatusOverlay = true, ...props }) {
-	const { removeFile, retryUpload } = useFileUploadContext();
 	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "file-upload-image-grid-item",
+		"data-slot": "file-upload-list-item",
 		"data-status": file.status,
-		className: cn("rounded-ppx-s group relative aspect-square overflow-hidden", file.status === "error" && "ring-ppx-red-5 ring-2", className),
+		className: cn("rounded-ppx-s border-ppx-neutral-4 bg-ppx-neutral-1 flex items-center gap-3 border p-3", isError && "border-ppx-red-4 bg-ppx-red-1", className),
 		...props,
 		children: [
-			file.preview ? /* @__PURE__ */ jsx("img", {
-				src: file.preview,
-				alt: file.file.name,
-				className: "size-full object-cover"
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "bg-ppx-neutral-3 flex size-full items-center justify-center",
-				children: /* @__PURE__ */ jsx(FileIcon, { className: "text-ppx-neutral-10 size-8" })
+			showIcon && /* @__PURE__ */ jsx("div", {
+				className: "rounded-ppx-xs bg-ppx-neutral-3 flex size-10 shrink-0 items-center justify-center overflow-hidden",
+				children: file.preview ? /* @__PURE__ */ jsx("img", {
+					src: file.preview,
+					alt: file.file.name,
+					className: "size-full object-cover"
+				}) : icon ? icon : /* @__PURE__ */ jsx(FileTypeIcon, { className: "size-5" })
 			}),
-			showStatusOverlay && file.status === "uploading" && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 flex items-center justify-center bg-black/40",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "text-sm font-medium text-white",
-					children: [file.progress, "%"]
-				})
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-ppx-sm text-ppx-neutral-14 truncate font-medium",
+						children: file.file.name
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [showProgress && isUploading && /* @__PURE__ */ jsx("div", {
+							className: "bg-ppx-neutral-3 h-1.5 flex-1 overflow-hidden rounded-full",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "bg-ppx-primary-5 h-full transition-all duration-300",
+								style: { width: `${file.progress}%` }
+							})
+						}), isUploading && /* @__PURE__ */ jsxs("span", {
+							className: "text-ppx-xs text-ppx-neutral-10 shrink-0",
+							children: [file.progress, "%"]
+						})]
+					}),
+					showError && isError && file.error && /* @__PURE__ */ jsx("span", {
+						className: "text-ppx-xs text-ppx-red-5",
+						children: file.error
+					})
+				]
 			}),
-			showStatusOverlay && file.status === "error" && retryUpload && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 flex items-center justify-center bg-black/40",
-				children: /* @__PURE__ */ jsx(Button, {
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [showRetry && isError && /* @__PURE__ */ jsx(Button, {
 					type: "button",
 					variant: "ghost",
 					size: "icon-sm",
 					onClick: () => retryUpload(file.id),
-					className: "text-white hover:text-white",
-					children: /* @__PURE__ */ jsx(RetryIcon, { className: "size-5" })
-				})
-			}),
-			showStatusOverlay && file.status === "success" && /* @__PURE__ */ jsx("div", {
-				className: "bg-ppx-green-5 absolute bottom-1 right-1 rounded-full p-0.5",
-				children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-white" })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => removeFile(file.id),
-				className: "absolute right-1 top-1 flex size-6 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100",
-				"aria-label": `Remove ${file.file.name}`,
-				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3" })
+					disabled,
+					"aria-label": `Retry uploading ${file.file.name}`,
+					children: /* @__PURE__ */ jsx(RetryIcon, { className: "size-4" })
+				}), showRemove && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: () => removeFile(file.id),
+					disabled,
+					"aria-label": `Remove ${file.file.name}`,
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+				})]
 			})
 		]
 	});
 }
+function ClearAll({ children, ...props }) {
+	const { upload, disabled } = useFileUploadContext();
+	const { clearFiles, files } = upload;
+	if (files.length === 0) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		onClick: clearFiles,
+		disabled,
+		"data-slot": "file-upload-clear-all",
+		...props,
+		children: children ?? "Remove all files"
+	});
+}
 const FileUpload = {
 	Root,
 	Dropzone,
-	Trigger,
-	ItemList,
-	Item,
-	ItemPreview,
-	ItemName,
-	ItemSize,
-	ItemRemove,
-	ItemProgress,
-	ItemStatus,
-	ItemError,
-	ItemRetry,
-	ClearButton,
-	ImageGrid,
-	ImageGridItem
+	HiddenInput,
+	List,
+	ListItem,
+	ClearAll
 };
 
 //#endregion
@@ -3236,6 +3683,86 @@ function OtpInput({ length = 6, separatorAfter = [], className, containerClassNa
 	});
 }
 
+//#endregion
+//#region src/icons/file-icon.tsx
+function FileIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" })]
+	});
+}
+
+//#endregion
+//#region src/icons/upload-icon.tsx
+function UploadIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+			/* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				y1: "3",
+				x2: "12",
+				y2: "15"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/send-icon.tsx
+function SendIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M8.75 15V3.56l3.72 3.72 1.06-1.06-5-5a.75.75 0 0 0-1.06 0l-5 5 1.06 1.06 3.72-3.72V15z"
+		})
+	});
+}
+
+//#endregion
+//#region src/icons/stop-icon.tsx
+function StopIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: /* @__PURE__ */ jsx("rect", {
+			x: "6",
+			y: "6",
+			width: "12",
+			height: "12",
+			rx: "2"
+		})
+	});
+}
+
 //#endregion
 //#region src/hooks/use-mobile.ts
 const MOBILE_BREAKPOINT = 768;
@@ -3254,5 +3781,5 @@ function useIsMobile() {
 }
 
 //#endregion
-export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, ChevronDownIcon, collapsible_exports as Collapsible, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, OtpInput, PXUIProvider, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, anchoredToast, buttonVariants, cn, defineLoadOptions, formatBytes, toast, useAsyncOptions, useFileUpload, useIntersectionObserver, useIsMobile };
+export { ArchiveIcon, AudioIcon, Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, ChevronDownIcon, CodeFileIcon, collapsible_exports as Collapsible, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, ExcelIcon, FileIcon, FileUpload, GenericFileIcon, ImageFileIcon, InfoIcon, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, OtpInput, PXUIProvider, PdfIcon, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, SendIcon, Separator, Spinner, StopIcon, Switch, tabs_exports as Tabs, TextFileIcon, Textarea, tooltip_exports as Tooltip, UploadIcon, VideoIcon, WordIcon, anchoredToast, buttonVariants, cn, defineLoadOptions, formatBytes, getFileTypeIcon, toast, useAsyncOptions, useFileUpload, useIntersectionObserver, useIsMobile };
 //# sourceMappingURL=index.js.map