@getmicdrop/svelte-components 5.16.2 → 5.17.0

package/dist/calendar/AboutShow/AboutShow.svelte

@@ -2,6 +2,17 @@
   import { CloseOutline, LogoInstagram } from '../../primitives/Icons';
   import { typography } from '../../tokens/typography';
 
+  /**
+   * Default labels for user-visible strings in AboutShow.
+   * Consumers can override via the `labels` prop.
+   */
+  const defaultLabels = {
+    followLabel: (name) => `Follow ${name}:`,
+    showLess: 'Show less',
+    showMore: 'Show more',
+    closePopover: 'Close',
+  };
+
   let {
     performers = [],
     ShowImage = '',
@@ -10,8 +21,12 @@
     title = "About the Show",
     showReadMore = true,
     getImageUrl = (url) => url,
+    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
+    labels: userLabels = {},
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let activePerformer = $state(null);
   let characterLimit = 1500;
   let showFullDescription = $state(false);
@@ -60,7 +75,7 @@
           onclick={toggleDescription}
           class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
         >
-          Show less
+          {labels.showLess}
         </button>
       {/if}
     {:else}
@@ -71,7 +86,7 @@
         onclick={toggleDescription}
         class={`${typography.label} text-left hover:underline text-blue-700 dark:text-blue-500`}
       >
-        Show more
+        {labels.showMore}
       </button>
     {/if}
   {/if}
@@ -106,7 +121,7 @@
                 <button
                   class="absolute top-2 right-2 p-1 rounded-full transition-colors text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
                   onclick={closePerformer}
-                  aria-label="Close"
+                  aria-label={labels.closePopover}
                 >
                   <CloseOutline class="w-5 h-5" />
                 </button>
@@ -117,7 +132,7 @@
 
                 {#if profile?.instagram || profile?.twitter}
                   <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>
+                    <span>{typeof labels.followLabel === 'function' ? labels.followLabel(firstName) : labels.followLabel}</span>
                     {#if profile?.instagram}
                       <a
                         href={profile.instagram}

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

@@ -11,6 +11,7 @@ declare const AboutShow: import("svelte").Component<{
     title?: string;
     showReadMore?: boolean;
     getImageUrl?: Function;
+    labels?: Record<string, any>;
 }, {}, "">;
 type $$ComponentProps = {
     performers?: any[];
@@ -20,5 +21,6 @@ type $$ComponentProps = {
     title?: string;
     showReadMore?: boolean;
     getImageUrl?: Function;
+    labels?: Record<string, any>;
 };
 //# sourceMappingURL=AboutShow.svelte.d.ts.map

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":";;;;;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"}
+{"version":3,"file":"AboutShow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/AboutShow/AboutShow.svelte.js"],"names":[],"mappings":";;;;;AAkKA;iBA7IkC,GAAG,EAAE;gBAAc,MAAM;kBAAgB,MAAM;gBAAc,OAAO;YAAU,MAAM;mBAAiB,OAAO;;aAAmC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WA6I5I;wBA7IrC;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,WAAW;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/calendar/FAQs/FAQs.svelte

@@ -7,6 +7,8 @@
     title = "FAQs",
     showTitle = true,
     accordion = false,
+    /** @type {string} Text shown when no FAQs are available */
+    emptyMessage = 'No FAQs available.',
   } = $props();
 
   let openIndex = $state(null);
@@ -70,6 +72,6 @@
       </div>
     {/if}
   {:else}
-    <p class="{typography.smMuted}">No FAQs available.</p>
+    <p class="{typography.smMuted}">{emptyMessage}</p>
   {/if}
 </div>

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

@@ -8,11 +8,13 @@ declare const FAQs: import("svelte").Component<{
     title?: string;
     showTitle?: boolean;
     accordion?: boolean;
+    emptyMessage?: string;
 }, {}, "">;
 type $$ComponentProps = {
     faqs?: any[];
     title?: string;
     showTitle?: boolean;
     accordion?: boolean;
+    emptyMessage?: string;
 };
 //# sourceMappingURL=FAQs.svelte.d.ts.map

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":";;;;;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"}
+{"version":3,"file":"FAQs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/FAQs/FAQs.svelte.js"],"names":[],"mappings":";;;;;AA4EA;WAlE4B,GAAG,EAAE;YAAU,MAAM;gBAAc,OAAO;gBAAc,OAAO;mBAAiB,MAAM;WAkE/D;wBAlEhC;IAAE,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -5,6 +5,32 @@
   import Spinner from '../../primitives/Spinner/Spinner.svelte';
   import { typography } from '../../tokens/typography';
 
+  /**
+   * Default labels for all user-visible strings in OrderSummary.
+   * Consumers can override any string via the `labels` prop.
+   */
+  const defaultLabels = {
+    orderSummary: 'Order summary',
+    selectTickets: 'Select tickets to continue',
+    free: 'Free',
+    fullPrice: 'Full Price',
+    discount: 'Discount',
+    subtotal: 'Subtotal',
+    fees: 'Fees',
+    taxes: 'Taxes',
+    giftCardAppliedLabel: 'Gift Card Applied',
+    giftCardBalanceAfterOrder: 'Gift card balance after order',
+    amountDue: 'Amount Due',
+    fullyCoveredByGiftCard: 'Fully covered by gift card',
+    total: 'Total',
+    placeOrderTos: 'By selecting Place order, I agree to the',
+    termsOfService: 'terms of service',
+    checkout: 'Checkout',
+    ticketSingular: 'ticket',
+    ticketPlural: 'tickets',
+    closeOrderSummary: 'Close order summary',
+  };
+
   let {
     loading = false,
     quantities = {},
@@ -27,8 +53,12 @@
     },
     onPriceUpdate,
     giftCardApplied = null, // { code, giftCardAmount, giftCardBalance, stripeAmount, paymentType, requiresStripe }
+    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
+    labels: userLabels = {},
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   // Helper to get effective price for a ticket (handles donation tickets)
   function getEffectivePrice(ticket) {
     // Donation ticket (type 2): use user-entered donation amount
@@ -156,14 +186,14 @@
 >
   <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-600">
     <h3 class={typography.h3}>
-      Order summary
+      {labels.orderSummary}
     </h3>
   </div>
 
   <div class="px-5 pb-5">
     {#if totalQuantity === 0}
       <div class="py-8 text-center">
-        <p class="{typography.smMuted}">Select tickets to continue</p>
+        <p class="{typography.smMuted}">{labels.selectTickets}</p>
       </div>
     {:else}
       {#each Object.keys(quantities) as key}
@@ -177,7 +207,7 @@
                   <p class="{typography.label}">{ticket.name}</p>
                   <p class="{typography.smMuted}">
                     {#if ticket.price === 0 && !isDonation}
-                      Free x {quantities[key]}
+                      {labels.free} x {quantities[key]}
                     {:else if isDonation}
                       ${effectivePrice.toFixed(2)} x {quantities[key]}
                     {:else}
@@ -187,7 +217,7 @@
                 </div>
                 <div class="{typography.label}">
                   {#if ticket.price === 0 && !isDonation}
-                    Free
+                    {labels.free}
                   {:else}
                     ${(effectivePrice * quantities[key]).toFixed(2)}
                   {/if}
@@ -201,35 +231,35 @@
       <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>
+            <span>{labels.fullPrice}</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
           <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+            <span>{labels.discount}</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
           <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
+            <span>{labels.discount}</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
         <div class="flex justify-between text-gray-600 dark:text-gray-300">
-          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
+          <span>{labels.subtotal}</span><span>${subtotal.toFixed(2)}</span>
         </div>
         <div class="flex justify-between text-gray-600 dark:text-gray-300">
-          <span>Fees</span><span>${fees.toFixed(2)}</span>
+          <span>{labels.fees}</span><span>${fees.toFixed(2)}</span>
         </div>
         <div class="flex justify-between text-gray-600 dark:text-gray-300">
-          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
+          <span>{labels.taxes}</span><span>${taxes.toFixed(2)}</span>
         </div>
         {#if giftCardApplied}
           <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Gift Card Applied</span>
+            <span>{labels.giftCardAppliedLabel}</span>
             <span>-${giftCardAmountDisplay}</span>
           </div>
           {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
             <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
-              <span>Gift card balance after order</span>
+              <span>{labels.giftCardBalanceAfterOrder}</span>
               <span>${giftCardRemainingBalance}</span>
             </div>
           {/if}
@@ -238,22 +268,22 @@
 
       {#if giftCardApplied?.paymentType === 'gift_card_only'}
         <div class="flex justify-between py-4 text-lg border-t border-gray-200 dark:border-gray-600">
-          <span class="font-semibold text-gray-900 dark:text-white">Amount Due</span>
+          <span class="font-semibold text-gray-900 dark:text-white">{labels.amountDue}</span>
           <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
         </div>
         <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
-          Fully covered by gift card
+          {labels.fullyCoveredByGiftCard}
         </p>
       {:else}
         <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>
+          <span>{labels.total}</span><span>${total.toFixed(2)}</span>
         </div>
       {/if}
     {/if}
 
     {#if totalQuantity > 0 && btnText === 'Place order'}
       <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>
+        {labels.placeOrderTos} <a href="https://get-micdrop.com/tos" class="text-blue-700 dark:text-blue-500 underline hover:opacity-80" target="_blank" rel="noopener noreferrer">{labels.termsOfService}</a>
       </p>
     {/if}
 
@@ -282,7 +312,7 @@
   <button
     class="min-[872px]:hidden fixed inset-0 bg-black/50 z-40 border-none cursor-pointer"
     onclick={() => (showOrderSummaryOnMobile = false)}
-    aria-label="Close order summary"
+    aria-label={labels.closeOrderSummary}
     transition:fade={{ duration: 200 }}
   ></button>
   <div
@@ -292,12 +322,12 @@
   >
     <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-gray-200 dark:border-gray-600">
       <h2 class="{typography.h2} text-xl">
-        Order summary
+        {labels.orderSummary}
       </h2>
       <button
         onclick={() => (showOrderSummaryOnMobile = false)}
         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"
+        aria-label={labels.closeOrderSummary}
       >
         <CloseOutline class="w-7 h-7" />
       </button>
@@ -315,7 +345,7 @@
                   <p class="{typography.h5}">{ticket.name}</p>
                   <p class="{typography.smMuted}">
                     {#if ticket.price === 0 && !isDonation}
-                      Free x {quantities[key]}
+                      {labels.free} x {quantities[key]}
                     {:else if isDonation}
                       ${effectivePrice.toFixed(2)} x {quantities[key]}
                     {:else}
@@ -325,7 +355,7 @@
                 </div>
                 <div class="{typography.h5}">
                   {#if ticket.price === 0 && !isDonation}
-                    Free
+                    {labels.free}
                   {:else}
                     ${(effectivePrice * quantities[key]).toFixed(2)}
                   {/if}
@@ -339,35 +369,35 @@
       <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>
+            <span>{labels.fullPrice}</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
           </div>
         {/if}
         {#if promoSavings > 0}
           <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+            <span>{labels.discount}</span><span>-${promoSavings.toFixed(2)}</span>
           </div>
         {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
           <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
+            <span>{labels.discount}</span><span>-${promoDiscount.toFixed(2)}</span>
           </div>
         {/if}
         <div class="flex justify-between">
-          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
+          <span>{labels.subtotal}</span><span>${subtotal.toFixed(2)}</span>
         </div>
         <div class="flex justify-between">
-          <span>Fees</span><span>${fees.toFixed(2)}</span>
+          <span>{labels.fees}</span><span>${fees.toFixed(2)}</span>
         </div>
         <div class="flex justify-between">
-          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
+          <span>{labels.taxes}</span><span>${taxes.toFixed(2)}</span>
         </div>
         {#if giftCardApplied}
           <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Gift Card Applied</span>
+            <span>{labels.giftCardAppliedLabel}</span>
             <span>-${giftCardAmountDisplay}</span>
           </div>
           {#if giftCardRemainingBalance && parseFloat(giftCardRemainingBalance) > 0}
             <div class="flex justify-between text-gray-500 dark:text-gray-400 text-xs">
-              <span>Gift card balance after order</span>
+              <span>{labels.giftCardBalanceAfterOrder}</span>
               <span>${giftCardRemainingBalance}</span>
             </div>
           {/if}
@@ -376,15 +406,15 @@
 
       {#if giftCardApplied?.paymentType === 'gift_card_only'}
         <div class="flex justify-between py-5 border-t border-gray-200 dark:border-gray-600">
-          <span class="font-semibold text-gray-900 dark:text-white">Amount Due</span>
+          <span class="font-semibold text-gray-900 dark:text-white">{labels.amountDue}</span>
           <span class="font-bold text-green-600 dark:text-green-400">$0.00</span>
         </div>
         <p class="text-xs text-gray-500 dark:text-gray-400 text-center -mt-2 mb-2">
-          Fully covered by gift card
+          {labels.fullyCoveredByGiftCard}
         </p>
       {:else}
         <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>
+          <span>{labels.total}</span><span>${total.toFixed(2)}</span>
         </div>
       {/if}
     </div>
@@ -399,7 +429,7 @@
     <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="{`${typography.sm} flex items-center gap-1 text-gray-600 dark:text-gray-300`}">
-          {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
+          {totalQuantity} {totalQuantity > 1 ? labels.ticketPlural : labels.ticketSingular}
           <ChevronDownOutline class={`w-4 h-4 ${typography.iconMuted} transition-transform duration-200 ${showOrderSummaryOnMobile ? 'rotate-180' : ''}`} />
         </span>
         <span class="{typography.h2} text-xl">${total.toFixed(2)}</span>
@@ -419,7 +449,7 @@
         {#if loading}
           <Spinner size="sm" color="white" />
         {:else}
-          <span translate="no">Checkout</span>
+          <span translate="no">{labels.checkout}</span>
         {/if}
       </button>
     </div>

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

@@ -19,6 +19,7 @@ declare const OrderSummary: import("svelte").Component<{
     venueServiceCharge?: Record<string, any>;
     onPriceUpdate: any;
     giftCardApplied?: any;
+    labels?: Record<string, any>;
 }, {}, "">;
 type $$ComponentProps = {
     loading?: boolean;
@@ -36,5 +37,6 @@ type $$ComponentProps = {
     venueServiceCharge?: Record<string, any>;
     onPriceUpdate: any;
     giftCardApplied?: any;
+    labels?: Record<string, any>;
 };
 //# sourceMappingURL=OrderSummary.svelte.d.ts.map

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

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

package/dist/components/Layout/Stack.spec.js

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/svelte';
+import { render } from '@testing-library/svelte';
 import { expect, describe, test } from 'vitest';
 import Stack from './Stack.svelte';
 describe('Stack Component', () => {

package/dist/datetime/__tests__/format.test.js

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { formatCleanTimeRange, formatDateRange, formatDayOfWeek, formatEventDate, formatEventDateTime, formatEventTime, formatHour, formatMonth, formatNotificationTime, formatRelativeTime, formatTimeRange, getDateInTimezone, getDateParts, getHourInTimezone, isToday, } from '../format';
-import { DateTimeError, DateTimeErrorCode } from '../types';
+import { DateTimeError } from '../types';
 describe('format utilities', () => {
     describe('formatEventTime', () => {
         it('formats time in specified timezone', () => {

package/dist/datetime/__tests__/parse.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { combineDateAndTime, formatDateTimeForAPI, isNextDayTime, minutesToTimeString, parseDateTimeFromAPI, parseEndOfDay, parseLocalToUTC, parseStartOfDay, parseTimeToMinutes, parseUTCToLocal, stripNextDayPrefix, } from '../parse';
-import { DateTimeError, DateTimeErrorCode } from '../types';
+import { DateTimeError } from '../types';
 describe('parse utilities', () => {
     describe('parseLocalToUTC', () => {
         it('converts local datetime to UTC', () => {

package/dist/datetime/__tests__/timezone.test.js

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { getTimezoneDisplayName, getTimezoneOffset, getUserTimezone, getVenueTimezone, isDST, isValidTimezone, normalizeTimezone, getIANATimezone, isValidIANATimezone, getAllTimezones, formatTimezoneForDisplay, getTimezoneOptions, getCommonUSTimezoneOptions, } from '../timezone';
 import { DateTimeError, DateTimeErrorCode } from '../types';
 describe('timezone utilities', () => {

package/dist/datetime/parse.js

@@ -6,7 +6,7 @@
  *
  * @module datetime/parse
  */
-import { format, parse } from 'date-fns';
+import { format } from 'date-fns';
 import { fromZonedTime, toZonedTime } from 'date-fns-tz';
 import { DATE_FORMATS } from './constants';
 import { isValidTimezone } from './timezone';

package/dist/forms/createFormStore.svelte.js

@@ -7,7 +7,6 @@
  * - UI states (loading, saving, saved)
  * - Section-level validation for progressive forms
  */
-import { z } from 'zod';
 // ============================================================================
 // Implementation
 // ============================================================================

package/dist/recipes/CropImage/CropImage.svelte

@@ -5,6 +5,23 @@
   import { typography } from '../../tokens/typography';
   import { createImage, supportsWebP } from '../../utils/imageOptimizer';
 
+  /**
+   * Default labels for user-visible strings in CropImage.
+   * Consumers can override via the `labels` prop.
+   */
+  const defaultLabels = {
+    cropImageTitle: 'Crop image',
+    loading: 'Loading...',
+    dragToPosition: 'Drag to position. Pinch or use slider to zoom.',
+    cancel: 'Cancel',
+    uploading: 'Uploading...',
+    save: 'Save',
+    closeModal: 'Close modal',
+    zoomOut: 'Zoom out',
+    zoomIn: 'Zoom in',
+    zoomLevel: 'Zoom level',
+  };
+
   interface Props {
     /** Whether to show the modal */
     showModal?: boolean;
@@ -16,6 +33,8 @@
     onCancel?: () => void;
     /** Whether image is currently uploading */
     isUploadingImage?: boolean;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -23,9 +42,12 @@
     imageSrc = $bindable(''),
     onSave = () => {},
     onCancel = () => {},
-    isUploadingImage = false
+    isUploadingImage = false,
+    labels: userLabels = {},
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let crop = $state({ x: 0, y: 0 });
   let zoom = $state(1);
   let croppedAreaPixels = $state<{ x: number; y: number; width: number; height: number } | null>(null);
@@ -120,13 +142,13 @@
       <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-800">
         <div class="flex items-center justify-between p-4 border-b border-gray-200 rounded-t-lg dark:border-gray-600">
           <h3 class={typography.h2}>
-            Crop image
+            {labels.cropImageTitle}
           </h3>
           <Button
             variant="icon"
             size="sm"
             onclick={closeModal}
-            aria-label="Close modal"
+            aria-label={labels.closeModal}
           >
             <CloseOutline class="w-3 h-3" />
           </Button>
@@ -136,7 +158,7 @@
           <div class="relative w-full aspect-square sm:aspect-[4/3] max-h-80 sm:max-h-96 bg-gray-800 rounded-lg overflow-hidden">
             {#if isLoading}
               <div class="absolute inset-0 flex items-center justify-center bg-gray-200 dark:bg-gray-700 z-10">
-                <span class={typography.smMuted}>Loading...</span>
+                <span class={typography.smMuted}>{labels.loading}</span>
               </div>
             {/if}
             <Cropper
@@ -152,7 +174,7 @@
           </div>
 
           <p class={`${typography.smMuted} text-center`}>
-            Drag to position. Pinch or use slider to zoom.
+            {labels.dragToPosition}
           </p>
 
           <div class="flex items-center justify-center gap-3 max-w-xs mx-auto">
@@ -161,7 +183,7 @@
               size="sm"
               class="rounded-full! w-9! h-9! p-0! shrink-0"
               onclick={() => (zoom = Math.max(1, zoom - 0.2))}
-              aria-label="Zoom out"
+              aria-label={labels.zoomOut}
             >
               <MinusOutline class="w-4 h-4" />
             </Button>
@@ -173,7 +195,7 @@
               step="0.1"
               bind:value={zoom}
               class="flex-1 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
-              aria-label="Zoom level"
+              aria-label={labels.zoomLevel}
             />
 
             <Button
@@ -181,7 +203,7 @@
               size="sm"
               class="rounded-full! w-9! h-9! p-0! shrink-0"
               onclick={() => (zoom = Math.min(3, zoom + 0.2))}
-              aria-label="Zoom in"
+              aria-label={labels.zoomIn}
             >
               <PlusOutline class="w-4 h-4" />
             </Button>
@@ -197,7 +219,7 @@
             onclick={closeModal}
             disabled={isSaving || isUploadingImage}
           >
-            Cancel
+            {labels.cancel}
           </Button>
           <Button
             type="button"
@@ -207,9 +229,9 @@
             disabled={isLoading || isSaving || isUploadingImage}
           >
             {#if isSaving || isUploadingImage}
-              Uploading...
+              {labels.uploading}
             {:else}
-              Save
+              {labels.save}
             {/if}
           </Button>
         </div>

package/dist/recipes/CropImage/CropImage.svelte.d.ts

@@ -1,4 +1,4 @@
-interface Props {
+declare const CropImage: import("svelte").Component<{
     /** Whether to show the modal */
     showModal?: boolean;
     /** Image source to crop */
@@ -9,8 +9,20 @@ interface Props {
     onCancel?: () => void;
     /** Whether image is currently uploading */
     isUploadingImage?: boolean;
-}
-declare const CropImage: import("svelte").Component<Props, {}, "showModal" | "imageSrc">;
+    /** Override user-visible strings */
+    labels?: Partial<{
+        cropImageTitle: string;
+        loading: string;
+        dragToPosition: string;
+        cancel: string;
+        uploading: string;
+        save: string;
+        closeModal: string;
+        zoomOut: string;
+        zoomIn: string;
+        zoomLevel: string;
+    }>;
+}, {}, "showModal" | "imageSrc">;
 type CropImage = ReturnType<typeof CropImage>;
 export default CropImage;
 //# sourceMappingURL=CropImage.svelte.d.ts.map

package/dist/recipes/CropImage/CropImage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.svelte.ts"],"names":[],"mappings":"AAUE,UAAU,KAAK;IACb,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA6JH,QAAA,MAAM,SAAS,iEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.svelte.ts"],"names":[],"mappings":"AA2MA,QAAA,MAAM,SAAS;IAzKX,gCAAgC;gBACpB,OAAO;IACnB,2BAA2B;eAChB,MAAM;IACjB,uDAAuD;aAC9C,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI;IACrC,sCAAsC;eAC3B,MAAM,IAAI;IACrB,2CAA2C;uBACxB,OAAO;IAC1B,oCAAoC;aAC3B,OAAO;;;;;;;;;;;MAAsB;gCA8Ja,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}