nucleus-core-ts 0.8.7 → 0.8.9

package/dist/fe/components/RangePicker/components/RangeThumb.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { forwardRef, useRef } from "react";
+import { rangePickerTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export const RangeThumb = /*#__PURE__*/ forwardRef(({ position, value, min, max, size, variant, disabled, isDragging, onDragStart, onDragEnd, ariaLabel, ariaValueText }, ref)=>{
+    const theme = rangePickerTheme;
+    const thumbRef = useRef(null);
+    const percent = (value - min) / (max - min) * 100;
+    useGSAP(()=>{
+        if (!thumbRef.current) return;
+        if (isDragging) {
+            gsap.to(thumbRef.current, {
+                scale: 1.2,
+                duration: 0.15,
+                ease: "power2.out"
+            });
+        } else {
+            gsap.to(thumbRef.current, {
+                scale: 1,
+                duration: 0.2,
+                ease: "elastic.out(1, 0.5)"
+            });
+        }
+    }, [
+        isDragging
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: (node)=>{
+            thumbRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        },
+        role: "slider",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": ariaLabel || `${position} value`,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-valuetext": ariaValueText || String(value),
+        "aria-disabled": disabled,
+        "data-position": position,
+        className: cn(theme.thumb.base, theme.thumb.size[size], theme.thumb.variant[variant], theme.thumb.shadow, !disabled && theme.thumb.states.hover, isDragging && theme.thumb.states.active, disabled && theme.thumb.states.disabled),
+        style: {
+            left: `${percent}%`
+        },
+        onMouseDown: (e)=>{
+            e.preventDefault();
+            if (!disabled) onDragStart();
+        },
+        onTouchStart: (e)=>{
+            e.preventDefault();
+            if (!disabled) onDragStart();
+        },
+        onMouseUp: onDragEnd,
+        onTouchEnd: onDragEnd,
+        onKeyDown: ()=>{
+            if (disabled) return;
+        }
+    });
+});
+RangeThumb.displayName = "RangeThumb";

package/dist/fe/components/RangePicker/components/RangeTooltip.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { rangePickerTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function RangeTooltip({ value, visible, size, formatValue }) {
+    const theme = rangePickerTheme;
+    const tooltipRef = useRef(null);
+    useGSAP(()=>{
+        if (!tooltipRef.current) return;
+        if (visible) {
+            gsap.to(tooltipRef.current, {
+                opacity: 1,
+                y: 0,
+                scale: 1,
+                duration: 0.2,
+                ease: "power2.out"
+            });
+        } else {
+            gsap.to(tooltipRef.current, {
+                opacity: 0,
+                y: 4,
+                scale: 0.95,
+                duration: 0.15,
+                ease: "power2.in"
+            });
+        }
+    }, [
+        visible
+    ]);
+    const displayValue = formatValue ? formatValue(value) : String(value);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: tooltipRef,
+        className: cn(theme.tooltip.base, theme.tooltip.size[size], theme.tooltip.arrow),
+        style: {
+            opacity: 0,
+            transform: "translateX(-50%) translateY(4px) scale(0.95)"
+        },
+        "aria-hidden": "true",
+        children: displayValue
+    });
+}

package/dist/fe/components/RangePicker/components/RangeTrack.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { rangePickerTheme } from "../theme";
+import { cn } from "../utils/cn";
+export const RangeTrack = /*#__PURE__*/ forwardRef(({ min, max, value, size, variant, orientation, disabled }, ref)=>{
+    const theme = rangePickerTheme;
+    const range = max - min;
+    const minPercent = (value.min - min) / range * 100;
+    const maxPercent = (value.max - min) / range * 100;
+    const isHorizontal = orientation === "horizontal";
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: ref,
+        className: cn(theme.track.container.base, theme.track.container.size[size], theme.track.container.orientation[orientation]),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: cn(theme.track.background.base, theme.track.background.variant[variant], disabled && theme.track.background.disabled)
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: cn(theme.track.range.base, theme.track.range.variant[variant], disabled && theme.track.range.disabled, isHorizontal ? "top-0 bottom-0" : "left-0 right-0"),
+                style: isHorizontal ? {
+                    left: `${minPercent}%`,
+                    right: `${100 - maxPercent}%`
+                } : {
+                    bottom: `${minPercent}%`,
+                    top: `${100 - maxPercent}%`
+                }
+            })
+        ]
+    });
+});
+RangeTrack.displayName = "RangeTrack";

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

