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

package/sidenav/sidenav-drawer-subitem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font, V3_Radius } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.li``;\n\nexport const LinkButton = styled(BasicButton)`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","li","LinkButton","BasicButton","V3_Radius","V3_Font","V3_Colour","lineClampCss"],"mappings":"oPASaA,EAAYC,EAAOC,EAAE,GAErBC,EAAaF,EAAOG,EAAY;;;qBAGxBC,EAAc;;MAE7BC,EAAQ;aACDC,EAAgB;MACvBC,EAAa;;;;;4BAKSD,EAAU;iBACrBA,EAAU;;"}
+{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["linkButton"],"mappings":"0EAQO,MAAMA,EAAU"}

package/sidenav/sidenav-drawer-subitem.styles_2y58kf.css

@@ -0,0 +1 @@
+@layer fds{.l1ge7as9{width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}.l1ge7as9:hover,.l1ge7as9:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}}

package/sidenav/sidenav-group.d.ts

@@ -1,2 +1,2 @@
 import type { SidenavGroupProps } from "./types";
-export declare const SidenavGroup: ({ separator, children, ...otherProps }: SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidenavGroup: ({ separator, children, className, ...otherProps }: SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;

package/sidenav/sidenav-group.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Container as i,Divider as s}from"./sidenav-group.styles.js";const a=a=>{var{separator:o,children:d}=a,n=r(a,["separator","children"]);return t(i,Object.assign({},n,{children:[d,o&&e(s,{"data-testid":"divider"})]}))};export{a as SidenavGroup};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as s,jsx as a}from"react/jsx-runtime";import e from"clsx";import{divider as t,container as i}from"./sidenav-group.styles.js";const l=l=>{var{separator:m,children:o,className:c}=l,d=r(l,["separator","children","className"]);return s("ul",Object.assign({},d,{className:e(i,c),children:[o,m&&a("li",{"data-testid":"divider",className:t})]}))};export{l as SidenavGroup};
 //# sourceMappingURL=sidenav-group.js.map

package/sidenav/sidenav-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.js","sources":["../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import { Container, Divider } from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Container {...otherProps}>\n            {children}\n            {separator && <Divider data-testid=\"divider\" />}\n        </Container>\n    );\n};\n"],"names":["SidenavGroup","_a","separator","children","otherProps","__rest","_jsxs","Container","Object","assign","_jsx","Divider"],"mappings":"oKAGO,MAAMA,EAAgBC,QAAAC,UACzBA,EAASC,SACTA,GAAQF,EACLG,EAAUC,EAAAJ,EAHY,0BAQzB,OACIK,EAACC,EAASC,OAAAC,OAAA,GAAKL,aACVD,EACAD,GAAaQ,EAACC,EAAO,CAAA,cAAa,eAC3B"}
+{"version":3,"file":"sidenav-group.js","sources":["../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    className,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <ul {...otherProps} className={clsx(styles.container, className)}>\n            {children}\n            {separator && (\n                <li data-testid=\"divider\" className={styles.divider} />\n            )}\n        </ul>\n    );\n};\n"],"names":["SidenavGroup","_a","separator","children","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.container","_jsx","styles.divider"],"mappings":"wLAKO,MAAMA,EAAgBC,QAAAC,UACzBA,EAASC,SACTA,EAAQC,UACRA,KACGC,EAAUC,EAAAL,EAJY,CAAA,YAAA,WAAA,cASzB,OACIM,EAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUD,SAAA,CAC3DA,EACAD,GACGU,EAAA,KAAA,CAAA,cAAgB,UAAUR,UAAWS,OAExC"}

package/sidenav/sidenav-group.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const divider: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav-group.styles.js

@@ -1,13 +1,2 @@
-import e from"styled-components";import{V3_Colour as o}from"../v3_theme/index.js";const t=e.ul`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    list-style: none;
-`,i=e.li`
-    margin-top: 1rem;
-    width: 6.5rem;
-    height: 1px;
-    background-color: ${o.border};
-`;export{t as Container,i as Divider};
+import"./sidenav-group.styles_1x604sw.css";const s="c4k7n35",c="d14gvick";export{s as container,c as divider};
 //# sourceMappingURL=sidenav-group.styles.js.map

package/sidenav/sidenav-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.styles.js","sources":["../../src/sidenav/sidenav-group.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.ul`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const Divider = styled.li`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${V3_Colour.border};\n`;\n"],"names":["Container","styled","ul","Divider","li","V3_Colour","border"],"mappings":"kFAOO,MAAMA,EAAYC,EAAOC,EAAE;;;;;;EAQrBC,EAAUF,EAAOG,EAAE;;;;wBAIRC,EAAUC;"}
+{"version":3,"file":"sidenav-group.styles.js","sources":["../../src/sidenav/sidenav-group.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const divider = css`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${Colour[\"border\"]};\n`;\n"],"names":["container","divider"],"mappings":"kEAOO,MAAMA,EAAS,UAQTC,EAAO"}

package/sidenav/sidenav-group.styles_1x604sw.css

@@ -0,0 +1,2 @@
+@layer fds{.c4k7n35{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;list-style:none;}
+.d14gvick{margin-top:1rem;width:6.5rem;height:1px;background-color:var(--fds-colour-border);}}

package/sidenav/sidenav-item.d.ts

@@ -1,2 +1,2 @@
 import type { SidenavItemProps } from "./types";
