@corbado/react - npm Package Compare versions

Comparing version 0.1.1-alpha.3 to 0.1.1-alpha.4

dist/components/index.d.ts

 export * from './ui';
-export * from './wrappers';
+export * from './authentication';

dist/components/ui/Dialog.d.ts

@@ -8,3 +8,2 @@ import type { FC, ReactNode } from 'react';
     cancelText?: string;
-    inverseButtonVariants?: boolean;
     onClose: () => Promise<void> | void;
@@ -11,0 +10,0 @@ onConfirm: () => Promise<void> | void;

dist/components/ui/index.d.ts

@@ -1,7 +0,7 @@
-export * from './Button';
+export * from './buttons/Button';
 export * from './HorizontalRule';
-export * from './Icon';
+export * from './icons/Icon';
 export * from './Input';
 export * from './FormInput';
-export * from './IconLink';
+export * from './icons/IconLink';
 export * from './OtpInputGroup';
@@ -13,1 +13,2 @@ export * from './Spinner';
 export * from './Dialog';
+export * from './buttons/EmailProviderButtons';

dist/contexts/FlowHandlerContext.d.ts

 /// <reference types="react" />
-import type { FlowHandlerEventOptions, FlowHandlerEvents, FlowNames, ScreenNames, UserState } from '@corbado/shared-ui';
+import type { FlowHandlerEventOptions, FlowHandlerEvents, FlowNames, FlowTypeText, UserState, VerificationMethods } from '@corbado/shared-ui';
+import { ScreenNames } from '@corbado/shared-ui';
 export interface FlowHandlerContextProps {
-    currentFlow: FlowNames;
-    currentScreen: ScreenNames;
+    currentFlowType: FlowTypeText | undefined;
+    currentFlow: FlowNames | undefined;
+    currentScreen: ScreenNames | undefined;
     currentUserState: UserState;
+    currentVerificationMethod: VerificationMethods | undefined;
     initialized: boolean;
     navigateBack: () => ScreenNames;
     emitEvent: (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => Promise<void> | undefined;
+    changeFlow: () => void;
 }
@@ -11,0 +15,0 @@ export declare const initialContext: FlowHandlerContextProps;

dist/contexts/FlowHandlerProvider.d.ts

@@ -0,6 +1,9 @@
+import type { FlowType } from '@corbado/shared-ui';
 import type { FC, PropsWithChildren } from 'react';
 type Props = {
     onLoggedIn: () => void;
+    onChangeFlow?: () => void;
+    initialFlowType?: FlowType;
 };
 export declare const FlowHandlerProvider: FC<PropsWithChildren<Props>>;
 export default FlowHandlerProvider;

dist/index.d.ts

 import { useCorbado } from '@corbado/react-sdk';
 import { CorbadoThemes } from '@corbado/shared-ui';
-import CorbadoProvider, { CorbadoProviderProps } from './hocs/CorbadoProvider';
-import CorbadoAuth from './screens/CorbadoAuth';
-import PasskeyList from './screens/PasskeyList';
-export { CorbadoProvider, useCorbado, CorbadoAuth, PasskeyList, CorbadoThemes, CorbadoProviderProps };
+import type { CorbadoAuthConfig } from '@corbado/types';
+import CorbadoProvider, { type CorbadoProviderProps } from './hocs/CorbadoProvider';
+import CorbadoAuth from './screens/core/CorbadoAuth';
+import Login from './screens/core/Login';
+import PasskeyList from './screens/core/PasskeyList';
+import SignUp from './screens/core/SignUp';
+export { CorbadoProvider, useCorbado, CorbadoAuth, PasskeyList, SignUp, Login, CorbadoThemes, CorbadoProviderProps, CorbadoAuthConfig, };

dist/index.js

@@ -1,2 +0,2 @@
-import*as e from"@corbado/react-sdk";import*as t from"@corbado/shared-ui";import*as a from"i18next";import*as n from"i18next-browser-languagedetector";import*as r from"react-i18next";import*as l from"react";var s={d:(e,t)=>{for(var a in t)s.o(t,a)&&!s.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},o={};s.d(o,{rX:()=>X,Hg:()=>k,BN:()=>d.CorbadoThemes,XZ:()=>te,km:()=>u.useCorbado});const u=(i={CorbadoProvider:()=>e.CorbadoProvider,useCorbado:()=>e.useCorbado},c={},s.d(c,i),c);var i,c;const d=(e=>{var t={};return s.d(t,e),t})({AssetsList:()=>t.AssetsList,CommonScreens:()=>t.CommonScreens,CorbadoThemes:()=>t.CorbadoThemes,FlowHandler:()=>t.FlowHandler,FlowHandlerEvents:()=>t.FlowHandlerEvents,LoginFlowNames:()=>t.LoginFlowNames,PasskeyLoginWithEmailOtpFallbackScreens:()=>t.PasskeyLoginWithEmailOtpFallbackScreens,PasskeySignupWithEmailOtpFallbackScreens:()=>t.PasskeySignupWithEmailOtpFallbackScreens,SignUpFlowNames:()=>t.SignUpFlowNames,aaguidMappings:()=>t.aaguidMappings,getParsedUA:()=>t.getParsedUA,handleTheming:()=>t.handleTheming,hasDarkMode:()=>t.hasDarkMode,i18n:()=>t.i18n,notANumberRegex:()=>t.notANumberRegex,numberRegex:()=>t.numberRegex}),m=(e=>{var t={};return s.d(t,e),t})({default:()=>a.default}),f=(e=>{var t={};return s.d(t,e),t})({default:()=>n.default}),b=(e=>{var t={};return s.d(t,e),t})({Trans:()=>r.Trans,initReactI18next:()=>r.initReactI18next,useTranslation:()=>r.useTranslation}),E="en";m.default.use(b.initReactI18next).use(f.default).init({resources:{en:{translation:d.i18n.en},de:{translation:d.i18n.de}},keySeparator:".",fallbackLng:E});const y=e=>{var t;null===(t=null===document||void 0===document?void 0:document.querySelector("html"))||void 0===t||t.setAttribute("lang",e)},p=(e=!0,t=E,a=null)=>{const n=window.navigator.language;if(e&&t===E&&n===E&&!a)return;for(const[e,t]of Object.entries(null!=a?a:{}))m.default.addResourceBundle(e,"translation",t,!0,!0);const r=e?(e=>e.split("-")[0])(n):t;try{m.default.changeLanguage(r),y(r)}catch{m.default.changeLanguage(t),y(t)}},g=(e=>{var t={};return s.d(t,e),t})({createContext:()=>l.createContext,default:()=>l.default,forwardRef:()=>l.forwardRef,memo:()=>l.memo,useCallback:()=>l.useCallback,useContext:()=>l.useContext,useEffect:()=>l.useEffect,useMemo:()=>l.useMemo,useRef:()=>l.useRef,useState:()=>l.useState}),k=({children:e,...t})=>{const{defaultLanguage:a,autoDetectLanguage:n,customTranslations:r,darkMode:l,theme:s,...o}=t;return(0,g.useEffect)((()=>(p(n,a,r),(0,d.handleTheming)(null!=l?l:"auto",s))),[]),g.default.createElement(u.CorbadoProvider,{...o},e)},v=(0,g.memo)((({variant:e="primary",className:t=""})=>{const a=`${"primary"===e?"cb-spinner-primary":"cb-spinner-secondary"} ${t}`;return g.default.createElement("div",{className:a})}),((e,t)=>e.variant===t.variant&&e.className===t.className)),h={primary:"cb-button-primary",secondary:"cb-button-secondary",tertiary:"cb-button-tertiary",close:"cb-button-primary cb-button-close"},w=(0,g.forwardRef)((({variant:e="tertiary",isLoading:t=!1,className:a="",disabled:n,children:r,...l},s)=>{const o=`${h[e]} ${a}`;return g.default.createElement("button",{className:o,disabled:n,ref:s,...l},t?g.default.createElement(v,null):r)})),S=({children:e,className:t=""})=>g.default.createElement("div",{className:`cb-horizontal-divider ${t}`},e),C=({url:e,name:t="",className:a=""})=>g.default.createElement("img",{src:e,alt:t,className:a}),N=g.default.forwardRef((({id:e,className:t="",error:a,...n},r)=>{const l=`cb-input ${t} ${a?"cb-error":""}`;return g.default.createElement("input",{id:e,...n,className:l,autoComplete:n.autoComplete?n.autoComplete:"off",ref:r})})),F=({label:e,type:t,id:a,name:n,value:r,onChange:l,onFocus:s,onBlur:o,error:u,...i})=>{const[c,d]=g.default.useState(!1),m=`cb-form-input ${c?"cb-has-focus":""} ${r?"cb-has-content":""} ${u?"cb-has-error":""}`;return g.default.createElement(g.default.Fragment,null,g.default.createElement("div",{className:m},g.default.createElement(N,{type:t,id:a||n,name:n,value:r,placeholder:e,onChange:l,onFocus:e=>{d(!0),s&&s(e)},onBlur:e=>{d(!1),o&&o(e)},error:u,...i}),g.default.createElement("label",{htmlFor:a||n},e),u?g.default.createElement("div",{className:"cb-form-input-error"},g.default.createElement("p",{className:"cb-error"},u)):null))},P=({target:e="_blank",className:t,icon:a,label:n,...r})=>g.default.createElement("a",{target:e,className:`cb-link-icon ${t||""}`,...r},g.default.createElement(C,{className:"cb-icon",...a})," ",g.default.createElement("p",null,n)),B=({emittedOTP:e,numberOfDigits:t=6,loading:a=!1,error:n})=>{const[r,l]=(0,g.useState)(new Array(t).fill("")),s=(0,g.useRef)([]);(0,g.useEffect)((()=>{s.current[0]&&s.current[0].focus()}),[]),(0,g.useEffect)((()=>{e(r)}),[r]);const o=e=>{e.preventDefault();const t=e.clipboardData.getData("text").slice(0,6).split("");t.every((e=>d.numberRegex.test(e)))&&(l(t.concat(new Array(6-t.length).fill(""))),s.current[t.length-1].focus())};return g.default.createElement("div",{className:"cb-email-otp-input-container"},r.map(((e,t)=>g.default.createElement(N,{key:t,ref:e=>e&&(s.current[t]=e),id:`otp-${t}`,value:e,type:"tel",inputMode:"numeric",pattern:"[0-9]*",maxLength:1,onChange:e=>((e,t)=>{const a=e.value;if(d.notANumberRegex.test(a))return;const n=t+1;if(r[t]){if(n>=r.length)return;l(r.map(((e,t)=>t===n?a:e))),n+1<r.length&&s.current[n+1].focus()}else l(r.map(((e,n)=>n===t?a:e))),n<r.length&&a&&s.current[n].focus()})(e.target,t),onKeyDown:e=>((e,t)=>{switch(e.key){case"ArrowLeft":t>0&&s.current[t-1].focus();break;case"ArrowRight":t<r.length-1&&s.current[t+1].focus();break;case"Backspace":r[t]?l(r.map(((e,a)=>a===t?"":e))):t>0&&(s.current[t-1].focus(),l(r.map(((e,a)=>a===t-1?"":e))))}})(e,t),onPaste:o,disabled:a,className:"cb-email-otp-input",autoFocus:0===t,error:n}))))},x=({children:e,className:t=""})=>g.default.createElement("h1",{className:`cb-header ${t}`},e),M=({children:e,className:t=""})=>g.default.createElement("h2",{className:`cb-subheader ${t}`},e),_=({children:e,className:t=""})=>g.default.createElement("p",{className:`cb-body text-center ${t}`},e),T=({isOpen:e,header:t,body:a,confirmText:n="Yes",cancelText:r,inverseButtonVariants:l=!1,onClose:s,onConfirm:o})=>{const[u,i]=g.default.useState(!1),[c,d]=g.default.useState(!1);if(!e)return null;const m=async()=>{s&&(i(!0),await s(),i(!1))};return g.default.createElement("div",{className:"cb-dialog",onClick:()=>{m()}},g.default.createElement("div",{className:"cb-dialog-content",onClick:e=>e.stopPropagation()},g.default.createElement("div",{className:"cb-dialog-header"},t,g.default.createElement("div",{className:"cb-dialog-x-button",onClick:()=>{m()}},"X")),a?g.default.createElement("div",{className:"cb-dialog-body"},a):null,g.default.createElement("div",{className:"cb-dialog-footer"},g.default.createElement(w,{variant:l?"close":"primary",className:"cb-dialog-button",isLoading:c,disabled:c||u,onClick:()=>{(async()=>{o&&(d(!0),await o(),d(!1))})()}},n),r?g.default.createElement(w,{variant:l?"primary":"close",className:"cb-dialog-button",isLoading:u,disabled:c||u,onClick:()=>{m()}},r):null)))},L=({header:e,subHeader:t,secondaryHeader:a,body:n,primaryButton:r,secondaryButton:l,tertiaryButton:s,showHorizontalRule:o=!1,onClick:u,primaryLoading:i=!1,secondaryLoading:c=!1,hideFingerPrintIcon:d=!1})=>g.default.createElement("div",{className:"cb-layout-passkey"},g.default.createElement(x,null,e),t&&g.default.createElement(M,{className:"cb-subheader-spacing"},t),!d&&g.default.createElement("div",{className:"cb-finger-print-icon"}),a&&g.default.createElement(x,{className:"cb-secondary-header-spacing"},a),n&&g.default.createElement(_,{className:"cb-body-spacing"},n),r&&g.default.createElement(w,{variant:"primary",onClick:()=>u("primary"),isLoading:i,disabled:i||c},r),o&&g.default.createElement(S,null,"or"),l&&g.default.createElement(w,{variant:"secondary",onClick:()=>u("secondary"),isLoading:c,disabled:i||c},l),s&&g.default.createElement(w,{variant:"tertiary",onClick:()=>u("tertiary"),disabled:i||c},s)),O=({children:e,onSubmit:t,submitButtonText:a,disableSubmitButton:n,loading:r=!1})=>g.default.createElement("form",{className:"cb-form",onSubmit:e=>{e.preventDefault(),t()}},g.default.createElement("div",{className:"cb-form-body"},e),g.default.createElement(w,{variant:"primary",className:"cb-form-button",disabled:n,isLoading:r},a)),H={currentFlow:d.LoginFlowNames.PasskeyLoginWithEmailOTPFallback,currentScreen:d.CommonScreens.Start,currentUserState:{},initialized:!1,navigateBack:()=>d.CommonScreens.Start,emitEvent:()=>Promise.reject()},A=(0,g.createContext)(H),R=(e=A)=>{const t=(0,g.useContext)(e);if(!t)throw new Error("Please make sure that your components are wrapped inside <FlowHandlerProvider />");return t},U=({header:e,body:t,verificationButtonText:a,backButtonText:n,onVerificationButtonClick:r,onBackButtonClick:l})=>{var s;const[o,u]=(0,g.useState)(""),{currentUserState:i}=R(),[c,m]=(0,g.useState)(!1),f=(0,g.useRef)(null);(0,g.useEffect)((()=>{m(!1)}),[i]);const b=(0,g.useCallback)((e=>{const t=e.join("");u(t),6===t.length&&r(t,m)}),[u]);return g.default.createElement("form",{className:"cb-email-otp",onSubmit:e=>{e.preventDefault(),r(o,m)}},g.default.createElement(x,null,e),g.default.createElement(_,null,t),g.default.createElement("div",{className:"cb-email-links"},g.default.createElement(P,{icon:d.AssetsList.GmailSVG,label:"Google",href:"https://mail.google.com/mail/u/0/#search/from%3A%40corbado+in%3Aanywhere"}),g.default.createElement(P,{icon:d.AssetsList.YahooSVG,label:"Yahoo",href:"https://mail.yahoo.com/d/search/keyword=corbado.com"}),g.default.createElement(P,{icon:d.AssetsList.OutlookSVG,label:"Outlook",href:"https://outlook.office.com/mail/0/inbox"})),g.default.createElement(B,{emittedOTP:b,error:null===(s=i.emailOTPError)||void 0===s?void 0:s.translatedMessage}),i.emailOTPError&&g.default.createElement("p",{className:"cb-error"},i.emailOTPError.translatedMessage),g.default.createElement(w,{type:"submit",ref:f,variant:"primary",isLoading:c,disabled:c},a),g.default.createElement(w,{type:"button",onClick:l,variant:"tertiary",disabled:c},n))},D={[d.PasskeyLoginWithEmailOtpFallbackScreens.Start]:()=>{var e;const{t}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.login.start"}),{emitEvent:a,currentUserState:n}=R(),[r,l]=(0,g.useState)(""),[s,o]=(0,g.useState)(!1),u=(0,g.useRef)(!1);(0,g.useEffect)((()=>{u.current||(u.current=!0,a(d.FlowHandlerEvents.InitConditionalUI))}),[]),(0,g.useEffect)((()=>{o(!1)}),[n]);const i=(0,g.useCallback)((e=>{l(e.target.value)}),[]),c=(0,g.useCallback)((()=>{o(!0),a(d.FlowHandlerEvents.PrimaryButton,{userStateUpdate:{email:r}})}),[r,a]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(x,null,t("header")),g.default.createElement(M,null,t("subheader"),g.default.createElement("span",{className:"cb-link-secondary",onClick:()=>{a(d.FlowHandlerEvents.ChangeFlow)}},t("button_signup"))),g.default.createElement(O,{onSubmit:c,submitButtonText:t("button_submit"),loading:s},g.default.createElement(F,{name:"username",type:"email",autoComplete:"email webauthn",label:t("textField_email"),onChange:i,value:r,error:null===(e=n.emailError)||void 0===e?void 0:e.translatedMessage})))},[d.PasskeyLoginWithEmailOtpFallbackScreens.EnterOtp]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.login.emailOtp"}),{emitEvent:t,currentUserState:a}=R(),n=e("header"),r=g.default.createElement(g.default.Fragment,null,e("body_text1"),g.default.createElement("span",{className:"cb-text-secondary"},a.email),e("body_text2")),l=e("button_verify"),s=e("button_back"),o=(0,g.useCallback)((()=>t(d.FlowHandlerEvents.CancelOtp)),[]),u=(0,g.useCallback)((async(e,a)=>{a(!0),await t(d.FlowHandlerEvents.PrimaryButton,{emailOTPCode:e})}),[]),i=(0,g.useMemo)((()=>({header:n,body:r,verificationButtonText:l,backButtonText:s,onVerificationButtonClick:u,onBackButtonClick:o})),[e,a.email,u,o,n,r,l,s]);return g.default.createElement(U,{...i})},[d.PasskeyLoginWithEmailOtpFallbackScreens.PasskeyAppend]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.login.passkeyPrompt"}),{emitEvent:t}=R(),[a,n]=(0,g.useState)(!1),r=(0,g.useMemo)((()=>g.default.createElement("span",null,e("header"),g.default.createElement("span",{className:"cb-link-primary",onClick:()=>{t(d.FlowHandlerEvents.ShowBenefits)}},e("button_showPasskeyBenefits")))),[e]),l=(0,g.useMemo)((()=>e("button_start")),[e]),s=(0,g.useMemo)((()=>e("button_skip")),[e]),o=(0,g.useCallback)((e=>"primary"===e?(n(!0),t(d.FlowHandlerEvents.PrimaryButton)):t(d.FlowHandlerEvents.SecondaryButton)),[t]),u=(0,g.useMemo)((()=>({header:r,primaryButton:l,secondaryButton:s,primaryLoading:a,onClick:o})),[r,l,s,a,o]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...u}))},[d.PasskeyLoginWithEmailOtpFallbackScreens.PasskeyError]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.login.passkeyError"}),{shortSession:t}=(0,u.useCorbado)(),{navigateBack:a,emitEvent:n}=R(),[r,l]=(0,g.useState)(!1),s=(0,g.useMemo)((()=>e("header")),[e]),o=(0,g.useMemo)((()=>e("body")),[e]),i=(0,g.useMemo)((()=>e("button_retry")),[e]),c=(0,g.useMemo)((()=>t?"":e("button_emailOtp")),[e]),m=(0,g.useMemo)((()=>e(t?"button_cancel":"button_back")),[e,t]),f=(0,g.useCallback)((e=>{switch(e){case"primary":return l(!0),n(d.FlowHandlerEvents.PrimaryButton);case"secondary":return n(d.FlowHandlerEvents.SecondaryButton);case"tertiary":return a()}}),[a,n]),E=(0,g.useMemo)((()=>({header:s,body:o,primaryButton:i,secondaryButton:c,tertiaryButton:m,primaryLoading:r,onClick:f})),[o,f,s,i,c,r,m]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...E}))},[d.PasskeyLoginWithEmailOtpFallbackScreens.PasskeyBenefits]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.login.passkeyBenefits"}),{emitEvent:t}=R(),[a,n]=(0,g.useState)(!1),r=(0,g.useMemo)((()=>e("header")),[e]),l=(0,g.useMemo)((()=>g.default.createElement(g.default.Fragment,null,e("body_introduction")," ",g.default.createElement("strong",null,e("body_loginMethods")))),[e]),s=(0,g.useMemo)((()=>e("button_start")),[e]),o=(0,g.useMemo)((()=>e("button_skip")),[e]),u=(0,g.useCallback)((async e=>"primary"===e?(n(!0),t(d.FlowHandlerEvents.PrimaryButton)):t(d.FlowHandlerEvents.SecondaryButton)),[t,n]),i=(0,g.useMemo)((()=>({header:r,body:l,primaryButton:s,secondaryButton:o,primaryLoading:a,onClick:u})),[l,r,s,o,a,u]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...i}))}},W={name:"",fullName:""},q={[d.PasskeySignupWithEmailOtpFallbackScreens.Start]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.signup.start"}),{currentUserState:t,emitEvent:a}=R(),[n,r]=(0,g.useState)({...W}),[l,s]=(0,g.useState)(null),[o,u]=(0,g.useState)(null),[i,c]=(0,g.useState)(!1);(0,g.useEffect)((()=>{c(!1),r({name:t.email||"",fullName:t.fullName||""}),s(null),u(null),t.emailError&&s(t.emailError),t.userNameError&&u(t.userNameError)}),[t]);const m=e=>{const{value:t,name:a}=e.target;r((e=>({...e,[a]:t})))};return g.default.createElement(g.default.Fragment,null,g.default.createElement(x,null,e("header")),g.default.createElement(M,null,e("subheader"),g.default.createElement("span",{className:"cb-link-secondary",onClick:()=>{a(d.FlowHandlerEvents.ChangeFlow)}},e("button_login"))),g.default.createElement(O,{onSubmit:()=>{c(!0),a(d.FlowHandlerEvents.PrimaryButton,{userStateUpdate:{email:n.name,fullName:n.fullName}})},submitButtonText:e("button_submit"),disableSubmitButton:i,loading:i},g.default.createElement(F,{name:"fullName",label:e("textField_name"),onChange:m,value:n.fullName,error:null==o?void 0:o.translatedMessage}),g.default.createElement(F,{name:"name",type:"email",autoComplete:"email",label:e("textField_email"),onChange:m,value:n.name,error:null==l?void 0:l.translatedMessage})))},[d.PasskeySignupWithEmailOtpFallbackScreens.CreatePasskey]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.signup.passkey"}),{navigateBack:t,currentUserState:a,emitEvent:n}=R(),[r,l]=(0,g.useState)(!1),[s,o]=(0,g.useState)(!1);(0,g.useEffect)((()=>{l(!1),o(!1)}),[a]);const u=(0,g.useMemo)((()=>g.default.createElement("span",null,e("header"),g.default.createElement("span",{className:"cb-link-primary",onClick:()=>{n(d.FlowHandlerEvents.ShowBenefits)}},e("button_showPasskeyBenefits")))),[e]),i=(0,g.useMemo)((()=>g.default.createElement("span",null,e("body")," ",g.default.createElement("span",{className:"cb-text-secondary"},a.email),".")),[e]),c=(0,g.useMemo)((()=>e("button_start")),[e]),m=(0,g.useMemo)((()=>e("button_emailOtp")),[e]),f=(0,g.useMemo)((()=>e("button_back")),[e]),E=(0,g.useCallback)((()=>t()),[t]),y=(0,g.useCallback)((e=>{switch(e){case"primary":return l(!0),n(d.FlowHandlerEvents.PrimaryButton);case"secondary":return o(!0),n(d.FlowHandlerEvents.SecondaryButton);case"tertiary":return t()}}),[E]),p=(0,g.useMemo)((()=>({header:u,subHeader:i,primaryButton:c,showHorizontalRule:!0,secondaryButton:m,tertiaryButton:f,primaryLoading:r,secondaryLoading:s,onClick:y})),[u,i,c,m,f,r,s,y]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...p}))},[d.PasskeySignupWithEmailOtpFallbackScreens.EnterOtp]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.signup.emailOtp"}),{emitEvent:t,currentUserState:a}=R(),n=e("header"),r=g.default.createElement(g.default.Fragment,null,e("body_text1"),g.default.createElement("span",{className:"cb-text-secondary"},a.email),e("body_text2")),l=e("button_verify"),s=e("button_back"),o=(0,g.useCallback)((()=>t(d.FlowHandlerEvents.SecondaryButton)),[]),u=(0,g.useCallback)((async(e,a)=>{a(!0),await t(d.FlowHandlerEvents.PrimaryButton,{emailOTPCode:e})}),[]),i=(0,g.useMemo)((()=>({header:n,body:r,verificationButtonText:l,backButtonText:s,onVerificationButtonClick:u,onBackButtonClick:o})),[e,a,u,o,n,r,l,s]);return g.default.createElement(U,{...i})},[d.PasskeySignupWithEmailOtpFallbackScreens.PasskeyAppend]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.signup.passkeyPrompt"}),{emitEvent:t}=R(),[a,n]=(0,g.useState)(!1),r=(0,g.useMemo)((()=>g.default.createElement("span",null,e("header"),g.default.createElement("span",{className:"cb-link-primary",onClick:()=>{t(d.FlowHandlerEvents.ShowBenefits)}},e("button_showPasskeyBenefits")))),[e]),l=(0,g.useMemo)((()=>e("button_start")),[e]),s=(0,g.useMemo)((()=>e("button_skip")),[e]),o=(0,g.useCallback)((e=>"primary"===e?(n(!0),t(d.FlowHandlerEvents.PrimaryButton)):t(d.FlowHandlerEvents.SecondaryButton)),[t]),u=(0,g.useMemo)((()=>({header:r,primaryButton:l,secondaryButton:s,onClick:o,loading:a})),[r,l,s,a,o]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...u}))},[d.PasskeySignupWithEmailOtpFallbackScreens.PasskeyBenefits]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.signup.passkeyBenefits"}),{navigateBack:t,emitEvent:a}=R(),[n,r]=(0,g.useState)(!1),[l,s]=(0,g.useState)(!1),o=(0,g.useMemo)((()=>e("header")),[e]),u=(0,g.useMemo)((()=>g.default.createElement(g.default.Fragment,null,e("body_introduction")," ",g.default.createElement("strong",null,e("body_loginMethods")))),[e]),i=(0,g.useMemo)((()=>e("button_start")),[e]),c=(0,g.useMemo)((()=>e("button_skip")),[e]),m=(0,g.useCallback)((e=>{switch(e){case"primary":return r(!0),a(d.FlowHandlerEvents.PrimaryButton);case"secondary":return s(!0),a(d.FlowHandlerEvents.SecondaryButton);case"tertiary":return t()}}),[t,a]),f=(0,g.useMemo)((()=>({header:o,body:u,primaryButton:i,secondaryButton:c,primaryLoading:n,secondaryLoading:l,onClick:m})),[u,o,i,c,n,l,m]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...f}))},[d.PasskeySignupWithEmailOtpFallbackScreens.PasskeyWelcome]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.signup.passkeySuccess"}),{emitEvent:t}=R(),a=(0,g.useMemo)((()=>e("header")),[e]),n=(0,g.useMemo)((()=>e("subheader")),[e]),r=(0,g.useMemo)((()=>g.default.createElement("span",null,e("body_text1")," ",g.default.createElement("strong",null,e("body_text2"))," ",e("body_text3"))),[e]),l=(0,g.useMemo)((()=>e("button")),[e]),s=(0,g.useCallback)((()=>{t(d.FlowHandlerEvents.PrimaryButton)}),[t]),o=(0,g.useMemo)((()=>({header:a,secondaryHeader:n,body:r,primaryButton:l,onClick:s})),[a,n,r,l,s]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...o}))},[d.PasskeySignupWithEmailOtpFallbackScreens.PasskeyError]:()=>{const{t:e}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.signup.passkeyError"}),{shortSession:t}=(0,u.useCorbado)(),{navigateBack:a,emitEvent:n}=R(),[r,l]=(0,g.useState)(!1),[s,o]=(0,g.useState)(!1),i=(0,g.useMemo)((()=>e("header")),[e]),c=(0,g.useMemo)((()=>g.default.createElement("span",null,e("body_errorMessage1"),g.default.createElement("span",{className:"cb-link-primary",onClick:()=>{n(d.FlowHandlerEvents.ShowBenefits)}},e("button_showPasskeyBenefits")),e("body_errorMessage2"))),[e]),m=(0,g.useMemo)((()=>e("button_retry")),[e]),f=(0,g.useMemo)((()=>t?"":e("button_emailOtp")),[e]),E=(0,g.useMemo)((()=>e(t?"button_cancel":"button_back")),[e,t]),y=(0,g.useCallback)((e=>{switch(e){case"primary":return l(!0),n(d.FlowHandlerEvents.PrimaryButton);case"secondary":return o(!0),n(d.FlowHandlerEvents.SecondaryButton);case"tertiary":return a()}}),[a,n]),p=(0,g.useMemo)((()=>({header:i,body:c,primaryButton:m,secondaryButton:f,tertiaryButton:E,primaryLoading:r,secondaryLoading:s,onClick:y})),[c,y,i,m,f,r,f,E]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(L,{...p}))}},I={[d.SignUpFlowNames.PasskeySignupWithEmailOTPFallback]:q,[d.LoginFlowNames.PasskeyLoginWithEmailOTPFallback]:D},$=()=>g.default.createElement("div",{className:"cb-loading"},g.default.createElement(v,null)),V=({error:e})=>g.default.createElement("div",{className:"container"},g.default.createElement("div",{className:"title"},e.name," ",g.default.createElement("br",null),"(","client"===e.type?"client side":"server side",")"),g.default.createElement("div",{className:"error-details"},g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":Message"),g.default.createElement("div",{className:"error-detail-value"},e.message)),g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":Type"),g.default.createElement("div",{className:"error-detail-value"},e.detailedType)),g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":Link"),g.default.createElement("a",{className:"error-detail-value",href:e.link},e.link))),g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":RequestID"),g.default.createElement("div",{className:"error-detail-value"},e.requestId)),e.details&&g.default.createElement("button",{className:"error-button",onClick:()=>{window.open(e.details,"_blank")}},"See browser console for more details")),z=e=>{const{t}=(0,b.useTranslation)("translation",{keyPrefix:"authenticationFlows.unexpectedError"});return g.default.createElement("div",{className:"error-page"},g.default.createElement("div",{className:"prod-error-container"},g.default.createElement("div",{className:"prod-error-title"},t("header")),g.default.createElement("div",{className:"prod-error-details"},g.default.createElement("div",{className:"prod-error-apology"},t("subheader")),g.default.createElement("div",null,e?t("body_withCustomerSupport",e):t("body_noCustomerSupport"))),g.default.createElement("button",{className:"prod-error-button",onClick:()=>window.location.reload()},t("button"))))};class j extends g.default.Component{constructor(e){super(e),this.state={error:void 0}}static getDerivedStateFromError(e){return console.error(e),{hasError:!0}}componentDidCatch(e,t){console.error(e,t)}render(){return!this.props.globalError&&!this.state.error||this.props.isDevMode?this.props.globalError?g.default.createElement("div",{className:"error-page"},g.default.createElement(V,{error:this.props.globalError})):this.props.children:g.default.createElement(z,{customerSupportEmail:this.props.customerSupportEmail})}}const Z=({isDevMode:e,customerSupportEmail:t})=>{const{currentFlow:a,currentScreen:n,initialized:r}=R(),{globalError:l}=(0,u.useCorbado)(),[s,o]=(0,g.useState)({});(0,g.useEffect)((()=>{const e=I[a];o(null!=e?e:{})}),[a]);const i=(0,g.useMemo)((()=>s[n]),[s,n]),c=(0,g.useCallback)((()=>{const e=s[d.CommonScreens.End];return e?g.default.createElement(e,null):null}),[s]);return g.default.createElement(j,{globalError:l,isDevMode:e,customerSupportEmail:t},r?i?g.default.createElement(i,null):g.default.createElement(c,null):g.default.createElement($,null))},G=({children:e,...t})=>{const{corbadoApp:a,getProjectConfig:n,user:r}=(0,u.useCorbado)(),[l,s]=(0,g.useState)(),[o,i]=(0,g.useState)(d.CommonScreens.Start),[c,f]=(0,g.useState)({}),[b,E]=(0,g.useState)(d.SignUpFlowNames.PasskeySignupWithEmailOTPFallback),[y,p]=(0,g.useState)(!1),k=(0,g.useRef)(0),v=(0,g.useRef)(0),h=(0,g.useRef)(0);(0,g.useEffect)((()=>{if(!y)return(async()=>{const e=await n();if(e.err)return;const r=new d.FlowHandler(e.val,t.onLoggedIn);k.current=r.onScreenChange((e=>i(e))),v.current=r.onFlowChange((e=>E(e))),h.current=r.onUserStateChange((e=>{f(e)})),await r.init(a,m.default),s(r),p(!0)})(),()=>{null==l||l.removeOnFlowChangeCallback(v.current),null==l||l.removeOnScreenChangeCallback(k.current),null==l||l.removeOnUserStateChange(h.current)}}),[]),(0,g.useEffect)((()=>{y&&r&&(null==l||l.update(r))}),[y,r]);const w=(0,g.useCallback)((()=>{var e;return null!==(e=null==l?void 0:l.navigateBack())&&void 0!==e?e:d.CommonScreens.Start}),[l]),S=(0,g.useCallback)(((e,t)=>null==l?void 0:l.handleStateUpdate(e,t)),[l]),C=(0,g.useMemo)((()=>({currentFlow:b,currentScreen:o,currentUserState:c,initialized:y,navigateBack:w,emitEvent:S})),[b,o,c,y,w]);return g.default.createElement(A.Provider,{value:C},e)},X=({onLoggedIn:e,isDevMode:t=!1,customerSupportEmail:a=""})=>g.default.createElement("div",{className:"cb-container"},g.default.createElement(G,{onLoggedIn:e},g.default.createElement(Z,{isDevMode:t,customerSupportEmail:a}))),Y=g.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},g.default.createElement("path",{d:"M120-160v-112q0-34 17.5-62.5T184-378q62-31 126-46.5T440-440q20 0 40 1.5t40 4.5q-4 58 21 109.5t73 84.5v80H120ZM760-40l-60-60v-186q-44-13-72-49.5T600-420q0-58 41-99t99-41q58 0 99 41t41 99q0 45-25.5 80T790-290l50 50-60 60 60 60-80 80ZM440-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm300 80q17 0 28.5-11.5T780-440q0-17-11.5-28.5T740-480q-17 0-28.5 11.5T700-440q0 17 11.5 28.5T740-400Z"})),K=({aaguid:e})=>{var t,a;const n=d.aaguidMappings[e],r=(0,d.hasDarkMode)()&&null!==(t=null==n?void 0:n.iconDark)&&void 0!==t?t:null==n?void 0:n.icon;return g.default.createElement("div",{className:"cb-passkey-list-icon"},r?g.default.createElement("img",{src:r,alt:null!==(a=null==n?void 0:n.name)&&void 0!==a?a:"Passkey"}):g.default.createElement(g.default.Fragment,null,Y))},J=({handlerPasskeyCreate:e})=>{const{t}=(0,b.useTranslation)("translation",{keyPrefix:"passkeysList"}),[a,n]=(0,g.useState)(!1),[r,l]=(0,g.useState)(!1),s=()=>{n(!1)};return g.default.createElement("div",null,g.default.createElement(w,{variant:"primary",className:"cb-passkey-list-primary-button",isLoading:r,disabled:r,onClick:()=>{(async()=>{var t;l(!0);const a=await e();l(!1),a.err&&"errors.passkeyAlreadyExists"===(null===(t=a.val)||void 0===t?void 0:t.name)&&n(!0)})()}},t("button_createPasskey")),g.default.createElement(T,{isOpen:a,header:t("dialog_passkeyAlreadyExists.header"),body:t("dialog_passkeyAlreadyExists.body"),confirmText:t("dialog_passkeyAlreadyExists.button_confirm"),onClose:s,onConfirm:s}))},Q=({passkeyId:e,onPasskeyDelete:t})=>{const{t:a}=(0,b.useTranslation)("translation",{keyPrefix:"passkeysList.dialog_delete"}),[n,r]=(0,g.useState)(!1),l=()=>{r(!1)};return g.default.createElement("div",{className:"cb-passkey-list-icon"},g.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",className:"cb-passkey-list-delete",onClick:()=>{r(!0)}},g.default.createElement("path",{d:"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"})),g.default.createElement(T,{inverseButtonVariants:!0,isOpen:n,header:a("header"),body:a("body"),confirmText:a("button_confirm"),cancelText:a("button_cancel"),onClose:l,onConfirm:async()=>{await t(e),l()}}))},ee=({passkey:e})=>{var t,a;const{t:n}=(0,b.useTranslation)("translation",{keyPrefix:"passkeysList"}),r=(0,d.getParsedUA)(e.userAgent),l=null!==(a=null===(t=d.aaguidMappings[e.aaguid])||void 0===t?void 0:t.name)&&void 0!==a?a:"Passkey";return g.default.createElement("div",{className:"cb-passkey-list-details"},g.default.createElement("div",{className:"cb-passkey-list-header"},g.default.createElement("div",{className:"cb-passkey-list-header-title"},l),e.backupState?g.default.createElement("div",{className:"cb-passkey-list-header-badge"},n("badge_synced")):null),g.default.createElement("div",null,n("field_credentialId"),e.id),g.default.createElement("div",null,g.default.createElement(b.Trans,{i18nKey:"field_created",t:n,values:{date:e.created,browser:r.browser.name,os:r.os.name}})),g.default.createElement("div",null,n("field_lastUsed"),e.lastUsed),g.default.createElement("div",null,n("field_status"),e.status))},te=()=>{const{getPasskeys:e,appendPasskey:t,deletePasskey:a,shortSession:n}=(0,u.useCorbado)(),{t:r}=(0,b.useTranslation)("translation",{keyPrefix:"passkeysList"}),[l,s]=(0,g.useState)();(0,g.useEffect)((()=>{n&&o()}),[n]);const o=async()=>{const t=await e();if(t.err)throw new Error(t.val.name);s(t.val)},i=async e=>{await a(e),await o()};return n?g.default.createElement("div",null,l?l.passkeys.map((e=>g.default.createElement("div",{key:e.id,className:"cb-passkey-list-card"},g.default.createElement(K,{aaguid:e.aaguid}),g.default.createElement(ee,{passkey:e}),g.default.createElement(Q,{passkeyId:e.id,onPasskeyDelete:i})))):g.default.createElement(v,null),l&&0===l.passkeys.length?g.default.createElement("div",null,r("message_noPasskeys")):null,g.default.createElement(J,{handlerPasskeyCreate:async()=>{const e=await t();return e.ok&&await o(),e}})):g.default.createElement("div",null,r("warning_notLoggedIn"))};var ae=o.rX,ne=o.Hg,re=o.BN,le=o.XZ,se=o.km;export{ae as CorbadoAuth,ne as CorbadoProvider,re as CorbadoThemes,le as PasskeyList,se as useCorbado};
+import*as e from"@corbado/react-sdk";import*as t from"@corbado/shared-ui";import*as a from"i18next";import*as l from"i18next-browser-languagedetector";import*as n from"react-i18next";import*as r from"react";var M={d:(e,t)=>{for(var a in t)M.o(t,a)&&!M.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},s={};M.d(s,{rX:()=>me,Hg:()=>D,BN:()=>o.CorbadoThemes,m3:()=>je,XZ:()=>Te,Mo:()=>Ee,km:()=>u.useCorbado});const u=(i={CorbadoProvider:()=>e.CorbadoProvider,useCorbado:()=>e.useCorbado},c={},M.d(c,i),c);var i,c;const o=(e=>{var t={};return M.d(t,e),t})({CorbadoThemes:()=>t.CorbadoThemes,FlowHandler:()=>t.FlowHandler,FlowHandlerEvents:()=>t.FlowHandlerEvents,FlowType:()=>t.FlowType,LoginFlowNames:()=>t.LoginFlowNames,ScreenNames:()=>t.ScreenNames,SignUpFlowNames:()=>t.SignUpFlowNames,aaguidMappings:()=>t.aaguidMappings,getParsedUA:()=>t.getParsedUA,handleTheming:()=>t.handleTheming,hasDarkMode:()=>t.hasDarkMode,i18n:()=>t.i18n,notANumberRegex:()=>t.notANumberRegex,numberRegex:()=>t.numberRegex}),N=(e=>{var t={};return M.d(t,e),t})({default:()=>a.default}),d=(e=>{var t={};return M.d(t,e),t})({default:()=>l.default}),L=(e=>{var t={};return M.d(t,e),t})({Trans:()=>n.Trans,initReactI18next:()=>n.initReactI18next,useTranslation:()=>n.useTranslation}),m="en";N.default.use(L.initReactI18next).use(d.default).init({resources:{en:{translation:o.i18n.en},de:{translation:o.i18n.de}},keySeparator:".",fallbackLng:m});const j=e=>{var t;null===(t=null===document||void 0===document?void 0:document.querySelector("html"))||void 0===t||t.setAttribute("lang",e)},y=(e=!0,t=m,a=null)=>{const l=window.navigator.language;if(e&&t===m&&l===m&&!a)return;for(const[e,t]of Object.entries(null!=a?a:{}))N.default.addResourceBundle(e,"translation",t,!0,!0);const n=e?(e=>e.split("-")[0])(l):t;try{N.default.changeLanguage(n),j(n)}catch{N.default.changeLanguage(t),j(t)}},g=(e=>{var t={};return M.d(t,e),t})({createContext:()=>r.createContext,default:()=>r.default,forwardRef:()=>r.forwardRef,memo:()=>r.memo,useCallback:()=>r.useCallback,useContext:()=>r.useContext,useEffect:()=>r.useEffect,useMemo:()=>r.useMemo,useRef:()=>r.useRef,useState:()=>r.useState}),D=({children:e,...t})=>{const{defaultLanguage:a,autoDetectLanguage:l,customTranslations:n,darkMode:r,theme:M,...s}=t;return(0,g.useEffect)((()=>(y(l,a,n),(0,o.handleTheming)(null!=r?r:"auto",M))),[]),g.default.createElement(u.CorbadoProvider,{...s},e)},I=(0,g.memo)((({variant:e="primary",className:t=""})=>{const a=`${"primary"===e?"cb-spinner-primary":"cb-spinner-secondary"} ${t}`;return g.default.createElement("div",{className:a})}),((e,t)=>e.variant===t.variant&&e.className===t.className)),T=(0,g.forwardRef)((({isLoading:e=!1,disabled:t,children:a,...l},n)=>g.default.createElement("button",{disabled:e||t,ref:n,...l},e?g.default.createElement(I,null):a))),E=(0,g.forwardRef)((({isLoading:e,disabled:t,className:a,children:l,...n},r)=>g.default.createElement(T,{className:`${a} cb-button-primary`,isLoading:e,disabled:t,ref:r,children:l,...n}))),w=(0,g.forwardRef)((({isLoading:e,disabled:t,className:a,children:l,...n},r)=>g.default.createElement(T,{className:`${a} cb-button-secondary`,isLoading:e,disabled:t,ref:r,children:l,...n}))),z=(0,g.forwardRef)((({isLoading:e,disabled:t,className:a,children:l,...n},r)=>g.default.createElement(T,{className:`${a} cb-button-tertiary`,isLoading:e,disabled:t,ref:r,children:l,...n}))),C=({children:e,className:t=""})=>g.default.createElement("div",{className:`cb-horizontal-divider ${t}`},e),f=({src:e,alt:t="",onClick:a,className:l=""})=>g.default.createElement("img",{src:e,alt:t,onClick:a,className:`cb-icon ${a?"cb-pointer":""} ${l}`}),x=g.default.forwardRef((({id:e,className:t="",error:a,...l},n)=>{const r=`cb-input ${t} ${a?"cb-error":""}`;return g.default.createElement("input",{id:e,...l,className:r,autoComplete:l.autoComplete?l.autoComplete:"off",ref:n})})),k=({label:e,type:t,id:a,name:l,value:n,onChange:r,onFocus:M,onBlur:s,error:u,...i})=>{const[c,o]=g.default.useState(!1),N=`cb-form-input ${c?"cb-has-focus":""} ${n?"cb-has-content":""} ${u?"cb-has-error":""}`;return g.default.createElement(g.default.Fragment,null,g.default.createElement("div",{className:N},g.default.createElement(x,{type:t,id:a||l,name:l,value:n,placeholder:e,onChange:r,onFocus:e=>{o(!0),M&&M(e)},onBlur:e=>{o(!1),s&&s(e)},error:u,...i}),g.default.createElement("label",{htmlFor:a||l},e),u?g.default.createElement("div",{className:"cb-form-input-error"},g.default.createElement("p",{className:"cb-error"},u)):null))},S=({target:e="_blank",icon:t,label:a,href:l})=>g.default.createElement("a",{target:e,className:"cb-link-icon",href:l},t," ",g.default.createElement("p",null,a)),A=({emittedOTP:e,numberOfDigits:t=6,loading:a=!1,error:l})=>{const[n,r]=(0,g.useState)(new Array(t).fill("")),M=(0,g.useRef)([]);(0,g.useEffect)((()=>{M.current[0]&&M.current[0].focus()}),[]),(0,g.useEffect)((()=>{e(n)}),[n]);const s=e=>{e.preventDefault();const t=e.clipboardData.getData("text").slice(0,6).split("");t.every((e=>o.numberRegex.test(e)))&&(r(t.concat(new Array(6-t.length).fill(""))),M.current[t.length-1].focus())};return g.default.createElement("div",{className:"cb-email-otp-input-container"},n.map(((e,t)=>g.default.createElement(x,{key:t,ref:e=>e&&(M.current[t]=e),id:`otp-${t}`,value:e,type:"tel",inputMode:"numeric",pattern:"[0-9]*",maxLength:1,onChange:e=>((e,t)=>{const a=e.value;if(o.notANumberRegex.test(a))return;const l=t+1;if(n[t]){if(l>=n.length)return;r(n.map(((e,t)=>t===l?a:e))),l+1<n.length&&M.current[l+1].focus()}else r(n.map(((e,l)=>l===t?a:e))),l<n.length&&a&&M.current[l].focus()})(e.target,t),onKeyDown:e=>((e,t)=>{switch(e.key){case"ArrowLeft":t>0&&M.current[t-1].focus();break;case"ArrowRight":t<n.length-1&&M.current[t+1].focus();break;case"Backspace":n[t]?r(n.map(((e,a)=>a===t?"":e))):t>0&&(M.current[t-1].focus(),r(n.map(((e,a)=>a===t-1?"":e))))}})(e,t),onPaste:s,disabled:a,className:"cb-email-otp-input",autoFocus:0===t,error:l}))))},b=({children:e,className:t=""})=>g.default.createElement("h1",{className:`cb-header ${t}`},e),O=({children:e,className:t=""})=>g.default.createElement("h2",{className:`cb-subheader ${t}`},e),p=({children:e,className:t=""})=>g.default.createElement("p",{className:`cb-body text-center ${t}`},e),Y=e=>g.default.createElement(f,{src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij4KICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTYgMTljMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjdINnYxMnpNMTkgNGgtMy41bC0xLTFoLTVsLTEgMUg1djJoMTRWNHoiLz4KPC9zdmc+Cg==",alt:"delete",...e}),v=e=>g.default.createElement(f,{src:"data:image/svg+xml;base64,PHN2ZwogICAgICAgIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICAgICAgICB2aWV3Qm94PScwIC05NjAgOTYwIDk2MCcKPgogICAgPHBhdGggZD0nTTEyMC0xNjB2LTExMnEwLTM0IDE3LjUtNjIuNVQxODQtMzc4cTYyLTMxIDEyNi00Ni41VDQ0MC00NDBxMjAgMCA0MCAxLjV0NDAgNC41cS00IDU4IDIxIDEwOS41dDczIDg0LjV2ODBIMTIwWk03NjAtNDBsLTYwLTYwdi0xODZxLTQ0LTEzLTcyLTQ5LjVUNjAwLTQyMHEwLTU4IDQxLTk5dDk5LTQxcTU4IDAgOTkgNDF0NDEgOTlxMCA0NS0yNS41IDgwVDc5MC0yOTBsNTAgNTAtNjAgNjAgNjAgNjAtODAgODBaTTQ0MC00ODBxLTY2IDAtMTEzLTQ3dC00Ny0xMTNxMC02NiA0Ny0xMTN0MTEzLTQ3cTY2IDAgMTEzIDQ3dDQ3IDExM3EwIDY2LTQ3IDExM3QtMTEzIDQ3Wm0zMDAgODBxMTcgMCAyOC41LTExLjVUNzgwLTQ0MHEwLTE3LTExLjUtMjguNVQ3NDAtNDgwcS0xNyAwLTI4LjUgMTEuNVQ3MDAtNDQwcTAgMTcgMTEuNSAyOC41VDc0MC00MDBaJyAvPgo8L3N2Zz4K",alt:"passkey-default",...e}),Q=e=>g.default.createElement(f,{src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGZpbGw9IiM1YzZiYzAiIGQ9Ik00MiwzN2MwLDIuNzYyLTIuMjM4LDUtNSw1SDExYy0yLjc2MSwwLTUtMi4yMzgtNS01VjExYzAtMi43NjIsMi4yMzktNSw1LTVoMjZjMi43NjIsMCw1LDIuMjM4LDUsNQlWMzd6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTM0LDEzSDE0Yy0wLjU1MiwwLTEsMC40NDgtMSwxdjEyYzAsMC41NTIsMC40NDgsMSwxLDFoMjBjMC41NTIsMCwxLTAuNDQ4LDEtMVYxNAlDMzUsMTMuNDQ4LDM0LjU1MiwxMywzNCwxM3ogTTMzLDE3bC05LDRsLTktNHYtMmgxOFYxN3oiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCguNjMwNzIgMCAwIC42MzA3MiAtNzIuMDYzIDEyNy44NjYpIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTMyLjI2Ni0xNTAuNDkxaDIuMzg1bDEuMzg5LDMuNTUybDEuNDA3LTMuNTUyaDIuMzIybC0zLjQ5Niw4LjQxaC0yLjMzNyBsMC45NTctMi4yMjhMMTMyLjI2Ni0xNTAuNDkxeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNDIuMTg2LTE1MC42MzNjLTEuNzkyLDAtMi45MjQsMS42MDctMi45MjQsMy4yMDdjMCwxLjgwMSwxLjI0MiwzLjIyOCwyLjg5LDMuMjI4IGMxLjIzLDAsMS42OTMtMC43NDksMS42OTMtMC43NDl2MC41ODRoMi4wOHYtNi4xMjhoLTIuMDh2MC41NTdDMTQzLjg0Ni0xNDkuOTM0LDE0My4zMjgtMTUwLjYzMywxNDIuMTg2LTE1MC42MzN6IE0xNDIuNjI5LTE0OC42NjNjMC44MjcsMCwxLjI1MywwLjY1NCwxLjI1MywxLjI0NGMwLDAuNjM2LTAuNDU3LDEuMjU5LTEuMjUzLDEuMjU5Yy0wLjY2LDAtMS4yNTYtMC41MzktMS4yNTYtMS4yMzIgQzE0MS4zNzItMTQ4LjA5NSwxNDEuODUyLTE0OC42NjMsMTQyLjYyOS0xNDguNjYzeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNDYuNjQyLTE0NC4zNjN2LTguODM0aDIuMTc1djMuMjg0YzAsMCwwLjUxNy0wLjcxOSwxLjU5OS0wLjcxOSBjMS4zMjQsMCwyLjA5OSwwLjk4NiwyLjA5OSwyLjM5NnYzLjg3M2gtMi4xNTl2LTMuMzQzYzAtMC40NzctMC4yMjctMC45MzgtMC43NDItMC45MzhjLTAuNTI0LDAtMC43OTcsMC40NjgtMC43OTcsMC45Mzh2My4zNDMgSDE0Ni42NDJ6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE1Ni4yMjQtMTUwLjYzMmMtMi4wNTIsMC0zLjI3NCwxLjU2LTMuMjc0LDMuMjMyYzAsMS45MDIsMS40NzksMy4yMDMsMy4yODEsMy4yMDMgYzEuNzQ3LDAsMy4yNzUtMS4yNDEsMy4yNzUtMy4xNzFDMTU5LjUwNy0xNDkuNDc5LDE1Ny45MDctMTUwLjYzMiwxNTYuMjI0LTE1MC42MzJ6IE0xNTYuMjQ0LTE0OC42NDUgYzAuNzI1LDAsMS4yMjYsMC42MDQsMS4yMjYsMS4yNDdjMCwwLjU0OS0wLjQ2NywxLjIyNi0xLjIyNiwxLjIyNmMtMC42OTUsMC0xLjIxNy0wLjU1OC0xLjIxNy0xLjIzMiBDMTU1LjAyNy0xNDguMDUzLDE1NS40Ni0xNDguNjQ1LDE1Ni4yNDQtMTQ4LjY0NXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYzLjEzMS0xNTAuNjMyYy0yLjA1MiwwLTMuMjc0LDEuNTYtMy4yNzQsMy4yMzJjMCwxLjkwMiwxLjQ3OSwzLjIwMywzLjI4MSwzLjIwMyBjMS43NDcsMCwzLjI3NS0xLjI0MSwzLjI3NS0zLjE3MUMxNjYuNDE0LTE0OS40NzksMTY0LjgxNC0xNTAuNjMyLDE2My4xMzEtMTUwLjYzMnogTTE2My4xNTEtMTQ4LjY0NSBjMC43MjUsMCwxLjIyNiwwLjYwNCwxLjIyNiwxLjI0N2MwLDAuNTQ5LTAuNDY3LDEuMjI2LTEuMjI2LDEuMjI2Yy0wLjY5NSwwLTEuMjE3LTAuNTU4LTEuMjE3LTEuMjMyIEMxNjEuOTMzLTE0OC4wNTMsMTYyLjM2Ny0xNDguNjQ1LDE2My4xNTEtMTQ4LjY0NXoiLz48Y2lyY2xlIGN4PSIxNjguMTMxIiBjeT0iLTE0NS42NzciIHI9IjEuNDQ1IiBmaWxsPSIjZmZmIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE3MC4wNS0xNDcuNjUzaC0yLjYwMWwyLjMwOC01LjU0NWgyLjU5MUwxNzAuMDUtMTQ3LjY1M3oiLz48L2c+PC9zdmc+",alt:"yahoo",...e}),h=e=>g.default.createElement(f,{src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGZpbGw9IiM0Y2FmNTAiIGQ9Ik00NSwxNi4ybC01LDIuNzVsLTUsNC43NUwzNSw0MGg3YzEuNjU3LDAsMy0xLjM0MywzLTNWMTYuMnoiLz48cGF0aCBmaWxsPSIjMWU4OGU1IiBkPSJNMywxNi4ybDMuNjE0LDEuNzFMMTMsMjMuN1Y0MEg2Yy0xLjY1NywwLTMtMS4zNDMtMy0zVjE2LjJ6Ii8+PHBvbHlnb24gZmlsbD0iI2U1MzkzNSIgcG9pbnRzPSIzNSwxMS4yIDI0LDE5LjQ1IDEzLDExLjIgMTIsMTcgMTMsMjMuNyAyNCwzMS45NSAzNSwyMy43IDM2LDE3Ii8+PHBhdGggZmlsbD0iI2M2MjgyOCIgZD0iTTMsMTIuMjk4VjE2LjJsMTAsNy41VjExLjJMOS44NzYsOC44NTlDOS4xMzIsOC4zMDEsOC4yMjgsOCw3LjI5OCw4aDBDNC45MjQsOCwzLDkuOTI0LDMsMTIuMjk4eiIvPjxwYXRoIGZpbGw9IiNmYmMwMmQiIGQ9Ik00NSwxMi4yOThWMTYuMmwtMTAsNy41VjExLjJsMy4xMjQtMi4zNDFDMzguODY4LDguMzAxLDM5Ljc3Miw4LDQwLjcwMiw4aDAgQzQzLjA3Niw4LDQ1LDkuOTI0LDQ1LDEyLjI5OHoiLz48L3N2Zz4=",alt:"gmail",...e}),U=e=>g.default.createElement(f,{src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaXZlbGxvXzEiIHg9IjBweCIKICAgICB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxODMxLjA4NSAxNzAzLjMzNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTgzMS4wODUgMTcwMy4zMzUiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgPHBhdGggZmlsbD0iIzBBMjc2NyIKICAgICAgICAgIGQ9Ik0xODMxLjA4Myw4OTQuMjVjMC4xLTE0LjMxOC03LjI5OC0yNy42NDQtMTkuNTAzLTM1LjEzMWgtMC4yMTNsLTAuNzY3LTAuNDI2bC02MzQuNDkyLTM3NS41ODUgIGMtMi43NC0xLjg1MS01LjU4My0zLjU0My04LjUxNy01LjA2N2MtMjQuNDk4LTEyLjYzOS01My41OTktMTIuNjM5LTc4LjA5OCwwYy0yLjkzNCwxLjUyNS01Ljc3NywzLjIxNi04LjUxNyw1LjA2N0w0NDYuNDg2LDg1OC42OTMgIGwtMC43NjYsMC40MjZjLTE5LjM5MiwxMi4wNTktMjUuMzM3LDM3LjU1Ni0xMy4yNzgsNTYuOTQ4YzMuNTUzLDUuNzE0LDguNDQ3LDEwLjQ3NCwxNC4yNTcsMTMuODY4bDYzNC40OTIsMzc1LjU4NSAgYzIuNzQ5LDEuODM1LDUuNTkyLDMuNTI3LDguNTE3LDUuMDY4YzI0LjQ5OCwxMi42MzksNTMuNTk5LDEyLjYzOSw3OC4wOTgsMGMyLjkyNS0xLjU0MSw1Ljc2Ny0zLjIzMiw4LjUxNy01LjA2OGw2MzQuNDkyLTM3NS41ODUgIEMxODIzLjQ5LDkyMi41NDUsMTgzMS4yMjgsOTA4LjkyMywxODMxLjA4Myw4OTQuMjV6Ii8+CiAgPHBhdGggZmlsbD0iIzAzNjRCOCIKICAgICAgICBkPSJNNTIwLjQ1Myw2NDMuNDc3aDQxNi4zOHYzODEuNjc0aC00MTYuMzhWNjQzLjQ3N3ogTTE3NDUuOTE3LDI1NS41VjgwLjkwOCAgYzEtNDMuNjUyLTMzLjU1Mi03OS44NjItNzcuMjAzLTgwLjkwOEg1ODguMjA0QzU0NC41NTIsMS4wNDYsNTEwLDM3LjI1Niw1MTEsODAuOTA4VjI1NS41bDYzOC43NSwxNzAuMzMzTDE3NDUuOTE3LDI1NS41eiIvPgogIDxwYXRoIGZpbGw9IiMwMDc4RDQiIGQ9Ik01MTEsMjU1LjVoNDI1LjgzM3YzODMuMjVINTExVjI1NS41eiIvPgogIDxwYXRoIGZpbGw9IiMyOEE4RUEiIGQ9Ik0xMzYyLjY2NywyNTUuNUg5MzYuODMzdjM4My4yNUwxMzYyLjY2NywxMDIyaDM4My4yNVY2MzguNzVMMTM2Mi42NjcsMjU1LjV6Ii8+CiAgPHBhdGggZmlsbD0iIzAwNzhENCIgZD0iTTkzNi44MzMsNjM4Ljc1aDQyNS44MzNWMTAyMkg5MzYuODMzVjYzOC43NXoiLz4KICA8cGF0aCBmaWxsPSIjMDM2NEI4IiBkPSJNOTM2LjgzMywxMDIyaDQyNS44MzN2MzgzLjI1SDkzNi44MzNWMTAyMnoiLz4KICA8cGF0aCBmaWxsPSIjMTQ0NDdEIiBkPSJNNTIwLjQ1MywxMDI1LjE1MWg0MTYuMzh2MzQ2Ljk2OWgtNDE2LjM4VjEwMjUuMTUxeiIvPgogIDxwYXRoIGZpbGw9IiMwMDc4RDQiIGQ9Ik0xMzYyLjY2NywxMDIyaDM4My4yNXYzODMuMjVoLTM4My4yNVYxMDIyeiIvPgogIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTEyOC40NTg0IiB5MT0iODExLjA4MzMiIHgyPSIxMTI4LjQ1ODQiIHkyPSIxLjk5ODIiCiAgICAgICAgICAgICAgICAgIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAxNzA1LjMzMzQpIj4KICAgICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiMzNUI4RjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzI4QThFQSIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIKICAgICAgICBkPSJNMTgxMS41OCw5MjcuNTkzbC0wLjgwOSwwLjQyNmwtNjM0LjQ5MiwzNTYuODQ4Yy0yLjc2OCwxLjcwMy01LjU3OCwzLjMyMS04LjUxNyw0Ljc2OSAgYy0xMC43NzcsNS4xMzItMjIuNDgxLDguMDI5LTM0LjQwNyw4LjUxN2wtMzQuNjYzLTIwLjI3Yy0yLjkyOS0xLjQ3LTUuNzczLTMuMTA1LTguNTE3LTQuODk3TDQ0Ny4xNjcsOTA2LjAwM2gtMC4yOTggIGwtMjEuMDM2LTExLjc1M3Y3MjIuMzg0YzAuMzI4LDQ4LjE5NiwzOS42NTMsODcuMDA2LDg3Ljg0OSw4Ni43aDEyMzAuOTE0YzAuNzI0LDAsMS4zNjMtMC4zNDEsMi4xMjktMC4zNDEgIGMxMC4xOC0wLjY1MSwyMC4yMTYtMi43NDUsMjkuODA4LTYuMjE3YzQuMTQ1LTEuNzU2LDguMTQ2LTMuODM1LDExLjk2Ni02LjIxN2MyLjg1My0xLjYxOCw3Ljc1LTUuMTUyLDcuNzUtNS4xNTIgIGMyMS44MTQtMTYuMTQyLDM0LjcyNi00MS42MzUsMzQuODMzLTY4Ljc3MlY4OTQuMjVDMTgzMS4wNjgsOTA4LjA2NywxODIzLjYxNiw5MjAuODA3LDE4MTEuNTgsOTI3LjU5M3oiLz4KICA8cGF0aCBvcGFjaXR5PSIwLjUiIGZpbGw9IiMwQTI3NjciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIgogICAgICAgIGQ9Ik0xNzk3LjAxNyw4OTEuMzk3djQ0LjI4N2wtNjYzLjQ0OCw0NTYuNzkxTDQ0Ni42OTksOTA2LjMwMSAgYzAtMC4yMzUtMC4xOTEtMC40MjYtMC40MjYtMC40MjZsMCwwbC02My4wMjMtMzcuODk5di0zMS45MzhsMjUuOTc2LTAuNDI2bDU0LjkzMiwzMS41MTJsMS4yNzcsMC40MjZsNC42ODQsMi45ODEgIGMwLDAsNjQ1LjU2MywzNjguMzQ2LDY0Ny4yNjcsMzY5LjE5N2wyNC42OTgsMTQuNDc4YzIuMTI5LTAuODUyLDQuMjU4LTEuNzAzLDYuODEzLTIuNTU1ICBjMS4yNzgtMC44NTIsNjQwLjg3OS0zNjAuNjgxLDY0MC44NzktMzYwLjY4MUwxNzk3LjAxNyw4OTEuMzk3eiIvPgogIDxwYXRoIGZpbGw9IiMxNDkwREYiCiAgICAgICAgZD0iTTE4MTEuNTgsOTI3LjU5M2wtMC44MDksMC40NjhsLTYzNC40OTIsMzU2Ljg0OGMtMi43NjgsMS43MDMtNS41NzgsMy4zMjEtOC41MTcsNC43NjkgIGMtMjQuNjQxLDEyLjAzOC01My40NTcsMTIuMDM4LTc4LjA5OCwwYy0yLjkxOC0xLjQ0NS01Ljc2LTMuMDM3LTguNTE3LTQuNzY5TDQ0Ni42NTcsOTI4LjA2MWwtMC43NjYtMC40NjggIGMtMTIuMjUtNi42NDItMTkuOTMtMTkuNDA5LTIwLjA1Ny0zMy4zNDN2NzIyLjM4NGMwLjMwNSw0OC4xODgsMzkuNjE2LDg3LjAwNCw4Ny44MDMsODYuN2MwLjAwMSwwLDAuMDAyLDAsMC4wMDQsMGgxMjI5LjYzNiAgYzQ4LjE4OCwwLjMwNyw4Ny41LTM4LjUwOSw4Ny44MDctODYuNjk2YzAtMC4wMDEsMC0wLjAwMiwwLTAuMDA0Vjg5NC4yNUMxODMxLjA2OCw5MDguMDY3LDE4MjMuNjE2LDkyMC44MDcsMTgxMS41OCw5MjcuNTkzeiIvPgogIDxwYXRoIG9wYWNpdHk9IjAuMSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiCiAgICAgICAgZD0iTTExODUuNTIsMTI3OS42MjlsLTkuNDk2LDUuMzIzYy0yLjc1MiwxLjc1Mi01LjU5NSwzLjM1OS04LjUxNyw0LjgxMiAgYy0xMC40NjIsNS4xMzUtMjEuODM4LDguMTQ2LTMzLjQ3LDguODU3bDI0MS40MDUsMjg1LjQ3OWw0MjEuMTA3LDEwMS40NzZjMTEuNTM5LTguNzE2LDIwLjcxNy0yMC4xNzgsMjYuNy0zMy4zNDNMMTE4NS41MiwxMjc5LjYyOSAgeiIvPgogIDxwYXRoIG9wYWNpdHk9IjAuMDUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIgogICAgICAgIGQ9Ik0xMjI4LjUyOSwxMjU1LjQ0MmwtNTIuNTA1LDI5LjUxYy0yLjc1MiwxLjc1Mi01LjU5NSwzLjM1OS04LjUxNyw0LjgxMiAgYy0xMC40NjIsNS4xMzUtMjEuODM4LDguMTQ2LTMzLjQ3LDguODU3bDExMy4xMDEsMzExLjgzOGw1NDkuNTM4LDc0Ljk4OWMyMS42NDktMTYuMjU0LDM0LjM5NC00MS43NDMsMzQuNDA3LTY4LjgxNXYtOS4zMjYgIEwxMjI4LjUyOSwxMjU1LjQ0MnoiLz4KICA8cGF0aCBmaWxsPSIjMjhBOEVBIgogICAgICAgIGQ9Ik01MTQuODMzLDE3MDMuMzMzaDEyMjguMzE2YzE4LjkwMSwwLjA5NiwzNy4zMzUtNS44NzQsNTIuNTktMTcuMDMzbC02OTcuMDg5LTQwOC4zMzEgIGMtMi45MjktMS40Ny01Ljc3My0zLjEwNS04LjUxNy00Ljg5N0w0NDcuMTI1LDkwNi4wODhoLTAuMjk4bC0yMC45OTMtMTEuODM4djcxOS45MTQgIEM0MjUuNzg2LDE2NjMuMzY0LDQ2NS42MzIsMTcwMy4yODYsNTE0LjgzMywxNzAzLjMzM0M1MTQuODMyLDE3MDMuMzMzLDUxNC44MzIsMTcwMy4zMzMsNTE0LjgzMywxNzAzLjMzM3oiLz4KICA8cGF0aCBvcGFjaXR5PSIwLjEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIgogICAgICAgIGQ9Ik0xMDIyLDQxOC43MjJ2OTA4LjMwM2MtMC4wNzYsMzEuODQ2LTE5LjQ0LDYwLjQ3MS00OC45NzEsNzIuMzkyICBjLTkuMTQ4LDMuOTMxLTE5LDUuOTYtMjguOTU3LDUuOTYySDQyNS44MzNWMzgzLjI1SDUxMXYtNDIuNTgzaDQzMy4wNzNDOTg3LjA5MiwzNDAuODMsMTAyMS45MDcsMzc1LjcwMiwxMDIyLDQxOC43MjJ6Ii8+CiAgPHBhdGggb3BhY2l0eT0iMC4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIKICAgICAgICBkPSJNOTc5LjQxNyw0NjEuMzA1djkwOC4zMDJjMC4xMDcsMTAuMjg3LTIuMDc0LDIwLjQ2OS02LjM4OCwyOS44MDggIGMtMTEuODI2LDI5LjE0OS00MC4wODMsNDguMjczLTcxLjU0LDQ4LjQxN0g0MjUuODMzVjM4My4yNWg0NzUuNjU2YzEyLjM1Ni0wLjEyNCwyNC41MzMsMi45NTgsMzUuMzQ0LDguOTQzICBDOTYyLjkzNyw0MDUuMzQ0LDk3OS40MDcsNDMyLjA3Niw5NzkuNDE3LDQ2MS4zMDV6Ii8+CiAgPHBhdGggb3BhY2l0eT0iMC4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIKICAgICAgICBkPSJNOTc5LjQxNyw0NjEuMzA1djgyMy4xMzZjLTAuMjA4LDQzLTM0LjkyOCw3Ny44NTMtNzcuOTI3LDc4LjIyNUg0MjUuODMzVjM4My4yNSAgaDQ3NS42NTZjMTIuMzU2LTAuMTI0LDI0LjUzMywyLjk1OCwzNS4zNDQsOC45NDNDOTYyLjkzNyw0MDUuMzQ0LDk3OS40MDcsNDMyLjA3Niw5NzkuNDE3LDQ2MS4zMDV6Ii8+CiAgPHBhdGggb3BhY2l0eT0iMC4yIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3ICAgICIKICAgICAgICBkPSJNOTM2LjgzMyw0NjEuMzA1djgyMy4xMzZjLTAuMDQ2LDQzLjA2Ny0zNC44NjEsNzguMDE1LTc3LjkyNyw3OC4yMjVINDI1LjgzMyAgVjM4My4yNWg0MzMuMDcyYzQzLjA2MiwwLjAyMyw3Ny45NTEsMzQuOTUxLDc3LjkyNyw3OC4wMTNDOTM2LjgzMyw0NjEuMjc3LDkzNi44MzMsNDYxLjI5MSw5MzYuODMzLDQ2MS4zMDV6Ii8+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8yXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxNjIuNzQ2OSIgeTE9IjEzODMuMDc0MSIgeDI9Ijc3NC4wODY0IiB5Mj0iMzI0LjI1OTIiCiAgICAgICAgICAgICAgICAgIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAxNzA1LjMzMzQpIj4KICAgICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiMxNzg0RDkiLz4KICAgIDxzdG9wIG9mZnNldD0iMC41IiBzdHlsZT0ic3RvcC1jb2xvcjojMTA3QUQ1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiMwQTYzQzkiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPHBhdGggZmlsbD0idXJsKCNTVkdJRF8yXykiCiAgICAgICAgZD0iTTc4LjA1NSwzODMuMjVoNzgwLjcyM2M0My4xMDksMCw3OC4wNTUsMzQuOTQ3LDc4LjA1NSw3OC4wNTV2NzgwLjcyMyAgYzAsNDMuMTA5LTM0Ljk0Niw3OC4wNTUtNzguMDU1LDc4LjA1NUg3OC4wNTVjLTQzLjEwOSwwLTc4LjA1NS0zNC45NDctNzguMDU1LTc4LjA1NVY0NjEuMzA1ICBDMCw0MTguMTk3LDM0Ljk0NywzODMuMjUsNzguMDU1LDM4My4yNXoiLz4KICA8cGF0aCBmaWxsPSIjRkZGRkZGIgogICAgICAgIGQ9Ik0yNDMuOTYsNzEwLjYzMWMxOS4yMzgtNDAuOTg4LDUwLjI5LTc1LjI4OSw4OS4xNy05OC40OTVjNDMuMDU3LTI0LjY1MSw5Mi4wODEtMzYuOTQsMTQxLjY3NS0zNS41MTUgIGM0NS45NjUtMC45OTcsOTEuMzIxLDEwLjY1NSwxMzEuMTE0LDMzLjY4M2MzNy40MTQsMjIuMzEyLDY3LjU0Nyw1NS4wMDQsODYuNzQyLDk0LjEwOWMyMC45MDQsNDMuMDksMzEuMzIyLDkwLjUxMiwzMC40MDUsMTM4LjM5NiAgYzEuMDEzLDUwLjA0My05LjcwNiw5OS42MjgtMzEuMjk5LDE0NC43ODNjLTE5LjY1Miw0MC41MDMtNTAuNzQxLDc0LjM2LTg5LjQyNSw5Ny4zODhjLTQxLjMyNywyMy43MzQtODguMzY3LDM1LjY5Mi0xMzYuMDExLDM0LjU3OCAgYy00Ni45NDcsMS4xMzMtOTMuMzAzLTEwLjY1MS0xMzQuMDEtMzQuMDY3Yy0zNy43MzgtMjIuMzQxLTY4LjI0OS01NS4wNy04Ny44OTItOTQuMjhjLTIxLjAyOC00Mi40NjctMzEuNTctODkuMzU1LTMwLjc0NS0xMzYuNzM1ICBDMjEyLjgwOCw4MDQuODU5LDIyMy4xNTgsNzU1LjY4NiwyNDMuOTYsNzEwLjYzMXogTTMzOS4wMDYsOTQxLjg1OGMxMC4yNTcsMjUuOTEyLDI3LjY1MSw0OC4zODUsNTAuMTYzLDY0LjgxMiAgYzIyLjkzLDE2LjAyNiw1MC4zODcsMjQuMjk0LDc4LjM1MywyMy41OTFjMjkuNzgzLDEuMTc4LDU5LjE0LTcuMzcyLDgzLjYzNC0yNC4zNThjMjIuMjI3LTE2LjM3NSwzOS4xNjQtMzguOTA5LDQ4LjcxNS02NC44MTIgIGMxMC42NzctMjguOTI4LDE1Ljk0Ni01OS41NzIsMTUuNTQzLTkwLjQwNGMwLjMzLTMxLjEyNy00LjYyMy02Mi4wODQtMTQuNjQ5LTkxLjU1NGMtOC44NTUtMjYuNjA3LTI1LjI0Ni01MC4wNjktNDcuMTgyLTY3LjUzNyAgYy0yMy44OC0xNy43OS01My4xNTgtMjYuODEzLTgyLjkxLTI1LjU1Yy0yOC41NzItMC43NC01Ni42NDQsNy41OTMtODAuMTg0LDIzLjgwNGMtMjIuODkzLDE2LjQ5Ni00MC42MTcsMzkuMTY4LTUxLjEsNjUuMzY1ICBjLTIzLjI1NSw2MC4wNDktMjMuMzc2LDEyNi41OTUtMC4zNDEsMTg2LjcyOEwzMzkuMDA2LDk0MS44NTh6Ii8+CiAgPHBhdGggZmlsbD0iIzUwRDlGRiIgZD0iTTEzNjIuNjY3LDI1NS41aDM4My4yNXYzODMuMjVoLTM4My4yNVYyNTUuNXoiLz4KICAgIDwvc3ZnPgo=",alt:"outlook",...e}),B=e=>g.default.createElement(f,{src:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMy4xNDI3IDIwLjk5OTlDMTAuODA3NyAxOS41NDM4IDkuMjUyNTQgMTYuOTUyMiA5LjI1MjU0IDEzLjk5NjhDOS4yNTI1NCAxMi40NzgzIDEwLjQ4MzMgMTEuMjQ3NiAxMi4wMDA4IDExLjI0NzZDMTMuNTE4NCAxMS4yNDc2IDE0Ljc0OTEgMTIuNDc4MyAxNC43NDkxIDEzLjk5NjhDMTQuNzQ5MSAxNS41MTUzIDE1Ljk3OTggMTYuNzQ2IDE3LjQ5NzQgMTYuNzQ2QzE5LjAxNDkgMTYuNzQ2IDIwLjI0NTcgMTUuNTE1MyAyMC4yNDU3IDEzLjk5NjhDMjAuMjQ1NyA5LjQ0MTM5IDE2LjU1NDQgNS43NDkyMiAxMi4wMDE3IDUuNzQ5MjJDNy40NDkwNyA1Ljc0OTIyIDMuNzU3ODEgOS40NDEzOSAzLjc1NzgxIDEzLjk5NjhDMy43NTc4MSAxNS4wMTIyIDMuODcxNDUgMTYuMDAxIDQuMDgwMzggMTYuOTU0TTguNDkwMjcgMjAuMjk4OUM3LjIzOTM4IDE4LjUxMzggNi41MDM1MSAxNi4zNDE5IDYuNTAzNTEgMTMuOTk2OEM2LjUwMzUxIDEwLjk1OTkgOC45NjQwNSA4LjQ5ODQ0IDExLjk5OTIgOC40OTg0NEMxNS4wMzQzIDguNDk4NDQgMTcuNDk0OCAxMC45NTk5IDE3LjQ5NDggMTMuOTk2OE0xNy43OTI3IDE5LjQ4MDZDMTcuNjkzNyAxOS40ODYxIDE3LjU5NjYgMTkuNDk1MyAxNy40OTY3IDE5LjQ5NTNDMTQuNDYxNiAxOS40OTUzIDEyLjAwMTEgMTcuMDMzOCAxMi4wMDExIDEzLjk5NjlNMTkuNjczNCA2LjQ3NjgyQzE3Ljc5OTMgNC4zNDgwMiAxNS4wNTkzIDMgMTIuMDAwNCAzQzguOTQxNDEgMyA2LjIwMTM4IDQuMzQ4MDIgNC4zMjczNCA2LjQ3NjgyIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=",alt:"fingerprint",...e}),P=e=>g.default.createElement(f,{src:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yNTYtMjAwLTU2LTU2IDIyNC0yMjQtMjI0LTIyNCA1Ni01NiAyMjQgMjI0IDIyNC0yMjQgNTYgNTYtMjI0IDIyNCAyMjQgMjI0LTU2IDU2LTIyNC0yMjQtMjI0IDIyNFoiLz48L3N2Zz4=",alt:"cancel",...e}),G=({isOpen:e,header:t,body:a,confirmText:l="Yes",cancelText:n,onClose:r,onConfirm:M})=>{const[s,u]=g.default.useState(!1),[i,c]=g.default.useState(!1);if(!e)return null;const o=async()=>{r&&(u(!0),await r(),u(!1))};return g.default.createElement("div",{className:"cb-dialog",onClick:()=>{o()}},g.default.createElement("div",{className:"cb-dialog-content",onClick:e=>e.stopPropagation()},g.default.createElement("div",{className:"cb-dialog-header"},t,g.default.createElement(P,{className:"cb-dialog-x-button",onClick:()=>{o()}})),a?g.default.createElement("div",{className:"cb-dialog-body"},a):null,g.default.createElement("div",{className:"cb-dialog-footer"},g.default.createElement(E,{className:"cb-dialog-button",isLoading:i,disabled:s,onClick:()=>{(async()=>{M&&(c(!0),await M(),c(!1))})()}},l),n?g.default.createElement(w,{className:"cb-dialog-button",isLoading:s,disabled:s,onClick:()=>{o()}},n):null)))},Z=()=>g.default.createElement("div",{className:"cb-email-links"},g.default.createElement(S,{icon:g.default.createElement(h,null),label:"Google",href:"https://mail.google.com/mail/u/0/#search/from%3A%40corbado+in%3Aanywhere"}),g.default.createElement(S,{icon:g.default.createElement(Q,null),label:"Yahoo",href:"https://mail.yahoo.com/d/search/keyword=corbado.com"}),g.default.createElement(S,{icon:g.default.createElement(U,null),label:"Outlook",href:"https://outlook.office.com/mail/0/inbox"})),F=({header:e,subHeader:t,secondaryHeader:a,body:l,primaryButton:n,secondaryButton:r,tertiaryButton:M,showHorizontalRule:s=!1,onClick:u,primaryLoading:i=!1,secondaryLoading:c=!1,hideFingerPrintIcon:o=!1})=>g.default.createElement("div",{className:"cb-layout-passkey"},g.default.createElement(b,null,e),t&&g.default.createElement(O,{className:"cb-subheader-spacing"},t),!o&&g.default.createElement(B,{className:"cb-finger-print-icon"}),a&&g.default.createElement(b,{className:"cb-secondary-header-spacing"},a),l&&g.default.createElement(p,{className:"cb-body-spacing"},l),n&&g.default.createElement(E,{onClick:()=>u("primary"),isLoading:i,disabled:c},n),s&&g.default.createElement(C,null,"or"),r&&g.default.createElement(w,{onClick:()=>u("secondary"),isLoading:c,disabled:i},r),M&&g.default.createElement(z,{onClick:()=>u("tertiary"),disabled:i||c},M)),H=({children:e,onSubmit:t,submitButtonText:a,disableSubmitButton:l,loading:n=!1})=>g.default.createElement("form",{className:"cb-form",onSubmit:e=>{e.preventDefault(),t()}},g.default.createElement("div",{className:"cb-form-body"},e),g.default.createElement(E,{disabled:l,isLoading:n},a)),V={currentFlowType:void 0,currentFlow:void 0,currentScreen:void 0,currentUserState:{},currentVerificationMethod:void 0,initialized:!1,navigateBack:()=>o.ScreenNames.Start,emitEvent:()=>Promise.reject(),changeFlow:()=>{}},W=(0,g.createContext)(V),R=(e=W)=>{const t=(0,g.useContext)(e);if(!t)throw new Error("Please make sure that your components are wrapped inside <FlowHandlerProvider />");return t},J=({header:e,body:t,verificationButtonText:a,backButtonText:l,onVerificationButtonClick:n,onBackButtonClick:r})=>{var M;const[s,u]=(0,g.useState)(""),{currentUserState:i}=R(),[c,o]=(0,g.useState)(!1),N=(0,g.useRef)(null);(0,g.useEffect)((()=>{o(!1)}),[i]);const d=(0,g.useCallback)((e=>{const t=e.join("");u(t),6===t.length&&n(t,o)}),[u]);return g.default.createElement("form",{className:"cb-email-otp",onSubmit:e=>{e.preventDefault(),n(s,o)}},g.default.createElement(b,null,e),g.default.createElement(p,null,t),g.default.createElement(Z,null),g.default.createElement(A,{emittedOTP:d,error:null===(M=i.emailOTPError)||void 0===M?void 0:M.translatedMessage}),i.emailOTPError&&g.default.createElement("p",{className:"cb-error"},i.emailOTPError.translatedMessage),g.default.createElement(E,{ref:N,isLoading:c},a),g.default.createElement(z,{onClick:r,disabled:c},l))},X=({header:e,body:t,resendButtonText:a,backButtonText:l,onResendButtonClick:n,onBackButtonClick:r})=>{const{currentUserState:M}=R(),[s,u]=(0,g.useState)(!1);return(0,g.useEffect)((()=>{u(!1)}),[M]),g.default.createElement("div",{className:"cb-email-otp"},g.default.createElement(b,null,e),g.default.createElement(p,null,t),g.default.createElement(Z,null),M.emailOTPError&&g.default.createElement("p",{className:"cb-error"},M.emailOTPError.translatedMessage),g.default.createElement(E,{onClick:()=>{n(u)},isLoading:s},a),g.default.createElement(z,{onClick:r,disabled:s},l))},_=({error:e})=>g.default.createElement("div",{className:"container"},g.default.createElement("div",{className:"title"},e.name," ",g.default.createElement("br",null),"(","client"===e.type?"client side":"server side",")"),g.default.createElement("div",{className:"error-details"},g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":Message"),g.default.createElement("div",{className:"error-detail-value"},e.message)),g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":Type"),g.default.createElement("div",{className:"error-detail-value"},e.detailedType)),g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":Link"),g.default.createElement("a",{className:"error-detail-value",href:e.link},e.link))),g.default.createElement("div",{className:"error-detail-row"},g.default.createElement("div",{className:"error-detail-title"},":RequestID"),g.default.createElement("div",{className:"error-detail-value"},e.requestId)),e.details&&g.default.createElement(E,{className:"error-button",onClick:()=>{window.open(e.details,"_blank")}},"See browser console for more details")),K=e=>{const{t}=(0,L.useTranslation)("translation",{keyPrefix:"authentication.unexpectedError"});return g.default.createElement("div",{className:"error-page"},g.default.createElement("div",{className:"prod-error-container"},g.default.createElement("div",{className:"prod-error-title"},t("header")),g.default.createElement("div",{className:"prod-error-details"},g.default.createElement("div",{className:"prod-error-apology"},t("subheader")),g.default.createElement("div",null,e?t("body_withCustomerSupport",e):t("body_noCustomerSupport"))),g.default.createElement(E,{onClick:()=>window.location.reload()},t("button"))))};class $ extends g.default.Component{constructor(e){super(e),this.state={error:void 0}}static getDerivedStateFromError(e){return console.error(e),{hasError:!0}}componentDidCatch(e,t){console.error(e,t)}render(){return!this.props.globalError&&!this.state.error||this.props.isDevMode?this.props.globalError?g.default.createElement("div",{className:"error-page"},g.default.createElement(_,{error:this.props.globalError})):this.props.children:g.default.createElement(K,{customerSupportEmail:this.props.customerSupportEmail})}}const q=({showSecondaryButton:e,navigateBackOnCancel:t})=>{const{navigateBack:a,emitEvent:l,currentFlowType:n,currentVerificationMethod:r}=R(),{t:M}=(0,L.useTranslation)("translation",{keyPrefix:`authentication.${n}.passkeyError`}),{shortSession:s}=(0,u.useCorbado)(),[i,c]=(0,g.useState)(!1),[N,d]=(0,g.useState)(!1),m=(0,g.useMemo)((()=>M("header")),[M]),j=(0,g.useMemo)((()=>"login"===n?M(`body.${r}`):g.default.createElement("span",null,M("body_errorMessage"),g.default.createElement("span",{className:"cb-link-primary",onClick:()=>{l(o.FlowHandlerEvents.ShowBenefits)}},M("button_showPasskeyBenefits")),M(`body_tryAgainMessage.${r}`))),[M]),y=(0,g.useMemo)((()=>M("button_retry")),[M]),D=(0,g.useMemo)((()=>e?M(`button_switchToAlternate.${r}`):""),[M]),I=(0,g.useMemo)((()=>M(t?"button_back":"button_cancel")),[M,s]),T=(0,g.useCallback)((e=>{switch(e){case"primary":return c(!0),l(o.FlowHandlerEvents.PrimaryButton);case"secondary":return d(!0),l(o.FlowHandlerEvents.SecondaryButton);case"tertiary":return t?a():l(o.FlowHandlerEvents.CancelPasskey)}}),[a,l]),E=(0,g.useMemo)((()=>({header:m,body:j,primaryButton:y,secondaryButton:D,tertiaryButton:I,primaryLoading:i,secondaryLoading:N,onClick:T})),[j,T,m,y,D,i,D,I]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(F,{...E}))},ee=()=>{const{emitEvent:e,currentUserState:t,currentFlowType:a}=R(),{t:l}=(0,L.useTranslation)("translation",{keyPrefix:`authentication.${a}.emailLinkSent`}),n=l("header"),r=g.default.createElement(g.default.Fragment,null,l("body_text1"),g.default.createElement("span",{className:"cb-text-secondary cb-text-bold"},t.email),l("body_text2")),M=l("button_sendLinkAgain"),s=l("button_back"),u=(0,g.useCallback)((()=>e(o.FlowHandlerEvents.CancelEmailLink)),[]),i=(0,g.useCallback)((async t=>{t(!0),await e(o.FlowHandlerEvents.PrimaryButton)}),[]),c=(0,g.useMemo)((()=>({header:n,body:r,resendButtonText:M,backButtonText:s,onResendButtonClick:i,onBackButtonClick:u})),[l,t.email,i,u,n,r,M,s]);return g.default.createElement(X,{...c})},te=()=>{const{emitEvent:e,currentUserState:t,currentFlowType:a}=R(),{t:l}=(0,L.useTranslation)("translation",{keyPrefix:`authentication.${a}.emailLinkVerification`}),[n,r]=(0,g.useState)(!0);(0,g.useEffect)((()=>{e(o.FlowHandlerEvents.VerifyLink)}),[]),(0,g.useEffect)((()=>{r(!1)}),[t]);const M=l("header"),s=l("button_sendLinkAgain"),u=l("button_back"),i=(0,g.useCallback)((()=>{e(o.FlowHandlerEvents.CancelEmailLink)}),[]),c=(0,g.useCallback)((()=>{r(!0),e(o.FlowHandlerEvents.PrimaryButton)}),[]);return g.default.createElement("div",{className:"cb-email-otp"},g.default.createElement(b,null,M),g.default.createElement(p,null,t.emailOTPError&&t.emailOTPError.translatedMessage),g.default.createElement(E,{onClick:c,isLoading:n,disabled:n},s),g.default.createElement(z,{onClick:i,disabled:n},u))},ae=()=>{const{emitEvent:e,currentUserState:t,currentFlowType:a}=R(),{t:l}=(0,L.useTranslation)("translation",{keyPrefix:`authentication.${a}.emailOtp`}),n=l("header"),r=g.default.createElement(g.default.Fragment,null,l("body_text1"),g.default.createElement("span",{className:"cb-text-secondary cb-text-bold"},t.email),l("body_text2")),M=l("button_verify"),s=l("button_back"),u=(0,g.useCallback)((()=>e(o.FlowHandlerEvents.CancelOTP)),[]),i=(0,g.useCallback)((async(t,a)=>{a(!0),await e(o.FlowHandlerEvents.PrimaryButton,{verificationCode:t})}),[]),c=(0,g.useMemo)((()=>({header:n,body:r,verificationButtonText:M,backButtonText:s,onVerificationButtonClick:i,onBackButtonClick:u})),[l,t.email,i,u,n,r,M,s]);return g.default.createElement(J,{...c})},le=()=>{const{emitEvent:e,currentFlowType:t}=R(),{t:a}=(0,L.useTranslation)("translation",{keyPrefix:`authentication.${t}.passkeyAppend`}),[l,n]=(0,g.useState)(!1),r=(0,g.useMemo)((()=>g.default.createElement("span",null,a("header"),g.default.createElement("span",{className:"cb-link-primary",onClick:()=>{e(o.FlowHandlerEvents.ShowBenefits)}},a("button_showPasskeyBenefits")))),[a]),M=(0,g.useMemo)((()=>a("button_start")),[a]),s=(0,g.useMemo)((()=>a("button_skip")),[a]),u=(0,g.useCallback)((t=>"primary"===t?(n(!0),e(o.FlowHandlerEvents.PrimaryButton)):e(o.FlowHandlerEvents.SecondaryButton)),[e]),i=(0,g.useMemo)((()=>({header:r,primaryButton:M,secondaryButton:s,primaryLoading:l,onClick:u})),[r,M,s,l,u]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(F,{...i}))},ne=()=>{const{emitEvent:e,currentFlowType:t}=R(),{t:a}=(0,L.useTranslation)("translation",{keyPrefix:`authentication.${t}.passkeyBenefits`}),[l,n]=(0,g.useState)(!1),r=(0,g.useMemo)((()=>a("header")),[a]),M=(0,g.useMemo)((()=>g.default.createElement(g.default.Fragment,null,a("body_introduction")," ",g.default.createElement("strong",null,a("body_loginMethods")))),[a]),s=(0,g.useMemo)((()=>a("button_start")),[a]),u=(0,g.useMemo)((()=>a("button_skip")),[a]),i=(0,g.useCallback)((async t=>"primary"===t?(n(!0),e(o.FlowHandlerEvents.PrimaryButton)):e(o.FlowHandlerEvents.SecondaryButton)),[e,n]),c=(0,g.useMemo)((()=>({header:r,body:M,primaryButton:s,secondaryButton:u,primaryLoading:l,onClick:i})),[M,r,s,u,l,i]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(F,{...c}))},re={[o.ScreenNames.Start]:()=>{var e;const{emitEvent:t,currentUserState:a,changeFlow:l}=R(),{t:n}=(0,L.useTranslation)("translation",{keyPrefix:"authentication.login.start"}),[r,M]=(0,g.useState)(""),[s,u]=(0,g.useState)(!1),i=(0,g.useRef)(!1);(0,g.useEffect)((()=>{i.current||(i.current=!0,t(o.FlowHandlerEvents.InitConditionalUI))}),[]),(0,g.useEffect)((()=>{u(!1)}),[a]);const c=(0,g.useCallback)((e=>{M(e.target.value)}),[]),N=(0,g.useCallback)((()=>{u(!0),t(o.FlowHandlerEvents.PrimaryButton,{userStateUpdate:{email:r}})}),[r,t]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(b,null,n("header")),g.default.createElement(O,null,n("subheader"),g.default.createElement("span",{className:"cb-link-secondary",onClick:l},n("button_signup"))),g.default.createElement(H,{onSubmit:N,submitButtonText:n("button_submit"),loading:s},g.default.createElement(k,{name:"username",type:"email",autoComplete:"email webauthn",label:n("textField_email"),onChange:c,value:r,error:null===(e=a.emailError)||void 0===e?void 0:e.translatedMessage})))},[o.ScreenNames.EmailOTPVerification]:ae,[o.ScreenNames.EmailLinkSent]:ee,[o.ScreenNames.EmailLinkVerification]:te,[o.ScreenNames.PasskeyAppend]:le,[o.ScreenNames.PasskeyError]:()=>g.default.createElement(q,{showSecondaryButton:!1,navigateBackOnCancel:!1}),[o.ScreenNames.PasskeyBenefits]:ne},Me=()=>{const{emitEvent:e,currentVerificationMethod:t}=R(),{t:a}=(0,L.useTranslation)("translation",{keyPrefix:"authentication.signup.passkeySuccess"}),l=(0,g.useMemo)((()=>a("header")),[a]),n=(0,g.useMemo)((()=>a("subheader")),[a]),r=(0,g.useMemo)((()=>g.default.createElement("span",null,a("body_text1")," ",g.default.createElement("strong",null,a(`body_text2.${t}`))," ",a("body_text3"))),[a]),M=(0,g.useMemo)((()=>a("button")),[a]),s=(0,g.useCallback)((()=>{e(o.FlowHandlerEvents.PrimaryButton)}),[e]),u=(0,g.useMemo)((()=>({header:l,secondaryHeader:n,body:r,primaryButton:M,onClick:s})),[l,n,r,M,s]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(F,{...u}))},se={name:"",fullName:""},ue=()=>{const{currentUserState:e,emitEvent:t,changeFlow:a}=R(),{t:l}=(0,L.useTranslation)("translation",{keyPrefix:"authentication.signup.start"}),[n,r]=(0,g.useState)({...se}),[M,s]=(0,g.useState)(null),[u,i]=(0,g.useState)(null),[c,N]=(0,g.useState)(!1);(0,g.useEffect)((()=>{N(!1),r({name:e.email||"",fullName:e.fullName||""}),s(null),i(null),e.emailError&&s(e.emailError),e.userNameError&&i(e.userNameError)}),[e]);const d=e=>{const{value:t,name:a}=e.target;r((e=>({...e,[a]:t})))};return g.default.createElement(g.default.Fragment,null,g.default.createElement(b,null,l("header")),g.default.createElement(O,null,l("subheader"),g.default.createElement("span",{className:"cb-link-secondary",onClick:a},l("button_login"))),g.default.createElement(H,{onSubmit:()=>{N(!0),t(o.FlowHandlerEvents.PrimaryButton,{userStateUpdate:{email:n.name,fullName:n.fullName}})},submitButtonText:l("button_submit"),disableSubmitButton:c,loading:c},g.default.createElement(k,{name:"fullName",label:l("textField_name"),onChange:d,value:n.fullName,error:null==u?void 0:u.translatedMessage}),g.default.createElement(k,{name:"name",type:"email",autoComplete:"email",label:l("textField_email"),onChange:d,value:n.name,error:null==M?void 0:M.translatedMessage})))},ie={[o.ScreenNames.Start]:ue,[o.ScreenNames.PasskeyCreate]:()=>{const{navigateBack:e,currentUserState:t,emitEvent:a,currentVerificationMethod:l}=R(),{t:n}=(0,L.useTranslation)("translation",{keyPrefix:"authentication.signup.passkeyCreate"}),[r,M]=(0,g.useState)(!1),[s,u]=(0,g.useState)(!1);(0,g.useEffect)((()=>{M(!1),u(!1)}),[t]);const i=(0,g.useMemo)((()=>g.default.createElement("span",null,n("header"),g.default.createElement("span",{className:"cb-link-primary",onClick:()=>{a(o.FlowHandlerEvents.ShowBenefits)}},n("headerButton_showPasskeyBenefits")))),[n]),c=(0,g.useMemo)((()=>g.default.createElement("span",null,n("body")," ",g.default.createElement("span",{className:"cb-text-secondary"},t.email),".")),[n]),N=(0,g.useMemo)((()=>n("button_start")),[n]),d=(0,g.useMemo)((()=>n(`button_switchToAlternate.${l}`)),[n]),m=(0,g.useMemo)((()=>n("button_back")),[n]),j=(0,g.useCallback)((()=>e()),[e]),y=(0,g.useCallback)((t=>{switch(t){case"primary":return M(!0),a(o.FlowHandlerEvents.PrimaryButton);case"secondary":return u(!0),a(o.FlowHandlerEvents.SecondaryButton);case"tertiary":return e()}}),[j]),D=(0,g.useMemo)((()=>({header:i,subHeader:c,primaryButton:N,showHorizontalRule:!0,secondaryButton:d,tertiaryButton:m,primaryLoading:r,secondaryLoading:s,onClick:y})),[i,c,N,d,m,r,s,y]);return g.default.createElement(g.default.Fragment,null,g.default.createElement(F,{...D}))},[o.ScreenNames.EmailOTPVerification]:ae,[o.ScreenNames.EmailLinkSent]:ee,[o.ScreenNames.EmailLinkVerification]:te,[o.ScreenNames.PasskeyAppend]:le,[o.ScreenNames.PasskeyBenefits]:ne,[o.ScreenNames.PasskeySuccess]:Me,[o.ScreenNames.PasskeyError]:()=>{const{shortSession:e}=(0,u.useCorbado)();return g.default.createElement(q,{showSecondaryButton:!e,navigateBackOnCancel:!e})}},ce={[o.ScreenNames.Start]:ue,[o.ScreenNames.EmailOTPVerification]:ae,[o.ScreenNames.EmailLinkSent]:ee,[o.ScreenNames.EmailLinkVerification]:te,[o.ScreenNames.PasskeyAppend]:le,[o.ScreenNames.PasskeyBenefits]:ne,[o.ScreenNames.PasskeySuccess]:Me,[o.ScreenNames.PasskeyError]:()=>g.default.createElement(q,{showSecondaryButton:!1,navigateBackOnCancel:!1})},oe={[o.SignUpFlowNames.PasskeySignupWithFallback]:ie,[o.SignUpFlowNames.SignupWithPasskeyAppend]:ce,[o.LoginFlowNames.PasskeyLoginWithFallback]:re},Ne=()=>g.default.createElement("div",{className:"cb-loading"},g.default.createElement(I,null)),de=({isDevMode:e,customerSupportEmail:t})=>{const{currentFlow:a,currentScreen:l,initialized:n}=R(),{globalError:r}=(0,u.useCorbado)(),[M,s]=(0,g.useState)({});(0,g.useEffect)((()=>{if(!a)return;const e=oe[a];s(null!=e?e:{})}),[a]);const i=(0,g.useMemo)((()=>l?M[l]:null),[M,l]),c=(0,g.useCallback)((()=>{const e=M[o.ScreenNames.End];return e?g.default.createElement(e,null):null}),[M]);return g.default.createElement($,{globalError:r,isDevMode:e,customerSupportEmail:t},n?i?g.default.createElement(i,null):g.default.createElement(c,null):g.default.createElement(Ne,null))},Le=({children:e,initialFlowType:t,onLoggedIn:a,onChangeFlow:l})=>{const{corbadoApp:n,getProjectConfig:r}=(0,u.useCorbado)(),[M,s]=(0,g.useState)(),[i,c]=(0,g.useState)(),[d,L]=(0,g.useState)({}),[m,j]=(0,g.useState)(),[y,D]=(0,g.useState)(!1),I=(0,g.useRef)(),T=(0,g.useRef)(),E=(0,g.useRef)(0),w=(0,g.useRef)(0);(0,g.useEffect)((()=>{if(!y)return(async()=>{const e=await r();if(e.err)return;const l=new o.FlowHandler(e.val,a,t);E.current=l.onFlowChange((e=>{e.flowName&&j(e.flowName),e.screenName&&c(e.screenName),e.flowType&&(I.current=e.flowType),e.verificationMethod&&(T.current=e.verificationMethod)})),w.current=l.onUserStateChange((e=>{L(e)})),await l.init(n,N.default),s(l),D(!0)})(),()=>{null==M||M.removeOnFlowChangeCallback(E.current),null==M||M.removeOnUserStateChange(w.current)}}),[]);const z=(0,g.useCallback)((()=>{var e;return null!==(e=null==M?void 0:M.navigateBack())&&void 0!==e?e:o.ScreenNames.Start}),[M]),C=(0,g.useCallback)(((e,t)=>null==M?void 0:M.handleStateUpdate(e,t)),[M]),f=(0,g.useCallback)((()=>{void 0===l&&C(o.FlowHandlerEvents.ChangeFlow),null==l||l()}),[t,l,C]),x=(0,g.useMemo)((()=>({currentFlowType:I.current,currentFlow:m,currentScreen:i,currentUserState:d,currentVerificationMethod:T.current,initialized:y,changeFlow:f,navigateBack:z,emitEvent:C})),[I.current,T.current,m,i,d,y,z]);return g.default.createElement(W.Provider,{value:x},e)},me=({onLoggedIn:e,isDevMode:t=!1,customerSupportEmail:a=""})=>g.default.createElement("div",{className:"cb-container"},g.default.createElement(Le,{onLoggedIn:e},g.default.createElement(de,{isDevMode:t,customerSupportEmail:a}))),je=({onLoggedIn:e,isDevMode:t=!1,customerSupportEmail:a="",navigateToSignUp:l})=>g.default.createElement("div",{className:"cb-container"},g.default.createElement(Le,{onLoggedIn:e,onChangeFlow:l,initialFlowType:o.FlowType.Login},g.default.createElement(de,{isDevMode:t,customerSupportEmail:a}))),ye=({aaguid:e})=>{var t,a;const l=o.aaguidMappings[e],n=(0,o.hasDarkMode)()&&null!==(t=null==l?void 0:l.iconDark)&&void 0!==t?t:null==l?void 0:l.icon;return g.default.createElement("div",{className:"cb-passkey-list-icon"},n?g.default.createElement("img",{src:n,alt:null!==(a=null==l?void 0:l.name)&&void 0!==a?a:"Passkey"}):g.default.createElement(v,null))},ge=({handlerPasskeyCreate:e})=>{const{t}=(0,L.useTranslation)("translation",{keyPrefix:"passkeysList"}),[a,l]=(0,g.useState)(!1),[n,r]=(0,g.useState)(!1),M=()=>{l(!1)};return g.default.createElement("div",null,g.default.createElement(E,{className:"cb-passkey-list-primary-button",isLoading:n,onClick:()=>{(async()=>{var t;r(!0);const a=await e();r(!1),a.err&&"errors.passkeyAlreadyExists"===(null===(t=a.val)||void 0===t?void 0:t.name)&&l(!0)})()}},t("button_createPasskey")),g.default.createElement(G,{isOpen:a,header:t("dialog_passkeyAlreadyExists.header"),body:t("dialog_passkeyAlreadyExists.body"),confirmText:t("dialog_passkeyAlreadyExists.button_confirm"),onClose:M,onConfirm:M}))},De=({passkeyId:e,onPasskeyDelete:t})=>{const{t:a}=(0,L.useTranslation)("translation",{keyPrefix:"passkeysList.dialog_delete"}),[l,n]=(0,g.useState)(!1),r=()=>{n(!1)};return g.default.createElement("div",{className:"cb-passkey-list-icon"},g.default.createElement(Y,{onClick:()=>{n(!0)}}),g.default.createElement(G,{isOpen:l,header:a("header"),body:a("body"),confirmText:a("button_confirm"),cancelText:a("button_cancel"),onClose:r,onConfirm:async()=>{await t(e),r()}}))},Ie=({passkey:e})=>{var t,a;const{t:l}=(0,L.useTranslation)("translation",{keyPrefix:"passkeysList"}),n=(0,o.getParsedUA)(e.userAgent),r=null!==(a=null===(t=o.aaguidMappings[e.aaguid])||void 0===t?void 0:t.name)&&void 0!==a?a:"Passkey";return g.default.createElement("div",{className:"cb-passkey-list-details"},g.default.createElement("div",{className:"cb-passkey-list-header"},g.default.createElement("div",{className:"cb-passkey-list-header-title"},r),e.backupState?g.default.createElement("div",{className:"cb-passkey-list-header-badge"},l("badge_synced")):null),g.default.createElement("div",null,l("field_credentialId"),e.id),g.default.createElement("div",null,g.default.createElement(L.Trans,{i18nKey:"field_created",t:l,values:{date:e.created,browser:n.browser.name,os:n.os.name}})),g.default.createElement("div",null,l("field_lastUsed"),e.lastUsed),g.default.createElement("div",null,l("field_status"),e.status))},Te=()=>{const{getPasskeys:e,appendPasskey:t,deletePasskey:a,shortSession:l}=(0,u.useCorbado)(),{t:n}=(0,L.useTranslation)("translation",{keyPrefix:"passkeysList"}),[r,M]=(0,g.useState)();(0,g.useEffect)((()=>{l&&s()}),[l]);const s=async()=>{const t=await e();if(t.err)throw new Error(t.val.name);M(t.val)},i=async e=>{await a(e),await s()};return l?g.default.createElement("div",null,r?r.passkeys.map((e=>g.default.createElement("div",{key:e.id,className:"cb-passkey-list-card"},g.default.createElement(ye,{aaguid:e.aaguid}),g.default.createElement(Ie,{passkey:e}),g.default.createElement(De,{passkeyId:e.id,onPasskeyDelete:i})))):g.default.createElement(I,null),r&&0===r.passkeys.length?g.default.createElement("div",null,n("message_noPasskeys")):null,g.default.createElement(ge,{handlerPasskeyCreate:async()=>{const e=await t();return e.ok&&await s(),e}})):g.default.createElement("div",null,n("warning_notLoggedIn"))},Ee=({onSignedUp:e,isDevMode:t=!1,customerSupportEmail:a="",navigateToLogin:l})=>g.default.createElement("div",{className:"cb-container"},g.default.createElement(Le,{onLoggedIn:e,onChangeFlow:l,initialFlowType:o.FlowType.SignUp},g.default.createElement(de,{isDevMode:t,customerSupportEmail:a})));var we=s.rX,ze=s.Hg,Ce=s.BN,fe=s.m3,xe=s.XZ,ke=s.Mo,Se=s.km;export{we as CorbadoAuth,ze as CorbadoProvider,Ce as CorbadoThemes,fe as Login,xe as PasskeyList,ke as SignUp,Se as useCorbado};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@corbado/react",
-  "version": "0.1.1-alpha.3",
+  "version": "0.1.1-alpha.4",
   "description": "This package provides all the functionalities and UI components needed by developers when integration Corbado's Authentication management system in their react application",
