nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/Captcha/components/Captcha.js

@@ -0,0 +1,311 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { captchaTheme } from "../theme";
+gsap.registerPlugin(useGSAP);
+const RefreshIcon = ({ className, iconRef })=>/*#__PURE__*/ _jsxs("svg", {
+        ref: iconRef,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: className,
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M3 3v5h5"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M16 16h5v5"
+            })
+        ]
+    });
+export function Captcha({ generateAction, config, onChallengeLoad, onAnswerChange, disabled = false, autoGenerate = true, className, label = "Security Check", errorMessage }) {
+    const theme = captchaTheme;
+    const containerRef = useRef(null);
+    const challengeRef = useRef(null);
+    const iconRef = useRef(null);
+    const [challenge, setChallengeData] = useState(null);
+    const [answer, setAnswer] = useState("");
+    const [timeRemaining, setTimeRemaining] = useState(null);
+    const [isExpired, setIsExpired] = useState(false);
+    const [rateLimitError, setRateLimitError] = useState(null);
+    const [puzzleOrder, setPuzzleOrder] = useState([]);
+    const isLoading = generateAction.state.isPending;
+    const { contextSafe } = useGSAP({
+        scope: containerRef
+    });
+    const generateChallenge = useEffectEvent(()=>{
+        setAnswer("");
+        setIsExpired(false);
+        setRateLimitError(null);
+        setPuzzleOrder([]);
+        generateAction.start({
+            payload: {
+                type: config?.type,
+                difficulty: config?.difficulty
+            },
+            onAfterHandle: (response)=>{
+                const data = response.data;
+                if (!data || data.rateLimited) {
+                    setRateLimitError(response.message ?? "Too many requests. Please try again later.");
+                    setChallengeData(null);
+                    return;
+                }
+                setChallengeData(data);
+                onChallengeLoad?.(response);
+                if (challengeRef.current) {
+                    gsap.fromTo(challengeRef.current, {
+                        opacity: 0,
+                        scale: 0.95
+                    }, {
+                        opacity: 1,
+                        scale: 1,
+                        duration: 0.3,
+                        ease: "power2.out"
+                    });
+                }
+            },
+            onErrorHandle: ()=>{
+                setChallengeData(null);
+            }
+        });
+    });
+    const handleRefresh = contextSafe(()=>{
+        if (iconRef.current) {
+            gsap.to(iconRef.current, {
+                rotation: "+=360",
+                duration: 0.5,
+                ease: "power2.inOut"
+            });
+        }
+        generateChallenge();
+    });
+    const handleAnswerChange = (value)=>{
+        setAnswer(value);
+        if (challenge) {
+            onAnswerChange?.(challenge.challengeId, value);
+        }
+    };
+    const handlePuzzlePieceClick = (pieceId)=>{
+        if (disabled || isLoading || isExpired) return;
+        const newOrder = puzzleOrder.includes(pieceId) ? puzzleOrder.filter((id)=>id !== pieceId) : [
+            ...puzzleOrder,
+            pieceId
+        ];
+        setPuzzleOrder(newOrder);
+        const orderString = newOrder.join(",");
+        setAnswer(orderString);
+        if (challenge) {
+            onAnswerChange?.(challenge.challengeId, orderString);
+        }
+    };
+    const handleClearPuzzleOrder = ()=>{
+        setPuzzleOrder([]);
+        setAnswer("");
+        if (challenge) {
+            onAnswerChange?.(challenge.challengeId, "");
+        }
+    };
+    useEffect(()=>{
+        if (autoGenerate && config?.enabled !== false) {
+            generateChallenge();
+        }
+    }, [
+        autoGenerate,
+        config?.enabled
+    ]);
+    useEffect(()=>{
+        if (!challenge?.expiresAt) {
+            setTimeRemaining(null);
+            return;
+        }
+        const updateTimer = ()=>{
+            const now = Date.now();
+            const remaining = Math.max(0, Math.floor((challenge.expiresAt - now) / 1000));
+            setTimeRemaining(remaining);
+            if (remaining <= 0) {
+                setIsExpired(true);
+            }
+        };
+        updateTimer();
+        const interval = setInterval(updateTimer, 1000);
+        return ()=>clearInterval(interval);
+    }, [
+        challenge?.expiresAt
+    ]);
+    const formatTime = (seconds)=>{
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}:${secs.toString().padStart(2, "0")}`;
+    };
+    const getPlaceholder = ()=>{
+        if (!challenge) return "Enter answer";
+        switch(challenge.type){
+            case "math":
+                return "Enter the result";
+            case "image":
+            case "text":
+                return "Enter the text shown";
+            case "puzzle":
+                return "Enter piece order (e.g., 0,1,2,3)";
+            default:
+                return "Enter answer";
+        }
+    };
+    if (config?.enabled === false) {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: theme.container.wrapper,
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: theme.label.base,
+                    children: label
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    ref: challengeRef,
+                    className: theme.challenge.wrapper,
+                    children: isLoading ? /*#__PURE__*/ _jsx("div", {
+                        className: theme.loading.wrapper,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: theme.loading.spinner
+                        })
+                    }) : challenge ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            challenge.type === "math" && /*#__PURE__*/ _jsx("p", {
+                                className: theme.challenge.math.question,
+                                children: challenge.question
+                            }),
+                            challenge.type === "text" && /*#__PURE__*/ _jsx("p", {
+                                className: theme.challenge.text.question,
+                                children: challenge.question
+                            }),
+                            challenge.type === "image" && challenge.imageData && /*#__PURE__*/ _jsx("div", {
+                                className: theme.challenge.image.wrapper,
+                                children: /*#__PURE__*/ _jsx("img", {
+                                    src: challenge.imageData,
+                                    alt: "Captcha",
+                                    className: theme.challenge.image.img,
+                                    draggable: false
+                                })
+                            }),
+                            challenge.type === "puzzle" && challenge.puzzleData && /*#__PURE__*/ _jsxs("div", {
+                                className: theme.challenge.puzzle.wrapper,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("p", {
+                                        className: theme.challenge.puzzle.instruction,
+                                        children: [
+                                            "Click the pieces in the correct order (0 to",
+                                            " ",
+                                            challenge.puzzleData.pieces.length - 1,
+                                            ")"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: theme.challenge.puzzle.grid,
+                                        children: challenge.puzzleData.pieces.map((piece)=>/*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>handlePuzzlePieceClick(piece.id),
+                                                disabled: disabled || isLoading || isExpired,
+                                                className: cn(theme.challenge.puzzle.piece, puzzleOrder.includes(piece.id) && theme.challenge.puzzle.pieceOrdered),
+                                                children: piece.id
+                                            }, piece.id))
+                                    }),
+                                    puzzleOrder.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.challenge.puzzle.orderDisplay,
+                                        children: [
+                                            puzzleOrder.map((id, index)=>/*#__PURE__*/ _jsx("span", {
+                                                    className: theme.challenge.puzzle.orderBadge,
+                                                    children: id
+                                                }, `order-${id}-${index}`)),
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: handleClearPuzzleOrder,
+                                                className: theme.challenge.puzzle.clearButton,
+                                                children: "Clear"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        className: theme.loading.wrapper,
+                        children: /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm text-zinc-500",
+                            children: "Click refresh to load captcha"
+                        })
+                    })
+                }),
+                challenge?.type !== "puzzle" && /*#__PURE__*/ _jsxs("div", {
+                    className: theme.input.wrapper,
+                    children: [
+                        /*#__PURE__*/ _jsx("label", {
+                            htmlFor: "captcha-answer",
+                            className: "sr-only",
+                            children: label
+                        }),
+                        /*#__PURE__*/ _jsx("input", {
+                            id: "captcha-answer",
+                            type: "text",
+                            value: answer,
+                            onChange: (e)=>handleAnswerChange(e.target.value),
+                            placeholder: getPlaceholder(),
+                            disabled: disabled || isLoading || isExpired,
+                            className: cn(theme.input.base, (errorMessage || isExpired) && theme.input.error),
+                            autoComplete: "off"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: theme.actions.wrapper,
+                    children: [
+                        /*#__PURE__*/ _jsxs("button", {
+                            type: "button",
+                            onClick: handleRefresh,
+                            disabled: disabled || isLoading,
+                            className: theme.actions.refresh,
+                            children: [
+                                /*#__PURE__*/ _jsx(RefreshIcon, {
+                                    iconRef: iconRef
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    children: "New challenge"
+                                })
+                            ]
+                        }),
+                        timeRemaining !== null && /*#__PURE__*/ _jsx("span", {
+                            className: isExpired ? theme.actions.timerExpired : theme.actions.timer,
+                            children: isExpired ? "Expired" : `Expires in ${formatTime(timeRemaining)}`
+                        })
+                    ]
+                }),
+                (errorMessage || isExpired || rateLimitError) && /*#__PURE__*/ _jsx("div", {
+                    className: theme.error.container,
+                    children: /*#__PURE__*/ _jsx("p", {
+                        className: theme.error.text,
+                        children: rateLimitError ? rateLimitError : isExpired ? "Captcha expired. Please refresh." : errorMessage
+                    })
+                })
+            ]
+        })
+    });
+}

package/dist/fe/components/Captcha/index.js

@@ -0,0 +1,2 @@
+export { Captcha } from "./components/Captcha";
+export { captchaTheme } from "./theme";

package/dist/fe/components/Captcha/theme.js

@@ -0,0 +1,52 @@
+export const captchaTheme = {
+    container: {
+        base: "w-full",
+        wrapper: "flex flex-col gap-3"
+    },
+    label: {
+        base: "text-sm font-medium text-zinc-700 dark:text-zinc-300"
+    },
+    challenge: {
+        wrapper: "relative rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4",
+        math: {
+            question: "text-2xl font-bold text-center text-zinc-900 dark:text-zinc-100 font-mono tracking-wide"
+        },
+        image: {
+            wrapper: "flex justify-center",
+            img: "max-w-full h-auto rounded select-none pointer-events-none"
+        },
+        text: {
+            question: "text-2xl font-bold text-center text-zinc-900 dark:text-zinc-100 font-mono tracking-widest select-none"
+        },
+        puzzle: {
+            wrapper: "flex flex-col gap-3",
+            instruction: "text-sm text-center text-zinc-600 dark:text-zinc-400",
+            grid: "flex flex-wrap justify-center gap-2",
+            piece: "w-12 h-12 flex items-center justify-center rounded-lg border-2 border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700 text-lg font-bold text-zinc-900 dark:text-zinc-100 cursor-pointer hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-all duration-200 select-none",
+            pieceSelected: "border-blue-500 bg-blue-100 dark:bg-blue-900/50 ring-2 ring-blue-500",
+            pieceOrdered: "border-green-500 bg-green-50 dark:bg-green-900/30",
+            orderDisplay: "flex justify-center gap-1 mt-2",
+            orderBadge: "w-8 h-8 flex items-center justify-center rounded-md bg-blue-500 text-white text-sm font-medium",
+            clearButton: "text-xs text-red-500 hover:text-red-600 dark:hover:text-red-400 cursor-pointer"
+        }
+    },
+    input: {
+        wrapper: "mt-3",
+        base: "w-full px-4 py-2.5 rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200",
+        error: "border-red-500 focus:ring-red-500"
+    },
+    actions: {
+        wrapper: "flex items-center justify-between mt-2",
+        refresh: "flex items-center gap-1.5 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed",
+        timer: "text-xs text-zinc-500 dark:text-zinc-400",
+        timerExpired: "text-xs text-red-500 dark:text-red-400"
+    },
+    error: {
+        container: "mt-2 p-2 rounded-md bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800",
+        text: "text-sm text-red-600 dark:text-red-400"
+    },
+    loading: {
+        wrapper: "flex items-center justify-center py-6",
+        spinner: "w-6 h-6 border-2 border-zinc-300 dark:border-zinc-600 border-t-blue-500 rounded-full animate-spin"
+    }
+};

package/dist/fe/components/Captcha/types.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/ChangePasswordPage/components/ChangePasswordForm.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { useChangePasswordStore } from "../store";
+import { changePasswordPageTheme } from "../theme";
+gsap.registerPlugin(useGSAP);
+function ArrowLeftIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        className: cn("w-4 h-4", className),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+        })
+    });
+}
+function CheckCircleIcon({ className }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        className: cn("w-8 h-8 text-green-600 dark:text-green-400", className),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M5 13l4 4L19 7"
+        })
+    });
+}
+export function ChangePasswordForm({ changePasswordAction, onSuccess, onCancel, cancelHref }) {
+    const theme = changePasswordPageTheme;
+    const formRef = useRef(null);
+    const successRef = useRef(null);
+    const store = useChangePasswordStore();
+    const { contextSafe } = useGSAP({
+        scope: formRef
+    });
+    const isLoading = changePasswordAction.state.isPending;
+    useGSAP(()=>{
+        if (store.step === "success" && successRef.current) {
+            gsap.fromTo(successRef.current, {
+                opacity: 0,
+                scale: 0.9
+            }, {
+                opacity: 1,
+                scale: 1,
+                duration: 0.4,
+                ease: "back.out(1.7)"
+            });
+        }
+    }, {
+        dependencies: [
+            store.step
+        ]
+    });
+    const shakeForm = contextSafe(()=>{
+        if (!formRef.current) return;
+        gsap.fromTo(formRef.current, {
+            x: -10
+        }, {
+            x: 10,
+            duration: 0.08,
+            repeat: 5,
+            yoyo: true,
+            ease: "power2.inOut",
+            onComplete: ()=>{
+                gsap.set(formRef.current, {
+                    x: 0
+                });
+            }
+        });
+    });
+    const handleSubmit = contextSafe((e)=>{
+        e.preventDefault();
+        if (store.newPassword !== store.confirmPassword) {
+            store.setError("New passwords do not match");
+            shakeForm();
+            return;
+        }
+        if (store.newPassword.length < 8) {
+            store.setError("Password must be at least 8 characters");
+            shakeForm();
+            return;
+        }
+        store.setError(null);
+        changePasswordAction.start({
+            payload: {
+                currentPassword: store.currentPassword,
+                newPassword: store.newPassword,
+                confirmPassword: store.confirmPassword
+            },
+            onAfterHandle: ()=>{
+                store.setStep("success");
+                onSuccess?.();
+            },
+            onErrorHandle: (err)=>{
+                const errorMessage = err instanceof Error ? err.message : "Failed to change password. Please try again.";
+                store.setError(errorMessage);
+                shakeForm();
+            }
+        });
+    });
+    const handleCancelClick = ()=>{
+        if (onCancel) {
+            onCancel();
+        } else if (cancelHref) {
+            window.location.href = cancelHref;
+        }
+    };
+    if (store.step === "success") {
+        return /*#__PURE__*/ _jsxs("div", {
+            ref: successRef,
+            className: theme.success.container,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: theme.success.iconWrapper,
+                    children: /*#__PURE__*/ _jsx(CheckCircleIcon, {})
+                }),
+                /*#__PURE__*/ _jsx("h2", {
+                    className: theme.success.title,
+                    children: "Password Changed!"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: theme.success.message,
+                    children: "Your password has been successfully updated. You can now use your new password to log in."
+                }),
+                (cancelHref || onCancel) && /*#__PURE__*/ _jsx("div", {
+                    className: theme.links.container,
+                    children: /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: handleCancelClick,
+                        className: theme.links.cancel,
+                        children: [
+                            /*#__PURE__*/ _jsx(ArrowLeftIcon, {}),
+                            "Go back"
+                        ]
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("form", {
+        ref: formRef,
+        onSubmit: handleSubmit,
+        className: cn(theme.form.container, theme.form.spacing),
+        noValidate: true,
+        children: [
+            store.error && /*#__PURE__*/ _jsx("div", {
+                className: theme.error.container,
+                children: /*#__PURE__*/ _jsx("p", {
+                    className: theme.error.text,
+                    children: store.error
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.input.wrapper,
+                children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                    label: "Current Password",
+                    type: "password",
+                    value: store.currentPassword,
+                    onChange: (value)=>store.setCurrentPassword(value),
+                    placeholder: "Enter your current password",
+                    autoComplete: "current-password",
+                    enableValidation: false,
+                    fullWidth: true,
+                    showTypeIcon: false,
+                    wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                    inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.input.wrapper,
+                children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                    label: "New Password",
+                    type: "password",
+                    value: store.newPassword,
+                    onChange: (value)=>store.setNewPassword(value),
+                    placeholder: "Enter your new password",
+                    autoComplete: "new-password",
+                    isNewPassword: true,
+                    showPasswordStrength: true,
+                    fullWidth: true,
+                    showTypeIcon: false,
+                    wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                    inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.input.wrapper,
+                children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                    label: "Confirm New Password",
+                    type: "password",
+                    value: store.confirmPassword,
+                    onChange: (value)=>store.setConfirmPassword(value),
+                    placeholder: "Confirm your new password",
+                    autoComplete: "new-password",
+                    enableValidation: false,
+                    fullWidth: true,
+                    showTypeIcon: false,
+                    wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                    inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.button.wrapper,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    type: "submit",
+                    variant: "primary",
+                    size: "lg",
+                    fullWidth: true,
+                    loading: changePasswordAction.state.isPending,
+                    children: "Change Password"
+                })
+            }),
+            (cancelHref || onCancel) && /*#__PURE__*/ _jsx("div", {
+                className: theme.links.container,
+                children: /*#__PURE__*/ _jsxs("button", {
+                    type: "button",
+                    onClick: handleCancelClick,
+                    className: theme.links.cancel,
+                    disabled: isLoading,
+                    children: [
+                        /*#__PURE__*/ _jsx(ArrowLeftIcon, {}),
+                        "Cancel"
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/ChangePasswordPage/components/ChangePasswordHeader.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { changePasswordPageTheme } from "../theme";
+export function ChangePasswordHeader({ logo, title, subtitle }) {
+    const theme = changePasswordPageTheme;
+    return /*#__PURE__*/ _jsxs("header", {
+        className: theme.header.container,
+        children: [
+            logo ? /*#__PURE__*/ _jsx("div", {
+                className: theme.header.logoWrapper,
+                children: logo
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: theme.header.iconWrapper,
+                children: /*#__PURE__*/ _jsx("svg", {
+                    className: "w-8 h-8 text-blue-600 dark:text-blue-400",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    "aria-hidden": "true",
+                    children: /*#__PURE__*/ _jsx("path", {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx("h1", {
+                className: cn(theme.header.title),
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: cn(theme.header.subtitle),
+                children: subtitle
+            })
+        ]
+    });
+}