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

package/link-list/types.d.ts

@@ -1,3 +1,92 @@
-import type { BaseProps, LinkListEagerProps, LinkListLazyProps } from "./internal-types";
-export type { LinkListItemProps, LinkListStyle } from "./internal-types";
-export type LinkListProps<T> = BaseProps<T> & (LinkListEagerProps | LinkListLazyProps);
+/**
+ * Visual size variant for `LinkList` items.
+ *
+ * - `"default"` renders standard body text
+ * - `"small"` renders reduced text for compact layouts.
+ *
+ * @default "default"
+ */
+export type LinkListStyle = "default" | "small";
+/**
+ * Props for a single item in a `LinkList`.
+ */
+export interface LinkListItemProps<T> extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
+    /** Primary label displayed as the link text. */
+    title: string | JSX.Element;
+    /** Secondary text shown below the title. */
+    description?: string | JSX.Element | undefined;
+    /**
+     * Additional content rendered below the description.
+     * Accepts a JSX element for rich secondary content.
+     */
+    secondaryDescription?: JSX.Element | undefined;
+    "data-testid"?: string | undefined;
+    /** Arbitrary custom data passed through to the `onItemClick` callback. */
+    options?: T | undefined;
+    /** Called when an item is clicked. This overrides the `onItemClick` event handler. */
+    onClick?: ((event: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+}
+/**
+ * Base props for `LinkList`.
+ */
+export type LinkListBaseProps<T> = {
+    /** The list of link items to render. */
+    items: LinkListItemProps<T>[];
+    /**
+     * Visual size variant applied to all items.
+     *
+     * @default "default"
+     */
+    style?: LinkListStyle | undefined;
+    className?: string | undefined;
+    "data-testid"?: string | undefined;
+    /**
+     * Component-level click handler called for every item click, unless the
+     * item defines its own `onClick`.
+     *
+     * @param item The `LinkListItemProps` of the clicked item, including any
+     * custom `options` data.
+     * @param event The underlying mouse event from the anchor element.
+     */
+    onItemClick?: ((item: LinkListItemProps<T>, event: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+    /**
+     * Overrides the default toggle button labels.
+     */
+    customLabels?: {
+        viewMore?: string | undefined;
+        viewLess?: string | undefined;
+    } | undefined;
+};
+/**
+ * Props for eager rendering of `LinkList`.
+ */
+export type LinkListEagerProps = {
+    /** When `"eager"`, all items are rendered immediately. */
+    loadMode?: "eager" | undefined;
+    /**
+     * Maximum number of items shown before the list is truncated.
+     * Items beyond this count are hidden until the user activates the toggle.
+     * When omitted, all items are shown without truncation.
+     */
+    maxShown?: number | undefined;
+};
+/**
+ * Props for lazy loading of `LinkList`.
+ */
+export type LinkListLazyProps = {
+    /** When `"lazy"`, items are loaded on demand. */
+    loadMode: "lazy";
+    /**
+     * Whether more items are available to load.
+     * When `false`, the "View more" button is hidden.
+     */
+    loadMore: boolean;
+    /**
+     * Called when the user activates the "View more" button.
+     */
+    onLoadMore: () => void | Promise<void>;
+};
+/**
+ * Props for the `LinkList` component.
+ */
+export type LinkListProps<T> = LinkListBaseProps<T> & (LinkListEagerProps | LinkListLazyProps);

package/local-nav/local-nav-dropdown/local-nav-dropdown.d.ts

@@ -1,3 +1,15 @@
 import React from "react";
 import type { LocalNavDropdownProps } from "../types";
+/**
+ * A collapsible dropdown used for in-page navigation on mobile viewports.
+ *
+ * Use `LocalNavDropdown` when the page has multiple named sections and screen
+ * width is insufficient for a persistent sidebar.
+ *
+ * @remarks
+ * This component adopts a fundamentally different interaction model from
+ * `LocalNavMenu`: it collapses into a single trigger button and uses a menu
+ * overlay, making it suited for mobile while `LocalNavMenu` suits desktop.
+ * @keywords in-page navigation, sections
+ */
 export declare const LocalNavDropdown: (props: LocalNavDropdownProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;

package/local-nav/local-nav-dropdown/local-nav-dropdown.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useState as o,useImperativeHandle as d,useEffect as s}from"react";import{Typography as l}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import{NavWrapper as a,NavSelect as m,NavSelectIcon as u,NavItemList as p,Backdrop as w,NavItem as f,StyledTickIcon as h,NavItemLabel as v}from"./local-nav-dropdown.styles.js";const y=r.forwardRef((({defaultLabel:r,stickyOffset:y=0,onNavItemSelect:x,items:k,selectedItemIndex:D,id:$,"data-testid":E,className:I,renderItem:L},j)=>{const C=i(null),S=i(null),B=i(null),z=i([]),[A,H]=o(!1),[K,M]=o(!1),[N,O]=o(0),[R,T]=o(0),[W,U]=o(0),[q,F]=o(0),G=E||"local-nav-dropdown",[J]=o((()=>c.generate()));d(j,(()=>B.current));const P="number"==typeof D&&D>=0&&A?k[D].title:r;s((()=>{if(S.current){const e=S.current.getBoundingClientRect().height;T(e)}}),[]),s((()=>(Q(),()=>{V("remove")})),[]),s((()=>{V(K&&A?"add":"remove")}),[K,A]),s((()=>{O(window.innerHeight);const e=()=>{O(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),s((()=>{const e=new IntersectionObserver((e=>{const[t]=e;H(!t.isIntersecting)}),{threshold:1,rootMargin:`-${y}px 0px 0px 0px`});return C.current&&e.observe(C.current),()=>e.disconnect()}),[y]),s((()=>{const e=()=>{const e=null==B?void 0:B.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,i=Math.max(n,r);U(i)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),s((()=>{var e;K&&(null===(e=z.current[q])||void 0===e||e.focus())}),[K,q]);const Q=()=>{if(!document.getElementById(g)){const e=document.createElement("style");e.id=g;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${b} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${b}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},V=e=>{const t=document.body.classList.contains(b);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(b):document.body.classList.add(b)},X=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:C,"data-testid":"sticky-ref"}),e(a,{$isStickied:A,$sideMargin:W,$stickyOffset:y,ref:B,id:$,"data-testid":G,className:I,children:[e(m,{ref:S,role:"button",onClick:()=>{M((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),K||M(!0),F(0)):"ArrowUp"===t?(e.preventDefault(),K||M(!0),F(k.length-1)):"Enter"===t||" "===t?(e.preventDefault(),M(!0),F(0)):("Tab"===t||"Escape"===t)&&M(!1)},"data-testid":`${G}-label`,$isDropdownExpanded:K,"aria-haspopup":"true","aria-expanded":K,"aria-controls":J,tabIndex:0,children:[n(l.BodyBL,{weight:"semibold",children:P}),n(u,{$isDropdownExpanded:K})]}),K&&n(p,{id:J,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(q+1)%k.length;F(t)}else if("ArrowUp"===n){e.preventDefault();const t=q>0?q-1:k.length-1;F(t)}else"Tab"===n?M(!1):"Escape"===n&&(M(!1),null===(t=S.current)||void 0===t||t.focus())},"data-testid":`${G}-dropdown-list`,$viewportHeight:N-R-y,children:k.map(((t,r)=>(({handleClick:t,isSelected:r,item:i,renderItem:o,index:d})=>{const{id:s,title:l}=i;return o?n("li",{id:s,role:"menuitem",onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:o(i,{selected:r,stickied:A})},d):e(f,{id:s,role:"menuitem",$isSelected:r&&A,onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:[r&&n(h,{}),n(v,{$isSelected:r,children:l})]},d)})({handleClick:e=>((e,t,n)=>{x&&x(e,t,n),M(!1)})(e,t,r),isSelected:r===D,item:t,renderItem:L,index:r})))}),K&&A&&n(w,{onClick:()=>{M(!1)}})]})]})})),g="lifesg-ds-local-nav-dropdown-stylesheet",b="lifesg-ds-local-nav-dropdown-open";export{y as LocalNavDropdown};
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{TickIcon as o}from"@lifesg/react-icons/tick";import i from"clsx";import s,{useRef as d,useState as l,useImperativeHandle as a,useEffect as c}from"react";import"../../theme/theme-provider/index.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 m}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as p}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as u}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as h,navSelectIcon as f,navSelectIconExpanded as v,navSelect as w,navSelectExpanded as y,navItemList as g,backdrop as x,navWrapper as b,navWrapperStickied as k,tickIcon as j,navItemLabel as I,navItemLabelSelected as D,navItem as E,navItemSelected as L}from"./local-nav-dropdown.styles.js";const N=s.forwardRef((({defaultLabel:s,stickyOffset:N=0,onNavItemSelect:B,items:W,selectedItemIndex:z,id:A,"data-testid":H,className:K,renderItem:M},O)=>{const R=d(null),S=d(null),T=d(null),q=d(null),U=d([]),[F,G]=l(!1),[J,P]=l(!1),[Q,V]=l(0),[X,Y]=l(0),[Z,_]=l(0),[ee,te]=l(0),ne=H||"local-nav-dropdown",re=u();a(O,(()=>T.current)),m(T,{[h.navWrapper.stickyOffset]:`${N}px`,[h.navWrapper.sideMargin]:`${Z}px`}),m(q,{[h.navItemList.viewportHeight]:Q-X-N+"px"});const oe="number"==typeof z&&z>=0&&F?W[z].title:s;c((()=>{if(S.current){const e=S.current.getBoundingClientRect().height;Y(e)}}),[]),c((()=>(ie(),()=>{se("remove")})),[]),c((()=>{se(J&&F?"add":"remove")}),[J,F]),c((()=>{V(window.innerHeight);const e=()=>{V(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),c((()=>{const e=new IntersectionObserver((e=>{const[t]=e;G(!t.isIntersecting)}),{threshold:1,rootMargin:`-${N}px 0px 0px 0px`});return R.current&&e.observe(R.current),()=>e.disconnect()}),[N]),c((()=>{const e=()=>{const e=null==T?void 0:T.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,o=Math.max(n,r);_(o)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),c((()=>{var e;J&&(null===(e=U.current[ee])||void 0===e||e.focus())}),[J,ee]);const ie=()=>{if(!document.getElementById(C)){const e=document.createElement("style");e.id=C;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${$} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${$}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},se=e=>{const t=document.body.classList.contains($);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove($):document.body.classList.add($)},de=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:R,"data-testid":"sticky-ref"}),e("nav",{ref:T,id:A,"data-testid":ne,className:i(b,F&&k,K),children:[e("div",{ref:S,role:"button",onClick:()=>{P((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),J||P(!0),te(0)):"ArrowUp"===t?(e.preventDefault(),J||P(!0),te(W.length-1)):"Enter"===t||" "===t?(e.preventDefault(),P(!0),te(0)):("Tab"===t||"Escape"===t)&&P(!1)},"data-testid":`${ne}-label`,className:i(w,J&&y),"aria-haspopup":"true","aria-expanded":J,"aria-controls":re,tabIndex:0,children:[n(p.BodyBL,{weight:"semibold",children:oe}),n(r,{className:i(f,J&&v)})]}),J&&n("ul",{ref:q,id:re,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(ee+1)%W.length;te(t)}else if("ArrowUp"===n){e.preventDefault();const t=ee>0?ee-1:W.length-1;te(t)}else"Tab"===n?P(!1):"Escape"===n&&(P(!1),null===(t=S.current)||void 0===t||t.focus())},"data-testid":`${ne}-dropdown-list`,className:g,children:W.map(((t,r)=>(({handleClick:t,isSelected:r,item:s,renderItem:d,index:l})=>{const{id:a,title:c}=s;return d?n("li",{id:a,role:"menuitem",onClick:t,onKeyDown:e=>de(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{U.current[l]=e},children:d(s,{selected:r,stickied:F})},l):e("li",{id:a,role:"menuitem",className:i(E,r&&F&&L),onClick:t,onKeyDown:e=>de(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{U.current[l]=e},children:[r&&n(o,{className:j}),n("div",{className:i(I,r&&D),children:c})]},l)})({handleClick:e=>((e,t,n)=>{B&&B(e,t,n),P(!1)})(e,t,r),isSelected:r===z,item:t,renderItem:M,index:r})))}),J&&F&&n("div",{className:x,onClick:()=>{P(!1)}})]})]})})),C="lifesg-ds-local-nav-dropdown-stylesheet",$="lifesg-ds-local-nav-dropdown-open";export{N as LocalNavDropdown};
 //# sourceMappingURL=local-nav-dropdown.js.map

package/local-nav/local-nav-dropdown/local-nav-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport { SimpleIdGenerator } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport {\n    Backdrop,\n    NavItem,\n    NavItemLabel,\n    NavItemList,\n    NavSelect,\n    NavSelectIcon,\n    NavWrapper,\n    StyledTickIcon,\n} from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n    {\n        defaultLabel,\n        stickyOffset = 0,\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": testId,\n        className,\n        renderItem,\n    }: LocalNavDropdownProps,\n    ref: React.Ref<HTMLElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const detectStickyRef = useRef<HTMLSpanElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const navWrapperRef = useRef<HTMLElement>(null);\n    const listItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n    const [isStickied, setIsStickied] = useState<boolean>(false);\n    const [isDropdownExpanded, setIsDropdownExpanded] =\n        useState<boolean>(false);\n    const [viewportHeight, setViewportHeight] = useState(0);\n    const [dropdowntHeight, setDropdownHeight] = useState(0);\n    const [dynamicMargin, setDynamicMargin] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const navTestId = testId || \"local-nav-dropdown\";\n    const [dropdownListId] = useState(() => SimpleIdGenerator.generate());\n\n    useImperativeHandle(ref, () => navWrapperRef.current!);\n\n    const labelText =\n        typeof selectedItemIndex === \"number\" &&\n        selectedItemIndex >= 0 &&\n        isStickied\n            ? items[selectedItemIndex].title\n            : defaultLabel;\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n\n    useEffect(() => {\n        if (dropdownRef.current) {\n            const dropdownHeight =\n                dropdownRef.current.getBoundingClientRect().height;\n            setDropdownHeight(dropdownHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded && isStickied) {\n            applyBodyStyleClass(\"add\");\n        } else {\n            applyBodyStyleClass(\"remove\");\n        }\n    }, [isDropdownExpanded, isStickied]);\n\n    useEffect(() => {\n        setViewportHeight(window.innerHeight);\n        const handleResize = () => {\n            setViewportHeight(window.innerHeight);\n        };\n        window.addEventListener(\"resize\", handleResize);\n        return () => window.removeEventListener(\"resize\", handleResize);\n    }, []);\n\n    useEffect(() => {\n        const callback = (entries: IntersectionObserverEntry[]) => {\n            const [entry] = entries;\n            setIsStickied(!entry.isIntersecting);\n        };\n\n        const observer = new IntersectionObserver(callback, {\n            threshold: 1,\n            rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n        });\n\n        if (detectStickyRef.current) {\n            observer.observe(detectStickyRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [stickyOffset]);\n\n    useEffect(() => {\n        const adjustPadding = () => {\n            const dropdown = navWrapperRef?.current;\n            if (dropdown) {\n                const dropdownRect = dropdown.getBoundingClientRect();\n                const spaceToRight =\n                    document.body.clientWidth - dropdownRect.right;\n                const spaceToLeft = dropdownRect.left;\n                // Calculate the padding needed to balance the dropdown in the viewport\n                const sidePadding = Math.max(spaceToRight, spaceToLeft);\n                setDynamicMargin(sidePadding);\n            }\n        };\n        adjustPadding();\n\n        window.addEventListener(\"resize\", adjustPadding);\n\n        return () => {\n            window.removeEventListener(\"resize\", adjustPadding);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded) {\n            listItemRefs.current[focusedIndex]?.focus();\n        }\n    }, [isDropdownExpanded, focusedIndex]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            DROPDOWN_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleToggleDropdown = () => {\n        setIsDropdownExpanded((prev) => !prev);\n    };\n\n    const handleDismissBackdrop = () => {\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemClick = (\n        e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        item: LocalNavItemProps,\n        index: number\n    ) => {\n        if (onNavItemSelect) {\n            onNavItemSelect(e, item, index);\n        }\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(0);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(items.length - 1);\n        } else if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            setIsDropdownExpanded(true);\n            setFocusedIndex(0);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n        }\n    };\n\n    const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            const nextIndex = (focusedIndex + 1) % items.length;\n            setFocusedIndex(nextIndex);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            const prevIndex =\n                focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n            setFocusedIndex(prevIndex);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n            dropdownRef.current?.focus();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDropdownNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavDropdownItemComponentProps) => {\n        const { id, title } = item;\n\n        if (renderItem) {\n            return (\n                <li\n                    id={id}\n                    key={index}\n                    role=\"menuitem\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    aria-current={isSelected ? true : undefined}\n                    tabIndex={-1}\n                    ref={(el) => {\n                        listItemRefs.current[index] = el;\n                    }}\n                >\n                    {renderItem(item, {\n                        selected: isSelected,\n                        stickied: isStickied,\n                    })}\n                </li>\n            );\n        }\n\n        return (\n            <NavItem\n                id={id}\n                key={index}\n                role=\"menuitem\"\n                $isSelected={isSelected && isStickied}\n                onClick={handleClick}\n                onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                aria-current={isSelected ? true : undefined}\n                tabIndex={-1}\n                ref={(el) => {\n                    listItemRefs.current[index] = el as HTMLLIElement;\n                }}\n            >\n                {isSelected && <StyledTickIcon />}\n                <NavItemLabel $isSelected={isSelected}>{title}</NavItemLabel>\n            </NavItem>\n        );\n    };\n\n    return (\n        <>\n            <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n            <NavWrapper\n                $isStickied={isStickied}\n                $sideMargin={dynamicMargin}\n                $stickyOffset={stickyOffset}\n                ref={navWrapperRef}\n                id={id}\n                data-testid={navTestId}\n                className={className}\n            >\n                <NavSelect\n                    ref={dropdownRef}\n                    role=\"button\"\n                    onClick={handleToggleDropdown}\n                    onKeyDown={handleNavSelectKeyDown}\n                    data-testid={`${navTestId}-label`}\n                    $isDropdownExpanded={isDropdownExpanded}\n                    aria-haspopup=\"true\"\n                    aria-expanded={isDropdownExpanded}\n                    aria-controls={dropdownListId}\n                    tabIndex={0}\n                >\n                    <Typography.BodyBL weight=\"semibold\">\n                        {labelText}\n                    </Typography.BodyBL>\n                    <NavSelectIcon $isDropdownExpanded={isDropdownExpanded} />\n                </NavSelect>\n                {isDropdownExpanded && (\n                    <NavItemList\n                        id={dropdownListId}\n                        role=\"menu\"\n                        onKeyDown={handleNavItemListKeyDown}\n                        data-testid={`${navTestId}-dropdown-list`}\n                        $viewportHeight={\n                            viewportHeight - dropdowntHeight - stickyOffset\n                        }\n                    >\n                        {items.map((item, i) =>\n                            renderDropdownNavItem({\n                                handleClick: (e) =>\n                                    handleNavItemClick(e, item, i),\n                                isSelected: i === selectedItemIndex,\n                                item,\n                                renderItem,\n                                index: i,\n                            })\n                        )}\n                    </NavItemList>\n                )}\n                {isDropdownExpanded && isStickied && (\n                    <Backdrop onClick={handleDismissBackdrop} />\n                )}\n            </NavWrapper>\n        </>\n    );\n};\n\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","SimpleIdGenerator","generate","useImperativeHandle","current","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","NavWrapper","$isStickied","$sideMargin","$stickyOffset","NavSelect","role","onClick","prev","onKeyDown","length","$isDropdownExpanded","tabIndex","Typography","BodyBL","weight","NavSelectIcon","NavItemList","nextIndex","prevIndex","$viewportHeight","map","item","i","isSelected","index","undefined","el","selected","stickied","NavItem","$isSelected","StyledTickIcon","NavItemLabel","renderDropdownNavItem","handleNavItemClick","Backdrop"],"mappings":"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"}
+{"version":3,"file":"local-nav-dropdown.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n    {\n        defaultLabel,\n        stickyOffset = 0,\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": testId,\n        className,\n        renderItem,\n    }: LocalNavDropdownProps,\n    ref: React.Ref<HTMLElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const detectStickyRef = useRef<HTMLSpanElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const navWrapperRef = useRef<HTMLElement>(null);\n    const navItemListRef = useRef<HTMLUListElement>(null);\n    const listItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n    const [isStickied, setIsStickied] = useState<boolean>(false);\n    const [isDropdownExpanded, setIsDropdownExpanded] =\n        useState<boolean>(false);\n    const [viewportHeight, setViewportHeight] = useState(0);\n    const [dropdowntHeight, setDropdownHeight] = useState(0);\n    const [dynamicMargin, setDynamicMargin] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const navTestId = testId || \"local-nav-dropdown\";\n    const dropdownListId = useId();\n\n    useImperativeHandle(ref, () => navWrapperRef.current!);\n\n    useApplyStyle(navWrapperRef, {\n        [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n        [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n    });\n\n    useApplyStyle(navItemListRef, {\n        [styles.tokens.navItemList.viewportHeight]: `${\n            viewportHeight - dropdowntHeight - stickyOffset\n        }px`,\n    });\n\n    const labelText =\n        typeof selectedItemIndex === \"number\" &&\n        selectedItemIndex >= 0 &&\n        isStickied\n            ? items[selectedItemIndex].title\n            : defaultLabel;\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n\n    useEffect(() => {\n        if (dropdownRef.current) {\n            const dropdownHeight =\n                dropdownRef.current.getBoundingClientRect().height;\n            setDropdownHeight(dropdownHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded && isStickied) {\n            applyBodyStyleClass(\"add\");\n        } else {\n            applyBodyStyleClass(\"remove\");\n        }\n    }, [isDropdownExpanded, isStickied]);\n\n    useEffect(() => {\n        setViewportHeight(window.innerHeight);\n        const handleResize = () => {\n            setViewportHeight(window.innerHeight);\n        };\n        window.addEventListener(\"resize\", handleResize);\n        return () => window.removeEventListener(\"resize\", handleResize);\n    }, []);\n\n    useEffect(() => {\n        const callback = (entries: IntersectionObserverEntry[]) => {\n            const [entry] = entries;\n            setIsStickied(!entry.isIntersecting);\n        };\n\n        const observer = new IntersectionObserver(callback, {\n            threshold: 1,\n            rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n        });\n\n        if (detectStickyRef.current) {\n            observer.observe(detectStickyRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [stickyOffset]);\n\n    useEffect(() => {\n        const adjustPadding = () => {\n            const dropdown = navWrapperRef?.current;\n            if (dropdown) {\n                const dropdownRect = dropdown.getBoundingClientRect();\n                const spaceToRight =\n                    document.body.clientWidth - dropdownRect.right;\n                const spaceToLeft = dropdownRect.left;\n                // Calculate the padding needed to balance the dropdown in the viewport\n                const sidePadding = Math.max(spaceToRight, spaceToLeft);\n                setDynamicMargin(sidePadding);\n            }\n        };\n        adjustPadding();\n\n        window.addEventListener(\"resize\", adjustPadding);\n\n        return () => {\n            window.removeEventListener(\"resize\", adjustPadding);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded) {\n            listItemRefs.current[focusedIndex]?.focus();\n        }\n    }, [isDropdownExpanded, focusedIndex]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            DROPDOWN_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleToggleDropdown = () => {\n        setIsDropdownExpanded((prev) => !prev);\n    };\n\n    const handleDismissBackdrop = () => {\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemClick = (\n        e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        item: LocalNavItemProps,\n        index: number\n    ) => {\n        if (onNavItemSelect) {\n            onNavItemSelect(e, item, index);\n        }\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(0);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(items.length - 1);\n        } else if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            setIsDropdownExpanded(true);\n            setFocusedIndex(0);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n        }\n    };\n\n    const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            const nextIndex = (focusedIndex + 1) % items.length;\n            setFocusedIndex(nextIndex);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            const prevIndex =\n                focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n            setFocusedIndex(prevIndex);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n            dropdownRef.current?.focus();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDropdownNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavDropdownItemComponentProps) => {\n        const { id, title } = item;\n\n        if (renderItem) {\n            return (\n                <li\n                    id={id}\n                    key={index}\n                    role=\"menuitem\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    aria-current={isSelected ? true : undefined}\n                    tabIndex={-1}\n                    ref={(el) => {\n                        listItemRefs.current[index] = el;\n                    }}\n                >\n                    {renderItem(item, {\n                        selected: isSelected,\n                        stickied: isStickied,\n                    })}\n                </li>\n            );\n        }\n\n        return (\n            <li\n                id={id}\n                key={index}\n                role=\"menuitem\"\n                className={clsx(\n                    styles.navItem,\n                    isSelected && isStickied && styles.navItemSelected\n                )}\n                onClick={handleClick}\n                onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                aria-current={isSelected ? true : undefined}\n                tabIndex={-1}\n                ref={(el) => {\n                    listItemRefs.current[index] = el as HTMLLIElement;\n                }}\n            >\n                {isSelected && <TickIcon className={styles.tickIcon} />}\n                <div\n                    className={clsx(\n                        styles.navItemLabel,\n                        isSelected && styles.navItemLabelSelected\n                    )}\n                >\n                    {title}\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <>\n            <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n            <nav\n                ref={navWrapperRef}\n                id={id}\n                data-testid={navTestId}\n                className={clsx(\n                    styles.navWrapper,\n                    isStickied && styles.navWrapperStickied,\n                    className\n                )}\n            >\n                <div\n                    ref={dropdownRef}\n                    role=\"button\"\n                    onClick={handleToggleDropdown}\n                    onKeyDown={handleNavSelectKeyDown}\n                    data-testid={`${navTestId}-label`}\n                    className={clsx(\n                        styles.navSelect,\n                        isDropdownExpanded && styles.navSelectExpanded\n                    )}\n                    aria-haspopup=\"true\"\n                    aria-expanded={isDropdownExpanded}\n                    aria-controls={dropdownListId}\n                    tabIndex={0}\n                >\n                    <Typography.BodyBL weight=\"semibold\">\n                        {labelText}\n                    </Typography.BodyBL>\n                    <ChevronDownIcon\n                        className={clsx(\n                            styles.navSelectIcon,\n                            isDropdownExpanded && styles.navSelectIconExpanded\n                        )}\n                    />\n                </div>\n                {isDropdownExpanded && (\n                    <ul\n                        ref={navItemListRef}\n                        id={dropdownListId}\n                        role=\"menu\"\n                        onKeyDown={handleNavItemListKeyDown}\n                        data-testid={`${navTestId}-dropdown-list`}\n                        className={styles.navItemList}\n                    >\n                        {items.map((item, i) =>\n                            renderDropdownNavItem({\n                                handleClick: (e) =>\n                                    handleNavItemClick(e, item, i),\n                                isSelected: i === selectedItemIndex,\n                                item,\n                                renderItem,\n                                index: i,\n                            })\n                        )}\n                    </ul>\n                )}\n                {isDropdownExpanded && isStickied && (\n                    <div\n                        className={styles.backdrop}\n                        onClick={handleDismissBackdrop}\n                    />\n                )}\n            </nav>\n        </>\n    );\n};\n// @catalog\n/**\n * A collapsible dropdown used for in-page navigation on mobile viewports.\n *\n * Use `LocalNavDropdown` when the page has multiple named sections and screen\n * width is insufficient for a persistent sidebar.\n *\n * @remarks\n * This component adopts a fundamentally different interaction model from\n * `LocalNavMenu`: it collapses into a single trigger button and uses a menu\n * overlay, making it suited for mobile while `LocalNavMenu` suits desktop.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.d.ts

@@ -1,37 +1,22 @@
-interface DropdownNavStyleProps {
-    $isStickied?: boolean;
-    $stickyOffset: number;
-    $sideMargin?: number;
-}
-interface NavItemListStyleProps {
-    $viewportHeight?: number;
-}
-interface NavItemStyleProps {
-    $isSelected?: boolean;
-}
-interface DropdownExpandedProps {
-    $isDropdownExpanded: boolean;
-}
-interface NavIconStyleProps extends DropdownExpandedProps {
-}
-interface NavLabelStyleProps extends DropdownExpandedProps {
-}
-export declare const NavSelectIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, NavIconStyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const NavSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NavLabelStyleProps>> & string;
-export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, NavItemStyleProps>> & string;
-export declare const NavItemList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, NavItemListStyleProps>> & string;
-export declare const NavItemLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NavItemStyleProps>> & string;
-export declare const StyledTickIcon: 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>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Backdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NavWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, DropdownNavStyleProps>> & string;
-export {};
+export declare const tokens: {
+    navWrapper: {
+        stickyOffset: string;
+        sideMargin: string;
+    };
+    navItemList: {
+        viewportHeight: string;
+    };
+};
+export declare const navSelectIcon: import("@linaria/core").LinariaClassName;
+export declare const navSelectIconExpanded: import("@linaria/core").LinariaClassName;
+export declare const navSelect: import("@linaria/core").LinariaClassName;
+export declare const navSelectExpanded: import("@linaria/core").LinariaClassName;
+export declare const navItem: import("@linaria/core").LinariaClassName;
+export declare const navItemSelected: import("@linaria/core").LinariaClassName;
+export declare const navItemList: import("@linaria/core").LinariaClassName;
+export declare const navItemLabel: import("@linaria/core").LinariaClassName;
+export declare const navItemLabelSelected: import("@linaria/core").LinariaClassName;
+export declare const tickIcon: import("@linaria/core").LinariaClassName;
+export declare const backdrop: import("@linaria/core").LinariaClassName;
+export declare const navWrapper: import("@linaria/core").LinariaClassName;
+export declare const navWrapperStickied: import("@linaria/core").LinariaClassName;

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js

@@ -1,101 +1,2 @@
-import{ChevronDownIcon as i}from"@lifesg/react-icons/chevron-down";import{TickIcon as o}from"@lifesg/react-icons/tick";import t,{css as e}from"styled-components";import{V3_Colour as r,V3_Motion as s,V3_Spacing as n,V3_Border as a,V3_Radius as d,V3_Font as $}from"../../v3_theme/index.js";const l=t(i)`
-    color: ${r.icon};
-    transition: transform ${s["duration-250"]}
-        ${s["ease-default"]};
-    transform: rotate(${i=>i.$isDropdownExpanded?180:0}deg);
-`,c=t.div`
-    cursor: pointer;
-    background: ${r.bg};
-    padding: ${n["spacing-12"]} ${n["spacing-16"]};
-    overflow: hidden;
-    box-shadow: 0 0 ${a["width-010"]} ${a["width-010"]}
-        ${r.border};
-    border-radius: ${d.sm};
-    ${i=>i.$isDropdownExpanded&&e`
-            border-bottom-left-radius: ${d.none};
-            border-bottom-right-radius: ${d.none};
-        `}
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: all ${s["duration-250"]} ${s["ease-default"]};
-    transition-property: background, border-radius, box-shadow, transform;
-
-    &:focus-visible {
-        outline: 2px solid ${r["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${d.sm};
-    }
-`,p=t.li`
-    padding: ${i=>i.$isSelected?e`
-                  ${n["spacing-12"]} ${n["spacing-8"]} 
-                  ${n["spacing-12"]} 0
-              `:e`
-                  ${n["spacing-12"]} ${n["spacing-8"]}
-                  ${n["spacing-12"]} ${n["spacing-32"]}
-              `};
-    background: ${i=>i.$isSelected?r["bg-primary-subtlest"]:r.bg};
-    /* Ensures that the tick mark is positioned relative to the selected item */
-    position: relative;
-    display: flex;
-    /* Vertically align text and tick */
-    align-items: center;
-
-    &:focus-visible {
-        outline: 2px solid ${r["focus-ring"]};
-        outline-offset: 0px;
-        border-radius: ${d.sm};
-    }
-`,g=t.ul`
-    transition: all ${s["duration-250"]} ${s["ease-default"]};
-    transform-origin: top;
-    list-style-type: none;
-    padding: 0 ${n["spacing-8"]};
-    margin: 0;
-    background: ${r.bg};
-    cursor: pointer;
-    box-shadow: 0 0 ${a["width-010"]} ${a["width-010"]}
-        ${r.border};
-    border-bottom-right-radius: ${d.sm};
-    border-bottom-left-radius: ${d.sm};
-    /* Enables vertical scrolling */
-    overflow-y: auto;
-    /* Set a max height for the dropdown list */
-    max-height: ${i=>i.$viewportHeight}px;
-`,b=t.div`
-    ${$["body-baseline-regular"]}
-    color: ${i=>i.$isSelected?r["text-selected"]:r.text};
-`,m=t(o)`
-    color: ${r["icon-selected"]};
-    margin: 0 ${n["spacing-8"]};
-`,u=t.div`
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: ${r["overlay-strong"]};
-    z-index: -1;
-`,f=t.nav`
-    display: block;
-    position: sticky;
-    top: ${i=>i.$stickyOffset}px;
-    width: 100%;
-    z-index: 10;
-
-    ${({$isStickied:i,$sideMargin:o})=>i&&e`
-            ${c} {
-                ${o&&`margin: 0 -${o}px;`}
-                padding: ${n["spacing-12"]} ${n["spacing-16"]};
-                border-radius: ${d.none};
-            }
-
-            ${g} {
-                ${o&&`margin-left: -${o}px;`}
-                ${o&&`margin-right: -${o}px;`}
-                border-radius-bottom-left: ${d.sm};
-                border-radius-bottom-right: ${d.sm};
-            }
-        `}
-`;export{u as Backdrop,p as NavItem,b as NavItemLabel,g as NavItemList,c as NavSelect,l as NavSelectIcon,f as NavWrapper,m as StyledTickIcon};
+import"./local-nav-dropdown.styles_uhd4xl.css";const n={navWrapper:{stickyOffset:"--fds-internal-localNavDropdown-navWrapper-stickyOffset",sideMargin:"--fds-internal-localNavDropdown-navWrapper-sideMargin"},navItemList:{viewportHeight:"--fds-internal-localNavDropdown-navItemList-viewportHeight"}},a="nczumix",r="n1mayi9n",e="n1fsscye",o="n10li8ea",i="n1rgfmu8",l="n122w1r6",s="ny6lx9v",t="n1lmzf88",p="nc4nyiy",v="thuuy8a",c="beqsxqe",d="ns92rya",y="np844yu";export{c as backdrop,i as navItem,t as navItemLabel,p as navItemLabelSelected,s as navItemList,l as navItemSelected,e as navSelect,o as navSelectExpanded,a as navSelectIcon,r as navSelectIconExpanded,d as navWrapper,y as navWrapperStickied,v as tickIcon,n as tokens};
 //# sourceMappingURL=local-nav-dropdown.styles.js.map

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface DropdownNavStyleProps {\n    $isStickied?: boolean;\n    $stickyOffset: number;\n    $sideMargin?: number;\n}\n\ninterface NavItemListStyleProps {\n    $viewportHeight?: number;\n}\n\ninterface NavItemStyleProps {\n    $isSelected?: boolean;\n}\ninterface DropdownExpandedProps {\n    $isDropdownExpanded: boolean;\n}\n\ninterface NavIconStyleProps extends DropdownExpandedProps {}\ninterface NavLabelStyleProps extends DropdownExpandedProps {}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const NavSelectIcon = styled(ChevronDownIcon)<NavIconStyleProps>`\n    color: ${V3_Colour[\"icon\"]};\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n    transform: rotate(${(props) => (props.$isDropdownExpanded ? 180 : 0)}deg);\n`;\n\nexport const NavSelect = styled.div<NavLabelStyleProps>`\n    cursor: pointer;\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${V3_Border[\"width-010\"]} ${V3_Border[\"width-010\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    ${(props) =>\n        props.$isDropdownExpanded &&\n        css`\n            border-bottom-left-radius: ${V3_Radius[\"none\"]};\n            border-bottom-right-radius: ${V3_Radius[\"none\"]};\n        `}\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const NavItem = styled.li<NavItemStyleProps>`\n    padding: ${(props) =>\n        props.$isSelected\n            ? css`\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]} \n                  ${V3_Spacing[\"spacing-12\"]} 0\n              `\n            : css`\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-8\"]}\n                  ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-32\"]}\n              `};\n    background: ${(props) =>\n        props.$isSelected ? V3_Colour[\"bg-primary-subtlest\"] : V3_Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n\nexport const NavItemList = styled.ul<NavItemListStyleProps>`\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${V3_Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${V3_Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${V3_Border[\"width-010\"]} ${V3_Border[\"width-010\"]}\n        ${V3_Colour[\"border\"]};\n    border-bottom-right-radius: ${V3_Radius[\"sm\"]};\n    border-bottom-left-radius: ${V3_Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: ${(props) => props.$viewportHeight}px;\n`;\n\nexport const NavItemLabel = styled.div<NavItemStyleProps>`\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${(props) =>\n        props.$isSelected ? V3_Colour[\"text-selected\"] : V3_Colour[\"text\"]};\n`;\n\nexport const StyledTickIcon = styled(TickIcon)`\n    color: ${V3_Colour[\"icon-selected\"]};\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const Backdrop = styled.div`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${V3_Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const NavWrapper = styled.nav<DropdownNavStyleProps>`\n    display: block;\n    position: sticky;\n    top: ${(props) => props.$stickyOffset}px;\n    width: 100%;\n    z-index: 10;\n\n    ${({ $isStickied, $sideMargin }) =>\n        $isStickied &&\n        css`\n            ${NavSelect} {\n                ${$sideMargin && `margin: 0 -${$sideMargin}px;`}\n                padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\n                    \"spacing-16\"\n                ]};\n                border-radius: ${V3_Radius[\"none\"]};\n            }\n\n            ${NavItemList} {\n                ${$sideMargin && `margin-left: -${$sideMargin}px;`}\n                ${$sideMargin && `margin-right: -${$sideMargin}px;`}\n                border-radius-bottom-left: ${V3_Radius.sm};\n                border-radius-bottom-right: ${V3_Radius.sm};\n            }\n        `}\n`;\n"],"names":["NavSelectIcon","styled","ChevronDownIcon","V3_Colour","V3_Motion","props","$isDropdownExpanded","NavSelect","div","V3_Spacing","V3_Border","V3_Radius","css","NavItem","li","$isSelected","NavItemList","ul","$viewportHeight","NavItemLabel","V3_Font","StyledTickIcon","TickIcon","Backdrop","NavWrapper","nav","$stickyOffset","$isStickied","$sideMargin","sm"],"mappings":"sSA6CaA,EAAgBC,EAAOC,EAAmC;aAC1DC,EAAgB;4BACDC,EAAU;UAC5BA,EAAU;wBACKC,GAAWA,EAAMC,oBAAsB,IAAM;EAGzDC,EAAYN,EAAOO,GAAuB;;kBAErCL,EAAc;eACjBM,EAAW,iBAAiBA,EAAW;;sBAEhCC,EAAU,gBAAgBA,EAAU;UAChDP,EAAkB;qBACPQ,EAAc;MAC5BN,GACCA,EAAMC,qBACNM,CAAG;yCAC8BD,EAAgB;0CACfA,EAAgB;;;;;sBAKpCP,EAAU,mBAAmBA,EAAU;;;;6BAIhCD,EAAU;;yBAEdQ,EAAc;;EAQ1BE,EAAUZ,EAAOa,EAAqB;eACnCT,GACRA,EAAMU,YACAH,CAAG;oBACGH,EAAW,iBAAiBA,EAAW;oBACvCA,EAAW;gBAEjBG,CAAG;oBACGH,EAAW,iBAAiBA,EAAW;oBACvCA,EAAW,iBAAiBA,EAAW;;kBAExCJ,GACXA,EAAMU,YAAcZ,EAAU,uBAAyBA,EAAc;;;;;;;;6BAQhDA,EAAU;;yBAEdQ,EAAc;;EAI1BK,EAAcf,EAAOgB,EAAyB;sBACrCb,EAAU,mBAAmBA,EAAU;;;iBAG5CK,EAAW;;kBAEVN,EAAc;;sBAEVO,EAAU,gBAAgBA,EAAU;UAChDP,EAAkB;kCACMQ,EAAc;iCACfA,EAAc;;;;kBAI5BN,GAAUA,EAAMa;EAGtBC,EAAelB,EAAOO,GAAsB;MACnDY,EAAQ;aACAf,GACNA,EAAMU,YAAcZ,EAAU,iBAAmBA,EAAgB;EAG5DkB,EAAiBpB,EAAOqB,EAAS;aACjCnB,EAAU;gBACPM,EAAW;EAOdc,EAAWtB,EAAOO,GAAG;;;;;;wBAMVL,EAAU;;EAIrBqB,EAAavB,EAAOwB,GAA0B;;;WAG/CpB,GAAUA,EAAMqB;;;;MAItB,EAAGC,cAAaC,iBACdD,GACAf,CAAG;cACGL;kBACIqB,GAAe,cAAcA;2BACpBnB,EAAW,iBAAiBA,EACnC;iCAEaE,EAAgB;;;cAGnCK;kBACIY,GAAe,iBAAiBA;kBAChCA,GAAe,kBAAkBA;6CACNjB,EAAUkB;8CACTlB,EAAUkB;;;"}
+{"version":3,"file":"local-nav-dropdown.styles.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    navWrapper: {\n        stickyOffset: \"--fds-internal-localNavDropdown-navWrapper-stickyOffset\",\n        sideMargin: \"--fds-internal-localNavDropdown-navWrapper-sideMargin\",\n    },\n    navItemList: {\n        viewportHeight:\n            \"--fds-internal-localNavDropdown-navItemList-viewportHeight\",\n    },\n};\n\n// -----------------------------------------------------------------------------\n// NAV SELECT\n// -----------------------------------------------------------------------------\n\nexport const navSelectIcon = css`\n    color: ${Colour[\"icon\"]};\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform: rotate(0deg);\n`;\n\nexport const navSelectIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const navSelect = css`\n    cursor: pointer;\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    overflow: hidden;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transition-property: background, border-radius, box-shadow, transform;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navSelectExpanded = css`\n    border-bottom-left-radius: ${Radius[\"none\"]};\n    border-bottom-right-radius: ${Radius[\"none\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// NAV ITEMS\n// -----------------------------------------------------------------------------\n\nexport const navItem = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-32\"]};\n    background: ${Colour[\"bg\"]};\n    /* Ensures that the tick mark is positioned relative to the selected item */\n    position: relative;\n    display: flex;\n    /* Vertically align text and tick */\n    align-items: center;\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0px;\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const navItemSelected = css`\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]} 0;\n    background: ${Colour[\"bg-primary-subtlest\"]};\n`;\n\nexport const navItemList = css`\n    ${tokens.navItemList.viewportHeight}: initial;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    transform-origin: top;\n    list-style-type: none;\n    padding: 0 ${Spacing[\"spacing-8\"]};\n    margin: 0;\n    background: ${Colour[\"bg\"]};\n    cursor: pointer;\n    box-shadow: 0 0 ${Border[\"width-010\"]} ${Border[\"width-010\"]}\n        ${Colour[\"border\"]};\n    border-bottom-right-radius: ${Radius[\"sm\"]};\n    border-bottom-left-radius: ${Radius[\"sm\"]};\n    /* Enables vertical scrolling */\n    overflow-y: auto;\n    /* Set a max height for the dropdown list */\n    max-height: var(${tokens.navItemList.viewportHeight});\n`;\n\nexport const navItemLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const navItemLabelSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const tickIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n    margin: 0 ${Spacing[\"spacing-8\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// MAIN\n// -----------------------------------------------------------------------------\n\nexport const backdrop = css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    background-color: ${Colour[\"overlay-strong\"]};\n    z-index: -1;\n`;\n\nexport const navWrapper = css`\n    ${tokens.navWrapper.stickyOffset}: initial;\n    ${tokens.navWrapper.sideMargin}: initial;\n    display: block;\n    position: sticky;\n    top: var(${tokens.navWrapper.stickyOffset});\n    width: 100%;\n    z-index: 10;\n`;\n\nexport const navWrapperStickied = css`\n    .${navSelect} {\n        margin: 0 calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n        border-radius: ${Radius[\"none\"]};\n    }\n\n    .${navItemList} {\n        margin-left: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        margin-right: calc(var(${tokens.navWrapper.sideMargin}, 0px) * -1);\n        border-bottom-left-radius: ${Radius[\"sm\"]};\n        border-bottom-right-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["tokens","navWrapper","stickyOffset","sideMargin","navItemList","viewportHeight","navSelectIcon","navSelectIconExpanded","navSelect","navSelectExpanded","navItem","navItemSelected","navItemLabel","navItemLabelSelected","tickIcon","backdrop","navWrapperStickied"],"mappings":"2FAIO,MAAMA,EAAS,CAClBC,WAAY,CACRC,aAAc,0DACdC,WAAY,yDAEhBC,YAAa,CACTC,eACI,+DAQCC,EAAa,UAMbC,EAAqB,WAIrBC,EAAS,WAqBTC,EAAiB,WASjBC,EAAO,WAiBPC,EAAe,WAMfP,EAAW,UAmBXQ,EAAY,WAKZC,EAAoB,UAIpBC,EAAQ,UASRC,EAAQ,UAURd,EAAU,UAUVe,EAAkB"}

package/local-nav/local-nav-dropdown/local-nav-dropdown.styles_uhd4xl.css

@@ -0,0 +1,13 @@
+@layer fds{.nczumix{color:var(--fds-colour-icon);-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.n1mayi9n{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.n1fsscye{cursor:pointer;background:var(--fds-colour-bg);padding:var(--fds-spacing-12) var(--fds-spacing-16);overflow:hidden;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-radius:var(--fds-radius-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition-property:background,border-radius,box-shadow,transform;}.n1fsscye:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;border-radius:var(--fds-radius-sm);}
+.n10li8ea{border-bottom-left-radius:var(--fds-radius-none);border-bottom-right-radius:var(--fds-radius-none);}
+.n1rgfmu8{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) var(--fds-spacing-32);background:var(--fds-colour-bg);position:relative;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;}.n1rgfmu8:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0px;border-radius:var(--fds-radius-sm);}
+.n122w1r6{padding:var(--fds-spacing-12) var(--fds-spacing-8) var(--fds-spacing-12) 0;background:var(--fds-colour-bg-primary-subtlest);}
+.ny6lx9v{--fds-internal-localNavDropdown-navItemList-viewportHeight:initial;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transform-origin:top;list-style-type:none;padding:0 var(--fds-spacing-8);margin:0;background:var(--fds-colour-bg);cursor:pointer;box-shadow:0 0 var(--fds-border-width-010) var(--fds-border-width-010) var(--fds-colour-border);border-bottom-right-radius:var(--fds-radius-sm);border-bottom-left-radius:var(--fds-radius-sm);overflow-y:auto;max-height:var(--fds-internal-localNavDropdown-navItemList-viewportHeight);}
+.n1lmzf88{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.nc4nyiy{color:var(--fds-colour-text-selected);}
+.thuuy8a{color:var(--fds-colour-icon-selected);margin:0 var(--fds-spacing-8);}
+.beqsxqe{position:fixed;top:0;right:0;left:0;bottom:0;background-color:var(--fds-colour-overlay-strong);z-index:-1;}
+.ns92rya{--fds-internal-localNavDropdown-navWrapper-stickyOffset:initial;--fds-internal-localNavDropdown-navWrapper-sideMargin:initial;display:block;position:-webkit-sticky;position:sticky;top:var(--fds-internal-localNavDropdown-navWrapper-stickyOffset);width:100%;z-index:10;}
+.np844yu .n1fsscye{margin:0 calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);padding:var(--fds-spacing-12) var(--fds-spacing-16);border-radius:var(--fds-radius-none);}.np844yu .ny6lx9v{margin-left:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);margin-right:calc(var(--fds-internal-localNavDropdown-navWrapper-sideMargin, 0px) * -1);border-bottom-left-radius:var(--fds-radius-sm);border-bottom-right-radius:var(--fds-radius-sm);}}

package/local-nav/local-nav-menu/local-nav-menu.d.ts

@@ -1,3 +1,10 @@
 import React from "react";
 import type { LocalNavMenuProps } from "../types";
+/**
+ * A sidebar navigation list that highlights the currently selected section.
+ *
+ * Use `LocalNavMenu` for desktop in-page navigation where the list is always
+ * visible.
+ * @keywords in-page navigation, sections
+ */
 export declare const LocalNavMenu: (props: LocalNavMenuProps & React.RefAttributes<HTMLUListElement>) => React.ReactElement | null;

package/local-nav/local-nav-menu/local-nav-menu.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"react";import{Nav as r,NavItem as i,NavItemContent as n,TextLabel as d}from"./local-nav-menu.styles.js";const l=t.forwardRef((({onNavItemSelect:t,items:l,selectedItemIndex:a,id:c,"data-testid":m,className:o,renderItem:s},f)=>e(r,{ref:f,id:c,className:o,"data-testid":m||"local-nav-menu",children:l.map(((r,l)=>(({handleClick:t,isSelected:r,item:l,renderItem:a,index:c})=>{const{id:m,title:o}=l;return e(i,{id:m,$isSelected:r,children:e(n,{role:"link",onClick:t,onKeyDown:e=>((e,t)=>{const{key:r}=e;"Enter"!==r&&" "!==r||(e.preventDefault(),t(e))})(e,t),tabIndex:0,"aria-current":!!r||void 0,children:a?a(l,{selected:r}):e(d,{weight:r?"semibold":"regular",children:o})})},c)})({handleClick:e=>t(e,r,l),isSelected:l===a,item:r,renderItem:s,index:l})))})));export{l as LocalNavMenu};
+import{jsx as e}from"react/jsx-runtime";import t from"clsx";import r from"react";import{Typography as i}from"../../typography/index.js";import{nav as l,navItemContent as n,navItem as a,navItemSelected as d,textLabel as m}from"./local-nav-menu.styles.js";const s=r.forwardRef((({onNavItemSelect:r,items:s,selectedItemIndex:c,id:o,"data-testid":p,className:f,renderItem:u},h)=>{const x=p||"local-nav-menu";return e("ul",{ref:h,id:o,className:t(l,f),"data-testid":x,children:s.map(((l,s)=>(({handleClick:r,isSelected:l,item:s,renderItem:c,index:o})=>{const{id:p,title:f}=s;return e("li",{id:p,className:t(a,l&&d),children:e("div",{className:n,role:"link",onClick:r,onKeyDown:e=>((e,t)=>{const{key:r}=e;"Enter"!==r&&" "!==r||(e.preventDefault(),t(e))})(e,r),tabIndex:0,"aria-current":!!l||void 0,children:c?c(s,{selected:l}):e(i.BodyBL,{className:m,weight:l?"semibold":"regular",children:f})})},o)})({handleClick:e=>r(e,l,s),isSelected:s===c,item:l,renderItem:u,index:s})))})}));export{s as LocalNavMenu};
 //# sourceMappingURL=local-nav-menu.js.map

package/local-nav/local-nav-menu/local-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport {\n    Nav,\n    NavItem,\n    NavItemContent,\n    TextLabel,\n} from \"./local-nav-menu.styles\";\n\n/**\n * A sidebar navigation element. The currently visible section will be highlighted.\n *\n * This component should be placed inside a container that aligns it to the side.\n * The container can also have `position: sticky` in order to make it a sticky sidebar.\n */\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <TextLabel weight={isSelected ? \"semibold\" : \"regular\"}>\n                    {title}\n                </TextLabel>\n            );\n        };\n\n        return (\n            <NavItem id={id} key={index} $isSelected={isSelected}>\n                <NavItemContent\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </NavItemContent>\n            </NavItem>\n        );\n    };\n    return (\n        <Nav\n            ref={ref}\n            id={id}\n            className={className}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </Nav>\n    );\n};\n\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","_jsx","Nav","children","map","item","i","handleClick","isSelected","index","title","NavItem","$isSelected","NavItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","TextLabel","weight","renderLocalNavItem"],"mappings":"8JAiBA,MA6FaA,EAAeC,EAAMC,YA7FhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,IA+DIC,EAACC,EAAG,CACAF,IAAKA,EACLJ,GAAIA,EACJE,UAAWA,EAAS,cA7DLD,GAAc,iBA8DFM,SAE1BT,EAAMU,KAAI,CAACC,EAAMC,IAzCC,GACvBC,cACAC,aACAH,OACAN,aACAU,YAEA,MAAMb,GAAEA,EAAEc,MAAEA,GAAUL,EAatB,OACIJ,EAACU,EAAO,CAACf,GAAIA,EAAEgB,YAA2BJ,EAAUL,SAChDF,EAACY,EAAc,CACXC,KAAK,OACLC,QAASR,EACTS,UAAYC,GA3CC,EACzBA,EACAV,KAIA,MAAMW,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFZ,EAAYU,GAChB,EAgC8BG,CAAqBH,EAAGV,GAC1Cc,SAAU,EAAC,iBACGb,QAAoBc,EAASnB,SAjB/CJ,EACOA,EAAWM,EAAM,CAAEkB,SAAUf,IAGpCP,EAACuB,GAAUC,OAAQjB,EAAa,WAAa,mBACxCE,OAMaD,EAUZ,EAYCiB,CAAmB,CACtBnB,YAAcU,GAAMxB,EAAgBwB,EAAGZ,EAAMC,GAC7CE,WAHeF,IAAMX,EAIrBU,OACAN,aACAU,MAAOH"}
+{"version":3,"file":"local-nav-menu.js","sources":["../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\n// @catalog\n/**\n * A sidebar navigation list that highlights the currently selected section.\n *\n * Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n * @keywords in-page navigation, sections\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"8PAQA,MAgHaA,EAAeC,EAAMC,YAhHhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAKC,EAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EACPS,EACAH,GAAcI,GACjBC,SAEDZ,EAAA,MAAA,CACIJ,UAAWiB,EACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAACwB,EAAWC,OAAM,CACd7B,UAAW8B,EACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/local-nav/local-nav-menu/local-nav-menu.styles.d.ts

@@ -1,10 +1,5 @@
-interface NavItemStyleProps {
-    $isSelected?: boolean;
-}
-export declare const Nav: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
-export declare const TextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, NavItemStyleProps>> & string;
-export declare const NavItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, NavItemStyleProps>> & string;
-export declare const NavItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const nav: import("@linaria/core").LinariaClassName;
+export declare const textLabel: import("@linaria/core").LinariaClassName;
+export declare const navItem: import("@linaria/core").LinariaClassName;
+export declare const navItemSelected: import("@linaria/core").LinariaClassName;
+export declare const navItemContent: import("@linaria/core").LinariaClassName;

package/local-nav/local-nav-menu/local-nav-menu.styles.js

@@ -1,40 +1,2 @@
-import o from"styled-components";import{Typography as i}from"../../typography/index.js";import{V3_Colour as t,V3_Spacing as e,V3_Radius as r}from"../../v3_theme/index.js";const n=o.ul`
-    list-style-type: none;
-    padding: 0;
-    margin-top: 0;
-`,s=o(i.BodyBL)`
-    margin: 0;
-`,p=o.li`
-    display: block;
-    position: relative;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-
-    &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        width: 4px;
-        height: 100%;
-        top: 0;
-        background-color: ${o=>o.$isSelected?t["bg-primary"]:t["bg-primary-subtler"]};
-        transition: all 250ms linear;
-    }
-
-    &:hover,
-    &:focus-within {
-        background-color: ${t["bg-hover-subtle"]};
-    }
-`,l=o.div`
-    display: block;
-    padding: ${e["spacing-16"]};
-    padding-left: ${e["spacing-20"]};
-
-    &:focus-visible {
-        outline: 2px solid ${t["focus-ring"]};
-        outline-offset: 2px;
-        border-radius: ${r.sm};
-    }
-`;export{n as Nav,p as NavItem,l as NavItemContent,s as TextLabel};
+import"./local-nav-menu.styles_pq19dh.css";const n="nflnesd",a="tun9y1j",l="n1ocymwf",o="naf0oif",c="n8uzvfa";export{n as nav,l as navItem,c as navItemContent,o as navItemSelected,a as textLabel};
 //# sourceMappingURL=local-nav-menu.styles.js.map