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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type { PhoneNumberInputValue } from \"../phone-number-input\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n}: ContactInputSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={id ? `${id}-contact-error` : undefined}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","handleEmailInputChange","e","target","value","handlePhoneInputChange","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","undefined","placeholder","onChange","noBorder","PhoneContactInput","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"+LAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAKA,MAAMC,EAA0BC,IAC5BH,IACa,UAATX,GAAoBG,GACpBA,EAAcW,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BL,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBW,EACxB,EA+DJ,OACIE,EAAAA,KAACC,EAAAA,sBAAqB,CAACxB,GAAIA,EAAE,cAAeC,EAAUwB,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAATtB,EAAgBuB,SACnBX,EAAYY,UACX3B,YACAC,EAAQsB,SAAA,CA5CtB,UAATpB,EACIyB,EAAAA,IAACC,EAAAA,kBAAiB,CACd/B,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B+B,EAEjDC,YAAa3B,GAAsB,cACnCe,MAAOd,EACP2B,SAAUhB,EACVb,KAAK,QACL8B,UAAQ,EAAA,iBACQlB,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAGd2B,EAAAA,IAACM,EAAAA,kBAAiB,CACdpC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6B+B,EAEjDC,YAAa3B,GAAsB,sBACnCe,MAAOZ,EACPyB,SAAUZ,EACVa,UAAQ,EACRxB,aAAcA,EAAY,iBACVM,EAAY,iBACb,EACff,SAAUA,EACVC,SAAUA,IAiBLU,GACGiB,EAAAA,IAACO,EAAAA,kCAA+B,WAAWC,KAAK,MAAKb,SACjDK,EAAAA,IAACS,EAAAA,mBAAkB,CAAA,SAI7BrC,IAAaC,GACX2B,EAAAA,IAACU,EAAAA,cAAa,CACVxC,GAAIA,EAAK,GAAGA,wBAAsBgC,EAClC3B,KAAK,uBAEDJ,EACM,GAAGA,wBACH+B,EAEVS,QAAS1B,EACTb,SAAUY,EAAU4B,WAAa7B,EACjC8B,QAAS/B,EAASa,SAnF9BZ,EACO,WAGPD,EACO,GAGPE,EAAU4B,UACH,WAGJ,gBA6EFzB,GACGa,EAAAA,IAACc,EAAAA,kBACG5C,GAAIA,EAAK,GAAGA,uBAAqBgC,EAAS,cAEtC/B,EAAa,GAAGA,uBAA6B+B,EAEjDM,KAAK,QAAOb,SAEXR,MAGW"}
+{"version":3,"file":"contact-input-section.js","sources":["../../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n    const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    const getMobileAriaLabel = (country?: CountryValue) =>\n        `Enter your ${\n            country?.name ?? \"\"\n        } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                getAriaLabel={getMobileAriaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={contactErrorId}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","noBorder","concatIds","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"6OAmBmC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAuDvE,OACIC,EAAAA,KAACC,EAAAA,sBAAqB,CAACjC,GAAIA,EAAE,cAAeC,EAAUiC,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAAT/B,EAAgBgC,SACnBpB,EAAYqB,UACXpC,YACAC,EAAQ+B,SAAA,CAxDtB,UAAT7B,EACIkC,EAAAA,IAACC,EAAAA,kBAAiB,CACdxC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDoB,YAAanC,GAAsB,cACnCmB,MAAOlB,EACPmC,SAAUpB,EACVjB,KAAK,QACLsC,UAAQ,EAAA,iBACQ1B,EAAY,iBACb,EAAI,aACR,2EACMC,EAAc,mBACb0B,EAAAA,UACd3B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAGdoC,MAACM,EAAAA,kBAAiB,CACd7C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDoB,YAAanC,GAAsB,sBACnCmB,MAAOhB,EACPiC,SAAUhB,EACViB,UAAQ,EACRhC,aAAcA,EAAY,iBACVM,mBACD,EACf6B,aAAcnB,EAAkB,kBACfT,qBACC0B,EAAAA,UACd3B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAiBLU,GACG0B,EAAAA,IAACQ,EAAAA,kCAA+B,WAAWC,KAAK,MAAKd,SACjDK,EAAAA,IAACU,EAAAA,mBAAkB,CAAA,SAI7B/C,IAAaC,GACXoC,EAAAA,IAACW,EAAAA,cAAa,CACVlD,GAAIA,EAAK,GAAGA,wBAAsBqB,EAClChB,KAAK,uBAEDJ,EACM,GAAGA,wBACHoB,EAEV8B,QAASpC,EACTb,SAAUY,EAAUsC,WAAavC,EACjCwC,QAASzC,EAASsB,SApG9BrB,EACO,WAGPD,EACO,GAGPE,EAAUsC,UACH,WAGJ,gBA8FFnC,GACGsB,EAAAA,IAACe,EAAAA,iBAAgB,CACbtD,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjD2B,KAAK,QAAOd,SAEXjB,MAGW"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { OTPInputWrapper } from \"./otp-verification-styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        inputId,\n        onSendOtp,\n        onVerifyOtp,\n        verifyOtpCountdownTimer = 60,\n        sendOtpError,\n        verifyOtpError,\n        otpValue,\n        onOtpChange,\n        otpState,\n        onOtpStateChange,\n    } = props;\n\n    const [isLoading, setIsLoading] = useState(false);\n    const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n    const countdown = useCountdown({\n        duration: verifyOtpCountdownTimer,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Send OTP\n    const handleSendOtp = async () => {\n        if (!onSendOtp) return;\n\n        try {\n            setIsLoading(true);\n            await onSendOtp();\n            onOtpStateChange(\"sent\");\n            countdown.reset();\n            countdown.start();\n        } catch {\n            // do nothing\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    // Verify OTP\n    const handleVerifyOtp = async () => {\n        if (!onVerifyOtp || !otpValue?.value) return;\n\n        try {\n            setIsVerifyLoading(true);\n            await onVerifyOtp(otpValue.value);\n            onOtpStateChange(\"verified\");\n            // Reset the countdown and clear the OTP code in case user enter new OTP later\n            countdown.reset();\n            onOtpChange?.(\"\");\n        } catch {\n            // do nothing\n        } finally {\n            setIsVerifyLoading(false);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const resetToDefault = () => {\n        if (otpState === \"verified\") {\n            onOtpStateChange(\"default\");\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <OTPInputWrapper id={id} data-testid={dataTestId} className={className}>\n            <ContactInputSection\n                {...props}\n                inputId={inputId}\n                data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n                isLoading={isLoading}\n                isVerified={otpState === \"verified\"}\n                countdown={countdown}\n                onSendOtp={handleSendOtp}\n                onStateReset={resetToDefault}\n                sendOtpError={sendOtpError}\n                fixedCountry={\n                    props.type === \"phone-number\" ? props.fixedCountry : true\n                }\n            />\n\n            {otpState === \"sent\" && (\n                <VerificationSection\n                    {...props}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-verification` : undefined\n                    }\n                    otpCode={otpValue?.value}\n                    otpPrefix={otpValue?.prefix}\n                    otpSeparator={otpValue?.separator}\n                    setOtpCode={onOtpChange}\n                    isVerifyLoading={isVerifyLoading}\n                    countdown={countdown}\n                    onVerifyOtp={handleVerifyOtp}\n                    verifyOtpError={verifyOtpError}\n                />\n            )}\n        </OTPInputWrapper>\n    );\n};\n"],"names":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","_jsxs","OTPInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode"],"mappings":"qZAQgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,GACAb,GAEGc,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUd,IAqDd,OACIe,OAACC,EAAAA,gBAAe,CAACtB,GAAIA,EAAE,cAAeC,EAAYC,UAAWA,EAASqB,SAAA,CAClEC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,GACZ5B,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuB2B,EACpDf,UAAWA,EACXgB,WAAyB,aAAblB,EACZO,UAAWA,EACXd,UAvDU,IAAW0B,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,GAAK1B,EAEL,IACIU,GAAa,SACPV,IACNQ,EAAiB,QACjBM,EAAUa,QACVb,EAAUc,OACd,CAAE,MAAAC,GAEF,SACInB,GAAa,EACjB,CACJ,IA0CYoB,aAnBW,KACF,aAAbvB,GACAC,EAAiB,UACrB,EAiBQL,aAAcA,EACd4B,aACmB,iBAAfpC,EAAMqC,MAA0BrC,EAAMoC,gBAIhC,SAAbxB,GACGa,MAACa,EAAAA,oBAAmBX,OAAAC,OAAA,CAAA,EACZ5B,iBAEAE,EAAa,GAAGA,sBAA4B2B,EAEhDU,QAAS7B,aAAQ,EAARA,EAAU8B,MACnBC,UAAW/B,aAAQ,EAARA,EAAUgC,OACrBC,aAAcjC,aAAQ,EAARA,EAAUkC,UACxBC,WAAYlC,EACZM,gBAAiBA,EACjBE,UAAWA,EACXb,YA1DQ,IAAWyB,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKzB,IAAgBI,aAAQ,EAARA,EAAU8B,OAE/B,IACItB,GAAmB,SACbZ,EAAYI,EAAS8B,OAC3B3B,EAAiB,YAEjBM,EAAUa,QACVrB,SAAAA,EAAc,GAClB,CAAE,MAAAuB,GAEF,SACIhB,GAAmB,EACvB,CACJ,IA4CgBT,eAAgBA,OAGV"}
+{"version":3,"file":"otp-verification.js","sources":["../../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport { 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":["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":"ueASgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,OAACC,EAAAA,gBAAe,CAAC5B,GAAIA,EAAE,cAAeC,EAAYC,UAAWA,EAAS2B,SAAA,CAClEC,EAAAA,IAACC,sBAAmBC,OAAAC,OAAA,GACZlC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBiC,EACpDpB,UAAWA,EACXqB,WAAyB,aAAbxB,EACZQ,UAAWA,EACXf,UA/DU,IAAWgC,EAAAA,eAAA,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,MAACa,EAAAA,oBAAmBX,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,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAK/B,IAAgBI,aAAQ,EAARA,EAAUoC,OAE/B,IACI3B,GAAmB,SACbb,EAAYI,EAASoC,OAE3BjC,EAAiB,YAEjBuC,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,UAIJjC,EAAUkB,QACV3B,SAAAA,EAAc,GAClB,CAAE,MAAA6B,GAEF,SACIrB,GAAmB,EACvB,CACJ,IA4CgBV,eAAgBA,OAGV"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"verification-section.js","sources":["../../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { 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":["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","iconLabel","_jsx","EmailThumbnail","width","height","PhoneThumbnail","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":"2dAkBmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MAAMC,EAAQC,EAAAA,WAAWC,gBAInBC,EAHWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUC,EAAAA,cAAc,UAAU,CAAEN,YAEP,GAAK,IAuBtC,OACIO,EAAAA,KAACC,6BAA0B,CACvBtB,GAAIA,EAAE,cACOC,EACbsB,KAAK,QAAO,kBACKvB,EAAK,GAAGA,eAAawB,EAASC,SAAA,CA1B/B,MACpB,IAAKtB,EAAwB,OAAO,KACpC,MAAMuB,EACO,UAATxB,EAAmB,qBAAuB,qBAC9C,OACIyB,0BAAiBD,EAAWH,KAAK,eACnB,UAATrB,EACGyB,EAAAA,IAACC,EAAAA,eAAc,CACXC,MAAOZ,EACPa,OAAQb,IAGZU,EAAAA,IAACI,EAAAA,eAAc,CACXF,MAAOZ,EACPa,OAAQb,KAGd,EAWLe,GACDX,OAACY,EAAAA,iBAAgB,CAAAR,SAAA,CACbJ,OAAA,MAAA,CAAAI,SAAA,CACIE,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPpC,GAAIA,EAAK,GAAGA,eAAawB,EAAS,cAE9BvB,EAAa,GAAGA,eAAqBuB,EAASC,SAGjDrB,IAELuB,MAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACPpC,GAAIA,EAAK,GAAGA,iBAAewB,EAAS,cAEhCvB,EAAa,GAAGA,iBAAuBuB,EAASC,SAGnDpB,OAGTgB,EAAAA,KAAA,MAAA,CAAAI,SAAA,CACIJ,OAACgB,EAAAA,8BACGV,MAACW,EAAAA,WAAU,CACPtC,GAAIA,EAAK,GAAGA,sBAAoBwB,gBAE5BvB,EACM,GAAGA,sBACHuB,EAEVe,MAAOjC,EACPkC,SAAWC,GAAMlC,aAAU,EAAVA,EAAakC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACH1C,KAAM,QACN2C,WAAY,CACRN,MAAO,GAAG3B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL4C,QAASnC,EAAc,aACZ,kCACKA,EAAc,iBACf,IAEnBgB,EAAAA,IAACoB,EAAAA,aAAY,CACT/C,GAAIA,EAAK,GAAGA,uBAAqBwB,EACjCtB,KAAK,uBAEDD,EACM,GAAGA,uBACHuB,EAEVwB,QAAStC,EACTuC,QAASzC,EACT0C,UAAU,QACVC,UAAW7C,GAA8B,IAAnBA,EAAQ8C,OAAY3B,UAExCjB,GAAmB,cAG5BG,GACGgB,EAAAA,IAAC0B,EAAAA,iBAAgB,CACbrD,GAAIA,EAAK,GAAGA,sBAAoBwB,EAAS,cAErCvB,EACM,GAAGA,sBACHuB,EAEVD,KAAK,QAAOE,SAEXd,OAIZF,EAAU6C,WACPjC,EAAAA,KAACkC,gBAAa,CACVvD,GAAIA,EAAK,GAAGA,mBAAiBwB,EAAS,cAElCvB,EAAa,GAAGA,mBAAyBuB,EAASC,SAAA,CAAA,iBAGvChB,EAAU+C,qBAIZ"}
+{"version":3,"file":"verification-section.js","sources":["../../../src/otp-verification/verification-section.tsx"],"sourcesContent":["import { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport type { VerificationSectionProps } from \"./internal-types\";\nimport { EmailThumbnail, PhoneThumbnail } from \"./thumbnail\";\nimport {\n    ReSendMessage,\n    SectionContainer,\n    VerificationSectionWrapper,\n    VerifyButton,\n    VerifyInputWrapper,\n} from \"./verification-section-styles\";\n\nexport const VerificationSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    type,\n    showVerifyOtpThumbnail = false,\n    verifyOtpTitle,\n    verifyOtpMessage,\n    otpCode,\n    setOtpCode,\n    isVerifyLoading,\n    countdown,\n    onVerifyOtp,\n    verifyOtpError,\n    otpPrefix,\n    otpSeparator,\n}: VerificationSectionProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const thumbnailSize = isMobile ? 64 : 120;\n    const internalId = useId();\n\n    const titleId = `${internalId}-title`;\n    const messageId = `${internalId}-message`;\n    const otpAddonId = `${internalId}-verify-input-addon`;\n    const verifyErrorId = `${internalId}-verify-error`;\n\n    const renderThumbnail = () => {\n        if (!showVerifyOtpThumbnail) return null;\n\n        return (\n            <div aria-hidden>\n                {type === \"email\" ? (\n                    <EmailThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                ) : (\n                    <PhoneThumbnail\n                        width={thumbnailSize}\n                        height={thumbnailSize}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <VerificationSectionWrapper\n            id={id}\n            data-testid={dataTestId}\n            role=\"group\"\n        >\n            {renderThumbnail()}\n            <SectionContainer>\n                <div>\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        id={titleId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-title` : undefined\n                        }\n                    >\n                        {verifyOtpTitle}\n                    </Typography.BodyMD>\n                    <Typography.BodyMD\n                        weight=\"regular\"\n                        id={messageId}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-message` : undefined\n                        }\n                    >\n                        {verifyOtpMessage}\n                    </Typography.BodyMD>\n                </div>\n                <div>\n                    <VerifyInputWrapper>\n                        <InputGroup\n                            id={id ? `${id}-verify-input` : undefined}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-input`\n                                    : undefined\n                            }\n                            value={otpCode}\n                            onChange={(e) => setOtpCode?.(e.target.value)}\n                            placeholder=\"Enter OTP\"\n                            addon={{\n                                type: \"label\",\n                                attributes: {\n                                    value: `${otpPrefix ?? \"\"}${\n                                        otpSeparator ?? \"\"\n                                    }`,\n                                },\n                            }}\n                            type=\"number\"\n                            error={!!verifyOtpError}\n                            aria-labelledby={titleId}\n                            aria-describedby={concatIds(\n                                messageId,\n                                otpAddonId,\n                                verifyOtpError ? verifyErrorId : undefined\n                            )}\n                            aria-invalid={!!verifyOtpError}\n                            aria-required={true}\n                        />\n                        <VerifyButton\n                            id={id ? `${id}-verify-button` : undefined}\n                            type=\"button\"\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-button`\n                                    : undefined\n                            }\n                            onClick={onVerifyOtp}\n                            loading={isVerifyLoading}\n                            styleType=\"light\"\n                            disabled={!otpCode || otpCode.length === 0}\n                        >\n                            {!isVerifyLoading && \"Verify\"}\n                        </VerifyButton>\n                    </VerifyInputWrapper>\n                    {verifyOtpError && (\n                        <FormErrorMessage\n                            id={verifyErrorId}\n                            data-testid={\n                                dataTestId\n                                    ? `${dataTestId}-verify-error`\n                                    : undefined\n                            }\n                            role=\"alert\"\n                        >\n                            {verifyOtpError}\n                        </FormErrorMessage>\n                    )}\n                </div>\n                {countdown.isRunning && (\n                    <ReSendMessage\n                        id={id ? `${id}-countdown` : undefined}\n                        data-testid={\n                            dataTestId ? `${dataTestId}-countdown` : undefined\n                        }\n                    >\n                        Resend OTP in {countdown.formatTime()}\n                    </ReSendMessage>\n                )}\n            </SectionContainer>\n        </VerificationSectionWrapper>\n    );\n};\n"],"names":["id","dataTestId","type","showVerifyOtpThumbnail","verifyOtpTitle","verifyOtpMessage","otpCode","setOtpCode","isVerifyLoading","countdown","onVerifyOtp","verifyOtpError","otpPrefix","otpSeparator","thumbnailSize","useMaxWidthMediaQuery","internalId","useId","titleId","messageId","otpAddonId","verifyErrorId","_jsxs","VerificationSectionWrapper","role","_jsx","children","EmailThumbnail","width","height","PhoneThumbnail","SectionContainer","Typography","BodyMD","weight","undefined","VerifyInputWrapper","InputGroup","value","onChange","e","target","placeholder","addon","attributes","error","concatIds","VerifyButton","onClick","loading","styleType","disabled","length","FormErrorMessage","isRunning","ReSendMessage","formatTime"],"mappings":"i3BAgBmC,EAC/BA,KACA,cAAeC,EACfC,OACAC,0BAAyB,EACzBC,iBACAC,mBACAC,UACAC,aACAC,kBACAC,YACAC,cACAC,iBACAC,YACAC,mBAEA,MACMC,EADWC,EAAAA,sBAAsB,MACN,GAAK,IAChCC,EAAaC,EAAAA,QAEbC,EAAU,GAAGF,UACbG,EAAY,GAAGH,YACfI,EAAa,GAAGJ,uBAChBK,EAAgB,GAAGL,iBAsBzB,OACIM,EAAAA,KAACC,EAAAA,2BAA0B,CACvBvB,GAAIA,gBACSC,EACbuB,KAAK,kBAvBJrB,EAGDsB,MAAA,MAAA,CAAA,eAAA,EAAAC,SACc,UAATxB,EACGuB,MAACE,EAAAA,eAAc,CACXC,MAAOd,EACPe,OAAQf,IAGZW,EAAAA,IAACK,EAAAA,gBACGF,MAAOd,EACPe,OAAQf,MAZY,KA0BhCQ,EAAAA,KAACS,EAAAA,iBAAgB,CAAAL,SAAA,CACbJ,OAAA,MAAA,CAAAI,SAAA,CACID,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPlC,GAAIkB,EAAO,cAEPjB,EAAa,GAAGA,eAAqBkC,EAAST,SAGjDtB,IAELqB,EAAAA,IAACO,EAAAA,WAAWC,OAAM,CACdC,OAAO,UACPlC,GAAImB,EAAS,cAETlB,EAAa,GAAGA,iBAAuBkC,EAAST,SAGnDrB,OAGTiB,EAAAA,sBACIA,EAAAA,KAACc,gCACGX,EAAAA,IAACY,EAAAA,WAAU,CACPrC,GAAIA,EAAK,GAAGA,sBAAoBmC,EAAS,cAErClC,EACM,GAAGA,sBACHkC,EAEVG,MAAOhC,EACPiC,SAAWC,GAAMjC,aAAU,EAAVA,EAAaiC,EAAEC,OAAOH,OACvCI,YAAY,YACZC,MAAO,CACHzC,KAAM,QACN0C,WAAY,CACRN,MAAO,GAAG1B,QAAAA,EAAa,KACnBC,QAAAA,EAAgB,OAI5BX,KAAK,SACL2C,QAASlC,EAAc,kBACNO,EAAO,mBACN4B,EAAAA,UACd3B,EACAC,EACAT,EAAiBU,OAAgBc,oBAErBxB,EAAc,iBACf,IAEnBc,EAAAA,IAACsB,EAAAA,aAAY,CACT/C,GAAIA,EAAK,GAAGA,uBAAqBmC,EACjCjC,KAAK,SAAQ,cAETD,EACM,GAAGA,uBACHkC,EAEVa,QAAStC,EACTuC,QAASzC,EACT0C,UAAU,QACVC,UAAW7C,GAA8B,IAAnBA,EAAQ8C,OAAY1B,UAExClB,GAAmB,cAG5BG,GACGc,EAAAA,IAAC4B,EAAAA,iBAAgB,CACbrD,GAAIqB,gBAEApB,EACM,GAAGA,sBACHkC,EAEVX,KAAK,QAAOE,SAEXf,OAIZF,EAAU6C,WACPhC,EAAAA,KAACiC,gBAAa,CACVvD,GAAIA,EAAK,GAAGA,mBAAiBmC,EAAS,cAElClC,EAAa,GAAGA,mBAAyBkC,EAAST,SAAA,CAAA,iBAGvCjB,EAAU+C,qBAIZ"}

package/cjs/overlay/overlay.js

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

package/cjs/overlay/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sources":["../../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { SimpleIdGenerator } from \"../util\";\nimport { Root, Wrapper } from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const [uid] = useState(() => SimpleIdGenerator.generate());\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n\n    useFloatingParent(zIndex);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n            if (getOverlayOrder().length < 1) {\n                applyScrollLockClass(\"remove\");\n                scrollToLastScrollPosition();\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClass(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClass(\"remove\");\n                scrollToLastScrollPosition();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}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.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_SCROLL_LOCK_CLASSNAME} {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: var(${SCROLL_POSITION_VAR}, 0);\n\t\t\t\t\tbottom: 0;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            OVERLAY_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClass = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            OVERLAY_SCROLL_LOCK_CLASSNAME\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(OVERLAY_SCROLL_LOCK_CLASSNAME);\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(OVERLAY_SCROLL_LOCK_CLASSNAME);\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(SCROLL_POSITION_VAR, scrollY);\n    };\n\n    const scrollToLastScrollPosition = () => {\n        const scrollY =\n            document.body.style.getPropertyValue(SCROLL_POSITION_VAR);\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const modal = childRef.current?.firstChild;\n        if (modal && (modal as Node).contains(event.target as Node)) {\n            return;\n        } else if (onOverlayClick && enableOverlayClick) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <Wrapper\n                data-testid=\"overlay-wrapper\"\n                $show={show}\n                $stacked={isStacked}\n                $backgroundBlur={backgroundBlur}\n                $disableTransition={disableTransition}\n                onClick={handleWrapperClick}\n            >\n                {childWithRef}\n            </Wrapper>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <Root\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            $show={show}\n            $zIndex={zIndex}\n        >\n            {children && renderWrapper()}\n        </Root>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\nconst OVERLAY_SCROLL_LOCK_CLASSNAME = \"lifesg-ds-overlay-scroll-lock\";\nconst SCROLL_POSITION_VAR = \"--lifesg-ds-overlay-scroll-y\";\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","SimpleIdGenerator","generate","nodeId","useFloatingNodeId","stacked","useRef","childRef","childWithRef","React","cloneElement","ref","overlayRootId","useFloatingParent","useEffect","addStylesheetForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","applyScrollLockClass","scrollToLastScrollPosition","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","isIOS","saveScrollPosition","timerId","setTimeout","clearTimeout","data","current","test","navigator","userAgent","document","getElementById","body","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","OVERLAY_OPEN_CLASSNAME","OVERLAY_SCROLL_LOCK_CLASSNAME","SCROLL_POSITION_VAR","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","bodyStyle","style","scrollY","top","setProperty","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","handleWrapperClick","event","modal","_a","firstChild","target","preventDefault","ReactDOM","createPortal","_jsx","Root","$show","$zIndex","FloatingNode","Wrapper","$stacked","$backgroundBlur","onClick","props","FloatingTree","Object","assign"],"mappings":"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"}
+{"version":3,"file":"overlay.js","sources":["../../../src/overlay/overlay.tsx"],"sourcesContent":["import {\n    FloatingNode,\n    FloatingTree,\n    useFloatingNodeId,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { useApplyStyle, useInheritedThemeScope } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./overlay.styles\";\nimport type { OverlayProps } from \"./types\";\nimport { useFloatingParent } from \"./use-floating-context\";\n\nconst OverlayComponent = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity: _backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex: customZIndex,\n    id,\n    containerRef,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n    const uid = useId();\n    const nodeId = useFloatingNodeId();\n\n    const stacked = useRef<boolean>();\n    // Track where mousedown started to prevent closing drawer during text selection drag\n    const mouseDownInsideModalRef = useRef(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n    const zIndex = customZIndex ?? (isStacked ? 99999 : 99998);\n    const { themeProps, themeStyle } = useInheritedThemeScope(show);\n\n    useFloatingParent(zIndex);\n\n    useApplyStyle(rootRef, { [styles.tokens.root.zIndex]: zIndex });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        initialiseStylesForDocumentBody();\n        setRootElement(getRootElement());\n\n        return () => {\n            removeOverlay();\n\n            if (getOverlayOrder().length < 1) {\n                if (isIOS()) {\n                    applyScrollLockClassForIOS(\"remove\");\n                    scrollToLastScrollPositionForIOS();\n                }\n\n                applyBodyStyleClass(\"remove\");\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            addOverlay();\n\n            if (isIOS() && getOverlayOrder().length === 1) {\n                saveScrollPosition();\n                applyScrollLockClassForIOS(\"add\");\n            }\n\n            const timerId = setTimeout(() => {\n                applyBodyStyleClass(\"add\");\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        } else {\n            removeOverlay();\n\n            if (isIOS() && getOverlayOrder().length < 1) {\n                applyScrollLockClassForIOS(\"remove\");\n                scrollToLastScrollPositionForIOS();\n            }\n\n            const timerId = setTimeout(() => {\n                if (getOverlayOrder().length < 1) {\n                    applyBodyStyleClass(\"remove\");\n                }\n            }, 200); // Allow overlay animations to complete\n\n            return () => clearTimeout(timerId);\n        }\n    }, [show]);\n\n    // Track mousedown origin to distinguish clicks from text selection drags\n    useEffect(() => {\n        if (!show) return;\n\n        document.addEventListener(\"mousedown\", handleDocumentMouseDown, true);\n        return () => {\n            document.removeEventListener(\n                \"mousedown\",\n                handleDocumentMouseDown,\n                true\n            );\n        };\n    }, [show]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isIOS = () => /(iPad|iPhone|iPod)/g.test(navigator.userAgent);\n\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        return getOverlayOrder().length > 0;\n    };\n\n    const initialiseStylesForDocumentBody = () => {\n        const documentWidth = document.documentElement.clientWidth;\n        const windowWidth = window.innerWidth;\n        const scrollBarWidth = windowWidth - documentWidth;\n\n        document.documentElement.style.setProperty(\n            styles.tokens.global.scrollbarWidth,\n            `${scrollBarWidth}px`\n        );\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayOpenClass\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(styles.tokens.global.overlayOpenClass);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayOpenClass\n            );\n        }\n    };\n\n    const getOverlayOrder = () => {\n        const attr = document.body.dataset.lifesgDsOverlayOrder;\n        return attr ? attr.split(\",\") : [];\n    };\n\n    const addOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = [...order, uid].join(\",\");\n    };\n\n    const removeOverlay = () => {\n        const order = getOverlayOrder();\n        document.body.dataset.lifesgDsOverlayOrder = order\n            .filter((o) => o !== uid)\n            .join(\",\");\n    };\n\n    /**\n     * This sets the style of <body> to further prevent scrolling on iOS\n     *\n     * ref: https://stackoverflow.com/a/57455820/3932279\n     * `overflow: hidden` and `overscroll-behavior` is ignored by iOS, this is\n     * an alternative solution\n     *\n     * as a side effect this causes the scroll position to reset, so additional\n     * logic to restore the scroll on close is required\n     */\n    const applyScrollLockClassForIOS = (action: \"add\" | \"remove\") => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const isClassApplied = document.body.classList.contains(\n            styles.tokens.global.overlayScrollLockClass\n        );\n\n        if (action === \"add\" && !isClassApplied) {\n            document.body.classList.add(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        } else if (action === \"remove\" && isClassApplied) {\n            document.body.classList.remove(\n                styles.tokens.global.overlayScrollLockClass\n            );\n        }\n    };\n\n    const saveScrollPosition = () => {\n        const bodyStyle = document.body.style;\n        const scrollY = bodyStyle.top ? bodyStyle.top : window.scrollY + \"px\";\n\n        document.body.style.setProperty(styles.tokens.global.scrollY, scrollY);\n    };\n\n    const scrollToLastScrollPositionForIOS = () => {\n        if (!isIOS()) {\n            return;\n        }\n\n        const scrollY = document.body.style.getPropertyValue(\n            styles.tokens.global.scrollY\n        );\n        requestAnimationFrame(() => {\n            window.scrollTo({\n                top: parseFloat(scrollY),\n            });\n        });\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDocumentMouseDown = (e: MouseEvent) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = e.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n\n        // Track if mousedown started inside modal content\n        mouseDownInsideModalRef.current =\n            !clickedOnWrapper && (clickedOnContainer || clickedInsideContainer);\n    };\n\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const container = containerRef?.current ?? wrapperRef.current;\n        const wrapper = wrapperRef.current;\n        if (!container) {\n            mouseDownInsideModalRef.current = false;\n            return;\n        }\n\n        const target = event.target as Node;\n        const clickedOnWrapper = wrapper === target;\n        const clickedOnContainer = container === target;\n        const clickedInsideContainer = container.contains(target);\n        const clickedInsideModal = clickedOnContainer || clickedInsideContainer;\n\n        // Only close if both mousedown AND click happened outside modal\n        if (\n            (clickedOnWrapper || !clickedInsideModal) &&\n            !mouseDownInsideModalRef.current &&\n            onOverlayClick &&\n            enableOverlayClick\n        ) {\n            event.preventDefault();\n            onOverlayClick();\n        }\n\n        mouseDownInsideModalRef.current = false;\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <FloatingNode id={nodeId}>\n            <div\n                ref={wrapperRef}\n                data-testid=\"overlay-wrapper\"\n                className={clsx(\n                    styles.wrapper,\n                    show ? styles.wrapperShow : styles.wrapperHide,\n                    isStacked && styles.wrapperStacked,\n                    backgroundBlur && styles.wrapperBackgroundBlur,\n                    disableTransition && styles.wrapperDisableTransition\n                )}\n                onClick={handleWrapperClick}\n            >\n                {children}\n            </div>\n        </FloatingNode>\n    );\n\n    const renderComponent = () => (\n        <div\n            ref={rootRef}\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            className={clsx(styles.root, show && styles.rootShow)}\n            {...themeProps}\n            style={themeStyle}\n        >\n            {children && renderWrapper()}\n        </div>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\nexport const Overlay = (props: OverlayProps) => {\n    return (\n        <FloatingTree>\n            <OverlayComponent {...props} />\n        </FloatingTree>\n    );\n};\n"],"names":["OverlayComponent","show","rootId","onOverlayClick","children","backgroundOpacity","_backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","zIndex","customZIndex","id","containerRef","rootElement","setRootElement","useState","isStacked","_setIsStacked","uid","useId","nodeId","useFloatingNodeId","stacked","useRef","mouseDownInsideModalRef","rootRef","wrapperRef","overlayRootId","themeProps","themeStyle","useInheritedThemeScope","useFloatingParent","useApplyStyle","styles.tokens","root","useEffect","initialiseStylesForDocumentBody","getRootElement","removeOverlay","getOverlayOrder","length","isIOS","applyScrollLockClassForIOS","scrollToLastScrollPositionForIOS","applyBodyStyleClass","checkIfStacked","setStacked","addOverlay","saveScrollPosition","timerId","setTimeout","clearTimeout","document","addEventListener","handleDocumentMouseDown","removeEventListener","data","current","test","navigator","userAgent","getElementById","body","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","style","setProperty","global","scrollbarWidth","action","isOverlayStyleClassApplied","classList","contains","overlayOpenClass","remove","add","attr","dataset","lifesgDsOverlayOrder","split","order","join","filter","o","isClassApplied","overlayScrollLockClass","bodyStyle","scrollY","top","getPropertyValue","requestAnimationFrame","scrollTo","parseFloat","e","container","_a","wrapper","target","clickedOnWrapper","clickedOnContainer","clickedInsideContainer","handleWrapperClick","event","preventDefault","ReactDOM","createPortal","_jsx","Object","assign","ref","className","clsx","styles.root","styles.rootShow","FloatingNode","styles.wrapper","styles.wrapperShow","styles.wrapperHide","styles.wrapperStacked","styles.wrapperBackgroundBlur","styles.wrapperDisableTransition","onClick","props","FloatingTree"],"mappings":"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"}

package/cjs/overlay/overlay.styles.js

@@ -1,40 +1,2 @@
-"use strict";var i=require("styled-components"),t=require("../v3_theme/index.js");function e(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var o=e(i);const s=o.default.div`
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 0;
-    width: 0;
-    visibility: hidden;
-    z-index: ${i=>i.$zIndex};
-
-    ${t=>{if(t.$show)return i.css`
-                height: 100%;
-                width: 100vw;
-                visibility: visible;
-            `}}
-`,n=o.default.div`
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-color: ${i=>i.$stacked?t.V3_Colour["overlay-subtle"]:t.V3_Colour["overlay-strong"]};
-    backdrop-filter: ${i=>(i=>{let t="";return i&&(t+="blur(10px)"),t.length>0?t:"none"})(i.$backgroundBlur)};
-    transition: opacity 200ms ease;
-
-    ${t=>{let e="";return t.$show?e+=i.css`
-                visibility: visible;
-                opacity: 1;
-                pointer-events: auto;
-                height: 100%;
-                width: 100vw;
-            `:e+=i.css`
-                visibility: hidden;
-                opacity: 0;
-                transition-delay: ${t.$disableTransition?"0ms":"400ms"};
-                pointer-events: none;
-                height: 0;
-                width: 0;
-            `,t.$disableTransition&&(e+=i.css`
-                transition: none;
-            `),e}};
-`;exports.Root=s,exports.Wrapper=n;
+"use strict";require("./overlay.styles_12wym18.css");exports.root="r1042j6c",exports.rootShow="rceie2f",exports.tokens={global:{scrollY:"--fds-internal-overlay-body-scrollY",scrollbarWidth:"--fds-internal-overlay-body-scrollbarWidth",overlayOpenClass:"lifesg-ds-overlay-open",overlayScrollLockClass:"lifesg-ds-overlay-scroll-lock"},root:{zIndex:"--fds-internal-overlay-root-zIndex"}},exports.wrapper="w1q7jcf6",exports.wrapperBackgroundBlur="w1xh3xyq",exports.wrapperDisableTransition="w1ttt09o",exports.wrapperHide="w1q7bprp",exports.wrapperShow="wv8m6sc",exports.wrapperStacked="w14rsmxt";
 //# sourceMappingURL=overlay.styles.js.map

package/cjs/overlay/overlay.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.styles.js","sources":["../../../src/overlay/overlay.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $show: boolean;\n    $backgroundBlur?: boolean | undefined;\n    $disableTransition?: boolean | undefined;\n    $zIndex?: number | undefined;\n    $stacked?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getBackdropFilter = (blur: boolean | undefined) => {\n    let styleString = \"\";\n\n    if (blur) {\n        styleString += \"blur(10px)\";\n    }\n\n    return styleString.length > 0 ? styleString : \"none\";\n};\n\nexport const Root = styled.div<StyleProps>`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: ${(props) => props.$zIndex};\n\n    ${(props) => {\n        if (props.$show) {\n            return css`\n                height: 100%;\n                width: 100vw;\n                visibility: visible;\n            `;\n        }\n    }}\n`;\n\nexport const Wrapper = styled.div<StyleProps>`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: ${(props) =>\n        props.$stacked\n            ? V3_Colour[\"overlay-subtle\"]\n            : V3_Colour[\"overlay-strong\"]};\n    backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};\n    transition: opacity 200ms ease;\n\n    ${(props) => {\n        let customStyles = \"\";\n        if (props.$show) {\n            customStyles += css`\n                visibility: visible;\n                opacity: 1;\n                pointer-events: auto;\n                height: 100%;\n                width: 100vw;\n            `;\n        } else {\n            customStyles += css`\n                visibility: hidden;\n                opacity: 0;\n                transition-delay: ${props.$disableTransition ? \"0ms\" : \"400ms\"};\n                pointer-events: none;\n                height: 0;\n                width: 0;\n            `;\n        }\n        if (props.$disableTransition) {\n            customStyles += css`\n                transition: none;\n            `;\n        }\n\n        return customStyles;\n    }};\n`;\n"],"names":["Root","styled","div","props","$zIndex","$show","css","Wrapper","$stacked","V3_Colour","blur","styleString","length","getBackdropFilter","$backgroundBlur","customStyles","$disableTransition"],"mappings":"qKAmBA,MAUaA,EAAOC,EAAAA,QAAOC,GAAe;;;;;;;eAO1BC,GAAUA,EAAMC;;MAEzBD,IACC,GAAIA,EAAME,MACN,OAAOC,KAAG;;;;aAKd;EAIKC,EAAUN,EAAAA,QAAOC,GAAe;;;;wBAIpBC,GACjBA,EAAMK,SACAC,EAAAA,UAAU,kBACVA,EAAAA,UAAU;uBACAN,GAtCE,CAACO,IACvB,IAAIC,EAAc,GAMlB,OAJID,IACAC,GAAe,cAGZA,EAAYC,OAAS,EAAID,EAAc,MAAM,EA+BtBE,CAAkBV,EAAMW;;;MAGnDX,IACC,IAAIY,EAAe,GAyBnB,OAxBIZ,EAAME,MACNU,GAAgBT,EAAAA,GAAG;;;;;;cAQnBS,GAAgBT,EAAAA,GAAG;;;oCAGKH,EAAMa,mBAAqB,MAAQ;;;;cAM3Db,EAAMa,qBACND,GAAgBT,EAAAA,GAAG;;eAKhBS,CAAY;"}
+{"version":3,"file":"overlay.styles.js","sources":["../../../src/overlay/overlay.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\nexport const tokens = {\n    global: {\n        scrollY: \"--fds-internal-overlay-body-scrollY\",\n        scrollbarWidth: \"--fds-internal-overlay-body-scrollbarWidth\",\n        overlayOpenClass: \"lifesg-ds-overlay-open\",\n        overlayScrollLockClass: \"lifesg-ds-overlay-scroll-lock\",\n    },\n    root: {\n        zIndex: \"--fds-internal-overlay-root-zIndex\",\n    },\n} as const;\n\nexport const root = css`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: var(${tokens.root.zIndex});\n\n    :global() {\n        .${tokens.global.overlayOpenClass} {\n            padding-right: var(${tokens.global.scrollbarWidth}, 0) !important;\n            overflow: hidden;\n            scrollbar-width: none;\n            -ms-overflow-style: none;\n        }\n\n        .${tokens.global.overlayOpenClass}::-webkit-scrollbar {\n            display: none;\n        }\n\n        .${tokens.global.overlayScrollLockClass} {\n            position: fixed;\n            top: var(${tokens.global.scrollY}, 0);\n            bottom: 0;\n        }\n    }\n`;\n\nexport const rootShow = css`\n    height: 100%;\n    width: 100vw;\n    visibility: visible;\n`;\n\nexport const wrapper = css`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    backdrop-filter: none;\n    transition: opacity 200ms ease;\n`;\n\nexport const wrapperStacked = css`\n    background-color: ${Colour[\"overlay-subtle\"]};\n`;\n\nexport const wrapperBackgroundBlur = css`\n    backdrop-filter: blur(10px);\n`;\n\nexport const wrapperShow = css`\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n    height: 100%;\n    width: 100vw;\n`;\n\nexport const wrapperHide = css`\n    visibility: hidden;\n    opacity: 0;\n    transition-delay: 400ms;\n    pointer-events: none;\n    height: 0;\n    width: 0;\n`;\n\nexport const wrapperDisableTransition = css`\n    transition: none;\n    transition-delay: 0ms;\n`;\n"],"names":["global","scrollY","scrollbarWidth","overlayOpenClass","overlayScrollLockClass","root","zIndex"],"mappings":"yFAgBiB,4BA6BI,yBAzCC,CAClBA,OAAQ,CACJC,QAAS,sCACTC,eAAgB,6CAChBC,iBAAkB,yBAClBC,uBAAwB,iCAE5BC,KAAM,CACFC,OAAQ,uDAuCI,yCAac,4CAqBG,+BATb,+BARA,iCARG"}

package/cjs/overlay/overlay.styles_12wym18.css

@@ -0,0 +1,8 @@
+.r1042j6c{position:fixed;left:0;top:0;height:0;width:0;visibility:hidden;z-index:var(--fds-internal-overlay-root-zIndex);}.lifesg-ds-overlay-open {padding-right:var(--fds-internal-overlay-body-scrollbarWidth, 0)!important;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;}.lifesg-ds-overlay-open::-webkit-scrollbar {display:none;}.lifesg-ds-overlay-scroll-lock {position:fixed;top:var(--fds-internal-overlay-body-scrollY, 0);bottom:0;}
+.rceie2f{height:100%;width:100vw;visibility:visible;}
+.w1q7jcf6{position:absolute;left:0;top:0;background-color:var(--fds-colour-overlay-strong);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease;}
+.w14rsmxt{background-color:var(--fds-colour-overlay-subtle);}
+.w1xh3xyq{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
+.wv8m6sc{visibility:visible;opacity:1;pointer-events:auto;height:100%;width:100vw;}
+.w1q7bprp{visibility:hidden;opacity:0;transition-delay:400ms;pointer-events:none;height:0;width:0;}
+.w1ttt09o{-webkit-transition:none;transition:none;transition-delay:0ms;}

package/cjs/package.json

@@ -1,6 +1,7 @@
 {
   "type": "commonjs",
   "dependencies": {
+    "@react-aria/live-announcer": "^3.4.4",
     "@react-spring/web": "^10.0.1",
     "clsx": "^2.1.1",
     "fabric": "^7.2.0",