npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1629) hide show

package/navbar/navbar-items.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n display: flex;\n list-style: none;\n position: relative;\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const wrapperAlignLeft = css`\n margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n display: flex;\n margin: 0 1rem;\n &:first-child {\n margin-left: 0;\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nexport const linkItemHiddenBranding = css`\n // negative margin to preserve touch target size for link\n &:first-child {\n margin-left: -0.5rem;\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &:first-child {\n margin-left: 0rem;\n }\n }\n`;\n\nexport const link = css`\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n height: 100%;\n\n &:active,\n &:hover,\n &:focus {\n color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n align-items: flex-start;\n }\n`;\n\nexport const linkSelected = css`\n &:active,\n &:hover,\n &:focus {\n color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n }\n`;\n\nexport const linkWeightRegular = css`\n ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const linkLabel = css`\n flex: 1;\n margin-top: 0.25rem;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const linkIndicatorSelected = css`\n &:hover {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n`;\n\nexport const linkIconContainer = css`\n padding-left: 0.5rem;\n margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n padding: 0.5rem;\n transform: rotate(180deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const expandCollapseButtonExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\nexport const chevronIconSelected = css`\n &:hover {\n color: ${Colour[\"icon-selected-hover\"]};\n }\n`;\n"],"names":["wrapper","wrapperAlignLeft","mobileWrapper","linkItem","linkItemHiddenBranding","link","linkSelected","linkWeightRegular","linkWeightSemibold","linkWeightBold","linkButton","linkLabel","linkIndicator","linkIndicatorSelected","linkIconContainer","expandCollapseButton","expandCollapseButtonExpanded","chevronIcon","chevronIconSelected"],"mappings":"~~+DAQO~~,MAAMA,EAAO,WAUPC,EAAgB,WAIhBC,EAAa,UAcbC,EAAQ,WAeRC,EAAsB,UAatBC,EAAI,~~WAsBJC~~,EAAY,UAQZC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAc,WAIdC,EAAU,WAYVC,EAAS,UAWTC,EAAa,UAkBbC,EAAqB,~~UAMrBC~~,EAAiB,WAKjBC,EAAoB,UAOpBC,EAA4B,WAI5BC,EAAW,~~WAUXC~~,EAAmB"}
1	+ {"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, ComponentToken, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const wrapper = css`\n display: flex;\n list-style: none;\n position: relative;\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const wrapperAlignLeft = css`\n margin-right: auto;\n`;\n\nexport const mobileWrapper = css`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const linkItem = css`\n display: flex;\n margin: 0 1rem;\n &:first-child {\n margin-left: 0;\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nexport const linkItemHiddenBranding = css`\n // negative margin to preserve touch target size for link\n &:first-child {\n margin-left: -0.5rem;\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &:first-child {\n margin-left: 0rem;\n }\n }\n`;\n\nexport const link = css`\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ComponentToken.Navbar[\"link-colour-text\"]};\n height: 100%;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${ComponentToken.Navbar[\"link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n align-items: flex-start;\n }\n`;\n\nexport const linkSelected = css`\n &:active,\n &:hover,\n &:focus {\n color: ${ComponentToken.Navbar[\"link-colour-text-selected-hover\"]};\n }\n`;\n\nexport const linkWeightRegular = css`\n ${Font[\"body-md-regular\"]}\n`;\n\nexport const linkWeightSemibold = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const linkWeightBold = css`\n ${Font[\"body-md-bold\"]}\n`;\n\nexport const linkButton = css`\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const linkLabel = css`\n flex: 1;\n margin-top: 0.25rem;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const linkIndicator = css`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const linkIndicatorSelected = css`\n .${link}:active &,\n .${link}:hover &,\n .${link}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n`;\n\nexport const linkIconContainer = css`\n padding-left: 0.5rem;\n margin-right: -0.5rem;\n`;\n\nexport const expandCollapseButton = css`\n padding: 0.5rem;\n transform: rotate(180deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const expandCollapseButtonExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n .${link}:active &,\n .${link}:hover &,\n .${link}:focus & {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\nexport const chevronIconSelected = css`\n .${link}:active &,\n .${link}:hover &,\n .${link}:focus & {\n color: ${Colour[\"icon-selected-hover\"]};\n }\n`;\n"],"names":["wrapper","wrapperAlignLeft","mobileWrapper","linkItem","linkItemHiddenBranding","link","linkSelected","linkWeightRegular","linkWeightSemibold","linkWeightBold","linkButton","linkLabel","linkIndicator","linkIndicatorSelected","linkIconContainer","expandCollapseButton","expandCollapseButtonExpanded","chevronIcon","chevronIconSelected"],"mappings":"gEAQO,MAAMA,EAAO,WAUPC,EAAgB,WAIhBC,EAAa,UAcbC,EAAQ,WAeRC,EAAsB,UAatBC,EAAI,WAuBJC,EAAY,UAQZC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAc,WAIdC,EAAU,WAYVC,EAAS,UAWTC,EAAa,UAkBbC,EAAqB,UAQrBC,EAAiB,WAKjBC,EAAoB,UAOpBC,EAA4B,WAI5BC,EAAW,WAYXC,EAAmB"}

package/navbar/{navbar-items.styles_i9cunu.css → navbar-items.styles_1i3ltot.css} RENAMED Viewed

@@ -1,19 +1,19 @@
-.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
+@layer fds{.w1ndf2sj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;position:relative;}:where(body.fds-breakpoint-lg-max) .w1ndf2sj{display:none;}
 .w177nfye{margin-right:auto;}
 .mw9gug8{display:none;list-style:none;}:where(body.fds-breakpoint-lg-max) .mw9gug8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;}
 .l18t6f3m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0 1rem;}.l18t6f3m:first-child{margin-left:0;}:where(body.fds-breakpoint-lg-max) .l18t6f3m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0.125rem 0;width:100%;margin-left:0rem;}
 .lsn8o0d:first-child{margin-left:-0.5rem;}:where(body.fds-breakpoint-lg-max) .lsn8o0d:first-child{margin-left:0rem;}
