@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

package/cjs/otp-input/otp-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("../form/form-label.js"),a=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var i=require("../util/simple-id-generator.js"),s=require("../util/string-helper.js"),o=require("./otp-input.styles.js"),l=require("./utils.js");const u=t.forwardRef(((u,d)=>{var{id:c,value:p=[],"data-testid":f,className:v,cooldownDuration:g,actionButtonProps:m,errorMessage:y,numOfInput:h,prefix:j,onChange:w,onCooldownStart:b,onCooldownEnd:x,otpOnly:O,onCountdownChange:C}=u,$=e.__rest(u,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const D=null!=m?m:{},{disabled:I,onClick:q,styleType:T="secondary"}=D,P=e.__rest(D,["disabled","onClick","styleType"]),E=t.useRef([]),R=t.useRef(w),[A,S]=t.useState(new Array(h).fill("")),[k,_]=t.useState(g),[B,H]=t.useState(new Date),[M]=t.useState((()=>i.SimpleIdGenerator.generate())),F=!!y,L=`${M}-error`,N=`${M}-timer`;t.useEffect((()=>{var e;return null===(e=null==E?void 0:E.current[0])||void 0===e||e.focus(),document.addEventListener("paste",K),()=>document.removeEventListener("paste",K)}),[]),t.useEffect((()=>{if(0!==g){b&&b();const e=z();return()=>e()}}),[B]),t.useImperativeHandle(d,(()=>({startCooldown:()=>{H(new Date),_(g)}}))),t.useEffect((()=>{R.current=w}),[w]),t.useEffect((()=>{p.length===h&&S(p)}),[p]);const V=e=>{if(e&&l.validateUserInput(e,h)){const r=e.split("");return S(r),R.current&&R.current(r),!0}return!1},U=e=>r=>{var t;const n=r.target.value,a=A.every((e=>""===e)),i=l.stripOtpFromAutofill(n,h,j);if(a&&V(i))return;const s=n.replace(/[^0-9]/g,"");if(l.validateUserInput(s)){const r=[...A];r[e]=s.substring(s.length-1),null===(t=E.current[e+1])||void 0===t||t.focus(),S(r),w&&w(r)}},G=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...A];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=E.current[e-1])||void 0===t||t.focus()),S(r),w&&w(r)}else"ArrowRight"===r.code?null===(n=E.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=E.current[e-1])||void 0===a||a.focus())},K=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=l.stripOtpFromAutofill(r,h,j);V(t)||e.preventDefault()},W=()=>{const e=Date.now(),r=1e3*g;return e<B.valueOf()+r},z=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*g,n=Math.ceil((B.valueOf()+t-r)/1e3);_(n),n<=0?(x&&x(),clearInterval(e)):C&&C(n)}),1e3);return()=>{clearInterval(e)}},J=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,Q=e=>`${e} second${1===e?"":"s"}`;return r.jsxs(o.Wrapper,{id:c,"data-testid":f,className:v,children:[r.jsxs(o.InputContainer,{role:"group","aria-label":`${h}-digit OTP input field`,children:[j&&r.jsxs(o.Prefix,{forwardedAs:"span","data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(a.VisuallyHidden,{children:"O T P prefix"}),`${j.value} ${j.separator}`]}),A.map(((e,t)=>r.jsx(o.InputField,Object.assign({id:J(t,"otp-input",c),"data-testid":J(t,"otp-input",f),"aria-label":`${s.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":F,"aria-describedby":F?L:void 0,ref:e=>E.current[t]=e,type:"text",inputMode:"numeric",value:e,error:F,onChange:U(t),onKeyDown:G(t),autoComplete:"off"},$),t)))]}),y&&r.jsx(n.FormErrorMessage,{id:L,children:y}),r.jsxs(a.VisuallyHidden,{role:"timer",id:N,children:[Q(k)," remaining"]}),r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:k>0?"":"Ready to resend OTP"}),!O&&r.jsx(o.CTAButton,Object.assign({styleType:T,type:"button"},P,{onClick:e=>{S(new Array(h).fill("")),W()||(H(new Date),_(g)),q&&q(e)},disabled:I||W()},P.children?{children:P.children}:{children:k>0?`Resend OTP in ${Q(k)}`:"Resend OTP","aria-label":k>0?`Resend OTP in ${Q(g)}`:"Resend OTP","aria-describedby":N}))]})}));exports.OtpInput=u;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),n=require("react"),a=require("../button/button.js"),i=require("../form/form-label/form-label.js"),s=require("../input/input.js"),o=require("../shared/accessibility/index.js"),l=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js"),d=require("../util/string-helper.js");require("@react-aria/live-announcer");var c=require("./otp-input.styles.js"),p=require("./utils.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=f(t);const y=n.forwardRef(((t,f)=>{var{id:y,value:m=[],"data-testid":g,className:j,cooldownDuration:h,actionButtonProps:b,errorMessage:w,numOfInput:x,prefix:O,onChange:C,onCooldownStart:q,onCooldownEnd:$,otpOnly:D,onCountdownChange:T}=t,I=e.__rest(t,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const E=null!=b?b:{},{disabled:P,onClick:R,styleType:B="secondary"}=E,N=e.__rest(E,["disabled","onClick","styleType"]),k=n.useRef([]),A=n.useRef(C),[S,_]=n.useState(new Array(x).fill("")),[H,M]=n.useState(h),[F,L]=n.useState(new Date),V=u.useId(),U=!!w,z=`${V}-error`,K=`${V}-timer`;n.useEffect((()=>{var e;return null===(e=null==k?void 0:k.current[0])||void 0===e||e.focus(),document.addEventListener("paste",W),()=>document.removeEventListener("paste",W)}),[]),n.useEffect((()=>{if(0!==h){q&&q();const e=Y();return()=>e()}}),[F]),n.useImperativeHandle(f,(()=>({startCooldown:()=>{L(new Date),M(h)}}))),n.useEffect((()=>{A.current=C}),[C]),n.useEffect((()=>{m.length===x&&_(m)}),[m]);const G=e=>{if(e&&p.validateUserInput(e,x)){const r=e.split("");return _(r),A.current&&A.current(r),!0}return!1},J=e=>r=>{var t;const n=r.target.value,a=S.every((e=>""===e)),i=p.stripOtpFromAutofill(n,x,O);if(a&&G(i))return;const s=n.replace(/[^0-9]/g,"");if(p.validateUserInput(s)){const r=[...S];r[e]=s.substring(s.length-1),null===(t=k.current[e+1])||void 0===t||t.focus(),_(r),C&&C(r)}},Q=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...S];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=k.current[e-1])||void 0===t||t.focus()),_(r),C&&C(r)}else"ArrowRight"===r.code?null===(n=k.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=k.current[e-1])||void 0===a||a.focus())},W=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=p.stripOtpFromAutofill(r,x,O);G(t)||e.preventDefault()},X=()=>{const e=Date.now(),r=1e3*h;return e<F.valueOf()+r},Y=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*h,n=Math.ceil((F.valueOf()+t-r)/1e3);M(n),n<=0?($&&$(),clearInterval(e)):T&&T(n)}),1e3);return()=>{clearInterval(e)}},Z=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,ee=e=>`${e} second${1===e?"":"s"}`;return r.jsxs("div",{id:y,"data-testid":g,className:v.default(c.wrapper,j),children:[r.jsxs("div",{className:c.inputContainer,role:"group","aria-label":`${x}-digit OTP input field`,children:[O&&r.jsxs(l.Typography.BodyBL,{as:"span",className:c.prefix,"data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(o.VisuallyHidden,{children:"O T P prefix"}),`${O.value} ${O.separator}`]}),S.map(((e,t)=>r.jsx(s.Input,Object.assign({className:c.inputField,id:Z(t,"otp-input",y),"data-testid":Z(t,"otp-input",g),"aria-label":`${d.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":U,"aria-describedby":U?z:void 0,ref:e=>k.current[t]=e,type:"text",inputMode:"numeric",value:e,error:U,onChange:J(t),onKeyDown:Q(t),autoComplete:"off"},I),t)))]}),w&&r.jsx(i.FormErrorMessage,{id:z,"data-testid":"otp-error-message",children:w}),r.jsxs(o.VisuallyHidden,{role:"timer",id:K,children:[ee(H)," remaining"]}),r.jsx(o.VisuallyHidden,{"aria-live":"polite",children:H>0?"":"Ready to resend OTP"}),!D&&r.jsx(a.Button,Object.assign({className:c.ctaButton,styleType:B,type:"button",sizeType:"small"},N,{onClick:e=>{_(new Array(x).fill("")),X()||(L(new Date),M(h)),R&&R(e)},disabled:P||X()},N.children?{children:N.children}:{children:H>0?`Resend OTP in ${ee(H)}`:"Resend OTP","aria-label":H>0?`Resend OTP in ${ee(h)}`:"Resend OTP","aria-describedby":K}))]})}));exports.OtpInput=y;
 //# sourceMappingURL=otp-input.js.map

