@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/otp-input/types.d.ts

@@ -1,34 +1,82 @@
-import { ButtonProps } from "src/button";
+import type { ButtonProps } from "../button";
+/**
+ * Props for the prefix label rendered before the OTP input cells.
+ */
+type OtpInputPrefix = {
+    /** Prefix text, usually a few alphabetic characters. */
+    value: string;
+    /**
+     * Separator between the prefix and the OTP input.
+     * Only `"-"` is supported.
+     */
+    separator: "-";
+};
+/**
+ * Props for the `OtpInput` component.
+ */
 export interface OtpInputProps extends React.AriaAttributes {
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
-    /** The array of input values */
+    /**
+     * Controlled array of digit strings, one entry per input cell.
+     * Only applied when the array length equals `numOfInput`.
+     */
     value?: string[] | undefined;
+    /**
+     * Error text displayed below the input cells.
+     */
     errorMessage?: string | React.ReactNode | undefined;
-    /** The duration (in seconds) to disable the submit button after a click is made */
+    /**
+     * Duration in seconds to disable the action button after it is clicked.
+     * Pass `0` to skip the cooldown entirely.
+     */
     cooldownDuration: number;
-    /** The props for the submit button */
+    /**
+     * Props forwarded to the action button. When `children` is not provided,
+     * the button label defaults to `"Resend OTP"`, or `"Resend OTP in X seconds"`
+     * while a cooldown is active.
+     *
+     * @default styleType: "secondary"
+     */
     actionButtonProps?: ButtonProps | undefined;
-    /** Flag to indicate if only OTP inputs should be rendered without the action button */
+    /**
+     * When `true`, renders only the OTP input cells without the action button.
+     */
     otpOnly?: boolean | undefined;
-    /** The number of characters for the Otp */
+    /**
+     * Number of single-digit input cells to render.
+     */
     numOfInput: number;
-    prefix?: {
-        /** Optional OTP prefix, usually consisting of a few alphabetic characters */
-        value: string;
-        /** separator between prefix and otp digits. Only "-" supported for now */
-        separator: "-";
-    } | undefined;
-    /** Called when one of the input is changed. Returns an array of all the input values */
+    /**
+     * Optional prefix label rendered before the input cells.
+     */
+    prefix?: OtpInputPrefix | undefined;
+    /**
+     * Called when any input cell changes.
+     *
+     * @param value Array of all input cell values, one string per cell.
+     */
     onChange?: ((value: string[]) => void) | undefined;
-    /** Called when the countdown changes. Returns the remaining time in seconds */
+    /**
+     * Called each second while a cooldown countdown is active.
+     *
+     * @param remaining Seconds remaining in the current cooldown.
+     */
     onCountdownChange?: ((remaining: number) => void) | undefined;
-    /** Called when the cooldown begins */
+    /** Called when a cooldown period begins. */
     onCooldownStart?: (() => void) | undefined;
-    /** Called when the cooldown ends */
+    /** Called when a cooldown period ends. */
     onCooldownEnd?: (() => void) | undefined;
 }
+/**
+ * Imperative handle returned by `OtpInput` via `ref`.
+ */
 export type OtpInputRef = {
+    /**
+     * Starts a new cooldown countdown without clearing the input cells.
+     * Fires `onCooldownStart` and begins the countdown timer.
+     */
     startCooldown: () => void;
 };
+export {};

package/otp-input/utils.d.ts

@@ -1,3 +1,3 @@
-import { OtpInputProps } from "./types";
+import type { OtpInputProps } from "./types";
 export declare const validateUserInput: (value: string, length?: number) => boolean;
 export declare const stripOtpFromAutofill: (autofillValue: string, validOtpLength: number, prefix?: OtpInputProps["prefix"]) => string;

