Merge branch 'feat-pink-v2' of https://github.com/appwrite/console into feat-pink-v2-legacy-fixes

src/lib/components/searchQuery.svelte

@@ -4,8 +4,8 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { onMount } from 'svelte';
     import { onDestroy } from 'svelte';
-    import { Input } from '@appwrite.io/pink-svelte';
-    import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Input } from '@appwrite.io/pink-svelte';
+    import { IconSearch, IconX } from '@appwrite.io/pink-icons-svelte';
 
     export let search = '';
     export let placeholder = '';
@@ -58,8 +58,11 @@
     }
 </script>
 
-<div style:max-width="260px" style:width="100%">
+<div style:max-width="360px" style:width="100%">
     <Input.Text {placeholder} {disabled} {required} type="search" bind:value={search}>
+        <svelte:fragment slot="start">
+            <Icon icon={IconSearch} />
+        </svelte:fragment>
         <svelte:fragment slot="end">
             {#if search}
                 <Input.Action icon={IconX} on:click={() => (search = '')} />

src/lib/components/svgIcon.svelte

@@ -9,10 +9,11 @@
     export { className as class };
 
     enum iconSizes {
-        small = '--icon-size-small',
-        medium = '--icon-size-medium',
-        large = '--icon-size-large',
-        xlarge = '--icon-size-extra-large'
+        xs = '--icon-size-xs',
+        small = '--icon-size-s',
+        medium = '--icon-size-m',
+        large = '--icon-size-l',
+        xlarge = '--icon-size-xl'
     }
 </script>
 

src/lib/elements/forms/inputSelect.svelte

@@ -13,6 +13,7 @@
         label: string;
         disabled?: boolean;
         leadingIcon?: ComponentType;
+        leadingHtml?: string;
     }[];
 
     let element: HTMLSelectElement;