@crossmint/client-sdk-react-ui 1.10.7 → 1.11.1

package/src/components/auth/methods/farcaster/FarcasterSignIn.tsx

@@ -1,169 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { useSignIn, QRCode, type UseSignInData } from "@farcaster/auth-kit";
-import { FarcasterIcon } from "@/icons/farcaster";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { Spinner } from "@/components/common/Spinner";
-import { classNames } from "@/utils/classNames";
-import { AuthFormBackButton } from "../../AuthFormBackButton";
-import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
-export function FarcasterSignIn() {
-    const { step, appearance, setStep, setError } = useAuthForm();
-
-    if (step === "initial") {
-        return (
-            <div>
-                <button
-                    className={classNames(
-                        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                        "transition-colors duration-200 ease-in-out",
-                        "hover:bg-cm-hover focus:bg-cm-hover outline-none"
-                    )}
-                    style={{
-                        borderRadius: appearance?.borderRadius,
-                        backgroundColor: appearance?.colors?.buttonBackground,
-                    }}
-                    onClick={() => {
-                        setStep("qrCode");
-                        setError(null);
-                    }}
-                >
-                    <FarcasterIcon className="h-[25px] w-[25px] absolute left-[18px]" />
-                    <span
-                        className="font-medium"
-                        style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
-                    >
-                        Sign in with Farcaster
-                    </span>
-                    <span className="sr-only">Sign in with Farcaster</span>
-                </button>
-            </div>
-        );
-    }
-
-    if (step === "qrCode") {
-        return <FarcasterQRCode />;
-    }
-
-    return null;
-}
-
-// We want this to be a separate component so it can completely un-render when the user goes back to the initial screen
-function FarcasterQRCode() {
-    const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setStep, setDialogOpen, setError } = useAuthForm();
-    const [farcasterData, setFarcasterData] = useState<UseSignInData | null>(null);
-
-    const farcasterProps = useMemo(
-        () => ({
-            onSuccess: (data: UseSignInData) => {
-                // Step 3. set the farcaster data once the sign in is successful
-                setFarcasterData(data);
-            },
-        }),
-        []
-    );
-
-    const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = useSignIn(farcasterProps);
-
-    const handleFarcasterSignIn = async (data: UseSignInData) => {
-        setError(null);
-        try {
-            const oneTimeSecret = await crossmintAuth?.signInWithFarcaster(data);
-            // Step 5. fetch the auth material, close the dialog, and unrender any farcaster client stuff
-            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret as string);
-            setDialogOpen(false);
-            setStep("initial");
-        } catch (error) {
-            console.error("Error during Farcaster sign-in:", error);
-            setError("Failed to sign in with Farcaster");
-        }
-    };
-
-    useEffect(() => {
-        if (farcasterData != null) {
-            // Step 4. call the handleFarcasterSignInfunction to handle the sign in
-            handleFarcasterSignIn(farcasterData);
-        }
-    }, [farcasterData]);
-
-    useEffect(() => {
-        if (isConnected) {
-            // Step 2. once connected, call the signIn function to start the sign in process
-            signIn();
-        }
-    }, [isConnected]);
-
-    useEffect(() => {
-        // Step 1. call the connect function to initialize the connection
-        connect();
-    }, []);
-
-    return (
-        <div>
-            <AuthFormBackButton
-                onClick={() => {
-                    signOut();
-                    setStep("initial");
-                }}
-                iconColor={appearance?.colors?.textPrimary}
-                ringColor={appearance?.colors?.accent}
-            />
-
-            <div className="flex flex-col items-center gap-4">
-                <div className="text-center">
-                    <h3
-                        className="text-lg font-semibold text-cm-text-primary mb-2"
-                        style={{ color: appearance?.colors?.textPrimary }}
-                    >
-                        Sign in with Farcaster
-                    </h3>
-                    <p
-                        className="text-base font-normal text-cm-text-secondary"
-                        style={{ color: appearance?.colors?.textSecondary }}
-                    >
-                        Scan with your phone's camera to continue.
-                    </p>
-                </div>
-                <div
-                    className="bg-white aspect-square rounded-lg p-4"
-                    style={{
-                        backgroundColor: appearance?.colors?.inputBackground,
-                        borderRadius: appearance?.borderRadius,
-                    }}
-                >
-                    {qrCodeUrl != null ? (
-                        <QRCode uri={qrCodeUrl} size={280} />
-                    ) : (
-                        <div className="min-h-[246px] flex items-center justify-center">
-                            <Spinner
-                                style={{
-                                    color: appearance?.colors?.textSecondary,
-                                    fill: appearance?.colors?.textPrimary,
-                                }}
-                            />
-                        </div>
-                    )}
-                </div>
-                {qrCodeUrl ? (
-                    <>
-                        <p
-                            className="text-base text-center font-normal text-cm-text-secondary"
-                            style={{ color: appearance?.colors?.textSecondary }}
-                        >
-                            Alternatively, click on this link to open Warpcast.
-                        </p>
-                        <a
-                            href={qrCodeUrl}
-                            rel="noopener noreferrer"
-                            target="_blank"
-                            className="text-base font-normal text-cm-link"
-                            style={{ color: appearance?.colors?.textLink }}
-                        >
-                            Open Warpcast
-                        </a>
-                    </>
-                ) : null}
-            </div>
-        </div>
-    );
-}

