@getmicdrop/svelte-components 3.0.0 → 3.1.0

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

@@ -5,7 +5,7 @@
 </script>
 
 <div class="w-full flex items-center justify-between gap-4 py-2">
-    <span class="text-sm font-medium text-gray-700">{label}</span>
+    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">{label}</span>
     <label class="inline-flex relative items-center cursor-pointer">
         <input
             type="checkbox"
@@ -14,10 +14,10 @@
             on:change={() => onToggle(checked)}
         />
         <div
-            class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800"
+            class="w-11 h-6 bg-gray-200 dark:bg-gray-700 rounded-full peer peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800"
         />
         <div
-            class="w-5 h-5 bg-white rounded-full peer-checked:translate-x-5 absolute left-0.5 top-0.5 transform transition-transform"
+            class="w-5 h-5 bg-white dark:bg-gray-300 rounded-full peer-checked:translate-x-5 absolute left-0.5 top-0.5 transform transition-transform shadow"
         />
     </label>
 </div>

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

@@ -16,75 +16,21 @@
   })();
 </script>
 
-<div class="venue-info" class:venue-info--small={size === 'small'}>
-  <div class="venue-image">
+<div class="flex gap-3 {size === 'small' ? 'min-h-16' : 'min-h-20'} {size === 'small' ? 'gap-2' : ''}">
+  <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shrink-0 {size === 'small' ? 'w-16 h-16' : 'w-20 h-20'}">
     <img
       src={imageUrl}
       alt={name}
       class="w-full h-full object-contain"
     />
   </div>
