@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.3

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");require("@react-aria/live-announcer");var 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:y,actionButtonProps:g,errorMessage:m,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 q=null!=g?g:{},{disabled:D,onClick:I,styleType:T="secondary"}=q,P=e.__rest(q,["disabled","onClick","styleType"]),E=t.useRef([]),R=t.useRef(w),[A,k]=t.useState(new Array(h).fill("")),[S,_]=t.useState(y),[B,H]=t.useState(new Date),M=i.useId(),F=!!m,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",W),()=>document.removeEventListener("paste",W)}),[]),t.useEffect((()=>{if(0!==y){b&&b();const e=G();return()=>e()}}),[B]),t.useImperativeHandle(d,(()=>({startCooldown:()=>{H(new Date),_(y)}}))),t.useEffect((()=>{R.current=w}),[w]),t.useEffect((()=>{p.length===h&&k(p)}),[p]);const V=e=>{if(e&&l.validateUserInput(e,h)){const r=e.split("");return k(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(),k(r),w&&w(r)}},K=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()),k(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())},W=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=l.stripOtpFromAutofill(r,h,j);V(t)||e.preventDefault()},z=()=>{const e=Date.now(),r=1e3*y;return e<B.valueOf()+r},G=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*y,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:K(t),autoComplete:"off"},$),t)))]}),m&&r.jsx(n.FormErrorMessage,{id:L,children:m}),r.jsxs(a.VisuallyHidden,{role:"timer",id:N,children:[Q(S)," remaining"]}),r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:S>0?"":"Ready to resend OTP"}),!O&&r.jsx(o.CTAButton,Object.assign({styleType:T,type:"button"},P,{onClick:e=>{k(new Array(h).fill("")),z()||(H(new Date),_(y)),I&&I(e)},disabled:D||z()},P.children?{children:P.children}:{children:S>0?`Resend OTP in ${Q(S)}`:"Resend OTP","aria-label":S>0?`Resend OTP in ${Q(y)}`:"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.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 { StringHelper, useId } 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 = 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    }, []);\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","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","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":"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"}
+{"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    }, []);\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        <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\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 @@
+.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-styles.js

@@ -1,12 +1,13 @@
-"use strict";var o=require("styled-components"),r=require("../button/button.js"),e=require("../input-group/input-group.js"),t=require("../phone-number-input/phone-number-input.js"),i=require("../v3_theme/index.js");function s(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=s(o);const d=n.default.div`
+"use strict";var o=require("styled-components"),e=require("../button/button.js"),r=require("../input-group/input-group.js"),t=require("../phone-number-input/phone-number-input.js"),i=require("../v3_theme/index.js");function n(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var s=n(o);const d=s.default.div`
     display: flex;
     flex-direction: column;
-`,a=n.default.div`
+`,a=s.default.div`
     display: flex;
-`,u=n.default.div`
+`,u=s.default.div`
     display: flex;
     align-items: center;
     width: ${o=>o.$isMaxWidth?"100%":"auto"};
+    padding: 0 ${i.V3_Spacing["spacing-16"]};
     border-radius: ${i.V3_Radius.sm} 0 0 ${i.V3_Radius.sm};
     box-shadow: inset 1px 0 0 ${i.V3_Colour.border},
         inset 0 1px 0 ${i.V3_Colour.border},
@@ -18,7 +19,7 @@
             inset 0 -2px 0 ${i.V3_Colour["border-focus"]};
     }
 
-    ${r=>r.$error?o.css`
+    ${e=>e.$error?o.css`
                 box-shadow: inset 1px 0 0 ${i.V3_Colour["border-error"]},
                     inset 0 1px 0 ${i.V3_Colour["border-error"]},
                     inset 0 -1px 0 ${i.V3_Colour["border-error"]};
@@ -28,7 +29,7 @@
                         inset 0 2px 0 ${i.V3_Colour["border-error-focus"]},
                         inset 0 -2px 0 ${i.V3_Colour["border-error-focus"]};
                 }
-            `:r.$disabled?o.css`
+            `:e.$disabled?o.css`
                 box-shadow: inset 0 0 0 1px ${i.V3_Colour.border};
                 border-radius: ${i.V3_Radius.sm};
                 background: ${i.V3_Colour["bg-disabled"]};
@@ -38,7 +39,7 @@
                 }
 
                 /* Spacer to maintain width when disabled */
-                ${!r.$isMaxWidth&&o.css`
+                ${!e.$isMaxWidth&&o.css`
                     &::after {
                         content: "";
                         min-width: 120px;
@@ -52,18 +53,19 @@
                         }
                     }
                 `}
-            `:r.$readonly?o.css`
+            `:e.$readonly?o.css`
+                padding-left: 0;
                 box-shadow: none;
                 border-radius: ${i.V3_Radius.sm};
                 &:focus-within {
                     box-shadow: inset 0 0 0 2px ${i.V3_Colour["border-focus"]};
                 }
             `:void 0}
-`,p=n.default.div`
+`,p=s.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 ${i.V3_Spacing["spacing-12"]};
+    padding-left: ${i.V3_Spacing["spacing-12"]};
     color: ${i.V3_Colour["icon-success"]};
     flex-shrink: 0;
 
@@ -71,7 +73,7 @@
         width: 1.25rem;
         height: 1.25rem;
     }
-`,l=n.default(r.Button.Default)`
+`,l=s.default(e.Button.Default)`
     min-width: 120px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -79,31 +81,31 @@
     ${i.V3_MediaQuery.MaxWidth.sm} {
         width: fit-content;
     }
-`,c=n.default(e.InputGroup)`
+`,c=s.default(r.InputGroup)`
     padding: 0 ${i.V3_Spacing["spacing-16"]};
     width: 100%;
     background: transparent;
 
-    ${r=>r.disabled&&o.css`
+    ${e=>e.disabled&&o.css`
             input {
                 color: ${i.V3_Colour["text-disabled"]};
             }
         `}
 
-    ${r=>r.readOnly&&o.css`
+    ${e=>e.readOnly&&o.css`
             padding: 0;
         `}
-`,x=n.default(t.PhoneNumberInput)`
+`,x=s.default(t.PhoneNumberInput)`
     padding: 0 ${i.V3_Spacing["spacing-16"]};
     background: transparent;
 
-    ${r=>r.disabled&&o.css`
+    ${e=>e.disabled&&o.css`
             input {
                 color: ${i.V3_Colour["text-disabled"]};
             }
         `}
 
-    ${r=>r.readOnly&&o.css`
+    ${e=>e.readOnly&&o.css`
             padding: 0;
             input {
                 margin-left: ${i.V3_Spacing["spacing-12"]};

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

@@ -1 +1 @@
-{"version":3,"file":"contact-input-section-styles.js","sources":["../../../src/otp-verification/contact-input-section-styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { InputGroup } from \"../input-group\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { V3_Colour, V3_MediaQuery, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ContactInputWrapperStyleProps {\n    $isMaxWidth?: boolean;\n    $error?: boolean;\n    $disabled?: boolean;\n    $readonly?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ContactSectionWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ContactInputSectionWrapper = styled.div`\n    display: flex;\n`;\n\nexport const ContactInputWrapper = styled.div<ContactInputWrapperStyleProps>`\n    display: flex;\n    align-items: center;\n    width: ${(props) => (props.$isMaxWidth ? \"100%\" : \"auto\")};\n    border-radius: ${V3_Radius[\"sm\"]} 0 0 ${V3_Radius[\"sm\"]};\n    box-shadow: inset 1px 0 0 ${V3_Colour[\"border\"]},\n        inset 0 1px 0 ${V3_Colour[\"border\"]},\n        inset 0 -1px 0 ${V3_Colour[\"border\"]};\n\n    &:focus-within {\n        box-shadow: inset 2px 0 0 ${V3_Colour[\"border-focus\"]},\n            inset 0 2px 0 ${V3_Colour[\"border-focus\"]},\n            inset 0 -2px 0 ${V3_Colour[\"border-focus\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                box-shadow: inset 1px 0 0 ${V3_Colour[\"border-error\"]},\n                    inset 0 1px 0 ${V3_Colour[\"border-error\"]},\n                    inset 0 -1px 0 ${V3_Colour[\"border-error\"]};\n\n                &:focus-within {\n                    box-shadow: inset 2px 0 0 ${V3_Colour[\"border-error-focus\"]},\n                        inset 0 2px 0 ${V3_Colour[\"border-error-focus\"]},\n                        inset 0 -2px 0 ${V3_Colour[\"border-error-focus\"]};\n                }\n            `;\n        } else if (props.$disabled) {\n            return css`\n                box-shadow: inset 0 0 0 1px ${V3_Colour[\"border\"]};\n                border-radius: ${V3_Radius[\"sm\"]};\n                background: ${V3_Colour[\"bg-disabled\"]};\n                color: ${V3_Colour[\"text-disabled\"]};\n                &:focus-within {\n                    box-shadow: inset 0 0 0 2px ${V3_Colour[\"border\"]};\n                }\n\n                /* Spacer to maintain width when disabled */\n                ${!props.$isMaxWidth &&\n                css`\n                    &::after {\n                        content: \"\";\n                        min-width: 120px;\n                        flex-shrink: 0;\n                    }\n\n                    /* Hide spacer on mobile to prevent text coverage */\n                    ${V3_MediaQuery.MaxWidth.sm} {\n                        &::after {\n                            display: none;\n                        }\n                    }\n                `}\n            `;\n        } else if (props.$readonly) {\n            return css`\n                box-shadow: none;\n                border-radius: ${V3_Radius[\"sm\"]};\n                &:focus-within {\n                    box-shadow: inset 0 0 0 2px ${V3_Colour[\"border-focus\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const VerifiedIconWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ${V3_Spacing[\"spacing-12\"]};\n    color: ${V3_Colour[\"icon-success\"]};\n    flex-shrink: 0;\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n`;\n\nexport const ContactButton = styled(Button.Default)`\n    min-width: 120px;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    flex-shrink: 0;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        width: fit-content;\n    }\n`;\n\nexport const EmailContactInput = styled(InputGroup)`\n    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n    width: 100%;\n    background: transparent;\n\n    ${(props) =>\n        props.disabled &&\n        css`\n            input {\n                color: ${V3_Colour[\"text-disabled\"]};\n            }\n        `}\n\n    ${(props) =>\n        props.readOnly &&\n        css`\n            padding: 0;\n        `}\n`;\n\nexport const PhoneContactInput = styled(PhoneNumberInput)`\n    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n    background: transparent;\n\n    ${(props) =>\n        props.disabled &&\n        css`\n            input {\n                color: ${V3_Colour[\"text-disabled\"]};\n            }\n        `}\n\n    ${(props) =>\n        props.readOnly &&\n        css`\n            padding: 0;\n            input {\n                margin-left: ${V3_Spacing[\"spacing-12\"]};\n            }\n        `}\n`;\n"],"names":["ContactSectionWrapper","styled","div","ContactInputSectionWrapper","ContactInputWrapper","props","$isMaxWidth","V3_Radius","V3_Colour","$error","css","$disabled","V3_MediaQuery","MaxWidth","sm","$readonly","VerifiedIconWrapper","V3_Spacing","ContactButton","Button","Default","EmailContactInput","InputGroup","disabled","readOnly","PhoneContactInput","PhoneNumberInput"],"mappings":"0SAoBO,MAAMA,EAAwBC,EAAAA,QAAOC,GAAG;;;EAKlCC,EAA6BF,EAAAA,QAAOC,GAAG;;EAIvCE,EAAsBH,EAAAA,QAAOC,GAAkC;;;aAG9DG,GAAWA,EAAMC,YAAc,OAAS;qBACjCC,EAAAA,UAAc,UAASA,EAAAA,UAAc;gCAC1BC,EAAAA,UAAkB;wBAC1BA,EAAAA,UAAkB;yBACjBA,EAAAA,UAAkB;;;oCAGPA,EAAAA,UAAU;4BAClBA,EAAAA,UAAU;6BACTA,EAAAA,UAAU;;;MAGhCH,GACKA,EAAMI,OACCC,KAAG;4CACsBF,EAAAA,UAAU;oCAClBA,EAAAA,UAAU;qCACTA,EAAAA,UAAU;;;gDAGCA,EAAAA,UAAU;wCAClBA,EAAAA,UAAU;yCACTA,EAAAA,UAAU;;cAGhCH,EAAMM,UACND,KAAG;8CACwBF,EAAAA,UAAkB;iCAC/BD,EAAAA,UAAc;8BACjBC,EAAAA,UAAU;yBACfA,EAAAA,UAAU;;kDAEeA,EAAAA,UAAkB;;;;mBAIjDH,EAAMC,aACTI,KAAG;;;;;;;;sBAQGE,EAAAA,cAAcC,SAASC;;;;;;cAO1BT,EAAMU,UACNL,KAAG;;iCAEWH,EAAAA,UAAc;;kDAEGC,EAAAA,UAAU;;mBAL7C;EAYFQ,EAAsBf,EAAAA,QAAOC,GAAG;;;;iBAI5Be,EAAAA,WAAW;aACfT,EAAAA,UAAU;;;;;;;EASVU,EAAgBjB,EAAAA,QAAOkB,SAAOC,QAAQ;;;;;MAK7CR,EAAAA,cAAcC,SAASC;;;EAKhBO,EAAoBpB,EAAAA,QAAOqB,EAAAA,WAAW;iBAClCL,EAAAA,WAAW;;;;MAIrBZ,GACCA,EAAMkB,UACNb,KAAG;;yBAEcF,EAAAA,UAAU;;;;MAI5BH,GACCA,EAAMmB,UACNd,KAAG;;;EAKEe,EAAoBxB,EAAAA,QAAOyB,EAAAA,iBAAiB;iBACxCT,EAAAA,WAAW;;;MAGrBZ,GACCA,EAAMkB,UACNb,KAAG;;yBAEcF,EAAAA,UAAU;;;;MAI5BH,GACCA,EAAMmB,UACNd,KAAG;;;+BAGoBO,EAAAA,WAAW;;;"}
+{"version":3,"file":"contact-input-section-styles.js","sources":["../../../src/otp-verification/contact-input-section-styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { InputGroup } from \"../input-group\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { V3_Colour, V3_MediaQuery, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ContactInputWrapperStyleProps {\n    $isMaxWidth?: boolean;\n    $error?: boolean;\n    $disabled?: boolean;\n    $readonly?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ContactSectionWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ContactInputSectionWrapper = styled.div`\n    display: flex;\n`;\n\nexport const ContactInputWrapper = styled.div<ContactInputWrapperStyleProps>`\n    display: flex;\n    align-items: center;\n    width: ${(props) => (props.$isMaxWidth ? \"100%\" : \"auto\")};\n    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n    border-radius: ${V3_Radius[\"sm\"]} 0 0 ${V3_Radius[\"sm\"]};\n    box-shadow: inset 1px 0 0 ${V3_Colour[\"border\"]},\n        inset 0 1px 0 ${V3_Colour[\"border\"]},\n        inset 0 -1px 0 ${V3_Colour[\"border\"]};\n\n    &:focus-within {\n        box-shadow: inset 2px 0 0 ${V3_Colour[\"border-focus\"]},\n            inset 0 2px 0 ${V3_Colour[\"border-focus\"]},\n            inset 0 -2px 0 ${V3_Colour[\"border-focus\"]};\n    }\n\n    ${(props) => {\n        if (props.$error) {\n            return css`\n                box-shadow: inset 1px 0 0 ${V3_Colour[\"border-error\"]},\n                    inset 0 1px 0 ${V3_Colour[\"border-error\"]},\n                    inset 0 -1px 0 ${V3_Colour[\"border-error\"]};\n\n                &:focus-within {\n                    box-shadow: inset 2px 0 0 ${V3_Colour[\"border-error-focus\"]},\n                        inset 0 2px 0 ${V3_Colour[\"border-error-focus\"]},\n                        inset 0 -2px 0 ${V3_Colour[\"border-error-focus\"]};\n                }\n            `;\n        } else if (props.$disabled) {\n            return css`\n                box-shadow: inset 0 0 0 1px ${V3_Colour[\"border\"]};\n                border-radius: ${V3_Radius[\"sm\"]};\n                background: ${V3_Colour[\"bg-disabled\"]};\n                color: ${V3_Colour[\"text-disabled\"]};\n                &:focus-within {\n                    box-shadow: inset 0 0 0 2px ${V3_Colour[\"border\"]};\n                }\n\n                /* Spacer to maintain width when disabled */\n                ${!props.$isMaxWidth &&\n                css`\n                    &::after {\n                        content: \"\";\n                        min-width: 120px;\n                        flex-shrink: 0;\n                    }\n\n                    /* Hide spacer on mobile to prevent text coverage */\n                    ${V3_MediaQuery.MaxWidth.sm} {\n                        &::after {\n                            display: none;\n                        }\n                    }\n                `}\n            `;\n        } else if (props.$readonly) {\n            return css`\n                padding-left: 0;\n                box-shadow: none;\n                border-radius: ${V3_Radius[\"sm\"]};\n                &:focus-within {\n                    box-shadow: inset 0 0 0 2px ${V3_Colour[\"border-focus\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const VerifiedIconWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-left: ${V3_Spacing[\"spacing-12\"]};\n    color: ${V3_Colour[\"icon-success\"]};\n    flex-shrink: 0;\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n`;\n\nexport const ContactButton = styled(Button.Default)`\n    min-width: 120px;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    flex-shrink: 0;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        width: fit-content;\n    }\n`;\n\nexport const EmailContactInput = styled(InputGroup)`\n    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n    width: 100%;\n    background: transparent;\n\n    ${(props) =>\n        props.disabled &&\n        css`\n            input {\n                color: ${V3_Colour[\"text-disabled\"]};\n            }\n        `}\n\n    ${(props) =>\n        props.readOnly &&\n        css`\n            padding: 0;\n        `}\n`;\n\nexport const PhoneContactInput = styled(PhoneNumberInput)`\n    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n    background: transparent;\n\n    ${(props) =>\n        props.disabled &&\n        css`\n            input {\n                color: ${V3_Colour[\"text-disabled\"]};\n            }\n        `}\n\n    ${(props) =>\n        props.readOnly &&\n        css`\n            padding: 0;\n            input {\n                margin-left: ${V3_Spacing[\"spacing-12\"]};\n            }\n        `}\n`;\n"],"names":["ContactSectionWrapper","styled","div","ContactInputSectionWrapper","ContactInputWrapper","props","$isMaxWidth","V3_Spacing","V3_Radius","V3_Colour","$error","css","$disabled","V3_MediaQuery","MaxWidth","sm","$readonly","VerifiedIconWrapper","ContactButton","Button","Default","EmailContactInput","InputGroup","disabled","readOnly","PhoneContactInput","PhoneNumberInput"],"mappings":"0SAoBO,MAAMA,EAAwBC,EAAAA,QAAOC,GAAG;;;EAKlCC,EAA6BF,EAAAA,QAAOC,GAAG;;EAIvCE,EAAsBH,EAAAA,QAAOC,GAAkC;;;aAG9DG,GAAWA,EAAMC,YAAc,OAAS;iBACrCC,EAAAA,WAAW;qBACPC,EAAAA,UAAc,UAASA,EAAAA,UAAc;gCAC1BC,EAAAA,UAAkB;wBAC1BA,EAAAA,UAAkB;yBACjBA,EAAAA,UAAkB;;;oCAGPA,EAAAA,UAAU;4BAClBA,EAAAA,UAAU;6BACTA,EAAAA,UAAU;;;MAGhCJ,GACKA,EAAMK,OACCC,KAAG;4CACsBF,EAAAA,UAAU;oCAClBA,EAAAA,UAAU;qCACTA,EAAAA,UAAU;;;gDAGCA,EAAAA,UAAU;wCAClBA,EAAAA,UAAU;yCACTA,EAAAA,UAAU;;cAGhCJ,EAAMO,UACND,KAAG;8CACwBF,EAAAA,UAAkB;iCAC/BD,EAAAA,UAAc;8BACjBC,EAAAA,UAAU;yBACfA,EAAAA,UAAU;;kDAEeA,EAAAA,UAAkB;;;;mBAIjDJ,EAAMC,aACTK,KAAG;;;;;;;;sBAQGE,EAAAA,cAAcC,SAASC;;;;;;cAO1BV,EAAMW,UACNL,KAAG;;;iCAGWH,EAAAA,UAAc;;kDAEGC,EAAAA,UAAU;;mBAN7C;EAaFQ,EAAsBhB,EAAAA,QAAOC,GAAG;;;;oBAIzBK,EAAAA,WAAW;aAClBE,EAAAA,UAAU;;;;;;;EASVS,EAAgBjB,EAAAA,QAAOkB,SAAOC,QAAQ;;;;;MAK7CP,EAAAA,cAAcC,SAASC;;;EAKhBM,EAAoBpB,EAAAA,QAAOqB,EAAAA,WAAW;iBAClCf,EAAAA,WAAW;;;;MAIrBF,GACCA,EAAMkB,UACNZ,KAAG;;yBAEcF,EAAAA,UAAU;;;;MAI5BJ,GACCA,EAAMmB,UACNb,KAAG;;;EAKEc,EAAoBxB,EAAAA,QAAOyB,EAAAA,iBAAiB;iBACxCnB,EAAAA,WAAW;;;MAGrBF,GACCA,EAAMkB,UACNZ,KAAG;;yBAEcF,EAAAA,UAAU;;;;MAI5BJ,GACCA,EAAMmB,UACNb,KAAG;;;+BAGoBJ,EAAAA,WAAW;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),r=require("../form/form-label.js"),t=require("./contact-input-section-styles.js");exports.ContactInputSection=({id:a,"data-testid":n,disabled:o,readOnly:d,inputId:l,type:c,sendOtpPlaceholder:s,emailValue:u,onEmailChange:p,phoneNumberValue:b,onPhoneNumberChange:m,fixedCountry:v,isLoading:h,isVerified:C,countdown:g,onSendOtp:x,onStateReset:y,sendOtpError:j})=>{const f=a?`${a}-contact-error`:void 0,$=e=>{y(),"email"===c&&p&&p(e.target.value)},O=e=>{y(),"phone-number"===c&&m&&m(e)},E=e=>{var i;return`Enter your ${null!==(i=null==e?void 0:e.name)&&void 0!==i?i:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs(t.ContactSectionWrapper,{id:a,"data-testid":n,children:[e.jsxs(t.ContactInputSectionWrapper,{children:[e.jsxs(t.ContactInputWrapper,{$isMaxWidth:"email"===c,$error:!!j,$disabled:o,$readonly:d,children:["email"===c?e.jsx(t.EmailContactInput,{id:l,"data-testid":n?`${n}-contact-input`:void 0,placeholder:s||"Enter email",value:u,onChange:$,type:"email",noBorder:!0,"aria-invalid":!!j,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-describedby":j?f:void 0,disabled:o,readOnly:d}):e.jsx(t.PhoneContactInput,{id:l,"data-testid":n?`${n}-contact-input`:void 0,placeholder:s||"Enter mobile number",value:b,onChange:O,noBorder:!0,fixedCountry:v,"aria-invalid":!!j,"aria-required":!0,"aria-describedby":j?f:void 0,getAriaLabel:E,disabled:o,readOnly:d}),C&&e.jsx(t.VerifiedIconWrapper,{"aria-label":"Verified",role:"img",children:e.jsx(i.TickCircleFillIcon,{})})]}),!o&&!d&&e.jsx(t.ContactButton,{id:a?`${a}-contact-button`:void 0,type:"button","data-testid":n?`${n}-contact-button`:void 0,onClick:x,disabled:g.isRunning||C,loading:h,children:C?"Verified":h?"":g.isRunning?"Sent OTP":"Send OTP"})]}),j&&e.jsx(r.FormErrorMessage,{id:f,"data-testid":n?`${n}-contact-error`:void 0,role:"alert",children:j})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),a=require("../form/form-label.js"),r=require("../shared/accessibility/index.js"),t=require("./contact-input-section-styles.js");exports.ContactInputSection=({id:n,"data-testid":d,disabled:o,readOnly:l,inputId:c,type:s,sendOtpPlaceholder:u,emailValue:b,onEmailChange:p,phoneNumberValue:m,onPhoneNumberChange:v,fixedCountry:h,isLoading:y,isVerified:x,countdown:C,onSendOtp:g,onStateReset:j,sendOtpError:f,"aria-labelledby":$,"aria-describedby":I})=>{const O=n?`${n}-contact-error`:void 0,E=e=>{j(),"email"===s&&p&&p(e.target.value)},q=e=>{j(),"phone-number"===s&&v&&v(e)},P=e=>{var i;return`Enter your ${null!==(i=null==e?void 0:e.name)&&void 0!==i?i:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs(t.ContactSectionWrapper,{id:n,"data-testid":d,children:[e.jsxs(t.ContactInputSectionWrapper,{children:[e.jsxs(t.ContactInputWrapper,{$isMaxWidth:"email"===s,$error:!!f,$disabled:o,$readonly:l,children:["email"===s?e.jsx(t.EmailContactInput,{id:c,"data-testid":d?`${d}-contact-input`:void 0,placeholder:u||"Enter email",value:b,onChange:E,type:"email",noBorder:!0,"aria-invalid":!!f,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":$,"aria-describedby":r.concatIds(f?O:void 0,I),disabled:o,readOnly:l}):e.jsx(t.PhoneContactInput,{id:c,"data-testid":d?`${d}-contact-input`:void 0,placeholder:u||"Enter mobile number",value:m,onChange:q,noBorder:!0,fixedCountry:h,"aria-invalid":!!f,"aria-required":!0,getAriaLabel:P,"aria-labelledby":$,"aria-describedby":r.concatIds(f?O:void 0,I),disabled:o,readOnly:l}),x&&e.jsx(t.VerifiedIconWrapper,{"aria-label":"Verified",role:"img",children:e.jsx(i.TickCircleFillIcon,{})})]}),!o&&!l&&e.jsx(t.ContactButton,{id:n?`${n}-contact-button`:void 0,type:"button","data-testid":d?`${d}-contact-button`:void 0,onClick:g,disabled:C.isRunning||x,loading:y,children:x?"Verified":y?"":C.isRunning?"Sent OTP":"Send OTP"})]}),f&&e.jsx(a.FormErrorMessage,{id:O,"data-testid":d?`${d}-contact-error`:void 0,role:"alert",children:f})]})};
 //# 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 {\n    CountryValue,\n    PhoneNumberInputValue,\n} 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    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            <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                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-describedby={sendOtpError ? contactErrorId : undefined}\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                aria-describedby={sendOtpError ? contactErrorId : undefined}\n                getAriaLabel={getMobileAriaLabel}\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={contactErrorId}\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","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","noBorder","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"+LAkBmC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAEA,MAAMC,EAAiBlB,EAAK,GAAGA,uBAAqBmB,EAK9CC,EAA0BC,IAC5BL,IACa,UAATX,GAAoBG,GACpBA,EAAca,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BP,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBa,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EA+CvE,OACIC,EAAAA,KAACC,EAAAA,sBAAqB,CAAC/B,GAAIA,EAAE,cAAeC,EAAU+B,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAAT7B,EAAgB8B,SACnBlB,EAAYmB,UACXlC,YACAC,EAAQ6B,SAAA,CAhDtB,UAAT3B,EACIgC,EAAAA,IAACC,qBACGtC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDoB,YAAajC,GAAsB,cACnCiB,MAAOhB,EACPiC,SAAUpB,EACVf,KAAK,QACLoC,UAAQ,EAAA,iBACQxB,EAAY,iBACb,EAAI,aACR,yDAAwD,mBACjDA,EAAeC,OAAiBC,EAClDjB,SAAUA,EACVC,SAAUA,IAGdkC,EAAAA,IAACK,oBAAiB,CACd1C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDoB,YAAajC,GAAsB,sBACnCiB,MAAOd,EACP+B,SAAUhB,EACViB,UAAQ,EACR9B,aAAcA,EAAY,iBACVM,mBACD,EAAI,mBACDA,EAAeC,OAAiBC,EAClDwB,aAAclB,EACdvB,SAAUA,EACVC,SAAUA,IAiBLU,GACGwB,EAAAA,IAACO,EAAAA,kCAA+B,WAAWC,KAAK,MAAKb,SACjDK,EAAAA,IAACS,EAAAA,mBAAkB,CAAA,SAI7B5C,IAAaC,GACXkC,EAAAA,IAACU,EAAAA,cAAa,CACV/C,GAAIA,EAAK,GAAGA,wBAAsBmB,EAClCd,KAAK,uBAEDJ,EACM,GAAGA,wBACHkB,EAEV6B,QAASjC,EACTb,SAAUY,EAAUmC,WAAapC,EACjCqC,QAAStC,EAASoB,SA5F9BnB,EACO,WAGPD,EACO,GAGPE,EAAUmC,UACH,WAGJ,gBAsFFhC,GACGoB,EAAAA,IAACc,EAAAA,iBAAgB,CACbnD,GAAIkB,EAAc,cAEdjB,EAAa,GAAGA,uBAA6BkB,EAEjD0B,KAAK,QAAOb,SAEXf,MAGW"}
+{"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 {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\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    \"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            <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                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            />\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                getAriaLabel={getMobileAriaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\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={contactErrorId}\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","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","noBorder","concatIds","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"6OAmBmC,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,EAuDvE,OACIC,EAAAA,KAACC,EAAAA,sBAAqB,CAACjC,GAAIA,EAAE,cAAeC,EAAUiC,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAAT/B,EAAgBgC,SACnBpB,EAAYqB,UACXpC,YACAC,EAAQ+B,SAAA,CAxDtB,UAAT7B,EACIkC,EAAAA,IAACC,EAAAA,kBAAiB,CACdxC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDoB,YAAanC,GAAsB,cACnCmB,MAAOlB,EACPmC,SAAUpB,EACVjB,KAAK,QACLsC,UAAQ,EAAA,iBACQ1B,EAAY,iBACb,EAAI,aACR,2EACMC,EAAc,mBACb0B,EAAAA,UACd3B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAGdoC,MAACM,EAAAA,kBAAiB,CACd7C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDoB,YAAanC,GAAsB,sBACnCmB,MAAOhB,EACPiC,SAAUhB,EACViB,UAAQ,EACRhC,aAAcA,EAAY,iBACVM,mBACD,EACf6B,aAAcnB,EAAkB,kBACfT,qBACC0B,EAAAA,UACd3B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAiBLU,GACG0B,EAAAA,IAACQ,EAAAA,kCAA+B,WAAWC,KAAK,MAAKd,SACjDK,EAAAA,IAACU,EAAAA,mBAAkB,CAAA,SAI7B/C,IAAaC,GACXoC,EAAAA,IAACW,EAAAA,cAAa,CACVlD,GAAIA,EAAK,GAAGA,wBAAsBqB,EAClChB,KAAK,uBAEDJ,EACM,GAAGA,wBACHoB,EAEV8B,QAASpC,EACTb,SAAUY,EAAUsC,WAAavC,EACjCwC,QAASzC,EAASsB,SApG9BrB,EACO,WAGPD,EACO,GAGPE,EAAUsC,UACH,WAGJ,gBA8FFnC,GACGsB,EAAAA,IAACe,EAAAA,iBAAgB,CACbtD,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjD2B,KAAK,QAAOd,SAEXjB,MAGW"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"verification-section.js","sources":["../../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const theme = useContext(ThemeContext);\n    const isMobile = useMediaQuery({\n        maxWidth: V3_Breakpoint[\"sm-max\"]({ theme }),\n    });\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","theme","useContext","ThemeContext","thumbnailSize","useMediaQuery","maxWidth","V3_Breakpoint","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","width","height","PhoneThumbnail","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"utBAoBmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAQC,EAAAA,WAAWC,gBAInBC,EAHWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUC,EAAAA,cAAc,UAAU,CAAEN,YAEP,GAAK,IAChCO,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAAAA,KAACC,EAAAA,2BAA0B,CACvB5B,GAAIA,gBACSC,EACb4B,KAAK,kBAvBJ1B,EAGD2B,MAAA,MAAA,CAAA,eAAA,EAAAC,SACc,UAAT7B,EACG4B,MAACE,EAAAA,eAAc,CACXC,MAAOhB,EACPiB,OAAQjB,IAGZa,EAAAA,IAACK,EAAAA,gBACGF,MAAOhB,EACPiB,OAAQjB,MAZY,KA0BhCU,EAAAA,KAACS,EAAAA,iBAAgB,CAAAL,SAAA,CACbJ,OAAA,MAAA,CAAAI,SAAA,CACID,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPvC,GAAIuB,EAAO,cAEPtB,EAAa,GAAGA,eAAqBuC,EAAST,SAGjD3B,IAEL0B,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACPvC,GAAIwB,EAAS,cAETvB,EAAa,GAAGA,iBAAuBuC,EAAST,SAGnD1B,OAGTsB,EAAAA,sBACIA,EAAAA,KAACc,gCACGX,EAAAA,IAACY,EAAAA,WAAU,CACP1C,GAAIA,EAAK,GAAGA,sBAAoBwC,EAAS,cAErCvC,EACM,GAAGA,sBACHuC,EAEVG,MAAOrC,EACPsC,SAAWC,GAAMtC,aAAU,EAAVA,EAAasC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACH9C,KAAM,QACN+C,WAAY,CACRN,MAAO,GAAG/B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACLgD,QAASvC,EAAc,kBACNY,EAAO,mBACN4B,EAAAA,UACd3B,EACAC,EACAd,EAAiBe,OAAgBc,oBAErB7B,EAAc,iBACf,IAEnBmB,EAAAA,IAACsB,EAAAA,aAAY,CACTpD,GAAIA,EAAK,GAAGA,uBAAqBwC,EACjCtC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHuC,EAEVa,QAAS3C,EACT4C,QAAS9C,EACT+C,UAAU,QACVC,UAAWlD,GAA8B,IAAnBA,EAAQmD,OAAY1B,UAExCvB,GAAmB,cAG5BG,GACGmB,EAAAA,IAAC4B,EAAAA,iBAAgB,CACb1D,GAAI0B,gBAEAzB,EACM,GAAGA,sBACHuC,EAEVX,KAAK,QAAOE,SAEXpB,OAIZF,EAAUkD,WACPhC,EAAAA,KAACiC,gBAAa,CACV5D,GAAIA,EAAK,GAAGA,mBAAiBwC,EAAS,cAElCvC,EAAa,GAAGA,mBAAyBuC,EAAST,SAAA,CAAA,iBAGvCtB,EAAUoD,qBAIZ"}
+{"version":3,"file":"verification-section.js","sources":["../../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","thumbnailSize","useMaxWidthMediaQuery","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","width","height","PhoneThumbnail","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"i3BAgBmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MACMC,EADWC,EAAAA,sBAAsB,MACN,GAAK,IAChCC,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAAAA,KAACC,EAAAA,2BAA0B,CACvBvB,GAAIA,gBACSC,EACbuB,KAAK,kBAvBJrB,EAGDsB,MAAA,MAAA,CAAA,eAAA,EAAAC,SACc,UAATxB,EACGuB,MAACE,EAAAA,eAAc,CACXC,MAAOd,EACPe,OAAQf,IAGZW,EAAAA,IAACK,EAAAA,gBACGF,MAAOd,EACPe,OAAQf,MAZY,KA0BhCQ,EAAAA,KAACS,EAAAA,iBAAgB,CAAAL,SAAA,CACbJ,OAAA,MAAA,CAAAI,SAAA,CACID,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPlC,GAAIkB,EAAO,cAEPjB,EAAa,GAAGA,eAAqBkC,EAAST,SAGjDtB,IAELqB,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACPlC,GAAImB,EAAS,cAETlB,EAAa,GAAGA,iBAAuBkC,EAAST,SAGnDrB,OAGTiB,EAAAA,sBACIA,EAAAA,KAACc,gCACGX,EAAAA,IAACY,EAAAA,WAAU,CACPrC,GAAIA,EAAK,GAAGA,sBAAoBmC,EAAS,cAErClC,EACM,GAAGA,sBACHkC,EAEVG,MAAOhC,EACPiC,SAAWC,GAAMjC,aAAU,EAAVA,EAAaiC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHzC,KAAM,QACN0C,WAAY,CACRN,MAAO,GAAG1B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL2C,QAASlC,EAAc,kBACNO,EAAO,mBACN4B,EAAAA,UACd3B,EACAC,EACAT,EAAiBU,OAAgBc,oBAErBxB,EAAc,iBACf,IAEnBc,EAAAA,IAACsB,EAAAA,aAAY,CACT/C,GAAIA,EAAK,GAAGA,uBAAqBmC,EACjCjC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHkC,EAEVa,QAAStC,EACTuC,QAASzC,EACT0C,UAAU,QACVC,UAAW7C,GAA8B,IAAnBA,EAAQ8C,OAAY1B,UAExClB,GAAmB,cAG5BG,GACGc,EAAAA,IAAC4B,EAAAA,iBAAgB,CACbrD,GAAIqB,gBAEApB,EACM,GAAGA,sBACHkC,EAEVX,KAAK,QAAOE,SAEXf,OAIZF,EAAU6C,WACPhC,EAAAA,KAACiC,gBAAa,CACVvD,GAAIA,EAAK,GAAGA,mBAAiBmC,EAAS,cAElClC,EAAa,GAAGA,mBAAyBkC,EAAST,SAAA,CAAA,iBAGvCjB,EAAU+C,qBAIZ"}

package/cjs/overlay/overlay.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("clsx"),o=require("react"),n=require("react-dom");require("../theme/theme-provider/index.js");var s=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./overlay.styles.js"),u=require("./use-floating-context.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(r),m=d(n);const y=({show:r=!1,rootId:n,onOverlayClick:d,children:y,backgroundOpacity:v,backgroundBlur:p=!0,disableTransition:g=!1,enableOverlayClick:f=!1,zIndex:h,id:b,containerRef:j})=>{const[k,q]=o.useState(null),[w,x]=o.useState(),O=a.useId(),L=t.useFloatingNodeId(),S=o.useRef(),C=o.useRef(!1),P=o.useRef(null),T=o.useRef(null),E=b?`lifesg-ds-overlay-root-${b}`:"lifesg-ds-overlay-root",I=null!=h?h:w?99999:99998,{themeProps:F,themeStyle:D}=s.useInheritedThemeScope(r);u.useFloatingParent(I),l.useApplyStyle(P,{[i.tokens.root.zIndex]:I}),o.useEffect((()=>(W(),q(N()),()=>{H(),z().length<1&&(B()&&(V("remove"),J()),Y("remove"))})),[]),o.useEffect((()=>{if(r){const e=A();R(e),$(),B()&&1===z().length&&(G(),V("add"));const t=setTimeout((()=>{Y("add")}),200);return()=>clearTimeout(t)}{H(),B()&&z().length<1&&(V("remove"),J());const e=setTimeout((()=>{z().length<1&&Y("remove")}),200);return()=>clearTimeout(e)}}),[r]),o.useEffect((()=>{if(r)return document.addEventListener("mousedown",K,!0),()=>{document.removeEventListener("mousedown",K,!0)}}),[r]);const R=e=>{S.current=e,x(e)},B=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),N=()=>document&&n?document.getElementById(n):document?document.body:null,A=()=>z().length>0,W=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(i.tokens.global.scrollbarWidth,`${t}px`)},Y=e=>{const t=document.body.classList.contains(i.tokens.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayOpenClass):document.body.classList.add(i.tokens.global.overlayOpenClass)},z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},$=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=[...e,O].join(",")},H=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==O)).join(",")},V=e=>{if(!B())return;const t=document.body.classList.contains(i.tokens.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayScrollLockClass):document.body.classList.add(i.tokens.global.overlayScrollLockClass)},G=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(i.tokens.global.scrollY,t)},J=()=>{if(!B())return;const e=document.body.style.getPropertyValue(i.tokens.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},K=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const n=e.target,s=o===n,l=r===n,a=r.contains(n);C.current=!s&&(l||a)},M=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const n=e.target,s=o===n,l=r===n,a=r.contains(n);!s&&(l||a)||C.current||!d||!f||(e.preventDefault(),d()),C.current=!1};return k?m.default.createPortal(e.jsx("div",Object.assign({ref:P,id:E,"data-testid":E,className:c.default(i.root,r&&i.rootShow)},F,{style:D,children:y&&e.jsx(t.FloatingNode,{id:L,children:e.jsx("div",{ref:T,"data-testid":"overlay-wrapper",className:c.default(i.wrapper,r?i.wrapperShow:i.wrapperHide,w&&i.wrapperStacked,p&&i.wrapperBackgroundBlur,g&&i.wrapperDisableTransition),onClick:M,children:y})})})),k):null};exports.Overlay=r=>e.jsx(t.FloatingTree,{children:e.jsx(y,Object.assign({},r))});
+"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("clsx"),o=require("react"),s=require("react-dom");require("../theme/theme-provider/index.js");var n=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./overlay.styles.js"),u=require("./use-floating-context.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(r),m=d(s);const y=({show:r=!1,rootId:s,onOverlayClick:d,children:y,backgroundOpacity:v,backgroundBlur:p=!0,disableTransition:g=!1,enableOverlayClick:f=!1,zIndex:h,id:b,containerRef:j})=>{const[k,q]=o.useState(null),[w,x]=o.useState(),O=a.useId(),L=t.useFloatingNodeId(),S=o.useRef(),C=o.useRef(!1),P=o.useRef(null),T=o.useRef(null),E=b?`lifesg-ds-overlay-root-${b}`:"lifesg-ds-overlay-root",I=null!=h?h:w?99999:99998,{themeProps:F,themeStyle:D}=n.useInheritedThemeScope(r);u.useFloatingParent(I),l.useApplyStyle(P,{[i.tokens.root.zIndex]:I}),o.useEffect((()=>(W(),q(N()),()=>{H(),z().length<1&&(B()&&(V("remove"),J()),Y("remove"))})),[]),o.useEffect((()=>{if(r){const e=A();R(e),$(),B()&&1===z().length&&(G(),V("add"));const t=setTimeout((()=>{Y("add")}),200);return()=>clearTimeout(t)}{H(),B()&&z().length<1&&(V("remove"),J());const e=setTimeout((()=>{z().length<1&&Y("remove")}),200);return()=>clearTimeout(e)}}),[r]),o.useEffect((()=>{if(r)return document.addEventListener("mousedown",K,!0),()=>{document.removeEventListener("mousedown",K,!0)}}),[r]);const R=e=>{S.current=e,x(e)},B=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),N=()=>document&&s?document.getElementById(s):document?document.body:null,A=()=>z().length>0,W=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(i.tokens.global.scrollbarWidth,`${t}px`)},Y=e=>{const t=document.body.classList.contains(i.tokens.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayOpenClass):document.body.classList.add(i.tokens.global.overlayOpenClass)},z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},$=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=[...e,O].join(",")},H=()=>{const e=z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==O)).join(",")},V=e=>{if(!B())return;const t=document.body.classList.contains(i.tokens.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(i.tokens.global.overlayScrollLockClass):document.body.classList.add(i.tokens.global.overlayScrollLockClass)},G=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(i.tokens.global.scrollY,t)},J=()=>{if(!B())return;const e=document.body.style.getPropertyValue(i.tokens.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},K=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);C.current=!n&&(l||a)},M=e=>{var t;const r=null!==(t=null==j?void 0:j.current)&&void 0!==t?t:T.current,o=T.current;if(!r)return void(C.current=!1);const s=e.target,n=o===s,l=r===s,a=r.contains(s);!n&&(l||a)||C.current||!d||!f||(e.preventDefault(),d()),C.current=!1};return k?m.default.createPortal(e.jsx("div",Object.assign({ref:P,id:E,"data-testid":E,className:c.default(i.root,r&&i.rootShow)},F,{style:D,children:y&&e.jsx(t.FloatingNode,{id:L,children:e.jsx("div",{ref:T,"data-testid":"overlay-wrapper",className:c.default(i.wrapper,r?i.wrapperShow:i.wrapperHide,w&&i.wrapperStacked,p&&i.wrapperBackgroundBlur,g&&i.wrapperDisableTransition),onClick:M,children:y})})})),k):null};exports.Overlay=r=>e.jsx(t.FloatingTree,{children:e.jsx(y,Object.assign({},r))});
 //# sourceMappingURL=overlay.js.map