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

package/cjs/language-switcher/dropdown-variant.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-variant.js","sources":["../../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    baseIndicatorStyle,\n    listItem,\n    listItemActive,\n    listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport {\n    DropdownItem,\n    DropdownList,\n    DropdownPanel,\n    LanguageIconWrapper,\n    selectedIndicator,\n    StyledExpandableElement,\n} from \"./dropdown-variant.style\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState(-1);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    const id = useId();\n    const listboxId = `listbox-${id}`;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (isOpen) {\n            const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n            const idx = selectedIdx >= 0 ? selectedIdx : 0;\n            setFocusedIndex(idx);\n            setTimeout(() => {\n                itemRefs.current[idx]?.focus();\n            }, 0);\n        } else {\n            setFocusedIndex(-1);\n        }\n    }, [isOpen, selectedLanguage]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOpen = () => {\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleItemSelect = (code: LanguageSwitcherCode) => {\n        onSelectLanguage(code);\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleListKeyDown = (event: React.KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const next = Math.min(\n                    focusedIndex + 1,\n                    LANGUAGE_CODES.length - 1\n                );\n                setFocusedIndex(next);\n                itemRefs.current[next]?.focus();\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prev = Math.max(focusedIndex - 1, 0);\n                setFocusedIndex(prev);\n                itemRefs.current[prev]?.focus();\n                break;\n            }\n            case \"Home\": {\n                event.preventDefault();\n                setFocusedIndex(0);\n                itemRefs.current[0]?.focus();\n                break;\n            }\n            case \"End\": {\n                event.preventDefault();\n                const last = LANGUAGE_CODES.length - 1;\n                setFocusedIndex(last);\n                itemRefs.current[last]?.focus();\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                if (focusedIndex >= 0) {\n                    handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n                }\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderElement = () => (\n        <StyledExpandableElement\n            ref={triggerRef}\n            disabled={false}\n            expanded={isOpen}\n            listboxId={listboxId}\n            popupRole=\"listbox\"\n            readOnly={false}\n            aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n            data-testid={`${testId}--trigger`}\n        >\n            <LanguageIconWrapper aria-hidden>\n                <LanguageIcon />\n            </LanguageIconWrapper>\n            {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n        </StyledExpandableElement>\n    );\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <DropdownPanel\n            ref={setFloatingRef}\n            style={{ ...styles, width: elementWidth }}\n            data-testid={`${testId}--panel`}\n            {...getFloatingProps()}\n        >\n            <DropdownList\n                role=\"listbox\"\n                id={listboxId}\n                aria-label={ARIA_LABEL}\n                onKeyDown={handleListKeyDown}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isSelected = code === selectedLanguage;\n                    const isFocused = index === focusedIndex;\n                    return (\n                        <DropdownItem\n                            key={code}\n                            ref={(el: HTMLLIElement | null) => {\n                                itemRefs.current[index] = el;\n                            }}\n                            role=\"option\"\n                            lang={code}\n                            className={clsx(\n                                listItem,\n                                isFocused &&\n                                    isSelected &&\n                                    listItemActiveSelected,\n                                isFocused && !isSelected && listItemActive\n                            )}\n                            aria-selected={isSelected}\n                            tabIndex={isFocused ? 0 : -1}\n                            $selected={isSelected}\n                            onClick={() => handleItemSelect(code)}\n                            data-testid={`${testId}--item-${code}`}\n                        >\n                            {isSelected ? (\n                                <TickIcon\n                                    className={clsx(\n                                        baseIndicatorStyle,\n                                        selectedIndicator\n                                    )}\n                                    aria-hidden\n                                />\n                            ) : (\n                                <div className={baseIndicatorStyle} />\n                            )}\n                            {LANGUAGE_DISPLAY_MAP[code]}\n                        </DropdownItem>\n                    );\n                })}\n            </DropdownList>\n        </DropdownPanel>\n    );\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div data-testid={testId} {...otherProps}>\n            <ElementWithDropdown\n                enabled={true}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n            />\n        </div>\n    );\n};\n"],"names":["_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","StyledExpandableElement","ref","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","LanguageIconWrapper","LanguageIcon","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","DropdownPanel","Object","assign","style","width","DropdownList","role","id","onKeyDown","map","index","isSelected","isFocused","DropdownItem","el","lang","className","clsx","listItem","listItemActiveSelected","listItemActive","tabIndex","$selected","onClick","TickIcon","baseIndicatorStyle","selectedIndicator","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"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"}
+{"version":3,"file":"dropdown-variant.js","sources":["../../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { ExpandableElement } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownPanel } from \"./dropdown-panel\";\nimport * as styles from \"./dropdown-variant.styles\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState(-1);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    const id = useId();\n    const listboxId = `listbox-${id}`;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (isOpen) {\n            const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n            const idx = selectedIdx >= 0 ? selectedIdx : 0;\n            setFocusedIndex(idx);\n            setTimeout(() => {\n                itemRefs.current[idx]?.focus();\n            }, 0);\n        } else {\n            setFocusedIndex(-1);\n        }\n    }, [isOpen, selectedLanguage]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOpen = () => {\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleItemSelect = (code: LanguageSwitcherCode) => {\n        onSelectLanguage(code);\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleListKeyDown = (event: React.KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const next = Math.min(\n                    focusedIndex + 1,\n                    LANGUAGE_CODES.length - 1\n                );\n                setFocusedIndex(next);\n                itemRefs.current[next]?.focus();\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prev = Math.max(focusedIndex - 1, 0);\n                setFocusedIndex(prev);\n                itemRefs.current[prev]?.focus();\n                break;\n            }\n            case \"Home\": {\n                event.preventDefault();\n                setFocusedIndex(0);\n                itemRefs.current[0]?.focus();\n                break;\n            }\n            case \"End\": {\n                event.preventDefault();\n                const last = LANGUAGE_CODES.length - 1;\n                setFocusedIndex(last);\n                itemRefs.current[last]?.focus();\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                if (focusedIndex >= 0) {\n                    handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n                }\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderElement = () => (\n        <ExpandableElement\n            ref={triggerRef}\n            className={styles.expandableElement}\n            disabled={false}\n            expanded={isOpen}\n            listboxId={listboxId}\n            popupRole=\"listbox\"\n            readOnly={false}\n            aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n            data-testid={`${testId}--trigger`}\n        >\n            <span className={styles.languageIconWrapper} aria-hidden>\n                <LanguageIcon />\n            </span>\n            {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n        </ExpandableElement>\n    );\n\n    const renderDropdown = () => (\n        <DropdownPanel\n            focusedIndex={focusedIndex}\n            handleItemSelect={handleItemSelect}\n            handleListKeyDown={handleListKeyDown}\n            itemRefs={itemRefs}\n            listboxId={listboxId}\n            selectedLanguage={selectedLanguage}\n            testId={testId}\n        />\n    );\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div data-testid={testId} {...otherProps}>\n            <ElementWithDropdown\n                enabled={true}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n            />\n        </div>\n    );\n};\n"],"names":["_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","ExpandableElement","ref","className","styles.expandableElement","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","styles.languageIconWrapper","LanguageIcon","renderDropdown","DropdownPanel","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"qrEAagCA,QAAAC,iBAC5BA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAA,OAAAL,EAJe,CAAA,mBAAA,mBAAA,WAS5B,MAAOM,EAAQC,GAAaC,EAAAA,UAAS,IAC9BC,EAAcC,GAAmBF,EAAAA,UAAS,GAC3CG,EAAaC,EAAAA,OAA0B,MACvCC,EAAWD,EAAAA,OAAiC,IAG5CE,EAAY,WADPC,EAAAA,UAMXC,EAAAA,WAAU,KACN,GAAIV,EAAQ,CACR,MAAMW,EAAcC,EAAAA,eAAeC,QAAQlB,GACrCmB,EAAMH,GAAe,EAAIA,EAAc,EAC7CP,EAAgBU,GAChBC,YAAW,WACc,QAArBrB,EAAAa,EAASS,QAAQF,UAAI,IAAApB,GAAAA,EAAEuB,OAAO,GAC/B,EACP,MACIb,GAAgB,EACpB,GACD,CAACJ,EAAQL,IAKZ,MAaMuB,EAAoBC,UACtBvB,EAAiBuB,GACjBlB,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAGzBG,EAAqBC,gBACvB,OAAQA,EAAMC,KACV,IAAK,YAAa,CACdD,EAAME,iBACN,MAAMC,EAAOC,KAAKC,IACdvB,EAAe,EACfS,EAAAA,eAAee,OAAS,GAE5BvB,EAAgBoB,GACM,QAAtB9B,EAAAa,EAASS,QAAQQ,UAAK,IAAA9B,GAAAA,EAAEuB,QACxB,KACJ,CACA,IAAK,UAAW,CACZI,EAAME,iBACN,MAAMK,EAAOH,KAAKI,IAAI1B,EAAe,EAAG,GACxCC,EAAgBwB,GACM,QAAtBE,EAAAvB,EAASS,QAAQY,UAAK,IAAAE,GAAAA,EAAEb,QACxB,KACJ,CACA,IAAK,OACDI,EAAME,iBACNnB,EAAgB,GACG,QAAnB2B,EAAAxB,EAASS,QAAQ,UAAE,IAAAe,GAAAA,EAAEd,QACrB,MAEJ,IAAK,MAAO,CACRI,EAAME,iBACN,MAAMS,EAAOpB,iBAAee,OAAS,EACrCvB,EAAgB4B,GACM,QAAtBC,EAAA1B,EAASS,QAAQgB,UAAK,IAAAC,GAAAA,EAAEhB,QACxB,KACJ,CACA,IAAK,QACL,IAAK,IACDI,EAAME,iBACFpB,GAAgB,GAChBe,EAAiBN,EAAAA,eAAeT,MA4ChD,OACI+B,EAAAA,uCAAkBrC,GAAYC,EAAU,CAAAqC,SACpCD,EAAAA,IAACE,EAAAA,oBAAmB,CAChBC,SAAS,EACTrC,OAAQA,EACRsC,cAvCU,IAClBC,OAACC,EAAAA,kBAAiB,CACdC,IAAKpC,EACLqC,UAAWC,EAAAA,kBACXC,UAAU,EACVC,SAAU7C,EACVQ,UAAWA,EACXsC,UAAU,UACVC,UAAU,EAAK,aACH,GAAGC,EAAAA,eAAeC,EAAAA,qBAAqBtD,KAAmB,cACzD,GAAGE,aAAiBsC,SAAA,CAEjCD,EAAAA,IAAA,OAAA,CAAMQ,UAAWQ,EAAAA,oBAA0B,eAAA,EAAAf,SACvCD,EAAAA,IAACiB,eAAY,CAAA,KAEhBF,EAAAA,qBAAqBtD,MAyBlByD,eArBW,IACnBlB,EAAAA,IAACmB,EAAAA,cAAa,CACVlD,aAAcA,EACde,iBAAkBA,EAClBE,kBAAmBA,EACnBb,SAAUA,EACVC,UAAWA,EACXb,iBAAkBA,EAClBE,OAAQA,IAcJyD,OA1GO,KACfrD,GAAU,EAAK,EA0GPsD,QAvGQ,KAChBtD,GAAU,EAAM,EAuGRuD,UApGU,WAClBvD,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAmGnBwC,eAAa,EACbC,OAAQ,MAEV"}

package/cjs/language-switcher/dropdown-variant.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./dropdown-variant.styles_16c4wc1.css");exports.expandableElement="efqyehf",exports.languageIconWrapper="ljv0l5v";
+//# sourceMappingURL=dropdown-variant.styles.js.map

package/cjs/language-switcher/dropdown-variant.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-variant.styles.js","sources":["../../../src/language-switcher/dropdown-variant.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { iconContainer } from \"../shared/dropdown-list/expandable-element.styles\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const expandableElement = css`\n    min-width: 9rem;\n    width: auto;\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n\n    .${iconContainer} {\n        margin-left: auto;\n\n        svg {\n            color: ${Colour[\"text-selected\"]};\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const languageIconWrapper = css`\n    display: flex;\n    align-items: center;\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n    }\n`;\n"],"names":[],"mappings":"yHAK8B,sCAyBE"}

package/cjs/language-switcher/dropdown-variant.styles_16c4wc1.css

@@ -0,0 +1,2 @@
+.efqyehf{min-width:9rem;width:auto;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);height:2.5rem;padding:0 var(--fds-spacing-16);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);}.efqyehf .i1r624au{margin-left:auto;}.efqyehf .i1r624au svg{color:var(--fds-colour-text-selected);}.efqyehf:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+.ljv0l5v{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;color:var(--fds-colour-icon-primary);}.ljv0l5v svg{height:1rem;width:1rem;}