-  <div class="venue-details">
-    <h4 class="venue-name">{name}</h4>
+  <div class="flex-1 min-w-0 flex flex-col justify-center">
+    <h4 class="text-base font-medium text-gray-900 dark:text-white m-0 leading-tight line-clamp-2">{name}</h4>
     {#if parsedLocation.street}
-      <p class="venue-location">{parsedLocation.street}</p>
+      <p class="text-sm text-gray-500 dark:text-gray-400 m-0 leading-normal">{parsedLocation.street}</p>
     {/if}
     {#if parsedLocation.cityStateZip}
-      <p class="venue-location">{parsedLocation.cityStateZip}</p>
+      <p class="text-sm text-gray-500 dark:text-gray-400 m-0 leading-normal">{parsedLocation.cityStateZip}</p>
     {/if}
   </div>
 </div>
-
-<style>
-  .venue-info {
-    display: flex;
-    gap: 0.75rem;
-    min-height: 80px;
-  }
-
-  .venue-info--small {
-    min-height: 64px;
-    gap: 0.5rem;
-  }
-
-  .venue-image {
-    width: 80px;
-    height: 80px;
-    background-color: hsl(var(--BG-Secondary));
-    border-radius: 0.5rem;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .venue-info--small .venue-image {
-    width: 64px;
-    height: 64px;
-  }
-
-  .venue-details {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .venue-name {
-    font-size: 1rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    margin: 0;
-    line-height: 1.3;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .venue-location {
-    font-size: 0.875rem;
-    color: hsl(var(--Text-Tartiary));
-    margin: 0;
-    line-height: 1.4;
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"VenueInfo.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueInfo.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AAmDA;;;;;;;mBAAyJ;6CAT5G,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":"VenueInfo.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueInfo.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AAiDA;;;;;;;mBAAyJ;6CAT5G,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/VenueItemCard.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story } from "@storybook/addon-svelte-csf";
-  import VenueItemCard from "./VenueItemCard.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import VenueItemCard from "./VenueItemCard.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Performers/VenueItemCard",
     component: VenueItemCard,
     argTypes: {
@@ -11,7 +12,8 @@
         options: ["upcoming", "past", "declined"]
       },
     },
-  };
+  });
+
 </script>
 
 <Story
@@ -218,8 +220,8 @@
 <Story name="Venue Roster Page">
   <div class="max-w-5xl p-6">
     <div class="mb-6">
-      <h1 class="text-2xl font-bold text-Text-Primary mb-2">My Venue Roster</h1>
-      <p class="text-Text-Tartiary">
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">My Venue Roster</h1>
+      <p class="text-gray-500 dark:text-gray-400">
         Manage your connections with comedy venues
       </p>
     </div>
@@ -274,7 +276,7 @@
 </Story>
 
 <Story name="Single Venue Detail">
-  <div class="max-w-2xl p-6 bg-gray-50 rounded-lg">
+  <div class="max-w-2xl p-6 bg-gray-50 dark:bg-gray-800 rounded-lg">
     <VenueItemCard
       venueId="venue-single"
       name="Pacific Coast Comedy"

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"VenueItemCard.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueItemCard.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8KA;;;;mBAAyH;0BA1K7F,wBAAwB;6CAiKP,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":"VenueItemCard.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueItemCard.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAgLA;;;;mBAAyH;0BA3K3F,wBAAwB;6CAkKT,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/VenueItemCard.svelte

@@ -6,8 +6,9 @@
   import { getPerformerToken } from "../../../utils/utils";
   import { timeAgo } from "../../../utils/utils/utils";
   import { buildApiUrl, API_ENDPOINTS } from "../../../utils/apiConfig";
-  import { Dropdown, DropdownItem } from "flowbite-svelte";
-  import { DotsHorizontalOutline } from "flowbite-svelte-icons";
+  import Dropdown from "../../Dropdown/Dropdown.svelte";
+  import DropdownItem from "../../Dropdown/DropdownItem.svelte";
+  import { DotsHorizontalOutline } from "../../Icons";
   import Button from "../../Button/Button.svelte";
 
   export let venueId;
@@ -78,7 +79,7 @@
 </script>
 
 <div
-  class="w-full flex flex-col bg-bg-primary border border-stroke-secondary p-3 sm:p-4 rounded-lg"
+  class="w-full flex flex-col bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-3 sm:p-4 rounded-lg"
 >
   <VenueInfo {name} {image} {location} />
 
@@ -87,11 +88,11 @@
       {#if invitationAccepted && !hasAvailability}
         <div class="flex flex-row gap-2">
           <div
-            class="flex-1 bg-red-50 text-sm text-red-700 font-semibold rounded-lg flex flex-col justify-center p-2"
+            class="flex-1 bg-red-50 dark:bg-red-900/20 text-sm text-red-600 dark:text-red-400 font-semibold rounded-lg flex flex-col justify-center p-2"
           >
             Please update your availability.
           </div>
-          <Button variant="red-solid" responsive on:click={onUpdateClick}>Set up</Button>
+          <Button variant="red" responsive on:click={onUpdateClick}>Set up</Button>
 
           <DotsHorizontalOutline
             data-testid="dropdown-menu"
@@ -99,9 +100,9 @@
             class="more-menu text-primary-700 dark:text-primary-400 border border-primary-700 dark:border-primary-500 rounded-lg h-auto w-9 px-1.5 hover:bg-primary-50 dark:hover:bg-primary-900/30 cursor-pointer transition-colors"
           />
 
-          <Dropdown class="shadow-none min-w-[200px]" triggeredBy=".more-menu">
+          <Dropdown class="shadow-none min-w-52" triggeredBy=".more-menu">
             <DropdownItem
-              class="text-red-600"
+              class="text-red-600 dark:text-red-400"
               on:click={() => toggleModal("leave", true)}
             >
               Leave this venue
@@ -111,11 +112,11 @@
       {:else}
         <!-- Last Updated and Action Buttons Row -->
         <div class="flex flex-row items-end gap-2 mt-2">
-          <div class="flex-1 text-xs text-Text-Tartiary">
+          <div class="flex-1 text-xs text-gray-500 dark:text-gray-400">
             Last updated: {timeAgo(lastUpdated)}
           </div>
           <Button
-            variant="blue-solid"
+            variant="default"
             responsive
             minWidth="sm"
             on:click={onUpdateClick}
@@ -125,14 +126,14 @@
           <DotsHorizontalOutline
             data-testid="dropdown-menu"
             triggeredBy=".more-menu"
-            class="more-menu text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg h-10 w-10 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+            class="more-menu text-gray-900 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg h-10 w-10 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
           />
           <Dropdown
-            class="shadow-none min-w-[200px]"
+            class="shadow-none min-w-52"
             triggeredBy=".more-menu"
           >
             <DropdownItem
-              class="text-red-600"
+              class="text-red-600 dark:text-red-400"
               on:click={() => toggleModal("leave", true)}
             >
               Leave this venue
@@ -145,11 +146,11 @@
 
   <!-- Leave the Venue Modal -->
   <Modal bind:show={showLeaveVenue}>
-    <h2 slot="header" class="text-xl font-medium text-Text-Primary">
+    <h2 slot="header" class="text-xl font-medium text-gray-900 dark:text-white">
       Are you sure you want to leave this venue?
     </h2>
     <div slot="body">
-      <p class="text-sm font-medium text-Text-Tartiary mt-4">
+      <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-4">
         You will no longer receive availability update requests. If you'd like
         to include a note, leave it here.
       </p>
@@ -167,7 +168,7 @@
         class="w-full flex items-center justify-between md:justify-end gap-4 mt-5"
       >
         <Button
-          variant="gray-outline"
+          variant="alternative"
           size="half"
           minWidth="modal-responsive"
           on:click={(e) => {

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

@@ -1,10 +1,10 @@
 export default VenueItemCard;
 type VenueItemCard = SvelteComponent<{
     name: any;
+    status: any;
     image: any;
     end: any;
     start: any;
-    status: any;
     email: any;
     description: any;
     location: any;
@@ -28,10 +28,10 @@ type VenueItemCard = SvelteComponent<{
 };
 declare const VenueItemCard: $$__sveltets_2_IsomorphicComponent<{
     name: any;
+    status: any;
     image: any;
     end: any;
     start: any;
-    status: any;
     email: any;
     description: any;
     location: any;

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

@@ -1 +1 @@
-{"version":3,"file":"VenueItemCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueItemCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6KA;;;;;;;;;;;;;;;;;;;;;;;;mBAA4I;6CAT/F,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":"VenueItemCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueItemCard.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+KA;;;;;;;;;;;;;;;;;;;;;;;;mBAA4I;6CAT/F,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/profile/profile-form.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import ProfileForm from "./profile-form.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import ProfileForm from "./profile-form.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Profile/ProfileForm",
     component: ProfileForm,
     argTypes: {
@@ -11,7 +12,7 @@
       fields: { control: "object" },
       isPhoneVerified: { control: "boolean" },
     },
-  };
+  });
 
   const defaultFields = {
     basicInfo: [
@@ -34,13 +35,9 @@
       { name: "tiktok", label: "TikTok", placeholder: "username" },
     ],
   };
+
 </script>
 
-<Template let:args>
-  <div class="max-w-4xl mx-auto p-6 bg-gray-50">
-    <ProfileForm {...args} />
-  </div>
-</Template>
 
 <Story
   name="Empty Profile Form"

package/dist/components/pages/profile/profile-form.stories.svelte.d.ts

@@ -1,24 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { ProfileForm as component };
-    export namespace argTypes {
-        namespace formData {
-            let control: string;
-        }
-        namespace formErrors {
-            let control_1: string;
-            export { control_1 as control };
-        }
-        namespace fields {
-            let control_2: string;
-            export { control_2 as control };
-        }
-        namespace isPhoneVerified {
-            let control_3: string;
-            export { control_3 as control };
-        }
-    }
-}
 export default ProfileForm;
 type ProfileForm = SvelteComponent<{
     [x: string]: never;

package/dist/components/pages/profile/profile-form.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profile-form.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-form.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmRA;;;;mBAAuH;wBA/Q7F,uBAAuB;6CAsQJ,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":"profile-form.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-form.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAgRA;;;;mBAAuH;wBA3Q3F,uBAAuB;6CAkQN,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/profile/profile-form.svelte

@@ -7,7 +7,7 @@
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import SectionHeader from "../performers/SectionHeader.svelte";
-  import WarningIcon from "../../Icons/WarningIcon.svelte";
+  import { ExclamationTriangleOutline } from "../../Icons";
   import InstagramIcon from "../../Icons/InstagramIcon.svelte";
   import TiktokIcon from "../../Icons/TiktokIcon.svelte";
   import FacebookIcon from "../../Icons/FacebookIcon.svelte";
@@ -64,9 +64,9 @@
             <div>
               <label
                 for={field.name}
-                class="mb-2 block text-sm font-medium text-Text-Primary"
+                class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
               >
-                {field.label}{#if field.required}<span class="text-red-500"
+                {field.label}{#if field.required}<span class="text-red-600 dark:text-red-500"
                     >*</span
                   >{/if}
               </label>
@@ -83,8 +83,8 @@
                   class="validation-error flex items-center gap-1.5 mt-2"
                   role="alert"
                 >
-                  <WarningIcon className="shrink-0 text-red-500" />
-                  <p class="text-sm font-medium text-red-600">
+                  <ExclamationTriangleOutline class="w-3 h-3 shrink-0 text-red-600 dark:text-red-500" />
+                  <p class="text-sm font-medium text-red-600 dark:text-red-500">
                     {formErrors.basicInfo[field.name]}
                   </p>
                 </div>
@@ -115,11 +115,11 @@
                 id="useStageName"
                 type="checkbox"
                 bind:checked={useStageName}
-                class="w-4 h-4 rounded-[4px]"
+                class="w-4 h-4 rounded"
               />
               <label
                 for="useStageName"
-                class="text-sm font-medium text-Text-Primary">Use stage name</label
+                class="text-sm font-medium text-gray-900 dark:text-white">Use stage name</label
               >
             </div>
             {#if useStageName}
@@ -162,9 +162,9 @@
           <div class="relative z-10">
             <label
               for={field.name}
-              class="mb-2 block text-sm font-medium text-Text-Primary"
+              class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
             >
-              {field.label}{#if field.required}<span class="text-red-500"
+              {field.label}{#if field.required}<span class="text-red-600 dark:text-red-500"
                   >*</span
                 >{/if}
             </label>
@@ -181,8 +181,8 @@
                 class="validation-error flex items-center gap-1.5 mt-2"
                 role="alert"
               >
-                <WarningIcon className="shrink-0 text-red-500" />
-                <p class="text-sm font-medium text-red-600">
+                <ExclamationTriangleOutline class="w-3 h-3 shrink-0 text-red-600 dark:text-red-500" />
+                <p class="text-sm font-medium text-red-600 dark:text-red-500">
                   {formErrors.extraDetails.location}
                 </p>
               </div>
@@ -213,10 +213,7 @@
           {@const isNearLimit = remaining <= 20 && remaining > 0}
           {@const isAtLimit = remaining === 0}
           <div
-            class="text-xs text-right mt-1"
-            class:text-Text-Tartiary={!isNearLimit && !isAtLimit}
-            class:text-amber-600={isNearLimit}
-            class:text-red-500={isAtLimit}
+            class="text-xs text-right mt-1 {isAtLimit ? 'text-red-600 dark:text-red-500' : isNearLimit ? 'text-amber-600' : 'text-gray-500 dark:text-gray-400'}"
             aria-live={isNearLimit || isAtLimit ? "polite" : "off"}
             aria-atomic="true"
           >
@@ -242,10 +239,7 @@
               {@const isNearLimit = remaining <= 10 && remaining > 0}
               {@const isAtLimit = remaining === 0}
               <div
-                class="text-xs text-right mt-1"
-                class:text-Text-Tartiary={!isNearLimit && !isAtLimit}
-                class:text-amber-600={isNearLimit}
-                class:text-red-500={isAtLimit}
+                class="text-xs text-right mt-1 {isAtLimit ? 'text-red-600 dark:text-red-500' : isNearLimit ? 'text-amber-600' : 'text-gray-500 dark:text-gray-400'}"
                 aria-live={isNearLimit || isAtLimit ? "polite" : "off"}
                 aria-atomic="true"
               >
@@ -271,22 +265,22 @@
   </div>
 
   <!-- Section Divider -->
-  <hr class="section-divider" />
+  <hr class="border-0 border-t border-gray-200 dark:border-gray-700 m-0" />
 
   <div>
     <span class="text-sm font-normal flex">
       <SectionHeader title="Social media" />
     </span>
     <div
-      class="mt-1 p-3 font-medium text-sm text-primary-700 bg-primary-50 rounded-lg"
+      class="mt-1 p-3 font-medium text-sm text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 rounded-lg"
     >
       Usernames only.
     </div>
     <div class="w-full mx-auto flex flex-col gap-4 mt-4">
       {#each fields.socialMedia as field}
         <div>
-          <label for={field.name} class="mb-2 flex items-center gap-2 text-sm font-medium text-Text-Primary">
-            <span class="social-icon">
+          <label for={field.name} class="mb-2 flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
+            <span class="inline-flex w-5 h-5 shrink-0 text-gray-500 dark:text-gray-400">
               {#if field.name === "instagram"}
                 <InstagramIcon size="20" />
               {:else if field.name === "tiktok"}
@@ -347,8 +341,8 @@
             />
           {:else if field.name === "location"}
             <div class="relative z-10">
-              <label for={field.name} class="mb-2 block text-sm font-medium text-gray-900">
-                {field.label}{#if field.required}<span class="text-red-500">*</span>{/if}
+              <label for={field.name} class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
+                {field.label}{#if field.required}<span class="text-red-600 dark:text-red-500">*</span>{/if}
               </label>
               <PlaceAutocomplete
                 placeholder={field.placeholder}
@@ -358,7 +352,7 @@
                 mode="cityState"
               />
               {#if formErrors.extraDetails?.location}
-                <p class="mt-2 text-sm text-red-600">{formErrors.extraDetails.location}</p>
+                <p class="mt-2 text-sm text-red-600 dark:text-red-500">{formErrors.extraDetails.location}</p>
               {/if}
             </div>
           {:else if field.type === "customDropdown" && field.name === "gender"}
@@ -378,7 +372,7 @@
                 errorText={formErrors.extraDetails?.[field.name]}
                 maxlength={field.maxLength}
               />
-              <div class="text-xs text-gray-500 text-right mt-1">
+              <div class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">
                 {formData.extraDetails[field.name]?.length ||
                   0}/{field.maxLength} characters
               </div>
@@ -396,50 +390,3 @@
   </Accordion> -->
 </div>
 
-<style>
-  /* Section divider - subtle line between form sections */
-  .section-divider {
-    border: none;
-    border-top: 1px solid #e5e7eb;
-    margin: 0;
-  }
-
-  :global(.dark) .section-divider {
-    border-top-color: #374151;
-  }
-
-  /* Social media icon next to label */
-  .social-icon {
-    display: inline-flex;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-    color: #6b7280;
-  }
-
-  .social-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  :global(.dark) .social-icon {
-    color: #9ca3af;
-  }
-
-  .social-input-field {
-    flex: 1;
-  }
-
-  :global(.accordion-item),
-  :global(.accordion-item):first-child {
-    border-bottom: none !important;
-    border-top: 1px solid #d4d6d9 !important;
-  }
-  :global(.accordion-item):first-child {
-    border-radius: 0px !important;
-  }
-  :global(.accordion-main h2.group + div > div) {
-    padding-top: 0px !important;
-    border: none !important;
-  }
-</style>

package/dist/components/pages/profile/profile-form.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profile-form.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-form.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAgOA;;;;;;;;;mBAA6K;6CAThI,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":"profile-form.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-form.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA+NA;;;;;;;;;mBAA6K;6CAThI,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/profile/profile-photos.stories.svelte

@@ -1,22 +1,15 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import ProfilePhotos from "./profile-photos.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import ProfilePhotos from "./profile-photos.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Profile/ProfilePhotos",
     component: ProfilePhotos,
-  };
+  });
+
 </script>
 
-<Template let:args>
-  <div class="max-w-6xl mx-auto p-6 bg-gray-50">
-    <div class="bg-white p-6 rounded-lg">
-      <h2 class="text-2xl font-semibold mb-4">Profile Photos</h2>
-      <p class="text-gray-600 mb-6">Upload your profile photos. The main photo will be displayed prominently on your profile.</p>
-      <ProfilePhotos {...args} />
-    </div>
-  </div>
-</Template>
 
 <Story name="Empty Photo Grid" />
 

package/dist/components/pages/profile/profile-photos.stories.svelte.d.ts

@@ -1,7 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { ProfilePhotos as component };
-}
 export default ProfilePhotos;
 type ProfilePhotos = SvelteComponent<{
     [x: string]: never;

package/dist/components/pages/profile/profile-photos.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profile-photos.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-photos.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AAmFA;;;;mBAAyH;0BA/E7F,yBAAyB;6CAsER,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":"profile-photos.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-photos.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA4EA;;;;mBAAyH;0BAvE3F,yBAAyB;6CA8DV,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/profile/profile-photos.svelte

@@ -12,7 +12,7 @@
     />
     {#if mainImages.length > 0}
       <div
-        class="absolute bottom-2 left-2 text-sm font-medium bg-white px-2 py-1 rounded shadow"
+        class="absolute bottom-2 left-2 text-sm font-medium bg-white dark:bg-gray-800 px-2 py-1 rounded shadow"
       >
         main
       </div>