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

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

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 (1304) hide show

package/cjs/modal-v2/modal-v2.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Motion } from \"../theme\";\n\nconst CLOSED_POSITION_OFFSET = \"-3%\";\nconst IS_INITIAL_OR_CLOSE =\n ':is([data-status=\"initial\"], [data-status=\"close\"])';\n\nexport const tokens = {\n container: {\n verticalHeight: \"--fds-internal-modalV2-container-verticalHeight\",\n ~~offsetTop: \"--fds-internal-modalV2-container-offsetTop\",\n~~ },\n} as const;\n\nexport const container = css`\n position: relative;\n width: 100%;\n height: 100%;\n\n overflow: auto;\n\n ${tokens.container.verticalHeight}: initial;\n ~~${tokens.container.offsetTop}: initial;\n~~\n ${MediaQuery.MaxWidth.sm} {\n height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n ~~top~~: ~~var($~~{~~tokens.container.offsetTop},~~ ~~0px)~~;\n }\n\n &[data-status=\"initial\"] {\n opacity: 0;\n }\n\n &[data-status=\"open\"] {\n opacity: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n transition-delay: ${Motion[\"duration-150\"]};\n }\n\n &[data-status=\"close\"] {\n opacity: 0;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n }\n\n &[data-animation-from=\"top\"]${IS_INITIAL_OR_CLOSE} {\n top: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"top\"][data-status=\"open\"] {\n top: 0;\n }\n\n &[data-animation-from=\"bottom\"]${IS_INITIAL_OR_CLOSE} {\n bottom: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"bottom\"][data-status=\"open\"] {\n bottom: 0;\n }\n\n &[data-animation-from=\"left\"]${IS_INITIAL_OR_CLOSE} {\n left: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"left\"][data-status=\"open\"] {\n left: 0;\n }\n\n &[data-animation-from=\"right\"]${IS_INITIAL_OR_CLOSE} {\n right: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"right\"][data-status=\"open\"] {\n right: 0;\n }\n`;\n\nexport const scrollContainer = css`\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n pointer-events: none;\n`;\n\nexport const modalContainer = css`\n pointer-events: auto;\n width: 100%;\n outline: none;\n`;\n"],"names":["container","verticalHeight"~~,"offsetTop"~~],"mappings":"~~gGAesB~~,~~kCAuEK~~,iCARC,~~0BAtEN~~,CAClBA,UAAW,CACPC,eAAgB~~,kDAChBC,UAAW~~"}
1	+ {"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Motion } from \"../theme\";\n\nconst CLOSED_POSITION_OFFSET = \"-3%\";\nconst IS_INITIAL_OR_CLOSE =\n ':is([data-status=\"initial\"], [data-status=\"close\"])';\n\nexport const tokens = {\n container: {\n verticalHeight: \"--fds-internal-modalV2-container-verticalHeight\",\n },\n} as const;\n\nexport const container = css`\n position: relative;\n width: 100%;\n height: 100%;\n\n overflow: auto;\n\n ${tokens.container.verticalHeight}: initial;\n\n ${MediaQuery.MaxWidth.sm} {\n height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n }\n\n @supports (height: 100dvh) {\n height: 100dvh;\n }\n\n &[data-status=\"initial\"] {\n opacity: 0;\n }\n\n &[data-status=\"open\"] {\n opacity: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n transition-delay: ${Motion[\"duration-150\"]};\n }\n\n &[data-status=\"close\"] {\n opacity: 0;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n }\n\n &[data-animation-from=\"top\"]${IS_INITIAL_OR_CLOSE} {\n top: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"top\"][data-status=\"open\"] {\n top: 0;\n }\n\n &[data-animation-from=\"bottom\"]${IS_INITIAL_OR_CLOSE} {\n bottom: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"bottom\"][data-status=\"open\"] {\n bottom: 0;\n }\n\n &[data-animation-from=\"left\"]${IS_INITIAL_OR_CLOSE} {\n left: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"left\"][data-status=\"open\"] {\n left: 0;\n }\n\n &[data-animation-from=\"right\"]${IS_INITIAL_OR_CLOSE} {\n right: ${CLOSED_POSITION_OFFSET};\n }\n\n &[data-animation-from=\"right\"][data-status=\"open\"] {\n right: 0;\n }\n`;\n\nexport const scrollContainer = css`\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n pointer-events: none;\n`;\n\nexport const modalContainer = css`\n pointer-events: auto;\n width: 100%;\n outline: none;\n`;\n"],"names":["container","verticalHeight"],"mappings":"+FAcsB,kCAyEK,iCARC,0BAvEN,CAClBA,UAAW,CACPC,eAAgB"}

package/cjs/modal-v2/modal-v2.styles_a8gv5i.css ADDED Viewed

