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

package/cjs/layout/container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.styles.js","sources":["../../../src/layout/container.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Breakpoint, V3_MediaQuery } from \"../v3_theme\";\nimport type { ContainerType } from \"./types\";\n\ninterface StyleProps {\n    $type: ContainerType;\n    $stretch: boolean;\n}\n\nexport const StyledContainer = styled.div<StyleProps>`\n    flex-grow: 1;\n    margin: 0 auto;\n    position: relative;\n    width: auto;\n    height: auto;\n\n    padding: 0 ${V3_Breakpoint[\"xxl-margin\"]}px;\n\n    ${V3_MediaQuery.MaxWidth.xl} {\n        padding: 0 ${V3_Breakpoint[\"xl-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        padding: 0 ${V3_Breakpoint[\"lg-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: 0 ${V3_Breakpoint[\"md-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        padding: 0 ${V3_Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        padding: 0 ${V3_Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        padding: 0 ${V3_Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    ${(props) => {\n        if (!props.$stretch) {\n            return css`\n                max-width: 1440px;\n            `;\n        }\n    }}\n\n    ${(props) => {\n        switch (props.$type) {\n            case \"grid\":\n                return css`\n                    column-gap: ${V3_Breakpoint[\"xxl-gutter\"]}px;\n                    display: grid;\n                    grid-template-columns: repeat(\n                        ${V3_Breakpoint[\"xxl-column\"]},\n                        minmax(0, 1fr)\n                    );\n\n                    ${V3_MediaQuery.MaxWidth.xl} {\n                        column-gap: ${V3_Breakpoint[\"xl-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${V3_Breakpoint[\"xl-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${V3_MediaQuery.MaxWidth.lg} {\n                        column-gap: ${V3_Breakpoint[\"lg-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${V3_Breakpoint[\"lg-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${V3_MediaQuery.MaxWidth.md} {\n                        column-gap: ${V3_Breakpoint[\"md-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${V3_Breakpoint[\"md-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${V3_MediaQuery.MaxWidth.sm} {\n                        column-gap: ${V3_Breakpoint[\"sm-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${V3_Breakpoint[\"sm-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${V3_MediaQuery.MaxWidth.xs} {\n                        column-gap: ${V3_Breakpoint[\"xs-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${V3_Breakpoint[\"xs-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n\n                    ${V3_MediaQuery.MaxWidth.xxs} {\n                        column-gap: ${V3_Breakpoint[\"xxs-gutter\"]}px;\n                        grid-template-columns: repeat(\n                            ${V3_Breakpoint[\"xxs-column\"]},\n                            minmax(0, 1fr)\n                        );\n                    }\n                `;\n\n            case \"flex-column\":\n                return css`\n                    display: flex;\n                    flex-direction: column;\n                `;\n            case \"flex\":\n            default:\n                return css`\n                    display: flex;\n                `;\n        }\n    }}\n`;\n"],"names":["StyledContainer","styled","div","V3_Breakpoint","V3_MediaQuery","MaxWidth","xl","lg","md","sm","xs","xxs","props","$stretch","css","$type"],"mappings":"0JAUO,MAAMA,OAAkBC,QAAOC,GAAe;;;;;;;iBAOpCC,EAAAA,cAAc;;MAEzBC,EAAAA,cAAcC,SAASC;qBACRH,EAAAA,cAAc;;;MAG7BC,EAAAA,cAAcC,SAASE;qBACRJ,EAAAA,cAAc;;;MAG7BC,EAAAA,cAAcC,SAASG;qBACRL,EAAAA,cAAc;;;MAG7BC,EAAAA,cAAcC,SAASI;qBACRN,EAAAA,cAAc;;;MAG7BC,EAAAA,cAAcC,SAASK;qBACRP,EAAAA,cAAc;;;MAG7BC,EAAAA,cAAcC,SAASM;qBACRR,EAAAA,cAAc;;;MAG5BS,IACC,IAAKA,EAAMC,SACP,OAAOC,KAAG;;aAGd;;MAGDF,IACC,OAAQA,EAAMG,OACV,IAAK,OACD,OAAOD,KAAG;kCACQX,EAAAA,cAAc;;;0BAGtBA,EAAAA,cAAc;;;;sBAIlBC,EAAAA,cAAcC,SAASC;sCACPH,EAAAA,cAAc;;8BAEtBA,EAAAA,cAAc;;;;;sBAKtBC,EAAAA,cAAcC,SAASE;sCACPJ,EAAAA,cAAc;;8BAEtBA,EAAAA,cAAc;;;;;sBAKtBC,EAAAA,cAAcC,SAASG;sCACPL,EAAAA,cAAc;;8BAEtBA,EAAAA,cAAc;;;;;sBAKtBC,EAAAA,cAAcC,SAASI;sCACPN,EAAAA,cAAc;;8BAEtBA,EAAAA,cAAc;;;;;sBAKtBC,EAAAA,cAAcC,SAASK;sCACPP,EAAAA,cAAc;;8BAEtBA,EAAAA,cAAc;;;;;sBAKtBC,EAAAA,cAAcC,SAASM;sCACPR,EAAAA,cAAc;;8BAEtBA,EAAAA,cAAc;;;;kBAMhC,IAAK,cACD,OAAOW,KAAG;;;kBAKd,QACI,OAAOA,KAAG;;;"}
+{"version":3,"file":"container.styles.js","sources":["../../../src/layout/container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens/breakpoint\";\n\nexport const container = css`\n    flex-grow: 1;\n    margin: 0 auto;\n    position: relative;\n    width: auto;\n    height: auto;\n    padding: 0 ${Breakpoint[\"xxs-margin\"]};\n\n    ${MediaQuery.MinWidth.xs} {\n        padding: 0 ${Breakpoint[\"xs-margin\"]};\n    }\n    ${MediaQuery.MinWidth.sm} {\n        padding: 0 ${Breakpoint[\"sm-margin\"]};\n    }\n    ${MediaQuery.MinWidth.md} {\n        padding: 0 ${Breakpoint[\"md-margin\"]};\n    }\n    ${MediaQuery.MinWidth.lg} {\n        padding: 0 ${Breakpoint[\"lg-margin\"]};\n    }\n    ${MediaQuery.MinWidth.xl} {\n        padding: 0 ${Breakpoint[\"xl-margin\"]};\n    }\n    ${MediaQuery.MinWidth.xxl} {\n        padding: 0 ${Breakpoint[\"xxl-margin\"]};\n    }\n`;\n\nexport const containerNotStretched = css`\n    max-width: 1440px;\n`;\n\nexport const containerGrid = css`\n    column-gap: ${Breakpoint[\"xxs-gutter\"]};\n    display: grid;\n    grid-template-columns: repeat(${Breakpoint[\"xxs-column\"]}, minmax(0, 1fr));\n\n    ${MediaQuery.MinWidth.xs} {\n        column-gap: ${Breakpoint[\"xs-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"xs-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.sm} {\n        column-gap: ${Breakpoint[\"sm-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"sm-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.md} {\n        column-gap: ${Breakpoint[\"md-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"md-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.lg} {\n        column-gap: ${Breakpoint[\"lg-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"lg-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.xl} {\n        column-gap: ${Breakpoint[\"xl-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"xl-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n    ${MediaQuery.MinWidth.xxl} {\n        column-gap: ${Breakpoint[\"xxl-gutter\"]};\n        grid-template-columns: repeat(\n            ${Breakpoint[\"xxl-column\"]},\n            minmax(0, 1fr)\n        );\n    }\n`;\n\nexport const containerFlexColumn = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const containerFlex = css`\n    display: flex;\n`;\n"],"names":[],"mappings":"8FAKsB,iCAsFI,sCALM,gCAjDN,wCAJQ"}

package/cjs/layout/container.styles_v70ec6.css

@@ -0,0 +1,41 @@
+@layer fds{.c1po1qn8{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;height:auto;padding:0 var(--fds-breakpoint-margin-xxs);}:where(body.fds-breakpoint-xs-min) .c1po1qn8{padding:0 var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-sm-min) .c1po1qn8{padding:0 var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-md-min) .c1po1qn8{padding:0 var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-lg-min) .c1po1qn8{padding:0 var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-xl-min) .c1po1qn8{padding:0 var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-xxl-min) .c1po1qn8{padding:0 var(--fds-breakpoint-margin-xxl);}
+.ca13up7{max-width:1440px;}
+.ch4a7dv{-webkit-column-gap:var(--fds-breakpoint-gutter-xxs);column-gap:var(--fds-breakpoint-gutter-xxs);display:-ms-grid;display:grid;-ms-grid-columns:repeat(var(--fds-breakpoint-column-xxs), minmax(0, 1fr));grid-template-columns:repeat(var(--fds-breakpoint-column-xxs), minmax(0, 1fr));}:where(body.fds-breakpoint-xs-min) .ch4a7dv{-webkit-column-gap:var(--fds-breakpoint-gutter-xs);column-gap:var(--fds-breakpoint-gutter-xs);-ms-grid-columns:repeat(
+            var(--fds-breakpoint-column-xs),
+            minmax(0, 1fr)
+        );grid-template-columns:repeat(
+            var(--fds-breakpoint-column-xs),
+            minmax(0, 1fr)
+        );}:where(body.fds-breakpoint-sm-min) .ch4a7dv{-webkit-column-gap:var(--fds-breakpoint-gutter-sm);column-gap:var(--fds-breakpoint-gutter-sm);-ms-grid-columns:repeat(
+            var(--fds-breakpoint-column-sm),
+            minmax(0, 1fr)
+        );grid-template-columns:repeat(
+            var(--fds-breakpoint-column-sm),
+            minmax(0, 1fr)
+        );}:where(body.fds-breakpoint-md-min) .ch4a7dv{-webkit-column-gap:var(--fds-breakpoint-gutter-md);column-gap:var(--fds-breakpoint-gutter-md);-ms-grid-columns:repeat(
+            var(--fds-breakpoint-column-md),
+            minmax(0, 1fr)
+        );grid-template-columns:repeat(
+            var(--fds-breakpoint-column-md),
+            minmax(0, 1fr)
+        );}:where(body.fds-breakpoint-lg-min) .ch4a7dv{-webkit-column-gap:var(--fds-breakpoint-gutter-lg);column-gap:var(--fds-breakpoint-gutter-lg);-ms-grid-columns:repeat(
+            var(--fds-breakpoint-column-lg),
+            minmax(0, 1fr)
+        );grid-template-columns:repeat(
+            var(--fds-breakpoint-column-lg),
+            minmax(0, 1fr)
+        );}:where(body.fds-breakpoint-xl-min) .ch4a7dv{-webkit-column-gap:var(--fds-breakpoint-gutter-xl);column-gap:var(--fds-breakpoint-gutter-xl);-ms-grid-columns:repeat(
+            var(--fds-breakpoint-column-xl),
+            minmax(0, 1fr)
+        );grid-template-columns:repeat(
+            var(--fds-breakpoint-column-xl),
+            minmax(0, 1fr)
+        );}:where(body.fds-breakpoint-xxl-min) .ch4a7dv{-webkit-column-gap:var(--fds-breakpoint-gutter-xxl);column-gap:var(--fds-breakpoint-gutter-xxl);-ms-grid-columns:repeat(
+            var(--fds-breakpoint-column-xxl),
+            minmax(0, 1fr)
+        );grid-template-columns:repeat(
+            var(--fds-breakpoint-column-xxl),
+            minmax(0, 1fr)
+        );}
+.cyi2nns{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.cmvqis9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}

package/cjs/layout/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./col-div.js"),t=require("./container.js"),n=require("./content.js"),o=require("./section.js");const i={Container:t.Container,Section:o.Section,Content:n.Content,ColDiv:e.ColDiv};exports.Layout=i;
+"use strict";var e=require("./col-div.js"),t=require("./container.js"),n=require("./content.js"),o=require("./section.js");const i={ColDiv:e.ColDiv,Container:t.Container,Content:n.Content,Section:o.Section};exports.Layout=i;
 //# sourceMappingURL=index.js.map

package/cjs/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\nexport const Layout = {\n    Container,\n    Section,\n    Content,\n    ColDiv,\n};\n\nexport * from \"./types\";\n"],"names":["Layout","Container","Section","Content","ColDiv"],"mappings":"2HAKO,MAAMA,EAAS,WAClBC,EAAAA,kBACAC,EAAAA,gBACAC,EAAAA,eACAC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\n// @catalog\n/**\n * A set of structural layout primitives for composing page regions.\n *\n * Use `Layout` sub-components to establish full-width page sections, centred\n * content areas, and responsive grid columns. Sub-components:\n * - `Layout.ColDiv` — a `<div>` that occupies a responsive column span within a grid `Container`.\n * - `Layout.Container` — a flex or grid layout wrapper constrained to the content width.\n * - `Layout.Content` — the primary content block, composes of `Section` + `Container`. Use `Section` and `Container` directly for more granular control.\n * - `Layout.Section` — a full-width semantic `<section>` page region.\n * @keywords column, container, grid, page, region, responsive, section\n */\nexport const Layout = {\n    /** Renders a `<div>` that occupies a responsive column span within a grid `Container`. */\n    ColDiv,\n    /** Renders a flex or grid layout wrapper constrained to the content width. */\n    Container,\n    /** The primary content block — composes a `Section` with an inner `Container`. */\n    Content,\n    /** Renders a full-width semantic `<section>` page region. */\n    Section,\n};\n\nexport * from \"./types\";\n"],"names":["Layout","ColDiv","Container","Content","Section"],"mappings":"2HAiBO,MAAMA,EAAS,QAElBC,EAAAA,iBAEAC,EAAAA,kBAEAC,EAAAA,gBAEAC,EAAAA"}

package/cjs/layout/section.js

@@ -1,5 +1,2 @@
-"use strict";var t=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("react"),i=require("styled-components");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=s(r),c=s(i);const n=a.default.forwardRef(((r,i)=>{const{children:s,"data-testid":a="section",stretch:c=!1}=r,n=t.__rest(r,["children","data-testid","stretch"]);return e.jsx(d,Object.assign({ref:i,"data-testid":a,$stretch:c},n,{children:s}))})),d=c.default.section`
-    display: block;
-    position: relative;
-`;exports.Section=n;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),s=require("react"),c=require("./section.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(r);const n=i(s).default.forwardRef(((r,s)=>{const{children:i,"data-testid":n="section",className:d,stretch:u=!1}=r,l=e.__rest(r,["children","data-testid","className","stretch"]);return t.jsx("section",Object.assign({ref:s,"data-testid":n,className:a.default(c.section,d,u&&c.sectionStretched)},l,{children:i}))}));exports.Section=n;
 //# sourceMappingURL=section.js.map

package/cjs/layout/section.js.map

@@ -1 +1 @@
-{"version":3,"file":"section.js","sources":["../../../src/layout/section.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nimport type { SectionProps } from \"./types\";\n\nconst Component = (\n    props: SectionProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"section\",\n        stretch = false,\n        ...otherProps\n    } = props;\n\n    return (\n        <StyledSection\n            ref={ref}\n            data-testid={testId}\n            $stretch={stretch}\n            {...otherProps}\n        >\n            {children}\n        </StyledSection>\n    );\n};\n\nexport const Section = React.forwardRef(Component);\n\ninterface StyleProps {\n    $stretch: boolean;\n}\n\nconst StyledSection = styled.section<StyleProps>`\n    display: block;\n    position: relative;\n`;\n"],"names":["Section","React","forwardRef","props","ref","children","testId","stretch","otherProps","_jsx","StyledSection","Object","assign","$stretch","styled","section"],"mappings":"+NAKA,MAuBaA,EAAUC,EAAAA,QAAMC,YAvBX,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,UAASC,QACjCA,GAAU,GAEVJ,EADGK,WACHL,EALE,CAAA,WAAA,cAAA,YAON,OACIM,EAAAA,IAACC,EAAaC,OAAAC,OAAA,CACVR,IAAKA,EAAG,cACKE,EAAMO,SACTN,GACNC,YAEHH,IACW,IAUlBK,EAAgBI,EAAAA,QAAOC,OAAmB;;;"}
+{"version":3,"file":"section.js","sources":["../../../src/layout/section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./section.styles\";\nimport type { SectionProps } from \"./types\";\n\nconst Component = (\n    props: SectionProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"section\",\n        className,\n        stretch = false,\n        ...otherProps\n    } = props;\n\n    return (\n        <section\n            ref={ref}\n            data-testid={testId}\n            className={clsx(\n                styles.section,\n                className,\n                stretch && styles.sectionStretched\n            )}\n            {...otherProps}\n        >\n            {children}\n        </section>\n    );\n};\n\nexport const Section = React.forwardRef(Component);\n"],"names":["Section","React","forwardRef","props","ref","children","testId","className","stretch","otherProps","_jsx","Object","assign","clsx","styles.section","styles.sectionStretched"],"mappings":"4OAMA,MA4BaA,OAAUC,QAAMC,YA5BX,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,UAASC,UACjCA,EAASC,QACTA,GAAU,GAEVL,EADGM,WACHN,EANE,CAAA,WAAA,cAAA,YAAA,YAQN,OACIO,EAAAA,IAAA,UAAAC,OAAAC,OAAA,CACIR,IAAKA,EAAG,cACKE,EACbC,UAAWM,EAAAA,QACPC,UACAP,EACAC,GAAWO,qBAEXN,EAAU,CAAAJ,SAEbA,IACK"}

package/cjs/layout/section.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./section.styles_hstcaf.css");exports.section="szyy60j",exports.sectionStretched="sp7b31y";
+//# sourceMappingURL=section.styles.js.map

package/cjs/layout/section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.styles.js","sources":["../../../src/layout/section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    stretch: \"--fds-internal-section-stretch\",\n};\n\nexport const section = css`\n    display: block;\n    position: relative;\n`;\n\nexport const sectionStretched = css``;\n"],"names":[],"mappings":"0FAMoB,mCAKS"}

package/cjs/layout/section.styles_hstcaf.css

@@ -0,0 +1,2 @@
+@layer fds{.szyy60j{display:block;position:relative;}}
+

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 * as styles from \"../link-list.styles\";\nimport type { LinkListItemProps, LinkListStyle } from \"../types\";\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");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(),p=x.ref,[b]=t.useState((()=>n.SimpleIdGenerator.generate())),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:b,style:w,"data-testid":"minimised-content",inert:r.inertValue(!h),children:e.jsx(l.ExpandableChild,{ref:p,$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":b,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 { SimpleIdGenerator } 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] = useState(() => SimpleIdGenerator.generate());\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","SimpleIdGenerator","generate","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":"+dAwB6B,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,KAEzBC,GAAMR,EAAAA,UAAS,IAAMS,EAAAA,kBAAkBC,aAKxCC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNhB,IACPgB,EAAMG,iBACNnB,EAAYiB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BjB,GAAkBD,EAAc,EAgC9BmB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQrB,EAAgBM,EAAee,OAAS,IAGpD,OACIC,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,6BACe,wBACZ7B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C8B,gBAAiBZ,EACjBhB,MAAOA,IAEVO,EAAeD,OAAS,GACrBoB,EAAAA,IAACG,EAAAA,WAAU,CACPhB,GAAIA,EACJb,MAAOsB,EAAgB,cACX,oBACZQ,MAAOC,EAAAA,YAAY5B,GAAc6B,SAEjCN,EAAAA,IAACO,EAAAA,gBAAe,CAACrB,IAAKD,sBAClBe,EAAAA,IAACC,EAAAA,cAAa,CAAA,cACE,4BACZ3B,MAAOA,EACPF,MAAOS,EACPqB,gBAAiBZ,QAKhCT,EAAeD,OAAS,GAtD7BmB,OAACS,EAAAA,aAAY,CACTC,KAAK,SACLhB,QAASE,EAAuB,cACpB,gBAAe,gBACZlB,kBACAU,EAAEmB,SAAA,CAEjBN,EAAAA,IAACU,EAAAA,mBACGC,YAAY,OACZC,OAAO,WAAU,cACL,+BAEXnC,GACKD,eAAAA,EAAcqC,WAAY,aAC1BrC,aAAY,EAAZA,EAAcsC,WAAY,cAEnCrC,EACGuB,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 * as styles from \"../link-list.styles\";\nimport type {\n    LinkListBaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../types\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<LinkListBaseProps<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"),t=require("react/jsx-runtime"),r=require("@react-spring/web"),i=require("react"),s=require("../../external/react-resize-detector/build/index.esm.js"),n=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/string-helper.js");var a=require("../link-list.styles.js"),l=require("./common.js");exports.LazyLinkList=({items:d,style:u,onItemClick:c,loadMore:m,onLoadMore:h,customLabels:j})=>{const[g,p]=i.useState(!1),q=s.useResizeDetector(),x=q.ref,b=()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(!g){p(!0);try{yield h()}catch(e){}p(!1)}})),k=r.useSpring({height:q.height});return t.jsxs(t.Fragment,{children:[t.jsx(a.Expandable,{style:k,"data-testid":"content",children:t.jsx(a.ExpandableChild,{ref:x,children:t.jsx(l.LinkListItems,{"data-testid":"link-list-items",items:d,handleItemClick:(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):c&&(e.preventDefault(),c(t,e))},style:u})})}),m&&(()=>{const e=g?"Loading...":(null==j?void 0:j.viewMore)||"View more";return t.jsxs(a.ToggleButton,{type:"button",onClick:b,"data-testid":"toggle-button","aria-disabled":g,$loading:g,children:[t.jsx(a.ToggleButtonLabel,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":g,children:e}),g?t.jsx(n.ComponentLoadingSpinner,{color:o.Colour["text-disabled"]}):t.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":"0vBAuB4B,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 * as styles from \"../link-list.styles\";\nimport type {\n    LinkListBaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../types\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<LinkListBaseProps<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\n// @catalog\n/**\n * A list of anchor links with optional truncation or lazy loading.\n *\n * Use `LinkList` to display a set of navigable links with titles and optional\n * descriptions.\n * @keywords links, navigation\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":"qUAe6BA,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_m57vks.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.375rem;\n    width: 1.375rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const itemTitleDefault = css`\n    color: ${Colour[\"text-primary\"]};\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":"iGAIsB,6BAsDC,kCAII,iCApCD,wCAkBO,mCAOL,2BAvCP,mCAMQ,iCAIF,+BAsDF,oCANI,qCAJC,sCA8BE"}

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

@@ -0,0 +1,13 @@
+@layer fds{.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.375rem;width:1.375rem;color:var(--fds-colour-icon-primary);}
+.ixxi28v{color:var(--fds-colour-text-primary);}
+.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;}}

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

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