package/cjs/otp-input/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator, StringHelper } from \"../util\";\nimport {\n    CTAButton,\n    InputContainer,\n    InputField,\n    Prefix,\n    Wrapper,\n} from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Wrapper id={id} data-testid={dataTestId} className={className}>\n            <InputContainer\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Prefix\n                        forwardedAs=\"span\"\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Prefix>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <InputField\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </InputContainer>\n            {errorMessage && (\n                <FormErrorMessage id={errorId}>{errorMessage}</FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <CTAButton\n                    styleType={styleType}\n                    type=\"button\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </Wrapper>\n    );\n};\n\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","SimpleIdGenerator","generate","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","Wrapper","children","InputContainer","role","Prefix","forwardedAs","weight","_jsx","VisuallyHidden","separator","map","data","InputField","Object","assign","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","CTAButton"],"mappings":"wZAsBA,MA6TaA,EAAWC,EAAAA,YA7TN,CACdC,EAiBAC,KAjBA,IAAAC,GACIA,EAAEC,MACFA,EAAQ,GACR,cAAeC,EAAUC,UACzBA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,aACjBA,EAAYC,WACZA,EAAUC,OACVA,EAAMC,SACNA,EAAQC,gBACRA,EAAeC,cACfA,EAAaC,QACbA,EAAOC,kBACPA,GAAiBf,EACdgB,EAAUC,EAAAA,OAAAjB,EAfjB,iMAsBA,MAAMkB,EAKFX,QAAAA,EAAqB,CAAA,GALnBY,SACFA,EAAQC,QACRA,EAAOC,UACPA,EAAY,aAAWH,EACpBI,EAAaL,EAAAA,OAAAC,EAJd,CAAA,WAAA,UAAA,cAOAK,EAAYC,EAAAA,OAAoC,IAChDC,EAAcD,EAAAA,OAAOb,IAEpBe,EAAWC,GAAgBC,EAAAA,SAC9B,IAAIC,MAAMpB,GAAYqB,KAAK,MAExBC,EAAWC,GAAgBJ,EAAAA,SAAiBtB,IAC5C2B,EAAkBC,GAAuBN,EAAAA,SAAe,IAAIO,OAC5DC,GAAcR,EAAAA,UAAS,IAAMS,EAAAA,kBAAkBC,aAEhDC,IAAa/B,EACbgC,EAAU,GAAGJ,UACbK,EAAU,GAAGL,UAKnBM,EAAAA,WAAU,WAGN,OAFqB,QAArB1C,EAAAuB,aAAS,EAATA,EAAWoB,QAAQ,UAAE,IAAA3C,GAAAA,EAAE4C,QACvBC,SAASC,iBAAiB,QAASC,GAC5B,IAAMF,SAASG,oBAAoB,QAASD,EAAY,GAChE,IAEHL,EAAAA,WAAU,KACN,GAAyB,IAArBpC,EAAwB,CACpBM,GAAiBA,IACrB,MAAMqC,EAAUC,IAEhB,MAAO,IAAMD,GACjB,IACD,CAAChB,IAEJkB,EAAAA,oBAAoBlD,GAAK,KAAA,CACrBmD,cAAe,KACXlB,EAAoB,IAAIC,MACxBH,EAAa1B,EAAiB,MAItCoC,EAAAA,WAAU,KACNjB,EAAYkB,QAAUhC,CAAQ,GAC/B,CAACA,IAEJ+B,EAAAA,WAAU,KACFvC,EAAMkD,SAAW5C,GACjBkB,EAAaxB,EACjB,GACD,CAACA,IAKJ,MAAMmD,EAAwBC,IAC1B,GAAIA,GAAiBC,EAAAA,kBAAkBD,EAAe9C,GAAa,CAC/D,MAAMgD,EAAmBF,EAAcG,MAAM,IAM7C,OALA/B,EAAa8B,GACThC,EAAYkB,SACZlB,EAAYkB,QAAQc,IAGjB,CACX,CAEA,OAAO,CAAK,EAGVE,EACDC,GAAmBC,UAChB,MAAMC,EAAaD,EAAME,OAAO5D,MAG1B6D,EAAetC,EAAUuC,OAAOC,GAAgB,KAARA,IACxCC,EAAcC,EAAAA,qBAChBN,EACArD,EACAC,GAEJ,GAAIsD,GAAgBV,EAAqBa,GACrC,OAIJ,MAAMhE,EAAQ2D,EAAWO,QAAQ,UAAW,IAC5C,GAAIb,EAAAA,kBAAkBrD,GAAQ,CAC1B,MAAMmE,EAAe,IAAI5C,GAEzB4C,EAAaV,GAASzD,EAAMoE,UAAUpE,EAAMkD,OAAS,GACzB,QAA5BrD,EAAAuB,EAAUoB,QAAQiB,EAAQ,UAAE,IAAA5D,GAAAA,EAAE4C,QAE9BjB,EAAa2C,GAET3D,GACAA,EAAS2D,EAEjB,GAGFE,EACDZ,GAAmBC,cAChB,MAAMY,IAAEA,EAAGC,KAAEA,GAASb,EAEtB,GAAY,cAARY,GAAgC,cAATC,EAAsB,CAC7C,MAAMJ,EAAe,IAAI5C,GACG,KAAxB4C,EAAaV,GACbU,EAAaV,GAAS,GACL,IAAVA,IACPU,EAAaV,EAAQ,GAAK,GACE,QAA5B5D,EAAAuB,EAAUoB,QAAQiB,EAAQ,UAAE,IAAA5D,GAAAA,EAAE4C,SAGlCjB,EAAa2C,GAET3D,GACAA,EAAS2D,EAEjB,KAA0B,eAAfT,EAAMa,KACe,QAA5BxD,EAAAK,EAAUoB,QAAQiB,EAAQ,UAAE,IAAA1C,GAAAA,EAAE0B,QACR,cAAfiB,EAAMa,OACe,QAA5BC,EAAApD,EAAUoB,QAAQiB,EAAQ,UAAE,IAAAe,GAAAA,EAAE/B,QAClC,EAGFG,EAAec,IACjB,IAAKA,EAAMe,cAAe,OAE1B,MAAMC,EAAchB,EAAMe,cAAcE,QAAQ,QAC1CX,EAAcC,EAAAA,qBAChBS,EACApE,EACAC,GAEC4C,EAAqBa,IACtBN,EAAMkB,gBACV,EAmBEC,EAAmB,KACrB,MAAMC,EAAc9C,KAAK+C,MACnBC,EAA4C,IAAnB7E,EAE/B,OACI2E,EAAchD,EAAiBmD,UAAYD,CAAsB,EAInEjC,EAAiB,KACnB,MAAMmC,EAAWC,aAAY,KACzB,MAAML,EAAc9C,KAAK+C,MACnBC,EAA4C,IAAnB7E,EAEzBiF,EAAQC,KAAKC,MACdxD,EAAiBmD,UACdD,EACAF,GACA,KAERjD,EAAauD,GACTA,GAAS,GACL1E,GAAeA,IACnB6E,cAAcL,IACPtE,GACPA,EAAkBwE,EACtB,GACD,KAEH,MAAO,KACHG,cAAcL,EAAS,CAC1B,EAGCM,EAAa,CAAC/B,EAAegC,EAAclF,IACtCA,EACD,GAAGA,KAAUkF,KAAQhC,EAAQ,IAC7B,GAAGgC,KAAQhC,EAAQ,IAGvBiC,EAAkBC,GACb,GAAGA,WAAuB,IAATA,EAAa,GAAK,MA0B9C,OACIC,OAACC,EAAAA,QAAO,CAAC9F,GAAIA,EAAE,cAAeE,EAAYC,UAAWA,EAAS4F,SAAA,CAC1DF,EAAAA,KAACG,EAAAA,eAAc,CACXC,KAAK,QAAO,aACA,GAAG1F,0BAAkCwF,SAAA,CAEhDvF,GACGqF,EAAAA,KAACK,EAAAA,QACGC,YAAY,OAAM,cACN,aACZC,OAAO,WAAUL,SAAA,CAEjBM,EAAAA,IAACC,iBAAc,CAAAP,SAAA,iBACd,GAAGvF,EAAOP,SAASO,EAAO+F,eAGlC/E,EAAUgF,KAAI,CAACC,EAAM/C,IAEd2C,EAAAA,IAACK,EAAAA,WAAUC,OAAAC,OAAA,CACP5G,GAAIyF,EAAW/B,EAAO,YAAa1D,GAAG,cACzByF,EACT/B,EACA,YACAxD,GACH,aACW,GAAG2G,EAAAA,aAAaC,cACxBpD,EAAQ,WACH,eACKrB,EAAQ,mBACJA,EAAWC,OAAUyE,EAEvChH,IAAMiH,GAAQ3F,EAAUoB,QAAQiB,GAASsD,EACzCC,KAAK,OACLC,UAAU,UACVjH,MAAOwG,EACPU,MAAO9E,EACP5B,SAAUgD,EAAaC,GACvB0D,UAAW9C,EAAcZ,GACzB2D,aAAa,OACTvG,GATC4C,QAcpBpD,GACG+F,EAAAA,IAACiB,EAAAA,iBAAgB,CAACtH,GAAIsC,EAAOyD,SAAGzF,IAGpCuF,EAAAA,KAACS,EAAAA,eAAc,CAACL,KAAK,QAAQjG,GAAIuC,EAAOwD,SAAA,CACnCJ,EAAe9D,GAAU,gBAE9BwE,EAAAA,IAACC,EAAAA,eAAc,CAAA,YAAW,SAAQP,SAC7BlE,EAAY,EAAI,GAAK,yBAExBjB,GACEyF,EAAAA,IAACkB,EAAAA,UAASZ,OAAAC,OAAA,CACNzF,UAAWA,EACX8F,KAAK,UACD7F,EAAa,CACjBF,QA9IKyC,IACjBlC,EAAa,IAAIE,MAAMpB,GAAYqB,KAAK,KAEnCkD,MACD9C,EAAoB,IAAIC,MACxBH,EAAa1B,IAGbc,GACAA,EAAQyC,EACZ,EAqIY1C,SAAUA,GAAY6D,KAhF3B1D,EAAc2E,SACf,CAAEA,SAAU3E,EAAc2E,UAC1B,CACIA,SACIlE,EAAY,EACN,iBAAiB8D,EAAe9D,KAChC,aAEV,aACIA,EAAY,EACN,iBAAiB8D,EAAevF,KAChC,aAEV,mBAAoBmC,OAuEpB"}
+{"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { Input } from \"../input\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const internalId = useId();\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={clsx(styles.wrapper, className)}\n        >\n            <div\n                className={styles.inputContainer}\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Typography.BodyBL\n                        as=\"span\"\n                        className={styles.prefix}\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Typography.BodyBL>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <Input\n                            className={styles.inputField}\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </div>\n            {errorMessage && (\n                <FormErrorMessage id={errorId} data-testid=\"otp-error-message\">\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <Button\n                    className={styles.ctaButton}\n                    styleType={styleType}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A field composed of individual inputs for a numeric one-time password\n * with an in-built countdown mechanism.\n *\n * Use `OtpInput` when users must enter the one-time password (OTP)\n * for multi-factored authentication methods.\n * @keywords 2FA, authentication, code, MFA, one-time password, verification\n */\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","clsx","styles.wrapper","children","styles.inputContainer","role","Typography","BodyBL","as","styles.prefix","weight","_jsx","VisuallyHidden","separator","map","data","Input","Object","assign","styles.inputField","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","Button","styles.ctaButton","sizeType"],"mappings":"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"}

