@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Toggle.svelte

@@ -1,81 +1,59 @@
 <script>
-  /**
-   * @type {{ checked?: boolean, disabled?: boolean, onchange?: (data: { checked: boolean }) => void }}
-   */
-  let {
-    checked = $bindable(false),
-    disabled = false,
-    onchange
-  } = $props();
-
-  function handleClick() {
-    if (!disabled) {
-      checked = !checked;
-      onchange?.({ checked });
+  import { createEventDispatcher } from 'svelte';
+
+  export let checked = false;
+  export let disabled = false;
+  /** @type {'sm' | 'md' | 'lg'} Size variant */
+  export let size = 'md';
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    dispatch('change', { checked });
+  }
+
+  // Flowbite toggle sizes
+  const sizes = {
+    sm: {
+      track: 'w-9 h-5',
+      thumb: 'h-4 w-4 after:top-0.5 after:start-0.5',
+      translate: 'peer-checked:after:translate-x-full'
+    },
+    md: {
+      track: 'w-11 h-6',
+      thumb: 'h-5 w-5 after:top-0.5 after:start-0.5',
+      translate: 'peer-checked:after:translate-x-full'
+    },
+    lg: {
+      track: 'w-14 h-7',
+      thumb: 'h-6 w-6 after:top-0.5 after:start-1',
+      translate: 'peer-checked:after:translate-x-full'
     }
-  }
+  };
 
-  function handleKeydown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleClick();
-    }
-  }
+  $: sizeConfig = sizes[size] || sizes.md;
 </script>
 
-<button
-  type="button"
-  role="switch"
-  aria-checked={checked}
-  {disabled}
-  class="toggle {checked ? 'toggle-checked' : ''} {disabled ? 'toggle-disabled' : ''}"
-  onclick={handleClick}
-  onkeydown={handleKeydown}
->
-  <span class="toggle-thumb"></span>
-</button>
-
-<style>
-  .toggle {
-    position: relative;
-    width: 44px;
-    height: 24px;
-    background-color: #d1d5db;
-    border: none;
-    border-radius: 9999px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    padding: 0;
-    flex-shrink: 0;
-  }
-
-  .toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px #3b82f6;
-  }
-
-  .toggle-checked {
-    background-color: #3b82f6;
-  }
-
-  .toggle-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .toggle-thumb {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background-color: white;
-    border-radius: 9999px;
-    transition: transform 0.2s ease;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
-
-  .toggle-checked .toggle-thumb {
-    transform: translateX(20px);
-  }
-</style>
+<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}">
+  <input
+    type="checkbox"
+    bind:checked
+    {disabled}
+    on:change={handleChange}
+    class="sr-only peer"
+  />
+  <div
+    class="relative {sizeConfig.track} bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute {sizeConfig.thumb} after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+    role="switch"
+    aria-checked={checked}
+  ></div>
+  {#if $$slots.default}
+    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+      <slot />
+    </span>
+  {/if}
+</label>

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

@@ -1,20 +1,50 @@
 export default Toggle;
-type Toggle = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const Toggle: import("svelte").Component<{
-    checked?: boolean;
-    disabled?: boolean;
-    onchange?: (data: {
-        checked: boolean;
-    }) => void;
-}, {}, "checked">;
-type $$ComponentProps = {
-    checked?: boolean;
-    disabled?: boolean;
-    onchange?: (data: {
-        checked: boolean;
-    }) => void;
+type Toggle = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
 };
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    change: 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=Toggle.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Toggle.svelte.js"],"names":[],"mappings":";;;;;AAoCA;cA/B2B,OAAO;eAAa,OAAO;eAAa,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;kBA+BlD;wBA/BtC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CAAE"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAyEA;;;;;;;;;;;;;eAA+J;sCATzH,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/Typography/Typography.svelte.d.ts

@@ -2,9 +2,9 @@ export default Typography;
 type Typography = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;
     class?: string | undefined;
-    variant?: "h3" | "h1" | "p" | "h2" | "h4" | "h5" | "h6" | undefined;
+    variant?: "h2" | "p" | "h3" | "h1" | "h4" | "h5" | "h6" | undefined;
     text?: string | undefined;
-    weight?: "medium" | "bold" | "semibold" | "regular" | undefined;
+    weight?: "bold" | "semibold" | "medium" | "regular" | undefined;
 }, {
     default: {};
 }>, {
@@ -17,9 +17,9 @@ type Typography = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 declare const Typography: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;
     class?: string | undefined;
-    variant?: "h3" | "h1" | "p" | "h2" | "h4" | "h5" | "h6" | undefined;
+    variant?: "h2" | "p" | "h3" | "h1" | "h4" | "h5" | "h6" | undefined;
     text?: string | undefined;
-    weight?: "medium" | "bold" | "semibold" | "regular" | undefined;
+    weight?: "bold" | "semibold" | "medium" | "regular" | undefined;
 }, {
     default: {};
 }>, {

package/dist/components/ValidationError.stories.svelte

@@ -1,7 +1,9 @@
-<script context="module">
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import ValidationError from './ValidationError.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/ValidationError',
     component: ValidationError,
     tags: ['autodocs'],
@@ -9,16 +11,13 @@
       error: { control: 'text' },
       show: { control: 'boolean' },
     },