package/cjs/language-switcher/link-container-variant.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),a=require("./data.js"),n=require("./link-container-variant.style.js");exports.LinkContainerVariant=i=>{var{selectedLanguage:s,onSelectLanguage:c,testId:l}=i,u=e.__rest(i,["selectedLanguage","onSelectLanguage","testId"]);const o=r.useRef([]);return t.jsx(n.LinkContainerWrapper,Object.assign({"data-testid":l},u,{children:t.jsx(n.LinkList,{role:"group","aria-label":a.ARIA_LABEL,children:a.LANGUAGE_CODES.map(((e,r)=>{const i=e===s;return t.jsx(n.LinkListItem,{children:t.jsx(n.LinkItem,{ref:e=>{o.current[r]=e},type:"button",lang:e,$active:i,"aria-pressed":i,tabIndex:i?0:-1,onClick:()=>c(e),onKeyDown:e=>((e,t)=>{var r;let n=null;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),n=Math.min(t+1,a.LANGUAGE_CODES.length-1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),n=Math.max(t-1,0);break;case"Enter":case" ":{e.preventDefault();const r=a.LANGUAGE_CODES[t];c(r);break}}null!==n&&(null===(r=o.current[n])||void 0===r||r.focus())})(e,r),"data-testid":`${l}--item-${e}`,children:a.LANGUAGE_DISPLAY_MAP[e]})},e)}))})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("clsx"),r=require("react"),n=require("./data.js"),s=require("./link-container-variant.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(a);exports.LinkContainerVariant=a=>{var{selectedLanguage:l,onSelectLanguage:c,testId:u,className:o}=a,d=e.__rest(a,["selectedLanguage","onSelectLanguage","testId","className"]);const A=r.useRef([]);return t.jsx("div",Object.assign({className:i.default(s.linkContainerWrapper,o),"data-testid":u},d,{children:t.jsx("ul",{className:s.linkList,role:"group","aria-label":n.ARIA_LABEL,children:n.LANGUAGE_CODES.map(((e,a)=>{const r=e===l;return t.jsx("li",{className:s.linkListItem,children:t.jsx("button",{ref:e=>{A.current[a]=e},type:"button",lang:e,className:i.default(s.linkItem,r&&s.linkItemActive),"aria-pressed":r,tabIndex:r?0:-1,onClick:()=>c(e),onKeyDown:e=>((e,t)=>{var a;let r=null;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),r=Math.min(t+1,n.LANGUAGE_CODES.length-1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),r=Math.max(t-1,0);break;case"Enter":case" ":{e.preventDefault();const a=n.LANGUAGE_CODES[t];c(a);break}}null!==r&&(null===(a=A.current[r])||void 0===a||a.focus())})(e,a),"data-testid":`${u}--item-${e}`,children:n.LANGUAGE_DISPLAY_MAP[e]})},e)}))})}))};
 //# sourceMappingURL=link-container-variant.js.map

package/cjs/language-switcher/link-container-variant.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-container-variant.js","sources":["../../../src/language-switcher/link-container-variant.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport {\n    LinkContainerWrapper,\n    LinkItem,\n    LinkList,\n    LinkListItem,\n} from \"./link-container-variant.style\";\n\nexport const LinkContainerVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n        let nextIndex: number | null = null;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                nextIndex = Math.min(index + 1, LANGUAGE_CODES.length - 1);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                nextIndex = Math.max(index - 1, 0);\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                const code = LANGUAGE_CODES[index];\n                onSelectLanguage(code);\n                break;\n            }\n        }\n\n        if (nextIndex !== null) {\n            itemRefs.current[nextIndex]?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <LinkContainerWrapper data-testid={testId} {...otherProps}>\n            <LinkList role=\"group\" aria-label={ARIA_LABEL}>\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isActive = code === selectedLanguage;\n                    return (\n                        <LinkListItem key={code}>\n                            <LinkItem\n                                ref={(el) => {\n                                    itemRefs.current[index] = el;\n                                }}\n                                type=\"button\"\n                                lang={code}\n                                $active={isActive}\n                                aria-pressed={isActive}\n                                tabIndex={isActive ? 0 : -1}\n                                onClick={() => onSelectLanguage(code)}\n                                onKeyDown={(e) => handleKeyDown(e, index)}\n                                data-testid={`${testId}--item-${code}`}\n                            >\n                                {LANGUAGE_DISPLAY_MAP[code]}\n                            </LinkItem>\n                        </LinkListItem>\n                    );\n                })}\n            </LinkList>\n        </LinkContainerWrapper>\n    );\n};\n"],"names":["_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","itemRefs","useRef","_jsx","LinkContainerWrapper","Object","assign","children","LinkList","role","ARIA_LABEL","LANGUAGE_CODES","map","code","index","isActive","LinkListItem","LinkItem","ref","el","current","type","lang","$active","tabIndex","onClick","onKeyDown","e","event","nextIndex","key","preventDefault","Math","min","length","max","focus","handleKeyDown","LANGUAGE_DISPLAY_MAP"],"mappings":"yMAYqCA,QAAAC,iBACjCA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAA,OAAAL,EAJoB,CAAA,mBAAA,mBAAA,WASjC,MAAMM,EAAWC,EAAAA,OAAqC,IAsCtD,OACIC,EAAAA,IAACC,uBAAoBC,OAAAC,OAAA,CAAA,cAAcR,GAAYC,EAAU,CAAAQ,SACrDJ,EAAAA,IAACK,EAAAA,SAAQ,CAACC,KAAK,QAAO,aAAaC,EAAAA,WAAUH,SACxCI,EAAAA,eAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAWF,IAASjB,EAC1B,OACIO,EAAAA,IAACa,EAAAA,aAAY,CAAAT,SACTJ,EAAAA,IAACc,WAAQ,CACLC,IAAMC,IACFlB,EAASmB,QAAQN,GAASK,CAAE,EAEhCE,KAAK,SACLC,KAAMT,EAAIU,QACDR,EAAQ,eACHA,EACdS,SAAUT,EAAW,GAAI,EACzBU,QAAS,IAAM5B,EAAiBgB,GAChCa,UAAYC,GAlDlB,EAACC,EAA4Bd,WAC/C,IAAIe,EAA2B,KAE/B,OAAQD,EAAME,KACV,IAAK,aACL,IAAK,YACDF,EAAMG,iBACNF,EAAYG,KAAKC,IAAInB,EAAQ,EAAGH,EAAAA,eAAeuB,OAAS,GACxD,MAEJ,IAAK,YACL,IAAK,UACDN,EAAMG,iBACNF,EAAYG,KAAKG,IAAIrB,EAAQ,EAAG,GAChC,MAEJ,IAAK,QACL,IAAK,IAAK,CACNc,EAAMG,iBACN,MAAMlB,EAAOF,EAAAA,eAAeG,GAC5BjB,EAAiBgB,GACjB,KACJ,EAGc,OAAdgB,IAC2B,QAA3BlC,EAAAM,EAASmB,QAAQS,UAAU,IAAAlC,GAAAA,EAAEyC,QACjC,EAuB0CC,CAAcV,EAAGb,GAAM,cAC5B,GAAGhB,WAAgBe,aAE/ByB,EAAAA,qBAAqBzB,MAdXA,EAgBJ,QAIR"}
+{"version":3,"file":"link-container-variant.js","sources":["../../../src/language-switcher/link-container-variant.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport * as styles from \"./link-container-variant.styles\";\n\nexport const LinkContainerVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    className,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n        let nextIndex: number | null = null;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                nextIndex = Math.min(index + 1, LANGUAGE_CODES.length - 1);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                nextIndex = Math.max(index - 1, 0);\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                const code = LANGUAGE_CODES[index];\n                onSelectLanguage(code);\n                break;\n            }\n        }\n\n        if (nextIndex !== null) {\n            itemRefs.current[nextIndex]?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div\n            className={clsx(styles.linkContainerWrapper, className)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ul\n                className={styles.linkList}\n                role=\"group\"\n                aria-label={ARIA_LABEL}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isActive = code === selectedLanguage;\n                    return (\n                        <li className={styles.linkListItem} key={code}>\n                            <button\n                                ref={(el) => {\n                                    itemRefs.current[index] = el;\n                                }}\n                                type=\"button\"\n                                lang={code}\n                                className={clsx(\n                                    styles.linkItem,\n                                    isActive && styles.linkItemActive\n                                )}\n                                aria-pressed={isActive}\n                                tabIndex={isActive ? 0 : -1}\n                                onClick={() => onSelectLanguage(code)}\n                                onKeyDown={(e) => handleKeyDown(e, index)}\n                                data-testid={`${testId}--item-${code}`}\n                            >\n                                {LANGUAGE_DISPLAY_MAP[code]}\n                            </button>\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n};\n"],"names":["_a","selectedLanguage","onSelectLanguage","testId","className","otherProps","__rest","itemRefs","useRef","_jsx","Object","assign","clsx","styles.linkContainerWrapper","styles.linkList","role","ARIA_LABEL","children","LANGUAGE_CODES","map","code","index","isActive","styles.linkListItem","ref","el","current","type","lang","styles.linkItem","styles.linkItemActive","tabIndex","onClick","onKeyDown","e","event","nextIndex","key","preventDefault","Math","min","length","max","focus","handleKeyDown","LANGUAGE_DISPLAY_MAP"],"mappings":"+SAQqCA,IAAA,IAAAC,iBACjCA,EAAgBC,iBAChBA,EAAgBC,OAChBA,EAAMC,UACNA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALoB,CAAA,mBAAA,mBAAA,SAAA,cAUjC,MAAMO,EAAWC,EAAAA,OAAqC,IAsCtD,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIP,UAAWQ,EAAAA,QAAKC,EAAAA,qBAA6BT,GAAU,cAC1CD,GACTE,YAEJI,EAAAA,IAAA,KAAA,CACIL,UAAWU,EAAAA,SACXC,KAAK,qBACOC,EAAAA,WAAUC,SAErBC,EAAAA,eAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAWF,IAASnB,EAC1B,OACIQ,MAAA,KAAA,CAAIL,UAAWmB,EAAAA,aAAmBN,SAC9BR,EAAAA,IAAA,SAAA,CACIe,IAAMC,IACFlB,EAASmB,QAAQL,GAASI,CAAE,EAEhCE,KAAK,SACLC,KAAMR,EACNhB,UAAWQ,EAAAA,QACPiB,EAAAA,SACAP,GAAYQ,EAAAA,gBACf,eACaR,EACdS,SAAUT,EAAW,GAAI,EACzBU,QAAS,IAAM9B,EAAiBkB,GAChCa,UAAYC,GA7DlB,EAACC,EAA4Bd,WAC/C,IAAIe,EAA2B,KAE/B,OAAQD,EAAME,KACV,IAAK,aACL,IAAK,YACDF,EAAMG,iBACNF,EAAYG,KAAKC,IAAInB,EAAQ,EAAGH,EAAAA,eAAeuB,OAAS,GACxD,MAEJ,IAAK,YACL,IAAK,UACDN,EAAMG,iBACNF,EAAYG,KAAKG,IAAIrB,EAAQ,EAAG,GAChC,MAEJ,IAAK,QACL,IAAK,IAAK,CACNc,EAAMG,iBACN,MAAMlB,EAAOF,EAAAA,eAAeG,GAC5BnB,EAAiBkB,GACjB,KACJ,EAGc,OAAdgB,IAC2B,QAA3BpC,EAAAO,EAASmB,QAAQU,UAAU,IAAApC,GAAAA,EAAE2C,QACjC,EAkC0CC,CAAcV,EAAGb,GAAM,cAC5B,GAAGlB,WAAgBiB,IAAMH,SAErC4B,EAAAA,qBAAqBzB,MAjBWA,EAmBpC,QAIf"}

package/cjs/language-switcher/link-container-variant.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./link-container-variant.styles_1blx9qm.css");exports.linkContainerWrapper="ldxubbp",exports.linkItem="lrbzpdb",exports.linkItemActive="l1retz23",exports.linkList="lqgsuoq",exports.linkListItem="l3egc8p";
+//# sourceMappingURL=link-container-variant.styles.js.map

package/cjs/language-switcher/link-container-variant.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-container-variant.styles.js","sources":["../../../src/language-switcher/link-container-variant.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// LINK CONTAINER STYLES\n// =============================================================================\nexport const linkContainerWrapper = css`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n`;\n\nexport const linkList = css`\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    align-items: center;\n    gap: 0 ${Spacing[\"spacing-8\"]};\n    flex-wrap: wrap;\n`;\n\nexport const linkListItem = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const linkItem = css`\n    display: flex;\n    padding: 0.25rem 0.5rem;\n    justify-content: center;\n    align-items: center;\n    gap: 0.625rem;\n    border: none;\n    border-radius: ${Radius[\"md\"]};\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-subtler\"]};\n    text-align: center;\n    transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    background: none;\n    cursor: pointer;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n        text-decoration: underline;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const linkItemActive = css`\n    background: ${Colour[\"bg-primary-subtler\"]};\n    color: ${Colour[\"text-selected\"]};\n    cursor: default;\n\n    &:hover {\n        color: ${Colour[\"text-selected\"]};\n        text-decoration: none;\n    }\n`;\n"],"names":[],"mappings":"kIAOiC,2BAwBZ,iCA0BM,4BAzCN,+BAUI"}

package/cjs/language-switcher/link-container-variant.styles_1blx9qm.css

@@ -0,0 +1,5 @@
+.ldxubbp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:var(--fds-spacing-8) var(--fds-spacing-16);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);}
+.lqgsuoq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0 var(--fds-spacing-8);-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
+.l3egc8p{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;}
+.lrbzpdb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0.25rem 0.5rem;-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;gap:0.625rem;border:none;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-subtler);text-align:center;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);background:none;cursor:pointer;}.lrbzpdb:hover{color:var(--fds-colour-text-hover);-webkit-text-decoration:underline;text-decoration:underline;}.lrbzpdb:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+.l1retz23{background:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-selected);cursor:default;}.l1retz23:hover{color:var(--fds-colour-text-selected);-webkit-text-decoration:none;text-decoration:none;}