package/cjs/otp-input/otp-input.styles.js

@@ -1,23 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../button/button.js"),n=require("../input/input.js"),i=require("../typography/index.js"),r=require("../v3_theme/index.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=p(e);const o=a.default.div`
-    display: flex;
-    flex-direction: column;
-`,u=a.default.div`
-    display: flex;
-    flex-direction: row;
-    align-self: center;
-    align-items: center;
-    gap: ${r.V3_Spacing["spacing-8"]};
-`,l=a.default(n.Input)`
-    min-width: 20px;
-    margin-bottom: 0rem !important;
-
-    input {
-        padding: 0;
-        text-align: center;
-    }
-`,d=a.default(t.Button.Small)`
-    margin: ${r.V3_Spacing["spacing-32"]} 0;
-`,s=a.default(i.Typography.BodyBL)`
-    flex-shrink: 0;
-`;exports.CTAButton=d,exports.InputContainer=u,exports.InputField=l,exports.Prefix=s,exports.Wrapper=o;
+"use strict";require("./otp-input.styles_5sbutl.css");exports.ctaButton="cvrt5zi",exports.inputContainer="i1f2709h",exports.inputField="i1ile0is",exports.prefix="p1lfz4i",exports.wrapper="w3oye99";
 //# sourceMappingURL=otp-input.styles.js.map

package/cjs/otp-input/otp-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.styles.js","sources":["../../../src/otp-input/otp-input.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { Typography } from \"../typography\";\nimport { V3_Spacing } from \"../v3_theme\";\n\nexport const Wrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const InputField = styled(Input)`\n    min-width: 20px;\n    margin-bottom: 0rem !important;\n\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const CTAButton = styled(Button.Small)`\n    margin: ${V3_Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const Prefix = styled(Typography.BodyBL)`\n    flex-shrink: 0;\n`;\n"],"names":["Wrapper","styled","div","InputContainer","V3_Spacing","InputField","Input","CTAButton","Button","Small","Prefix","Typography","BodyBL"],"mappings":"yQAOO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;EAKpBC,EAAiBF,EAAAA,QAAOC,GAAG;;;;;WAK7BE,EAAAA,WAAW;EAGTC,EAAaJ,EAAAA,QAAOK,EAAAA,MAAM;;;;;;;;EAU1BC,EAAYN,EAAAA,QAAOO,SAAOC,MAAM;cAC/BL,EAAAA,WAAW;EAGZM,EAAST,EAAAA,QAAOU,aAAWC,OAAO;;"}
+{"version":3,"file":"otp-input.styles.js","sources":["../../../src/otp-input/otp-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const inputField = css`\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const ctaButton = css`\n    margin: ${Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const prefix = css`\n    flex-shrink: 0;\n`;\n"],"names":[],"mappings":"iGAwBsB,iCAfK,8BAQJ,0BAWJ,0BAxBC"}

package/cjs/otp-input/otp-input.styles_5sbutl.css

@@ -0,0 +1,5 @@
+@layer fds{.w3oye99{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.i1f2709h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);}
+.i1ile0is input{padding:0;text-align:center;}
+.cvrt5zi{margin:var(--fds-spacing-32) 0;}
+.p1lfz4i{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}

package/cjs/otp-verification/contact-input-section.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),i=require("../form/form-label.js"),n=require("./contact-input-section-styles.js");exports.ContactInputSection=({id:r,"data-testid":a,disabled:o,readOnly:d,inputId:l,type:c,sendOtpPlaceholder:s,emailValue:u,onEmailChange:p,phoneNumberValue:h,onPhoneNumberChange:m,fixedCountry:b,isLoading:C,isVerified:x,countdown:g,onSendOtp:j,onStateReset:v,sendOtpError:y})=>{const $=e=>{v(),"email"===c&&p&&p(e.target.value)},f=e=>{v(),"phone-number"===c&&m&&m(e)};return e.jsxs(n.ContactSectionWrapper,{id:r,"data-testid":a,children:[e.jsxs(n.ContactInputSectionWrapper,{children:[e.jsxs(n.ContactInputWrapper,{$isMaxWidth:"email"===c,$error:!!y,$disabled:o,$readonly:d,children:["email"===c?e.jsx(n.EmailContactInput,{id:l,"data-testid":a?`${a}-contact-input`:void 0,placeholder:s||"Enter email",value:u,onChange:$,type:"email",noBorder:!0,"aria-invalid":!!y,"aria-required":!0,disabled:o,readOnly:d}):e.jsx(n.PhoneContactInput,{id:l,"data-testid":a?`${a}-contact-input`:void 0,placeholder:s||"Enter mobile number",value:h,onChange:f,noBorder:!0,fixedCountry:b,"aria-invalid":!!y,"aria-required":!0,disabled:o,readOnly:d}),x&&e.jsx(n.VerifiedIconWrapper,{"aria-label":"Verified",role:"img",children:e.jsx(t.TickCircleFillIcon,{})})]}),!o&&!d&&e.jsx(n.ContactButton,{id:r?`${r}-contact-button`:void 0,type:"button","data-testid":a?`${a}-contact-button`:void 0,onClick:j,disabled:g.isRunning||x,loading:C,children:x?"Verified":C?"":g.isRunning?"Sent OTP":"Send OTP"})]}),y&&e.jsx(i.FormErrorMessage,{id:r?`${r}-contact-error`:void 0,"data-testid":a?`${a}-contact-error`:void 0,role:"alert",children:y})]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),t=require("clsx"),r=require("../button/button.js"),i=require("../form/form-label/form-label.js"),n=require("../input-group/input-group.js"),o=require("../phone-number-input/phone-number-input.js"),d=require("../shared/accessibility/index.js"),l=require("./contact-input-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(t);exports.ContactInputSection=({id:t,"data-testid":c,disabled:u,readOnly:p,inputId:b,type:m,sendOtpPlaceholder:v,emailValue:h,onEmailChange:y,phoneNumberValue:f,onPhoneNumberChange:I,fixedCountry:j,isLoading:g,isVerified:x,countdown:C,onSendOtp:q,onStateReset:N,sendOtpError:O,"aria-labelledby":E,"aria-describedby":P})=>{const S=t?`${t}-contact-error`:void 0,W=e=>{N(),"email"===m&&y&&y(e.target.value)},R=e=>{N(),"phone-number"===m&&I&&I(e)},$=e=>{var a;return`Enter your ${null!==(a=null==e?void 0:e.name)&&void 0!==a?a:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs("div",{id:t,"data-testid":c,className:l.contactSectionWrapper,children:[e.jsxs("div",{className:l.contactInputSectionWrapper,children:[e.jsxs("div",{"data-max-width":"email"===m,className:s.default(l.contactInputWrapper,!!O&&l.contactInputWrapperError,u&&l.contactInputWrapperDisabled,p&&l.contactInputWrapperReadonly),children:["email"===m?e.jsx(n.InputGroup,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter email",value:h,onChange:W,type:"email",noBorder:!0,"aria-invalid":!!O,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.emailContactInput,u&&l.emailContactInputDisabled,p&&l.emailContactInputReadonly)}):e.jsx(o.PhoneNumberInput,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter mobile number",value:f,onChange:R,noBorder:!0,fixedCountry:j,"aria-invalid":!!O,"aria-required":!0,getAriaLabel:$,"aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.phoneContactInput,u&&l.phoneContactInputDisabled,p&&l.phoneContactInputReadonly)}),x&&e.jsx("div",{className:l.verifiedIconWrapper,"aria-label":"Verified",role:"img",children:e.jsx(a.TickCircleFillIcon,{})})]}),!u&&!p&&e.jsx(r.Button,{type:"button","data-testid":c?`${c}-contact-button`:void 0,onClick:q,disabled:C.isRunning||x,loading:g,className:l.contactButton,children:x?"Verified":g?"":C.isRunning?"Sent OTP":"Send OTP"})]}),O&&e.jsx(i.FormErrorMessage,{id:S,"data-testid":c?`${c}-contact-error`:void 0,role:"alert",children:O})]})};
 //# sourceMappingURL=contact-input-section.js.map