-  };
+  });
+
 </script>
 
 <script>
-  import { Story, Template } from '@storybook/addon-svelte-csf';
-</script>
+  </script>
 
-<Template let:args>
-  <ValidationError {...args} />
-</Template>
 
 <Story
   name="Default"
@@ -83,6 +82,6 @@
     <label class="block text-sm font-medium mb-1">Email</label>
     <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded" />
     <ValidationError error="This error is hidden" show={false} />
-    <p class="text-sm text-gray-500 mt-2">Validation error is hidden until field is touched</p>
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
   </div>
 </Story>

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

@@ -1,17 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { ValidationError as component };
-    export let tags: string[];
-    export namespace argTypes {
-        namespace error {
-            let control: string;
-        }
-        namespace show {
-            let control_1: string;
-            export { control_1 as control };
-        }
-    }
-}
 export default ValidationError;
 type ValidationError = SvelteComponent<{
     [x: string]: never;

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

@@ -1 +1 @@
-{"version":3,"file":"ValidationError.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ValidationError.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6FA;;;;mBAA2H;4BA1F7F,0BAA0B;6CAiFX,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":"ValidationError.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ValidationError.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyFA;;;;mBAA2H;4BApF7F,0BAA0B;6CA2EX,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/ValidationError.svelte

@@ -10,7 +10,7 @@
 {#if error && show}
   <div
     transition:slide={{ duration: 300, easing: cubicOut }}
-    class="flex items-center gap-1.5 text-red-500 mt-2"
+    class="flex items-center gap-1.5 text-red-600 dark:text-red-500 mt-2"
     role="alert"
   >
     <WarningIcon className="shrink-0" />

package/dist/components/pages/performers/ModalShowInfo.svelte

@@ -8,8 +8,8 @@
   export let venueName;
 </script>
 
-<div class="modal-show-info">
-  <div class="modal-show-image">
+<div class="flex gap-3 py-3">
+  <div class="w-20 h-20 shrink-0 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
     <img
       src={image && image.startsWith("http")
         ? image
@@ -17,72 +17,18 @@
           ? `https://moxy.sfo3.digitaloceanspaces.com${image}`
           : microphonePlaceholder}
       alt={title}
+      class="w-full h-full object-contain"
     />
   </div>
-  <div class="modal-show-details">
-    <h4 class="modal-show-title">{title}</h4>
-    <p class="modal-show-datetime">
+  <div class="flex flex-col justify-center min-w-0">
+    <h4 class="text-base font-semibold text-gray-900 dark:text-white m-0 leading-tight">{title}</h4>
+    <p class="text-sm font-medium text-gray-900 dark:text-white mt-0.5 mb-0 leading-normal">
       {#if showDate && formattedStartTime}
         {showDate} • {formattedStartTime}
       {:else}
         No date yet
       {/if}
     </p>
-    <p class="modal-show-venue">{venueName}</p>
+    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 m-0 leading-normal">{venueName}</p>
   </div>
 </div>
-
-<style>
-  .modal-show-info {
-    display: flex;
-    gap: 0.75rem;
-    padding: 0.75rem 0;
-  }
-
-  .modal-show-image {
-    width: 80px;
-    height: 80px;
-    flex-shrink: 0;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background-color: hsl(var(--BG-Secondary));
-  }
-
-  .modal-show-image img {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: contain;
-       object-fit: contain;
-  }
-
-  .modal-show-details {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-width: 0;
-  }
-
-  .modal-show-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: hsl(var(--Text-Primary));
-    margin: 0;
-    line-height: 1.3;
-  }
-
-  .modal-show-datetime {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    margin: 0.125rem 0 0;
-    line-height: 1.4;
-  }
-
-  .modal-show-venue {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Tartiary));
-    margin: 0;
-    line-height: 1.4;
-  }
-</style>

package/dist/components/pages/performers/ModalShowInfo.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalShowInfo.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/ModalShowInfo.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA+CA;;;;;;;;mBAAyH;6CAT5E,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":"ModalShowInfo.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/ModalShowInfo.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA6CA;;;;;;;;mBAAyH;6CAT5E,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/pages/performers/PageBackButton.spec.js

@@ -57,7 +57,7 @@ describe("PageBackButton Component Tests", () => {
     const button = screen.getByRole("button");
     expect(button).toHaveClass("font-semibold");
     expect(button).toHaveClass("text-xl");
-    expect(button).toHaveClass("text-Text-Primary");
+    expect(button).toHaveClass("text-gray-900");
   });
 
   test("Contains Back icon", () => {

package/dist/components/pages/performers/PageBackButton.stories.svelte

@@ -1,19 +1,18 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import PageBackButton from "./PageBackButton.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import PageBackButton from "./PageBackButton.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Performers/PageBackButton",
     component: PageBackButton,
     argTypes: {
       headerTitle: { control: "text" },
     },
-  };
+  });
+
 </script>
 
