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

package/navbar/navbar.styles.js

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

package/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":"mWAyBO,MAAMA,EAAUC,EAAOC,GAAe;gBAC5BC,GAAWA,EAAMC,OAAS,SAAW;wBAC9BC,EAAe;;;;;;MAMhCF,UACC,MAAmC,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,CAAG;mCACkBC,EAAU,gBAAgBA,EAAiB;wBACtDC,EAAkB;gBAE5BF,CAAG;gCACeG,EAAU;eAC3B;EAIFC,EAAMZ,EAAOa,GAAe;cAC1BX,UACP,MAAMY,EAAaZ,EAAMa,UACnBX,EAAe,4BAA4BF,GAC3CE,EAAe,sBAAsBF,GAC3C,MAAmC,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACd,QAAQO,WACR,GAAGA,GAAY;;;;;;;kBAQXE,EAAU,mBAAmBA,EAAU;;MAEnDC,EAAcC,SAASC;kBACVjB,UACP,MAA4B,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACP,QAAQH,EAAe,wBAAwBF,YAC/C,GAAGE,EAAe,wBAAwBF,IAAQ;;EAIvDkB,EAAuBpB,EAAOC,GAAe;;;mBAGtCC,GAAWA,EAAMmB,iBAAmB,IAAM;;;;MAIxDJ,EAAcC,SAASC;;;EAKhBG,EAAmBtB,EAAOuB,EAAc;;;MAG/CN,EAAcC,SAASC;;;;;EAOhBK,EAAiBxB,EAAOyB,EAAS;;;aAGjCrB,EAAe;EAGfsB,EAAoB1B,EAAOC,GAAe;;;;;;cAMxCC,GACPA,EAAMa,UACAX,EAAe,iCACfA,EAAe;;MAEvBa,EAAcC,SAASC;kBACXf,EAAe;;;MAG3Ba,EAAcC,SAASS;;;EAKhBC,EAAe5B,EAAOC,GAAe;;wBAE1BS,EAAUmB;;;gBAGjB3B,GAAWA,EAAMa,UAAY,EAAI;;MAE5CE,EAAcC,SAASC;;;;MAIvBF,EAAcC,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":["wrapper","wrapperFixed","wrapperRelative","wrapperDark","wrapperLight","nav","navCompressed","navDark","navElementsContainer","navElementsContainerWithBranding","mobileMenuButton","mobileMenuIcon","navBrandContainer","navBrandContainerCompressed","navBrandContainerFull","navBrandContainerResponsive","navSeparator","navSeparatorCompressed","navSeparatorFull","navSeparatorResponsive"],"mappings":"yDAiBO,MAAMA,EAAO,UASPC,EAAY,WAIZC,EAAe,UAIfC,EAAW,WAIXC,EAAY,UAIZC,EAAG,WAiBHC,EAAa,UAIbC,EAAO,UAQPC,EAAoB,WAOpBC,EAAgC,WAOhCC,EAAgB,WAUhBC,EAAc,WAMdC,EAAiB,WAOjBC,EAA2B,WAI3BC,EAAqB,WAIrBC,EAA2B,UAU3BC,EAAY,WAOZC,EAAsB,WAItBC,EAAgB,UAIhBC,EAAsB"}

package/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/notification-banner/notification-banner.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
 import type { NotificationBannerProps, NotificationBannerWithForwardedRefProps } from "./types";
