updated to Svelte 4

ui/src/components/collections/CollectionAuthOptionsTab.svelte

@@ -49,7 +49,7 @@
             {#if hasUsernameErrors}
                 <i
                     class="ri-error-warning-fill txt-danger"
-                    transition:scale|local={{ duration: 150, start: 0.7 }}
+                    transition:scale={{ duration: 150, start: 0.7 }}
                     use:tooltip={{ text: "Has errors", position: "left" }}
                 />
             {/if}
@@ -79,7 +79,7 @@
             {#if hasEmailErrors}
                 <i
                     class="ri-error-warning-fill txt-danger"
-                    transition:scale|local={{ duration: 150, start: 0.7 }}
+                    transition:scale={{ duration: 150, start: 0.7 }}
                     use:tooltip={{ text: "Has errors", position: "left" }}
                 />
             {/if}
@@ -91,7 +91,7 @@
         </Field>
 
         {#if collection.options.allowEmailAuth}
-            <div class="grid grid-sm p-t-sm" transition:slide|local={{ duration: 150 }}>
+            <div class="grid grid-sm p-t-sm" transition:slide={{ duration: 150 }}>
                 <div class="col-lg-6">
                     <Field
                         class="form-field {!CommonHelper.isEmpty(collection.options.onlyEmailDomains)
@@ -166,7 +166,7 @@
             {#if hasOAuth2Errors}
                 <i
                     class="ri-error-warning-fill txt-danger"
-                    transition:scale|local={{ duration: 150, start: 0.7 }}
+                    transition:scale={{ duration: 150, start: 0.7 }}
                     use:tooltip={{ text: "Has errors", position: "left" }}
                 />
             {/if}
@@ -178,7 +178,7 @@
         </Field>
 
         {#if collection.options.allowOAuth2Auth}
-            <div class="block" transition:slide|local={{ duration: 150 }}>
+            <div class="block" transition:slide={{ duration: 150 }}>
                 <div class="flex p-t-base">
                     <a href="#/settings/auth-providers" target="_blank" class="btn btn-sm btn-outline">
                         <span class="txt">Manage OAuth2 providers</span>

ui/src/components/collections/CollectionRulesTab.svelte

@@ -29,7 +29,7 @@
     </div>
 
     {#if showFiltersInfo}
-        <div transition:slide|local={{ duration: 150 }}>
+        <div transition:slide={{ duration: 150 }}>
             <div class="alert alert-warning m-0">
                 <div class="content">
                     <p class="m-b-0">The following record fields are available:</p>

ui/src/components/collections/CollectionUpsertPanel.svelte

@@ -378,7 +378,7 @@
                 {#if !CommonHelper.isEmpty(schemaTabError)}
                     <i
                         class="ri-error-warning-fill txt-danger"
-                        transition:scale|local={{ duration: 150, start: 0.7 }}
+                        transition:scale={{ duration: 150, start: 0.7 }}
                         use:tooltip={schemaTabError}
                     />
                 {/if}
@@ -394,7 +394,7 @@
                 {#if !CommonHelper.isEmpty($errors?.listRule) || !CommonHelper.isEmpty($errors?.viewRule) || !CommonHelper.isEmpty($errors?.createRule) || !CommonHelper.isEmpty($errors?.updateRule) || !CommonHelper.isEmpty($errors?.deleteRule) || !CommonHelper.isEmpty($errors?.options?.manageRule)}
                     <i
                         class="ri-error-warning-fill txt-danger"
-                        transition:scale|local={{ duration: 150, start: 0.7 }}
+                        transition:scale={{ duration: 150, start: 0.7 }}
                         use:tooltip={"Has errors"}
                     />
                 {/if}
@@ -411,7 +411,7 @@
                     {#if !CommonHelper.isEmpty($errors?.options) && !$errors?.options?.manageRule}
                         <i
                             class="ri-error-warning-fill txt-danger"
-                            transition:scale|local={{ duration: 150, start: 0.7 }}
+                            transition:scale={{ duration: 150, start: 0.7 }}
                             use:tooltip={"Has errors"}
                         />
                     {/if}

ui/src/components/collections/RuleField.svelte

@@ -97,7 +97,7 @@
                     type="button"
                     class="unlock-overlay"
                     aria-label="Unlock and set custom rule"
-                    transition:scale|local={{ duration: 150, start: 0.98 }}
+                    transition:scale={{ duration: 150, start: 0.98 }}
                     on:click={unlock}
                 >
                     <small class="txt">Unlock and set custom rule</small>

ui/src/components/collections/schema/SchemaField.svelte

@@ -119,7 +119,7 @@
     class:required={field.required}
     class:expanded={interactive && showOptions}
     class:deleted={field.toDelete}
-    transition:slide|local={{ duration: 150 }}
+    transition:slide={{ duration: 150 }}
 >
     <div class="schema-field-header">
         {#if interactive}
@@ -197,7 +197,7 @@
     </div>
 
     {#if interactive && showOptions}
-        <div class="schema-field-options" transition:slide|local={{ duration: 150 }}>
+        <div class="schema-field-options" transition:slide={{ duration: 150 }}>
             <div class="hidden-empty m-b-sm">
                 <slot name="options" {interactive} {hasErrors} />
             </div>

ui/src/components/collections/schema/SchemaFieldJson.svelte

@@ -26,7 +26,7 @@
         </button>
 
         {#if showInfo}
-            <div class="block" transition:slide|local={{ duration: 150 }}>
+            <div class="block" transition:slide={{ duration: 150 }}>
                 <div class="alert alert-warning m-b-0 m-t-10">
                     <div class="content">
                         In order to support seamlessly both <code>application/json</code> and