fuma 2.0.50 → 2.1.1

package/dist/ui/form/Form.svelte

@@ -1,168 +0,0 @@
-<script lang="ts" context="module">
-	import type { z } from 'zod'
-	import type { FormDataInput } from './form.js'
-</script>
-
-<script
-	lang="ts"
-	generics="
-		Shape extends z.core.$ZodShape,
-		ReturnData extends Record<string, unknown> = FormDataInput<Shape>,
-		Data extends FormDataInput<Shape> = FormDataInput<Shape>
-	"
->
-	import { createEventDispatcher, onMount } from 'svelte'
-	import { fade } from 'svelte/transition'
-	import { page } from '$app/stores'
-	import { contextContainer } from '../context.js'
-	import {
-		initData,
-		type FormField,
-		type FormSectionProps,
-		type BoolOrFunction,
-		type Nullable,
-		getFieldType,
-		useHandleInput
-	} from './form.js'
-	import ButtonDelete from '../button/ButtonDelete.svelte'
-
-	import { useForm, type UseFormOptions } from '../../validation/form.js'
-	import FormInput from './FormInput.svelte'
-	import FormSection from './FormSection.svelte'
-
-	let klass = ''
-	export { klass as class }
-	export let classSection = ''
-	export let classAction = ''
-	export let model: Shape | undefined = undefined
-	export let fields: FormField<Shape>[][] = []
-	export let sections: FormSectionProps<Shape>[] = [{}]
-	export let action = ''
-	export let actionCreate = '_create'
-	export let actionDelete = '_delete'
-	export let actionUpdate = '_update'
-	export let disabled = false
-
-	/** Ignore actionCreate, actionDelete and actionUpdate */
-	export let simpleAction = false
-
-	export let options: UseFormOptions<ReturnData> = {}
-	let dataInput: Partial<Data> | null = initData<Shape, Data>(fields)
-	export { dataInput as data }
-
-	let data: Partial<Data> = dataInput || {}
-
-	export function set<K extends keyof Data>(key: K, value: Partial<Data>[K]) {
-		isDirty.set(true)
-		data[key] = value
-	}
-	export function update(updater: (currentData: Partial<Data>) => Partial<Data>) {
-		isDirty.set(true)
-		data = updater(data)
-	}
-
-	const dispatch = createEventDispatcher<{
-		success: { action: URL; data?: ReturnData }
-		created: ReturnData
-		updated: ReturnData
-		deleted: void
-	}>()
-
-	const { enhance, setError } = useForm<ReturnData>({
-		...options,
-		async onSuccess(url, data) {
-			if (options.onSuccess) await options.onSuccess(url, data)
-			dispatch('success', { action: url, data })
-			const actionPath = url.pathname + url.search
-			if (actionPath.includes(action + actionDelete)) dispatch('deleted')
-			if (!data) return
-			if (actionPath.includes(action + actionCreate)) dispatch('created', data)
-			if (actionPath.includes(action + actionUpdate)) dispatch('updated', data)
-		}
-	})
-	const { handleInput, isDirty } = useHandleInput({ model, setError })
-
-	onMount(lookupValueFromParams)
-	$: $isDirty ? (dataInput = data) : (data = dataInput || {})
-
-	function lookupValueFromParams() {
-		fields.flat().forEach(({ key }) => {
-			if (data[key]) return
-			const value = $page.url.searchParams.get(key)
-			// TODO: fix data[key] type
-			// @ts-ignore
-			if (value && key in data) data[key] = value
-		})
-	}
-
-	const actionPadding = getActionPadding()
-	function getActionPadding(): string {
-		const container = contextContainer.get()
-		if (container === 'drawer') return 'bottom-0 -ml-8 -mr-4 pl-8 pr-4'
-		if (container === 'card') return 'bottom-0 -mx-2 sm:-mx-8 px-2 sm:px-8'
-		if (container === 'dialog') return '-bottom-4 -mx-4 px-4'
-		return 'bottom-0'
-	}
-
-	const getBoolean = (bool?: BoolOrFunction<Shape>) => (_data: Nullable<Data>) =>
-		typeof bool === 'boolean' || bool === undefined ? !!bool : !!bool(_data)
-</script>
-
-<form
-	method="post"
-	action="{action}{simpleAction ? '' : data?.id ? actionUpdate : actionCreate}"
-	enctype="multipart/form-data"
-	class="{klass} flex flex-col gap-4"
-	use:enhance
-	on:input={handleInput}
->
-	{#if data?.id}
-		<input type="hidden" name="id" value={data.id} />
-	{/if}
-
-	<slot />
-
-	{#each fields as groupFields, groupIndex}
-		{@const section = sections[groupIndex] || {}}
-		{#if !getBoolean(section?.hide)(data)}
-			<div class="contents" in:fade|local={{ duration: 200 }}>
-				<FormSection {...section} class="{classSection} {section.class || ''} max-w-full">
-					<div class="grid grid-cols-4 gap-x-4 gap-y-2">
-						{#each groupFields as field (field.key)}
-							{#if !getBoolean(field.hide)(data)}
-								{@const inputType = getFieldType(field)}
-								<div
-									style={`grid-column: span ${field.colSpan || 2};`}
-									in:fade|local={{ duration: 200 }}
-								>
-									<FormInput
-										key={field.key}
-										type={inputType}
-										bind:value={data[field.key]}
-										{...field[inputType]}
-									/>
-								</div>
-							{/if}
-						{/each}
-					</div>
-				</FormSection>
-			</div>
-		{/if}
-	{/each}
-
-	<div
-		class="
-			{classAction} {actionPadding}
-			sticky col-span-full mt-2 flex flex-row-reverse gap-2 border-t py-4 backdrop-blur-sm
-		"
-	>
-		<button class="btn btn-primary" {disabled}> Valider </button>
-		<div class="grow"></div>
-		{#if !simpleAction && data?.id && actionDelete}
-			{@const formaction = `${action}${actionDelete}`}
-			<slot name="delete" {formaction}>
-				<ButtonDelete {formaction} {disabled}>Supprimer</ButtonDelete>
-			</slot>
-		{/if}
-	</div>
-</form>

package/dist/ui/form/Form.svelte.d.ts

@@ -1,62 +0,0 @@
-import type { z } from 'zod';
-import type { FormDataInput } from './form.js';
-import { type FormField, type FormSectionProps } from './form.js';
-import { type UseFormOptions } from '../../validation/form.js';
-declare class __sveltets_Render<Shape extends z.core.$ZodShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>> {
-    props(): {
-        class?: string;
-        classSection?: string;
-        classAction?: string;
-        model?: Shape | undefined;
-        fields?: FormField<Shape>[][] | undefined;
-        sections?: FormSectionProps<Shape>[] | undefined;
-        action?: string;
-        actionCreate?: string;
-        actionDelete?: string;
-        actionUpdate?: string;
-        disabled?: boolean;
-        /** Ignore actionCreate, actionDelete and actionUpdate */ simpleAction?: boolean;
-        options?: UseFormOptions<ReturnData> | undefined;
-        data?: Partial<Data> | null | undefined;
-        set?: (<K extends keyof Data>(key: K, value: Partial<Data>[K]) => void) | undefined;
-        update?: ((updater: (currentData: Partial<Data>) => Partial<Data>) => void) | undefined;
-    };
-    events(): {
-        success: CustomEvent<{
-            action: URL;
-            data?: ReturnData | undefined;
-        }>;
-        created: CustomEvent<ReturnData>;
-        updated: CustomEvent<ReturnData>;
-        deleted: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {};
-        delete: {
-            formaction: any;
-        };
-    };
-    bindings(): string;
-    exports(): {
-        set: <K extends keyof Data>(key: K, value: Partial<Data>[K]) => void;
-        update: (updater: (currentData: Partial<Data>) => Partial<Data>) => void;
-    };
-}
-interface $$IsomorphicComponent {
-    new <Shape extends z.core.$ZodShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Shape, ReturnData, Data>['props']> & {
-        children?: any;
-    }>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Shape, ReturnData, Data>['props']>, ReturnType<__sveltets_Render<Shape, ReturnData, Data>['events']>, ReturnType<__sveltets_Render<Shape, ReturnData, Data>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<Shape, ReturnData, Data>['bindings']>;
-    } & ReturnType<__sveltets_Render<Shape, ReturnData, Data>['exports']>;
-    <Shape extends z.core.$ZodShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>>(internal: unknown, props: ReturnType<__sveltets_Render<Shape, ReturnData, Data>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<Shape, ReturnData, Data>['events']>;
-        $$slots?: ReturnType<__sveltets_Render<Shape, ReturnData, Data>['slots']>;
-        children?: any;
-    }): ReturnType<__sveltets_Render<Shape, ReturnData, Data>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const Form: $$IsomorphicComponent;
-type Form<Shape extends z.core.$ZodShape, ReturnData extends Record<string, unknown> = FormDataInput<Shape>, Data extends FormDataInput<Shape> = FormDataInput<Shape>> = InstanceType<typeof Form<Shape, ReturnData, Data>>;
-export default Form;

package/dist/ui/form/FormInput.svelte

@@ -1,15 +0,0 @@
-<script lang="ts" generics="InputType extends FormInputsType">
-	import { formInputs, type FormInputProps, type FormInputsType } from './formInput.js'
-
-	type $$Props = FormInputProps<InputType> & {
-		type: InputType
-		value: FormInputProps<InputType>['value']
-	}
-
-	let inputType: InputType
-	export { inputType as type }
-	export let value: FormInputProps<InputType>['value']
-	$: component = formInputs[inputType] as any
-</script>
-
-<svelte:component this={component} bind:value {...$$restProps} />

package/dist/ui/form/FormSection.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-	import { slide } from 'svelte/transition'
-	import { mdiChevronRight } from '@mdi/js'
-	import { Icon } from '../icon/index.js'
-	type Props = { isActive?: boolean; class?: string; contentClass?: string }
-	type $$Props = Props &
-		({ isReducible: true; title: string } | { isReducible?: false; title?: string })
-
-	export let title = ''
-	export let isActive = false
-	export let isReducible = false
-
-	let klass = ''
-	export { klass as class }
-	export let contentClass = ''
-
-	function open() {
-		isActive = true
-	}
-	function toggle(event: Event) {
-		event.stopPropagation()
-		isActive = !isActive
-	}
-</script>
-
-<div>
-	{#if isReducible && isActive}
-		<div class="h-4" transition:slide></div>
-	{/if}
-
-	<section class="{klass} flex flex-col">
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			on:click={open}
-			on:keyup={open}
-			class="flex items-center gap-2 py-2
-				{isReducible && !isActive ? 'cursor-pointer rounded-lg hover:bg-base-200/40' : ''}
-			"
-			class:rounded-lg={!isActive}
-			class:border={isReducible && !isActive}
-		>
-			<slot name="title">
-				{#if isReducible || title}
-					<h2
-						class="title-md origin-left pl-1 transition-transform"
-						class:translate-x-4={isReducible && !isActive}
-						class:scale-105={isReducible && isActive}
-					>
-						{title}
-					</h2>
-				{/if}
-			</slot>
-			{#if isReducible}
-				<div class="grow"></div>
-				<button
-					type="button"
-					on:click={toggle}
-					class="btn btn-square btn-ghost btn-sm transition-transform"
-					class:-translate-x-2={isReducible && !isActive}
-				>
-					<Icon path={mdiChevronRight} class="transition-transform {isActive ? 'rotate-90' : ''}" />
-				</button>
-			{/if}
-		</div>
-
-		{#if !isReducible || isActive}
-			<div transition:slide|local={{ duration: 200 }} class="{contentClass} grow py-4">
-				<slot />
-			</div>
-		{:else}
-			<div class="hidden"><slot /></div>
-		{/if}
-	</section>
-
-	{#if isReducible && isActive}
-		<div class="h-8" transition:slide></div>
-	{/if}
-</div>

package/dist/ui/form/FormSection.svelte.d.ts

@@ -1,39 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FormSection: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    isActive?: boolean;
-    class?: string;
-    contentClass?: string;
-} & ({
-    isReducible: true;
-    title: string;
-} | {
-    isReducible?: false;
-    title?: string;
-}), {
-    title: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    title: {};
-    default: {};
-}, {}, string>;
-type FormSection = InstanceType<typeof FormSection>;
-export default FormSection;

package/dist/ui/form/form.d.ts

@@ -1,37 +0,0 @@
-import type { z } from 'zod';
-import type { ComponentProps } from 'svelte';
-import { type Writable } from 'svelte/store';
-import type { FormEventHandler } from 'svelte/elements';
-import { type FormInputsProps, type FormInputsType } from './formInput.js';
-import type FormSection from './FormSection.svelte';
-type Shape = z.ZodRawShape;
-type PickOne<T> = {
-    [P in keyof T]: Record<P, T[P]> & Partial<Record<Exclude<keyof T, P>, undefined>>;
-}[keyof T];
-export type Nullable<T> = {
-    [P in keyof T]?: T[P] | null;
-};
-export type BoolOrFunction<S extends Shape> = boolean | ((data: Nullable<FormDataInput<S>>) => unknown);
-export type FormDataInput<S extends Shape> = z.input<z.core.$ZodObject<S>>;
-export type FormField<S extends Shape> = {
-    key: string & keyof S;
-    /** number col used by field */
-    colSpan?: number;
-    /** hide field if true */
-    hide?: BoolOrFunction<S>;
-} & PickOne<FormInputsProps>;
-export type FormSectionProps<S extends Shape> = ComponentProps<FormSection> & {
-    /** hide group if true */
-    hide?: BoolOrFunction<S>;
-};
-export declare function initData<S extends Shape, Data extends FormDataInput<S> = FormDataInput<S>>(fields: FormField<S>[][]): Data;
-export declare function getFieldType<S extends Shape>(field: FormField<S>): FormInputsType;
-type HandleInputOptions<S extends Shape> = {
-    model?: S;
-    setError: (key: string, value: string) => void;
-};
-export declare function useHandleInput<S extends Shape>({ model, setError }: HandleInputOptions<S>): {
-    isDirty: Writable<boolean>;
-    handleInput: FormEventHandler<HTMLFormElement>;
-};
-export {};

package/dist/ui/form/form.js

@@ -1,57 +0,0 @@
-import debounce from 'debounce';
-import { writable } from 'svelte/store';
-import { formInputsType } from './formInput.js';
-export function initData(fields) {
-    // @ts-ignore
-    return fields.flat().reduce((acc, cur) => {
-        const inputType = getFieldType(cur);
-        // @ts-ignore
-        return { ...acc, [cur.key]: cur[inputType]?.value };
-    }, {});
-}
-export function getFieldType(field) {
-    const inputType = formInputsType.find((t) => field[t]);
-    if (!inputType)
-        return 'text';
-    return inputType;
-}
-export function useHandleInput({ model, setError }) {
-    const isDirty = writable(false);
-    const setErrorDebounced = debounce(setError, 1500);
-    return {
-        isDirty,
-        handleInput: ({ target }) => {
-            if (!target)
-                return;
-            if (!model)
-                return;
-            const { name } = target;
-            const value = getTypedValue(target);
-            if (value === undefined)
-                return;
-            if (name === undefined)
-                return;
-            if (!model[name])
-                return;
-            isDirty.set(true);
-            const res = model[name].safeParse(value);
-            if (res.success) {
-                setErrorDebounced.clear();
-                setError(name, '');
-            }
-            else {
-                setErrorDebounced(name, res.error.issues[0].message);
-            }
-        }
-    };
-}
-function getTypedValue(target) {
-    const { type, value, valueAsNumber, valueAsDate, checked } = target;
-    const typeMapValue = {
-        number: valueAsNumber,
-        date: valueAsDate,
-        text: value,
-        checkbox: checked
-    };
-    return typeMapValue[type] ?? value;
-}

package/dist/ui/form/formInput.js

@@ -1,33 +0,0 @@
-import InputText from '../input/InputText.svelte';
-import InputTextarea from '../input/InputTextarea.svelte';
-import InputBoolean from '../input/InputBoolean.svelte';
-import InputDate from '../input/InputDate.svelte';
-import InputDatetime from '../input/InputDateTime.svelte';
-import InputNumber from '../input/InputNumber.svelte';
-import InputPassword from '../input/InputPassword.svelte';
-import InputRadio from '../input/InputRadio.svelte';
-import InputSelect from '../input/InputSelect.svelte';
-import InputRelation from '../input/InputRelation.svelte';
-import InputRelations from '../input/InputRelations.svelte';
-import InputTextRich from '../input/textRich/InputTextRich.svelte';
-export const formInputs = {
-    text: InputText,
-    textarea: InputTextarea,
-    textrich: InputTextRich,
-    boolean: InputBoolean,
-    date: InputDate,
-    datetime: InputDatetime,
-    number: InputNumber,
-    password: InputPassword,
-    select: InputSelect,
-    radio: InputRadio,
-    relation: InputRelation,
-    relations: InputRelations
-};
-export const formInputsType = Object.keys(formInputs);
-export function relationProps(props) {
-    return props;
-}
-export function relationsProps(props) {
-    return props;
-}

package/dist/ui/form/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Input } from './FormInput.svelte';
-export { default as Form } from './Form.svelte';
-export * from './formInput.js';

package/dist/ui/form/index.js

@@ -1,3 +0,0 @@
-export { default as Input } from './FormInput.svelte';
-export { default as Form } from './Form.svelte';
-export * from './formInput.js';

package/dist/ui/icon/Icon.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import { tippy, type TippyProps, type TippyInstance } from '../../utils/tippy.js'
-	import { onMount, type Snippet } from 'svelte'
-
-	export let path: string | Snippet
-	export let title = ''
-	export let size = 22
-	let klass = ''
-	export { klass as class }
-	export let style = ''
-	export let classSVG = ''
-	export let tippyProps: Partial<TippyProps> = {}
-	export let disableTitlePropagation = false
-	const viewWidth = 24
-	const viewHeight = 24
-
-	let icon: HTMLElement
-
-	let tip: TippyInstance | null = null
-	$: tip?.setContent(title)
-
-	onMount(() => {
-		if (!title) return
-		const parent = icon.parentElement
-		const isButton = parent?.tagName === 'BUTTON' || parent?.tagName === 'A'
-		const target = parent && isButton && !disableTitlePropagation ? parent : icon
-		tip = tippy(target || icon, {
-			content: title,
-			trigger: 'mouseenter',
-			...tippyProps
-		})
-		return () => {
-			tip?.destroy()
-		}
-	})
-</script>
-
-<i bind:this={icon} class="fill-base-content grid place-content-center {klass}" {style}>
-	{#if typeof path === 'string'}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width={size}
-			height={size}
-			viewBox={`0 0 ${viewWidth} ${viewHeight}`}
-			style="display: inline-block;"
-			class={classSVG}
-		>
-			<path d={path} />
-		</svg>
-	{:else}
-		{@render path()}
-	{/if}
-</i>

package/dist/ui/icon/Icon.svelte.d.ts

@@ -1,29 +0,0 @@
-import { type TippyProps } from '../../utils/tippy.js';
-import { type Snippet } from 'svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Icon: $$__sveltets_2_IsomorphicComponent<{
-    path: string | Snippet;
-    title?: string;
-    size?: number;
-    class?: string;
-    style?: string;
-    classSVG?: string;
-    tippyProps?: Partial<TippyProps>;
-    disableTitlePropagation?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Icon = InstanceType<typeof Icon>;
-export default Icon;

package/dist/ui/icon/index.d.ts

@@ -1 +0,0 @@
-export { default as Icon } from './Icon.svelte';

package/dist/ui/icon/index.js

@@ -1 +0,0 @@
-export { default as Icon } from './Icon.svelte';

package/dist/ui/input/FormControl.svelte

@@ -1,77 +0,0 @@
-<script lang="ts">
-	import { slide } from 'svelte/transition'
-	import { onMount, type Snippet } from 'svelte'
-	import { formContext } from '../../validation/form.js'
-
-	let klass = ''
-	export { klass as class }
-	export let classLabel = ''
-	export let key = ''
-	export let label: Snippet | string = ''
-	export let labelAppend: Snippet | null = null
-	export let error = ''
-	export let hint = ''
-	export let prefix: string | number = ''
-	export let prefixFor: string | number = ''
-	export let enhanceDisabled = false
-	export let labelPosition: LabelPosition = 'top'
-	export let children: Snippet<[{ key: string }]> | undefined = undefined
-
-	type LabelPosition = 'top' | 'left' | 'right'
-
-	$: _key = prefix && key ? `${prefix}_${key}` : key || ''
-
-	if (!enhanceDisabled) {
-		const { setError } = formContext.get()
-		setError[key] = (err) => (error = err)
-	}
-
-	let formControl: HTMLDivElement
-	onMount(() => {
-		const input = formControl.querySelector('input, textarea')
-		if (!input) return
-		const handleInput = () => (error = '')
-		input.addEventListener('input', handleInput)
-		return () => {
-			input.removeEventListener('input', handleInput)
-		}
-	})
-</script>
-
-<div class="form-control {klass}" bind:this={formControl}>
-	<div
-		class:contents={labelPosition === 'top'}
-		class:flex={labelPosition !== 'top'}
-		class:items-center={labelPosition !== 'top'}
-		class:gap-2={labelPosition !== 'top'}
-		class:flex-row-reverse={labelPosition === 'right'}
-		class:justify-end={labelPosition === 'right'}
-	>
-		{#if label}
-			<label for="{prefixFor}{_key}" class="label block cursor-pointer {classLabel}">
-				<span class="py-1.5 text-xs font-extrabold">
-					{#if typeof label === 'string'}
-						{label}
-					{:else}
-						{@render label()}
-					{/if}
-				</span>
-				{#if labelAppend}
-					{@render labelAppend()}
-				{/if}
-			</label>
-		{/if}
-	</div>
-
-	{@render children?.({ key: _key })}
-
-	{#if error}
-		<div transition:slide>
-			<span class="text-warning text-xs">{error}</span>
-		</div>
-	{:else if hint}
-		<div transition:slide>
-			<span class="text-neutral text-xs">{hint}</span>
-		</div>
-	{/if}
-</div>