package/src/components/auth/methods/google/GoogleSignIn.tsx

@@ -1,53 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import { GoogleIcon } from "@/icons/google";
-import { useOAuthWindowListener } from "@/hooks/useOAuthWindowListener";
-import { Spinner } from "@/components/common/Spinner";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { classNames } from "@/utils/classNames";
-
-export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
-    const { step, appearance, isLoadingOauthUrlMap } = useAuthForm();
-    const { createPopupAndSetupListeners, isLoading: isLoadingOAuthWindow } = useOAuthWindowListener("google");
-    const isLoading = isLoadingOauthUrlMap || isLoadingOAuthWindow;
-
-    if (step !== "initial") {
-        return null;
-    }
-
-    return (
-        <button
-            className={classNames(
-                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                "transition-colors duration-200 ease-in-out",
-                "hover:bg-cm-hover focus:bg-cm-hover outline-none",
-                isLoading ? "cursor-not-allowed hover:bg-cm-muted-primary" : ""
-            )}
-            style={{
-                borderRadius: appearance?.borderRadius,
-                backgroundColor: appearance?.colors?.buttonBackground,
-            }}
-            onClick={isLoading ? undefined : createPopupAndSetupListeners}
-            {...props}
-        >
-            <>
-                <GoogleIcon className="h-[25px] w-[25px] absolute left-[18px]" />
-                {isLoading ? (
-                    <Spinner
-                        style={{
-                            color: appearance?.colors?.textSecondary,
-                            fill: appearance?.colors?.textPrimary,
-                        }}
-                    />
-                ) : (
-                    <span
-                        className="font-medium"
-                        style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
-                    >
-                        Sign in with Google
-                    </span>
-                )}
-            </>
-            <span className="sr-only">Sign in with Google</span>
-        </button>
-    );
-}

package/src/components/auth/methods/web3/Web3AuthFlow.tsx

@@ -1,35 +0,0 @@
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { Web3AuthFlowButton } from "./Web3AuthFlowButton";
-import { Web3Connectors } from "./Web3Connectors";
-import { useCrossmint } from "@/hooks";
-import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
-import { DynamicWeb3WalletConnect } from "@/providers/auth/web3/DynamicWeb3WalletConnect";
-
-export function Web3AuthFlow() {
-    const { crossmint } = useCrossmint();
-    const apiClient = createCrossmintApiClient(crossmint, {
-        usageOrigin: "client",
-    });
-
-    return (
-        <DynamicWeb3WalletConnect apiKeyEnvironment={apiClient["parsedAPIKey"].environment}>
-            <Web3AuthFlowContent />
-        </DynamicWeb3WalletConnect>
-    );
-}
-
-function Web3AuthFlowContent() {
-    const { step } = useAuthForm();
-
-    // Show wallet connectors when in any web3 step
-    if (step.startsWith("web3")) {
-        return <Web3Connectors />;
-    }
-
-    // Show initial connect button on first step
-    if (step === "initial") {
-        return <Web3AuthFlowButton />;
-    }
-
-    return null;
-}

