ropav 0.1.7 → 0.1.8

package/dist/dropzone.css

@@ -0,0 +1,135 @@
+@layer ropav.components {
+.rp-dropzone[data-v-0f0e7a3d] {
+    --_rp-dropzone-min-height: calc(var(--rp-size-control-xl) * 2.5);
+    --_rp-dropzone-padding: var(--rp-spacing-6);
+    --_rp-dropzone-font-size: var(--rp-font-size-md);
+    --_rp-dropzone-radius: var(--rp-radius-sm);
+    --_rp-dropzone-border: var(--rp-color-control-border);
+    --_rp-dropzone-ring: var(--rp-color-focus-ring);
+    --_rp-dropzone-bg: var(--rp-color-control-bg);
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: var(--_rp-dropzone-min-height);
+    padding: var(--_rp-dropzone-padding);
+    color: var(--rp-color-control-fg);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-dropzone-font-size);
+    background-color: var(--_rp-dropzone-bg);
+    border: var(--rp-border-width-medium) dashed var(--_rp-dropzone-border);
+    border-radius: var(--_rp-dropzone-radius);
+    cursor: pointer;
+    transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-dropzone[data-v-0f0e7a3d]:hover:not(.rp-dropzone--disabled):not(.rp-dropzone--invalid):not(.rp-dropzone--valid):not(.rp-dropzone--dragging) {
+    --_rp-dropzone-border: var(--rp-color-control-border-hover);
+}
+.rp-dropzone[data-v-0f0e7a3d]:focus-visible, .rp-dropzone[data-v-0f0e7a3d]:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-dropzone-ring);
+}
+.rp-dropzone--size-sm[data-v-0f0e7a3d] {
+    --_rp-dropzone-min-height: calc(var(--rp-size-control-xl) * 2);
+    --_rp-dropzone-padding: var(--rp-spacing-4);
+    --_rp-dropzone-font-size: var(--rp-font-size-sm);
+}
+.rp-dropzone--size-md[data-v-0f0e7a3d] {
+    --_rp-dropzone-min-height: calc(var(--rp-size-control-xl) * 2.5);
+    --_rp-dropzone-padding: var(--rp-spacing-6);
+    --_rp-dropzone-font-size: var(--rp-font-size-md);
+}
+.rp-dropzone--size-lg[data-v-0f0e7a3d] {
+    --_rp-dropzone-min-height: calc(var(--rp-size-control-xl) * 3);
+    --_rp-dropzone-padding: var(--rp-spacing-8);
+    --_rp-dropzone-font-size: var(--rp-font-size-lg);
+}
+.rp-dropzone--radius-xs[data-v-0f0e7a3d] {
+    --_rp-dropzone-radius: var(--rp-radius-xs);
+}
+.rp-dropzone--radius-sm[data-v-0f0e7a3d] {
+    --_rp-dropzone-radius: var(--rp-radius-sm);
+}
+.rp-dropzone--radius-md[data-v-0f0e7a3d] {
+    --_rp-dropzone-radius: var(--rp-radius-md);
+}
+.rp-dropzone--radius-lg[data-v-0f0e7a3d] {
+    --_rp-dropzone-radius: var(--rp-radius-lg);
+}
+.rp-dropzone--radius-xl[data-v-0f0e7a3d] {
+    --_rp-dropzone-radius: var(--rp-radius-xl);
+}
+.rp-dropzone--accept[data-v-0f0e7a3d] {
+    --_rp-dropzone-border: var(--rp-color-green-outline);
+    --_rp-dropzone-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
+    --_rp-dropzone-bg: color-mix(
+        in srgb,
+        var(--rp-color-green-outline) 8%,
+        var(--rp-color-control-bg)
+    );
+}
+.rp-dropzone--reject[data-v-0f0e7a3d], .rp-dropzone--invalid[data-v-0f0e7a3d] {
+    --_rp-dropzone-border: var(--rp-color-red-outline);
+    --_rp-dropzone-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
+}
+.rp-dropzone--reject[data-v-0f0e7a3d] {
+    --_rp-dropzone-bg: color-mix(
+        in srgb,
+        var(--rp-color-red-outline) 8%,
+        var(--rp-color-control-bg)
+    );
+}
+.rp-dropzone--valid[data-v-0f0e7a3d] {
+    --_rp-dropzone-border: var(--rp-color-green-outline);
+    --_rp-dropzone-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
+}
+.rp-dropzone--disabled[data-v-0f0e7a3d] {
+    --_rp-dropzone-border: var(--rp-color-disabled-border);
+    cursor: not-allowed;
+}
+.rp-dropzone--click-disabled[data-v-0f0e7a3d]:not(.rp-dropzone--disabled) {
+    cursor: default;
+}
+.rp-dropzone--click-disabled .rp-dropzone__input[data-v-0f0e7a3d] {
+    pointer-events: none;
+}
+.rp-dropzone__input[data-v-0f0e7a3d] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+.rp-dropzone__input[data-v-0f0e7a3d]:disabled {
+    cursor: not-allowed;
+}
+.rp-dropzone__content[data-v-0f0e7a3d] {
+    position: relative;
+    z-index: 2;
+    display: grid;
+    gap: var(--rp-spacing-1);
+    width: 100%;
+    text-align: center;
+    pointer-events: none;
+}
+.rp-dropzone__content[data-v-0f0e7a3d] button, .rp-dropzone__content[data-v-0f0e7a3d] a, .rp-dropzone__content[data-v-0f0e7a3d] input, .rp-dropzone__content[data-v-0f0e7a3d] select, .rp-dropzone__content[data-v-0f0e7a3d] textarea, .rp-dropzone__content[data-v-0f0e7a3d] [tabindex] {
+    pointer-events: auto;
+}
+.rp-dropzone__label[data-v-0f0e7a3d], .rp-dropzone__description[data-v-0f0e7a3d] {
+    margin: 0;
+}
+.rp-dropzone__label[data-v-0f0e7a3d] {
+    color: inherit;
+    font-weight: var(--rp-font-weight-semibold);
+    line-height: var(--rp-line-height-sm);
+}
+.rp-dropzone__description[data-v-0f0e7a3d] {
+    color: var(--rp-color-dimmed);
+    font-size: var(--rp-font-size-sm);
+    line-height: var(--rp-line-height-md);
+}
+}

