@payez/next-mvp 3.0.0

package/dist/components/auth/TraditionalAuthSection.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    email: string;
+    password: string;
+    onEmailChange: (email: string) => void;
+    onPasswordChange: (password: string) => void;
+    onSubmit: (e: React.FormEvent) => void;
+    isLoading?: boolean;
+    buttonText?: string;
+    showForgotPassword?: boolean;
+    onForgotPassword?: () => void;
+}
+export declare function TraditionalAuthSection({ email, password, onEmailChange, onPasswordChange, onSubmit, isLoading, buttonText, showForgotPassword, onForgotPassword, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/auth/TraditionalAuthSection.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TraditionalAuthSection = TraditionalAuthSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TraditionalAuthSection({ email, password, onEmailChange, onPasswordChange, onSubmit, isLoading, buttonText = 'Sign In', showForgotPassword = true, onForgotPassword, }) {
+    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium mb-2", style: { color: 'var(--text-primary)' }, children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", value: email, onChange: (e) => onEmailChange(e.target.value), placeholder: "you@example.com", disabled: isLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                            border: '1px solid var(--border-default)',
+                            color: 'var(--text-primary)',
+                            background: 'var(--bg-default)',
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium", style: { color: 'var(--text-primary)' }, children: "Password" }), showForgotPassword && onForgotPassword && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onForgotPassword, className: "text-xs hover:underline", style: { color: 'var(--text-primary)' }, children: "Forgot?" }))] }), (0, jsx_runtime_1.jsx)("input", { type: "password", value: password, onChange: (e) => onPasswordChange(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", disabled: isLoading, required: true, className: "w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50", style: {
+                            border: '1px solid var(--border-default)',
+                            color: 'var(--text-primary)',
+                            background: 'var(--bg-default)',
+                        } })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: isLoading, className: "w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6", style: {
+                    border: '1px solid var(--border-default)',
+                    color: 'white',
+                    background: 'var(--color-primary, #10b981)',
+                }, children: isLoading ? 'Signing in...' : buttonText })] }));
+}

package/dist/components/recovery/CompleteStep.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    onGoToLogin: () => void;
+}
+export declare function CompleteStep({ onGoToLogin }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/recovery/CompleteStep.js

@@ -0,0 +1,8 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompleteStep = CompleteStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function CompleteStep({ onGoToLogin }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white border border-gray-300 rounded p-8 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-green-50 border border-green-200 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-8 h-8 text-green-700", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-2xl font-semibold text-gray-900 mb-2", children: "Password Reset Complete" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 mb-2", children: "Your password has been successfully reset and your account lockout has been cleared." }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 mb-6", children: "You can now log in with your new password." }), (0, jsx_runtime_1.jsx)("button", { onClick: onGoToLogin, className: "w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900", children: "Go to Login" })] }));
+}

package/dist/components/recovery/InitiateRecoveryStep.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    email: string;
+    setEmail: (email: string) => void;
+    onSubmit: () => void;
+    loading: boolean;
+}
+export declare function InitiateRecoveryStep({ email, setEmail, onSubmit, loading }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/recovery/InitiateRecoveryStep.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitiateRecoveryStep = InitiateRecoveryStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function InitiateRecoveryStep({ email, setEmail, onSubmit, loading }) {
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-2xl p-8", style: { background: 'var(--bg-card)', border: '1px solid var(--border-default)' }, children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold mb-2", style: { color: 'var(--text-primary)' }, children: "Account Recovery" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm mb-6", style: { color: 'var(--text-secondary)' }, children: "Enter your email address to begin the account recovery process." }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "email", className: "block text-sm font-medium mb-1", style: { color: 'var(--text-primary)' }, children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { type: "email", id: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, disabled: loading, placeholder: "Enter your email address", className: "w-full px-3 py-2 rounded focus:ring-2 focus:outline-none disabled:opacity-50", style: {
+                                    border: '1px solid var(--border-default)',
+                                    color: 'var(--text-primary)',
+                                    background: 'var(--bg-default)'
+                                } })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: loading || !email, className: "w-full py-2 px-4 rounded font-medium focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                            border: '1px solid var(--border-default)',
+                            color: 'var(--text-primary)',
+                            background: 'var(--bg-default)'
+                        }, children: loading ? 'Processing...' : 'Continue' }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("a", { href: "/account-auth/login", className: "text-sm hover:underline font-medium", style: { color: 'var(--text-primary)' }, children: "Back to Login" }) })] })] }));
+}