package/src/components/auth/methods/web3/Web3AuthFlowButton.tsx

@@ -1,44 +0,0 @@
-import { ChevronRightIcon } from "@/icons/chevronRight";
-import { WalletIcon } from "@/icons/wallet";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { classNames } from "@/utils/classNames";
-
-export function Web3AuthFlowButton() {
-    const { step, appearance, setStep, setError } = useAuthForm();
-
-    if (step !== "initial") {
-        return null;
-    }
-
-    return (
-        <button
-            className={classNames(
-                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                "transition-colors duration-200 ease-in-out",
-                "hover:bg-cm-hover focus:bg-cm-hover outline-none"
-            )}
-            style={{
-                borderRadius: appearance?.borderRadius,
-                borderColor: appearance?.colors?.border,
-                backgroundColor: appearance?.colors?.buttonBackground,
-            }}
-            onClick={() => {
-                setStep("web3");
-                setError(null);
-            }}
-        >
-            <WalletIcon
-                className="h-[21px] w-[21px] absolute left-[20px]"
-                style={{ color: appearance?.colors?.textPrimary }}
-            />
-            <span className="font-medium" style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}>
-                Continue with a wallet
-            </span>
-            <ChevronRightIcon
-                className="h-[21px] w-[21px] absolute right-[20px]"
-                style={{ color: appearance?.colors?.textSecondary }}
-            />
-            <span className="sr-only">Continue with a wallet</span>
-        </button>
-    );
-}

package/src/components/auth/methods/web3/Web3Connector.tsx

@@ -1,62 +0,0 @@
-import type { UIConfig } from "@crossmint/common-sdk-base";
-import { PoweredByCrossmint } from "@/components/common/PoweredByCrossmint";
-import { classNames } from "@/utils/classNames";
-
-export function Web3Connector({
-    icon,
-    appearance,
-    isLoading,
-    onConnectClick,
-    headingText,
-    buttonText,
-}: {
-    icon: string;
-    appearance?: UIConfig;
-    isLoading: boolean;
-    onConnectClick: () => void;
-    headingText: string;
-    buttonText: string;
-}) {
-    return (
-        <>
-            <div className="flex flex-col items-center text-center mt-8 mb-4 gap-2">
-                <img src={icon} alt={"metamask"} className="h-[74px] w-[74px]" />
-                <h3
-                    className="text-lg font-semibold text-cm-text-primary"
-                    style={{ color: appearance?.colors?.textPrimary }}
-                >
-                    {headingText}
-                </h3>
-                <p
-                    className="text-base font-normal text-cm-text-primary"
-                    style={{ color: appearance?.colors?.textPrimary }}
-                >
-                    Don’t see your wallet? Check your other browser windows.
-                </p>
-            </div>
-
-            <button
-                className={classNames(
-                    "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                    "transition-colors duration-200 ease-in-out",
-                    "hover:bg-cm-hover focus:bg-cm-hover outline-none",
-                    isLoading ? "cursor-not-allowed bg-cm-muted-primary" : ""
-                )}
-                style={{
-                    borderRadius: appearance?.borderRadius,
-                    borderColor: appearance?.colors?.border,
-                    backgroundColor: appearance?.colors?.buttonBackground,
-                }}
-                onClick={isLoading ? undefined : onConnectClick}
-            >
-                <span className="font-medium" style={{ color: appearance?.colors?.textPrimary }}>
-                    {buttonText}
-                </span>
-            </button>
-
-            <div className="flex justify-center pt-4">
-                <PoweredByCrossmint color={appearance?.colors?.textSecondary} />
-            </div>
-        </>
-    );
-}

package/src/components/auth/methods/web3/Web3ConnectorButton.tsx

