@main12/auth-login 0.2.1 → 0.2.2

package/dist/auth/application/hooks/useLoginFlow.d.ts

@@ -1,4 +1,4 @@
-import type { LoginStep } from '../../domain/types.js';
+import type { LoginStep } from '../../domain/types';
 export interface UseLoginFlowOptions {
     redirectTo: string;
     /** Called after successful password login with { email, password } */

package/dist/auth/application/hooks/useSetPasswordFlow.d.ts

@@ -10,7 +10,7 @@ export declare function useSetPasswordFlow({ redirectTo }?: UseSetPasswordFlowOp
     error: string | null;
     isLoading: boolean;
     showPassword: boolean;
-    strength: import("../../domain/types.js").PasswordStrengthResult;
+    strength: import("../../domain/types").PasswordStrengthResult;
     setPassword: import("react").Dispatch<import("react").SetStateAction<string>>;
     setConfirmPassword: import("react").Dispatch<import("react").SetStateAction<string>>;
     setShowPassword: import("react").Dispatch<import("react").SetStateAction<boolean>>;

package/dist/auth/application/services/authService.d.ts

@@ -1,4 +1,4 @@
-import type { CheckEmailResponse, SendOtpResponse, VerifyOtpResponse, SetPasswordResponse, SignupResponse } from '../../domain/types.js';
+import type { CheckEmailResponse, SendOtpResponse, VerifyOtpResponse, SetPasswordResponse, SignupResponse } from '../../domain/types';
 /**
  * Check if a user exists and whether they have a password set.
  * Used in the two-step login flow.

package/dist/auth/domain/passwordRules.d.ts

@@ -1,4 +1,4 @@
-import type { PasswordStrengthResult } from './types.js';
+import type { PasswordStrengthResult } from './types';
 export declare const MIN_PASSWORD_LENGTH = 8;
 export declare const MIN_CRITERIA_COUNT = 3;
 /**

package/dist/components/AuthLayout.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface AuthLayoutConfig {
-    /** Logo as a React node. Falls back to pluginConfig.logoUrl if not provided. */
+    /** Component or URL. Falls back to pluginConfig when omitted. */
     logo?: React.ReactNode;
     title?: string;
     subtitle?: string;

package/dist/components/AuthLayout.js

@@ -5,57 +5,81 @@ import { Card, CardContent, CardFooter } from './ui/index.js';
 import { PoweredBy } from './PoweredBy.js';
 import { pluginConfig } from '../config.js';
 function DefaultLogo() {
-    if (!pluginConfig.logoUrl) return null;
-    return /*#__PURE__*/ _jsx("img", {
+    if (pluginConfig.Logo) {
+        const L = pluginConfig.Logo;
+        return /*#__PURE__*/ _jsx(L, {});
+    }
+    if (pluginConfig.logoUrl) return /*#__PURE__*/ _jsx("img", {
         src: pluginConfig.logoUrl,
         alt: "",
         width: 180,
         height: 42,
         className: "object-contain"
     });
+    return null;
 }
 export const AuthLayout = ({ children, logo, title, subtitle, footer, poweredBy, cardClassName = '', backgroundClass = 'bg-white md:bg-[#191919]' })=>{
     const displayLogo = logo || /*#__PURE__*/ _jsx(DefaultLogo, {});
-    return /*#__PURE__*/ _jsx("main", {
+    const header = (displayLogo || title) && /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col items-center gap-2 pt-6 pb-2 px-6",
+        children: [
+            displayLogo && /*#__PURE__*/ _jsx("div", {
+                className: "flex justify-center mb-2",
+                children: displayLogo
+            }),
+            title && /*#__PURE__*/ _jsx("h1", {
+                className: "text-xl font-semibold text-gray-900 text-center",
+                children: title
+            }),
+            subtitle && /*#__PURE__*/ _jsx("p", {
+                className: "text-gray-600 text-sm text-center",
+                children: subtitle
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsxs("main", {
         className: `flex flex-col min-h-screen ${backgroundClass}`,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: "min-h-screen flex items-center justify-center px-4 py-12",
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: "w-full max-w-[400px] animate-[fadeIn_0.5s_ease-out]",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "md:hidden flex flex-col",
                 children: [
-                    /*#__PURE__*/ _jsxs(Card, {
-                        className: cardClassName,
-                        children: [
-                            (displayLogo || title) && /*#__PURE__*/ _jsxs("div", {
-                                className: "flex flex-col items-center gap-2 pt-6 pb-2 px-6",
-                                children: [
-                                    displayLogo && /*#__PURE__*/ _jsx("div", {
-                                        className: "flex justify-center mb-2",
-                                        children: displayLogo
-                                    }),
-                                    title && /*#__PURE__*/ _jsx("h1", {
-                                        className: "text-xl font-semibold text-gray-900 text-center",
-                                        children: title
-                                    }),
-                                    subtitle && /*#__PURE__*/ _jsx("p", {
-                                        className: "text-gray-600 text-sm text-center",
-                                        children: subtitle
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(CardContent, {
-                                children: children
-                            }),
-                            footer && /*#__PURE__*/ _jsx(CardFooter, {
-                                children: footer
-                            })
-                        ]
+                    header,
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "px-6 pb-4",
+                        children: children
+                    }),
+                    footer && /*#__PURE__*/ _jsx("div", {
+                        className: "px-6 pb-6 flex justify-center",
+                        children: footer
                     }),
                     /*#__PURE__*/ _jsx(PoweredBy, {
                         ...poweredBy
                     })
                 ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "hidden md:flex min-h-screen items-center justify-center px-4 py-12",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "w-full max-w-[400px] animate-[fadeIn_0.5s_ease-out]",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Card, {
+                            className: cardClassName,
+                            children: [
+                                header,
+                                /*#__PURE__*/ _jsx(CardContent, {
+                                    children: children
+                                }),
+                                footer && /*#__PURE__*/ _jsx(CardFooter, {
+                                    children: footer
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(PoweredBy, {
+                            ...poweredBy
+                        })
+                    ]
+                })
             })
-        })
+        ]
     });
 };

package/dist/components/PoweredBy.js

@@ -1,30 +1,47 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-const Main12LogoSVG = ({ width = 28, height = 28 })=>/*#__PURE__*/ _jsxs("svg", {
-        width: width,
-        height: height,
-        viewBox: "0 0 100 100",
-        fill: "none",
+// const Main12LogoSVG = ({ width = 28, height = 28 }: { width?: number; height?: number }) => (
+//   <svg width={width} height={height} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+//     <rect width="100" height="100" rx="20" fill="#D5E855" />
+//     <text x="50" y="68" textAnchor="middle" fontSize="52" fontWeight="700" fill="#1d1d1f" fontFamily="system-ui, sans-serif">12</text>
+//   </svg>
+// )
+const Main12LogoSVG = ({ width = 28, height = 28 })=>/*#__PURE__*/ _jsx("svg", {
+        viewBox: "0 0 7.938 7.937",
+        height: width,
+        width: height,
+        xmlSpace: "preserve",
         xmlns: "http://www.w3.org/2000/svg",
-        children: [
-            /*#__PURE__*/ _jsx("rect", {
-                width: "100",
-                height: "100",
-                rx: "20",
-                fill: "#D5E855"
-            }),
-            /*#__PURE__*/ _jsx("text", {
-                x: "50",
-                y: "68",
-                textAnchor: "middle",
-                fontSize: "52",
-                fontWeight: "700",
-                fill: "#1d1d1f",
-                fontFamily: "system-ui, sans-serif",
-                children: "12"
-            })
-        ]
+        children: /*#__PURE__*/ _jsxs("g", {
+            style: {
+                display: "inline"
+            },
+            children: [
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M671.165-649.8h-7.867v7.867",
+                    style: {
+                        fill: "#4e5357",
+                        fillOpacity: 1,
+                        fillRule: "nonzero",
+                        stroke: "none",
+                        strokeWidth: 0.0516193
+                    },
+                    transform: "translate(-330.646 331.775)scale(.50447)"
+                }),
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M655.431-649.8h7.867v-7.868",
+                    style: {
+                        fill: "#3e86b0",
+                        fillOpacity: 1,
+                        fillRule: "nonzero",
+                        stroke: "none",
+                        strokeWidth: 0.0516193
+                    },
+                    transform: "translate(-330.646 331.775)scale(.50447)"
+                })
+            ]
+        })
     });
 export const PoweredBy = ({ enabled = true, logoUrl, linkUrl = 'https://main12.com', width = 28, height = 28, className = '' })=>{
     if (!enabled) return null;

package/dist/components/email/baseTemplate.d.ts

@@ -1,5 +1,5 @@
-import { type EmailColors, type SocialLink } from './constants.js';
-import { type SupportedLanguage } from './translations.js';
+import { type EmailColors, type SocialLink } from './constants';
+import { type SupportedLanguage } from './translations';
 export interface BaseTemplateOptions {
     logoUrl?: string;
     projectName?: string;

package/dist/components/email/index.d.ts

@@ -1,7 +1,7 @@
-export { wrapInBaseTemplate, type BaseTemplateOptions } from './baseTemplate.js';
-export { DEFAULT_COLORS, SOCIAL_ICONS, getBaseUrl, getSenderEmail, type EmailColors, type SocialLink, type SocialPlatform } from './constants.js';
-export { getEmailTranslations, type SupportedLanguage, type EmailTranslations } from './translations.js';
-export { generateOtpEmail, type OtpEmailParams, type OtpEmailResult } from './templates/otp.js';
-export { generateWelcomeEmail, type WelcomeEmailParams, type WelcomeEmailResult } from './templates/welcome.js';
-export { generatePasswordResetEmail, type PasswordResetEmailParams, type PasswordResetEmailResult } from './templates/passwordReset.js';
-export { generatePasswordChangedEmail, type PasswordChangedEmailParams, type PasswordChangedEmailResult } from './templates/passwordChanged.js';
+export { wrapInBaseTemplate, type BaseTemplateOptions } from './baseTemplate';
+export { DEFAULT_COLORS, SOCIAL_ICONS, getBaseUrl, getSenderEmail, type EmailColors, type SocialLink, type SocialPlatform } from './constants';
+export { getEmailTranslations, type SupportedLanguage, type EmailTranslations } from './translations';
+export { generateOtpEmail, type OtpEmailParams, type OtpEmailResult } from './templates/otp';
+export { generateWelcomeEmail, type WelcomeEmailParams, type WelcomeEmailResult } from './templates/welcome';
+export { generatePasswordResetEmail, type PasswordResetEmailParams, type PasswordResetEmailResult } from './templates/passwordReset';
+export { generatePasswordChangedEmail, type PasswordChangedEmailParams, type PasswordChangedEmailResult } from './templates/passwordChanged';

package/dist/components/email/templates/otp.d.ts

@@ -1,6 +1,6 @@
-import { type SocialLink } from '../constants.js';
-import { type BaseTemplateOptions } from '../baseTemplate.js';
-import { type SupportedLanguage } from '../translations.js';
+import { type SocialLink } from '../constants';
+import { type BaseTemplateOptions } from '../baseTemplate';
+import { type SupportedLanguage } from '../translations';
 export interface OtpEmailParams {
     userName: string;
     otp: string;

package/dist/components/email/templates/passwordChanged.d.ts

@@ -1,6 +1,6 @@
-import { type SocialLink } from '../constants.js';
-import { type BaseTemplateOptions } from '../baseTemplate.js';
-import { type SupportedLanguage } from '../translations.js';
+import { type SocialLink } from '../constants';
+import { type BaseTemplateOptions } from '../baseTemplate';
+import { type SupportedLanguage } from '../translations';
 export interface PasswordChangedEmailParams {
     userName: string;
     loginUrl?: string;

package/dist/components/email/templates/passwordReset.d.ts

@@ -1,6 +1,6 @@
-import { type SocialLink } from '../constants.js';
-import { type BaseTemplateOptions } from '../baseTemplate.js';
-import { type SupportedLanguage } from '../translations.js';
+import { type SocialLink } from '../constants';
+import { type BaseTemplateOptions } from '../baseTemplate';
+import { type SupportedLanguage } from '../translations';
 export interface PasswordResetEmailParams {
     userName: string;
     otp: string;

package/dist/components/email/templates/welcome.d.ts

@@ -1,6 +1,6 @@
-import { type SocialLink } from '../constants.js';
-import { type BaseTemplateOptions } from '../baseTemplate.js';
-import { type SupportedLanguage } from '../translations.js';
+import { type SocialLink } from '../constants';
+import { type BaseTemplateOptions } from '../baseTemplate';
+import { type SupportedLanguage } from '../translations';
 export interface WelcomeEmailParams {
     userName: string;
     userEmail?: string;

package/dist/components/pages/ForgotPasswordPage.d.ts

@@ -1,4 +1,4 @@
-import type { AuthLayoutConfig } from '../AuthLayout.js';
+import type { AuthLayoutConfig } from '../AuthLayout';
 export interface ForgotPasswordPageProps extends AuthLayoutConfig {
     loginUrl?: string;
 }

package/dist/components/pages/ForgotPasswordPageHero.d.ts

@@ -1,4 +1,4 @@
-import type { AuthLayoutConfig } from '../AuthLayout.js';
+import type { AuthLayoutConfig } from '../AuthLayout';
 export interface ForgotPasswordPageHeroProps extends AuthLayoutConfig {
     loginUrl?: string;
 }

package/dist/components/pages/ForgotPasswordPageHero.js

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Button, Input } from '@heroui/react';
+import { Button, Input, Label, TextField, Spinner } from '@heroui/react';
 import { Icon } from '@iconify/react';
 import { motion } from 'framer-motion';
 import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
@@ -40,28 +40,37 @@ export default function ForgotPasswordPageHero({ loginUrl = '/login', logo, powe
                     },
                     children: error
                 }),
-                /*#__PURE__*/ _jsx(Input, {
+                /*#__PURE__*/ _jsxs(TextField, {
                     type: "email",
-                    label: "Email",
                     value: email,
-                    onChange: (e)=>setEmail(e.target.value),
-                    variant: "bordered",
-                    size: "lg",
+                    onChange: setEmail,
                     isRequired: true,
-                    classNames: {
-                        input: 'text-gray-900',
-                        label: 'text-gray-600',
-                        inputWrapper: 'border-gray-300 bg-white'
-                    }
+                    fullWidth: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(Label, {
+                            className: "text-gray-600",
+                            children: "Email"
+                        }),
+                        /*#__PURE__*/ _jsx(Input, {
+                            className: "bg-white"
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ _jsx(Button, {
                     type: "submit",
                     fullWidth: true,
                     size: "lg",
-                    color: "primary",
-                    isLoading: isLoading,
+                    isPending: isLoading,
                     className: "h-12 font-semibold",
-                    children: "Send Reset Code"
+                    children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                    color: "current",
+                                    size: "sm"
+                                }),
+                                "Send Reset Code"
+                            ]
+                        })
                 })
             ]
         })

package/dist/components/pages/ForgotPasswordPageTailwind.d.ts

@@ -1,4 +1,4 @@
-import type { AuthLayoutConfig } from '../AuthLayout.js';
+import type { AuthLayoutConfig } from '../AuthLayout';
 export interface ForgotPasswordPageProps extends AuthLayoutConfig {
     loginUrl?: string;
 }

package/dist/components/pages/LoginPage.d.ts

@@ -1,4 +1,4 @@
-import type { AuthLayoutConfig } from '../AuthLayout.js';
+import type { AuthLayoutConfig } from '../AuthLayout';
 export interface LoginPageProps extends AuthLayoutConfig {
     onPasswordLogin: (credentials: {
         email: string;

package/dist/components/pages/LoginPageHero.d.ts

@@ -1,4 +1,4 @@
-import type { AuthLayoutConfig } from '../AuthLayout.js';
+import type { AuthLayoutConfig } from '../AuthLayout';
 export interface LoginPageHeroProps extends AuthLayoutConfig {
     onPasswordLogin: (credentials: {
         email: string;

package/dist/components/pages/LoginPageHero.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { Button, Input, Divider, Spinner as HSpinner } from '@heroui/react';
+import { Button, Input, Label, TextField, Separator, Spinner } from '@heroui/react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Icon } from '@iconify/react';
 import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
@@ -57,29 +57,29 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                     children: [
                         showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
                             children: [
-                                /*#__PURE__*/ _jsx(Button, {
+                                /*#__PURE__*/ _jsxs(Button, {
                                     fullWidth: true,
-                                    variant: "bordered",
-                                    size: "lg",
-                                    className: "mb-4 h-12 border-gray-300 rounded-full text-gray-700 hover:bg-gray-50",
-                                    startContent: /*#__PURE__*/ _jsx(Icon, {
-                                        icon: "flat-color-icons:google",
-                                        width: 20
-                                    }),
+                                    variant: "secondary",
                                     onPress: handleGoogleLogin,
-                                    children: "Continue with Google"
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Icon, {
+                                            icon: "flat-color-icons:google",
+                                            width: 20
+                                        }),
+                                        "Continue with Google"
+                                    ]
                                 }),
                                 /*#__PURE__*/ _jsxs("div", {
                                     className: "flex items-center gap-4 my-4",
                                     children: [
-                                        /*#__PURE__*/ _jsx(Divider, {
+                                        /*#__PURE__*/ _jsx(Separator, {
                                             className: "flex-1"
                                         }),
                                         /*#__PURE__*/ _jsx("span", {
                                             className: "text-gray-500 text-sm",
                                             children: "or"
                                         }),
-                                        /*#__PURE__*/ _jsx(Divider, {
+                                        /*#__PURE__*/ _jsx(Separator, {
                                             className: "flex-1"
                                         })
                                     ]
@@ -100,28 +100,36 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     },
                                     children: error
                                 }),
-                                /*#__PURE__*/ _jsx(Input, {
+                                /*#__PURE__*/ _jsxs(TextField, {
                                     type: "email",
-                                    label: "Email",
                                     value: email,
-                                    onValueChange: setEmail,
-                                    variant: "bordered",
-                                    size: "lg",
+                                    onChange: setEmail,
                                     isRequired: true,
-                                    classNames: {
-                                        input: 'text-gray-900',
-                                        label: 'text-gray-600',
-                                        inputWrapper: 'border-gray-300 hover:border-gray-400 bg-white'
-                                    }
+                                    fullWidth: true,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Label, {
+                                            className: "text-gray-600",
+                                            children: "Email"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Input, {
+                                            variant: "secondary"
+                                        })
+                                    ]
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     type: "submit",
                                     fullWidth: true,
                                     size: "lg",
-                                    color: "primary",
-                                    isLoading: isLoading,
-                                    className: "h-12 font-semibold",
-                                    children: "Continue"
+                                    isPending: isLoading,
+                                    children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                            children: [
+                                                isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                                    color: "current",
+                                                    size: "sm"
+                                                }),
+                                                "Continue"
+                                            ]
+                                        })
                                 })
                             ]
                         })
@@ -173,29 +181,37 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     },
                                     children: error
                                 }),
-                                /*#__PURE__*/ _jsx(Input, {
+                                /*#__PURE__*/ _jsxs(TextField, {
                                     type: showPassword ? 'text' : 'password',
-                                    label: "Password",
                                     value: password,
-                                    onValueChange: setPassword,
-                                    variant: "bordered",
-                                    size: "lg",
+                                    onChange: setPassword,
                                     isRequired: true,
                                     autoFocus: true,
-                                    classNames: {
-                                        input: 'text-gray-900',
-                                        label: 'text-gray-600',
-                                        inputWrapper: 'border-gray-300 hover:border-gray-400 bg-white'
-                                    },
-                                    endContent: /*#__PURE__*/ _jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>setShowPassword(!showPassword),
-                                        children: /*#__PURE__*/ _jsx(Icon, {
-                                            icon: showPassword ? 'lucide:eye-off' : 'lucide:eye',
-                                            className: "text-gray-400",
-                                            width: 20
+                                    fullWidth: true,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Label, {
+                                            className: "text-gray-600",
+                                            children: "Password"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "relative",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Input, {
+                                                    variant: "secondary"
+                                                }),
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    className: "absolute right-3 top-1/2 -translate-y-1/2",
+                                                    onClick: ()=>setShowPassword(!showPassword),
+                                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                                        icon: showPassword ? 'lucide:eye-off' : 'lucide:eye',
+                                                        className: "text-gray-400",
+                                                        width: 20
+                                                    })
+                                                })
+                                            ]
                                         })
-                                    })
+                                    ]
                                 }),
                                 /*#__PURE__*/ _jsx("div", {
                                     className: "text-left",
@@ -209,10 +225,17 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     type: "submit",
                                     fullWidth: true,
                                     size: "lg",
-                                    color: "primary",
-                                    isLoading: isLoading,
+                                    isPending: isLoading,
                                     className: "h-12 font-semibold",
-                                    children: "Continue"
+                                    children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                            children: [
+                                                isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                                    color: "current",
+                                                    size: "sm"
+                                                }),
+                                                "Continue"
+                                            ]
+                                        })
                                 })
                             ]
                         })