-export declare const SidenavItem: ({ children, icon, title, onClick, selected, ...otherProps }: SidenavItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidenavItem: ({ children, icon, title, onClick, selected, className, ...otherProps }: SidenavItemProps) => import("react/jsx-runtime").JSX.Element;

package/sidenav/sidenav-item.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useFloating as i,size as n,useClick as o,useHover as l,safePolygon as s,useFocus as c,useDismiss as d,useInteractions as a,useTransitionStyles as m,FloatingPortal as h,FloatingFocusManager as f}from"@floating-ui/react";import{useContext as p,useState as u,useEffect as g}from"react";import{useResizeDetector as I}from"../external/react-resize-detector/build/index.esm.js";import{useInheritedThemeScope as v}from"../theme/theme-provider/hooks.js";import{SidenavContext as y}from"./sidenav-context.js";import{Container as j,DefaultButton as x,IconContainer as b,TitleText as w,DesktopDrawer as R}from"./sidenav-item.styles.js";const C=C=>{var{children:O,icon:P,title:S,onClick:k,selected:$}=C,M=e(C,["children","icon","title","onClick","selected"]);const{internalId:z,menuRef:F,currentItem:L,previouslySelectedItemId:_,selectedItem:A,setCurrentItem:B,setPreviouslySelectedItemId:D,setSelectedItem:q}=p(y),E=M.id||S.toLowerCase().replaceAll(" ","-"),G=`${z}-drawer`,H=!!A&&A.itemId===E,J=!!L&&L.itemId===E,[K,N]=u(!1),[Q,T]=u(null),[U,V]=u(null),{floatingStyles:W,refs:X,context:Y}=i({open:K,onOpenChange:(e,t,r)=>{e?(F.current&&X.setPositionReference(F.current),O&&N(!0),"click"===r?de():"focus"!==r&&"hover"!==r||ae()):(N(!1),me())},placement:"right",middleware:[n({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,r=`${Math.max(0,t)}px`;e.floating.style.height=r}})],elements:{reference:Q,floating:U}}),Z=o(Y,{toggle:!1,stickIfOpen:!1}),ee=l(Y,{handleClose:s()}),te=c(Y,{visibleOnly:!1}),re=d(Y,{enabled:!!O}),{getReferenceProps:ie,getFloatingProps:ne}=a([Z,te,ee,re]),{isMounted:oe,styles:le}=m(Y),{themeProps:se,themeStyle:ce}=v(oe);g((()=>{$&&q({itemId:E,content:void 0})}),[E,$,q]),I({onResize:()=>{X.setPositionReference(F.current)},targetRef:F,refreshMode:"throttle",refreshRate:300});const de=()=>{D((()=>{if(O&&A)return _||A.itemId})()),B({itemId:E,content:O}),q({itemId:E,content:O}),k&&!O&&k(E)},ae=()=>{B({itemId:E,content:O})},me=()=>{B((e=>{if((null==e?void 0:e.itemId)!==E)return e}))},he=O?{"aria-controls":G,"aria-haspopup":!0,"aria-expanded":J&&!!L.content||H&&!!A.content}:{};return t(j,{children:[t(x,Object.assign({type:"button",ref:T,"aria-current":H?"page":void 0},he,M,{$highlight:H||J},ie(),{onMouseLeave:()=>{K&&B(void 0)},children:[r(b,{"aria-hidden":!0,children:P}),r(w,{inline:!0,children:S})]})),oe&&r(h,{children:r(f,{context:Y,modal:!1,initialFocus:-1,children:r("div",Object.assign({id:G,"data-testid":"sidenav-drawer",ref:V},se,{style:Object.assign(Object.assign({},ce),W)},ne(),{children:r(R,{style:le,$showDrawer:K,$showShadow:J||H&&!L,children:O})}))})})]})};export{C as SidenavItem};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useFloating as i,size as n,useClick as o,useHover as s,safePolygon as l,useFocus as a,useDismiss as c,useInteractions as d,useTransitionStyles as m,FloatingPortal as p,FloatingFocusManager as f}from"@floating-ui/react";import h from"clsx";import{useContext as u,useState as g,useEffect as I}from"react";import{useResizeDetector as v}from"../external/react-resize-detector/build/index.esm.js";import{BasicButton as y}from"../shared/input-wrapper/input-wrapper.js";import{useInheritedThemeScope as j}from"../theme/theme-provider/hooks.js";import{Typography as x}from"../typography/index.js";import{SidenavContext as b}from"./sidenav-context.js";import{container as R,defaultButton as C,defaultButtonHighlight as N,iconContainer as O,titleText as w,desktopDrawer as P,desktopDrawerShowShadow as S}from"./sidenav-item.styles.js";const k=k=>{var{children:M,icon:z,title:B,onClick:F,selected:L,className:$}=k,_=e(k,["children","icon","title","onClick","selected","className"]);const{internalId:A,menuRef:X,currentItem:q,previouslySelectedItemId:D,selectedItem:E,setCurrentItem:G,setPreviouslySelectedItemId:H,setSelectedItem:J}=u(b),K=_.id||B.toLowerCase().replaceAll(" ","-"),Q=`${A}-drawer`,T=!!E&&E.itemId===K,U=!!q&&q.itemId===K,[V,W]=g(!1),[Y,Z]=g(null),[ee,te]=g(null),{floatingStyles:re,refs:ie,context:ne}=i({open:V,onOpenChange:(e,t,r)=>{e?(X.current&&ie.setPositionReference(X.current),M&&W(!0),"click"===r?ue():"focus"!==r&&"hover"!==r||ge()):(W(!1),Ie())},placement:"right",middleware:[n({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,r=`${Math.max(0,t)}px`;e.floating.style.height=r}})],elements:{reference:Y,floating:ee}}),oe=o(ne,{toggle:!1,stickIfOpen:!1}),se=s(ne,{handleClose:M?l():null}),le=a(ne,{visibleOnly:!1}),ae=c(ne,{enabled:!!M}),{getReferenceProps:ce,getFloatingProps:de}=d([oe,le,se,ae]),{isMounted:me,styles:pe}=m(ne),{themeProps:fe,themeStyle:he}=j(me);I((()=>{L&&J({itemId:K,content:void 0})}),[K,L,J]),v({onResize:()=>{ie.setPositionReference(X.current)},targetRef:X,refreshMode:"throttle",refreshRate:300});const ue=()=>{H((()=>{if(M&&E)return D||E.itemId})()),G({itemId:K,content:M}),J({itemId:K,content:M}),F&&!M&&F(K)},ge=()=>{G({itemId:K,content:M})},Ie=()=>{G((e=>{if((null==e?void 0:e.itemId)!==K)return e}))},ve=M?{"aria-controls":Q,"aria-haspopup":!0,"aria-expanded":U&&!!q.content||T&&!!E.content}:{};return t("li",{className:R,children:[t(y,Object.assign({type:"button",ref:Z,"aria-current":T?"page":void 0},ve,_,{className:h(C,(T||U)&&N,$)},ce(),{onMouseLeave:()=>{V&&G(void 0)},children:[r("span",{"aria-hidden":!0,className:O,children:z}),r(x.BodyXS,{inline:!0,className:w,children:B})]})),me&&r(p,{children:r(f,{context:ne,modal:!1,initialFocus:-1,children:r("div",Object.assign({id:Q,"data-testid":"sidenav-drawer",ref:te},fe,{style:Object.assign(Object.assign({},he),re)},de(),{children:r("ul",{style:pe,className:h(P,(U||T&&!q)&&S),children:M})}))})})]})};export{k as SidenavItem};
 //# sourceMappingURL=sidenav-item.js.map