-<Template let:args>
-  <PageBackButton {...args} />
-</Template>
 
 <Story
   name="Show Details"

package/dist/components/pages/performers/PageBackButton.stories.svelte.d.ts

@@ -1,12 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { PageBackButton as component };
-    export namespace argTypes {
-        namespace headerTitle {
-            let control: string;
-        }
-    }
-}
 export default PageBackButton;
 type PageBackButton = SvelteComponent<{
     [x: string]: never;

package/dist/components/pages/performers/PageBackButton.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageBackButton.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/PageBackButton.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA8DA;;;;mBAA0H;2BA1D7F,yBAAyB;6CAiDT,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":"PageBackButton.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/PageBackButton.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA6DA;;;;mBAA0H;2BAxD3F,yBAAyB;6CA+CX,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/pages/performers/PageBackButton.svelte

@@ -5,7 +5,7 @@
 
 <button
   type="button"
-  class="my-0.5 sm:my-1 flex items-center gap-1.5 sm:gap-2 font-semibold text-xl text-Text-Primary"
+  class="my-0.5 sm:my-1 flex items-center gap-1.5 sm:gap-2 font-semibold text-xl text-gray-900 dark:text-white"
   on:click={() => history.back()}
 >
   <Icon name="Back" />

package/dist/components/pages/performers/SectionHeader.spec.js

@@ -41,7 +41,7 @@ describe("SectionHeader Component Tests", () => {
     render(SectionHeader, { props: { title: "Title", description: "" } });
     const title = screen.getByText("Title");
     expect(title).toHaveClass("font-semibold");
-    expect(title).toHaveClass("text-Text-Primary");
+    expect(title).toHaveClass("text-gray-900");
     expect(title).toHaveClass("text-xl");
   });
 
@@ -51,7 +51,7 @@ describe("SectionHeader Component Tests", () => {
     });
     const description = screen.getByText("Description");
     expect(description).toHaveClass("text-sm");
-    expect(description).toHaveClass("text-Text-Tartiary");
+    expect(description).toHaveClass("text-gray-500");
   });
 
   test("Works with empty title", () => {

package/dist/components/pages/performers/SectionHeader.stories.svelte

@@ -1,20 +1,19 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import SectionHeader from "./SectionHeader.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import SectionHeader from "./SectionHeader.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Performers/SectionHeader",
     component: SectionHeader,
     argTypes: {
       title: { control: "text" },
       description: { control: "text" },
     },
-  };
+  });
+
 </script>
 
-<Template let:args>
-  <SectionHeader {...args} />
-</Template>
 
 <Story
   name="Upcoming Shows"
@@ -79,14 +78,14 @@
       description="Manage your account preferences and security settings"
     />
     <div class="mt-6 space-y-4">
-      <div class="p-4 bg-gray-50 rounded-lg">
-        <p class="text-sm text-Text-Primary">Setting option 1</p>
+      <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+        <p class="text-sm text-gray-900 dark:text-white">Setting option 1</p>
       </div>
