@getmicdrop/svelte-components 5.16.2 → 5.17.1

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -12,6 +12,75 @@
   import Checkbox from "../../primitives/Checkbox/Checkbox.svelte";
   import { typography } from '../../tokens/typography';
 
+  /**
+   * Default labels for all user-visible strings in SuperLogin.
+   * Consumers can override any string via the `labels` prop.
+   */
+  const defaultLabels = {
+    // Login view
+    welcomeTitle: (name) => name ? `Welcome, ${name}!` : 'Welcome!',
+    signInDescription: (portal) => `Sign in to access your ${portal}.`,
+    welcomeBackTitle: (name) => `Welcome back, ${name}`,
+    notYouButton: (name) => `Not ${name}?`,
+    logInTitle: 'Log in',
+    emailLabel: 'Email',
+    passwordLabel: 'Password',
+    forgotPassword: 'Forgot your password?',
+    rememberMe: 'Remember me on this device',
+    logInButton: 'Log in',
+    or: 'OR',
+    sendMeLoginLink: 'Send me a login link',
+
+    // Account selection view
+    selectAccountTitle: 'Select account',
+    multipleAccountsDescription: (email) => `You have multiple accounts associated with ${email}. Select one to continue.`,
+    loginDifferentEmail: 'Log in with a different email',
+    performerFallback: 'Performer',
+
+    // Setup view
+    setupTitle: (name) => name ? `Welcome, ${name}` : 'Set up your account',
+    setupDescription: 'Create a password to finish setting up your account.',
+    createPasswordLabel: 'Create password',
+    completeSetupButton: 'Complete setup',
+    tosAgreement: 'By setting up your account, you agree to Micdrop\'s',
+    termsOfService: 'terms of service',
+
+    // Reset password view
+    resetTitle: 'Reset your password',
+    resetDescription: 'Enter the email address associated with your account and we\'ll send you a link to reset your password.',
+    sendResetLink: 'Send reset link',
+    returnToLogIn: 'Return to log in',
+
+    // Login link view
+    loginLinkTitle: 'Send a login link',
+    loginLinkDescription: 'Enter the email address associated with your account and we\'ll send you a link to sign in.',
+    sendLoginLink: 'Send login link',
+
+    // Success view
+    checkEmailTitle: 'Check your email',
+    resentMessage: (type, email) => `We've resent ${type === 'reset' ? 'password reset instructions' : 'a login link'} to ${email} if it is an email on file.`,
+    resentFollowUp: 'Please check again. If you still haven\'t received an email,',
+    tryDifferentEmail: 'try a different email',
+    successMessage: (type, email) => `Thanks! If ${email} matches an email we have on file, then we've sent you an email containing further instructions for ${type === 'reset' ? 'resetting your password' : 'signing in'}.`,
+    noEmailReceived: 'If you haven\'t received an email in 5 minutes, check your spam,',
+    resend: 'resend',
+    returnToSignIn: 'Return to sign in',
+
+    // Error messages
+    linkNoLongerValid: 'This link is no longer valid or has already been used.',
+    invalidExpiredLink: 'Invalid or expired link.',
+    unableToValidateLink: 'Unable to validate link. Please try again later.',
+    invalidEmailAddress: (email) => `Invalid email address: ${email}`,
+    incorrectCredentials: 'Incorrect email or password',
+    loginFailed: 'Login failed. Please try again.',
+    networkError: 'Unable to connect. Please check your internet connection.',
+    passwordRequirements: 'Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.',
+    setupNetworkError: 'Network error. Please try again.',
+
+    // TOS checkout (OrderSummary reuse)
+    placeOrderTos: 'By selecting Place order, I agree to the',
+  };
+
   /**
    * @typedef {Object} Account
    * @property {string} type - Account type (e.g., 'owner', 'performer')
@@ -67,8 +136,12 @@
     showDarkModeToggle = true,
     /** @type {string} URL search params for setup detection */
     searchParams = "",