package/cjs/otp-verification/contact-input-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type { PhoneNumberInputValue } from \"../phone-number-input\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n}: ContactInputSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={id ? `${id}-contact-error` : undefined}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","handleEmailInputChange","e","target","value","handlePhoneInputChange","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","undefined","placeholder","onChange","noBorder","PhoneContactInput","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"+LAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAKA,MAAMC,EAA0BC,IAC5BH,IACa,UAATX,GAAoBG,GACpBA,EAAcW,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BL,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBW,EACxB,EA+DJ,OACIE,EAAAA,KAACC,EAAAA,sBAAqB,CAACxB,GAAIA,EAAE,cAAeC,EAAUwB,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAATtB,EAAgBuB,SACnBX,EAAYY,UACX3B,YACAC,EAAQsB,SAAA,CA5CtB,UAATpB,EACIyB,EAAAA,IAACC,EAAAA,kBAAiB,CACd/B,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B+B,EAEjDC,YAAa3B,GAAsB,cACnCe,MAAOd,EACP2B,SAAUhB,EACVb,KAAK,QACL8B,UAAQ,EAAA,iBACQlB,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAGd2B,EAAAA,IAACM,EAAAA,kBAAiB,CACdpC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B+B,EAEjDC,YAAa3B,GAAsB,sBACnCe,MAAOZ,EACPyB,SAAUZ,EACVa,UAAQ,EACRxB,aAAcA,EAAY,iBACVM,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAiBLU,GACGiB,EAAAA,IAACO,EAAAA,kCAA+B,WAAWC,KAAK,MAAKb,SACjDK,EAAAA,IAACS,EAAAA,mBAAkB,CAAA,SAI7BrC,IAAaC,GACX2B,EAAAA,IAACU,EAAAA,cAAa,CACVxC,GAAIA,EAAK,GAAGA,wBAAsBgC,EAClC3B,KAAK,uBAEDJ,EACM,GAAGA,wBACH+B,EAEVS,QAAS1B,EACTb,SAAUY,EAAU4B,WAAa7B,EACjC8B,QAAS/B,EAASa,SAnF9BZ,EACO,WAGPD,EACO,GAGPE,EAAU4B,UACH,WAGJ,gBA6EFzB,GACGa,EAAAA,IAACc,EAAAA,kBACG5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EAAS,cAEtC/B,EAAa,GAAGA,uBAA6B+B,EAEjDM,KAAK,QAAOb,SAEXR,MAGW"}
+{"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport type {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport * as styles from \"./contact-input-section.styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n    const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    const getMobileAriaLabel = (country?: CountryValue) =>\n        `Enter your ${\n            country?.name ?? \"\"\n        } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <InputGroup\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n                className={clsx(\n                    styles.emailContactInput,\n                    disabled && styles.emailContactInputDisabled,\n                    readOnly && styles.emailContactInputReadonly\n                )}\n            />\n        ) : (\n            <PhoneNumberInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                getAriaLabel={getMobileAriaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n                className={clsx(\n                    styles.phoneContactInput,\n                    disabled && styles.phoneContactInputDisabled,\n                    readOnly && styles.phoneContactInputReadonly\n                )}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={styles.contactSectionWrapper}\n        >\n            <div className={styles.contactInputSectionWrapper}>\n                <div\n                    data-max-width={type === \"email\"}\n                    className={clsx(\n                        styles.contactInputWrapper,\n                        !!sendOtpError && styles.contactInputWrapperError,\n                        disabled && styles.contactInputWrapperDisabled,\n                        readOnly && styles.contactInputWrapperReadonly\n                    )}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <div\n                            className={styles.verifiedIconWrapper}\n                            aria-label=\"Verified\"\n                            role=\"img\"\n                        >\n                            <TickCircleFillIcon />\n                        </div>\n                    )}\n                </div>\n                {!disabled && !readOnly && (\n                    <Button\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                        className={styles.contactButton}\n                    >\n                        {getContactButtonText()}\n                    </Button>\n                )}\n            </div>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={contactErrorId}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </div>\n    );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","className","styles.contactSectionWrapper","styles.contactInputSectionWrapper","children","clsx","styles.contactInputWrapper","styles.contactInputWrapperError","styles.contactInputWrapperDisabled","styles.contactInputWrapperReadonly","_jsx","InputGroup","placeholder","onChange","noBorder","concatIds","styles.emailContactInput","styles.emailContactInputDisabled","styles.emailContactInputReadonly","PhoneNumberInput","getAriaLabel","styles.phoneContactInput","styles.phoneContactInputDisabled","styles.phoneContactInputReadonly","styles.verifiedIconWrapper","role","TickCircleFillIcon","Button","onClick","isRunning","loading","styles.contactButton","FormErrorMessage"],"mappings":"keAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAiEvE,OACIC,EAAAA,YACIhC,GAAIA,EAAE,cACOC,EACbgC,UAAWC,EAAAA,gCAEXF,EAAAA,KAAA,MAAA,CAAKC,UAAWE,EAAAA,2BAAiCC,SAAA,CAC7CJ,EAAAA,KAAA,MAAA,CAAA,iBAC6B,UAAT3B,EAChB4B,UAAWI,EAAAA,QACPC,EAAAA,sBACErB,GAAgBsB,EAAAA,yBAClBrC,GAAYsC,EAAAA,4BACZrC,GAAYsC,EAAAA,6BACfL,SAAA,CAzEJ,UAAT/B,EACIqC,EAAAA,IAACC,EAAAA,YACG3C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,cACnCmB,MAAOlB,EACPsC,SAAUvB,EACVjB,KAAK,QACLyC,6BACgB7B,EAAY,iBACb,eACJ,yDAAwD,kBAClDC,EAAc,mBACb6B,EAAAA,UACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPW,EAAAA,kBACA9C,GAAY+C,EAAAA,0BACZ9C,GAAY+C,+BAIpBR,EAAAA,IAACS,EAAAA,iBAAgB,CACbnD,GAAII,gBAEAH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,sBACnCmB,MAAOhB,EACPoC,SAAUnB,EACVoB,UAAQ,EACRnC,aAAcA,mBACEM,EAAY,iBACb,EACfmC,aAAczB,oBACGT,EAAc,mBACb6B,YACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPgB,oBACAnD,GAAYoD,EAAAA,0BACZnD,GAAYoD,EAAAA,6BAyBX1C,GACG6B,EAAAA,IAAA,MAAA,CACIT,UAAWuB,EAAAA,oBAA0B,aAC1B,WACXC,KAAK,MAAKrB,SAEVM,EAAAA,IAACgB,EAAAA,mBAAkB,CAAA,SAI7BxD,IAAaC,GACXuC,EAAAA,IAACiB,EAAAA,QACGtD,KAAK,SAAQ,cAETJ,EACM,GAAGA,wBACHoB,EAEVuC,QAAS7C,EACTb,SAAUY,EAAU+C,WAAahD,EACjCiD,QAASlD,EACTqB,UAAW8B,EAAAA,cAAoB3B,SAzH3CvB,EACO,WAGPD,EACO,GAGPE,EAAU+C,UACH,WAGJ,gBAmHF5C,GACGyB,EAAAA,IAACsB,EAAAA,iBAAgB,CACbhE,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjDoC,KAAK,QAAOrB,SAEXnB,MAGP"}

package/cjs/otp-verification/contact-input-section.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./contact-input-section.styles_odrjvt.css");exports.contactButton="c1l991bf",exports.contactInputSectionWrapper="c1ndevds",exports.contactInputWrapper="ce951ub",exports.contactInputWrapperDisabled="cjnw2dw",exports.contactInputWrapperError="c1q1uu2c",exports.contactInputWrapperReadonly="c1xm1ca3",exports.contactSectionWrapper="c1lwydna",exports.emailContactInput="e1ik236m",exports.emailContactInputDisabled="e19c6q61",exports.emailContactInputReadonly="ergya1n",exports.phoneContactInput="pqn3wrd",exports.phoneContactInputDisabled="p9yjg9s",exports.phoneContactInputReadonly="pg7qgn5",exports.verifiedIconWrapper="vf0c1ti";
+//# sourceMappingURL=contact-input-section.styles.js.map

package/cjs/otp-verification/contact-input-section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-input-section.styles.js","sources":["../../../src/otp-verification/contact-input-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\nexport const contactSectionWrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const contactInputSectionWrapper = css`\n    display: flex;\n`;\n\nexport const contactInputWrapper = css`\n    display: flex;\n    align-items: center;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]} 0 0 ${Radius[\"sm\"]};\n    box-shadow: inset 1px 0 0 ${Colour[\"border\"]},\n        inset 0 1px 0 ${Colour[\"border\"]}, inset 0 -1px 0 ${Colour[\"border\"]};\n\n    &:focus-within {\n        box-shadow: inset 2px 0 0 ${Colour[\"border-focus\"]},\n            inset 0 2px 0 ${Colour[\"border-focus\"]},\n            inset 0 -2px 0 ${Colour[\"border-focus\"]};\n    }\n\n    &[data-max-width=\"true\"] {\n        width: 100%;\n    }\n`;\n\nexport const contactInputWrapperError = css`\n    box-shadow: inset 1px 0 0 ${Colour[\"border-error\"]},\n        inset 0 1px 0 ${Colour[\"border-error\"]},\n        inset 0 -1px 0 ${Colour[\"border-error\"]};\n\n    &:focus-within {\n        box-shadow: inset 2px 0 0 ${Colour[\"border-error-focus\"]},\n            inset 0 2px 0 ${Colour[\"border-error-focus\"]},\n            inset 0 -2px 0 ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const contactInputWrapperDisabled = css`\n    box-shadow: inset 0 0 0 1px ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg-disabled\"]};\n    color: ${Colour[\"text-disabled\"]};\n\n    &:focus-within {\n        box-shadow: inset 0 0 0 2px ${Colour[\"border\"]};\n    }\n\n    &[data-max-width=\"false\"] {\n        /* Spacer to maintain width when disabled */\n        &::after {\n            content: \"\";\n            min-width: 120px;\n            flex-shrink: 0;\n        }\n\n        /* Hide spacer on mobile to prevent text coverage */\n        ${MediaQuery.MaxWidth.sm} {\n            &::after {\n                display: none;\n            }\n        }\n    }\n`;\n\nexport const contactInputWrapperReadonly = css`\n    padding-left: 0;\n    box-shadow: none;\n    border-radius: ${Radius[\"sm\"]};\n\n    &:focus-within {\n        box-shadow: inset 0 0 0 2px ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const verifiedIconWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-left: ${Spacing[\"spacing-12\"]};\n    color: ${Colour[\"icon-success\"]};\n    flex-shrink: 0;\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n`;\n\nexport const contactButton = css`\n    min-width: 120px;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: fit-content;\n    }\n`;\n\nexport const emailContactInput = css`\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    width: 100%;\n    background: transparent;\n`;\n\nexport const emailContactInputDisabled = css`\n    input {\n        color: ${Colour[\"text-disabled\"]};\n    }\n`;\n\nexport const emailContactInputReadonly = css`\n    padding: 0;\n`;\n\nexport const phoneContactInput = css`\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    background: transparent;\n`;\n\nexport const phoneContactInputDisabled = css`\n    input {\n        color: ${Colour[\"text-disabled\"]};\n    }\n`;\n\nexport const phoneContactInputReadonly = css`\n    padding: 0;\n\n    input {\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n`;\n"],"names":[],"mappings":"wHA+F0B,8CAtFa,uCAIP,8CA+BQ,2CAZH,+CAuCG,yCAnEN,qCAsGJ,6CAMQ,6CAMA,oCAIR,4CAKQ,4CAMA,sCApDN"}

package/cjs/otp-verification/contact-input-section.styles_odrjvt.css

