@getmicdrop/svelte-components 2.6.3 → 2.8.0

package/dist/components/Input/Input.svelte

@@ -1,6 +1,7 @@
 <script>
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
+  import { createEventDispatcher, onDestroy } from "svelte";
   import WarningIcon from "../Icons/WarningIcon.svelte";
 
   export let required = false;
@@ -41,8 +42,16 @@
   export let showErrors = false; // Show errors immediately (bypass touched requirement)
   export let disableBuiltInValidation = false; // When true, disables the built-in blur validation (use for custom validation)
 
+  // Instant search props
+  export let instantSearch = false; // Enable search-as-you-type with debouncing
+  export let debounceMs = 250; // Debounce delay for instant search
+  export let minSearchChars = 2; // Minimum characters before search triggers
+  export let showClearButton = false; // Show clear (X) button when input has value
+
   let inputValue = value;
   let inputElement;
+  let debounceTimer;
+  const dispatch = createEventDispatcher();
 
   // Derive inputmode from type if not explicitly set
   $: computedInputmode = inputmode || getInputmodeFromType(type);
@@ -163,8 +172,56 @@
 
     // Update exported value for parent bind:value
     value = inputValue;
+
+    // Instant search functionality
+    if (instantSearch) {
+      clearTimeout(debounceTimer);
+
+      // Dispatch immediately if cleared
+      if (inputValue.length === 0) {
+        dispatch('search', { query: '' });
+        return;
+      }
+
+      // Only search if we have enough characters
+      if (inputValue.length >= minSearchChars) {
+        debounceTimer = setTimeout(() => {
+          dispatch('search', { query: inputValue });
+        }, debounceMs);
+      }
+    }
   };
 