@@ -271,11 +294,18 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                         /*#__PURE__*/ _jsx(Button, {
                             fullWidth: true,
                             size: "lg",
-                            color: "primary",
-                            isLoading: isSendingOtp,
+                            isPending: isSendingOtp,
                             onPress: handleSendOtp,
                             className: "h-12 font-semibold",
-                            children: isSendingOtp ? 'Sending...' : 'Send Code'
+                            children: ({ isPending })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        isPending && /*#__PURE__*/ _jsx(Spinner, {
+                                            color: "current",
+                                            size: "sm"
+                                        }),
+                                        isPending ? 'Sending...' : 'Send Code'
+                                    ]
+                                })
                         })
                     ]
                 }, "otp-prompt")
@@ -287,7 +317,7 @@ export default function LoginPageHero(props) {
     return /*#__PURE__*/ _jsx(Suspense, {
         fallback: /*#__PURE__*/ _jsx("div", {
             className: "min-h-screen flex items-center justify-center",
-            children: /*#__PURE__*/ _jsx(HSpinner, {
+            children: /*#__PURE__*/ _jsx(Spinner, {
                 size: "lg"
             })
         }),

package/dist/components/pages/LoginPageTailwind.d.ts

@@ -1,4 +1,4 @@
-import type { AuthLayoutConfig } from '../AuthLayout.js';
+import type { AuthLayoutConfig } from '../AuthLayout';
 export interface LoginPageProps extends AuthLayoutConfig {
     onPasswordLogin: (credentials: {
         email: string;