From 62d998b4f82b0bc65bbed21117637b2dc8bc2698 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 29 Jul 2022 15:06:01 +0200
Subject: [PATCH 01/23] feat: poc for email native error handling

---
 src/lib/elements/forms/form.svelte            |  2 +-
 src/lib/elements/forms/inputEmail.svelte      | 19 +++-
 .../[project]/users/user/[user]/index.svelte  | 91 ++++++++-----------
 3 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index aae39a36e..4abbd5d98 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -1,3 +1,3 @@
-<form class="form" on:submit|preventDefault>
+<form class="form common-section" on:invalid={(e) => console.log(e)} on:submit|preventDefault>
     <slot />
 </form>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index c5bbd4f73..f8370ebcc 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,6 +11,10 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
+    export let errorMessage = 'Your email should be formatted as: name@example.com';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -19,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -35,4 +49,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index c7cf5a401..27082a32e 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -5,11 +5,11 @@
     import { Pill } from '$lib/elements';
     import {
         Button,
+        Form,
         InputText,
         InputEmail,
         InputPassword,
-        InputPhone,
-        Helper
+        InputPhone
     } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -25,10 +25,8 @@
             arePrefsDisabled = false;
         }
     }
+
     let showDelete = false;
-    let showError: false | 'name' | 'email' | 'phone' | 'password' = false;
-    let errorMessage = 'Something went wrong';
-    let errorType: 'error' | 'warning' | 'success' = 'error';
     let userName: string = null,
         userEmail: string = null,
         userPhone: string = null,
@@ -50,12 +48,6 @@
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
 