-.l1o3p4yu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:var(--fds-navbar-link-colour-text);height:100%;}.l1o3p4yu:active,.l1o3p4yu:hover,.l1o3p4yu:focus{color:var(--fds-navbar-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .l1o3p4yu{width:100%;padding:0.5rem 1rem;text-align:left;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.l1o3p4yu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;color:var(--fds-navbar-link-colour-text);height:100%;}.l1o3p4yu:active,.l1o3p4yu:hover,.l1o3p4yu:focus,.l1o3p4yu:focus-within{color:var(--fds-navbar-link-colour-text-hover);}:where(body.fds-breakpoint-lg-max) .l1o3p4yu{width:100%;padding:0.5rem 1rem;text-align:left;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
 .lkwvsmx:active,.lkwvsmx:hover,.lkwvsmx:focus{color:var(--fds-navbar-link-colour-text-selected-hover);}
-.l1kp5n19{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-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
-.lqgrg2a{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);}
-.l1p7dxu8{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-bold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.l1kp5n19{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.lqgrg2a{font-family:var(--fds-font-family-body);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);}
+.l1p7dxu8{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .l1xfqf3s{background:none;border:0;padding:0;cursor:pointer;text-align:left;margin:0;box-shadow:none;font:inherit;color:inherit;}
 .lsc0hr8{-webkit-flex:1;-ms-flex:1;flex:1;margin-top:0.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap;}
 .lnocj2s{position:absolute;bottom:0;left:0;right:0;height:0.25rem;background-color:var(--fds-colour-border-selected);}:where(body.fds-breakpoint-lg-max) .lnocj2s{left:0;right:unset;top:0;bottom:0;height:100%;width:0.25rem;}
-.l5qfat1:hover{background-color:var(--fds-colour-border-selected-hover);}
+.l1o3p4yu:active .l5qfat1,.l1o3p4yu:hover .l5qfat1,.l1o3p4yu:focus .l5qfat1{background-color:var(--fds-colour-border-selected-hover);}
 .l1p9u80z{padding-left:0.5rem;margin-right:-0.5rem;}
 .ej7h5do{padding:0.5rem;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform 300ms ease-in-out;transition:transform 300ms ease-in-out;margin:auto 0.25rem auto 0;}
 .e160mxwv{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
-.c1s8ur0k{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon);}.c1s8ur0k:hover{color:var(--fds-colour-icon-hover);}
-.c178e7hk:hover{color:var(--fds-colour-icon-selected-hover);}
+.c1s8ur0k{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon);}.l1o3p4yu:active .c1s8ur0k,.l1o3p4yu:hover .c1s8ur0k,.l1o3p4yu:focus .c1s8ur0k{color:var(--fds-colour-icon-hover);}
+.l1o3p4yu:active .c178e7hk,.l1o3p4yu:hover .c178e7hk,.l1o3p4yu:focus .c178e7hk{color:var(--fds-colour-icon-selected-hover);}}

package/navbar/navbar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t,Fragment as r}from"react/jsx-runtime";import{MenuIcon as o}from"@lifesg/react-icons/menu";import a from"clsx";import{forwardRef as n,useState as s,useRef as l,useContext as d,useImperativeHandle as m,useEffect as c}from"react";import{Layout as p}from"../layout/index.js";import{Masthead as u}from"../masthead/masthead.js";import{Overlay as h}from"../overlay/overlay.js";import{ClickableIcon as v}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as k}from"../theme/utils/css-variable.js";import{ThemeContext as b}from"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as f}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useDesignToken as j}from"../theme/utils/use-design-token.js";import"../theme/utils/use-media-query.js";import{Brand as y}from"./brand.js";import{Drawer as C}from"./drawer.js";import{wrapper as g,wrapperFixed as w,wrapperRelative as N,wrapperDark as B,wrapperLight as x,navElementsContainer as I,navElementsContainerWithBranding as L,nav as _,navCompressed as E,navDark as D,navSeparator as O,navSeparatorCompressed as A,navSeparatorFull as M,navSeparatorResponsive as q,navBrandContainer as z,navBrandContainerCompressed as H,navBrandContainerFull as R,navBrandContainerResponsive as T,mobileMenuButton as W,mobileMenuIcon as F}from"./navbar.styles.js";import{NavbarActionButtons as G}from"./navbar-action-buttons.js";import{NavbarHelper as J}from"./navbar-helper.js";import{NavbarItems as K}from"./navbar-items.js";import{getDefaultResourceLogo as P}from"./navbar-logo-data.js";const Q=n(((n,Q)=>{var{items:S,className:U,id:V,selectedId:X,compress:Y=!1,fixed:Z=!0,resources:$,hideNavElements:ee=!1,hideNavBranding:ie=!1,hideLinkIndicator:te=!1,drawerDismissalExclusions:re=[],actionButtons:oe,onItemClick:ae,onActionButtonClick:ne,onBrandClick:se,masthead:le=!0,layout:de="default",headerLabel:me="Main navigation menu",drawerLabel:ce}=n,pe=e(n,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[ue,he]=s(!1),[ve,ke]=s(!1),be=l(null),fe="stretch"===de,je=l(null),ye=d(b),Ce=P(null==ye?void 0:ye.theme),ge=j(f["lg-max"]),we=k(ge||"1200px"),Ne=(null==$?void 0:$.primary)||Ce.primary,Be=null==$?void 0:$.secondary;m(Q,(()=>Object.assign(je.current,{dismissDrawer:()=>{xe()}})),[ue]),c((()=>(Le(),window.addEventListener("resize",Le),()=>{window.removeEventListener("resize",Le)})),[]);const xe=()=>{he(!1),setTimeout((()=>{ke(!1)}),550)},Ie=e=>ue&&-1===re.indexOf(e),Le=()=>{window.innerWidth<=we&&ue&&xe()},_e=(e,i)=>{se&&se(i),Ie("brand-click")&&xe()},Ee=(e,i)=>{J.isNavItemCommon(i)&&i.onClick?i.onClick(e):ae&&(e.preventDefault(),ae(i)),J.isNavItemLink(i)&&!i.subMenu&&Ie("item-click")&&xe()},De=(e,i)=>{var t;"button"!==i.type&&"download"!==i.type||!(null===(t=i.args)||void 0===t?void 0:t.onClick)?ne&&(e.preventDefault(),ne(i)):i.args.onClick(e),Ie("item-click")&&xe()},Oe=()=>{he(!0),ke(!0)},Ae=()=>{Ie("close-button-click")&&xe()},Me=()=>{const e=S.mobile||S.desktop;return e&&e.length>0||oe&&(e=>{const i=e.mobile||e.desktop;return!!i&&i.length&&i.some((e=>!e.uncollapsible))})(oe)?t(v,{ref:be,className:W,"aria-label":ue?"Close nav menu":"Open nav menu","aria-expanded":ue,"data-testid":"button__mobile-menu",onClick:Oe,focusHighlight:!1,children:t(o,{className:F})}):null};return i("div",{ref:je,className:a(g,Z?w:N,"dark"===(null==ye?void 0:ye.mode)?B:x,U),id:V||"navbar-wrapper","data-testid":pe["data-testid"]||"navbar-wrapper",children:[le&&t(u,{stretch:fe}),i(p.Content,{stretch:fe,children:[i("nav",{className:a(_,Y&&E,"dark"===(null==ye?void 0:ye.mode)&&D),"aria-label":me,children:[!ie&&i("div",{className:a(z,Y?H:R,T),"data-id":"brand-container",children:[Ne&&t(y,{resources:Ne,onClick:_e,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),Be&&i(r,{children:[t("div",{className:a(O,Y?A:M,q)}),t(y,{resources:Be,onClick:_e,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!ee&&i("div",{className:a(I,!ie&&L),children:[t(K,{items:S.desktop,onItemClick:Ee,selectedId:X,hideNavBranding:ie,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:De}),Me()]})]}),!ee&&t(h,{show:ve,enableOverlayClick:!0,onOverlayClick:Ae,children:i(C,{show:ue,resources:{primary:Ne,secondary:Be},onClose:Ae,onBrandClick:_e,actionButtons:oe,hideNavBranding:ie,mobileMenuRef:be,drawerLabel:ce,children:[t(K,{items:S.mobile||S.desktop,onItemClick:Ee,selectedId:X,mobile:!0,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:De,mobile:!0})]})})]})]})}));export{Q as Navbar};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t,Fragment as r}from"react/jsx-runtime";import{MenuIcon as o}from"@lifesg/react-icons/menu";import a from"clsx";import{forwardRef as n,useState as s,useRef as l,useContext as d,useImperativeHandle as m,useEffect as c}from"react";import{Layout as p}from"../layout/index.js";import{Masthead as u}from"../masthead/masthead.js";import{Overlay as h}from"../overlay/overlay.js";import{ClickableIcon as v}from"../shared/clickable-icon/clickable-icon.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as k}from"../theme/utils/css-variable.js";import{ThemeContext as b}from"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as f}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useResolvedBreakpointToken as j}from"../theme/utils/use-media-query.js";import{Brand as y}from"./brand.js";import{Drawer as C}from"./drawer.js";import{wrapper as w,wrapperFixed as g,wrapperRelative as N,wrapperDark as B,wrapperLight as x,navElementsContainer as I,navElementsContainerWithBranding as L,nav as _,navCompressed as E,navDark as D,navSeparator as O,navSeparatorCompressed as A,navSeparatorFull as M,navSeparatorResponsive as q,navBrandContainer as z,navBrandContainerCompressed as H,navBrandContainerFull as R,navBrandContainerResponsive as T,mobileMenuButton as W,mobileMenuIcon as F}from"./navbar.styles.js";import{NavbarActionButtons as G}from"./navbar-action-buttons.js";import{NavbarHelper as J}from"./navbar-helper.js";import{NavbarItems as K}from"./navbar-items.js";import{getDefaultResourceLogo as P}from"./navbar-logo-data.js";const Q=n(((n,Q)=>{var{items:S,className:U,id:V,selectedId:X,compress:Y=!1,fixed:Z=!0,resources:$,hideNavElements:ee=!1,hideNavBranding:ie=!1,hideLinkIndicator:te=!1,drawerDismissalExclusions:re=[],actionButtons:oe,onItemClick:ae,onActionButtonClick:ne,onBrandClick:se,masthead:le=!0,layout:de="default",headerLabel:me="Main navigation menu",drawerLabel:ce}=n,pe=e(n,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[ue,he]=s(!1),[ve,ke]=s(!1),be=l(null),fe="stretch"===de,je=l(null),ye=d(b),Ce=P(null==ye?void 0:ye.theme),we=k(j(f["lg-max"])),ge=(null==$?void 0:$.primary)||Ce.primary,Ne=null==$?void 0:$.secondary;m(Q,(()=>Object.assign(je.current,{dismissDrawer:()=>{Be()}})),[ue]),c((()=>(Ie(),window.addEventListener("resize",Ie),()=>{window.removeEventListener("resize",Ie)})),[]);const Be=()=>{he(!1),setTimeout((()=>{ke(!1)}),550)},xe=e=>ue&&-1===re.indexOf(e),Ie=()=>{window.innerWidth<=we&&ue&&Be()},Le=(e,i)=>{se&&se(i),xe("brand-click")&&Be()},_e=(e,i)=>{J.isNavItemCommon(i)&&i.onClick?i.onClick(e):ae&&(e.preventDefault(),ae(i)),J.isNavItemLink(i)&&!i.subMenu&&xe("item-click")&&Be()},Ee=(e,i)=>{var t;"button"!==i.type&&"download"!==i.type||!(null===(t=i.args)||void 0===t?void 0:t.onClick)?ne&&(e.preventDefault(),ne(i)):i.args.onClick(e),xe("item-click")&&Be()},De=()=>{he(!0),ke(!0)},Oe=()=>{xe("close-button-click")&&Be()},Ae=()=>{const e=S.mobile||S.desktop;return e&&e.length>0||oe&&(e=>{const i=e.mobile||e.desktop;return!!i&&i.length&&i.some((e=>!e.uncollapsible))})(oe)?t(v,{ref:be,className:W,"aria-label":ue?"Close nav menu":"Open nav menu","aria-expanded":ue,"data-testid":"button__mobile-menu",onClick:De,focusHighlight:!0,children:t(o,{className:F})}):null};return i("div",{ref:je,className:a(w,Z?g:N,"dark"===(null==ye?void 0:ye.mode)?B:x,U),id:V||"navbar-wrapper","data-testid":pe["data-testid"]||"navbar-wrapper",children:[le&&t(u,{stretch:fe}),i(p.Content,{stretch:fe,children:[i("nav",{className:a(_,Y&&E,"dark"===(null==ye?void 0:ye.mode)&&D),"aria-label":me,children:[!ie&&i("div",{className:a(z,Y?H:R,T),"data-id":"brand-container",children:[ge&&t(y,{resources:ge,onClick:Le,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),Ne&&i(r,{children:[t("div",{className:a(O,Y?A:M,q)}),t(y,{resources:Ne,onClick:Le,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!ee&&i("div",{className:a(I,!ie&&L),children:[t(K,{items:S.desktop,onItemClick:_e,selectedId:X,hideNavBranding:ie,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:Ee}),Ae()]})]}),!ee&&t(h,{show:ve,enableOverlayClick:!0,onOverlayClick:Oe,children:i(C,{show:ue,resources:{primary:ge,secondary:Ne},onClose:Oe,onBrandClick:Le,actionButtons:oe,hideNavBranding:ie,mobileMenuRef:be,drawerLabel:ce,children:[t(K,{items:S.mobile||S.desktop,onItemClick:_e,selectedId:X,mobile:!0,hideLinkIndicator:te}),t(G,{actionButtons:oe,onActionButtonClick:Ee,mobile:!0})]})})]})]})}));export{Q as Navbar};
 //# sourceMappingURL=navbar.js.map

