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

package/cjs/navbar/navbar.styles.js

@@ -1,80 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/menu"),r=require("styled-components"),a=require("../shared/clickable-icon/clickable-icon.js"),i=require("../v3_theme/index.js"),o=require("../v3_theme/components/theme-helper.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(r);const l=n.default.div`
-    position: ${e=>e.$fixed?"sticky":"relative"};
-    background-color: ${o.V3_ThemeNavbar["navbar-colour-bg"]};
-    z-index: 30;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    ${e=>{var a;return"dark"===(null===(a=e.theme)||void 0===a?void 0:a.colourMode)?r.css`
-                  border-bottom: ${i.V3_Border["width-010"]} ${i.V3_Border.solid}
-                      ${i.V3_Colour.border};
-              `:r.css`
-                  box-shadow: ${i.V3_Shadow["xs-subtle"]};
-              `}}
-`,d=n.default.nav`
-    height: ${e=>{var r;const a=e.$compress?o.V3_ThemeNavbar["navbar-compressed-height"](e):o.V3_ThemeNavbar["navbar-full-height"](e);return"dark"===(null===(r=e.theme)||void 0===r?void 0:r.colourMode)?`calc(${a} - 1px)`:`${a}`}};
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    transition: ${i.V3_Motion["duration-350"]} ${i.V3_Motion["ease-standard"]};
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        height: ${e=>{var r;return"dark"===(null===(r=e.theme)||void 0===r?void 0:r.colourMode)?`calc(${o.V3_ThemeNavbar["navbar-mobile-height"](e)} - 1px)`:`${o.V3_ThemeNavbar["navbar-mobile-height"](e)}`}};
-    }
-`,h=n.default.div`
-    display: flex;
-    height: 100%;
-    margin-left: ${e=>e.$hideNavBranding?"0":"5rem"};
-    flex: 1;
-    justify-content: flex-end;
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        margin-left: 0rem;
-    }
-`,s=n.default(a.ClickableIcon)`
-    display: none;
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        display: flex;
-        padding: 0 1.5rem;
-        margin-right: -1.5rem;
-    }
-`,u=n.default(e.MenuIcon)`
-    height: 1.5rem;
-    width: 1.5rem;
-    color: ${o.V3_ThemeNavbar["navbar-colour-icon"]};
-`,c=n.default.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-shrink: 0;
-
-    height: ${e=>e.$compress?o.V3_ThemeNavbar["navbar-compressed-logo-height"]:o.V3_ThemeNavbar["navbar-full-logo-height"]};
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        height: ${o.V3_ThemeNavbar["navbar-mobile-logo-height"]};
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.xxs} {
-        height: 1.25rem;
-    }
-`,m=n.default.div`
-    display: flex;
-    background-color: ${i.V3_Colour.border};
-    height: 100%;
-    width: 2px;
-    margin: 0 ${e=>e.$compress?1:1.5}rem;
-
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        margin: 0 1rem;
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.sm} {
-        margin: 0 0.75rem;
-    }
-`;exports.MobileMenuButton=s,exports.MobileMenuIcon=u,exports.Nav=d,exports.NavBrandContainer=c,exports.NavElementsContainer=h,exports.NavSeparator=m,exports.Wrapper=l;
+"use strict";require("./navbar.styles_koy0c7.css");exports.mobileMenuButton="m12dog8x",exports.mobileMenuIcon="m11vsg37",exports.nav="n1etv3uj",exports.navBrandContainer="n11lmr0i",exports.navBrandContainerCompressed="n1ge86ul",exports.navBrandContainerFull="n18nedbe",exports.navBrandContainerResponsive="n6r6bt7",exports.navCompressed="nhqxvja",exports.navDark="nobvuz4",exports.navElementsContainer="n10vmkvx",exports.navElementsContainerWithBranding="n1lixcfd",exports.navSeparator="n1lsvhqc",exports.navSeparatorCompressed="n1yd75go",exports.navSeparatorFull="ndxbaef",exports.navSeparatorResponsive="n3azfgc",exports.wrapper="wkxx447",exports.wrapperDark="w1f5qsn6",exports.wrapperFixed="w1818o7d",exports.wrapperLight="wetstry",exports.wrapperRelative="wjuvx4d";
 //# sourceMappingURL=navbar.styles.js.map

package/cjs/navbar/navbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.styles.js","sources":["../../../src/navbar/navbar.styles.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Shadow,\n} from \"../v3_theme\";\nimport { V3_ThemeNavbar } from \"../v3_theme/components/theme-helper\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $compress?: boolean;\n    $fixed?: boolean;\n    $hideNavBranding?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div<StyleProps>`\n    position: ${(props) => (props.$fixed ? \"sticky\" : \"relative\")};\n    background-color: ${V3_ThemeNavbar[\"navbar-colour-bg\"]};\n    z-index: 30;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n              `;\n    }}\n`;\n\nexport const Nav = styled.nav<StyleProps>`\n    height: ${(props) => {\n        const baseHeight = props.$compress\n            ? V3_ThemeNavbar[\"navbar-compressed-height\"](props)\n            : V3_ThemeNavbar[\"navbar-full-height\"](props);\n        return props.theme?.colourMode === \"dark\"\n            ? `calc(${baseHeight} - 1px)`\n            : `${baseHeight}`;\n    }};\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    transition: ${V3_Motion[\"duration-350\"]} ${V3_Motion[\"ease-standard\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        height: ${(props) =>\n            props.theme?.colourMode === \"dark\"\n                ? `calc(${V3_ThemeNavbar[\"navbar-mobile-height\"](props)} - 1px)`\n                : `${V3_ThemeNavbar[\"navbar-mobile-height\"](props)}`};\n    }\n`;\n\nexport const NavElementsContainer = styled.div<StyleProps>`\n    display: flex;\n    height: 100%;\n    margin-left: ${(props) => (props.$hideNavBranding ? \"0\" : \"5rem\")};\n    flex: 1;\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-left: 0rem;\n    }\n`;\n\nexport const MobileMenuButton = styled(ClickableIcon)`\n    display: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        padding: 0 1.5rem;\n        margin-right: -1.5rem;\n    }\n`;\n\nexport const MobileMenuIcon = styled(MenuIcon)`\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_ThemeNavbar[\"navbar-colour-icon\"]};\n`;\n\nexport const NavBrandContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    flex-shrink: 0;\n\n    height: ${(props) =>\n        props.$compress\n            ? V3_ThemeNavbar[\"navbar-compressed-logo-height\"]\n            : V3_ThemeNavbar[\"navbar-full-logo-height\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        height: ${V3_ThemeNavbar[\"navbar-mobile-logo-height\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        height: 1.25rem;\n    }\n`;\n\nexport const NavSeparator = styled.div<StyleProps>`\n    display: flex;\n    background-color: ${V3_Colour.border};\n    height: 100%;\n    width: 2px;\n    margin: 0 ${(props) => (props.$compress ? 1 : 1.5)}rem;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin: 0 1rem;\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin: 0 0.75rem;\n    }\n`;\n"],"names":["Wrapper","styled","div","props","$fixed","V3_ThemeNavbar","theme","_a","colourMode","css","V3_Border","V3_Colour","V3_Shadow","Nav","nav","baseHeight","$compress","V3_Motion","V3_MediaQuery","MaxWidth","lg","NavElementsContainer","$hideNavBranding","MobileMenuButton","ClickableIcon","MobileMenuIcon","MenuIcon","NavBrandContainer","xxs","NavSeparator","border","sm"],"mappings":"uTAyBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAe;gBAC5BC,GAAWA,EAAMC,OAAS,SAAW;wBAC9BC,EAAAA,eAAe;;;;;;MAMhCF,UACC,MAAmC,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,KAAG;mCACkBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;wBACtDC,EAAAA,UAAkB;gBAE5BF,KAAG;gCACeG,EAAAA,UAAU;eAC3B;EAIFC,EAAMZ,EAAAA,QAAOa,GAAe;cAC1BX,UACP,MAAMY,EAAaZ,EAAMa,UACnBX,EAAAA,eAAe,4BAA4BF,GAC3CE,iBAAe,sBAAsBF,GAC3C,MAAmC,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACd,QAAQO,WACR,GAAGA,GAAY;;;;;;;kBAQXE,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;MAEnDC,EAAAA,cAAcC,SAASC;kBACVjB,UACP,MAA4B,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACP,QAAQH,EAAAA,eAAe,wBAAwBF,YAC/C,GAAGE,EAAAA,eAAe,wBAAwBF,IAAQ;;EAIvDkB,EAAuBpB,EAAAA,QAAOC,GAAe;;;mBAGtCC,GAAWA,EAAMmB,iBAAmB,IAAM;;;;MAIxDJ,EAAAA,cAAcC,SAASC;;;EAKhBG,EAAmBtB,EAAAA,QAAOuB,EAAAA,cAAc;;;MAG/CN,EAAAA,cAAcC,SAASC;;;;;EAOhBK,EAAiBxB,EAAAA,QAAOyB,EAAAA,SAAS;;;aAGjCrB,EAAAA,eAAe;EAGfsB,EAAoB1B,EAAAA,QAAOC,GAAe;;;;;;cAMxCC,GACPA,EAAMa,UACAX,EAAAA,eAAe,iCACfA,EAAAA,eAAe;;MAEvBa,EAAAA,cAAcC,SAASC;kBACXf,EAAAA,eAAe;;;MAG3Ba,EAAAA,cAAcC,SAASS;;;EAKhBC,EAAe5B,EAAAA,QAAOC,GAAe;;wBAE1BS,EAAAA,UAAUmB;;;gBAGjB3B,GAAWA,EAAMa,UAAY,EAAI;;MAE5CE,EAAAA,cAAcC,SAASC;;;;MAIvBF,EAAAA,cAAcC,SAASY;;;"}
+{"version":3,"file":"navbar.styles.js","sources":["../../../src/navbar/navbar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    ComponentToken,\n    MediaQuery,\n    Motion,\n    Shadow,\n} from \"../theme\";\n\nexport const tokens = {\n    nav: {\n        height: \"--fds-internal-navbar-nav-height\",\n    },\n};\n\nexport const wrapper = css`\n    background-color: ${ComponentToken.Navbar[\"colour-bg\"]};\n    z-index: 30;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n`;\n\nexport const wrapperFixed = css`\n    position: sticky;\n`;\n\nexport const wrapperRelative = css`\n    position: relative;\n`;\n\nexport const wrapperDark = css`\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const wrapperLight = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n`;\n\nexport const nav = css`\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    transition: ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n\n    ${tokens.nav.height}: ${ComponentToken.Navbar[\"full-height\"]};\n    height: var(${tokens.nav.height});\n\n    ${MediaQuery.MaxWidth.lg} {\n        height: ${ComponentToken.Navbar[\"mobile-height\"]};\n    }\n`;\n\nexport const navCompressed = css`\n    ${tokens.nav.height}: ${ComponentToken.Navbar[\"compressed-height\"]};\n`;\n\nexport const navDark = css`\n    height: calc(var(${tokens.nav.height}) - 1px);\n\n    ${MediaQuery.MaxWidth.lg} {\n        height: calc(${ComponentToken.Navbar[\"mobile-height\"]} - 1px);\n    }\n`;\n\nexport const navElementsContainer = css`\n    display: flex;\n    height: 100%;\n    flex: 1;\n    justify-content: flex-end;\n`;\n\nexport const navElementsContainerWithBranding = css`\n    margin-left: 5rem;\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: 0;\n    }\n`;\n\nexport const mobileMenuButton = css`\n    display: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        padding: 0 1.5rem;\n        margin-right: -1.5rem;\n    }\n`;\n\nexport const mobileMenuIcon = css`\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${ComponentToken.Navbar[\"colour-icon\"]};\n`;\n\nexport const navBrandContainer = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    flex-shrink: 0;\n`;\n\nexport const navBrandContainerCompressed = css`\n    height: ${ComponentToken.Navbar[\"compressed-logo-height\"]};\n`;\n\nexport const navBrandContainerFull = css`\n    height: ${ComponentToken.Navbar[\"full-logo-height\"]};\n`;\n\nexport const navBrandContainerResponsive = css`\n    ${MediaQuery.MaxWidth.lg} {\n        height: ${ComponentToken.Navbar[\"mobile-logo-height\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        height: 1.25rem;\n    }\n`;\n\nexport const navSeparator = css`\n    display: flex;\n    background-color: ${Colour.border};\n    height: 100%;\n    width: 2px;\n`;\n\nexport const navSeparatorCompressed = css`\n    margin: 0 1rem;\n`;\n\nexport const navSeparatorFull = css`\n    margin: 0 1.5rem;\n`;\n\nexport const navSeparatorResponsive = css`\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 0 1rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin: 0 0.75rem;\n    }\n`;\n"],"names":[],"mappings":"kGAqF6B,kCAUF,uBArDX,qCA2Dc,+CAOU,yCAIN,+CAIM,gCAzDd,0BAIN,uCAQa,oDAOY,gCAgDpB,0CAOU,oCAIN,yCAIM,0BA5Hf,8BAiBI,gCARC,gCAYA,kCARG"}