-    function addError(location: typeof showError, message: string, type: typeof errorType) {
-        showError = location;
-        errorMessage = message;
-        errorType = type;
-    }
-
     async function updateVerificationEmail() {
         try {
             await sdkForProject.users.updateEmailVerification($user.$id, !$user.emailVerification);
@@ -109,52 +101,60 @@
         try {
             await sdkForProject.users.updateName($user.$id, userName);
             $user.name = userName;
-            showError = false;
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('name', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
     async function updateEmail() {
         try {
             await sdkForProject.users.updateEmail($user.$id, userEmail);
             $user.email = userEmail;
-            showError = false;
             addNotification({
                 message: 'Email has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('email', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
     async function updatePhone() {
         try {
             await sdkForProject.users.updatePhone($user.$id, userPhone);
             $user.phone = userPhone;
-            showError = false;
             addNotification({
                 message: 'Phone has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('phone', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
     async function updatePassword() {
         try {
             await sdkForProject.users.updatePassword($user.$id, newPassword);
             newPassword = null;
-            showError = false;
             addNotification({
                 message: 'Password has been updated',
                 type: 'success'
             });
         } catch (error) {
-            addError('password', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
 
@@ -283,9 +283,6 @@
                         placeholder="Enter name"
                         autocomplete={false}
                         bind:value={userName} />
-                    {#if showError === 'name'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
                 </ul>
             </svelte:fragment>
 
@@ -297,30 +294,28 @@
                     }}>Update</Button>
             </svelte:fragment>
         </CardGrid>
-        <CardGrid>
-            <h6 class="heading-level-7">Update Email</h6>
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputEmail
-                        id="email"
-                        label="Email"
-                        placeholder="Enter email"
-                        autocomplete={false}
-                        bind:value={userEmail} />
-                    {#if showError === 'email'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
-                </ul>
-            </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={userEmail === $user.email || !userEmail}
-                    on:click={() => {
-                        updateEmail();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+        <Form on:submit={updateEmail}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Email</h6>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputEmail
+                            id="email"
+                            label="Email"
+                            placeholder="Enter email"
+                            autocomplete={false}
+                            bind:value={userEmail} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={userEmail === $user.email || !userEmail} submit
+                        >Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
         <CardGrid>
             <h6 class="heading-level-7">Update Phone</h6>
             <svelte:fragment slot="aside">
@@ -331,9 +326,6 @@
                         placeholder="Enter phone number"
                         autocomplete={false}
                         bind:value={userPhone} />
-                    {#if showError === 'phone'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
                 </ul>
             </svelte:fragment>
 
@@ -363,9 +355,6 @@
                         meter={false}
                         showPasswordButton={true}
                         bind:value={newPassword} />
-                    {#if showError === 'password'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
                 </ul>
             </svelte:fragment>
 

From 3ed1463a42b8a11db5df5efcfc0b92c5eea7ffcf Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 10:42:36 +0200
Subject: [PATCH 02/23] feat: add helpers to inputs

---
 src/lib/elements/forms/helper.svelte        | 12 +++++++++---
 src/lib/elements/forms/inputEmail.svelte    |  1 -
 src/lib/elements/forms/inputNumber.svelte   | 18 +++++++++++++++++-
 src/lib/elements/forms/inputPassword.svelte | 18 +++++++++++++++++-
 src/lib/elements/forms/inputPhone.svelte    | 18 +++++++++++++++++-
 src/lib/elements/forms/inputText.svelte     | 18 +++++++++++++++++-
 src/lib/elements/forms/inputTextarea.svelte | 18 +++++++++++++++++-
 7 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index b79019a53..c60baab65 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-    export let type: false | 'success' | 'warning' | 'error' = 'warning';
+    export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 
     let icon = '';
     switch (type) {
+        case 'neutral':
+            icon = 'info';
+            break;
+        case 'info':
+            icon = 'info';
+            break;
         case 'success':
             icon = 'check-circle';
             break;
@@ -20,11 +26,11 @@
     }
 </script>
 
-<li class={`helper u-${type} u-margin-block-start-8"`}>
+<p class={`helper u-${type} u-margin-block-start-12"`}>
     {#if icon !== ''}
         <span class={`icon-${icon}`} aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />
     </span>
-</li>
+</p>
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index f8370ebcc..b935ecc76 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -13,7 +13,6 @@
     export let autocomplete = false;
     export let errorMessage = 'Your email should be formatted as: name@example.com';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-
     export let showHelper = false;
 
     let element: HTMLInputElement;
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 589296360..f6d3691b9 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 5140ca435..7a69e54e4 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let id: string;
     export let label: string;
@@ -13,6 +13,9 @@
     export let meter = true;
     export let autocomplete = false;
     export let showPasswordButton = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
     let showInPlainText = false;
@@ -23,6 +26,14 @@
         }
     });
 
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
     $: strength = value ? value.length * 10 : 0;
 </script>
 
@@ -31,6 +42,7 @@
     <div class="input-text-wrapper">
         {#if showInPlainText}
             <input
+                on:invalid={handleInvalid}
                 type="text"
                 {id}
                 name={id}
@@ -43,6 +55,7 @@
                 bind:this={element} />
         {:else}
             <input
+                on:invalid={handleInvalid}
                 {id}
                 {placeholder}
                 {disabled}
@@ -77,4 +90,7 @@
             </button>
         {/if}
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index e0b2dfaf1..d8a0665cc 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index f106c6a91..826d02a92 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -12,6 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLInputElement;
 
@@ -20,12 +23,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -37,4 +50,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 7c892d234..6d084346e 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,6 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let maxlength: number = null;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let element: HTMLTextAreaElement;
 
@@ -19,12 +22,22 @@
             element.focus();
         }
     });
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <textarea
+            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -34,4 +47,7 @@
             bind:value
             bind:this={element} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>

From cd9d4ade86fda01b2c4be619afb8a2255b64fae5 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 11:36:57 +0200
Subject: [PATCH 03/23] feat: moved functions to on:submit in user screen

---
 src/lib/elements/forms/inputPhone.svelte      |   2 +-
 .../[project]/users/user/[user]/index.svelte  | 277 +++++++++---------
 2 files changed, 140 insertions(+), 139 deletions(-)

diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index d8a0665cc..dca033d6a 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -12,7 +12,7 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
+    export let errorMessage = 'Allowed characters: leading ‘+’ and maximum of 15 digits';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index be7c115a3..2d685b872 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -263,28 +263,27 @@
                 {/if}
             </svelte:fragment>
         </CardGrid>
-        <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
 
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="Enter name"
-                        autocomplete={false}
-                        bind:value={userName} />
-                </ul>
-            </svelte:fragment>
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={userName === $user.name || !userName}
-                    on:click={() => {
-                        updateName();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            placeholder="Enter name"
+                            autocomplete={false}
+                            bind:value={userName} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={userName === $user.name || !userName} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
         <Form on:submit={updateEmail}>
             <CardGrid>
@@ -307,126 +306,128 @@
             </CardGrid>
         </Form>
 
-        <CardGrid>
-            <h6 class="heading-level-7">Update Phone</h6>
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputPhone
-                        id="phone"
-                        label="Phone"
-                        placeholder="Enter phone number"
-                        autocomplete={false}
-                        bind:value={userPhone} />
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={userPhone === $user.phone || !userPhone}
-                    on:click={() => {
-                        updatePhone();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <div>
-                <h6 class="heading-level-7">Update Password</h6>
-            </div>
-
-            <p>
-                Enter a new password. A password must contain <b> at least 8 characters.</b>
-            </p>
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputPassword
-                        id="newPassword"
-                        label="New Password"
-                        placeholder="Enter new password"
-                        autocomplete={false}
-                        meter={false}
-                        showPasswordButton={true}
-                        bind:value={newPassword} />
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={!newPassword}
-                    on:click={() => {
-                        updatePassword();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-        <CardGrid>
-            <h6 class="heading-level-7">User Preferences</h6>
-            <p>
-                You can update your user preferences by storing information on the user's objects so
-                they can easily be shared across devices and sessions.
-            </p>
-            <svelte:fragment slot="aside">
-                <form class="form u-grid u-gap-16">
-                    <ul class="form-list">
-                        {#if prefs}
-                            {#each prefs as [key, value], index}
-                                <li class="form-item is-multiple">
-                                    <div class="form-item-part u-stretch">
-                                        <label class="label" for={`key-${index}`}>Key</label>
-                                        <div class="input-text-wrapper">
-                                            <input
-                                                id={`key-${key}`}
-                                                placeholder="Enter key"
-                                                type="text"
-                                                class="input-text"
-                                                bind:value={key} />
-                                        </div>
-                                    </div>
-                                    <div class="form-item-part u-stretch">
-                                        <label class="label" for={`value-${index}`}>Value</label>
-                                        <div class="input-text-wrapper">
-                                            <input
-                                                id={`value-${value}`}
-                                                placeholder="Enter value"
-                                                type="text"
-                                                class="input-text"
-                                                bind:value />
-                                        </div>
-                                    </div>
-                                    <div class="form-item-part u-cross-child-end">
-                                        <Button
-                                            text
-                                            disabled={(!key || !value) && index === 0}
-                                            on:click={() => {
-                                                if (index === 0) {
-                                                    prefs = [['', '']];
-                                                } else {
-                                                    prefs.splice(index, 1);
-                                                    prefs = prefs;
-                                                }
-                                            }}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </Button>
-                                    </div>
-                                </li>
-                            {/each}
-                        {/if}
+        <Form on:submit={updatePhone}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Phone</h6>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputPhone
+                            id="phone"
+                            label="Phone"
+                            placeholder="Enter phone number"
+                            autocomplete={false}
+                            bind:value={userPhone} />
                     </ul>
-                    <Button
-                        text
-                        on:click={() => {
-                            if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
-                                prefs.push(['', '']);
-                                prefs = prefs;
-                            }
-                        }}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Preference </span></Button>
-                </form>
-            </svelte:fragment>
+                </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button disabled={arePrefsDisabled} on:click={() => updatePrefs()}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="actions">
+                    <Button disabled={userPhone === $user.phone || !userPhone} submit
+                        >Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <Form on:submit={updatePassword}>
+            <CardGrid>
+                <div>
+                    <h6 class="heading-level-7">Update Password</h6>
+                </div>
+
+                <p>
+                    Enter a new password. A password must contain <b> at least 8 characters.</b>
+                </p>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputPassword
+                            id="newPassword"
+                            label="New Password"
+                            placeholder="Enter new password"
+                            autocomplete={false}
+                            meter={false}
+                            showPasswordButton={true}
+                            bind:value={newPassword} />
+                    </ul>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={!newPassword} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
+        <Form on:submit={updatePrefs}>
+            <CardGrid>
+                <h6 class="heading-level-7">User Preferences</h6>
+                <p>
+                    You can update your user preferences by storing information on the user's
+                    objects so they can easily be shared across devices and sessions.
+                </p>
+                <svelte:fragment slot="aside">
+                    <form class="form u-grid u-gap-16">
+                        <ul class="form-list">
+                            {#if prefs}
+                                {#each prefs as [key, value], index}
+                                    <li class="form-item is-multiple">
+                                        <div class="form-item-part u-stretch">
+                                            <label class="label" for={`key-${index}`}>Key</label>
+                                            <div class="input-text-wrapper">
+                                                <input
+                                                    id={`key-${key}`}
+                                                    placeholder="Enter key"
+                                                    type="text"
+                                                    class="input-text"
+                                                    bind:value={key} />
+                                            </div>
+                                        </div>
+                                        <div class="form-item-part u-stretch">
+                                            <label class="label" for={`value-${index}`}
+                                                >Value</label>
+                                            <div class="input-text-wrapper">
+                                                <input
+                                                    id={`value-${value}`}
+                                                    placeholder="Enter value"
+                                                    type="text"
+                                                    class="input-text"
+                                                    bind:value />
+                                            </div>
+                                        </div>
+                                        <div class="form-item-part u-cross-child-end">
+                                            <Button
+                                                text
+                                                disabled={(!key || !value) && index === 0}
+                                                on:click={() => {
+                                                    if (index === 0) {
+                                                        prefs = [['', '']];
+                                                    } else {
+                                                        prefs.splice(index, 1);
+                                                        prefs = prefs;
+                                                    }
+                                                }}>
+                                                <span class="icon-x" aria-hidden="true" />
+                                            </Button>
+                                        </div>
+                                    </li>
+                                {/each}
+                            {/if}
+                        </ul>
+                        <Button
+                            text
+                            on:click={() => {
+                                if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
+                                    prefs.push(['', '']);
+                                    prefs = prefs;
+                                }
+                            }}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text"> Add Preference </span></Button>
+                    </form>
+                </svelte:fragment>
+
+                <svelte:fragment slot="actions">
+                    <Button disabled={arePrefsDisabled} submit>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
         <CardGrid>
             <div>

From 07e8e635e6b1fec1248b58ba2be9783bef6d58da Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 14:29:56 +0200
Subject: [PATCH 04/23] feat: function works on:submit

---
 .../[project]/users/teams/[team]/index.svelte | 61 ++++++++-----------
 1 file changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte
index 57b1a3dc4..83ac0a25c 100644
--- a/src/routes/console/[project]/users/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/index.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Avatar, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { Button, InputText, Helper } from '$lib/elements/forms';
+    import { Button, InputText, Form } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
@@ -14,9 +14,6 @@
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
 
     let showDelete = false;
-    let showError: false | 'name' | 'email' | 'password' = false;
-    let errorMessage = 'Something went wrong';
-    let errorType: 'error' | 'warning' | 'success' = 'error';
     let teamName: string = null;
 
     onMount(async () => {
@@ -24,12 +21,6 @@
         teamName ??= $team.name;
     });
 
-    function addError(location: typeof showError, message: string, type: typeof errorType) {
-        showError = location;
-        errorMessage = message;
-        errorType = type;
-    }
-
     async function updateName() {
         try {
             await sdkForProject.teams.update($page.params.team, teamName);
@@ -40,7 +31,10 @@
                 type: 'success'
             });
         } catch (error) {
-            addError('name', error.message, 'error');
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
         }
     }
 </script>
@@ -62,31 +56,30 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+        <Form on:submit={updateName}>
+            <CardGrid>
+                <h6 class="heading-level-7">Update Name</h6>
 
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="Enter team name"
-                        autocomplete={false}
-                        bind:value={teamName} />
-                    {#if showError === 'name'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
-                </ul>
-            </svelte:fragment>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            placeholder="Enter team name"
+                            autocomplete={false}
+                            bind:value={teamName} />
+                    </ul>
+                </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={teamName === $team.name || !teamName}
-                    on:click={() => {
-                        updateName();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="actions">
+                    <Button
+                        disabled={teamName === $team.name || !teamName}
+                        on:click={() => {
+                            updateName();
+                        }}>Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
         <CardGrid>
             <div>

From 66e2153be651eee5eb85255588f7a3de89639dcc Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 14:31:17 +0200
Subject: [PATCH 05/23] refactor: notification for better control & fix error
 color

---
 src/lib/layout/notification.svelte | 36 ++++++++++++------------------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index 7b77e5d51..a5f8cbe35 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -6,37 +6,29 @@
     export let title: Notification['title'];
     export let buttons: Notification['buttons'];
 
-    let icon: string;
-    switch (type) {
-        case 'success':
-            icon = 'check-circle';
-            break;
-        case 'warning':
-            icon = 'exclamation';
-            break;
+    let icon = {
+        success: 'icon-check-circle',
+        warning: 'icon-exclamation',
+        error: 'icon-exclamation-circle',
+        info: 'icon-info'
+    };
 
-        case 'error':
-            icon = 'exclamation-circle';
-            break;
-
-        case 'info':
-            icon = 'info';
-            break;
-
-        default:
-            icon = '';
-            break;
-    }
+    let typeClass = {
+        success: 'is-success',
+        warning: 'is-warning',
+        error: 'is-danger',
+        info: 'is-info'
+    };
 
     const dispatch = createEventDispatcher();
 </script>
 
-<li class={`alert-sticky is-${type}`}>
+<li class={`alert-sticky ${type ? typeClass[type] : ''}`}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />
     </button>
     <div class="alert-sticky-image">
-        <span class={`icon-${icon}`} aria-hidden="true" />
+        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
     </div>
     <div class="alert-sticky-content">
         {#if title}

From ddb54372184b3c2e7e4b8363c05fe69b8f0e7411 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 15:05:39 +0200
Subject: [PATCH 06/23] refactor: switch statment

---
 src/lib/elements/forms/helper.svelte | 34 ++++++++--------------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index c60baab65..f8c99c523 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,34 +1,18 @@
 <script lang="ts">
     export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 
-    let icon = '';
-    switch (type) {
-        case 'neutral':
-            icon = 'info';
-            break;
-        case 'info':
-            icon = 'info';
-            break;
-        case 'success':
-            icon = 'check-circle';
-            break;
-        case 'warning':
-            icon = 'exclamation';
-            break;
-
-        case 'error':
-            icon = 'exclamation-circle';
-            break;
-
-        default:
-            icon = '';
-            break;
-    }
+    let icon = {
+        info: 'icon-info',
+        success: 'icon-check-circle',
+        warning: 'icon-exclamation',
+        error: 'icon-exclamation-circle',
+        neutral: 'icon-info'
+    };
 </script>
 
 <p class={`helper u-${type} u-margin-block-start-12"`}>
-    {#if icon !== ''}
-        <span class={`icon-${icon}`} aria-hidden="true" />
+    {#if type}
+        <span class={type ? icon[type] : ''} aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />

From 1d5e7272ded7857ef7ef59c33707eebec0d9b54c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 16:00:19 +0200
Subject: [PATCH 07/23] chore: remove console log

---
 src/lib/elements/forms/form.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/form.svelte b/src/lib/elements/forms/form.svelte
index 4abbd5d98..020eabd08 100644
--- a/src/lib/elements/forms/form.svelte
+++ b/src/lib/elements/forms/form.svelte
@@ -1,3 +1,3 @@
-<form class="form common-section" on:invalid={(e) => console.log(e)} on:submit|preventDefault>
+<form class="form common-section" on:submit|preventDefault>
     <slot />
 </form>

From 27d2b9fb4c3899f8e6b3893e7b8cb6c91935c5ae Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 16:00:40 +0200
Subject: [PATCH 08/23] feat: add helper to remaining inputs

---
 src/lib/elements/forms/inputCheckbox.svelte | 25 +++++++++++++++++--
 src/lib/elements/forms/inputRadio.svelte    | 27 +++++++++++++++++++--
 src/lib/elements/forms/inputSwitch.svelte   | 18 +++++++++++++-
 src/lib/elements/forms/inputTags.svelte     | 19 ++++++++++++---
 4 files changed, 81 insertions(+), 8 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index a132668de..fcc884faa 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -7,11 +7,32 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input {id} {disabled} {required} type="checkbox" bind:checked={value} />
+        <input
+            on:invalid={handleInvalid}
+            {id}
+            {disabled}
+            {required}
+            type="checkbox"
+            bind:checked={value} />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 2fa330bb5..54c174374 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -9,11 +9,34 @@
     export let name: string;
     export let required = false;
     export let disabled = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <div class="input-text-wrapper">
-        <input {id} {name} {disabled} {required} {value} type="radio" bind:group />
+        <input
+            on:invalid={handleInvalid}
+            {id}
+            {name}
+            {disabled}
+            {required}
+            {value}
+            type="radio"
+            bind:group />
         <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 38a6f2a40..aa181e333 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let id: string;
     export let value = false;
     export let required = false;
     export let disabled = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class="choice-item" for={id}>
         <div class="input-text-wrapper">
             <input
+                on:invalid={handleInvalid}
                 {id}
                 {disabled}
                 {required}
@@ -25,4 +38,7 @@
             <div class="choice-item-title">{label}</div>
         </div>
     </label>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index c3d208cd6..bee1b47e6 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let id: string;
     export let label: string;
@@ -9,6 +9,9 @@
     export let placeholder = '';
     export let helper = '';
     export let autofocus = false;
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
 
     let value = '';
     let element: HTMLInputElement;
@@ -48,6 +51,15 @@
     const removeValue = (value: string) => {
         tags = tags.filter((tag) => tag !== value);
     };
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
@@ -73,6 +85,7 @@
                 </ul>
             </div>
             <input
+                on:invalid={handleInvalid}
                 type="text"
                 class="tags-input-text"
                 {id}
@@ -83,7 +96,7 @@
                 bind:this={element} />
         </div>
     </div>
-    {#if helper}
-        <p class="helper u-margin-block-start-12">{helper}</p>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
     {/if}
 </FormItem>

From 4f8e12ee55ea50852a0b682a528996460ecfd3a0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 3 Aug 2022 17:14:23 +0200
Subject: [PATCH 09/23] feat: native error displayed, can overwrite native
 message

---
 src/lib/elements/forms/inputCheckbox.svelte |  5 ++++
 src/lib/elements/forms/inputEmail.svelte    |  7 ++++-
 src/lib/elements/forms/inputNumber.svelte   |  2 ++
 src/lib/elements/forms/inputPassword.svelte |  2 ++
 src/lib/elements/forms/inputPhone.svelte    |  2 ++
 src/lib/elements/forms/inputRadio.svelte    |  5 ++++
 src/lib/elements/forms/inputSelect.svelte   | 32 +++++++++++++++++++--
 src/lib/elements/forms/inputSwitch.svelte   |  5 ++++
 src/lib/elements/forms/inputTags.svelte     |  2 ++
 src/lib/elements/forms/inputText.svelte     |  2 ++
 src/lib/elements/forms/inputTextarea.svelte |  2 ++
 11 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index fcc884faa..44c373698 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -11,7 +11,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -26,6 +30,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {disabled}
             {required}
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index b935ecc76..1710d97df 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -11,7 +11,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let errorMessage = 'Your email should be formatted as: name@example.com';
+    export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
@@ -24,6 +24,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index f6d3691b9..37d6ac0cd 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 8bd134359..8553aebe1 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -27,6 +27,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index dca033d6a..78c66d3e2 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 54c174374..cf36a123a 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -13,7 +13,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -27,6 +31,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {name}
             {disabled}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 028c6342a..cd0113cf8 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,12 +11,37 @@
         value: string;
         label: string;
     }[];
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    let element: HTMLSelectElement;
+
+    const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
-        <select bind:value {id} {required} {disabled}>
+        <select
+            on:invalid={handleInvalid}
+            bind:this={element}
+            bind:value
+            {id}
+            {required}
+            {disabled}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
@@ -25,4 +50,7 @@
         </select>
         <span class="icon-cheveron-down" aria-hidden="true" />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index aa181e333..14595503b 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -10,7 +10,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -31,6 +35,7 @@
                 type="checkbox"
                 class="switch"
                 role="switch"
+                bind:this={element}
                 bind:checked={value}
                 on:change />
         </div>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index bee1b47e6..43c90ce71 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -53,6 +53,8 @@
     };
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 826d02a92..b53058b03 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 6d084346e..da0a15f81 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -24,6 +24,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };

From 308d0bbee9c85a851eafe40629e58c156907f076 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 13:22:21 +0200
Subject: [PATCH 10/23] fix: icon in alert

---
 src/lib/components/alert.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index ee90958e6..b227a6a6b 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -6,10 +6,24 @@
     export let type: '' | 'info' | 'success' | 'warning' | 'danger' = 'info';
     export let buttons: Buttons[] = [];
 
+    let icon = {
+        success: 'icon-check-circle',
+        warning: 'icon-exclamation',
+        error: 'icon-exclamation-circle',
+        info: 'icon-info'
+    };
+
+    let typeClass = {
+        success: 'is-success',
+        warning: 'is-warning',
+        error: 'is-danger',
+        info: 'is-info'
+    };
+
     const dispatch = createEventDispatcher();
 </script>
 
-<section class={`alert is-${type} `}>
+<section class={`alert ${type ? typeClass[type] : ''}`}>
     <div class="alert-grid">
         {#if dismissible}
             <button
@@ -19,7 +33,7 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
         {/if}
-        <span class="icon-info" aria-hidden="true" />
+        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
         <div class="content">
             {#if $$slots.title}
                 <h6 class="title">

From 70e4a42a9be73ecfa68db2ba8c9013e698ba5c0f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 13:22:54 +0200
Subject: [PATCH 11/23] feat: add error section to modals

---
 src/lib/components/modal.svelte                      | 12 ++++++++++++
 .../console/[project]/users/_createTeam.svelte       |  9 ++++-----
 .../console/[project]/users/_createUser.svelte       |  9 ++++-----
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 7843b7c91..3a1263411 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
+    import { Alert } from '$lib/components';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
+    export let error: string = null;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -76,6 +78,16 @@
                 </button>
             </header>
             <div class="modal-content">
+                {#if error}
+                    <Alert
+                        dismissible
+                        type="warning"
+                        on:dismiss={() => {
+                            error = null;
+                        }}>
+                        {error}
+                    </Alert>
+                {/if}
                 <slot />
             </div>
             <div class="modal-footer">
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index 307e24d39..f53aaaef0 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -12,6 +12,7 @@
 
     let name: string, id: string;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -25,10 +26,7 @@
             });
             dispatch('created', team);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -37,11 +35,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 086dca5f4..7f56bde87 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -19,6 +19,7 @@
 
     let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -32,10 +33,7 @@
             });
             dispatch('created', user);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -44,11 +42,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText

From 23382238e9beca364f4c838922c653819bb6a540 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 13:26:52 +0200
Subject: [PATCH 12/23] feat: add missing errors to modals

---
 src/routes/console/[project]/users/_appleOAuth.svelte  |  9 +++------
 src/routes/console/[project]/users/_auth0OAuth.svelte  |  9 +++------
 src/routes/console/[project]/users/_mainOAuth.svelte   | 10 ++++------
 .../console/[project]/users/_microsoftOAuth.svelte     | 10 ++++------
 src/routes/console/[project]/users/_oktaOAuth.svelte   | 10 ++++------
 5 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 157ce1900..4804311f1 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -9,7 +9,6 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
@@ -17,6 +16,7 @@
     export let provider: Provider;
 
     let { keyID, teamID, p8 } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -30,16 +30,13 @@
             );
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index ee16907db..f3dc7425a 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -9,7 +9,6 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
@@ -17,6 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -30,16 +30,13 @@
             );
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index 85677ab84..7429b7385 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -9,13 +9,14 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
     export let showModal = false;
     export let provider: Provider;
     const projectId = $page.params.project;
+    let modalError: string;
+
     const update = async () => {
         try {
             await sdkForConsole.projects.updateOAuth2(
@@ -26,16 +27,13 @@
             );
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 432e54569..73e1ae506 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -9,15 +9,16 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
     export let showModal = false;
     export let provider: Provider;
     let { clientSecret, tenantID } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
+
     const update = async () => {
         try {
             const secret = JSON.stringify({ clientSecret, tenantID });
@@ -30,16 +31,13 @@
 
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index 32bb06db6..ad34410d2 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -9,7 +9,6 @@
         Form,
         FormList
     } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
 
@@ -17,8 +16,10 @@
     export let provider: Provider;
 
     let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
+    let modalError: string;
 
     const projectId = $page.params.project;
+
     const update = async () => {
         try {
             const secret = JSON.stringify({ clientSecret, oktaDomain, authorizationServerId });
@@ -31,16 +32,13 @@
 
             showModal = false;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal size="big" bind:show={showModal}>
+    <Modal error={modalError} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>

From aa647291e6c4a840533319f1be843cddbe9f3b7d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 15:52:29 +0200
Subject: [PATCH 13/23] feat: add errors to missing modals

---
 src/routes/console/[project]/storage/_create.svelte   | 11 ++++-------
 .../[project]/storage/bucket/[bucket]/_create.svelte  | 10 ++++------
 .../users/teams/[team]/_createMembership.svelte       |  8 +++-----
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/routes/console/[project]/storage/_create.svelte b/src/routes/console/[project]/storage/_create.svelte
index 1e4511130..801526f5c 100644
--- a/src/routes/console/[project]/storage/_create.svelte
+++ b/src/routes/console/[project]/storage/_create.svelte
@@ -2,8 +2,6 @@
     import { Modal, InnerModal } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button, InputText, Form, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
 
@@ -14,6 +12,7 @@
     let name = '';
     let id: string = null;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -26,10 +25,7 @@
             showCreate = false;
             dispatch('created', bucket);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -38,11 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Bucket</svelte:fragment>
         <FormList>
             <InputText
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
index 790fba010..30f6aa42c 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
@@ -4,7 +4,6 @@
     import { Modal, Alert, InnerModal } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
     import { bucket } from './store';
@@ -21,6 +20,7 @@
     let write: string[] = [];
     let id: string = null;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -37,10 +37,7 @@
             uploader.addFile(file);
             dispatch('created');
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -76,6 +73,7 @@
         files = null;
         read = [];
         write = [];
+        modalError = null;
     }
 
     $: if (!showDropdown) {
@@ -86,7 +84,7 @@
 <input bind:files id="file" type="file" style="display: none" />
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal error={modalError} bind:show={showCreate}>
         <svelte:fragment slot="header">Upload File</svelte:fragment>
         <FormList>
             <div>
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
index b58a92960..53df2076f 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
@@ -12,6 +12,7 @@
     const dispatch = createEventDispatcher();
 
     let name: string, email: string, roles: [];
+    let modalError: string;
 
     const create = async () => {
         const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
@@ -33,16 +34,13 @@
             showCreate = false;
             dispatch('created', user);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 </script>
 
 <Form on:submit={create}>
-    <Modal bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Membership</svelte:fragment>
         <FormList>
             <InputEmail

From 0c8c17ca4421bfca7ce74680d42bda4ae9889fec Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 16:20:32 +0200
Subject: [PATCH 14/23] feat: add custom message, minlength, fix showpw submit

---
 src/lib/elements/forms/inputPassword.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 8553aebe1..d6ffcd128 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -16,6 +16,8 @@
     export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
+    export let minlength = 8;
+    export let maxlength: number;
 
     let element: HTMLInputElement;
     let showInPlainText = false;
@@ -28,7 +30,10 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        console.log(element.validity);
+        if (element.validity.tooShort) {
+            errorMessage = 'Password should contain at least 8 characters';
+        }
         event.preventDefault();
         showHelper = true;
     };
@@ -49,9 +54,10 @@
                 {id}
                 name={id}
                 {placeholder}
-                {required}
                 {disabled}
                 autocomplete={autocomplete ? 'on' : 'off'}
+                {minlength}
+                {maxlength}
                 class="input-text"
                 bind:value
                 bind:this={element} />
@@ -63,6 +69,8 @@
                 {disabled}
                 {required}
                 autocomplete={autocomplete ? 'on' : 'off'}
+                {minlength}
+                {maxlength}
                 type="password"
                 class="input-text"
                 bind:value
@@ -82,6 +90,7 @@
         {/if}
         {#if showPasswordButton}
             <button
+                type="button"
                 on:click={() => (showInPlainText = !showInPlainText)}
                 class="show-password-button"
                 aria-label="show password">

From 21e45d8ee8cd318ddfb85c30051a64c8535de805 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 9 Aug 2022 16:26:04 +0200
Subject: [PATCH 15/23] feat: add required custom message to inputs

---
 src/lib/elements/forms/inputCheckbox.svelte | 4 +++-
 src/lib/elements/forms/inputEmail.svelte    | 3 +++
 src/lib/elements/forms/inputNumber.svelte   | 4 ++++
 src/lib/elements/forms/inputPassword.svelte | 3 +++
 src/lib/elements/forms/inputPhone.svelte    | 4 +++-
 src/lib/elements/forms/inputRadio.svelte    | 4 +++-
 src/lib/elements/forms/inputSelect.svelte   | 4 ++--
 src/lib/elements/forms/inputSwitch.svelte   | 3 +++
 src/lib/elements/forms/inputTags.svelte     | 5 +++--
 src/lib/elements/forms/inputText.svelte     | 4 +++-
 src/lib/elements/forms/inputTextarea.svelte | 4 +++-
 11 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 44c373698..6e9e3c75a 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -15,7 +15,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 1710d97df..4b72f6d49 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -29,6 +29,9 @@
         if (element.validity.typeMismatch) {
             errorMessage = 'Your email should be formatted as: name@example.com';
         }
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 37d6ac0cd..511b8c89b 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -27,6 +27,10 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
 
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index d6ffcd128..aeb275d7f 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -31,6 +31,9 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
         console.log(element.validity);
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         if (element.validity.tooShort) {
             errorMessage = 'Password should contain at least 8 characters';
         }
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 78c66d3e2..9349e6373 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -26,7 +26,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index cf36a123a..8a00b6b68 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -17,7 +17,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index cd0113cf8..16f6935da 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -20,8 +20,8 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
 
-        if (element.validity.typeMismatch) {
-            errorMessage = 'Your email should be formatted as: name@example.com';
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
         }
         event.preventDefault();
         showHelper = true;
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 14595503b..df47d1720 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -15,6 +15,9 @@
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
 
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 43c90ce71..0f4e4b5b4 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -7,7 +7,6 @@
     export let showLabel = true;
     export let tags: string[] = [];
     export let placeholder = '';
-    export let helper = '';
     export let autofocus = false;
     export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
@@ -54,7 +53,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index b53058b03..1353a4175 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -26,7 +26,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index da0a15f81..e197e9802 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -25,7 +25,9 @@
 
     const handleInvalid = (event: Event) => {
         errorMessage = element.validationMessage;
-
+        if (element.validity.valueMissing) {
+            errorMessage = 'This field is required';
+        }
         event.preventDefault();
         showHelper = true;
     };

From f7c6a593a08b93e86dd7ee4f3e865dc7d5db2341 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 10:06:36 +0200
Subject: [PATCH 16/23] fix: svelte check issues

---
 src/lib/elements/forms/inputPassword.svelte                     | 2 +-
 .../[collection]/document/[document]/_document.svelte           | 2 --
 .../database/[database]/collection/[collection]/settings.svelte | 2 --
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index aeb275d7f..9c5433e7f 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -17,7 +17,7 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
     export let minlength = 8;
-    export let maxlength: number;
+    export let maxlength: number = null;
 
     let element: HTMLInputElement;
     let showInPlainText = false;
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index a72aa3ddf..12d6014fd 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -33,12 +33,10 @@
         id="read"
         label="Read Permissions"
         bind:tags={$doc.$read}
-        helper="Add 'role:all' for wildcard access"
         placeholder="User ID, Team ID or Role" />
     <InputTags
         id="write"
         label="Write Permissions"
         bind:tags={$doc.$write}
-        helper="Add 'role:all' for wildcard access"
         placeholder="User ID, Team ID or Role" />
 </Collapsible>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
index 3b2a6b879..cf8dab742 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/settings.svelte
@@ -64,13 +64,11 @@
                     bind:tags={$collection.$read}
                     label="Read Access"
                     id="read"
-                    helper="Add 'role:all' for wildcard access"
                     placeholder="User ID, Team ID or Role" />
                 <InputTags
                     bind:tags={$collection.$write}
                     label="Write Access"
                     id="read"
-                    helper="Add 'role:all' for wildcard access"
                     placeholder="User ID, Team ID or Role" />
             {/if}
             <InputRadio

From c12b134cdd67fe9da999bcbb552950fad5b2e243 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 13:07:44 +0200
Subject: [PATCH 17/23] fix: move prevent default to start of function

---
 src/lib/elements/forms/inputEmail.svelte    | 3 +--
 src/lib/elements/forms/inputNumber.svelte   | 4 ++--
 src/lib/elements/forms/inputPassword.svelte | 2 +-
 src/lib/elements/forms/inputPhone.svelte    | 2 +-
 src/lib/elements/forms/inputRadio.svelte    | 2 +-
 src/lib/elements/forms/inputSelect.svelte   | 2 +-
 src/lib/elements/forms/inputSwitch.svelte   | 2 +-
 src/lib/elements/forms/inputTags.svelte     | 2 +-
 src/lib/elements/forms/inputText.svelte     | 2 +-
 src/lib/elements/forms/inputTextarea.svelte | 2 +-
 10 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 4b72f6d49..9b07303d7 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -24,15 +24,14 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
-
         if (element.validity.typeMismatch) {
             errorMessage = 'Your email should be formatted as: name@example.com';
         }
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 511b8c89b..acf1453e6 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -25,13 +25,13 @@
     });
 
     const handleInvalid = (event: Event) => {
-        errorMessage = element.validationMessage;
+        event.preventDefault();
 
+        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
 
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 9c5433e7f..452834751 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -29,6 +29,7 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         console.log(element.validity);
         if (element.validity.valueMissing) {
@@ -37,7 +38,6 @@
         if (element.validity.tooShort) {
             errorMessage = 'Password should contain at least 8 characters';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 9349e6373..5fa512e5b 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -25,11 +25,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 8a00b6b68..681885ac1 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -16,11 +16,11 @@
     let element: HTMLInputElement;
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 16f6935da..6129cb11e 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -18,12 +18,12 @@
     let element: HTMLSelectElement;
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index df47d1720..1e395cbfb 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -13,12 +13,12 @@
     let element: HTMLInputElement;
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 0f4e4b5b4..a1d4e41e3 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -52,11 +52,11 @@
     };
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 1353a4175..5235c215c 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -25,11 +25,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index e197e9802..6d02c9675 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -24,11 +24,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        event.preventDefault();
         errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
             errorMessage = 'This field is required';
         }
-        event.preventDefault();
         showHelper = true;
     };
 

From ed20df9761196bd937f7eb6fd8e702f608463646 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 13:08:05 +0200
Subject: [PATCH 18/23] Update src/lib/elements/forms/helper.svelte

Co-authored-by: Torsten Dittmann <torsten.dittmann@googlemail.com>
---
 src/lib/elements/forms/helper.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index f8c99c523..8cb9d8b46 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -12,7 +12,7 @@
 
 <p class={`helper u-${type} u-margin-block-start-12"`}>
     {#if type}
-        <span class={type ? icon[type] : ''} aria-hidden="true" />
+        <span class={icon[type] ?? ''} aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />

From 15b51b08ee482367e0c58df9fceabcc26611b240 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 10 Aug 2022 13:21:03 +0200
Subject: [PATCH 19/23] refactor: use class directive for alert color

---
 src/lib/components/alert.svelte | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index b227a6a6b..f83488a7f 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -3,7 +3,7 @@
     import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
-    export let type: '' | 'info' | 'success' | 'warning' | 'danger' = 'info';
+    export let type: '' | 'info' | 'success' | 'warning' | 'error' = 'info';
     export let buttons: Buttons[] = [];
 
     let icon = {
@@ -13,17 +13,15 @@
         info: 'icon-info'
     };
 
-    let typeClass = {
-        success: 'is-success',
-        warning: 'is-warning',
-        error: 'is-danger',
-        info: 'is-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
-<section class={`alert ${type ? typeClass[type] : ''}`}>
+<section
+    class="alert"
+    class:is-success={type === 'success'}
+    class:is-warning={type === 'warning'}
+    class:is-danger={type === 'error'}
+    class:is-info={type === 'info'}>
     <div class="alert-grid">
         {#if dismissible}
             <button

From 37f244a8586ae2a55fa20e28a3555d25bd034267 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:10:36 +0200
Subject: [PATCH 20/23] fix by torsten

---
 src/lib/components/InnerModal.svelte          |  2 +-
 src/lib/components/alert.svelte               | 16 ++++----
 src/lib/components/modal.svelte               | 13 +++---
 src/lib/elements/forms/helper.svelte          | 26 +++++++-----
 src/lib/elements/forms/inputCheckbox.svelte   | 26 ++++++------
 src/lib/elements/forms/inputCustomId.svelte   |  2 +
 src/lib/elements/forms/inputEmail.svelte      | 25 ++++++-----
 src/lib/elements/forms/inputFile.svelte       |  2 +-
 src/lib/elements/forms/inputNumber.svelte     | 20 ++++-----
 src/lib/elements/forms/inputPassword.svelte   | 41 +++++++++----------
 src/lib/elements/forms/inputPhone.svelte      | 33 +++++++++------
 src/lib/elements/forms/inputRadio.svelte      | 23 +++++------
 src/lib/elements/forms/inputSearch.svelte     | 11 ++---
 src/lib/elements/forms/inputSelect.svelte     | 24 +++++------
 src/lib/elements/forms/inputSwitch.svelte     | 20 ++++-----
 src/lib/elements/forms/inputTags.svelte       | 27 ++++++------
 src/lib/elements/forms/inputText.svelte       | 22 +++++-----
 src/lib/elements/forms/inputTextarea.svelte   | 20 ++++-----
 src/lib/layout/notification.svelte            | 28 ++++++-------
 src/lib/layout/shell.svelte                   | 10 ++---
 .../console/[project]/storage/_create.svelte  | 29 +++++++------
 .../storage/bucket/[bucket]/_create.svelte    | 16 ++++----
 .../bucket/[bucket]/_deleteBucket.svelte      |  2 +-
 .../bucket/[bucket]/_deleteFile.svelte        |  2 +-
 .../[bucket]/file/[file]/_deleteFile.svelte   |  2 +-
 .../[project]/users/_appleOAuth.svelte        | 13 +++---
 .../[project]/users/_auth0OAuth.svelte        |  8 ++--
 .../[project]/users/_createTeam.svelte        | 15 +++----
 .../[project]/users/_createUser.svelte        | 28 +++++++------
 .../console/[project]/users/_mainOAuth.svelte | 10 +++--
 .../[project]/users/_microsoftOAuth.svelte    | 14 ++++---
 .../console/[project]/users/_oktaOAuth.svelte |  8 ++--
 .../teams/[team]/_createMembership.svelte     | 10 ++---
 .../teams/[team]/_deleteMembership.svelte     |  3 +-
 .../users/teams/[team]/_deleteTeam.svelte     |  2 +-
 .../user/[user]/_deleteAllMemberships.svelte  |  2 +-
 .../user/[user]/_deleteAllSessions.svelte     |  3 +-
 .../user/[user]/_deleteMembership.svelte      |  2 +-
 .../users/user/[user]/_deleteSession.svelte   |  2 +-
 .../users/user/[user]/_deleteUser.svelte      |  2 +-
 .../[project]/users/user/[user]/index.svelte  | 33 +++++++++------
 tests/unit/elements/inputPhone.test.ts        |  1 -
 vite.config.js                                |  2 +-
 43 files changed, 302 insertions(+), 298 deletions(-)

diff --git a/src/lib/components/InnerModal.svelte b/src/lib/components/InnerModal.svelte
index 5b59d4f1c..384880389 100644
--- a/src/lib/components/InnerModal.svelte
+++ b/src/lib/components/InnerModal.svelte
@@ -17,7 +17,7 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
             <p class="u-flex-basis-100-percent">
-                <slot />
+                <slot name="subtitle" />
             </p>
         </header>
         <div class="modal-content">
diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index f83488a7f..bf06d2c28 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -3,16 +3,9 @@
     import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
-    export let type: '' | 'info' | 'success' | 'warning' | 'error' = 'info';
+    export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
     export let buttons: Buttons[] = [];
 
-    let icon = {
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        info: 'icon-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
@@ -31,7 +24,12 @@
                 <span class="icon-x" aria-hidden="true" />
             </button>
         {/if}
-        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-check-circle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
+            class:icon-exclamation-circle={type === 'error'}
+            aria-hidden="true" />
         <div class="content">
             {#if $$slots.title}
                 <h6 class="title">
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 3a1263411..137463f0f 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { createEventDispatcher, onMount } from 'svelte';
+    import { browser } from '$app/env';
+    import { createEventDispatcher } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
     import { Alert } from '$lib/components';
 
@@ -7,11 +8,6 @@
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
-    let browser = false;
-    //TODO: explore other solutions compatible with testing library
-    onMount(() => {
-        browser = true;
-    });
 
     const dispatch = createEventDispatcher();
     const transitionFly: FlyParams = {
@@ -28,19 +24,20 @@
             closeModal();
         }
     };
-
     const handleBLur = (event: MouseEvent) => {
         const target: Partial<HTMLElement> = event.target;
         if (target.hasAttribute('data-curtain')) {
             closeModal();
         }
     };
-
     const closeModal = () => {
         show = false;
         dispatch('close');
     };
 
+    /**
+     * Workaround until https://github.com/sveltejs/svelte/issues/3105 is resolved.
+     */
     $: if (browser) {
         if (show) {
             document.body.classList.add('u-overflow-hidden');
diff --git a/src/lib/elements/forms/helper.svelte b/src/lib/elements/forms/helper.svelte
index 8cb9d8b46..52b662ee4 100644
--- a/src/lib/elements/forms/helper.svelte
+++ b/src/lib/elements/forms/helper.svelte
@@ -1,18 +1,22 @@
 <script lang="ts">
-    export let type: false | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
-
-    let icon = {
-        info: 'icon-info',
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        neutral: 'icon-info'
-    };
+    export let type: 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'warning';
 </script>
 
-<p class={`helper u-${type} u-margin-block-start-12"`}>
+<p
+    class="helper u-margin-block-start-12"
+    class:u-info={type === 'info'}
+    class:u-error={type === 'error'}
+    class:u-success={type === 'success'}
+    class:u-warning={type === 'warning'}
+    class:u-neutral={type === 'neutral'}>
     {#if type}
-        <span class={icon[type] ?? ''} aria-hidden="true" />
+        <span
+            class:icon-info={type === 'info'}
+            class:icon-error={type === 'error'}
+            class:icon-success={type === 'success'}
+            class:icon-warning={type === 'warning'}
+            class:icon-neutral={type === 'neutral'}
+            aria-hidden="true" />
     {/if}
     <span class="text">
         <slot />
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 6e9e3c75a..cecc2a441 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -7,23 +7,21 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
-        errorMessage = element.validationMessage;
-        if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
-        }
         event.preventDefault();
-        showHelper = true;
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -31,15 +29,15 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
-            bind:this={element}
             {id}
             {disabled}
             {required}
             type="checkbox"
-            bind:checked={value} />
+            bind:this={element}
+            bind:checked={value}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputCustomId.svelte b/src/lib/elements/forms/inputCustomId.svelte
index 2d30b8da4..09d43093e 100644
--- a/src/lib/elements/forms/inputCustomId.svelte
+++ b/src/lib/elements/forms/inputCustomId.svelte
@@ -7,9 +7,11 @@
     export let placeholder = '';
     export let required = false;
     export let autofocus = false;
+
     let element: HTMLInputElement;
     let unique = true;
     let bench = '';
+
     const toggle = async () => {
         unique = !unique;
         if (unique) {
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index 9b07303d7..1358a5202 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -11,11 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -25,18 +23,19 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
         if (element.validity.typeMismatch) {
-            errorMessage = 'Your email should be formatted as: name@example.com';
+            error = 'Your email should be formatted as: name@example.com';
+            return;
         }
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -44,18 +43,18 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
             {required}
-            autocomplete={autocomplete ? 'on' : 'off'}
             type="email"
             class="input-text"
+            autocomplete={autocomplete ? 'on' : 'off'}
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 545523e77..bb1431cd4 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -12,6 +12,6 @@
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
-        <input {id} {disabled} {required} bind:files type="file" />
+        <input {id} {disabled} {required} type="file" bind:files />
     </div>
 </FormItem>
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index acf1453e6..1aab304d5 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -12,11 +12,9 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -27,16 +25,16 @@
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
-        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
 
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -44,7 +42,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -54,9 +51,10 @@
             type="number"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 452834751..d1e0aa1fd 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -13,13 +13,11 @@
     export let meter = false;
     export let autocomplete = false;
     export let showPasswordButton = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
     export let minlength = 8;
     export let maxlength: number = null;
 
     let element: HTMLInputElement;
+    let error: string;
     let showInPlainText = false;
 
     onMount(() => {
@@ -30,21 +28,22 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
-        console.log(element.validity);
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
         if (element.validity.tooShort) {
-            errorMessage = 'Password should contain at least 8 characters';
+            error = 'Password should contain at least 8 characters';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
-    $: if (value) {
-        showHelper = false;
-    }
     $: strength = value ? value.length * 10 : 0;
+    $: if (value) {
+        error = null;
+    }
 </script>
 
 <FormItem>
@@ -52,32 +51,32 @@
     <div class="input-text-wrapper">
         {#if showInPlainText}
             <input
-                on:invalid={handleInvalid}
-                type="text"
                 {id}
-                name={id}
                 {placeholder}
                 {disabled}
-                autocomplete={autocomplete ? 'on' : 'off'}
                 {minlength}
                 {maxlength}
+                name={id}
+                type="text"
                 class="input-text"
+                autocomplete={autocomplete ? 'on' : 'off'}
                 bind:value
-                bind:this={element} />
+                bind:this={element}
+                on:invalid={handleInvalid} />
         {:else}
             <input
-                on:invalid={handleInvalid}
                 {id}
                 {placeholder}
                 {disabled}
                 {required}
-                autocomplete={autocomplete ? 'on' : 'off'}
                 {minlength}
                 {maxlength}
                 type="password"
                 class="input-text"
+                autocomplete={autocomplete ? 'on' : 'off'}
                 bind:value
-                bind:this={element} />
+                bind:this={element}
+                on:invalid={handleInvalid} />
         {/if}
 
         {#if meter}
@@ -104,7 +103,7 @@
             </button>
         {/if}
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index 5fa512e5b..47e331e79 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -12,11 +12,11 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'Allowed characters: leading ‘+’ and maximum of 15 digits';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
+
+    const pattern = String.raw`^\+?[1-9]\d{1,14}$`;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,15 +26,21 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
-        if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+
+        if (element.validity.patternMismatch) {
+            error = "Allowed characters: leading '+' and maximum of 15 digits";
+            return;
         }
-        showHelper = true;
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -42,19 +48,20 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
             {required}
             {maxlength}
+            {pattern}
+            type="text"
             autocomplete={autocomplete ? 'on' : 'off'}
-            type="tel"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 681885ac1..ac1734e0d 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -9,41 +9,40 @@
     export let name: string;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
 <FormItem>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
-            bind:this={element}
             {id}
             {name}
             {disabled}
             {required}
             {value}
             type="radio"
-            bind:group />
+            bind:group
+            bind:this={element}
+            on:invalid={handleInvalid} />
         <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index 5b3651c40..e1806d3d7 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -40,16 +40,11 @@
         {required}
         type="search"
         class="input-text"
-        on:input={valueChange}
-        bind:this={element} />
+        bind:this={element}
+        on:input={valueChange} />
     <span class="icon-search" aria-hidden="true" />
     {#if isWithEndButton && value}
-        <button
-            class="x-button"
-            aria-label="Clear search"
-            on:click={() => {
-                value = '';
-            }}>
+        <button class="x-button" aria-label="Clear search" on:click={() => (value = '')}>
             <span class="icon-x" aria-hidden="true" />
         </button>
     {/if}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 6129cb11e..ef96176c7 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -11,24 +11,22 @@
         value: string;
         label: string;
     }[];
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLSelectElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -36,12 +34,12 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
         <select
-            on:invalid={handleInvalid}
-            bind:this={element}
-            bind:value
             {id}
             {required}
-            {disabled}>
+            {disabled}
+            bind:this={element}
+            bind:value
+            on:invalid={handleInvalid}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
@@ -50,7 +48,7 @@
         </select>
         <span class="icon-cheveron-down" aria-hidden="true" />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 1e395cbfb..a4891363e 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -6,24 +6,22 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
 
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -31,7 +29,6 @@
     <label class="choice-item" for={id}>
         <div class="input-text-wrapper">
             <input
-                on:invalid={handleInvalid}
                 {id}
                 {disabled}
                 {required}
@@ -40,13 +37,14 @@
                 role="switch"
                 bind:this={element}
                 bind:checked={value}
-                on:change />
+                on:change
+                on:invalid={handleInvalid} />
         </div>
         <div class="choice-item-content">
             <div class="choice-item-title">{label}</div>
         </div>
     </label>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index a1d4e41e3..0ad75a294 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -8,12 +8,10 @@
     export let tags: string[] = [];
     export let placeholder = '';
     export let autofocus = false;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let value = '';
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -53,15 +51,16 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -88,18 +87,18 @@
                 </ul>
             </div>
             <input
-                on:invalid={handleInvalid}
-                type="text"
-                class="tags-input-text"
                 {id}
                 {placeholder}
+                type="text"
+                class="tags-input-text"
+                bind:value
+                bind:this={element}
                 on:keydown={handleInput}
                 on:blur={addValue}
-                bind:value
-                bind:this={element} />
+                on:invalid={handleInvalid} />
         </div>
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 5235c215c..013caca3f 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -12,11 +12,9 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLInputElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -26,15 +24,17 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
+
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -42,7 +42,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <input
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -52,9 +51,10 @@
             type="text"
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 6d02c9675..5736943e7 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -11,11 +11,9 @@
     export let disabled = false;
     export let autofocus = false;
     export let maxlength: number = null;
-    export let errorMessage = 'An error occurred';
-    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
-    export let showHelper = false;
 
     let element: HTMLTextAreaElement;
+    let error: string;
 
     onMount(() => {
         if (element && autofocus) {
@@ -25,15 +23,15 @@
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
-        errorMessage = element.validationMessage;
         if (element.validity.valueMissing) {
-            errorMessage = 'This field is required';
+            error = 'This field is required';
+            return;
         }
-        showHelper = true;
+        error = element.validationMessage;
     };
 
     $: if (value) {
-        showHelper = false;
+        error = null;
     }
 </script>
 
@@ -41,7 +39,6 @@
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="input-text-wrapper">
         <textarea
-            on:invalid={handleInvalid}
             {id}
             {placeholder}
             {disabled}
@@ -49,9 +46,10 @@
             {maxlength}
             class="input-text"
             bind:value
-            bind:this={element} />
+            bind:this={element}
+            on:invalid={handleInvalid} />
     </div>
-    {#if showHelper}
-        <Helper type={errorType}>{errorMessage}</Helper>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
diff --git a/src/lib/layout/notification.svelte b/src/lib/layout/notification.svelte
index a5f8cbe35..0cca8694d 100644
--- a/src/lib/layout/notification.svelte
+++ b/src/lib/layout/notification.svelte
@@ -6,29 +6,25 @@
     export let title: Notification['title'];
     export let buttons: Notification['buttons'];
 
-    let icon = {
-        success: 'icon-check-circle',
-        warning: 'icon-exclamation',
-        error: 'icon-exclamation-circle',
-        info: 'icon-info'
-    };
-
-    let typeClass = {
-        success: 'is-success',
-        warning: 'is-warning',
-        error: 'is-danger',
-        info: 'is-info'
-    };
-
     const dispatch = createEventDispatcher();
 </script>
 
-<li class={`alert-sticky ${type ? typeClass[type] : ''}`}>
+<li
+    class="alert-sticky"
+    class:is-success={type === 'success'}
+    class:is-warning={type === 'warning'}
+    class:is-error={type === 'error'}
+    class:is-info={type === 'info'}>
     <button class="x-button" aria-label="close alert" on:click={() => dispatch('dismiss')}>
         <span class="icon-x" aria-hidden="true" />
     </button>
     <div class="alert-sticky-image">
-        <span class={type ? icon[type] : 'icon-info'} aria-hidden="true" />
+        <span
+            class:icon-check-cirle={type === 'success'}
+            class:icon-exclamation={type === 'warning'}
+            class:icon-exclamation-circle={type === 'error'}
+            class:icon-info={type === 'info'}
+            aria-hidden="true" />
     </div>
     <div class="alert-sticky-content">
         {#if title}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 97ca79d1d..da74cd3eb 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -68,7 +68,7 @@
             class="icon-button is-no-desktop"
             aria-label="Open Menu"
             on:click={() => (isOpen = !isOpen)}>
-            <span class={isOpen ? 'icon-x' : 'icon-menu'} aria-hidden="true" />
+            <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
         </button>
         <slot name="header" />
     </header>
@@ -88,10 +88,10 @@
                 </h1>
                 {#if $copyData?.value}
                     <Copy value={$copyData.value}>
-                        <Pill button
-                            ><span
-                                class="icon-duplicate"
-                                aria-hidden="true" />{$copyData.text}</Pill>
+                        <Pill button>
+                            <span class="icon-duplicate" aria-hidden="true" />
+                            {$copyData.text}
+                        </Pill>
                     </Copy>
                 {/if}
             </svelte:fragment>
diff --git a/src/routes/console/[project]/storage/_create.svelte b/src/routes/console/[project]/storage/_create.svelte
index 801526f5c..f4b926da8 100644
--- a/src/routes/console/[project]/storage/_create.svelte
+++ b/src/routes/console/[project]/storage/_create.svelte
@@ -12,7 +12,7 @@
     let name = '';
     let id: string = null;
     let showDropdown = false;
-    let modalError: string;
+    let error: string;
 
     const create = async () => {
         try {
@@ -24,8 +24,8 @@
             name = null;
             showCreate = false;
             dispatch('created', bucket);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -34,12 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Bucket</svelte:fragment>
         <FormList>
             <InputText
@@ -52,15 +52,17 @@
 
             {#if !showDropdown}
                 <div>
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Bucket ID
-                        </span></Pill>
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" />
+                        <span class="text"> Bucket ID </span>
+                    </Pill>
                 </div>
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">Bucket ID</svelte:fragment>
-                    <p>Enter a custom bucket ID. Leave blank for a randomly generated one.</p>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom bucket ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
@@ -75,9 +77,10 @@
                                 <span
                                     class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                                     aria-hidden="true" />
-                                <span class="text u-line-height-1-5"
-                                    >Allowed characters: alphanumeric, hyphen, non-leading
-                                    underscore, period</span>
+                                <span class="text u-line-height-1-5">
+                                    Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period
+                                </span>
                             </div>
                         </div>
                     </svelte:fragment>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
index 30f6aa42c..38317a0af 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte
@@ -19,8 +19,8 @@
     let read: string[] = [];
     let write: string[] = [];
     let id: string = null;
+    let error: string;
     let showDropdown = false;
-    let modalError: string;
 
     const create = async () => {
         try {
@@ -36,8 +36,8 @@
             showDropdown = false;
             uploader.addFile(file);
             dispatch('created');
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -68,12 +68,10 @@
     }
 
     $: if (!showCreate) {
-        id = null;
+        id = files = error = null;
         list = new DataTransfer();
-        files = null;
         read = [];
         write = [];
-        modalError = null;
     }
 
     $: if (!showDropdown) {
@@ -84,7 +82,7 @@
 <input bind:files id="file" type="file" style="display: none" />
 
 <Form on:submit={create}>
-    <Modal error={modalError} bind:show={showCreate}>
+    <Modal {error} bind:show={showCreate}>
         <svelte:fragment slot="header">Upload File</svelte:fragment>
         <FormList>
             <div>
@@ -135,7 +133,9 @@
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">File ID</svelte:fragment>
-                    <p>Enter a custom file ID. Leave blank for a randomly generated one.</p>
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom file ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
index 550883a4b..a8e89db1c 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteBucket.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
         <p>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
index c05dbeb69..b21e98870 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteFile}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete File</svelte:fragment>
         <p>Are you sure you want to delete <b>{file.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
index b7276efbf..065012aec 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteFile}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete File</svelte:fragment>
         <p>Are you sure you want to delete <b>{$file.name}</b>?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/_appleOAuth.svelte b/src/routes/console/[project]/users/_appleOAuth.svelte
index 4804311f1..605a45405 100644
--- a/src/routes/console/[project]/users/_appleOAuth.svelte
+++ b/src/routes/console/[project]/users/_appleOAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { keyID, teamID, p8 } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -29,21 +29,22 @@
                 secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
                 To use {provider.name} authentication in your application, first fill in this form. For
                 more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
+                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                    visit the docs.
+                </a>
             </p>
             <InputSwitch
                 id="state"
diff --git a/src/routes/console/[project]/users/_auth0OAuth.svelte b/src/routes/console/[project]/users/_auth0OAuth.svelte
index f3dc7425a..179c58607 100644
--- a/src/routes/console/[project]/users/_auth0OAuth.svelte
+++ b/src/routes/console/[project]/users/_auth0OAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
     const update = async () => {
@@ -29,14 +29,14 @@
                 secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_createTeam.svelte b/src/routes/console/[project]/users/_createTeam.svelte
index f53aaaef0..109e91f92 100644
--- a/src/routes/console/[project]/users/_createTeam.svelte
+++ b/src/routes/console/[project]/users/_createTeam.svelte
@@ -10,9 +10,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, id: string;
+    let name: string, id: string, error: string;
     let showDropdown = false;
-    let modalError: string;
 
     const create = async () => {
         try {
@@ -25,8 +24,8 @@
                 message: `${team.name} has been created`
             });
             dispatch('created', team);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -35,12 +34,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText
@@ -59,7 +58,9 @@
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">Team ID</svelte:fragment>
-                    Enter a custom team ID. Leave blank for a randomly generated one.
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom team ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
diff --git a/src/routes/console/[project]/users/_createUser.svelte b/src/routes/console/[project]/users/_createUser.svelte
index 7f56bde87..8f33df69f 100644
--- a/src/routes/console/[project]/users/_createUser.svelte
+++ b/src/routes/console/[project]/users/_createUser.svelte
@@ -19,7 +19,7 @@
 
     let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
-    let modalError: string;
+    let error: string;
 
     const create = async () => {
         try {
@@ -32,8 +32,8 @@
                 message: `${user.name} has been created`
             });
             dispatch('created', user);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 
@@ -42,12 +42,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
-        modalError = null;
+        error = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText
@@ -72,15 +72,18 @@
 
             {#if !showDropdown}
                 <div>
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
                             User ID
-                        </span></Pill>
+                        </span>
+                    </Pill>
                 </div>
             {:else}
                 <InnerModal bind:show={showDropdown}>
                     <svelte:fragment slot="title">User ID</svelte:fragment>
-                    Enter a custom user ID. Leave blank for a randomly generated one.
+                    <svelte:fragment slot="subtitle">
+                        Enter a custom user ID. Leave blank for a randomly generated one.
+                    </svelte:fragment>
                     <svelte:fragment slot="content">
                         <div class="form">
                             <InputText
@@ -95,9 +98,10 @@
                                 <span
                                     class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                                     aria-hidden="true" />
-                                <span class="text u-line-height-1-5"
-                                    >Allowed characters: alphanumeric, hyphen, non-leading
-                                    underscore, period</span>
+                                <span class="text u-line-height-1-5">
+                                    Allowed characters: alphanumeric, hyphen, non-leading
+                                    underscore, period
+                                </span>
                             </div>
                         </div>
                     </svelte:fragment>
diff --git a/src/routes/console/[project]/users/_mainOAuth.svelte b/src/routes/console/[project]/users/_mainOAuth.svelte
index 7429b7385..c760a1fdb 100644
--- a/src/routes/console/[project]/users/_mainOAuth.svelte
+++ b/src/routes/console/[project]/users/_mainOAuth.svelte
@@ -14,8 +14,10 @@
 
     export let showModal = false;
     export let provider: Provider;
+
     const projectId = $page.params.project;
-    let modalError: string;
+
+    let error: string;
 
     const update = async () => {
         try {
@@ -26,14 +28,14 @@
                 provider.secret
             );
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/_microsoftOAuth.svelte b/src/routes/console/[project]/users/_microsoftOAuth.svelte
index 73e1ae506..d1e0a2938 100644
--- a/src/routes/console/[project]/users/_microsoftOAuth.svelte
+++ b/src/routes/console/[project]/users/_microsoftOAuth.svelte
@@ -14,8 +14,9 @@
 
     export let showModal = false;
     export let provider: Provider;
+
     let { clientSecret, tenantID } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
 
@@ -30,21 +31,22 @@
             );
 
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
                 To use {provider.name} authentication in your application, first fill in this form. For
                 more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
+                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                    visit the docs.
+                </a>
             </p>
             <InputSwitch
                 id="state"
diff --git a/src/routes/console/[project]/users/_oktaOAuth.svelte b/src/routes/console/[project]/users/_oktaOAuth.svelte
index ad34410d2..aa0ec1786 100644
--- a/src/routes/console/[project]/users/_oktaOAuth.svelte
+++ b/src/routes/console/[project]/users/_oktaOAuth.svelte
@@ -16,7 +16,7 @@
     export let provider: Provider;
 
     let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
-    let modalError: string;
+    let error: string;
 
     const projectId = $page.params.project;
 
@@ -31,14 +31,14 @@
             );
 
             showModal = false;
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={update}>
-    <Modal error={modalError} size="big" bind:show={showModal}>
+    <Modal {error} size="big" bind:show={showModal}>
         <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
         <FormList>
             <p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
index 53df2076f..d128d7b22 100644
--- a/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_createMembership.svelte
@@ -11,8 +11,8 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, email: string, roles: [];
-    let modalError: string;
+    let name: string, email: string, roles: string[];
+    let error: string;
 
     const create = async () => {
         const url = `${$page.url.origin}/console/${$page.params.project}/users/teams/${$page.params.team}/members`;
@@ -33,14 +33,14 @@
             roles = [];
             showCreate = false;
             dispatch('created', user);
-        } catch (error) {
-            modalError = error.message;
+        } catch ({ message }) {
+            error = message;
         }
     };
 </script>
 
 <Form on:submit={create}>
-    <Modal error={modalError} size="big" bind:show={showCreate}>
+    <Modal {error} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Membership</svelte:fragment>
         <FormList>
             <InputEmail
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
index 22c68152f..4551afd99 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteMembership.svelte
@@ -35,9 +35,8 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Member</svelte:fragment>
-
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
         </p>
diff --git a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
index 1b1a18398..dacd5e9d2 100644
--- a/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_deleteTeam.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteTeam}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Team</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
index f5c76479c..da8a539c3 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllMemberships.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <Form on:submit={deleteAllMemberships}>
-    <Modal warning={true} bind:show={showDeleteAll}>
+    <Modal bind:show={showDeleteAll} warning>
         <svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
 
         <p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
index 8905281b6..13ec19bad 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteAllSessions.svelte
@@ -26,9 +26,8 @@
 </script>
 
 <Form on:submit={deleteAllSessions}>
-    <Modal warning={true} bind:show={showDeleteAll}>
+    <Modal bind:show={showDeleteAll} warning>
         <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
-
         <p>
             Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
         </p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
index 4d5cf77f8..30e5f4a8b 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteMembership.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <Form on:submit={deleteMembership}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Member</svelte:fragment>
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
index ee2ca5781..b447e8f90 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteSession.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <Form on:submit={deleteSession}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
         <p>Are you sure you want to delete this session?</p>
diff --git a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
index 2b2d31892..ca9482f6f 100644
--- a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <Form on:submit={deleteUser}>
-    <Modal warning={true} bind:show={showDelete}>
+    <Modal bind:show={showDelete} warning>
         <svelte:fragment slot="header">Delete User</svelte:fragment>
         <p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
         <svelte:fragment slot="footer">
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index 2d685b872..0278da85f 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -228,7 +228,8 @@
                     text={$user.status}
                     secondary={!$user.status}
                     on:click={() => updateStatus()}
-                    >{$user.status ? 'Block account' : 'Unblock account'}</Button>
+                    >{$user.status ? 'Block account' : 'Unblock account'}
+                </Button>
                 {#if $user.status}
                     {#if $user.phone && $user.email}
                         <DropList
@@ -244,12 +245,16 @@
                                 {$user.emailVerification ? 'Unverify' : 'Verify'} account
                             </Button>
                             <svelte:fragment slot="list">
-                                <DropListItem icon="mail" on:click={() => updateVerificationEmail()}
-                                    >{$user.emailVerification ? 'Unverify' : 'Verify'} email</DropListItem>
+                                <DropListItem
+                                    icon="mail"
+                                    on:click={() => updateVerificationEmail()}>
+                                    {$user.emailVerification ? 'Unverify' : 'Verify'} email
+                                </DropListItem>
                                 <DropListItem
                                     icon="phone"
                                     on:click={() => updateVerificationPhone()}>
-                                    {$user.phoneVerification ? 'Unverify' : 'Verify'} phone</DropListItem>
+                                    {$user.phoneVerification ? 'Unverify' : 'Verify'} phone
+                                </DropListItem>
                             </svelte:fragment>
                         </DropList>
                     {:else if !$user.phone}
@@ -300,8 +305,9 @@
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
-                    <Button disabled={userEmail === $user.email || !userEmail} submit
-                        >Update</Button>
+                    <Button disabled={userEmail === $user.email || !userEmail} submit>
+                        Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -321,8 +327,9 @@
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
-                    <Button disabled={userPhone === $user.phone || !userPhone} submit
-                        >Update</Button>
+                    <Button disabled={userPhone === $user.phone || !userPhone} submit>
+                        Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -334,7 +341,7 @@
                 </div>
 
                 <p>
-                    Enter a new password. A password must contain <b> at least 8 characters.</b>
+                    Enter a new password. A password must contain <b>at least 8 characters.</b>
                 </p>
                 <svelte:fragment slot="aside">
                     <ul>
@@ -380,8 +387,9 @@
                                             </div>
                                         </div>
                                         <div class="form-item-part u-stretch">
-                                            <label class="label" for={`value-${index}`}
-                                                >Value</label>
+                                            <label class="label" for={`value-${index}`}>
+                                                Value
+                                            </label>
                                             <div class="input-text-wrapper">
                                                 <input
                                                     id={`value-${value}`}
@@ -419,7 +427,8 @@
                                 }
                             }}>
                             <span class="icon-plus" aria-hidden="true" />
-                            <span class="text"> Add Preference </span></Button>
+                            <span class="text">Add Preference</span>
+                        </Button>
                     </form>
                 </svelte:fragment>
 
diff --git a/tests/unit/elements/inputPhone.test.ts b/tests/unit/elements/inputPhone.test.ts
index ff180f4d8..f5370b119 100644
--- a/tests/unit/elements/inputPhone.test.ts
+++ b/tests/unit/elements/inputPhone.test.ts
@@ -9,7 +9,6 @@ test('shows phone input', () => {
 
     expect(getByText('input')).toBeInTheDocument();
     expect(input).toBeInTheDocument();
-    expect(input).toHaveAttribute('type', 'tel');
 });
 
 test('shows phone input - required', () => {
diff --git a/vite.config.js b/vite.config.js
index 8c3afb766..2c66ac739 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -19,7 +19,7 @@ const config = {
         include: ['tests/**/*.test.ts'],
         globals: true,
         environment: 'jsdom',
-        thread: true
+        threads: true
     }
 };
 

From f0d3b4ed657d47c738c4413b4bc9c829b4e3c5b3 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:21:08 +0200
Subject: [PATCH 21/23] update packages

---
 package-lock.json | 1016 +++++++++++++++++++--------------------------
 package.json      |   25 +-
 2 files changed, 450 insertions(+), 591 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d3cfe055..6fd99f61c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,38 +15,44 @@
                 "tippy.js": "^6.3.7"
             },
             "devDependencies": {
-                "@playwright/test": "^1.24.0",
-                "@sveltejs/adapter-auto": "1.0.0-next.63",
-                "@sveltejs/kit": "1.0.0-next.390",
+                "@playwright/test": "^1.25.0",
+                "@sveltejs/adapter-auto": "1.0.0-next.64",
+                "@sveltejs/kit": "1.0.0-next.405",
                 "@sveltejs/vite-plugin-svelte": "^1.0.1",
-                "@testing-library/dom": "^8.16.0",
-                "@testing-library/jest-dom": "^5.16.4",
+                "@testing-library/dom": "^8.17.1",
+                "@testing-library/jest-dom": "^5.16.5",
                 "@testing-library/svelte": "^3.1.3",
                 "@testing-library/user-event": "^14.3.0",
                 "@types/gtag.js": "^0.0.10",
-                "@typescript-eslint/eslint-plugin": "^5.30.7",
-                "@typescript-eslint/parser": "^5.30.7",
-                "@vitest/ui": "^0.18.1",
-                "eslint": "^8.20.0",
+                "@typescript-eslint/eslint-plugin": "^5.33.1",
+                "@typescript-eslint/parser": "^5.33.1",
+                "@vitest/ui": "^0.22.0",
+                "eslint": "^8.22.0",
                 "eslint-config-prettier": "^8.5.0",
                 "eslint-plugin-svelte3": "^4.0.0",
                 "pre-commit": "^1.2.2",
                 "prettier": "^2.7.1",
                 "prettier-plugin-svelte": "^2.7.0",
-                "sass": "^1.53.0",
+                "sass": "^1.54.4",
                 "svelte": "^3.49.0",
                 "svelte-check": "^2.8.0",
                 "svelte-jester": "^2.3.2",
                 "svelte-preprocess": "^4.10.7",
                 "tslib": "^2.4.0",
                 "typescript": "^4.7.4",
-                "vite": "^3.0.0",
-                "vitest": "^0.18.1"
+                "vite": "^3.0.8",
+                "vitest": "^0.22.0"
             },
             "engines": {
                 "node": ">=16"
             }
         },
+        "node_modules/@adobe/css-tools": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+            "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+            "dev": true
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@@ -736,9 +742,9 @@
             }
         },
         "node_modules/@humanwhocodes/config-array": {
-            "version": "0.9.3",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
-            "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==",
+            "version": "0.10.4",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
+            "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
             "dev": true,
             "dependencies": {
                 "@humanwhocodes/object-schema": "^1.2.1",
@@ -749,6 +755,16 @@
                 "node": ">=10.10.0"
             }
         },
+        "node_modules/@humanwhocodes/gitignore-to-minimatch": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+            "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+            "dev": true,
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
         "node_modules/@humanwhocodes/object-schema": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
@@ -1241,13 +1257,13 @@
             }
         },
         "node_modules/@playwright/test": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.24.0.tgz",
-            "integrity": "sha512-sZLH2N6aWN9TtG+vMjNSomSfX0dSVHwWE+GhHQPV+ZeGcuZ/6CgMCGFuGjobgq/hNF9ZkuVOjeyoceZ0owKnHQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.25.0.tgz",
+            "integrity": "sha512-j4EZhTTQI3dBeWblE21EV//swwmBtOpIrLdOIJIRv4uqsLdHgBg1z+JtTg+AeC5o2bAXIE26kDNW5A0TimG8Bg==",
             "dev": true,
             "dependencies": {
                 "@types/node": "*",
-                "playwright-core": "1.24.0"
+                "playwright-core": "1.25.0"
             },
             "bin": {
                 "playwright": "cli.js"
@@ -1311,20 +1327,20 @@
             }
         },
         "node_modules/@sveltejs/adapter-auto": {
-            "version": "1.0.0-next.63",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.63.tgz",
-            "integrity": "sha512-9KguXwROEJMyyoKrsizAilVSmtfWxEDn2Hbxk44SP8Kj5cgN7tFCxzbL2kmmqyV1CO1tOh5iNC2oWbyTfikXmw==",
+            "version": "1.0.0-next.64",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.64.tgz",
+            "integrity": "sha512-Q8DwcS6wl1GovzS9JJzaD/WL/Lfk1ur4nAF1HtmsUvZDpsPBVDqnK2AhYU4G3oFNiuHstrjAogMy5th8ptSFGw==",
             "dev": true,
             "dependencies": {
-                "@sveltejs/adapter-cloudflare": "1.0.0-next.30",
-                "@sveltejs/adapter-netlify": "1.0.0-next.70",
-                "@sveltejs/adapter-vercel": "1.0.0-next.65"
+                "@sveltejs/adapter-cloudflare": "1.0.0-next.31",
+                "@sveltejs/adapter-netlify": "1.0.0-next.71",
+                "@sveltejs/adapter-vercel": "1.0.0-next.66"
             }
         },
         "node_modules/@sveltejs/adapter-cloudflare": {
-            "version": "1.0.0-next.30",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.30.tgz",
-            "integrity": "sha512-jIclgb58n3Uoo8TTudXSa7wmLP7Rn/ESLQS+zOUe0xsti5DG/eDhELTnSvkoSa2lJY21ym5rej/GSERRyeuBVw==",
+            "version": "1.0.0-next.31",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.31.tgz",
+            "integrity": "sha512-HhEFZP72GJ8AZGgFECKIiayDcLaAWi65pI0AnBfiNhCifYSlH/mPNWNVD4AWRDnXnH6XU+FLwhGDnIDwytTyYg==",
             "dev": true,
             "dependencies": {
                 "@cloudflare/workers-types": "^3.14.0",
@@ -1333,9 +1349,9 @@
             }
         },
         "node_modules/@sveltejs/adapter-netlify": {
-            "version": "1.0.0-next.70",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.70.tgz",
-            "integrity": "sha512-lIXY6KIgIFBz4+mdvilx9Ny8oFV7T2iVTKLirJayoI/SqPWGAcxklvWvjGfS4QT8rS9pWKDaKRUQM4M/gl8LlA==",
+            "version": "1.0.0-next.71",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.71.tgz",
+            "integrity": "sha512-la1CGtWO1xul1L3zEoFAoc4EX2uxZjrZcOMS3tkKB8drxhbQsNbnTE6fmSSMFiZXhxaikczrBgQwqIaDkLTmZg==",
             "dev": true,
             "dependencies": {
                 "@iarna/toml": "^2.2.5",
@@ -1345,24 +1361,26 @@
             }
         },
         "node_modules/@sveltejs/adapter-vercel": {
-            "version": "1.0.0-next.65",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.65.tgz",
-            "integrity": "sha512-RV3HL7Ic7pGgIoBSHPwN1pBX96Km1X683oHImPHAKX9h/WOvJZ3bY5+IWNRcR8tx9rPB5gfMRg+msvPSBr3RVw==",
+            "version": "1.0.0-next.66",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.66.tgz",
+            "integrity": "sha512-s3Hcxu9nCG/rR3C3cFbdQGjTa5W4K2kRcc6S5Xefx7itbrw+4v3KpO8ZPB6qM55XDwVxuG7260NMHVI6MUGmSA==",
             "dev": true,
             "dependencies": {
-                "@vercel/nft": "^0.20.0",
+                "@vercel/nft": "^0.21.0",
                 "esbuild": "^0.14.48"
             }
         },
         "node_modules/@sveltejs/kit": {
-            "version": "1.0.0-next.390",
-            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.390.tgz",
-            "integrity": "sha512-BlWjFL7v1y2vIYHMYMwH2Iy49eOkaunQ8jElQ9qMlC2kp/IdP3uLulS12ZX3oOURxoJICB4gQ82uEyjxen/kdQ==",
+            "version": "1.0.0-next.405",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.405.tgz",
+            "integrity": "sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==",
             "dev": true,
+            "hasInstallScript": true,
             "dependencies": {
                 "@sveltejs/vite-plugin-svelte": "^1.0.1",
                 "chokidar": "^3.5.3",
-                "sade": "^1.8.1"
+                "sade": "^1.8.1",
+                "tiny-glob": "^0.2.9"
             },
             "bin": {
                 "svelte-kit": "svelte-kit.js"
@@ -1415,9 +1433,9 @@
             }
         },
         "node_modules/@testing-library/dom": {
-            "version": "8.16.0",
-            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.0.tgz",
-            "integrity": "sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==",
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.17.1.tgz",
+            "integrity": "sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.10.4",
@@ -1434,16 +1452,16 @@
             }
         },
         "node_modules/@testing-library/jest-dom": {
-            "version": "5.16.4",
-            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
-            "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+            "version": "5.16.5",
+            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
+            "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
             "dev": true,
             "dependencies": {
+                "@adobe/css-tools": "^4.0.1",
                 "@babel/runtime": "^7.9.2",
                 "@types/testing-library__jest-dom": "^5.9.1",
                 "aria-query": "^5.0.0",
                 "chalk": "^3.0.0",
-                "css": "^3.0.0",
                 "css.escape": "^1.5.1",
                 "dom-accessibility-api": "^0.5.6",
                 "lodash": "^4.17.15",
@@ -1559,9 +1577,9 @@
             }
         },
         "node_modules/@types/chai": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz",
-            "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==",
+            "version": "4.3.3",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz",
+            "integrity": "sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==",
             "dev": true
         },
         "node_modules/@types/chai-subset": {
@@ -1727,14 +1745,14 @@
             "peer": true
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz",
-            "integrity": "sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.33.1.tgz",
+            "integrity": "sha512-S1iZIxrTvKkU3+m63YUOxYPKaP+yWDQrdhxTglVDVEVBf+aCSw85+BmJnyUaQQsk5TXFG/LpBu9fa+LrAQ91fQ==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/type-utils": "5.30.7",
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/type-utils": "5.33.1",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "functional-red-black-tree": "^1.0.1",
                 "ignore": "^5.2.0",
@@ -1760,14 +1778,14 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.7.tgz",
-            "integrity": "sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.33.1.tgz",
+            "integrity": "sha512-IgLLtW7FOzoDlmaMoXdxG8HOCByTBXrB1V2ZQYSEV1ggMmJfAkMWTwUjjzagS6OkfpySyhKFkBw7A9jYmcHpZA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -1787,13 +1805,13 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz",
-            "integrity": "sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.33.1.tgz",
+            "integrity": "sha512-8ibcZSqy4c5m69QpzJn8XQq9NnqAToC8OdH/W6IXPXv83vRyEDPYLdjAlUx8h/rbusq6MkW4YdQzURGOqsn3CA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7"
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1804,12 +1822,12 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz",
-            "integrity": "sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.33.1.tgz",
+            "integrity": "sha512-X3pGsJsD8OiqhNa5fim41YtlnyiWMF/eKsEZGsHID2HcDqeSC5yr/uLOeph8rNF2/utwuI0IQoAK3fpoxcLl2g==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "tsutils": "^3.21.0"
             },
@@ -1830,9 +1848,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.7.tgz",
-            "integrity": "sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.33.1.tgz",
+            "integrity": "sha512-7K6MoQPQh6WVEkMrMW5QOA5FO+BOwzHSNd0j3+BlBwd6vtzfZceJ8xJ7Um2XDi/O3umS8/qDX6jdy2i7CijkwQ==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1843,13 +1861,13 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz",
-            "integrity": "sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.1.tgz",
+            "integrity": "sha512-JOAzJ4pJ+tHzA2pgsWQi4804XisPHOtbvwUyqsuuq8+y5B5GMZs7lI1xDWs6V2d7gE/Ez5bTGojSK12+IIPtXA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -1870,15 +1888,15 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.7.tgz",
-            "integrity": "sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.33.1.tgz",
+            "integrity": "sha512-uphZjkMaZ4fE8CR4dU7BquOV6u0doeQAr8n6cQenl/poMaIyJtBu8eys5uk6u5HiDH01Mj5lzbJ5SfeDz7oqMQ==",
             "dev": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0"
             },
@@ -1894,12 +1912,12 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz",
-            "integrity": "sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.1.tgz",
+            "integrity": "sha512-nwIxOK8Z2MPWltLKMLOEZwmfBZReqUdbEoHQXeCpa+sRVARe5twpJGHCB4dk9903Yaf0nMAlGbQfaAH92F60eg==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
                 "eslint-visitor-keys": "^3.3.0"
             },
             "engines": {
@@ -1911,13 +1929,14 @@
             }
         },
         "node_modules/@vercel/nft": {
-            "version": "0.20.1",
-            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.20.1.tgz",
-            "integrity": "sha512-hSLcr64KHOkcNiTAlv154K4p4faEFBwYIi2eIgu1QCDhB1qyQYvFuEhtw3eaapNjA4/7x/2jcclfCAjILua/ag==",
+            "version": "0.21.0",
+            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.21.0.tgz",
+            "integrity": "sha512-hFCAETfI5cG8l5iAiLhMC2bReC5K7SIybzrxGorv+eGspIbIFsVw7Vg85GovXm/LxA08pIDrAlrhR6GN36XB/Q==",
             "dev": true,
             "dependencies": {
                 "@mapbox/node-pre-gyp": "^1.0.5",
                 "acorn": "^8.6.0",
+                "async-sema": "^3.1.1",
                 "bindings": "^1.4.0",
                 "estree-walker": "2.0.2",
                 "glob": "^7.1.3",
@@ -1941,9 +1960,9 @@
             }
         },
         "node_modules/@vitest/ui": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.18.1.tgz",
-            "integrity": "sha512-JgYewAWfx9fN/cjOW6fPh63j9EDiHmDpVXzvp7UJeza+26QoYHXVsgjCmnzP/jjH3i/LkOXlJLqEJw/nJQ+IJg==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.22.0.tgz",
+            "integrity": "sha512-Xyqa0M7l6OxGipCBsKwrDWQB96itqb8h3ZP8mSnuths+xTWucIC7LIU6MAe4cSTlLvGCeihecPJPs5l5GAucgA==",
             "dev": true,
             "dependencies": {
                 "sirv": "^2.0.2"
@@ -1964,9 +1983,9 @@
             "dev": true
         },
         "node_modules/acorn": {
-            "version": "8.7.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-            "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+            "version": "8.8.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+            "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
             "dev": true,
             "bin": {
                 "acorn": "bin/acorn"
@@ -2181,23 +2200,17 @@
                 "node": "*"
             }
         },
+        "node_modules/async-sema": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
+            "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
+            "dev": true
+        },
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
         },
-        "node_modules/atob": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-            "dev": true,
-            "bin": {
-                "atob": "bin/atob.js"
-            },
-            "engines": {
-                "node": ">= 4.5.0"
-            }
-        },
         "node_modules/babel-jest": {
             "version": "28.1.3",
             "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.3.tgz",
@@ -2397,134 +2410,6 @@
             "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
             "dev": true
         },
-        "node_modules/c8": {
-            "version": "7.12.0",
-            "resolved": "https://registry.npmjs.org/c8/-/c8-7.12.0.tgz",
-            "integrity": "sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "@bcoe/v8-coverage": "^0.2.3",
-                "@istanbuljs/schema": "^0.1.3",
-                "find-up": "^5.0.0",
-                "foreground-child": "^2.0.0",
-                "istanbul-lib-coverage": "^3.2.0",
-                "istanbul-lib-report": "^3.0.0",
-                "istanbul-reports": "^3.1.4",
-                "rimraf": "^3.0.2",
-                "test-exclude": "^6.0.0",
-                "v8-to-istanbul": "^9.0.0",
-                "yargs": "^16.2.0",
-                "yargs-parser": "^20.2.9"
-            },
-            "bin": {
-                "c8": "bin/c8.js"
-            },
-            "engines": {
-                "node": ">=10.12.0"
-            }
-        },
-        "node_modules/c8/node_modules/find-up": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "locate-path": "^6.0.0",
-                "path-exists": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/locate-path": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "p-locate": "^5.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/p-limit": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "yocto-queue": "^0.1.0"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/p-locate": {
-            "version": "5.0.0",
-            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "p-limit": "^3.0.2"
-            },
-            "engines": {
-                "node": ">=10"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/c8/node_modules/yargs": {
-            "version": "16.2.0",
-            "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-            "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "cliui": "^7.0.2",
-                "escalade": "^3.1.1",
-                "get-caller-file": "^2.0.5",
-                "require-directory": "^2.1.1",
-                "string-width": "^4.2.0",
-                "y18n": "^5.0.5",
-                "yargs-parser": "^20.2.2"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/c8/node_modules/yargs-parser": {
-            "version": "20.2.9",
-            "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-            "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2803,17 +2688,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/css": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-            "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-            "dev": true,
-            "dependencies": {
-                "inherits": "^2.0.4",
-                "source-map": "^0.6.1",
-                "source-map-resolve": "^0.6.0"
-            }
-        },
         "node_modules/css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -2906,15 +2780,6 @@
             "optional": true,
             "peer": true
         },
-        "node_modules/decode-uri-component": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-            "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.10"
-            }
-        },
         "node_modules/dedent": {
             "version": "0.7.0",
             "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -3259,13 +3124,14 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.20.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.20.0.tgz",
-            "integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
+            "version": "8.22.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.22.0.tgz",
+            "integrity": "sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==",
             "dev": true,
             "dependencies": {
                 "@eslint/eslintrc": "^1.3.0",
-                "@humanwhocodes/config-array": "^0.9.2",
+                "@humanwhocodes/config-array": "^0.10.4",
+                "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
                 "ajv": "^6.10.0",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
@@ -3275,14 +3141,17 @@
                 "eslint-scope": "^7.1.1",
                 "eslint-utils": "^3.0.0",
                 "eslint-visitor-keys": "^3.3.0",
-                "espree": "^9.3.2",
+                "espree": "^9.3.3",
                 "esquery": "^1.4.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^6.0.1",
+                "find-up": "^5.0.0",
                 "functional-red-black-tree": "^1.0.1",
                 "glob-parent": "^6.0.1",
                 "globals": "^13.15.0",
+                "globby": "^11.1.0",
+                "grapheme-splitter": "^1.0.4",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.0.0",
                 "imurmurhash": "^0.1.4",
@@ -3403,18 +3272,82 @@
                 "node": ">=4.0"
             }
         },
-        "node_modules/espree": {
-            "version": "9.3.2",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-            "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+        "node_modules/eslint/node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
             "dev": true,
             "dependencies": {
-                "acorn": "^8.7.1",
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint/node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint/node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/eslint/node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/espree": {
+            "version": "9.3.3",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.3.tgz",
+            "integrity": "sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng==",
+            "dev": true,
+            "dependencies": {
+                "acorn": "^8.8.0",
                 "acorn-jsx": "^5.3.2",
                 "eslint-visitor-keys": "^3.3.0"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/esprima": {
@@ -3686,21 +3619,6 @@
             "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
             "dev": true
         },
-        "node_modules/foreground-child": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-            "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "dependencies": {
-                "cross-spawn": "^7.0.0",
-                "signal-exit": "^3.0.2"
-            },
-            "engines": {
-                "node": ">=8.0.0"
-            }
-        },
         "node_modules/form-data": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -3735,6 +3653,20 @@
             "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
             "dev": true
         },
+        "node_modules/fsevents": {
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+            "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
         "node_modules/function-bind": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -3904,6 +3836,12 @@
             "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
             "dev": true
         },
+        "node_modules/grapheme-splitter": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+            "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+            "dev": true
+        },
         "node_modules/has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5990,7 +5928,6 @@
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
             "dev": true,
-            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -6079,9 +6016,9 @@
             }
         },
         "node_modules/playwright-core": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.0.tgz",
-            "integrity": "sha512-BkDWdVsoEEC8m2glQlfNu1EN2qvjBsLIg5bD0wjrfwv9zVHktIsp80yYFObAcWreLNYhfRP4PlXE04lr5R4DFQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.25.0.tgz",
+            "integrity": "sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==",
             "dev": true,
             "bin": {
                 "playwright": "cli.js"
@@ -6091,9 +6028,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.14",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-            "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+            "version": "8.4.16",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+            "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
             "dev": true,
             "funding": [
                 {
@@ -6590,9 +6527,9 @@
             }
         },
         "node_modules/sass": {
-            "version": "1.53.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
-            "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+            "version": "1.54.4",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+            "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
             "dev": true,
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -6642,9 +6579,9 @@
             "dev": true
         },
         "node_modules/set-cookie-parser": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz",
-            "integrity": "sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==",
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+            "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
             "dev": true
         },
         "node_modules/shebang-command": {
@@ -6724,6 +6661,7 @@
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
             "dev": true,
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -6737,17 +6675,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/source-map-resolve": {
-            "version": "0.6.0",
-            "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-            "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-            "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
-            "dev": true,
-            "dependencies": {
-                "atob": "^2.1.2",
-                "decode-uri-component": "^0.2.0"
-            }
-        },
         "node_modules/source-map-support": {
             "version": "0.5.13",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -7365,15 +7292,15 @@
             }
         },
         "node_modules/vite": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.2.tgz",
-            "integrity": "sha512-TAqydxW/w0U5AoL5AsD9DApTvGb2iNbGs3sN4u2VdT1GFkQVUfgUldt+t08TZgi23uIauh1TUOQJALduo9GXqw==",
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.8.tgz",
+            "integrity": "sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.14.47",
-                "postcss": "^8.4.14",
+                "postcss": "^8.4.16",
                 "resolve": "^1.22.1",
-                "rollup": "^2.75.6"
+                "rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
             },
             "bin": {
                 "vite": "bin/vite.js"
@@ -7406,12 +7333,12 @@
             }
         },
         "node_modules/vitest": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.18.1.tgz",
-            "integrity": "sha512-4F/1K/Vn4AvJwe7i2YblR02PT5vMKcw9KN4unDq2KD0YcSxX0B/6D6Qu9PJaXwVuxXMFTQ5ovd4+CQaW3bwofA==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.22.0.tgz",
+            "integrity": "sha512-BSIro/QOHLaQY08FHwT6THWhqLQ+VPU+N4Rdo4pcP+16XB6oLmNNAXGcSh/MOLUhfUy+mqCwx7AyKmU7Ms5R+g==",
             "dev": true,
             "dependencies": {
-                "@types/chai": "^4.3.1",
+                "@types/chai": "^4.3.3",
                 "@types/chai-subset": "^1.3.3",
                 "@types/node": "*",
                 "chai": "^4.3.6",
@@ -7432,8 +7359,8 @@
             },
             "peerDependencies": {
                 "@edge-runtime/vm": "*",
+                "@vitest/browser": "*",
                 "@vitest/ui": "*",
-                "c8": "*",
                 "happy-dom": "*",
                 "jsdom": "*"
             },
@@ -7441,10 +7368,10 @@
                 "@edge-runtime/vm": {
                     "optional": true
                 },
-                "@vitest/ui": {
+                "@vitest/browser": {
                     "optional": true
                 },
-                "c8": {
+                "@vitest/ui": {
                     "optional": true
                 },
                 "happy-dom": {
@@ -7717,7 +7644,6 @@
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "dev": true,
-            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -7740,6 +7666,12 @@
         }
     },
     "dependencies": {
+        "@adobe/css-tools": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+            "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+            "dev": true
+        },
         "@ampproject/remapping": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@@ -8282,9 +8214,9 @@
             }
         },
         "@humanwhocodes/config-array": {
-            "version": "0.9.3",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
-            "integrity": "sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==",
+            "version": "0.10.4",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
+            "integrity": "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==",
             "dev": true,
             "requires": {
                 "@humanwhocodes/object-schema": "^1.2.1",
@@ -8292,6 +8224,12 @@
                 "minimatch": "^3.0.4"
             }
         },
+        "@humanwhocodes/gitignore-to-minimatch": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+            "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+            "dev": true
+        },
         "@humanwhocodes/object-schema": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
@@ -8693,13 +8631,13 @@
             }
         },
         "@playwright/test": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.24.0.tgz",
-            "integrity": "sha512-sZLH2N6aWN9TtG+vMjNSomSfX0dSVHwWE+GhHQPV+ZeGcuZ/6CgMCGFuGjobgq/hNF9ZkuVOjeyoceZ0owKnHQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.25.0.tgz",
+            "integrity": "sha512-j4EZhTTQI3dBeWblE21EV//swwmBtOpIrLdOIJIRv4uqsLdHgBg1z+JtTg+AeC5o2bAXIE26kDNW5A0TimG8Bg==",
             "dev": true,
             "requires": {
                 "@types/node": "*",
-                "playwright-core": "1.24.0"
+                "playwright-core": "1.25.0"
             }
         },
         "@polka/url": {
@@ -8750,20 +8688,20 @@
             }
         },
         "@sveltejs/adapter-auto": {
-            "version": "1.0.0-next.63",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.63.tgz",
-            "integrity": "sha512-9KguXwROEJMyyoKrsizAilVSmtfWxEDn2Hbxk44SP8Kj5cgN7tFCxzbL2kmmqyV1CO1tOh5iNC2oWbyTfikXmw==",
+            "version": "1.0.0-next.64",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.64.tgz",
+            "integrity": "sha512-Q8DwcS6wl1GovzS9JJzaD/WL/Lfk1ur4nAF1HtmsUvZDpsPBVDqnK2AhYU4G3oFNiuHstrjAogMy5th8ptSFGw==",
             "dev": true,
             "requires": {
-                "@sveltejs/adapter-cloudflare": "1.0.0-next.30",
-                "@sveltejs/adapter-netlify": "1.0.0-next.70",
-                "@sveltejs/adapter-vercel": "1.0.0-next.65"
+                "@sveltejs/adapter-cloudflare": "1.0.0-next.31",
+                "@sveltejs/adapter-netlify": "1.0.0-next.71",
+                "@sveltejs/adapter-vercel": "1.0.0-next.66"
             }
         },
         "@sveltejs/adapter-cloudflare": {
-            "version": "1.0.0-next.30",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.30.tgz",
-            "integrity": "sha512-jIclgb58n3Uoo8TTudXSa7wmLP7Rn/ESLQS+zOUe0xsti5DG/eDhELTnSvkoSa2lJY21ym5rej/GSERRyeuBVw==",
+            "version": "1.0.0-next.31",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-cloudflare/-/adapter-cloudflare-1.0.0-next.31.tgz",
+            "integrity": "sha512-HhEFZP72GJ8AZGgFECKIiayDcLaAWi65pI0AnBfiNhCifYSlH/mPNWNVD4AWRDnXnH6XU+FLwhGDnIDwytTyYg==",
             "dev": true,
             "requires": {
                 "@cloudflare/workers-types": "^3.14.0",
@@ -8772,9 +8710,9 @@
             }
         },
         "@sveltejs/adapter-netlify": {
-            "version": "1.0.0-next.70",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.70.tgz",
-            "integrity": "sha512-lIXY6KIgIFBz4+mdvilx9Ny8oFV7T2iVTKLirJayoI/SqPWGAcxklvWvjGfS4QT8rS9pWKDaKRUQM4M/gl8LlA==",
+            "version": "1.0.0-next.71",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.71.tgz",
+            "integrity": "sha512-la1CGtWO1xul1L3zEoFAoc4EX2uxZjrZcOMS3tkKB8drxhbQsNbnTE6fmSSMFiZXhxaikczrBgQwqIaDkLTmZg==",
             "dev": true,
             "requires": {
                 "@iarna/toml": "^2.2.5",
@@ -8784,24 +8722,25 @@
             }
         },
         "@sveltejs/adapter-vercel": {
-            "version": "1.0.0-next.65",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.65.tgz",
-            "integrity": "sha512-RV3HL7Ic7pGgIoBSHPwN1pBX96Km1X683oHImPHAKX9h/WOvJZ3bY5+IWNRcR8tx9rPB5gfMRg+msvPSBr3RVw==",
+            "version": "1.0.0-next.66",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.66.tgz",
+            "integrity": "sha512-s3Hcxu9nCG/rR3C3cFbdQGjTa5W4K2kRcc6S5Xefx7itbrw+4v3KpO8ZPB6qM55XDwVxuG7260NMHVI6MUGmSA==",
             "dev": true,
             "requires": {
-                "@vercel/nft": "^0.20.0",
+                "@vercel/nft": "^0.21.0",
                 "esbuild": "^0.14.48"
             }
         },
         "@sveltejs/kit": {
-            "version": "1.0.0-next.390",
-            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.390.tgz",
-            "integrity": "sha512-BlWjFL7v1y2vIYHMYMwH2Iy49eOkaunQ8jElQ9qMlC2kp/IdP3uLulS12ZX3oOURxoJICB4gQ82uEyjxen/kdQ==",
+            "version": "1.0.0-next.405",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.405.tgz",
+            "integrity": "sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==",
             "dev": true,
             "requires": {
                 "@sveltejs/vite-plugin-svelte": "^1.0.1",
                 "chokidar": "^3.5.3",
-                "sade": "^1.8.1"
+                "sade": "^1.8.1",
+                "tiny-glob": "^0.2.9"
             }
         },
         "@sveltejs/vite-plugin-svelte": {
@@ -8830,9 +8769,9 @@
             }
         },
         "@testing-library/dom": {
-            "version": "8.16.0",
-            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.0.tgz",
-            "integrity": "sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==",
+            "version": "8.17.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.17.1.tgz",
+            "integrity": "sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.10.4",
@@ -8846,16 +8785,16 @@
             }
         },
         "@testing-library/jest-dom": {
-            "version": "5.16.4",
-            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
-            "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+            "version": "5.16.5",
+            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
+            "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
             "dev": true,
             "requires": {
+                "@adobe/css-tools": "^4.0.1",
                 "@babel/runtime": "^7.9.2",
                 "@types/testing-library__jest-dom": "^5.9.1",
                 "aria-query": "^5.0.0",
                 "chalk": "^3.0.0",
-                "css": "^3.0.0",
                 "css.escape": "^1.5.1",
                 "dom-accessibility-api": "^0.5.6",
                 "lodash": "^4.17.15",
@@ -8950,9 +8889,9 @@
             }
         },
         "@types/chai": {
-            "version": "4.3.1",
-            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.1.tgz",
-            "integrity": "sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==",
+            "version": "4.3.3",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz",
+            "integrity": "sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==",
             "dev": true
         },
         "@types/chai-subset": {
@@ -9111,14 +9050,14 @@
             "peer": true
         },
         "@typescript-eslint/eslint-plugin": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz",
-            "integrity": "sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.33.1.tgz",
+            "integrity": "sha512-S1iZIxrTvKkU3+m63YUOxYPKaP+yWDQrdhxTglVDVEVBf+aCSw85+BmJnyUaQQsk5TXFG/LpBu9fa+LrAQ91fQ==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/type-utils": "5.30.7",
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/type-utils": "5.33.1",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "functional-red-black-tree": "^1.0.1",
                 "ignore": "^5.2.0",
@@ -9128,52 +9067,52 @@
             }
         },
         "@typescript-eslint/parser": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.7.tgz",
-            "integrity": "sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.33.1.tgz",
+            "integrity": "sha512-IgLLtW7FOzoDlmaMoXdxG8HOCByTBXrB1V2ZQYSEV1ggMmJfAkMWTwUjjzagS6OkfpySyhKFkBw7A9jYmcHpZA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "debug": "^4.3.4"
             }
         },
         "@typescript-eslint/scope-manager": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz",
-            "integrity": "sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.33.1.tgz",
+            "integrity": "sha512-8ibcZSqy4c5m69QpzJn8XQq9NnqAToC8OdH/W6IXPXv83vRyEDPYLdjAlUx8h/rbusq6MkW4YdQzURGOqsn3CA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7"
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1"
             }
         },
         "@typescript-eslint/type-utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz",
-            "integrity": "sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.33.1.tgz",
+            "integrity": "sha512-X3pGsJsD8OiqhNa5fim41YtlnyiWMF/eKsEZGsHID2HcDqeSC5yr/uLOeph8rNF2/utwuI0IQoAK3fpoxcLl2g==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/utils": "5.30.7",
+                "@typescript-eslint/utils": "5.33.1",
                 "debug": "^4.3.4",
                 "tsutils": "^3.21.0"
             }
         },
         "@typescript-eslint/types": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.7.tgz",
-            "integrity": "sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.33.1.tgz",
+            "integrity": "sha512-7K6MoQPQh6WVEkMrMW5QOA5FO+BOwzHSNd0j3+BlBwd6vtzfZceJ8xJ7Um2XDi/O3umS8/qDX6jdy2i7CijkwQ==",
             "dev": true
         },
         "@typescript-eslint/typescript-estree": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz",
-            "integrity": "sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.1.tgz",
+            "integrity": "sha512-JOAzJ4pJ+tHzA2pgsWQi4804XisPHOtbvwUyqsuuq8+y5B5GMZs7lI1xDWs6V2d7gE/Ez5bTGojSK12+IIPtXA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/visitor-keys": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/visitor-keys": "5.33.1",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -9182,37 +9121,38 @@
             }
         },
         "@typescript-eslint/utils": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.7.tgz",
-            "integrity": "sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.33.1.tgz",
+            "integrity": "sha512-uphZjkMaZ4fE8CR4dU7BquOV6u0doeQAr8n6cQenl/poMaIyJtBu8eys5uk6u5HiDH01Mj5lzbJ5SfeDz7oqMQ==",
             "dev": true,
             "requires": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.30.7",
-                "@typescript-eslint/types": "5.30.7",
-                "@typescript-eslint/typescript-estree": "5.30.7",
+                "@typescript-eslint/scope-manager": "5.33.1",
+                "@typescript-eslint/types": "5.33.1",
+                "@typescript-eslint/typescript-estree": "5.33.1",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0"
             }
         },
         "@typescript-eslint/visitor-keys": {
-            "version": "5.30.7",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz",
-            "integrity": "sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw==",
+            "version": "5.33.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.1.tgz",
+            "integrity": "sha512-nwIxOK8Z2MPWltLKMLOEZwmfBZReqUdbEoHQXeCpa+sRVARe5twpJGHCB4dk9903Yaf0nMAlGbQfaAH92F60eg==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.30.7",
+                "@typescript-eslint/types": "5.33.1",
                 "eslint-visitor-keys": "^3.3.0"
             }
         },
         "@vercel/nft": {
-            "version": "0.20.1",
-            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.20.1.tgz",
-            "integrity": "sha512-hSLcr64KHOkcNiTAlv154K4p4faEFBwYIi2eIgu1QCDhB1qyQYvFuEhtw3eaapNjA4/7x/2jcclfCAjILua/ag==",
+            "version": "0.21.0",
+            "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.21.0.tgz",
+            "integrity": "sha512-hFCAETfI5cG8l5iAiLhMC2bReC5K7SIybzrxGorv+eGspIbIFsVw7Vg85GovXm/LxA08pIDrAlrhR6GN36XB/Q==",
             "dev": true,
             "requires": {
                 "@mapbox/node-pre-gyp": "^1.0.5",
                 "acorn": "^8.6.0",
+                "async-sema": "^3.1.1",
                 "bindings": "^1.4.0",
                 "estree-walker": "2.0.2",
                 "glob": "^7.1.3",
@@ -9232,9 +9172,9 @@
             }
         },
         "@vitest/ui": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.18.1.tgz",