package/dist/components/recovery/SelectMethodStep.d.ts

@@ -0,0 +1,8 @@
+import { RecoverySession } from '../../types/recovery';
+interface Props {
+    session: RecoverySession;
+    onSelectMethod: (method: 'email' | 'sms' | 'authenticator') => void;
+    loading: boolean;
+}
+export declare function SelectMethodStep({ session, onSelectMethod, loading }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/recovery/SelectMethodStep.js

@@ -0,0 +1,8 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectMethodStep = SelectMethodStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SelectMethodStep({ session, onSelectMethod, loading }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white border border-gray-300 rounded p-8", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select Verification Method" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 mb-6", children: "Choose how you would like to receive your verification code." }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 border border-gray-200 rounded p-3 mb-6 text-sm", children: [session.maskedEmail && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Email: " }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-900 font-medium", children: session.maskedEmail })] })), session.maskedPhone && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Phone: " }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-900 font-medium", children: session.maskedPhone })] })), session.hasAuthenticator && ((0, jsx_runtime_1.jsx)("div", { className: "text-gray-600", children: "* This account has 2FA enabled" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [session.availableMethods.includes('email') && ((0, jsx_runtime_1.jsx)("button", { onClick: () => onSelectMethod('email'), disabled: loading, className: "w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", children: "Send Code via Email" })), session.availableMethods.includes('sms') && session.maskedPhone && ((0, jsx_runtime_1.jsx)("button", { onClick: () => onSelectMethod('sms'), disabled: loading, className: "w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", children: "Send Code via SMS" })), session.availableMethods.includes('authenticator') && session.hasAuthenticator && ((0, jsx_runtime_1.jsx)("button", { onClick: () => onSelectMethod('authenticator'), disabled: loading, className: "w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", children: "Use Authenticator App" }))] })] }));
+}

package/dist/components/recovery/SetPasswordStep.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    onSubmit: (password: string, confirmPassword: string) => void;
+    loading: boolean;
+}
+export declare function SetPasswordStep({ onSubmit, loading }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/recovery/SetPasswordStep.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetPasswordStep = SetPasswordStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function SetPasswordStep({ onSubmit, loading }) {
+    const [password, setPassword] = (0, react_1.useState)('');
+    const [confirmPassword, setConfirmPassword] = (0, react_1.useState)('');
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const [showConfirmPassword, setShowConfirmPassword] = (0, react_1.useState)(false);
+    const passwordsMatch = password === confirmPassword && password !== '';
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (passwordsMatch) {
+            onSubmit(password, confirmPassword);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white border border-gray-300 rounded p-8", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Set New Password" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 mb-6", children: "Choose a strong password for your account." }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-900 mb-1", children: "New Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: showPassword ? 'text' : 'password', id: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, disabled: loading, className: "w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 pr-10" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-600 hover:text-gray-900", children: showPassword ? '👁️' : '👁️‍🗨️' })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "confirmPassword", className: "block text-sm font-medium text-gray-900 mb-1", children: "Confirm New Password" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: showConfirmPassword ? 'text' : 'password', id: "confirmPassword", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), required: true, disabled: loading, className: "w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 pr-10" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowConfirmPassword(!showConfirmPassword), className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-600 hover:text-gray-900", children: showConfirmPassword ? '👁️' : '👁️‍🗨️' })] })] }), !passwordsMatch && confirmPassword && ((0, jsx_runtime_1.jsx)("div", { className: "bg-red-50 border border-red-200 rounded p-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-red-700 text-sm", children: "Passwords do not match" }) })), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !passwordsMatch || loading, className: "w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", children: loading ? 'Resetting Password...' : 'Reset Password' })] })] }));
+}