+    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
+    labels: userLabels = {},
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   // Parse search params
   let parsedParams = $derived.by(() => {
     if (typeof window === 'undefined') return { setup: null, email: null };
@@ -156,8 +229,7 @@
     } else if (currentScore !== -1 && currentScore < 2) {
       errors = {
         ...errors,
-        password:
-          "Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.",
+        password: labels.passwordRequirements,
       };
       showErrors = true;
     } else if (currentScore >= 2) {
@@ -241,7 +313,7 @@
     isLoading = true;
     try {
       const response = await fetch(
-        `${apiBaseUrl}/api/public/checkIfFirstUseEligible/${encodeURIComponent(emailVal)}`,
+        `${apiBaseUrl}/api/v2/auth/first-time/${encodeURIComponent(emailVal)}`,
       );
       if (response.ok) {
         const data = await response.json();
@@ -252,19 +324,19 @@
           view = "setup";
         } else {
           errors = {
-            email: "This link is no longer valid or has already been used.",
+            email: labels.linkNoLongerValid,
           };
           showErrors = true;
           triggerShake();
         }
       } else {
-        errors = { email: "Invalid or expired link." };
+        errors = { email: labels.invalidExpiredLink };
         showErrors = true;
         triggerShake();
       }
     } catch (e) {
       console.error(e);
-      errors = { email: "Unable to validate link. Please try again later." };
+      errors = { email: labels.unableToValidateLink };
       showErrors = true;
       triggerShake();
     } finally {
@@ -285,13 +357,13 @@
     // Validate email format
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(emailValue)) {
-      errors = { email: `Invalid email address: ${emailValue}` };
+      errors = { email: typeof labels.invalidEmailAddress === 'function' ? labels.invalidEmailAddress(emailValue) : labels.invalidEmailAddress };
       triggerShake();
       isLoading = false;
       return;
     }
     try {
-      const response = await fetch(`${apiBaseUrl}/api/public/login`, {
+      const response = await fetch(`${apiBaseUrl}/api/v2/auth/login`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -341,10 +413,10 @@
         }
 
         if (response.status === 401) {
-          errors = { password: "Incorrect email or password" };
+          errors = { password: labels.incorrectCredentials };
         } else {
           errors = {
-            password: errorData.message || "Login failed. Please try again.",
+            password: errorData.message || labels.loginFailed,
           };
         }
         triggerShake();
@@ -353,10 +425,10 @@
       console.error("Login Error:", error);
       if (error.message === "Network Error" || error.name === "TypeError") {
         errors = {
-          password: "Unable to connect. Please check your internet connection.",
+          password: labels.networkError,
         };
       } else {
-        errors = { password: "Incorrect email or password" };
+        errors = { password: labels.incorrectCredentials };
       }
       triggerShake();
       isLoading = false;
@@ -369,7 +441,7 @@
     const passwordValue = password;
 
     try {
-      const response = await fetch(`${apiBaseUrl}/api/public/setFirstUsePassword`, {
+      const response = await fetch(`${apiBaseUrl}/api/v2/auth/first-time`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -399,14 +471,14 @@
         errors = {
           password:
             errorData.error ||
-            "Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.",
+            labels.passwordRequirements,
         };
         showErrors = true;
         triggerShake();
       }
     } catch (error) {
       console.error("Error setting up account:", error);
-      errors = { password: "Network error. Please try again." };
+      errors = { password: labels.setupNetworkError };
       showErrors = true;
       triggerShake();
     } finally {
@@ -423,13 +495,13 @@
     // Validate email format
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(emailValue)) {
-      errors = { email: `Invalid email address: ${emailValue}` };
+      errors = { email: typeof labels.invalidEmailAddress === 'function' ? labels.invalidEmailAddress(emailValue) : labels.invalidEmailAddress };
       triggerShake();
       isLoading = false;
       return false;
     }
 
-    const apiCall = fetch(`${apiBaseUrl}/api/public/resetPassword`, {
+    const apiCall = fetch(`${apiBaseUrl}/api/v2/auth/reset-password`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ email: emailValue.toLowerCase() }),
@@ -467,13 +539,13 @@
     // Validate email format
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(emailValue)) {
-      errors = { email: `Invalid email address: ${emailValue}` };
+      errors = { email: typeof labels.invalidEmailAddress === 'function' ? labels.invalidEmailAddress(emailValue) : labels.invalidEmailAddress };
       triggerShake();
       isLoading = false;
       return false;
     }
 
-    const apiCall = fetch(`${apiBaseUrl}/api/public/passwordlessLogin`, {
+    const apiCall = fetch(`${apiBaseUrl}/api/v2/auth/passwordless`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -585,7 +657,7 @@
 
     const first = profile.firstName || account.firstName || account.name || "";
     const lastName = profile.lastName || account.lastName || "";
-    return `${first} ${lastName}`.trim() || "Performer";
+    return `${first} ${lastName}`.trim() || labels.performerFallback;
   }
 
   function triggerShake() {
@@ -635,22 +707,22 @@
               {#if isFirstTime}
                 <div>
                   <h2 class={typography.h1}>
-                    Welcome{firstName ? `, ${firstName}` : ""}!
+                    {typeof labels.welcomeTitle === 'function' ? labels.welcomeTitle(firstName) : labels.welcomeTitle}
                   </h2>
                   <p class={`${typography.smMuted} mt-2`}>
-                    Sign in to access your {portalType}.
+                    {typeof labels.signInDescription === 'function' ? labels.signInDescription(portalType) : labels.signInDescription}
                   </p>
                 </div>
               {:else if !showEmailInput && rememberedUser?.firstName}
                 <h2 class={typography.h1}>
-                  Welcome back, {rememberedUser.firstName}
+                  {typeof labels.welcomeBackTitle === 'function' ? labels.welcomeBackTitle(rememberedUser.firstName) : labels.welcomeBackTitle}
                 </h2>
                 <Button variant="link" class="text-gray-500 hover:text-blue-600" onclick={handleNotMe}>
-                  Not {rememberedUser.firstName}?
+                  {typeof labels.notYouButton === 'function' ? labels.notYouButton(rememberedUser.firstName) : labels.notYouButton}
                 </Button>
               {:else}
                 <h2 class={typography.h1}>
-                  Log in
+                  {labels.logInTitle}
                 </h2>
               {/if}
             </div>
@@ -666,7 +738,7 @@
                       <label
                         for="email"
                         class={`${typography.label} block mb-2`}
-                      >Email</label>
+                      >{labels.emailLabel}</label>
                       <Input
                         id="email"
                         placeholder=""
@@ -700,7 +772,7 @@
                       <label
                         for="password"
                         class={`${typography.label} block`}
-                      >Password</label>
+                      >{labels.passwordLabel}</label>
                       <!-- Placeholder to maintain layout - actual button is after input for tab order -->
                       <span class="forgot-password-placeholder"></span>
                     </div>
@@ -713,7 +785,7 @@
                     />
                     <!-- Forgot password button: after input in DOM for correct tab order, positioned visually in label row -->
                     <Button variant="link" type="button" class="forgot-password-btn" onclick={() => { view = "reset"; }}>
-                      Forgot your password?
+                      {labels.forgotPassword}
                     </Button>
                   </div>
                 </div>
@@ -740,7 +812,7 @@
                   <Checkbox
                     bind:checked={rememberMe}
                     id="remember-me"
-                  >Remember me on this device</Checkbox>
+                  >{labels.rememberMe}</Checkbox>
                 </div>
               </div>
 
@@ -751,7 +823,7 @@
                   loading={isLoading}
                   disabled={!isFormValid}
                 >
-                  Log in
+                  {labels.logInButton}
                 </Button>
 
                 <div class="relative">
@@ -762,7 +834,7 @@
                   </div>
                   <div class="relative flex justify-center text-sm">
                     <span class={`px-2 bg-white dark:bg-gray-800 ${typography.textMuted}`}
-                      >OR</span
+                      >{labels.or}</span
                     >
                   </div>
                 </div>
@@ -775,7 +847,7 @@
                     view = "login-link";
                   }}
                 >
-                  Send me a login link
+                  {labels.sendMeLoginLink}
                 </Button>
               </div>
             </form>
@@ -784,13 +856,14 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                Select account
+                {labels.selectAccountTitle}
               </h2>
               <p class={typography.smMuted}>
-                You have multiple accounts associated with <span
-                  class={typography.sm}
-                  >{email}</span
-                >. Select one to continue.
+                {#if true}
+                  {@const message = typeof labels.multipleAccountsDescription === 'function' ? labels.multipleAccountsDescription(email) : labels.multipleAccountsDescription}
+                  {@const parts = message.split(email)}
+                  {parts[0]}<span class={typography.sm}>{email}</span>{parts[1] || ''}
+                {/if}
               </p>
             </div>
 
@@ -850,7 +923,7 @@
 
             <div class="pt-4 border-t border-gray-300 dark:border-gray-600">
               <Button variant="ghost" size="full" class="text-gray-500 dark:text-gray-400" onclick={handleReturnToSignIn}>
-                Log in with a different email
+                {labels.loginDifferentEmail}
               </Button>
             </div>
           </div>
@@ -858,10 +931,10 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                {setupFirstName ? `Welcome, ${setupFirstName}` : "Set up your account"}
+                {typeof labels.setupTitle === 'function' ? labels.setupTitle(setupFirstName) : labels.setupTitle}
               </h2>
               <p class={typography.smMuted}>
-                Create a password to finish setting up your account.
+                {labels.setupDescription}
               </p>
             </div>
 
@@ -876,7 +949,7 @@
                       <label
                         for="setup-password"
                         class={`${typography.label} block`}
-                      >Create password</label>
+                      >{labels.createPasswordLabel}</label>
                       {#if strengthText}
                         <span
                           class="text-xs font-medium {strengthTextColor} transition-opacity duration-300"
@@ -921,16 +994,16 @@
                   loading={isLoading}
                   disabled={!isSetupValid}
                 >
-                  Complete setup
+                  {labels.completeSetupButton}
                 </Button>
 
                 <div class="text-center">
                   <p class={typography.xsMuted}>
-                    By setting up your account, you agree to Micdrop's <a
+                    {labels.tosAgreement} <a
                       href={tosUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      class="text-blue-600 hover:underline dark:text-blue-400">terms of service</a
+                      class="text-blue-600 hover:underline dark:text-blue-400">{labels.termsOfService}</a
                     >.
                   </p>
                 </div>
@@ -941,11 +1014,10 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                Reset your password
+                {labels.resetTitle}
               </h2>
               <p class={typography.smMuted}>
-                Enter the email address associated with your account and we'll
-                send you a link to reset your password.
+                {labels.resetDescription}
               </p>
             </div>
 
@@ -959,7 +1031,7 @@
                     <label
                       for="reset-email"
                       class={`${typography.label} block mb-2`}
-                    >Email</label>
+                    >{labels.emailLabel}</label>
                     <Input
                       id="reset-email"
                       placeholder=""
@@ -991,12 +1063,12 @@
                   loading={isLoading}
                   disabled={!email}
                 >
-                  Send reset link
+                  {labels.sendResetLink}
                 </Button>
 
                 <div class="text-center">
                   <Button variant="link" onclick={handleReturnToSignIn}>
-                    Return to log in
+                    {labels.returnToLogIn}
                   </Button>
                 </div>
               </div>
@@ -1006,11 +1078,10 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                Send a login link
+                {labels.loginLinkTitle}
               </h2>
               <p class={typography.smMuted}>
-                Enter the email address associated with your account and we'll
-                send you a link to sign in.
+                {labels.loginLinkDescription}
               </p>
             </div>
 
@@ -1024,7 +1095,7 @@
                     <label
                       for="login-link-email"
                       class={`${typography.label} block mb-2`}
-                    >Email</label>
+                    >{labels.emailLabel}</label>
                     <Input
                       id="login-link-email"
                       placeholder=""
@@ -1068,12 +1139,12 @@
                   loading={isLoading}
                   disabled={!email}
                 >
-                  Send login link
+                  {labels.sendLoginLink}
                 </Button>
 
                 <div class="text-center">
                   <Button variant="link" onclick={handleReturnToSignIn}>
-                    Return to log in
+                    {labels.returnToLogIn}
                   </Button>
                 </div>
               </div>
@@ -1083,45 +1154,40 @@
           <div in:fade={{ duration: 200 }} class="space-y-6 text-center">
             <div class="space-y-4">
               <h2 class={typography.h1}>
-                Check your email
+                {labels.checkEmailTitle}
               </h2>
               {#if isResendSuccess}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  We've resent {successType === "reset"
-                    ? "password reset instructions"
-                    : "a login link"} to
-                  <span class={typography.sm}
-                    >{successEmail}</span
-                  > if it is an email on file.
+                  {#if true}
+                    {@const message = typeof labels.resentMessage === 'function' ? labels.resentMessage(successType, successEmail) : labels.resentMessage}
+                    {@const parts = message.split(successEmail)}
+                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
+                  {/if}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  Please check again. If you still haven't received an email, <Button
+                  {labels.resentFollowUp} <Button
                     variant="link"
                     onclick={handleTryDifferentEmail}
-                  >try a different email</Button>.
+                  >{labels.tryDifferentEmail}</Button>.
                 </p>
               {:else}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  Thanks! If <span
-                    class={typography.sm}
-                    >{successEmail}</span
-                  >
-                  matches an email we have on file, then we've sent you an email
-                  containing further instructions for {successType === "reset"
-                    ? "resetting your password"
-                    : "signing in"}.
+                  {#if true}
+                    {@const message = typeof labels.successMessage === 'function' ? labels.successMessage(successType, successEmail) : labels.successMessage}
+                    {@const parts = message.split(successEmail)}
+                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
+                  {/if}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  If you haven't received an email in 5 minutes, check your
-                  spam, <Button variant="link" onclick={handleResend}>resend</Button>, or
-                  <Button variant="link" onclick={handleTryDifferentEmail}>try a different email</Button>.
+                  {labels.noEmailReceived} <Button variant="link" onclick={handleResend}>{labels.resend}</Button>, or
+                  <Button variant="link" onclick={handleTryDifferentEmail}>{labels.tryDifferentEmail}</Button>.
                 </p>
               {/if}
             </div>
 
             <div class="pt-2">
               <Button variant="link" onclick={handleReturnToSignIn}>
-                Return to sign in
+                {labels.returnToSignIn}
               </Button>
             </div>
           </div>

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

@@ -21,6 +21,7 @@ declare const SuperLogin: import("svelte").Component<{
     onExternalNavigate?: Function;
     showDarkModeToggle?: boolean;
     searchParams?: string;
+    labels?: Record<string, any>;
 }, {}, "">;
 type $$ComponentProps = {
     apiBaseUrl?: string;
@@ -40,5 +41,6 @@ type $$ComponentProps = {
     onExternalNavigate?: Function;
     showDarkModeToggle?: boolean;
     searchParams?: string;
+    labels?: Record<string, any>;
 };
 //# sourceMappingURL=SuperLogin.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAs+BA;iBAp7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;WAo7B1W;wBAp7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAgjCA;iBAz7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAy7BxY;wBAz7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.spec.js

@@ -4,27 +4,27 @@ import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
 import PlaceAutocomplete from './PlaceAutocomplete.svelte';
 
 // Mock Google Maps API
-const mockAutocompleteSuggestion = {
-  fetchAutocompleteSuggestions: vi.fn(),
-};
-
-// Vitest 4.x requires class syntax for constructor mocks
-class MockAutocompleteSessionToken {}
-
-const mockLoader = {
-  importLibrary: vi.fn().mockResolvedValue({
-    AutocompleteSessionToken: MockAutocompleteSessionToken,
-    AutocompleteSuggestion: mockAutocompleteSuggestion,
-  }),
-};
+// vi.hoisted ensures these are available when vi.mock is hoisted
+const { mockAutocompleteSuggestion, MockAutocompleteSessionToken, mockSetOptions, mockImportLibrary } = vi.hoisted(() => {
+  class _MockAutocompleteSessionToken {}
+  const _mockAutocompleteSuggestion = {
+    fetchAutocompleteSuggestions: vi.fn(),
+  };
+  return {
+    mockAutocompleteSuggestion: _mockAutocompleteSuggestion,
+    MockAutocompleteSessionToken: _MockAutocompleteSessionToken,
+    mockSetOptions: vi.fn(),
+    mockImportLibrary: vi.fn().mockResolvedValue({
+      AutocompleteSessionToken: _MockAutocompleteSessionToken,
+      AutocompleteSuggestion: _mockAutocompleteSuggestion,
+    }),
+  };
+});
 
-// Mock the Google Maps Loader - Vitest 4.x requires class syntax
+// Mock the Google Maps Loader - v2 uses functional API
 vi.mock('@googlemaps/js-api-loader', () => ({
-  Loader: class MockLoader {
-    constructor() {
-      this.importLibrary = mockLoader.importLibrary;
-    }
-  },
+  setOptions: mockSetOptions,
+  importLibrary: mockImportLibrary,
 }));
 
 // Mock config

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

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { SearchOutline } from "../../../primitives/Icons";
-  import * as GMaps from '@googlemaps/js-api-loader';
+  import { setOptions, importLibrary } from '@googlemaps/js-api-loader';
   import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
   import { typography } from '../../../tokens/typography';
   import { bloom } from '../../../utils/transitions.js';
-  const { Loader } = GMaps;
 /** Google Places API address component */  interface AddressComponent {    longText: string;    shortText: string;    types: string[];  }  /** Google Places API response data */  interface PlaceData {    formattedAddress?: string;    addressComponents?: AddressComponent[];    text?: string;    [key: string]: unknown;  }  /** Google Places autocomplete suggestion */  interface AutocompleteSuggestion {    placePrediction: {      types: string[];      text: { toString(): string };      toPlace(): PlaceObject;    };  }  /** Google Places place object */  interface PlaceObject {    fetchFields(options: { fields: string[] }): Promise<void>;    toJSON(): PlaceData;  }  /** Google Places API interface */  interface PlacesApiInterface {    AutocompleteSessionToken: new () => AutocompleteSessionToken;    AutocompleteSuggestion: {      fetchAutocompleteSuggestions(request: AutocompleteRequest): Promise<{ suggestions: AutocompleteSuggestion[] }>;    };  }  /** Google Places autocomplete session token */  interface AutocompleteSessionToken {}  /** Autocomplete request parameters */  interface AutocompleteRequest {    input: string;    language: string;    region: string;    sessionToken: AutocompleteSessionToken | string;  }  /** Search result item */  interface SearchResult {    to_place: PlaceObject;    text: string;    originalText?: string;  }
 
   interface Props {
@@ -43,7 +42,6 @@
   let title = $state('');
   let results = $state<SearchResult[]>([]);
   let token: AutocompleteSessionToken | undefined;
-  let loader: GMaps.Loader;
   let placesApi: Partial<PlacesApiInterface> = {};
 
   let request = $state<{
@@ -243,14 +241,13 @@
       }
 
       try {
-        loader = new Loader({
-          apiKey: PUBLIC_GOOGLE_MAPS_API_KEY,
-          version: 'weekly',
-          libraries: ['places'],
+        setOptions({
+          key: PUBLIC_GOOGLE_MAPS_API_KEY,
+          v: 'weekly',
         });
 
         const { AutocompleteSessionToken, AutocompleteSuggestion } =
-          await loader.importLibrary('places');
+          await importLibrary('places');
         placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
         placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
         token = new placesApi.AutocompleteSessionToken!();

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":"AASA,0CAA0C,CAAE,UAAU,gBAAgB;IAAM,QAAQ,EAAE,MAAM,CAAC;IAAI,SAAS,EAAE,MAAM,CAAC;IAAI,KAAK,EAAE,MAAM,EAAE,CAAC;CAAG;AACzI,sCAAsC,CAAE,UAAU,SAAS;IAAM,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAI,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAAI,IAAI,CAAC,EAAE,MAAM,CAAC;IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAAG;AAMrL,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,SAAS,KAAK,IAAI,CAAC;IACvC,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;AAiTH,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":"AASA,0CAA0C,CAAE,UAAU,gBAAgB;IAAM,QAAQ,EAAE,MAAM,CAAC;IAAI,SAAS,EAAE,MAAM,CAAC;IAAI,KAAK,EAAE,MAAM,EAAE,CAAC;CAAG;AACzI,sCAAsC,CAAE,UAAU,SAAS;IAAM,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAI,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAAI,IAAI,CAAC,EAAE,MAAM,CAAC;IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAAG;AAMrL,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,SAAS,KAAK,IAAI,CAAC;IACvC,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/services/EventService.d.ts

@@ -1,4 +1,4 @@
-export function fetchEventsFromAPI(): Promise<any>;
+export function fetchEventsFromAPI(venueId: any): Promise<any>;
 export function fetchEventsForMonth(year: any, month: any): Promise<any>;
 export function fetchEventsForWeek(date: any): Promise<any>;
 export function fetchEventsForDay(date: any): Promise<any>;