@@ -34,4 +34,4 @@ "author": "Abdullah Shahbaz <[e-mail]>",
   "dependencies": {
-    "@corbado/react-sdk": "^0.1.7-alpha.3",
-    "@corbado/shared-ui": "^0.1.1-alpha.3",
+    "@corbado/react-sdk": "^0.1.7-alpha.4",
+    "@corbado/shared-ui": "^0.1.1-alpha.4",
     "i18next": "23.5.1",
@@ -42,4 +42,4 @@ "i18next-browser-languagedetector": "7.1.0",
   "devDependencies": {
-    "@corbado/types": "^0.1.1-alpha.3",
-    "@corbado/web-core": "^0.1.7-alpha.3",
+    "@corbado/types": "^0.1.1-alpha.4",
+    "@corbado/web-core": "^0.1.7-alpha.4",
     "@svgr/webpack": "^8.1.0",
@@ -54,3 +54,3 @@ "@types/react": "^18.2.0",
   },
-  "gitHead": "746086968c769513b83f2c62d3ba4a6488425c92"
+  "gitHead": "3bd63094494204828688170d7461932d5786de53"
 }

README.md

@@ -0,25 +1,179 @@
+<img width="1070" alt="GitHub Repo Cover" src="https://github.com/corbado/corbado-php/assets/18458907/aa4f9df6-980b-4b24-bb2f-d71c0f480971">
+
 # @corbado/react
 