@@ -0,0 +1,5 @@
+export { RangePicker } from "./components/RangePicker";
+export { RangeThumb } from "./components/RangeThumb";
+export { RangeTooltip } from "./components/RangeTooltip";
+export { RangeTrack } from "./components/RangeTrack";
+export { rangePickerTheme } from "./theme";

package/dist/fe/components/RangePicker/theme/index.js

@@ -0,0 +1,88 @@
+export const rangePickerTheme = {
+    container: {
+        base: "relative w-full select-none",
+        orientation: {
+            horizontal: "py-2",
+            vertical: "px-2 h-32"
+        },
+        disabled: "opacity-40 pointer-events-none"
+    },
+    label: {
+        base: "block font-medium text-zinc-700 dark:text-zinc-300 mb-3",
+        size: {
+            sm: "text-xs",
+            md: "text-sm",
+            lg: "text-base"
+        }
+    },
+    track: {
+        container: {
+            base: "relative cursor-pointer",
+            size: {
+                sm: "h-0.5",
+                md: "h-1",
+                lg: "h-1.5"
+            },
+            orientation: {
+                horizontal: "w-full",
+                vertical: "h-full w-1"
+            }
+        },
+        background: {
+            base: "absolute inset-0 rounded-full",
+            variant: {
+                default: "bg-zinc-200 dark:bg-zinc-700",
+                filled: "bg-zinc-300 dark:bg-zinc-600",
+                minimal: "bg-zinc-100 dark:bg-zinc-800"
+            },
+            disabled: "bg-zinc-100 dark:bg-zinc-800"
+        },
+        range: {
+            base: "absolute rounded-full",
+            variant: {
+                default: "bg-zinc-900 dark:bg-white",
+                filled: "bg-zinc-800 dark:bg-zinc-100",
+                minimal: "bg-zinc-600 dark:bg-zinc-400"
+            },
+            disabled: "bg-zinc-400 dark:bg-zinc-500"
+        }
+    },
+    thumb: {
+        base: "absolute rounded-full cursor-grab active:cursor-grabbing touch-none z-10",
+        size: {
+            sm: "w-2.5 h-2.5",
+            md: "w-3.5 h-3.5",
+            lg: "w-4 h-4"
+        },
+        variant: {
+            default: "bg-zinc-900 dark:bg-white",
+            filled: "bg-zinc-800 dark:bg-zinc-100",
+            minimal: "bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-600"
+        },
+        states: {
+            hover: "",
+            active: "",
+            focus: "outline-none ring-2 ring-zinc-400/50 dark:ring-zinc-500/50",
+            disabled: "cursor-not-allowed"
+        },
+        shadow: "shadow-sm"
+    },
+    tooltip: {
+        base: "absolute pointer-events-none bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-medium rounded whitespace-nowrap left-1/2 -translate-x-1/2",
+        size: {
+            sm: "px-1.5 py-0.5 text-[10px] -top-6",
+            md: "px-2 py-0.5 text-xs -top-7",
+            lg: "px-2 py-1 text-xs -top-8"
+        },
+        arrow: "after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-zinc-900 dark:after:border-t-white"
+    },
+    ticks: {
+        container: "absolute inset-x-0 flex justify-between pointer-events-none mt-2",
+        tick: "w-px h-1 bg-zinc-300 dark:bg-zinc-600",
+        label: "text-[10px] text-zinc-400 dark:text-zinc-500 mt-0.5"
+    },
+    labels: {
+        container: "flex justify-between mt-1.5",
+        label: "text-[10px] text-zinc-400 dark:text-zinc-500"
+    }
+};

package/dist/fe/components/RangePicker/types/index.js

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