-            "integrity": "sha512-JgYewAWfx9fN/cjOW6fPh63j9EDiHmDpVXzvp7UJeza+26QoYHXVsgjCmnzP/jjH3i/LkOXlJLqEJw/nJQ+IJg==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-0.22.0.tgz",
+            "integrity": "sha512-Xyqa0M7l6OxGipCBsKwrDWQB96itqb8h3ZP8mSnuths+xTWucIC7LIU6MAe4cSTlLvGCeihecPJPs5l5GAucgA==",
             "dev": true,
             "requires": {
                 "sirv": "^2.0.2"
@@ -9255,9 +9195,9 @@
             "dev": true
         },
         "acorn": {
-            "version": "8.7.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-            "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+            "version": "8.8.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+            "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
             "dev": true
         },
         "acorn-globals": {
@@ -9415,17 +9355,17 @@
             "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
             "dev": true
         },
+        "async-sema": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/async-sema/-/async-sema-3.1.1.tgz",
+            "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
+            "dev": true
+        },
         "asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
             "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
         },
-        "atob": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-            "dev": true
-        },
         "babel-jest": {
             "version": "28.1.3",
             "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.3.tgz",
@@ -9585,100 +9525,6 @@
             "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
             "dev": true
         },
-        "c8": {
-            "version": "7.12.0",
-            "resolved": "https://registry.npmjs.org/c8/-/c8-7.12.0.tgz",
-            "integrity": "sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "requires": {
-                "@bcoe/v8-coverage": "^0.2.3",
-                "@istanbuljs/schema": "^0.1.3",
-                "find-up": "^5.0.0",
-                "foreground-child": "^2.0.0",
-                "istanbul-lib-coverage": "^3.2.0",
-                "istanbul-lib-report": "^3.0.0",
-                "istanbul-reports": "^3.1.4",
-                "rimraf": "^3.0.2",
-                "test-exclude": "^6.0.0",
-                "v8-to-istanbul": "^9.0.0",
-                "yargs": "^16.2.0",
-                "yargs-parser": "^20.2.9"
-            },
-            "dependencies": {
-                "find-up": {
-                    "version": "5.0.0",
-                    "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-                    "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "locate-path": "^6.0.0",
-                        "path-exists": "^4.0.0"
-                    }
-                },
-                "locate-path": {
-                    "version": "6.0.0",
-                    "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-                    "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "p-locate": "^5.0.0"
-                    }
-                },
-                "p-limit": {
-                    "version": "3.1.0",
-                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-                    "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "yocto-queue": "^0.1.0"
-                    }
-                },
-                "p-locate": {
-                    "version": "5.0.0",
-                    "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-                    "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "p-limit": "^3.0.2"
-                    }
-                },
-                "yargs": {
-                    "version": "16.2.0",
-                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-                    "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true,
-                    "requires": {
-                        "cliui": "^7.0.2",
-                        "escalade": "^3.1.1",
-                        "get-caller-file": "^2.0.5",
-                        "require-directory": "^2.1.1",
-                        "string-width": "^4.2.0",
-                        "y18n": "^5.0.5",
-                        "yargs-parser": "^20.2.2"
-                    }
-                },
-                "yargs-parser": {
-                    "version": "20.2.9",
-                    "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-                    "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-                    "dev": true,
-                    "optional": true,
-                    "peer": true
-                }
-            }
-        },
         "callsites": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -9898,17 +9744,6 @@
                 "which": "^2.0.1"
             }
         },
