@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/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/layout/content.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { ContentProps } from "./types";
+import type { ContentProps } from "./types";
 export declare const Content: (props: ContentProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/layout/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","sources":["../../src/layout/content.tsx"],"sourcesContent":["import React from \"react\";\nimport { Container } from \"./container\";\nimport { ContentProps } from \"./types\";\nimport { Section } from \"./section\";\n\nconst Component = (\n    props: ContentProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"content\",\n        className,\n        type = \"flex\",\n        stretch = false,\n        ...otherProps\n    } = props;\n\n    return (\n        <Section\n            ref={ref}\n            data-testid={testId}\n            className={className}\n            stretch={stretch}\n            {...otherProps}\n        >\n            <Container\n                data-testid={`${testId}-container`}\n                type={type}\n                data-id=\"container\"\n                stretch={stretch}\n            >\n                {children}\n            </Container>\n        </Section>\n    );\n};\n\nexport const Content = React.forwardRef(Component);\n"],"names":["Content","React","forwardRef","props","ref","children","testId","className","type","stretch","otherProps","__rest","_jsx","Section","Container"],"mappings":"8LAKA,MAiCaA,EAAUC,EAAMC,YAjCX,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,UAASC,UACjCA,EAASC,KACTA,EAAO,OAAMC,QACbA,GAAU,GAEVN,EADGO,EAAUC,EACbR,EAPE,CAAA,WAAA,cAAA,YAAA,OAAA,YASN,OACIS,EAACC,iBACGT,IAAKA,EAAG,cACKE,EACbC,UAAWA,EACXE,QAASA,GACLC,EAAU,CAAAL,SAEdO,EAACE,iBACgB,GAAGR,cAChBE,KAAMA,EAAI,UACF,YACRC,QAASA,EAAOJ,SAEfA,MAEC"}
+{"version":3,"file":"content.js","sources":["../../src/layout/content.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Container } from \"./container\";\nimport { Section } from \"./section\";\nimport type { ContentProps } from \"./types\";\n\nconst Component = (\n    props: ContentProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        children,\n        \"data-testid\": testId = \"content\",\n        className,\n        type = \"flex\",\n        stretch = false,\n        ...otherProps\n    } = props;\n\n    return (\n        <Section\n            ref={ref}\n            data-testid={testId}\n            className={className}\n            stretch={stretch}\n            {...otherProps}\n        >\n            <Container\n                data-testid={`${testId}-container`}\n                type={type}\n                data-id=\"container\"\n                stretch={stretch}\n            >\n                {children}\n            </Container>\n        </Section>\n    );\n};\n\nexport const Content = React.forwardRef(Component);\n"],"names":["Content","React","forwardRef","props","ref","children","testId","className","type","stretch","otherProps","__rest","_jsx","Section","Container"],"mappings":"8LAMA,MAiCaA,EAAUC,EAAMC,YAjCX,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,UAASC,UACjCA,EAASC,KACTA,EAAO,OAAMC,QACbA,GAAU,GAEVN,EADGO,EAAUC,EACbR,EAPE,CAAA,WAAA,cAAA,YAAA,OAAA,YASN,OACIS,EAACC,iBACGT,IAAKA,EAAG,cACKE,EACbC,UAAWA,EACXE,QAASA,GACLC,EAAU,CAAAL,SAEdO,EAACE,iBACgB,GAAGR,cAChBE,KAAMA,EAAI,UACF,YACRC,QAASA,EAAOJ,SAEfA,MAEC"}

package/layout/index.d.ts