package/dist/dropzone.js

@@ -0,0 +1,431 @@
+import './dropzone.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { n as mergeAriaIdRefs } from "./aria.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as useNativeFileSelection } from "./useNativeFileSelection.js";
+import { child, computed, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, next, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useId, useSlots } from "vue";
+//#region src/components/dropzone/dropzoneModel.ts
+function normalizeAcceptTokens(accept) {
+	return accept?.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean) ?? [];
+}
+function matchesMimeToken(type, token) {
+	const fileType = type.toLowerCase();
+	if (token.endsWith("/*")) return fileType.startsWith(token.slice(0, -1));
+	return Boolean(fileType) && fileType === token;
+}
+function matchesAcceptToken(file, token) {
+	if (token.startsWith(".")) return file.name.toLowerCase().endsWith(token);
+	return matchesMimeToken(file.type, token);
+}
+function isFileAccepted(file, accept) {
+	const tokens = normalizeAcceptTokens(accept);
+	return tokens.length === 0 || tokens.some((token) => matchesAcceptToken(file, token));
+}
+function getFileErrors(file, options) {
+	const errors = [];
+	if (!isFileAccepted(file, options.accept)) errors.push({
+		code: "file-invalid-type",
+		message: `File type must match ${options.accept}.`
+	});
+	if (options.maxSize != null && options.maxSize >= 0 && file.size > options.maxSize) errors.push({
+		code: "file-too-large",
+		message: `File must not be larger than ${options.maxSize} bytes.`
+	});
+	return errors;
+}
+function getFileLimit(options) {
+	if (!options.multiple) return 1;
+	if (options.maxFiles == null) return Number.POSITIVE_INFINITY;
+	return Math.max(0, Math.floor(options.maxFiles));
+}
+function getDragStatus(items, options) {
+	const fileItems = Array.from(items).filter((item) => item.kind === "file");
+	if (fileItems.length > getFileLimit(options)) return "reject";
+	const tokens = normalizeAcceptTokens(options.accept);
+	if (tokens.length === 0) return "accept";
+	const hasExtensionToken = tokens.some((token) => token.startsWith("."));
+	const mimeTokens = tokens.filter((token) => !token.startsWith("."));
+	return fileItems.some((item) => {
+		const itemType = item.type.toLowerCase();
+		if (!itemType || itemType === "application/octet-stream" || hasExtensionToken) return false;
+		return !mimeTokens.some((token) => matchesMimeToken(itemType, token));
+	}) ? "reject" : "accept";
+}
+function rejectTooMany(file, limit) {
+	return {
+		file,
+		errors: [{
+			code: "too-many-files",
+			message: `At most ${limit} files can be selected.`
+		}]
+	};
+}
+function processFiles(files, options) {
+	const acceptedFiles = [];
+	const rejections = [];
+	const limit = getFileLimit(options);
+	for (const file of files) {
+		const errors = getFileErrors(file, options);
+		if (errors.length > 0) {
+			rejections.push({
+				file,
+				errors
+			});
+			continue;
+		}
+		if (acceptedFiles.length >= limit) {
+			rejections.push(rejectTooMany(file, limit));
+			continue;
+		}
+		acceptedFiles.push(file);
+	}
+	return {
+		acceptedFiles,
+		rejections
+	};
+}
+function createDropzonePolicy(options) {
+	return {
+		preview(items) {
+			return getDragStatus(items, options);
+		},
+		commit(files) {
+			return processFiles(files, options);
+		}
+	};
+}
+//#endregion
+//#region src/components/dropzone/useDropzone.ts
+function hasFileTransfer(transfer) {
+	return Boolean(transfer && (Array.from(transfer.types).includes("Files") || transfer.files.length > 0 || Array.from(transfer.items).some((item) => item.kind === "file")));
+}
+function readTransferFiles(transfer) {
+	if (!transfer) return [];
+	const files = Array.from(transfer.files);
+	if (files.length > 0) return files;
+	return Array.from(transfer.items).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => Boolean(file));
+}
+function readTransferItems(transfer) {
+	if (!transfer) return [];
+	return Array.from(transfer.items, ({ kind, type }) => ({
+		kind,
+		type
+	}));
+}
+function useDropzone(props, callbacks) {
+	const rootRef = ref(null);
+	const control = useControlState(props);
+	const { inputRef, files, settleSelection, clear: clearNativeFiles, focus, open } = useNativeFileSelection({
+		modelValue: () => props.modelValue,
+		multiple: () => props.multiple !== false,
+		disabled: () => control.disabled,
+		validationMessage: () => props.validationMessage,
+		onChange: callbacks.onUpdate
+	});
+	const dragDepth = ref(0);
+	const dragFiles = ref([]);
+	const dragItems = ref([]);
+	const lastRejections = ref([]);
+	const policy = computed(() => createDropzonePolicy({
+		accept: props.accept,
+		multiple: props.multiple ?? true,
+		maxFiles: props.maxFiles,
+		maxSize: props.maxSize
+	}));
+	const dragSelection = computed(() => policy.value.commit(dragFiles.value));
+	const status = computed(() => {
+		if (dragDepth.value === 0) return "idle";
+		if (dragSelection.value.rejections.length > 0) return "reject";
+		return policy.value.preview(dragItems.value);
+	});
+	const rejections = computed(() => status.value === "idle" ? lastRejections.value : dragSelection.value.rejections);
+	const rootClass = computed(() => bem("rp-dropzone", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		invalid: control.invalid,
+		valid: control.valid && !control.invalid,
+		filled: files.value.length > 0,
+		dragging: status.value !== "idle",
+		accept: status.value === "accept",
+		reject: status.value === "reject",
+		"click-disabled": !props.activateOnClick
+	}));
+	function submitFiles(nextFiles) {
+		const selection = policy.value.commit(nextFiles);
+		lastRejections.value = selection.rejections;
+		settleSelection(selection.acceptedFiles.length > 0 || selection.rejections.length === 0 ? {
+			status: "accepted",
+			files: selection.acceptedFiles
+		} : { status: "rejected" });
+		callbacks.onDrop(selection);
+		if (selection.rejections.length > 0) callbacks.onReject(selection.rejections);
+	}
+	function resetDrag() {
+		dragDepth.value = 0;
+		dragFiles.value = [];
+		dragItems.value = [];
+	}
+	function onDragenter(event) {
+		if (!hasFileTransfer(event.dataTransfer)) return;
+		event.preventDefault();
+		if (control.disabled) return;
+		dragDepth.value += 1;
+		dragFiles.value = readTransferFiles(event.dataTransfer);
+		dragItems.value = readTransferItems(event.dataTransfer);
+	}
+	function onDragover(event) {
+		if (!hasFileTransfer(event.dataTransfer)) return;
+		event.preventDefault();
+		if (control.disabled) return;
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+		const nextFiles = readTransferFiles(event.dataTransfer);
+		const nextItems = readTransferItems(event.dataTransfer);
+		if (nextFiles.length > 0) dragFiles.value = nextFiles;
+		if (nextItems.length > 0) dragItems.value = nextItems;
+	}
+	function onDragleave() {
+		if (control.disabled || dragDepth.value === 0) return;
+		dragDepth.value = Math.max(0, dragDepth.value - 1);
+		if (dragDepth.value === 0) {
+			dragFiles.value = [];
+			dragItems.value = [];
+		}
+	}
+	function onDrop(event) {
+		if (!hasFileTransfer(event.dataTransfer)) return;
+		event.preventDefault();
+		const nextFiles = readTransferFiles(event.dataTransfer);
+		resetDrag();
+		if (!control.disabled) submitFiles(nextFiles);
+	}
+	function clear() {
+		lastRejections.value = [];
+		clearNativeFiles();
+	}
+	function onChange(event) {
+		submitFiles(Array.from(event.target.files ?? []));
+	}
+	function onKeydown(event) {
+		if (props.activateOnKeyboard === false && (event.key === "Enter" || event.key === " ")) event.preventDefault();
+	}
+	return {
+		rootRef,
+		inputRef,
+		control,
+		files,
+		rejections,
+		status,
+		rootClass,
+		onDragenter,
+		onDragover,
+		onDragleave,
+		onDrop,
+		onChange,
+		onKeydown,
+		open,
+		clear,
+		focus
+	};
+}
+//#endregion
+//#region src/components/dropzone/dropzone.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<p data-v-0f0e7a3d> </p>");
+var t1 = template("<p data-v-0f0e7a3d> ");
+var t2 = template("<div data-v-0f0e7a3d><input data-v-0f0e7a3d><div data-v-0f0e7a3d>", 1);
+//#endregion
+//#region src/components/dropzone/dropzone.vue
+var dropzone_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpDropzone",
+	inheritAttrs: false,
+	__name: "dropzone",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		accept: { default: void 0 },
+		capture: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			default: true
+		},
+		maxFiles: { default: void 0 },
+		maxSize: { default: void 0 },
+		size: { default: void 0 },
+		radius: { default: void 0 },
+		label: { default: void 0 },
+		description: { default: void 0 },
+		activateOnClick: {
+			type: Boolean,
+			default: true
+		},
+		activateOnKeyboard: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: [
+		"update:modelValue",
+		"drop",
+		"reject"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const descriptionId = `${useId()}-description`;
+		const { rootRef, inputRef, control, files, rejections, status, rootClass, onDragenter, onDragover, onDragleave, onDrop, onChange, onKeydown, open, clear, focus } = useDropzone(props, {
+			onUpdate: (nextFiles) => emit("update:modelValue", nextFiles),
+			onDrop: (selection) => emit("drop", selection),
+			onReject: (nextRejections) => emit("reject", nextRejections)
+		});
+		const displayLabel = computed(() => {
+			if (props.label) return props.label;
+			if (status.value === "accept") return "Drop files here";
+			if (status.value === "reject") return "Some files are not accepted";
+			return props.multiple ? "Drag files here or click to browse" : "Drag a file here or click to browse";
+		});
+		const ariaDescribedby = computed(() => mergeAriaIdRefs(control.ariaDescribedby, !slots.default && props.description ? descriptionId : void 0));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid),
+			"data-filled": toPresenceAttribute(files.value.length > 0),
+			"data-dragging": toPresenceAttribute(status.value !== "idle"),
+			"data-state": status.value,
+			onDragenter,
+			onDragover,
+			onDragleave,
+			onDrop
+		}));
+		const nativeInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-dropzone__input",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				id: control.id,
+				name: props.name,
+				form: control.form ?? forwardedAttributes.form,
+				type: "file",
+				value: void 0,
+				accept: props.accept,
+				capture: props.capture,
+				multiple: props.multiple || void 0,
+				disabled: control.disabled || void 0,
+				required: control.required || void 0,
+				tabindex: props.activateOnKeyboard ? void 0 : -1,
+				"aria-label": control.ariaLabelledby ? void 0 : props.ariaLabel || displayLabel.value,
+				"aria-labelledby": control.ariaLabelledby,
+				"aria-describedby": ariaDescribedby.value,
+				"aria-invalid": control.invalid || void 0,
+				"aria-required": control.required || void 0,
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-invalid": toPresenceAttribute(control.invalid),
+				onChange: composeEventHandlers(onChange, attrs.onChange),
+				onKeydown: composeEventHandlers(onKeydown, attrs.onKeydown)
+			};
+		});
+		__expose({
+			nativeElement: inputRef,
+			rootElement: rootRef,
+			open,
+			clear,
+			focus
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n8 = t2();
+		const n0 = child(n8);
+		const n7 = next(n0, 1);
+		_setTemplateRef(n0, inputRef, null, "inputRef");
+		renderEffect(() => {
+			setDynamicProps(n8, [rootAttrs.value]);
+			setDynamicProps(n0, [nativeInputAttrs.value]);
+			setDynamicProps(n7, [unref(getPartAttrs)("content", { class: "rp-dropzone__content" })]);
+		});
+		setInsertionState(n7, null, 0);
+		createSlot("default", {
+			files: () => unref(files),
+			rejections: () => unref(rejections),
+			status: () => unref(status),
+			dragging: () => unref(status) !== "idle",
+			open: () => unref(open),
+			clear: () => unref(clear)
+		}, () => {
+			const n3 = t0();
+			const x3 = txt(n3);
+			renderEffect(() => {
+				setDynamicProps(n3, [unref(getPartAttrs)("label", { class: "rp-dropzone__label" })]);
+				setText(x3, toDisplayString(displayLabel.value));
+			});
+			return [n3, createIf(() => __props.description, () => {
+				const n6 = t1();
+				const x6 = txt(n6);
+				renderEffect(() => {
+					setDynamicProps(n6, [unref(getPartAttrs)("description", { class: "rp-dropzone__description" }), { id: descriptionId }]);
+					setText(x6, toDisplayString(__props.description));
+				});
+				return n6;
+			})];
+		}, 1);
+		_setTemplateRef(n8, rootRef, null, "rootRef");
+		return n8;
+	}
+}), [["__scopeId", "data-v-0f0e7a3d"]]);
+//#endregion
+//#region src/components/dropzone/types.ts
+var dropzoneParts = [
+	"root",
+	"input",
+	"content",
+	"label",
+	"description"
+];
+var dropzoneStatuses = [
+	"idle",
+	"accept",
+	"reject"
+];
+var dropzoneErrorCodes = [
+	"file-invalid-type",
+	"file-too-large",
+	"too-many-files"
+];
+//#endregion
+export { dropzone_default as i, dropzoneParts as n, dropzoneStatuses as r, dropzoneErrorCodes as t };

