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

package/navbar/navbar.js

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

package/navbar/navbar.js.map

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

package/navbar/navbar.styles.d.ts

@@ -1,20 +1,25 @@
-interface StyleProps {
-    $compress?: boolean;
-    $fixed?: boolean;
-    $hideNavBranding?: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const Nav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const NavElementsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const MobileMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const MobileMenuIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const NavBrandContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const NavSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export {};
+export declare const tokens: {
+    nav: {
+        height: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperFixed: import("@linaria/core").LinariaClassName;
+export declare const wrapperRelative: import("@linaria/core").LinariaClassName;
+export declare const wrapperDark: import("@linaria/core").LinariaClassName;
+export declare const wrapperLight: import("@linaria/core").LinariaClassName;
+export declare const nav: import("@linaria/core").LinariaClassName;
+export declare const navCompressed: import("@linaria/core").LinariaClassName;
+export declare const navDark: import("@linaria/core").LinariaClassName;
+export declare const navElementsContainer: import("@linaria/core").LinariaClassName;
+export declare const navElementsContainerWithBranding: import("@linaria/core").LinariaClassName;
+export declare const mobileMenuButton: import("@linaria/core").LinariaClassName;
+export declare const mobileMenuIcon: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainer: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainerCompressed: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainerFull: import("@linaria/core").LinariaClassName;
+export declare const navBrandContainerResponsive: import("@linaria/core").LinariaClassName;
+export declare const navSeparator: import("@linaria/core").LinariaClassName;
+export declare const navSeparatorCompressed: import("@linaria/core").LinariaClassName;
+export declare const navSeparatorFull: import("@linaria/core").LinariaClassName;
+export declare const navSeparatorResponsive: import("@linaria/core").LinariaClassName;

package/navbar/navbar.styles.js

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

package/navbar/navbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.styles.js","sources":["../../src/navbar/navbar.styles.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Shadow,\n} from \"../v3_theme\";\nimport { V3_ThemeNavbar } from \"../v3_theme/components/theme-helper\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $compress?: boolean;\n    $fixed?: boolean;\n    $hideNavBranding?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div<StyleProps>`\n    position: ${(props) => (props.$fixed ? \"sticky\" : \"relative\")};\n    background-color: ${V3_ThemeNavbar[\"navbar-colour-bg\"]};\n    z-index: 30;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    ${(props) => {\n        return props.theme?.colourMode === \"dark\"\n            ? css`\n                  border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                      ${V3_Colour[\"border\"]};\n              `\n            : css`\n                  box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n              `;\n    }}\n`;\n\nexport const Nav = styled.nav<StyleProps>`\n    height: ${(props) => {\n        const baseHeight = props.$compress\n            ? V3_ThemeNavbar[\"navbar-compressed-height\"](props)\n            : V3_ThemeNavbar[\"navbar-full-height\"](props);\n        return props.theme?.colourMode === \"dark\"\n            ? `calc(${baseHeight} - 1px)`\n            : `${baseHeight}`;\n    }};\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    transition: ${V3_Motion[\"duration-350\"]} ${V3_Motion[\"ease-standard\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        height: ${(props) =>\n            props.theme?.colourMode === \"dark\"\n                ? `calc(${V3_ThemeNavbar[\"navbar-mobile-height\"](props)} - 1px)`\n                : `${V3_ThemeNavbar[\"navbar-mobile-height\"](props)}`};\n    }\n`;\n\nexport const NavElementsContainer = styled.div<StyleProps>`\n    display: flex;\n    height: 100%;\n    margin-left: ${(props) => (props.$hideNavBranding ? \"0\" : \"5rem\")};\n    flex: 1;\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-left: 0rem;\n    }\n`;\n\nexport const MobileMenuButton = styled(ClickableIcon)`\n    display: none;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        display: flex;\n        padding: 0 1.5rem;\n        margin-right: -1.5rem;\n    }\n`;\n\nexport const MobileMenuIcon = styled(MenuIcon)`\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_ThemeNavbar[\"navbar-colour-icon\"]};\n`;\n\nexport const NavBrandContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    flex-shrink: 0;\n\n    height: ${(props) =>\n        props.$compress\n            ? V3_ThemeNavbar[\"navbar-compressed-logo-height\"]\n            : V3_ThemeNavbar[\"navbar-full-logo-height\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        height: ${V3_ThemeNavbar[\"navbar-mobile-logo-height\"]};\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        height: 1.25rem;\n    }\n`;\n\nexport const NavSeparator = styled.div<StyleProps>`\n    display: flex;\n    background-color: ${V3_Colour.border};\n    height: 100%;\n    width: 2px;\n    margin: 0 ${(props) => (props.$compress ? 1 : 1.5)}rem;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin: 0 1rem;\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin: 0 0.75rem;\n    }\n`;\n"],"names":["Wrapper","styled","div","props","$fixed","V3_ThemeNavbar","theme","_a","colourMode","css","V3_Border","V3_Colour","V3_Shadow","Nav","nav","baseHeight","$compress","V3_Motion","V3_MediaQuery","MaxWidth","lg","NavElementsContainer","$hideNavBranding","MobileMenuButton","ClickableIcon","MobileMenuIcon","MenuIcon","NavBrandContainer","xxs","NavSeparator","border","sm"],"mappings":"mWAyBO,MAAMA,EAAUC,EAAOC,GAAe;gBAC5BC,GAAWA,EAAMC,OAAS,SAAW;wBAC9BC,EAAe;;;;;;MAMhCF,UACC,MAAmC,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACdC,CAAG;mCACkBC,EAAU,gBAAgBA,EAAiB;wBACtDC,EAAkB;gBAE5BF,CAAG;gCACeG,EAAU;eAC3B;EAIFC,EAAMZ,EAAOa,GAAe;cAC1BX,UACP,MAAMY,EAAaZ,EAAMa,UACnBX,EAAe,4BAA4BF,GAC3CE,EAAe,sBAAsBF,GAC3C,MAAmC,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACd,QAAQO,WACR,GAAGA,GAAY;;;;;;;kBAQXE,EAAU,mBAAmBA,EAAU;;MAEnDC,EAAcC,SAASC;kBACVjB,UACP,MAA4B,UAAjB,UAAXA,EAAMG,aAAK,IAAAC,OAAA,EAAAA,EAAEC,YACP,QAAQH,EAAe,wBAAwBF,YAC/C,GAAGE,EAAe,wBAAwBF,IAAQ;;EAIvDkB,EAAuBpB,EAAOC,GAAe;;;mBAGtCC,GAAWA,EAAMmB,iBAAmB,IAAM;;;;MAIxDJ,EAAcC,SAASC;;;EAKhBG,EAAmBtB,EAAOuB,EAAc;;;MAG/CN,EAAcC,SAASC;;;;;EAOhBK,EAAiBxB,EAAOyB,EAAS;;;aAGjCrB,EAAe;EAGfsB,EAAoB1B,EAAOC,GAAe;;;;;;cAMxCC,GACPA,EAAMa,UACAX,EAAe,iCACfA,EAAe;;MAEvBa,EAAcC,SAASC;kBACXf,EAAe;;;MAG3Ba,EAAcC,SAASS;;;EAKhBC,EAAe5B,EAAOC,GAAe;;wBAE1BS,EAAUmB;;;gBAGjB3B,GAAWA,EAAMa,UAAY,EAAI;;MAE5CE,EAAcC,SAASC;;;;MAIvBF,EAAcC,SAASY;;;"}
+{"version":3,"file":"navbar.styles.js","sources":["../../src/navbar/navbar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    ComponentToken,\n    MediaQuery,\n    Motion,\n    Shadow,\n} from \"../theme\";\n\nexport const tokens = {\n    nav: {\n        height: \"--fds-internal-navbar-nav-height\",\n    },\n};\n\nexport const wrapper = css`\n    background-color: ${ComponentToken.Navbar[\"colour-bg\"]};\n    z-index: 30;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n`;\n\nexport const wrapperFixed = css`\n    position: sticky;\n`;\n\nexport const wrapperRelative = css`\n    position: relative;\n`;\n\nexport const wrapperDark = css`\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const wrapperLight = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n`;\n\nexport const nav = css`\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    position: relative;\n    transition: ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n\n    ${tokens.nav.height}: ${ComponentToken.Navbar[\"full-height\"]};\n    height: var(${tokens.nav.height});\n\n    ${MediaQuery.MaxWidth.lg} {\n        height: ${ComponentToken.Navbar[\"mobile-height\"]};\n    }\n`;\n\nexport const navCompressed = css`\n    ${tokens.nav.height}: ${ComponentToken.Navbar[\"compressed-height\"]};\n`;\n\nexport const navDark = css`\n    height: calc(var(${tokens.nav.height}) - 1px);\n\n    ${MediaQuery.MaxWidth.lg} {\n        height: calc(${ComponentToken.Navbar[\"mobile-height\"]} - 1px);\n    }\n`;\n\nexport const navElementsContainer = css`\n    display: flex;\n    height: 100%;\n    flex: 1;\n    justify-content: flex-end;\n`;\n\nexport const navElementsContainerWithBranding = css`\n    margin-left: 5rem;\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: 0;\n    }\n`;\n\nexport const mobileMenuButton = css`\n    display: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        padding: 0 1.5rem;\n        margin-right: -1.5rem;\n    }\n`;\n\nexport const mobileMenuIcon = css`\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${ComponentToken.Navbar[\"colour-icon\"]};\n`;\n\nexport const navBrandContainer = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    flex-shrink: 0;\n`;\n\nexport const navBrandContainerCompressed = css`\n    height: ${ComponentToken.Navbar[\"compressed-logo-height\"]};\n`;\n\nexport const navBrandContainerFull = css`\n    height: ${ComponentToken.Navbar[\"full-logo-height\"]};\n`;\n\nexport const navBrandContainerResponsive = css`\n    ${MediaQuery.MaxWidth.lg} {\n        height: ${ComponentToken.Navbar[\"mobile-logo-height\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        height: 1.25rem;\n    }\n`;\n\nexport const navSeparator = css`\n    display: flex;\n    background-color: ${Colour.border};\n    height: 100%;\n    width: 2px;\n`;\n\nexport const navSeparatorCompressed = css`\n    margin: 0 1rem;\n`;\n\nexport const navSeparatorFull = css`\n    margin: 0 1.5rem;\n`;\n\nexport const navSeparatorResponsive = css`\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 0 1rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin: 0 0.75rem;\n    }\n`;\n"],"names":["wrapper","wrapperFixed","wrapperRelative","wrapperDark","wrapperLight","nav","navCompressed","navDark","navElementsContainer","navElementsContainerWithBranding","mobileMenuButton","mobileMenuIcon","navBrandContainer","navBrandContainerCompressed","navBrandContainerFull","navBrandContainerResponsive","navSeparator","navSeparatorCompressed","navSeparatorFull","navSeparatorResponsive"],"mappings":"yDAiBO,MAAMA,EAAO,UASPC,EAAY,WAIZC,EAAe,UAIfC,EAAW,WAIXC,EAAY,UAIZC,EAAG,WAiBHC,EAAa,UAIbC,EAAO,UAQPC,EAAoB,WAOpBC,EAAgC,WAOhCC,EAAgB,WAUhBC,EAAc,WAMdC,EAAiB,WAOjBC,EAA2B,WAI3BC,EAAqB,WAIrBC,EAA2B,UAU3BC,EAAY,WAOZC,EAAsB,WAItBC,EAAgB,UAIhBC,EAAsB"}