@@ -1,38 +0,0 @@
-import type { UIConfig } from "@crossmint/common-sdk-base";
-import type React from "react";
-import { classNames } from "../../../../utils/classNames";
-
-export function Web3ConnectorButton({
-    title,
-    appearance,
-    img,
-    ...props
-}: {
-    title: string;
-    appearance?: UIConfig;
-    img: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
-    return (
-        <button
-            className={classNames(
-                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
-                "transition-colors duration-200 ease-in-out",
-                "hover:bg-cm-hover focus:bg-cm-hover outline-none"
-            )}
-            style={{
-                borderRadius: appearance?.borderRadius,
-                borderColor: appearance?.colors?.border,
-                backgroundColor: appearance?.colors?.buttonBackground,
-            }}
-            {...props}
-        >
-            <>
-                <img src={img} alt={title} className="h-[25px] w-[25px] absolute left-[18px]" />
-                <span className="font-medium" style={{ color: appearance?.colors?.textPrimary }}>
-                    {title}
-                </span>
-            </>
-            <span className="sr-only">Sign in with {title}</span>
-        </button>
-    );
-}

package/src/components/auth/methods/web3/Web3Connectors.tsx

@@ -1,28 +0,0 @@
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { AuthFormBackButton } from "../../AuthFormBackButton";
-import { DynamicEmbeddedWidget } from "@dynamic-labs/sdk-react-core";
-
-export function Web3Connectors() {
-    const { appearance, step, setStep } = useAuthForm();
-
-    if (step === "web3") {
-        return (
-            <>
-                <AuthFormBackButton
-                    onClick={() => setStep("initial")}
-                    iconColor={appearance?.colors?.textPrimary}
-                    ringColor={appearance?.colors?.accent}
-                />
-                <div className="flex flex-col items-center">
-                    <div className="flex flex-col gap-[10px] w-full">
-                        <div className="widget-container">
-                            <DynamicEmbeddedWidget background="none" />
-                        </div>
-                    </div>
-                </div>
-            </>
-        );
-    }
-
-    return null;
-}

package/src/components/common/Dialog.tsx

@@ -1,122 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { classNames } from "@/utils/classNames";
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogClose = DialogPrimitive.Close;
-const DialogPortal = DialogPrimitive.Portal;
-
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-    showCloseButton?: boolean;
-    closeButtonColor?: string;
-    closeButtonRingColor?: string;
-}
-
-const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
-    ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
-        <DialogPortal>
-            {/* Because we're using modal={false}, the regular overlay is not shown. We need to add our own overlay */}
-            <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm overflow-x-hidden" />
-            <DialogPrimitive.Content
-                ref={ref}
-                className={classNames(
-                    "fixed z-50 p-6 pb-4 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
-                    // Small viewport styles (bottom sheet)
-                    "inset-x-0 bottom-0 w-full border-t rounded-t-xl",
-                    "data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
-                    // Regular viewport styles (centered modal)
-                    "min-[480px]:inset-auto !min-[480px]:p-10 !min-[480px]:pb-8 min-[480px]:left-[50%] min-[480px]:top-[50%] min-[480px]:translate-x-[-50%] min-[480px]:translate-y-[-52%]",
-                    "min-[480px]:max-w-[448px] min-[480px]:rounded-xl",
-                    "min-[480px]:data-[state=closed]:animate-fade-out min-[480px]:data-[state=closed]:animate-zoom-out-95",
-                    "min-[480px]:data-[state=open]:animate-fade-in min-[480px]:data-[state=open]:animate-zoom-in-95",
-                    // Duration for animations
-                    "data-[state=closed]:duration-300 data-[state=open]:duration-500",
-                    className
-                )}
-                {...props}
-            >
-                {children}
-                {showCloseButton && (
-                    <DialogPrimitive.Close
-                        className={classNames(
-                            "absolute rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100",
-                            "focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
-                            "right-4 top-4 !min-[480px]:right-6 !min-[480px]:top-6"
-                        )}
-                        style={{ color: closeButtonColor ?? "#00150D" }}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className="h-6 w-6"
-                        >
-                            <path d="M18 6 6 18" />
-                            <path d="m6 6 12 12" />
-                        </svg>
-                        <span className="sr-only">Close</span>
-                    </DialogPrimitive.Close>
-                )}
-            </DialogPrimitive.Content>
-        </DialogPortal>
-    )
-);
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={classNames("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={classNames("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-        {...props}
-    />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-        ref={ref}
-        className={classNames("text-lg font-semibold leading-none tracking-tight", className)}
-        {...props}
-    />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Description
-        ref={ref}
-        className={classNames("text-sm text-muted-foreground", className)}
-        {...props}
-    />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-    Dialog,
-    DialogPortal,
-    DialogClose,
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogFooter,
-    DialogTitle,
-    DialogDescription,
-};

package/src/components/common/Divider.tsx

@@ -1,25 +0,0 @@
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import type { UIConfig } from "@crossmint/common-sdk-base";
-
-export function Divider({ appearance, text }: { appearance?: UIConfig; text?: string }) {
-    const { step } = useAuthForm();
-
-    if (step !== "initial") {
-        return null;
-    }
-
-    return (
-        <div className="flex items-center justify-center w-full pt-2 pb-3">
-            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
-            {text != null ? (
-                <p
-                    className="flex-none px-2 text-sm text-cm-text-primary"
-                    style={{ color: appearance?.colors?.textSecondary }}
-                >
-                    {text}
-                </p>
-            ) : null}
-            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
-        </div>
-    );
-}

package/src/components/common/InputOTP.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { createContext, useContext } from "react";
-import { classNames } from "@/utils/classNames";
-
-// Define the type for customStyles
-type CustomStyles = {
-    textPrimary: string;
-    inputBackground: string;
-    buttonBackground: string;
-    accent: string;
-    danger: string;
-    border: string;
-    borderRadius?: string;
-};
-
-// Create a context for customStyles
-const CustomStylesContext = createContext<CustomStyles | undefined>(undefined);
-
-type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {
-    customStyles?: CustomStyles;
-};
-type InputOTPRef = React.ElementRef<typeof OTPInput>;
-
-const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<InputOTPRef>> = React.forwardRef<
-    InputOTPRef,
-    InputOTPProps
->(({ className, containerClassName, customStyles, ...props }, ref) => (
-    <CustomStylesContext.Provider value={customStyles}>
-        <OTPInput
-            autoFocus
-            ref={ref}
-            containerClassName={classNames("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
-            className={classNames("disabled:cursor-not-allowed", className)}
-            {...props}
-        />
-    </CustomStylesContext.Provider>
-));
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={classNames("flex gap-2 items-center", className)} {...props} />
-    )
-);
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div"> & {
-        index: number;
-        hasError?: boolean;
-    }
->(({ index, className, hasError, ...props }, ref) => {
-    const inputOTPContext = React.useContext(OTPInputContext);
-    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-    const customStyles = useContext(CustomStylesContext);
-
-    return (
-        <div
-            ref={ref}
-            className={classNames(
-                "relative flex h-14 w-12 items-center bg-cm-muted-primary justify-center border border-cm-border text-lg transition-all rounded-md text-cm-text-primary",
-                isActive && `z-10 ring-2 ring-offset-background`,
-                className
-            )}
-            style={{
-                borderRadius: customStyles?.borderRadius,
-                borderColor: hasError ? customStyles?.danger : customStyles?.border,
-                boxShadow: isActive ? `0 0 0 2px ${customStyles?.accent}` : "none",
-                backgroundColor: char ? customStyles?.buttonBackground : customStyles?.inputBackground,
-            }}
-            {...props}
-        >
-            {char}
-            {hasFakeCaret && (
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                    <div
-                        className="h-4 w-px animate-caret-blink duration-1000"
-                        style={{
-                            height: "18px",
-                            backgroundColor: customStyles?.textPrimary,
-                        }}
-                    />
-                </div>
-            )}
-        </div>
-    );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot };