@functionalcms/svelte-components 4.30.0 → 4.31.0

package/dist/components/form/Dropzone.svelte

@@ -1,158 +1,183 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		label: string;
-		buttonLabel: string
-		css: string;
-		accept: string;
-		multiple: boolean;
-		maxSize: number;
-		renderSelctedFilesPreview?: Snippet<[File[]]>;
-	}
+	import { displaySize, type FileDropZoneProps, type FileRejectedReason } from './dropzone.js';
+	import { cn } from '../../utils.js';
 
 	let {
-		label = "Drag and drop files here <br/> or",
-		buttonLabel = "Browse",
-		css = "dropzone",
-		accept = "",
-		multiple = true,
-		maxSize = Infinity,
-		renderSelctedFilesPreview = undefined,
-	}: Partial<Props> = $props();
-
-	let isDragging = $state(false);
-	let files = $state<File[]>([]);
-	let fileInput: HTMLInputElement;
-
-	function onInputChange(e) {
-		const picked = Array.from<File>(e.currentTarget.files ?? []);
-		setFiles(picked);
-	}
+		id,
+		children,
+		maxFiles,
+		maxFileSize,
+		fileCount,
+		disabled = false,
+		onUpload,
+		onFileRejected,
+		accept,
+		class: css,
+		...rest
+	}: FileDropZoneProps = $props();
 
