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

package/notification-banner/notification-banner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.styles.js","sources":["../../src/notification-banner/notification-banner.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Layout } from \"../layout\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface WrapperStyleProps {\n    $sticky: boolean;\n    $clickable: boolean;\n}\n\ninterface ContentStyleProps {\n    $maxCollapsedHeight?: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst commonLinkStyle = css`\n    color: ${V3_Colour[\"hyperlink-inverse\"]};\n\n    svg {\n        color: ${V3_Colour[\"icon-primary-inverse\"]};\n    }\n\n    &:hover,\n    &:active,\n    &:visited,\n    &:focus {\n        color: ${V3_Colour[\"hyperlink-inverse\"]};\n        svg {\n            color: ${V3_Colour[\"icon-primary-inverse\"]};\n        }\n    }\n`;\n\nexport const Wrapper = styled.div<WrapperStyleProps>`\n    position: ${(props) => (props.$sticky ? \"sticky\" : \"relative\")};\n    left: 0;\n    top: 0;\n    width: 100%;\n    transition: all ${V3_Motion[\"duration-800\"]} ${V3_Motion[\"ease-default\"]};\n    background: ${V3_Colour[\"bg-inverse-subtle\"]};\n    border-radius: ${V3_Radius[\"none\"]};\n    z-index: 25;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n`;\n\nexport const Container = styled(Layout.Content)``;\n\nexport const ContentContainer = styled.div`\n    flex: 1;\n    align-items: flex-start;\n    padding: ${V3_Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const Content = styled.div<ContentStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: flex-start;\n\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${V3_Colour[\"text-inverse\"]};\n\n    p {\n        display: inline-block;\n    }\n\n    strong {\n        ${V3_Font[\"body-baseline-semibold\"]}\n        color: ${V3_Colour[\"text-inverse\"]};\n    }\n\n    a {\n        ${V3_Font[\"body-baseline-regular\"]}\n        ${commonLinkStyle}\n    }\n`;\n\nexport const ContentWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n`;\n\nexport const ContentText = styled.div<{ $maxCollapsedHeight?: number }>`\n    flex: 1;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    ${(props) => {\n        const gradient =\n            \"linear-gradient(to bottom, black 50%, transparent 100%)\";\n        if (props.$maxCollapsedHeight) {\n            return css`\n                max-height: ${props.$maxCollapsedHeight}px;\n                overflow: hidden;\n                -webkit-mask-image: ${gradient};\n                mask-image: ${gradient};\n            `;\n        }\n    }}\n`;\n\nexport const ContentLink = styled(Typography.LinkBL)`\n    position: relative;\n\n    ${commonLinkStyle}\n`;\n\nexport const StyledIconButton = styled(ClickableIcon)`\n    margin-right: -${V3_Spacing[\"spacing-24\"]};\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n    height: max-content;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${V3_Colour[\"icon-inverse\"]};\n    }\n`;\n\nexport const ActionButton = styled.button`\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    align-self: flex-start;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n\n    border: none;\n    background: transparent;\n    color: ${V3_Colour[\"hyperlink-inverse\"]};\n    ${V3_Font[\"body-md-semibold\"]};\n\n    cursor: pointer;\n`;\n\nexport const AccessibleBannerButton = styled.button`\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n`;\n\nexport const IconContainer = styled.div`\n    height: 1.5rem;\n    width: 1.5rem;\n    margin: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-24\"]} 0 0;\n    flex-shrink: 0;\n\n    svg {\n        height: 100%;\n        width: 100%;\n        color: ${V3_Colour[\"hyperlink-inverse\"]};\n    }\n`;\n"],"names":["commonLinkStyle","css","V3_Colour","Wrapper","styled","div","props","$sticky","V3_Motion","V3_Radius","$clickable","Container","Layout","Content","ContentContainer","V3_Spacing","V3_Font","ContentWrapper","ContentText","gradient","$maxCollapsedHeight","ContentLink","Typography","LinkBL","StyledIconButton","ClickableIcon","ActionButton","button","AccessibleBannerButton","IconContainer"],"mappings":"kUA6BA,MAAMA,EAAkBC,CAAG;aACdC,EAAU;;;iBAGNA,EAAU;;;;;;;iBAOVA,EAAU;;qBAENA,EAAU;;;EAKlBC,EAAUC,EAAOC,GAAsB;gBACnCC,GAAWA,EAAMC,QAAU,SAAW;;;;sBAIjCC,EAAU,mBAAmBA,EAAU;kBAC3CN,EAAU;qBACPO,EAAgB;;cAEtBH,GAAWA,EAAMI,WAAa,UAAY;EAG5CC,EAAYP,EAAOQ,EAAOC,QAAQ,GAElCC,EAAmBV,EAAOC,GAAG;;;eAG3BU,EAAW;EAGbF,EAAUT,EAAOC,GAAsB;;;;;MAK9CW,EAAQ;aACDd,EAAU;;;;;;;UAObc,EAAQ;iBACDd,EAAU;;;;UAIjBc,EAAQ;UACRhB;;EAIGiB,EAAiBb,EAAOC,GAAG;;;;EAM3Ba,EAAcd,EAAOC,GAAqC;;;;MAIhEC,IACC,MAAMa,EACF,0DACJ,GAAIb,EAAMc,oBACN,OAAOnB,CAAG;8BACQK,EAAMc;;sCAEED;8BACRA;aAEtB;EAIKE,EAAcjB,EAAOkB,EAAWC,OAAO;;;MAG9CvB;EAGOwB,EAAmBpB,EAAOqB,EAAc;qBAChCV,EAAW;oBACZA,EAAW;;;;;iBAKdb,EAAU;;EAIdwB,EAAetB,EAAOuB,MAAM;;;WAG9BZ,EAAW;;kBAEJA,EAAW;;;;aAIhBb,EAAU;MACjBc,EAAQ;;;EAKDY,EAAyBxB,EAAOuB,MAAM;;;;;;;;EAUtCE,EAAgBzB,EAAOC,GAAG;;;cAGzBU,EAAW,iBAAiBA,EAAW;;;;;;iBAMpCb,EAAU;;"}
+{"version":3,"file":"notification-banner.styles.js","sources":["../../src/notification-banner/notification-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    contentText: {\n        maxCollapsedHeight:\n            \"--fds-internal-notificationBanner-contentText-maxCollapsedHeight\",\n    },\n};\n\nconst linkStyle = `\n    color: ${Colour[\"hyperlink-inverse\"]};\n\n    svg {\n        color: ${Colour[\"icon-primary-inverse\"]};\n    }\n\n    &:hover,\n    &:active,\n    &:visited,\n    &:focus {\n        color: ${Colour[\"hyperlink-inverse\"]};\n        svg {\n            color: ${Colour[\"icon-primary-inverse\"]};\n        }\n    }\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    left: 0;\n    top: 0;\n    width: 100%;\n    transition: all ${Motion[\"duration-800\"]} ${Motion[\"ease-default\"]};\n    background: ${Colour[\"bg-inverse-subtle\"]};\n    border-radius: ${Radius[\"none\"]};\n    z-index: 25;\n    cursor: default;\n`;\n\nexport const wrapperSticky = css`\n    position: sticky;\n`;\n\nexport const wrapperClickable = css`\n    cursor: pointer;\n`;\n\nexport const contentContainer = css`\n    flex: 1;\n    align-items: flex-start;\n    padding: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const content = css`\n    display: flex;\n    flex: 1;\n    align-items: flex-start;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-inverse\"]};\n\n    p {\n        display: inline-block;\n    }\n\n    strong {\n        ${Font[\"body-baseline-semibold\"]}\n        color: ${Colour[\"text-inverse\"]};\n    }\n\n    a {\n        ${Font[\"body-baseline-regular\"]}\n        ${linkStyle}\n    }\n`;\n\nexport const contentWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n`;\n\nexport const contentText = css`\n    ${tokens.contentText.maxCollapsedHeight}: initial;\n    flex: 1;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n`;\n\nexport const contentTextCollapsed = css`\n    max-height: var(${tokens.contentText.maxCollapsedHeight});\n    overflow: hidden;\n    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\nexport const contentLink = css`\n    position: relative;\n    ${linkStyle}\n`;\n\nexport const dismissButton = css`\n    margin-right: calc(${Spacing[\"spacing-24\"]} * -1);\n    padding-left: ${Spacing[\"spacing-16\"]};\n    height: max-content;\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${Colour[\"icon-inverse\"]};\n    }\n`;\n\nexport const actionButton = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n    align-self: flex-start;\n    margin-top: ${Spacing[\"spacing-8\"]};\n\n    border: none;\n    background: transparent;\n    color: ${Colour[\"hyperlink-inverse\"]};\n    ${Font[\"body-md-semibold\"]};\n\n    cursor: pointer;\n`;\n\nexport const iconContainer = css`\n    height: 1.5rem;\n    width: 1.5rem;\n    margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-24\"]} 0 0;\n    flex-shrink: 0;\n\n    svg {\n        height: 100%;\n        width: 100%;\n        color: ${Colour[\"hyperlink-inverse\"]};\n    }\n`;\n"],"names":["tokens","contentText","maxCollapsedHeight","wrapper","wrapperSticky","wrapperClickable","contentContainer","content","contentWrapper","contentTextCollapsed","contentLink","dismissButton","actionButton","iconContainer"],"mappings":"oFAIO,MAAMA,EAAS,CAClBC,YAAa,CACTC,mBACI,qEAyBCC,EAAO,WAYPC,EAAa,WAIbC,EAAgB,WAIhBC,EAAgB,UAMhBC,EAAO,WAuBPC,EAAc,UAMdP,EAAW,UAOXQ,EAAoB,WAOpBC,EAAW,WAKXC,EAAa,WAYbC,EAAY,UAeZC,EAAa"}