package/dist/components/recovery/VerifyCodeStep.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    code: string;
+    setCode: (code: string) => void;
+    onSubmit: () => void;
+    onResend: () => void;
+    loading: boolean;
+    maskedDestination?: string;
+}
+export declare function VerifyCodeStep({ code, setCode, onSubmit, onResend, loading, maskedDestination }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/recovery/VerifyCodeStep.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerifyCodeStep = VerifyCodeStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function VerifyCodeStep({ code, setCode, onSubmit, onResend, loading, maskedDestination }) {
+    const [resendCooldown, setResendCooldown] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (resendCooldown > 0) {
+            const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1000);
+            return () => clearTimeout(timer);
+        }
+    }, [resendCooldown]);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit();
+    };
+    const handleResend = () => {
+        onResend();
+        setResendCooldown(30);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white border border-gray-300 rounded p-8", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Enter Verification Code" }), maskedDestination && ((0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600 mb-6", children: ["Enter the 6-digit code sent to ", (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: maskedDestination })] })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "code", className: "block text-sm font-medium text-gray-900 mb-1", children: "Verification Code" }), (0, jsx_runtime_1.jsx)("input", { type: "text", id: "code", value: code, onChange: (e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6)), required: true, disabled: loading, placeholder: "000000", maxLength: 6, className: "w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-gray-900 focus:outline-none disabled:opacity-50 disabled:bg-gray-50 text-center text-2xl tracking-widest font-mono" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-600 mt-1", children: "Code expires in 5 minutes" })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: loading || code.length !== 6, className: "w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", children: loading ? 'Verifying...' : 'Verify Code' }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleResend, disabled: loading || resendCooldown > 0, className: "text-sm text-gray-900 hover:underline font-medium disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline", children: resendCooldown > 0 ? `Resend Code (${resendCooldown}s)` : 'Resend Code' }) })] })] }));
+}