package/dist/fe/components/RangePicker/utils/cn.js

@@ -0,0 +1,3 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export const cn = (...inputs)=>twMerge(clsx(inputs));

package/dist/fe/components/RegisterPage/components/PasswordStrengthIndicator.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { registerPageTheme } from "../theme";
+const CheckIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        className: "w-3 h-3",
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            fillRule: "evenodd",
+            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+            clipRule: "evenodd"
+        })
+    });
+const CrossIcon = ()=>/*#__PURE__*/ _jsx("svg", {
+        className: "w-3 h-3",
+        fill: "currentColor",
+        viewBox: "0 0 20 20",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            fillRule: "evenodd",
+            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+            clipRule: "evenodd"
+        })
+    });
+export function PasswordStrengthIndicator({ strength, showRequirements = true, passwordMinLength = 8, requireUppercase = true, requireLowercase = true, requireNumber = true, requireSpecialChar = true }) {
+    const theme = registerPageTheme.passwordStrength;
+    const getStrengthColor = (index)=>{
+        if (index >= strength.score) return theme.bar.inactive;
+        if (strength.score === 1) return theme.bar.active.weak;
+        if (strength.score === 2) return theme.bar.active.fair;
+        if (strength.score === 3) return theme.bar.active.good;
+        if (strength.score === 4) return theme.bar.active.strong;
+        return theme.bar.active.veryStrong;
+    };
+    const requirements = [
+        {
+            key: "minLength",
+            label: `At least ${passwordMinLength} characters`,
+            met: strength.hasMinLength,
+            show: true
+        },
+        {
+            key: "uppercase",
+            label: "One uppercase letter",
+            met: strength.hasUppercase,
+            show: requireUppercase
+        },
+        {
+            key: "lowercase",
+            label: "One lowercase letter",
+            met: strength.hasLowercase,
+            show: requireLowercase
+        },
+        {
+            key: "number",
+            label: "One number",
+            met: strength.hasNumber,
+            show: requireNumber
+        },
+        {
+            key: "special",
+            label: "One special character",
+            met: strength.hasSpecialChar,
+            show: requireSpecialChar
+        }
+    ].filter((req)=>req.show);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.container,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.bar.wrapper,
+                role: "progressbar",
+                "aria-valuenow": strength.score,
+                "aria-valuemin": 0,
+                "aria-valuemax": 5,
+                "aria-label": "Password strength",
+                children: [
+                    0,
+                    1,
+                    2,
+                    3,
+                    4
+                ].map((index)=>/*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.bar.segment, getStrengthColor(index))
+                    }, index))
+            }),
+            showRequirements && /*#__PURE__*/ _jsx("ul", {
+                className: theme.requirements.container,
+                "aria-label": "Password requirements",
+                children: requirements.map((req)=>/*#__PURE__*/ _jsxs("li", {
+                        className: cn(theme.requirements.item, req.met ? theme.requirements.met : theme.requirements.unmet),
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: req.met ? theme.requirements.icon.met : theme.requirements.icon.unmet,
+                                children: req.met ? /*#__PURE__*/ _jsx(CheckIcon, {}) : /*#__PURE__*/ _jsx(CrossIcon, {})
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: req.label
+                            })
+                        ]
+                    }, req.key))
+            })
+        ]
+    });
+}

package/dist/fe/components/RegisterPage/components/RegisterForm.js

