@getmicdrop/svelte-components 2.3.0 → 2.6.0

package/dist/components/Dropdown/SelectDropdown.svelte

@@ -0,0 +1,301 @@
+<script>
+  /**
+   * SelectDropdown - A self-contained dropdown with trigger button and option selection.
+   * Includes full keyboard navigation (Arrow keys, Home, End, Escape).
+   *
+   * @example
+   * <SelectDropdown
+   *   options={[{ label: 'Option 1', value: 'opt1' }, { label: 'Option 2', value: 'opt2' }]}
+   *   bind:selected
+   *   placeholder="Select an option"
+   *   on:select={(e) => console.log(e.detail)}
+   * />
+   */
+  import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+
+  /** @type {Array<{label: string, value: string}>} Options to display */
+  export let options = [];
+  /** @type {{label: string, value: string}|null} Currently selected option */
+  export let selected = null;
+  /** @type {string} Placeholder text when no option is selected */
+  export let placeholder = "Select";
+  /** @type {string} Additional CSS classes for the container */
+  let className = "";
+  export { className as class };
+  /** @type {boolean} Whether the dropdown is disabled */
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+
+  let isOpen = false;
+  let triggerRef;
+  let menuRef;
+  let focusedIndex = -1;
+  let optionElements = [];
+
+  async function toggleDropdown() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = -1;
+      await tick();
+      updateOptionElements();
+    }
+  }
+
+  function updateOptionElements() {
+    if (menuRef) {
+      optionElements = Array.from(menuRef.querySelectorAll('[role="option"]'));
+    }
+  }
+
+  function focusOption(index) {
+    if (optionElements.length === 0) return;
+    if (index < 0) index = optionElements.length - 1;
+    if (index >= optionElements.length) index = 0;
+    focusedIndex = index;
+    optionElements[focusedIndex]?.focus();
+  }
+
+  function selectOption(option) {
+    selected = option;
+    dispatch("select", option);
+    isOpen = false;
+    triggerRef?.focus();
+  }
+
+  function handleClickOutside(event) {
+    if (
+      triggerRef &&
+      !triggerRef.contains(event.target) &&
+      menuRef &&
+      !menuRef.contains(event.target)
+    ) {
+      isOpen = false;
+    }
+  }
+
+  function handleKeyDown(event) {
+    if (!isOpen) return;
+
+    // Only handle if event originated from within this dropdown
+    if (!menuRef?.contains(event.target) && !triggerRef?.contains(event.target)) {
+      return;
+    }
+
+    switch (event.key) {
+      case "Escape":
+        isOpen = false;
+        triggerRef?.focus();
+        event.preventDefault();
+        break;
+      case "ArrowDown":
+        focusOption(focusedIndex + 1);
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        focusOption(focusedIndex - 1);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusOption(0);
+        event.preventDefault();
+        break;
+      case "End":
+        focusOption(optionElements.length - 1);
+        event.preventDefault();
+        break;
+      case "Tab":
+        isOpen = false;
+        break;
+    }
+  }
+
+  onMount(() => {
+    if (typeof window !== "undefined") {
+      window.addEventListener("click", handleClickOutside);
+      window.addEventListener("keydown", handleKeyDown);
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof window !== "undefined") {
+      window.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("keydown", handleKeyDown);
+    }
+  });
+</script>
+
+<div class="select-dropdown {className}">
+  <button
+    bind:this={triggerRef}
+    type="button"
+    class="select-dropdown__trigger"
+    class:select-dropdown__trigger--disabled={disabled}
+    on:click|preventDefault={toggleDropdown}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={placeholder}
+    {disabled}
+  >
+    <span class="select-dropdown__value">
+      {selected?.label || placeholder}
+    </span>
+    <svg
+      class="select-dropdown__icon"
+      class:select-dropdown__icon--open={isOpen}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M19 9l-7 7-7-7"
+      />
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div
+      bind:this={menuRef}
+      class="select-dropdown__menu"
+      role="listbox"
+      aria-label={placeholder}
+    >
+      {#each options as option}
+        <button
+          type="button"
+          class="select-dropdown__option"
+          class:select-dropdown__option--selected={selected?.value === option.value}
+          on:click|preventDefault={() => selectOption(option)}
+          role="option"
+          aria-selected={selected?.value === option.value}
+        >
+          {option.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .select-dropdown {
+    position: relative;
+    display: inline-block;
+    font-size: 0.75rem;
+  }
+
+  .select-dropdown__trigger {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    text-align: left;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.375rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .select-dropdown__trigger:hover:not(:disabled) {
+    border-color: hsl(var(--Stroke-Secondary, 220 13% 75%));
+  }
+
+  .select-dropdown__trigger:focus {
+    outline: none;
+    border-color: hsl(var(--Brand-Primary, 221 83% 53%));
+    box-shadow: 0 0 0 2px hsl(var(--Brand-Primary, 221 83% 53%) / 0.2);
+  }
+
+  .select-dropdown__trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select-dropdown__value {
+    flex: 1;
+  }
+
+  .select-dropdown__icon {
+    width: 1rem;
+    height: 1rem;
+    margin-left: 0.5rem;
+    transition: transform 0.15s ease;
+  }
+
+  .select-dropdown__icon--open {
+    transform: rotate(180deg);
+  }
+
+  .select-dropdown__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    margin-top: 0.25rem;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.375rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .select-dropdown__menu::-webkit-scrollbar {
+    display: none;
+  }
+
+  .select-dropdown__option {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    text-align: left;
+    background: transparent;
+    border: none;
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .select-dropdown__option:hover {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .select-dropdown__option:focus {
+    outline: none;
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .select-dropdown__option--selected {
+    background-color: hsl(var(--Brand-Primary, 221 83% 53%) / 0.1);
+    color: hsl(var(--Brand-Primary, 221 83% 53%));
+  }
+
+  /* Dark mode */
+  :global(.dark) .select-dropdown__trigger {
+    background-color: hsl(var(--BG-Primary, 220 13% 15%));
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+    border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
+  }
+
+  :global(.dark) .select-dropdown__menu {
+    background-color: hsl(var(--BG-Primary, 220 13% 15%));
+    border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
+  }
+
+  :global(.dark) .select-dropdown__option {
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+  }
+
+  :global(.dark) .select-dropdown__option:hover,
+  :global(.dark) .select-dropdown__option:focus {
+    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
+  }
+</style>

package/dist/components/Dropdown/SelectDropdown.svelte.d.ts

@@ -0,0 +1,51 @@
+export default SelectDropdown;
+type SelectDropdown = SvelteComponent<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    options?: {
+        label: string;
+        value: string;
+    }[] | undefined;
+    selected?: {
+        label: string;
+        value: string;
+    } | null | undefined;
+    placeholder?: string | undefined;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SelectDropdown: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    options?: {
+        label: string;
+        value: string;
+    }[] | undefined;
+    selected?: {
+        label: string;
+        value: string;
+    } | null | undefined;
+    placeholder?: string | undefined;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=SelectDropdown.svelte.d.ts.map

package/dist/components/Dropdown/SelectDropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/SelectDropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA6KA;;;;eAdyB,MAAM;eAAS,MAAM;;;eAC3B,MAAM;eAAS,MAAM;;;;;;;mBAa2I;6CATtI,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/EmptyState/EmptyState.svelte

@@ -0,0 +1,80 @@
+<script>
+  /**
+   * EmptyState - Display an empty state message with optional icon
+   *
+   * @example
+   * <EmptyState message="No results found" />
+   * <EmptyState message="No events" subtext="Create your first event to get started" />
+   */
+
+  /** @type {string} Main message to display */
+  export let message = 'No results found';
+  /** @type {string} Secondary descriptive text */
+  export let subtext = '';
+  /** @type {any} Icon component or image path */
+  export let icon = null;
+  /** @type {'component' | 'image'} Type of icon provided */
+  export let iconType = 'component';
+  /** @type {string} Size classes for the icon */
+  export let iconSize = 'w-20 h-20';
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class="empty-state {className}">
+  {#if icon}
+    {#if iconType === 'component'}
+      <svelte:component this={icon} class="empty-state__icon {iconSize}" />
+    {:else if iconType === 'image'}
+      <img src={icon} alt="" class="empty-state__icon {iconSize}" />
+    {/if}
+  {/if}
+
+  <h3 class="empty-state__message">{message}</h3>
+  {#if subtext}
+    <p class="empty-state__subtext">{subtext}</p>
+  {/if}
+</div>
+
+<style>
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2.5rem 1.5rem;
+    text-align: center;
+  }
+
+  .empty-state__icon {
+    margin-bottom: 0.75rem;
+    color: hsl(var(--Text-Tertiary, 220 9% 46%));
+  }
+
+  .empty-state__message {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: hsl(var(--Text-Primary, 220 13% 18%));
+    margin: 0;
+  }
+
+  .empty-state__subtext {
+    font-size: 0.875rem;
+    color: hsl(var(--Text-Secondary, 220 9% 46%));
+    margin: 0.25rem 0 0;
+  }
+
+  /* Dark mode */
+  :global(.dark) .empty-state__icon {
+    color: hsl(var(--Text-Tertiary, 220 9% 60%));
+  }
+
+  :global(.dark) .empty-state__message {
+    color: hsl(var(--Text-Primary, 0 0% 95%));
+  }
+
+  :global(.dark) .empty-state__subtext {
+    color: hsl(var(--Text-Secondary, 220 9% 70%));
+  }
+</style>

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

@@ -0,0 +1,37 @@
+export default EmptyState;
+type EmptyState = SvelteComponent<{
+    class?: string | undefined;
+    message?: string | undefined;
+    icon?: any;
+    subtext?: string | undefined;
+    iconType?: "image" | "component" | undefined;
+    iconSize?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    message?: string | undefined;
+    icon?: any;
+    subtext?: string | undefined;
+    iconType?: "image" | "component" | undefined;
+    iconSize?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=EmptyState.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/EmptyState/EmptyState.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA6DA;;;WAbW,GAAG;;;;;;mBAaoK;6CATrI,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/ErrorDisplay.svelte.d.ts

@@ -3,9 +3,9 @@ type ErrorDisplay = SvelteComponent<{
     className?: string | undefined;
     error?: string | undefined;
     show?: boolean | undefined;
-    shake?: boolean | undefined;
     icon?: string | undefined;
     iconSize?: string | undefined;
+    shake?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -15,9 +15,9 @@ declare const ErrorDisplay: $$__sveltets_2_IsomorphicComponent<{
     className?: string | undefined;
     error?: string | undefined;
     show?: boolean | undefined;
-    shake?: boolean | undefined;
     icon?: string | undefined;
     iconSize?: string | undefined;
+    shake?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Input/Input.svelte

@@ -457,6 +457,11 @@
     {:else}
       <!-- Standard Input Layout -->
       <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}
@@ -471,7 +476,7 @@
           on:keydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="input-field flex-1 {icon || (showClearButton && inputValue)
+          class="input-field flex-1 {$$slots.leftIcon ? 'pl-10' : ''} {icon || (showClearButton && inputValue)
             ? 'pr-10'
             : ''} {getContentFloatClass()} {displayErrorText
             ? 'input-error'

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

@@ -4,18 +4,18 @@ type Input = SvelteComponent<{
     size?: string | undefined;
     className?: string | undefined;
     disabled?: boolean | undefined;
+    icon?: null | undefined;
     value?: string | undefined;
     name?: string | undefined;
     label?: string | undefined;
-    icon?: null | 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;
@@ -44,7 +44,9 @@ type Input = SvelteComponent<{
     search: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}> & {
+}, {
+    leftIcon: {};
+}> & {
     $$bindings?: string | undefined;
 };
 declare const Input: $$__sveltets_2_IsomorphicComponent<{
@@ -52,18 +54,18 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     size?: string | undefined;
     className?: string | undefined;
     disabled?: boolean | undefined;
+    icon?: null | undefined;
     value?: string | undefined;
     name?: string | undefined;
     label?: string | undefined;
-    icon?: null | 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;
@@ -92,7 +94,9 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwcA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAknB;6CATrkB,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkdA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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

@@ -5,9 +5,9 @@ type MultiSelect = SvelteComponent<{
     value?: any[] | undefined;
     name?: string | undefined;
     label?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
     id?: string | undefined;
+    placeholder?: string | undefined;
+    required?: boolean | undefined;
     animateFocus?: boolean | undefined;
     items?: any[] | undefined;
     hideClear?: boolean | undefined;
@@ -24,9 +24,9 @@ declare const MultiSelect: $$__sveltets_2_IsomorphicComponent<{
     value?: any[] | undefined;
     name?: string | undefined;
     label?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
     id?: string | 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"}