@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/AboutShow/AboutShow.svelte

@@ -1,6 +1,5 @@
 <script>
-  import Close from 'carbon-icons-svelte/lib/Close.svelte';
-  import LogoInstagram from 'carbon-icons-svelte/lib/LogoInstagram.svelte';
+  import { CloseOutline, LogoInstagram } from '../Icons';
 
   export let performers = [];
   export let ShowImage = '';
@@ -45,34 +44,34 @@
 
 <div class="flex flex-col gap-3">
   {#if showTitle}
-    <h2 class="section-title font-medium text-xl">{title}</h2>
+    <h2 class="font-medium text-xl text-gray-900 dark:text-white">{title}</h2>
   {/if}
 
   {#if ShowImage && description}
     <div>
-      <img src={ShowImage} alt="" class="show-image rounded-lg object-contain w-full" />
+      <img src={ShowImage} alt="" class="rounded-lg object-contain w-full bg-gray-50 dark:bg-gray-800" />
     </div>
   {/if}
 
   <!-- Description -->
   {#if description}
     {#if showFullDescription || description.length <= characterLimit || !showReadMore}
-      <p class="description-text text-[15px] leading-relaxed whitespace-pre-line">{description}</p>
+      <p class="text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-300">{description}</p>
       {#if showReadMore && description.length > characterLimit}
         <button
           on:click={toggleDescription}
-          class="read-more-btn text-[15px] font-medium text-left hover:underline"
+          class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
         >
           Show less
         </button>
       {/if}
     {:else}
-      <p class="description-text text-[15px] leading-relaxed whitespace-pre-line">
+      <p class="text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-300">
         {description.slice(0, characterLimit)}...
       </p>
       <button
         on:click={toggleDescription}
-        class="read-more-btn text-[15px] font-medium text-left hover:underline"
+        class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
       >
         Show more
       </button>
@@ -96,37 +95,40 @@
             ? profile.stageName
             : `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim()}
           {@const firstName = profile?.firstName || displayName.split(' ')[0] || displayName}
-          <div class="relative performer-card">
+          <div class="relative">
             {#if activePerformer === performer.ID && !performer.shouldBeHidden}
               <!-- svelte-ignore a11y-click-events-have-key-events -->
               <!-- svelte-ignore a11y-no-static-element-interactions -->
               <div
-                class="bio-card w-[300px] sm:w-[340px] absolute rounded-lg p-4 z-50 shadow-xl {index === 0 ? 'first-child' : ''}"
+                class="w-72 sm:w-80 absolute bottom-full mb-2.5 rounded-lg p-4 z-50 shadow-xl transition-all duration-300 bg-white dark:bg-gray-800 border-2 border-blue-700 dark:border-blue-500 {index === 0 ? 'left-[190%]' : 'left-1/2 -translate-x-1/2'}"
                 on:click|stopPropagation
               >
-                <div class="arrow {index === 0 ? 'first-arrow' : ''}"></div>
+                <!-- Arrow -->
+                <div
+                  class="absolute w-3 h-3 bg-white dark:bg-gray-800 rotate-45 border-r-2 border-b-2 border-blue-700 dark:border-blue-500 -bottom-1.5 {index === 0 ? 'left-[20%]' : 'left-1/2'} -ml-1.5"
+                ></div>
 
                 <button
-                  class="close-btn absolute top-2 right-2 p-1 rounded-full transition-colors"
+                  class="absolute top-2 right-2 p-1 rounded-full transition-colors text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
                   on:click={closePerformer}
                   aria-label="Close"
                 >
-                  <Close size={18} />
+                  <CloseOutline class="w-5 h-5" />
                 </button>
 
-                <p class="bio-text text-sm leading-relaxed pr-6">
+                <p class="text-sm leading-relaxed pr-6 text-gray-600 dark:text-gray-300">
                   {profile?.biography || ''}
                 </p>
 
                 {#if profile?.instagram || profile?.twitter}
-                  <div class="social-links flex gap-2 items-center text-sm mt-3 pt-3">
+                  <div class="flex gap-2 items-center text-sm mt-3 pt-3 text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-600">
                     <span>Follow {firstName}:</span>
                     {#if profile?.instagram}
                       <a
                         href={profile.instagram}
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="social-icon hover:opacity-70 transition-opacity"
+                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
                         aria-label="Instagram profile"
                       >
                         <LogoInstagram size={20} />
@@ -137,7 +139,7 @@
                         href={profile.twitter}
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="social-icon hover:opacity-70 transition-opacity"
+                        class="text-blue-700 dark:text-blue-500 hover:opacity-70 transition-opacity"
                         aria-label="Twitter profile"
                       >
                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -153,15 +155,15 @@
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div
-              class="performer-tile rounded-lg flex flex-col gap-2 p-2 items-center w-[90px] cursor-pointer transition-all {activePerformer === performer.ID ? 'active' : ''}"
+              class="rounded-lg flex flex-col gap-2 p-2 items-center w-24 cursor-pointer transition-all bg-white dark:bg-gray-800 border hover:shadow {activePerformer === performer.ID ? 'border-blue-700 dark:border-blue-500 shadow' : 'border-gray-200 dark:border-gray-600 hover:border-blue-700 dark:hover:border-blue-500'}"
               on:click={() => togglePerformer(performer.ID)}
             >
               <img
                 src={performer.shouldBeHidden ? '' : profile?.profileImage ? getImageUrl(profile.profileImage) : ''}
                 alt={displayName || 'Performer'}
-                class="performer-image size-[68px] rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'no-image' : ''}"
+                class="size-16 rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'bg-gray-50 dark:bg-gray-700' : ''}"
               />
-              <p class="performer-name text-[11px] text-center leading-tight line-clamp-2">
+              <p class="text-xs text-center leading-tight line-clamp-2 text-gray-600 dark:text-gray-300">
                 {#if !performer.shouldBeHidden}
                   {displayName}
                 {/if}
@@ -173,106 +175,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  /* Theme-responsive colors using CSS variables */
-  .section-title {
-    color: hsl(var(--Text-Primary));
-  }
-
-  .show-image {
-    background-color: hsl(var(--BG-Secondary));
-  }
-
-  .description-text {
-    color: hsl(var(--Text-Secondary));
-  }
-
-  .read-more-btn {
-    color: hsl(var(--Brand-Primary));
-  }
-
-  .bio-card {
-    transition: all 0.3s ease;
-    bottom: calc(100% + 10px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: hsl(var(--BG-Primary));
-    border: 2px solid hsl(var(--Brand-Primary));
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  }
-
-  .bio-card.first-child {
-    left: 190%;
-  }
-
-  .arrow {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    background: hsl(var(--BG-Primary));
-    transform: rotate(45deg);
-    border-right: 2px solid hsl(var(--Brand-Primary));
-    border-bottom: 2px solid hsl(var(--Brand-Primary));
-    bottom: -6px;
-    left: 50%;
-    margin-left: -6px;
-  }
-
-  .arrow.first-arrow {
-    left: 20%;
-  }
-
-  .close-btn {
-    color: hsl(var(--Text-Tartiary));
-  }
-
-  .close-btn:hover {
-    background-color: hsl(var(--BG-Secondary));
-  }
-
-  .bio-text {
-    color: hsl(var(--Text-Secondary));
-  }
-
-  .social-links {
-    color: hsl(var(--Text-Tartiary));
-    border-top: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .social-icon {
-    color: hsl(var(--Brand-Primary));
-  }
-
-  .performer-tile {
-    background-color: hsl(var(--BG-Primary));
-    border: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .performer-tile:hover {
-    border-color: hsl(var(--Brand-Primary));
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  }
-
-  .performer-tile.active {
-    border-color: hsl(var(--Brand-Primary));
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  }
-
-  .performer-image.no-image {
-    background-color: hsl(var(--BG-Secondary));
-  }
-
-  .performer-name {
-    color: hsl(var(--Text-Secondary));
-  }
-
-  /* Line clamping */
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmKA;;;;;;;;;;;;mBAAgN;6CATnK,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":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgKA;;;;;;;;;;;;mBAAgN;6CATnK,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/Accordion/Accordion.svelte

@@ -1,9 +1,18 @@
 <script>
+  /**
+   * Accordion Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   multiple: boolean - Allow multiple items open at once
+   *   flush: boolean - Remove outer border/radius (Flowbite flush variant)
+   */
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
 
   /** @type {boolean} Whether multiple items can be open at once */
   export let multiple = false;
+  /** @type {boolean} Flush variant - no outer border */
+  export let flush = false;
   /** @type {string} Additional CSS classes */
   let className = "";
   export { className as class };
@@ -15,6 +24,7 @@
   setContext("accordion", {
     openItems,
     multiple,
+    flush,
     toggle: (id) => {
       openItems.update((items) => {
         if (items.has(id)) {
@@ -29,16 +39,13 @@
       });
     },
   });
+
+  // Flowbite-native classes
+  $: containerClasses = flush
+    ? "divide-y divide-gray-200 dark:divide-gray-700"
+    : "border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden divide-y divide-gray-200 dark:divide-gray-700";
 </script>
 
-<div class="accordion {className}">
+<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"}>
   <slot />
 </div>
-
-<style>
-  .accordion {
-    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    border-radius: 0.5rem;
-    overflow: hidden;
-  }
-</style>

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

@@ -1,6 +1,7 @@
 export default Accordion;
 type Accordion = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     multiple?: boolean | undefined;
+    flush?: boolean | undefined;
     class?: string | undefined;
 }, {
     default: {};
@@ -13,6 +14,7 @@ type Accordion = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 };
 declare const Accordion: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     multiple?: boolean | undefined;
+    flush?: boolean | undefined;
     class?: string | undefined;
 }, {
     default: {};

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Accordion/Accordion.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA+DA;;;;;;;;;eAAiJ;sCAT3G,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":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Accordion/Accordion.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA8EA;;;;;;;;;;eAAyJ;sCATnH,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/Accordion/AccordionItem.svelte

@@ -1,6 +1,15 @@
 <script>
+  /**
+   * AccordionItem Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   open: boolean - Start expanded
+   *   border: boolean - Show bottom border (Flowbite API)
+   *   borderOpenClass: string - Additional classes when open
+   */
   import { getContext, onMount } from "svelte";
   import { slide } from "svelte/transition";
+  import { ChevronUpOutline } from "../Icons";
 
   /** @type {boolean} Whether this item starts open */
   export let open = false;
@@ -12,7 +21,7 @@
   /** @type {string} CSS classes to apply when item is open (flowbite API compatibility) */
   export let borderOpenClass = "";
 
-  const { openItems, toggle } = getContext("accordion");
+  const { openItems, toggle, flush } = getContext("accordion");
 
   // Generate unique ID for this item
   let id = Math.random().toString(36).substring(2, 9);
@@ -28,114 +37,42 @@
   function handleClick() {
     toggle(id);
   }
+
+  // Flowbite-native header classes
+  $: headerClasses = [
+    "flex items-center justify-between w-full p-5 font-medium text-left",
+    "text-gray-500 dark:text-gray-400",
+    "bg-gray-100 dark:bg-gray-800",
+    "hover:bg-gray-200 dark:hover:bg-gray-700",
+    "focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
+    "gap-3",
+    isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
+  ].join(" ");
 </script>
 
-<div class="accordion-item {className} {isOpen && borderOpenClass ? borderOpenClass : ''}" class:accordion-item--open={isOpen} class:accordion-item--no-border={!border}>
-  <button
-    type="button"
-    class="accordion-item__header"
-    aria-expanded={isOpen}
-    on:click={handleClick}
-  >
-    <span class="accordion-item__title">
-      <slot name="header">Accordion Item</slot>
-    </span>
-    <svg
-      class="accordion-item__icon"
-      class:accordion-item__icon--open={isOpen}
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}">
+  <h2>
+    <button
+      type="button"
+      class={headerClasses}
+      aria-expanded={isOpen}
+      on:click={handleClick}
     >
-      <path
-        d="M5 7.5L10 12.5L15 7.5"
-        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  </button>
+      <span class="text-gray-900 dark:text-white">
+        <slot name="header">Accordion Item</slot>
+      </span>
+      <!-- Flowbite arrow icon -->
+      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" aria-hidden="true" />
+    </button>
+  </h2>
 
   {#if isOpen}
-    <div class="accordion-item__content" transition:slide={{ duration: 200 }}>
-      <div class="accordion-item__body">
-        <slot />
+    <div transition:slide={{ duration: 200 }}>
+      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'} dark:bg-gray-900">
+        <p class="text-gray-500 dark:text-gray-400">
+          <slot />
+        </p>
       </div>
     </div>
   {/if}
 </div>
-
-<style>
-  .accordion-item {
-    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-  }
-
-  .accordion-item:last-child {
-    border-bottom: none;
-  }
-
-  .accordion-item__header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 1.25rem;
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-    border: none;
-    cursor: pointer;
-    text-align: left;
-    transition: background-color 0.15s ease;
-  }
-
-  .accordion-item__header:hover {
-    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
-  }
-
-  .accordion-item__header:focus {
-    outline: none;
-  }
-
-  .accordion-item__header:focus-visible {
-    outline: 2px solid hsl(var(--Brand-Primary, 221 83% 53%));
-    outline-offset: -2px;
-  }
-
-  .accordion-item__title {
-    font-size: 1rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary, 220 13% 13%));
-  }
-
-  .accordion-item__icon {
-    flex-shrink: 0;
-    color: hsl(var(--Text-Secondary, 220 9% 46%));
-    transition: transform 0.2s ease;
-  }
-
-  .accordion-item__icon--open {
-    transform: rotate(180deg);
-  }
-
-  .accordion-item__content {
-    overflow: hidden;
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-  }
-
-  .accordion-item__body {
-    padding: 1rem 1.25rem 1.25rem;
-    color: hsl(var(--Text-Secondary, 220 9% 46%));
-    font-size: 0.875rem;
-    line-height: 1.5;
-  }
-
-  .accordion-item--no-border {
-    border-bottom: none;
-  }
-
-  .accordion-item--no-border:last-child {
-    border-bottom: none;
-  }
-</style>

package/dist/components/Accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Accordion/AccordionItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA+EA;;;;;;;;;;;;;eAA4K;sCATtI,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":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Accordion/AccordionItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsGA;;;;;;;;;;;;;eAA4K;sCATtI,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/Alert/Alert.svelte

@@ -1,66 +1,55 @@
 <script>
-    import { Alert } from "flowbite-svelte";
+    import { createEventDispatcher } from "svelte";
+    import { InfoCircleOutline, CloseOutline } from "../Icons";
 
-    /**
-     * @typedef {Object} Props
-     * @property {string} [title]
-     * @property {string} [message]
-     * @property {'info'|'success'|'warning'|'danger'} [type]
-     * @property {Function} [onClose]
-     * @property {import('svelte').Snippet} [children]
-     */
+    /** @type {string} Alert title */
+    export let title = "";
+    /** @type {string} Alert message */
+    export let message = "";
+    /** @type {'info' | 'success' | 'warning' | 'danger'} Alert type */
+    export let type = "info";
+    /** @type {(() => void) | undefined} Close handler - when provided, shows dismiss button */
+    export let onClose = undefined;
 
-    /** @type {Props} */
-    let {
-        title = "",
-        message = "",
-        type = "info",
-        onClose = undefined,
-        children
-    } = $props();
+    const dispatch = createEventDispatcher();
 
-    // Map legacy 'type' to Flowbite 'color'
-    let color = $derived(
-        {
-            info: "blue",
-            success: "green",
-            warning: "yellow",
-            danger: "red",
-        }[type] || "blue"
-    );
+    // Flowbite color classes by type
+    const colorClasses = {
+        info: "text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400",
+        success: "text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400",
+        warning: "text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300",
+        danger: "text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400",
+    };
+
+    $: alertClasses = colorClasses[type] || colorClasses.info;
 
     function handleClose() {
-        onClose?.();
+        if (onClose) onClose();
+        dispatch("close");
     }
 </script>
 
-<Alert {color} dismissable={!!onClose} onclose={handleClose} class="mb-4 custom-alert">
-    {#if title}
-        <span class="font-medium">{title}</span>
-    {/if}
-    {#if message}
-        <div class="mt-1 text-sm">
-            {message}
-        </div>
+<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert">
+    <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" aria-hidden="true" />
+    <span class="sr-only">{type}</span>
+    <div class="flex-1">
+        {#if title}
+            <span class="font-medium">{title}</span>
+        {/if}
+        {#if message}
+            <span class:mt-1={title}>{message}</span>
+        {/if}
+        <slot />
+    </div>
+    {#if onClose}
+        <button
+            type="button"
+            class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {type === 'info' ? 'bg-blue-50 text-blue-500 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700' : ''}{type === 'success' ? 'bg-green-50 text-green-500 hover:bg-green-200 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700' : ''}{type === 'warning' ? 'bg-yellow-50 text-yellow-500 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700' : ''}{type === 'danger' ? 'bg-red-50 text-red-500 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700' : ''}"
+            aria-label="Close"
+            on:click={handleClose}
+        >
+            <span class="sr-only">Close</span>
+            <CloseOutline class="w-3 h-3" aria-hidden="true" />
+        </button>
     {/if}
-    {#if children}
-        {@render children()}
-    {/if}
-</Alert>
-
-<style>
-    /* Dark mode alert styling */
-    :global(.dark .custom-alert),
-    :global(.performer-portal.dark .custom-alert) {
-        background-color: #0d1526 !important;
-        border-color: #374151 !important;
-        color: #f7f7f8 !important;
-    }
-
-    :global(.dark .custom-alert span),
-    :global(.performer-portal.dark .custom-alert span),
-    :global(.dark .custom-alert div),
-    :global(.performer-portal.dark .custom-alert div) {
-        color: #f7f7f8 !important;
-    }
-</style>
+</div>

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

@@ -1,21 +1,50 @@
 export default Alert;
-type Alert = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Alert: import("svelte").Component<{
+type Alert = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     title?: string | undefined;
     message?: string | undefined;
     type?: "info" | "success" | "warning" | "danger" | undefined;
-    onClose?: Function | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-}, {}, "">;
-import { Alert } from "flowbite-svelte";
-type Props = {
+    onClose?: (() => void) | undefined;
+}, {
+    default: {};
+}>, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     title?: string | undefined;
     message?: string | undefined;
     type?: "info" | "success" | "warning" | "danger" | undefined;
-    onClose?: Function | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-};
+    onClose?: (() => void) | undefined;
+}, {
+    default: {};
+}>, {
+    close: 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=Alert.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/Alert.svelte.js"],"names":[],"mappings":";;;;;AA2DA;;;;;;WAAoD;sBAxD9B,iBAAiB"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Alert/Alert.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6EA;;;;cAfW,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;eAe0H;sCATvH,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"}