@getmicdrop/svelte-components 5.3.3 → 5.3.10

package/dist/calendar/AboutShow/AboutShow.svelte

@@ -1,5 +1,6 @@
 <script>
   import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
 
   let {
     performers = [],
@@ -42,7 +43,7 @@
 
 <div class="flex flex-col gap-3">
   {#if showTitle}
-    <h2 class="font-medium text-xl text-gray-900 dark:text-white">{title}</h2>
+    <h2 class="{typography.h2} text-xl">{title}</h2>
   {/if}
 
   {#if ShowImage && description}
@@ -53,22 +54,22 @@
 
   {#if description}
     {#if showFullDescription || description.length <= characterLimit || !showReadMore}
-      <p class="text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-300">{description}</p>
+      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>{description}</p>
       {#if showReadMore && description.length > characterLimit}
         <button
           onclick={toggleDescription}
-          class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
+          class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
         >
           Show less
         </button>
       {/if}
     {:else}
-      <p class="text-sm leading-relaxed whitespace-pre-line text-gray-600 dark:text-gray-300">
+      <p class={`${typography.sm} leading-relaxed whitespace-pre-line`}>
         {description.slice(0, characterLimit)}...
       </p>
       <button
         onclick={toggleDescription}
-        class="text-sm font-medium text-left hover:underline text-blue-700 dark:text-blue-500"
+        class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
       >
         Show more
       </button>
@@ -110,12 +111,12 @@
                   <CloseOutline class="w-5 h-5" />
                 </button>
 
-                <p class="text-sm leading-relaxed pr-6 text-gray-600 dark:text-gray-300">
+                <p class="{typography.sm} leading-relaxed pr-6">
                   {profile?.biography || ''}
                 </p>
 
                 {#if profile?.instagram || profile?.twitter}
-                  <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">
+                  <div class="flex gap-2 items-center {typography.smMuted} mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
                     <span>Follow {firstName}:</span>
                     {#if profile?.instagram}
                       <a
@@ -157,7 +158,7 @@
                 alt={displayName || 'Performer'}
                 class="size-16 rounded object-cover {!profile?.profileImage || performer.shouldBeHidden ? 'bg-gray-50 dark:bg-gray-700' : ''}"
               />
-              <p class="text-xs text-center leading-tight line-clamp-2 text-gray-600 dark:text-gray-300">
+              <p class="{typography.xs} text-center leading-tight line-clamp-2">
                 {#if !performer.shouldBeHidden}
                   {displayName}
                 {/if}

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

@@ -1 +1 @@
-{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;AAiJA;iBAzIkC,GAAG,EAAE;gBAAc,MAAM;kBAAgB,MAAM;gBAAc,OAAO;YAAU,MAAM;mBAAiB,OAAO;;WAyItF;wBAzIrC;IAAE,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,WAAU;CAAE"}
+{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;AAmJA;iBAzIkC,GAAG,EAAE;gBAAc,MAAM;kBAAgB,MAAM;gBAAc,OAAO;YAAU,MAAM;mBAAiB,OAAO;;WAyItF;wBAzIrC;IAAE,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,WAAU;CAAE"}

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -1,6 +1,7 @@
 <script>
   import { ChevronLeftOutline, ChevronRightOutline, CheckCircleSolid } from '../../primitives/Icons';
   import Spinner from '../../primitives/Spinner/Spinner.svelte';
+  import { typography } from '../../tokens/typography';
 
   let {
     variant = 'availability',
@@ -13,9 +14,9 @@
     readOnly = false,
     showPartialPreview = true,
     disablePastNavigation = false,
-    ondateSelect,
-    ondayClick,
-    onmonthChange,
+    onDateSelect,
+    onDayClick,
+    onMonthChange,
   } = $props();
 
   let currentDate = new Date();
@@ -193,15 +194,15 @@
 
       if (isSelected) {
         triggerHaptic('medium');
-        ondateSelect?.({ date: day.dateStr, selected: false });
+        onDateSelect?.({ date: day.dateStr, selected: false });
       } else {
         triggerHaptic('light');
-        ondateSelect?.({ date: day.dateStr, selected: true });
+        onDateSelect?.({ date: day.dateStr, selected: true });
       }
     } else if (variant === 'display' || variant === 'public') {
       if (day.hasEvents) {
         triggerHaptic('light');
-        ondayClick?.({ date: day.dateStr, events: day.events });
+        onDayClick?.({ date: day.dateStr, events: day.events });
       }
     }
   }
@@ -218,15 +219,15 @@
 
       if (isSelected) {
         triggerHaptic('medium');
-        ondateSelect?.({ date: day.dateStr, selected: false });
+        onDateSelect?.({ date: day.dateStr, selected: false });
       } else {
         triggerHaptic('light');
-        ondateSelect?.({ date: day.dateStr, selected: true });
+        onDateSelect?.({ date: day.dateStr, selected: true });
       }
     } else if (variant === 'display' || variant === 'public') {
       if (day.hasEvents) {
         triggerHaptic('light');
-        ondayClick?.({ date: day.dateStr, events: day.events });
+        onDayClick?.({ date: day.dateStr, events: day.events });
       }
     }
   }
@@ -279,7 +280,7 @@
         }
       }
       triggerHaptic('medium');
-      onmonthChange?.({ year: currentYear, month: currentMonth });
+      onMonthChange?.({ year: currentYear, month: currentMonth });
       return;
     }
 
@@ -627,7 +628,7 @@
   {#if showNavigation}
     <header class="flex items-center justify-between mb-4 select-none">
       <div class="flex items-center gap-2" bind:this={monthDisplayEl}>
-        <h2 class="text-3xl font-semibold text-gray-900 dark:text-white leading-tight m-0">{MONTH_NAMES[currentMonth]}</h2>
+        <h2 class={typography.h2}>{MONTH_NAMES[currentMonth]}</h2>
         {#if saveStatus && variant === 'availability'}
           <span class="flex items-center justify-center ml-1">
             {#if saveStatus === 'saving'}
@@ -709,7 +710,7 @@
     >
       {#each DAY_NAMES as dayName, i}
         <div
-          class="flex items-end justify-center pb-1 text-xs font-normal text-gray-500 dark:text-gray-400 overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-gray-900 sm:dark:text-white sm:border-b sm:border-gray-200 sm:dark:border-gray-700"
+          class="flex items-end justify-center pb-1 {typography.xsMuted} overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-gray-900 sm:dark:text-white sm:border-b sm:border-gray-200 sm:dark:border-gray-700"
           role="columnheader"
           aria-label={["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][i]}
         >
@@ -720,7 +721,7 @@
 
       {#each prevMonthPreviewDays as previewDay}
         <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="text-sm font-medium text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
         </div>
       {/each}
 
@@ -745,8 +746,8 @@
           ontouchend={(e) => { e.preventDefault(); handleDayTap(e, day); }}
           onkeydown={(e) => handleDayKeydown(e, day)}
         >
-          <span class="text-sm font-medium w-full text-center transition-transform duration-100 ease-out sm:text-lg sm:font-normal sm:text-right sm:mb-2
-            {day.isPast ? 'text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-white'}
+          <span class="{typography.sm} w-full text-center transition-transform duration-100 ease-out sm:text-lg sm:font-normal sm:text-right sm:mb-2
+            {day.isPast ? 'text-gray-400 dark:text-gray-500' : ''}
             {day.isSelected && !day.isPast && variant === 'availability' ? 'text-white font-semibold' : ''}">{day.day}</span>
           {#if variant !== 'availability' && day.hasEvents}
             <div class="flex gap-0.5 mt-0.5">
@@ -760,7 +761,7 @@
 
       {#each nextMonthPreviewDays as previewDay}
         <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 sm:border-b last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="text-sm font-medium text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+          <span class="{typography.sm} text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
         </div>
       {/each}
     </div>
@@ -770,11 +771,11 @@
     <div class="flex items-center justify-center gap-6 pt-4">
       <div class="flex items-center gap-2">
         <span class="w-5 h-5 rounded bg-blue-700 dark:bg-blue-600 border border-blue-700 dark:border-blue-600"></span>
-        <span class="text-sm text-gray-900 dark:text-white">Available</span>
+        <span class="{typography.sm}">Available</span>
       </div>
       <div class="flex items-center gap-2">
         <span class="w-5 h-5 rounded bg-gray-50 dark:bg-gray-700 border-2 border-gray-400 dark:border-gray-500"></span>
-        <span class="text-sm text-gray-900 dark:text-white">Unavailable</span>
+        <span class="{typography.sm}">Unavailable</span>
       </div>
     </div>
   {/if}

package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts

@@ -14,9 +14,9 @@ declare const MiniMonthCalendar: import("svelte").Component<{
     readOnly?: boolean;
     showPartialPreview?: boolean;
     disablePastNavigation?: boolean;
-    ondateSelect: any;
-    ondayClick: any;
-    onmonthChange: any;
+    onDateSelect: any;
+    onDayClick: any;
+    onMonthChange: any;
 }, {}, "selectedDates">;
 type $$ComponentProps = {
     variant?: string;
@@ -29,8 +29,8 @@ type $$ComponentProps = {
     readOnly?: boolean;
     showPartialPreview?: boolean;
     disablePastNavigation?: boolean;
-    ondateSelect: any;
-    ondayClick: any;
-    onmonthChange: any;
+    onDateSelect: any;
+    onDayClick: any;
+    onMonthChange: any;
 };
 //# sourceMappingURL=MiniMonthCalendar.svelte.d.ts.map

package/dist/calendar/Calendar/MiniMonthCalendar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AA+sBA;cArsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;wBAqsBvP;wBArsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;AAitBA;cArsB+B,MAAM;oBAAkB,GAAG,EAAE;aAAW,GAAG,EAAE;iBAAe,MAAM;iBAAe,OAAO;qBAAmB,OAAO;sBAAoB,OAAO;eAAa,OAAO;yBAAuB,OAAO;4BAA0B,OAAO;kBAAgB,GAAG;gBAAc,GAAG;mBAAiB,GAAG;wBAqsBvP;wBArsB7C;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/FAQs/FAQs.svelte

@@ -1,5 +1,6 @@
 <script>
   import { ChevronUpOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
 
   let {
     faqs = [],
@@ -21,7 +22,7 @@
 
 <div class="flex flex-col gap-3">
   {#if showTitle}
-    <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
+    <h2 class={typography.h2}>{title}</h2>
   {/if}
 
   {#if items.length}
@@ -50,7 +51,7 @@
               aria-labelledby="accordion-heading-{index}"
             >
               <div class="p-5 border-b border-gray-200 dark:border-gray-700 {index === items.length - 1 ? 'border-b-0 rounded-b-lg' : ''}">
-                <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{answer}</p>
+                <p class="{typography.smMuted} leading-relaxed">{answer}</p>
               </div>
             </div>
           </div>
@@ -61,14 +62,14 @@
         {#each items as { question, answer }}
           <div>
             {#if question}
-              <p class="text-sm font-medium text-gray-900 dark:text-white mb-1">{question}</p>
+              <p class="{typography.label} mb-1">{question}</p>
             {/if}
-            <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{answer}</p>
+            <p class="{typography.smMuted} leading-relaxed">{answer}</p>
           </div>
         {/each}
       </div>
     {/if}
   {:else}
-    <p class="text-sm text-gray-500 dark:text-gray-400">No FAQs available.</p>
+    <p class="{typography.smMuted}">No FAQs available.</p>
   {/if}
 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"FAQs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/FAQs/FAQs.svelte.js"],"names":[],"mappings":";;;;;AAwEA;WAhE4B,GAAG,EAAE;YAAU,MAAM;gBAAc,OAAO;gBAAc,OAAO;WAgExC;wBAhEhC;IAAE,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE"}
+{"version":3,"file":"FAQs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/FAQs/FAQs.svelte.js"],"names":[],"mappings":";;;;;AA0EA;WAhE4B,GAAG,EAAE;YAAU,MAAM;gBAAc,OAAO;gBAAc,OAAO;WAgExC;wBAhEhC;IAAE,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte

@@ -1,5 +1,6 @@
 <script>
   import { ChevronLeftOutline, ChevronRightOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
 
   const today = new Date();
   const todayLocalMonth = today.getMonth();
@@ -61,7 +62,7 @@
 </script>
 
 <header class="w-full flex items-center justify-between select-none">
-  <h2 class="text-3xl font-semibold text-gray-900 dark:text-white">
+  <h2 class="{typography.h1} text-3xl">
     {new Intl.DateTimeFormat("en", {
       month: "long",
     }).format(new Date(currentYear, currentMonth, 1))}
@@ -87,7 +88,7 @@
       <ChevronLeftOutline class="w-5 h-5" />
     </button>
     <button
-      class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400"
+      class="{`${typography.label} px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:text-gray-500 dark:disabled:text-gray-400`}"
       class:scale-95={todayPressed}
       class:bg-blue-700={todayPressed}
       class:text-white={todayPressed}

package/dist/calendar/MonthSwitcher/MonthSwitcher.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;AAwFA;;;;;;4BA5E+L,OAAO;WA4E1I;wBA5EzC;IAAE,WAAW,CAAC,SAAwB;IAAC,YAAY,CAAC,SAAyB;IAAC,UAAU,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,WAAW,CAAC,WAAW;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAAE"}
+{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;AA0FA;;;;;;4BA5E+L,OAAO;WA4E1I;wBA5EzC;IAAE,WAAW,CAAC,SAAwB;IAAC,YAAY,CAAC,SAAyB;IAAC,UAAU,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,WAAW,CAAC,WAAW;IAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -3,6 +3,7 @@
   import { cubicOut } from 'svelte/easing';
   import { ChevronDownOutline, CloseOutline } from '../../primitives/Icons';
   import Spinner from '../../primitives/Spinner/Spinner.svelte';
+  import { typography } from '../../tokens/typography';
 
   let {
     loading = false,
@@ -23,7 +24,7 @@
       maxServiceFeeCents: 0,
       taxPercentage: 0,
     },
-    onpriceUpdate,
+    onPriceUpdate,
   } = $props();
 
   let showOrderSummaryOnMobile = $state(false);
@@ -101,7 +102,7 @@
   let total = $derived(Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)));
 
   $effect(() => {
-    onpriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
+    onPriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
   });
 </script>
 
@@ -110,15 +111,15 @@
   class="hidden min-[872px]:block h-fit rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
 >
   <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-600">
-    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+    <h3 class={typography.h3}>
       Order summary
-    </h2>
+    </h3>
   </div>
 
   <div class="px-5 pb-5">
     {#if totalQuantity === 0}
       <div class="py-8 text-center">
-        <p class="text-gray-500 dark:text-gray-400 text-sm">Select tickets to continue</p>
+        <p class="{typography.smMuted}">Select tickets to continue</p>
       </div>
     {:else}
       {#each Object.keys(quantities) as key}
@@ -127,8 +128,8 @@
             {#if ticket.ID == key}
               <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
                 <div>
-                  <p class="font-medium text-gray-900 dark:text-white">{ticket.name}</p>
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                  <p class="{typography.label}">{ticket.name}</p>
+                  <p class="{typography.smMuted}">
                     {#if ticket.price === 0}
                       Free x {quantities[key]}
                     {:else}
@@ -136,7 +137,7 @@
                     {/if}
                   </p>
                 </div>
-                <div class="font-medium text-gray-900 dark:text-white">
+                <div class="{typography.label}">
                   {ticket.price === 0
                     ? 'Free'
                     : `$${(ticket.price * quantities[key]).toFixed(2)}`}
@@ -147,7 +148,7 @@
         {/if}
       {/each}
 
-      <div class="flex flex-col py-3 gap-2 text-sm">
+      <div class="{`${typography.sm} flex flex-col py-3 gap-2`}">
         {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
           <div class="flex justify-between text-gray-600 dark:text-gray-300">
             <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
@@ -173,13 +174,13 @@
         </div>
       </div>
 
-      <div class="flex justify-between font-semibold text-gray-900 dark:text-white py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+      <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
         <span>Total</span><span>${total.toFixed(2)}</span>
       </div>
     {/if}
 
     {#if totalQuantity > 0 && btnText === 'Place order'}
-      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mb-3">
+      <p class="{typography.xsMuted} text-center mb-3">
         By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="text-blue-700 dark:text-blue-500 underline hover:opacity-80" target="_blank" rel="noopener noreferrer">terms of service</a>
       </p>
     {/if}
@@ -218,7 +219,7 @@
     class="min-[872px]:hidden fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-50 max-h-[80vh] rounded-t-lg shadow-xl bg-white dark:bg-gray-800"
   >
     <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-gray-200 dark:border-gray-600">
-      <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+      <h2 class="{typography.h2} text-xl">
         Order summary
       </h2>
       <button
@@ -237,8 +238,8 @@
             {#if ticket.ID == key}
               <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
                 <div>
-                  <p class="font-semibold text-gray-900 dark:text-white">{ticket.name}</p>
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                  <p class="{typography.h5}">{ticket.name}</p>
+                  <p class="{typography.smMuted}">
                     {#if ticket.price === 0}
                       Free x {quantities[key]}
                     {:else}
@@ -246,7 +247,7 @@
                     {/if}
                   </p>
                 </div>
-                <div class="font-semibold text-gray-900 dark:text-white">
+                <div class="{typography.h5}">
                   {ticket.price === 0
                     ? 'Free'
                     : `$${(ticket.price * quantities[key]).toFixed(2)}`}
@@ -283,7 +284,7 @@
         </div>
       </div>
 
-      <div class="flex justify-between font-bold text-gray-900 dark:text-white py-5 border-t border-gray-200 dark:border-gray-600">
+      <div class="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
         <span>Total</span><span>${total.toFixed(2)}</span>
       </div>
     </div>
@@ -297,15 +298,15 @@
   >
     <div class="flex items-stretch gap-3">
       <button class="flex flex-col justify-between items-start shrink-0 whitespace-nowrap bg-transparent border-none p-0 cursor-pointer touch-manipulation" onclick={makeOrderSummaryVisible}>
-        <span class="flex items-center gap-1 text-sm font-normal text-gray-600 dark:text-gray-300">
+        <span class="{`${typography.sm} flex items-center gap-1 text-gray-600 dark:text-gray-300`}">
           {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
-          <ChevronDownOutline class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 {showOrderSummaryOnMobile ? 'rotate-180' : ''}" />
+          <ChevronDownOutline class={`w-4 h-4 ${typography.iconMuted} transition-transform duration-200 ${showOrderSummaryOnMobile ? 'rotate-180' : ''}`} />
         </span>
-        <span class="text-xl font-bold text-gray-900 dark:text-white">${total.toFixed(2)}</span>
+        <span class="{typography.h2} text-xl">${total.toFixed(2)}</span>
       </button>
 
       <button
-        class="flex-1 min-w-36 h-12 rounded-lg text-sm font-semibold touch-manipulation flex items-center justify-center {totalQuantity === 0 || !isAgreed ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
+        class="{`${typography.label} flex-1 min-w-36 h-12 rounded-lg touch-manipulation flex items-center justify-center ${totalQuantity === 0 || !isAgreed ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}`}"
         onclick={() => {
           if (executePurchase) {
             executePurchase(elements);

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts

@@ -16,7 +16,7 @@ declare const OrderSummary: import("svelte").Component<{
     executePurchase?: any;
     elements?: any;
     venueServiceCharge?: Record<string, any>;
-    onpriceUpdate: any;
+    onPriceUpdate: any;
 }, {}, "">;
 type $$ComponentProps = {
     loading?: boolean;
@@ -31,6 +31,6 @@ type $$ComponentProps = {
     executePurchase?: any;
     elements?: any;
     venueServiceCharge?: Record<string, any>;
-    onpriceUpdate: any;
+    onPriceUpdate: any;
 };
 //# sourceMappingURL=OrderSummary.svelte.d.ts.map

package/dist/calendar/OrderSummary/OrderSummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAkTA;cApS+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;WAoS5Q;wBApSxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;AAoTA;cApS+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG,EAAE;qBAAmB,GAAG;eAAa,OAAO;cAAY,MAAM;mBAAiB,OAAO;oBAAkB,MAAM;uBAAqB,GAAG;sBAAoB,GAAG;eAAa,GAAG;yBAAuB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;mBAAiB,GAAG;WAoS5Q;wBApSxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,eAAe,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -1,9 +1,11 @@
 <script>
+  import { typography } from '../../tokens/typography';
+
   let {
     events = [],
     view = "row",
     placeholderImage = null,
-    oneventClick,
+    onEventClick,
   } = $props();
 
   let isSmallScreen = $state(false);
@@ -33,7 +35,7 @@
   });
 
   function handleEventClick(event) {
-    oneventClick?.(event);
+    onEventClick?.(event);
   }
 
   function handleKeydown(e, event) {
@@ -111,16 +113,12 @@
         </span>
       {/if}
 
-      <h3
-        class="font-semibold text-gray-900 dark:text-white leading-tight line-clamp-2 {view === 'col'
-          ? 'text-sm sm:text-base'
-          : 'text-sm sm:text-lg'}"
-      >
+      <h4 class="{typography.h4} leading-tight line-clamp-2">
         {event.name}
-      </h3>
+      </h4>
 
       <div
-        class="text-gray-600 dark:text-gray-400 {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
+        class="{typography.textMuted} {view === 'col' ? 'text-xs' : 'text-xs sm:text-sm'}"
       >
         <span class="font-medium">
           {formatEventDate(event.date)}
@@ -132,13 +130,13 @@
       </div>
 
       {#if view === "row" && event.description}
-        <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm line-clamp-2 mt-1">
+        <p class="{typography.xsMuted} text-xs sm:text-sm line-clamp-2 mt-1">
           {event.description}
         </p>
       {/if}
 
       {#if event.doorsTimeline && view === "row"}
-        <div class="text-xs text-gray-500 dark:text-gray-400">
+        <div class="{typography.xsMuted} text-xs">
           {event.doorsTimeline}
         </div>
       {/if}

package/dist/calendar/PublicCard/PublicCard.svelte.d.ts

@@ -7,12 +7,12 @@ declare const PublicCard: import("svelte").Component<{
     events?: any[];
     view?: string;
     placeholderImage?: any;
-    oneventClick: any;
+    onEventClick: any;
 }, {}, "">;
 type $$ComponentProps = {
     events?: any[];
     view?: string;
     placeholderImage?: any;
-    oneventClick: any;
+    onEventClick: any;
 };
 //# sourceMappingURL=PublicCard.svelte.d.ts.map

package/dist/calendar/PublicCard/PublicCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;AAiIA;aA7H8B,GAAG,EAAE;WAAS,MAAM;uBAAqB,GAAG;kBAAgB,GAAG;WA6HpC;wBA7HtC;IAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,YAAY,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;AAmIA;aA3H8B,GAAG,EAAE;WAAS,MAAM;uBAAqB,GAAG;kBAAgB,GAAG;WA2HpC;wBA3HtC;IAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,YAAY,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/ShowCard/ShowCard.svelte

@@ -1,6 +1,7 @@
 <script>
   import { ShareOutline, CheckOutline } from '../../primitives/Icons';
   import ShowTimeCard from '../ShowTimeCard/ShowTimeCard.svelte';
+  import { typography } from '../../tokens/typography';
 
   let {
     event = {},
@@ -31,7 +32,7 @@
       }
       return timeStr;
     },
-    onshowtimeSelect,
+    onShowtimeSelect,
   } = $props();
 
   let selectedDate = $state(null);
@@ -39,7 +40,7 @@
 
   function handleSelect(e) {
     selectedDate = e.date;
-    onshowtimeSelect?.({ date: e.date, ...e });
+    onShowtimeSelect?.({ date: e.date, ...e });
   }
 
   async function handleShare() {
@@ -78,9 +79,9 @@
 <div class="h-fit rounded-lg sm:px-5 py-4 md:border md:border-gray-200 md:dark:border-gray-700 bg-white dark:bg-gray-800">
   {#if showTitle}
     <div class="flex justify-between items-start gap-2 mb-4">
-      <h1 class="flex-1 text-left font-semibold text-xl leading-tight text-gray-900 dark:text-white">
+      <h2 class="{typography.h2} flex-1 text-left">
         {event.name || ''}
-      </h1>
+      </h2>
       <button
         class="flex-shrink-0 p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 relative"
         aria-label="Share event"
@@ -95,19 +96,19 @@
     </div>
   {/if}
 
-  <div class="space-y-1 text-sm">
-    <p class="font-medium text-gray-900 dark:text-white">{formatDateTime(event.startDateTime)}</p>
+  <div class="space-y-1">
+    <p class="{typography.label}">{formatDateTime(event.startDateTime)}</p>
     {#if event.displayStartTime && event.doorsOpenTime}
-      <p class="text-gray-600 dark:text-gray-400">Doors open {formatTimeline(event.doorsOpenTime)}</p>
+      <p class="{typography.smMuted}">Doors open {formatTimeline(event.doorsOpenTime)}</p>
     {/if}
     {#if event.displayEndTime && event.endDateTime}
-      <p class="text-gray-600 dark:text-gray-400">Ends {formatTimeline(event.endDateTime)}</p>
+      <p class="{typography.smMuted}">Ends {formatTimeline(event.endDateTime)}</p>
     {/if}
   </div>
 
   {#if showtimes && showtimes.length > 1}
     <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-      <p class="text-sm mb-2 text-gray-500 dark:text-gray-400">More showtimes</p>
+      <p class="{typography.smMuted} mb-2">More showtimes</p>
       <div class="flex flex-wrap gap-2">
         {#each showtimes as showtime}
           <div class="w-24">
@@ -132,16 +133,16 @@
         rel="noopener noreferrer"
         class="group block"
       >
-        <p class="text-sm font-medium transition-colors text-gray-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-500">
+        <p class="{typography.label} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
           {event.venue.name}
         </p>
-        <p class="text-sm transition-colors text-gray-500 dark:text-gray-400 group-hover:text-blue-700 dark:group-hover:text-blue-500">
+        <p class="{typography.smMuted} transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-500">
           {event.venue.address || ''}
         </p>
       </a>
 
       {#if event.hasAgeRestriction || event.ageRequirement || event.minimumAge}
-        <p class="text-sm mt-2 text-gray-500 dark:text-gray-400">
+        <p class="{typography.smMuted} mt-2">
           {#if event.ageRequirement != null}
             {event.ageRequirement <= 1 ? 'All ages' : `${event.ageRequirement}+`}
           {:else if event.minimumAge != null}