package/sidenav/sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.js","sources":["../../src/sidenav/sidenav-item.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport {\n    FloatingFocusManager,\n    FloatingPortal,\n    safePolygon,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport {\n    Container,\n    DefaultButton,\n    DesktopDrawer,\n    IconContainer,\n    TitleText,\n} from \"./sidenav-item.styles\";\nimport type { SidenavItemProps } from \"./types\";\n\nexport const SidenavItem = ({\n    children,\n    icon,\n    title,\n    onClick,\n    selected,\n    ...otherProps\n}: SidenavItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        internalId,\n        menuRef,\n        currentItem,\n        previouslySelectedItemId,\n        selectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n        setSelectedItem,\n    } = useContext(SidenavContext);\n\n    const id = otherProps.id || title.toLowerCase().replaceAll(\" \", \"-\");\n    const drawerId = `${internalId}-drawer`;\n    const isSelected = !!selectedItem && selectedItem.itemId === id;\n    const isCurrent = !!currentItem && currentItem.itemId === id;\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);\n    const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n\n    // =========================================================================\n    // FLOATING UI\n    // =========================================================================\n    const { floatingStyles, refs, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open: boolean, _event, reason: OpenChangeReason) => {\n            if (open) {\n                if (menuRef.current) {\n                    refs.setPositionReference(menuRef.current);\n                }\n\n                if (children) {\n                    setIsOpen(true);\n                }\n\n                if (reason === \"click\") {\n                    handleSelect();\n                } else if (reason === \"focus\" || reason === \"hover\") {\n                    handleHover();\n                }\n            } else {\n                setIsOpen(false);\n                handleDismiss();\n            }\n        },\n        placement: \"right\",\n        middleware: [\n            size({\n                apply({ elements }) {\n                    const height =\n                        elements.reference.getBoundingClientRect().height;\n                    const value = `${Math.max(0, height)}px`;\n\n                    elements.floating.style.height = value;\n                },\n            }),\n        ],\n        elements: {\n            reference: anchorRef,\n            floating: drawerRef,\n        },\n    });\n\n    const click = useClick(context, {\n        toggle: false,\n        stickIfOpen: false,\n    });\n    const hover = useHover(context, {\n        handleClose: safePolygon(),\n    });\n    const focus = useFocus(context, { visibleOnly: false });\n    const dismiss = useDismiss(context, { enabled: !!children });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        focus,\n        hover,\n        dismiss,\n    ]);\n\n    const { isMounted, styles } = useTransitionStyles(context);\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (selected) {\n            setSelectedItem({ itemId: id, content: undefined });\n        }\n    }, [id, selected, setSelectedItem]);\n\n    useResizeDetector({\n        onResize: () => {\n            // Sync the drawer height with menu height\n            refs.setPositionReference(menuRef.current);\n        },\n        targetRef: menuRef,\n        refreshMode: \"throttle\",\n        refreshRate: 300,\n    });\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getPreviousSelectedItemId = (): string | undefined => {\n        if (!children || !selectedItem) return undefined;\n        if (previouslySelectedItemId) {\n            return previouslySelectedItemId;\n        }\n        return selectedItem.itemId;\n    };\n\n    const handleSelect = () => {\n        setPreviouslySelectedItemId(getPreviousSelectedItemId());\n        setCurrentItem({ itemId: id, content: children });\n        setSelectedItem({\n            itemId: id,\n            content: children,\n        });\n        if (onClick && !children) {\n            onClick(id);\n        }\n    };\n\n    const handleHover = () => {\n        setCurrentItem({ itemId: id, content: children });\n    };\n\n    const handleMouseLeave = () => {\n        if (isOpen) {\n            setCurrentItem(undefined);\n        }\n    };\n\n    const handleDismiss = () => {\n        setCurrentItem((current) => {\n            if (current?.itemId === id) {\n                return undefined;\n            }\n            return current;\n        });\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": drawerId,\n              \"aria-haspopup\": true,\n              \"aria-expanded\":\n                  (isCurrent && !!currentItem.content) ||\n                  (isSelected && !!selectedItem.content),\n          }\n        : {};\n\n    return (\n        <Container>\n            <DefaultButton\n                type=\"button\"\n                ref={setAnchorRef}\n                aria-current={isSelected ? \"page\" : undefined}\n                {...ariaControlProps}\n                {...otherProps}\n                $highlight={isSelected || isCurrent}\n                {...getReferenceProps()}\n                onMouseLeave={handleMouseLeave}\n            >\n                <IconContainer aria-hidden>{icon}</IconContainer>\n                <TitleText inline>{title}</TitleText>\n            </DefaultButton>\n            {isMounted && (\n                <FloatingPortal>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                    >\n                        <div\n                            id={drawerId}\n                            data-testid=\"sidenav-drawer\"\n                            ref={setDrawerRef}\n                            {...themeProps}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            <DesktopDrawer\n                                style={styles}\n                                $showDrawer={isOpen}\n                                $showShadow={\n                                    isCurrent || (isSelected && !currentItem)\n                                }\n                            >\n                                {children}\n                            </DesktopDrawer>\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </Container>\n    );\n};\n"],"names":["SidenavItem","_a","children","icon","title","onClick","selected","otherProps","__rest","internalId","menuRef","currentItem","previouslySelectedItemId","selectedItem","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem","useContext","SidenavContext","id","toLowerCase","replaceAll","drawerId","isSelected","itemId","isCurrent","isOpen","setIsOpen","useState","anchorRef","setAnchorRef","drawerRef","setDrawerRef","floatingStyles","refs","context","useFloating","open","onOpenChange","_event","reason","current","setPositionReference","handleSelect","handleHover","handleDismiss","placement","middleware","size","apply","elements","height","reference","getBoundingClientRect","value","Math","max","floating","style","click","useClick","toggle","stickIfOpen","hover","useHover","handleClose","safePolygon","focus","useFocus","visibleOnly","dismiss","useDismiss","enabled","getReferenceProps","getFloatingProps","useInteractions","isMounted","styles","useTransitionStyles","themeProps","themeStyle","useInheritedThemeScope","useEffect","content","undefined","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","getPreviousSelectedItemId","ariaControlProps","_jsxs","Container","DefaultButton","Object","assign","type","ref","$highlight","onMouseLeave","_jsx","IconContainer","TitleText","inline","FloatingPortal","FloatingFocusManager","modal","initialFocus","DesktopDrawer","$showDrawer","$showShadow"],"mappings":"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"}
+{"version":3,"file":"sidenav-item.js","sources":["../../src/sidenav/sidenav-item.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport {\n    FloatingFocusManager,\n    FloatingPortal,\n    safePolygon,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { Typography } from \"../typography\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-item.styles\";\nimport type { SidenavItemProps } from \"./types\";\n\nexport const SidenavItem = ({\n    children,\n    icon,\n    title,\n    onClick,\n    selected,\n    className,\n    ...otherProps\n}: SidenavItemProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const {\n        internalId,\n        menuRef,\n        currentItem,\n        previouslySelectedItemId,\n        selectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n        setSelectedItem,\n    } = useContext(SidenavContext);\n\n    const id = otherProps.id || title.toLowerCase().replaceAll(\" \", \"-\");\n    const drawerId = `${internalId}-drawer`;\n    const isSelected = !!selectedItem && selectedItem.itemId === id;\n    const isCurrent = !!currentItem && currentItem.itemId === id;\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);\n    const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n\n    // =========================================================================\n    // FLOATING UI\n    // =========================================================================\n    const { floatingStyles, refs, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open: boolean, _event, reason: OpenChangeReason) => {\n            if (open) {\n                if (menuRef.current) {\n                    refs.setPositionReference(menuRef.current);\n                }\n\n                if (children) {\n                    setIsOpen(true);\n                }\n\n                if (reason === \"click\") {\n                    handleSelect();\n                } else if (reason === \"focus\" || reason === \"hover\") {\n                    handleHover();\n                }\n            } else {\n                setIsOpen(false);\n                handleDismiss();\n            }\n        },\n        placement: \"right\",\n        middleware: [\n            size({\n                apply({ elements }) {\n                    const height =\n                        elements.reference.getBoundingClientRect().height;\n                    const value = `${Math.max(0, height)}px`;\n\n                    elements.floating.style.height = value;\n                },\n            }),\n        ],\n        elements: {\n            reference: anchorRef,\n            floating: drawerRef,\n        },\n    });\n\n    const click = useClick(context, {\n        toggle: false,\n        stickIfOpen: false,\n    });\n    const hover = useHover(context, {\n        handleClose: children ? safePolygon() : null,\n    });\n    const focus = useFocus(context, { visibleOnly: false });\n    const dismiss = useDismiss(context, { enabled: !!children });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        focus,\n        hover,\n        dismiss,\n    ]);\n\n    const { isMounted, styles: transitionStyles } =\n        useTransitionStyles(context);\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (selected) {\n            setSelectedItem({ itemId: id, content: undefined });\n        }\n    }, [id, selected, setSelectedItem]);\n\n    useResizeDetector({\n        onResize: () => {\n            // Sync the drawer height with menu height\n            refs.setPositionReference(menuRef.current);\n        },\n        targetRef: menuRef,\n        refreshMode: \"throttle\",\n        refreshRate: 300,\n    });\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getPreviousSelectedItemId = (): string | undefined => {\n        if (!children || !selectedItem) return undefined;\n        if (previouslySelectedItemId) {\n            return previouslySelectedItemId;\n        }\n        return selectedItem.itemId;\n    };\n\n    const handleSelect = () => {\n        setPreviouslySelectedItemId(getPreviousSelectedItemId());\n        setCurrentItem({ itemId: id, content: children });\n        setSelectedItem({\n            itemId: id,\n            content: children,\n        });\n        if (onClick && !children) {\n            onClick(id);\n        }\n    };\n\n    const handleHover = () => {\n        setCurrentItem({ itemId: id, content: children });\n    };\n\n    const handleMouseLeave = () => {\n        if (isOpen) {\n            setCurrentItem(undefined);\n        }\n    };\n\n    const handleDismiss = () => {\n        setCurrentItem((current) => {\n            if (current?.itemId === id) {\n                return undefined;\n            }\n            return current;\n        });\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": drawerId,\n              \"aria-haspopup\": true,\n              \"aria-expanded\":\n                  (isCurrent && !!currentItem.content) ||\n                  (isSelected && !!selectedItem.content),\n          }\n        : {};\n\n    return (\n        <li className={styles.container}>\n            <BasicButton\n                type=\"button\"\n                ref={setAnchorRef}\n                aria-current={isSelected ? \"page\" : undefined}\n                {...ariaControlProps}\n                {...otherProps}\n                className={clsx(\n                    styles.defaultButton,\n                    (isSelected || isCurrent) && styles.defaultButtonHighlight,\n                    className\n                )}\n                {...getReferenceProps()}\n                onMouseLeave={handleMouseLeave}\n            >\n                <span aria-hidden className={styles.iconContainer}>\n                    {icon}\n                </span>\n                <Typography.BodyXS inline className={styles.titleText}>\n                    {title}\n                </Typography.BodyXS>\n            </BasicButton>\n            {isMounted && (\n                <FloatingPortal>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                    >\n                        <div\n                            id={drawerId}\n                            data-testid=\"sidenav-drawer\"\n                            ref={setDrawerRef}\n                            {...themeProps}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            <ul\n                                style={transitionStyles}\n                                className={clsx(\n                                    styles.desktopDrawer,\n                                    (isCurrent ||\n                                        (isSelected && !currentItem)) &&\n                                        styles.desktopDrawerShowShadow\n                                )}\n                            >\n                                {children}\n                            </ul>\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </li>\n    );\n};\n"],"names":["SidenavItem","_a","children","icon","title","onClick","selected","className","otherProps","__rest","internalId","menuRef","currentItem","previouslySelectedItemId","selectedItem","setCurrentItem","setPreviouslySelectedItemId","setSelectedItem","useContext","SidenavContext","id","toLowerCase","replaceAll","drawerId","isSelected","itemId","isCurrent","isOpen","setIsOpen","useState","anchorRef","setAnchorRef","drawerRef","setDrawerRef","floatingStyles","refs","context","useFloating","open","onOpenChange","_event","reason","current","setPositionReference","handleSelect","handleHover","handleDismiss","placement","middleware","size","apply","elements","height","reference","getBoundingClientRect","value","Math","max","floating","style","click","useClick","toggle","stickIfOpen","hover","useHover","handleClose","safePolygon","focus","useFocus","visibleOnly","dismiss","useDismiss","enabled","getReferenceProps","getFloatingProps","useInteractions","isMounted","styles","transitionStyles","useTransitionStyles","themeProps","themeStyle","useInheritedThemeScope","useEffect","content","undefined","useResizeDetector","onResize","targetRef","refreshMode","refreshRate","getPreviousSelectedItemId","ariaControlProps","_jsxs","styles.container","BasicButton","Object","assign","type","ref","clsx","styles.defaultButton","styles.defaultButtonHighlight","onMouseLeave","_jsx","styles.iconContainer","Typography","BodyXS","inline","styles.titleText","FloatingPortal","FloatingFocusManager","modal","initialFocus","styles.desktopDrawer","styles.desktopDrawerShowShadow"],"mappings":"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"}