-export declare const NBComponent: ({ children, visible, dismissible, sticky, onDismiss, id, forwardedRef, maxCollapsedHeight, onClick, actionButton, icon, ...otherProps }: NotificationBannerWithForwardedRefProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NBComponent: ({ children, visible, dismissible, sticky, onDismiss, id, forwardedRef, maxCollapsedHeight, onClick, actionButton, icon, className, ...otherProps }: NotificationBannerWithForwardedRefProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const NotificationBanner: ((props: NotificationBannerProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
-    Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-        ref?: React.RefObject<HTMLAnchorElement> | undefined;
-    }, never>> & string;
+    Link: (props: import("..").TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
 };

package/notification-banner/notification-banner.js

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

package/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":"shBAuBO,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,EAAAb,EAZW,oIAiBxB,MAAMc,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAkBf,IAC1CgB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,IAKvDC,GAAU,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,EAACC,EAAOC,OAAAC,OAAA,CACJX,IAAKb,EAAYyB,QACR5B,EAAM6B,aACDxB,EACdA,QAASA,EACTyB,KAAK,UACDtB,EAAU,CAAAX,SAAA,CAEd2B,EAACO,EAAS,CAAC7B,GAAI8B,EAAS,YAAa9B,GAAGL,SAAA,CACnCU,GAAQ0B,EAACC,EAAa,CAAA,eAAA,EAAArC,SAAcU,IACrC0B,EAACE,EAAgB,CAAAtC,SA/BzBoC,EAACG,EAAO,CAAA,cAAcJ,EAAS,eAAgBtB,GAAOb,SAClD2B,EAACa,EAAc,CAAAxC,SAAA,CACXoC,EAACK,EAAW,CAAAC,oBAEJnC,GAAsBW,EAAgBX,EAChCA,OACAoC,EAAS3C,SAGnBoC,EAAA,MAAA,CAAKjB,IAAKC,EAAUpB,SAAGA,MAzB9BS,EAGD2B,EAACQ,EAAYf,OAAAC,OAAA,CACTzB,GAAI8B,EAAS,gBAAiB9B,GAAG,cACpB8B,EAAS,gBAAiBtB,GACvCgC,KAAK,UACDpC,EAAY,CAChBD,QAASkB,WAERjB,EAAaT,YAVI,YAgDjBE,GA/DTkC,EAACU,EAAgB,CACbC,SAAU,EACVvC,QAASe,EACTlB,GAAI8B,EAAS,iBAAkB9B,GAAG,cACrB8B,EAAS,iBAAkBtB,GACxCmC,aAAa,UACbC,gBAAgB,EAChBJ,KAAK,SAAQ,aACF,QAAO7C,SAElBoC,EAACc,EAAS,CAAA,eAAA,SAuDT1C,GAjBL4B,EAACe,EAAsB,CAAA,aAAa,mBAAoBN,KAAK,cAkBnD,EAiBZV,EAAW,CAACiB,EAAuB/C,EAAK,YACnC,GAAGA,KAAM+C,IAMdC,EAAOC,EAAMC,YAjBD,CACdC,EACArC,IAEOiB,EAACtC,EAAW+B,OAAAC,OAAA,GAAK0B,GAAOlD,aAAca,OAchDkC,EAA8BI,YAAc,2BAChCC,EAAqB7B,OAAOC,OAAOuB,EAAM,CAClDM,KAAMC"}
+{"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":"itCAiBO,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,EAAIC,UACJA,GAASZ,EACNa,EAAUC,EAAAd,EAbW,gJAkBxB,MAAMe,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAkBhB,IAC1CiB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,IACjDC,EAAiBC,EAAuB,MAExCC,EACFlB,GAAsBY,EAAgBZ,EAE1CmB,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYrB,oBAAqBkB,EAC1CI,EAAgBtB,EAAoB,WACpCuB,IAMVC,GAAU,KACNf,EAAWf,EAAQ,GACpB,CAACA,IAKJ,MAAM+B,EAAiBC,IACnBA,EAAMC,kBACNlB,GAAW,GAEPd,GAAeE,GAAWA,GAAW,EAGvC+B,EACFF,KAEKxB,aAAY,EAAZA,EAAcD,WAInByB,EAAMC,kBACNzB,EAAaD,QAAQyB,GAAM,EAM/B,IAAKlB,EAAW,OAAO,KA6DvB,OACIqB,uBACIhB,IAAKd,EACLK,UAAW0B,EACPC,EACAnC,GAAUoC,IACR/B,GAAWgC,EACb7B,GAEJH,QAASA,EACTiC,KAAK,UACD7B,aAEJwB,EAACM,EAAOC,QAAO,CAACtC,GAAIuC,EAAS,YAAavC,GAAGL,SAAA,CACxCU,GACGmC,SAAKlC,UAAWmC,4BACXpC,IAGTmC,EAAA,MAAA,CAAKlC,UAAWoC,EAAuB/C,SA5C/C6C,EAAA,MAAA,CACIlC,UAAWqC,EAAc,cACZJ,EAAS,eAAgB9B,GAAOd,SAE7CoC,EAAA,MAAA,CAAKzB,UAAWsC,EAAqBjD,SAAA,CACjC6C,EAAA,MAAA,CACIzB,IAAKG,EACLZ,UAAW0B,EACPa,EACAzB,GAAe0B,GAClBnD,SAED6C,EAAA,MAAA,CAAKzB,IAAKC,EAAUrB,SAAGA,MA7B9BS,EAGDoC,EAAA,SAAAO,OAAAC,OAAA,CACI1C,UAAW2C,EACXjD,GAAIuC,EAAS,gBAAiBvC,iBACjBuC,EAAS,gBAAiB9B,GACvCyC,KAAK,UACD9C,EAAY,CAChBD,QAAS2B,EAAyBnC,SAEjCS,EAAaT,YAXI,YA8DjBE,GA9ET2C,EAACW,EAAa,CACV7C,UAAW8C,EACXC,SAAU,EACVlD,QAASwB,EACT3B,GAAIuC,EAAS,iBAAkBvC,GAAG,cACrBuC,EAAS,iBAAkB9B,GACxC6C,aAAa,UACbC,gBAAgB,EAChBL,KAAK,SAAQ,aACF,QAAOvD,SAElB6C,EAACgB,EAAS,CAAA,eAAA,SAqETrD,GA3BLqC,EAACiB,EAAc,CAAA9D,SACX6C,EAAA,SAAA,CAAA,aAAoB,mBAAoBU,KAAK,gBA2B3C,EAcRQ,EAASC,EAAMC,YAGnB,SAAgCC,EAAO9C,GACrC,OACIyB,EAACsB,EAAWC,OAAMhB,OAAAC,OAAA,CACdjC,IAAKA,EACLT,UAAW0B,EAAKgC,EAAoBH,EAAMvD,YACtCuD,GAGhB,IACCH,EAAgCO,YAAc,0BAK/C,MAAM1B,EAAW,CAAC2B,EAAuBlE,EAAK,YACnC,GAAGA,KAAMkE,IAMdC,EAAOR,EAAMC,YA/BD,CACdC,EACA9C,IAEOyB,EAAC/C,EAAWsD,OAAAC,OAAA,GAAKa,GAAO5D,aAAcc,OA4BhDoD,EAA8BF,YAAc,2BAChCG,EAAqBrB,OAAOC,OAAOmB,EAAM,CAClDE,KAAMX"}

package/notification-banner/notification-banner.styles.d.ts

@@ -1,23 +1,17 @@
-interface WrapperStyleProps {
-    $sticky: boolean;
-    $clickable: boolean;
-}
-interface ContentStyleProps {
-    $maxCollapsedHeight?: number;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperStyleProps>> & string;
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<(props: import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentStyleProps>> & string;
-export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ContentText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $maxCollapsedHeight?: number;
-}>> & string;
-export declare const ContentLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyLinkProps & {
-    ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-}, never>> & string;
-export declare const StyledIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const AccessibleBannerButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const tokens: {
+    contentText: {
+        maxCollapsedHeight: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperSticky: import("@linaria/core").LinariaClassName;
+export declare const wrapperClickable: import("@linaria/core").LinariaClassName;
+export declare const contentContainer: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const contentWrapper: import("@linaria/core").LinariaClassName;
+export declare const contentText: import("@linaria/core").LinariaClassName;
+export declare const contentTextCollapsed: import("@linaria/core").LinariaClassName;
+export declare const contentLink: import("@linaria/core").LinariaClassName;
+export declare const dismissButton: import("@linaria/core").LinariaClassName;
+export declare const actionButton: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;

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

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

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

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

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

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

package/otp-input/otp-input.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","sources":["../../src/otp-input/otp-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { 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":"8rBAsBA,MA6TaA,EAAWC,GA7TN,CACdC,EAiBAC,KAjBA,IAAAC,GACIA,EAAEC,MACFA,EAAQ,GACR,cAAeC,EAAUC,UACzBA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,aACjBA,EAAYC,WACZA,EAAUC,OACVA,EAAMC,SACNA,EAAQC,gBACRA,EAAeC,cACfA,EAAaC,QACbA,EAAOC,kBACPA,GAAiBf,EACdgB,EAAUC,EAAAjB,EAfjB,iMAsBA,MAAMkB,EAKFX,QAAAA,EAAqB,CAAA,GALnBY,SACFA,EAAQC,QACRA,EAAOC,UACPA,EAAY,aAAWH,EACpBI,EAAaL,EAAAC,EAJd,CAAA,WAAA,UAAA,cAOAK,EAAYC,EAAoC,IAChDC,EAAcD,EAAOb,IAEpBe,EAAWC,GAAgBC,EAC9B,IAAIC,MAAMpB,GAAYqB,KAAK,MAExBC,EAAWC,GAAgBJ,EAAiBtB,IAC5C2B,EAAkBC,GAAuBN,EAAe,IAAIO,OAC5DC,GAAcR,GAAS,IAAMS,EAAkBC,aAEhDC,IAAa/B,EACbgC,EAAU,GAAGJ,UACbK,EAAU,GAAGL,UAKnBM,GAAU,WAGN,OAFqB,QAArB1C,EAAAuB,aAAS,EAATA,EAAWoB,QAAQ,UAAE,IAAA3C,GAAAA,EAAE4C,QACvBC,SAASC,iBAAiB,QAASC,IAC5B,IAAMF,SAASG,oBAAoB,QAASD,GAAY,GAChE,IAEHL,GAAU,KACN,GAAyB,IAArBpC,EAAwB,CACpBM,GAAiBA,IACrB,MAAMqC,EAAUC,KAEhB,MAAO,IAAMD,GACjB,IACD,CAAChB,IAEJkB,EAAoBlD,GAAK,KAAA,CACrBmD,cAAe,KACXlB,EAAoB,IAAIC,MACxBH,EAAa1B,EAAiB,MAItCoC,GAAU,KACNjB,EAAYkB,QAAUhC,CAAQ,GAC/B,CAACA,IAEJ+B,GAAU,KACFvC,EAAMkD,SAAW5C,GACjBkB,EAAaxB,EACjB,GACD,CAACA,IAKJ,MAAMmD,EAAwBC,IAC1B,GAAIA,GAAiBC,EAAkBD,EAAe9C,GAAa,CAC/D,MAAMgD,EAAmBF,EAAcG,MAAM,IAM7C,OALA/B,EAAa8B,GACThC,EAAYkB,SACZlB,EAAYkB,QAAQc,IAGjB,CACX,CAEA,OAAO,CAAK,EAGVE,EACDC,GAAmBC,UAChB,MAAMC,EAAaD,EAAME,OAAO5D,MAG1B6D,EAAetC,EAAUuC,OAAOC,GAAgB,KAARA,IACxCC,EAAcC,EAChBN,EACArD,EACAC,GAEJ,GAAIsD,GAAgBV,EAAqBa,GACrC,OAIJ,MAAMhE,EAAQ2D,EAAWO,QAAQ,UAAW,IAC5C,GAAIb,EAAkBrD,GAAQ,CAC1B,MAAMmE,EAAe,IAAI5C,GAEzB4C,EAAaV,GAASzD,EAAMoE,UAAUpE,EAAMkD,OAAS,GACzB,QAA5BrD,EAAAuB,EAAUoB,QAAQiB,EAAQ,UAAE,IAAA5D,GAAAA,EAAE4C,QAE9BjB,EAAa2C,GAET3D,GACAA,EAAS2D,EAEjB,GAGFE,GACDZ,GAAmBC,cAChB,MAAMY,IAAEA,EAAGC,KAAEA,GAASb,EAEtB,GAAY,cAARY,GAAgC,cAATC,EAAsB,CAC7C,MAAMJ,EAAe,IAAI5C,GACG,KAAxB4C,EAAaV,GACbU,EAAaV,GAAS,GACL,IAAVA,IACPU,EAAaV,EAAQ,GAAK,GACE,QAA5B5D,EAAAuB,EAAUoB,QAAQiB,EAAQ,UAAE,IAAA5D,GAAAA,EAAE4C,SAGlCjB,EAAa2C,GAET3D,GACAA,EAAS2D,EAEjB,KAA0B,eAAfT,EAAMa,KACe,QAA5BxD,EAAAK,EAAUoB,QAAQiB,EAAQ,UAAE,IAAA1C,GAAAA,EAAE0B,QACR,cAAfiB,EAAMa,OACe,QAA5BC,EAAApD,EAAUoB,QAAQiB,EAAQ,UAAE,IAAAe,GAAAA,EAAE/B,QAClC,EAGFG,GAAec,IACjB,IAAKA,EAAMe,cAAe,OAE1B,MAAMC,EAAchB,EAAMe,cAAcE,QAAQ,QAC1CX,EAAcC,EAChBS,EACApE,EACAC,GAEC4C,EAAqBa,IACtBN,EAAMkB,gBACV,EAmBEC,GAAmB,KACrB,MAAMC,EAAc9C,KAAK+C,MACnBC,EAA4C,IAAnB7E,EAE/B,OACI2E,EAAchD,EAAiBmD,UAAYD,CAAsB,EAInEjC,GAAiB,KACnB,MAAMmC,EAAWC,aAAY,KACzB,MAAML,EAAc9C,KAAK+C,MACnBC,EAA4C,IAAnB7E,EAEzBiF,EAAQC,KAAKC,MACdxD,EAAiBmD,UACdD,EACAF,GACA,KAERjD,EAAauD,GACTA,GAAS,GACL1E,GAAeA,IACnB6E,cAAcL,IACPtE,GACPA,EAAkBwE,EACtB,GACD,KAEH,MAAO,KACHG,cAAcL,EAAS,CAC1B,EAGCM,GAAa,CAAC/B,EAAegC,EAAclF,IACtCA,EACD,GAAGA,KAAUkF,KAAQhC,EAAQ,IAC7B,GAAGgC,KAAQhC,EAAQ,IAGvBiC,GAAkBC,GACb,GAAGA,WAAuB,IAATA,EAAa,GAAK,MA0B9C,OACIC,EAACC,EAAO,CAAC9F,GAAIA,EAAE,cAAeE,EAAYC,UAAWA,EAAS4F,SAAA,CAC1DF,EAACG,EAAc,CACXC,KAAK,QAAO,aACA,GAAG1F,0BAAkCwF,SAAA,CAEhDvF,GACGqF,EAACK,GACGC,YAAY,OAAM,cACN,aACZC,OAAO,WAAUL,SAAA,CAEjBM,EAACC,EAAc,CAAAP,SAAA,iBACd,GAAGvF,EAAOP,SAASO,EAAO+F,eAGlC/E,EAAUgF,KAAI,CAACC,EAAM/C,IAEd2C,EAACK,EAAUC,OAAAC,OAAA,CACP5G,GAAIyF,GAAW/B,EAAO,YAAa1D,GAAG,cACzByF,GACT/B,EACA,YACAxD,GACH,aACW,GAAG2G,EAAaC,cACxBpD,EAAQ,WACH,eACKrB,EAAQ,mBACJA,EAAWC,OAAUyE,EAEvChH,IAAMiH,GAAQ3F,EAAUoB,QAAQiB,GAASsD,EACzCC,KAAK,OACLC,UAAU,UACVjH,MAAOwG,EACPU,MAAO9E,EACP5B,SAAUgD,EAAaC,GACvB0D,UAAW9C,GAAcZ,GACzB2D,aAAa,OACTvG,GATC4C,QAcpBpD,GACG+F,EAACiB,EAAgB,CAACtH,GAAIsC,EAAOyD,SAAGzF,IAGpCuF,EAACS,EAAc,CAACL,KAAK,QAAQjG,GAAIuC,EAAOwD,SAAA,CACnCJ,GAAe9D,GAAU,gBAE9BwE,EAACC,EAAc,CAAA,YAAW,SAAQP,SAC7BlE,EAAY,EAAI,GAAK,yBAExBjB,GACEyF,EAACkB,EAASZ,OAAAC,OAAA,CACNzF,UAAWA,EACX8F,KAAK,UACD7F,EAAa,CACjBF,QA9IKyC,IACjBlC,EAAa,IAAIE,MAAMpB,GAAYqB,KAAK,KAEnCkD,OACD9C,EAAoB,IAAIC,MACxBH,EAAa1B,IAGbc,GACAA,EAAQyC,EACZ,EAqIY1C,SAAUA,GAAY6D,MAhF3B1D,EAAc2E,SACf,CAAEA,SAAU3E,EAAc2E,UAC1B,CACIA,SACIlE,EAAY,EACN,iBAAiB8D,GAAe9D,KAChC,aAEV,aACIA,EAAY,EACN,iBAAiB8D,GAAevF,KAChC,aAEV,mBAAoBmC,OAuEpB"}
+{"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":"o3BAoBA,MAwUaA,EAAWC,GAxUN,CACdC,EAiBAC,KAjBA,IAAAC,GACIA,EAAEC,MACFA,EAAQ,GACR,cAAeC,EAAUC,UACzBA,EAASC,iBACTA,EAAgBC,kBAChBA,EAAiBC,aACjBA,EAAYC,WACZA,EAAUC,OACVA,EAAMC,SACNA,EAAQC,gBACRA,EAAeC,cACfA,EAAaC,QACbA,EAAOC,kBACPA,GAAiBf,EACdgB,EAAUC,EAAAjB,EAfjB,iMAsBA,MAAMkB,EAKFX,QAAAA,EAAqB,CAAA,GALnBY,SACFA,EAAQC,QACRA,EAAOC,UACPA,EAAY,aAAWH,EACpBI,EAAaL,EAAAC,EAJd,CAAA,WAAA,UAAA,cAOAK,EAAYC,EAAoC,IAChDC,EAAcD,EAAOb,IAEpBe,EAAWC,GAAgBC,EAC9B,IAAIC,MAAMpB,GAAYqB,KAAK,MAExBC,EAAWC,GAAgBJ,EAAiBtB,IAC5C2B,EAAkBC,GAAuBN,EAAe,IAAIO,MAC7DC,EAAaC,IAEbC,IAAa9B,EACb+B,GAAU,GAAGH,UACbI,GAAU,GAAGJ,UAKnBK,GAAU,WAGN,OAFqB,QAArBzC,EAAAuB,aAAS,EAATA,EAAWmB,QAAQ,UAAE,IAAA1C,GAAAA,EAAE2C,QACvBC,SAASC,iBAAiB,QAASC,IAC5B,IAAMF,SAASG,oBAAoB,QAASD,GAAY,GAChE,IAEHL,GAAU,KACN,GAAyB,IAArBnC,EAAwB,CACpBM,GAAiBA,IACrB,MAAMoC,EAAUC,KAEhB,MAAO,IAAMD,GACjB,IACD,CAACf,IAEJiB,EAAoBjD,GAAK,KAAA,CACrBkD,cAAe,KACXjB,EAAoB,IAAIC,MACxBH,EAAa1B,EAAiB,MAItCmC,GAAU,KACNhB,EAAYiB,QAAU/B,CAAQ,GAC/B,CAACA,IAEJ8B,GAAU,KACFtC,EAAMiD,SAAW3C,GACjBkB,EAAaxB,EACjB,GACD,CAACA,IAKJ,MAAMkD,GAAwBC,IAC1B,GAAIA,GAAiBC,EAAkBD,EAAe7C,GAAa,CAC/D,MAAM+C,EAAmBF,EAAcG,MAAM,IAM7C,OALA9B,EAAa6B,GACT/B,EAAYiB,SACZjB,EAAYiB,QAAQc,IAGjB,CACX,CAEA,OAAO,CAAK,EAGVE,GACDC,GAAmBC,UAChB,MAAMC,EAAaD,EAAME,OAAO3D,MAG1B4D,EAAerC,EAAUsC,OAAOC,GAAgB,KAARA,IACxCC,EAAcC,EAChBN,EACApD,EACAC,GAEJ,GAAIqD,GAAgBV,GAAqBa,GACrC,OAIJ,MAAM/D,EAAQ0D,EAAWO,QAAQ,UAAW,IAC5C,GAAIb,EAAkBpD,GAAQ,CAC1B,MAAMkE,EAAe,IAAI3C,GAEzB2C,EAAaV,GAASxD,EAAMmE,UAAUnE,EAAMiD,OAAS,GACzB,QAA5BpD,EAAAuB,EAAUmB,QAAQiB,EAAQ,UAAE,IAAA3D,GAAAA,EAAE2C,QAE9BhB,EAAa0C,GAET1D,GACAA,EAAS0D,EAEjB,GAGFE,GACDZ,GAAmBC,cAChB,MAAMY,IAAEA,EAAGC,KAAEA,GAASb,EAEtB,GAAY,cAARY,GAAgC,cAATC,EAAsB,CAC7C,MAAMJ,EAAe,IAAI3C,GACG,KAAxB2C,EAAaV,GACbU,EAAaV,GAAS,GACL,IAAVA,IACPU,EAAaV,EAAQ,GAAK,GACE,QAA5B3D,EAAAuB,EAAUmB,QAAQiB,EAAQ,UAAE,IAAA3D,GAAAA,EAAE2C,SAGlChB,EAAa0C,GAET1D,GACAA,EAAS0D,EAEjB,KAA0B,eAAfT,EAAMa,KACe,QAA5BvD,EAAAK,EAAUmB,QAAQiB,EAAQ,UAAE,IAAAzC,GAAAA,EAAEyB,QACR,cAAfiB,EAAMa,OACe,QAA5BC,EAAAnD,EAAUmB,QAAQiB,EAAQ,UAAE,IAAAe,GAAAA,EAAE/B,QAClC,EAGFG,GAAec,IACjB,IAAKA,EAAMe,cAAe,OAE1B,MAAMC,EAAchB,EAAMe,cAAcE,QAAQ,QAC1CX,EAAcC,EAChBS,EACAnE,EACAC,GAEC2C,GAAqBa,IACtBN,EAAMkB,gBACV,EAmBEC,GAAmB,KACrB,MAAMC,EAAc7C,KAAK8C,MACnBC,EAA4C,IAAnB5E,EAE/B,OACI0E,EAAc/C,EAAiBkD,UAAYD,CAAsB,EAInEjC,GAAiB,KACnB,MAAMmC,EAAWC,aAAY,KACzB,MAAML,EAAc7C,KAAK8C,MACnBC,EAA4C,IAAnB5E,EAEzBgF,EAAQC,KAAKC,MACdvD,EAAiBkD,UACdD,EACAF,GACA,KAERhD,EAAasD,GACTA,GAAS,GACLzE,GAAeA,IACnB4E,cAAcL,IACPrE,GACPA,EAAkBuE,EACtB,GACD,KAEH,MAAO,KACHG,cAAcL,EAAS,CAC1B,EAGCM,GAAa,CAAC/B,EAAegC,EAAcjF,IACtCA,EACD,GAAGA,KAAUiF,KAAQhC,EAAQ,IAC7B,GAAGgC,KAAQhC,EAAQ,IAGvBiC,GAAkBC,GACb,GAAGA,WAAuB,IAATA,EAAa,GAAK,MA0B9C,OACIC,EAAA,MAAA,CACI5F,GAAIA,gBACSE,EACbC,UAAW0F,EAAKC,EAAgB3F,GAAU4F,SAAA,CAE1CH,EAAA,MAAA,CACIzF,UAAW6F,EACXC,KAAK,QAAO,aACA,GAAG1F,0BAAkCwF,SAAA,CAEhDvF,GACGoF,EAACM,EAAWC,OAAM,CACdC,GAAG,OACHjG,UAAWkG,EAAa,cACZ,aACZC,OAAO,qBAEPC,EAACC,6BACA,GAAGhG,EAAOP,SAASO,EAAOiG,eAGlCjF,EAAUkF,KAAI,CAACC,EAAMlD,IAEd8C,EAACK,EAAKC,OAAAC,OAAA,CACF3G,UAAW4G,EACX/G,GAAIwF,GAAW/B,EAAO,YAAazD,GAAG,cACzBwF,GACT/B,EACA,YACAvD,GACH,aACW,GAAG8G,EAAaC,cACxBxD,EAAQ,0BAEErB,EAAQ,mBACJA,EAAWC,QAAU6E,EAEvCnH,IAAMoH,GAAQ9F,EAAUmB,QAAQiB,GAAS0D,EACzCC,KAAK,OACLC,UAAU,UACVpH,MAAO0G,EACPW,MAAOlF,EACP3B,SAAU+C,GAAaC,GACvB8D,UAAWlD,GAAcZ,GACzB+D,aAAa,OACT1G,GATC2C,QAcpBnD,GACGiG,EAACkB,EAAgB,CAACzH,GAAIqC,GAAO,cAAc,oBAAmB0D,SACzDzF,IAITsF,EAACY,EAAc,CAACP,KAAK,QAAQjG,GAAIsC,aAC5BoD,GAAe7D,GAAU,gBAE9B0E,EAACC,EAAc,CAAA,YAAW,SAAQT,SAC7BlE,EAAY,EAAI,GAAK,yBAExBjB,GACE2F,EAACmB,EAAMb,OAAAC,OAAA,CACH3G,UAAWwH,EACXxG,UAAWA,EACXiG,KAAK,SACLQ,SAAS,SACLxG,GACJF,QAzJKwC,IACjBjC,EAAa,IAAIE,MAAMpB,GAAYqB,KAAK,KAEnCiD,OACD7C,EAAoB,IAAIC,MACxBH,EAAa1B,IAGbc,GACAA,EAAQwC,EACZ,EAgJYzC,SAAUA,GAAY4D,MA3F3BzD,EAAc2E,SACf,CAAEA,SAAU3E,EAAc2E,UAC1B,CACIA,SACIlE,EAAY,EACN,iBAAiB6D,GAAe7D,KAChC,aAEV,aACIA,EAAY,EACN,iBAAiB6D,GAAetF,KAChC,aAEV,mBAAoBkC,QAkFxB"}

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

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