-      <div class="p-4 bg-gray-50 rounded-lg">
-        <p class="text-sm text-Text-Primary">Setting option 2</p>
+      <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+        <p class="text-sm text-gray-900 dark:text-white">Setting option 2</p>
       </div>
-      <div class="p-4 bg-gray-50 rounded-lg">
-        <p class="text-sm text-Text-Primary">Setting option 3</p>
+      <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+        <p class="text-sm text-gray-900 dark:text-white">Setting option 3</p>
       </div>
     </div>
   </div>

package/dist/components/pages/performers/SectionHeader.stories.svelte.d.ts

@@ -1,17 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { SectionHeader as component };
-    export namespace argTypes {
-        export namespace title_1 {
-            let control: string;
-        }
-        export { title_1 as title };
-        export namespace description {
-            let control_1: string;
-            export { control_1 as control };
-        }
-    }
-}
 export default SectionHeader;
 type SectionHeader = SvelteComponent<{
     [x: string]: never;

package/dist/components/pages/performers/SectionHeader.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/SectionHeader.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuFA;;;;mBAAyH;0BAnF7F,wBAAwB;6CA0EP,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":"SectionHeader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/SectionHeader.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAsFA;;;;mBAAyH;0BAjF3F,wBAAwB;6CAwET,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/pages/performers/SectionHeader.svelte

@@ -3,7 +3,7 @@
   export let description = "";
 </script>
 
-<h3 class="font-semibold text-Text-Primary text-xl">{title}</h3>
+<h3 class="font-semibold text-gray-900 dark:text-white text-xl">{title}</h3>
 {#if description}
-  <p class="text-sm text-Text-Tartiary">{description}</p>
+  <p class="text-sm text-gray-500 dark:text-gray-400">{description}</p>
 {/if}

package/dist/components/pages/performers/ShowDetails.spec.js

@@ -145,7 +145,7 @@ describe('ShowDetails', () => {
     it('shows bottom row when has set length', () => {
       const { container } = render(ShowDetails, { props: defaultProps });
       // Grid has: Showtime, Stage, Set length sections + event details section
-      expect(container.querySelectorAll('.bg-bg-tertiary').length).toBeGreaterThan(2);
+      expect(container.querySelectorAll('.bg-gray-100').length).toBeGreaterThan(2);
     });
 
     it('shows bottom row when is host', () => {
@@ -160,7 +160,7 @@ describe('ShowDetails', () => {
         props: { ...defaultProps, setLength: '0 min', role: 'performer', eventDetails: '' },
       });
       // Only 2 sections in top row: Showtime and Stage (no event details or set length)
-      expect(container.querySelectorAll('.bg-bg-tertiary').length).toBe(2);
+      expect(container.querySelectorAll('.bg-gray-100').length).toBe(2);
     });
   });
 });

package/dist/components/pages/performers/ShowDetails.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import ShowDetails from "./ShowDetails.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import ShowDetails from "./ShowDetails.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Performers/ShowDetails",
     component: ShowDetails,
     argTypes: {
@@ -11,18 +12,14 @@
         options: ["upcoming", "past", "declined"]
       },
     },
-  };
+  });
 
   const handleToggleModal = (modalType, show) => {
     console.log(`Modal ${modalType} toggled: ${show}`);
   };
+
 </script>
 
-<Template let:args>
-  <div class="max-w-2xl">
-    <ShowDetails {...args} />
-  </div>
-</Template>
 
 <Story
   name="Upcoming Show"
@@ -110,7 +107,7 @@
 
 <Story name="Multiple Show Cards">
   <div class="max-w-2xl space-y-6">
-    <div class="p-4 bg-white border rounded-lg">
+    <div class="p-4 bg-white dark:bg-gray-900 border rounded-lg">
       <h4 class="font-semibold mb-3">Thursday Open Mic</h4>
       <ShowDetails
         status="past"
@@ -123,7 +120,7 @@
         onToggleModal={handleToggleModal}
       />
     </div>
-    <div class="p-4 bg-white border rounded-lg">
+    <div class="p-4 bg-white dark:bg-gray-900 border rounded-lg">
       <h4 class="font-semibold mb-3">Weekend Showcase</h4>
       <ShowDetails
         status="upcoming"