@@ -0,0 +1,3 @@
+.c1jrmyjd{position:relative;width:100%;height:100%;overflow:auto;--fds-internal-modalV2-container-verticalHeight:initial;}:where(body.fds-breakpoint-sm-max) .c1jrmyjd{height:calc(var(--fds-internal-modalV2-container-verticalHeight, 1vh) * 100);}@supports (height: 100dvh){.c1jrmyjd{height:100dvh;}}.c1jrmyjd[data-status="initial"]{opacity:0;}.c1jrmyjd[data-status="open"]{opacity:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition-delay:var(--fds-motion-duration-150);}.c1jrmyjd[data-status="close"]{opacity:0;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);}.c1jrmyjd[data-animation-from="top"]:is([data-status="initial"], [data-status="close"]){top:-3%;}.c1jrmyjd[data-animation-from="top"][data-status="open"]{top:0;}.c1jrmyjd[data-animation-from="bottom"]:is([data-status="initial"], [data-status="close"]){bottom:-3%;}.c1jrmyjd[data-animation-from="bottom"][data-status="open"]{bottom:0;}.c1jrmyjd[data-animation-from="left"]:is([data-status="initial"], [data-status="close"]){left:-3%;}.c1jrmyjd[data-animation-from="left"][data-status="open"]{left:0;}.c1jrmyjd[data-animation-from="right"]:is([data-status="initial"], [data-status="close"]){right:-3%;}.c1jrmyjd[data-animation-from="right"][data-status="open"]{right:0;}
+.s1xsiaxz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100%;pointer-events:none;}
+.mn5ir3{pointer-events:auto;width:100%;outline:none;}

