fuma 1.0.10 → 1.0.12

package/README.md

@@ -25,7 +25,7 @@ px prisma init --datasource-provider mysql
 mkdir -p ./src/lib/server
 source="https://raw.githubusercontent.com/peufo/fuma/main"
 curl "$source/prisma/schema.prisma" -o ./prisma/schema.prisma
-curl "$source/src/lib/private/prisma.ts" -o ./src/lib/server/prisma.ts
+curl "$source/src/lib/server/prisma.ts" -o ./src/lib/server/prisma.ts
 
 echo "DATABASE_URL=\"mysql://$mysql_username@localhost:3306/$project_name\"" > .env
 cp .env .env.example

package/dist/action/list/index.d.ts

@@ -1,8 +1,6 @@
-import { mouseDragTrigger, touchDragTrigger, scrollTrigger } from './trigger.js';
 export declare const CLASSNAME_LIST = "editable-list";
 export declare const CLASSNAME_DRAG_ACTIVE = "drag-active";
 export declare const CLASSNAME_PLACEHOLDER = "item-placeholder";
-export { mouseDragTrigger, touchDragTrigger, scrollTrigger };
 export interface ListEditableOptions<Type = unknown> {
     onDragStart?: () => void;
     onDragMove?: () => void;

package/dist/action/list/index.js

@@ -3,7 +3,6 @@ import { mouseDragTrigger, touchDragTrigger, scrollTrigger } from './trigger.js'
 export const CLASSNAME_LIST = 'editable-list';
 export const CLASSNAME_DRAG_ACTIVE = 'drag-active';
 export const CLASSNAME_PLACEHOLDER = 'item-placeholder';
-export { mouseDragTrigger, touchDragTrigger, scrollTrigger };
 export function listEditable(node, options = {}) {
     const { dragElementsSelector } = options;
     node.classList.add(CLASSNAME_LIST);

package/dist/action/list/trigger.d.ts

@@ -1,11 +1,6 @@
 import type { DragHandler } from './handlers.js';
-type Handler = {
-    start: (event: MouseEvent) => unknown;
-    move: (event: MouseEvent) => unknown;
-    end: (event: MouseEvent) => unknown;
-};
 /** Gestion du cycle de vie des évènements de la souris */
-export declare function mouseDragTrigger(element: HTMLElement, handler: Handler): {
+export declare function mouseDragTrigger(element: HTMLElement, handler: DragHandler): {
     destroy(): void;
 };
 /** Gestion du cycle de vie des évènements de l'écran tactile */
@@ -15,4 +10,3 @@ export declare function touchDragTrigger(element: HTMLElement, handler: DragHand
 export declare function scrollTrigger(handler: DragHandler, scrollContainer: Element): {
     destroy(): void;
 };
-export {};

package/dist/action/list/trigger.js

@@ -6,9 +6,9 @@ export function mouseDragTrigger(element, handler) {
         document.addEventListener('mousemove', handler.move);
         document.addEventListener('mouseup', endHandler, { once: true });
     }
-    function endHandler(event) {
+    function endHandler() {
         document.removeEventListener('mousemove', handler.move);
-        handler.end(event);
+        handler.end();
     }
     function stopPropagation(event) {
         event.stopPropagation();

package/dist/ui/button/ButtonCopy.svelte

@@ -5,8 +5,11 @@
 	let valueOrGetValue: string | (() => Promise<string>)
 	export { valueOrGetValue as value }
 	export let title = ''
+	export let label = ''
 	export let icon = mdiClipboardTextOutline
 	export let successMessage = 'Copied'
+	let klass = ''
+	export { klass as class }
 
 	let isLoading = false
 
@@ -33,10 +36,10 @@
 
 <div class="relative">
 	{#if isLoading}
-		<span class="loading loading-spinner absolute left-1 top-1 scale-125 opacity-25"></span>
+		<span class="loading loading-spinner absolute left-1 top-1 scale-125 opacity-25" />
 	{/if}
 	<button
-		class="btn btn-square btn-sm"
+		class="{klass} btn btn-sm {label ? '' : 'btn-square'}"
 		on:click|preventDefault={handleClick}
 		class:btn-disabled={isLoading}
 	>
@@ -46,5 +49,8 @@
 			{title}
 			class="transition-transform {isLoading ? 'scale-75' : ''}"
 		/>
+		{#if label}
+			<span>{label}</span>
+		{/if}
 	</button>
 </div>

package/dist/ui/button/ButtonCopy.svelte.d.ts

@@ -3,8 +3,10 @@ declare const __propDef: {
     props: {
         value: string | (() => Promise<string>);
         title?: string | undefined;
+        label?: string | undefined;
         icon?: string | undefined;
         successMessage?: string | undefined;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/ui/drawer/Drawer.svelte

@@ -54,7 +54,7 @@
 		transition:fade={{ duration }}
 		style="z-index: {zIndex + $index};"
 		class="fixed inset-0 bg-black/15 backdrop-blur-[1.5px] dark:bg-white/15"
-	></div>
+	/>
 {/if}
 
 {#if $isActive}

package/dist/ui/form/Form.svelte

@@ -41,7 +41,6 @@
 	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
@@ -116,12 +115,12 @@
 	use:enhance
 	on:input={handleInput}
 >
-	<slot />
-
 	{#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)}
@@ -156,12 +155,12 @@
 			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>
+		<button class="btn btn-primary"> Valider </button>
+		<div class="grow" />
 		{#if !simpleAction && data.id && actionDelete}
 			{@const formaction = `${action}${actionDelete}`}
 			<slot name="delete" {formaction}>
-				<ButtonDelete {formaction} {disabled}>Supprimer</ButtonDelete>
+				<ButtonDelete {formaction}>Supprimer</ButtonDelete>
 			</slot>
 		{/if}
 	</div>

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

@@ -15,7 +15,6 @@ declare class __sveltets_Render<Shape extends z.ZodRawShape, ReturnData extends
         actionCreate?: string | undefined;
         actionDelete?: string | undefined;
         actionUpdate?: string | undefined;
-        disabled?: boolean | undefined;
         /** Ignore actionCreate, actionDelete and actionUpdate */ simpleAction?: boolean | undefined;
         options?: UseFormOptions<ReturnData> | undefined;
         data?: Nullable<Data> | undefined;

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

@@ -42,11 +42,9 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                     children?: import("svelte").Snippet<[]> | undefined;
                 } | undefined;
                 flatMode?: boolean | undefined;
-                noSlotItemWrapper?: boolean | undefined;
-                slotItem: import("svelte").Snippet<[any]>;
-                slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
+                slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                 input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
-                append?: import("svelte").Snippet<[]> | undefined;
                 class?: string | undefined;
                 classList?: string | undefined;
                 clear?: (() => Promise<void>) | undefined;
@@ -67,10 +65,9 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                 error?: string | undefined;
                 placeholder?: string | undefined;
                 flatMode?: boolean | undefined;
-                slotItem: import("svelte").Snippet<[any]>;
-                slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
+                slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                 input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
-                append?: import("svelte").Snippet<[]> | undefined;
                 class?: string | undefined;
                 classList?: string | undefined;
                 value?: any[] | null | undefined;
@@ -123,11 +120,9 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                         children?: import("svelte").Snippet<[]> | undefined;
                     } | undefined;
                     flatMode?: boolean | undefined;
-                    noSlotItemWrapper?: boolean | undefined;
-                    slotItem: import("svelte").Snippet<[any]>;
-                    slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
+                    slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                     input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
-                    append?: import("svelte").Snippet<[]> | undefined;
                     class?: string | undefined;
                     classList?: string | undefined;
                     clear?: (() => Promise<void>) | undefined;
@@ -148,10 +143,9 @@ declare class __sveltets_Render<InputType extends FormInputsType> {
                     error?: string | undefined;
                     placeholder?: string | undefined;
                     flatMode?: boolean | undefined;
-                    slotItem: import("svelte").Snippet<[any]>;
-                    slotSuggestion?: import("svelte").Snippet<[any]> | undefined;
+                    slotItem?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
+                    slotSuggestion?: ((item: any) => string | import("../../index.js").ComponentAndProps) | null | undefined;
                     input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
-                    append?: import("svelte").Snippet<[]> | undefined;
                     class?: string | undefined;
                     classList?: string | undefined;
                     value?: any[] | null | undefined;

package/dist/ui/form/FormSection.svelte

@@ -51,7 +51,7 @@
 				{/if}
 			</slot>
 			{#if isReducible}
-				<div class="grow"></div>
+				<div class="grow" />
 				<button
 					type="button"
 					on:click={toggle}

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

@@ -63,11 +63,9 @@ export declare function relationProps<Item extends {
         children?: import("svelte").Snippet<[]> | undefined;
     } | undefined;
     flatMode?: boolean | undefined;
-    noSlotItemWrapper?: boolean | undefined;
-    slotItem: import("svelte").Snippet<[Item]>;
-    slotSuggestion?: import("svelte").Snippet<[Item]> | undefined;
+    slotItem?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
+    slotSuggestion?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
     input?: import("svelte/elements").HTMLInputAttributes | undefined;
-    append?: import("svelte").Snippet<[]> | undefined;
     class?: string | undefined;
     classList?: string | undefined;
     clear?: (() => Promise<void>) | undefined;
@@ -84,10 +82,9 @@ export declare function relationsProps<Item extends {
     error?: string | undefined;
     placeholder?: string | undefined;
     flatMode?: boolean | undefined;
-    slotItem: import("svelte").Snippet<[Item]>;
-    slotSuggestion?: import("svelte").Snippet<[Item]> | undefined;
+    slotItem?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
+    slotSuggestion?: ((item: Item) => string | import("../..").ComponentAndProps) | null | undefined;
     input?: import("svelte/elements").HTMLInputAttributes | undefined;
-    append?: import("svelte").Snippet<[]> | undefined;
     class?: string | undefined;
     classList?: string | undefined;
     value?: Item[] | null | undefined;

package/dist/ui/index.d.ts

@@ -11,6 +11,7 @@ export * from './dialog/index.js';
 export * from './placeholder/index.js';
 export * from './icon/index.js';
 export * from './login/index.js';
+export * from './slot/index.js';
 export * from './pagination/index.js';
 export * from './mode/index.js';
 export * from './badge/index.js';

package/dist/ui/index.js

@@ -11,6 +11,7 @@ export * from './dialog/index.js';
 export * from './placeholder/index.js';
 export * from './icon/index.js';
 export * from './login/index.js';
+export * from './slot/index.js';
 export * from './pagination/index.js';
 export * from './mode/index.js';
 export * from './badge/index.js';

package/dist/ui/input/FormControl.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition'
-	import { onMount, type Snippet } from 'svelte'
+	import { onMount, type ComponentType } from 'svelte'
 	import { formContext } from '../../validation/form.js'
+	import type { ComponentAndProps } from '../../utils/index.js'
+	import { Slot } from '../index.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 label: ComponentAndProps | ComponentType | string = ''
 	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'
 
@@ -50,20 +50,14 @@
 		{#if label}
 			<label for="{prefixFor}{_key}" class="label cursor-pointer {classLabel}">
 				<span class="label-text">
-					{#if typeof label === 'string'}
-						{label}
-					{:else}
-						{@render label()}
-					{/if}
+					<Slot slot={label} />
 				</span>
-				{#if labelAppend}
-					{@render labelAppend()}
-				{/if}
+				<slot name="label_append" />
 			</label>
 		{/if}
-	</div>
 
-	{@render children?.({ key: _key })}
+		<slot key={_key} />
+	</div>
 
 	{#if error}
 		<label for="{prefixFor}{_key}" class="label" transition:slide>

package/dist/ui/input/FormControl.svelte.d.ts

@@ -1,26 +1,31 @@
 import { SvelteComponent } from "svelte";
-import { type Snippet } from 'svelte';
+import { type ComponentType } from 'svelte';
+import type { ComponentAndProps } from '../../utils/index.js';
 declare const __propDef: {
     props: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | Snippet<[]> | undefined;
-        labelAppend?: Snippet<[]> | null | undefined;
+        label?: string | ComponentType | ComponentAndProps | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
         labelPosition?: ("top" | "left" | "right") | undefined;
-        children?: Snippet<[{
+        children?: import("svelte").Snippet<[{
             key: string;
         }]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        label_append: {};
+        default: {
+            key: string;
+        };
+    };
 };
 export type FormControlProps = typeof __propDef.props;
 export type FormControlEvents = typeof __propDef.events;

package/dist/ui/input/InputBoolean.svelte

@@ -13,21 +13,19 @@
 	const dispatch = createEventDispatcher<{ change: boolean }>()
 </script>
 
-<FormControl {...$$restProps} class="">
-	{#snippet children({ key })}
-		<input
-			bind:this={inputElement}
-			bind:checked={value}
-			use:bindCheckedWithParams={{ bindEnable: bindWithParams }}
-			on:input={({ currentTarget: { checked } }) => dispatch('change', checked)}
-			on:focus
-			on:blur
-			type="checkbox"
-			id={key}
-			class="checkbox ml-1"
-			{...input}
-		/>
+<FormControl {...$$restProps} let:key class="">
+	<input
+		bind:this={inputElement}
+		bind:checked={value}
+		use:bindCheckedWithParams={{ bindEnable: bindWithParams }}
+		on:input={({ currentTarget: { checked } }) => dispatch('change', checked)}
+		on:focus
+		on:blur
+		type="checkbox"
+		id={key}
+		class="checkbox ml-1"
+		{...input}
+	/>
 
-		<input type="hidden" name={key} value="{USE_COERCE_BOOLEAN}{value}" />
-	{/snippet}
+	<input type="hidden" name={key} value="{USE_COERCE_BOOLEAN}{value}" />
 </FormControl>

package/dist/ui/input/InputBoolean.svelte.d.ts

@@ -5,8 +5,7 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").Snippet<[]> | undefined;
-        labelAppend?: import("svelte").Snippet<[]> | null | undefined;
+        label?: string | import("svelte").ComponentType | import("../../index.js").ComponentAndProps | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;

package/dist/ui/input/InputCheckboxs.svelte

@@ -34,25 +34,24 @@
 		{#each _options as option, index}
 			<FormControl
 				{...props}
+				let:key
 				label={option.label}
 				prefixFor={index}
 				class="flex-row-reverse items-center justify-end gap-2"
 			>
-				{#snippet children({ key })}
-					<input
-						bind:group={value}
-						on:change
-						on:input
-						on:focus
-						on:blur
-						value={option.value}
-						type="checkbox"
-						name={key}
-						id="{index}{key}"
-						class="checkbox"
-						{...input}
-					/>
-				{/snippet}
+				<input
+					bind:group={value}
+					on:change
+					on:input
+					on:focus
+					on:blur
+					value={option.value}
+					type="checkbox"
+					name={key}
+					id="{index}{key}"
+					class="checkbox"
+					{...input}
+				/>
 			</FormControl>
 		{/each}
 	</div>

package/dist/ui/input/InputCheckboxs.svelte.d.ts

@@ -5,8 +5,7 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").Snippet<[]> | undefined;
-        labelAppend?: import("svelte").Snippet<[]> | null | undefined;
+        label?: string | import("svelte").ComponentType | import("../../index.js").ComponentAndProps | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;

package/dist/ui/input/InputCheckboxsMenu.svelte

@@ -81,23 +81,22 @@
 		{#each _options as option, index (option.value)}
 			<FormControl
 				{...props}
+				let:key
 				label={option.label}
 				prefixFor={index}
 				class="flex-row-reverse items-center justify-end gap-2 whitespace-nowrap"
 			>
-				{#snippet children({ key })}
-					<input
-						bind:group={value}
-						on:input
-						on:focus
-						on:blur
-						value={option.value}
-						type="checkbox"
-						id="{index}{key}"
-						class="checkbox"
-						{...input}
-					/>
-				{/snippet}
+				<input
+					bind:group={value}
+					on:input
+					on:focus
+					on:blur
+					value={option.value}
+					type="checkbox"
+					id="{index}{key}"
+					class="checkbox"
+					{...input}
+				/>
 			</FormControl>
 		{:else}
 			<div class="px-3 py-2 rounded opacity-70">Aucun élément</div>

package/dist/ui/input/InputCheckboxsMenu.svelte.d.ts

@@ -5,8 +5,7 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").Snippet<[]> | undefined;
-        labelAppend?: import("svelte").Snippet<[]> | null | undefined;
+        label?: string | import("svelte").ComponentType | import("../../utils/index.js").ComponentAndProps | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;

package/dist/ui/input/InputCheckboxsTreeNodes.svelte

@@ -51,7 +51,7 @@
 					<div
 						style:height="{24 + index * 36}px"
 						class="t-0 bordered absolute w-3 rounded-bl-lg border-b-2 border-l-2"
-					></div>
+					/>
 				{/each}
 			</div>
 			<div>

package/dist/ui/input/InputCombo.svelte

@@ -45,41 +45,39 @@
 
 <DropDown {tippyProps}>
 	<div class="contents" slot="activator">
-		<FormControl {...props}>
-			{#snippet children({ key })}
-				<div class="flex grow gap-2" class:hidden={selectedOption}>
-					<div class="relative flex grow items-center gap-2">
-						<input
-							type="text"
-							id={key}
-							bind:this={inputElement}
-							bind:value={searchValue}
-							on:focus={() => filterOptions('')}
-							on:blur={() => (searchValue = '')}
-							on:input={(e) => filterOptions(e.currentTarget.value)}
-							autocomplete="off"
-							class="input input-bordered grow {inputClass || {}}"
-							{...inputProps}
-						/>
-					</div>
-					<slot name="append" />
+		<FormControl {...props} let:key>
+			<div class="flex grow gap-2" class:hidden={selectedOption}>
+				<div class="relative flex grow items-center gap-2">
+					<input
+						type="text"
+						id={key}
+						bind:this={inputElement}
+						bind:value={searchValue}
+						on:focus={() => filterOptions('')}
+						on:blur={() => (searchValue = '')}
+						on:input={(e) => filterOptions(e.currentTarget.value)}
+						autocomplete="off"
+						class="input input-bordered grow {inputClass || {}}"
+						{...inputProps}
+					/>
 				</div>
+				<slot name="append" />
+			</div>
 
-				{#if selectedOption}
-					<button
-						type="button"
-						class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2"
-						on:click={clear}
-						on:focus={clear}
-					>
-						{#if selectedOption.icon}
-							<Icon path={selectedOption.icon} size={21} class="opacity-70" />
-						{/if}
-						<span>{selectedOption.label}</span>
-					</button>
-					<input type="hidden" name={key} value={selectedOption.value} />
-				{/if}
-			{/snippet}
+			{#if selectedOption}
+				<button
+					type="button"
+					class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2"
+					on:click={clear}
+					on:focus={clear}
+				>
+					{#if selectedOption.icon}
+						<Icon path={selectedOption.icon} size={21} class="opacity-70" />
+					{/if}
+					<span>{selectedOption.label}</span>
+				</button>
+				<input type="hidden" name={key} value={selectedOption.value} />
+			{/if}
 		</FormControl>
 	</div>
 

package/dist/ui/input/InputCombo.svelte.d.ts

@@ -8,8 +8,7 @@ declare const __propDef: {
         class?: string | undefined;
         classLabel?: string | undefined;
         key?: string | undefined;
-        label?: string | import("svelte").Snippet<[]> | undefined;
-        labelAppend?: import("svelte").Snippet<[]> | null | undefined;
+        label?: string | import("svelte").ComponentType | import("../..").ComponentAndProps | undefined;
         error?: string | undefined;
         hint?: string | undefined;
         prefix?: string | number | undefined;

package/dist/ui/input/InputDate.svelte

@@ -22,19 +22,17 @@
 	}
 </script>
 
-<FormControl {...$$restProps}>
-	{#snippet children({ key })}
-		<input
-			value={value && dayjs(value).format('YYYY-MM-DD')}
-			on:input={handleInput}
-			on:focus
-			on:blur
-			type="date"
-			id={key}
-			class="input input-bordered {inputClass}"
-			{...inputProps}
-		/>
+<FormControl {...$$restProps} let:key>
+	<input
+		value={value && dayjs(value).format('YYYY-MM-DD')}
+		on:input={handleInput}
+		on:focus
+		on:blur
+		type="date"
+		id={key}
+		class="input input-bordered {inputClass}"
+		{...inputProps}
+	/>
 
-		<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
-	{/snippet}
+	<input type="hidden" name={key} value="{USE_COERCE_DATE}{value?.toJSON()}" />
 </FormControl>