+  // Clear input (for instant search clear button)
+  function clearInput() {
+    inputValue = '';
+    value = '';
+    clearTimeout(debounceTimer);
+    if (instantSearch) {
+      dispatch('search', { query: '' });
+    }
+    if (inputElement) {
+      inputElement.focus();
+    }
+  }
+
+  // Handle keyboard shortcuts for instant search
+  function handleSearchKeyDown(event) {
+    if (instantSearch) {
+      if (event.key === 'Enter') {
+        clearTimeout(debounceTimer);
+        dispatch('search', { query: inputValue });
+      }
+      if (event.key === 'Escape') {
+        clearInput();
+      }
+    }
+  }
+
+  onDestroy(() => {
+    clearTimeout(debounceTimer);
+  });
+
   const isStrongPassword = (password) => {
     const minLength = 8;
     const hasUpperCase = /[A-Z]/.test(password);
@@ -230,6 +287,7 @@
   const getSizeClass = () => {
     switch (size) {
       case "full":
+      case "lg":
         return "w-full";
       case "large":
         return "w-96";
@@ -399,7 +457,12 @@
       </div>
     {:else}
       <!-- Standard Input Layout -->
-      <div class="flex items-center">
+      <div class="relative flex items-center w-full">
+        {#if $$slots.leftIcon}
+          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
+            <slot name="leftIcon" />
+          </div>
+        {/if}
         <input
           bind:this={inputElement}
           {id}
@@ -411,13 +474,15 @@
           on:change={checkForAutofill}
           on:animationstart={handleAnimationStart}
           on:blur={handleBlur}
+          on:keydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="input-field {icon
+          class="input-field flex-1 {icon || (showClearButton && inputValue)
             ? 'pr-10'
             : ''} {getContentFloatClass()} {displayErrorText
             ? 'input-error'
             : ''} {getSizeClass()} {shouldAnimate ? 'input-animate-focus' : ''} {className}"
+          style={$$slots.leftIcon ? 'padding-left: 2.5rem;' : ''}
           required={false}
           {disabled}
           {readonly}
@@ -426,7 +491,26 @@
           {autofocus}
           inputmode={computedInputmode}
         />
-        {#if controlled && (buttonIcon || buttonText)}
+        {#if showClearButton && inputValue}
+          <button
+            type="button"
+            on:click={clearInput}
+            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 input-clear-button"
+            aria-label="Clear input"
+            tabindex="-1"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              class="w-4 h-4"
+            >
+              <path
+                d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+              />
+            </svg>
+          </button>
+        {:else if controlled && (buttonIcon || buttonText)}
           <button
             type="button"
             on:click={handleButtonClick}
@@ -447,6 +531,13 @@
             {/if}
           </button>
         {/if}
+        {#if icon && type !== "textarea" && !(showClearButton && inputValue)}
+          <img
+            src={icon}
+            alt="Input icon"
+            class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2 text-Text-Primary"
+          />
+        {/if}
       </div>
     {/if}
 
@@ -467,17 +558,9 @@
         {#if helperIcon || hintIcon}
           <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
         {/if}
-        <span>{helperText || hintText}</span>
+        <span>{@html helperText || hintText}</span>
       </div>
     {/if}
-
-    {#if icon && type !== "textarea"}
-      <img
-        src={icon}
-        alt="Input icon"
-        class="absolute inset-y-0 right-0 w-5 h-5 mr-3 top-1/2 transform -translate-y-1/2 text-Text-Primary"
-      />
-    {/if}
   </div>
 </div>
 
@@ -549,6 +632,18 @@
     cursor: not-allowed;
   }
 
+  .input-clear-button {
+    color: var(--input-text-placeholder);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: color 0.15s ease;
+  }
+
+  .input-clear-button:hover {
+    color: var(--input-text);
+  }
+
   .input-field {
     padding: 0.25rem 0.625rem;
     height: 40px;

package/dist/components/Input/Input.svelte.d.ts

@@ -4,17 +4,18 @@ type Input = SvelteComponent<{
     size?: string | undefined;
     className?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
-    name?: string | undefined;
     icon?: null | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
     required?: boolean | undefined;
     optional?: boolean | undefined;
     buttonIcon?: null | undefined;
     buttonText?: null | undefined;
     maxlength?: null | undefined;
     minlength?: null | undefined;
-    placeholder?: string | undefined;
-    id?: string | undefined;
     textareaSize?: string | undefined;
     errorText?: string | undefined;
     helperText?: string | undefined;
@@ -25,7 +26,6 @@ type Input = SvelteComponent<{
     readonly?: boolean | undefined;
     controlled?: boolean | undefined;
     onButtonClick?: null | undefined;
-    value?: string | undefined;
     autocomplete?: null | undefined;
     autofocus?: boolean | undefined;
     showPasswordToggle?: boolean | undefined;
@@ -36,9 +36,17 @@ type Input = SvelteComponent<{
     inputmode?: null | undefined;
     showErrors?: boolean | undefined;
     disableBuiltInValidation?: boolean | undefined;
+    instantSearch?: boolean | undefined;
+    debounceMs?: number | undefined;
+    minSearchChars?: number | undefined;
+    showClearButton?: boolean | undefined;
 }, {
+    search: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
-}, {}> & {
+}, {
+    leftIcon: {};
+}> & {
     $$bindings?: string | undefined;
 };
 declare const Input: $$__sveltets_2_IsomorphicComponent<{
@@ -46,17 +54,18 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     size?: string | undefined;
     className?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
-    name?: string | undefined;
     icon?: null | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
     required?: boolean | undefined;
     optional?: boolean | undefined;
     buttonIcon?: null | undefined;
     buttonText?: null | undefined;
     maxlength?: null | undefined;
     minlength?: null | undefined;
-    placeholder?: string | undefined;
-    id?: string | undefined;
     textareaSize?: string | undefined;
     errorText?: string | undefined;
     helperText?: string | undefined;
@@ -67,7 +76,6 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     readonly?: boolean | undefined;
     controlled?: boolean | undefined;
     onButtonClick?: null | undefined;
-    value?: string | undefined;
     autocomplete?: null | undefined;
     autofocus?: boolean | undefined;
     showPasswordToggle?: boolean | undefined;
@@ -78,9 +86,17 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     inputmode?: null | undefined;
     showErrors?: boolean | undefined;
     disableBuiltInValidation?: boolean | undefined;
+    instantSearch?: boolean | undefined;
+    debounceMs?: number | undefined;
+    minSearchChars?: number | undefined;
+    showClearButton?: boolean | undefined;
 }, {
+    search: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {
+    leftIcon: {};
+}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/Input/Input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAkjB;6CATrgB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmdA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAwnB;6CAd3kB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Input/MultiSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -117,10 +117,9 @@
 
   onMount(() => {
     document.addEventListener("click", handleClickOutside);
-  });
-
-  onDestroy(() => {
-    document.removeEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
   });
 </script>
 

package/dist/components/Input/MultiSelect.svelte.d.ts

@@ -2,12 +2,12 @@ export default MultiSelect;
 type MultiSelect = SvelteComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: any[] | undefined;
     name?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
+    label?: string | undefined;
     id?: string | undefined;
-    value?: any[] | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
     hideClear?: boolean | undefined;
@@ -21,12 +21,12 @@ type MultiSelect = SvelteComponent<{
 declare const MultiSelect: $$__sveltets_2_IsomorphicComponent<{
     error?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
+    value?: any[] | undefined;
     name?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
+    label?: string | undefined;
     id?: string | undefined;
-    value?: any[] | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
     hideClear?: boolean | undefined;

package/dist/components/Input/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuNA;;;;;;;;;;;;;;;;mBAAqO;6CATxL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsNA;;;;;;;;;;;;;;;;mBAAqO;6CATxL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Input/OTPInput.svelte

@@ -89,7 +89,7 @@
       {disabled}
       aria-label="Digit {index + 1} of {length}"
       aria-describedby="otp-instructions"
-      class="otp-input w-12 h-12 md:w-14 md:h-14 text-center text-xl md:text-2xl text-Text-Primary font-semibold border-2 border-stroke-Primary rounded-xl focus:border-primary-700 focus:outline-none transition-colors bg-BG-Primary disabled:bg-BG-Secondary disabled:cursor-not-allowed"
+      class="otp-input w-12 h-12 md:w-14 md:h-14 text-center text-xl md:text-2xl text-text-primary font-semibold border-2 border-stroke-secondary rounded-xl focus:border-brand-primary focus:outline-none transition-colors bg-bg-tertiary disabled:bg-bg-quaternary disabled:cursor-not-allowed"
       on:input={(e) => handleInput(index, e)}
       on:keydown={(e) => handleKeyDown(index, e)}
       on:paste={handlePaste}

package/dist/components/Input/Search.svelte

@@ -0,0 +1,173 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  // API compatible with flowbite-svelte Search
+  export let value = "";
+  export let placeholder = "Search";
+  export let size = "lg"; // sm, md, lg
+  export let disabled = false;
+  export let id = "";
+  export let name = "";
+
+  // Additional props
+  let className = "";
+  export { className as class };
+
+  const sizes = {
+    sm: { icon: "w-3.5 h-3.5", input: "h-8 text-xs pl-8", wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: "h-10 text-sm pl-9", wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: "h-11 text-sm pl-10", wrapper: "h-11" }
+  };
+
+  $: sizeConfig = sizes[size] || sizes.lg;
+
+  function handleInput(event) {
+    value = event.target.value;
+    dispatch("input", event);
+  }
+
+  function handleChange(event) {
+    dispatch("change", event);
+  }
+
+  function handleKeydown(event) {
+    dispatch("keydown", event);
+  }
+
+  function handleKeyup(event) {
+    dispatch("keyup", event);
+  }
+
+  function handleFocus(event) {
+    dispatch("focus", event);
+  }
+
+  function handleBlur(event) {
+    dispatch("blur", event);
+  }
+</script>
+
+<div class="search-wrapper {sizeConfig.wrapper} {className}">
+  <div class="search-icon-wrapper">
+    <svg
+      class="search-icon {sizeConfig.icon}"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </div>
+  <input
+    type="search"
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    class="search-input {sizeConfig.input}"
+    bind:value
+    on:input={handleInput}
+    on:change={handleChange}
+    on:keydown={handleKeydown}
+    on:keyup={handleKeyup}
+    on:focus={handleFocus}
+    on:blur={handleBlur}
+    {...$$restProps}
+  />
+  {#if $$slots.default}
+    <div class="search-actions">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .search-wrapper {
+    --search-bg: #f9fafb;
+    --search-text: #0d1526;
+    --search-text-placeholder: #6b7280;
+    --search-border: #e5e7eb;
+    --search-focus-ring: #3b82f6;
+    --search-icon-color: #6b7280;
+    position: relative;
+    width: 100%;
+  }
+
+  .search-icon-wrapper {
+    position: absolute;
+    inset-y: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding-left: 0.75rem;
+    pointer-events: none;
+  }
+
+  .search-icon {
+    color: var(--search-icon-color);
+  }
+
+  .search-input {
+    width: 100%;
+    padding-right: 0.75rem;
+    background-color: var(--search-bg);
+    color: var(--search-text);
+    font-weight: 500;
+    border: 1px solid var(--search-border);
+    border-radius: 0.5rem;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .search-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--search-focus-ring);
+    border-color: var(--search-focus-ring);
+  }
+
+  .search-input:hover:not(:focus):not(:disabled) {
+    border-color: var(--search-focus-ring);
+  }
+
+  .search-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .search-input::-moz-placeholder {
+    color: var(--search-text-placeholder);
+  }
+
+  .search-input::placeholder {
+    color: var(--search-text-placeholder);
+  }
+
+  /* Hide browser's default clear button on search inputs */
+  .search-input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .search-actions {
+    position: absolute;
+    inset-y: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    color: var(--search-icon-color);
+  }
+
+  /* Dark mode overrides */
+  :global(.dark) .search-wrapper {
+    --search-bg: #111827;
+    --search-text: #f7f7f8;
+    --search-text-placeholder: #9ca3af;
+    --search-border: #374151;
+    --search-icon-color: #9ca3af;
+  }
+</style>

package/dist/components/Input/Search.svelte.d.ts

@@ -0,0 +1,68 @@
+export default Search;
+type Search = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
+}, {
+    default: {};
+}>, {
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    keydown: CustomEvent<any>;
+    keyup: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Search: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
+}, {
+    default: {};
+}>, {
+    input: CustomEvent<any>;
+    change: CustomEvent<any>;
+    keydown: CustomEvent<any>;
+    keyup: CustomEvent<any>;
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Search.svelte.d.ts.map

package/dist/components/Input/Search.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;eAAgM;sCAT1J,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}