package/cjs/modal-v2/slots/card.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),a=require("react"),s=require("styled-components"),d=require("./close-button.js"),i=require("./content.js"),o=require("./footer.js"),l=require("./slot-styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(r),c=n(a);const f=c.default.forwardRef((function(r,a){var{id:n,"data-testid":f="modal-card",children:p,className:j}=r,m=e.__rest(r,["id","data-testid","children","className"]);const q=e=>c.default.Children.toArray(p).find((t=>((e,t)=>s.isStyledComponent(e.type)?e.type.target===t:e.type===t)(t,e))),y=q(d.CloseButton),C=q(i.Content),h=q(o.Footer),v=!!y;return t.jsxs("div",Object.assign({ref:a,id:n,"data-testid":f},m,{onClick:e=>{e.stopPropagation()},className:u.default(l.modalCard,j),children:[t.jsxs("div",{"data-has-close-button":v?"true":"false",className:u.default(l.slotSpacer),children:[C,h]}),v&&y]}))}));f.displayName="ModalV2.Card",exports.Card=f;
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),a=require("react"),s=require("../../util/is-styled-components.js"),i=require("./close-button.js"),d=require("./content.js"),l=require("./footer.js"),o=require("./slot-styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(r),c=n(a);const f=c.default.forwardRef((function(r,a){var{id:n,"data-testid":f="modal-card",children:j,className:p}=r,m=e.__rest(r,["id","data-testid","children","className"]);const q=e=>c.default.Children.toArray(j).find((t=>((e,t)=>s.default(e.type)?e.type.target===t:e.type===t)(t,e))),y=q(i.CloseButton),C=q(d.Content),h=q(l.Footer),v=!!y;return t.jsxs("div",Object.assign({ref:a,id:n,"data-testid":f},m,{onClick:e=>{e.stopPropagation()},className:u.default(o.modalCard,p),children:[t.jsxs("div",{"data-has-close-button":v?"true":"false",className:u.default(o.slotSpacer),children:[C,h]}),v&&y]}))}));f.displayName="ModalV2.Card",exports.Card=f;
 //# sourceMappingURL=card.js.map

package/cjs/modal-v2/slots/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\nimport { isStyledComponent } from \"styled-components\";\n\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n {\n id,\n \"data-testid\": testId = \"modal-card\",\n children,\n className,\n ...otherProps\n }: ModalCardProps,\n ref: React.ForwardedRef<HTMLDivElement>\n) {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const isComponentType = (child: React.ReactPortal, type: any) =>\n isStyledComponent(child.type)\n ? (child.type as unknown as { target: any }).target === type\n : child.type === type;\n\n const findComponentOfType = (type: any) => {\n return React.Children.toArray(children).find((child) =>\n isComponentType(child as React.ReactPortal, type)\n );\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const CloseButtonSlot = findComponentOfType(CloseButton);\n const ContentSlot = findComponentOfType(Content);\n const FooterSlot = findComponentOfType(Footer);\n\n const hasCloseButton = !!CloseButtonSlot;\n\n return (\n <div\n ref={ref}\n id={id}\n data-testid={testId}\n {...otherProps}\n onClick={handleOnClick}\n className={clsx(styles.modalCard, className)}\n >\n <div\n data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n className={clsx(styles.slotSpacer)}\n >\n {ContentSlot}\n {FooterSlot}\n </div>\n {hasCloseButton && CloseButtonSlot}\n </div>\n );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"~~oWAwEO~~,MAAMA,EAAOC,EAAAA,QAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,UAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAAA,~~kBAAkBD~~,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAAA,QAAKC,EAAAA,UAAkB1B,GAAUD,SAAA,CAE5CoB,EAAAA,KAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAAA,QAAKE,EAAAA,YAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}
1	+ {"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport isStyledComponent from \"../../util/is-styled-components\";\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n {\n id,\n \"data-testid\": testId = \"modal-card\",\n children,\n className,\n ...otherProps\n }: ModalCardProps,\n ref: React.ForwardedRef<HTMLDivElement>\n) {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const isComponentType = (child: React.ReactPortal, type: any) =>\n isStyledComponent(child.type)\n ? (child.type as unknown as { target: any }).target === type\n : child.type === type;\n\n const findComponentOfType = (type: any) => {\n return React.Children.toArray(children).find((child) =>\n isComponentType(child as React.ReactPortal, type)\n );\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const CloseButtonSlot = findComponentOfType(CloseButton);\n const ContentSlot = findComponentOfType(Content);\n const FooterSlot = findComponentOfType(Footer);\n\n const hasCloseButton = !!CloseButtonSlot;\n\n return (\n <div\n ref={ref}\n id={id}\n data-testid={testId}\n {...otherProps}\n onClick={handleOnClick}\n className={clsx(styles.modalCard, className)}\n >\n <div\n data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n className={clsx(styles.slotSpacer)}\n >\n {ContentSlot}\n {FooterSlot}\n </div>\n {hasCloseButton && CloseButtonSlot}\n </div>\n );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"qXAwEO,MAAMA,EAAOC,EAAAA,QAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,UAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAAA,QAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAAA,QAAKC,EAAAA,UAAkB1B,GAAUD,SAAA,CAE5CoB,EAAAA,KAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAAA,QAAKE,EAAAA,YAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./navbar-items.styles_i9cunu.css");exports.chevronIcon="c1s8ur0k",exports.chevronIconSelected="c178e7hk",exports.expandCollapseButton="ej7h5do",exports.expandCollapseButtonExpanded="e160mxwv",exports.link="l1o3p4yu",exports.linkButton="l1xfqf3s",exports.linkIconContainer="l1p9u80z",exports.linkIndicator="lnocj2s",exports.linkIndicatorSelected="l5qfat1",exports.linkItem="l18t6f3m",exports.linkItemHiddenBranding="lsn8o0d",exports.linkLabel="lsc0hr8",exports.linkSelected="lkwvsmx",exports.linkWeightBold="l1p7dxu8",exports.linkWeightRegular="l1kp5n19",exports.linkWeightSemibold="lqgrg2a",exports.mobileWrapper="mw9gug8",exports.wrapper="w1ndf2sj",exports.wrapperAlignLeft="w177nfye";
+"use strict";require("./navbar-items.styles_1i3ltot.css");exports.chevronIcon="c1s8ur0k",exports.chevronIconSelected="c178e7hk",exports.expandCollapseButton="ej7h5do",exports.expandCollapseButtonExpanded="e160mxwv",exports.link="l1o3p4yu",exports.linkButton="l1xfqf3s",exports.linkIconContainer="l1p9u80z",exports.linkIndicator="lnocj2s",exports.linkIndicatorSelected="l5qfat1",exports.linkItem="l18t6f3m",exports.linkItemHiddenBranding="lsn8o0d",exports.linkLabel="lsc0hr8",exports.linkSelected="lkwvsmx",exports.linkWeightBold="l1p7dxu8",exports.linkWeightRegular="l1kp5n19",exports.linkWeightSemibold="lqgrg2a",exports.mobileWrapper="mw9gug8",exports.wrapper="w1ndf2sj",exports.wrapperAlignLeft="w177nfye";
 //# sourceMappingURL=navbar-items.styles.js.map

package/cjs/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":[],"mappings":"~~mGAyKwB~~,~~uCAUQ~~,~~wCArBC~~,+CAOQ,~~wBArGxB~~,~~8BA0CM~~,~~qCA+CO~~,~~iCAxBJ~~,wCAkBQ,~~2BA/Gb~~,0CAec,~~4BAmEb~~,+BAhCG,iCAgBE,qCARG,sCAIC,~~gCA5EL~~,0BAdN,oCAUS"}
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":[],"mappings":"oGA4KwB,uCAYQ,wCAvBC,+CAOQ,wBAxGxB,8BA2CM,qCAiDO,iCA1BJ,wCAkBQ,2BAhHb,0CAec,4BAoEb,+BAhCG,iCAgBE,qCARG,sCAIC,gCA7EL,0BAdN,oCAUS"}

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

@@ -3,17 +3,17 @@
 .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/cjs/navbar/navbar.js CHANGED Viewed

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

package/cjs/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={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","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":"qrCAyCA,MAqVaA,EAASC,EAAAA,YArVJ,CACdC,EAsBAC,KAtBA,IAAAC,MACIA,EAAKC,UACLA,EAASC,GACTA,EAAEC,WACFA,EAAUC,SACVA,GAAW,EAAKC,MAChBA,GAAQ,EAAIC,UACZA,EAASC,gBACTA,GAAkB,EAAKC,gBACvBA,GAAkB,EAAKC,kBACvBA,GAAoB,EACpBC,0BAA2BC,EAA8B,GAAEC,cAC3DA,EAAaC,YACbA,EAAWC,oBACXA,EAAmBC,aACnBA,EAAYC,SACZA,GAAW,EAAIC,OACfA,EAAS,UAASC,YAClBA,EAAc,uBAAsBC,YACpCA,GAAWrB,EACRsB,EAAUC,EAAAA,OAAAvB,EApBjB,+QA2BA,MAAOwB,EAAYC,GAAiBC,EAAAA,UAAkB,IAC/CC,EAAaC,GAAkBF,EAAAA,UAAkB,GAClDG,EAAgBC,EAAAA,OAA0B,MAC1CC,EAAuB,YAAXZ,EACZa,EAAaF,EAAAA,OAAuB,MACpCG,EAAQC,EAAAA,WAAWC,gBACnBC,EAAkBC,yBAAuBJ,aAAK,EAALA,EAAOA,OAChDK,EAAcC,EAAAA,kBAChBC,EAAAA,2BAA2BC,EAAAA,WAAW,YAGpCC,GAAUlC,aAAS,EAATA,EAAWkC,UAAWN,EAAgBM,QAChDC,EAAYnC,aAAS,EAATA,EAAWmC,UAE7BC,EAAAA,oBACI3C,GACA,IACI4C,OAAOC,OACHd,EAAWe,QACX,CACIC,cAAe,KACXA,IAAe,KAI/B,CAACxB,IAMLyB,EAAAA,WAAU,KACNC,KACAC,OAAOC,iBAAiB,SAAUF,IAE3B,KACHC,OAAOE,oBAAoB,SAAUH,GAAa,IAEvD,IAKH,MAAMF,GAAgB,KAClBvB,GAAc,GACd6B,YAAW,KACP1B,GAAe,EAAM,GACtB,IAAI,EAGL2B,GAAuBC,GAErBhC,IACyD,IAAzDX,EAA4B4C,QAAQD,GAwBtCN,GAAe,KACbC,OAAOO,YAAcpB,GAAed,GACpCwB,IACJ,EAGEW,GAAmB,CACrBC,EACAC,KAEI5C,GACAA,EAAa4C,GAGbN,GAAoB,gBACpBP,IACJ,EAGEc,GAAqB,CACvBC,EACAC,KAEIC,EAAAA,aAAaC,gBAAgBF,IAASA,EAAKG,QAC3CH,EAAKG,QAAQJ,GACNhD,IACPgD,EAAMK,iBACNrD,EAAYiD,IAIZC,EAAAA,aAAaI,cAAcL,KAC1BA,EAAKM,SACNf,GAAoB,eAEpBP,IACJ,EAGEuB,GAA0B,CAC5BR,EACAS,WAG2B,WAAtBA,EAAaX,MACY,aAAtBW,EAAaX,gBACjB7D,EAAAwE,EAAaC,2BAAMN,SAKZnD,IACP+C,EAAMK,iBACNpD,EAAoBwD,IALpBA,EAAaC,KAAKN,QACdJ,GAOJR,GAAoB,eACpBP,IACJ,EAGE0B,GAA8B,KAChCjD,GAAc,GACdG,GAAe,EAAK,EAGlB+C,GAAoB,KAClBpB,GAAoB,uBACpBP,IACJ,EAkFE4B,GAAyB,KAC3B,MAAMC,EAAc3E,EAAM4E,QAAU5E,EAAM6E,QAC1C,OACKF,GAAeA,EAAYG,OAAS,GACpClE,GA/K2B,CAChCA,IAEA,MAAMmE,EACFnE,EAAcgE,QAAUhE,EAAciE,QAC1C,QAAIE,GAEIA,EAAoBD,QACpBC,EAAoBC,MACfV,IAAkBA,EAAaW,eAKhC,EAiKUC,CAA4BtE,GAG1CuE,MAACC,EAAAA,cAAa,CACVrF,IAAK4B,EACL1B,UAAWoF,EAAAA,8BACC/D,EAAa,iBAAmB,gCAC7BA,EAAU,cACb,sBACZ2C,QAASO,GACTc,gBAAgB,EAAKC,SAErBJ,EAAAA,IAACK,EAAAA,SAAQ,CAACvF,UAAWwF,EAAAA,mBAK1B,IAAI,EA4Cf,OACIC,EAAAA,KAAA,MAAA,CACI3F,IAAK+B,EACL7B,UAAW0F,EAAAA,QACPC,EAAAA,QACAvF,EAAQwF,EAAAA,aAAsBC,kBACd,UAAhB/D,aAAK,EAALA,EAAOgE,MACDC,EAAAA,YACAC,eACNhG,GAEJC,GAAIA,GAAM,iBAAgB,cACbkB,EAAW,gBAAkB,iBAAgBmE,SAAA,CAEzDvE,GAAYmE,MAACe,EAAAA,SAAQ,CAACC,QAAStE,IArDhC6D,EAAAA,KAACU,EAAAA,OAAOC,QAAO,CAACF,QAAStE,EAAS0D,SAAA,CAC9BG,OAAA,MAAA,CACIzF,UAAW0F,EAAAA,QACPW,EAAAA,IACAlG,GAAYmG,EAAAA,cACI,UAAhBxE,aAAK,EAALA,EAAOgE,OAAmBS,EAAAA,SAC7B,aACWtF,EAAWqE,SAAA,EAErB/E,GA7EdkF,OAAA,MAAA,CACIzF,UAAW0F,EAAAA,QACPc,oBACArG,EACMsG,EAAAA,4BACAC,EAAAA,sBACNC,EAAAA,6BACH,UACO,4BAEPpE,GACG2C,EAAAA,IAAC0B,EAAAA,OACGvG,UAAWkC,EACXyB,QAASR,GAAgB,UACjB,8BACI,cACZE,KAAK,YAGZlB,GACGiD,EAAAA,KAAAoB,EAAAA,SAAA,CAAAvB,SAAA,CACIJ,EAAAA,IAAA,MAAA,CACIlF,UAAW0F,EAAAA,QACPoB,eACA3G,EACM4G,EAAAA,uBACAC,mBACNC,EAAAA,0BAGR/B,EAAAA,IAAC0B,EAAAA,MAAK,CACFvG,UAAWmC,EACXwB,QAASR,GAAgB,UACjB,gCACI,wBACZE,KAAK,qBA2CPpD,GACEmF,OAAA,MAAA,CACIzF,UAAW0F,EAAAA,QACPwB,EAAAA,sBACC3G,GACG4G,EAAAA,kCACP7B,SAAA,CAEDJ,EAAAA,IAACkC,EAAAA,YAAW,CACRrH,MAAOA,EAAM6E,QACbhE,YAAa+C,GACbzD,WAAYA,EACZK,gBAAiBA,EACjBC,kBAAmBA,IAEvB0E,EAAAA,IAACmC,EAAAA,oBAAmB,CAChB1G,cAAeA,EACfE,oBAAqBuD,KAExBK,YAKXnE,GAtIV4E,EAAAA,IAACoC,EAAAA,QAAO,CACJC,KAAM/F,EACNgG,sBACAC,eAAgBjD,GAAiBc,SAEjCG,EAAAA,KAACiC,EAAAA,OAAM,CACHH,KAAMlG,EACNhB,UAAW,CAAEkC,UAASC,aACtBmF,QAASnD,GACT1D,aAAc0C,GACd7C,cAAeA,EACfJ,gBAAiBA,EACjBmB,cAAeA,EACfR,YAAaA,YAEbgE,EAAAA,IAACkC,EAAAA,YAAW,CACRrH,MAAOA,EAAM4E,QAAU5E,EAAM6E,QAC7BhE,YAAa+C,GACbzD,WAAYA,EACZyE,UACAnE,kBAAmBA,IAEvB0E,EAAAA,IAACmC,EAAAA,oBAAmB,CAChB1G,cAAeA,EACfE,oBAAqBuD,GACrBO,QAAM,cAkIZ"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./notification-banner.styles_130loac.css");exports.actionButton="azqyi5b",exports.content="c1qc2rgl",exports.contentContainer="cmwsx4o",exports.contentLink="c12st863",exports.contentText="cia23af",exports.contentTextCollapsed="c1uktajc",exports.contentWrapper="cb6cjs3",exports.dismissButton="d1hjtr0v",exports.iconContainer="i6bp33n",exports.tokens={contentText:{maxCollapsedHeight:"--fds-internal-notificationBanner-contentText-maxCollapsedHeight"}},exports.wrapper="w17suq18",exports.wrapperClickable="w1trwg7u",exports.wrapperSticky="w1ixs8gf";
+"use strict";require("./notification-banner.styles_uxlysy.css");exports.actionButton="azqyi5b",exports.content="c1qc2rgl",exports.contentContainer="cmwsx4o",exports.contentLink="c12st863",exports.contentText="cia23af",exports.contentTextCollapsed="c1uktajc",exports.contentWrapper="cb6cjs3",exports.dismissButton="d1hjtr0v",exports.iconContainer="i6bp33n",exports.tokens={contentText:{maxCollapsedHeight:"--fds-internal-notificationBanner-contentText-maxCollapsedHeight"}},exports.wrapper="w17suq18",exports.wrapperClickable="w1trwg7u",exports.wrapperSticky="w1ixs8gf";
 //# sourceMappingURL=notification-banner.styles.js.map

package/cjs/notification-banner/notification-banner.styles.js.map 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":["contentText","maxCollapsedHeight"],"mappings":"~~yHAsHyB~~,0BA5DL,oCANS,8BAiDL,+BAdA,uCAOS,kCAbN,gCAyBD,iCA2BA,yBAjIJ,CAClBA,YAAa,CACTC,mBACI,qFAyBQ,oCAgBS,iCAJH"}
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":["contentText","maxCollapsedHeight"],"mappings":"wHAsHyB,0BA5DL,oCANS,8BAiDL,+BAdA,uCAOS,kCAbN,gCAyBD,iCA2BA,yBAjIJ,CAClBA,YAAa,CACTC,mBACI,qFAyBQ,oCAgBS,iCAJH"}

package/{notification-banner/notification-banner.styles_130loac.css → cjs/notification-banner/notification-banner.styles_uxlysy.css} RENAMED Viewed

@@ -2,11 +2,11 @@
 .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;}