@@ -0,0 +1,14 @@
+@layer fds{.c1lwydna{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.c1ndevds{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.ce951ub{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 var(--fds-spacing-16);border-radius:var(--fds-radius-sm) 0 0 var(--fds-radius-sm);box-shadow:inset 1px 0 0 var(--fds-colour-border),inset 0 1px 0 var(--fds-colour-border),inset 0 -1px 0 var(--fds-colour-border);}.ce951ub:focus-within{box-shadow:inset 2px 0 0 var(--fds-colour-border-focus),inset 0 2px 0 var(--fds-colour-border-focus),inset 0 -2px 0 var(--fds-colour-border-focus);}.ce951ub[data-max-width="true"]{width:100%;}
+.c1q1uu2c{box-shadow:inset 1px 0 0 var(--fds-colour-border-error),inset 0 1px 0 var(--fds-colour-border-error),inset 0 -1px 0 var(--fds-colour-border-error);}.c1q1uu2c:focus-within{box-shadow:inset 2px 0 0 var(--fds-colour-border-error-focus),inset 0 2px 0 var(--fds-colour-border-error-focus),inset 0 -2px 0 var(--fds-colour-border-error-focus);}
+.cjnw2dw{box-shadow:inset 0 0 0 1px var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg-disabled);color:var(--fds-colour-text-disabled);}.cjnw2dw:focus-within{box-shadow:inset 0 0 0 2px var(--fds-colour-border);}.cjnw2dw[data-max-width="false"]::after{content:"";min-width:120px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .cjnw2dw[data-max-width="false"]::after{display:none;}
+.c1xm1ca3{padding-left:0;box-shadow:none;border-radius:var(--fds-radius-sm);}.c1xm1ca3:focus-within{box-shadow:inset 0 0 0 2px var(--fds-colour-border-focus);}
+.vf0c1ti{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-left:var(--fds-spacing-12);color:var(--fds-colour-icon-success);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.vf0c1ti svg{width:1.25rem;height:1.25rem;}
+.c1l991bf{min-width:120px;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .c1l991bf{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.e1ik236m{padding:0 var(--fds-spacing-16);width:100%;background:transparent;}
+.e19c6q61 input{color:var(--fds-colour-text-disabled);}
+.ergya1n{padding:0;}
+.pqn3wrd{padding:0 var(--fds-spacing-16);background:transparent;}
+.p9yjg9s input{color:var(--fds-colour-text-disabled);}
+.pg7qgn5{padding:0;}.pg7qgn5 input{margin-left:var(--fds-spacing-12);}}

package/cjs/otp-verification/otp-verification.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var r=require("../util/use-countdown.js"),n=require("./contact-input-section.js"),o=require("./otp-verification-styles.js"),a=require("./verification-section.js");exports.OtpVerification=s=>{const{id:d,"data-testid":u,className:l,inputId:p,onSendOtp:c,onVerifyOtp:v,verifyOtpCountdownTimer:f=60,sendOtpError:y,verifyOtpError:j,otpValue:O,onOtpChange:q,otpState:x,onOtpStateChange:S}=s,[C,h]=i.useState(!1),[g,w]=i.useState(!1),V=r.useCountdown({duration:f});return t.jsxs(o.OTPInputWrapper,{id:d,"data-testid":u,className:l,children:[t.jsx(n.ContactInputSection,Object.assign({},s,{inputId:p,"data-testid":u?`${u}-contact`:void 0,isLoading:C,isVerified:"verified"===x,countdown:V,onSendOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(c)try{h(!0),yield c(),S("sent"),V.reset(),V.start()}catch(e){}finally{h(!1)}})),onStateReset:()=>{"verified"===x&&S("default")},sendOtpError:y,fixedCountry:"phone-number"!==s.type||s.fixedCountry})),"sent"===x&&t.jsx(a.VerificationSection,Object.assign({},s,{"data-testid":u?`${u}-verification`:void 0,otpCode:null==O?void 0:O.value,otpPrefix:null==O?void 0:O.prefix,otpSeparator:null==O?void 0:O.separator,setOtpCode:q,isVerifyLoading:g,countdown:V,onVerifyOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(v&&(null==O?void 0:O.value))try{w(!0),yield v(O.value),S("verified"),V.reset(),null==q||q("")}catch(e){}finally{w(!1)}})),verifyOtpError:j}))]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@react-aria/live-announcer"),r=require("clsx"),n=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var o=require("../util/use-countdown.js"),a=require("./contact-input-section.js"),s=require("./otp-verification.styles.js"),u=require("./verification-section.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=d(r);exports.OtpVerification=r=>{const{id:d,"data-testid":c,className:p,inputId:v,onSendOtp:f,onVerifyOtp:y,verifyOtpCountdownTimer:j=60,sendOtpError:O,verifyOtpError:g,otpValue:m,onOtpChange:q,otpState:S,onOtpStateChange:h,otpReminderInterval:x=120}=r,[C,b]=n.useState(!1),[w,I]=n.useState(!1),V=o.useCountdown({duration:j,reminderInterval:x,getStartMessage:e=>`You can resend the OTP in ${e} seconds`,getIntervalMessage:e=>`${e} seconds remaining`,getCompletionMessage:()=>"You can now resend the OTP"});return t.jsxs("div",{id:d,"data-testid":c,className:l.default(s.otpInputWrapper,p),children:[t.jsx(a.ContactInputSection,Object.assign({},r,{inputId:v,"data-testid":c?`${c}-contact`:void 0,isLoading:C,isVerified:"verified"===S,countdown:V,onSendOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(f&&!C)try{b(!0),yield f(),h("sent"),V.reset(),V.start()}catch(e){}finally{b(!1)}})),onStateReset:()=>{"verified"===S&&h("default")},sendOtpError:O,fixedCountry:"phone-number"!==r.type||r.fixedCountry})),"sent"===S&&t.jsx(u.VerificationSection,Object.assign({},r,{"data-testid":c?`${c}-verification`:void 0,otpCode:null==m?void 0:m.value,otpPrefix:null==m?void 0:m.prefix,otpSeparator:null==m?void 0:m.separator,setOtpCode:q,isVerifyLoading:w,countdown:V,onVerifyOtp:()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(y&&!w&&(null==m?void 0:m.value))try{I(!0),yield y(m.value),h("verified"),i.clearAnnouncer("polite"),i.announce("Success. Your email or mobile number has been verified.","polite"),V.reset(),null==q||q("")}catch(e){}finally{I(!1)}})),verifyOtpError:g}))]})};
 //# sourceMappingURL=otp-verification.js.map

package/cjs/otp-verification/otp-verification.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { OTPInputWrapper } from \"./otp-verification-styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n            onOtpStateChange(\"verified\");\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <OTPInputWrapper id={id} data-testid={dataTestId} className={className}>\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </OTPInputWrapper>\n    );\n};\n"],"names":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","_jsxs","OTPInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode"],"mappings":"qZAQgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,GACAb,GAEGc,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUd,IAqDd,OACIe,OAACC,EAAAA,gBAAe,CAACtB,GAAIA,EAAE,cAAeC,EAAYC,UAAWA,EAASqB,SAAA,CAClEC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,GACZ5B,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuB2B,EACpDf,UAAWA,EACXgB,WAAyB,aAAblB,EACZO,UAAWA,EACXd,UAvDU,IAAW0B,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAK1B,EAEL,IACIU,GAAa,SACPV,IACNQ,EAAiB,QACjBM,EAAUa,QACVb,EAAUc,OACd,CAAE,MAAAC,GAEF,SACInB,GAAa,EACjB,CACJ,IA0CYoB,aAnBW,KACF,aAAbvB,GACAC,EAAiB,UACrB,EAiBQL,aAAcA,EACd4B,aACmB,iBAAfpC,EAAMqC,MAA0BrC,EAAMoC,gBAIhC,SAAbxB,GACGa,MAACa,EAAAA,oBAAmBX,OAAAC,OAAA,CAAA,EACZ5B,iBAEAE,EAAa,GAAGA,sBAA4B2B,EAEhDU,QAAS7B,aAAQ,EAARA,EAAU8B,MACnBC,UAAW/B,aAAQ,EAARA,EAAUgC,OACrBC,aAAcjC,aAAQ,EAARA,EAAUkC,UACxBC,WAAYlC,EACZM,gBAAiBA,EACjBE,UAAWA,EACXb,YA1DQ,IAAWyB,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKzB,IAAgBI,aAAQ,EAARA,EAAU8B,OAE/B,IACItB,GAAmB,SACbZ,EAAYI,EAAS8B,OAC3B3B,EAAiB,YAEjBM,EAAUa,QACVrB,SAAAA,EAAc,GAClB,CAAE,MAAAuB,GAEF,SACIhB,GAAmB,EACvB,CACJ,IA4CgBT,eAAgBA,OAGV"}
+{"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport * as styles from \"./otp-verification.styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\n// @catalog\n/**\n * A multi-step form component that guides users through OTP-based verification.\n *\n * Use `OtpVerification` when you need to verify a user's identity through\n * email address or phone number.\n * @keywords 2FA, authentication, field, form, input, MFA, verification\n */\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n        otpReminderInterval = 120,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n        reminderInterval: otpReminderInterval,\n        getStartMessage: (duration) =>\n            `You can resend the OTP in ${duration} seconds`,\n        getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n        getCompletionMessage: () => \"You can now resend the OTP\",\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp || isLoading) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || isVerifyLoading || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n\n            onOtpStateChange(\"verified\");\n\n            clearAnnouncer(\"polite\");\n            announce(\n                \"Success. Your email or mobile number has been verified.\",\n                \"polite\"\n            );\n\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={clsx(styles.otpInputWrapper, className)}\n        >\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","clsx","styles.otpInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"4kBAkBgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,OAAA,MAAA,CACI3B,GAAIA,gBACSC,EACbC,UAAW0B,UAAKC,EAAAA,gBAAwB3B,GAAU4B,SAAA,CAElDC,MAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAAA,EACZnC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBkC,EACpDrB,UAAWA,EACXsB,WAAyB,aAAbzB,EACZQ,UAAWA,EACXf,UAnEU,IAAWiC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAKjC,IAAaU,EAElB,IACIC,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUmB,QACVnB,EAAUoB,OACd,CAAE,MAAAC,GAEF,SACIzB,GAAa,EACjB,CACJ,IAsDY0B,aAvBW,KACF,aAAb9B,GACAC,EAAiB,UACrB,EAqBQL,aAAcA,EACdmC,aACmB,iBAAf3C,EAAM4C,MAA0B5C,EAAM2C,gBAIhC,SAAb/B,GACGoB,EAAAA,IAACa,EAAAA,qCACO7C,EAAK,CAAA,cAELE,EAAa,GAAGA,sBAA4BkC,EAEhDU,QAASpC,eAAAA,EAAUqC,MACnBC,UAAWtC,aAAQ,EAARA,EAAUuC,OACrBC,aAAcxC,aAAQ,EAARA,EAAUyC,UACxBC,WAAYzC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAtEQ,IAAWgC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKhC,IAAeY,IAAoBR,aAAQ,EAARA,EAAUqC,OAElD,IACI5B,GAAmB,SACbb,EAAYI,EAASqC,OAE3BlC,EAAiB,YAEjBwC,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,UAIJlC,EAAUmB,QACV5B,SAAAA,EAAc,GAClB,CAAE,MAAA8B,GAEF,SACItB,GAAmB,EACvB,CACJ,IAgDgBV,eAAgBA,OAGtB"}

package/cjs/otp-verification/otp-verification.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./otp-verification.styles_dg9bm8.css");exports.otpInputWrapper="o1jl65sy";
+//# sourceMappingURL=otp-verification.styles.js.map

package/cjs/otp-verification/otp-verification.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-verification.styles.js","sources":["../../../src/otp-verification/otp-verification.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const otpInputWrapper = css`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-16\"]};\n`;\n"],"names":[],"mappings":"qHAI4B"}

package/cjs/otp-verification/otp-verification.styles_dg9bm8.css

@@ -0,0 +1 @@
+@layer fds{.o1jl65sy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-16);}}