package/navbar/navbar.styles_koy0c7.css

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

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

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

package/notification-banner/notification-banner.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.js","sources":["../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    AccessibleBannerButton,\n    ActionButton,\n    Container,\n    Content,\n    ContentContainer,\n    ContentLink as NBLink,\n    ContentText,\n    ContentWrapper,\n    IconContainer,\n    StyledIconButton,\n    Wrapper,\n} from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <StyledIconButton\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </StyledIconButton>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <ActionButton\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </ActionButton>\n        );\n    };\n\n    const renderContent = () => (\n        <Content data-testid={formatId(\"text-content\", testId)}>\n            <ContentWrapper>\n                <ContentText\n                    $maxCollapsedHeight={\n                        maxCollapsedHeight && contentHeight > maxCollapsedHeight\n                            ? maxCollapsedHeight\n                            : undefined\n                    }\n                >\n                    <div ref={contentRef}>{children}</div>\n                </ContentText>\n                {renderActionButton()}\n            </ContentWrapper>\n        </Content>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <AccessibleBannerButton aria-label={\"Clickable banner\"} type=\"button\" />\n    );\n\n    return (\n        <Wrapper\n            ref={forwardedRef}\n            $sticky={sticky}\n            $clickable={!!onClick}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Container id={formatId(\"container\", id)}>\n                {icon && <IconContainer aria-hidden>{icon}</IconContainer>}\n                <ContentContainer>{renderContent()}</ContentContainer>\n                {dismissible && renderDismissButton()}\n            </Container>\n            {onClick && renderAccessibleBannerButton()}\n        </Wrapper>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","Wrapper","Object","assign","$sticky","$clickable","role","Container","formatId","_jsx","IconContainer","ContentContainer","Content","ContentWrapper","ContentText","$maxCollapsedHeight","undefined","ActionButton","type","StyledIconButton","tabIndex","focusOutline","focusHighlight","CrossIcon","AccessibleBannerButton","componentName","Base","React","forwardRef","props","displayName","NotificationBanner","Link","NBLink"],"mappings":"shBAuBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,GAAIX,EACDY,EAAUC,EAAAb,EAZW,oIAiBxB,MAAMc,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAkBf,IAC1CgB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,IAKvDC,GAAU,KACNP,EAAWd,EAAQ,GACpB,CAACA,IAKJ,MAAMsB,EAAiBC,IACnBA,EAAMC,kBACNV,GAAW,GAEPb,GAAeE,GAAWA,GAAW,EAGvCsB,EACFF,KAEKf,aAAY,EAAZA,EAAcD,WAInBgB,EAAMC,kBACNhB,EAAaD,QAAQgB,GAAM,EAM/B,IAAKV,EAAW,OAAO,KAsDvB,OACIa,EAACC,EAAOC,OAAAC,OAAA,CACJX,IAAKb,EAAYyB,QACR5B,EAAM6B,aACDxB,EACdA,QAASA,EACTyB,KAAK,UACDtB,EAAU,CAAAX,SAAA,CAEd2B,EAACO,EAAS,CAAC7B,GAAI8B,EAAS,YAAa9B,GAAGL,SAAA,CACnCU,GAAQ0B,EAACC,EAAa,CAAA,eAAA,EAAArC,SAAcU,IACrC0B,EAACE,EAAgB,CAAAtC,SA/BzBoC,EAACG,EAAO,CAAA,cAAcJ,EAAS,eAAgBtB,GAAOb,SAClD2B,EAACa,EAAc,CAAAxC,SAAA,CACXoC,EAACK,EAAW,CAAAC,oBAEJnC,GAAsBW,EAAgBX,EAChCA,OACAoC,EAAS3C,SAGnBoC,EAAA,MAAA,CAAKjB,IAAKC,EAAUpB,SAAGA,MAzB9BS,EAGD2B,EAACQ,EAAYf,OAAAC,OAAA,CACTzB,GAAI8B,EAAS,gBAAiB9B,GAAG,cACpB8B,EAAS,gBAAiBtB,GACvCgC,KAAK,UACDpC,EAAY,CAChBD,QAASkB,WAERjB,EAAaT,YAVI,YAgDjBE,GA/DTkC,EAACU,EAAgB,CACbC,SAAU,EACVvC,QAASe,EACTlB,GAAI8B,EAAS,iBAAkB9B,GAAG,cACrB8B,EAAS,iBAAkBtB,GACxCmC,aAAa,UACbC,gBAAgB,EAChBJ,KAAK,SAAQ,aACF,QAAO7C,SAElBoC,EAACc,EAAS,CAAA,eAAA,SAuDT1C,GAjBL4B,EAACe,EAAsB,CAAA,aAAa,mBAAoBN,KAAK,cAkBnD,EAiBZV,EAAW,CAACiB,EAAuB/C,EAAK,YACnC,GAAGA,KAAM+C,IAMdC,EAAOC,EAAMC,YAjBD,CACdC,EACArC,IAEOiB,EAACtC,EAAW+B,OAAAC,OAAA,GAAK0B,GAAOlD,aAAca,OAchDkC,EAA8BI,YAAc,2BAChCC,EAAqB7B,OAAOC,OAAOuB,EAAM,CAClDM,KAAMC"}
+{"version":3,"file":"notification-banner.js","sources":["../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    className,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n    const contentTextRef = useRef<HTMLDivElement>(null);\n\n    const isCollapsed =\n        maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n    useApplyStyle(contentTextRef, {\n        [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n            ? formatUnitValue(maxCollapsedHeight, \"px\")\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <ClickableIcon\n            className={styles.dismissButton}\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </ClickableIcon>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <button\n                className={styles.actionButton}\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </button>\n        );\n    };\n\n    const renderContent = () => (\n        <div\n            className={styles.content}\n            data-testid={formatId(\"text-content\", testId)}\n        >\n            <div className={styles.contentWrapper}>\n                <div\n                    ref={contentTextRef}\n                    className={clsx(\n                        styles.contentText,\n                        isCollapsed && styles.contentTextCollapsed\n                    )}\n                >\n                    <div ref={contentRef}>{children}</div>\n                </div>\n                {renderActionButton()}\n            </div>\n        </div>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <VisuallyHidden>\n            <button aria-label={\"Clickable banner\"} type=\"button\" />\n        </VisuallyHidden>\n    );\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\n                styles.wrapper,\n                sticky && styles.wrapperSticky,\n                !!onClick && styles.wrapperClickable,\n                className\n            )}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Layout.Content id={formatId(\"container\", id)}>\n                {icon && (\n                    <div className={styles.iconContainer} aria-hidden>\n                        {icon}\n                    </div>\n                )}\n                <div className={styles.contentContainer}>{renderContent()}</div>\n                {dismissible && renderDismissButton()}\n            </Layout.Content>\n            {onClick && renderAccessibleBannerButton()}\n        </div>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n    return (\n        <Typography.LinkBL\n            ref={ref}\n            className={clsx(styles.contentLink, props.className)}\n            {...props}\n        />\n    );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\nexport const NotificationBanner = Object.assign(Base, {\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"itCAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,QACRA,GAAU,EAAIC,YACdA,GAAc,EAAIC,OAClBA,GAAS,EAAIC,UACbA,EAASC,GACTA,EAAEC,aACFA,EAAYC,mBACZA,EAAkBC,QAClBA,EAAOC,aACPA,EAAYC,KACZA,EAAIC,UACJA,GAASZ,EACNa,EAAUC,EAAAd,EAbW,gJAkBxB,MAAMe,EAASF,EAAW,gBAEnBG,EAAWC,GAAcC,EAAkBhB,IAC1CiB,OAAQC,EAAgB,EAAGC,IAAKC,GAAeC,IACjDC,EAAiBC,EAAuB,MAExCC,EACFlB,GAAsBY,EAAgBZ,EAE1CmB,EAAcH,EAAgB,CAC1B,CAACI,EAAcC,YAAYrB,oBAAqBkB,EAC1CI,EAAgBtB,EAAoB,WACpCuB,IAMVC,GAAU,KACNf,EAAWf,EAAQ,GACpB,CAACA,IAKJ,MAAM+B,EAAiBC,IACnBA,EAAMC,kBACNlB,GAAW,GAEPd,GAAeE,GAAWA,GAAW,EAGvC+B,EACFF,KAEKxB,aAAY,EAAZA,EAAcD,WAInByB,EAAMC,kBACNzB,EAAaD,QAAQyB,GAAM,EAM/B,IAAKlB,EAAW,OAAO,KA6DvB,OACIqB,uBACIhB,IAAKd,EACLK,UAAW0B,EACPC,EACAnC,GAAUoC,IACR/B,GAAWgC,EACb7B,GAEJH,QAASA,EACTiC,KAAK,UACD7B,aAEJwB,EAACM,EAAOC,QAAO,CAACtC,GAAIuC,EAAS,YAAavC,GAAGL,SAAA,CACxCU,GACGmC,SAAKlC,UAAWmC,4BACXpC,IAGTmC,EAAA,MAAA,CAAKlC,UAAWoC,EAAuB/C,SA5C/C6C,EAAA,MAAA,CACIlC,UAAWqC,EAAc,cACZJ,EAAS,eAAgB9B,GAAOd,SAE7CoC,EAAA,MAAA,CAAKzB,UAAWsC,EAAqBjD,SAAA,CACjC6C,EAAA,MAAA,CACIzB,IAAKG,EACLZ,UAAW0B,EACPa,EACAzB,GAAe0B,GAClBnD,SAED6C,EAAA,MAAA,CAAKzB,IAAKC,EAAUrB,SAAGA,MA7B9BS,EAGDoC,EAAA,SAAAO,OAAAC,OAAA,CACI1C,UAAW2C,EACXjD,GAAIuC,EAAS,gBAAiBvC,iBACjBuC,EAAS,gBAAiB9B,GACvCyC,KAAK,UACD9C,EAAY,CAChBD,QAAS2B,EAAyBnC,SAEjCS,EAAaT,YAXI,YA8DjBE,GA9ET2C,EAACW,EAAa,CACV7C,UAAW8C,EACXC,SAAU,EACVlD,QAASwB,EACT3B,GAAIuC,EAAS,iBAAkBvC,GAAG,cACrBuC,EAAS,iBAAkB9B,GACxC6C,aAAa,UACbC,gBAAgB,EAChBL,KAAK,SAAQ,aACF,QAAOvD,SAElB6C,EAACgB,EAAS,CAAA,eAAA,SAqETrD,GA3BLqC,EAACiB,EAAc,CAAA9D,SACX6C,EAAA,SAAA,CAAA,aAAoB,mBAAoBU,KAAK,gBA2B3C,EAcRQ,EAASC,EAAMC,YAGnB,SAAgCC,EAAO9C,GACrC,OACIyB,EAACsB,EAAWC,OAAMhB,OAAAC,OAAA,CACdjC,IAAKA,EACLT,UAAW0B,EAAKgC,EAAoBH,EAAMvD,YACtCuD,GAGhB,IACCH,EAAgCO,YAAc,0BAK/C,MAAM1B,EAAW,CAAC2B,EAAuBlE,EAAK,YACnC,GAAGA,KAAMkE,IAMdC,EAAOR,EAAMC,YA/BD,CACdC,EACA9C,IAEOyB,EAAC/C,EAAWsD,OAAAC,OAAA,GAAKa,GAAO5D,aAAcc,OA4BhDoD,EAA8BF,YAAc,2BAChCG,EAAqBrB,OAAOC,OAAOmB,EAAM,CAClDE,KAAMX"}

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

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

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

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