@getmicdrop/svelte-components 5.3.6 → 5.3.12

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',
@@ -321,7 +322,7 @@
     }
 
     triggerHaptic('medium');
-    onmonthChange?.({ year: currentYear, month: currentMonth });
+    onMonthChange?.({ year: currentYear, month: currentMonth });
 
     const enterFrom = direction > 0 ? containerWidth : -containerWidth;
     calendarGridElement.style.transition = 'none';
@@ -614,7 +615,7 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  class="w-full max-w-full mx-auto overflow-hidden select-none"
+  class="w-full max-w-full mx-auto select-none"
   class:max-w-xs={variant === 'display'}
   ontouchstart={handleTouchStart}
   ontouchmove={handleTouchMove}
@@ -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'}
@@ -643,7 +644,7 @@
 
       <div class="flex items-center gap-2">
         <button
-          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
           class:scale-90={prevPressed}
           class:bg-gray-100={prevPressed}
           class:dark:bg-gray-700={prevPressed}
@@ -681,7 +682,7 @@
         {/if}
 
         <button
-          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+          class="p-2 flex items-center justify-center border-0 rounded-lg bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-all duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
           class:scale-90={nextPressed}
           class:bg-gray-100={nextPressed}
           class:dark:bg-gray-700={nextPressed}
@@ -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.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,10 +3,12 @@
   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,
     quantities = {},
+    donationAmounts = {}, // Map of ticketId -> donation amount string
     eventTickets = [],
     checkoutTicket = null,
     isAgreed = true,
@@ -26,6 +28,24 @@
     onPriceUpdate,
   } = $props();
 
+  // Helper to get effective price for a ticket (handles donation tickets)
+  function getEffectivePrice(ticket) {
+    // Donation ticket (type 2): use user-entered donation amount
+    if (isDonationTicket(ticket)) {
+      const donationAmount = donationAmounts[ticket.ID];
+      return parseFloat(donationAmount) || 0;
+    }
+    // Regular ticket: use ticket price
+    return parseFloat(ticket.price) || 0;
+  }
+
+  // Check if ticket is a donation ticket
+  // Handle both 'type' and 'ticketType' fields, and coerce to number for comparison
+  function isDonationTicket(ticket) {
+    const ticketType = ticket.type ?? ticket.ticketType ?? 0;
+    return Number(ticketType) === 2;
+  }
+
   let showOrderSummaryOnMobile = $state(false);
 
   function feeFor(price) {
@@ -75,12 +95,20 @@
   let subtotalWithoutDiscount = $derived(Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
     if (!ticket) return acc;
-    return acc + quantities[key] * ticket.price;
+    // For donation tickets, use the donation amount; otherwise use ticket price
+    const effectivePrice = getEffectivePrice(ticket);
+    return acc + quantities[key] * effectivePrice;
   }, 0));
 
   let subtotal = $derived(Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
     if (!ticket) return acc;
+    // For donation tickets, use the donation amount (no discounts apply)
+    if (isDonationTicket(ticket)) {
+      const effectivePrice = getEffectivePrice(ticket);
+      return acc + quantities[key] * effectivePrice;
+    }
+    // For regular tickets, apply discounts as usual
     const discountedPrice = getDiscountedPrice(ticket);
     const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
     return acc + quantities[key] * priceToUse;
@@ -90,7 +118,8 @@
 
   let fees = $derived(Object.keys(quantities).reduce((acc, key) => {
     const ticket = eventTickets.find(t => t.ID == key);
-    if (!ticket || ticket.price == 0) return acc;
+    // Skip fees for: no ticket, free tickets, and donation tickets (type 2)
+    if (!ticket || ticket.price == 0 || isDonationTicket(ticket)) return acc;
     const discountedPrice = getDiscountedPrice(ticket);
     const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
     return acc + quantities[key] * feeFor(priceToUse);
@@ -110,36 +139,42 @@
   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}
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
+              {@const effectivePrice = getEffectivePrice(ticket)}
+              {@const isDonation = isDonationTicket(ticket)}
               <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">
-                    {#if ticket.price === 0}
+                  <p class="{typography.label}">{ticket.name}</p>
+                  <p class="{typography.smMuted}">
+                    {#if ticket.price === 0 && !isDonation}
                       Free x {quantities[key]}
+                    {:else if isDonation}
+                      ${effectivePrice.toFixed(2)} x {quantities[key]}
                     {:else}
                       ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
-                <div class="font-medium text-gray-900 dark:text-white">
-                  {ticket.price === 0
-                    ? 'Free'
-                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                <div class="{typography.label}">
+                  {#if ticket.price === 0 && !isDonation}
+                    Free
+                  {:else}
+                    ${(effectivePrice * quantities[key]).toFixed(2)}
+                  {/if}
                 </div>
               </div>
             {/if}
@@ -147,7 +182,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 +208,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 +253,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
@@ -235,21 +270,27 @@
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
+              {@const effectivePrice = getEffectivePrice(ticket)}
+              {@const isDonation = isDonationTicket(ticket)}
               <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">
-                    {#if ticket.price === 0}
+                  <p class="{typography.h5}">{ticket.name}</p>
+                  <p class="{typography.smMuted}">
+                    {#if ticket.price === 0 && !isDonation}
                       Free x {quantities[key]}
+                    {:else if isDonation}
+                      ${effectivePrice.toFixed(2)} x {quantities[key]}
                     {:else}
                       ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
-                <div class="font-semibold text-gray-900 dark:text-white">
-                  {ticket.price === 0
-                    ? 'Free'
-                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                <div class="{typography.h5}">
+                  {#if ticket.price === 0 && !isDonation}
+                    Free
+                  {:else}
+                    ${(effectivePrice * quantities[key]).toFixed(2)}
+                  {/if}
                 </div>
               </div>
             {/if}
@@ -283,7 +324,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 +338,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

@@ -6,6 +6,7 @@ type OrderSummary = {
 declare const OrderSummary: import("svelte").Component<{
     loading?: boolean;
     quantities?: Record<string, any>;
+    donationAmounts?: Record<string, any>;
     eventTickets?: any[];
     checkoutTicket?: any;
     isAgreed?: boolean;
@@ -21,6 +22,7 @@ declare const OrderSummary: import("svelte").Component<{
 type $$ComponentProps = {
     loading?: boolean;
     quantities?: Record<string, any>;
+    donationAmounts?: Record<string, any>;
     eventTickets?: any[];
     checkoutTicket?: any;
     isAgreed?: boolean;

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":";;;;;AAoVA;cApU+B,OAAO;iBAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;sBAAoB,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;WAoUnT;wBApUxC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,eAAe,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,4 +1,6 @@
 <script>
+  import { typography } from '../../tokens/typography';
+
   let {
     events = [],
     view = "row",
@@ -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.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 = {},
@@ -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}

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

@@ -1 +1 @@
-{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;AAsJA;YA5I6B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAAc,GAAG,EAAE;gBAAc,OAAO;;;sBAA0E,GAAG;WA4I9G;wBA5IpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,cAAc,CAAC,WAAW;IAAC,gBAAgB,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"ShowCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowCard/ShowCard.svelte.js"],"names":[],"mappings":";;;;;AAwJA;YA5I6B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAAc,GAAG,EAAE;gBAAc,OAAO;;;sBAA0E,GAAG;WA4I9G;wBA5IpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,cAAc,CAAC,WAAW;IAAC,gBAAgB,EAAE,GAAG,CAAA;CAAE"}