package/dist/components/reserved/ReservedRecoveryWarning.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ReservedRecoveryWarning - Deterministic Reserved Space for Account Lockout Warning
+ *
+ * PURPOSE: Eliminate layout shift when the lockout warning appears/disappears
+ * by reserving exact height mathematically.
+ *
+ * MATHEMATICAL APPROACH:
+ * - Mirrors the complete DOM structure (icon+title row, body paragraph, CTA button)
+ * - Height = Σ(child block heights) + (vertical gaps from space-y-3) + (padding top/bottom from p-4) + (borders)
+ * - Text block heights from exact font-size × line-height and wrapping at actual width
+ * - space-y-3: 0.75rem = 12px gap between children
+ * - p-4: 1rem = 16px padding (top + bottom = 32px)
+ * - border: 1px (top + bottom = 2px)
+ * - Evaluated via offscreen DOM for precision across zoom/browsers
+ *
+ * CRITICAL: No transitions on height; reserves space even when hidden
+ */
+import React from "react";
+type Props = {
+    className?: string;
+    /** Whether the warning is actually visible */
+    show?: boolean;
+    /** Provide the actual copy used so we can measure precise wrapping (localizable) */
+    titleText: string;
+    bodyText: string;
+    actionLabel: string;
+    /** Class recipes that match the live styles */
+    containerClass?: string;
+    titleClass?: string;
+    bodyClass?: string;
+    buttonClass?: string;
+    /** Icon size in px (default 20 for w-5 h-5) */
+    iconSizePx?: number;
+    /** The dynamic warning content */
+    children?: React.ReactNode;
+};
+export declare function ReservedRecoveryWarning({ className, show, titleText, bodyText, actionLabel, containerClass, titleClass, bodyClass, buttonClass, iconSizePx, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default ReservedRecoveryWarning;

package/dist/components/reserved/ReservedRecoveryWarning.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReservedRecoveryWarning = ReservedRecoveryWarning;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ReservedRecoveryWarning - Deterministic Reserved Space for Account Lockout Warning
+ *
+ * PURPOSE: Eliminate layout shift when the lockout warning appears/disappears
+ * by reserving exact height mathematically.
+ *
+ * MATHEMATICAL APPROACH:
+ * - Mirrors the complete DOM structure (icon+title row, body paragraph, CTA button)
+ * - Height = Σ(child block heights) + (vertical gaps from space-y-3) + (padding top/bottom from p-4) + (borders)
+ * - Text block heights from exact font-size × line-height and wrapping at actual width
+ * - space-y-3: 0.75rem = 12px gap between children
+ * - p-4: 1rem = 16px padding (top + bottom = 32px)
+ * - border: 1px (top + bottom = 2px)
+ * - Evaluated via offscreen DOM for precision across zoom/browsers
+ *
+ * CRITICAL: No transitions on height; reserves space even when hidden
+ */
+const react_1 = __importDefault(require("react"));
+const reservedSpace_1 = require("../../utils/layout/reservedSpace");
+function ReservedRecoveryWarning({ className, show = false, titleText, bodyText, actionLabel, containerClass = "p-4 rounded-lg border", titleClass = "font-medium", bodyClass = "text-sm", buttonClass = "w-full py-2 px-4 text-sm font-medium rounded-md", iconSizePx = 20, children, }) {
+    const hostRef = react_1.default.useRef(null);
+    // Estimate initial height to prevent collapse during SSR/hydration
+    // Formula: icon (20px) + padding (p-4 = 32px) + border (2px) + title + body + button
+    // Conservative estimate: ~140px for typical warning with button
+    const estimatedMinHeight = 140;
+    const [minH, setMinH] = react_1.default.useState(estimatedMinHeight);
+    const recompute = react_1.default.useCallback(() => {
+        const el = hostRef.current;
+        if (!el)
+            return;
+        const width = el.clientWidth;
+        // Wait for layout - clientWidth === 0 means container not laid out yet
+        if (width === 0) {
+            // Retry after next frame when layout is ready
+            requestAnimationFrame(recompute);
+            return;
+        }
+        const h = (0, reservedSpace_1.measureNodeHeightAtWidth)(() => {
+            // Mirror the real DOM of the warning
+            const outer = document.createElement("div");
+            outer.className = containerClass;
+            // Row: icon + title (flex items-start space-x-3)
+            const headerRow = document.createElement("div");
+            headerRow.className = "flex items-start space-x-3";
+            const icon = document.createElement("div");
+            icon.style.width = iconSizePx + "px";
+            icon.style.height = iconSizePx + "px";
+            icon.style.flexShrink = "0";
+            icon.style.marginTop = "2px"; // mt-0.5 to align with text
+            const titleContainer = document.createElement("div");
+            titleContainer.className = "flex-1";
+            const h3 = document.createElement("h3");
+            h3.className = titleClass;
+            h3.style.margin = "0";
+            h3.style.marginBottom = "8px"; // mb-2
+            h3.textContent = titleText;
+            // Body paragraph
+            const p = document.createElement("p");
+            p.className = bodyClass;
+            p.style.margin = "0";
+            p.style.marginBottom = "12px"; // mb-3
+            p.textContent = bodyText;
+            // Action button
+            const btn = document.createElement("button");
+            btn.className = buttonClass;
+            btn.textContent = actionLabel;
+            titleContainer.appendChild(h3);
+            titleContainer.appendChild(p);
+            titleContainer.appendChild(btn);
+            headerRow.appendChild(icon);
+            headerRow.appendChild(titleContainer);
+            outer.appendChild(headerRow);
+            return outer;
+        }, width);
+        setMinH(h);
+    }, [titleText, bodyText, actionLabel, containerClass, titleClass, bodyClass, buttonClass, iconSizePx]);
+    react_1.default.useLayoutEffect(() => {
+        recompute();
+        if (hostRef.current) {
+            return (0, reservedSpace_1.observeForRecalc)(hostRef.current, recompute);
+        }
+    }, [recompute]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: hostRef, className: className, style: { minHeight: minH ? `${minH}px` : undefined, transition: "none" }, "data-testid": "recovery-warning-wrap", children: show ? children : null }));
+}
+exports.default = ReservedRecoveryWarning;