package/otp-input/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/otp-input/utils.ts"],"sourcesContent":["import { OtpInputProps } from \"./types\";\n\nexport const validateUserInput = (value: string, length = 1) =>\n    !value ? false : RegExp(`^[0-9]{${length}}$`).test(value);\n\nexport const stripOtpFromAutofill = (\n    autofillValue: string,\n    validOtpLength: number,\n    prefix?: OtpInputProps[\"prefix\"]\n) => {\n    if (autofillValue.length === validOtpLength) {\n        /* when there is no prefix, or on ios where it seems to strip the prefix for autofill */\n        return autofillValue;\n    }\n\n    if (prefix) {\n        const [autofillPrefixValue, autofillOtpValue] = autofillValue.split(\n            prefix.separator\n        );\n        return autofillPrefixValue === prefix.value &&\n            autofillOtpValue.length === validOtpLength\n            ? autofillOtpValue\n            : \"\";\n    }\n\n    /* if no prefix, it should be covered in condition 1 */\n    return \"\";\n};\n"],"names":["validateUserInput","value","length","RegExp","test","stripOtpFromAutofill","autofillValue","validOtpLength","prefix","autofillPrefixValue","autofillOtpValue","split","separator"],"mappings":"AAEO,MAAMA,EAAoB,CAACC,EAAeC,EAAS,MACrDD,GAAgBE,OAAO,UAAUD,OAAYE,KAAKH,GAE1CI,EAAuB,CAChCC,EACAC,EACAC,KAEA,GAAIF,EAAcJ,SAAWK,EAEzB,OAAOD,EAGX,GAAIE,EAAQ,CACR,MAAOC,EAAqBC,GAAoBJ,EAAcK,MAC1DH,EAAOI,WAEX,OAAOH,IAAwBD,EAAOP,OAClCS,EAAiBR,SAAWK,EAC1BG,EACA,EACV,CAGA,MAAO,EAAE"}
+{"version":3,"file":"utils.js","sources":["../../src/otp-input/utils.ts"],"sourcesContent":["import type { OtpInputProps } from \"./types\";\n\nexport const validateUserInput = (value: string, length = 1) =>\n    !value ? false : RegExp(`^[0-9]{${length}}$`).test(value);\n\nexport const stripOtpFromAutofill = (\n    autofillValue: string,\n    validOtpLength: number,\n    prefix?: OtpInputProps[\"prefix\"]\n) => {\n    if (autofillValue.length === validOtpLength) {\n        /* when there is no prefix, or on ios where it seems to strip the prefix for autofill */\n        return autofillValue;\n    }\n\n    if (prefix) {\n        const [autofillPrefixValue, autofillOtpValue] = autofillValue.split(\n            prefix.separator\n        );\n        return autofillPrefixValue === prefix.value &&\n            autofillOtpValue.length === validOtpLength\n            ? autofillOtpValue\n            : \"\";\n    }\n\n    /* if no prefix, it should be covered in condition 1 */\n    return \"\";\n};\n"],"names":["validateUserInput","value","length","RegExp","test","stripOtpFromAutofill","autofillValue","validOtpLength","prefix","autofillPrefixValue","autofillOtpValue","split","separator"],"mappings":"AAEO,MAAMA,EAAoB,CAACC,EAAeC,EAAS,MACrDD,GAAgBE,OAAO,UAAUD,OAAYE,KAAKH,GAE1CI,EAAuB,CAChCC,EACAC,EACAC,KAEA,GAAIF,EAAcJ,SAAWK,EAEzB,OAAOD,EAGX,GAAIE,EAAQ,CACR,MAAOC,EAAqBC,GAAoBJ,EAAcK,MAC1DH,EAAOI,WAEX,OAAOH,IAAwBD,EAAOP,OAClCS,EAAiBR,SAAWK,EAC1BG,EACA,EACV,CAGA,MAAO,EAAE"}

package/otp-verification/contact-input-section.d.ts