@@ -1,7 +1,22 @@
+/**
+ * A set of structural layout primitives for composing page regions.
+ *
+ * Use `Layout` sub-components to establish full-width page sections, centred
+ * content areas, and responsive grid columns. Sub-components:
+ * - `Layout.ColDiv` — a `<div>` that occupies a responsive column span within a grid `Container`.
+ * - `Layout.Container` — a flex or grid layout wrapper constrained to the content width.
+ * - `Layout.Content` — the primary content block, composes of `Section` + `Container`. Use `Section` and `Container` directly for more granular control.
+ * - `Layout.Section` — a full-width semantic `<section>` page region.
+ * @keywords column, container, grid, page, region, responsive, section
+ */
 export declare const Layout: {
-    Section: (props: import("./types").SectionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders a `<div>` that occupies a responsive column span within a grid `Container`. */
+    ColDiv: (props: import("./types").ColDivProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders a flex or grid layout wrapper constrained to the content width. */
     Container: (props: import("./types").ContainerProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** The primary content block — composes a `Section` with an inner `Container`. */
     Content: (props: import("./types").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    ColDiv: (props: import("./types").ColDivProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    /** Renders a full-width semantic `<section>` page region. */
+    Section: (props: import("./types").SectionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 };
 export * from "./types";

package/layout/index.js

@@ -1,2 +1,2 @@
-import{ColDiv as o}from"./col-div.js";import{Container as t}from"./container.js";import{Content as n}from"./content.js";import{Section as r}from"./section.js";const i={Section:r,Container:t,Content:n,ColDiv:o};export{i as Layout};
+import{ColDiv as o}from"./col-div.js";import{Container as t}from"./container.js";import{Content as n}from"./content.js";import{Section as r}from"./section.js";const i={ColDiv:o,Container:t,Content:n,Section:r};export{i as Layout};
 //# sourceMappingURL=index.js.map

package/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    Section: Section,\n    Container: Container,\n    Content: Content,\n    ColDiv: ColDiv,\n};\n\nexport * from \"./types\";\n"],"names":["Layout","Section","Container","Content","ColDiv"],"mappings":"+JAKO,MAAMA,EAAS,CAClBC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTC,OAAQA"}
+{"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":"+JAiBO,MAAMA,EAAS,CAElBC,SAEAC,YAEAC,UAEAC"}

package/layout/section.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { SectionProps } from "./types";
+import type { SectionProps } from "./types";
 export declare const Section: (props: SectionProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/layout/section.js

@@ -1,5 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import e from"react";import i from"styled-components";const o=e.forwardRef(((e,i)=>{const{children:o,"data-testid":c="section",stretch:a=!1}=e,n=t(e,["children","data-testid","stretch"]);return r(s,Object.assign({ref:i,"data-testid":c,$stretch:a},n,{children:o}))})),s=i.section`
-    display: block;
-    position: relative;
-`;export{o as Section};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import s from"clsx";import e from"react";import{section as i,sectionStretched as a}from"./section.styles.js";const c=e.forwardRef(((e,c)=>{const{children:o,"data-testid":m="section",className:n,stretch:d=!1}=e,l=t(e,["children","data-testid","className","stretch"]);return r("section",Object.assign({ref:c,"data-testid":m,className:s(i,n,d&&a)},l,{children:o}))}));export{c as Section};
 //# sourceMappingURL=section.js.map

package/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\";\nimport { 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":"6IAIA,MAuBaA,EAAUC,EAAMC,YAvBX,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,UAASC,QACjCA,GAAU,GAEVJ,EADGK,IACHL,EALE,CAAA,WAAA,cAAA,YAON,OACIM,EAACC,EAAaC,OAAAC,OAAA,CACVR,IAAKA,EAAG,cACKE,EAAMO,SACTN,GACNC,YAEHH,IACW,IAUlBK,EAAgBI,EAAOC,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":"oMAMA,MA4BaA,EAAUC,EAAMC,YA5BX,CACdC,EACAC,KAEA,MAAMC,SACFA,EACA,cAAeC,EAAS,UAASC,UACjCA,EAASC,QACTA,GAAU,GAEVL,EADGM,IACHN,EANE,CAAA,WAAA,cAAA,YAAA,YAQN,OACIO,EAAA,UAAAC,OAAAC,OAAA,CACIR,IAAKA,EAAG,cACKE,EACbC,UAAWM,EACPC,EACAP,EACAC,GAAWO,IAEXN,EAAU,CAAAJ,SAEbA,IACK"}

package/layout/section.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const tokens: {
+    stretch: string;
+};
+export declare const section: import("@linaria/core").LinariaClassName;
+export declare const sectionStretched: import("@linaria/core").LinariaClassName;

package/layout/section.styles.js

@@ -0,0 +1,2 @@
+import"./section.styles_hstcaf.css";const s="szyy60j",t="sp7b31y";export{s as section,t as sectionStretched};
+//# sourceMappingURL=section.styles.js.map

package/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":["section","sectionStretched"],"mappings":"0DAMO,MAAMA,EAAO,UAKPC,EAAgB"}

package/layout/section.styles_hstcaf.css

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

package/layout/types.d.ts

@@ -1,34 +1,89 @@
-import { DefaultTheme } from "styled-components";
-import { AddOne, Range } from "../util/utility-types";
+/**
+ * Common props shared by all layout components.
+ */
 interface CommonLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     "data-testid"?: string | undefined;
+    /**
+     * Stretches the element to fill its container's full width.
+     *
+     * @default false
+     */
     stretch?: boolean | undefined;
 }
+/** Layout display mode applied to a `Container` or `Content`. */
 export type ContainerType = "flex" | "flex-column" | "grid";
+/**
+ * Props for the `Layout.Container` sub-component.
+ */
 export interface ContainerProps extends CommonLayoutProps {
-    /** The type of display style. Values: "flex" | "flex-column" | "grid" */
+    /**
+     * Display mode applied to the container.
+     *
+     * @default "flex"
+     */
     type?: ContainerType | undefined;
 }
+/**
+ * Props for the `Layout.Section` sub-component.
+ */
 export interface SectionProps extends CommonLayoutProps {
 }
+/**
+ * Props for the `Layout.Content` sub-component.
+ */
 export interface ContentProps extends ContainerProps {
 }
-export type ColSpan<Max extends number | undefined> = Max extends number ? Range<Max> | [Range<AddOne<Max>>, Range<AddOne<Max>> | -1] | undefined : number | [number, number] | undefined;
-export type BreakpointSpan<Breakpoint extends keyof DefaultTheme["maxColumns"]> = DefaultTheme["maxColumns"] extends Record<Breakpoint, infer Max extends number> ? ColSpan<Max> : number | [number, number] | undefined;
+/**
+ * Column span value for a `ColDiv` at a given breakpoint.
+ *
+ * - A `number` specifies the number of columns to span.
+ * - A `[start, end]` tuple specifies the start and end column lines. Use `-1`
+ *   as the end value to span to the last column line of the grid.
+ */
+export type ColSpan = number | [number, number] | undefined;
+/**
+ * Responsive column placement props.
+ *
+ * Each prop controls the column span at the corresponding breakpoint. When a
+ * breakpoint prop is omitted, it falls back to the next smaller breakpoint's
+ * value (xxl → xl → lg → md → sm → xs → xxs).
+ */
 export interface ColProps {
     /**
-     * Specifies the number of columns to be spanned across for any breakpoint.
-     * If an array is specified, the format is [startCol, endCol].
+     * Column span at the `xxl` breakpoint.
+     */
+    xxlCols?: ColSpan;
+    /**
+     * Column span at the `xl` breakpoint.
+     */
+    xlCols?: ColSpan;
+    /**
+     * Column span at the `lg` breakpoint.
+     */
+    lgCols?: ColSpan;
+    /**
+     * Column span at the `md` breakpoint.
+     */
+    mdCols?: ColSpan;
+    /**
+     * Column span at the `sm` breakpoint.
+     */
+    smCols?: ColSpan;
+    /**
+     * Column span at the `xs` breakpoint.
+     */
+    xsCols?: ColSpan;
+    /**
+     * Column span at the `xxs` (smallest) breakpoint.
+     * Acts as the base value. All larger breakpoints fall back to this when
+     * their own prop is not set.
      */
-    xxlCols?: BreakpointSpan<"xxl">;
-    xlCols?: BreakpointSpan<"xl">;
-    lgCols?: BreakpointSpan<"lg">;
-    mdCols?: BreakpointSpan<"md">;
-    smCols?: BreakpointSpan<"sm">;
-    xsCols?: BreakpointSpan<"xs">;
-    xxsCols?: BreakpointSpan<"xxs">;
+    xxsCols?: ColSpan;
 }
+/**
+ * Props for the `Layout.ColDiv` sub-component.
+ */
 export interface ColDivProps extends React.HTMLAttributes<HTMLDivElement>, ColProps {
     "data-testid"?: string;
 }

package/link-list/components/common.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { LinkListItemProps, LinkListStyle } from "../internal-types";
+import type React from "react";
+import type { LinkListItemProps, LinkListStyle } from "../types";
 type LinkListItemsProps<T> = {
     "data-testid"?: string | undefined;
     items: LinkListItemProps<T>[];

package/link-list/components/common.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../src/link-list/components/common.tsx"],"sourcesContent":["import React from \"react\";\nimport { 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":["LinkListItems","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":"4QAoBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EAAsB,UAAVD,EAAoBE,EAAiBC,EAEvD,OACIC,EAAAC,EAAA,CAAAC,SACKR,EAAMS,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,GAETN,EADGO,EAAUC,EACbR,EANE,CAAA,QAAA,cAAA,uBAAA,YAQN,OACIS,EAACC,EAAaC,OAAAC,OAAA,CAAA,cAEG,GAAGvB,KAAUY,IAC1BI,QAAUQ,GAAUtB,EAAgBsB,EAAOb,IACvCO,EAAU,CAAAT,SAAA,CAEdW,EAACK,EAAoB,CAAAhB,SAAA,CACjBF,EAACH,EAAS,CACNsB,YAAY,MAAK,cACJ,cAAcd,IAC3Be,OAAO,WAAUlB,SAEhBI,IAEJC,GACGP,EAACqB,EAAW,CAAA,cACK,oBAAoBhB,IAAOH,SAEvCK,IAGRC,KAELR,EAACsB,EAAQ,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":["LinkListItems","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":"gaAiBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAWC,UAAYD,EAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAwBC,EAEhD,OACIC,EAAAC,EAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,IACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,mCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAKC,EAAsBL,GAAUT,SAAA,CAEhDW,EAAA,MAAA,CAAKF,UAAWM,EAA2Bf,SAAA,CACvCF,EAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAACN,EAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,EAAsBnB,SAEhCK,IAGRC,KAELR,EAACsB,EAAgB,CAAA,eAAA,EAEbX,UAAWY,OA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}

package/link-list/components/link-list-eager.d.ts

@@ -1,4 +1,4 @@
-import { BaseProps, LinkListEagerProps } from "../internal-types";
-type Props<T> = Omit<BaseProps<T>, "className" | "data-testid"> & Omit<LinkListEagerProps, "loadMode">;
+import type { LinkListBaseProps, LinkListEagerProps } from "../types";
+type Props<T> = Omit<LinkListBaseProps<T>, "className" | "data-testid"> & Omit<LinkListEagerProps, "loadMode">;
 export declare const EagerLinkList: <T>({ items, maxShown, style, onItemClick, customLabels, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/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 React, { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { inertValue } from \"../../shared/accessibility\";\nimport { useId } from \"../../util\";\nimport {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport {\n    Expandable,\n    ExpandableChild,\n    ToggleButton,\n    ToggleButtonLabel,\n    ViewLessIcon,\n    ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <ToggleButton\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n        >\n            <ToggleButtonLabel\n                forwardedAs=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </ToggleButtonLabel>\n            {showMinimised ? (\n                <ViewLessIcon aria-hidden />\n            ) : (\n                <ViewMoreIcon aria-hidden />\n            )}\n        </ToggleButton>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <Expandable\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                >\n                    <ExpandableChild ref={childRef} $border>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </ExpandableChild>\n                </Expandable>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["EagerLinkList","items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_jsx","LinkListItems","handleItemClick","Expandable","inert","inertValue","children","ExpandableChild","ToggleButton","type","ToggleButtonLabel","forwardedAs","weight","viewLess","viewMore","ViewLessIcon","ViewMoreIcon"],"mappings":"+tBAsBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,IAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAgC9BkB,EAAmBC,EAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,eACIC,EAACC,iBACe,wBACZ5B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C6B,gBAAiBZ,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBmB,EAACG,EAAU,CACPf,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZQ,MAAOC,GAAY3B,GAAc4B,SAEjCN,EAACO,EAAe,CAACpB,IAAKD,sBAClBc,EAACC,EAAa,CAAA,cACE,4BACZ1B,MAAOA,EACPF,MAAOS,EACPoB,gBAAiBZ,QAKhCR,EAAeD,OAAS,GAtD7BkB,EAACS,EAAY,CACTC,KAAK,SACLhB,QAASE,EAAuB,cACpB,gBAAe,gBACZjB,kBACAU,EAAEkB,SAAA,CAEjBN,EAACU,GACGC,YAAY,OACZC,OAAO,WAAU,cACL,+BAEXlC,GACKD,eAAAA,EAAcoC,WAAY,aAC1BpC,aAAY,EAAZA,EAAcqC,WAAY,cAGhCd,EADHtB,EACIqC,EAEAC,EAFY,CAAA,eAAA,SAsClB"}
+{"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":["EagerLinkList","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","PlusIcon","styles.toggleButtonIcon"],"mappings":"+1BAoBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,IAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAACG,EAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,GAAY9B,GACnB+B,UAAWC,WAEXR,EAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAqBV,SAChDC,EAACC,EAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAmBZ,SAAA,CAE9BC,EAACY,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAGhClB,EADHxB,EACI2C,EAEAC,EAFS,CAAA,eAAA,EAAab,UAAWc,SAuCvC"}

package/link-list/components/link-list-lazy.d.ts

@@ -1,4 +1,4 @@
-import { BaseProps, LinkListLazyProps } from "../internal-types";
-type Props<T> = Omit<BaseProps<T>, "className" | "data-testid"> & Omit<LinkListLazyProps, "loadMode">;
+import type { LinkListBaseProps, LinkListLazyProps } from "../types";
+type Props<T> = Omit<LinkListBaseProps<T>, "className" | "data-testid"> & Omit<LinkListLazyProps, "loadMode">;
 export declare const LazyLinkList: <T>({ items, style, onItemClick, loadMore, onLoadMore, customLabels, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/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 React, { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useSpring } from \"@react-spring/web\";\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport {\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\";\nimport { Colour } from \"../../theme\";\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":["LazyLinkList","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":"4mBAqBO,MAAMA,EAAe,EACxBC,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,GAAS,GAErCC,EAAiBC,IACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,OAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAqCMS,EAAmBC,EAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,eACIC,EAACC,GAAWpB,MAAOe,EAAgB,cAAc,mBAC7CI,EAACE,GAAgBV,IAAKD,EAAQY,SAC1BH,EAACI,EAAa,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,EAACa,EAAY,CACTC,KAAK,SACLL,QAASf,EAAmB,cAChB,gBAAe,gBACZP,EAAS4B,SACd5B,EAASiB,SAAA,CAEnBH,EAACe,EAAiB,CACdC,YAAY,OACZC,OAAO,yBACK,sBAAqB,YACtB/B,EAASiB,SAEnBO,IAGJxB,EACGc,EAACkB,EAAuB,CAACC,MAAOC,EAAO,mBAEvCpB,EAACqB,EAAY,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":["LazyLinkList","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":"msCAoBO,MAAMA,EAAe,EACxBC,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,GAAS,GAErCC,EAAiBC,IACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,OAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,eACIC,EAACC,EAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,WAEXJ,EAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAACM,EAAa,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,EAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,EACPC,EACA9B,GAAa+B,aAGjBjB,EAACkB,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,WAEVV,IAGJ1B,EACGc,EAACuB,EAAuB,CAACC,MAAOC,EAAO,mBAEvCzB,EAAC0B,oBAAqBvB,UAAWwB,MAEhC,EAyBIC,KACd"}

package/link-list/link-list.d.ts

@@ -1,2 +1,9 @@
-import { LinkListProps } from "./types";
+import type { LinkListProps } from "./types";
+/**
+ * A list of anchor links with optional truncation or lazy loading.
+ *
+ * Use `LinkList` to display a set of navigable links with titles and optional
+ * descriptions.
+ * @keywords links, navigation
+ */
 export declare const LinkList: <T>(props: LinkListProps<T>) => JSX.Element;

package/link-list/link-list.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsx as e,Fragment as t}from"react/jsx-runtime";import{EagerLinkList as s}from"./components/link-list-eager.js";import{LazyLinkList as l}from"./components/link-list-lazy.js";import{Container as m}from"./link-list.styles.js";const a=a=>{if(!a.loadMode||"eager"===a.loadMode){const{loadMode:t,items:l,style:i="default",onItemClick:n,maxShown:r,customLabels:d}=a,c=o(a,["loadMode","items","style","onItemClick","maxShown","customLabels"]);return e(m,Object.assign({},c,{children:e(s,{items:l,maxShown:r,style:i,onItemClick:n,customLabels:d})}))}if("lazy"===a.loadMode){const{loadMode:t,items:s,style:i="default",onItemClick:n,loadMore:r,onLoadMore:d,customLabels:c}=a,u=o(a,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels"]);return e(m,Object.assign({},u,{children:e(l,{items:s,style:i,onItemClick:n,loadMore:r,onLoadMore:d,customLabels:c})}))}return e(t,{})};export{a as LinkList};
+import{__rest as o}from"../_virtual/_tslib.js";import{jsx as e,Fragment as s}from"react/jsx-runtime";import t from"clsx";import{EagerLinkList as l}from"./components/link-list-eager.js";import{LazyLinkList as a}from"./components/link-list-lazy.js";import{container as m}from"./link-list.styles.js";const i=i=>{if(!i.loadMode||"eager"===i.loadMode){const{loadMode:s,items:a,style:r="default",onItemClick:n,maxShown:c,customLabels:d,className:u}=i,M=o(i,["loadMode","items","style","onItemClick","maxShown","customLabels","className"]);return e("div",Object.assign({},M,{className:t(m,u),children:e(l,{items:a,maxShown:c,style:r,onItemClick:n,customLabels:d})}))}if("lazy"===i.loadMode){const{loadMode:s,items:l,style:r="default",onItemClick:n,loadMore:c,onLoadMore:d,customLabels:u,className:M}=i,f=o(i,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels","className"]);return e("div",Object.assign({},f,{className:t(m,M),children:e(a,{items:l,style:r,onItemClick:n,loadMore:c,onLoadMore:d,customLabels:u})}))}return e(s,{})};export{i as LinkList};
 //# sourceMappingURL=link-list.js.map

package/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 { 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":["LinkList","props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","otherProps","__rest","_jsx","Container","Object","assign","children","EagerLinkList","loadMore","onLoadMore","LazyLinkList"],"mappings":"qRAKO,MAAMA,EAAgBC,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,EACbT,EARE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,iBAUN,OACIU,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,EAACK,EAAa,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,EACbT,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,iBAWN,OACIU,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,EAACQ,EAAY,CACTf,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbW,SAAUA,EACVC,WAAYA,EACZV,aAAcA,MAI9B,CAGJ,OAAOG,OAAK"}
+{"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":["LinkList","props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"ySAeO,MAAMA,EAAgBC,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,EACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAKC,EAAkBP,YACnDG,EAACK,GACGb,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,EACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,yBACQF,EAAU,CACdD,UAAWM,EAAKC,EAAkBP,GAAUW,SAE5CR,EAACS,EAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,OAAK"}

package/link-list/link-list.styles.d.ts

@@ -1,81 +1,13 @@
-interface ExpandableChildStyleProps {
-    $border?: boolean;
-}
-interface ToggleButtonStyleProps {
-    $loading?: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ItemTitleDefault: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const ItemTitleSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const ItemIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
-export declare const ItemContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const Expandable: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string>;
-export declare const ExpandableChild: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$border"> & ExpandableChildStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$border"> & ExpandableChildStyleProps, never>>> & string;
-export declare const ToggleButtonLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-} & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const ViewMoreIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ViewLessIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$loading"> & ToggleButtonStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$loading"> & ToggleButtonStyleProps, never>>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const itemIcon: import("@linaria/core").LinariaClassName;
+export declare const itemTitleDefault: import("@linaria/core").LinariaClassName;
+export declare const itemTitleSmall: import("@linaria/core").LinariaClassName;
+export declare const itemContainer: import("@linaria/core").LinariaClassName;
+export declare const itemContentContainer: import("@linaria/core").LinariaClassName;
+export declare const itemDescription: import("@linaria/core").LinariaClassName;
+export declare const expandable: import("@linaria/core").LinariaClassName;
+export declare const expandableList: import("@linaria/core").LinariaClassName;
+export declare const toggleButtonLabel: import("@linaria/core").LinariaClassName;
+export declare const toggleButtonIcon: import("@linaria/core").LinariaClassName;
+export declare const toggleButton: import("@linaria/core").LinariaClassName;
+export declare const toggleButtonLoading: import("@linaria/core").LinariaClassName;