feat: support different illustration styles (#767)

account-kit/react/src/components/auth/card/add-passkey.tsx

@@ -1,29 +1,30 @@
 import { useAddPasskey } from "../../../hooks/useAddPasskey.js";
+import { AddPasskeyIllustration } from "../../../icons/illustrations/add-passkey.js";
 import {
-  PasskeyIllustration,
-  PasskeyShield,
-  PasskeySmiley,
-} from "../../../icons/passkey.js";
+  PasskeyShieldIllustration,
+  PasskeySmileyIllustration,
+} from "../../../icons/illustrations/passkeys.js";
 import { ls } from "../../../strings.js";
 import { Button } from "../../button.js";
 import { PoweredBy } from "../../poweredby.js";
 import { useAuthContext } from "../context.js";
+import type { AuthCardProps } from "./index.js";
 
 const BENEFITS = [
   {
-    icon: <PasskeySmiley />,
+    icon: PasskeySmileyIllustration,
     title: ls.addPasskey.simplerLoginTitle,
     description: ls.addPasskey.simplerLoginDescription,
   },
   {
-    icon: <PasskeyShield />,
+    icon: PasskeyShieldIllustration,
     title: ls.addPasskey.enhancedSecurityTitle,
     description: ls.addPasskey.enhancedSecurityDescription,
   },
 ];
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const AddPasskey = () => {
+export const AddPasskey = ({ config }: { config: AuthCardProps }) => {
   const { setAuthStep } = useAuthContext();
   const { addPasskey, isAddingPasskey } = useAddPasskey({
     onSuccess: () => {
@@ -34,16 +35,20 @@ export const AddPasskey = () => {
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center h-12 w-12">
-        <PasskeyIllustration />
+        <AddPasskeyIllustration
+          illustrationStyle={config.illustrationStyle ?? "flat"}
+          height="48"
+          width="48"
+        />
       </div>
 
       <h3 className="font-semibold text-lg">{ls.addPasskey.title}</h3>
 
       <div className="flex flex-col w-full gap-3">
-        {BENEFITS.map(({ title, icon, description }) => (
+        {BENEFITS.map(({ title, icon: Icon, description }) => (
           <div key={title} className="flex gap-2">
             <div className="h-5 w-5 flex items-center justify-center">
-              {icon}
+              <Icon illustrationStyle={config.illustrationStyle ?? "flat"} />
             </div>
             <div className="flex flex-col">
               <p className="font-semibold text-sm">{title}</p>

account-kit/react/src/components/auth/card/index.tsx

@@ -8,7 +8,7 @@ import {
 import { useSignerStatus } from "../../../hooks/useSignerStatus.js";
 import { IS_SIGNUP_QP } from "../../constants.js";
 import { useAuthContext } from "../context.js";
-import type { AuthType } from "../types.js";
+import type { AuthIllustrationStyle, AuthType } from "../types.js";
 import { Step } from "./steps.js";
 import { Notification } from "../../notification.js";
 import { useAuthError } from "../../../hooks/useAuthError.js";
@@ -20,6 +20,7 @@ export type AuthCardProps = {
   hideError?: boolean;
   header?: ReactNode;
   showSignInText?: boolean;
+  illustrationStyle?: AuthIllustrationStyle;
   // Each section can contain multiple auth types which will be grouped together
   // and separated by an OR divider
   sections?: AuthType[][];

account-kit/react/src/components/auth/card/loading/email.tsx

@@ -1,19 +1,21 @@
 import { useEffect, useState } from "react";
 import { useAuthenticate } from "../../../../hooks/useAuthenticate.js";
 import { useSignerStatus } from "../../../../hooks/useSignerStatus.js";
-import { MailIllustration } from "../../../../icons/mail.js";
 import { Button } from "../../../button.js";
 import { PoweredBy } from "../../../poweredby.js";
 import { useAuthContext, type AuthStep } from "../../context.js";
 import { Spinner } from "../../../../icons/spinner.js";
 import { ls } from "../../../../strings.js";
+import { EmailIllustration } from "../../../../icons/illustrations/email.js";
+import type { AuthCardProps } from "../index.js";
 
 interface LoadingEmailProps {
+  config: AuthCardProps;
   context: Extract<AuthStep, { type: "email_verify" }>;
 }
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const LoadingEmail = ({ context }: LoadingEmailProps) => {
+export const LoadingEmail = ({ config, context }: LoadingEmailProps) => {
   // yup, re-sent and resent. I'm not fixing it
   const [emailResent, setEmailResent] = useState(false);
   const { setAuthStep } = useAuthContext();
@@ -35,7 +37,12 @@ export const LoadingEmail = ({ context }: LoadingEmailProps) => {
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center h-12 w-12">
-        <MailIllustration className="animate-pulse" />
+        <EmailIllustration
+          illustrationStyle={config.illustrationStyle ?? "flat"}
+          height="48"
+          width="48"
+          className="animate-pulse"
+        />
       </div>
 
       <h3 className="font-semibold text-lg">{ls.loadingEmail.title}</h3>

account-kit/react/src/components/auth/card/loading/index.tsx

@@ -1,18 +1,20 @@
+import type { AuthCardProps } from "..";
 import type { AuthStep } from "../../context";
 import { CompletingEmailAuth, LoadingEmail } from "./email.js";
 import { LoadingPasskeyAuth } from "./passkey.js";
 
 type LoadingAuthProps = {
+  config: AuthCardProps;
   context?: AuthStep;
 };
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const LoadingAuth = ({ context }: LoadingAuthProps) => {
+export const LoadingAuth = ({ context, config }: LoadingAuthProps) => {
   switch (context?.type) {
     case "email_verify":
-      return <LoadingEmail context={context} />;
+      return <LoadingEmail config={config} context={context} />;
     case "passkey_verify":
-      return <LoadingPasskeyAuth />;
+      return <LoadingPasskeyAuth config={config} />;
     case "email_completing":
       return <CompletingEmailAuth context={context} />;
     default: {

account-kit/react/src/components/auth/card/loading/passkey.tsx

@@ -2,13 +2,16 @@ import { ls } from "../../../../strings.js";
 import { LoadingPasskey } from "../../../../icons/passkey.js";
 import { Button } from "../../../button.js";
 import { PoweredBy } from "../../../poweredby.js";
+import type { AuthCardProps } from "../index.js";
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const LoadingPasskeyAuth = () => {
+export const LoadingPasskeyAuth = ({ config }: { config: AuthCardProps }) => {
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center">
-        <LoadingPasskey />
+        <LoadingPasskey
+          illustrationStyle={config.illustrationStyle ?? "flat"}
+        />
       </div>
 
       <h3 className="font-semibold text-lg">{ls.loadingPasskey.title}</h3>

account-kit/react/src/components/auth/card/passkey-added.tsx

@@ -1,12 +1,17 @@
-import { PasskeyIllustration } from "../../../icons/passkey.js";
+import { AddedPasskeyIllustration } from "../../../icons/illustrations/added-passkey.js";
 import { PoweredBy } from "../../poweredby.js";
+import type { AuthCardProps } from "./index.js";
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-export function PasskeyAdded() {
+export function PasskeyAdded({ config }: { config: AuthCardProps }) {
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center h-12 w-12">
-        <PasskeyIllustration />
+        <AddedPasskeyIllustration
+          illustrationStyle={config.illustrationStyle ?? "flat"}
+          height="48"
+          width="48"
+        />
       </div>
       <h3 className="font-semibold text-lg">Passkey added!</h3>
       <p className="text-fg-secondary text-sm text-center">

account-kit/react/src/components/auth/card/steps.tsx

@@ -14,11 +14,11 @@ export const Step = (props: AuthCardProps) => {
     case "email_verify":
     case "passkey_verify":
     case "email_completing":
-      return <LoadingAuth context={authStep} />;
+      return <LoadingAuth config={props} context={authStep} />;
     case "passkey_create":
-      return <AddPasskey />;
+      return <AddPasskey config={props} />;
     case "passkey_create_success":
-      return <PasskeyAdded />;
+      return <PasskeyAdded config={props} />;
     case "eoa_connect":
       return <EoaConnectCard authStep={authStep} />;
     case "complete":

account-kit/react/src/components/auth/modal.tsx

@@ -19,6 +19,7 @@ export const AuthModal = ({ open, hideError, auth }: AuthModalProps) => {
           hideError={hideError}
           header={auth.header}
           sections={auth.sections}
+          illustrationStyle={auth.illustrationStyle}
           onAuthSuccess={() => closeAuthModal()}
           showClose
         />

account-kit/react/src/components/auth/types.ts

@@ -8,3 +8,5 @@ export type AuthType =
     }
   | { type: "passkey" }
   | { type: "injected" };
+
+export type AuthIllustrationStyle = "outline" | "linear" | "filled" | "flat";