package/sidenav/sidenav-item.styles.d.ts

@@ -1,17 +1,7 @@
-interface StyleProps {
-    $highlight: boolean;
-}
-interface DrawerStyleProps {
-    $showDrawer: boolean;
-    $showShadow: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const TitleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const DefaultButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, StyleProps>> & string;
-export declare const DesktopDrawer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, DrawerStyleProps>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const titleText: import("@linaria/core").LinariaClassName;
+export declare const defaultButton: import("@linaria/core").LinariaClassName;
+export declare const defaultButtonHighlight: import("@linaria/core").LinariaClassName;
+export declare const desktopDrawer: import("@linaria/core").LinariaClassName;
+export declare const desktopDrawerShowShadow: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav-item.styles.js

@@ -1,70 +1,2 @@
-import r,{css as e}from"styled-components";import{BasicButton as o}from"../shared/input-wrapper/input-wrapper.js";import{lineClampCss as t}from"../shared/styles/index.js";import{Typography as i}from"../typography/index.js";import{V3_Radius as d,V3_Colour as s,V3_Motion as n,V3_Font as a,V3_Border as l,V3_Shadow as m}from"../v3_theme/index.js";const p=r.li`
-    width: 100%;
-`,$=r.span`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: 0.25rem 1rem;
-    border-radius: ${d.md};
-    color: ${s["icon-primary"]};
-    transition: ${n["duration-250"]} ${n["ease-default"]};
-
-    svg {
-        height: 1.25rem;
-        width: 1.25rem;
-    }
-`,c=r(i.BodyXS)`
-    ${t(2)}
-    margin-top: 0.25rem;
-    transition: ${n["duration-250"]} ${n["ease-default"]};
-`,h=r(o)`
-    width: 100%;
-    margin-top: 1rem;
-    cursor: pointer;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    &:hover,
-    &:focus {
-        ${$} {
-            background-color: ${s["bg-hover"]};
-        }
-
-        ${c} {
-            ${a["body-xs-semibold"]}
-            color: ${s["text-hover"]};
-        }
-    }
-
-    ${r=>r.$highlight&&e`
-            ${$} {
-                background-color: ${s["bg-hover"]};
-            }
-
-            ${c} {
-                ${a["body-xs-semibold"]}
-                color: ${s["text-selected"]};
-            }
-        `}
-`,u=r.ul`
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    width: 15rem;
-    height: 100%;
-    padding: 1rem 0.5rem;
-    background-color: ${s["bg-primary-subtlest"]};
-    border-top-right-radius: ${d.md};
-    border-bottom-right-radius: ${d.md};
-    border: ${l["width-010"]} ${l.solid} ${s.border};
-    ${r=>r.$showShadow&&e`
-            box-shadow: ${m["xs-subtle"]};
-            clip-path: inset(0 -6px 0 0);
-        `}
-`;export{p as Container,h as DefaultButton,u as DesktopDrawer,$ as IconContainer,c as TitleText};
+import"./sidenav-item.styles_lqw3kh.css";const s="cfxt5d9",d="i1rznncx",t="tegzrsi",c="d5cbs2m",e="d1g4locu",i="d1ao5fhb",n="d1m7u3sj";export{s as container,c as defaultButton,e as defaultButtonHighlight,i as desktopDrawer,n as desktopDrawerShowShadow,d as iconContainer,t as titleText};
 //# sourceMappingURL=sidenav-item.styles.js.map

package/sidenav/sidenav-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.styles.js","sources":["../../src/sidenav/sidenav-item.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Shadow,\n} from \"../v3_theme\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $highlight: boolean;\n}\n\ninterface DrawerStyleProps {\n    $showDrawer: boolean;\n    $showShadow: boolean;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.li`\n    width: 100%;\n`;\n\nexport const IconContainer = styled.span`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n    color: ${V3_Colour[\"icon-primary\"]};\n    transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const TitleText = styled(Typography.BodyXS)`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const DefaultButton = styled(BasicButton)<StyleProps>`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        ${IconContainer} {\n            background-color: ${V3_Colour[\"bg-hover\"]};\n        }\n\n        ${TitleText} {\n            ${V3_Font[\"body-xs-semibold\"]}\n            color: ${V3_Colour[\"text-hover\"]};\n        }\n    }\n\n    ${(props) =>\n        props.$highlight &&\n        css`\n            ${IconContainer} {\n                background-color: ${V3_Colour[\"bg-hover\"]};\n            }\n\n            ${TitleText} {\n                ${V3_Font[\"body-xs-semibold\"]}\n                color: ${V3_Colour[\"text-selected\"]};\n            }\n        `}\n`;\n\nexport const DesktopDrawer = styled.ul<DrawerStyleProps>`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${V3_Colour.border};\n    ${(props) =>\n        props.$showShadow &&\n        css`\n            box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n            clip-path: inset(0 -6px 0 0);\n        `}\n`;\n"],"names":["Container","styled","li","IconContainer","span","V3_Radius","V3_Colour","V3_Motion","TitleText","Typography","BodyXS","lineClampCss","DefaultButton","BasicButton","V3_Font","props","$highlight","css","DesktopDrawer","ul","V3_Border","border","$showShadow","V3_Shadow"],"mappings":"yVA6BO,MAAMA,EAAYC,EAAOC,EAAE;;EAIrBC,EAAgBF,EAAOG,IAAI;;;;;;qBAMnBC,EAAc;aACtBC,EAAU;kBACLC,EAAU,mBAAmBA,EAAU;;;;;;EAQ5CC,EAAYP,EAAOQ,EAAWC,OAAO;MAC5CC,EAAa;;kBAEDJ,EAAU,mBAAmBA,EAAU;EAG5CK,EAAgBX,EAAOY,EAAwB;;;;;;;;;;;;UAYlDV;gCACsBG,EAAU;;;UAGhCE;cACIM,EAAQ;qBACDR,EAAU;;;;MAIxBS,GACCA,EAAMC,YACNC,CAAG;cACGd;oCACsBG,EAAU;;;cAGhCE;kBACIM,EAAQ;yBACDR,EAAU;;;EAKtBY,EAAgBjB,EAAOkB,EAAoB;;;;;;;;wBAQhCb,EAAU;+BACHD,EAAc;kCACXA,EAAc;cAClCe,EAAU,gBAAgBA,EAAiB,SAAKd,EAAUe;MACjEN,GACCA,EAAMO,aACNL,CAAG;0BACeM,EAAU;;;"}
+{"version":3,"file":"sidenav-item.styles.js","sources":["../../src/sidenav/sidenav-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Font, Motion, Radius, Shadow } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    width: 100%;\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0.25rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n    color: ${Colour[\"icon-primary\"]};\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n\n    svg {\n        height: 1.25rem;\n        width: 1.25rem;\n    }\n`;\n\nexport const titleText = css`\n    ${lineClampCss(2)}\n    margin-top: 0.25rem;\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const defaultButton = css`\n    width: 100%;\n    margin-top: 1rem;\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n\n    &:hover,\n    &:focus {\n        .${iconContainer} {\n            background-color: ${Colour[\"bg-hover\"]};\n        }\n\n        .${titleText} {\n            ${Font[\"body-xs-semibold\"]}\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const defaultButtonHighlight = css`\n    .${iconContainer} {\n        background-color: ${Colour[\"bg-hover\"]};\n    }\n\n    .${titleText} {\n        ${Font[\"body-xs-semibold\"]}\n        color: ${Colour[\"text-selected\"]};\n    }\n`;\n\nexport const desktopDrawer = css`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    width: 15rem;\n    height: 100%;\n    padding: 1rem 0.5rem;\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    border-top-right-radius: ${Radius[\"md\"]};\n    border-bottom-right-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const desktopDrawerShowShadow = css`\n    box-shadow: ${Shadow[\"xs-subtle\"]};\n    clip-path: inset(0 -6px 0 0);\n`;\n"],"names":["container","iconContainer","titleText","defaultButton","defaultButtonHighlight","desktopDrawer","desktopDrawerShowShadow"],"mappings":"gEAQO,MAAMA,EAAS,UAITC,EAAa,WAgBbC,EAAS,UAMTC,EAAa,UAuBbC,EAAsB,WAWtBC,EAAa,WAcbC,EAAuB"}