package/cjs/otp-verification/thumbnail/email-thumbnail.js

@@ -1,22 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),l=require("styled-components"),e=require("../../v3_theme/index.js");function a(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}const t=a(l).default.svg`
-    .background-circle {
-        fill: ${e.V3_Colour["bg-stronger"]};
-    }
-
-    .primary-path {
-        fill: ${e.V3_Colour["icon-primary"]};
-    }
-
-    .validation-icon {
-        fill: ${e.V3_Colour["bg-available"]};
-    }
-
-    .accent-light-3 {
-        fill: ${e.V3_Colour["icon-primary-subtle"]};
-    }
-
-    .accent-light-4 {
-        fill: ${e.V3_Colour["icon-primary-subtlest"]};
-    }
-`;exports.EmailThumbnail=({width:l=120,height:e=120,className:a})=>i.jsxs(t,{width:l,height:e,viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a,children:[i.jsxs("g",{clipPath:"url(#clip0_email_icon)",children:[i.jsx("circle",{cx:"60",cy:"60",r:"60",className:"background-circle"}),i.jsx("path",{d:"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z",className:"primary-path"}),i.jsx("path",{d:"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z",fill:"white"}),i.jsx("path",{d:"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z",className:"accent-light-3"}),i.jsx("path",{d:"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z",className:"accent-light-4"}),i.jsx("path",{d:"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z",className:"validation-icon"})]}),i.jsx("defs",{children:i.jsx("clipPath",{id:"clip0_email_icon",children:i.jsx("rect",{width:"120",height:"120",fill:"white"})})})]});
+"use strict";var C=require("react/jsx-runtime"),a=require("clsx"),e=require("./thumbnail.styles.js");function i(C){return C&&"object"==typeof C&&"default"in C?C:{default:C}}var l=i(a);exports.EmailThumbnail=({className:a})=>C.jsxs("svg",{viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:l.default(e.thumbnail,e.emailThumbnail,a),children:[C.jsxs("g",{clipPath:"url(#clip0_email_icon)",children:[C.jsx("circle",{cx:"60",cy:"60",r:"60",className:"background-circle"}),C.jsx("path",{d:"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z",className:"primary-path"}),C.jsx("path",{d:"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z",fill:"white"}),C.jsx("path",{d:"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z",className:"accent-light-3"}),C.jsx("path",{d:"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z",className:"accent-light-4"}),C.jsx("path",{d:"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z",className:"validation-icon"})]}),C.jsx("defs",{children:C.jsx("clipPath",{id:"clip0_email_icon",children:C.jsx("rect",{width:"120",height:"120",fill:"white"})})})]});
 //# sourceMappingURL=email-thumbnail.js.map

package/cjs/otp-verification/thumbnail/email-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"email-thumbnail.js","sources":["../../../../src/otp-verification/thumbnail/email-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../../v3_theme\";\n\ninterface EmailThumbnailProps {\n    width?: number;\n    height?: number;\n    className?: string;\n}\n\nconst StyledSvg = styled.svg`\n    .background-circle {\n        fill: ${V3_Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${V3_Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${V3_Colour[\"bg-available\"]};\n    }\n\n    .accent-light-3 {\n        fill: ${V3_Colour[\"icon-primary-subtle\"]};\n    }\n\n    .accent-light-4 {\n        fill: ${V3_Colour[\"icon-primary-subtlest\"]};\n    }\n`;\nexport const EmailThumbnail = ({\n    width = 120,\n    height = 120,\n    className,\n}: EmailThumbnailProps) => {\n    return (\n        <StyledSvg\n            width={width}\n            height={height}\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={className}\n        >\n            <g clipPath=\"url(#clip0_email_icon)\">\n                <circle cx=\"60\" cy=\"60\" r=\"60\" className=\"background-circle\" />\n                <path\n                    d=\"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z\"\n                    className=\"accent-light-3\"\n                />\n                <path\n                    d=\"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z\"\n                    className=\"accent-light-4\"\n                />\n                <path\n                    d=\"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z\"\n                    className=\"validation-icon\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_email_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </StyledSvg>\n    );\n};\n"],"names":["StyledSvg","styled","svg","V3_Colour","width","height","className","_jsxs","viewBox","fill","xmlns","children","clipPath","_jsx","cx","cy","r","d","id"],"mappings":"4LAUA,MAAMA,OAAYC,QAAOC,GAAG;;gBAEZC,EAAAA,UAAU;;;;gBAIVA,EAAAA,UAAU;;;;gBAIVA,EAAAA,UAAU;;;;gBAIVA,EAAAA,UAAU;;;;gBAIVA,EAAAA,UAAU;;yBAGI,EAC1BC,QAAQ,IACRC,SAAS,IACTC,eAGIC,OAACP,EAAS,CACNI,MAAOA,EACPC,OAAQA,EACRG,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWA,EAASK,SAAA,CAEpBJ,EAAAA,KAAA,IAAA,CAAGK,SAAS,yBAAwBD,SAAA,CAChCE,EAAAA,IAAA,SAAA,CAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKV,UAAU,sBACzCO,EAAAA,IAAA,OAAA,CACII,EAAE,mOACFX,UAAU,iBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,iRACFR,KAAK,UAETI,EAAAA,IAAA,OAAA,CACII,EAAE,6RACFX,UAAU,mBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,iWACFX,UAAU,mBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,gzCACFX,UAAU,uBAGlBO,EAAAA,IAAA,OAAA,CAAAF,SACIE,EAAAA,IAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAAA,IAAA,OAAA,CAAMT,MAAM,MAAMC,OAAO,MAAMI,KAAK"}
+{"version":3,"file":"email-thumbnail.js","sources":["../../../../src/otp-verification/thumbnail/email-thumbnail.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./thumbnail.styles\";\n\ninterface EmailThumbnailProps {\n    className?: string;\n}\n\nexport const EmailThumbnail = ({ className }: EmailThumbnailProps) => {\n    return (\n        <svg\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={clsx(styles.thumbnail, styles.emailThumbnail, className)}\n        >\n            <g clipPath=\"url(#clip0_email_icon)\">\n                <circle cx=\"60\" cy=\"60\" r=\"60\" className=\"background-circle\" />\n                <path\n                    d=\"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z\"\n                    className=\"accent-light-3\"\n                />\n                <path\n                    d=\"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z\"\n                    className=\"accent-light-4\"\n                />\n                <path\n                    d=\"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z\"\n                    className=\"validation-icon\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_email_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </svg>\n    );\n};\n"],"names":["className","_jsxs","viewBox","fill","xmlns","clsx","styles.thumbnail","styles.emailThumbnail","children","clipPath","_jsx","cx","cy","r","d","id","width","height"],"mappings":"+MAQ8B,EAAGA,eAEzBC,EAAAA,KAAA,MAAA,CACIC,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWK,EAAAA,QAAKC,EAAAA,UAAkBC,iBAAuBP,GAAUQ,SAAA,CAEnEP,EAAAA,KAAA,IAAA,CAAGQ,SAAS,yBAAwBD,SAAA,CAChCE,EAAAA,IAAA,SAAA,CAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKb,UAAU,sBACzCU,EAAAA,IAAA,OAAA,CACII,EAAE,mOACFd,UAAU,iBAEdU,EAAAA,IAAA,OAAA,CACII,EAAE,iRACFX,KAAK,UAETO,EAAAA,IAAA,OAAA,CACII,EAAE,6RACFd,UAAU,mBAEdU,EAAAA,IAAA,OAAA,CACII,EAAE,iWACFd,UAAU,mBAEdU,EAAAA,IAAA,OAAA,CACII,EAAE,gzCACFd,UAAU,uBAGlBU,EAAAA,IAAA,OAAA,CAAAF,SACIE,EAAAA,IAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAAA,IAAA,OAAA,CAAMM,MAAM,MAAMC,OAAO,MAAMd,KAAK"}

package/cjs/otp-verification/thumbnail/phone-thumbnail.js

