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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"otp-input.styles.js","sources":["../../src/otp-input/otp-input.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { Typography } from \"../typography\";\nimport { V3_Spacing } from \"../v3_theme\";\n\nexport const Wrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const InputField = styled(Input)`\n    min-width: 20px;\n    margin-bottom: 0rem !important;\n\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const CTAButton = styled(Button.Small)`\n    margin: ${V3_Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const Prefix = styled(Typography.BodyBL)`\n    flex-shrink: 0;\n`;\n"],"names":["Wrapper","styled","div","InputContainer","V3_Spacing","InputField","Input","CTAButton","Button","Small","Prefix","Typography","BodyBL"],"mappings":"8NAOO,MAAMA,EAAUC,EAAOC,GAAG;;;EAKpBC,EAAiBF,EAAOC,GAAG;;;;;WAK7BE,EAAW;EAGTC,EAAaJ,EAAOK,EAAM;;;;;;;;EAU1BC,EAAYN,EAAOO,EAAOC,MAAM;cAC/BL,EAAW;EAGZM,EAAST,EAAOU,EAAWC,OAAO;;"}
+{"version":3,"file":"otp-input.styles.js","sources":["../../src/otp-input/otp-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const inputField = css`\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const ctaButton = css`\n    margin: ${Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const prefix = css`\n    flex-shrink: 0;\n`;\n"],"names":["wrapper","inputContainer","inputField","ctaButton","prefix"],"mappings":"+DAIO,MAAMA,EAAO,UAKPC,EAAc,WAQdC,EAAU,WAOVC,EAAS,UAITC,EAAM"}

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

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

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

@@ -4,11 +4,11 @@ interface ContactInputWrapperStyleProps {
     $disabled?: boolean;
     $readonly?: boolean;
 }
-export declare const ContactSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContactInputSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContactInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContactInputWrapperStyleProps>> & string;
-export declare const VerifiedIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContactButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const EmailContactInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").InputGroupProps<unknown, unknown> & import("react").RefAttributes<HTMLInputElement>, never>> & string & Omit<(<T, V>(props: import("..").InputGroupProps<T, V> & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null), keyof import("react").Component<any, {}, any>>;
-export declare const PhoneContactInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").PhoneNumberInputProps, never>> & string & Omit<({ onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, ...otherProps }: import("..").PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ContactSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ContactInputSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ContactInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContactInputWrapperStyleProps> & ContactInputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContactInputWrapperStyleProps> & ContactInputWrapperStyleProps, never>>> & string;
+export declare const VerifiedIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ContactButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const EmailContactInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").InputGroupProps<unknown, unknown> & import("react").RefAttributes<HTMLInputElement>, never> & Partial<Pick<import("..").InputGroupProps<unknown, unknown> & import("react").RefAttributes<HTMLInputElement>, never>>> & string & Omit<(<T, V>(props: import("..").InputGroupProps<T, V> & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null), keyof import("react").Component<any, {}, any>>;
+export declare const PhoneContactInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").PhoneNumberInputProps, never> & Partial<Pick<import("..").PhoneNumberInputProps, never>>> & string & Omit<({ id, onChange, value, allowClear, onClear, onBlur, error, fixedCountry, optionPlaceholder, optionSearchPlaceholder, enableSearch, onHideOptions, onShowOptions, placeholder, autoComplete, noBorder, getAriaLabel, ...otherProps }: import("..").PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

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

@@ -1,44 +1,45 @@
-import r,{css as e}from"styled-components";import{Button as o}from"../button/button.js";import{InputGroup as i}from"../input-group/input-group.js";import{PhoneNumberInput as t}from"../phone-number-input/phone-number-input.js";import{V3_Radius as d,V3_Colour as n,V3_MediaQuery as s,V3_Spacing as a}from"../v3_theme/index.js";const p=r.div`
+import e,{css as r}from"styled-components";import{Button as i}from"../button/button.js";import{InputGroup as o}from"../input-group/input-group.js";import{PhoneNumberInput as d}from"../phone-number-input/phone-number-input.js";import{V3_Spacing as t,V3_Radius as n,V3_Colour as s,V3_MediaQuery as a}from"../v3_theme/index.js";const p=e.div`
     display: flex;
     flex-direction: column;
-`,b=r.div`
+`,b=e.div`
     display: flex;
-`,x=r.div`
+`,x=e.div`
     display: flex;
     align-items: center;
-    width: ${r=>r.$isMaxWidth?"100%":"auto"};
-    border-radius: ${d.sm} 0 0 ${d.sm};
-    box-shadow: inset 1px 0 0 ${n.border},
-        inset 0 1px 0 ${n.border},
-        inset 0 -1px 0 ${n.border};
+    width: ${e=>e.$isMaxWidth?"100%":"auto"};
+    padding: 0 ${t["spacing-16"]};
+    border-radius: ${n.sm} 0 0 ${n.sm};
+    box-shadow: inset 1px 0 0 ${s.border},
+        inset 0 1px 0 ${s.border},
+        inset 0 -1px 0 ${s.border};
 
     &:focus-within {
-        box-shadow: inset 2px 0 0 ${n["border-focus"]},
-            inset 0 2px 0 ${n["border-focus"]},
-            inset 0 -2px 0 ${n["border-focus"]};
+        box-shadow: inset 2px 0 0 ${s["border-focus"]},
+            inset 0 2px 0 ${s["border-focus"]},
+            inset 0 -2px 0 ${s["border-focus"]};
     }
 
