@getmicdrop/svelte-components 2.8.1 → 3.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/DropdownItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuEA;;;WAjBW,MAAM,GAAC,SAAS;;;;;;;;;eAiBgI;sCATrH,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"}
+{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/DropdownItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+EA;;;WAjBW,MAAM,GAAC,SAAS;;;;;;;;;eAiBgI;sCATrH,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"}

package/dist/components/Dropdown/SelectDropdown.svelte

@@ -12,6 +12,7 @@
    * />
    */
   import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+  import { ChevronDownOutline } from "../Icons";
 
   /** @type {Array<{label: string, value: string}>} Options to display */
   export let options = [];
@@ -30,6 +31,7 @@
   let isOpen = false;
   let triggerRef;
   let menuRef;
+  let containerRef;
   let focusedIndex = -1;
   let optionElements = [];
 
@@ -64,15 +66,17 @@
     triggerRef?.focus();
   }
 
+  // CRITICAL FIX: Click-outside detection using mousedown for reliable detection
   function handleClickOutside(event) {
-    if (
-      triggerRef &&
-      !triggerRef.contains(event.target) &&
-      menuRef &&
-      !menuRef.contains(event.target)
-    ) {
-      isOpen = false;
+    if (!isOpen) return;
+
+    // Check if click is inside the container (trigger or menu)
+    if (containerRef && containerRef.contains(event.target)) {
+      return;
     }
+
+    // Click was outside - close the dropdown
+    isOpen = false;
   }
 
   function handleKeyDown(event) {
@@ -113,189 +117,59 @@
 
   onMount(() => {
     if (typeof window !== "undefined") {
-      window.addEventListener("click", handleClickOutside);
-      window.addEventListener("keydown", handleKeyDown);
+      // Use mousedown for click-outside to capture before click completes
+      document.addEventListener("mousedown", handleClickOutside, true);
+      document.addEventListener("keydown", handleKeyDown);
     }
   });
 
   onDestroy(() => {
     if (typeof window !== "undefined") {
-      window.removeEventListener("click", handleClickOutside);
-      window.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handleClickOutside, true);
+      document.removeEventListener("keydown", handleKeyDown);
     }
   });
 </script>
 
-<div class="select-dropdown {className}">
+<div bind:this={containerRef} class="relative inline-block text-left {className}">
   <button
     bind:this={triggerRef}
     type="button"
-    class="select-dropdown__trigger"
-    class:select-dropdown__trigger--disabled={disabled}
+    class="inline-flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-blue-800 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     on:click|preventDefault={toggleDropdown}
     aria-haspopup="listbox"
     aria-expanded={isOpen}
     aria-label={placeholder}
     {disabled}
   >
-    <span class="select-dropdown__value">
+    <span class="truncate">
       {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>
+    <ChevronDownOutline class="w-4 h-4 ml-2 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
   </button>
 
   {#if isOpen}
     <div
       bind:this={menuRef}
-      class="select-dropdown__menu"
+      class="absolute z-10 mt-1 w-full bg-white divide-y divide-gray-100 rounded-lg shadow-lg dark:bg-gray-700 dark:divide-gray-600 max-h-60 overflow-y-auto"
       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}
+      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+        {#each options as option}
+          <li>
+            <button
+              type="button"
+              class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white {selected?.value === option.value ? 'bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white' : ''}"
+              on:click|preventDefault={() => selectOption(option)}
+              role="option"
+              aria-selected={selected?.value === option.value}
+            >
+              {option.label}
+            </button>
+          </li>
+        {/each}
+      </ul>
     </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.map

@@ -1 +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"}
+{"version":3,"file":"SelectDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/SelectDropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAmLA;;;;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

@@ -1,6 +1,7 @@
 <script>
   /**
    * EmptyState - Display an empty state message with optional icon
+   * Follows Flowbite card/alert pattern for empty states
    *
    * @example
    * <EmptyState message="No results found" />
@@ -22,59 +23,17 @@
   export { className as class };
 </script>
 
-<div class="empty-state {className}">
+<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
   {#if icon}
     {#if iconType === 'component'}
-      <svelte:component this={icon} class="empty-state__icon {iconSize}" />
+      <svelte:component this={icon} class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
     {:else if iconType === 'image'}
-      <img src={icon} alt="" class="empty-state__icon {iconSize}" />
+      <img src={icon} alt="" class="mb-3 {iconSize}" />
     {/if}
   {/if}
 
-  <h3 class="empty-state__message">{message}</h3>
+  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{message}</h3>
   {#if subtext}
-    <p class="empty-state__subtext">{subtext}</p>
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{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.map

@@ -1 +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"}
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/EmptyState/EmptyState.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA4DA;;;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.spec.js

@@ -23,7 +23,7 @@ describe("ErrorDisplay Component Tests", () => {
       props: { error: "Error", show: true },
     });
     const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("text-accent-Danger");
+    expect(wrapper).toHaveClass("text-red-600");
   });
 
   test("Has shake class when shake is true", () => {
@@ -31,7 +31,7 @@ describe("ErrorDisplay Component Tests", () => {
       props: { error: "Error", show: true, shake: true },
     });
     const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("error-shake");
+    expect(wrapper).toHaveClass("animate-shake");
   });
 
   test("Does not have shake class when shake is false", () => {
@@ -39,7 +39,7 @@ describe("ErrorDisplay Component Tests", () => {
       props: { error: "Error", show: true, shake: false },
     });
     const wrapper = container.firstChild;
-    expect(wrapper).not.toHaveClass("error-shake");
+    expect(wrapper).not.toHaveClass("animate-shake");
   });
 
   test("Contains icon element", () => {

package/dist/components/ErrorDisplay.stories.svelte

@@ -1,7 +1,9 @@
-<script context="module">
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import ErrorDisplay from './ErrorDisplay.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/ErrorDisplay',
     component: ErrorDisplay,
     tags: ['autodocs'],
@@ -27,12 +29,12 @@
         description: 'Size of the icon',
       },
     },
-  };
+  });
+
 </script>
 
 <script>
-  import { Story, Template } from '@storybook/addon-svelte-csf';
-
+  
   let showShakeDemo = false;
   function triggerShake() {
     showShakeDemo = false;
@@ -42,9 +44,6 @@
   }
 </script>
 
-<Template let:args>
-  <ErrorDisplay {...args} />
-</Template>
 
 <Story
   name="Default"
@@ -67,7 +66,7 @@
 <Story name="Interactive Shake">
   <div class="space-y-4">
     <button
-      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
       on:click={triggerShake}
     >
       Trigger Error Shake

package/dist/components/ErrorDisplay.stories.svelte.d.ts

@@ -1,38 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { ErrorDisplay as component };
-    export let tags: string[];
-    export namespace argTypes {
-        namespace error {
-            let control: string;
-            let description: string;
-        }
-        namespace show {
-            let control_1: string;
-            export { control_1 as control };
-            let description_1: string;
-            export { description_1 as description };
-        }
-        namespace shake {
-            let control_2: string;
-            export { control_2 as control };
-            let description_2: string;
-            export { description_2 as description };
-        }
-        namespace icon {
-            let control_3: string;
-            export { control_3 as control };
-            let description_3: string;
-            export { description_3 as description };
-        }
-        namespace iconSize {
-            let control_4: string;
-            export { control_4 as control };
-            let description_4: string;
-            export { description_4 as description };
-        }
-    }
-}
 export default ErrorDisplay;
 type ErrorDisplay = SvelteComponent<{
     [x: string]: never;

package/dist/components/ErrorDisplay.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorDisplay.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ErrorDisplay.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GA;;;;mBAAwH;yBA1G7F,uBAAuB;6CAiGL,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;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;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ErrorDisplay.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ErrorDisplay.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyGA;;;;mBAAwH;yBApG7F,uBAAuB;6CA2FL,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/ErrorDisplay.svelte

@@ -22,37 +22,9 @@
 
 {#if error && show}
   <div
-    class="flex items-center gap-1.5 text-accent-Danger {shake
-      ? 'error-shake'
-      : ''} {className}"
+    class="flex items-center gap-1.5 text-red-600 dark:text-red-500 {shake ? 'animate-shake' : ''} {className}"
   >
     <Icon name={icon} size={iconSize} />
     <p class="text-sm font-medium">{error}</p>
   </div>
 {/if}
-
-<style>
-  @keyframes shake {
-    0%,
-    100% {
-      transform: translateX(0);
-    }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-      transform: translateX(-4px);
-    }
-    20%,
-    40%,
-    60%,
-    80% {
-      transform: translateX(4px);
-    }
-  }
-
-  .error-shake {
-    animation: shake 0.625s ease-in-out;
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorDisplay.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ErrorDisplay.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAuDA;;;;;;;;;mBAAgL;6CATnI,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":"ErrorDisplay.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ErrorDisplay.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAmDA;;;;;;;;;mBAAgL;6CATnI,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/FAQs/FAQs.svelte

@@ -1,49 +1,79 @@
 <script>
+  import { ChevronUpOutline } from "../Icons";
+
+  /** @type {Array<{question: string, answer: string} | string>} */
   export let faqs = [];
+  /** @type {string} */
   export let title = "FAQs";
+  /** @type {boolean} */
   export let showTitle = true;
+  /** @type {boolean} - Whether to use accordion style (collapsible) or simple list */
+  export let accordion = false;
+
+  /** @type {number | null} - Currently open accordion item index */
+  let openIndex = null;
 
-  $: items = faqs.map(f =>
+  $: items = faqs.map((f) =>
     typeof f === 'string' ? { question: '', answer: f } : f
   );
+
+  function toggleAccordion(index) {
+    openIndex = openIndex === index ? null : index;
+  }
 </script>
 
 <div class="flex flex-col gap-3">
   {#if showTitle}
-    <h2 class="section-title font-medium text-xl">{title}</h2>
+    <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
   {/if}
 
   {#if items.length}
-    <div class="space-y-4">
-      {#each items as { question, answer }}
-        <div>
-          {#if question}
-            <p class="question-text text-[15px] font-medium mb-1">{question}</p>
-          {/if}
-          <p class="answer-text text-[15px] leading-relaxed">{answer}</p>
-        </div>
-      {/each}
-    </div>
+    {#if accordion}
+      <!-- Flowbite Accordion Pattern -->
+      <div class="border border-gray-200 rounded-lg dark:border-gray-700">
+        {#each items as { question, answer }, index}
+          <div>
+            <h3>
+              <button
+                type="button"
+                class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800 gap-3
+                  {index === 0 ? 'rounded-t-lg' : ''}
+                  {index === items.length - 1 && openIndex !== index ? 'border-b-0 rounded-b-lg' : ''}
+                  {openIndex === index ? 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white' : ''}"
+                on:click={() => toggleAccordion(index)}
+                aria-expanded={openIndex === index}
+                aria-controls="accordion-body-{index}"
+              >
+                <span>{question || `Item ${index + 1}`}</span>
+                <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {openIndex === index ? 'rotate-180' : ''}" aria-hidden="true" />
+              </button>
+            </h3>
+            <div
+              id="accordion-body-{index}"
+              class="{openIndex === index ? '' : 'hidden'}"
+              aria-labelledby="accordion-heading-{index}"
+            >
+              <div class="p-5 border-b border-gray-200 dark:border-gray-700 {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
+                <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{answer}</p>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <!-- Simple List Pattern (Flowbite Typography) -->
+      <div class="space-y-4">
+        {#each items as { question, answer }}
+          <div>
+            {#if question}
+              <p class="text-sm font-medium text-gray-900 dark:text-white mb-1">{question}</p>
+            {/if}
+            <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{answer}</p>
+          </div>
+        {/each}
+      </div>
+    {/if}
   {:else}
-    <p class="empty-text text-sm">No FAQs available.</p>
+    <p class="text-sm text-gray-500 dark:text-gray-400">No FAQs available.</p>
   {/if}
 </div>
-
-<style>
-  /* Theme-responsive colors using CSS variables */
-  .section-title {
-    color: hsl(var(--Text-Primary));
-  }
-
-  .question-text {
-    color: hsl(var(--Text-Primary));
-  }
-
-  .answer-text {
-    color: hsl(var(--Text-Secondary));
-  }
-
-  .empty-text {
-    color: hsl(var(--Text-Tartiary));
-  }
-</style>

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

@@ -1,17 +1,25 @@
 export default FAQs;
 type FAQs = SvelteComponent<{
+    accordion?: boolean | undefined;
     title?: string | undefined;
     showTitle?: boolean | undefined;
-    faqs?: any[] | undefined;
+    faqs?: (string | {
+        question: string;
+        answer: string;
+    })[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
 declare const FAQs: $$__sveltets_2_IsomorphicComponent<{
+    accordion?: boolean | undefined;
     title?: string | undefined;
     showTitle?: boolean | undefined;
-    faqs?: any[] | undefined;
+    faqs?: (string | {
+        question: string;
+        answer: string;
+    })[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -1 +1 @@
-{"version":3,"file":"FAQs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FAQs/FAQs.svelte.js"],"names":[],"mappings":";;;;;;;;;;AA+CA;;;;;;mBAA8I;6CATjG,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":"FAQs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FAQs/FAQs.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA0FA;;;;;kBAb4B,MAAM;gBAAU,MAAM;;;;mBAawG;6CAT7G,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"}