@getmicdrop/svelte-components 2.8.1 → 3.1.0

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

@@ -1,22 +1,39 @@
 export default Toggle;
-type Toggle = SvelteComponent<{
+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<{
+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>;
-}, {}, {}, string>;
+}, {
+    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;

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":";;;;;;;;;;;AA6CA;;;;;;;mBAA0I;6CAT7F,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":"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"

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ShowDetails.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/ShowDetails.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA2GA;;;;mBAAuH;wBAvG7F,sBAAsB;6CA8FH,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":"ShowDetails.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/ShowDetails.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAwGA;;;;mBAAuH;wBAnG3F,sBAAsB;6CA0FL,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/ShowDetails.svelte

@@ -21,31 +21,31 @@
 <div>
   <div class="grid grid-cols-2 gap-4">
     <!-- Top left: Showtime -->
-    <div class="bg-bg-tertiary rounded-lg p-3 text-sm text-text-primary min-h-[80px]">
-      <h3 class="text-text-tartiary font-medium">Showtime</h3>
+    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-900 dark:text-white min-h-20">
+      <h3 class="text-gray-500 dark:text-gray-400 font-medium">Showtime</h3>
       <p>Doors: {formattedDoorsOpenTime}</p>
       <p>Show: {formattedStartTime}</p>
     </div>
     <!-- Top right: Stage -->
-    <div class="bg-bg-tertiary rounded-lg p-3 text-sm text-text-primary min-h-[80px]">
-      <h3 class="text-text-tartiary font-medium">Stage</h3>
+    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-900 dark:text-white min-h-20">
+      <h3 class="text-gray-500 dark:text-gray-400 font-medium">Stage</h3>
       <p>{stageName || "Main Stage"}</p>
     </div>
     <!-- Bottom row: Only show if there's set length or host role -->
     {#if showBottomRow}
       <!-- Bottom left: Set length (or invisible spacer when no set length but isHost) -->
       {#if hasSetLength}
-        <div class="bg-bg-tertiary rounded-lg p-3 text-sm text-text-primary min-h-[80px]">
-          <h3 class="text-text-tartiary font-medium">Set length</h3>
+        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-900 dark:text-white min-h-20">
+          <h3 class="text-gray-500 dark:text-gray-400 font-medium">Set length</h3>
           <p>{setLength}</p>
         </div>
       {:else}
         <!-- Invisible spacer to maintain 2x2 grid layout when only hosting -->
-        <div class="min-h-[80px]"></div>
+        <div class="min-h-20"></div>
       {/if}
       <!-- Bottom right: Host notice -->
       {#if isHost}
-        <div class="bg-primary-50 rounded-lg p-3 text-sm text-primary-700 font-medium min-h-[80px]">
+        <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-3 text-sm text-blue-700 dark:text-blue-400 font-medium min-h-20">
           Hosting spot
         </div>
       {/if}
@@ -53,8 +53,8 @@
   </div>
 
   {#if eventDetails && eventDetails !== "No additional details available."}
-    <div class="bg-bg-tertiary rounded-lg p-3 text-sm text-text-primary mt-4">
-      <h3 class="text-text-tertiary font-medium">Note from venue</h3>
+    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 text-sm text-gray-900 dark:text-white mt-4">
+      <h3 class="text-gray-500 dark:text-gray-400 font-medium">Note from venue</h3>
       <p>{eventDetails}</p>
     </div>
   {/if}
@@ -62,7 +62,7 @@
   {#if status === "upcoming"}
     <div class="mt-4">
       <Button
-        variant="red-solid"
+        variant="red"
         size="full"
         on:click={() => onToggleModal("cancelation", true)}
       >

package/dist/components/pages/performers/ShowDetails.svelte.d.ts

@@ -8,8 +8,8 @@ type ShowDetails = SvelteComponent<{
     setLength: any;
     eventDetails: any;
     onToggleModal: any;
-    role?: string | undefined;
     stageName?: string | undefined;
+    role?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -24,8 +24,8 @@ declare const ShowDetails: $$__sveltets_2_IsomorphicComponent<{
     setLength: any;
     eventDetails: any;
     onToggleModal: any;
-    role?: string | undefined;
     stageName?: string | undefined;
+    role?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -734,7 +734,7 @@ describe('ShowItemCard', () => {
     it('has correct card container classes', async () => {
       const { container } = render(ShowItemCard, { props: defaultProps });
 
-      const card = container.querySelector('.bg-bg-secondary');
+      const card = container.querySelector('.bg-gray-50');
       expect(card).toBeDefined();
     });
 

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

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story } from "@storybook/addon-svelte-csf";
-  import ShowItemCard from "./ShowItemCard.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import ShowItemCard from "./ShowItemCard.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Performers/ShowItemCard",
     component: ShowItemCard,
     argTypes: {
@@ -15,7 +16,8 @@
         options: ["Performer", "Host", "Headliner", "Feature", "Special Guest", "Opener", "Guest", "Teacher", "Assistant"]
       },
     },
-  };
+  });
+
 </script>
 
 <Story