package/cjs/layout/col-div.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("clsx"),r=require("react");require("../theme/theme-provider/index.js");var n=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var a=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./col-div.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=u(t),d=u(r);const p={xxs:{start:i.tokens.xxsStart,span:i.tokens.xxsSpan,end:i.tokens.xxsEnd},xs:{start:i.tokens.xsStart,span:i.tokens.xsSpan,end:i.tokens.xsEnd},sm:{start:i.tokens.smStart,span:i.tokens.smSpan,end:i.tokens.smEnd},md:{start:i.tokens.mdStart,span:i.tokens.mdSpan,end:i.tokens.mdEnd},lg:{start:i.tokens.lgStart,span:i.tokens.lgSpan,end:i.tokens.lgEnd},xl:{start:i.tokens.xlStart,span:i.tokens.xlSpan,end:i.tokens.xlEnd},xxl:{start:i.tokens.xxlStart,span:i.tokens.xxlSpan,end:i.tokens.xxlEnd}},m=e=>{var s,t;const r=n.parseCSSVariableValue(e,null!==(t=null===(s=globalThis.document)||void 0===s?void 0:s.documentElement)&&void 0!==t?t:null),a=parseInt(r,10);return Number.isNaN(a)?1/0:a},c=d.default.forwardRef(((t,n)=>{const{xxlCols:u,xlCols:d,lgCols:c,mdCols:k,smCols:v,xsCols:f,xxsCols:j,className:q}=t,S=e.__rest(t,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className"]),g=r.useRef(null),h=o.mergeRefs(g,n),C=(e,s)=>{if(!e)return{start:void 0,span:void 0,end:void 0};if(Array.isArray(e)){const[t,r]=e;if(-1===r)return{start:t,span:void 0,end:-1};const n=m(s);return{start:t,span:Math.min(r-t,n),end:void 0}}const t=m(s);return{start:void 0,span:Math.min(e,t),end:void 0}};return l.useApplyStyle(g,Object.assign({},(()=>{const e=C(j,a.Breakpoint["xxs-column"]),s=C(f||j,a.Breakpoint["xs-column"]),t=C(v||f||j,a.Breakpoint["sm-column"]),r=C(k||v||f||j,a.Breakpoint["md-column"]),n=C(c||k||v||f||j,a.Breakpoint["lg-column"]),l=C(d||c||k||v||f||j,a.Breakpoint["xl-column"]),o=C(u||d||c||k||v||f||j,a.Breakpoint["xxl-column"]),i={};return[{result:e,prefix:"xxs"},{result:s,prefix:"xs"},{result:t,prefix:"sm"},{result:r,prefix:"md"},{result:n,prefix:"lg"},{result:l,prefix:"xl"},{result:o,prefix:"xxl"}].forEach((({result:e,prefix:s})=>{const t=p[s];e.start&&(i[t.start]=String(e.start)),e.span&&(i[t.span]=String(e.span)),e.end&&(i[t.end]=String(e.end))})),i})())),s.jsx("div",Object.assign({ref:h,className:x.default(i.colDiv,q)},S))}));exports.ColDiv=c;
+"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("clsx"),t=require("react");require("../theme/theme-provider/index.js");var n=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var a=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./col-div.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=u(r),d=u(t);const m={xxs:{start:i.tokens.xxsStart,span:i.tokens.xxsSpan,end:i.tokens.xxsEnd},xs:{start:i.tokens.xsStart,span:i.tokens.xsSpan,end:i.tokens.xsEnd},sm:{start:i.tokens.smStart,span:i.tokens.smSpan,end:i.tokens.smEnd},md:{start:i.tokens.mdStart,span:i.tokens.mdSpan,end:i.tokens.mdEnd},lg:{start:i.tokens.lgStart,span:i.tokens.lgSpan,end:i.tokens.lgEnd},xl:{start:i.tokens.xlStart,span:i.tokens.xlSpan,end:i.tokens.xlEnd},xxl:{start:i.tokens.xxlStart,span:i.tokens.xxlSpan,end:i.tokens.xxlEnd}},p=e=>{var s,r;const t=n.parseCSSVariableValue(e,null!==(r=null===(s=globalThis.document)||void 0===s?void 0:s.documentElement)&&void 0!==r?r:null),a=parseInt(t,10);return Number.isNaN(a)?1/0:a},c=d.default.forwardRef(((r,n)=>{const{xxlCols:u,xlCols:d,lgCols:c,mdCols:k,smCols:v,xsCols:f,xxsCols:j,className:q}=r,S=e.__rest(r,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className"]),g=t.useRef(null),h=o.mergeRefs(g,n),C=(e,s)=>{if(!e)return{start:void 0,span:void 0,end:void 0};if(Array.isArray(e)){const[r,t]=e;if(-1===t)return{start:r,span:void 0,end:-1};const n=p(s);return{start:r,span:Math.min(t-r,n),end:void 0}}const r=p(s);return{start:void 0,span:Math.min(e,r),end:void 0}};return l.useApplyStyle(g,Object.assign({},(()=>{const e=C(j,a.Breakpoint["xxs-column"]),s=C(f||j,a.Breakpoint["xs-column"]),r=C(v||f||j,a.Breakpoint["sm-column"]),t=C(k||v||f||j,a.Breakpoint["md-column"]),n=C(c||k||v||f||j,a.Breakpoint["lg-column"]),l=C(d||c||k||v||f||j,a.Breakpoint["xl-column"]),o=C(u||d||c||k||v||f||j,a.Breakpoint["xxl-column"]),i={};return[{result:e,prefix:"xxs"},{result:s,prefix:"xs"},{result:r,prefix:"sm"},{result:t,prefix:"md"},{result:n,prefix:"lg"},{result:l,prefix:"xl"},{result:o,prefix:"xxl"}].forEach((({result:e,prefix:s})=>{const r=m[s];e.start&&(i[r.start]=String(e.start)),e.span&&(i[r.span]=String(e.span)),e.end&&(i[r.end]=String(e.end))})),i})())),s.jsx("div",Object.assign({ref:h,className:x.default(i.colDiv,q)},S))}));exports.ColDiv=c;
 //# sourceMappingURL=col-div.js.map