package/navbar/navbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navbar.js","sources":["../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Breakpoint, parsePxOrRemValue, useDesignToken } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n BrandType,\n DrawerDismissalMethod,\n NavbarActionButtonsProps,\n NavbarButtonProps,\n NavbarDrawerApi,\n NavbarDrawerHandle,\n NavbarProps,\n NavItemCommonProps,\n NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n {\n items,\n className,\n id,\n selectedId,\n compress = false,\n fixed = true,\n resources,\n hideNavElements = false,\n hideNavBranding = false,\n hideLinkIndicator = false,\n drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n actionButtons,\n onItemClick,\n onActionButtonClick,\n onBrandClick,\n masthead = true,\n layout = \"default\",\n headerLabel = \"Main navigation menu\",\n drawerLabel,\n ...otherProps\n }: NavbarProps<T>,\n ref: React.Ref<NavbarDrawerHandle>\n) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [showDrawer, setShowDrawer] = useState<boolean>(false);\n const [showOverlay, setShowOverlay] = useState<boolean>(false);\n const mobileMenuRef = useRef<HTMLButtonElement>(null);\n const isStretch = layout === \"stretch\";\n const elementRef = useRef<HTMLDivElement>(null);\n const theme = useContext(ThemeContext);\n const defaultResource = getDefaultResourceLogo(theme?.theme);\n const tabletWidthToken = useDesignToken(Breakpoint[\"lg-max\"]);\n const tabletWidth = parsePxOrRemValue(tabletWidthToken \|\| \"1200px\");\n\n const primary = resources?.primary \|\| defaultResource.primary;\n const secondary = resources?.secondary;\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, NavbarDrawerApi>(\n elementRef.current!,\n {\n dismissDrawer: () => {\n dismissDrawer();\n },\n }\n ),\n [showDrawer]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const dismissDrawer = () => {\n setShowDrawer(false);\n setTimeout(() => {\n setShowOverlay(false);\n }, 550); // For drawer animation to complete + buffer\n };\n\n const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n return (\n showDrawer &&\n blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n );\n };\n\n const hasCollapsibleActionButtons = (\n actionButtons: NavbarActionButtonsProps\n ) => {\n const drawerActionButtons =\n actionButtons.mobile \|\| actionButtons.desktop;\n if (drawerActionButtons) {\n return (\n drawerActionButtons.length &&\n drawerActionButtons.some(\n (actionButton) => !actionButton.uncollapsible\n )\n );\n }\n\n return false;\n };\n\n // =============================================================================\n // EVENT HANDLER\n // =============================================================================\n const handleResize = () => {\n if (window.innerWidth <= tabletWidth && showDrawer) {\n dismissDrawer();\n }\n };\n\n const handleBrandClick = (\n _event: React.MouseEvent<HTMLAnchorElement>,\n type: BrandType\n ) => {\n if (onBrandClick) {\n onBrandClick(type);\n }\n\n if (shouldDismissDrawer(\"brand-click\")) {\n dismissDrawer();\n }\n };\n\n const handleNavItemClick = <K extends T>(\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<K> \| NavItemCommonProps<K>\n ) => {\n if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item);\n }\n\n if (\n NavbarHelper.isNavItemLink(item) &&\n !item.subMenu &&\n shouldDismissDrawer(\"item-click\")\n ) {\n dismissDrawer();\n }\n };\n\n const handleActionButtonClick = (\n event: React.MouseEvent<HTMLButtonElement> \| React.MouseEvent<Element>,\n actionButton: NavbarButtonProps\n ) => {\n if (\n (actionButton.type === \"button\" \|\|\n actionButton.type === \"download\") &&\n actionButton.args?.onClick\n ) {\n actionButton.args.onClick(\n event as React.MouseEvent<HTMLButtonElement>\n );\n } else if (onActionButtonClick) {\n event.preventDefault();\n onActionButtonClick(actionButton);\n }\n\n if (shouldDismissDrawer(\"item-click\")) {\n dismissDrawer();\n }\n };\n\n const handleMobileMenuButtonClick = () => {\n setShowDrawer(true);\n setShowOverlay(true);\n };\n\n const handleDrawerClose = () => {\n if (shouldDismissDrawer(\"close-button-click\")) {\n dismissDrawer();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDrawer = () => (\n <Overlay\n show={showOverlay}\n enableOverlayClick\n onOverlayClick={handleDrawerClose}\n >\n <Drawer\n show={showDrawer}\n resources={{ primary, secondary }}\n onClose={handleDrawerClose}\n onBrandClick={handleBrandClick}\n actionButtons={actionButtons}\n hideNavBranding={hideNavBranding}\n mobileMenuRef={mobileMenuRef}\n drawerLabel={drawerLabel}\n >\n <NavbarItems\n items={items.mobile \|\| items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n mobile\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n mobile\n />\n </Drawer>\n </Overlay>\n );\n\n const renderBrand = () => (\n <div\n className={clsx(\n styles.navBrandContainer,\n compress\n ? styles.navBrandContainerCompressed\n : styles.navBrandContainerFull,\n styles.navBrandContainerResponsive\n )}\n data-id=\"brand-container\"\n >\n {primary && (\n <Brand\n resources={primary}\n onClick={handleBrandClick}\n data-id=\"brand-primary\"\n data-testid=\"main__brand\"\n type=\"primary\"\n />\n )}\n {secondary && (\n <>\n <div\n className={clsx(\n styles.navSeparator,\n compress\n ? styles.navSeparatorCompressed\n : styles.navSeparatorFull,\n styles.navSeparatorResponsive\n )}\n />\n <Brand\n resources={secondary}\n onClick={handleBrandClick}\n data-id=\"brand-secondary\"\n data-testid=\"main__brand-secondary\"\n type=\"secondary\"\n />\n </>\n )}\n </div>\n );\n\n const renderMobileMenuButton = () => {\n const drawerItems = items.mobile \|\| items.desktop;\n if (\n (drawerItems && drawerItems.length > 0) \|\|\n (actionButtons && hasCollapsibleActionButtons(actionButtons))\n ) {\n return (\n <ClickableIcon\n ref={mobileMenuRef}\n className={styles.mobileMenuButton}\n aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n aria-expanded={showDrawer}\n data-testid=\"button__mobile-menu\"\n onClick={handleMobileMenuButtonClick}\n focusHighlight={false}\n >\n <MenuIcon className={styles.mobileMenuIcon} />\n </ClickableIcon>\n );\n }\n\n return null;\n };\n\n const renderNavbar = () => {\n return (\n <Layout.Content stretch={isStretch}>\n <nav\n className={clsx(\n styles.nav,\n compress && styles.navCompressed,\n theme?.mode === \"dark\" && styles.navDark\n )}\n aria-label={headerLabel}\n >\n {!hideNavBranding && renderBrand()}\n {!hideNavElements && (\n <div\n className={clsx(\n styles.navElementsContainer,\n !hideNavBranding &&\n styles.navElementsContainerWithBranding\n )}\n >\n <NavbarItems\n items={items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n hideNavBranding={hideNavBranding}\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n />\n {renderMobileMenuButton()}\n </div>\n )}\n </nav>\n\n {!hideNavElements && renderDrawer()}\n </Layout.Content>\n );\n };\n\n return (\n <div\n ref={elementRef}\n className={clsx(\n styles.wrapper,\n fixed ? styles.wrapperFixed : styles.wrapperRelative,\n theme?.mode === \"dark\"\n ? styles.wrapperDark\n : styles.wrapperLight,\n className\n )}\n id={id \|\| \"navbar-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"navbar-wrapper\"}\n >\n {masthead && <Masthead stretch={isStretch} />}\n {renderNavbar()}\n </div>\n );\n};\n\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidthToken","useDesignToken","Breakpoint","tabletWidth","parsePxOrRemValue","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}
1	+ {"version":3,"file":"navbar.js","sources":["../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n forwardRef,\n useContext,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n Breakpoint,\n parsePxOrRemValue,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n BrandType,\n DrawerDismissalMethod,\n NavbarActionButtonsProps,\n NavbarButtonProps,\n NavbarDrawerApi,\n NavbarDrawerHandle,\n NavbarProps,\n NavItemCommonProps,\n NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n {\n items,\n className,\n id,\n selectedId,\n compress = false,\n fixed = true,\n resources,\n hideNavElements = false,\n hideNavBranding = false,\n hideLinkIndicator = false,\n drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n actionButtons,\n onItemClick,\n onActionButtonClick,\n onBrandClick,\n masthead = true,\n layout = \"default\",\n headerLabel = \"Main navigation menu\",\n drawerLabel,\n ...otherProps\n }: NavbarProps<T>,\n ref: React.Ref<NavbarDrawerHandle>\n) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [showDrawer, setShowDrawer] = useState<boolean>(false);\n const [showOverlay, setShowOverlay] = useState<boolean>(false);\n const mobileMenuRef = useRef<HTMLButtonElement>(null);\n const isStretch = layout === \"stretch\";\n const elementRef = useRef<HTMLDivElement>(null);\n const theme = useContext(ThemeContext);\n const defaultResource = getDefaultResourceLogo(theme?.theme);\n const tabletWidth = parsePxOrRemValue(\n useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n );\n\n const primary = resources?.primary \|\| defaultResource.primary;\n const secondary = resources?.secondary;\n\n useImperativeHandle(\n ref,\n () =>\n Object.assign<HTMLDivElement, NavbarDrawerApi>(\n elementRef.current!,\n {\n dismissDrawer: () => {\n dismissDrawer();\n },\n }\n ),\n [showDrawer]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const dismissDrawer = () => {\n setShowDrawer(false);\n setTimeout(() => {\n setShowOverlay(false);\n }, 550); // For drawer animation to complete + buffer\n };\n\n const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n return (\n showDrawer &&\n blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n );\n };\n\n const hasCollapsibleActionButtons = (\n actionButtons: NavbarActionButtonsProps\n ) => {\n const drawerActionButtons =\n actionButtons.mobile \|\| actionButtons.desktop;\n if (drawerActionButtons) {\n return (\n drawerActionButtons.length &&\n drawerActionButtons.some(\n (actionButton) => !actionButton.uncollapsible\n )\n );\n }\n\n return false;\n };\n\n // =============================================================================\n // EVENT HANDLER\n // =============================================================================\n const handleResize = () => {\n if (window.innerWidth <= tabletWidth && showDrawer) {\n dismissDrawer();\n }\n };\n\n const handleBrandClick = (\n _event: React.MouseEvent<HTMLAnchorElement>,\n type: BrandType\n ) => {\n if (onBrandClick) {\n onBrandClick(type);\n }\n\n if (shouldDismissDrawer(\"brand-click\")) {\n dismissDrawer();\n }\n };\n\n const handleNavItemClick = <K extends T>(\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<K> \| NavItemCommonProps<K>\n ) => {\n if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item);\n }\n\n if (\n NavbarHelper.isNavItemLink(item) &&\n !item.subMenu &&\n shouldDismissDrawer(\"item-click\")\n ) {\n dismissDrawer();\n }\n };\n\n const handleActionButtonClick = (\n event: React.MouseEvent<HTMLButtonElement> \| React.MouseEvent<Element>,\n actionButton: NavbarButtonProps\n ) => {\n if (\n (actionButton.type === \"button\" \|\|\n actionButton.type === \"download\") &&\n actionButton.args?.onClick\n ) {\n actionButton.args.onClick(\n event as React.MouseEvent<HTMLButtonElement>\n );\n } else if (onActionButtonClick) {\n event.preventDefault();\n onActionButtonClick(actionButton);\n }\n\n if (shouldDismissDrawer(\"item-click\")) {\n dismissDrawer();\n }\n };\n\n const handleMobileMenuButtonClick = () => {\n setShowDrawer(true);\n setShowOverlay(true);\n };\n\n const handleDrawerClose = () => {\n if (shouldDismissDrawer(\"close-button-click\")) {\n dismissDrawer();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDrawer = () => (\n <Overlay\n show={showOverlay}\n enableOverlayClick\n onOverlayClick={handleDrawerClose}\n >\n <Drawer\n show={showDrawer}\n resources={{ primary, secondary }}\n onClose={handleDrawerClose}\n onBrandClick={handleBrandClick}\n actionButtons={actionButtons}\n hideNavBranding={hideNavBranding}\n mobileMenuRef={mobileMenuRef}\n drawerLabel={drawerLabel}\n >\n <NavbarItems\n items={items.mobile \|\| items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n mobile\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n mobile\n />\n </Drawer>\n </Overlay>\n );\n\n const renderBrand = () => (\n <div\n className={clsx(\n styles.navBrandContainer,\n compress\n ? styles.navBrandContainerCompressed\n : styles.navBrandContainerFull,\n styles.navBrandContainerResponsive\n )}\n data-id=\"brand-container\"\n >\n {primary && (\n <Brand\n resources={primary}\n onClick={handleBrandClick}\n data-id=\"brand-primary\"\n data-testid=\"main__brand\"\n type=\"primary\"\n />\n )}\n {secondary && (\n <>\n <div\n className={clsx(\n styles.navSeparator,\n compress\n ? styles.navSeparatorCompressed\n : styles.navSeparatorFull,\n styles.navSeparatorResponsive\n )}\n />\n <Brand\n resources={secondary}\n onClick={handleBrandClick}\n data-id=\"brand-secondary\"\n data-testid=\"main__brand-secondary\"\n type=\"secondary\"\n />\n </>\n )}\n </div>\n );\n\n const renderMobileMenuButton = () => {\n const drawerItems = items.mobile \|\| items.desktop;\n if (\n (drawerItems && drawerItems.length > 0) \|\|\n (actionButtons && hasCollapsibleActionButtons(actionButtons))\n ) {\n return (\n <ClickableIcon\n ref={mobileMenuRef}\n className={styles.mobileMenuButton}\n aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n aria-expanded={showDrawer}\n data-testid=\"button__mobile-menu\"\n onClick={handleMobileMenuButtonClick}\n focusHighlight={true}\n >\n <MenuIcon className={styles.mobileMenuIcon} />\n </ClickableIcon>\n );\n }\n\n return null;\n };\n\n const renderNavbar = () => {\n return (\n <Layout.Content stretch={isStretch}>\n <nav\n className={clsx(\n styles.nav,\n compress && styles.navCompressed,\n theme?.mode === \"dark\" && styles.navDark\n )}\n aria-label={headerLabel}\n >\n {!hideNavBranding && renderBrand()}\n {!hideNavElements && (\n <div\n className={clsx(\n styles.navElementsContainer,\n !hideNavBranding &&\n styles.navElementsContainerWithBranding\n )}\n >\n <NavbarItems\n items={items.desktop}\n onItemClick={handleNavItemClick}\n selectedId={selectedId}\n hideNavBranding={hideNavBranding}\n hideLinkIndicator={hideLinkIndicator}\n />\n <NavbarActionButtons\n actionButtons={actionButtons}\n onActionButtonClick={handleActionButtonClick}\n />\n {renderMobileMenuButton()}\n </div>\n )}\n </nav>\n\n {!hideNavElements && renderDrawer()}\n </Layout.Content>\n );\n };\n\n return (\n <div\n ref={elementRef}\n className={clsx(\n styles.wrapper,\n fixed ? styles.wrapperFixed : styles.wrapperRelative,\n theme?.mode === \"dark\"\n ? styles.wrapperDark\n : styles.wrapperLight,\n className\n )}\n id={id \|\| \"navbar-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"navbar-wrapper\"}\n >\n {masthead && <Masthead stretch={isStretch} />}\n {renderNavbar()}\n </div>\n );\n};\n\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidth","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}

package/navbar/navbar.styles_koy0c7.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.wkxx447{background-color:var(--fds-navbar-colour-bg);z-index:30;top:0;left:0;right:0;width:100%;}
+@layer fds{.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);}
@@ -17,4 +17,4 @@
 .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;}
+: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.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+import"./notification-banner.styles_uxlysy.css";const t={contentText:{maxCollapsedHeight:"--fds-internal-notificationBanner-contentText-maxCollapsedHeight"}},n="w17suq18",i="w1ixs8gf",c="w1trwg7u",a="cmwsx4o",e="c1qc2rgl",o="cb6cjs3",s="cia23af",r="c1uktajc",l="c12st863",x="d1hjtr0v",f="azqyi5b",b="i6bp33n";export{f as actionButton,e as content,a as contentContainer,l as contentLink,s as contentText,r as contentTextCollapsed,o as contentWrapper,x as dismissButton,b as iconContainer,t as tokens,n as wrapper,c as wrapperClickable,i as wrapperSticky};
 //# sourceMappingURL=notification-banner.styles.js.map

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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":"mFAIO,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/{cjs/notification-banner/notification-banner.styles_130loac.css → notification-banner/notification-banner.styles_uxlysy.css} RENAMED Viewed

@@ -1,12 +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;}
+@layer fds{.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);}
+.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-body);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-body);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-body);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);}
+.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-body);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.styles_5sbutl.css CHANGED Viewed

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"contact-input-section.js","sources":["../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport type {\n CountryValue,\n PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport {\n ContactButton,\n ContactInputSectionWrapper,\n ContactInputWrapper,\n ContactSectionWrapper,\n EmailContactInput,\n PhoneContactInput,\n VerifiedIconWrapper,\n} from \"./contact-input-section-styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n id,\n \"data-testid\": dataTestId,\n disabled,\n readOnly,\n inputId,\n type,\n sendOtpPlaceholder,\n emailValue,\n onEmailChange,\n phoneNumberValue,\n onPhoneNumberChange,\n fixedCountry,\n isLoading,\n isVerified,\n countdown,\n onSendOtp,\n onStateReset,\n sendOtpError,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onStateReset();\n if (type === \"email\" && onEmailChange) {\n onEmailChange(e.target.value);\n }\n };\n\n const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n onStateReset();\n if (type === \"phone-number\" && onPhoneNumberChange) {\n onPhoneNumberChange(value);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getContactButtonText = () => {\n if (isVerified) {\n return \"Verified\";\n }\n\n if (isLoading) {\n return \"\";\n }\n\n if (countdown.isRunning) {\n return \"Sent OTP\";\n }\n\n return \"Send OTP\";\n };\n\n const getMobileAriaLabel = (country?: CountryValue) =>\n `Enter your ${\n country?.name ?? \"\"\n } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContactInput = () =>\n type === \"email\" ? (\n <EmailContactInput\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter email\"}\n value={emailValue}\n onChange={handleEmailInputChange}\n type=\"email\"\n noBorder\n aria-invalid={!!sendOtpError}\n aria-required={true}\n aria-label=\"Enter your email address to receive a verification OTP\"\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n />\n ) : (\n <PhoneContactInput\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter mobile number\"}\n value={phoneNumberValue}\n onChange={handlePhoneInputChange}\n noBorder\n fixedCountry={fixedCountry}\n aria-invalid={!!sendOtpError}\n aria-required={true}\n getAriaLabel={getMobileAriaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <ContactSectionWrapper id={id} data-testid={dataTestId}>\n <ContactInputSectionWrapper>\n <ContactInputWrapper\n $isMaxWidth={type === \"email\"}\n $error={!!sendOtpError}\n $disabled={disabled}\n $readonly={readOnly}\n >\n {renderContactInput()}\n {isVerified && (\n <VerifiedIconWrapper aria-label=\"Verified\" role=\"img\">\n <TickCircleFillIcon />\n </VerifiedIconWrapper>\n )}\n </ContactInputWrapper>\n {!disabled && !readOnly && (\n <ContactButton\n id={id ? `${id}-contact-button` : undefined}\n type=\"button\"\n data-testid={\n dataTestId\n ? `${dataTestId}-contact-button`\n : undefined\n }\n onClick={onSendOtp}\n disabled={countdown.isRunning \|\| isVerified}\n loading={isLoading}\n >\n {getContactButtonText()}\n </ContactButton>\n )}\n </ContactInputSectionWrapper>\n {sendOtpError && (\n <FormErrorMessage\n id={contactErrorId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-error` : undefined\n }\n role=\"alert\"\n >\n {sendOtpError}\n </FormErrorMessage>\n )}\n </ContactSectionWrapper>\n );\n};\n"],"names":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handlePhoneInputChange","value","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","e","target","noBorder","concatIds","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"8bAmBO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAY9CC,EAA0BC,IAC5BP,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBa,EACxB,EAsBEC,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAuDvE,OACIC,EAACC,EAAqB,CAAC9B,GAAIA,EAAE,cAAeC,EAAU8B,SAAA,CAClDF,EAACG,EAA0B,CAAAD,SAAA,CACvBF,EAACI,eACyB,UAAT5B,EAAgB6B,SACnBjB,EAAYkB,UACXjC,YACAC,EAAQ4B,SAAA,CAxDtB,UAAT1B,EACI+B,EAACC,EAAiB,CACdrC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDiB,YAAahC,GAAsB,cACnCiB,MAAOhB,EACPgC,SAlDoBC,IAC5BxB,IACa,UAATX,GAAoBG,GACpBA,EAAcgC,EAAEC,OAAOlB,MAC3B,EA+CQlB,KAAK,QACLqC,UAAQ,EAAA,iBACQzB,EAAY,iBACb,EAAI,aACR,2EACMC,EAAc,mBACbyB,EACd1B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAGdiC,EAACQ,EAAiB,CACd5C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDiB,YAAahC,GAAsB,sBACnCiB,MAAOd,EACP8B,SAAUjB,EACVoB,UAAQ,EACR/B,aAAcA,EAAY,iBACVM,mBACD,EACf4B,aAAcrB,EAAkB,kBACfN,qBACCyB,EACd1B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAiBLU,GACGuB,EAACU,gBAA+B,WAAWC,KAAK,MAAKhB,SACjDK,EAACY,EAAkB,CAAA,SAI7B9C,IAAaC,GACXiC,EAACa,EAAa,CACVjD,GAAIA,EAAK,GAAGA,wBAAsBqB,EAClChB,KAAK,uBAEDJ,EACM,GAAGA,wBACHoB,EAEV6B,QAASnC,EACTb,SAAUY,EAAUqC,WAAatC,EACjCuC,QAASxC,EAASmB,SApG9BlB,EACO,WAGPD,EACO,GAGPE,EAAUqC,UACH,WAGJ,gBA8FFlC,GACGmB,EAACiB,EAAgB,CACbrD,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjD0B,KAAK,QAAOhB,SAEXd,MAGW"}
1	+ {"version":3,"file":"contact-input-section.js","sources":["../../src/otp-verification/contact-input-section.tsx"],"sourcesContent":["import { TickCircleFillIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { InputGroup } from \"../input-group\";\nimport type {\n CountryValue,\n PhoneNumberInputValue,\n} from \"../phone-number-input\";\nimport { PhoneNumberInput } from \"../phone-number-input\";\nimport { concatIds } from \"../shared/accessibility\";\nimport * as styles from \"./contact-input-section.styles\";\nimport type { ContactInputSectionProps } from \"./internal-types\";\n\nexport const ContactInputSection = ({\n id,\n \"data-testid\": dataTestId,\n disabled,\n readOnly,\n inputId,\n type,\n sendOtpPlaceholder,\n emailValue,\n onEmailChange,\n phoneNumberValue,\n onPhoneNumberChange,\n fixedCountry,\n isLoading,\n isVerified,\n countdown,\n onSendOtp,\n onStateReset,\n sendOtpError,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n}: ContactInputSectionProps) => {\n const contactErrorId = id ? `${id}-contact-error` : undefined;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleEmailInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onStateReset();\n if (type === \"email\" && onEmailChange) {\n onEmailChange(e.target.value);\n }\n };\n\n const handlePhoneInputChange = (value: PhoneNumberInputValue) => {\n onStateReset();\n if (type === \"phone-number\" && onPhoneNumberChange) {\n onPhoneNumberChange(value);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getContactButtonText = () => {\n if (isVerified) {\n return \"Verified\";\n }\n\n if (isLoading) {\n return \"\";\n }\n\n if (countdown.isRunning) {\n return \"Sent OTP\";\n }\n\n return \"Send OTP\";\n };\n\n const getMobileAriaLabel = (country?: CountryValue) =>\n `Enter your ${\n country?.name ?? \"\"\n } mobile number to receive a verification OTP`.replace(/\\s+/g, \" \");\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderContactInput = () =>\n type === \"email\" ? (\n <InputGroup\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter email\"}\n value={emailValue}\n onChange={handleEmailInputChange}\n type=\"email\"\n noBorder\n aria-invalid={!!sendOtpError}\n aria-required={true}\n aria-label=\"Enter your email address to receive a verification OTP\"\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.emailContactInput,\n disabled && styles.emailContactInputDisabled,\n readOnly && styles.emailContactInputReadonly\n )}\n />\n ) : (\n <PhoneNumberInput\n id={inputId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-input` : undefined\n }\n placeholder={sendOtpPlaceholder \|\| \"Enter mobile number\"}\n value={phoneNumberValue}\n onChange={handlePhoneInputChange}\n noBorder\n fixedCountry={fixedCountry}\n aria-invalid={!!sendOtpError}\n aria-required={true}\n getAriaLabel={getMobileAriaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={concatIds(\n sendOtpError ? contactErrorId : undefined,\n ariaDescribedBy\n )}\n disabled={disabled}\n readOnly={readOnly}\n className={clsx(\n styles.phoneContactInput,\n disabled && styles.phoneContactInputDisabled,\n readOnly && styles.phoneContactInputReadonly\n )}\n />\n );\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={styles.contactSectionWrapper}\n >\n <div className={styles.contactInputSectionWrapper}>\n <div\n data-max-width={type === \"email\"}\n className={clsx(\n styles.contactInputWrapper,\n !!sendOtpError && styles.contactInputWrapperError,\n disabled && styles.contactInputWrapperDisabled,\n readOnly && styles.contactInputWrapperReadonly\n )}\n >\n {renderContactInput()}\n {isVerified && (\n <div\n className={styles.verifiedIconWrapper}\n aria-label=\"Verified\"\n role=\"img\"\n >\n <TickCircleFillIcon />\n </div>\n )}\n </div>\n {!disabled && !readOnly && (\n <Button\n type=\"button\"\n data-testid={\n dataTestId\n ? `${dataTestId}-contact-button`\n : undefined\n }\n onClick={onSendOtp}\n disabled={countdown.isRunning \|\| isVerified}\n loading={isLoading}\n className={styles.contactButton}\n >\n {getContactButtonText()}\n </Button>\n )}\n </div>\n {sendOtpError && (\n <FormErrorMessage\n id={contactErrorId}\n data-testid={\n dataTestId ? `${dataTestId}-contact-error` : undefined\n }\n role=\"alert\"\n >\n {sendOtpError}\n </FormErrorMessage>\n )}\n </div>\n );\n};\n"],"names":["ContactInputSection","id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","className","styles.contactSectionWrapper","styles.contactInputSectionWrapper","children","clsx","styles.contactInputWrapper","styles.contactInputWrapperError","styles.contactInputWrapperDisabled","styles.contactInputWrapperReadonly","_jsx","InputGroup","placeholder","onChange","noBorder","concatIds","styles.emailContactInput","styles.emailContactInputDisabled","styles.emailContactInputReadonly","PhoneNumberInput","getAriaLabel","styles.phoneContactInput","styles.phoneContactInputDisabled","styles.phoneContactInputReadonly","styles.verifiedIconWrapper","role","TickCircleFillIcon","Button","onClick","isRunning","loading","styles.contactButton","FormErrorMessage"],"mappings":"q2BAeO,MAAMA,EAAsB,EAC/BC,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAiEvE,OACIC,SACIhC,GAAIA,EAAE,cACOC,EACbgC,UAAWC,YAEXF,EAAA,MAAA,CAAKC,UAAWE,EAAiCC,SAAA,CAC7CJ,EAAA,MAAA,CAAA,iBAC6B,UAAT3B,EAChB4B,UAAWI,EACPC,IACErB,GAAgBsB,EAClBrC,GAAYsC,EACZrC,GAAYsC,GACfL,SAAA,CAzEJ,UAAT/B,EACIqC,EAACC,GACG3C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,cACnCmB,MAAOlB,EACPsC,SAAUvB,EACVjB,KAAK,QACLyC,6BACgB7B,EAAY,iBACb,eACJ,yDAAwD,kBAClDC,EAAc,mBACb6B,EACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EACPW,EACA9C,GAAY+C,EACZ9C,GAAY+C,KAIpBR,EAACS,EAAgB,CACbnD,GAAII,gBAEAH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,sBACnCmB,MAAOhB,EACPoC,SAAUnB,EACVoB,UAAQ,EACRnC,aAAcA,mBACEM,EAAY,iBACb,EACfmC,aAAczB,oBACGT,EAAc,mBACb6B,EACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EACPgB,EACAnD,GAAYoD,EACZnD,GAAYoD,KAyBX1C,GACG6B,EAAA,MAAA,CACIT,UAAWuB,EAA0B,aAC1B,WACXC,KAAK,MAAKrB,SAEVM,EAACgB,EAAkB,CAAA,SAI7BxD,IAAaC,GACXuC,EAACiB,GACGtD,KAAK,SAAQ,cAETJ,EACM,GAAGA,wBACHoB,EAEVuC,QAAS7C,EACTb,SAAUY,EAAU+C,WAAahD,EACjCiD,QAASlD,EACTqB,UAAW8B,EAAoB3B,SAzH3CvB,EACO,WAGPD,EACO,GAGPE,EAAU+C,UACH,WAGJ,gBAmHF5C,GACGyB,EAACsB,EAAgB,CACbhE,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjDoC,KAAK,QAAOrB,SAEXnB,MAGP"}

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