-        "css": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-            "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-            "dev": true,
-            "requires": {
-                "inherits": "^2.0.4",
-                "source-map": "^0.6.1",
-                "source-map-resolve": "^0.6.0"
-            }
-        },
         "css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -9988,12 +9823,6 @@
             "optional": true,
             "peer": true
         },
-        "decode-uri-component": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-            "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
-            "dev": true
-        },
         "dedent": {
             "version": "0.7.0",
             "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -10260,13 +10089,14 @@
             }
         },
         "eslint": {
-            "version": "8.20.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.20.0.tgz",
-            "integrity": "sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==",
+            "version": "8.22.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.22.0.tgz",
+            "integrity": "sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==",
             "dev": true,
             "requires": {
                 "@eslint/eslintrc": "^1.3.0",
-                "@humanwhocodes/config-array": "^0.9.2",
+                "@humanwhocodes/config-array": "^0.10.4",
+                "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
                 "ajv": "^6.10.0",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
@@ -10276,14 +10106,17 @@
                 "eslint-scope": "^7.1.1",
                 "eslint-utils": "^3.0.0",
                 "eslint-visitor-keys": "^3.3.0",
-                "espree": "^9.3.2",
+                "espree": "^9.3.3",
                 "esquery": "^1.4.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^6.0.1",
+                "find-up": "^5.0.0",
                 "functional-red-black-tree": "^1.0.1",
                 "glob-parent": "^6.0.1",
                 "globals": "^13.15.0",
+                "globby": "^11.1.0",
+                "grapheme-splitter": "^1.0.4",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.0.0",
                 "imurmurhash": "^0.1.4",
@@ -10317,6 +10150,43 @@
                     "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
                     "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
                     "dev": true
+                },
+                "find-up": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+                    "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+                    "dev": true,
+                    "requires": {
+                        "locate-path": "^6.0.0",
+                        "path-exists": "^4.0.0"
+                    }
+                },
+                "locate-path": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+                    "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+                    "dev": true,
+                    "requires": {
+                        "p-locate": "^5.0.0"
+                    }
+                },
+                "p-limit": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+                    "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+                    "dev": true,
+                    "requires": {
+                        "yocto-queue": "^0.1.0"
+                    }
+                },
+                "p-locate": {
+                    "version": "5.0.0",
+                    "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+                    "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+                    "dev": true,
+                    "requires": {
+                        "p-limit": "^3.0.2"
+                    }
                 }
             }
         },