package/dist/file-input.css

@@ -0,0 +1,135 @@
+@layer ropav.components {
+.rp-file-input[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-md);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-md);
+    --_rp-file-input-radius: var(--rp-radius-sm);
+    --_rp-file-input-valid-border: var(--rp-color-green-outline);
+    --_rp-file-input-valid-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
+    --_rp-file-input-invalid-border: var(--rp-color-red-outline);
+    --_rp-file-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
+    position: relative;
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: stretch;
+    width: 100%;
+    height: var(--_rp-file-input-height);
+    overflow: hidden;
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-file-input-font-size);
+    font-weight: var(--rp-font-weight-normal);
+    line-height: 1;
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    border-radius: var(--_rp-file-input-radius);
+    cursor: pointer;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-file-input[data-v-c2dff394]:hover:not(.rp-file-input--disabled):not(.rp-file-input--invalid):not(.rp-file-input--valid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-file-input[data-v-c2dff394]:focus-within:not(.rp-file-input--disabled):not(.rp-file-input--invalid):not(.rp-file-input--valid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-file-input--size-xs[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-xs);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-xs);
+}
+.rp-file-input--size-sm[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-sm);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-sm);
+}
+.rp-file-input--size-md[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-md);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-md);
+}
+.rp-file-input--size-lg[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-lg);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-lg);
+}
+.rp-file-input--size-xl[data-v-c2dff394] {
+    --_rp-file-input-height: var(--rp-size-control-xl);
+    --_rp-file-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-file-input-font-size: var(--rp-font-size-xl);
+}
+.rp-file-input--radius-xs[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-xs);
+}
+.rp-file-input--radius-sm[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-sm);
+}
+.rp-file-input--radius-md[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-md);
+}
+.rp-file-input--radius-lg[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-lg);
+}
+.rp-file-input--radius-xl[data-v-c2dff394] {
+    --_rp-file-input-radius: var(--rp-radius-xl);
+}
+.rp-file-input--disabled[data-v-c2dff394] {
+    background-color: var(--rp-color-disabled);
+    border-color: var(--rp-color-disabled-border);
+    cursor: not-allowed;
+}
+.rp-file-input--disabled .rp-file-input__trigger[data-v-c2dff394] {
+    background-color: var(--rp-color-disabled);
+    border-right-color: var(--rp-color-disabled-border);
+}
+.rp-file-input--valid[data-v-c2dff394] {
+    border-color: var(--_rp-file-input-valid-border);
+}
+.rp-file-input--valid[data-v-c2dff394]:focus-within:not(.rp-file-input--disabled) {
+    border-color: var(--_rp-file-input-valid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-file-input-valid-ring);
+}
+.rp-file-input--invalid[data-v-c2dff394] {
+    border-color: var(--_rp-file-input-invalid-border);
+}
+.rp-file-input--invalid[data-v-c2dff394]:focus-within:not(.rp-file-input--disabled) {
+    border-color: var(--_rp-file-input-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-file-input-invalid-ring);
+}
+.rp-file-input__native[data-v-c2dff394] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+.rp-file-input__native[data-v-c2dff394]:disabled {
+    cursor: not-allowed;
+}
+.rp-file-input__trigger[data-v-c2dff394] {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 var(--_rp-file-input-padding-x);
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-control-readonly-bg);
+    border-right: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    font-weight: var(--rp-font-weight-medium);
+    white-space: nowrap;
+}
+.rp-file-input__value[data-v-c2dff394] {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 var(--_rp-file-input-padding-x);
+    color: var(--rp-color-control-fg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rp-file-input__value--placeholder[data-v-c2dff394] {
+    color: var(--rp-color-control-placeholder);
+}
+}