package/dist/components/reserved/ReservedStatusBox.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ReservedStatusBox - Deterministic Reserved Space for Status Messages
+ *
+ * PURPOSE: Eliminate layout shift when status messages (ready/submitting/error/success)
+ * appear/disappear by reserving exact height mathematically.
+ *
+ * MATHEMATICAL APPROACH:
+ * - Measures all candidate messages at current container width
+ * - Computes height = max(iconSizePx, text block height) + paddings + borders
+ * - Font metrics from Tailwind: text-sm (0.875rem = 14px), leading-relaxed (1.625)
+ * - Padding from p-3: 0.75rem = 12px (top + bottom = 24px)
+ * - Border from border class: 1px (top + bottom = 2px)
+ * - Sets minHeight to the maximum of all candidates
+ *
+ * CRITICAL: No transitions on height; exact px value at any zoom level
+ */
+import React from "react";
+type Props = {
+    className?: string;
+    /** List of candidate messages representing the longest possible strings for each state */
+    candidates: string[];
+    /** Tailwind classes applied to the live status container (must match for accurate measurement) */
+    containerClass?: string;
+    /** Icon size in px (default 16 for w-4 h-4) */
+    iconSizePx?: number;
+    /** The dynamic status content */
+    children?: React.ReactNode;
+};
+export declare function ReservedStatusBox({ className, candidates, containerClass, iconSizePx, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default ReservedStatusBox;

package/dist/components/reserved/ReservedStatusBox.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReservedStatusBox = ReservedStatusBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ReservedStatusBox - Deterministic Reserved Space for Status Messages
+ *
+ * PURPOSE: Eliminate layout shift when status messages (ready/submitting/error/success)
+ * appear/disappear by reserving exact height mathematically.
+ *
+ * MATHEMATICAL APPROACH:
+ * - Measures all candidate messages at current container width
+ * - Computes height = max(iconSizePx, text block height) + paddings + borders
+ * - Font metrics from Tailwind: text-sm (0.875rem = 14px), leading-relaxed (1.625)
+ * - Padding from p-3: 0.75rem = 12px (top + bottom = 24px)
+ * - Border from border class: 1px (top + bottom = 2px)
+ * - Sets minHeight to the maximum of all candidates
+ *
+ * CRITICAL: No transitions on height; exact px value at any zoom level
+ */
+const react_1 = __importDefault(require("react"));
+const reservedSpace_1 = require("../../utils/layout/reservedSpace");
+function ReservedStatusBox({ className, candidates, containerClass = "p-3 text-sm leading-relaxed rounded-md border", iconSizePx = 16, children, }) {
+    const hostRef = react_1.default.useRef(null);
+    // Estimate initial height to prevent collapse during SSR/hydration
+    // Formula: iconSize + padding (p-3 = 24px) + border (2px) = conservative minimum
+    const estimatedMinHeight = iconSizePx + 24 + 2; // ~42px for 16px icon
+    const [minH, setMinH] = react_1.default.useState(estimatedMinHeight);
+    const recompute = react_1.default.useCallback(() => {
+        const el = hostRef.current;
+        if (!el)
+            return;
+        const width = el.clientWidth; // width the status box will render at
+        // Wait for layout - clientWidth === 0 means container not laid out yet
+        if (width === 0) {
+            // Retry after next frame when layout is ready
+            requestAnimationFrame(recompute);
+            return;
+        }
+        // For each candidate, build a DOM subtree matching the live structure and measure its height
+        const heights = candidates.map((msg) => (0, reservedSpace_1.measureNodeHeightAtWidth)(() => {
+            const outer = document.createElement("div");
+            outer.className = containerClass + " flex items-center space-x-2"; // must match live
+            // icon placeholder
+            const icon = document.createElement("div");
+            icon.style.width = iconSizePx + "px";
+            icon.style.height = iconSizePx + "px";
+            icon.style.flexShrink = "0";
+            // message text
+            const span = document.createElement("span");
+            span.className = "flex-1"; // let text wrap if needed
+            span.textContent = msg;
+            outer.appendChild(icon);
+            outer.appendChild(span);
+            return outer;
+        }, width));
+        const max = Math.max(0, ...heights);
+        setMinH(max);
+    }, [candidates, containerClass, iconSizePx]);
+    react_1.default.useLayoutEffect(() => {
+        recompute();
+        if (hostRef.current) {
+            return (0, reservedSpace_1.observeForRecalc)(hostRef.current, recompute);
+        }
+    }, [recompute]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: hostRef, className: className, style: { minHeight: minH ? `${minH}px` : undefined, transition: "none" }, "data-testid": "status-wrap", children: children }));
+}
+exports.default = ReservedStatusBox;

package/dist/components/ui/BetaBadge.d.ts