@@ -10368,12 +10238,12 @@
             "dev": true
         },
         "espree": {
-            "version": "9.3.2",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
-            "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
+            "version": "9.3.3",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.3.tgz",
+            "integrity": "sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng==",
             "dev": true,
             "requires": {
-                "acorn": "^8.7.1",
+                "acorn": "^8.8.0",
                 "acorn-jsx": "^5.3.2",
                 "eslint-visitor-keys": "^3.3.0"
             }
@@ -10597,18 +10467,6 @@
             "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
             "dev": true
         },
-        "foreground-child": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-            "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
-            "dev": true,
-            "optional": true,
-            "peer": true,
-            "requires": {
-                "cross-spawn": "^7.0.0",
-                "signal-exit": "^3.0.2"
-            }
-        },
         "form-data": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -10637,6 +10495,13 @@
             "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
             "dev": true
         },
+        "fsevents": {
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+            "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+            "dev": true,
+            "optional": true
+        },
         "function-bind": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -10764,6 +10629,12 @@
             "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
             "dev": true
         },
+        "grapheme-splitter": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+            "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+            "dev": true
+        },
         "has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -12374,8 +12245,7 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-            "dev": true,
-            "peer": true
+            "dev": true
         },
         "path-is-absolute": {
             "version": "1.0.1",
@@ -12437,15 +12307,15 @@
             }
         },
         "playwright-core": {
-            "version": "1.24.0",
-            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.24.0.tgz",
-            "integrity": "sha512-BkDWdVsoEEC8m2glQlfNu1EN2qvjBsLIg5bD0wjrfwv9zVHktIsp80yYFObAcWreLNYhfRP4PlXE04lr5R4DFQ==",
+            "version": "1.25.0",
+            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.25.0.tgz",
+            "integrity": "sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==",
             "dev": true
         },
         "postcss": {
-            "version": "8.4.14",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-            "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+            "version": "8.4.16",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+            "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
             "dev": true,
             "requires": {
                 "nanoid": "^3.3.4",
@@ -12812,9 +12682,9 @@
             }
         },
         "sass": {
-            "version": "1.53.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
-            "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+            "version": "1.54.4",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+            "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
             "dev": true,
             "requires": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -12849,9 +12719,9 @@
             "dev": true
         },
         "set-cookie-parser": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz",