-    ${r=>r.$error?e`
-                box-shadow: inset 1px 0 0 ${n["border-error"]},
-                    inset 0 1px 0 ${n["border-error"]},
-                    inset 0 -1px 0 ${n["border-error"]};
+    ${e=>e.$error?r`
+                box-shadow: inset 1px 0 0 ${s["border-error"]},
+                    inset 0 1px 0 ${s["border-error"]},
+                    inset 0 -1px 0 ${s["border-error"]};
 
                 &:focus-within {
-                    box-shadow: inset 2px 0 0 ${n["border-error-focus"]},
-                        inset 0 2px 0 ${n["border-error-focus"]},
-                        inset 0 -2px 0 ${n["border-error-focus"]};
+                    box-shadow: inset 2px 0 0 ${s["border-error-focus"]},
+                        inset 0 2px 0 ${s["border-error-focus"]},
+                        inset 0 -2px 0 ${s["border-error-focus"]};
                 }
-            `:r.$disabled?e`
-                box-shadow: inset 0 0 0 1px ${n.border};
-                border-radius: ${d.sm};
-                background: ${n["bg-disabled"]};
-                color: ${n["text-disabled"]};
+            `:e.$disabled?r`
+                box-shadow: inset 0 0 0 1px ${s.border};
+                border-radius: ${n.sm};
+                background: ${s["bg-disabled"]};
+                color: ${s["text-disabled"]};
                 &:focus-within {
-                    box-shadow: inset 0 0 0 2px ${n.border};
+                    box-shadow: inset 0 0 0 2px ${s.border};
                 }
 
                 /* Spacer to maintain width when disabled */
-                ${!r.$isMaxWidth&&e`
+                ${!e.$isMaxWidth&&r`
                     &::after {
                         content: "";
                         min-width: 120px;
@@ -46,67 +47,68 @@ import r,{css as e}from"styled-components";import{Button as o}from"../button/but
                     }
 
                     /* Hide spacer on mobile to prevent text coverage */
-                    ${s.MaxWidth.sm} {
+                    ${a.MaxWidth.sm} {
                         &::after {
                             display: none;
                         }
                     }
                 `}
-            `:r.$readonly?e`
+            `:e.$readonly?r`
+                padding-left: 0;
                 box-shadow: none;
-                border-radius: ${d.sm};
+                border-radius: ${n.sm};
                 &:focus-within {
-                    box-shadow: inset 0 0 0 2px ${n["border-focus"]};
+                    box-shadow: inset 0 0 0 2px ${s["border-focus"]};
                 }
             `:void 0}
-`,$=r.div`
+`,$=e.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 ${a["spacing-12"]};
-    color: ${n["icon-success"]};
+    padding-left: ${t["spacing-12"]};
+    color: ${s["icon-success"]};
     flex-shrink: 0;
 
     svg {
         width: 1.25rem;
         height: 1.25rem;
     }
-`,c=r(o.Default)`
+`,c=e(i.Default)`
     min-width: 120px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     flex-shrink: 0;
-    ${s.MaxWidth.sm} {
+    ${a.MaxWidth.sm} {
         width: fit-content;
     }
-`,l=r(i)`
-    padding: 0 ${a["spacing-16"]};
+`,l=e(o)`
+    padding: 0 ${t["spacing-16"]};
     width: 100%;
     background: transparent;
 
-    ${r=>r.disabled&&e`
+    ${e=>e.disabled&&r`
             input {
-                color: ${n["text-disabled"]};
+                color: ${s["text-disabled"]};
             }
         `}
 
-    ${r=>r.readOnly&&e`
+    ${e=>e.readOnly&&r`
             padding: 0;
         `}
-`,u=r(t)`
-    padding: 0 ${a["spacing-16"]};
+`,u=e(d)`
+    padding: 0 ${t["spacing-16"]};
     background: transparent;
 
-    ${r=>r.disabled&&e`
+    ${e=>e.disabled&&r`
             input {
-                color: ${n["text-disabled"]};
+                color: ${s["text-disabled"]};
             }
         `}
 
-    ${r=>r.readOnly&&e`
+    ${e=>e.readOnly&&r`
             padding: 0;
             input {
-                margin-left: ${a["spacing-12"]};
+                margin-left: ${t["spacing-12"]};
             }
         `}
 `;export{c as ContactButton,b as ContactInputSectionWrapper,x as ContactInputWrapper,p as ContactSectionWrapper,l as EmailContactInput,u as PhoneContactInput,$ as VerifiedIconWrapper};

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

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

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

@@ -1,2 +1,2 @@
 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, }: ContactInputSectionProps) => import("react/jsx-runtime").JSX.Element;
+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 t}from"@lifesg/react-icons";import{FormErrorMessage as a}from"../form/form-label.js";import{ContactSectionWrapper as n,ContactInputSectionWrapper as r,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:p,readOnly:h,inputId:b,type:f,sendOtpPlaceholder:g,emailValue:v,onEmailChange:y,phoneNumberValue:$,onPhoneNumberChange:O,fixedCountry:C,isLoading:x,isVerified:V,countdown:E,onSendOtp:P,onStateReset:S,sendOtpError:j})=>{const R=e=>{S(),"phone-number"===f&&O&&O(e)};return e(n,{id:u,"data-testid":m,children:[e(r,{children:[e(d,{$isMaxWidth:"email"===f,$error:!!j,$disabled:p,$readonly:h,children:["email"===f?i(c,{id:b,"data-testid":m?`${m}-contact-input`:void 0,placeholder:g||"Enter email",value:v,onChange:e=>{S(),"email"===f&&y&&y(e.target.value)},type:"email",noBorder:!0,"aria-invalid":!!j,"aria-required":!0,disabled:p,readOnly:h}):i(s,{id:b,"data-testid":m?`${m}-contact-input`:void 0,placeholder:g||"Enter mobile number",value:$,onChange:R,noBorder:!0,fixedCountry:C,"aria-invalid":!!j,"aria-required":!0,disabled:p,readOnly:h}),V&&i(o,{"aria-label":"Verified",role:"img",children:i(t,{})})]}),!p&&!h&&i(l,{id:u?`${u}-contact-button`:void 0,type:"button","data-testid":m?`${m}-contact-button`:void 0,onClick:P,disabled:E.isRunning||V,loading:x,children:V?"Verified":x?"":E.isRunning?"Sent OTP":"Send OTP"})]}),j&&i(a,{id:u?`${u}-contact-error`:void 0,"data-testid":m?`${m}-contact-error`:void 0,role:"alert",children:j})]})};export{u as ContactInputSection};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{TickCircleFillIcon as a}from"@lifesg/react-icons";import{FormErrorMessage as r}from"../form/form-label.js";import{concatIds as d}from"../shared/accessibility/index.js";import{ContactSectionWrapper as t,ContactInputSectionWrapper as n,ContactInputWrapper as o,VerifiedIconWrapper as l,ContactButton as c,EmailContactInput as s,PhoneContactInput as b}from"./contact-input-section-styles.js";const u=({id:u,"data-testid":m,disabled:p,readOnly:v,inputId:y,type:h,sendOtpPlaceholder:f,emailValue:g,onEmailChange:$,phoneNumberValue:O,onPhoneNumberChange:C,fixedCountry:x,isLoading:E,isVerified:P,countdown:V,onSendOtp:j,onStateReset:S,sendOtpError:T,"aria-labelledby":R,"aria-describedby":q})=>{const B=u?`${u}-contact-error`:void 0,L=e=>{S(),"phone-number"===h&&C&&C(e)},N=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(o,{$isMaxWidth:"email"===h,$error:!!T,$disabled:p,$readonly:v,children:["email"===h?i(s,{id:y,"data-testid":m?`${m}-contact-input`:void 0,placeholder:f||"Enter email",value:g,onChange:e=>{S(),"email"===h&&$&&$(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-labelledby":R,"aria-describedby":d(T?B:void 0,q),disabled:p,readOnly:v}):i(b,{id:y,"data-testid":m?`${m}-contact-input`:void 0,placeholder:f||"Enter mobile number",value:O,onChange:L,noBorder:!0,fixedCountry:x,"aria-invalid":!!T,"aria-required":!0,getAriaLabel:N,"aria-labelledby":R,"aria-describedby":d(T?B:void 0,q),disabled:p,readOnly:v}),P&&i(l,{"aria-label":"Verified",role:"img",children:i(a,{})})]}),!p&&!v&&i(c,{id:u?`${u}-contact-button`:void 0,type:"button","data-testid":m?`${m}-contact-button`:void 0,onClick:j,disabled:V.isRunning||P,loading:E,children:P?"Verified":E?"":V.isRunning?"Sent OTP":"Send OTP"})]}),T&&i(r,{id:B,"data-testid":m?`${m}-contact-error`:void 0,role:"alert",children:T})]})};export{u 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\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type { PhoneNumberInputValue } from \"../phone-number-input\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n}: ContactInputSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={id ? `${id}-contact-error` : undefined}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","handlePhoneInputChange","value","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","undefined","placeholder","onChange","e","target","noBorder","PhoneContactInput","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"uYAeaA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAKA,MAOMC,EAA0BC,IAC5BH,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBS,EACxB,EA+DJ,OACIC,EAACC,EAAqB,CAACrB,GAAIA,EAAE,cAAeC,EAAUqB,SAAA,CAClDF,EAACG,EAA0B,CAAAD,SAAA,CACvBF,EAACI,eACyB,UAATnB,EAAgBoB,SACnBR,EAAYS,UACXxB,YACAC,EAAQmB,SAAA,CA5CtB,UAATjB,EACIsB,EAACC,EAAiB,CACd5B,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B4B,EAEjDC,YAAaxB,GAAsB,cACnCa,MAAOZ,EACPwB,SA7CoBC,IAC5BhB,IACa,UAATX,GAAoBG,GACpBA,EAAcwB,EAAEC,OAAOd,MAC3B,EA0CQd,KAAK,QACL6B,UAAQ,EAAA,iBACQjB,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAGdwB,EAACQ,EAAiB,CACdnC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B4B,EAEjDC,YAAaxB,GAAsB,sBACnCa,MAAOV,EACPsB,SAAUb,EACVgB,UAAQ,EACRvB,aAAcA,EAAY,iBACVM,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAiBLU,GACGc,EAACS,gBAA+B,WAAWC,KAAK,MAAKf,SACjDK,EAACW,EAAkB,CAAA,SAI7BpC,IAAaC,GACXwB,EAACY,EAAa,CACVvC,GAAIA,EAAK,GAAGA,wBAAsB6B,EAClCxB,KAAK,uBAEDJ,EACM,GAAGA,wBACH4B,EAEVW,QAASzB,EACTb,SAAUY,EAAU2B,WAAa5B,EACjC6B,QAAS9B,EAASU,SAnF9BT,EACO,WAGPD,EACO,GAGPE,EAAU2B,UACH,WAGJ,gBA6EFxB,GACGU,EAACgB,GACG3C,GAAIA,EAAK,GAAGA,uBAAqB6B,EAAS,cAEtC5B,EAAa,GAAGA,uBAA6B4B,EAEjDQ,KAAK,QAAOf,SAEXL,MAGW"}
+{"version":3,"file":"contact-input-section.js","sources":["../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n    const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    const getMobileAriaLabel = (country?: CountryValue) =>\n        `Enter your ${\n            country?.name ?? \"\"\n        } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                getAriaLabel={getMobileAriaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={contactErrorId}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handlePhoneInputChange","value","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","e","target","noBorder","concatIds","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"8bAmBO,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,EAY9CC,EAA0BC,IAC5BP,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBa,EACxB,EAsBEC,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAuDvE,OACIC,EAACC,EAAqB,CAAC9B,GAAIA,EAAE,cAAeC,EAAU8B,SAAA,CAClDF,EAACG,EAA0B,CAAAD,SAAA,CACvBF,EAACI,eACyB,UAAT5B,EAAgB6B,SACnBjB,EAAYkB,UACXjC,YACAC,EAAQ4B,SAAA,CAxDtB,UAAT1B,EACI+B,EAACC,EAAiB,CACdrC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDiB,YAAahC,GAAsB,cACnCiB,MAAOhB,EACPgC,SAlDoBC,IAC5BxB,IACa,UAATX,GAAoBG,GACpBA,EAAcgC,EAAEC,OAAOlB,MAC3B,EA+CQlB,KAAK,QACLqC,UAAQ,EAAA,iBACQzB,EAAY,iBACb,EAAI,aACR,2EACMC,EAAc,mBACbyB,EACd1B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAGdiC,EAACQ,EAAiB,CACd5C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDiB,YAAahC,GAAsB,sBACnCiB,MAAOd,EACP8B,SAAUjB,EACVoB,UAAQ,EACR/B,aAAcA,EAAY,iBACVM,mBACD,EACf4B,aAAcrB,EAAkB,kBACfN,qBACCyB,EACd1B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAiBLU,GACGuB,EAACU,gBAA+B,WAAWC,KAAK,MAAKhB,SACjDK,EAACY,EAAkB,CAAA,SAI7B9C,IAAaC,GACXiC,EAACa,EAAa,CACVjD,GAAIA,EAAK,GAAGA,wBAAsBqB,EAClChB,KAAK,uBAEDJ,EACM,GAAGA,wBACHoB,EAEV6B,QAASnC,EACTb,SAAUY,EAAUqC,WAAatC,EACjCuC,QAASxC,EAASmB,SApG9BlB,EACO,WAGPD,EACO,GAGPE,EAAUqC,UACH,WAGJ,gBA8FFlC,GACGmB,EAACiB,EAAgB,CACbrD,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjD0B,KAAK,QAAOhB,SAEXd,MAGW"}

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

@@ -3,6 +3,8 @@ 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;

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

@@ -1 +1 @@
-export declare const OTPInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OTPInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/otp-verification/otp-verification.js

@@ -1,2 +1,2 @@
-import{__awaiter as t}from"../_virtual/_tslib.js";import{jsxs as i,jsx as e}from"react/jsx-runtime";import{useState as o}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{useCountdown as r}from"../util/use-countdown.js";import{ContactInputSection as n}from"./contact-input-section.js";import{OTPInputWrapper as d}from"./otp-verification-styles.js";import{VerificationSection as a}from"./verification-section.js";const s=s=>{const{id:p,"data-testid":l,className:f,inputId:u,onSendOtp:c,onVerifyOtp:v,verifyOtpCountdownTimer:m=60,sendOtpError:y,verifyOtpError:O,otpValue:j,onOtpChange:h,otpState:g,onOtpStateChange:x}=s,[C,S]=o(!1),[V,b]=o(!1),w=r({duration:m});return i(d,{id:p,"data-testid":l,className:f,children:[e(n,Object.assign({},s,{inputId:u,"data-testid":l?`${l}-contact`:void 0,isLoading:C,isVerified:"verified"===g,countdown:w,onSendOtp:()=>t(void 0,void 0,void 0,(function*(){if(c)try{S(!0),yield c(),x("sent"),w.reset(),w.start()}catch(t){}finally{S(!1)}})),onStateReset:()=>{"verified"===g&&x("default")},sendOtpError:y,fixedCountry:"phone-number"!==s.type||s.fixedCountry})),"sent"===g&&e(a,Object.assign({},s,{"data-testid":l?`${l}-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:h,isVerifyLoading:V,countdown:w,onVerifyOtp:()=>t(void 0,void 0,void 0,(function*(){if(v&&(null==j?void 0:j.value))try{b(!0),yield v(j.value),x("verified"),w.reset(),null==h||h("")}catch(t){}finally{b(!1)}})),verifyOtpError:O}))]})};export{s 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{useState as n}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 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:j,otpValue:h,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==h?void 0:h.value,otpPrefix:null==h?void 0:h.prefix,otpSeparator:null==h?void 0:h.separator,setOtpCode:C,isVerifyLoading:V,countdown:$,onVerifyOtp:()=>e(void 0,void 0,void 0,(function*(){if(y&&(null==h?void 0:h.value))try{E(!0),yield y(h.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:j}))]})};export{l 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 { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { OTPInputWrapper } from \"./otp-verification-styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n            onOtpStateChange(\"verified\");\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <OTPInputWrapper id={id} data-testid={dataTestId} className={className}>\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </OTPInputWrapper>\n    );\n};\n"],"names":["OtpVerification","props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","_jsxs","OTPInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode"],"mappings":"weAQO,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,GACAb,GAEGc,EAAWC,GAAgBC,GAAS,IACpCC,EAAiBC,GAAsBF,GAAS,GAEjDG,EAAYC,EAAa,CAC3BC,SAAUd,IAqDd,OACIe,EAACC,EAAe,CAACtB,GAAIA,EAAE,cAAeC,EAAYC,UAAWA,EAASqB,SAAA,CAClEC,EAACC,EAAmBC,OAAAC,OAAA,GACZ5B,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuB2B,EACpDf,UAAWA,EACXgB,WAAyB,aAAblB,EACZO,UAAWA,EACXd,UAvDU,IAAW0B,OAAA,OAAA,OAAA,GAAA,YAC7B,GAAK1B,EAEL,IACIU,GAAa,SACPV,IACNQ,EAAiB,QACjBM,EAAUa,QACVb,EAAUc,OACd,CAAE,MAAAC,GAEF,SACInB,GAAa,EACjB,CACJ,IA0CYoB,aAnBW,KACF,aAAbvB,GACAC,EAAiB,UACrB,EAiBQL,aAAcA,EACd4B,aACmB,iBAAfpC,EAAMqC,MAA0BrC,EAAMoC,gBAIhC,SAAbxB,GACGa,EAACa,EAAmBX,OAAAC,OAAA,CAAA,EACZ5B,iBAEAE,EAAa,GAAGA,sBAA4B2B,EAEhDU,QAAS7B,aAAQ,EAARA,EAAU8B,MACnBC,UAAW/B,aAAQ,EAARA,EAAUgC,OACrBC,aAAcjC,aAAQ,EAARA,EAAUkC,UACxBC,WAAYlC,EACZM,gBAAiBA,EACjBE,UAAWA,EACXb,YA1DQ,IAAWyB,OAAA,OAAA,OAAA,GAAA,YAC/B,GAAKzB,IAAgBI,aAAQ,EAARA,EAAU8B,OAE/B,IACItB,GAAmB,SACbZ,EAAYI,EAAS8B,OAC3B3B,EAAiB,YAEjBM,EAAUa,QACVrB,SAAAA,EAAc,GAClB,CAAE,MAAAuB,GAEF,SACIhB,GAAmB,EACvB,CACJ,IA4CgBT,eAAgBA,OAGV"}
+{"version":3,"file":"otp-verification.js","sources":["../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { OTPInputWrapper } from \"./otp-verification-styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n        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":"ylBASO,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"}

package/otp-verification/types.d.ts

@@ -13,6 +13,7 @@ export interface BaseOtpVerificationProps {
     onSendOtp?: (() => Promise<void>) | undefined;
     sendOtpError?: string | undefined;
     sendOtpPlaceholder?: string | undefined;
+    otpReminderInterval?: number | undefined;
 }
 export interface OtpVerificationEmailInputProps {
     type: "email";

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

@@ -1,7 +1,23 @@
-export declare const VerificationSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ReSendMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const VerifyInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const VerifyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const VerificationSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ReSendMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const VerifyInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const VerifyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;

package/otp-verification/verification-section.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const theme = useContext(ThemeContext);\n    const isMobile = useMediaQuery({\n        maxWidth: V3_Breakpoint[\"sm-max\"]({ theme }),\n    });\n    const thumbnailSize = isMobile ? 64 : 120;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n        const iconLabel =\n            type === \"email\" ? \"Email verification\" : \"Phone verification\";\n        return (\n            <div aria-label={iconLabel} role=\"img\">\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n            aria-labelledby={id ? `${id}-title` : undefined}\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={id ? `${id}-title` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={id ? `${id}-message` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-label=\"Enter OTP code\"\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={id ? `${id}-verify-error` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","theme","useContext","ThemeContext","thumbnailSize","useMediaQuery","maxWidth","V3_Breakpoint","_jsxs","VerificationSectionWrapper","role","undefined","children","_jsx","EmailThumbnail","PhoneThumbnail","width","height","renderThumbnail","SectionContainer","Typography","BodyMD","weight","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"ysBAkBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAQC,EAAWC,GAInBC,EAHWC,EAAAA,cAAc,CAC3BC,SAAUC,EAAc,UAAU,CAAEN,YAEP,GAAK,IAuBtC,OACIO,EAACC,EAA0B,CACvBtB,GAAIA,EAAE,cACOC,EACbsB,KAAK,QAAO,kBACKvB,EAAK,GAAGA,eAAawB,EAASC,SAAA,CA1B/B,MACpB,IAAKtB,EAAwB,OAAO,KAGpC,OACIuB,sBAFS,UAATxB,EAAmB,qBAAuB,qBAEdqB,KAAK,eAEzBG,EADM,UAATxB,EACIyB,EAKAC,EALc,CACXC,MAAOZ,EACPa,OAAQb,KAQd,EAWLc,GACDV,EAACW,EAAgB,CAAAP,SAAA,CACbJ,EAAA,MAAA,CAAAI,SAAA,CACIC,EAACO,EAAWC,OAAM,CACdC,OAAO,WACPnC,GAAIA,EAAK,GAAGA,eAAawB,EAAS,cAE9BvB,EAAa,GAAGA,eAAqBuB,EAASC,SAGjDrB,IAELsB,EAACO,EAAWC,OAAM,CACdC,OAAO,UACPnC,GAAIA,EAAK,GAAGA,iBAAewB,EAAS,cAEhCvB,EAAa,GAAGA,iBAAuBuB,EAASC,SAGnDpB,OAGTgB,EAAA,MAAA,CAAAI,SAAA,CACIJ,EAACe,aACGV,EAACW,EAAU,CACPrC,GAAIA,EAAK,GAAGA,sBAAoBwB,gBAE5BvB,EACM,GAAGA,sBACHuB,EAEVc,MAAOhC,EACPiC,SAAWC,GAAMjC,aAAU,EAAVA,EAAaiC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHzC,KAAM,QACN0C,WAAY,CACRN,MAAO,GAAG1B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL2C,QAASlC,EAAc,aACZ,kCACKA,EAAc,iBACf,IAEnBe,EAACoB,EAAY,CACT9C,GAAIA,EAAK,GAAGA,uBAAqBwB,EACjCtB,KAAK,uBAEDD,EACM,GAAGA,uBACHuB,EAEVuB,QAASrC,EACTsC,QAASxC,EACTyC,UAAU,QACVC,UAAW5C,GAA8B,IAAnBA,EAAQ6C,OAAY1B,UAExCjB,GAAmB,cAG5BG,GACGe,EAAC0B,EAAgB,CACbpD,GAAIA,EAAK,GAAGA,sBAAoBwB,EAAS,cAErCvB,EACM,GAAGA,sBACHuB,EAEVD,KAAK,QAAOE,SAEXd,OAIZF,EAAU4C,WACPhC,EAACiC,EAAa,CACVtD,GAAIA,EAAK,GAAGA,mBAAiBwB,EAAS,cAElCvB,EAAa,GAAGA,mBAAyBuB,EAASC,SAAA,CAAA,iBAGvChB,EAAU8C,qBAIZ"}
+{"version":3,"file":"verification-section.js","sources":["../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["VerificationSection","id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","thumbnailSize","useMaxWidthMediaQuery","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","PhoneThumbnail","width","height","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"ojCAgBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MACMC,EADWC,EAAsB,MACN,GAAK,IAChCC,EAAaC,IAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAACC,EAA0B,CACvBvB,GAAIA,gBACSC,EACbuB,KAAK,kBAvBJrB,EAGDsB,EAAA,MAAA,CAAA,eAAA,EAAAC,SAEQD,EADM,UAATvB,EACIyB,EAKAC,EALc,CACXC,MAAOf,EACPgB,OAAQhB,MAPY,KA0BhCQ,EAACS,EAAgB,CAAAL,SAAA,CACbJ,EAAA,MAAA,CAAAI,SAAA,CACID,EAACO,EAAWC,OAAM,CACdC,OAAO,WACPlC,GAAIkB,EAAO,cAEPjB,EAAa,GAAGA,eAAqBkC,EAAST,SAGjDtB,IAELqB,EAACO,EAAWC,OAAM,CACdC,OAAO,UACPlC,GAAImB,EAAS,cAETlB,EAAa,GAAGA,iBAAuBkC,EAAST,SAGnDrB,OAGTiB,mBACIA,EAACc,aACGX,EAACY,EAAU,CACPrC,GAAIA,EAAK,GAAGA,sBAAoBmC,EAAS,cAErClC,EACM,GAAGA,sBACHkC,EAEVG,MAAOhC,EACPiC,SAAWC,GAAMjC,aAAU,EAAVA,EAAaiC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHzC,KAAM,QACN0C,WAAY,CACRN,MAAO,GAAG1B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL2C,QAASlC,EAAc,kBACNO,EAAO,mBACN4B,EACd3B,EACAC,EACAT,EAAiBU,OAAgBc,oBAErBxB,EAAc,iBACf,IAEnBc,EAACsB,EAAY,CACT/C,GAAIA,EAAK,GAAGA,uBAAqBmC,EACjCjC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHkC,EAEVa,QAAStC,EACTuC,QAASzC,EACT0C,UAAU,QACVC,UAAW7C,GAA8B,IAAnBA,EAAQ8C,OAAY1B,UAExClB,GAAmB,cAG5BG,GACGc,EAAC4B,EAAgB,CACbrD,GAAIqB,gBAEApB,EACM,GAAGA,sBACHkC,EAEVX,KAAK,QAAOE,SAEXf,OAIZF,EAAU6C,WACPhC,EAACiC,EAAa,CACVvD,GAAIA,EAAK,GAAGA,mBAAiBmC,EAAS,cAElClC,EAAa,GAAGA,mBAAyBkC,EAAST,SAAA,CAAA,iBAGvCjB,EAAU+C,qBAIZ"}

package/overlay/overlay.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{FloatingTree as e,useFloatingNodeId as o,FloatingNode as n}from"@floating-ui/react";import r,{useState as s,useRef as l,useEffect as d}from"react";import i from"react-dom";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as a}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Root as c,Wrapper as m}from"./overlay.styles.js";import{useFloatingParent as u}from"./use-floating-context.js";const y=({show:e=!1,rootId:y,onOverlayClick:p,children:h,backgroundOpacity:w,backgroundBlur:j=!0,disableTransition:$=!1,enableOverlayClick:O=!1,zIndex:k,id:x})=>{const[T,L]=s(null),[P,C]=s(),[E]=s((()=>a.generate())),I=o(),B=l(),D=l(null),z=h&&r.cloneElement(h,{ref:D}),A=x?`lifesg-ds-overlay-root-${x}`:"lifesg-ds-overlay-root",F=null!=k?k:P?99999:99998;u(F),d((()=>(V(),L(H()),()=>{K(),G().length<1&&(N("remove"),R(),Y("remove"))})),[]),d((()=>{if(e){const t=M();W(t),J(),q()&&1===G().length&&(Q(),N("add"));const e=setTimeout((()=>{Y("add")}),200);return()=>clearTimeout(e)}{K(),q()&&G().length<1&&(N("remove"),R());const t=setTimeout((()=>{G().length<1&&Y("remove")}),200);return()=>clearTimeout(t)}}),[e]);const W=t=>{B.current=t,C(t)},q=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),H=()=>document&&y?document.getElementById(y):document?document.body:null,M=()=>G().length>0,V=()=>{if(!document.getElementById(g)){const t=document.createElement("style");t.id=g;const e=document.documentElement.clientWidth,o=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${v} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${o}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${v}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.${f} {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: var(${b}, 0);\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},Y=t=>{const e=document.body.classList.contains(v);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(v):document.body.classList.add(v)},G=()=>{const t=document.body.dataset.lifesgDsOverlayOrder;return t?t.split(","):[]},J=()=>{const t=G();document.body.dataset.lifesgDsOverlayOrder=[...t,E].join(",")},K=()=>{const t=G();document.body.dataset.lifesgDsOverlayOrder=t.filter((t=>t!==E)).join(",")},N=t=>{if(!q())return;const e=document.body.classList.contains(f);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(f):document.body.classList.add(f)},Q=()=>{const t=document.body.style,e=t.top?t.top:window.scrollY+"px";document.body.style.setProperty(b,e)},R=()=>{const t=document.body.style.getPropertyValue(b);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(t)})}))},S=t=>{var e;const o=null===(e=D.current)||void 0===e?void 0:e.firstChild;o&&o.contains(t.target)||p&&O&&(t.preventDefault(),p())};return T?i.createPortal(t(c,{id:A,"data-testid":A,$show:e,$zIndex:F,children:h&&t(n,{id:I,children:t(m,{"data-testid":"overlay-wrapper",$show:e,$stacked:P,$backgroundBlur:j,$disableTransition:$,onClick:S,children:z})})}),T):null},p=o=>t(e,{children:t(y,Object.assign({},o))}),g="lifesg-ds-overlay-stylesheet",v="lifesg-ds-overlay-open",f="lifesg-ds-overlay-scroll-lock",b="--lifesg-ds-overlay-scroll-y";export{p as Overlay};
+import{jsx as e}from"react/jsx-runtime";import{FloatingTree as t,useFloatingNodeId as o,FloatingNode as r}from"@floating-ui/react";import n from"clsx";import{useState as l,useRef as s,useEffect as i}from"react";import a from"react-dom";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as d}from"../theme/theme-provider/hooks.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as u,root as p,rootShow as y,wrapper as v,wrapperShow as g,wrapperHide as b,wrapperStacked as h,wrapperBackgroundBlur as f,wrapperDisableTransition as j}from"./overlay.styles.js";import{useFloatingParent as O}from"./use-floating-context.js";const k=({show:t=!1,rootId:k,onOverlayClick:L,children:w,backgroundOpacity:x,backgroundBlur:C=!0,disableTransition:P=!1,enableOverlayClick:T=!1,zIndex:E,id:D,containerRef:I})=>{const[S,q]=l(null),[W,Y]=l(),z=m(),A=o(),B=s(),F=s(!1),N=s(null),$=s(null),R=D?`lifesg-ds-overlay-root-${D}`:"lifesg-ds-overlay-root",V=null!=E?E:W?99999:99998,{themeProps:G,themeStyle:H}=d(t);O(V),c(N,{[u.root.zIndex]:V}),i((()=>(U(),q(M()),()=>{ee(),Z().length<1&&(K()&&(te("remove"),re()),X("remove"))})),[]),i((()=>{if(t){const e=Q();J(e),_(),K()&&1===Z().length&&(oe(),te("add"));const t=setTimeout((()=>{X("add")}),200);return()=>clearTimeout(t)}{ee(),K()&&Z().length<1&&(te("remove"),re());const e=setTimeout((()=>{Z().length<1&&X("remove")}),200);return()=>clearTimeout(e)}}),[t]),i((()=>{if(t)return document.addEventListener("mousedown",ne,!0),()=>{document.removeEventListener("mousedown",ne,!0)}}),[t]);const J=e=>{B.current=e,Y(e)},K=()=>/(iPad|iPhone|iPod)/g.test(navigator.userAgent),M=()=>document&&k?document.getElementById(k):document?document.body:null,Q=()=>Z().length>0,U=()=>{const e=document.documentElement.clientWidth,t=window.innerWidth-e;document.documentElement.style.setProperty(u.global.scrollbarWidth,`${t}px`)},X=e=>{const t=document.body.classList.contains(u.global.overlayOpenClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayOpenClass):document.body.classList.add(u.global.overlayOpenClass)},Z=()=>{const e=document.body.dataset.lifesgDsOverlayOrder;return e?e.split(","):[]},_=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=[...e,z].join(",")},ee=()=>{const e=Z();document.body.dataset.lifesgDsOverlayOrder=e.filter((e=>e!==z)).join(",")},te=e=>{if(!K())return;const t=document.body.classList.contains(u.global.overlayScrollLockClass);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(u.global.overlayScrollLockClass):document.body.classList.add(u.global.overlayScrollLockClass)},oe=()=>{const e=document.body.style,t=e.top?e.top:window.scrollY+"px";document.body.style.setProperty(u.global.scrollY,t)},re=()=>{if(!K())return;const e=document.body.style.getPropertyValue(u.global.scrollY);requestAnimationFrame((()=>{window.scrollTo({top:parseFloat(e)})}))},ne=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);F.current=!l&&(s||i)},le=e=>{var t;const o=null!==(t=null==I?void 0:I.current)&&void 0!==t?t:$.current,r=$.current;if(!o)return void(F.current=!1);const n=e.target,l=r===n,s=o===n,i=o.contains(n);!l&&(s||i)||F.current||!L||!T||(e.preventDefault(),L()),F.current=!1};return S?a.createPortal(e("div",Object.assign({ref:N,id:R,"data-testid":R,className:n(p,t&&y)},G,{style:H,children:w&&e(r,{id:A,children:e("div",{ref:$,"data-testid":"overlay-wrapper",className:n(v,t?g:b,W&&h,C&&f,P&&j),onClick:le,children:w})})})),S):null},L=o=>e(t,{children:e(k,Object.assign({},o))});export{L as Overlay};
 //# sourceMappingURL=overlay.js.map