package/sidenav/sidenav-item.styles_lqw3kh.css

@@ -0,0 +1,7 @@
+@layer fds{.cfxt5d9{width:100%;}
+.i1rznncx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0.25rem 1rem;border-radius:var(--fds-radius-md);color:var(--fds-colour-icon-primary);-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}.i1rznncx svg{height:1.25rem;width:1.25rem;}
+.tegzrsi{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:0.25rem;-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.d5cbs2m{width:100%;margin-top:1rem;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.d5cbs2m:hover .i1rznncx,.d5cbs2m:focus .i1rznncx{background-color:var(--fds-colour-bg-hover);}.d5cbs2m:hover .tegzrsi,.d5cbs2m:focus .tegzrsi{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-hover);}
+.d1g4locu .i1rznncx{background-color:var(--fds-colour-bg-hover);}.d1g4locu .tegzrsi{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-selected);}
+.d1ao5fhb{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:auto;width:15rem;height:100%;padding:1rem 0.5rem;background-color:var(--fds-colour-bg-primary-subtlest);border-top-right-radius:var(--fds-radius-md);border-bottom-right-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.d1m7u3sj{box-shadow:var(--fds-shadow-xs-subtle);-webkit-clip-path:inset(0 -6px 0 0);clip-path:inset(0 -6px 0 0);}}

