@getmicdrop/svelte-components 5.3.6 → 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',
@@ -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.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,
@@ -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.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,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"}

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { typography } from '../../tokens/typography';
+
   let {
     day = '',
     date = '',
@@ -51,9 +53,9 @@
   aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
   aria-pressed={isSelected}
 >
-  <span class="font-medium text-sm text-gray-500 dark:text-gray-400">{day}</span>
-  <span class="font-medium text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : 'text-gray-900 dark:text-white'}">
+  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
+  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
     {formatDate(date)}
   </span>
-  <span class="font-medium text-sm text-gray-500 dark:text-gray-400">{formatHour(time)}</span>
+  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;AAyDA;UArD2B,MAAM;WAAS,MAAM;WAAS,MAAM;iBAAe,OAAO;cAAY,GAAG;WAqDzC;wBArDxC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"ShowTimeCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/ShowTimeCard/ShowTimeCard.svelte.js"],"names":[],"mappings":";;;;;AA6DA;UArD2B,MAAM;WAAS,MAAM;WAAS,MAAM;iBAAe,OAAO;cAAY,GAAG;WAqDzC;wBArDxC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/components/Layout/Section.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { typography } from '../../tokens/typography';
 
   /**
    * Section - Semantic section wrapper with optional title
@@ -43,9 +44,9 @@
   }: Props = $props();
 
   const titleSizeMap: Record<string, string> = {
-    sm: 'text-base font-medium',
-    md: 'text-lg font-semibold',
-    lg: 'text-xl font-semibold'
+    sm: typography.h4,
+    md: typography.h3,
+    lg: typography.h2
   };
 
   const gapMap: Record<string, string> = {
@@ -65,7 +66,6 @@
   let titleClasses = $derived(
     [
       titleSizeMap[titleSize] || titleSizeMap.md,
-      'text-gray-900 dark:text-white',
       titleClass
     ].filter(Boolean).join(' ')
   );

package/dist/components/Layout/Section.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Section.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC;;;;;;;;;;;;;;;GAeG;AAEH,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqDH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Section.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Section.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC;;;;;;;;;;;;;;;GAeG;AAEH,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqDH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/index.d.ts

@@ -62,6 +62,7 @@ export { default as Toggle } from "./primitives/Toggle.svelte";
 export { default as Typography } from "./primitives/Typography/Typography.svelte";
 export { default as ValidationError } from "./primitives/ValidationError.svelte";
 export { default as CropImage } from "./recipes/CropImage/CropImage.svelte";
+export { default as ImageUploader } from "./recipes/ImageUploader/ImageUploader.svelte";
 export { default as EmptyState } from "./recipes/feedback/EmptyState/EmptyState.svelte";
 export { default as ErrorDisplay } from "./recipes/feedback/ErrorDisplay.svelte";
 export { default as StatusIndicator } from "./recipes/feedback/StatusIndicator/StatusIndicator.svelte";
@@ -111,5 +112,7 @@ export { default as ShowTimeCard } from "./calendar/ShowTimeCard/ShowTimeCard.sv
 export * from "./constants/formOptions.js";
 export * from "./constants/validation.js";
 export * from "./presets/index.js";
+export { portal } from "./utils/portal.js";
+export { typography } from "./tokens/typography.js";
 export { default as MiniMonthCalendar, default as Calendar } from "./calendar/Calendar/MiniMonthCalendar.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -120,6 +120,9 @@ export { default as ValidationError } from './primitives/ValidationError.svelte'
 // CropImage
 export { default as CropImage } from './recipes/CropImage/CropImage.svelte';
 
+// ImageUploader
+export { default as ImageUploader } from './recipes/ImageUploader/ImageUploader.svelte';
+
 // Feedback
 export { default as EmptyState } from './recipes/feedback/EmptyState/EmptyState.svelte';
 export { default as ErrorDisplay } from './recipes/feedback/ErrorDisplay.svelte';
@@ -212,3 +215,9 @@ export * from './constants/validation.js';
 
 // Presets - Domain-to-color mappings for migration
 export * from './presets/index.js';
+
+// Utils / Actions
+export { portal } from './utils/portal.js';
+
+// Design Tokens
+export { typography } from './tokens/typography.js';

package/dist/patterns/data/DataTable.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { typography } from '../../tokens/typography';
+
   let {
     striped = false,
     hoverable = true,
@@ -19,9 +21,9 @@
 </script>
 
 <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 {className}">
-  <table class="w-full text-left text-gray-500 dark:text-gray-400">
+  <table class={`w-full text-left ${typography.textMuted}`}>
     {#if header}
-      <thead class="text-xs uppercase bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
+      <thead class={`text-xs uppercase bg-gray-50 dark:bg-gray-700 ${typography.textMuted}`}>
         {@render header(cellSize)}
       </thead>
     {/if}

package/dist/patterns/data/DataTable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataTable.svelte.js"],"names":[],"mappings":";;;;;AAyCA;cArC+B,OAAO;gBAAc,OAAO;eAAa,OAAO;WAAS,MAAM;YAAU,MAAM;YAAU,GAAG;cAAY,GAAG;WAqClF;wBArCrC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/data/DataTable.svelte.js"],"names":[],"mappings":";;;;;AA6CA;cArC+B,OAAO;gBAAc,OAAO;eAAa,OAAO;WAAS,MAAM;YAAU,MAAM;YAAU,GAAG;cAAY,GAAG;WAqClF;wBArCrC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/patterns/forms/FormSection.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { typography } from '../../tokens/typography';
+
   let {
     title = '',
     description = '',
@@ -16,10 +18,10 @@
   {#if title || description}
     <div class="space-y-1">
       {#if title}
-        <h3 class="text-lg font-medium text-gray-900 dark:text-white">{title}</h3>
+        <h3 class={typography.h3}>{title}</h3>
       {/if}
       {#if description}
-        <p class="text-sm text-gray-500 dark:text-gray-400">{description}</p>
+        <p class={typography.smMuted}>{description}</p>
       {/if}
     </div>
   {/if}