@getmicdrop/svelte-components 5.3.6 → 5.3.10

package/dist/recipes/fields/ToggleField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Toggle from '../../primitives/Toggle.svelte';
   import ValidationError from '../../primitives/ValidationError.svelte';
+  import { typography } from '../../tokens/typography';
 
   interface Props {
     /** Whether the toggle is checked */
@@ -38,12 +39,12 @@
     {#if label || description}
       <div class="flex flex-col">
         {#if label}
-          <span class="text-sm font-medium text-gray-900 dark:text-white {error ? 'text-red-500' : ''}">
+          <span class={`${typography.label} ${error ? 'text-red-500' : ''}`}>
             {label}
           </span>
         {/if}
         {#if description}
-          <span class="text-sm text-gray-500 dark:text-gray-400">{description}</span>
+          <span class={typography.smMuted}>{description}</span>
         {/if}
       </div>
     {/if}

package/dist/recipes/fields/ToggleField.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/ToggleField.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACnD;AAwCH,QAAA,MAAM,WAAW,kDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ToggleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/ToggleField.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACnD;AAyCH,QAAA,MAAM,WAAW,kDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/recipes/inputs/MultiSelect.svelte

@@ -1,5 +1,6 @@
 <script>
   import { CloseOutline, ChevronDownOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
 
   // Props matching old Flowbite wrapper for drop-in replacement
   let {
@@ -139,7 +140,7 @@
 <div class="flex flex-col gap-2 w-full">
   {#if label}
     <div class="flex justify-start items-center gap-1">
-      <label for={id || name} class="text-sm font-medium text-gray-900 dark:text-white leading-tight">
+      <label for={id || name} class={`${typography.label} leading-tight`}>
         {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
       </label>
     </div>
@@ -165,8 +166,8 @@
         {#if hasSelection}
           <div class="flex flex-wrap gap-1.5">
             {#each selectedItems as item}
-              <span class="inline-flex items-center px-2 py-1 text-sm font-medium bg-blue-100 rounded dark:bg-blue-900">
-                <span class="overflow-hidden text-ellipsis whitespace-nowrap text-gray-900 dark:text-white" style="color-scheme: light dark;">{item.name}</span>
+              <span class="inline-flex items-center px-2 py-1 bg-blue-100 rounded dark:bg-blue-900">
+                <span class={`${typography.sm} overflow-hidden text-ellipsis whitespace-nowrap`} style="color-scheme: light dark;">{item.name}</span>
                 <button
                   type="button"
                   class="inline-flex items-center p-0.5 ms-1.5 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300"
@@ -179,7 +180,7 @@
             {/each}
           </div>
         {:else}
-          <span class="text-gray-500 dark:text-gray-400 font-medium text-sm">{placeholder}</span>
+          <span class={typography.smMuted}>{placeholder}</span>
         {/if}
       </div>
 
@@ -194,7 +195,7 @@
             <CloseOutline class="w-3.5 h-3.5" />
           </button>
         {/if}
-        <ChevronDownOutline class="w-4 h-4 shrink-0 text-gray-500 dark:text-gray-400 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+        <ChevronDownOutline class={`w-4 h-4 shrink-0 ${typography.iconMuted} transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
       </div>
     </button>
 
@@ -214,7 +215,7 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{id || name}-option-{index}"
-            class="flex items-center gap-2 px-3 py-2 cursor-pointer text-sm text-gray-900 dark:text-white transition-colors
+            class="flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors {typography.sm}
               {index === focusedIndex || value.includes(item.value) ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
             role="option"
             aria-selected={value.includes(item.value)}
@@ -238,6 +239,6 @@
   </div>
 
   {#if error}
-    <p class="text-sm text-red-500 dark:text-red-400">{error}</p>
+    <p class={`${typography.sm} text-red-500 dark:text-red-400`}>{error}</p>
   {/if}
 </div>

package/dist/recipes/inputs/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;AAiNA;YAxM6B,GAAG,EAAE;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;gBAAc,OAAO;qBAAmB,OAAO;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;cAAY,GAAG;gBAwM9L;wBAxMvC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;AAmNA;YAxM6B,GAAG,EAAE;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;gBAAc,OAAO;qBAAmB,OAAO;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;cAAY,GAAG;gBAwM9L;wBAxMvC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte

@@ -2,6 +2,7 @@
   import { SearchOutline } from "../../../primitives/Icons";
   import * as GMaps from '@googlemaps/js-api-loader';
   import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
+  import { typography } from '../../../tokens/typography';
   const { Loader } = GMaps;
 
   interface Props {
@@ -277,19 +278,19 @@
     class="relative rounded-lg {shouldAnimate ? 'transition-transform duration-200 focus-within:scale-[1.01]' : ''}"
   >
     <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10">
-      <SearchOutline class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+      <SearchOutline class={`w-5 h-5 ${typography.iconMuted}`} />
     </div>
 
     <input
       bind:this={inputRef}
       type="text"
       name="location"
-      class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm font-medium rounded-lg
+      class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-gray-50 border border-gray-300 rounded-lg {typography.label}
              focus:ring-blue-500 focus:border-blue-500 focus:outline-none
              hover:border-blue-500
              disabled:opacity-50 disabled:cursor-not-allowed
              placeholder:text-gray-500
-             dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400
+             dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
              dark:focus:ring-blue-500 dark:focus:border-blue-500
              dark:hover:border-blue-500"
       {placeholder}
@@ -303,9 +304,9 @@
 
     {#if results.length > 0}
       <div class="absolute inset-y-0 right-0 hidden md:flex items-center p-1.5 gap-1">
-        <kbd class="inline-flex items-center justify-center px-1 border border-gray-300 rounded text-xs text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">Esc</kbd>
-        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded text-xs text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">&uArr;</kbd>
-        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded text-xs text-gray-500 bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">&dArr;</kbd>
+        <kbd class="inline-flex items-center justify-center px-1 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">Esc</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&uArr;</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&dArr;</kbd>
       </div>
 
       <ul
@@ -315,14 +316,13 @@
       >
         {#each results as place, i}
           <li
-            class="cursor-pointer text-gray-900 transition-colors duration-100
-                   dark:text-white
+            class="cursor-pointer transition-colors duration-100 {typography.body}
                    {i === currentSuggestion ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
             id="option-{i + 1}"
           >
             <button
               type="button"
-              class="block w-full text-left px-4 py-3 text-sm bg-transparent border-none cursor-pointer
+              class="block w-full text-left px-4 py-3 bg-transparent border-none cursor-pointer {typography.sm}
                      focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700"
               tabindex={i + 1}
               onclick={() => onPlaceSelected(place.to_place, place.text)}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8SH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AASE,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8SH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.svelte

@@ -1,5 +1,6 @@
 <script>
   import { SearchOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
 
   // API compatible with flowbite-svelte Search
   let {
@@ -23,9 +24,9 @@
   } = $props();
 
   const sizes = {
-    sm: { icon: "w-3.5 h-3.5", input: "h-8 text-xs pl-8", wrapper: "h-8" },
-    md: { icon: "w-4 h-4", input: "h-10 text-sm pl-9", wrapper: "h-10" },
-    lg: { icon: "w-5 h-5", input: "h-11 text-sm pl-10", wrapper: "h-11" }
+    sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
+    md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
+    lg: { icon: "w-5 h-5", input: `h-11 ${typography.sm} pl-10`, wrapper: "h-11" }
   };
 
   let sizeConfig = $derived(sizes[size] || sizes.lg);
@@ -58,7 +59,7 @@
 
 <div class="relative w-full {sizeConfig.wrapper} {className}">
   <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-    <SearchOutline class="text-gray-500 dark:text-gray-400 {sizeConfig.icon}" />
+    <SearchOutline class={`${typography.iconMuted} ${sizeConfig.icon}`} />
   </div>
   <input
     type="search"
@@ -66,7 +67,7 @@
     {name}
     {placeholder}
     {disabled}
-    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     bind:value
     oninput={handleInput}
     onchange={handleChange}
@@ -77,7 +78,7 @@
     {...restProps}
   />
   {#if children}
-    <div class="absolute inset-y-0 right-0 flex items-center text-gray-500 dark:text-gray-400">
+    <div class={`absolute inset-y-0 right-0 flex items-center ${typography.iconMuted}`}>
       {@render children()}
     </div>
   {/if}

package/dist/recipes/inputs/Search.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.js"],"names":[],"mappings":";;;;;AA6EA;YApE6B,MAAM;kBAAgB,MAAM;WAAS,MAAM;eAAa,OAAO;SAAO,MAAM;WAAS,MAAM;YAAU,MAAM;aAAW,GAAG;cAAY,GAAG;eAAa,GAAG;aAAW,GAAG;aAAW,GAAG;YAAU,GAAG;cAAY,GAAG;sCAoExL;wBApElC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.js"],"names":[],"mappings":";;;;;AA+EA;YApE6B,MAAM;kBAAgB,MAAM;WAAS,MAAM;eAAa,OAAO;SAAO,MAAM;WAAS,MAAM;YAAU,MAAM;aAAW,GAAG;cAAY,GAAG;eAAa,GAAG;aAAW,GAAG;aAAW,GAAG;YAAU,GAAG;cAAY,GAAG;sCAoExL;wBApElC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/recipes/modals/AlertModal.svelte

@@ -17,6 +17,7 @@
   import Modal from '../../primitives/Modal/Modal.svelte';
   import Button from '../../primitives/Button/Button.svelte';
   import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
 
   let {
     /** Whether the modal is visible */
@@ -102,7 +103,7 @@
         </div>
       </div>
       {#if title}
-        <h2 class="text-xl font-medium text-gray-900 dark:text-white mt-4">{title}</h2>
+        <h2 class={`${typography.h2} mt-4`}>{title}</h2>
       {/if}
     </div>
   {/snippet}
@@ -110,7 +111,7 @@
   {#snippet body()}
     <div class="text-center mt-4">
       {#if message}
-        <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{message}</p>
+        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
       {/if}
     </div>
   {/snippet}

package/dist/recipes/modals/AlertModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.svelte.js"],"names":[],"mappings":";;;;;AAwIA;WA5G4B,OAAO;cAAY,MAAM;YAAU,MAAM;cAAY,MAAM;iBAAe,MAAM;gBAAc,MAAM;WAAS,MAAM;aAAW,GAAG;eAAa,GAAG;eA4GpH;wBA5GtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"AlertModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.svelte.js"],"names":[],"mappings":";;;;;AA0IA;WA5G4B,OAAO;cAAY,MAAM;YAAU,MAAM;cAAY,MAAM;iBAAe,MAAM;gBAAc,MAAM;WAAS,MAAM;aAAW,GAAG;eAAa,GAAG;eA4GpH;wBA5GtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAA;CAAE"}

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -2,6 +2,7 @@
   import Button from "../../primitives/Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
 
   let {
     show = $bindable(false),
@@ -111,7 +112,7 @@
         </div>
       {/if}
       {#if title}
-        <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
+        <h2 class={typography.h2}>{title}</h2>
       {/if}
     </div>
   {/snippet}
@@ -119,12 +120,12 @@
   {#snippet body()}
     <div class="text-center mt-4">
       {#if description}
-        <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
+        <p class={`${typography.smMuted} leading-relaxed`}>
           {description}
         </p>
       {/if}
       {#if warningText}
-        <p class="mt-3 text-sm font-medium text-red-600 dark:text-red-400">
+        <p class={`${typography.label} text-red-600 dark:text-red-400 mt-3`}>
           {warningText}
         </p>
       {/if}

package/dist/recipes/modals/ConfirmationModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;AAyJA;WA7I4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;cAAY,GAAG,EAAE;WAAS,GAAG;iBAAe,GAAG;eAAa,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;cAAY,MAAM;cAAY,OAAO;eAAa,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;qCA6IjR;wBA7I7C;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"ConfirmationModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ConfirmationModal.svelte.js"],"names":[],"mappings":";;;;;AA2JA;WA7I4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;cAAY,GAAG,EAAE;WAAS,GAAG;iBAAe,GAAG;eAAa,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;cAAY,MAAM;cAAY,OAAO;eAAa,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;qCA6IjR;wBA7I7C;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/recipes/modals/InputModal.svelte

@@ -3,6 +3,7 @@
   import Button from "../../primitives/Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
 
   let {
     show = $bindable(false),
@@ -88,7 +89,7 @@
         </div>
       {/if}
       {#if title}
-        <h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
+        <h3 class={typography.h2}>{title}</h3>
       {/if}
     </div>
   {/snippet}
@@ -96,7 +97,7 @@
   {#snippet body()}
     <div class="text-left mt-4">
       {#if description}
-        <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-4">
+        <p class={`${typography.smMuted} leading-relaxed mb-4`}>
           {description}
         </p>
       {/if}
@@ -105,7 +106,7 @@
         {#if inputLabel}
           <label
             for="modal-input"
-            class="block text-sm font-medium text-gray-900 dark:text-white mb-2"
+            class={`${typography.label} block mb-2`}
           >
             {inputLabel}
           </label>
@@ -117,7 +118,7 @@
             bind:value={inputValue}
             placeholder={inputPlaceholder}
             rows={inputRows}
-            class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+            class="w-full px-3 py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} bg-gray-50 dark:bg-gray-700 {typography.body} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
             disabled={disabled || loading}
           ></textarea>
         {:else}
@@ -125,7 +126,7 @@
             {#if inputIcon}
               {@const InputIconComponent = inputIcon}
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                <InputIconComponent class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                <InputIconComponent class={`w-5 h-5 ${typography.iconMuted}`} />
               </div>
             {/if}
             <input
@@ -135,18 +136,18 @@
               placeholder={inputPlaceholder}
               required={inputRequired}
               disabled={disabled || loading}
-              class="w-full {inputIcon ? 'pl-10' : 'px-3'} py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+              class="w-full {inputIcon ? 'pl-10' : 'px-3'} py-2 border {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg {typography.body} bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
             />
           </div>
         {/if}
 
         {#if hasError && (errorMessage || emailError)}
-          <p class="mt-2 text-sm text-red-600 dark:text-red-400 font-medium flex items-center gap-1">
+          <p class={`${typography.label} text-red-600 dark:text-red-400 mt-2 flex items-center gap-1`}>
             <ExclamationTriangleOutline class="w-4 h-4" />
             {emailError ? "Please enter a valid email address" : errorMessage}
           </p>
         {:else if helpText && !hasError}
-          <p class="text-xs font-normal text-gray-500 dark:text-gray-400 pt-2">
+          <p class={`${typography.xsMuted} pt-2`}>
             {helpText}
           </p>
         {/if}

package/dist/recipes/modals/InputModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/InputModal.svelte.js"],"names":[],"mappings":";;;;;AAmKA;WArJ4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;eAAa,OAAO;iBAAe,OAAO;iBAAe,MAAM;uBAAqB,MAAM;gBAAc,MAAM;iBAAe,MAAM;oBAAkB,OAAO;gBAAc,MAAM;gBAAc,GAAG;eAAa,MAAM;mBAAiB,MAAM;gBAAc,OAAO;oBAAkB,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;2BAAyB,MAAM;eAAa,OAAO;cAAY,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;8BAqJre;wBArJtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/InputModal.svelte.js"],"names":[],"mappings":";;;;;AAqKA;WArJ4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;eAAa,OAAO;iBAAe,OAAO;iBAAe,MAAM;uBAAqB,MAAM;gBAAc,MAAM;iBAAe,MAAM;oBAAkB,OAAO;gBAAc,MAAM;gBAAc,GAAG;eAAa,MAAM;mBAAiB,MAAM;gBAAc,OAAO;oBAAkB,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;2BAAyB,MAAM;eAAa,OAAO;cAAY,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;8BAqJre;wBArJtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}

package/dist/recipes/modals/ModalStateManager.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import Icon from "../../primitives/Icons/Icon.svelte";
   import Button from "../../primitives/Button/Button.svelte";
+  import { typography } from '../../tokens/typography';
 
   type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
 
@@ -54,18 +55,18 @@
         <Icon name="Reload" size="20" />
       </span>
     </div>
-    <p class="text-gray-900 dark:text-white text-center font-medium">{processingMessage}</p>
+    <p class={`${typography.body} text-center font-medium`}>{processingMessage}</p>
   </div>
 {:else if isSuccess}
   <div class="py-6 px-4 flex flex-col items-center justify-center gap-4">
     <div class={successIconColor}>
       <Icon name={successIcon} size="48" />
     </div>
-    <h2 class="text-xl font-semibold text-gray-900 dark:text-white text-center">
+    <h2 class={`${typography.h2} text-center`}>
       {successTitle}
     </h2>
     {#if successMessage}
-      <p class="text-gray-500 dark:text-gray-400 text-center text-sm">{successMessage}</p>
+      <p class={`${typography.smMuted} text-center`}>{successMessage}</p>
     {/if}
     <Button variant="default" size="full" onclick={onSuccessClose}>
       {successButtonText}

package/dist/recipes/modals/ModalStateManager.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalStateManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ModalStateManager.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,oBAAoB,GAAG,aAAa,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5T,UAAU,KAAK;IACb,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqDH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ModalStateManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ModalStateManager.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMpC,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,oBAAoB,GAAG,aAAa,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5T,UAAU,KAAK;IACb,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsDH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/modals/StatusModal.svelte

@@ -3,6 +3,7 @@
   import Button from "../../primitives/Button/Button.svelte";
   import Cancel from "../../assets/svg/cancel.svg";
   import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
 
   let {
     show = $bindable(false),
@@ -130,10 +131,10 @@
         </div>
         <div class="mt-4">
           {#if title}
-            <h2 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h2>
+            <h2 class={typography.h2}>{title}</h2>
           {/if}
           {#if subtitle}
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{subtitle}</p>
+            <p class={`${typography.smMuted} mt-1`}>{subtitle}</p>
           {/if}
         </div>
       {:else}
@@ -157,7 +158,7 @@
           {/if}
         </div>
         {#if title}
-          <h2 class="text-xl font-medium text-gray-900 dark:text-white mt-4">{title}</h2>
+          <h2 class={`${typography.h2} mt-4`}>{title}</h2>
         {/if}
       {/if}
     </div>
@@ -166,7 +167,7 @@
   {#snippet body()}
     <div class="text-center mt-4">
       {#if description}
-        <p class="text-sm leading-relaxed {isProfileMode ? 'text-gray-900 dark:text-white font-medium' : 'text-gray-500 dark:text-gray-400'}">
+        <p class={`leading-relaxed ${isProfileMode ? `${typography.label}` : `${typography.smMuted}`}`}>
           {description}
         </p>
       {/if}

package/dist/recipes/modals/StatusModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/StatusModal.svelte.js"],"names":[],"mappings":";;;;;AAwMA;WA1L4B,OAAO;WAAS,MAAM;YAAU,MAAM;eAAa,MAAM;kBAAgB,MAAM;iBAAe,MAAM;eAAa,MAAM;iBAAe,GAAG;YAAU,GAAG;eAAa,OAAO;cAAY,OAAO;cAAY,GAAG;cAAY,GAAG,EAAE;eAAa,OAAO;eAAa,GAAG;aAAW,GAAG;qCA0LjP;wBA1LvC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"StatusModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/StatusModal.svelte.js"],"names":[],"mappings":";;;;;AA0MA;WA1L4B,OAAO;WAAS,MAAM;YAAU,MAAM;eAAa,MAAM;kBAAgB,MAAM;iBAAe,MAAM;eAAa,MAAM;iBAAe,GAAG;YAAU,GAAG;eAAa,OAAO;cAAY,OAAO;cAAY,GAAG;cAAY,GAAG,EAAE;eAAa,OAAO;eAAa,GAAG;aAAW,GAAG;qCA0LjP;wBA1LvC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}