package/cjs/layout/col-div.js.map

@@ -1 +1 @@
-{"version":3,"file":"col-div.js","sources":["../../../src/layout/col-div.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { type BreakpointCSSVariableString, useApplyStyle } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens/breakpoint\";\nimport { parseCSSVariableValue } from \"../theme/utils/css-variable\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./col-div.styles\";\nimport type { ColDivProps } from \"./types\";\n\nconst TOKEN_MAP: Record<string, Record<string, string>> = {\n    xxs: {\n        start: styles.tokens.xxsStart,\n        span: styles.tokens.xxsSpan,\n        end: styles.tokens.xxsEnd,\n    },\n    xs: {\n        start: styles.tokens.xsStart,\n        span: styles.tokens.xsSpan,\n        end: styles.tokens.xsEnd,\n    },\n    sm: {\n        start: styles.tokens.smStart,\n        span: styles.tokens.smSpan,\n        end: styles.tokens.smEnd,\n    },\n    md: {\n        start: styles.tokens.mdStart,\n        span: styles.tokens.mdSpan,\n        end: styles.tokens.mdEnd,\n    },\n    lg: {\n        start: styles.tokens.lgStart,\n        span: styles.tokens.lgSpan,\n        end: styles.tokens.lgEnd,\n    },\n    xl: {\n        start: styles.tokens.xlStart,\n        span: styles.tokens.xlSpan,\n        end: styles.tokens.xlEnd,\n    },\n    xxl: {\n        start: styles.tokens.xxlStart,\n        span: styles.tokens.xxlSpan,\n        end: styles.tokens.xxlEnd,\n    },\n};\n\nconst getColCount = (token: BreakpointCSSVariableString): number => {\n    const value = parseCSSVariableValue(\n        token,\n        globalThis.document?.documentElement ?? null\n    );\n    const parsed = parseInt(value, 10);\n    return Number.isNaN(parsed) ? Infinity : parsed;\n};\n\nconst Component = (\n    props: ColDivProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        xxlCols,\n        xlCols,\n        lgCols,\n        mdCols,\n        smCols,\n        xsCols,\n        xxsCols,\n        className,\n        ...otherProps\n    } = props;\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs(rootRef, ref);\n\n    const getColSpan = (\n        cols: number | [number, number] | undefined,\n        colToken: (typeof Breakpoint)[keyof typeof Breakpoint]\n    ) => {\n        if (!cols) return { start: undefined, span: undefined, end: undefined };\n\n        if (Array.isArray(cols)) {\n            const [start, end] = cols;\n            if (end === -1) {\n                return { start, span: undefined, end: -1 };\n            }\n            const maxCols = getColCount(colToken);\n            return {\n                start,\n                span: Math.min(end - start, maxCols),\n                end: undefined,\n            };\n        }\n\n        const maxCols = getColCount(colToken);\n        return {\n            start: undefined,\n            span: Math.min(cols, maxCols),\n            end: undefined,\n        };\n    };\n\n    const getCssVars = () => {\n        const xxsResult = getColSpan(xxsCols, Breakpoint[\"xxs-column\"]);\n        const xsResult = getColSpan(xsCols || xxsCols, Breakpoint[\"xs-column\"]);\n        const smResult = getColSpan(\n            smCols || xsCols || xxsCols,\n            Breakpoint[\"sm-column\"]\n        );\n        const mdResult = getColSpan(\n            mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"md-column\"]\n        );\n        const lgResult = getColSpan(\n            lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"lg-column\"]\n        );\n        const xlResult = getColSpan(\n            xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"xl-column\"]\n        );\n        const xxlResult = getColSpan(\n            xxlCols ||\n                xlCols ||\n                lgCols ||\n                mdCols ||\n                smCols ||\n                xsCols ||\n                xxsCols,\n            Breakpoint[\"xxl-column\"]\n        );\n\n        const cssVars: Record<string, string> = {};\n\n        const results = [\n            { result: xxsResult, prefix: \"xxs\" },\n            { result: xsResult, prefix: \"xs\" },\n            { result: smResult, prefix: \"sm\" },\n            { result: mdResult, prefix: \"md\" },\n            { result: lgResult, prefix: \"lg\" },\n            { result: xlResult, prefix: \"xl\" },\n            { result: xxlResult, prefix: \"xxl\" },\n        ];\n\n        results.forEach(({ result, prefix }) => {\n            const tokens = TOKEN_MAP[prefix];\n            if (result.start) cssVars[tokens.start] = String(result.start);\n            if (result.span) cssVars[tokens.span] = String(result.span);\n            if (result.end) cssVars[tokens.end] = String(result.end);\n        });\n\n        return cssVars;\n    };\n\n    useApplyStyle(rootRef, {\n        ...getCssVars(),\n    });\n\n    return (\n        <div\n            ref={mergedRef}\n            className={clsx(styles.colDiv, className)}\n            {...otherProps}\n        />\n    );\n};\n\nexport const ColDiv = React.forwardRef(Component);\n"],"names":["TOKEN_MAP","xxs","start","styles.tokens","xxsStart","span","xxsSpan","end","xxsEnd","xs","xsStart","xsSpan","xsEnd","sm","smStart","smSpan","smEnd","md","mdStart","mdSpan","mdEnd","lg","lgStart","lgSpan","lgEnd","xl","xlStart","xlSpan","xlEnd","xxl","xxlStart","xxlSpan","xxlEnd","getColCount","token","value","parseCSSVariableValue","_b","_a","globalThis","document","documentElement","parsed","parseInt","Number","isNaN","Infinity","ColDiv","React","forwardRef","props","ref","xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className","otherProps","__rest","rootRef","useRef","mergedRef","mergeRefs","getColSpan","cols","colToken","undefined","Array","isArray","maxCols","Math","min","useApplyStyle","Object","assign","xxsResult","Breakpoint","xsResult","smResult","mdResult","lgResult","xlResult","xxlResult","cssVars","result","prefix","forEach","tokens","String","getCssVars","_jsx","clsx","styles.colDiv"],"mappings":"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"}
+{"version":3,"file":"col-div.js","sources":["../../../src/layout/col-div.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { type BreakpointCSSVariableString, useApplyStyle } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens/breakpoint\";\nimport { parseCSSVariableValue } from \"../theme/utils/css-variable\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./col-div.styles\";\nimport type { ColDivProps } from \"./types\";\n\nconst TOKEN_MAP: Record<string, Record<string, string>> = {\n    xxs: {\n        start: styles.tokens.xxsStart,\n        span: styles.tokens.xxsSpan,\n        end: styles.tokens.xxsEnd,\n    },\n    xs: {\n        start: styles.tokens.xsStart,\n        span: styles.tokens.xsSpan,\n        end: styles.tokens.xsEnd,\n    },\n    sm: {\n        start: styles.tokens.smStart,\n        span: styles.tokens.smSpan,\n        end: styles.tokens.smEnd,\n    },\n    md: {\n        start: styles.tokens.mdStart,\n        span: styles.tokens.mdSpan,\n        end: styles.tokens.mdEnd,\n    },\n    lg: {\n        start: styles.tokens.lgStart,\n        span: styles.tokens.lgSpan,\n        end: styles.tokens.lgEnd,\n    },\n    xl: {\n        start: styles.tokens.xlStart,\n        span: styles.tokens.xlSpan,\n        end: styles.tokens.xlEnd,\n    },\n    xxl: {\n        start: styles.tokens.xxlStart,\n        span: styles.tokens.xxlSpan,\n        end: styles.tokens.xxlEnd,\n    },\n};\n\nconst getColCount = (token: BreakpointCSSVariableString): number => {\n    const value = parseCSSVariableValue(\n        token,\n        globalThis.document?.documentElement ?? null\n    );\n    const parsed = parseInt(value, 10);\n    return Number.isNaN(parsed) ? Infinity : parsed;\n};\n\nconst Component = (\n    props: ColDivProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        xxlCols,\n        xlCols,\n        lgCols,\n        mdCols,\n        smCols,\n        xsCols,\n        xxsCols,\n        className,\n        ...otherProps\n    } = props;\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs(rootRef, ref);\n\n    const getColSpan = (\n        cols: number | [number, number] | undefined,\n        colToken: (typeof Breakpoint)[keyof typeof Breakpoint]\n    ) => {\n        if (!cols) return { start: undefined, span: undefined, end: undefined };\n\n        if (Array.isArray(cols)) {\n            const [start, end] = cols;\n            if (end === -1) {\n                return { start, span: undefined, end: -1 };\n            }\n            const maxCols = getColCount(colToken);\n            return {\n                start,\n                span: Math.min(end - start, maxCols),\n                end: undefined,\n            };\n        }\n\n        const maxCols = getColCount(colToken);\n        return {\n            start: undefined,\n            span: Math.min(cols, maxCols),\n            end: undefined,\n        };\n    };\n\n    const getCssVars = () => {\n        const xxsResult = getColSpan(xxsCols, Breakpoint[\"xxs-column\"]);\n        const xsResult = getColSpan(xsCols || xxsCols, Breakpoint[\"xs-column\"]);\n        const smResult = getColSpan(\n            smCols || xsCols || xxsCols,\n            Breakpoint[\"sm-column\"]\n        );\n        const mdResult = getColSpan(\n            mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"md-column\"]\n        );\n        const lgResult = getColSpan(\n            lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"lg-column\"]\n        );\n        const xlResult = getColSpan(\n            xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"xl-column\"]\n        );\n        const xxlResult = getColSpan(\n            xxlCols ||\n                xlCols ||\n                lgCols ||\n                mdCols ||\n                smCols ||\n                xsCols ||\n                xxsCols,\n            Breakpoint[\"xxl-column\"]\n        );\n\n        const cssVars: Record<string, string> = {};\n\n        const results = [\n            { result: xxsResult, prefix: \"xxs\" },\n            { result: xsResult, prefix: \"xs\" },\n            { result: smResult, prefix: \"sm\" },\n            { result: mdResult, prefix: \"md\" },\n            { result: lgResult, prefix: \"lg\" },\n            { result: xlResult, prefix: \"xl\" },\n            { result: xxlResult, prefix: \"xxl\" },\n        ];\n\n        results.forEach(({ result, prefix }) => {\n            const tokens = TOKEN_MAP[prefix];\n            if (result.start) cssVars[tokens.start] = String(result.start);\n            if (result.span) cssVars[tokens.span] = String(result.span);\n            if (result.end) cssVars[tokens.end] = String(result.end);\n        });\n\n        return cssVars;\n    };\n\n    useApplyStyle(rootRef, {\n        ...getCssVars(),\n    });\n\n    return (\n        <div\n            ref={mergedRef}\n            className={clsx(styles.colDiv, className)}\n            {...otherProps}\n        />\n    );\n};\n\nexport const ColDiv = React.forwardRef(Component);\n"],"names":["TOKEN_MAP","xxs","start","styles.tokens","xxsStart","span","xxsSpan","end","xxsEnd","xs","xsStart","xsSpan","xsEnd","sm","smStart","smSpan","smEnd","md","mdStart","mdSpan","mdEnd","lg","lgStart","lgSpan","lgEnd","xl","xlStart","xlSpan","xlEnd","xxl","xxlStart","xxlSpan","xxlEnd","getColCount","token","value","parseCSSVariableValue","_b","_a","globalThis","document","documentElement","parsed","parseInt","Number","isNaN","Infinity","ColDiv","React","forwardRef","props","ref","xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className","otherProps","__rest","rootRef","useRef","mergedRef","mergeRefs","getColSpan","cols","colToken","undefined","Array","isArray","maxCols","Math","min","useApplyStyle","Object","assign","xxsResult","Breakpoint","xsResult","smResult","mdResult","lgResult","xlResult","xxlResult","cssVars","result","prefix","forEach","tokens","String","getCssVars","_jsx","clsx","styles.colDiv"],"mappings":"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"}