+.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/cjs/otp-verification/contact-input-section.js CHANGED Viewed

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

package/cjs/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":["id","dataTestId","disabled","readOnly","inputId","type","sendOtpPlaceholder","emailValue","onEmailChange","phoneNumberValue","onPhoneNumberChange","fixedCountry","isLoading","isVerified","countdown","onSendOtp","onStateReset","sendOtpError","ariaLabelledBy","ariaDescribedBy","contactErrorId","undefined","handleEmailInputChange","e","target","value","handlePhoneInputChange","getMobileAriaLabel","country","_a","name","replace","_jsxs","ContactSectionWrapper","children","ContactInputSectionWrapper","ContactInputWrapper","$error","$disabled","_jsx","EmailContactInput","placeholder","onChange","noBorder","concatIds","PhoneContactInput","getAriaLabel","VerifiedIconWrapper","role","TickCircleFillIcon","ContactButton","onClick","isRunning","loading","FormErrorMessage"],"mappings":"6OAmBmC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAuDvE,OACIC,EAAAA,KAACC,EAAAA,sBAAqB,CAACjC,GAAIA,EAAE,cAAeC,EAAUiC,SAAA,CAClDF,EAAAA,KAACG,EAAAA,2BAA0B,CAAAD,SAAA,CACvBF,EAAAA,KAACI,mCACyB,UAAT/B,EAAgBgC,SACnBpB,EAAYqB,UACXpC,YACAC,EAAQ+B,SAAA,CAxDtB,UAAT7B,EACIkC,EAAAA,IAACC,EAAAA,kBAAiB,CACdxC,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDoB,YAAanC,GAAsB,cACnCmB,MAAOlB,EACPmC,SAAUpB,EACVjB,KAAK,QACLsC,UAAQ,EAAA,iBACQ1B,EAAY,iBACb,EAAI,aACR,2EACMC,EAAc,mBACb0B,EAAAA,UACd3B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAGdoC,MAACM,EAAAA,kBAAiB,CACd7C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDoB,YAAanC,GAAsB,sBACnCmB,MAAOhB,EACPiC,SAAUhB,EACViB,UAAQ,EACRhC,aAAcA,EAAY,iBACVM,mBACD,EACf6B,aAAcnB,EAAkB,kBACfT,qBACC0B,EAAAA,UACd3B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,IAiBLU,GACG0B,EAAAA,IAACQ,EAAAA,kCAA+B,WAAWC,KAAK,MAAKd,SACjDK,EAAAA,IAACU,EAAAA,mBAAkB,CAAA,SAI7B/C,IAAaC,GACXoC,EAAAA,IAACW,EAAAA,cAAa,CACVlD,GAAIA,EAAK,GAAGA,wBAAsBqB,EAClChB,KAAK,uBAEDJ,EACM,GAAGA,wBACHoB,EAEV8B,QAASpC,EACTb,SAAUY,EAAUsC,WAAavC,EACjCwC,QAASzC,EAASsB,SApG9BrB,EACO,WAGPD,EACO,GAGPE,EAAUsC,UACH,WAGJ,gBA8FFnC,GACGsB,EAAAA,IAACe,EAAAA,iBAAgB,CACbtD,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjD2B,KAAK,QAAOd,SAEXjB,MAGW"}
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":["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":"udAemC,EAC/BA,KACA,cAAeC,EACfC,WACAC,WACAC,UACAC,OACAC,qBACAC,aACAC,gBACAC,mBACAC,sBACAC,eACAC,YACAC,aACAC,YACAC,YACAC,eACAC,eACA,kBAAmBC,EACnB,mBAAoBC,MAEpB,MAAMC,EAAiBpB,EAAK,GAAGA,uBAAqBqB,EAK9CC,EAA0BC,IAC5BP,IACa,UAATX,GAAoBG,GACpBA,EAAce,EAAEC,OAAOC,MAC3B,EAGEC,EAA0BD,IAC5BT,IACa,iBAATX,GAA2BK,GAC3BA,EAAoBe,EACxB,EAsBEE,EAAsBC,UACxB,MAAA,sBACIC,EAAAD,aAAO,EAAPA,EAASE,oBAAQ,iDAC0BC,QAAQ,OAAQ,IAAI,EAiEvE,OACIC,EAAAA,YACIhC,GAAIA,EAAE,cACOC,EACbgC,UAAWC,EAAAA,gCAEXF,EAAAA,KAAA,MAAA,CAAKC,UAAWE,EAAAA,2BAAiCC,SAAA,CAC7CJ,EAAAA,KAAA,MAAA,CAAA,iBAC6B,UAAT3B,EAChB4B,UAAWI,EAAAA,QACPC,EAAAA,sBACErB,GAAgBsB,EAAAA,yBAClBrC,GAAYsC,EAAAA,4BACZrC,GAAYsC,EAAAA,6BACfL,SAAA,CAzEJ,UAAT/B,EACIqC,EAAAA,IAACC,EAAAA,YACG3C,GAAII,EAAO,cAEPH,EAAa,GAAGA,uBAA6BoB,EAEjDuB,YAAatC,GAAsB,cACnCmB,MAAOlB,EACPsC,SAAUvB,EACVjB,KAAK,QACLyC,6BACgB7B,EAAY,iBACb,eACJ,yDAAwD,kBAClDC,EAAc,mBACb6B,EAAAA,UACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPW,EAAAA,kBACA9C,GAAY+C,EAAAA,0BACZ9C,GAAY+C,+BAIpBR,EAAAA,IAACS,EAAAA,iBAAgB,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,YACd9B,EAAeG,OAAiBC,EAChCF,GAEJjB,SAAUA,EACVC,SAAUA,EACV8B,UAAWI,EAAAA,QACPgB,oBACAnD,GAAYoD,EAAAA,0BACZnD,GAAYoD,EAAAA,6BAyBX1C,GACG6B,EAAAA,IAAA,MAAA,CACIT,UAAWuB,EAAAA,oBAA0B,aAC1B,WACXC,KAAK,MAAKrB,SAEVM,EAAAA,IAACgB,EAAAA,mBAAkB,CAAA,SAI7BxD,IAAaC,GACXuC,EAAAA,IAACiB,EAAAA,QACGtD,KAAK,SAAQ,cAETJ,EACM,GAAGA,wBACHoB,EAEVuC,QAAS7C,EACTb,SAAUY,EAAU+C,WAAahD,EACjCiD,QAASlD,EACTqB,UAAW8B,EAAAA,cAAoB3B,SAzH3CvB,EACO,WAGPD,EACO,GAGPE,EAAU+C,UACH,WAGJ,gBAmHF5C,GACGyB,EAAAA,IAACsB,EAAAA,iBAAgB,CACbhE,GAAIoB,EAAc,cAEdnB,EAAa,GAAGA,uBAA6BoB,EAEjDoC,KAAK,QAAOrB,SAEXnB,MAGP"}

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

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./contact-input-section.styles_odrjvt.css");exports.contactButton="c1l991bf",exports.contactInputSectionWrapper="c1ndevds",exports.contactInputWrapper="ce951ub",exports.contactInputWrapperDisabled="cjnw2dw",exports.contactInputWrapperError="c1q1uu2c",exports.contactInputWrapperReadonly="c1xm1ca3",exports.contactSectionWrapper="c1lwydna",exports.emailContactInput="e1ik236m",exports.emailContactInputDisabled="e19c6q61",exports.emailContactInputReadonly="ergya1n",exports.phoneContactInput="pqn3wrd",exports.phoneContactInputDisabled="p9yjg9s",exports.phoneContactInputReadonly="pg7qgn5",exports.verifiedIconWrapper="vf0c1ti";
2	+ //# sourceMappingURL=contact-input-section.styles.js.map