package/cjs/navbar/navbar.styles_koy0c7.css

@@ -0,0 +1,20 @@
+.wkxx447{background-color:var(--fds-navbar-colour-bg);z-index:30;top:0;left:0;right:0;width:100%;}
+.w1818o7d{position:-webkit-sticky;position:sticky;}
+.wjuvx4d{position:relative;}
+.w1f5qsn6{border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.wetstry{box-shadow:var(--fds-shadow-xs-subtle);}
+.n1etv3uj{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-transition:var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);--fds-internal-navbar-nav-height:var(--fds-navbar-full-height);height:var(--fds-internal-navbar-nav-height);}:where(body.fds-breakpoint-lg-max) .n1etv3uj{height:var(--fds-navbar-mobile-height);}
+.nhqxvja{--fds-internal-navbar-nav-height:var(--fds-navbar-compressed-height);}
+.nobvuz4{height:calc(var(--fds-internal-navbar-nav-height) - 1px);}:where(body.fds-breakpoint-lg-max) .nobvuz4{height:calc(var(--fds-navbar-mobile-height) - 1px);}
+.n10vmkvx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}
+.n1lixcfd{margin-left:5rem;}:where(body.fds-breakpoint-lg-max) .n1lixcfd{margin-left:0;}
+.m12dog8x{display:none;}:where(body.fds-breakpoint-lg-max) .m12dog8x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 1.5rem;margin-right:-1.5rem;}
+.m11vsg37{height:1.5rem;width:1.5rem;color:var(--fds-navbar-colour-icon);}
+.n11lmr0i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.n1ge86ul{height:var(--fds-navbar-compressed-logo-height);}
+.n18nedbe{height:var(--fds-navbar-full-logo-height);}
+:where(body.fds-breakpoint-lg-max) .n6r6bt7{height:var(--fds-navbar-mobile-logo-height);}:where(body.fds-breakpoint-xxs-max) .n6r6bt7{height:1.25rem;}
+.n1lsvhqc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background-color:var(--fds-colour-border);height:100%;width:2px;}
+.n1yd75go{margin:0 1rem;}
+.ndxbaef{margin:0 1.5rem;}
+:where(body.fds-breakpoint-lg-max) .n3azfgc{margin:0 1rem;}:where(body.fds-breakpoint-sm-max) .n3azfgc{margin:0 0.75rem;}