package/cjs/link-list/components/common.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),i=require("../link-list.styles.js");exports.LinkListItems=({"data-testid":s,items:n,handleItemClick:r,style:l})=>{const a="small"===l?i.ItemTitleSmall:i.ItemTitleDefault;return e.jsx(e.Fragment,{children:n.map(((n,l)=>{const{title:d,description:c,secondaryDescription:o,onClick:m}=n,j=t.__rest(n,["title","description","secondaryDescription","onClick"]);return e.jsxs(i.ItemContainer,Object.assign({"data-testid":`${s}-${l}`,onClick:t=>r(t,n)},j,{children:[e.jsxs(i.ItemContentContainer,{children:[e.jsx(a,{forwardedAs:"div","data-testid":`link-title-${l}`,weight:"semibold",children:d}),c&&e.jsx(i.Description,{"data-testid":`link-description-${l}`,children:c}),o]}),e.jsx(i.ItemIcon,{"aria-hidden":!0})]}),`${s}-${l}`)}))})};
+"use strict";var e=require("../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-right"),s=require("clsx"),a=require("../../typography/index.js"),r=require("../link-list.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(s);exports.LinkListItems=({"data-testid":s,items:n,handleItemClick:c,style:d})=>{const o="small"===d?a.Typography.HeadingXS:a.Typography.HeadingSM,m="small"===d?r.itemTitleSmall:r.itemTitleDefault;return i.jsx(i.Fragment,{children:n.map(((n,d)=>{const{title:p,description:u,secondaryDescription:h,onClick:y,className:g}=n,j=e.__rest(n,["title","description","secondaryDescription","onClick","className"]);return i.jsxs("a",Object.assign({"data-testid":`${s}-${d}`,onClick:e=>c(e,n)},j,{className:l.default(r.itemContainer,g),children:[i.jsxs("div",{className:r.itemContentContainer,children:[i.jsx(o,{as:"div","data-testid":`link-title-${d}`,weight:"semibold",className:m,children:p}),u&&i.jsx(a.Typography.BodyMD,{"data-testid":`link-description-${d}`,className:r.itemDescription,children:u}),h]}),i.jsx(t.ChevronRightIcon,{"aria-hidden":!0,className:r.itemIcon})]}),`${s}-${d}`)}))})};
 //# sourceMappingURL=common.js.map

package/cjs/link-list/components/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../../src/link-list/components/common.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport type { LinkListItemProps, LinkListStyle } from \"../internal-types\";\nimport {\n    Description,\n    ItemContainer,\n    ItemContentContainer,\n    ItemIcon,\n    ItemTitleDefault,\n    ItemTitleSmall,\n} from \"../link-list.styles\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle = style === \"small\" ? ItemTitleSmall : ItemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    ...otherProps\n                } = item;\n\n                return (\n                    <ItemContainer\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                    >\n                        <ItemContentContainer>\n                            <ItemTitle\n                                forwardedAs=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Description\n                                    data-testid={`link-description-${index}`}\n                                >\n                                    {description}\n                                </Description>\n                            )}\n                            {secondaryDescription}\n                        </ItemContentContainer>\n                        <ItemIcon aria-hidden />\n                    </ItemContainer>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["testId","items","handleItemClick","style","ItemTitle","ItemTitleSmall","ItemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","otherProps","__rest","_jsxs","ItemContainer","Object","assign","event","ItemContentContainer","forwardedAs","weight","Description","ItemIcon"],"mappings":"gJAqB6B,EACzB,cAAeA,EACfC,QACAC,kBACAC,YAEA,MAAMC,EAAsB,UAAVD,EAAoBE,EAAAA,eAAiBC,EAAAA,iBAEvD,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKR,EAAMS,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,GAETN,EADGO,EAAUC,EAAAA,OACbR,EANE,CAAA,QAAA,cAAA,uBAAA,YAQN,OACIS,EAAAA,KAACC,EAAAA,cAAaC,OAAAC,OAAA,CAAA,cAEG,GAAGvB,KAAUY,IAC1BI,QAAUQ,GAAUtB,EAAgBsB,EAAOb,IACvCO,EAAU,CAAAT,SAAA,CAEdW,EAAAA,KAACK,EAAAA,qBAAoB,CAAAhB,SAAA,CACjBF,EAAAA,IAACH,EAAS,CACNsB,YAAY,MAAK,cACJ,cAAcd,IAC3Be,OAAO,WAAUlB,SAEhBI,IAEJC,GACGP,EAAAA,IAACqB,EAAAA,YAAW,CAAA,cACK,oBAAoBhB,IAAOH,SAEvCK,IAGRC,KAELR,EAAAA,IAACsB,EAAAA,SAAQ,CAAA,eAAA,OAtBJ,GAAG7B,KAAUY,IAuBN,KAGzB"}
+{"version":3,"file":"common.js","sources":["../../../../src/link-list/components/common.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LinkListItemProps, LinkListStyle } from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle =\n        style === \"small\" ? Typography.HeadingXS : Typography.HeadingSM;\n    const itemTitleClassName =\n        style === \"small\" ? styles.itemTitleSmall : styles.itemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    className,\n                    ...otherProps\n                } = item;\n\n                return (\n                    <a\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                        className={clsx(styles.itemContainer, className)}\n                    >\n                        <div className={styles.itemContentContainer}>\n                            <ItemTitle\n                                as=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                                className={itemTitleClassName}\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Typography.BodyMD\n                                    data-testid={`link-description-${index}`}\n                                    className={styles.itemDescription}\n                                >\n                                    {description}\n                                </Typography.BodyMD>\n                            )}\n                            {secondaryDescription}\n                        </div>\n                        <ChevronRightIcon\n                            aria-hidden\n                            className={styles.itemIcon}\n                        />\n                    </a>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["testId","items","handleItemClick","style","ItemTitle","Typography","HeadingXS","HeadingSM","itemTitleClassName","styles.itemTitleSmall","styles.itemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","className","otherProps","_jsxs","event","clsx","styles.itemContainer","styles.itemContentContainer","as","weight","BodyMD","styles.itemDescription","ChevronRightIcon","styles.itemIcon"],"mappings":"2UAiB6B,EACzB,cAAeA,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAAA,WAAWC,UAAYD,EAAAA,WAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAAA,eAAwBC,EAAAA,iBAEhD,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,WACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,EAAAA,sCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAAA,QAAKC,EAAAA,cAAsBL,GAAUT,SAAA,CAEhDW,EAAAA,KAAA,MAAA,CAAKF,UAAWM,EAAAA,qBAA2Bf,SAAA,CACvCF,EAAAA,IAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAAAA,IAACN,EAAAA,WAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,kBAAsBnB,SAEhCK,IAGRC,KAELR,EAAAA,IAACsB,EAAAA,iBAAgB,CAAA,eAAA,EAEbX,UAAWY,gBA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}

package/cjs/link-list/components/link-list-eager.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@react-spring/web"),t=require("react"),s=require("../../external/react-resize-detector/build/index.esm.js"),r=require("../../shared/accessibility/index.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var n=require("../../util/simple-id-generator.js");require("../../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("../link-list.styles.js"),a=require("./common.js");exports.EagerLinkList=({items:d,maxShown:o,style:u,onItemClick:c,customLabels:m})=>{const[h,g]=t.useState(!o||o>=d.length),j=o?d.slice(o):[],x=s.useResizeDetector(),b=x.ref,p=n.useId(),k=(e,i)=>{i.onClick?(e.preventDefault(),i.onClick(e)):c&&(e.preventDefault(),c(i,e))},q=()=>{g(!h)},w=i.useSpring({height:h?x.height:0});return e.jsxs(e.Fragment,{children:[e.jsx(a.LinkListItems,{"data-testid":"link-list-items-shown",items:o?d.slice(0,o):d,handleItemClick:k,style:u}),j.length>0&&e.jsx(l.Expandable,{id:p,style:w,"data-testid":"minimised-content",inert:r.inertValue(!h),children:e.jsx(l.ExpandableChild,{ref:b,$border:!0,children:e.jsx(a.LinkListItems,{"data-testid":"link-list-items-minimised",style:u,items:j,handleItemClick:k})})}),j.length>0&&e.jsxs(l.ToggleButton,{type:"button",onClick:q,"data-testid":"toggle-button","aria-expanded":h,"aria-controls":p,children:[e.jsx(l.ToggleButtonLabel,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label",children:h?(null==m?void 0:m.viewLess)||"View less":(null==m?void 0:m.viewMore)||"View more"}),h?e.jsx(l.ViewLessIcon,{"aria-hidden":!0}):e.jsx(l.ViewMoreIcon,{"aria-hidden":!0})]})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/minus"),t=require("@lifesg/react-icons/plus"),s=require("@react-spring/web"),r=require("react"),a=require("../../external/react-resize-detector/build/index.esm.js"),n=require("../../shared/accessibility/index.js"),l=require("../../typography/index.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var d=require("../../util/simple-id-generator.js");require("../../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../link-list.styles.js"),u=require("./common.js");exports.EagerLinkList=({items:c,maxShown:m,style:g,onItemClick:h,customLabels:j})=>{const[x,p]=r.useState(!m||m>=c.length),q=m?c.slice(m):[],y=a.useResizeDetector(),b=y.ref,k=d.useId(),v=(e,i)=>{i.onClick?(e.preventDefault(),i.onClick(e)):h&&(e.preventDefault(),h(i,e))},I=()=>{p(!x)},L=s.useSpring({height:x?y.height:0});return e.jsxs(e.Fragment,{children:[e.jsx(u.LinkListItems,{"data-testid":"link-list-items-shown",items:m?c.slice(0,m):c,handleItemClick:v,style:g}),q.length>0&&e.jsx(s.animated.div,{id:k,style:L,"data-testid":"minimised-content",inert:n.inertValue(!x),className:o.expandable,children:e.jsx("div",{ref:b,className:o.expandableList,children:e.jsx(u.LinkListItems,{"data-testid":"link-list-items-minimised",style:g,items:q,handleItemClick:v})})}),q.length>0&&e.jsxs("button",{type:"button",onClick:I,"data-testid":"toggle-button","aria-expanded":x,"aria-controls":k,className:o.toggleButton,children:[e.jsx(l.Typography.BodyMD,{as:"span",weight:"semibold","data-testid":"toggle-button-label",className:o.toggleButtonLabel,children:x?(null==j?void 0:j.viewLess)||"View less":(null==j?void 0:j.viewMore)||"View more"}),x?e.jsx(i.MinusIcon,{"aria-hidden":!0,className:o.toggleButtonIcon}):e.jsx(t.PlusIcon,{"aria-hidden":!0,className:o.toggleButtonIcon})]})]})};
 //# sourceMappingURL=link-list-eager.js.map