@@ -1,18 +1,2 @@
-"use strict";var C=require("react/jsx-runtime"),e=require("styled-components"),i=require("../../v3_theme/index.js");function l(C){return C&&"object"==typeof C&&"default"in C?C:{default:C}}const t=l(e).default.svg`
-    .background-circle {
-        fill: ${i.V3_Colour["bg-stronger"]};
-    }
-
-    .primary-path {
-        fill: ${i.V3_Colour["icon-primary"]};
-    }
-
-    .validation-icon {
-        fill: ${i.V3_Colour["bg-available"]};
-    }
-
-    .accent-light {
-        fill: ${i.V3_Colour["bg-selected-stronger"]};
-    }
-`;exports.PhoneThumbnail=({width:e=120,height:i=120,className:l})=>C.jsxs(t,{width:e,height:i,viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:l,children:[C.jsxs("g",{clipPath:"url(#clip0_phone_icon)",children:[C.jsx("circle",{cx:"60",cy:"60.5",r:"60",className:"background-circle"}),C.jsx("path",{d:"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z",className:"primary-path"}),C.jsx("path",{d:"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z",fill:"white"}),C.jsx("path",{d:"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z",className:"validation-icon"}),C.jsx("path",{d:"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z",className:"accent-light"}),C.jsx("path",{d:"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z",className:"accent-light"}),C.jsx("path",{d:"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z",className:"accent-light"})]}),C.jsx("defs",{children:C.jsx("clipPath",{id:"clip0_phone_icon",children:C.jsx("rect",{width:"120",height:"120",fill:"white"})})})]});
+"use strict";var C=require("react/jsx-runtime"),e=require("clsx"),a=require("./thumbnail.styles.js");function s(C){return C&&"object"==typeof C&&"default"in C?C:{default:C}}var i=s(e);exports.PhoneThumbnail=({className:e})=>C.jsxs("svg",{viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i.default(a.thumbnail,a.phoneThumbnail,e),children:[C.jsxs("g",{clipPath:"url(#clip0_phone_icon)",children:[C.jsx("circle",{cx:"60",cy:"60.5",r:"60",className:"background-circle"}),C.jsx("path",{d:"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z",className:"primary-path"}),C.jsx("path",{d:"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z",fill:"white"}),C.jsx("path",{d:"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z",className:"validation-icon"}),C.jsx("path",{d:"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z",className:"accent-light"}),C.jsx("path",{d:"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z",className:"accent-light"}),C.jsx("path",{d:"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z",className:"accent-light"})]}),C.jsx("defs",{children:C.jsx("clipPath",{id:"clip0_phone_icon",children:C.jsx("rect",{width:"120",height:"120",fill:"white"})})})]});
 //# sourceMappingURL=phone-thumbnail.js.map

package/cjs/otp-verification/thumbnail/phone-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-thumbnail.js","sources":["../../../../src/otp-verification/thumbnail/phone-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../../v3_theme\";\n\ninterface PhoneThumbnailProps {\n    width?: number;\n    height?: number;\n    className?: string;\n}\n\nconst StyledSvg = styled.svg`\n    .background-circle {\n        fill: ${V3_Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${V3_Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${V3_Colour[\"bg-available\"]};\n    }\n\n    .accent-light {\n        fill: ${V3_Colour[\"bg-selected-stronger\"]};\n    }\n`;\n\nexport const PhoneThumbnail = ({\n    width = 120,\n    height = 120,\n    className,\n}: PhoneThumbnailProps) => {\n    return (\n        <StyledSvg\n            width={width}\n            height={height}\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={className}\n        >\n            <g clipPath=\"url(#clip0_phone_icon)\">\n                <circle\n                    cx=\"60\"\n                    cy=\"60.5\"\n                    r=\"60\"\n                    className=\"background-circle\"\n                />\n                <path\n                    d=\"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z\"\n                    className=\"validation-icon\"\n                />\n                <path\n                    d=\"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z\"\n                    className=\"accent-light\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_phone_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </StyledSvg>\n    );\n};\n"],"names":["StyledSvg","styled","svg","V3_Colour","width","height","className","_jsxs","viewBox","fill","xmlns","children","clipPath","_jsx","cx","cy","r","d","id"],"mappings":"4LAUA,MAAMA,OAAYC,QAAOC,GAAG;;gBAEZC,EAAAA,UAAU;;;;gBAIVA,EAAAA,UAAU;;;;gBAIVA,EAAAA,UAAU;;;;gBAIVA,EAAAA,UAAU;;yBAII,EAC1BC,QAAQ,IACRC,SAAS,IACTC,eAGIC,OAACP,EAAS,CACNI,MAAOA,EACPC,OAAQA,EACRG,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWA,EAASK,SAAA,CAEpBJ,EAAAA,KAAA,IAAA,CAAGK,SAAS,yBAAwBD,SAAA,CAChCE,EAAAA,IAAA,SAAA,CACIC,GAAG,KACHC,GAAG,OACHC,EAAE,KACFV,UAAU,sBAEdO,MAAA,OAAA,CACII,EAAE,8XACFX,UAAU,iBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,spCACFR,KAAK,UAETI,EAAAA,IAAA,OAAA,CACII,EAAE,0yCACFX,UAAU,oBAEdO,EAAAA,YACII,EAAE,oPACFX,UAAU,iBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,oPACFX,UAAU,iBAEdO,MAAA,OAAA,CACII,EAAE,oPACFX,UAAU,oBAGlBO,EAAAA,IAAA,OAAA,CAAAF,SACIE,EAAAA,IAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,MAAA,OAAA,CAAMT,MAAM,MAAMC,OAAO,MAAMI,KAAK"}
+{"version":3,"file":"phone-thumbnail.js","sources":["../../../../src/otp-verification/thumbnail/phone-thumbnail.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./thumbnail.styles\";\n\ninterface PhoneThumbnailProps {\n    className?: string;\n}\n\nexport const PhoneThumbnail = ({ className }: PhoneThumbnailProps) => {\n    return (\n        <svg\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={clsx(styles.thumbnail, styles.phoneThumbnail, className)}\n        >\n            <g clipPath=\"url(#clip0_phone_icon)\">\n                <circle\n                    cx=\"60\"\n                    cy=\"60.5\"\n                    r=\"60\"\n                    className=\"background-circle\"\n                />\n                <path\n                    d=\"M85.7091 99.047L56.9789 106.705C51.6167 108.134 46.0606 104.916 44.6318 99.5553L27.1393 33.9319C25.9969 29.6444 27.8244 25.2332 31.3437 22.9073C32.2263 22.3231 33.2151 21.8712 34.2899 21.5845L34.4374 21.5449L40.7667 19.8586L56.4455 15.6787L56.4545 15.6763L63.02 13.9267C68.3822 12.497 73.9383 15.715 75.3671 21.0761L92.8596 86.6995C94.2888 92.0619 91.0712 97.6172 85.7091 99.047Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M90.0893 85.5165L72.9593 22.8765C72.8393 22.4365 72.6893 22.0165 72.5093 21.6165C72.0993 20.6965 71.5393 19.8765 70.8693 19.1765C70.2493 18.5365 69.5393 17.9865 68.7593 17.5665C66.8993 16.5465 64.6593 16.2165 62.4593 16.8065L58.8593 17.8765C58.8593 17.8765 58.8693 17.9065 58.8793 17.9265C59.2793 19.4065 58.8293 20.8265 57.8893 21.0665L42.2093 25.2365C41.3193 25.4765 40.3093 24.5765 39.8593 23.2265L36.0693 24.2365C31.5193 25.4465 28.7793 30.1665 29.9993 34.7265L30.3093 35.8765L32.1393 42.7565L35.8493 56.6765L36.8693 60.5165L38.1493 65.3165L47.0793 97.5165C48.2893 102.067 53.0093 104.807 57.5693 103.587L83.9993 95.9965C88.5493 94.7865 91.2893 90.0665 90.0693 85.5065L90.0893 85.5165ZM38.6893 26.3265L34.8993 27.3365C34.5793 27.4265 34.2493 27.2265 34.1593 26.9065C34.0693 26.5865 34.2693 26.2565 34.5893 26.1665L38.3793 25.1565C38.6993 25.0665 39.0293 25.2665 39.1193 25.5865C39.2093 25.9065 39.0093 26.2365 38.6893 26.3265ZM65.6893 19.3265L61.8993 20.3365C61.5793 20.4265 61.2493 20.2265 61.1593 19.9065C61.0693 19.5865 61.2693 19.2565 61.5893 19.1665L65.3793 18.1565C65.6993 18.0665 66.0293 18.2665 66.1193 18.5865C66.2093 18.9065 66.0093 19.2365 65.6893 19.3265Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M55.1766 48.5674L51.606 46.5059C51.2659 46.3096 50.9001 46.2639 50.5086 46.3688C50.1181 46.4734 49.8247 46.6958 49.6283 47.0358C49.4155 47.4045 49.3616 47.7846 49.4665 48.1761C49.5711 48.5666 49.8047 48.857 50.1673 49.0473L54.9279 51.7972C55.2737 52.015 55.6424 52.0715 56.0339 51.9665C56.4244 51.8619 56.7262 51.6258 56.9393 51.2583L62.4123 41.7787C62.6086 41.4387 62.6559 41.0788 62.5541 40.699C62.4521 40.3181 62.231 40.0296 61.891 39.8332C61.5509 39.6369 61.1851 39.5912 60.7935 39.6961C60.403 39.8007 60.1096 40.0231 59.9133 40.3631L55.1766 48.5674ZM59.9961 59.3129C58.1413 59.8099 56.3037 59.9251 54.4835 59.6586C52.6632 59.392 50.988 58.817 49.4577 57.9335C47.9274 57.05 46.5918 55.8867 45.4509 54.4435C44.3099 53.0004 43.4909 51.3514 42.9939 49.4965C42.4969 47.6417 42.3817 45.8041 42.6482 43.9838C42.9147 42.1635 43.4897 40.4882 44.3732 38.958C45.2567 37.4277 46.42 36.0921 47.8631 34.9511C49.3063 33.8102 50.9552 32.9912 52.8101 32.4942C54.6649 31.9972 56.5025 31.8819 58.3227 32.1485C60.143 32.415 61.8183 32.99 63.3485 33.8736C64.8788 34.7571 66.2144 35.9204 67.3554 37.3635C68.4963 38.8067 69.3153 40.4557 69.8123 42.3105C70.3093 44.1654 70.4246 46.003 70.158 47.8233C69.8915 49.6435 69.3165 51.3188 68.433 52.8491C67.5495 54.3794 66.3862 55.715 64.9431 56.8559C63.5 57.9969 61.851 58.8159 59.9961 59.3129Z\"\n                    className=\"validation-icon\"\n                />\n                <path\n                    d=\"M76.5801 68.8601C77.3501 68.6501 77.8201 67.8501 77.6101 67.0801C77.4001 66.3101 76.6001 65.8401 75.8301 66.0501L49.0801 73.1601C48.3101 73.3701 47.8401 74.1701 48.0501 74.9401C48.2601 75.7101 49.0601 76.1801 49.8301 75.9701L76.5801 68.8601Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M78.5098 76.1402C79.2798 75.9302 79.7498 75.1302 79.5398 74.3602C79.3298 73.5902 78.5298 73.1202 77.7598 73.3302L51.0098 80.4402C50.2398 80.6502 49.7698 81.4502 49.9798 82.2202C50.1898 82.9902 50.9898 83.4602 51.7598 83.2502L78.5098 76.1402Z\"\n                    className=\"accent-light\"\n                />\n                <path\n                    d=\"M81.6702 82.3401C81.4602 81.5701 80.6602 81.1001 79.8902 81.3101L53.1402 88.4201C52.3702 88.6301 51.9002 89.4301 52.1102 90.2001C52.3202 90.9701 53.1202 91.4401 53.8902 91.2301L80.6402 84.1201C81.4102 83.9101 81.8802 83.1101 81.6702 82.3401Z\"\n                    className=\"accent-light\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_phone_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </svg>\n    );\n};\n"],"names":["className","_jsxs","viewBox","fill","xmlns","clsx","styles.thumbnail","styles.phoneThumbnail","children","clipPath","_jsx","cx","cy","r","d","id","width","height"],"mappings":"+MAQ8B,EAAGA,eAEzBC,OAAA,MAAA,CACIC,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWK,EAAAA,QAAKC,EAAAA,UAAkBC,EAAAA,eAAuBP,GAAUQ,SAAA,CAEnEP,EAAAA,KAAA,IAAA,CAAGQ,SAAS,yBAAwBD,SAAA,CAChCE,EAAAA,IAAA,SAAA,CACIC,GAAG,KACHC,GAAG,OACHC,EAAE,KACFb,UAAU,sBAEdU,EAAAA,IAAA,OAAA,CACII,EAAE,8XACFd,UAAU,iBAEdU,EAAAA,IAAA,OAAA,CACII,EAAE,spCACFX,KAAK,UAETO,EAAAA,IAAA,OAAA,CACII,EAAE,0yCACFd,UAAU,oBAEdU,EAAAA,YACII,EAAE,oPACFd,UAAU,iBAEdU,EAAAA,IAAA,OAAA,CACII,EAAE,oPACFd,UAAU,iBAEdU,MAAA,OAAA,CACII,EAAE,oPACFd,UAAU,oBAGlBU,EAAAA,IAAA,OAAA,CAAAF,SACIE,EAAAA,IAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,MAAA,OAAA,CAAMM,MAAM,MAAMC,OAAO,MAAMd,KAAK"}

