@getmicdrop/svelte-components 2.8.1 → 3.1.0

package/dist/components/MonthSwitcher/MonthSwitcher.svelte

@@ -1,6 +1,5 @@
 <script>
-  import ChevronLeft from 'carbon-icons-svelte/lib/ChevronLeft.svelte';
-  import ChevronRight from 'carbon-icons-svelte/lib/ChevronRight.svelte';
+  import { ChevronLeftOutline, ChevronRightOutline } from '../Icons';
 
   // Use LOCAL time, not UTC - consistent with how calendar displays dates
   const today = new Date();
@@ -64,16 +63,20 @@
   }
 </script>
 
-<header class="month-switcher w-full flex items-center justify-between select-none">
-  <h2 class="month-title text-3xl font-semibold">
+<header class="w-full flex items-center justify-between select-none">
+  <h2 class="text-3xl font-semibold text-gray-900 dark:text-white">
     {new Intl.DateTimeFormat("en", {
       month: "long",
     }).format(new Date(currentYear, currentMonth, 1))}
   </h2>
   <div class="flex items-center gap-2">
     <button
-      class="nav-btn outline-none p-3 -m-1.5 rounded-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-      class:pressed={prevPressed}
+      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:scale-90={prevPressed}
+      class:bg-gray-100={prevPressed}
+      class:dark:bg-gray-700={prevPressed}
+      class:text-gray-900={prevPressed}
+      class:dark:text-white={prevPressed}
       on:click={handlePrevClick}
       on:touchstart={() => prevPressed = true}
       on:touchend={() => prevPressed = false}
@@ -84,11 +87,13 @@
       disabled={!canGoPrev}
       aria-label="Previous month"
     >
-      <ChevronLeft size={20} />
+      <ChevronLeftOutline class="w-5 h-5" />
     </button>
     <button
-      class="today-btn text-sm font-medium px-3 py-1 rounded-lg cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
-      class:pressed={todayPressed}
+      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:scale-95={todayPressed}
+      class:bg-blue-700={todayPressed}
+      class:text-white={todayPressed}
       on:click={handleTodayClick}
       on:touchstart={() => todayPressed = true}
       on:touchend={() => todayPressed = false}
@@ -102,8 +107,12 @@
       Today
     </button>
     <button
-      class="nav-btn cursor-pointer outline-none p-3 -m-1.5 rounded-full"
-      class:pressed={nextPressed}
+      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:scale-90={nextPressed}
+      class:bg-gray-100={nextPressed}
+      class:dark:bg-gray-700={nextPressed}
+      class:text-gray-900={nextPressed}
+      class:dark:text-white={nextPressed}
       on:click={handleNextClick}
       on:touchstart={() => nextPressed = true}
       on:touchend={() => nextPressed = false}
@@ -113,94 +122,7 @@
       on:mouseleave={() => nextPressed = false}
       aria-label="Next month"
     >
-      <ChevronRight size={20} />
+      <ChevronRightOutline class="w-5 h-5" />
     </button>
   </div>
 </header>