package/sidenav/sidenav.d.ts

@@ -1,7 +1,18 @@
 import type { SidenavProps } from "./types";
-export declare const Sidenav: (({ fixed, children, "aria-label": ariaLabel, ...otherProps }: SidenavProps) => import("react/jsx-runtime").JSX.Element) & {
-    Group: ({ separator, children, ...otherProps }: import("./types").SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, icon, title, onClick, selected, ...otherProps }: import("./types").SidenavItemProps) => import("react/jsx-runtime").JSX.Element;
-    DrawerItem: ({ id, title, onClick, children, ...otherProps }: import("./types").SidenavDrawerItemProps) => import("react/jsx-runtime").JSX.Element;
-    DrawerSubitem: ({ id, title, onClick, ...otherProps }: import("./types").SidenavDrawerSubitemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A fixed sidebar navigation component for multi-level page navigation.
+ *
+ * Use `Sidenav` to present a persistent icon-based navigation rail with
+ * optional menu drawers.
+ * @keywords navigation, navigation rail, sidebar
+ */
+export declare const Sidenav: (({ fixed, children, "aria-label": ariaLabel, className, ...otherProps }: SidenavProps) => import("react/jsx-runtime").JSX.Element) & {
+    /** Renders a group of navigation items, optionally separated by a divider. */
+    Group: ({ separator, children, className, ...otherProps }: import("./types").SidenavGroupProps) => import("react/jsx-runtime").JSX.Element;
+    /** Renders a single icon-and-label navigation entry that can open a menu drawer. */
+    Item: ({ children, icon, title, onClick, selected, className, ...otherProps }: import("./types").SidenavItemProps) => import("react/jsx-runtime").JSX.Element;
+    /** Renders a menu item inside an item's drawer, with optional collapsible sub-items. */
+    DrawerItem: ({ id, title, onClick, children, className, ...otherProps }: import("./types").SidenavDrawerItemProps) => import("react/jsx-runtime").JSX.Element;
+    /** Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */
+    DrawerSubitem: ({ id, title, onClick, className, ...otherProps }: import("./types").SidenavDrawerSubitemProps) => import("react/jsx-runtime").JSX.Element;
 };

package/sidenav/sidenav.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useRef as i,useState as m}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Wrapper as o,DesktopContainer as a,MobileContainer as l}from"./sidenav.styles.js";import{SidenavContext as d}from"./sidenav-context.js";import{SidenavDrawerItem as n}from"./sidenav-drawer-item.js";import{SidenavDrawerSubitem as p}from"./sidenav-drawer-subitem.js";import{SidenavGroup as c}from"./sidenav-group.js";import{SidenavItem as u}from"./sidenav-item.js";const f=Object.assign((n=>{var{fixed:p=!0,children:c,"aria-label":u="Sidebar"}=n,f=e(n,["fixed","children","aria-label"]);const j=i(null),v=i(null),[I]=m((()=>s.generate())),[b,h]=m(void 0),[x,g]=m(void 0),[y,S]=m(void 0);return r(d.Provider,{value:{internalId:I,menuRef:v,currentItem:b,selectedItem:x,previouslySelectedItemId:y,setCurrentItem:h,setSelectedItem:g,setPreviouslySelectedItemId:S},children:t(o,Object.assign({$fixed:p,ref:j},f,{children:[r(a,{ref:v,"aria-label":u,children:c}),r(l,{})]}))})}),{Group:c,Item:u,DrawerItem:n,DrawerSubitem:p});export{f as Sidenav};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import t from"clsx";import{useRef as a,useState as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{containerBase as l,desktopContainer as o,mobileContainer as n,wrapper as d,wrapperFixed as c}from"./sidenav.styles.js";import{SidenavContext as p}from"./sidenav-context.js";import{SidenavDrawerItem as u}from"./sidenav-drawer-item.js";import{SidenavDrawerSubitem as v}from"./sidenav-drawer-subitem.js";import{SidenavGroup as f}from"./sidenav-group.js";import{SidenavItem as j}from"./sidenav-item.js";const I=Object.assign((u=>{var{fixed:v=!0,children:f,"aria-label":j="Sidebar",className:I}=u,b=e(u,["fixed","children","aria-label","className"]);const h=a(null),x=a(null),g=m(),[y,N]=s(void 0),[S,w]=s(void 0),[D,O]=s(void 0);return r(p.Provider,{value:{internalId:g,menuRef:x,currentItem:y,selectedItem:S,previouslySelectedItemId:D,setCurrentItem:N,setSelectedItem:w,setPreviouslySelectedItemId:O},children:i("div",Object.assign({ref:h},b,{className:t(d,v&&c,I),children:[r("nav",{ref:x,"aria-label":j,className:t(l,o),children:f}),r("nav",{className:t(l,n)})]}))})}),{Group:f,Item:j,DrawerItem:u,DrawerSubitem:v});export{I as Sidenav};
 //# sourceMappingURL=sidenav.js.map

package/sidenav/sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav.js","sources":["../../src/sidenav/sidenav.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { SimpleIdGenerator } from \"../util\";\nimport { DesktopContainer, MobileContainer, Wrapper } from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const [internalId] = useState(() => SimpleIdGenerator.generate());\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <Wrapper $fixed={fixed} ref={wrapperRef} {...otherProps}>\n                <DesktopContainer ref={menuRef} aria-label={ariaLabel}>\n                    {children}\n                </DesktopContainer>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <MobileContainer></MobileContainer>\n            </Wrapper>\n        </SidenavContext.Provider>\n    );\n};\n\nexport const Sidenav = Object.assign(SidenavBase, {\n    Group: SidenavGroup,\n    Item: SidenavItem,\n    DrawerItem: SidenavDrawerItem,\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useState","SimpleIdGenerator","generate","currentItem","setCurrentItem","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","Wrapper","$fixed","ref","DesktopContainer","MobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"6qBAYA,MAkDaA,EAAUC,OAAOC,QAlDTC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,WAASH,EAChCI,EAAUC,EAAAL,EAJI,mCASjB,MAAMM,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,OAChCE,GAAcC,GAAS,IAAMC,EAAkBC,cAE/CC,EAAaC,GAAkBJ,OAEpCK,IACKC,EAAcC,GAAmBP,OAEtCK,IACKG,EAA0BC,GAA+BT,OAE9DK,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHd,aACAD,UACAK,cACAG,eACAE,2BACAJ,iBACAG,kBACAE,+BACHjB,SAEDsB,EAACC,EAAO3B,OAAAC,OAAA,CAAA2B,OAASzB,EAAO0B,IAAKrB,GAAgBF,EAAU,CAAAF,SAAA,CACnDkB,EAACQ,EAAgB,CAACD,IAAKnB,EAAO,aAAcL,EAASD,SAChDA,IAGLkB,EAACS,EAAe,CAAA,QAEE,GAIgB,CAC9CC,MAAOC,EACPC,KAAMC,EACNC,WAAYC,EACZC,cAAeC"}
+{"version":3,"file":"sidenav.js","sources":["../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    className,\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <div\n                ref={wrapperRef}\n                {...otherProps}\n                className={clsx(\n                    styles.wrapper,\n                    fixed && styles.wrapperFixed,\n                    className\n                )}\n            >\n                <nav\n                    ref={menuRef}\n                    aria-label={ariaLabel}\n                    className={clsx(\n                        styles.containerBase,\n                        styles.desktopContainer\n                    )}\n                >\n                    {children}\n                </nav>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <nav\n                    className={clsx(\n                        styles.containerBase,\n                        styles.mobileContainer\n                    )}\n                ></nav>\n            </div>\n        </SidenavContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * A fixed sidebar navigation component for multi-level page navigation.\n *\n * Use `Sidenav` to present a persistent icon-based navigation rail with\n * optional menu drawers.\n * @keywords navigation, navigation rail, sidebar\n */\nexport const Sidenav = Object.assign(SidenavBase, {\n    /** Renders a group of navigation items, optionally separated by a divider. */\n    Group: SidenavGroup,\n    /** Renders a single icon-and-label navigation entry that can open a menu drawer. */\n    Item: SidenavItem,\n    /** Renders a menu item inside an item's drawer, with optional collapsible sub-items. */\n    DrawerItem: SidenavDrawerItem,\n    /** Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"6vBAaA,MA+EaA,EAAUC,OAAOC,QA/ETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,MACjCE,EAAaC,KAEZC,EAAaC,GAAkBC,OAEpCC,IACKC,EAAcC,GAAmBH,OAEtCC,IACKG,EAA0BC,GAA+BL,OAE9DC,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,EAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,EACPC,EACA1B,GAAS2B,EACTxB,GACHF,SAAA,CAEDkB,EAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EACPG,EACAC,GACH5B,SAEAA,IAGLkB,EAAA,MAAA,CACIhB,UAAWsB,EACPG,EACAE,UAIU,GAYgB,CAE9CC,MAAOC,EAEPC,KAAMC,EAENC,WAAYC,EAEZC,cAAeC"}

package/sidenav/sidenav.styles.d.ts

@@ -1,11 +1,5 @@
-interface StyleProps {
-    $fixed?: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const DesktopContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, never>> & string;
-export declare const MobileContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, never>> & string;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperFixed: import("@linaria/core").LinariaClassName;
+export declare const containerBase: import("@linaria/core").LinariaClassName;
+export declare const desktopContainer: import("@linaria/core").LinariaClassName;
+export declare const mobileContainer: import("@linaria/core").LinariaClassName;

package/sidenav/sidenav.styles.js

@@ -1,29 +1,2 @@
-import e from"styled-components";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as t}from"../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/string-helper.js";import{V3_Border as i,V3_Colour as o,V3_MediaQuery as r}from"../v3_theme/index.js";const m=e.div`
-    display: flex;
-    position: ${e=>e.$fixed?"fixed":"relative"};
-    width: fit-content;
-`,d=e.nav`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    width: 8.5rem;
-    border: ${i["width-010"]} ${i.solid} ${o.border};
-    background-color: ${t["bg-primary-subtlest"]};
-    padding: 0.5rem 0 1.5rem 0;
-`,n=e(d)`
-    height: 100vh;
-    left: 0;
-    top: 0;
-    ${r.MaxWidth.sm} {
-        display: none;
-        visibility: hidden;
-    }
-`,s=e(d)`
-    display: none;
-    visibility: hidden;
-    ${r.MaxWidth.sm} {
-        display: none; // NOTE: Since mobile view not supported yet
-    }
-`;export{n as DesktopContainer,s as MobileContainer,m as Wrapper};
+import"./sidenav.styles_1vxezie.css";const n="wd6aozb",s="wtjnnld",e="c1rf41n4",t="dqvhkb2",d="mvkcntz";export{e as containerBase,t as desktopContainer,d as mobileContainer,n as wrapper,s as wrapperFixed};
 //# sourceMappingURL=sidenav.styles.js.map

package/sidenav/sidenav.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav.styles.js","sources":["../../src/sidenav/sidenav.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Colour } from \"../theme\";\nimport { V3_Border, V3_Colour, V3_MediaQuery } from \"../v3_theme\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface StyleProps {\n    $fixed?: boolean;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Wrapper = styled.div<StyleProps>`\n    display: flex;\n    position: ${(props) => (props.$fixed ? \"fixed\" : \"relative\")};\n    width: fit-content;\n`;\n\nconst Container = styled.nav`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow-y: auto;\n    width: 8.5rem;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${V3_Colour.border};\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    padding: 0.5rem 0 1.5rem 0;\n`;\n\nexport const DesktopContainer = styled(Container)`\n    height: 100vh;\n    left: 0;\n    top: 0;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileContainer = styled(Container)`\n    display: none;\n    visibility: hidden;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        display: none; // NOTE: Since mobile view not supported yet\n    }\n`;\n"],"names":["Wrapper","styled","div","props","$fixed","Container","nav","V3_Border","V3_Colour","border","Colour","DesktopContainer","V3_MediaQuery","MaxWidth","sm","MobileContainer"],"mappings":"6dAeO,MAAMA,EAAUC,EAAOC,GAAe;;gBAE5BC,GAAWA,EAAMC,OAAS,QAAU;;EAI/CC,EAAYJ,EAAOK,GAAG;;;;;;cAMdC,EAAU,gBAAgBA,EAAiB,SAAKC,EAAUC;wBAChDC,EAAO;;EAIlBC,EAAmBV,EAAOI,EAAU;;;;MAI3CO,EAAcC,SAASC;;;;EAMhBC,EAAkBd,EAAOI,EAAU;;;MAG1CO,EAAcC,SAASC;;;"}
+{"version":3,"file":"sidenav.styles.js","sources":["../../src/sidenav/sidenav.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const wrapper = css`\n    display: flex;\n    position: relative;\n    width: fit-content;\n`;\n\nexport const wrapperFixed = css`\n    position: fixed;\n`;\n\nexport const containerBase = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow-y: auto;\n    width: 8.5rem;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background-color: ${Colour[\"bg-primary-subtlest\"]};\n    padding: 0.5rem 0 1.5rem 0;\n`;\n\nexport const desktopContainer = css`\n    height: 100vh;\n    left: 0;\n    top: 0;\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileContainer = css`\n    display: none;\n    visibility: hidden;\n    ${MediaQuery.MaxWidth.sm} {\n        display: none; /* NOTE: Since mobile view not supported yet */\n    }\n`;\n"],"names":["wrapper","wrapperFixed","containerBase","desktopContainer","mobileContainer"],"mappings":"4DAOO,MAAMA,EAAO,UAMPC,EAAY,UAIZC,EAAa,WAWbC,EAAgB,UAUhBC,EAAe"}

