@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/cjs/navbar/navbar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("react"),n=require("styled-components"),t=require("../layout/index.js"),i=require("../masthead/masthead.js"),s=require("../overlay/overlay.js"),o=require("../theme/index.js"),d=require("./brand.js"),l=require("./drawer.js"),c=require("./navbar-action-buttons.js"),u=require("./navbar-helper.js"),m=require("./navbar-items.js"),v=require("./navbar-logo-data.js"),b=require("./navbar.styles.js");const h=r.forwardRef(((h,p)=>{var{items:k,className:j,id:x,selectedId:C,compress:y=!1,fixed:B=!0,resources:N,hideNavElements:w=!1,hideNavBranding:f=!1,hideLinkIndicator:g=!1,drawerDismissalExclusions:I=[],actionButtons:q,onItemClick:L,onActionButtonClick:_,onBrandClick:E,masthead:M=!0,layout:D="default",headerLabel:A="Main navigation menu",drawerLabel:O}=h,R=e.__rest(h,["items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel"]);const[$,H]=r.useState(!1),[S,z]=r.useState(!1),T=r.useRef(null),W="stretch"===D,F=r.useRef(null),G=r.useContext(n.ThemeContext),J=v.getDefaultResourceLogo(null==G?void 0:G.resourceScheme),K=o.Breakpoint["lg-max"]({theme:G}),P=(null==N?void 0:N.primary)||J.primary,Q=null==N?void 0:N.secondary;r.useImperativeHandle(p,(()=>Object.assign(F.current,{dismissDrawer:()=>{U()}})),[$]),r.useEffect((()=>(X(),window.addEventListener("resize",X),()=>{window.removeEventListener("resize",X)})),[]);const U=()=>{H(!1),setTimeout((()=>{z(!1)}),550)},V=e=>$&&-1===I.indexOf(e),X=()=>{window.innerWidth<=K&&$&&U()},Y=(e,a)=>{E&&E(a),V("brand-click")&&U()},Z=(e,a)=>{u.NavbarHelper.isNavItemCommon(a)&&a.onClick?a.onClick(e):L&&(e.preventDefault(),L(a)),u.NavbarHelper.isNavItemLink(a)&&!a.subMenu&&V("item-click")&&U()},ee=(e,a)=>{var r;"button"!==a.type&&"download"!==a.type||!(null===(r=a.args)||void 0===r?void 0:r.onClick)?_&&(e.preventDefault(),_(a)):a.args.onClick(e),V("item-click")&&U()},ae=()=>{H(!0),z(!0)},re=()=>{V("close-button-click")&&U()},ne=()=>{const e=k.mobile||k.desktop;return e&&e.length>0||q&&(e=>{const a=e.mobile||e.desktop;return!!a&&a.length&&a.some((e=>!e.uncollapsible))})(q)?a.jsx(b.MobileMenuButton,{ref:T,"aria-label":$?"Close nav menu":"Open nav menu","aria-expanded":$,"data-testid":"button__mobile-menu",onClick:ae,focusHighlight:!0,children:a.jsx(b.MobileMenuIcon,{})}):null};return a.jsxs(b.Wrapper,{ref:F,$fixed:B,className:j,id:x||"navbar-wrapper","data-testid":R["data-testid"]||"navbar-wrapper",children:[M&&a.jsx(i.Masthead,{stretch:W}),a.jsxs(t.Layout.Content,{stretch:W,children:[a.jsxs(b.Nav,{$compress:y,"aria-label":A,children:[!f&&a.jsxs(b.NavBrandContainer,{$compress:y,"data-id":"brand-container",children:[P&&a.jsx(d.Brand,{resources:P,onClick:Y,"data-id":"brand-primary","data-testid":"main__brand",type:"primary"}),Q&&a.jsxs(a.Fragment,{children:[a.jsx(b.NavSeparator,{$compress:y}),a.jsx(d.Brand,{resources:Q,onClick:Y,"data-id":"brand-secondary","data-testid":"main__brand-secondary",type:"secondary"})]})]}),!w&&a.jsxs(b.NavElementsContainer,{$hideNavBranding:f,children:[a.jsx(m.NavbarItems,{items:k.desktop,onItemClick:Z,selectedId:C,hideNavBranding:f,hideLinkIndicator:g}),a.jsx(c.NavbarActionButtons,{actionButtons:q,onActionButtonClick:ee}),ne()]})]}),!w&&a.jsx(s.Overlay,{show:S,enableOverlayClick:!0,onOverlayClick:re,children:a.jsxs(l.Drawer,{show:$,resources:{primary:P,secondary:Q},onClose:re,onBrandClick:Y,actionButtons:q,hideNavBranding:f,mobileMenuRef:T,drawerLabel:O,children:[a.jsx(m.NavbarItems,{items:k.mobile||k.desktop,onItemClick:Z,selectedId:C,mobile:!0,hideLinkIndicator:g}),a.jsx(c.NavbarActionButtons,{actionButtons:q,onActionButtonClick:ee,mobile:!0})]})})]})]})}));exports.Navbar=h;
+"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:!0,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

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","sources":["../../../src/navbar/navbar.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { Breakpoint } from \"../theme\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport {\n    MobileMenuButton,\n    MobileMenuIcon,\n    Nav,\n    NavBrandContainer,\n    NavElementsContainer,\n    NavSeparator,\n    Wrapper,\n} from \"./navbar.styles\";\nimport {\n    BrandType,\n    DrawerDismissalMethod,\n    NavItemCommonProps,\n    NavItemProps,\n    NavbarActionButtonsProps,\n    NavbarButtonProps,\n    NavbarDrawerApi,\n    NavbarDrawerHandle,\n    NavbarProps,\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?.resourceScheme);\n    const tabletWidth = Breakpoint[\"lg-max\"]({ theme });\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        <NavBrandContainer $compress={compress} data-id=\"brand-container\">\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                    <NavSeparator $compress={compress} />\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        </NavBrandContainer>\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                <MobileMenuButton\n                    ref={mobileMenuRef}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={true}\n                >\n                    <MobileMenuIcon />\n                </MobileMenuButton>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <Nav $compress={compress} aria-label={headerLabel}>\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <NavElementsContainer\n                            $hideNavBranding={hideNavBranding}\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                        </NavElementsContainer>\n                    )}\n                </Nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <Wrapper\n            ref={elementRef}\n            $fixed={fixed}\n            className={className}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </Wrapper>\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","resourceScheme","tabletWidth","Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","event","type","handleNavItemClick","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","MobileMenuButton","focusHighlight","MobileMenuIcon","_jsxs","Wrapper","$fixed","children","Masthead","stretch","Layout","Content","Nav","$compress","NavBrandContainer","Brand","_Fragment","NavSeparator","NavElementsContainer","$hideNavBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}
+{"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        // eslint-disable-next-line react-hooks/exhaustive-deps\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        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const dismissDrawer = () => {\n        setShowDrawer(false);\n        setTimeout(() => {\n            setShowOverlay(false);\n        }, 550); // For drawer animation to complete + buffer\n    };\n\n    const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n        return (\n            showDrawer &&\n            blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n        );\n    };\n\n    const hasCollapsibleActionButtons = (\n        actionButtons: NavbarActionButtonsProps\n    ) => {\n        const drawerActionButtons =\n            actionButtons.mobile || actionButtons.desktop;\n        if (drawerActionButtons) {\n            return (\n                drawerActionButtons.length &&\n                drawerActionButtons.some(\n                    (actionButton) => !actionButton.uncollapsible\n                )\n            );\n        }\n\n        return false;\n    };\n\n    // =============================================================================\n    // EVENT HANDLER\n    // =============================================================================\n    const handleResize = () => {\n        if (window.innerWidth <= tabletWidth && showDrawer) {\n            dismissDrawer();\n        }\n    };\n\n    const handleBrandClick = (\n        _event: React.MouseEvent<HTMLAnchorElement>,\n        type: BrandType\n    ) => {\n        if (onBrandClick) {\n            onBrandClick(type);\n        }\n\n        if (shouldDismissDrawer(\"brand-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleNavItemClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<K> | NavItemCommonProps<K>\n    ) => {\n        if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item);\n        }\n\n        if (\n            NavbarHelper.isNavItemLink(item) &&\n            !item.subMenu &&\n            shouldDismissDrawer(\"item-click\")\n        ) {\n            dismissDrawer();\n        }\n    };\n\n    const handleActionButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => {\n        if (\n            (actionButton.type === \"button\" ||\n                actionButton.type === \"download\") &&\n            actionButton.args?.onClick\n        ) {\n            actionButton.args.onClick(\n                event as React.MouseEvent<HTMLButtonElement>\n            );\n        } else if (onActionButtonClick) {\n            event.preventDefault();\n            onActionButtonClick(actionButton);\n        }\n\n        if (shouldDismissDrawer(\"item-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleMobileMenuButtonClick = () => {\n        setShowDrawer(true);\n        setShowOverlay(true);\n    };\n\n    const handleDrawerClose = () => {\n        if (shouldDismissDrawer(\"close-button-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDrawer = () => (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={handleDrawerClose}\n        >\n            <Drawer\n                show={showDrawer}\n                resources={{ primary, secondary }}\n                onClose={handleDrawerClose}\n                onBrandClick={handleBrandClick}\n                actionButtons={actionButtons}\n                hideNavBranding={hideNavBranding}\n                mobileMenuRef={mobileMenuRef}\n                drawerLabel={drawerLabel}\n            >\n                <NavbarItems\n                    items={items.mobile || items.desktop}\n                    onItemClick={handleNavItemClick}\n                    selectedId={selectedId}\n                    mobile\n                    hideLinkIndicator={hideLinkIndicator}\n                />\n                <NavbarActionButtons\n                    actionButtons={actionButtons}\n                    onActionButtonClick={handleActionButtonClick}\n                    mobile\n                />\n            </Drawer>\n        </Overlay>\n    );\n\n    const renderBrand = () => (\n        <div\n            className={clsx(\n                styles.navBrandContainer,\n                compress\n                    ? styles.navBrandContainerCompressed\n                    : styles.navBrandContainerFull,\n                styles.navBrandContainerResponsive\n            )}\n            data-id=\"brand-container\"\n        >\n            {primary && (\n                <Brand\n                    resources={primary}\n                    onClick={handleBrandClick}\n                    data-id=\"brand-primary\"\n                    data-testid=\"main__brand\"\n                    type=\"primary\"\n                />\n            )}\n            {secondary && (\n                <>\n                    <div\n                        className={clsx(\n                            styles.navSeparator,\n                            compress\n                                ? styles.navSeparatorCompressed\n                                : styles.navSeparatorFull,\n                            styles.navSeparatorResponsive\n                        )}\n                    />\n                    <Brand\n                        resources={secondary}\n                        onClick={handleBrandClick}\n                        data-id=\"brand-secondary\"\n                        data-testid=\"main__brand-secondary\"\n                        type=\"secondary\"\n                    />\n                </>\n            )}\n        </div>\n    );\n\n    const renderMobileMenuButton = () => {\n        const drawerItems = items.mobile || items.desktop;\n        if (\n            (drawerItems && drawerItems.length > 0) ||\n            (actionButtons && hasCollapsibleActionButtons(actionButtons))\n        ) {\n            return (\n                <ClickableIcon\n                    ref={mobileMenuRef}\n                    className={styles.mobileMenuButton}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={true}\n                >\n                    <MenuIcon className={styles.mobileMenuIcon} />\n                </ClickableIcon>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <nav\n                    className={clsx(\n                        styles.nav,\n                        compress && styles.navCompressed,\n                        theme?.mode === \"dark\" && styles.navDark\n                    )}\n                    aria-label={headerLabel}\n                >\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <div\n                            className={clsx(\n                                styles.navElementsContainer,\n                                !hideNavBranding &&\n                                    styles.navElementsContainerWithBranding\n                            )}\n                        >\n                            <NavbarItems\n                                items={items.desktop}\n                                onItemClick={handleNavItemClick}\n                                selectedId={selectedId}\n                                hideNavBranding={hideNavBranding}\n                                hideLinkIndicator={hideLinkIndicator}\n                            />\n                            <NavbarActionButtons\n                                actionButtons={actionButtons}\n                                onActionButtonClick={handleActionButtonClick}\n                            />\n                            {renderMobileMenuButton()}\n                        </div>\n                    )}\n                </nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <div\n            ref={elementRef}\n            className={clsx(\n                styles.wrapper,\n                fixed ? styles.wrapperFixed : styles.wrapperRelative,\n                theme?.mode === \"dark\"\n                    ? styles.wrapperDark\n                    : styles.wrapperLight,\n                className\n            )}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * The main site navigation bar with desktop and mobile drawer views.\n *\n * Use `Navbar` to render the primary navigation header. It displays brand\n * logos, navigation items, and action buttons in a desktop bar, and\n * automatically collapses items into a slide-in drawer for mobile viewports.\n * @keywords brand, header, navigation\n */\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidth","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}

package/cjs/navbar/navbar.styles.js

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

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

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

package/cjs/navbar/navbar.styles_koy0c7.css

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

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

@@ -1 +1 @@
-{"version":3,"file":"notification-banner-hoc.js","sources":["../../../src/notification-banner/notification-banner-hoc.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport React from \"react\";\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport {\n    ContentLinkAttributes,\n    ContentTextAttributes,\n    NotificationBannerWithForwardedRefProps,\n    NotificationContentAttributes,\n} from \"./types\";\n\nexport const withNotificationBanner = (\n    data: NotificationContentAttributes[]\n) => {\n    const ComponentToReturn = (\n        props: NotificationBannerWithForwardedRefProps,\n        ref: React.Ref<HTMLDivElement>\n    ) => {\n        const renderContent = () => {\n            if (data.length > 0) {\n                return data.map((attribute, index) => {\n                    if (attribute.type === \"text\") {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentTextAttributes;\n\n                        const sanitizedContent = DOMPurify.sanitize(\n                            attribute.content\n                        );\n                        return (\n                            <p\n                                key={index}\n                                {...otherAttributes}\n                                dangerouslySetInnerHTML={{\n                                    __html: sanitizedContent,\n                                }}\n                            />\n                        );\n                    } else {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentLinkAttributes;\n                        return (\n                            <NotificationBanner.Link\n                                key={index}\n                                {...otherAttributes}\n                            >\n                                {attribute.content}\n                            </NotificationBanner.Link>\n                        );\n                    }\n                });\n            }\n\n            console.error(\"[NotificationBannerHOC] Empty data passed\");\n            return null;\n        };\n\n        return (\n            <NBComponent forwardedRef={ref} {...props}>\n                {renderContent()}\n            </NBComponent>\n        );\n    };\n\n    return React.forwardRef(ComponentToReturn);\n};\n"],"names":["data","React","forwardRef","props","ref","_jsx","NBComponent","Object","assign","forwardedRef","children","length","map","attribute","index","type","otherAttributes","sanitizedContent","DOMPurify","sanitize","content","dangerouslySetInnerHTML","__html","NotificationBanner","Link","console","error"],"mappings":"gRAWIA,GAmDOC,EAAAA,QAAMC,YAjDa,CACtBC,EACAC,IAyCIC,EAAAA,IAACC,EAAAA,YAAWC,OAAAC,OAAA,CAACC,aAAcL,GAASD,EAAK,CAAAO,SAtCrCV,EAAKW,OAAS,EACPX,EAAKY,KAAI,CAACC,EAAWC,KACxB,GAAuB,SAAnBD,EAAUE,KAAiB,CAC3B,MAAMC,EACFH,EAAUG,gBAERC,EAAmBC,EAAAA,QAAUC,SAC/BN,EAAUO,SAEd,OACIf,EAAAA,IAAA,IAAAE,OAAAC,OAAA,GAEQQ,EAAe,CACnBK,wBAAyB,CACrBC,OAAQL,KAHPH,EAOjB,CAAO,CACH,MAAME,EACFH,EAAUG,gBACd,OACIX,EAAAA,IAACkB,EAAAA,mBAAmBC,KAAIjB,OAAAC,OAAA,CAAA,EAEhBQ,EAAe,CAAAN,SAElBG,EAAUO,UAHNN,EAMjB,MAIRW,QAAQC,MAAM,6CACP"}
+{"version":3,"file":"notification-banner-hoc.js","sources":["../../../src/notification-banner/notification-banner-hoc.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport React from \"react\";\n\nimport { NBComponent, NotificationBanner } from \"./notification-banner\";\nimport type {\n    ContentLinkAttributes,\n    ContentTextAttributes,\n    NotificationBannerWithForwardedRefProps,\n    NotificationContentAttributes,\n} from \"./types\";\n\n/**\n * Higher-order component that wraps `NotificationBanner` and renders its\n * content from a structured data array.\n * *\n * @param data Content items to render inside the banner.\n */\nexport const withNotificationBanner = (\n    data: NotificationContentAttributes[]\n) => {\n    const ComponentToReturn = (\n        props: NotificationBannerWithForwardedRefProps,\n        ref: React.Ref<HTMLDivElement>\n    ) => {\n        const renderContent = () => {\n            if (data.length > 0) {\n                return data.map((attribute, index) => {\n                    if (attribute.type === \"text\") {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentTextAttributes;\n\n                        const sanitizedContent = DOMPurify.sanitize(\n                            attribute.content\n                        );\n                        return (\n                            <p\n                                key={index}\n                                {...otherAttributes}\n                                dangerouslySetInnerHTML={{\n                                    __html: sanitizedContent,\n                                }}\n                            />\n                        );\n                    } else {\n                        const otherAttributes =\n                            attribute.otherAttributes as ContentLinkAttributes;\n                        return (\n                            <NotificationBanner.Link\n                                key={index}\n                                {...otherAttributes}\n                            >\n                                {attribute.content}\n                            </NotificationBanner.Link>\n                        );\n                    }\n                });\n            }\n\n            console.error(\"[NotificationBannerHOC] Empty data passed\");\n            return null;\n        };\n\n        return (\n            <NBComponent forwardedRef={ref} {...props}>\n                {renderContent()}\n            </NBComponent>\n        );\n    };\n\n    return React.forwardRef(ComponentToReturn);\n};\n"],"names":["data","React","forwardRef","props","ref","_jsx","NBComponent","Object","assign","forwardedRef","children","length","map","attribute","index","type","otherAttributes","sanitizedContent","DOMPurify","sanitize","content","dangerouslySetInnerHTML","__html","NotificationBanner","Link","console","error"],"mappings":"gRAkBIA,GAmDOC,EAAAA,QAAMC,YAjDa,CACtBC,EACAC,IAyCIC,EAAAA,IAACC,EAAAA,YAAWC,OAAAC,OAAA,CAACC,aAAcL,GAASD,EAAK,CAAAO,SAtCrCV,EAAKW,OAAS,EACPX,EAAKY,KAAI,CAACC,EAAWC,KACxB,GAAuB,SAAnBD,EAAUE,KAAiB,CAC3B,MAAMC,EACFH,EAAUG,gBAERC,EAAmBC,EAAAA,QAAUC,SAC/BN,EAAUO,SAEd,OACIf,EAAAA,IAAA,IAAAE,OAAAC,OAAA,GAEQQ,EAAe,CACnBK,wBAAyB,CACrBC,OAAQL,KAHPH,EAOjB,CAAO,CACH,MAAME,EACFH,EAAUG,gBACd,OACIX,EAAAA,IAACkB,EAAAA,mBAAmBC,KAAIjB,OAAAC,OAAA,CAAA,EAEhBQ,EAAe,CAAAN,SAElBG,EAAUO,UAHNN,EAMjB,MAIRW,QAAQC,MAAM,6CACP"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport React, { NamedExoticComponent, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n    AccessibleBannerButton,\n    ActionButton,\n    Container,\n    Content,\n    ContentContainer,\n    ContentText,\n    ContentWrapper,\n    IconContainer,\n    ContentLink as NBLink,\n    StyledIconButton,\n    Wrapper,\n} from \"./notification-banner.styles\";\nimport {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <StyledIconButton\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </StyledIconButton>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <ActionButton\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </ActionButton>\n        );\n    };\n\n    const renderContent = () => (\n        <Content data-testid={formatId(\"text-content\", testId)}>\n            <ContentWrapper>\n                <ContentText\n                    $maxCollapsedHeight={\n                        maxCollapsedHeight && contentHeight > maxCollapsedHeight\n                            ? maxCollapsedHeight\n                            : undefined\n                    }\n                >\n                    <div ref={contentRef}>{children}</div>\n                </ContentText>\n                {renderActionButton()}\n            </ContentWrapper>\n        </Content>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <AccessibleBannerButton aria-label={\"Clickable banner\"} type=\"button\" />\n    );\n\n    return (\n        <Wrapper\n            ref={forwardedRef}\n            $sticky={sticky}\n            $clickable={!!onClick}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Container id={formatId(\"container\", id)}>\n                {icon && <IconContainer aria-hidden>{icon}</IconContainer>}\n                <ContentContainer>{renderContent()}</ContentContainer>\n                {dismissible && renderDismissButton()}\n            </Container>\n            {onClick && renderAccessibleBannerButton()}\n        </Wrapper>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","Wrapper","Object","assign","$sticky","$clickable","role","Container","formatId","_jsx","IconContainer","ContentContainer","Content","ContentWrapper","ContentText","$maxCollapsedHeight","undefined","ActionButton","type","StyledIconButton","tabIndex","focusOutline","focusHighlight","CrossIcon","AccessibleBannerButton","componentName","Base","React","forwardRef","props","displayName","NotificationBanner","Link","NBLink"],"mappings":"8TAqBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,GAAIX,EACDY,EAAUC,EAAAA,OAAAb,EAZW,oIAiBxB,MAAMc,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAAA,SAAkBf,IAC1CgB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,sBAKvDC,EAAAA,WAAU,KACNP,EAAWd,EAAQ,GACpB,CAACA,IAKJ,MAAMsB,EAAiBC,IACnBA,EAAMC,kBACNV,GAAW,GAEPb,GAAeE,GAAWA,GAAW,EAGvCsB,EACFF,KAEKf,aAAY,EAAZA,EAAcD,WAInBgB,EAAMC,kBACNhB,EAAaD,QAAQgB,GAAM,EAM/B,IAAKV,EAAW,OAAO,KAsDvB,OACIa,OAACC,EAAAA,QAAOC,OAAAC,OAAA,CACJX,IAAKb,EAAYyB,QACR5B,EAAM6B,aACDxB,EACdA,QAASA,EACTyB,KAAK,UACDtB,EAAU,CAAAX,SAAA,CAEd2B,EAAAA,KAACO,EAAAA,UAAS,CAAC7B,GAAI8B,EAAS,YAAa9B,GAAGL,SAAA,CACnCU,GAAQ0B,EAAAA,IAACC,EAAAA,cAAa,CAAA,eAAA,EAAArC,SAAcU,IACrC0B,EAAAA,IAACE,EAAAA,iBAAgB,CAAAtC,SA/BzBoC,EAAAA,IAACG,EAAAA,QAAO,CAAA,cAAcJ,EAAS,eAAgBtB,GAAOb,SAClD2B,EAAAA,KAACa,EAAAA,eAAc,CAAAxC,SAAA,CACXoC,EAAAA,IAACK,EAAAA,YAAW,CAAAC,oBAEJnC,GAAsBW,EAAgBX,EAChCA,OACAoC,EAAS3C,SAGnBoC,EAAAA,IAAA,MAAA,CAAKjB,IAAKC,EAAUpB,SAAGA,MAzB9BS,EAGD2B,MAACQ,EAAAA,aAAYf,OAAAC,OAAA,CACTzB,GAAI8B,EAAS,gBAAiB9B,GAAG,cACpB8B,EAAS,gBAAiBtB,GACvCgC,KAAK,UACDpC,EAAY,CAChBD,QAASkB,WAERjB,EAAaT,YAVI,YAgDjBE,GA/DTkC,EAAAA,IAACU,EAAAA,iBAAgB,CACbC,SAAU,EACVvC,QAASe,EACTlB,GAAI8B,EAAS,iBAAkB9B,GAAG,cACrB8B,EAAS,iBAAkBtB,GACxCmC,aAAa,UACbC,gBAAgB,EAChBJ,KAAK,SAAQ,aACF,QAAO7C,SAElBoC,EAAAA,IAACc,YAAS,CAAA,eAAA,SAuDT1C,GAjBL4B,EAAAA,IAACe,yBAAsB,CAAA,aAAa,mBAAoBN,KAAK,cAkBnD,EAiBZV,EAAW,CAACiB,EAAuB/C,EAAK,YACnC,GAAGA,KAAM+C,IAMdC,OAAOC,QAAMC,YAjBD,CACdC,EACArC,IAEOiB,EAAAA,IAACtC,EAAW+B,OAAAC,OAAA,GAAK0B,GAAOlD,aAAca,OAchDkC,EAA8BI,YAAc,2BAChCC,EAAqB7B,OAAOC,OAAOuB,EAAM,CAClDM,KAAMC,EAAAA"}
+{"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    className,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n    const contentTextRef = useRef<HTMLDivElement>(null);\n\n    const isCollapsed =\n        maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n    useApplyStyle(contentTextRef, {\n        [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n            ? formatUnitValue(maxCollapsedHeight, \"px\")\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <ClickableIcon\n            className={styles.dismissButton}\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </ClickableIcon>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <button\n                className={styles.actionButton}\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </button>\n        );\n    };\n\n    const renderContent = () => (\n        <div\n            className={styles.content}\n            data-testid={formatId(\"text-content\", testId)}\n        >\n            <div className={styles.contentWrapper}>\n                <div\n                    ref={contentTextRef}\n                    className={clsx(\n                        styles.contentText,\n                        isCollapsed && styles.contentTextCollapsed\n                    )}\n                >\n                    <div ref={contentRef}>{children}</div>\n                </div>\n                {renderActionButton()}\n            </div>\n        </div>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <VisuallyHidden>\n            <button aria-label={\"Clickable banner\"} type=\"button\" />\n        </VisuallyHidden>\n    );\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\n                styles.wrapper,\n                sticky && styles.wrapperSticky,\n                !!onClick && styles.wrapperClickable,\n                className\n            )}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Layout.Content id={formatId(\"container\", id)}>\n                {icon && (\n                    <div className={styles.iconContainer} aria-hidden>\n                        {icon}\n                    </div>\n                )}\n                <div className={styles.contentContainer}>{renderContent()}</div>\n                {dismissible && renderDismissButton()}\n            </Layout.Content>\n            {onClick && renderAccessibleBannerButton()}\n        </div>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n    return (\n        <Typography.LinkBL\n            ref={ref}\n            className={clsx(styles.contentLink, props.className)}\n            {...props}\n        />\n    );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\n\n// @catalog\n/**\n * A full-width informational banner that sits at the top of the page.\n *\n * Use `NotificationBanner` to surface important or persistent messages that\n * should remain visible until the user dismisses them.\n * @keywords alert, announcement, banner, message\n */\nexport const NotificationBanner = Object.assign(Base, {\n    /** Renders an inline link styled for use inside a `NotificationBanner`. */\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"k5BAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,EAAIC,UACJA,GAASZ,EACNa,EAAUC,EAAAA,OAAAd,EAbW,gJAkBxB,MAAMe,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAAA,SAAkBhB,IAC1CiB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,sBACjDC,EAAiBC,EAAAA,OAAuB,MAExCC,EACFlB,GAAsBY,EAAgBZ,EAE1CmB,EAAAA,cAAcH,EAAgB,CAC1B,CAACI,EAAAA,OAAcC,YAAYrB,oBAAqBkB,EAC1CI,EAAAA,gBAAgBtB,EAAoB,WACpCuB,IAMVC,EAAAA,WAAU,KACNf,EAAWf,EAAQ,GACpB,CAACA,IAKJ,MAAM+B,EAAiBC,IACnBA,EAAMC,kBACNlB,GAAW,GAEPd,GAAeE,GAAWA,GAAW,EAGvC+B,EACFF,KAEKxB,aAAY,EAAZA,EAAcD,WAInByB,EAAMC,kBACNzB,EAAaD,QAAQyB,GAAM,EAM/B,IAAKlB,EAAW,OAAO,KA6DvB,OACIqB,EAAAA,0BACIhB,IAAKd,EACLK,UAAW0B,EAAAA,QACPC,EAAAA,QACAnC,GAAUoC,EAAAA,gBACR/B,GAAWgC,EAAAA,iBACb7B,GAEJH,QAASA,EACTiC,KAAK,UACD7B,aAEJwB,EAAAA,KAACM,EAAAA,OAAOC,QAAO,CAACtC,GAAIuC,EAAS,YAAavC,GAAGL,SAAA,CACxCU,GACGmC,EAAAA,WAAKlC,UAAWmC,EAAAA,wCACXpC,IAGTmC,EAAAA,IAAA,MAAA,CAAKlC,UAAWoC,EAAAA,iBAAuB/C,SA5C/C6C,EAAAA,IAAA,MAAA,CACIlC,UAAWqC,EAAAA,QAAc,cACZJ,EAAS,eAAgB9B,GAAOd,SAE7CoC,OAAA,MAAA,CAAKzB,UAAWsC,EAAAA,eAAqBjD,SAAA,CACjC6C,EAAAA,IAAA,MAAA,CACIzB,IAAKG,EACLZ,UAAW0B,EAAAA,QACPa,EAAAA,YACAzB,GAAe0B,wBAClBnD,SAED6C,EAAAA,IAAA,MAAA,CAAKzB,IAAKC,EAAUrB,SAAGA,MA7B9BS,EAGDoC,MAAA,SAAAO,OAAAC,OAAA,CACI1C,UAAW2C,EAAAA,aACXjD,GAAIuC,EAAS,gBAAiBvC,iBACjBuC,EAAS,gBAAiB9B,GACvCyC,KAAK,UACD9C,EAAY,CAChBD,QAAS2B,EAAyBnC,SAEjCS,EAAaT,YAXI,YA8DjBE,GA9ET2C,MAACW,EAAAA,cAAa,CACV7C,UAAW8C,EAAAA,cACXC,SAAU,EACVlD,QAASwB,EACT3B,GAAIuC,EAAS,iBAAkBvC,GAAG,cACrBuC,EAAS,iBAAkB9B,GACxC6C,aAAa,UACbC,gBAAgB,EAChBL,KAAK,SAAQ,aACF,QAAOvD,SAElB6C,EAAAA,IAACgB,EAAAA,UAAS,CAAA,eAAA,SAqETrD,GA3BLqC,EAAAA,IAACiB,EAAAA,eAAc,CAAA9D,SACX6C,EAAAA,IAAA,SAAA,CAAA,aAAoB,mBAAoBU,KAAK,gBA2B3C,EAcRQ,EAASC,EAAAA,QAAMC,YAGnB,SAAgCC,EAAO9C,GACrC,OACIyB,EAAAA,IAACsB,EAAAA,WAAWC,OAAMhB,OAAAC,OAAA,CACdjC,IAAKA,EACLT,UAAW0B,EAAAA,QAAKgC,EAAAA,YAAoBH,EAAMvD,YACtCuD,GAGhB,IACCH,EAAgCO,YAAc,0BAK/C,MAAM1B,EAAW,CAAC2B,EAAuBlE,EAAK,YACnC,GAAGA,KAAMkE,IAMdC,EAAOR,EAAAA,QAAMC,YA/BD,CACdC,EACA9C,IAEOyB,EAAAA,IAAC/C,EAAWsD,OAAAC,OAAA,GAAKa,GAAO5D,aAAcc,OA4BhDoD,EAA8BF,YAAc,2BAUhCG,EAAqBrB,OAAOC,OAAOmB,EAAM,CAElDE,KAAMX"}

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

@@ -1,112 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../layout/index.js"),t=require("../shared/clickable-icon/clickable-icon.js"),i=require("../theme/index.js"),r=require("../typography/typography.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e);const l=e.css`
-    color: ${i.Colour["hyperlink-inverse"]};
-
-    svg {
-        color: ${i.Colour["icon-primary-inverse"]};
-    }
-
-    &:hover,
-    &:active,
-    &:visited,
-    &:focus {
-        color: ${i.Colour["hyperlink-inverse"]};
-        svg {
-            color: ${i.Colour["icon-primary-inverse"]};
-        }
-    }
-`,s=a.default.div`
-    position: ${e=>e.$sticky?"sticky":"relative"};
-    left: 0;
-    top: 0;
-    width: 100%;
-    transition: all ${i.Motion["duration-800"]} ${i.Motion["ease-default"]};
-    background: ${i.Colour["bg-inverse-subtle"]};
-    border-radius: ${i.Radius.none};
-    z-index: 25;
-    cursor: ${e=>e.$clickable?"pointer":"default"};
-`,p=a.default(o.Layout.Content)``,c=a.default.div`
-    flex: 1;
-    align-items: flex-start;
-    padding: ${i.Spacing["spacing-24"]} 0;
-`,d=a.default.div`
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-
-    ${i.Font["body-baseline-regular"]}
-    color: ${i.Colour["text-inverse"]};
-
-    p {
-        display: inline-block;
-    }
-
-    strong {
-        ${i.Font["body-baseline-semibold"]}
-        color: ${i.Colour["text-inverse"]};
-    }
-
-    a {
-        ${i.Font["body-baseline-regular"]}
-        ${l}
-    }
-`,u=a.default.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-`,g=a.default.div`
-    flex: 1;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    ${o=>{const t="linear-gradient(to bottom, black 50%, transparent 100%)";if(o.$maxCollapsedHeight)return e.css`
-                max-height: ${o.$maxCollapsedHeight}px;
-                overflow: hidden;
-                -webkit-mask-image: ${t};
-                mask-image: ${t};
-            `}}
-`,f=a.default(r.Typography.LinkBL)`
-    position: relative;
-
-    ${l}
-`,x=a.default(t.ClickableIcon)`
-    margin-right: -${i.Spacing["spacing-24"]};
-    padding-left: ${i.Spacing["spacing-16"]};
-    height: max-content;
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-        color: ${i.Colour["icon-inverse"]};
-    }
-`,$=a.default.button`
-    display: flex;
-    align-items: center;
-    gap: ${i.Spacing["spacing-4"]};
-    align-self: flex-start;
-    margin-top: ${i.Spacing["spacing-8"]};
-
-    border: none;
-    background: transparent;
-    color: ${i.Colour["hyperlink-inverse"]};
-    ${i.Font["body-md-semibold"]};
-
-    cursor: pointer;
-`,h=a.default.button`
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-`,b=a.default.div`
-    height: 1.5rem;
-    width: 1.5rem;
-    margin: ${i.Spacing["spacing-24"]} ${i.Spacing["spacing-24"]} 0 0;
-    flex-shrink: 0;
-
-    svg {
-        height: 100%;
-        width: 100%;
-        color: ${i.Colour["hyperlink-inverse"]};
-    }
-`;exports.AccessibleBannerButton=h,exports.ActionButton=$,exports.Container=p,exports.Content=d,exports.ContentContainer=c,exports.ContentLink=f,exports.ContentText=g,exports.ContentWrapper=u,exports.IconContainer=b,exports.StyledIconButton=x,exports.Wrapper=s;
+"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

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.styles.js","sources":["../../../src/notification-banner/notification-banner.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Layout } from \"../layout\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface WrapperStyleProps {\n    $sticky: boolean;\n    $clickable: boolean;\n}\n\ninterface ContentStyleProps {\n    $maxCollapsedHeight?: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst commonLinkStyle = css`\n    color: ${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\nexport const Wrapper = styled.div<WrapperStyleProps>`\n    position: ${(props) => (props.$sticky ? \"sticky\" : \"relative\")};\n    left: 0;\n    top: 0;\n    width: 100%;\n    transition: all ${Motion[\"duration-800\"]} ${Motion[\"ease-default\"]};\n    background: ${Colour[\"bg-inverse-subtle\"]};\n    border-radius: ${Radius[\"none\"]};\n    z-index: 25;\n    cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n`;\n\nexport const Container = styled(Layout.Content)``;\n\nexport const ContentContainer = styled.div`\n    flex: 1;\n    align-items: flex-start;\n    padding: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const Content = styled.div<ContentStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: flex-start;\n\n    ${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        ${commonLinkStyle}\n    }\n`;\n\nexport const ContentWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n`;\n\nexport const ContentText = styled.div<{ $maxCollapsedHeight?: number }>`\n    flex: 1;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    ${(props) => {\n        const gradient =\n            \"linear-gradient(to bottom, black 50%, transparent 100%)\";\n        if (props.$maxCollapsedHeight) {\n            return css`\n                max-height: ${props.$maxCollapsedHeight}px;\n                overflow: hidden;\n                -webkit-mask-image: ${gradient};\n                mask-image: ${gradient};\n            `;\n        }\n    }}\n`;\n\nexport const ContentLink = styled(Typography.LinkBL)`\n    position: relative;\n\n    ${commonLinkStyle}\n`;\n\nexport const StyledIconButton = styled(ClickableIcon)`\n    margin-right: -${Spacing[\"spacing-24\"]};\n    padding-left: ${Spacing[\"spacing-16\"]};\n    height: max-content;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${Colour[\"icon-inverse\"]};\n    }\n`;\n\nexport const ActionButton = styled.button`\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 AccessibleBannerButton = styled.button`\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n`;\n\nexport const IconContainer = styled.div`\n    height: 1.5rem;\n    width: 1.5rem;\n    margin: ${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":["commonLinkStyle","css","Colour","Wrapper","styled","div","props","$sticky","Motion","Radius","$clickable","Container","Layout","Content","ContentContainer","Spacing","Font","ContentWrapper","ContentText","gradient","$maxCollapsedHeight","ContentLink","Typography","LinkBL","StyledIconButton","ClickableIcon","ActionButton","button","AccessibleBannerButton","IconContainer"],"mappings":"mSAsBA,MAAMA,EAAkBC,EAAAA,GAAG;aACdC,EAAAA,OAAO;;;iBAGHA,EAAAA,OAAO;;;;;;;iBAOPA,EAAAA,OAAO;;qBAEHA,EAAAA,OAAO;;;EAKfC,EAAUC,EAAAA,QAAOC,GAAsB;gBACnCC,GAAWA,EAAMC,QAAU,SAAW;;;;sBAIjCC,EAAAA,OAAO,mBAAmBA,EAAAA,OAAO;kBACrCN,EAAAA,OAAO;qBACJO,EAAAA,OAAa;;cAEnBH,GAAWA,EAAMI,WAAa,UAAY;EAG5CC,EAAYP,EAAAA,QAAOQ,SAAOC,QAAQ,GAElCC,EAAmBV,EAAAA,QAAOC,GAAG;;;eAG3BU,EAAAA,QAAQ;EAGVF,EAAUT,EAAAA,QAAOC,GAAsB;;;;;MAK9CW,EAAAA,KAAK;aACEd,EAAAA,OAAO;;;;;;;UAOVc,EAAAA,KAAK;iBACEd,EAAAA,OAAO;;;;UAIdc,EAAAA,KAAK;UACLhB;;EAIGiB,EAAiBb,EAAAA,QAAOC,GAAG;;;;EAM3Ba,EAAcd,EAAAA,QAAOC,GAAqC;;;;MAIhEC,IACC,MAAMa,EACF,0DACJ,GAAIb,EAAMc,oBACN,OAAOnB,KAAG;8BACQK,EAAMc;;sCAEED;8BACRA;aAEtB;EAIKE,EAAcjB,EAAAA,QAAOkB,aAAWC,OAAO;;;MAG9CvB;EAGOwB,EAAmBpB,EAAAA,QAAOqB,EAAAA,cAAc;qBAChCV,EAAAA,QAAQ;oBACTA,EAAAA,QAAQ;;;;;iBAKXb,EAAAA,OAAO;;EAIXwB,EAAetB,EAAAA,QAAOuB,MAAM;;;WAG9BZ,EAAAA,QAAQ;;kBAEDA,EAAAA,QAAQ;;;;aAIbb,EAAAA,OAAO;MACdc,EAAAA,KAAK;;;EAKEY,EAAyBxB,EAAAA,QAAOuB,MAAM;;;;;;;;EAUtCE,EAAgBzB,EAAAA,QAAOC,GAAG;;;cAGzBU,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;;;;;;iBAM9Bb,EAAAA,OAAO;;"}
+{"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/cjs/notification-banner/notification-banner.styles_uxlysy.css

@@ -0,0 +1,12 @@
+@layer fds{.w17suq18{position:relative;left:0;top:0;width:100%;-webkit-transition:all var(--fds-motion-duration-800) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-800) var(--fds-motion-timing-ease-default);background:var(--fds-colour-bg-inverse-subtle);border-radius:var(--fds-radius-none);z-index:25;cursor:default;}
+.w1ixs8gf{position:-webkit-sticky;position:sticky;}
+.w1trwg7u{cursor:pointer;}
+.cmwsx4o{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:var(--fds-spacing-24) 0;}
+.c1qc2rgl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-family:var(--fds-font-family-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-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-input/otp-input.js

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