package/cjs/link-list/components/link-list-eager.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-eager.js","sources":["../../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { useId } from \"../../util\";\nimport type {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport {\n    Expandable,\n    ExpandableChild,\n    ToggleButton,\n    ToggleButtonLabel,\n    ViewLessIcon,\n    ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <ToggleButton\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n        >\n            <ToggleButtonLabel\n                forwardedAs=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </ToggleButtonLabel>\n            {showMinimised ? (\n                <ViewLessIcon aria-hidden />\n            ) : (\n                <ViewMoreIcon aria-hidden />\n            )}\n        </ToggleButton>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <Expandable\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                >\n                    <ExpandableChild ref={childRef} $border>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </ExpandableChild>\n                </Expandable>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_jsx","LinkListItems","handleItemClick","Expandable","inert","inertValue","children","ExpandableChild","ToggleButton","type","ToggleButtonLabel","forwardedAs","weight","viewLess","viewMore","ViewLessIcon","ViewMoreIcon"],"mappings":"qgBAwB6B,EACzBA,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,UACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,EAAAA,QAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAgC9BkB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,6BACe,wBACZ5B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C6B,gBAAiBZ,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBmB,EAAAA,IAACG,EAAAA,WAAU,CACPf,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZQ,MAAOC,EAAAA,YAAY3B,GAAc4B,SAEjCN,EAAAA,IAACO,EAAAA,gBAAe,CAACpB,IAAKD,sBAClBc,EAAAA,IAACC,EAAAA,cAAa,CAAA,cACE,4BACZ1B,MAAOA,EACPF,MAAOS,EACPoB,gBAAiBZ,QAKhCR,EAAeD,OAAS,GAtD7BkB,OAACS,EAAAA,aAAY,CACTC,KAAK,SACLhB,QAASE,EAAuB,cACpB,gBAAe,gBACZjB,kBACAU,EAAEkB,SAAA,CAEjBN,EAAAA,IAACU,EAAAA,mBACGC,YAAY,OACZC,OAAO,WAAU,cACL,+BAEXlC,GACKD,eAAAA,EAAcoC,WAAY,aAC1BpC,aAAY,EAAZA,EAAcqC,WAAY,cAEnCpC,EACGsB,EAAAA,IAACe,eAAY,CAAA,eAAA,IAEbf,MAACgB,EAAAA,aAAY,CAAA,eAAA,SAoClB"}
+{"version":3,"file":"link-list-eager.js","sources":["../../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <button\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n            className={styles.toggleButton}\n        >\n            <Typography.BodyMD\n                as=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n                className={styles.toggleButtonLabel}\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </Typography.BodyMD>\n            {showMinimised ? (\n                <MinusIcon aria-hidden className={styles.toggleButtonIcon} />\n            ) : (\n                <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n            )}\n        </button>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <animated.div\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                    className={styles.expandable}\n                >\n                    <div ref={childRef} className={styles.expandableList}>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </div>\n                </animated.div>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_Fragment","children","_jsx","LinkListItems","handleItemClick","animated","div","inert","inertValue","className","styles.expandable","styles.expandableList","type","styles.toggleButton","Typography","BodyMD","as","weight","styles.toggleButtonLabel","viewLess","viewMore","MinusIcon","styles.toggleButtonIcon","PlusIcon"],"mappings":"ynBAoB6B,EACzBA,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,UACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,EAAAA,QAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,cAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAAAA,IAACG,EAAAA,SAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,EAAAA,YAAY9B,GACnB+B,UAAWC,EAAAA,oBAEXR,EAAAA,IAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAAA,eAAqBV,SAChDC,EAAAA,IAACC,gBAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAAA,KAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAAA,aAAmBZ,SAAA,CAE9BC,EAAAA,IAACY,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAAA,kBAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAEnC1C,EACGwB,EAAAA,IAACmB,EAAAA,UAAS,CAAA,eAAA,EAAaZ,UAAWa,EAAAA,mBAElCpB,EAAAA,IAACqB,EAAAA,2BAAqBd,UAAWa,EAAAA,wBAqCtC"}