package/sidenav/sidenav.styles_1vxezie.css

@@ -0,0 +1,5 @@
+@layer fds{.wd6aozb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.wtjnnld{position:fixed;}
+.c1rf41n4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-y:auto;width:8.5rem;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-primary-subtlest);padding:0.5rem 0 1.5rem 0;}
+.dqvhkb2{height:100vh;left:0;top:0;}:where(body.fds-breakpoint-sm-max) .dqvhkb2{display:none;visibility:hidden;}
+.mvkcntz{display:none;visibility:hidden;}:where(body.fds-breakpoint-sm-max) .mvkcntz{display:none;}}

package/sidenav/types.d.ts

@@ -3,59 +3,109 @@ interface SidenavBaseProps {
     "data-testid"?: string | undefined;
     className?: string | undefined;
 }
+/**
+ * Props for the `Sidenav` component.
+ *
+ */
 export interface SidenavProps extends SidenavBaseProps {
-    /** Specifies if sidenav should be fixed to left. Defaults to true */
+    /**
+     * Pins the sidebar to the left edge of the viewport while the page scrolls.
+     *
+     * @default true
+     */
     fixed?: boolean | undefined;
     /**
-     * <Sidenav.Group>
-     *   ...
-     * </Sidenav.Group>
+     * Navigation groups and items. Accepts `Sidenav.Group` elements.
      */
     children: React.ReactNode;
-    /** the accessible label */
+    /**
+     * Accessible label announced for the sidebar navigation landmark.
+     *
+     * @default "Sidebar"
+     */
     "aria-label"?: string | undefined;
 }