@@ -0,0 +1,29 @@
+export interface BetaBadgeProps {
+    /** Text to display (default: 'beta') */
+    text?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Badge variant */
+    variant?: 'subtle' | 'outlined' | 'solid';
+}
+/**
+ * A subtle badge component for indicating pre-release status.
+ *
+ * Controlled by NEXT_PUBLIC_SHOW_BETA_BADGE env var.
+ * When env var is not 'true', renders nothing.
+ *
+ * @example
+ * ```tsx
+ * // In your header, next to logo
+ * <Logo />
+ * <BetaBadge />
+ *
+ * // Custom text
+ * <BetaBadge text="preview" />
+ *
+ * // Different variant
+ * <BetaBadge variant="outlined" text="coming soon" />
+ * ```
+ */
+export declare function BetaBadge({ text, className, variant }: BetaBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export default BetaBadge;

package/dist/components/ui/BetaBadge.js

@@ -0,0 +1,38 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BetaBadge = BetaBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * A subtle badge component for indicating pre-release status.
+ *
+ * Controlled by NEXT_PUBLIC_SHOW_BETA_BADGE env var.
+ * When env var is not 'true', renders nothing.
+ *
+ * @example
+ * ```tsx
+ * // In your header, next to logo
+ * <Logo />
+ * <BetaBadge />
+ *
+ * // Custom text
+ * <BetaBadge text="preview" />
+ *
+ * // Different variant
+ * <BetaBadge variant="outlined" text="coming soon" />
+ * ```
+ */
+function BetaBadge({ text = 'beta', className = '', variant = 'subtle' }) {
+    // Check env var - only render if explicitly enabled
+    if (process.env.NEXT_PUBLIC_SHOW_BETA_BADGE !== 'true') {
+        return null;
+    }
+    const baseStyles = 'inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full lowercase tracking-wide';
+    const variantStyles = {
+        subtle: 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400',
+        outlined: 'border border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400',
+        solid: 'bg-gray-500 text-white dark:bg-gray-600',
+    };
+    return ((0, jsx_runtime_1.jsx)("span", { className: `${baseStyles} ${variantStyles[variant]} ${className}`, children: text }));
+}
+exports.default = BetaBadge;

package/dist/components/ui/Footer.d.ts

@@ -0,0 +1,37 @@
+export interface FooterProps {
+    /** Company or product name (default: 'PayEz') */
+    companyName?: string;
+    /** Start year for copyright range (shows "2024-2025" format if provided) */
+    startYear?: number;
+    /** Additional links to display */
+    links?: Array<{
+        label: string;
+        href: string;
+    }>;
+    /** Additional CSS classes */
+    className?: string;
+    /** Variant style */
+    variant?: 'minimal' | 'standard';
+}
+/**
+ * A themeable footer component with dynamic copyright year.
+ *
+ * @example
+ * ```tsx
+ * // Minimal footer
+ * <Footer />
+ *
+ * // With company name and start year
+ * <Footer companyName="Acme Inc" startYear={2020} />
+ *
+ * // With links
+ * <Footer
+ *   links={[
+ *     { label: 'Privacy', href: '/privacy' },
+ *     { label: 'Terms', href: '/terms' }
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Footer({ companyName, startYear, links, className, variant }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export default Footer;

package/dist/components/ui/Footer.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = Footer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * A themeable footer component with dynamic copyright year.
+ *
+ * @example
+ * ```tsx
+ * // Minimal footer
+ * <Footer />
+ *
+ * // With company name and start year
+ * <Footer companyName="Acme Inc" startYear={2020} />
+ *
+ * // With links
+ * <Footer
+ *   links={[
+ *     { label: 'Privacy', href: '/privacy' },
+ *     { label: 'Terms', href: '/terms' }
+ *   ]}
+ * />
+ * ```
+ */
+function Footer({ companyName = 'PayEz', startYear, links = [], className = '', variant = 'minimal' }) {
+    const currentYear = new Date().getFullYear();
+    const yearDisplay = startYear && startYear < currentYear
+        ? `${startYear}-${currentYear}`
+        : `${currentYear}`;
+    const baseStyles = 'w-full py-4 text-sm';
+    const variantStyles = {
+        minimal: 'text-center text-gray-500 dark:text-gray-400',
+        standard: 'border-t border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400'
+    };
+    if (variant === 'minimal') {
+        return ((0, jsx_runtime_1.jsx)("footer", { className: `${baseStyles} ${variantStyles[variant]} ${className}`, children: (0, jsx_runtime_1.jsxs)("p", { children: ["\u00A9 ", yearDisplay, " ", companyName, ". All rights reserved."] }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("footer", { className: `${baseStyles} ${variantStyles[variant]} ${className}`, children: (0, jsx_runtime_1.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4", children: [(0, jsx_runtime_1.jsxs)("p", { children: ["\u00A9 ", yearDisplay, " ", companyName, ". All rights reserved."] }), links.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { className: "flex gap-4", "aria-label": "Footer links", children: links.map((link, index) => ((0, jsx_runtime_1.jsx)("a", { href: link.href, className: "hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded transition-colors", children: link.label }, `${index}-${link.label}`))) }))] }) }) }));
+}
+exports.default = Footer;

package/dist/config/env.d.ts

@@ -0,0 +1,66 @@
+export declare const ENV_CONFIG: {
+    readonly CLIENT_ID: string | undefined;
+    readonly INTERNAL_URL: string | undefined;
+    readonly IDP_CLIENT_ID: number | undefined;
+    readonly IDP_URL: string | undefined;
+    readonly API_URL: string | undefined;
+    readonly PAYEZ_CORE_BASE_URL: string | undefined;
+    readonly SUPPORT_EMAIL: "support@PayEz.net";
+    readonly LOG_LEVEL: string;
+    readonly LOG_CONSOLE: boolean;
+    readonly GRAYLOG_HOST: string;
+    readonly GRAYLOG_PORT: number;
+    readonly REDIS_KEY_PREFIX: string;
+    readonly LOGOUT_REDIRECT_URL: string;
+    readonly UNAUTHENTICATED_REDIRECT_URL: string;
+};
+export declare const API_ENDPOINTS: {
+    readonly account: {
+        readonly profile: "/api/account/profile";
+        readonly updateProfile: "/api/account/profile";
+        readonly maskedInfo: "/api/account/masked-info";
+        readonly sendResetCode: "/api/account/send-reset-code";
+        readonly verifyResetCode: "/api/account/verify-reset-code";
+        readonly resetPassword: "/api/account/reset-password";
+        readonly changePassword: "/api/account/change-password";
+        readonly validatePassword: "/api/account/validate-password";
+    };
+    readonly externalAuth: {
+        readonly login: "/api/ExternalAuth/login";
+        readonly refresh: "/api/ExternalAuth/refresh";
+        readonly validate: "/api/ExternalAuth/validate";
+        readonly verifyCode: "/api/ExternalAuth/verify-code";
+        readonly revoke: "/api/ExternalAuth/revoke";
+        readonly roles: (username: string) => string;
+        readonly jwks: "/api/ExternalAuth/.well-known/jwks.json";
+        readonly openidConfig: "/api/ExternalAuth/.well-known/openid-configuration";
+        readonly passwordless: {
+            readonly sms: {
+                readonly start: "/api/ExternalAuth/passwordless/sms/start";
+                readonly login: "/api/ExternalAuth/passwordless/sms/login";
+                readonly resend: "/api/ExternalAuth/passwordless/sms/resend";
+            };
+            readonly email: {
+                readonly start: "/api/ExternalAuth/passwordless/email/start";
+                readonly login: "/api/ExternalAuth/passwordless/email/login";
+                readonly resend: "/api/ExternalAuth/passwordless/email/resend";
+            };
+        };
+        readonly lead: {
+            readonly registration: "/api/ExternalAuth/lead/registration";
+            readonly verify: "/api/ExternalAuth/lead/verify";
+        };
+    };
+    readonly progressiveAuth: {
+        readonly step1: "/api/ProgressiveAuth/step1";
+        readonly step2: "/api/ProgressiveAuth/step2";
+        readonly step3: "/api/ProgressiveAuth/step3";
+        readonly step4: "/api/ProgressiveAuth/step4";
+        readonly step5: "/api/ProgressiveAuth/step5";
+        readonly verifyEmail: "/api/ProgressiveAuth/verify-email";
+    };
+    readonly azureAuth: {
+        readonly login: "/auth/azure/login";
+        readonly logout: "/auth/azure/logout";
+    };
+};