package/cjs/link-list/components/link-list-lazy.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@react-spring/web"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),s=require("../../shared/component-loading-spinner/component-loading-spinner.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var o=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../link-list.styles.js"),l=require("./common.js");exports.LazyLinkList=({items:d,style:u,onItemClick:c,loadMore:m,onLoadMore:j,customLabels:h})=>{const[g,p]=i.useState(!1),q=n.useResizeDetector(),x=q.ref,b=()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(!g){p(!0);try{yield j()}catch(e){}p(!1)}})),v=t.useSpring({height:q.height});return r.jsxs(r.Fragment,{children:[r.jsx(a.Expandable,{style:v,"data-testid":"content",children:r.jsx(a.ExpandableChild,{ref:x,children:r.jsx(l.LinkListItems,{"data-testid":"link-list-items",items:d,handleItemClick:(e,r)=>{r.onClick?(e.preventDefault(),r.onClick(e)):c&&(e.preventDefault(),c(r,e))},style:u})})}),m&&(()=>{const e=g?"Loading...":(null==h?void 0:h.viewMore)||"View more";return r.jsxs(a.ToggleButton,{type:"button",onClick:b,"data-testid":"toggle-button","aria-disabled":g,$loading:g,children:[r.jsx(a.ToggleButtonLabel,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":g,children:e}),g?r.jsx(s.ComponentLoadingSpinner,{color:o.Colour["text-disabled"]}):r.jsx(a.ViewMoreIcon,{"aria-hidden":!0})]})})()]})};
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons/plus"),i=require("@react-spring/web"),s=require("clsx"),n=require("react"),a=require("../../external/react-resize-detector/build/index.esm.js"),o=require("../../shared/component-loading-spinner/component-loading-spinner.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var l=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js");var u=require("../../typography/index.js"),d=require("../link-list.styles.js"),c=require("./common.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=m(s);exports.LazyLinkList=({items:s,style:m,onItemClick:g,loadMore:h,onLoadMore:p,customLabels:q})=>{const[x,y]=n.useState(!1),b=a.useResizeDetector(),v=b.ref,f=()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(!x){y(!0);try{yield p()}catch(e){}y(!1)}})),k=i.useSpring({height:b.height});return t.jsxs(t.Fragment,{children:[t.jsx(i.animated.div,{style:k,"data-testid":"content",className:d.expandable,children:t.jsx("div",{ref:v,children:t.jsx(c.LinkListItems,{"data-testid":"link-list-items",items:s,handleItemClick:(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):g&&(e.preventDefault(),g(t,e))},style:m})})}),h&&(()=>{const e=x?"Loading...":(null==q?void 0:q.viewMore)||"View more";return t.jsxs("button",{type:"button",onClick:f,"data-testid":"toggle-button","aria-disabled":x,className:j.default(d.toggleButton,x&&d.toggleButtonLoading),children:[t.jsx(u.Typography.BodyMD,{as:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":x,className:d.toggleButtonLabel,children:e}),x?t.jsx(o.ComponentLoadingSpinner,{color:l.Colour["text-disabled"]}):t.jsx(r.PlusIcon,{"aria-hidden":!0,className:d.toggleButtonIcon})]})})()]})};
 //# sourceMappingURL=link-list-lazy.js.map

package/cjs/link-list/components/link-list-lazy.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-lazy.js","sources":["../../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport type {\n    BaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../internal-types\";\nimport {\n    Expandable,\n    ExpandableChild,\n    ToggleButton,\n    ToggleButtonLabel,\n    ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n    items,\n    style,\n    onItemClick,\n    loadMore,\n    onLoadMore,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [isLoading, setIsLoading] = useState(false);\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleClickViewMore = async () => {\n        if (isLoading) return;\n\n        setIsLoading(true);\n        try {\n            await onLoadMore();\n        } catch {\n            // do nothing\n        }\n        setIsLoading(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => {\n        const label = isLoading\n            ? \"Loading...\"\n            : customLabels?.viewMore || \"View more\";\n\n        return (\n            <ToggleButton\n                type=\"button\"\n                onClick={handleClickViewMore}\n                data-testid=\"toggle-button\"\n                aria-disabled={isLoading}\n                $loading={isLoading}\n            >\n                <ToggleButtonLabel\n                    forwardedAs=\"span\"\n                    weight=\"semibold\"\n                    data-testid=\"toggle-button-label\"\n                    aria-busy={isLoading}\n                >\n                    {label}\n                </ToggleButtonLabel>\n\n                {isLoading ? (\n                    <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n                ) : (\n                    <ViewMoreIcon aria-hidden />\n                )}\n            </ToggleButton>\n        );\n    };\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: resizeDetector.height,\n    });\n\n    return (\n        <>\n            <Expandable style={expandableStyles} data-testid=\"content\">\n                <ExpandableChild ref={childRef}>\n                    <LinkListItems\n                        data-testid=\"link-list-items\"\n                        items={items}\n                        handleItemClick={handleListItemClick}\n                        style={style}\n                    />\n                </ExpandableChild>\n            </Expandable>\n            {loadMore && renderToggle()}\n        </>\n    );\n};\n"],"names":["items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","Expandable","ExpandableChild","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","ToggleButton","type","$loading","ToggleButtonLabel","forwardedAs","weight","ComponentLoadingSpinner","color","Colour","ViewMoreIcon","renderToggle"],"mappings":"60BAuB4B,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAqCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,YAAWpB,MAAOe,EAAgB,cAAc,mBAC7CI,EAAAA,IAACE,EAAAA,iBAAgBV,IAAKD,EAAQY,SAC1BH,EAAAA,IAACI,EAAAA,cAAa,CAAA,cACE,kBACZxB,MAAOA,EACPyB,gBA7EQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNxB,IACPwB,EAAMG,iBACN3B,EAAYyB,EAAMD,GACtB,EAgEgBzB,MAAOA,QAIlBE,GAhDY,MACjB,MAAM2B,EAAQxB,EACR,cACAD,aAAY,EAAZA,EAAc0B,WAAY,YAEhC,OACIZ,EAAAA,KAACa,eAAY,CACTC,KAAK,SACLL,QAASf,EAAmB,cAChB,gBAAe,gBACZP,EAAS4B,SACd5B,EAASiB,SAAA,CAEnBH,EAAAA,IAACe,EAAAA,kBAAiB,CACdC,YAAY,OACZC,OAAO,yBACK,sBAAqB,YACtB/B,EAASiB,SAEnBO,IAGJxB,EACGc,MAACkB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCpB,MAACqB,EAAAA,aAAY,CAAA,eAAA,MAEN,EAqBFC,KACd"}
+{"version":3,"file":"link-list-lazy.js","sources":["../../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport type {\n    BaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n    items,\n    style,\n    onItemClick,\n    loadMore,\n    onLoadMore,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [isLoading, setIsLoading] = useState(false);\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleClickViewMore = async () => {\n        if (isLoading) return;\n\n        setIsLoading(true);\n        try {\n            await onLoadMore();\n        } catch {\n            // do nothing\n        }\n        setIsLoading(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => {\n        const label = isLoading\n            ? \"Loading...\"\n            : customLabels?.viewMore || \"View more\";\n\n        return (\n            <button\n                type=\"button\"\n                onClick={handleClickViewMore}\n                data-testid=\"toggle-button\"\n                aria-disabled={isLoading}\n                className={clsx(\n                    styles.toggleButton,\n                    isLoading && styles.toggleButtonLoading\n                )}\n            >\n                <Typography.BodyMD\n                    as=\"span\"\n                    weight=\"semibold\"\n                    data-testid=\"toggle-button-label\"\n                    aria-busy={isLoading}\n                    className={styles.toggleButtonLabel}\n                >\n                    {label}\n                </Typography.BodyMD>\n\n                {isLoading ? (\n                    <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n                ) : (\n                    <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n                )}\n            </button>\n        );\n    };\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: resizeDetector.height,\n    });\n\n    return (\n        <>\n            <animated.div\n                style={expandableStyles}\n                data-testid=\"content\"\n                className={styles.expandable}\n            >\n                <div ref={childRef}>\n                    <LinkListItems\n                        data-testid=\"link-list-items\"\n                        items={items}\n                        handleItemClick={handleListItemClick}\n                        style={style}\n                    />\n                </div>\n            </animated.div>\n            {loadMore && renderToggle()}\n        </>\n    );\n};\n"],"names":["items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","animated","div","className","styles.expandable","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","type","clsx","styles.toggleButton","styles.toggleButtonLoading","Typography","BodyMD","as","weight","styles.toggleButtonLabel","ComponentLoadingSpinner","color","Colour","PlusIcon","styles.toggleButtonIcon","renderToggle"],"mappings":"+iCAoB4B,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,MAACC,EAAAA,SAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,EAAAA,oBAEXJ,EAAAA,IAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAAAA,IAACM,gBAAa,CAAA,cACE,kBACZ1B,MAAOA,EACP2B,gBArFQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACN1B,IACP0B,EAAMG,iBACN7B,EAAY2B,EAAMD,GACtB,EAwEgB3B,MAAOA,QAIlBE,GAxDY,MACjB,MAAM6B,EAAQ1B,EACR,cACAD,aAAY,EAAZA,EAAc4B,WAAY,YAEhC,OACId,OAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,UACPC,EAAAA,aACA9B,GAAa+B,iCAGjBjB,EAAAA,IAACkB,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,EAAAA,2BAEVV,IAGJ1B,EACGc,EAAAA,IAACuB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCzB,EAAAA,IAAC0B,EAAAA,2BAAqBvB,UAAWwB,EAAAA,qBAEhC,EAyBIC,KACd"}

package/cjs/link-list/link-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("./components/link-list-eager.js"),o=require("./components/link-list-lazy.js"),l=require("./link-list.styles.js");exports.LinkList=i=>{if(!i.loadMode||"eager"===i.loadMode){const{loadMode:o,items:a,style:r="default",onItemClick:n,maxShown:m,customLabels:d}=i,c=e.__rest(i,["loadMode","items","style","onItemClick","maxShown","customLabels"]);return s.jsx(l.Container,Object.assign({},c,{children:s.jsx(t.EagerLinkList,{items:a,maxShown:m,style:r,onItemClick:n,customLabels:d})}))}if("lazy"===i.loadMode){const{loadMode:t,items:a,style:r="default",onItemClick:n,loadMore:m,onLoadMore:d,customLabels:c}=i,u=e.__rest(i,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels"]);return s.jsx(l.Container,Object.assign({},u,{children:s.jsx(o.LazyLinkList,{items:a,style:r,onItemClick:n,loadMore:m,onLoadMore:d,customLabels:c})}))}return s.jsx(s.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("clsx"),o=require("./components/link-list-eager.js"),a=require("./components/link-list-lazy.js"),l=require("./link-list.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(t);exports.LinkList=t=>{if(!t.loadMode||"eager"===t.loadMode){const{loadMode:a,items:i,style:n="default",onItemClick:c,maxShown:m,customLabels:d,className:u}=t,L=e.__rest(t,["loadMode","items","style","onItemClick","maxShown","customLabels","className"]);return s.jsx("div",Object.assign({},L,{className:r.default(l.container,u),children:s.jsx(o.EagerLinkList,{items:i,maxShown:m,style:n,onItemClick:c,customLabels:d})}))}if("lazy"===t.loadMode){const{loadMode:o,items:i,style:n="default",onItemClick:c,loadMore:m,onLoadMore:d,customLabels:u,className:L}=t,j=e.__rest(t,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels","className"]);return s.jsx("div",Object.assign({},j,{className:r.default(l.container,L),children:s.jsx(a.LazyLinkList,{items:i,style:n,onItemClick:c,loadMore:m,onLoadMore:d,customLabels:u})}))}return s.jsx(s.Fragment,{})};
 //# sourceMappingURL=link-list.js.map

package/cjs/link-list/link-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.js","sources":["../../../src/link-list/link-list.tsx"],"sourcesContent":["import { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport { Container } from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n    if (!props.loadMode || props.loadMode === \"eager\") {\n        const {\n            loadMode: _loadMode,\n            items,\n            style = \"default\",\n            onItemClick,\n            maxShown,\n            customLabels,\n            ...otherProps\n        } = props;\n\n        return (\n            <Container {...otherProps}>\n                <EagerLinkList\n                    items={items}\n                    maxShown={maxShown}\n                    style={style}\n                    onItemClick={onItemClick}\n                    customLabels={customLabels}\n                />\n            </Container>\n        );\n    }\n    if (props.loadMode === \"lazy\") {\n        {\n            const {\n                loadMode: _loadMode,\n                items,\n                style = \"default\",\n                onItemClick,\n                loadMore,\n                onLoadMore,\n                customLabels,\n                ...otherProps\n            } = props;\n\n            return (\n                <Container {...otherProps}>\n                    <LazyLinkList\n                        items={items}\n                        style={style}\n                        onItemClick={onItemClick}\n                        loadMore={loadMore}\n                        onLoadMore={onLoadMore}\n                        customLabels={customLabels}\n                    />\n                </Container>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","otherProps","__rest","_jsx","Container","Object","assign","children","EagerLinkList","loadMore","onLoadMore","LazyLinkList"],"mappings":"gOAK6BA,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,GAEAP,EADGQ,EAAUC,EAAAA,OACbT,EARE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,iBAUN,OACIU,MAACC,EAAAA,UAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,MAACK,EAAAA,cAAa,CACVZ,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWW,SACXA,EAAQC,WACRA,EAAUV,aACVA,GAEAP,EADGQ,EAAUC,SACbT,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,iBAWN,OACIU,MAACC,EAAAA,UAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,EAAAA,IAACQ,EAAAA,aAAY,CACTf,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbW,SAAUA,EACVC,WAAYA,EACZV,aAAcA,MAI9B,CAGJ,OAAOG,EAAAA,kBAAK"}
+{"version":3,"file":"link-list.js","sources":["../../../src/link-list/link-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport * as styles from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n    if (!props.loadMode || props.loadMode === \"eager\") {\n        const {\n            loadMode: _loadMode,\n            items,\n            style = \"default\",\n            onItemClick,\n            maxShown,\n            customLabels,\n            className,\n            ...otherProps\n        } = props;\n\n        return (\n            <div {...otherProps} className={clsx(styles.container, className)}>\n                <EagerLinkList\n                    items={items}\n                    maxShown={maxShown}\n                    style={style}\n                    onItemClick={onItemClick}\n                    customLabels={customLabels}\n                />\n            </div>\n        );\n    }\n    if (props.loadMode === \"lazy\") {\n        {\n            const {\n                loadMode: _loadMode,\n                items,\n                style = \"default\",\n                onItemClick,\n                loadMore,\n                onLoadMore,\n                customLabels,\n                className,\n                ...otherProps\n            } = props;\n\n            return (\n                <div\n                    {...otherProps}\n                    className={clsx(styles.container, className)}\n                >\n                    <LazyLinkList\n                        items={items}\n                        style={style}\n                        onItemClick={onItemClick}\n                        loadMore={loadMore}\n                        onLoadMore={onLoadMore}\n                        customLabels={customLabels}\n                    />\n                </div>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"qUAO6BA,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,SACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,YACnDG,EAAAA,IAACK,EAAAA,eACGb,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWY,SACXA,EAAQC,WACRA,EAAUX,aACVA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,SACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,EAAAA,2BACQF,EAAU,CACdD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUW,SAE5CR,EAAAA,IAACS,EAAAA,aAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,EAAAA,kBAAK"}

package/cjs/link-list/link-list.styles.js

@@ -1,90 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-right"),r=require("@lifesg/react-icons/minus"),o=require("@lifesg/react-icons/plus"),t=require("@react-spring/web"),i=require("styled-components"),d=require("../typography/index.js"),n=require("../v3_theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(i);const s=i.css`
-    height: 1.125rem;
-    width: 1.125rem;
-    color: ${n.V3_Colour["icon-primary"]};
-`,u=a.default.div`
-    border-top: ${n.V3_Border["width-010"]} ${n.V3_Border.solid} ${n.V3_Colour.border};
-    border-bottom: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-`,p=a.default(d.Typography.HeadingSM)`
-    color: ${n.V3_Colour["text-primary"]};
-    margin-bottom: 0.5rem;
-`,c=a.default(d.Typography.HeadingXS)`
-    color: ${n.V3_Colour["text-primary"]};
-`,$=a.default(e.ChevronRightIcon)`
-    ${s}
-`,m=a.default.a`
-    padding: 1rem 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 4rem;
-
-    &:not(:last-of-type) {
-        border-bottom: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-            ${n.V3_Colour.border};
-    }
-
-    &:hover {
-        ${p},
-        ${c},
-        ${$} {
-            color: ${n.V3_Colour["text-hover"]};
-        }
-    }
-`,f=a.default.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    margin-right: 1rem;
-`,g=a.default(d.Typography.BodyMD)`
-    margin-top: 0.25rem;
-`,x=t.animated(a.default.div`
-    overflow: hidden;
-`),h=a.default.div`
-    ${e=>e.$border&&i.css`
-            border-top: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-                ${n.V3_Colour.border};
-        `}
-`,b=a.default(d.Typography.BodyMD)`
-    color: ${n.V3_Colour["text-primary"]};
-`,y=a.default(o.PlusIcon)`
-    ${s}
-`,V=a.default(r.MinusIcon)`
-    ${s}
-`,_=a.default.button`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    padding: 1rem 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    border-top: ${n.V3_Border["width-010"]} ${n.V3_Border.solid} ${n.V3_Colour.border};
-    gap: 1rem;
-
-    ${e=>e.$loading&&i.css`
-            cursor: default;
-            flex-direction: row-reverse;
-
-            ${b},
-            ${y},
-            ${V} {
-                color: ${n.V3_Colour["text-disabled"]};
-                text-decoration: none;
-            }
-        `}
-
-    ${e=>!e.$loading&&i.css`
-            &:hover {
-                ${b},
-                ${y},
-                ${V} {
-                    color: ${n.V3_Colour["text-hover"]};
-                    text-decoration: underline;
-                }
-            }
-        `}
-`;exports.Container=u,exports.Description=g,exports.Expandable=x,exports.ExpandableChild=h,exports.ItemContainer=m,exports.ItemContentContainer=f,exports.ItemIcon=$,exports.ItemTitleDefault=p,exports.ItemTitleSmall=c,exports.ToggleButton=_,exports.ToggleButtonLabel=b,exports.ViewLessIcon=V,exports.ViewMoreIcon=y;
+"use strict";require("./link-list.styles_1g33nb4.css");exports.container="cfblyzz",exports.expandable="e1p9oc1w",exports.expandableList="e1hdpk7s",exports.itemContainer="i191w9a9",exports.itemContentContainer="i1ek9mgx",exports.itemDescription="i6tq5i6",exports.itemIcon="iejabo3",exports.itemTitleDefault="ixxi28v",exports.itemTitleSmall="ia0puf0",exports.toggleButton="t1l68ils",exports.toggleButtonIcon="t1quebcu",exports.toggleButtonLabel="tjt90m3",exports.toggleButtonLoading="t5821wq";
 //# sourceMappingURL=link-list.styles.js.map

package/cjs/link-list/link-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.styles.js","sources":["../../../src/link-list/link-list.styles.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ExpandableChildStyleProps {\n    $border?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n    $loading?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst iconStyle = css`\n    height: 1.125rem;\n    width: 1.125rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const Container = styled.div`\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour.border};\n`;\n\nexport const ItemTitleDefault = styled(Typography.HeadingSM)`\n    color: ${V3_Colour[\"text-primary\"]};\n    margin-bottom: 0.5rem;\n`;\n\nexport const ItemTitleSmall = styled(Typography.HeadingXS)`\n    color: ${V3_Colour[\"text-primary\"]};\n`;\n\nexport const ItemIcon = styled(ChevronRightIcon)`\n    ${iconStyle}\n`;\n\nexport const ItemContainer = styled.a`\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 4rem;\n\n    &:not(:last-of-type) {\n        border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n            ${V3_Colour.border};\n    }\n\n    &:hover {\n        ${ItemTitleDefault},\n        ${ItemTitleSmall},\n        ${ItemIcon} {\n            color: ${V3_Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const ItemContentContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin-right: 1rem;\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    margin-top: 0.25rem;\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const ExpandableChild = styled.div<ExpandableChildStyleProps>`\n    ${(props) =>\n        props.$border &&\n        css`\n            border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n                ${V3_Colour.border};\n        `}\n`;\n\nexport const ToggleButtonLabel = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n`;\n\nexport const ViewMoreIcon = styled(PlusIcon)`\n    ${iconStyle}\n`;\nexport const ViewLessIcon = styled(MinusIcon)`\n    ${iconStyle}\n`;\n\nexport const ToggleButton = styled.button<ToggleButtonStyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 1rem 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    gap: 1rem;\n\n    ${(props) =>\n        props.$loading &&\n        css`\n            cursor: default;\n            flex-direction: row-reverse;\n\n            ${ToggleButtonLabel},\n            ${ViewMoreIcon},\n            ${ViewLessIcon} {\n                color: ${V3_Colour[\"text-disabled\"]};\n                text-decoration: none;\n            }\n        `}\n\n    ${(props) =>\n        !props.$loading &&\n        css`\n            &:hover {\n                ${ToggleButtonLabel},\n                ${ViewMoreIcon},\n                ${ViewLessIcon} {\n                    color: ${V3_Colour[\"text-hover\"]};\n                    text-decoration: underline;\n                }\n            }\n        `}\n`;\n"],"names":["iconStyle","css","V3_Colour","Container","styled","div","V3_Border","solid","border","ItemTitleDefault","Typography","HeadingSM","ItemTitleSmall","HeadingXS","ItemIcon","ChevronRightIcon","ItemContainer","a","ItemContentContainer","Description","BodyMD","Expandable","animated","ExpandableChild","props","$border","ToggleButtonLabel","ViewMoreIcon","PlusIcon","ViewLessIcon","MinusIcon","ToggleButton","button","$loading"],"mappings":"oWAwBA,MAAMA,EAAYC,EAAAA,GAAG;;;aAGRC,EAAAA,UAAU;EAGVC,EAAYC,EAAAA,QAAOC,GAAG;kBACjBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC,SAASL,EAAAA,UAAUM;qBACpDF,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC/CL,EAAAA,UAAUM;EAGPC,EAAmBL,EAAAA,QAAOM,aAAWC,UAAU;aAC/CT,EAAAA,UAAU;;EAIVU,EAAiBR,EAAAA,QAAOM,aAAWG,UAAU;aAC7CX,EAAAA,UAAU;EAGVY,EAAWV,EAAAA,QAAOW,EAAAA,iBAAiB;MAC1Cf;EAGOgB,EAAgBZ,EAAAA,QAAOa,CAAC;;;;;;;;yBAQZX,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;cAC/CL,EAAAA,UAAUM;;;;UAIdC;UACAG;UACAE;qBACWZ,EAAAA,UAAU;;;EAKlBgB,EAAuBd,EAAAA,QAAOC,GAAG;;;;;EAOjCc,EAAcf,EAAAA,QAAOM,aAAWU,OAAO;;EAIvCC,EAAaC,EAAAA,SAASlB,EAAAA,QAAOC,GAAG;;GAIhCkB,EAAkBnB,EAAAA,QAAOC,GAA8B;MAC7DmB,GACCA,EAAMC,SACNxB,KAAG;0BACeK,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;kBAC5CL,EAAAA,UAAUM;;EAIfkB,EAAoBtB,EAAAA,QAAOM,aAAWU,OAAO;aAC7ClB,EAAAA,UAAU;EAGVyB,EAAevB,EAAAA,QAAOwB,EAAAA,SAAS;MACtC5B;EAEO6B,EAAezB,EAAAA,QAAO0B,EAAAA,UAAU;MACvC9B;EAGO+B,EAAe3B,EAAAA,QAAO4B,MAA8B;;;;;;;;;kBAS/C1B,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC,SAASL,EAAAA,UAAUM;;;MAGlEgB,GACCA,EAAMS,UACNhC,KAAG;;;;cAIGyB;cACAC;cACAE;yBACW3B,EAAAA,UAAU;;;;;MAK5BsB,IACEA,EAAMS,UACPhC,KAAG;;kBAEOyB;kBACAC;kBACAE;6BACW3B,EAAAA,UAAU;;;;;"}
+{"version":3,"file":"link-list.styles.js","sources":["../../../src/link-list/link-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour } from \"../theme\";\n\nexport const container = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\n// =============================================================================\n// ITEM STYLES\n// =============================================================================\nexport const itemIcon = css`\n    height: 1.125rem;\n    width: 1.125rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const itemTitleDefault = css`\n    color: ${Colour[\"text-primary\"]};\n    margin-bottom: 0.5rem;\n`;\n\nexport const itemTitleSmall = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const itemContainer = css`\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 4rem;\n\n    &:not(:last-of-type) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n\n    &:hover {\n        .${itemTitleDefault}, .${itemTitleSmall}, .${itemIcon} {\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const itemContentContainer = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin-right: 1rem;\n`;\n\nexport const itemDescription = css`\n    margin-top: 0.25rem;\n`;\n\n// =============================================================================\n// TOGGLE STYLES\n// =============================================================================\nexport const expandable = css`\n    overflow: hidden;\n`;\n\nexport const expandableList = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const toggleButtonLabel = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const toggleButtonIcon = css`\n    height: 1.125rem;\n    width: 1.125rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const toggleButton = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 1rem 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    gap: 1rem;\n\n    &:hover {\n        .${toggleButtonLabel}, .${toggleButtonIcon} {\n            color: ${Colour[\"text-hover\"]};\n            text-decoration: underline;\n        }\n    }\n`;\n\nexport const toggleButtonLoading = css`\n    cursor: default;\n    flex-direction: row-reverse;\n\n    .${toggleButtonLabel}, .${toggleButtonIcon} {\n        color: ${Colour[\"text-disabled\"]};\n        text-decoration: none;\n    }\n\n    &:hover {\n        .${toggleButtonLabel}, .${toggleButtonIcon} {\n            color: ${Colour[\"text-disabled\"]};\n            text-decoration: none;\n        }\n    }\n`;\n"],"names":[],"mappings":"kGAIsB,6BAuDC,kCAII,iCApCD,wCAkBO,mCAOL,2BAxCP,mCAMQ,iCAKF,+BAsDF,oCANI,qCAJC,sCA8BE"}

package/cjs/link-list/link-list.styles_1g33nb4.css

@@ -0,0 +1,13 @@
+.cfblyzz{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.iejabo3{height:1.125rem;width:1.125rem;color:var(--fds-colour-icon-primary);}
+.ixxi28v{color:var(--fds-colour-text-primary);margin-bottom:0.5rem;}
+.ia0puf0{color:var(--fds-colour-text-primary);}
+.i191w9a9{padding:1rem 0;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;min-height:4rem;}.i191w9a9:not(:last-of-type){border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.i191w9a9:hover .ixxi28v,.i191w9a9:hover .ia0puf0,.i191w9a9:hover .iejabo3{color:var(--fds-colour-text-hover);}
+.i1ek9mgx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:1rem;}
+.i6tq5i6{margin-top:0.25rem;}
+.e1p9oc1w{overflow:hidden;}
+.e1hdpk7s{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.tjt90m3{color:var(--fds-colour-text-primary);}
+.t1quebcu{height:1.125rem;width:1.125rem;color:var(--fds-colour-icon-primary);}
+.t1l68ils{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:1rem 0;border:none;background:none;cursor:pointer;border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);gap:1rem;}.t1l68ils:hover .tjt90m3,.t1l68ils:hover .t1quebcu{color:var(--fds-colour-text-hover);-webkit-text-decoration:underline;text-decoration:underline;}
+.t5821wq{cursor:default;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}.t5821wq .tjt90m3,.t5821wq .t1quebcu{color:var(--fds-colour-text-disabled);-webkit-text-decoration:none;text-decoration:none;}.t5821wq:hover .tjt90m3,.t5821wq:hover .t1quebcu{color:var(--fds-colour-text-disabled);-webkit-text-decoration:none;text-decoration:none;}