@@ -0,0 +1,322 @@
+"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 { useRef } from "react";
+import { Button } from "../../Button";
+import { Checkbox } from "../../Checkbox";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { useRegisterStore } from "../store";
+import { registerPageTheme } from "../theme";
+import { PasswordStrengthIndicator } from "./PasswordStrengthIndicator";
+gsap.registerPlugin(useGSAP);
+export function RegisterForm({ registerAction, showFirstName = false, showLastName = false, showTerms = true, showSignIn = true, termsHref, privacyHref, signInHref, onTermsClick, onPrivacyClick, onSignIn, onSuccess, passwordMinLength = 8, requireUppercase = true, requireLowercase = true, requireNumber = true, requireSpecialChar = false, createProfileOnRegister = false }) {
+    const theme = registerPageTheme;
+    const formRef = useRef(null);
+    const store = useRegisterStore();
+    const { contextSafe } = useGSAP({
+        scope: formRef
+    });
+    const isLoading = registerAction.state.isPending;
+    const validateForm = ()=>{
+        if (!store.email) {
+            return "Email is required";
+        }
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(store.email)) {
+            return "Please enter a valid email address";
+        }
+        if (!store.password) {
+            return "Password is required";
+        }
+        if (store.password.length < passwordMinLength) {
+            return `Password must be at least ${passwordMinLength} characters`;
+        }
+        if (requireUppercase && !store.passwordStrength.hasUppercase) {
+            return "Password must contain at least one uppercase letter";
+        }
+        if (requireLowercase && !store.passwordStrength.hasLowercase) {
+            return "Password must contain at least one lowercase letter";
+        }
+        if (requireNumber && !store.passwordStrength.hasNumber) {
+            return "Password must contain at least one number";
+        }
+        if (requireSpecialChar && !store.passwordStrength.hasSpecialChar) {
+            return "Password must contain at least one special character";
+        }
+        if (!store.confirmPassword) {
+            return "Please confirm your password";
+        }
+        if (store.password !== store.confirmPassword) {
+            return "Passwords do not match";
+        }
+        if (showTerms && !store.acceptTerms) {
+            return "You must accept the terms and conditions";
+        }
+        return null;
+    };
+    const handleSubmit = contextSafe((e)=>{
+        e.preventDefault();
+        const validationError = validateForm();
+        if (validationError) {
+            store.setError(validationError);
+            shakeForm();
+            return;
+        }
+        store.setError(null);
+        registerAction.start({
+            payload: {
+                email: store.email,
+                password: store.password,
+                ...showFirstName && store.firstName ? {
+                    firstName: store.firstName
+                } : {},
+                ...showLastName && store.lastName ? {
+                    lastName: store.lastName
+                } : {},
+                ...createProfileOnRegister ? {
+                    createProfile: true
+                } : {}
+            },
+            onAfterHandle: ()=>{
+                store.reset();
+                onSuccess?.();
+            },
+            onErrorHandle: (err)=>{
+                let errorMessage = "Registration failed. Please try again.";
+                if (err && typeof err === "object") {
+                    if ("message" in err && typeof err.message === "string") {
+                        // Try to parse JSON message from backend
+                        try {
+                            const parsed = JSON.parse(err.message);
+                            errorMessage = parsed.message || parsed.error || err.message;
+                        } catch  {
+                            errorMessage = err.message;
+                        }
+                    } else if ("error" in err && typeof err.error === "string") {
+                        errorMessage = err.error;
+                    }
+                } else if (err instanceof Error) {
+                    errorMessage = err.message;
+                }
+                store.setError(errorMessage);
+                shakeForm();
+            }
+        });
+    });
+    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 handleTermsClick = ()=>{
+        if (onTermsClick) {
+            onTermsClick();
+        } else if (termsHref) {
+            window.location.href = termsHref;
+        }
+    };
+    const handlePrivacyClick = ()=>{
+        if (onPrivacyClick) {
+            onPrivacyClick();
+        } else if (privacyHref) {
+            window.location.href = privacyHref;
+        }
+    };
+    const handleSignInClick = ()=>{
+        if (onSignIn) {
+            onSignIn();
+        } else if (signInHref) {
+            window.location.href = signInHref;
+        }
+    };
+    return /*#__PURE__*/ _jsxs("form", {
+        ref: formRef,
+        onSubmit: handleSubmit,
+        className: theme.form.container,
+        noValidate: true,
+        children: [
+            store.error && /*#__PURE__*/ _jsx("div", {
+                className: theme.error.container,
+                role: "alert",
+                children: /*#__PURE__*/ _jsx("p", {
+                    className: theme.error.text,
+                    children: store.error
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.form.spacing,
+                children: [
+                    (showFirstName || showLastName) && /*#__PURE__*/ _jsxs("div", {
+                        className: theme.form.row,
+                        children: [
+                            showFirstName && /*#__PURE__*/ _jsx("div", {
+                                className: theme.input.wrapper,
+                                children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                                    type: "text",
+                                    label: "First Name",
+                                    placeholder: "John",
+                                    value: store.firstName,
+                                    onChange: store.setFirstName,
+                                    disabled: isLoading,
+                                    enableValidation: false,
+                                    fullWidth: true,
+                                    wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                                    inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                                })
+                            }),
+                            showLastName && /*#__PURE__*/ _jsx("div", {
+                                className: theme.input.wrapper,
+                                children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                                    type: "text",
+                                    label: "Last Name",
+                                    placeholder: "Doe",
+                                    value: store.lastName,
+                                    onChange: store.setLastName,
+                                    disabled: isLoading,
+                                    enableValidation: false,
+                                    fullWidth: true,
+                                    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, {
+                            type: "email",
+                            label: "Email",
+                            placeholder: "you@example.com",
+                            value: store.email,
+                            onChange: store.setEmail,
+                            disabled: isLoading,
+                            enableValidation: false,
+                            fullWidth: true,
+                            wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                            inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: theme.input.wrapper,
+                        children: [
+                            /*#__PURE__*/ _jsx(NucleusTextInput, {
+                                type: "password",
+                                label: "Password",
+                                placeholder: "••••••••",
+                                value: store.password,
+                                onChange: (value)=>store.setPassword(value, passwordMinLength),
+                                disabled: isLoading,
+                                enableValidation: false,
+                                fullWidth: true,
+                                wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                                inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                            }),
+                            store.password && /*#__PURE__*/ _jsx(PasswordStrengthIndicator, {
+                                strength: store.passwordStrength,
+                                passwordMinLength: passwordMinLength,
+                                requireUppercase: requireUppercase,
+                                requireLowercase: requireLowercase,
+                                requireNumber: requireNumber,
+                                requireSpecialChar: requireSpecialChar
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.input.wrapper,
+                        children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                            type: "password",
+                            label: "Confirm Password",
+                            placeholder: "••••••••",
+                            value: store.confirmPassword,
+                            onChange: store.setConfirmPassword,
+                            disabled: isLoading,
+                            enableValidation: false,
+                            fullWidth: true,
+                            wrapperClassName: "!bg-transparent border-zinc-300 dark:border-zinc-600",
+                            inputClassName: "placeholder:text-zinc-400 dark:placeholder:text-zinc-500 !bg-transparent"
+                        })
+                    }),
+                    showTerms && /*#__PURE__*/ _jsxs("div", {
+                        className: theme.checkbox.wrapper,
+                        children: [
+                            /*#__PURE__*/ _jsx(Checkbox, {
+                                checked: store.acceptTerms,
+                                onChange: store.setAcceptTerms,
+                                disabled: isLoading,
+                                size: "sm"
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: theme.checkbox.label,
+                                children: [
+                                    "I agree to the",
+                                    " ",
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: handleTermsClick,
+                                        className: theme.links.terms,
+                                        children: "Terms of Service"
+                                    }),
+                                    (privacyHref || onPrivacyClick) && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            " ",
+                                            "and",
+                                            " ",
+                                            /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: handlePrivacyClick,
+                                                className: theme.links.terms,
+                                                children: "Privacy Policy"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.button.wrapper,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            type: "submit",
+                            variant: "nucleus",
+                            size: "lg",
+                            fullWidth: true,
+                            loading: isLoading,
+                            disabled: isLoading,
+                            children: "Create Account"
+                        })
+                    }),
+                    showSignIn && /*#__PURE__*/ _jsx("div", {
+                        className: theme.links.signIn.wrapper,
+                        children: /*#__PURE__*/ _jsxs("span", {
+                            className: theme.links.signIn.text,
+                            children: [
+                                "Already have an account?",
+                                " ",
+                                /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: handleSignInClick,
+                                    className: theme.links.signIn.link,
+                                    disabled: isLoading,
+                                    children: "Sign in"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}