@@ -0,0 +1,14 @@
+export declare const contactSectionWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactInputSectionWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapperError: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapperDisabled: import("@linaria/core").LinariaClassName;
+export declare const contactInputWrapperReadonly: import("@linaria/core").LinariaClassName;
+export declare const verifiedIconWrapper: import("@linaria/core").LinariaClassName;
+export declare const contactButton: import("@linaria/core").LinariaClassName;
+export declare const emailContactInput: import("@linaria/core").LinariaClassName;
+export declare const emailContactInputDisabled: import("@linaria/core").LinariaClassName;
+export declare const emailContactInputReadonly: import("@linaria/core").LinariaClassName;
+export declare const phoneContactInput: import("@linaria/core").LinariaClassName;
+export declare const phoneContactInputDisabled: import("@linaria/core").LinariaClassName;
+export declare const phoneContactInputReadonly: import("@linaria/core").LinariaClassName;

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

	@@ -0,0 +1,2 @@
1	+ import"./contact-input-section.styles_odrjvt.css";const c="c1lwydna",t="c1ndevds",n="ce951ub",e="c1q1uu2c",i="cjnw2dw",o="c1xm1ca3",s="vf0c1ti",p="c1l991bf",d="e1ik236m",r="e19c6q61",a="ergya1n",g="pqn3wrd",q="p9yjg9s",u="pg7qgn5";export{p as contactButton,t as contactInputSectionWrapper,n as contactInputWrapper,i as contactInputWrapperDisabled,e as contactInputWrapperError,o as contactInputWrapperReadonly,c as contactSectionWrapper,d as emailContactInput,r as emailContactInputDisabled,a as emailContactInputReadonly,g as phoneContactInput,q as phoneContactInputDisabled,u as phoneContactInputReadonly,s as verifiedIconWrapper};
2	+ //# sourceMappingURL=contact-input-section.styles.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"contact-input-section.styles.js","sources":["../../src/otp-verification/contact-input-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\nexport const contactSectionWrapper = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const contactInputSectionWrapper = css`\n display: flex;\n`;\n\nexport const contactInputWrapper = css`\n display: flex;\n align-items: center;\n padding: 0 ${Spacing[\"spacing-16\"]};\n border-radius: ${Radius[\"sm\"]} 0 0 ${Radius[\"sm\"]};\n box-shadow: inset 1px 0 0 ${Colour[\"border\"]},\n inset 0 1px 0 ${Colour[\"border\"]}, inset 0 -1px 0 ${Colour[\"border\"]};\n\n &:focus-within {\n box-shadow: inset 2px 0 0 ${Colour[\"border-focus\"]},\n inset 0 2px 0 ${Colour[\"border-focus\"]},\n inset 0 -2px 0 ${Colour[\"border-focus\"]};\n }\n\n &[data-max-width=\"true\"] {\n width: 100%;\n }\n`;\n\nexport const contactInputWrapperError = css`\n box-shadow: inset 1px 0 0 ${Colour[\"border-error\"]},\n inset 0 1px 0 ${Colour[\"border-error\"]},\n inset 0 -1px 0 ${Colour[\"border-error\"]};\n\n &:focus-within {\n box-shadow: inset 2px 0 0 ${Colour[\"border-error-focus\"]},\n inset 0 2px 0 ${Colour[\"border-error-focus\"]},\n inset 0 -2px 0 ${Colour[\"border-error-focus\"]};\n }\n`;\n\nexport const contactInputWrapperDisabled = css`\n box-shadow: inset 0 0 0 1px ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour[\"bg-disabled\"]};\n color: ${Colour[\"text-disabled\"]};\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${Colour[\"border\"]};\n }\n\n &[data-max-width=\"false\"] {\n /* Spacer to maintain width when disabled */\n &::after {\n content: \"\";\n min-width: 120px;\n flex-shrink: 0;\n }\n\n /* Hide spacer on mobile to prevent text coverage */\n ${MediaQuery.MaxWidth.sm} {\n &::after {\n display: none;\n }\n }\n }\n`;\n\nexport const contactInputWrapperReadonly = css`\n padding-left: 0;\n box-shadow: none;\n border-radius: ${Radius[\"sm\"]};\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${Colour[\"border-focus\"]};\n }\n`;\n\nexport const verifiedIconWrapper = css`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ${Spacing[\"spacing-12\"]};\n color: ${Colour[\"icon-success\"]};\n flex-shrink: 0;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const contactButton = css`\n min-width: 120px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n flex-shrink: 0;\n\n ${MediaQuery.MaxWidth.sm} {\n width: fit-content;\n }\n`;\n\nexport const emailContactInput = css`\n padding: 0 ${Spacing[\"spacing-16\"]};\n width: 100%;\n background: transparent;\n`;\n\nexport const emailContactInputDisabled = css`\n input {\n color: ${Colour[\"text-disabled\"]};\n }\n`;\n\nexport const emailContactInputReadonly = css`\n padding: 0;\n`;\n\nexport const phoneContactInput = css`\n padding: 0 ${Spacing[\"spacing-16\"]};\n background: transparent;\n`;\n\nexport const phoneContactInputDisabled = css`\n input {\n color: ${Colour[\"text-disabled\"]};\n }\n`;\n\nexport const phoneContactInputReadonly = css`\n padding: 0;\n\n input {\n margin-left: ${Spacing[\"spacing-12\"]};\n }\n`;\n"],"names":["contactSectionWrapper","contactInputSectionWrapper","contactInputWrapper","contactInputWrapperError","contactInputWrapperDisabled","contactInputWrapperReadonly","verifiedIconWrapper","contactButton","emailContactInput","emailContactInputDisabled","emailContactInputReadonly","phoneContactInput","phoneContactInputDisabled","phoneContactInputReadonly"],"mappings":"kFAIO,MAAMA,EAAqB,WAKrBC,EAA0B,WAI1BC,EAAmB,UAmBnBC,EAAwB,WAYxBC,EAA2B,UA2B3BC,EAA2B,WAU3BC,EAAmB,UAcnBC,EAAa,WAWbC,EAAiB,WAMjBC,EAAyB,WAMzBC,EAAyB,UAIzBC,EAAiB,UAKjBC,EAAyB,UAMzBC,EAAyB"}