package/notification-banner/notification-banner.styles_130loac.css

@@ -0,0 +1,12 @@
+.w17suq18{position:relative;left:0;top:0;width:100%;-webkit-transition:all var(--fds-motion-duration-800) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-800) var(--fds-motion-timing-ease-default);background:var(--fds-colour-bg-inverse-subtle);border-radius:var(--fds-radius-none);z-index:25;cursor:default;}
+.w1ixs8gf{position:-webkit-sticky;position:sticky;}
+.w1trwg7u{cursor:pointer;}
+.cmwsx4o{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:var(--fds-spacing-24) 0;}
+.c1qc2rgl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-inverse);}.c1qc2rgl p{display:inline-block;}.c1qc2rgl strong{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-inverse);}.c1qc2rgl a{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-hyperlink-inverse);}.c1qc2rgl a svg{color:var(--fds-colour-icon-primary-inverse);}.c1qc2rgl a:hover,.c1qc2rgl a:active,.c1qc2rgl a:visited,.c1qc2rgl a:focus{color:var(--fds-colour-hyperlink-inverse);}.c1qc2rgl a:hover svg,.c1qc2rgl a:active svg,.c1qc2rgl a:visited svg,.c1qc2rgl a:focus svg{color:var(--fds-colour-icon-primary-inverse);}
+.cb6cjs3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}
+.cia23af{--fds-internal-notificationBanner-contentText-maxCollapsedHeight:initial;-webkit-flex:1;-ms-flex:1;flex:1;word-wrap:break-word;overflow-wrap:break-word;}
+.c1uktajc{max-height:var(--fds-internal-notificationBanner-contentText-maxCollapsedHeight);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}
+.c12st863{position:relative;color:var(--fds-colour-hyperlink-inverse);}.c12st863 svg{color:var(--fds-colour-icon-primary-inverse);}.c12st863:hover,.c12st863:active,.c12st863:visited,.c12st863:focus{color:var(--fds-colour-hyperlink-inverse);}.c12st863:hover svg,.c12st863:active svg,.c12st863:visited svg,.c12st863:focus svg{color:var(--fds-colour-icon-primary-inverse);}
+.d1hjtr0v{margin-right:calc(var(--fds-spacing-24) * -1);padding-left:var(--fds-spacing-16);height:-webkit-max-content;height:-moz-max-content;height:max-content;}.d1hjtr0v svg{height:1.5rem;width:1.5rem;color:var(--fds-colour-icon-inverse);}
+.azqyi5b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-4);-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;margin-top:var(--fds-spacing-8);border:none;background:transparent;color:var(--fds-colour-hyperlink-inverse);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;}
+.i6bp33n{height:1.5rem;width:1.5rem;margin:var(--fds-spacing-24) var(--fds-spacing-24) 0 0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.i6bp33n svg{height:100%;width:100%;color:var(--fds-colour-hyperlink-inverse);}

package/otp-input/otp-input.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","sources":["../../src/otp-input/otp-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { StringHelper, useId } from \"../util\";\nimport {\n    CTAButton,\n    InputContainer,\n    InputField,\n    Prefix,\n    Wrapper,\n} from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const internalId = useId();\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Wrapper id={id} data-testid={dataTestId} className={className}>\n            <InputContainer\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Prefix\n                        forwardedAs=\"span\"\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Prefix>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <InputField\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </InputContainer>\n            {errorMessage && (\n                <FormErrorMessage id={errorId}>{errorMessage}</FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <CTAButton\n                    styleType={styleType}\n                    type=\"button\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </Wrapper>\n    );\n};\n\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","Wrapper","children","InputContainer","role","Prefix","forwardedAs","weight","_jsx","VisuallyHidden","separator","map","data","InputField","Object","assign","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","CTAButton"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","sources":["../../src/otp-input/otp-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { Input } from \"../input\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const internalId = useId();\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={clsx(styles.wrapper, className)}\n        >\n            <div\n                className={styles.inputContainer}\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Typography.BodyBL\n                        as=\"span\"\n                        className={styles.prefix}\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Typography.BodyBL>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <Input\n                            className={styles.inputField}\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </div>\n            {errorMessage && (\n                <FormErrorMessage id={errorId} data-testid=\"otp-error-message\">\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <Button\n                    className={styles.ctaButton}\n                    styleType={styleType}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </div>\n    );\n};\n\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","clsx","styles.wrapper","children","styles.inputContainer","role","Typography","BodyBL","as","styles.prefix","weight","_jsx","VisuallyHidden","separator","map","data","Input","Object","assign","styles.inputField","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","Button","styles.ctaButton","sizeType"],"mappings":"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"}

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