package/cjs/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":[],"mappings":"wHA+F0B,8CAtFa,uCAIP,8CA+BQ,2CAZH,+CAuCG,yCAnEN,qCAsGJ,6CAMQ,6CAMA,oCAIR,4CAKQ,4CAMA,sCApDN"}

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

@@ -0,0 +1,14 @@
+.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/cjs/otp-verification/otp-verification.js CHANGED Viewed

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

package/cjs/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":["props","id","dataTestId","className","inputId","onSendOtp","onVerifyOtp","verifyOtpCountdownTimer","sendOtpError","verifyOtpError","otpValue","onOtpChange","otpState","onOtpStateChange","otpReminderInterval","isLoading","setIsLoading","useState","isVerifyLoading","setIsVerifyLoading","countdown","useCountdown","duration","reminderInterval","getStartMessage","getIntervalMessage","remaining","getCompletionMessage","_jsxs","~~OTPInputWrapper~~","children","_jsx","ContactInputSection","Object","assign","undefined","isVerified","__awaiter","reset","start","_a","onStateReset","fixedCountry","type","VerificationSection","otpCode","value","otpPrefix","prefix","otpSeparator","separator","setOtpCode","clearAnnouncer","announce"],"mappings":"~~ueASgCA~~,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,~~OAACC~~,~~EAAAA~~,~~gBAAe~~,~~CAAC5B,~~GAAIA,~~EAAE~~,~~cAAeC~~,~~EAAYC~~,~~UAAWA~~,~~EAAS2B~~,SAAA,~~CAClEC~~,EAAAA,~~IAACC~~,~~sBAAmBC,~~OAAAC,OAAA,~~GACZlC~~,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,~~iBAAuBiC~~,~~EACpDpB~~,UAAWA,~~EACXqB~~,WAAyB,~~aAAbxB~~,EACZQ,UAAWA,EACXf,~~UA/DU~~,~~IAAWgC~~,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC7B,~~GAAKhC~~,~~EAEL~~,~~IACIW~~,GAAa,SACPX,IACNQ,EAAiB,QACjBO,~~EAAUkB~~,~~QACVlB~~,~~EAAUmB~~,OACd,CAAE,MAAAC,GAEF,~~SACIxB~~,GAAa,EACjB,CACJ,~~IAkDYyB~~,~~aAnBW~~,KACF,~~aAAb7B~~,GACAC,EAAiB,UACrB,~~EAiBQL~~,aAAcA,~~EACdkC~~,aACmB,~~iBAAf1C~~,~~EAAM2C~~,~~MAA0B3C~~,~~EAAM0C~~,gBAIhC,~~SAAb9B~~,~~GACGmB~~,~~MAACa~~,EAAAA,~~oBAAmBX~~,~~OAAAC~~,~~OAAA,~~CAAA,~~EACZlC~~,~~iBAEAE,~~EAAa,GAAGA,~~sBAA4BiC~~,EAEhDU,~~QAASnC~~,~~aAAQ~~,~~EAARA~~,~~EAAUoC,~~MACnBC,~~UAAWrC~~,aAAQ,EAARA,~~EAAUsC~~,OACrBC,~~aAAcvC~~,aAAQ,EAARA,~~EAAUwC~~,UACxBC,~~WAAYxC~~,EACZO,gBAAiBA,EACjBE,UAAWA,EACXd,~~YAlEQ~~,~~IAAW+B~~,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,~~GAAK/B~~,~~IAAgBI~~,aAAQ,EAARA,~~EAAUoC~~,~~OAE/B~~,~~IACI3B~~,GAAmB,SACbb,EAAYI,~~EAASoC~~,~~OAE3BjC~~,EAAiB,~~YAEjBuC~~,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,~~UAIJjC~~,~~EAAUkB~~,~~QACV3B~~,SAAAA,EAAc,GAClB,CAAE,~~MAAA6B~~,GAEF,~~SACIrB~~,GAAmB,EACvB,CACJ,~~IA4CgBV~~,eAAgBA,~~OAGV~~"}
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":["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":"4kBAUgCA,IAI5B,MAAMC,GACFA,EACA,cAAeC,EAAUC,UACzBA,EAASC,QACTA,EAAOC,UACPA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,GAAEC,aAC5BA,EAAYC,eACZA,EAAcC,SACdA,EAAQC,YACRA,EAAWC,SACXA,EAAQC,iBACRA,EAAgBC,oBAChBA,EAAsB,KACtBd,GAEGe,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAAiBC,GAAsBF,EAAAA,UAAS,GAEjDG,EAAYC,EAAAA,aAAa,CAC3BC,SAAUf,EACVgB,iBAAkBT,EAClBU,gBAAkBF,GACd,6BAA6BA,YACjCG,mBAAqBC,GAAc,GAAGA,sBACtCC,qBAAsB,IAAM,+BA6DhC,OACIC,OAAA,MAAA,CACI3B,GAAIA,gBACSC,EACbC,UAAW0B,UAAKC,EAAAA,gBAAwB3B,GAAU4B,SAAA,CAElDC,MAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAAA,EACZnC,EAAK,CACTI,QAASA,EAAO,cACHF,EAAa,GAAGA,iBAAuBkC,EACpDrB,UAAWA,EACXsB,WAAyB,aAAbzB,EACZQ,UAAWA,EACXf,UAnEU,IAAWiC,EAAAA,eAAA,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,EAAAA,IAACa,EAAAA,qCACO7C,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,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC/B,GAAKhC,IAAeY,IAAoBR,aAAQ,EAARA,EAAUqC,OAElD,IACI5B,GAAmB,SACbb,EAAYI,EAASqC,OAE3BlC,EAAiB,YAEjBwC,EAAAA,eAAe,UACfC,EAAAA,SACI,0DACA,UAIJlC,EAAUmB,QACV5B,SAAAA,EAAc,GAClB,CAAE,MAAA8B,GAEF,SACItB,GAAmB,EACvB,CACJ,IAgDgBV,eAAgBA,OAGtB"}

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

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./otp-verification.styles_dg9bm8.css");exports.otpInputWrapper="o1jl65sy";
2	+ //# sourceMappingURL=otp-verification.styles.js.map

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

	@@ -0,0 +1 @@
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":[],"mappings":"qHAI4B"}

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

	@@ -0,0 +1 @@