-	function setFiles(newFiles: File[]) {
-		const filtered = newFiles.filter(
-			(f: File) => f.size <= maxSize && matchesAccept(f),
+	if (maxFiles !== undefined && fileCount === undefined) {
+		console.warn(
+			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
 		);
-		files = [...files, ...filtered];
 	}
 
-	function matchesAccept(file: File) {
-		if (!accept) return true;
-		// Basic accept check (MIME or extension)
-		return accept.split(",").some((rule) => {
-			const trimmed = rule.trim();
-			if (trimmed.startsWith("."))
-				return file.name.toLowerCase().endsWith(trimmed.toLowerCase());
-			if (trimmed.endsWith("/*")) {
-				const typeRoot = trimmed.slice(0, -2);
-				return file.type.startsWith(typeRoot + "/");
+	let uploading = $state(false);
+
+	const drop = async (
+		e: DragEvent & {
+			currentTarget: EventTarget & HTMLLabelElement;
+		}
+	) => {
+		if (disabled || !canUploadFiles) return;
+
+		e.preventDefault();
+
+		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+
+		await upload(droppedFiles);
+	};
+
+	const change = async (
+		e: Event & {
+			currentTarget: EventTarget & HTMLInputElement;
+		}
+	) => {
+		if (disabled) return;
+
+		const selectedFiles = e.currentTarget.files;
+
+		if (!selectedFiles) return;
+
+		await upload(Array.from(selectedFiles));
+
+		// this if a file fails and we upload the same file again we still get feedback
+		(e.target as HTMLInputElement).value = '';
+	};
+
+	const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
+		if (maxFileSize !== undefined && file.size > maxFileSize) return 'Maximum file size exceeded';
+
+		if (maxFiles !== undefined && fileNumber > maxFiles) return 'Maximum files uploaded';
+
+		if (!accept) return undefined;
+
+		const acceptedTypes = accept.split(',').map((a) => a.trim().toLowerCase());
+		const fileType = file.type.toLowerCase();
+		const fileName = file.name.toLowerCase();
+
+		const isAcceptable = acceptedTypes.some((pattern) => {
+			// check extension like .mp4
+			if (fileType.startsWith('.')) {
+				return fileName.endsWith(pattern);
 			}
-			return file.type === trimmed;
+
+			// if pattern has wild card like video/*
+			if (pattern.endsWith('/*')) {
+				const baseType = pattern.slice(0, pattern.indexOf('/*'));
+				return fileType.startsWith(baseType + '/');
+			}
+
+			// otherwise it must be a specific type like video/mp4
+			return fileType === pattern;
 		});
-	}
 
-	function onDrop(e: DragEvent) {
-		e.preventDefault();
-		e.stopPropagation();
-		const dropped = Array.from(e.dataTransfer?.files ?? []);
-		setFiles(dropped);
-		isDragging = false;
-	}
+		if (!isAcceptable) return 'File type not allowed';
 
-	function onDragOver(e: DragEvent) {
-		e.preventDefault();
-		e.dataTransfer.dropEffect = "copy";
-		isDragging = true;
-	}
+		return undefined;
+	};
 
-	function onDragLeave(e: DragEvent) {
-		e.preventDefault();
-		isDragging = false;
-	}
-</script>
+	const upload = async (uploadFiles: File[]) => {
+		uploading = true;
+
+		const validFiles: File[] = [];
+
+		for (let i = 0; i < uploadFiles.length; i++) {
+			const file = uploadFiles[i];
 
-<div
-	class="{css} {isDragging ? 'dragging' : ''}"
-	role="button"
-	tabindex="-1"
-	ondrop={onDrop}
-	ondragover={onDragOver}
-	ondragleave={onDragLeave}
-	onkeydown={(event) => {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			fileInput?.click();
+			const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
+
+			if (rejectedReason) {
+				onFileRejected?.({ file, reason: rejectedReason });
+				continue;
+			}
+
+			validFiles.push(file);
 		}
-	}}
-	aria-label="File upload dropzone"
+
+		await onUpload(validFiles);
+
+		uploading = false;
+	};
+
+	const canUploadFiles = $derived(
+		!disabled &&
+			!uploading &&
+			!(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles)
+	);
+</script>
+
+<label
+	ondragover={(e) => e.preventDefault()}
+	ondrop={drop}
+	for={id}
+	aria-disabled={!canUploadFiles}
+	class={cn(
+		'flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed border-border p-6 transition-all hover:cursor-pointer hover:bg-accent/25 aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed',
+		className
+	)}
 >
+	{#if children}
+		{@render children()}
+	{:else}
+		<div class="flex flex-col place-items-center justify-center gap-2">
+			<div
+				class="flex size-14 place-items-center justify-center rounded-full border border-dashed border-border text-muted-foreground"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="lucide lucide-upload-icon lucide-upload"
+					><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline
+						points="17 8 12 3 7 8"
+					/><line x1="12" x2="12" y1="3" y2="15" /></svg
+				>
+			</div>
+			<div class="flex flex-col gap-0.5 text-center">
+				<span class="font-medium text-muted-foreground">
+					Drag 'n' drop files here, or click to select files
+				</span>
+				{#if maxFiles || maxFileSize}
+					<span class="text-sm text-muted-foreground/75">
+						{#if maxFiles}
+							<span>You can upload {maxFiles} files</span>
+						{/if}
+						{#if maxFiles && maxFileSize}
+							<span>(up to {displaySize(maxFileSize)} each)</span>
+						{/if}
+						{#if maxFileSize && !maxFiles}
+							<span>Maximum size {displaySize(maxFileSize)}</span>
+						{/if}
+					</span>
+				{/if}
+			</div>
+		</div>
+	{/if}
 	<input
-		id="file-input"
-		type="file"
+		{...rest}
+		disabled={!canUploadFiles}
+		{id}
 		{accept}
-		{multiple}
-		onchange={onInputChange}
-		bind:this={fileInput}
-		aria-hidden="true"
+		multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
+		type="file"
+		onchange={change}
+		class="hidden"
 	/>
-	<label for="file-input" class="prompt">
-		<span class="title">{@html label}</span>
-		<button type="button" class="browse">{buttonLabel}</button>
-	</label>
-
-	{#if files.length}
-		{#if renderSelctedFilesPreview}
-			{@render renderSelctedFilesPreview(files)}
-		{:else}
-			<ul class="file-list">
-				{#each files as f}
-					<li>{f.name} — {(f.size / 1024).toFixed(1)} KB</li>
-				{/each}
-			</ul>
-		{/if}
-	{/if}
-</div>
-
-<style>
-	.dropzone {
-		border: 2px dashed #9aa0a6;
-		border-radius: 10px;
-		padding: 24px;
-		text-align: center;
-		transition:
-			border-color 0.15s,
-			background-color 0.15s;
-		position: relative;
-		cursor: pointer;
-	}
-	.dropzone.dragging {
-		border-color: #1a73e8;
-		background-color: #f0f7ff;
-	}
-	/* Hide native input but keep it accessible via label */
-	input[type="file"] {
-		position: absolute;
-		inset: 0;
-		opacity: 0;
-		width: 100%;
-		height: 100%;
-		cursor: pointer;
-	}
-	.prompt {
-		display: grid;
-		gap: 8px;
-		justify-items: center;
-	}
-	.browse {
-		padding: 6px 12px;
-		border: 1px solid #1a73e8;
-		background: #1a73e8;
-		color: white;
-		border-radius: 6px;
-	}
-	.file-list {
-		margin-top: 12px;
-		text-align: left;
-	}
-</style>
+</label>

package/dist/components/form/Dropzone.svelte.d.ts

@@ -1,12 +1,4 @@
-import type { Snippet } from "svelte";
-declare const Dropzone: import("svelte").Component<Partial<{
-    label: string;
-    buttonLabel: string;
-    css: string;
-    accept: string;
-    multiple: boolean;
-    maxSize: number;
-    renderSelctedFilesPreview?: Snippet<[File[]]>;
-}>, {}, "">;
+import { type FileDropZoneProps } from './dropzone.js';
+declare const Dropzone: import("svelte").Component<FileDropZoneProps, {}, "">;
 type Dropzone = ReturnType<typeof Dropzone>;
 export default Dropzone;

package/dist/components/form/SmartForm.svelte

@@ -1,17 +1,11 @@
 <script lang="ts">
-	import Dropzone from './Dropzone.svelte';
 	import Input from './Input.svelte';
-	import { type Field, FieldType, InputType, SubmitResult } from './form.js';
+	import { type Field, FieldType, InputType, SubmitResult} from './form.js';
 	import { fade } from 'svelte/transition';
 
-	interface Css {
-		form?: string;
-		error?: string;
-	}
-
 	interface Props {
-		action?: string;
-		css?: Css;
+		action: string;
+		css?: string;
 		successMessage?: string;
 		submitButonText?: string;
 		fields?: Array<Field>;
@@ -21,10 +15,10 @@
 	let {
 		action,
 		fields = [],
-		css = {},
+		css = '',
 		submitButonText = 'Submit',
 		successMessage,
-		onMessageSubmitted
+		onMessageSubmitted,
 	}: Props = $props();
 
 	let form: any;
@@ -39,8 +33,7 @@
 			isSendingMessage = true;
 			event.preventDefault();
 			const formData = new FormData(form);
-			const formAction = action || window.location.pathname;
-			const response = await fetch(formAction, {
+			const response = await fetch(action, {
 				method: 'POST',
 				body: formData
 			});
@@ -51,17 +44,6 @@
 			console.error('Error submitting form:', error);
 		}
 	};
-	const handleFilesSelect = (field: Field) => {
-		const processNewUpload = async (files: File[]) => {
-			if (!Array.isArray(field.value)) {
-				field.value = [];
-			}
-
-			field.value = [...field.value, ...files];
-		};
-
-		return processNewUpload;
-	};
 </script>
 
 {#if showMessage}
@@ -69,7 +51,7 @@
 		{successMessage}
 	</div>
 {:else}
-	<form method="POST" bind:this={form} class={css.form}>
+	<form method="POST" bind:this={form} class={css}>
 		<fieldset>
 			{#each fields as field}
 				{#if field.type === FieldType.Input}
@@ -80,8 +62,6 @@
 						placeholder={field.placeholder}
 						type={field.subType}
 						isRequired={field.isRequired || false}
-						value={field.value}
-						{...field.props}
 					/>
 				{:else if field.type === FieldType.Textarea}
 					<Input
@@ -91,67 +71,29 @@
 						type={InputType.Textarea}
 						placeholder={field.placeholder}
 						isRequired={field.isRequired || false}
-						value={field.value}
-					/>
-				{:else if field.type === FieldType.Hidden}
-					<input
-						id={field.name}
-						name={field.name}
-						value={field.value}
-						type="hidden"
-						required={field.isRequired || false}
 					/>
 				{:else if field.type === FieldType.Radio}
 					{#each field.options as option}
 						<label>
 							{#if option.checked}
-								<input
-									type="radio"
-									name={field.name}
-									value={option.value}
-									required={field.isRequired}
-									checked
-								/>
+								<input type="radio" name={field.name} value={option.value} required={field.isRequired} checked/>
 							{:else}
-								<input
-									type="radio"
-									name={field.name}
-									value={option.value}
-									required={field.isRequired}
-								/>
+								<input type="radio" name={field.name} value={option.value} required={field.isRequired}/>
 							{/if}
 							{option.label}
-						</label>
+						</label> 	
 					{/each}
 				{:else if field.type === FieldType.Checkbox}
 					{#each field.options as option}
 						<label>
 							{#if option.checked}
-								<input
-									type="checkbox"
-									name={field.name}
-									value={option.value}
-									required={field.isRequired}
-									checked
-								/>
+							<input type="checkbox" name={field.name} value={option.value} required={field.isRequired} checked/>
 							{:else}
-								<input
-									type="checkbox"
-									name={field.name}
-									value={option.value}
-									required={field.isRequired}
-								/>
+							<input type="checkbox" name={field.name} value={option.value} required={field.isRequired} />
 							{/if}
 							{option.label}
 						</label>
 					{/each}
-				{:else if field.type === FieldType.DropZone}
-					<Dropzone ondrop={handleFilesSelect(field)}>
-						{field.label}
-					</Dropzone>
-				{/if}
-				{#if field.error}
-					<div class={css.error}>{field.error}</div>
 				{/if}
 			{/each}
 

package/dist/components/form/SmartForm.svelte.d.ts

@@ -1,11 +1,7 @@
 import { type Field, SubmitResult } from './form.js';
-interface Css {
-    form?: string;
-    error?: string;
-}
 interface Props {
-    action?: string;
-    css?: Css;
+    action: string;
+    css?: string;
     successMessage?: string;
     submitButonText?: string;
     fields?: Array<Field>;

package/dist/components/form/form.d.ts

@@ -2,9 +2,7 @@ export declare enum FieldType {
     Input = "input",
     Textarea = "textarea",
     Radio = "radio",
-    Checkbox = "checkbox",
-    Hidden = "hidden",
-    DropZone = "dropzone"
+    Checkbox = "checkbox"
 }
 export declare enum InputType {
     Text = "text",
@@ -40,13 +38,8 @@ export interface Field {
         checked?: boolean;
     }>;
     checked?: boolean;
-    value?: string | number | boolean | File[];
-    props?: any;
-    error?: string;
 }
 export declare enum SubmitResult {
     Success = "success",
     Error = "error"
 }
-export declare const readForm: (request: Request, fields: Array<Field>) => Promise<any>;
-export declare const refreshPage: () => void;

package/dist/components/form/form.js

@@ -4,8 +4,6 @@ export var FieldType;
     FieldType["Textarea"] = "textarea";
     FieldType["Radio"] = "radio";
     FieldType["Checkbox"] = "checkbox";
-    FieldType["Hidden"] = "hidden";
-    FieldType["DropZone"] = "dropzone";
 })(FieldType || (FieldType = {}));
 export var InputType;
 (function (InputType) {
@@ -35,16 +33,3 @@ export var SubmitResult;
     SubmitResult["Success"] = "success";
     SubmitResult["Error"] = "error";
 })(SubmitResult || (SubmitResult = {}));
-export const readForm = async (request, fields) => {
-    const formData = await request.formData();
-    let response = {};
-    fields.forEach(field => {
-        response[field.name] = formData.get(field.name);
-    });
-    return response;
-};
-export const refreshPage = () => {
-    if (window) {
-        window?.location?.reload();
-    }
-};

package/dist/components/layouts/TwoColumnsLayout.svelte

@@ -1,44 +1,174 @@
 <script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Css {}
+	import type { Snippet } from "svelte";
 
 	interface TwoColumnLayoutProps {
 		leftRender: Snippet;
 		rightRender: Snippet;
 		containerCss: string;
-		leftCss: string;
-		rightCss: string;
-		isFullWidth: boolean;
-		isFullHeight: boolean;
+		spitPercentage: number;
+		isResizable: boolean;
+		isCollapsible: boolean;
+		collapsedWidthPx: number;
+		minWidthPercent: number;
+		maxWidthPercent: number;
 	}
 
 	let {
 		leftRender,
 		rightRender,
-		isFullWidth = true,
-		isFullHeight = true,
-		containerCss = '',
-		leftCss = 'w50p',
-		rightCss = 'w50p'
+		containerCss = "",
+		spitPercentage = 30,
+		isResizable = true,
+		isCollapsible = true,
+		collapsedWidthPx = 60,
+		minWidthPercent = 10,
+		maxWidthPercent = 80,
 	}: Partial<TwoColumnLayoutProps> = $props();
 
-	let containerCssEx = cn(
-		'flex flex-row-dynamic',
-		isFullWidth ? 'fw' : '',
-		isFullHeight ? 'fh' : '',
-		containerCss,
-	);
+	let container: HTMLElement | undefined = undefined;
+	let leftWidthPx = $state(0);
+	let isCollapsed = $state(false);
+	let isDragging = $state(false);
+	
+	$effect(() => {
+		if (container) {
+			const containerWidth = container.getBoundingClientRect().width;
+			leftWidthPx = containerWidth * (spitPercentage / 100);
+		}
+	});
+
+	const toggleCollapse = () => {
+		isCollapsed = !isCollapsed;
+	};
+
+	let startX = 0;
+	
+	const handleMouseDown = (event: MouseEvent) => {
+		isDragging = true;
+		startX = event.clientX;
+		event.preventDefault();
+	};
+
+	const handleMouseMove = (event: MouseEvent) => {
+		if (!isDragging) return;
+		
+		const deltaX = event.clientX - startX;
+		const containerWidth = container?.getBoundingClientRect().width || 1;
+		const newWidth = leftWidthPx + deltaX;
+		const minWidthPx = containerWidth * (minWidthPercent / 100);
+		const maxWidthPx = containerWidth * (maxWidthPercent / 100);
+
+		if (newWidth >= minWidthPx && newWidth <= maxWidthPx) {
+			leftWidthPx = newWidth;
+			startX = event.clientX;
+		}
+	};
+
+	const handleMouseUp = () => {
+		isDragging = false;
+	};
+
+	$effect(() => {
+		if (isDragging) {
+			document.addEventListener('mousemove', handleMouseMove);
+			document.addEventListener('mouseup', handleMouseUp);
+			
+			return () => {
+				document.removeEventListener('mousemove', handleMouseMove);
+				document.removeEventListener('mouseup', handleMouseUp);
+			};
+		}
+	});
 </script>
 
-<section class={containerCssEx}>
-	<div class="left {leftCss}">
-		{@render leftRender()}
+<section class="container {containerCss}" bind:this={container}>
+	<div class="left" style:width={isCollapsed ? `${collapsedWidthPx}px` : `${leftWidthPx}px`}>
+		{#if isCollapsible}
+			<div class="toggle-button-container">
+				<button class="toggle-button" onclick={toggleCollapse} aria-label={isCollapsed ? "Expand" : "Collapse"}>
+					<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+						{#if isCollapsed}
+							<path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+						{:else}
+							<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+						{/if}
+					</svg>
+				</button>
+			</div>
+		{/if}
+		{@render leftRender?.(isCollapsed)}
 	</div>
-	<div class="right {rightCss}">
-		{@render rightRender()}
+
+	{#if isResizable && !isCollapsed}
+		<div
+			class="isResizable"
+			onmousedown={handleMouseDown}
+			role="separator"
+			aria-label="Resizer"
+		></div>
+	{/if}
+
+	<div class="right" style:flex="1">
+		{@render rightRender?.()}
 	</div>
 </section>
 
-<style></style>
+<style>
+	.container {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.left {
+		transition: width 0.3s ease;
+		position: relative;
+		overflow-x: hidden;
+	}
+	.right {
+	}
+	.isResizable {
+		width: 4px;
+		background-color: #e0e0e0;
+		cursor: col-resize;
+		transition: background-color 0.2s;
+		flex-shrink: 0;
+	}
+	.isResizable:hover {
+		background-color: #0078d4;
+	}
+	.toggle-button-container {
+		position: sticky;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		padding: 0 8px;
+		background-color: transparent;
+		z-index: 100;
+	}
+	.toggle-button {
+		background-color: transparent;
+		border: none;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		border-radius: 2px;
+		color: #323130;
+		transition: background-color 0.1s;
+		padding: 0;
+	}
+	.toggle-button:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.toggle-button:active {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+</style>

package/dist/components/layouts/TwoColumnsLayout.svelte.d.ts

@@ -1,12 +1,14 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 declare const TwoColumnsLayout: import("svelte").Component<Partial<{
     leftRender: Snippet;
     rightRender: Snippet;
     containerCss: string;
-    leftCss: string;
-    rightCss: string;
-    isFullWidth: boolean;
-    isFullHeight: boolean;
+    spitPercentage: number;
+    isResizable: boolean;
+    isCollapsible: boolean;
+    collapsedWidthPx: number;
+    minWidthPercent: number;
+    maxWidthPercent: number;
 }>, {}, "">;
 type TwoColumnsLayout = ReturnType<typeof TwoColumnsLayout>;
 export default TwoColumnsLayout;

package/dist/index.d.ts

@@ -29,7 +29,7 @@ export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
 export { default as Switch } from './components/form/Switch.svelte';
 export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
-export { InputType, FieldType, LabelSize, type Field, SubmitResult, readForm, refreshPage } from './components/form/form.js';
+export { InputType, FieldType, LabelSize, type Field, SubmitResult } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';

package/dist/index.js

@@ -42,7 +42,7 @@ export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
 export { default as Switch } from './components/form/Switch.svelte';
 export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
-export { InputType, FieldType, LabelSize, SubmitResult, readForm, refreshPage } from './components/form/form.js';
+export { InputType, FieldType, LabelSize, SubmitResult } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.30.0",
+	"version": "4.31.0",
 	"license": "MIT",
 	"watch": {
 		"build": {