@@ -1,23 +1,5 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const InputField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").InputProps & import("react").RefAttributes<HTMLInputElement>, never> & Partial<Pick<import("..").InputProps & import("react").RefAttributes<HTMLInputElement>, never>>> & string & Omit<(props: import("..").InputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const CTAButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Prefix: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const inputContainer: import("@linaria/core").LinariaClassName;
+export declare const inputField: import("@linaria/core").LinariaClassName;
+export declare const ctaButton: import("@linaria/core").LinariaClassName;
+export declare const prefix: import("@linaria/core").LinariaClassName;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"contact-input-section.js","sources":["../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n}: ContactInputSectionProps) => {\n    const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    const getMobileAriaLabel = (country?: CountryValue) =>\n        `Enter your ${\n            country?.name ?? \"\"\n        } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-describedby={sendOtpError ? contactErrorId : undefined}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-describedby={sendOtpError ? contactErrorId : undefined}\n                getAriaLabel={getMobileAriaLabel}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={contactErrorId}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","contactErrorId","undefined","handlePhoneInputChange","value","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","e","target","noBorder","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"uYAkBaA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,mBAEA,MAAMC,EAAiBlB,EAAK,GAAGA,uBAAqBmB,EAY9CC,EAA0BC,IAC5BL,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBW,EACxB,EAsBEC,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EA+CvE,OACIC,EAACC,EAAqB,CAAC5B,GAAIA,EAAE,cAAeC,EAAU4B,SAAA,CAClDF,EAACG,EAA0B,CAAAD,SAAA,CACvBF,EAACI,eACyB,UAAT1B,EAAgB2B,SACnBf,EAAYgB,UACX/B,YACAC,EAAQ0B,SAAA,CAhDtB,UAATxB,EACI6B,EAACC,GACGnC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDiB,YAAa9B,GAAsB,cACnCe,MAAOd,EACP8B,SAlDoBC,IAC5BtB,IACa,UAATX,GAAoBG,GACpBA,EAAc8B,EAAEC,OAAOlB,MAC3B,EA+CQhB,KAAK,QACLmC,UAAQ,EAAA,iBACQvB,EAAY,iBACb,EAAI,aACR,yDAAwD,mBACjDA,EAAeC,OAAiBC,EAClDjB,SAAUA,EACVC,SAAUA,IAGd+B,EAACO,EAAiB,CACdzC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BkB,EAEjDiB,YAAa9B,GAAsB,sBACnCe,MAAOZ,EACP4B,SAAUjB,EACVoB,UAAQ,EACR7B,aAAcA,EAAY,iBACVM,mBACD,EAAI,mBACDA,EAAeC,OAAiBC,EAClDuB,aAAcpB,EACdpB,SAAUA,EACVC,SAAUA,IAiBLU,GACGqB,EAACS,gBAA+B,WAAWC,KAAK,MAAKf,SACjDK,EAACW,EAAkB,CAAA,SAI7B3C,IAAaC,GACX+B,EAACY,EAAa,CACV9C,GAAIA,EAAK,GAAGA,wBAAsBmB,EAClCd,KAAK,uBAEDJ,EACM,GAAGA,wBACHkB,EAEV4B,QAAShC,EACTb,SAAUY,EAAUkC,WAAanC,EACjCoC,QAASrC,EAASiB,SA5F9BhB,EACO,WAGPD,EACO,GAGPE,EAAUkC,UACH,WAGJ,gBAsFF/B,GACGiB,EAACgB,EAAgB,CACblD,GAAIkB,EAAc,cAEdjB,EAAa,GAAGA,uBAA6BkB,EAEjDyB,KAAK,QAAOf,SAEXZ,MAGW"}
+{"version":3,"file":"contact-input-section.js","sources":["../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type {\n    CountryValue,\n    PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport {\n    ContactButton,\n    ContactInputSectionWrapper,\n    ContactInputWrapper,\n    ContactSectionWrapper,\n    EmailContactInput,\n    PhoneContactInput,\n    VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n    id,\n    \"data-testid\": dataTestId,\n    disabled,\n    readOnly,\n    inputId,\n    type,\n    sendOtpPlaceholder,\n    emailValue,\n    onEmailChange,\n    phoneNumberValue,\n    onPhoneNumberChange,\n    fixedCountry,\n    isLoading,\n    isVerified,\n    countdown,\n    onSendOtp,\n    onStateReset,\n    sendOtpError,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n    const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        onStateReset();\n        if (type === \"email\" && onEmailChange) {\n            onEmailChange(e.target.value);\n        }\n    };\n\n    const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n        onStateReset();\n        if (type === \"phone-number\" && onPhoneNumberChange) {\n            onPhoneNumberChange(value);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getContactButtonText = () => {\n        if (isVerified) {\n            return \"Verified\";\n        }\n\n        if (isLoading) {\n            return \"\";\n        }\n\n        if (countdown.isRunning) {\n            return \"Sent OTP\";\n        }\n\n        return \"Send OTP\";\n    };\n\n    const getMobileAriaLabel = (country?: CountryValue) =>\n        `Enter your ${\n            country?.name ?? \"\"\n        } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContactInput = () =>\n        type === \"email\" ? (\n            <EmailContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter email\"}\n                value={emailValue}\n                onChange={handleEmailInputChange}\n                type=\"email\"\n                noBorder\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                aria-label=\"Enter your email address to receive a verification OTP\"\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        ) : (\n            <PhoneContactInput\n                id={inputId}\n                data-testid={\n                    dataTestId ? `${dataTestId}-contact-input` : undefined\n                }\n                placeholder={sendOtpPlaceholder || \"Enter mobile number\"}\n                value={phoneNumberValue}\n                onChange={handlePhoneInputChange}\n                noBorder\n                fixedCountry={fixedCountry}\n                aria-invalid={!!sendOtpError}\n                aria-required={true}\n                getAriaLabel={getMobileAriaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={concatIds(\n                    sendOtpError ? contactErrorId : undefined,\n                    ariaDescribedBy\n                )}\n                disabled={disabled}\n                readOnly={readOnly}\n            />\n        );\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <ContactSectionWrapper id={id} data-testid={dataTestId}>\n            <ContactInputSectionWrapper>\n                <ContactInputWrapper\n                    $isMaxWidth={type === \"email\"}\n                    $error={!!sendOtpError}\n                    $disabled={disabled}\n                    $readonly={readOnly}\n                >\n                    {renderContactInput()}\n                    {isVerified && (\n                        <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n                            <TickCircleFillIcon />\n                        </VerifiedIconWrapper>\n                    )}\n                </ContactInputWrapper>\n                {!disabled && !readOnly && (\n                    <ContactButton\n                        id={id ? `${id}-contact-button` : undefined}\n                        type=\"button\"\n                        data-testid={\n                            dataTestId\n                                ? `${dataTestId}-contact-button`\n                                : undefined\n                        }\n                        onClick={onSendOtp}\n                        disabled={countdown.isRunning || isVerified}\n                        loading={isLoading}\n                    >\n                        {getContactButtonText()}\n                    </ContactButton>\n                )}\n            </ContactInputSectionWrapper>\n            {sendOtpError && (\n                <FormErrorMessage\n                    id={contactErrorId}\n                    data-testid={\n                        dataTestId ? `${dataTestId}-contact-error` : undefined\n                    }\n                    role=\"alert\"\n                >\n                    {sendOtpError}\n                </FormErrorMessage>\n            )}\n        </ContactSectionWrapper>\n    );\n};\n"],"names":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handlePhoneInputChange","value","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","e","target","noBorder","concatIds","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"8bAmBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAY9CC,EAA0BC,IAC5BP,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBa,EACxB,EAsBEC,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAuDvE,OACIC,EAACC,EAAqB,CAAC9B,GAAIA,EAAE,cAAeC,EAAU8B,SAAA,CAClDF,EAACG,EAA0B,CAAAD,SAAA,CACvBF,EAACI,eACyB,UAAT5B,EAAgB6B,SACnBjB,EAAYkB,UACXjC,YACAC,EAAQ4B,SAAA,CAxDtB,UAAT1B,EACI+B,EAACC,EAAiB,CACdrC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDiB,YAAahC,GAAsB,cACnCiB,MAAOhB,EACPgC,SAlDoBC,IAC5BxB,IACa,UAATX,GAAoBG,GACpBA,EAAcgC,EAAEC,OAAOlB,MAC3B,EA+CQlB,KAAK,QACLqC,UAAQ,EAAA,iBACQzB,EAAY,iBACb,EAAI,aACR,2EACMC,EAAc,mBACbyB,EACd1B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAGdiC,EAACQ,EAAiB,CACd5C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDiB,YAAahC,GAAsB,sBACnCiB,MAAOd,EACP8B,SAAUjB,EACVoB,UAAQ,EACR/B,aAAcA,EAAY,iBACVM,mBACD,EACf4B,aAAcrB,EAAkB,kBACfN,qBACCyB,EACd1B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAiBLU,GACGuB,EAACU,gBAA+B,WAAWC,KAAK,MAAKhB,SACjDK,EAACY,EAAkB,CAAA,SAI7B9C,IAAaC,GACXiC,EAACa,EAAa,CACVjD,GAAIA,EAAK,GAAGA,wBAAsBqB,EAClChB,KAAK,uBAEDJ,EACM,GAAGA,wBACHoB,EAEV6B,QAASnC,EACTb,SAAUY,EAAUqC,WAAatC,EACjCuC,QAASxC,EAASmB,SApG9BlB,EACO,WAGPD,EACO,GAGPE,EAAUqC,UACH,WAGJ,gBA8FFlC,GACGmB,EAACiB,EAAgB,CACbrD,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjD0B,KAAK,QAAOhB,SAEXd,MAGW"}

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

@@ -3,6 +3,8 @@ import type { useCountdown } from "../util";
 export interface ContactInputSectionProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     inputId?: string | undefined;

package/otp-verification/verification-section.js

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