cherry-styled-components 0.1.17 → 0.1.19

package/dist/accordion.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onToggle"> {
+    children: React.ReactNode;
+    title: React.ReactNode;
+    onToggle?: (isOpen: boolean) => void;
+    $inline?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+}
+declare function Accordion({ children, title, onToggle, $inline, defaultOpen, open, ...rest }: AccordionProps): React.JSX.Element;
+export { Accordion };

package/dist/accordion.js

@@ -0,0 +1,88 @@
+"use client";
+"use client";
+import { styledText } from "./utils/typography.js";
+import { Icon } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/accordion.tsx
+var StyledAccordion = styled.div.withConfig({
+	displayName: "accordion__StyledAccordion",
+	componentId: "sc-4007375b-0"
+})([
+	`text-align:left;border-radius:`,
+	`;margin:0;`,
+	`;width:100%;background:`,
+	`;`,
+	``
+], ({ theme, $inline }) => $inline ? "0" : theme.spacing.radius.lg, ({ theme }) => styledText(theme), ({ theme }) => theme.colors.light, ({ theme, $inline }) => !$inline && css([`border:solid 1px `, `;`], theme.colors.grayLight));
+var StyledAccordionTitle = styled.h3.withConfig({
+	displayName: "accordion__StyledAccordionTitle",
+	componentId: "sc-4007375b-1"
+})([
+	`cursor:pointer;margin:0;`,
+	`;color:`,
+	`;transition:color 0.3s ease;position:relative;padding:`,
+	`;&:hover{color:`,
+	`;}& .lucide-chevron-down{position:absolute;top:50%;transform:translateY(-50%);right:`,
+	`;transition:transform 0.3s ease;`,
+	`}`
+], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "8px 40px 8px 0" : "20px 50px 20px 20px", ({ theme }) => theme.colors.primaryDark, ({ $inline }) => $inline ? "0" : "20px", ({ $isOpen }) => $isOpen && css([`transform:translateY(-50%) rotate(180deg);`]));
+var StyledAccordionContent = styled.div.withConfig({
+	displayName: "accordion__StyledAccordionContent",
+	componentId: "sc-4007375b-2"
+})([
+	`display:grid;grid-template-rows:`,
+	`;visibility:`,
+	`;transition:grid-template-rows 0.3s cubic-bezier(0.4,0,0.2,1),visibility 0.3s;@media (prefers-reduced-motion:reduce){transition:none;}`
+], ({ $isOpen }) => $isOpen ? "1fr" : "0fr", ({ $isOpen }) => $isOpen ? "visible" : "hidden");
+var StyledAccordionInner = styled.div.withConfig({
+	displayName: "accordion__StyledAccordionInner",
+	componentId: "sc-4007375b-3"
+})([`min-height:0;overflow:clip;`]);
+var StyledAccordionBody = styled.div.withConfig({
+	displayName: "accordion__StyledAccordionBody",
+	componentId: "sc-4007375b-4"
+})([
+	``,
+	`;color:`,
+	`;padding:`,
+	`;opacity:`,
+	`;transform:translateY(`,
+	`);transition:opacity 0.3s ease,transform 0.3s cubic-bezier(0.4,0,0.2,1);@media (prefers-reduced-motion:reduce){transform:none;transition:none;}`
+], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "0 0 12px" : "0 20px 20px", ({ $isOpen }) => $isOpen ? 1 : 0, ({ $isOpen }) => $isOpen ? 0 : "-6px");
+function Accordion({ children, title, onToggle, $inline, defaultOpen, open, ...rest }) {
+	const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+	const isControlled = open !== void 0;
+	const isOpen = isControlled ? open : internalOpen;
+	const handleToggle = () => {
+		const next = !isOpen;
+		if (!isControlled) setInternalOpen(next);
+		onToggle?.(next);
+	};
+	return /*#__PURE__*/ jsxs(StyledAccordion, {
+		$inline,
+		...rest,
+		children: [/*#__PURE__*/ jsxs(StyledAccordionTitle, {
+			onClick: handleToggle,
+			$isOpen: isOpen,
+			$inline,
+			role: "button",
+			"aria-expanded": isOpen,
+			children: [
+				title,
+				" ",
+				/*#__PURE__*/ jsx(Icon, { name: "ChevronDown" })
+			]
+		}), /*#__PURE__*/ jsx(StyledAccordionContent, {
+			$isOpen: isOpen,
+			children: /*#__PURE__*/ jsx(StyledAccordionInner, { children: /*#__PURE__*/ jsx(StyledAccordionBody, {
+				$isOpen: isOpen,
+				$inline,
+				children
+			}) })
+		})]
+	});
+}
+//#endregion
+export { Accordion };