+[![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/corbado/javascript/blob/readme_documentation/LICENSE)
+[![Documentation](https://img.shields.io/badge/documentation-available-brightgreen)](https://docs.corbado.com/overview/welcome)
+[![Slack](https://img.shields.io/badge/slack-community-blueviolet)](https://join.slack.com/t/corbado/shared_invite/zt-1b7867yz8-V~Xr~ngmSGbt7IA~g16ZsQ)
+[![npm version](https://img.shields.io/npm/v/@corbado/react)](https://www.npmjs.com/package/@corbado/react)
+
+---
+
+## Table of Contents
+
+- [Overview](#overview)
+- [🚀 Getting Started](#-getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+  - [Setting up the package](#setting-up-the-package)
+- [📌 Usage](#-usage)
+  - [CorbadoAuth component](#corbadoauth-component)
+  - [PasskeyList component](#passkeylist-component)
+  - [Accessing Authentication State](#accessing-authentication-state)
+  - [Logging Out](#logging-out)
+- [💡 Example Application](#-example-application)
+- [📄 Documentation & Support](#-documentation--support)
+- [🔒 License](#-license)
+
+---
+
 ## Overview
 
-The @corbado/react JavaScript library empowers developers to build seamless passkey-first authentication into their applications. It facilitates user sign-up, login, and session management operations directly from your React app.
+The `@corbado/react` package provides a comprehensive solution for integrating passkey-based authentication in React applications.
+It simplifies the process of managing authentication states and user sessions with easy-to-use hooks and UI components.
 
-## Getting Started
+---
 
+## 🚀 Getting Started
+
 ### Prerequisites
 
-- React v16+
-- Node.js v14+
+- React v18+
+- Node.js `>=18.17.0` or later
 
-Please follow the steps in [Getting started](https://docs.corbado.com/overview/getting-started) to create and configure
-a project in the [Corbado developer panel](https://app.corbado.com/signin#register).
-
 ### Installation
 
-```sh
+```bash
 npm install @corbado/react
 ```
 
-## Noticeable concepts
+### Setting up the package
 
-- We allow this package to depend on react-sdk (for the logic) and on web-core (for the UI logic, namely the flow handler)
+Add `CorbadoProvider` to your main App component to wrap your application:
+
+```tsx
+import { CorbadoProvider } from '@corbado/react';
+
+function App() {
+  return (
+    <CorbadoProvider projectId='pro-XXXXXXXXXXXXXXXXXXXX'>
+      {/* Your routes and other components go here */}
+    </CorbadoProvider>
+  );
+}
+
+export default App;
+```
+
+---
+
+## 📌 Usage
+
+### CorbadoAuth component
+
+Adding SignUp/Login screens is simple with `@corbado/react`.
+The `CorbadoAuth` component allows your users to signUp and login with their passkeys.
+Additionally, it provides fallback options like email one-time passcode for users who don't have a passkey yet.
+
+```tsx
+import { CorbadoAuth } from '@corbado/react';
+
+const AuthPage = () => {
+  const onLoggedIn = () => {
+    // Navigate or perform actions after successful login
+  };
+
+  return <CorbadoAuth onLoggedIn={onLoggedIn} />;
+};
+
+export default AuthPage;
+```
+
+### PasskeyList component
+
+Users that are logged in want to see a list of all their existing passkeys and they want to manage them.
+You can make this possible by using the `PasskeyList` component.
+It shows all passkeys of the currently logged in user and allows them to add and remove passkeys.
+
+```tsx
+import { PasskeyList } from '@corbado/react';
+
+const PasskeysView = () => {
+  // Additional logic or styling
+
+  return (
+    <div>
+      <PasskeyList />
+    </div>
+  );
+};
+
+export default PasskeysView;
+```
+
+### Accessing Authentication State
+
+Utilize the `useCorbado` hook to access authentication states like `user` and `shortSession`.
+Use `user` to show information about the currently logged in user (e.g. name and email). If the user is not logged in this value is `undefined`.
+Use `shortSession` as a token to authenticate against your backend API (if you have one).
+
+```tsx
+import { useCorbado } from '@corbado/react-sdk';
+
+const HomePage = () => {
+  const { user, shortSession, loading } = useCorbado();
+
+  if (loading) {
+    // Render loading state
+  }
+
+  if (user) {
+    // Render authenticated state
+  }
+  // Additional implementation
+};
+
+export default HomePage;
+```
+
+**Remember to check `loading` state of the hook before using authentication states.**
+
+### Logging Out
+
+Implement logout functionality easily with the `logout` method from the `useCorbado` hook:
+
+```tsx
+import { useCorbado } from '@corbado/react-sdk';
+
+const LogoutButton = () => {
+  const { logout } = useCorbado();
+
+  const handleLogout = () => {
+    logout();
+    // Redirect or perform additional actions after logout
+  };
+
+  // UI logic and styling for logout button
+};
+
+export default LogoutButton;
+```
+
+---
+
+## 💡 Example Application
+
+- For a detailed example using the `@corbado/react` package checkout the [example application](https://react.demo.corbado.io) and its [source code](https://github.com/corbado/javascript/tree/main/examples/react)
+
+---
+
+## 📄 Documentation & Support
+
+For support and questions please visit our [Slack channel](https://join.slack.com/t/corbado/shared_invite/zt-1b7867yz8-V~Xr~ngmSGbt7IA~g16ZsQ).
+For more detailed information and advanced configuration options, please visit our [Documentation Page](https://docs.corbado.com/overview/welcome).
+
+---
+
+## 🔒 License
+
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/corbado/javascript/blob/readme_documentation/LICENSE) file for details.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

177268

increased by20.39%

Number of package files

64

increased by14.29%

Lines of code

563

increased by30.93%

Number of lines in readme file

180

increased by592.31%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@corbado/react-sdk@^0.1.7-alpha.4

• Updated@corbado/shared-ui@^0.1.1-alpha.4