+/**
+ * Props for the `Sidenav.Group` sub-component.
+ */
 export interface SidenavGroupProps extends SidenavBaseProps {
-    /** Specifies if bottom divider will be rendered */
+    /**
+     * Renders a horizontal divider after the last item in the group.
+     */
     separator?: boolean | undefined;
     /**
-     * <Sidenav.Item>
-     *   ...
-     * </Sidenav.Item>
+     * Navigation items within the group. Accepts `Sidenav.Item` elements.
      */
     children: React.ReactNode;
-    /** the accessible label */
+    /**
+     * Accessible label for this navigation group.
+     */
     "aria-label"?: string | undefined;
 }
+/**
+ * Props for the `Sidenav.Item` sub-component.
+ */
 export interface SidenavItemProps extends SidenavBaseProps {
+    /**
+     * Label displayed below the icon.
+     */
     title: string;
-    /** The icon to be rendered */
+    /**
+     * Icon displayed above the title.
+     */
     icon: React.ReactNode;
-    /** Indicates if an item is initially selected */
+    /**
+     * Sets the item as initially selected on mount.
+     */
     selected?: boolean | undefined;
-    /** Called when item is selected */
+    /**
+     * Called when the item is activated and it has no drawer children. When
+     * `children` are provided, clicking opens the drawer without invoking this
+     * callback.
+     *
+     * @param id The item's resolved `id` value.
+     */
     onClick?: ((id: string | undefined) => void) | undefined;
     /**
-     * <Sidenav.DrawerItem>
-     *   ...
-     * </Sidenav.DrawerItem>
+     * Drawer content displayed to the right of the sidebar when the item is
+     * active. Accepts `Sidenav.DrawerItem` elements.
      */
     children?: React.ReactNode | undefined;
 }
+/**
+ * Props for the `Sidenav.DrawerItem` sub-component.
+ */
 export interface SidenavDrawerItemProps extends SidenavBaseProps {
+    /**
+     * The displayed label.
+     */
     title: string;
     /**
-     * <Sidenav.DrawerSubitem>
-     *   ...
-     * </Sidenav.DrawerSubitem>
+     * Sub-level entries for this section. Accepts `Sidenav.DrawerSubitem`
+     * elements. When provided, clicking toggles the collapsed/expanded state
+     * instead of invoking `onClick`.
      */
     children?: React.ReactNode | undefined;
-    /** Called when item is selected */
+    /**
+     * Called when the item is activated and it has no sub-item children.
+     *
+     * @param id The item's `id` value.
+     */
     onClick?: ((id: string | undefined) => void) | undefined;
 }
+/**
+ * Props for the `Sidenav.DrawerSubitem` sub-component.
+ */
 export interface SidenavDrawerSubitemProps extends SidenavBaseProps {
+    /**
+     * The displayed label.
+     */
     title: string;
-    /** Called when item is selected */
+    /**
+     * Called when the sub-item is activated.
+     *
+     * @param id The sub-item's `id` value.
+     */
     onClick?: ((id: string | undefined) => void) | undefined;
 }
 export {};