package/dist/avatar-dropzone.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { DropzoneRejection } from './dropzone';
+import { Icon } from './icon';
+export interface AvatarDropzoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "children" | "multiple"> {
+    /** Visual scale, following the IconButton size scale. */
+    $size?: "default" | "big" | "small";
+    /** Lucide icon shown while no picture is selected. */
+    $icon?: React.ComponentProps<typeof Icon>["name"];
+    /** Maximum file size in bytes. */
+    $maxBytes?: number;
+    /** Accessible label for the drop target. */
+    "aria-label"?: string;
+    /** Called with the selected picture, or null when it is removed. */
+    onFileChange?: (file: File | null) => void;
+    /** Called when a file is rejected (wrong type or too big). */
+    onFileRejected?: (rejection: DropzoneRejection) => void;
+}
+declare const AvatarDropzone: React.ForwardRefExoticComponent<AvatarDropzoneProps & React.RefAttributes<HTMLInputElement>>;
+export { AvatarDropzone };

package/dist/avatar-dropzone.js

@@ -0,0 +1,157 @@
+"use client";
+"use client";
+import { resetButton } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { matchesAccept } from "./dropzone.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+//#region src/lib/avatar-dropzone.tsx
+var avatarSizes = {
+	small: {
+		box: 64,
+		icon: 20
+	},
+	default: {
+		box: 96,
+		icon: 24
+	},
+	big: {
+		box: 128,
+		icon: 28
+	}
+};
+function LocalAvatarDropzone({ $size, $icon = "User", $maxBytes, "aria-label": ariaLabel = "Upload profile picture", onFileChange, onFileRejected, accept = "image/*", disabled, ...rest }, ref) {
+	const [previewUrl, setPreviewUrl] = useState(null);
+	const [dragOver, setDragOver] = useState(false);
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current);
+	const previewUrlRef = useRef(null);
+	previewUrlRef.current = previewUrl;
+	useEffect(() => {
+		return () => {
+			if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
+		};
+	}, []);
+	const setFile = (fileList) => {
+		if (!fileList || fileList.length === 0 || disabled) return;
+		const file = fileList[0];
+		if (!matchesAccept(file, accept)) {
+			onFileRejected?.({
+				file,
+				reason: "type"
+			});
+			return;
+		}
+		if ($maxBytes && file.size > $maxBytes) {
+			onFileRejected?.({
+				file,
+				reason: "size"
+			});
+			return;
+		}
+		setPreviewUrl((current) => {
+			if (current) URL.revokeObjectURL(current);
+			return URL.createObjectURL(file);
+		});
+		onFileChange?.(file);
+	};
+	const removeFile = () => {
+		setPreviewUrl((current) => {
+			if (current) URL.revokeObjectURL(current);
+			return null;
+		});
+		onFileChange?.(null);
+	};
+	return /*#__PURE__*/ jsxs(StyledAvatarDropzoneWrapper, {
+		$size,
+		children: [
+			/*#__PURE__*/ jsx(StyledAvatarDropzone, {
+				type: "button",
+				"aria-label": ariaLabel,
+				$size,
+				$dragOver: dragOver,
+				$hasImage: !!previewUrl,
+				disabled,
+				onClick: () => !disabled && inputRef.current?.click(),
+				onDragOver: (e) => {
+					e.preventDefault();
+					if (!disabled) setDragOver(true);
+				},
+				onDragLeave: () => setDragOver(false),
+				onDrop: (e) => {
+					e.preventDefault();
+					setDragOver(false);
+					setFile(e.dataTransfer.files);
+				},
+				children: previewUrl ? /*#__PURE__*/ jsx("img", {
+					src: previewUrl,
+					alt: ""
+				}) : /*#__PURE__*/ jsx(Icon, { name: $icon })
+			}),
+			previewUrl && /*#__PURE__*/ jsx(StyledAvatarRemove, {
+				type: "button",
+				"aria-label": "Remove profile picture",
+				onClick: removeFile,
+				disabled,
+				children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+			}),
+			/*#__PURE__*/ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				accept,
+				disabled,
+				hidden: true,
+				onChange: (e) => {
+					setFile(e.target.files);
+					e.target.value = "";
+				},
+				...rest
+			})
+		]
+	});
+}
+var AvatarDropzone = /*#__PURE__*/ forwardRef(LocalAvatarDropzone);
+var StyledAvatarDropzoneWrapper = styled.span.withConfig({
+	displayName: "avatar-dropzone__StyledAvatarDropzoneWrapper",
+	componentId: "sc-e18fe5e0-0"
+})([
+	`position:relative;display:inline-flex;width:`,
+	`px;height:`,
+	`px;`
+], ({ $size }) => avatarSizes[$size ?? "default"].box, ({ $size }) => avatarSizes[$size ?? "default"].box);
+var StyledAvatarDropzone = styled.button.withConfig({
+	displayName: "avatar-dropzone__StyledAvatarDropzone",
+	componentId: "sc-e18fe5e0-1"
+})([
+	``,
+	`;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
+	` `,
+	`;background:`,
+	`;color:`,
+	`;transition:all 0.3s ease;& svg{width:`,
+	`px;height:`,
+	`px;color:`,
+	`;}& img{width:100%;height:100%;object-fit:cover;display:block;}`,
+	` @media (hover:hover){&:hover:not(:disabled){border-color:`,
+	`;background:`,
+	`;}}&:focus{border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ $hasImage }) => $hasImage ? "solid" : "dashed", ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ theme }) => theme.colors.primary, ({ theme, $dragOver }) => $dragOver && css([
+	`border-color:`,
+	`;background:`,
+	`;`
+], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+var StyledAvatarRemove = styled.button.withConfig({
+	displayName: "avatar-dropzone__StyledAvatarRemove",
+	componentId: "sc-e18fe5e0-2"
+})([
+	``,
+	`;position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,
+	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}@media (hover:hover){&:hover:not(:disabled){background:`,
+	`;}}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+//#endregion
+export { AvatarDropzone };

package/dist/box.js

@@ -15,12 +15,12 @@ var StyledBox = styled(Container).withConfig({
 	`;`
 ], ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight);
 function LocalBox({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledBox, {
+	return /*#__PURE__*/ jsx(StyledBox, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Box = /* @__PURE__ */ forwardRef(LocalBox);
+var Box = /*#__PURE__*/ forwardRef(LocalBox);
 //#endregion
 export { Box };

package/dist/button.js

@@ -77,10 +77,10 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`, $fullWidth && `width: 100%;`);
 var StyledButton = styled.button.withConfig({
 	displayName: "button__StyledButton",
-	componentId: "sc-f54d90ca-0"
+	componentId: "sc-2f3ba034-0"
 })([``, ``], ({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled));
 function LocalButton({ $variant = "primary", ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledButton, {
+	return /*#__PURE__*/ jsxs(StyledButton, {
 		$variant,
 		$error: props.$error,
 		...props,
@@ -92,6 +92,6 @@ function LocalButton({ $variant = "primary", ...props }, ref) {
 		]
 	});
 }
-var Button = /* @__PURE__ */ forwardRef(LocalButton);
+var Button = /*#__PURE__*/ forwardRef(LocalButton);
 //#endregion
 export { Button, buttonStyles };

package/dist/col.js

@@ -22,12 +22,12 @@ var StyledCol = styled.div.withConfig({
 		grid-column: span ${$span};
 	`, ({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan), ({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan), ({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan), ({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan), ({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan), ({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan), ({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan));
 function LocalCol({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledCol, {
+	return /*#__PURE__*/ jsx(StyledCol, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Col = /* @__PURE__ */ forwardRef(LocalCol);
+var Col = /*#__PURE__*/ forwardRef(LocalCol);
 //#endregion
 export { Col };

package/dist/container.js

@@ -27,12 +27,12 @@ var StyledContainer = styled.div.withConfig({
 	``
 ], ({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xs, ({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`, ({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.xs, mq("lg"), ({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.lg, mq("xxxl"), ({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xxxl, ({ $xsPadding }) => $xsPadding && generatePaddingStyles("xs", $xsPadding), ({ $smPadding }) => $smPadding && generatePaddingStyles("sm", $smPadding), ({ $mdPadding }) => $mdPadding && generatePaddingStyles("md", $mdPadding), ({ $lgPadding }) => $lgPadding && generatePaddingStyles("lg", $lgPadding), ({ $xlPadding }) => $xlPadding && generatePaddingStyles("xl", $xlPadding), ({ $xxlPadding }) => $xxlPadding && generatePaddingStyles("xxl", $xxlPadding), ({ $xxxlPadding }) => $xxxlPadding && generatePaddingStyles("xxxl", $xxxlPadding));
 function LocalContainer({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledContainer, {
+	return /*#__PURE__*/ jsx(StyledContainer, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Container = /* @__PURE__ */ forwardRef(LocalContainer);
+var Container = /*#__PURE__*/ forwardRef(LocalContainer);
 //#endregion
 export { Container };

package/dist/dropzone.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Icon } from './icon';
+export type DropzoneRejectionReason = "type" | "size" | "count";
+export interface DropzoneRejection {
+    file: File;
+    reason: DropzoneRejectionReason;
+}
+export interface DropzoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "children"> {
+    /** Bold primary prompt line. */
+    $prompt?: string;
+    /** Optional "or click to browse" sub-line beneath the prompt. */
+    $browse?: string;
+    /** Optional smaller hint line (accepted types / limits). */
+    $hint?: string;
+    /** Lucide icon shown in the rounded-square tile. */
+    $icon?: React.ComponentProps<typeof Icon>["name"];
+    /** Compact, flush variant: horizontal layout, tighter padding, and a
+        transparent background so it sits on whatever surface it's embedded in
+        (a form row, modal, or list) next to regular inputs. */
+    $inline?: boolean;
+    /** Maximum number of files kept at once. */
+    $maxFiles?: number;
+    /** Maximum size per file in bytes. */
+    $maxBytes?: number;
+    /** Called with the full current file list whenever it changes. */
+    onFilesChange?: (files: File[]) => void;
+    /** Called with the files that were rejected (wrong type, too big, over the
+        count limit) so the caller can surface an error however it likes. */
+    onFilesRejected?: (rejections: DropzoneRejection[]) => void;
+}
+/** Matches a file against an `accept` string (".pdf,image/*,text/plain"),
+    mirroring the native file-picker filter for dropped files. */
+export declare const matchesAccept: (file: File, accept?: string) => boolean;
+declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLInputElement>>;
+export { Dropzone };

package/dist/dropzone.js

@@ -0,0 +1,255 @@
+"use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { resetButton } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+//#region src/lib/dropzone.tsx
+/** Matches a file against an `accept` string (".pdf,image/*,text/plain"),
+mirroring the native file-picker filter for dropped files. */ var matchesAccept = (file, accept) => {
+	if (!accept) return true;
+	return accept.split(",").some((raw) => {
+		const entry = raw.trim().toLowerCase();
+		if (!entry) return false;
+		if (entry.startsWith(".")) return file.name.toLowerCase().endsWith(entry);
+		if (entry.endsWith("/*")) return file.type.toLowerCase().startsWith(entry.slice(0, -1));
+		return file.type.toLowerCase() === entry;
+	});
+};
+function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $icon = "FileUp", $inline, $maxFiles, $maxBytes, onFilesChange, onFilesRejected, accept, multiple, disabled, ...rest }, ref) {
+	const [items, setItems] = useState([]);
+	const [dragOver, setDragOver] = useState(false);
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current);
+	const itemsRef = useRef([]);
+	itemsRef.current = items;
+	useEffect(() => {
+		return () => {
+			itemsRef.current.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+		};
+	}, []);
+	const limit = multiple ? $maxFiles ?? Infinity : 1;
+	const atLimit = items.length >= limit;
+	const addFiles = (fileList) => {
+		if (!fileList || disabled) return;
+		const files = Array.from(fileList);
+		const rejections = [];
+		const accepted = [];
+		const replacing = !multiple && files.length > 0;
+		const remaining = replacing ? 1 : limit - items.length;
+		for (const file of files) {
+			if (accepted.length >= remaining) {
+				rejections.push({
+					file,
+					reason: "count"
+				});
+				continue;
+			}
+			if (!matchesAccept(file, accept)) {
+				rejections.push({
+					file,
+					reason: "type"
+				});
+				continue;
+			}
+			if ($maxBytes && file.size > $maxBytes) {
+				rejections.push({
+					file,
+					reason: "size"
+				});
+				continue;
+			}
+			accepted.push({
+				key: `${file.name}-${file.size}-${Date.now()}-${accepted.length}`,
+				file,
+				previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : null
+			});
+		}
+		if (rejections.length > 0) onFilesRejected?.(rejections);
+		if (accepted.length === 0) return;
+		setItems((current) => {
+			const kept = replacing ? [] : current;
+			if (replacing) current.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+			const next = [...kept, ...accepted];
+			onFilesChange?.(next.map((item) => item.file));
+			return next;
+		});
+	};
+	const removeItem = (key) => {
+		setItems((current) => {
+			const item = current.find((it) => it.key === key);
+			if (item?.previewUrl) URL.revokeObjectURL(item.previewUrl);
+			const next = current.filter((it) => it.key !== key);
+			onFilesChange?.(next.map((it) => it.file));
+			return next;
+		});
+	};
+	const openPicker = () => {
+		if (disabled || atLimit) return;
+		inputRef.current?.click();
+	};
+	return /*#__PURE__*/ jsxs(StyledDropzoneWrapper, { children: [
+		/*#__PURE__*/ jsxs(StyledDropzone, {
+			type: "button",
+			"aria-label": $prompt,
+			$dragOver: dragOver,
+			$inline,
+			disabled: disabled || atLimit,
+			onClick: openPicker,
+			onDragOver: (e) => {
+				e.preventDefault();
+				if (!disabled && !atLimit) setDragOver(true);
+			},
+			onDragLeave: () => setDragOver(false),
+			onDrop: (e) => {
+				e.preventDefault();
+				setDragOver(false);
+				addFiles(e.dataTransfer.files);
+			},
+			children: [
+				/*#__PURE__*/ jsx(StyledDropIcon, {
+					$inline,
+					children: /*#__PURE__*/ jsx(Icon, { name: $icon })
+				}),
+				/*#__PURE__*/ jsxs(StyledDropPrompt, {
+					$inline,
+					children: [$prompt, $browse ? /*#__PURE__*/ jsx("span", { children: $browse }) : null]
+				}),
+				$hint ? /*#__PURE__*/ jsx(StyledDropHint, {
+					$inline,
+					children: $hint
+				}) : null
+			]
+		}),
+		/*#__PURE__*/ jsx("input", {
+			ref: inputRef,
+			type: "file",
+			accept,
+			multiple,
+			disabled,
+			hidden: true,
+			onChange: (e) => {
+				addFiles(e.target.files);
+				e.target.value = "";
+			},
+			...rest
+		}),
+		items.length > 0 && /*#__PURE__*/ jsx(StyledThumbs, { children: items.map((item) => /*#__PURE__*/ jsxs(StyledThumb, {
+			title: item.file.name,
+			children: [item.previewUrl ? /*#__PURE__*/ jsx("img", {
+				src: item.previewUrl,
+				alt: item.file.name
+			}) : /*#__PURE__*/ jsxs(StyledThumbFile, { children: [/*#__PURE__*/ jsx(Icon, { name: "File" }), /*#__PURE__*/ jsx("span", { children: item.file.name })] }), /*#__PURE__*/ jsx(StyledThumbRemove, {
+				type: "button",
+				"aria-label": `Remove ${item.file.name}`,
+				onClick: () => removeItem(item.key),
+				disabled,
+				children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+			})]
+		}, item.key)) })
+	] });
+}
+var Dropzone = /*#__PURE__*/ forwardRef(LocalDropzone);
+var StyledDropzoneWrapper = styled.div.withConfig({
+	displayName: "dropzone__StyledDropzoneWrapper",
+	componentId: "sc-cf1c3c01-0"
+})([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
+var StyledDropzone = styled.button.withConfig({
+	displayName: "dropzone__StyledDropzone",
+	componentId: "sc-cf1c3c01-1"
+})([
+	``,
+	`;display:flex;flex-direction:`,
+	`;align-items:center;justify-content:center;gap:`,
+	`;width:100%;padding:`,
+	`;border-radius:`,
+	`;border:2px dashed `,
+	`;background:`,
+	`;color:`,
+	`;text-align:`,
+	`;transition:all 0.3s ease;`,
+	` @media (hover:hover){&:hover:not(:disabled){border-color:`,
+	`;background:`,
+	`;}}&:focus{border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "10px" : "8px", ({ $inline }) => $inline ? "10px 14px" : "24px 20px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme, $inline }) => $inline ? "transparent" : theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "left" : "center", ({ theme, $dragOver }) => $dragOver && css([
+	`border-color:`,
+	`;background:`,
+	`;`
+], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+var StyledDropIcon = styled.span.withConfig({
+	displayName: "dropzone__StyledDropIcon",
+	componentId: "sc-cf1c3c01-2"
+})([
+	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
+	`;height:`,
+	`;border-radius:`,
+	`;background:`,
+	`;border:solid 1px `,
+	`;color:`,
+	`;transition:all 0.3s ease;& svg{width:`,
+	`;height:`,
+	`;}`
+], ({ $inline }) => $inline ? "32px" : "44px", ({ $inline }) => $inline ? "32px" : "44px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "18px" : "22px", ({ $inline }) => $inline ? "18px" : "22px");
+var StyledDropPrompt = styled.span.withConfig({
+	displayName: "dropzone__StyledDropPrompt",
+	componentId: "sc-cf1c3c01-3"
+})([
+	`display:flex;flex-direction:`,
+	`;flex-wrap:wrap;align-items:baseline;gap:`,
+	`;font-family:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;font-weight:600;color:`,
+	`;& span{font-weight:500;color:`,
+	`;}`
+], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ theme }) => theme.fonts.text, ({ theme }) => theme.fontSizes.text.xs, ({ theme }) => theme.lineHeights.text.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayDark);
+var StyledDropHint = styled.span.withConfig({
+	displayName: "dropzone__StyledDropHint",
+	componentId: "sc-cf1c3c01-4"
+})([
+	`font-family:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;color:`,
+	`;`,
+	``
+], ({ theme }) => theme.fonts.text, ({ theme }) => theme.fontSizes.small.xs, ({ theme }) => theme.lineHeights.small.xs, ({ theme }) => theme.colors.gray, ({ $inline }) => $inline && css([`margin-left:auto;`]));
+var StyledThumbs = styled.div.withConfig({
+	displayName: "dropzone__StyledThumbs",
+	componentId: "sc-cf1c3c01-5"
+})([`display:grid;grid-template-columns:repeat(auto-fill,72px);gap:10px;`, `{grid-template-columns:repeat(auto-fill,84px);}`], mq("sm"));
+var StyledThumb = styled.div.withConfig({
+	displayName: "dropzone__StyledThumb",
+	componentId: "sc-cf1c3c01-6"
+})([
+	`position:relative;width:72px;height:72px;border-radius:`,
+	`;overflow:hidden;border:solid 1px `,
+	`;background:`,
+	`;& img{width:100%;height:100%;object-fit:cover;display:block;}`,
+	`{width:84px;height:84px;}`
+], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, mq("sm"));
+var StyledThumbFile = styled.span.withConfig({
+	displayName: "dropzone__StyledThumbFile",
+	componentId: "sc-cf1c3c01-7"
+})([
+	`display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:6px;color:`,
+	`;& svg{width:20px;height:20px;color:`,
+	`;}& span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:`,
+	`;font-size:10px;line-height:1.2;}`
+], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary, ({ theme }) => theme.fonts.text);
+var StyledThumbRemove = styled.button.withConfig({
+	displayName: "dropzone__StyledThumbRemove",
+	componentId: "sc-cf1c3c01-8"
+})([
+	``,
+	`;position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,
+	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}@media (hover:hover){&:hover:not(:disabled){background:`,
+	`;}}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+//#endregion
+export { Dropzone, matchesAccept };