package/cjs/notification-banner/notification-banner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),n=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),r=require("./notification-banner.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=o=>{var{children:a,visible:l=!0,dismissible:d=!0,sticky:u=!0,onDismiss:b,id:f,forwardedRef:x,maxCollapsedHeight:h,onClick:j,actionButton:p,icon:C}=o,g=e.__rest(o,["children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon"]);const k=g["data-testid"],[m,y]=n.useState(l),{height:B=0,ref:v}=s.useResizeDetector();n.useEffect((()=>{y(l)}),[l]);const q=e=>{e.stopPropagation(),y(!1),d&&b&&b()},w=e=>{(null==p?void 0:p.onClick)&&(e.stopPropagation(),p.onClick(e))};if(!m)return null;return t.jsxs(r.Wrapper,Object.assign({ref:x,$sticky:u,$clickable:!!j,onClick:j,role:"region"},g,{children:[t.jsxs(r.Container,{id:c("container",f),children:[C&&t.jsx(r.IconContainer,{"aria-hidden":!0,children:C}),t.jsx(r.ContentContainer,{children:t.jsx(r.Content,{"data-testid":c("text-content",k),children:t.jsxs(r.ContentWrapper,{children:[t.jsx(r.ContentText,{$maxCollapsedHeight:h&&B>h?h:void 0,children:t.jsx("div",{ref:v,children:a})}),p?t.jsx(r.ActionButton,Object.assign({id:c("action-button",f),"data-testid":c("action-button",k),type:"button"},p,{onClick:w,children:p.children})):null]})})}),d&&t.jsx(r.StyledIconButton,{tabIndex:0,onClick:q,id:c("dismiss-button",f),"data-testid":c("dismiss-button",k),focusOutline:"browser",focusHighlight:!1,type:"button","aria-label":"close",children:t.jsx(i.CrossIcon,{"aria-hidden":!0})})]}),j&&t.jsx(r.AccessibleBannerButton,{"aria-label":"Clickable banner",type:"button"})]}))},c=(e,t="wrapper")=>`${t}-${e}`,l=o(n).default.forwardRef(((e,i)=>t.jsx(a,Object.assign({},e,{forwardedRef:i}))));l.displayName="NotificationBanner";const d=Object.assign(l,{Link:r.ContentLink});exports.NBComponent=a,exports.NotificationBanner=d;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),s=require("clsx"),r=require("react"),n=require("../external/react-resize-detector/build/index.esm.js"),a=require("../layout/index.js"),o=require("../shared/accessibility/index.js"),l=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js");var c=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var u=require("../typography/index.js"),m=require("./notification-banner.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=f(s),j=f(r);const p=s=>{var{children:u,visible:f=!0,dismissible:j=!0,sticky:p=!0,onDismiss:b,id:k,forwardedRef:y,maxCollapsedHeight:q,onClick:v,actionButton:C,icon:N,className:g}=s,w=e.__rest(s,["children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className"]);const B=w["data-testid"],[R,L]=r.useState(f),{height:O=0,ref:H}=n.useResizeDetector(),T=r.useRef(null),_=q&&O>q;d.useApplyStyle(T,{[m.tokens.contentText.maxCollapsedHeight]:_?c.formatUnitValue(q,"px"):void 0}),r.useEffect((()=>{L(f)}),[f]);const D=e=>{e.stopPropagation(),L(!1),j&&b&&b()},I=e=>{(null==C?void 0:C.onClick)&&(e.stopPropagation(),C.onClick(e))};if(!R)return null;return i.jsxs("div",Object.assign({ref:y,className:h.default(m.wrapper,p&&m.wrapperSticky,!!v&&m.wrapperClickable,g),onClick:v,role:"region"},w,{children:[i.jsxs(a.Layout.Content,{id:x("container",k),children:[N&&i.jsx("div",{className:m.iconContainer,"aria-hidden":!0,children:N}),i.jsx("div",{className:m.contentContainer,children:i.jsx("div",{className:m.content,"data-testid":x("text-content",B),children:i.jsxs("div",{className:m.contentWrapper,children:[i.jsx("div",{ref:T,className:h.default(m.contentText,_&&m.contentTextCollapsed),children:i.jsx("div",{ref:H,children:u})}),C?i.jsx("button",Object.assign({className:m.actionButton,id:x("action-button",k),"data-testid":x("action-button",B),type:"button"},C,{onClick:I,children:C.children})):null]})})}),j&&i.jsx(l.ClickableIcon,{className:m.dismissButton,tabIndex:0,onClick:D,id:x("dismiss-button",k),"data-testid":x("dismiss-button",B),focusOutline:"browser",focusHighlight:!1,type:"button","aria-label":"close",children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]}),v&&i.jsx(o.VisuallyHidden,{children:i.jsx("button",{"aria-label":"Clickable banner",type:"button"})})]}))},b=j.default.forwardRef((function(e,t){return i.jsx(u.Typography.LinkBL,Object.assign({ref:t,className:h.default(m.contentLink,e.className)},e))}));b.displayName="NotificationBanner.Link";const x=(e,i="wrapper")=>`${i}-${e}`,k=j.default.forwardRef(((e,t)=>i.jsx(p,Object.assign({},e,{forwardedRef:t}))));k.displayName="NotificationBanner";const y=Object.assign(k,{Link:b});exports.NBComponent=p,exports.NotificationBanner=y;
 //# sourceMappingURL=notification-banner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    AccessibleBannerButton,\n    ActionButton,\n    Container,\n    Content,\n    ContentContainer,\n    ContentLink as NBLink,\n    ContentText,\n    ContentWrapper,\n    IconContainer,\n    StyledIconButton,\n    Wrapper,\n} from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <StyledIconButton\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </StyledIconButton>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <ActionButton\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </ActionButton>\n        );\n    };\n\n    const renderContent = () => (\n        <Content data-testid={formatId(\"text-content\", testId)}>\n            <ContentWrapper>\n                <ContentText\n                    $maxCollapsedHeight={\n                        maxCollapsedHeight && contentHeight > maxCollapsedHeight\n                            ? maxCollapsedHeight\n                            : undefined\n                    }\n                >\n                    <div ref={contentRef}>{children}</div>\n                </ContentText>\n                {renderActionButton()}\n            </ContentWrapper>\n        </Content>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <AccessibleBannerButton aria-label={\"Clickable banner\"} type=\"button\" />\n    );\n\n    return (\n        <Wrapper\n            ref={forwardedRef}\n            $sticky={sticky}\n            $clickable={!!onClick}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Container id={formatId(\"container\", id)}>\n                {icon && <IconContainer aria-hidden>{icon}</IconContainer>}\n                <ContentContainer>{renderContent()}</ContentContainer>\n                {dismissible && renderDismissButton()}\n            </Container>\n            {onClick && renderAccessibleBannerButton()}\n        </Wrapper>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","Wrapper","Object","assign","$sticky","$clickable","role","Container","formatId","_jsx","IconContainer","ContentContainer","Content","ContentWrapper","ContentText","$maxCollapsedHeight","undefined","ActionButton","type","StyledIconButton","tabIndex","focusOutline","focusHighlight","CrossIcon","AccessibleBannerButton","componentName","Base","React","forwardRef","props","displayName","NotificationBanner","Link","NBLink"],"mappings":"8TAuBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,GAAIX,EACDY,EAAUC,EAAAA,OAAAb,EAZW,oIAiBxB,MAAMc,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAAA,SAAkBf,IAC1CgB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,sBAKvDC,EAAAA,WAAU,KACNP,EAAWd,EAAQ,GACpB,CAACA,IAKJ,MAAMsB,EAAiBC,IACnBA,EAAMC,kBACNV,GAAW,GAEPb,GAAeE,GAAWA,GAAW,EAGvCsB,EACFF,KAEKf,aAAY,EAAZA,EAAcD,WAInBgB,EAAMC,kBACNhB,EAAaD,QAAQgB,GAAM,EAM/B,IAAKV,EAAW,OAAO,KAsDvB,OACIa,OAACC,EAAAA,QAAOC,OAAAC,OAAA,CACJX,IAAKb,EAAYyB,QACR5B,EAAM6B,aACDxB,EACdA,QAASA,EACTyB,KAAK,UACDtB,EAAU,CAAAX,SAAA,CAEd2B,EAAAA,KAACO,EAAAA,UAAS,CAAC7B,GAAI8B,EAAS,YAAa9B,GAAGL,SAAA,CACnCU,GAAQ0B,EAAAA,IAACC,EAAAA,cAAa,CAAA,eAAA,EAAArC,SAAcU,IACrC0B,EAAAA,IAACE,EAAAA,iBAAgB,CAAAtC,SA/BzBoC,EAAAA,IAACG,EAAAA,QAAO,CAAA,cAAcJ,EAAS,eAAgBtB,GAAOb,SAClD2B,EAAAA,KAACa,EAAAA,eAAc,CAAAxC,SAAA,CACXoC,EAAAA,IAACK,EAAAA,YAAW,CAAAC,oBAEJnC,GAAsBW,EAAgBX,EAChCA,OACAoC,EAAS3C,SAGnBoC,EAAAA,IAAA,MAAA,CAAKjB,IAAKC,EAAUpB,SAAGA,MAzB9BS,EAGD2B,MAACQ,EAAAA,aAAYf,OAAAC,OAAA,CACTzB,GAAI8B,EAAS,gBAAiB9B,GAAG,cACpB8B,EAAS,gBAAiBtB,GACvCgC,KAAK,UACDpC,EAAY,CAChBD,QAASkB,WAERjB,EAAaT,YAVI,YAgDjBE,GA/DTkC,EAAAA,IAACU,EAAAA,iBAAgB,CACbC,SAAU,EACVvC,QAASe,EACTlB,GAAI8B,EAAS,iBAAkB9B,GAAG,cACrB8B,EAAS,iBAAkBtB,GACxCmC,aAAa,UACbC,gBAAgB,EAChBJ,KAAK,SAAQ,aACF,QAAO7C,SAElBoC,EAAAA,IAACc,YAAS,CAAA,eAAA,SAuDT1C,GAjBL4B,EAAAA,IAACe,yBAAsB,CAAA,aAAa,mBAAoBN,KAAK,cAkBnD,EAiBZV,EAAW,CAACiB,EAAuB/C,EAAK,YACnC,GAAGA,KAAM+C,IAMdC,OAAOC,QAAMC,YAjBD,CACdC,EACArC,IAEOiB,EAAAA,IAACtC,EAAW+B,OAAAC,OAAA,GAAK0B,GAAOlD,aAAca,OAchDkC,EAA8BI,YAAc,2BAChCC,EAAqB7B,OAAOC,OAAOuB,EAAM,CAClDM,KAAMC,EAAAA"}
+{"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    className,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n    const contentTextRef = useRef<HTMLDivElement>(null);\n\n    const isCollapsed =\n        maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n    useApplyStyle(contentTextRef, {\n        [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n            ? formatUnitValue(maxCollapsedHeight, \"px\")\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <ClickableIcon\n            className={styles.dismissButton}\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </ClickableIcon>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <button\n                className={styles.actionButton}\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </button>\n        );\n    };\n\n    const renderContent = () => (\n        <div\n            className={styles.content}\n            data-testid={formatId(\"text-content\", testId)}\n        >\n            <div className={styles.contentWrapper}>\n                <div\n                    ref={contentTextRef}\n                    className={clsx(\n                        styles.contentText,\n                        isCollapsed && styles.contentTextCollapsed\n                    )}\n                >\n                    <div ref={contentRef}>{children}</div>\n                </div>\n                {renderActionButton()}\n            </div>\n        </div>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <VisuallyHidden>\n            <button aria-label={\"Clickable banner\"} type=\"button\" />\n        </VisuallyHidden>\n    );\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\n                styles.wrapper,\n                sticky && styles.wrapperSticky,\n                !!onClick && styles.wrapperClickable,\n                className\n            )}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Layout.Content id={formatId(\"container\", id)}>\n                {icon && (\n                    <div className={styles.iconContainer} aria-hidden>\n                        {icon}\n                    </div>\n                )}\n                <div className={styles.contentContainer}>{renderContent()}</div>\n                {dismissible && renderDismissButton()}\n            </Layout.Content>\n            {onClick && renderAccessibleBannerButton()}\n        </div>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n    return (\n        <Typography.LinkBL\n            ref={ref}\n            className={clsx(styles.contentLink, props.className)}\n            {...props}\n        />\n    );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"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"}

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

@@ -1,112 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../layout/index.js"),t=require("../shared/clickable-icon/clickable-icon.js"),i=require("../typography/index.js"),r=require("../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e);const l=e.css`
-    color: ${r.V3_Colour["hyperlink-inverse"]};
-
-    svg {
-        color: ${r.V3_Colour["icon-primary-inverse"]};
-    }
-
-    &:hover,
-    &:active,
-    &:visited,
-    &:focus {
-        color: ${r.V3_Colour["hyperlink-inverse"]};
-        svg {
-            color: ${r.V3_Colour["icon-primary-inverse"]};
-        }
-    }
-`,s=a.default.div`
-    position: ${e=>e.$sticky?"sticky":"relative"};
-    left: 0;
-    top: 0;
-    width: 100%;
-    transition: all ${r.V3_Motion["duration-800"]} ${r.V3_Motion["ease-default"]};
-    background: ${r.V3_Colour["bg-inverse-subtle"]};
-    border-radius: ${r.V3_Radius.none};
-    z-index: 25;
-    cursor: ${e=>e.$clickable?"pointer":"default"};
-`,p=a.default(o.Layout.Content)``,c=a.default.div`
-    flex: 1;
-    align-items: flex-start;
-    padding: ${r.V3_Spacing["spacing-24"]} 0;
-`,d=a.default.div`
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-
-    ${r.V3_Font["body-baseline-regular"]}
-    color: ${r.V3_Colour["text-inverse"]};
-
-    p {
-        display: inline-block;
-    }
-
-    strong {
-        ${r.V3_Font["body-baseline-semibold"]}
-        color: ${r.V3_Colour["text-inverse"]};
-    }
-
-    a {
-        ${r.V3_Font["body-baseline-regular"]}
-        ${l}
-    }
-`,u=a.default.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-`,g=a.default.div`
-    flex: 1;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    ${o=>{const t="linear-gradient(to bottom, black 50%, transparent 100%)";if(o.$maxCollapsedHeight)return e.css`
-                max-height: ${o.$maxCollapsedHeight}px;
-                overflow: hidden;
-                -webkit-mask-image: ${t};
-                mask-image: ${t};
-            `}}
-`,f=a.default(i.Typography.LinkBL)`
-    position: relative;
-
-    ${l}
-`,x=a.default(t.ClickableIcon)`
-    margin-right: -${r.V3_Spacing["spacing-24"]};
-    padding-left: ${r.V3_Spacing["spacing-16"]};
-    height: max-content;
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-        color: ${r.V3_Colour["icon-inverse"]};
-    }
-`,$=a.default.button`
-    display: flex;
-    align-items: center;
-    gap: ${r.V3_Spacing["spacing-4"]};
-    align-self: flex-start;
-    margin-top: ${r.V3_Spacing["spacing-8"]};
-
-    border: none;
-    background: transparent;
-    color: ${r.V3_Colour["hyperlink-inverse"]};
-    ${r.V3_Font["body-md-semibold"]};
-
-    cursor: pointer;
-`,h=a.default.button`
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-`,v=a.default.div`
-    height: 1.5rem;
-    width: 1.5rem;
-    margin: ${r.V3_Spacing["spacing-24"]} ${r.V3_Spacing["spacing-24"]} 0 0;
-    flex-shrink: 0;
-
-    svg {
-        height: 100%;
-        width: 100%;
-        color: ${r.V3_Colour["hyperlink-inverse"]};
-    }
-`;exports.AccessibleBannerButton=h,exports.ActionButton=$,exports.Container=p,exports.Content=d,exports.ContentContainer=c,exports.ContentLink=f,exports.ContentText=g,exports.ContentWrapper=u,exports.IconContainer=v,exports.StyledIconButton=x,exports.Wrapper=s;
+"use strict";require("./notification-banner.styles_130loac.css");exports.actionButton="azqyi5b",exports.content="c1qc2rgl",exports.contentContainer="cmwsx4o",exports.contentLink="c12st863",exports.contentText="cia23af",exports.contentTextCollapsed="c1uktajc",exports.contentWrapper="cb6cjs3",exports.dismissButton="d1hjtr0v",exports.iconContainer="i6bp33n",exports.tokens={contentText:{maxCollapsedHeight:"--fds-internal-notificationBanner-contentText-maxCollapsedHeight"}},exports.wrapper="w17suq18",exports.wrapperClickable="w1trwg7u",exports.wrapperSticky="w1ixs8gf";
 //# sourceMappingURL=notification-banner.styles.js.map

package/cjs/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":"iSA6BA,MAAMA,EAAkBC,EAAAA,GAAG;aACdC,EAAAA,UAAU;;;iBAGNA,EAAAA,UAAU;;;;;;;iBAOVA,EAAAA,UAAU;;qBAENA,EAAAA,UAAU;;;EAKlBC,EAAUC,EAAAA,QAAOC,GAAsB;gBACnCC,GAAWA,EAAMC,QAAU,SAAW;;;;sBAIjCC,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;kBAC3CN,EAAAA,UAAU;qBACPO,EAAAA,UAAgB;;cAEtBH,GAAWA,EAAMI,WAAa,UAAY;EAG5CC,EAAYP,EAAAA,QAAOQ,SAAOC,QAAQ,GAElCC,EAAmBV,EAAAA,QAAOC,GAAG;;;eAG3BU,EAAAA,WAAW;EAGbF,EAAUT,EAAAA,QAAOC,GAAsB;;;;;MAK9CW,EAAAA,QAAQ;aACDd,EAAAA,UAAU;;;;;;;UAObc,EAAAA,QAAQ;iBACDd,EAAAA,UAAU;;;;UAIjBc,EAAAA,QAAQ;UACRhB;;EAIGiB,EAAiBb,EAAAA,QAAOC,GAAG;;;;EAM3Ba,EAAcd,EAAAA,QAAOC,GAAqC;;;;MAIhEC,IACC,MAAMa,EACF,0DACJ,GAAIb,EAAMc,oBACN,OAAOnB,KAAG;8BACQK,EAAMc;;sCAEED;8BACRA;aAEtB;EAIKE,EAAcjB,EAAAA,QAAOkB,aAAWC,OAAO;;;MAG9CvB;EAGOwB,EAAmBpB,EAAAA,QAAOqB,EAAAA,cAAc;qBAChCV,EAAAA,WAAW;oBACZA,EAAAA,WAAW;;;;;iBAKdb,EAAAA,UAAU;;EAIdwB,EAAetB,EAAAA,QAAOuB,MAAM;;;WAG9BZ,EAAAA,WAAW;;kBAEJA,EAAAA,WAAW;;;;aAIhBb,EAAAA,UAAU;MACjBc,EAAAA,QAAQ;;;EAKDY,EAAyBxB,EAAAA,QAAOuB,MAAM;;;;;;;;EAUtCE,EAAgBzB,EAAAA,QAAOC,GAAG;;;cAGzBU,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;;;;iBAMpCb,EAAAA,UAAU;;"}
+{"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":["contentText","maxCollapsedHeight"],"mappings":"yHAsHyB,0BA5DL,oCANS,8BAiDL,+BAdA,uCAOS,kCAbN,gCAyBD,iCA2BA,yBAjIJ,CAClBA,YAAa,CACTC,mBACI,qFAyBQ,oCAgBS,iCAJH"}

package/cjs/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/cjs/otp-input/otp-input.js

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"otp-input.styles.js","sources":["../../../src/otp-input/otp-input.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { Typography } from \"../typography\";\nimport { V3_Spacing } from \"../v3_theme\";\n\nexport const Wrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const InputField = styled(Input)`\n    min-width: 20px;\n    margin-bottom: 0rem !important;\n\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const CTAButton = styled(Button.Small)`\n    margin: ${V3_Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const Prefix = styled(Typography.BodyBL)`\n    flex-shrink: 0;\n`;\n"],"names":["Wrapper","styled","div","InputContainer","V3_Spacing","InputField","Input","CTAButton","Button","Small","Prefix","Typography","BodyBL"],"mappings":"yQAOO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;EAKpBC,EAAiBF,EAAAA,QAAOC,GAAG;;;;;WAK7BE,EAAAA,WAAW;EAGTC,EAAaJ,EAAAA,QAAOK,EAAAA,MAAM;;;;;;;;EAU1BC,EAAYN,EAAAA,QAAOO,SAAOC,MAAM;cAC/BL,EAAAA,WAAW;EAGZM,EAAST,EAAAA,QAAOU,aAAWC,OAAO;;"}
+{"version":3,"file":"otp-input.styles.js","sources":["../../../src/otp-input/otp-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    flex-direction: row;\n    align-self: center;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const inputField = css`\n    input {\n        padding: 0;\n        text-align: center;\n    }\n`;\n\nexport const ctaButton = css`\n    margin: ${Spacing[\"spacing-32\"]} 0;\n`;\n\nexport const prefix = css`\n    flex-shrink: 0;\n`;\n"],"names":[],"mappings":"iGAwBsB,iCAfK,8BAQJ,0BAWJ,0BAxBC"}

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

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