-
-<style>
-  /* Theme-responsive colors using CSS variables */
-  .nav-btn {
-    background: transparent;
-    border: none;
-    color: hsl(var(--Stroke-Primary));
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: transform 0.1s ease, color 0.15s ease, background-color 0.15s ease;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .nav-btn:hover:not(:disabled) {
-      background-color: hsl(var(--BG-Secondary));
-      color: hsl(var(--Text-Primary));
-    }
-  }
-
-  .nav-btn.pressed:not(:disabled) {
-    transform: scale(0.9);
-    background-color: hsl(var(--BG-Secondary));
-    color: hsl(var(--Text-Primary));
-  }
-
-  .nav-btn:focus {
-    outline: none;
-  }
-
-  .nav-btn:focus-visible {
-    outline: 2px solid hsl(var(--Brand-Primary));
-    outline-offset: 2px;
-  }
-
-  .month-title {
-    color: hsl(var(--Text-Primary));
-  }
-
-  .month-switcher {
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-touch-callout: none;
-  }
-
-  .today-btn {
-    background: transparent;
-    border: 1px solid hsl(var(--Stroke-Primary));
-    color: hsl(var(--Text-Primary));
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .today-btn:hover:not(:disabled) {
-      background-color: hsl(var(--Brand-Primary));
-      color: white;
-    }
-  }
-
-  .today-btn.pressed:not(:disabled) {
-    transform: scale(0.95);
-    background-color: hsl(var(--Brand-Primary));
-    color: white;
-  }
-
-  .today-btn:disabled {
-    opacity: 0.4;
-    border-color: hsl(var(--Stroke-Primary));
-    color: hsl(var(--Text-Tertiary));
-  }
-
-  .today-btn:focus {
-    outline: none;
-  }
-
-  .today-btn:focus-visible {
-    outline: 2px solid hsl(var(--Brand-Primary));
-    outline-offset: 2px;
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAwGA;;;;;;;;;mBAAyN;6CAT5K,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MonthSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/MonthSwitcher/MonthSwitcher.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAoGA;;;;;;;;;mBAAyN;6CAT5K,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/OrderSummary/OrderSummary.svelte

@@ -2,8 +2,7 @@
   import { fly, fade } from 'svelte/transition';
   import { cubicOut } from 'svelte/easing';
   import { createEventDispatcher } from 'svelte';
-  import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
-  import Close from 'carbon-icons-svelte/lib/Close.svelte';
+  import { ChevronDownOutline, CloseOutline } from '../Icons';
   import Spinner from '../Spinner/Spinner.svelte';
 
   export let loading = false;
@@ -122,12 +121,13 @@
   $: totalQuantity = Object.values(quantities).reduce((sum, q) => sum + q, 0);
 </script>
 
+<!-- Desktop Order Summary -->
 <div
   id="orderSummary"
-  class="order-summary desktop-only h-fit rounded-lg"
+  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="summary-header px-5 py-4">
-    <h2 class="text-lg font-semibold text-primary">
+  <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">
       Order summary
     </h2>
   </div>
@@ -136,7 +136,7 @@
     {#if totalQuantity === 0}
       <!-- Empty state -->
       <div class="py-8 text-center">
-        <p class="text-tertiary text-sm">Select tickets to continue</p>
+        <p class="text-gray-500 dark:text-gray-400 text-sm">Select tickets to continue</p>
       </div>
     {:else}
       <!-- Selected tickets - always show original prices -->
@@ -144,18 +144,18 @@
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
-              <div class="ticket-line flex justify-between py-3">
+              <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
                 <div>
-                  <p class="font-medium text-primary">{ticket.name}</p>
-                  <p class="text-sm text-tertiary">
+                  <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}
-                      Free × {quantities[key]}
+                      Free x {quantities[key]}
                     {:else}
-                      ${ticket.price.toFixed(2)} × {quantities[key]}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
-                <div class="font-medium text-primary">
+                <div class="font-medium text-gray-900 dark:text-white">
                   {ticket.price === 0
                     ? 'Free'
                     : `$${(ticket.price * quantities[key]).toFixed(2)}`}
@@ -169,47 +169,46 @@
       <!-- Price breakdown -->
       <div class="flex flex-col py-3 gap-2 text-sm">
         {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
-          <div class="flex justify-between text-secondary">
+          <div class="flex justify-between text-gray-600 dark:text-gray-300">
             <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
-        <div class="flex justify-between text-secondary">
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
         </div>
-        <div class="flex justify-between text-secondary">
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Fees</span><span>${fees.toFixed(2)}</span>
         </div>
-        <div class="flex justify-between text-secondary">
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
           <span>Taxes</span><span>${taxes.toFixed(2)}</span>
         </div>
       </div>
 
       <!-- Total -->
-      <div class="total-line flex justify-between font-semibold text-primary py-4 text-lg">
+      <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">
         <span>Total</span><span>${total.toFixed(2)}</span>
       </div>
     {/if}
 
     <!-- Terms of service -->
     {#if totalQuantity > 0 && btnText === 'Place order'}
-      <p class="terms-text">
-        By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="terms-link" target="_blank" rel="noopener noreferrer">terms of service</a>
+      <p class="text-xs text-gray-500 dark:text-gray-400 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}
 
     <!-- Checkout button -->
     <button
-      class="checkout-btn w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors"
-      class:disabled={totalQuantity === 0}
+      class="w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors select-none touch-manipulation {totalQuantity === 0 ? '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'}"
       on:click={() => {
         if (totalQuantity === 0) return;
         if (executePurchase) {
@@ -232,7 +231,7 @@
 {#if showOrderSummaryOnMobile}
   <!-- Backdrop overlay - dims background -->
   <button
-    class="mobile-backdrop mobile-only"
+    class="min-[872px]:hidden fixed inset-0 bg-black/50 z-40 border-none cursor-pointer"
     on:click={() => (showOrderSummaryOnMobile = false)}
     aria-label="Close order summary"
     transition:fade={{ duration: 200 }}
@@ -241,18 +240,18 @@
   <div
     in:fly={{ y: 800, duration: 300, easing: cubicOut }}
     out:fly={{ y: 800, duration: 300, easing: cubicOut }}
-    class="mobile-summary mobile-only fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-[99]"
+    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="mobile-summary-header flex flex-row justify-between items-center px-5 py-4">
-      <h2 class="text-xl font-semibold text-primary">
+    <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">
         Order summary
       </h2>
       <button
         on:click={() => (showOrderSummaryOnMobile = false)}
-        class="close-btn transition-colors p-2 rounded-lg"
+        class="transition-colors p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
         aria-label="Close order summary"
       >
-        <Close size={28} />
+        <CloseOutline class="w-7 h-7" />
       </button>
     </div>
 
@@ -262,18 +261,18 @@
         {#if quantities[key] > 0}
           {#each eventTickets as ticket}
             {#if ticket.ID == key}
-              <div class="mobile-ticket-line flex justify-between py-4">
+              <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
                 <div>
-                  <p class="font-semibold text-primary">{ticket.name}</p>
-                  <p class="text-sm text-tertiary">
+                  <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}
-                      Free × {quantities[key]}
+                      Free x {quantities[key]}
                     {:else}
-                      ${ticket.price.toFixed(2)} × {quantities[key]}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
                     {/if}
                   </p>
                 </div>
-                <div class="font-semibold text-primary">
+                <div class="font-semibold text-gray-900 dark:text-white">
                   {ticket.price === 0
                     ? 'Free'
                     : `$${(ticket.price * quantities[key]).toFixed(2)}`}
@@ -284,18 +283,18 @@
         {/if}
       {/each}
 
-      <div class="flex flex-col py-4 gap-3 text-secondary">
+      <div class="flex flex-col py-4 gap-3 text-gray-600 dark:text-gray-300">
         {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
           <div class="flex justify-between">
             <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between promo-discount-line">
+          <div class="flex justify-between text-green-600 dark:text-green-500">
             <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
@@ -310,7 +309,7 @@
         </div>
       </div>
 
-      <div class="mobile-total flex justify-between font-bold text-primary py-5">
+      <div class="flex justify-between font-bold text-gray-900 dark:text-white py-5 border-t border-gray-200 dark:border-gray-600">
         <span>Total</span><span>${total.toFixed(2)}</span>
       </div>
     </div>
@@ -320,19 +319,19 @@
 {#if showFooter}
   <div
     transition:fly={{ y: 100, duration: 200 }}
-    class="mobile-footer mobile-only fixed bottom-0 left-0 right-0 z-[500]"
+    class="min-[872px]:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 shadow-xl p-4 pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))] select-none touch-manipulation"
   >
-    <div class="mobile-footer-content">
-      <button class="mobile-footer-left" on:click={makeOrderSummaryVisible}>
-        <span class="mobile-footer-tickets">
+    <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" on:click={makeOrderSummaryVisible}>
+        <span class="flex items-center gap-1 text-sm font-normal text-gray-600 dark:text-gray-300">
           {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
-          <ChevronDown size={16} class="chevron-icon transition-transform duration-200 {showOrderSummaryOnMobile ? 'rotate-180' : ''}" />
+          <ChevronDownOutline class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 {showOrderSummaryOnMobile ? 'rotate-180' : ''}" />
         </span>
-        <span class="mobile-footer-price">${total.toFixed(2)}</span>
+        <span class="text-xl font-bold text-gray-900 dark:text-white">${total.toFixed(2)}</span>
       </button>
 
       <button
-        class="checkout-btn mobile-footer-btn"
+        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'}"
         on:click={() => {
           if (executePurchase) {
             executePurchase(elements);
@@ -351,203 +350,3 @@
     </div>
   </div>
 {/if}
-
-<style>
-  /* Custom breakpoint at 872px for desktop/mobile switch */
-  .desktop-only {
-    display: none;
-  }
-
-  .mobile-only {
-    display: block;
-  }
-
-  @media (min-width: 872px) {
-    .desktop-only {
-      display: block;
-    }
-
-    .mobile-only {
-      display: none !important;
-    }
-  }
-
-  /* Theme-responsive colors using CSS variables */
-  .order-summary {
-    background-color: hsl(var(--BG-Primary));
-    border: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .summary-header {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .text-primary {
-    color: hsl(var(--Text-Primary));
-  }
-
-  .text-secondary {
-    color: hsl(var(--Text-Secondary));
-  }
-
-  .text-tertiary {
-    color: hsl(var(--Text-Tartiary));
-  }
-
-  .ticket-line {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary) / 0.5);
-  }
-
-  .promo-discount-line {
-    color: hsl(var(--Accent-Success));
-  }
-
-  .total-line {
-    border-top: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .terms-text {
-    font-size: 12px;
-    color: hsl(var(--Text-Tartiary));
-    text-align: center;
-    margin: 0 0 12px 0;
-  }
-
-  .terms-link {
-    color: hsl(var(--Brand-Primary));
-    text-decoration: underline;
-  }
-
-  .terms-link:hover {
-    opacity: 0.8;
-  }
-
-  .checkout-btn {
-    background-color: hsl(var(--Brand-Primary));
-    color: white;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .checkout-btn:hover:not(:disabled) {
-    background-color: hsl(var(--Brand-Primary) / 0.9);
-  }
-
-  .checkout-btn.disabled,
-  .checkout-btn:disabled {
-    background-color: hsl(var(--BG-Quaternary));
-    color: hsl(var(--Text-Tartiary));
-    cursor: not-allowed;
-  }
-
-  /* Mobile backdrop - dims background behind drawer */
-  .mobile-backdrop {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 98;
-    border: none;
-    cursor: pointer;
-  }
-
-  /* Mobile summary drawer - stays bright above backdrop */
-  .mobile-summary {
-    background-color: hsl(var(--BG-Primary));
-    max-height: 80vh;
-    border-radius: 16px 16px 0 0;
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
-    z-index: 99;
-  }
-
-  .mobile-summary-header {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .close-btn {
-    color: hsl(var(--Text-Tartiary));
-  }
-
-  .close-btn:hover {
-    color: hsl(var(--Text-Primary));
-    background-color: hsl(var(--BG-Secondary));
-  }
-
-  .mobile-ticket-line {
-    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  .mobile-total {
-    border-top: 1px solid hsl(var(--Stroke-Secondary));
-  }
-
-  /* Mobile footer */
-  .mobile-footer {
-    background-color: hsl(var(--BG-Primary));
-    border-top: 1px solid hsl(var(--Stroke-Secondary));
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
-    padding: 16px;
-    padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .mobile-footer-content {
-    display: flex;
-    align-items: stretch;
-    gap: 12px;
-  }
-
-  .mobile-footer-left {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-shrink: 0;
-    white-space: nowrap;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .mobile-footer-tickets {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 14px;
-    font-weight: 400;
-    color: hsl(var(--Text-Secondary));
-  }
-
-  .mobile-footer-price {
-    font-size: 20px;
-    font-weight: 700;
-    color: hsl(var(--Text-Primary));
-  }
-
-  .mobile-footer-btn {
-    flex: 1;
-    min-width: 140px;
-    height: 48px;
-    border-radius: 10px;
-    font-size: 14px;
-    font-weight: 600;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  :global(.chevron-icon) {
-    color: hsl(var(--Text-Tartiary));
-  }
-</style>

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

@@ -1 +1 @@
-{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyVA;;;;;;;;;;;;;;;;;;;;;;;mBAA2S;6CAT9P,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsVA;;;;;;;;;;;;;;;;;;;;;;;mBAA2S;6CAT9P,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/PageLoader.stories.svelte

@@ -1,7 +1,9 @@
-<script context="module">
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import PageLoader from './PageLoader.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/PageLoader',
     component: PageLoader,
     tags: ['autodocs'],
@@ -12,12 +14,12 @@
       errorTitle: { control: 'text' },
       showRetry: { control: 'boolean' },
     },
-  };
+  });
+
 </script>
 
 <script>
-  import { Story, Template } from '@storybook/addon-svelte-csf';
-
+  
   let loading = true;
   let hasError = false;
 
@@ -39,14 +41,6 @@
   }
 </script>
 
-<Template let:args>
-  <PageLoader {...args}>
-    <div class="p-8 text-center">
-      <h2 class="text-2xl font-bold">Content Loaded!</h2>
-      <p class="text-gray-600 mt-2">This is the actual page content.</p>
-    </div>
-  </PageLoader>
-</Template>
 
 <Story
   name="Loading State"