package/otp-verification/contact-input-section.styles_odrjvt.css ADDED Viewed

@@ -0,0 +1,14 @@
+@layer fds{.c1lwydna{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.c1ndevds{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.ce951ub{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;padding:0 var(--fds-spacing-16);border-radius:var(--fds-radius-sm) 0 0 var(--fds-radius-sm);box-shadow:inset 1px 0 0 var(--fds-colour-border),inset 0 1px 0 var(--fds-colour-border),inset 0 -1px 0 var(--fds-colour-border);}.ce951ub:focus-within{box-shadow:inset 2px 0 0 var(--fds-colour-border-focus),inset 0 2px 0 var(--fds-colour-border-focus),inset 0 -2px 0 var(--fds-colour-border-focus);}.ce951ub[data-max-width="true"]{width:100%;}
+.c1q1uu2c{box-shadow:inset 1px 0 0 var(--fds-colour-border-error),inset 0 1px 0 var(--fds-colour-border-error),inset 0 -1px 0 var(--fds-colour-border-error);}.c1q1uu2c:focus-within{box-shadow:inset 2px 0 0 var(--fds-colour-border-error-focus),inset 0 2px 0 var(--fds-colour-border-error-focus),inset 0 -2px 0 var(--fds-colour-border-error-focus);}
+.cjnw2dw{box-shadow:inset 0 0 0 1px var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg-disabled);color:var(--fds-colour-text-disabled);}.cjnw2dw:focus-within{box-shadow:inset 0 0 0 2px var(--fds-colour-border);}.cjnw2dw[data-max-width="false"]::after{content:"";min-width:120px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .cjnw2dw[data-max-width="false"]::after{display:none;}
+.c1xm1ca3{padding-left:0;box-shadow:none;border-radius:var(--fds-radius-sm);}.c1xm1ca3:focus-within{box-shadow:inset 0 0 0 2px var(--fds-colour-border-focus);}
+.vf0c1ti{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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-left:var(--fds-spacing-12);color:var(--fds-colour-icon-success);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.vf0c1ti svg{width:1.25rem;height:1.25rem;}
+.c1l991bf{min-width:120px;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .c1l991bf{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.e1ik236m{padding:0 var(--fds-spacing-16);width:100%;background:transparent;}
+.e19c6q61 input{color:var(--fds-colour-text-disabled);}
+.ergya1n{padding:0;}
+.pqn3wrd{padding:0 var(--fds-spacing-16);background:transparent;}
+.p9yjg9s input{color:var(--fds-colour-text-disabled);}
+.pg7qgn5{padding:0;}.pg7qgn5 input{margin-left:var(--fds-spacing-12);}}

package/otp-verification/otp-verification.js CHANGED Viewed

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

package/otp-verification/otp-verification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"otp-verification.js","sources":["../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport { ~~OTPInputWrapper~~ } from \"./otp-verification-styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n id,\n \"data-testid\": dataTestId,\n className,\n inputId,\n onSendOtp,\n onVerifyOtp,\n verifyOtpCountdownTimer = 60,\n sendOtpError,\n verifyOtpError,\n otpValue,\n onOtpChange,\n otpState,\n onOtpStateChange,\n otpReminderInterval = 120,\n } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n const countdown = useCountdown({\n duration: verifyOtpCountdownTimer,\n reminderInterval: otpReminderInterval,\n getStartMessage: (duration) =>\n `You can resend the OTP in ${duration} seconds`,\n getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n getCompletionMessage: () => \"You can now resend the OTP\",\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n // Send OTP\n const handleSendOtp = async () => {\n if (!onSendOtp) return;\n\n try {\n setIsLoading(true);\n await onSendOtp();\n onOtpStateChange(\"sent\");\n countdown.reset();\n countdown.start();\n } catch {\n // do nothing\n } finally {\n setIsLoading(false);\n }\n };\n\n // Verify OTP\n const handleVerifyOtp = async () => {\n if (!onVerifyOtp \|\| !otpValue?.value) return;\n\n try {\n setIsVerifyLoading(true);\n await onVerifyOtp(otpValue.value);\n\n onOtpStateChange(\"verified\");\n\n clearAnnouncer(\"polite\");\n announce(\n \"Success. Your email or mobile number has been verified.\",\n \"polite\"\n );\n\n // Reset the countdown and clear the OTP code in case user enter new OTP later\n countdown.reset();\n onOtpChange?.(\"\");\n } catch {\n // do nothing\n } finally {\n setIsVerifyLoading(false);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const resetToDefault = () => {\n if (otpState === \"verified\") {\n onOtpStateChange(\"default\");\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <~~OTPInputWrapper~~ id={id} data-testid={dataTestId} className={className}>\n <ContactInputSection\n {...props}\n inputId={inputId}\n data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n isLoading={isLoading}\n isVerified={otpState === \"verified\"}\n countdown={countdown}\n onSendOtp={handleSendOtp}\n onStateReset={resetToDefault}\n sendOtpError={sendOtpError}\n fixedCountry={\n props.type === \"phone-number\" ? props.fixedCountry : true\n }\n />\n\n {otpState === \"sent\" && (\n <VerificationSection\n {...props}\n data-testid={\n dataTestId ? `${dataTestId}-verification` : undefined\n }\n otpCode={otpValue?.value}\n otpPrefix={otpValue?.prefix}\n otpSeparator={otpValue?.separator}\n setOtpCode={onOtpChange}\n isVerifyLoading={isVerifyLoading}\n countdown={countdown}\n onVerifyOtp={handleVerifyOtp}\n verifyOtpError={verifyOtpError}\n />\n )}\n </~~OTPInputWrapper~~>\n );\n};\n"],"names":["OtpVerification","props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","~~OTPInputWrapper~~","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"~~ylBASO~~,MAAMA,EAAmBC,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,GAAS,IACpCC,EAAiBC,GAAsBF,GAAS,GAEjDG,EAAYC,EAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,~~EAACC~~,~~EAAe~~,~~CAAC5B~~,GAAIA,~~EAAE~~,~~cAAeC~~,~~EAAYC~~,~~UAAWA~~,~~EAAS2B~~,SAAA,~~CAClEC~~,EAACC,EAAmBC,OAAAC,OAAA,~~GACZlC~~,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,~~iBAAuBiC~~,~~EACpDpB~~,UAAWA,~~EACXqB~~,WAAyB,~~aAAbxB~~,EACZQ,UAAWA,EACXf,~~UA/DU~~,~~IAAWgC~~,OAAA,OAAA,OAAA,GAAA,YAC7B,~~GAAKhC~~,~~EAEL~~,~~IACIW~~,GAAa,SACPX,IACNQ,EAAiB,QACjBO,~~EAAUkB~~,~~QACVlB~~,~~EAAUmB~~,OACd,CAAE,MAAAC,GAEF,~~SACIxB~~,GAAa,EACjB,CACJ,~~IAkDYyB~~,~~aAnBW~~,KACF,~~aAAb7B~~,GACAC,EAAiB,UACrB,~~EAiBQL~~,aAAcA,~~EACdkC~~,aACmB,~~iBAAf1C~~,~~EAAM2C~~,~~MAA0B3C~~,~~EAAM0C~~,gBAIhC,~~SAAb9B~~,~~GACGmB~~,EAACa,~~EAAmBX~~,~~OAAAC~~,~~OAAA,~~CAAA,~~EACZlC~~,~~iBAEAE,~~EAAa,GAAGA,~~sBAA4BiC~~,EAEhDU,~~QAASnC~~,~~aAAQ~~,~~EAARA~~,~~EAAUoC,~~MACnBC,~~UAAWrC~~,aAAQ,EAARA,~~EAAUsC~~,OACrBC,~~aAAcvC~~,aAAQ,EAARA,~~EAAUwC~~,UACxBC,~~WAAYxC~~,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,~~YAlEQ~~,~~IAAW+B~~,OAAA,OAAA,OAAA,GAAA,YAC/B,~~GAAK/B~~,~~IAAgBI~~,aAAQ,EAARA,~~EAAUoC~~,~~OAE/B~~,~~IACI3B~~,GAAmB,SACbb,EAAYI,~~EAASoC~~,~~OAE3BjC~~,EAAiB,~~YAEjBuC~~,EAAe,UACfC,EACI,0DACA,~~UAIJjC~~,~~EAAUkB~~,~~QACV3B~~,SAAAA,EAAc,GAClB,CAAE,~~MAAA6B~~,GAEF,~~SACIrB~~,GAAmB,EACvB,CACJ,~~IA4CgBV~~,eAAgBA,~~OAGV~~"}
1	+ {"version":3,"file":"otp-verification.js","sources":["../../src/otp-verification/otp-verification.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useState } from \"react\";\n\nimport { useCountdown } from \"../util\";\nimport { ContactInputSection } from \"./contact-input-section\";\nimport * as styles from \"./otp-verification.styles\";\nimport type { OtpVerificationProps } from \"./types\";\nimport { VerificationSection } from \"./verification-section\";\n\nexport const OtpVerification = (props: OtpVerificationProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n id,\n \"data-testid\": dataTestId,\n className,\n inputId,\n onSendOtp,\n onVerifyOtp,\n verifyOtpCountdownTimer = 60,\n sendOtpError,\n verifyOtpError,\n otpValue,\n onOtpChange,\n otpState,\n onOtpStateChange,\n otpReminderInterval = 120,\n } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const [isVerifyLoading, setIsVerifyLoading] = useState(false);\n\n const countdown = useCountdown({\n duration: verifyOtpCountdownTimer,\n reminderInterval: otpReminderInterval,\n getStartMessage: (duration) =>\n `You can resend the OTP in ${duration} seconds`,\n getIntervalMessage: (remaining) => `${remaining} seconds remaining`,\n getCompletionMessage: () => \"You can now resend the OTP\",\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n // Send OTP\n const handleSendOtp = async () => {\n if (!onSendOtp \|\| isLoading) return;\n\n try {\n setIsLoading(true);\n await onSendOtp();\n onOtpStateChange(\"sent\");\n countdown.reset();\n countdown.start();\n } catch {\n // do nothing\n } finally {\n setIsLoading(false);\n }\n };\n\n // Verify OTP\n const handleVerifyOtp = async () => {\n if (!onVerifyOtp \|\| isVerifyLoading \|\| !otpValue?.value) return;\n\n try {\n setIsVerifyLoading(true);\n await onVerifyOtp(otpValue.value);\n\n onOtpStateChange(\"verified\");\n\n clearAnnouncer(\"polite\");\n announce(\n \"Success. Your email or mobile number has been verified.\",\n \"polite\"\n );\n\n // Reset the countdown and clear the OTP code in case user enter new OTP later\n countdown.reset();\n onOtpChange?.(\"\");\n } catch {\n // do nothing\n } finally {\n setIsVerifyLoading(false);\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const resetToDefault = () => {\n if (otpState === \"verified\") {\n onOtpStateChange(\"default\");\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div\n id={id}\n data-testid={dataTestId}\n className={clsx(styles.otpInputWrapper, className)}\n >\n <ContactInputSection\n {...props}\n inputId={inputId}\n data-testid={dataTestId ? `${dataTestId}-contact` : undefined}\n isLoading={isLoading}\n isVerified={otpState === \"verified\"}\n countdown={countdown}\n onSendOtp={handleSendOtp}\n onStateReset={resetToDefault}\n sendOtpError={sendOtpError}\n fixedCountry={\n props.type === \"phone-number\" ? props.fixedCountry : true\n }\n />\n\n {otpState === \"sent\" && (\n <VerificationSection\n {...props}\n data-testid={\n dataTestId ? `${dataTestId}-verification` : undefined\n }\n otpCode={otpValue?.value}\n otpPrefix={otpValue?.prefix}\n otpSeparator={otpValue?.separator}\n setOtpCode={onOtpChange}\n isVerifyLoading={isVerifyLoading}\n countdown={countdown}\n onVerifyOtp={handleVerifyOtp}\n verifyOtpError={verifyOtpError}\n />\n )}\n </div>\n );\n};\n"],"names":["OtpVerification","props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","clsx","styles.otpInputWrapper","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"6mBAUO,MAAMA,EAAmBC,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,GAAS,IACpCC,EAAiBC,GAAsBF,GAAS,GAEjDG,EAAYC,EAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,EAAA,MAAA,CACI3B,GAAIA,gBACSC,EACbC,UAAW0B,EAAKC,EAAwB3B,GAAU4B,SAAA,CAElDC,EAACC,EAAmBC,OAAAC,OAAA,CAAA,EACZnC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBkC,EACpDrB,UAAWA,EACXsB,WAAyB,aAAbzB,EACZQ,UAAWA,EACXf,UAnEU,IAAWiC,OAAA,OAAA,OAAA,GAAA,YAC7B,GAAKjC,IAAaU,EAElB,IACIC,GAAa,SACPX,IACNQ,EAAiB,QACjBO,EAAUmB,QACVnB,EAAUoB,OACd,CAAE,MAAAC,GAEF,SACIzB,GAAa,EACjB,CACJ,IAsDY0B,aAvBW,KACF,aAAb9B,GACAC,EAAiB,UACrB,EAqBQL,aAAcA,EACdmC,aACmB,iBAAf3C,EAAM4C,MAA0B5C,EAAM2C,gBAIhC,SAAb/B,GACGoB,EAACa,mBACO7C,EAAK,CAAA,cAELE,EAAa,GAAGA,sBAA4BkC,EAEhDU,QAASpC,eAAAA,EAAUqC,MACnBC,UAAWtC,aAAQ,EAARA,EAAUuC,OACrBC,aAAcxC,aAAQ,EAARA,EAAUyC,UACxBC,WAAYzC,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,YAtEQ,IAAWgC,OAAA,OAAA,OAAA,GAAA,YAC/B,GAAKhC,IAAeY,IAAoBR,aAAQ,EAARA,EAAUqC,OAElD,IACI5B,GAAmB,SACbb,EAAYI,EAASqC,OAE3BlC,EAAiB,YAEjBwC,EAAe,UACfC,EACI,0DACA,UAIJlC,EAAUmB,QACV5B,SAAAA,EAAc,GAClB,CAAE,MAAA8B,GAEF,SACItB,GAAmB,EACvB,CACJ,IAgDgBV,eAAgBA,OAGtB"}

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

	@@ -0,0 +1 @@
1	+ export declare const otpInputWrapper: import("@linaria/core").LinariaClassName;

package/otp-verification/otp-verification.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./otp-verification.styles_dg9bm8.css";const o="o1jl65sy";export{o as otpInputWrapper};
2	+ //# sourceMappingURL=otp-verification.styles.js.map

package/otp-verification/otp-verification.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"otp-verification.styles.js","sources":["../../src/otp-verification/otp-verification.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const otpInputWrapper = css`\n display: flex;\n flex-direction: column;\n gap: ${Spacing[\"spacing-16\"]};\n`;\n"],"names":["otpInputWrapper"],"mappings":"6EAIO,MAAMA,EAAe"}

package/otp-verification/otp-verification.styles_dg9bm8.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @layer fds{.o1jl65sy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-16);}}

package/otp-verification/thumbnail/email-thumbnail.d.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 interface EmailThumbnailProps {
-    width?: number;
-    height?: number;
     className?: string;
 }
-export declare const EmailThumbnail: ({ width, height, className, }: EmailThumbnailProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmailThumbnail: ({ className }: EmailThumbnailProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/otp-verification/thumbnail/email-thumbnail.js CHANGED Viewed

@@ -1,22 +1,2 @@
-import{jsxs as i,jsx as l}from"react/jsx-runtime";import a from"styled-components";import{V3_Colour as c}from"../../v3_theme/index.js";const t=a.svg`
-    .background-circle {
-        fill: ${c["bg-stronger"]};
-    }
-    .primary-path {
-        fill: ${c["icon-primary"]};
-    }
-    .validation-icon {
-        fill: ${c["bg-available"]};
-    }
-    .accent-light-3 {
-        fill: ${c["icon-primary-subtle"]};
-    }
-    .accent-light-4 {
-        fill: ${c["icon-primary-subtlest"]};
-    }
-`,C=({width:a=120,height:c=120,className:C})=>i(t,{width:a,height:c,viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:C,children:[i("g",{clipPath:"url(#clip0_email_icon)",children:[l("circle",{cx:"60",cy:"60",r:"60",className:"background-circle"}),l("path",{d:"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z",className:"primary-path"}),l("path",{d:"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z",fill:"white"}),l("path",{d:"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z",className:"accent-light-3"}),l("path",{d:"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z",className:"accent-light-4"}),l("path",{d:"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z",className:"validation-icon"})]}),l("defs",{children:l("clipPath",{id:"clip0_email_icon",children:l("rect",{width:"120",height:"120",fill:"white"})})})]});export{C as EmailThumbnail};
+import{jsxs as C,jsx as i}from"react/jsx-runtime";import c from"clsx";import{thumbnail as l,emailThumbnail as a}from"./thumbnail.styles.js";const t=({className:t})=>C("svg",{viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:c(l,a,t),children:[C("g",{clipPath:"url(#clip0_email_icon)",children:[i("circle",{cx:"60",cy:"60",r:"60",className:"background-circle"}),i("path",{d:"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z",className:"primary-path"}),i("path",{d:"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z",fill:"white"}),i("path",{d:"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z",className:"accent-light-3"}),i("path",{d:"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z",className:"accent-light-4"}),i("path",{d:"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z",className:"validation-icon"})]}),i("defs",{children:i("clipPath",{id:"clip0_email_icon",children:i("rect",{width:"120",height:"120",fill:"white"})})})]});export{t as EmailThumbnail};
 //# sourceMappingURL=email-thumbnail.js.map

package/otp-verification/thumbnail/email-thumbnail.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"email-thumbnail.js","sources":["../../../src/otp-verification/thumbnail/email-thumbnail.tsx"],"sourcesContent":["import ~~styled~~ from \"~~styled-components~~\";\n\nimport { ~~V3_Colour~~ } from \"~~../../v3_theme~~\";\n\ninterface EmailThumbnailProps {\n ~~width?: number;\n height?: number;\n~~ className?: string;\n}\n\nconst StyledSvg = styled.svg`\n .background-circle {\n fill: ${V3_Colour[\"bg-stronger\"]};\n }\n\n .primary-path {\n fill: ${V3_Colour[\"icon-primary\"]};\n }\n\n .validation-icon {\n fill: ${V3_Colour[\"bg-available\"]};\n }\n\n .accent-light-3 {\n fill: ${V3_Colour[\"icon-primary-subtle\"]};\n }\n\n .accent-light-4 {\n fill: ${V3_Colour[\"icon-primary-subtlest\"]};\n }\n`;\nexport const EmailThumbnail = ({~~\n width~~ = ~~120,\n height = 120,\n className,\n~~}: EmailThumbnailProps) => {\n return (\n <~~StyledSvg~~\n ~~width={width}\n height={height}\n~~ viewBox=\"0 0 120 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={className}\n >\n <g clipPath=\"url(#clip0_email_icon)\">\n <circle cx=\"60\" cy=\"60\" r=\"60\" className=\"background-circle\" />\n <path\n d=\"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z\"\n className=\"primary-path\"\n />\n <path\n d=\"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z\"\n fill=\"white\"\n />\n <path\n d=\"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z\"\n className=\"accent-light-3\"\n />\n <path\n d=\"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z\"\n className=\"accent-light-4\"\n />\n <path\n d=\"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z\"\n className=\"validation-icon\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_email_icon\">\n <rect width=\"120\" height=\"120\" fill=\"white\" />\n </clipPath>\n </defs>\n </~~StyledSvg~~>\n );\n};\n"],"names":["~~StyledSvg~~","~~styled~~","~~svg~~","~~V3_Colour~~","~~EmailThumbnail~~","~~width~~","~~height~~","~~className~~","~~_jsxs~~","~~viewBox","fill","xmlns","~~children","clipPath","_jsx","cx","cy","r","d","id"],"mappings":"~~uIAUA~~,~~MAAMA,EAAYC,EAAOC,GAAG;;gBAEZC,EAAU;;;;gBAIVA,EAAU;;;;gBAIVA,EAAU;;;;gBAIVA,EAAU;;;;gBAIVA,EAAU;;EAGbC,~~EAAiB,~~EAC1BC~~,~~QAAQ~~,~~IACRC~~,~~SAAS~~,~~IACTC~~,~~eAGIC,EAACR,EAAS,CACNK,MAAOA,EACPC,OAAQA,EACRG,~~QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,~~UAAWA~~,~~EAASK~~,SAAA,~~CAEpBJ~~,EAAA,IAAA,~~CAAGK~~,SAAS,yBAAwBD,SAAA,CAChCE,EAAA,SAAA,CAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,~~KAAKV~~,UAAU,~~sBACzCO~~,EAAA,OAAA,CACII,EAAE,~~mOACFX~~,UAAU,~~iBAEdO~~,EAAA,OAAA,CACII,EAAE,~~iRACFR~~,KAAK,~~UAETI~~,EAAA,OAAA,CACII,EAAE,~~6RACFX~~,UAAU,~~mBAEdO~~,EAAA,OAAA,CACII,EAAE,~~iWACFX~~,UAAU,~~mBAEdO~~,EAAA,OAAA,CACII,EAAE,~~gzCACFX~~,UAAU,~~uBAGlBO~~,EAAA,OAAA,CAAAF,SACIE,EAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAA,OAAA,~~CAAMT~~,MAAM,MAAMC,OAAO,~~MAAMI~~,KAAK"}
1	+ {"version":3,"file":"email-thumbnail.js","sources":["../../../src/otp-verification/thumbnail/email-thumbnail.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./thumbnail.styles\";\n\ninterface EmailThumbnailProps {\n className?: string;\n}\n\nexport const EmailThumbnail = ({ className }: EmailThumbnailProps) => {\n return (\n <svg\n viewBox=\"0 0 120 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={clsx(styles.thumbnail, styles.emailThumbnail, className)}\n >\n <g clipPath=\"url(#clip0_email_icon)\">\n <circle cx=\"60\" cy=\"60\" r=\"60\" className=\"background-circle\" />\n <path\n d=\"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z\"\n className=\"primary-path\"\n />\n <path\n d=\"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z\"\n fill=\"white\"\n />\n <path\n d=\"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z\"\n className=\"accent-light-3\"\n />\n <path\n d=\"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z\"\n className=\"accent-light-4\"\n />\n <path\n d=\"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z\"\n className=\"validation-icon\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_email_icon\">\n <rect width=\"120\" height=\"120\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\n"],"names":["EmailThumbnail","className","_jsxs","viewBox","fill","xmlns","clsx","styles.thumbnail","styles.emailThumbnail","children","clipPath","_jsx","cx","cy","r","d","id","width","height"],"mappings":"kJAQaA,EAAiB,EAAGC,eAEzBC,EAAA,MAAA,CACIC,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWK,EAAKC,EAAkBC,EAAuBP,GAAUQ,SAAA,CAEnEP,EAAA,IAAA,CAAGQ,SAAS,yBAAwBD,SAAA,CAChCE,EAAA,SAAA,CAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKb,UAAU,sBACzCU,EAAA,OAAA,CACII,EAAE,mOACFd,UAAU,iBAEdU,EAAA,OAAA,CACII,EAAE,iRACFX,KAAK,UAETO,EAAA,OAAA,CACII,EAAE,6RACFd,UAAU,mBAEdU,EAAA,OAAA,CACII,EAAE,iWACFd,UAAU,mBAEdU,EAAA,OAAA,CACII,EAAE,gzCACFd,UAAU,uBAGlBU,EAAA,OAAA,CAAAF,SACIE,EAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAA,OAAA,CAAMM,MAAM,MAAMC,OAAO,MAAMd,KAAK"}