@@ -1,2 +1,2 @@
-import { ContactInputSectionProps } from "./internal-types";
-export declare const ContactInputSection: ({ id, "data-testid": dataTestId, disabled, readOnly, inputId, type, sendOtpPlaceholder, emailValue, onEmailChange, phoneNumberValue, onPhoneNumberChange, fixedCountry, isLoading, isVerified, countdown, onSendOtp, onStateReset, sendOtpError, }: ContactInputSectionProps) => import("react/jsx-runtime").JSX.Element;
+import type { ContactInputSectionProps } from "./internal-types";
+export declare const ContactInputSection: ({ id, "data-testid": dataTestId, disabled, readOnly, inputId, type, sendOtpPlaceholder, emailValue, onEmailChange, phoneNumberValue, onPhoneNumberChange, fixedCountry, isLoading, isVerified, countdown, onSendOtp, onStateReset, sendOtpError, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ContactInputSectionProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/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\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { CountryValue, PhoneNumberInputValue } from \"../phone-number-input\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport { 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":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","contactErrorId","undefined","handlePhoneInputChange","value","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","e","target","noBorder","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"uYAcaA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAEA,MAAMC,EAAiBlB,EAAK,GAAGA,uBAAqBmB,EAY9CC,EAA0BC,IAC5BL,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBW,EACxB,EAsBEC,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EA+CvE,OACIC,EAACC,EAAqB,CAAC5B,GAAIA,EAAE,cAAeC,EAAU4B,SAAA,CAClDF,EAACG,EAA0B,CAAAD,SAAA,CACvBF,EAACI,eACyB,UAAT1B,EAAgB2B,SACnBf,EAAYgB,UACX/B,YACAC,EAAQ0B,SAAA,CAhDtB,UAATxB,EACI6B,EAACC,GACGnC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDiB,YAAa9B,GAAsB,cACnCe,MAAOd,EACP8B,SAlDoBC,IAC5BtB,IACa,UAATX,GAAoBG,GACpBA,EAAc8B,EAAEC,OAAOlB,MAC3B,EA+CQhB,KAAK,QACLmC,UAAQ,EAAA,iBACQvB,EAAY,iBACb,EAAI,aACR,yDAAwD,mBACjDA,EAAeC,OAAiBC,EAClDjB,SAAUA,EACVC,SAAUA,IAGd+B,EAACO,EAAiB,CACdzC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDiB,YAAa9B,GAAsB,sBACnCe,MAAOZ,EACP4B,SAAUjB,EACVoB,UAAQ,EACR7B,aAAcA,EAAY,iBACVM,mBACD,EAAI,mBACDA,EAAeC,OAAiBC,EAClDuB,aAAcpB,EACdpB,SAAUA,EACVC,SAAUA,IAiBLU,GACGqB,EAACS,gBAA+B,WAAWC,KAAK,MAAKf,SACjDK,EAACW,EAAkB,CAAA,SAI7B3C,IAAaC,GACX+B,EAACY,EAAa,CACV9C,GAAIA,EAAK,GAAGA,wBAAsBmB,EAClCd,KAAK,uBAEDJ,EACM,GAAGA,wBACHkB,EAEV4B,QAAShC,EACTb,SAAUY,EAAUkC,WAAanC,EACjCoC,QAASrC,EAASiB,SA5F9BhB,EACO,WAGPD,EACO,GAGPE,EAAUkC,UACH,WAGJ,gBAsFF/B,GACGiB,EAACgB,EAAgB,CACblD,GAAIkB,EAAc,cAEdjB,EAAa,GAAGA,uBAA6BkB,EAEjDyB,KAAK,QAAOf,SAEXZ,MAGW"}
+{"version":3,"file":"contact-input-section.js","sources":["../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport type {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport * as styles from \"./contact-input-section.styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n    const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    const getMobileAriaLabel = (country?: CountryValue) =>\n        `Enter your ${\n            country?.name ?? \"\"\n        } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <InputGroup\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n                className={clsx(\n                    styles.emailContactInput,\n                    disabled && styles.emailContactInputDisabled,\n                    readOnly && styles.emailContactInputReadonly\n                )}\n            />\n        ) : (\n            <PhoneNumberInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                getAriaLabel={getMobileAriaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n                className={clsx(\n                    styles.phoneContactInput,\n                    disabled && styles.phoneContactInputDisabled,\n                    readOnly && styles.phoneContactInputReadonly\n                )}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={styles.contactSectionWrapper}\n        >\n            <div className={styles.contactInputSectionWrapper}>\n                <div\n                    data-max-width={type === \"email\"}\n                    className={clsx(\n                        styles.contactInputWrapper,\n                        !!sendOtpError && styles.contactInputWrapperError,\n                        disabled && styles.contactInputWrapperDisabled,\n                        readOnly && styles.contactInputWrapperReadonly\n                    )}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <div\n                            className={styles.verifiedIconWrapper}\n                            aria-label=\"Verified\"\n                            role=\"img\"\n                        >\n                            <TickCircleFillIcon />\n                        </div>\n                    )}\n                </div>\n                {!disabled && !readOnly && (\n                    <Button\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                        className={styles.contactButton}\n                    >\n                        {getContactButtonText()}\n                    </Button>\n                )}\n            </div>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={contactErrorId}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </div>\n    );\n};\n"],"names":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","className","styles.contactSectionWrapper","styles.contactInputSectionWrapper","children","clsx","styles.contactInputWrapper","styles.contactInputWrapperError","styles.contactInputWrapperDisabled","styles.contactInputWrapperReadonly","_jsx","InputGroup","placeholder","onChange","noBorder","concatIds","styles.emailContactInput","styles.emailContactInputDisabled","styles.emailContactInputReadonly","PhoneNumberInput","getAriaLabel","styles.phoneContactInput","styles.phoneContactInputDisabled","styles.phoneContactInputReadonly","styles.verifiedIconWrapper","role","TickCircleFillIcon","Button","onClick","isRunning","loading","styles.contactButton","FormErrorMessage"],"mappings":"g3BAeO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAiEvE,OACIC,SACIhC,GAAIA,EAAE,cACOC,EACbgC,UAAWC,YAEXF,EAAA,MAAA,CAAKC,UAAWE,EAAiCC,SAAA,CAC7CJ,EAAA,MAAA,CAAA,iBAC6B,UAAT3B,EAChB4B,UAAWI,EACPC,IACErB,GAAgBsB,EAClBrC,GAAYsC,EACZrC,GAAYsC,GACfL,SAAA,CAzEJ,UAAT/B,EACIqC,EAACC,GACG3C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,cACnCmB,MAAOlB,EACPsC,SAAUvB,EACVjB,KAAK,QACLyC,6BACgB7B,EAAY,iBACb,eACJ,yDAAwD,kBAClDC,EAAc,mBACb6B,EACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EACPW,EACA9C,GAAY+C,EACZ9C,GAAY+C,KAIpBR,EAACS,EAAgB,CACbnD,GAAII,gBAEAH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,sBACnCmB,MAAOhB,EACPoC,SAAUnB,EACVoB,UAAQ,EACRnC,aAAcA,mBACEM,EAAY,iBACb,EACfmC,aAAczB,oBACGT,EAAc,mBACb6B,EACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EACPgB,EACAnD,GAAYoD,EACZnD,GAAYoD,KAyBX1C,GACG6B,EAAA,MAAA,CACIT,UAAWuB,EAA0B,aAC1B,WACXC,KAAK,MAAKrB,SAEVM,EAACgB,EAAkB,CAAA,SAI7BxD,IAAaC,GACXuC,EAACiB,GACGtD,KAAK,SAAQ,cAETJ,EACM,GAAGA,wBACHoB,EAEVuC,QAAS7C,EACTb,SAAUY,EAAU+C,WAAahD,EACjCiD,QAASlD,EACTqB,UAAW8B,EAAoB3B,SAzH3CvB,EACO,WAGPD,EACO,GAGPE,EAAU+C,UACH,WAGJ,gBAmHF5C,GACGyB,EAACsB,EAAgB,CACbhE,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjDoC,KAAK,QAAOrB,SAEXnB,MAGP"}

package/otp-verification/contact-input-section.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const contactSectionWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactInputSectionWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapperError: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapperDisabled: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapperReadonly: import("@linaria/core").LinariaClassName;
+export declare const verifiedIconWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactButton: import("@linaria/core").LinariaClassName;
+export declare const emailContactInput: import("@linaria/core").LinariaClassName;
+export declare const emailContactInputDisabled: import("@linaria/core").LinariaClassName;
+export declare const emailContactInputReadonly: import("@linaria/core").LinariaClassName;
+export declare const phoneContactInput: import("@linaria/core").LinariaClassName;
+export declare const phoneContactInputDisabled: import("@linaria/core").LinariaClassName;
+export declare const phoneContactInputReadonly: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./contact-input-section.styles_odrjvt.css";const c="c1lwydna",t="c1ndevds",n="ce951ub",e="c1q1uu2c",i="cjnw2dw",o="c1xm1ca3",s="vf0c1ti",p="c1l991bf",d="e1ik236m",r="e19c6q61",a="ergya1n",g="pqn3wrd",q="p9yjg9s",u="pg7qgn5";export{p as contactButton,t as contactInputSectionWrapper,n as contactInputWrapper,i as contactInputWrapperDisabled,e as contactInputWrapperError,o as contactInputWrapperReadonly,c as contactSectionWrapper,d as emailContactInput,r as emailContactInputDisabled,a as emailContactInputReadonly,g as phoneContactInput,q as phoneContactInputDisabled,u as phoneContactInputReadonly,s as verifiedIconWrapper};
+//# sourceMappingURL=contact-input-section.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contact-input-section.styles.js","sources":["../../src/otp-verification/contact-input-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\nexport const contactSectionWrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const contactInputSectionWrapper = css`\n    display: flex;\n`;\n\nexport const contactInputWrapper = css`\n    display: flex;\n    align-items: center;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]} 0 0 ${Radius[\"sm\"]};\n    box-shadow: inset 1px 0 0 ${Colour[\"border\"]},\n        inset 0 1px 0 ${Colour[\"border\"]}, inset 0 -1px 0 ${Colour[\"border\"]};\n\n    &:focus-within {\n        box-shadow: inset 2px 0 0 ${Colour[\"border-focus\"]},\n            inset 0 2px 0 ${Colour[\"border-focus\"]},\n            inset 0 -2px 0 ${Colour[\"border-focus\"]};\n    }\n\n    &[data-max-width=\"true\"] {\n        width: 100%;\n    }\n`;\n\nexport const contactInputWrapperError = css`\n    box-shadow: inset 1px 0 0 ${Colour[\"border-error\"]},\n        inset 0 1px 0 ${Colour[\"border-error\"]},\n        inset 0 -1px 0 ${Colour[\"border-error\"]};\n\n    &:focus-within {\n        box-shadow: inset 2px 0 0 ${Colour[\"border-error-focus\"]},\n            inset 0 2px 0 ${Colour[\"border-error-focus\"]},\n            inset 0 -2px 0 ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const contactInputWrapperDisabled = css`\n    box-shadow: inset 0 0 0 1px ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg-disabled\"]};\n    color: ${Colour[\"text-disabled\"]};\n\n    &:focus-within {\n        box-shadow: inset 0 0 0 2px ${Colour[\"border\"]};\n    }\n\n    &[data-max-width=\"false\"] {\n        /* Spacer to maintain width when disabled */\n        &::after {\n            content: \"\";\n            min-width: 120px;\n            flex-shrink: 0;\n        }\n\n        /* Hide spacer on mobile to prevent text coverage */\n        ${MediaQuery.MaxWidth.sm} {\n            &::after {\n                display: none;\n            }\n        }\n    }\n`;\n\nexport const contactInputWrapperReadonly = css`\n    padding-left: 0;\n    box-shadow: none;\n    border-radius: ${Radius[\"sm\"]};\n\n    &:focus-within {\n        box-shadow: inset 0 0 0 2px ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const verifiedIconWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-left: ${Spacing[\"spacing-12\"]};\n    color: ${Colour[\"icon-success\"]};\n    flex-shrink: 0;\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n`;\n\nexport const contactButton = css`\n    min-width: 120px;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: fit-content;\n    }\n`;\n\nexport const emailContactInput = css`\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    width: 100%;\n    background: transparent;\n`;\n\nexport const emailContactInputDisabled = css`\n    input {\n        color: ${Colour[\"text-disabled\"]};\n    }\n`;\n\nexport const emailContactInputReadonly = css`\n    padding: 0;\n`;\n\nexport const phoneContactInput = css`\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    background: transparent;\n`;\n\nexport const phoneContactInputDisabled = css`\n    input {\n        color: ${Colour[\"text-disabled\"]};\n    }\n`;\n\nexport const phoneContactInputReadonly = css`\n    padding: 0;\n\n    input {\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n`;\n"],"names":["contactSectionWrapper","contactInputSectionWrapper","contactInputWrapper","contactInputWrapperError","contactInputWrapperDisabled","contactInputWrapperReadonly","verifiedIconWrapper","contactButton","emailContactInput","emailContactInputDisabled","emailContactInputReadonly","phoneContactInput","phoneContactInputDisabled","phoneContactInputReadonly"],"mappings":"kFAIO,MAAMA,EAAqB,WAKrBC,EAA0B,WAI1BC,EAAmB,UAmBnBC,EAAwB,WAYxBC,EAA2B,UA2B3BC,EAA2B,WAU3BC,EAAmB,UAcnBC,EAAa,WAWbC,EAAiB,WAMjBC,EAAyB,WAMzBC,EAAyB,UAIzBC,EAAiB,UAKjBC,EAAyB,UAMzBC,EAAyB"}

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

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

package/otp-verification/internal-types.d.ts

@@ -1,8 +1,10 @@
-import { PhoneNumberInputValue } from "../phone-number-input";
-import { useCountdown } from "../util";
+import type { PhoneNumberInputValue } from "../phone-number-input";
+import type { useCountdown } from "../util";
 export interface ContactInputSectionProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     inputId?: string | undefined;
@@ -23,16 +25,33 @@ export interface ContactInputSectionProps {
 export interface VerificationSectionProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    countdown: ReturnType<typeof useCountdown>;
+    isVerifyLoading: boolean;
+    otpCode?: string | undefined;
+    otpPrefix?: string | undefined;
+    otpSeparator?: string | undefined;
     type: "email" | "phone-number";
+    /**
+     * Whether to display the thumbnail image in the OTP verification section,
+     * visible in the `"sent"` state.
+     */
     showVerifyOtpThumbnail?: boolean | undefined;
+    /**
+     * Custom icon in the OTP verification section, visible in the `"sent"` state.
+     */
+    verifyOtpIcon?: React.ReactNode | undefined;
+    /**
+     * Custom heading in the OTP verification section, visible in the `"sent"` state.
+     */
     verifyOtpTitle?: string | undefined;
+    /**
+     * Custom body text in the OTP verification section, visible in the `"sent"` state.
+     */
     verifyOtpMessage?: string | undefined;
+    /**
+     * Error message displayed below the OTP input after a failed verification attempt.
+     */
     verifyOtpError?: string | undefined;
-    otpCode?: string | undefined;
     setOtpCode?: (value: string) => void;
-    isVerifyLoading: boolean;
-    countdown: ReturnType<typeof useCountdown>;
     onVerifyOtp: () => void;
-    otpPrefix?: string | undefined;
-    otpSeparator?: string | undefined;
 }

package/otp-verification/otp-verification.d.ts

@@ -1,2 +1,9 @@
-import { OtpVerificationProps } from "./types";
+import type { OtpVerificationProps } from "./types";
+/**
+ * A multi-step form component that guides users through OTP-based verification.
+ *
+ * Use `OtpVerification` when you need to verify a user's identity through
+ * email address or phone number.
+ * @keywords 2FA, authentication, field, form, input, MFA, verification
+ */
 export declare const OtpVerification: (props: OtpVerificationProps) => import("react/jsx-runtime").JSX.Element;

package/otp-verification/otp-verification.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"otp-verification.js","sources":["../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport { useState } from \"react\";\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { OTPInputWrapper } from \"./otp-verification-styles\";\nimport { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n        otpReminderInterval = 120,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n        reminderInterval: otpReminderInterval,\n        getStartMessage: (duration) =>\n            `You can resend the OTP in ${duration} seconds`,\n        getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n        getCompletionMessage: () => \"You can now resend the OTP\",\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n\n            onOtpStateChange(\"verified\");\n\n            clearAnnouncer(\"polite\");\n            announce(\n                \"Success. Your email or mobile number has been verified.\",\n                \"polite\"\n            );\n\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <OTPInputWrapper id={id} data-testid={dataTestId} className={className}>\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </OTPInputWrapper>\n    );\n};\n"],"names":["OtpVerification","props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","OTPInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"snBAQO,MAAMA,EAAmBC,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,GAAS,IACpCC,EAAiBC,GAAsBF,GAAS,GAEjDG,EAAYC,EAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,EAACC,EAAe,CAAC5B,GAAIA,EAAE,cAAeC,EAAYC,UAAWA,EAAS2B,SAAA,CAClEC,EAACC,EAAmBC,OAAAC,OAAA,GACZlC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBiC,EACpDpB,UAAWA,EACXqB,WAAyB,aAAbxB,EACZQ,UAAWA,EACXf,UA/DU,IAAWgC,OAAA,OAAA,OAAA,GAAA,YAC7B,GAAKhC,EAEL,IACIW,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUkB,QACVlB,EAAUmB,OACd,CAAE,MAAAC,GAEF,SACIxB,GAAa,EACjB,CACJ,IAkDYyB,aAnBW,KACF,aAAb7B,GACAC,EAAiB,UACrB,EAiBQL,aAAcA,EACdkC,aACmB,iBAAf1C,EAAM2C,MAA0B3C,EAAM0C,gBAIhC,SAAb9B,GACGmB,EAACa,EAAmBX,OAAAC,OAAA,CAAA,EACZlC,iBAEAE,EAAa,GAAGA,sBAA4BiC,EAEhDU,QAASnC,aAAQ,EAARA,EAAUoC,MACnBC,UAAWrC,aAAQ,EAARA,EAAUsC,OACrBC,aAAcvC,aAAQ,EAARA,EAAUwC,UACxBC,WAAYxC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAlEQ,IAAW+B,OAAA,OAAA,OAAA,GAAA,YAC/B,GAAK/B,IAAgBI,aAAQ,EAARA,EAAUoC,OAE/B,IACI3B,GAAmB,SACbb,EAAYI,EAASoC,OAE3BjC,EAAiB,YAEjBuC,EAAe,UACfC,EACI,0DACA,UAIJjC,EAAUkB,QACV3B,SAAAA,EAAc,GAClB,CAAE,MAAA6B,GAEF,SACIrB,GAAmB,EACvB,CACJ,IA4CgBV,eAAgBA,OAGV"}
+{"version":3,"file":"otp-verification.js","sources":["../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport * as styles from \"./otp-verification.styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\n// @catalog\n/**\n * A multi-step form component that guides users through OTP-based verification.\n *\n * Use `OtpVerification` when you need to verify a user's identity through\n * email address or phone number.\n * @keywords 2FA, authentication, field, form, input, MFA, verification\n */\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n        otpReminderInterval = 120,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n        reminderInterval: otpReminderInterval,\n        getStartMessage: (duration) =>\n            `You can resend the OTP in ${duration} seconds`,\n        getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n        getCompletionMessage: () => \"You can now resend the OTP\",\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp || isLoading) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || isVerifyLoading || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n\n            onOtpStateChange(\"verified\");\n\n            clearAnnouncer(\"polite\");\n            announce(\n                \"Success. Your email or mobile number has been verified.\",\n                \"polite\"\n            );\n\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={clsx(styles.otpInputWrapper, className)}\n        >\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["OtpVerification","props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","clsx","styles.otpInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"6mBAkBO,MAAMA,EAAmBC,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,GAAS,IACpCC,EAAiBC,GAAsBF,GAAS,GAEjDG,EAAYC,EAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,EAAA,MAAA,CACI3B,GAAIA,gBACSC,EACbC,UAAW0B,EAAKC,EAAwB3B,GAAU4B,SAAA,CAElDC,EAACC,EAAmBC,OAAAC,OAAA,CAAA,EACZnC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBkC,EACpDrB,UAAWA,EACXsB,WAAyB,aAAbzB,EACZQ,UAAWA,EACXf,UAnEU,IAAWiC,OAAA,OAAA,OAAA,GAAA,YAC7B,GAAKjC,IAAaU,EAElB,IACIC,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUmB,QACVnB,EAAUoB,OACd,CAAE,MAAAC,GAEF,SACIzB,GAAa,EACjB,CACJ,IAsDY0B,aAvBW,KACF,aAAb9B,GACAC,EAAiB,UACrB,EAqBQL,aAAcA,EACdmC,aACmB,iBAAf3C,EAAM4C,MAA0B5C,EAAM2C,gBAIhC,SAAb/B,GACGoB,EAACa,mBACO7C,EAAK,CAAA,cAELE,EAAa,GAAGA,sBAA4BkC,EAEhDU,QAASpC,eAAAA,EAAUqC,MACnBC,UAAWtC,aAAQ,EAARA,EAAUuC,OACrBC,aAAcxC,aAAQ,EAARA,EAAUyC,UACxBC,WAAYzC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAtEQ,IAAWgC,OAAA,OAAA,OAAA,GAAA,YAC/B,GAAKhC,IAAeY,IAAoBR,aAAQ,EAARA,EAAUqC,OAElD,IACI5B,GAAmB,SACbb,EAAYI,EAASqC,OAE3BlC,EAAiB,YAEjBwC,EAAe,UACfC,EACI,0DACA,UAIJlC,EAAUmB,QACV5B,SAAAA,EAAc,GAClB,CAAE,MAAA8B,GAEF,SACItB,GAAmB,EACvB,CACJ,IAgDgBV,eAAgBA,OAGtB"}

package/otp-verification/otp-verification.styles.d.ts

@@ -0,0 +1 @@
+export declare const otpInputWrapper: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./otp-verification.styles_dg9bm8.css";const o="o1jl65sy";export{o as otpInputWrapper};
+//# sourceMappingURL=otp-verification.styles.js.map

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

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

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

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

package/otp-verification/thumbnail/email-thumbnail.d.ts

@@ -1,7 +1,5 @@
 interface EmailThumbnailProps {
-    width?: number;
-    height?: number;
     className?: string;
 }
-export declare const EmailThumbnail: ({ width, height, className, }: EmailThumbnailProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmailThumbnail: ({ className }: EmailThumbnailProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

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

package/otp-verification/thumbnail/phone-thumbnail.d.ts

@@ -1,7 +1,5 @@
 interface PhoneThumbnailProps {
-    width?: number;
-    height?: number;
     className?: string;
 }
-export declare const PhoneThumbnail: ({ width, height, className, }: PhoneThumbnailProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneThumbnail: ({ className }: PhoneThumbnailProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

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

package/otp-verification/thumbnail/thumbnail.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const thumbnail: import("@linaria/core").LinariaClassName;
+export declare const phoneThumbnail: import("@linaria/core").LinariaClassName;
+export declare const emailThumbnail: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./thumbnail.styles_shqylh.css";const t="tzhqtbi",i="p19527g1",s="e1m2pw4s";export{s as emailThumbnail,i as phoneThumbnail,t as thumbnail};
+//# sourceMappingURL=thumbnail.styles.js.map

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

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

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

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