-            "integrity": "sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==",
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
+            "integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
             "dev": true
         },
         "shebang-command": {
@@ -12915,7 +12785,8 @@
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-            "dev": true
+            "dev": true,
+            "peer": true
         },
         "source-map-js": {
             "version": "1.0.2",
@@ -12923,16 +12794,6 @@
             "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
             "dev": true
         },
-        "source-map-resolve": {
-            "version": "0.6.0",
-            "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-            "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-            "dev": true,
-            "requires": {
-                "atob": "^2.1.2",
-                "decode-uri-component": "^0.2.0"
-            }
-        },
         "source-map-support": {
             "version": "0.5.13",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -13371,25 +13232,25 @@
             }
         },
         "vite": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.2.tgz",
-            "integrity": "sha512-TAqydxW/w0U5AoL5AsD9DApTvGb2iNbGs3sN4u2VdT1GFkQVUfgUldt+t08TZgi23uIauh1TUOQJALduo9GXqw==",
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.8.tgz",
+            "integrity": "sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==",
             "dev": true,
             "requires": {
                 "esbuild": "^0.14.47",
                 "fsevents": "~2.3.2",
-                "postcss": "^8.4.14",
+                "postcss": "^8.4.16",
                 "resolve": "^1.22.1",
-                "rollup": "^2.75.6"
+                "rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
             }
         },
         "vitest": {
-            "version": "0.18.1",
-            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.18.1.tgz",
-            "integrity": "sha512-4F/1K/Vn4AvJwe7i2YblR02PT5vMKcw9KN4unDq2KD0YcSxX0B/6D6Qu9PJaXwVuxXMFTQ5ovd4+CQaW3bwofA==",
+            "version": "0.22.0",
+            "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.22.0.tgz",
+            "integrity": "sha512-BSIro/QOHLaQY08FHwT6THWhqLQ+VPU+N4Rdo4pcP+16XB6oLmNNAXGcSh/MOLUhfUy+mqCwx7AyKmU7Ms5R+g==",
             "dev": true,
             "requires": {
-                "@types/chai": "^4.3.1",
+                "@types/chai": "^4.3.3",
                 "@types/chai-subset": "^1.3.3",
                 "@types/node": "*",
                 "chai": "^4.3.6",
@@ -13599,8 +13460,7 @@
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-            "dev": true,
-            "peer": true
+            "dev": true
         },
         "zrender": {
             "version": "5.3.2",
diff --git a/package.json b/package.json
index 2ed5cac14..3d014a749 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,6 @@
         "dev": "vite dev",
         "build": "vite build",
         "preview": "vite preview",
-        "prepare": "svelte-kit sync",
         "check": "svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
@@ -26,33 +25,33 @@
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
-        "@playwright/test": "^1.24.0",
-        "@sveltejs/adapter-auto": "1.0.0-next.63",
-        "@sveltejs/kit": "1.0.0-next.390",
+        "@playwright/test": "^1.25.0",
+        "@sveltejs/adapter-auto": "1.0.0-next.64",
+        "@sveltejs/kit": "1.0.0-next.405",
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
-        "@testing-library/dom": "^8.16.0",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/dom": "^8.17.1",
+        "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "^3.1.3",
         "@testing-library/user-event": "^14.3.0",
         "@types/gtag.js": "^0.0.10",
-        "@typescript-eslint/eslint-plugin": "^5.30.7",
-        "@typescript-eslint/parser": "^5.30.7",
-        "@vitest/ui": "^0.18.1",
-        "eslint": "^8.20.0",
+        "@typescript-eslint/eslint-plugin": "^5.33.1",
+        "@typescript-eslint/parser": "^5.33.1",
+        "@vitest/ui": "^0.22.0",
+        "eslint": "^8.22.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "pre-commit": "^1.2.2",
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.7.0",
-        "sass": "^1.53.0",
+        "sass": "^1.54.4",
         "svelte": "^3.49.0",
         "svelte-check": "^2.8.0",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.7.4",
-        "vite": "^3.0.0",
-        "vitest": "^0.18.1"
+        "vite": "^3.0.8",
+        "vitest": "^0.22.0"
     },
     "type": "module",
     "pre-commit": [

From c978cc35ebb55bd42e5c158b4c5604285a818e0b Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:32:27 +0200
Subject: [PATCH 22/23] ci: github actions

---
 .github/workflows/tests.yml | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 6b3c24003..b4ce3ffd1 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -24,12 +24,32 @@ jobs:
               run: npm ci
             - name: Build Console
               run: npm run build
+    diagnostics:
+        name: Diagnostics
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: Svelte Diagnostics
               run: npm run check
+    linter:
+        name: Linter
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: Linter
               run: npm run lint
+    unit-tests:
+        name: Unit Tests
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: Unit Tests
               run: npm test
+    e2e-tests:
+        name: E2E Tests
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
             - name: E2E Tests
               run: |
                   npx playwright install

From f32535831f7dffc4216462dac9b83c5ad3020de5 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 16 Aug 2022 17:36:17 +0200
Subject: [PATCH 23/23] revert ci changes

---
 .github/workflows/tests.yml | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index b4ce3ffd1..6b3c24003 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -24,32 +24,12 @@ jobs:
               run: npm ci
             - name: Build Console
               run: npm run build
-    diagnostics:
-        name: Diagnostics
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: Svelte Diagnostics
               run: npm run check
-    linter:
-        name: Linter
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: Linter
               run: npm run lint
-    unit-tests:
-        name: Unit Tests
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: Unit Tests
               run: npm test
-    e2e-tests:
-        name: E2E Tests
-        needs: build
-        runs-on: ubuntu-latest
-        steps:
             - name: E2E Tests
               run: |
                   npx playwright install