1	+ .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/cjs/otp-verification/thumbnail/email-thumbnail.js CHANGED Viewed

@@ -1,22 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),l=require("styled-components"),e=require("../../v3_theme/index.js");function a(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}const t=a(l).default.svg`
-    .background-circle {
-        fill: ${e.V3_Colour["bg-stronger"]};
-    }
-    .primary-path {
-        fill: ${e.V3_Colour["icon-primary"]};
-    }
-    .validation-icon {
-        fill: ${e.V3_Colour["bg-available"]};
-    }
-    .accent-light-3 {
-        fill: ${e.V3_Colour["icon-primary-subtle"]};
-    }
-    .accent-light-4 {
-        fill: ${e.V3_Colour["icon-primary-subtlest"]};
-    }
-`;exports.EmailThumbnail=({width:l=120,height:e=120,className:a})=>i.jsxs(t,{width:l,height:e,viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a,children:[i.jsxs("g",{clipPath:"url(#clip0_email_icon)",children:[i.jsx("circle",{cx:"60",cy:"60",r:"60",className:"background-circle"}),i.jsx("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.jsx("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.jsx("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.jsx("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.jsx("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.jsx("defs",{children:i.jsx("clipPath",{id:"clip0_email_icon",children:i.jsx("rect",{width:"120",height:"120",fill:"white"})})})]});
+"use strict";var C=require("react/jsx-runtime"),a=require("clsx"),e=require("./thumbnail.styles.js");function i(C){return C&&"object"==typeof C&&"default"in C?C:{default:C}}var l=i(a);exports.EmailThumbnail=({className:a})=>C.jsxs("svg",{viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:l.default(e.thumbnail,e.emailThumbnail,a),children:[C.jsxs("g",{clipPath:"url(#clip0_email_icon)",children:[C.jsx("circle",{cx:"60",cy:"60",r:"60",className:"background-circle"}),C.jsx("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"}),C.jsx("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"}),C.jsx("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"}),C.jsx("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"}),C.jsx("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"})]}),C.jsx("defs",{children:C.jsx("clipPath",{id:"clip0_email_icon",children:C.jsx("rect",{width:"120",height:"120",fill:"white"})})})]});
 //# sourceMappingURL=email-thumbnail.js.map