package/cjs/otp-verification/thumbnail/thumbnail.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./thumbnail.styles_shqylh.css");exports.emailThumbnail="e1m2pw4s",exports.phoneThumbnail="p19527g1",exports.thumbnail="tzhqtbi";
+//# sourceMappingURL=thumbnail.styles.js.map

package/cjs/otp-verification/thumbnail/thumbnail.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.styles.js","sources":["../../../../src/otp-verification/thumbnail/thumbnail.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery } from \"../../theme\";\n\nexport const thumbnail = css`\n    width: 120px;\n    height: 120px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 64px;\n        height: 64px;\n    }\n`;\n\nexport const phoneThumbnail = css`\n    .background-circle {\n        fill: ${Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${Colour[\"bg-available\"]};\n    }\n\n    .accent-light {\n        fill: ${Colour[\"bg-selected-stronger\"]};\n    }\n`;\n\nexport const emailThumbnail = css`\n    .background-circle {\n        fill: ${Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${Colour[\"bg-available\"]};\n    }\n\n    .accent-light-3 {\n        fill: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    .accent-light-4 {\n        fill: ${Colour[\"icon-primary-subtlest\"]};\n    }\n`;\n"],"names":[],"mappings":"uHAgC2B,kCAlBA,6BAVL"}

package/cjs/otp-verification/thumbnail/thumbnail.styles_shqylh.css

@@ -0,0 +1,3 @@
+@layer fds{.tzhqtbi{width:120px;height:120px;}:where(body.fds-breakpoint-sm-max) .tzhqtbi{width:64px;height:64px;}
+.p19527g1 .background-circle{fill:var(--fds-colour-bg-stronger);}.p19527g1 .primary-path{fill:var(--fds-colour-icon-primary);}.p19527g1 .validation-icon{fill:var(--fds-colour-bg-available);}.p19527g1 .accent-light{fill:var(--fds-colour-bg-selected-stronger);}
+.e1m2pw4s .background-circle{fill:var(--fds-colour-bg-stronger);}.e1m2pw4s .primary-path{fill:var(--fds-colour-icon-primary);}.e1m2pw4s .validation-icon{fill:var(--fds-colour-bg-available);}.e1m2pw4s .accent-light-3{fill:var(--fds-colour-icon-primary-subtle);}.e1m2pw4s .accent-light-4{fill:var(--fds-colour-icon-primary-subtlest);}}

package/cjs/otp-verification/verification-section.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("../external/react-responsive/dist/react-responsive.js"),t=require("styled-components"),a=require("../form/form-label.js"),n=require("../input-group/input-group.js"),o=require("../typography/index.js"),d=require("../v3_theme/index.js"),s=require("./thumbnail/email-thumbnail.js"),l=require("./thumbnail/phone-thumbnail.js"),u=require("./verification-section-styles.js");exports.VerificationSection=({id:p,"data-testid":h,type:v,showVerifyOtpThumbnail:c=!1,verifyOtpTitle:y,verifyOtpMessage:m,otpCode:f,setOtpCode:x,isVerifyLoading:g,countdown:j,onVerifyOtp:b,verifyOtpError:$,otpPrefix:q,otpSeparator:T})=>{const O=i.useContext(t.ThemeContext),V=r.reactResponsiveExports.useMediaQuery({maxWidth:d.V3_Breakpoint["sm-max"]({theme:O})})?64:120;return e.jsxs(u.VerificationSectionWrapper,{id:p,"data-testid":h,role:"group","aria-labelledby":p?`${p}-title`:void 0,children:[(()=>{if(!c)return null;const i="email"===v?"Email verification":"Phone verification";return e.jsx("div",{"aria-label":i,role:"img",children:"email"===v?e.jsx(s.EmailThumbnail,{width:V,height:V}):e.jsx(l.PhoneThumbnail,{width:V,height:V})})})(),e.jsxs(u.SectionContainer,{children:[e.jsxs("div",{children:[e.jsx(o.Typography.BodyMD,{weight:"semibold",id:p?`${p}-title`:void 0,"data-testid":h?`${h}-title`:void 0,children:y}),e.jsx(o.Typography.BodyMD,{weight:"regular",id:p?`${p}-message`:void 0,"data-testid":h?`${h}-message`:void 0,children:m})]}),e.jsxs("div",{children:[e.jsxs(u.VerifyInputWrapper,{children:[e.jsx(n.InputGroup,{id:p?`${p}-verify-input`:void 0,"data-testid":h?`${h}-verify-input`:void 0,value:f,onChange:e=>null==x?void 0:x(e.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=q?q:""}${null!=T?T:""}`}},type:"number",error:!!$,"aria-label":"Enter OTP code","aria-invalid":!!$,"aria-required":!0}),e.jsx(u.VerifyButton,{id:p?`${p}-verify-button`:void 0,type:"button","data-testid":h?`${h}-verify-button`:void 0,onClick:b,loading:g,styleType:"light",disabled:!f||0===f.length,children:!g&&"Verify"})]}),$&&e.jsx(a.FormErrorMessage,{id:p?`${p}-verify-error`:void 0,"data-testid":h?`${h}-verify-error`:void 0,role:"alert",children:$})]}),j.isRunning&&e.jsxs(u.ReSendMessage,{id:p?`${p}-countdown`:void 0,"data-testid":h?`${h}-countdown`:void 0,children:["Resend OTP in ",j.formatTime()]})]})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("../button/button.js"),r=require("../form/form-label/form-label.js"),t=require("../input-group/input-group.js"),a=require("../shared/accessibility/index.js"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("react");var d=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./thumbnail/email-thumbnail.js"),o=require("./thumbnail/phone-thumbnail.js"),l=require("./verification-section.styles.js");exports.VerificationSection=({id:u,"data-testid":p,type:c,showVerifyOtpThumbnail:v=!1,verifyOtpTitle:y,verifyOtpMessage:h,otpCode:j,setOtpCode:m,isVerifyLoading:b,countdown:f,onVerifyOtp:g,verifyOtpError:x,otpPrefix:q,otpSeparator:$})=>{const T=d.useId(),O=`${T}-title`,w=`${T}-message`,M=`${T}-verify-input-addon`,B=`${T}-verify-error`;return e.jsxs("div",{id:u,"data-testid":p,role:"group",className:l.verificationSectionWrapper,children:[v?e.jsx("div",{"aria-hidden":!0,children:"email"===c?e.jsx(n.EmailThumbnail,{}):e.jsx(o.PhoneThumbnail,{})}):null,e.jsxs("div",{className:l.sectionContainer,children:[e.jsxs("div",{children:[e.jsx(s.Typography.BodyMD,{weight:"semibold",id:O,"data-testid":p?`${p}-title`:void 0,children:y}),e.jsx(s.Typography.BodyMD,{weight:"regular",id:w,"data-testid":p?`${p}-message`:void 0,children:h})]}),e.jsxs("div",{children:[e.jsxs("div",{className:l.verifyInputWrapper,children:[e.jsx(t.InputGroup,{id:u?`${u}-verify-input`:void 0,"data-testid":p?`${p}-verify-input`:void 0,value:j,onChange:e=>null==m?void 0:m(e.target.value),placeholder:"Enter OTP",addon:{type:"label",attributes:{value:`${null!=q?q:""}${null!=$?$:""}`}},type:"number",error:!!x,"aria-labelledby":O,"aria-describedby":a.concatIds(w,M,x?B:void 0),"aria-invalid":!!x,"aria-required":!0}),e.jsx(i.Button,{id:u?`${u}-verify-button`:void 0,type:"button","data-testid":p?`${p}-verify-button`:void 0,onClick:g,loading:b,styleType:"light",disabled:!j||0===j.length,className:l.verifyButton,children:!b&&"Verify"})]}),x&&e.jsx(r.FormErrorMessage,{id:B,"data-testid":p?`${p}-verify-error`:void 0,role:"alert",children:x})]}),f.isRunning&&e.jsxs(s.Typography.BodyMD,{id:u?`${u}-countdown`:void 0,"data-testid":p?`${p}-countdown`:void 0,className:l.resendMessage,children:["Resend OTP in ",f.formatTime()]})]})]})};
 //# sourceMappingURL=verification-section.js.map