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

package/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import {\n    BodyCell,\n    BodyRow,\n    HeaderCell,\n    TableBody,\n    TableComponent,\n    TableWrapper,\n} from \"./table.styles\";\n\nconst Head = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <TableBody {...props}>{children}</TableBody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({\n    children,\n    ...props\n}: React.HTMLAttributes<HTMLTableRowElement>) => (\n    <BodyRow {...props}>{children}</BodyRow>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({\n    children,\n    ...props\n}: React.TdHTMLAttributes<HTMLTableCellElement>) => (\n    <BodyCell {...props}>{children}</BodyCell>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({\n    children,\n    ...props\n}: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <HeaderCell {...props}>{children}</HeaderCell>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nexport const Table = Object.assign(\n    ({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => (\n        <TableWrapper>\n            <TableComponent {...props}>{children}</TableComponent>\n        </TableWrapper>\n    ),\n    {\n        Container: TableWrapper,\n        Table: TableComponent,\n        Head,\n        Body,\n        Row,\n        Cell,\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","TableBody","Row","BodyRow","Cell","BodyCell","Header","HeaderCell","Table","TableWrapper","TableComponent","Container"],"mappings":"sNASA,MAAMA,EAAQC,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGuC,OACjDI,EAACK,EAASJ,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAqB,EAEhDO,EAAKD,YAAc,aAEnB,MAAMG,EAAOV,IAAA,IAAAC,SACTA,GAAQD,EACLE,EAAKC,EAAAH,EAFC,cAGoC,OAC7CI,EAACO,EAAON,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAmB,EAE5CS,EAAIH,YAAc,YAElB,MAAMK,EAAQZ,IAAA,IAAAC,SACVA,GAAQD,EACLE,EAAKC,EAAAH,EAFE,cAGsC,OAChDI,EAACS,EAAQR,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAoB,EAE9CW,EAAKL,YAAc,aAEnB,MAAMO,EAAUd,IAAA,IAAAC,SACZA,GAAQD,EACLE,EAAKC,EAAAH,EAFI,cAGoC,OAChDI,EAACW,EAAUV,OAAAC,OAAA,GAAKJ,EAAK,CAAAD,SAAGA,IAAsB,EAElDa,EAAOP,YAAc,mBAEd,MAAMS,EAAQX,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAAwE,OACrEI,EAACa,EAAY,CAAAhB,SACTG,EAACc,EAAcb,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACjB,GAEnB,CACIkB,UAAWF,EACXD,MAAOE,EACPnB,OACAS,OACAE,MACAE,OACAG,WAAYD"}
+{"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./table.styles\";\nimport type {\n    TableBodyProps,\n    TableCellProps,\n    TableContainerProps,\n    TableHeaderProps,\n    TableHeadProps,\n    TableRowProps,\n    TableTableProps,\n} from \"./types\";\n\nconst Head = ({ children, ...props }: TableHeadProps) => (\n    <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({ children, className, ...props }: TableBodyProps) => (\n    <tbody className={clsx(styles.tableBody, className)} {...props}>\n        {children}\n    </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({ children, className, ...props }: TableRowProps) => (\n    <tr className={clsx(styles.bodyRow, className)} {...props}>\n        {children}\n    </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({ children, className, ...props }: TableCellProps) => (\n    <td className={clsx(styles.bodyCell, className)} {...props}>\n        {children}\n    </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({ children, className, ...props }: TableHeaderProps) => (\n    <th className={clsx(styles.headerCell, className)} {...props}>\n        {children}\n    </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({ children, className, ...props }: TableContainerProps) => (\n    <div\n        className={clsx(styles.tableWrapper, className)}\n        data-testid=\"table-wrapper\"\n        {...props}\n    >\n        {children}\n    </div>\n);\nContainer.displayName = \"Table.Container\";\n\nconst TableEl = ({ children, className, ...props }: TableTableProps) => (\n    <table className={clsx(styles.tableComponent, className)} {...props}>\n        {children}\n    </table>\n);\nTableEl.displayName = \"Table.Table\";\n\n// @catalog\n/**\n * A styled HTML table with a scrollable container wrapper.\n *\n * Use `Table` when displaying structured tabular data. The default export\n * wraps content in `Table.Container` and `Table.Table` automatically. For\n * full layout control, compose the sub-components directly:\n * - `Table.Container` — scrollable wrapper div\n * - `Table.Table` — the bare `<table>` element\n * - `Table.Head` — the `<thead>` section\n * - `Table.Body` — the `<tbody>` section\n * - `Table.Row` — a `<tr>` row within the body\n * - `Table.Cell` — a `<td>` data cell\n * - `Table.HeaderCell` — a `<th>` column header cell\n * @keywords data, grid, rows, tabular\n */\nexport const Table = Object.assign(\n    ({ children, ...props }: TableTableProps) => (\n        <Container>\n            <TableEl {...props}>{children}</TableEl>\n        </Container>\n    ),\n    {\n        /** Scrollable wrapper div that contains a `Table.Table`. */\n        Container,\n        /** The bare `<table>` element. Use directly when you need to place the table inside a custom container. */\n        Table: TableEl,\n        /** Renders the `<thead>` section of the table. */\n        Head,\n        /** Renders the `<tbody>` section of the table. */\n        Body,\n        /** Renders a `<tr>` row within a `Table.Body`. */\n        Row,\n        /** Renders a `<td>` data cell within a `Table.Row`. */\n        Cell,\n        /** Renders a `<th>` header cell within a `Table.Head` row. */\n        HeaderCell: Header,\n    }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"0OAaA,MAAMA,EAAQC,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA2C,OACrDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAqD,OAC9DI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAwD,OACpEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAA2D,OAC1EI,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAuD,OACpEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAkBf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA4C,OACzCI,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CAEIiB,YAEAI,MAAOF,EAEPrB,OAEAS,OAEAI,MAEAE,OAEAS,WAAYP"}

package/table/table.styles.d.ts

@@ -1,6 +1,6 @@
-export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TableComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
-export declare const TableBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;
-export declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
-export declare const BodyRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
-export declare const BodyCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const tableWrapper: import("@linaria/core").LinariaClassName;
+export declare const tableComponent: import("@linaria/core").LinariaClassName;
+export declare const tableBody: import("@linaria/core").LinariaClassName;
+export declare const headerCell: import("@linaria/core").LinariaClassName;
+export declare const bodyRow: import("@linaria/core").LinariaClassName;
+export declare const bodyCell: import("@linaria/core").LinariaClassName;

package/table/table.styles.js

@@ -1,59 +1,2 @@
-import e from"styled-components";import{V3_Colour as r,V3_Border as o,V3_Radius as d,V3_Spacing as t}from"../v3_theme/index.js";const i=r.border,l=r.text,a=e.div`
-    overflow: auto;
-    border: ${o["width-010"]} ${o.solid} ${i};
-    border-radius: ${d.md};
-
-    // Hide scrollbar
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    * {
-        -ms-overflow-style: none; /* IE and Edge */
-        scrollbar-width: none; /* Firefox */
-    }
-`;a.displayName="Table.Container";const n=e.table`
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    width: 100%;
-`;n.displayName="Table.Table";const s=e.tbody`
-    :where(tr:last-child) {
-        td {
-            border-bottom: none;
-        }
-    }
-`,c=e.th`
-    padding: ${t["spacing-20"]} ${t["spacing-16"]};
-    text-align: left;
-    cursor: default;
-    vertical-align: middle;
-    color: ${l};
-    background-color: ${r["bg-stronger"]};
-    height: 6rem;
-    border-bottom: ${o["width-010"]} ${o.solid}
-        ${i};
-
-    &:where(&:first-child) {
-        padding-left: ${t["spacing-24"]};
-    }
-    &:where(&:last-child) {
-        padding-right: ${t["spacing-24"]};
-    }
-`,g=e.tr`
-    background-color: ${r.bg};
-    border-top: ${o["width-010"]} ${o.solid} ${i};
-`,b=e.td`
-    padding: ${t["spacing-20"]} ${t["spacing-16"]};
-    vertical-align: middle;
-    color: ${l};
-    border-bottom: ${o["width-010"]} ${o.solid}
-        ${i};
-
-    &:where(&:first-child) {
-        padding-left: ${t["spacing-24"]};
-    }
-    &:where(&:last-child) {
-        padding-right: ${t["spacing-24"]};
-    }
-`;export{b as BodyCell,g as BodyRow,c as HeaderCell,s as TableBody,n as TableComponent,a as TableWrapper};
+import"./table.styles_1vjx31g.css";const t="txzjt0s",s="t110f2kz",e="tdex3lc",b="htqww2s",l="b1gaqki2",x="b183mjh5";export{x as bodyCell,l as bodyRow,b as headerCell,e as tableBody,s as tableComponent,t as tableWrapper};
 //# sourceMappingURL=table.styles.js.map

package/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Border, V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = V3_Colour[\"border\"];\nconst fontColor = V3_Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n    overflow: auto;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n    border-radius: ${V3_Radius[\"md\"]};\n\n    // Hide scrollbar\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nTableWrapper.displayName = \"Table.Container\";\n\nexport const TableComponent = styled.table`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nTableComponent.displayName = \"Table.Table\";\n\nexport const TableBody = styled.tbody`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const HeaderCell = styled.th`\n    padding: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${V3_Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${V3_Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${V3_Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const BodyRow = styled.tr`\n    background-color: ${V3_Colour[\"bg\"]};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n`;\n\nexport const BodyCell = styled.td`\n    padding: ${V3_Spacing[\"spacing-20\"]} ${V3_Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${V3_Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${V3_Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["borderColor","V3_Colour","fontColor","TableWrapper","styled","div","V3_Border","V3_Radius","displayName","TableComponent","table","TableBody","tbody","HeaderCell","th","V3_Spacing","BodyRow","tr","BodyCell","td"],"mappings":"gIAOA,MAAMA,EAAcC,EAAkB,OAChCC,EAAYD,EAAgB,KAKrBE,EAAeC,EAAOC,GAAG;;cAExBC,EAAU,gBAAgBA,EAAiB,SAAKN;qBACzCO,EAAc;;;;;;;;;;EAYnCJ,EAAaK,YAAc,kBAEpB,MAAMC,EAAiBL,EAAOM,KAAK;;;;;EAO1CD,EAAeD,YAAc,cAEtB,MAAMG,EAAYP,EAAOQ,KAAK;;;;;;EAQxBC,EAAaT,EAAOU,EAAE;eACpBC,EAAW,iBAAiBA,EAAW;;;;aAIzCb;wBACWD,EAAU;;qBAEbK,EAAU,gBAAgBA,EAAiB;UACtDN;;;wBAGce,EAAW;;;yBAGVA,EAAW;;EAIvBC,EAAUZ,EAAOa,EAAE;wBACRhB,EAAc;kBACpBK,EAAU,gBAAgBA,EAAiB,SAAKN;EAGrDkB,EAAWd,EAAOe,EAAE;eAClBJ,EAAW,iBAAiBA,EAAW;;aAEzCb;qBACQI,EAAU,gBAAgBA,EAAiB;UACtDN;;;wBAGce,EAAW;;;yBAGVA,EAAW;;"}
+{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const tableWrapper = css`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const tableComponent = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const tableBody = css`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const headerCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const bodyCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["tableWrapper","tableComponent","tableBody","headerCell","bodyRow","bodyCell"],"mappings":"wDAaO,MAAMA,EAAY,UAaZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}

package/table/table.styles_1vjx31g.css

@@ -0,0 +1,6 @@
+@layer fds{.txzjt0s{overflow:auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);scrollbar-width:none;-ms-overflow-style:none;}.txzjt0s::-webkit-scrollbar{display:none;}
+.t110f2kz{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
+.tdex3lc :where(tr:last-child) td{border-bottom:none;}
+.htqww2s{padding:var(--fds-spacing-20) var(--fds-spacing-16);text-align:left;cursor:default;vertical-align:middle;color:var(--fds-colour-text);background-color:var(--fds-colour-bg-stronger);height:6rem;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.htqww2s:where(.htqww2s:first-child){padding-left:var(--fds-spacing-24);}.htqww2s:where(.htqww2s:last-child){padding-right:var(--fds-spacing-24);}
+.b1gaqki2{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.b183mjh5{padding:var(--fds-spacing-20) var(--fds-spacing-16);vertical-align:middle;color:var(--fds-colour-text);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.b183mjh5:where(.b183mjh5:first-child){padding-left:var(--fds-spacing-24);}.b183mjh5:where(.b183mjh5:last-child){padding-right:var(--fds-spacing-24);}}

package/table/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Inherits props from [HTMLTableSectionElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement)
+ */
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Inherits props from [HTMLTableSectionElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement)
+ */
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Inherits props from [HTMLTableRowElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement)
+ */
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+/**
+ * Inherits props from [HTMLTableCellElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement)
+ */
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+}
+/**
+ * Inherits props from [HTMLTableCellElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement)
+ */
+export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+}
+/**
+ * Inherits props from [HTMLDivElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
+ */
+export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Inherits props from [HTMLTableElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement)
+ */
+export interface TableTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+}

package/tag/tag.d.ts

@@ -1,2 +1,8 @@
 import type { TagProps } from "./types";
+/**
+ * A compact label used to categorise or highlight content.
+ *
+ * Use `Tag` to display metadata such as status, category, or keyword.
+ * @keywords badge, label, status
+ */
 export declare const Tag: ({ type, colorType, children, interactive, icon, iconPosition, ...otherProps }: TagProps) => JSX.Element;

package/tag/tag.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i}from"react/jsx-runtime";import r from"react";import{Wrapper as o,Label as n}from"./tag.style.js";const c=c=>{var{type:l,colorType:a="black",children:s,interactive:m=!1,icon:p,iconPosition:d="left"}=c,h=e(c,["type","colorType","children","interactive","icon","iconPosition"]);return t(o,Object.assign({as:m?"button":"div",$type:l,$color:a,$interactive:m},h,{children:["left"===d&&p&&r.cloneElement(p,{"aria-hidden":!0}),i(n,{role:"presentation",children:s}),"right"===d&&p&&r.cloneElement(p,{"aria-hidden":!0})]}))};export{c as Tag};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import o from"clsx";import t from"react";import{wrapper as l,wrapperOutlineBlack as n,wrapperOutlinePrimary as c,wrapperOutlineBlue as a,wrapperOutlineRed as m,wrapperOutlineYellow as s,wrapperOutlineGreen as d,wrapperOutlineGrey as p,wrapperSolidBlack as y,wrapperSolidPrimary as b,wrapperSolidBlue as u,wrapperSolidRed as v,wrapperSolidYellow as f,wrapperSolidGreen as g,wrapperSolidGrey as h,wrapperInteractive as j,label as k}from"./tag.style.js";const x={solid:{grey:h,green:g,yellow:f,red:v,blue:u,primary:b,black:y},outline:{grey:p,green:d,yellow:s,red:m,blue:a,primary:c,black:n}},w=n=>{var c,{type:a,colorType:m="black",children:s,interactive:d=!1,icon:p,iconPosition:y="left"}=n,b=e(n,["type","colorType","children","interactive","icon","iconPosition"]);return r(d?"button":"div",Object.assign({className:o(l,null===(c=x[a])||void 0===c?void 0:c[m],d&&j)},b,{children:["left"===y&&p&&t.cloneElement(p,{"aria-hidden":!0}),i("div",{className:k,role:"presentation",children:s}),"right"===y&&p&&t.cloneElement(p,{"aria-hidden":!0})]}))};export{w as Tag};
 //# sourceMappingURL=tag.js.map

package/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label, Wrapper } from \"./tag.style\";\nimport type { TagProps } from \"./types\";\n\nexport const Tag = ({\n    type,\n    colorType = \"black\",\n    children,\n    interactive = false,\n    icon,\n    iconPosition = \"left\",\n    ...otherProps\n}: TagProps): JSX.Element => {\n    return (\n        <Wrapper\n            as={interactive ? \"button\" : \"div\"}\n            $type={type}\n            $color={colorType}\n            $interactive={interactive}\n            {...otherProps}\n        >\n            {iconPosition === \"left\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n            <Label role=\"presentation\">{children}</Label>\n            {iconPosition === \"right\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n        </Wrapper>\n    );\n};\n"],"names":["Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Wrapper","Object","assign","as","$type","$color","$interactive","React","cloneElement","_jsx","Label","role"],"mappings":"0KAKO,MAAMA,EAAOC,QAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAShB,OACIS,EAACC,EAAOC,OAAAC,OAAA,CACJC,GAAIT,EAAc,SAAW,MAAKU,MAC3Bb,EAAIc,OACHb,EAASc,aACHZ,GACVG,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAACC,EAAK,CAACC,KAAK,eAAclB,SAAEA,IACV,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}
+{"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./tag.style\";\nimport type { TagColorType, TagProps, TagType } from \"./types\";\n\nconst colorClassMap: Record<TagType, Record<TagColorType, string>> = {\n    solid: {\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n        black: styles.wrapperSolidBlack,\n    },\n    outline: {\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n        black: styles.wrapperOutlineBlack,\n    },\n};\n\n// @catalog\n/**\n * A compact label used to categorise or highlight content.\n *\n * Use `Tag` to display metadata such as status, category, or keyword.\n * @keywords badge, label, status\n */\nexport const Tag = ({\n    type,\n    colorType = \"black\",\n    children,\n    interactive = false,\n    icon,\n    iconPosition = \"left\",\n    ...otherProps\n}: TagProps): JSX.Element => {\n    const Element = interactive ? \"button\" : \"div\";\n\n    return (\n        <Element\n            className={clsx(\n                styles.wrapper,\n                colorClassMap[type]?.[colorType],\n                interactive && styles.wrapperInteractive\n            )}\n            {...otherProps}\n        >\n            {iconPosition === \"left\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label} role=\"presentation\">\n                {children}\n            </div>\n            {iconPosition === \"right\" &&\n                icon &&\n                React.cloneElement(icon, { \"aria-hidden\": true })}\n        </Element>\n    );\n};\n"],"names":["colorClassMap","solid","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","black","styles.wrapperSolidBlack","outline","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","styles.wrapperOutlineBlack","Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Object","assign","className","clsx","styles.wrapper","_b","styles.wrapperInteractive","React","cloneElement","_jsx","styles.label","role"],"mappings":"oiBAMA,MAAMA,EAA+D,CACjEC,MAAO,CACHC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,EACTC,MAAOC,GAEXC,QAAS,CACLd,KAAMe,EACNb,MAAOc,EACPZ,OAAQa,EACRX,IAAKY,EACLV,KAAMW,EACNT,QAASU,EACTR,MAAOS,IAWFC,EAAOC,WAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAWhB,OACIS,EAHYL,EAAc,SAAW,MAG7BM,OAAAC,OAAA,CACJC,UAAWC,EACPC,EACmB,QAAnBC,EAAAxC,EAAc0B,UAAK,IAAAc,OAAA,EAAAA,EAAGb,GACtBE,GAAeY,IAEfT,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAAA,MAAA,CAAKP,UAAWQ,EAAcC,KAAK,eAAclB,SAC5CA,IAEa,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}

package/tag/tag.style.d.ts

@@ -1,9 +1,17 @@
-import type { TagColorType, TagType } from "./types";
-interface StyleProps {
-    $type: TagType;
-    $color: TagColorType;
-    $interactive: boolean;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperInteractive: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidPrimary: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlinePrimary: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlack: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;

package/tag/tag.style.js

@@ -1,42 +1,2 @@
-import e,{css as r}from"styled-components";import{V3_Radius as o,V3_Font as t,V3_MediaQuery as s,V3_Colour as i,V3_Border as a}from"../v3_theme/index.js";const n=e.div`
-    border-radius: ${o.sm};
-    padding: 0.125rem 0.5rem;
-    width: fit-content;
-    max-width: 100%;
-    ${t["body-xs-semibold"]}
-    transition: all 200ms ease;
-    cursor: ${({$interactive:e})=>e?"pointer":"default"};
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-
-    svg {
-        flex-shrink: 0;
-    }
-
-    ${e=>{let o,t,s,n;if("solid"===e.$type)switch(s=i["text-inverse"],e.$color){case"grey":o=i["bg-inverse-subtler"],n=i["bg-inverse-hover"];break;case"green":o=i["bg-success-strong"],n=i["bg-success-strong-hover"];break;case"yellow":o=i["bg-warning-strong"],n=i["bg-warning-strong-hover"];break;case"red":o=i["bg-error-strong"],n=i["bg-error-strong-hover"];break;case"blue":o=i["bg-info-strong"],n=i["bg-info-strong-hover"];break;case"primary":o=i["bg-primary"],n=i["bg-primary-hover"];break;default:o=i["bg-inverse"],n=i["bg-inverse-hover"]}else switch(e.$color){case"grey":o=i["bg-strong"],t=i["border-strong"],s=i["text-subtle"],n=i["bg-hover-neutral-strong"];break;case"green":o=i["bg-success"],t=i["border-success"],s=i["text-success"],n=i["bg-success-hover"];break;case"yellow":o=i["bg-warning"],t=i["border-warning"],s=i["text-warning"],n=i["bg-warning-hover"];break;case"red":o=i["bg-error"],t=i["border-error"],s=i["text-error"],n=i["bg-error-hover"];break;case"blue":o=i["bg-info"],t=i["border-info"],s=i["text-info"],n=i["bg-info-hover"];break;case"primary":o=i["bg-primary-subtlest"],t=i["border-primary"],s=i["text-primary"],n=i["bg-primary-hover"];break;default:o=i.bg,t=i.border,s=i.text,n=i["bg-hover-neutral"]}return r`
-            background: ${o};
-            border: ${a["width-010"]} ${a.solid} ${t};
-            color: ${s};
-            @media (hover: hover) {
-                &:hover {
-                    ${e.$interactive&&n&&`background: ${n(e)};`}
-                    ${e.$interactive&&undefined}
-                }
-            }
-        `}}
-
-    ${s.MaxWidth.lg} {
-        ${({$interactive:e})=>{if(e)return r`
-                    ${t["body-md-semibold"]}
-                    padding: calc(0.5rem - 1px) 1rem;
-                `}}
-    }
-`,b=e.div`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-align: left;
-`;export{b as Label,n as Wrapper};
+import"./tag.style_d98c53.css";const w="w6gjrz2",t="w3k7rkk",k="w1bpyu8a",a="wq3qkg6",g="w12fv5tt",o="w1358sxl",s="w1oi4bgz",c="wpja2at",p="wgwk3g6",r="wb0avxu",b="wn4wzi4",i="wyfwkab",j="wocomht",y="w17cj89j",_="wutpo14",l="w1t1mrk9",m="l1sykhdi";export{m as label,w as wrapper,t as wrapperInteractive,l as wrapperOutlineBlack,y as wrapperOutlineBlue,b as wrapperOutlineGreen,r as wrapperOutlineGrey,_ as wrapperOutlinePrimary,j as wrapperOutlineRed,i as wrapperOutlineYellow,p as wrapperSolidBlack,s as wrapperSolidBlue,a as wrapperSolidGreen,k as wrapperSolidGrey,c as wrapperSolidPrimary,o as wrapperSolidRed,g as wrapperSolidYellow};
 //# sourceMappingURL=tag.style.js.map

package/tag/tag.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.style.js","sources":["../../src/tag/tag.style.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n} from \"../v3_theme\";\nimport type { TagColorType, TagType } from \"./types\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\ninterface StyleProps {\n    $type: TagType;\n    $color: TagColorType;\n    $interactive: boolean;\n}\n\nexport const Wrapper = styled.div<StyleProps>`\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: 0.125rem 0.5rem;\n    width: fit-content;\n    max-width: 100%;\n    ${V3_Font[\"body-xs-semibold\"]}\n    transition: all 200ms ease;\n    cursor: ${({ $interactive }) => ($interactive ? \"pointer\" : \"default\")};\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n\n    svg {\n        flex-shrink: 0;\n    }\n\n    ${(props) => {\n        let backgroundColor: (props: any) => string;\n        let borderColor: ((props: any) => string) | undefined;\n        let color: (props: any) => string;\n        let hoverBackgroundColor: (props: any) => string;\n        let hoverBorderColor: ((props: any) => string) | undefined;\n\n        if (props.$type === \"solid\") {\n            color = V3_Colour[\"text-inverse\"];\n            switch (props.$color) {\n                case \"grey\":\n                    backgroundColor = V3_Colour[\"bg-inverse-subtler\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-inverse-hover\"];\n                    break;\n                case \"green\":\n                    backgroundColor = V3_Colour[\"bg-success-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-success-strong-hover\"];\n                    break;\n                case \"yellow\":\n                    backgroundColor = V3_Colour[\"bg-warning-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-warning-strong-hover\"];\n                    break;\n                case \"red\":\n                    backgroundColor = V3_Colour[\"bg-error-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-error-strong-hover\"];\n                    break;\n                case \"blue\":\n                    backgroundColor = V3_Colour[\"bg-info-strong\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-info-strong-hover\"];\n                    break;\n                case \"primary\":\n                    backgroundColor = V3_Colour[\"bg-primary\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-primary-hover\"];\n                    break;\n                default:\n                    backgroundColor = V3_Colour[\"bg-inverse\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-inverse-hover\"];\n                    break;\n            }\n        } else {\n            switch (props.$color) {\n                case \"grey\":\n                    backgroundColor = V3_Colour[\"bg-strong\"];\n                    borderColor = V3_Colour[\"border-strong\"];\n                    color = V3_Colour[\"text-subtle\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-hover-neutral-strong\"];\n                    break;\n                case \"green\":\n                    backgroundColor = V3_Colour[\"bg-success\"];\n                    borderColor = V3_Colour[\"border-success\"];\n                    color = V3_Colour[\"text-success\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-success-hover\"];\n                    break;\n                case \"yellow\":\n                    backgroundColor = V3_Colour[\"bg-warning\"];\n                    borderColor = V3_Colour[\"border-warning\"];\n                    color = V3_Colour[\"text-warning\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-warning-hover\"];\n                    break;\n                case \"red\":\n                    backgroundColor = V3_Colour[\"bg-error\"];\n                    borderColor = V3_Colour[\"border-error\"];\n                    color = V3_Colour[\"text-error\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-error-hover\"];\n                    break;\n                case \"blue\":\n                    backgroundColor = V3_Colour[\"bg-info\"];\n                    borderColor = V3_Colour[\"border-info\"];\n                    color = V3_Colour[\"text-info\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-info-hover\"];\n                    break;\n                case \"primary\":\n                    backgroundColor = V3_Colour[\"bg-primary-subtlest\"];\n                    borderColor = V3_Colour[\"border-primary\"];\n                    color = V3_Colour[\"text-primary\"];\n                    hoverBackgroundColor = V3_Colour[\"bg-primary-hover\"];\n                    break;\n                default:\n                    backgroundColor = V3_Colour.bg;\n                    borderColor = V3_Colour.border;\n                    color = V3_Colour.text;\n                    hoverBackgroundColor = V3_Colour[\"bg-hover-neutral\"];\n                    break;\n            }\n        }\n        return css`\n            background: ${backgroundColor};\n            border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${borderColor};\n            color: ${color};\n            @media (hover: hover) {\n                &:hover {\n                    ${props.$interactive &&\n                    hoverBackgroundColor &&\n                    `background: ${hoverBackgroundColor(props)};`}\n                    ${props.$interactive &&\n                    hoverBorderColor &&\n                    `border-color: ${hoverBorderColor(props)};`}\n                }\n            }\n        `;\n    }}\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        ${({ $interactive }) => {\n            if ($interactive) {\n                return css`\n                    ${V3_Font[\"body-md-semibold\"]}\n                    padding: calc(0.5rem - 1px) 1rem;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const Label = styled.div`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-align: left;\n`;\n"],"names":["Wrapper","styled","div","V3_Radius","V3_Font","$interactive","props","backgroundColor","borderColor","color","hoverBackgroundColor","$type","V3_Colour","$color","bg","border","text","css","V3_Border","solid","hoverBorderColor","V3_MediaQuery","MaxWidth","lg","Label"],"mappings":"0JAoBO,MAAMA,EAAUC,EAAOC,GAAe;qBACxBC,EAAc;;;;MAI7BC,EAAQ;;cAEA,EAAGC,kBAAoBA,EAAe,UAAY;;;;;;;;;MASzDC,IACC,IAAIC,EACAC,EACAC,EACAC,EAGJ,GAAoB,UAAhBJ,EAAMK,MAEN,OADAF,EAAQG,EAAU,gBACVN,EAAMO,QACV,IAAK,OACDN,EAAkBK,EAAU,sBAC5BF,EAAuBE,EAAU,oBACjC,MACJ,IAAK,QACDL,EAAkBK,EAAU,qBAC5BF,EAAuBE,EAAU,2BACjC,MACJ,IAAK,SACDL,EAAkBK,EAAU,qBAC5BF,EAAuBE,EAAU,2BACjC,MACJ,IAAK,MACDL,EAAkBK,EAAU,mBAC5BF,EAAuBE,EAAU,yBACjC,MACJ,IAAK,OACDL,EAAkBK,EAAU,kBAC5BF,EAAuBE,EAAU,wBACjC,MACJ,IAAK,UACDL,EAAkBK,EAAU,cAC5BF,EAAuBE,EAAU,oBACjC,MACJ,QACIL,EAAkBK,EAAU,cAC5BF,EAAuBE,EAAU,yBAIzC,OAAQN,EAAMO,QACV,IAAK,OACDN,EAAkBK,EAAU,aAC5BJ,EAAcI,EAAU,iBACxBH,EAAQG,EAAU,eAClBF,EAAuBE,EAAU,2BACjC,MACJ,IAAK,QACDL,EAAkBK,EAAU,cAC5BJ,EAAcI,EAAU,kBACxBH,EAAQG,EAAU,gBAClBF,EAAuBE,EAAU,oBACjC,MACJ,IAAK,SACDL,EAAkBK,EAAU,cAC5BJ,EAAcI,EAAU,kBACxBH,EAAQG,EAAU,gBAClBF,EAAuBE,EAAU,oBACjC,MACJ,IAAK,MACDL,EAAkBK,EAAU,YAC5BJ,EAAcI,EAAU,gBACxBH,EAAQG,EAAU,cAClBF,EAAuBE,EAAU,kBACjC,MACJ,IAAK,OACDL,EAAkBK,EAAU,WAC5BJ,EAAcI,EAAU,eACxBH,EAAQG,EAAU,aAClBF,EAAuBE,EAAU,iBACjC,MACJ,IAAK,UACDL,EAAkBK,EAAU,uBAC5BJ,EAAcI,EAAU,kBACxBH,EAAQG,EAAU,gBAClBF,EAAuBE,EAAU,oBACjC,MACJ,QACIL,EAAkBK,EAAUE,GAC5BN,EAAcI,EAAUG,OACxBN,EAAQG,EAAUI,KAClBN,EAAuBE,EAAU,oBAI7C,OAAOK,CAAG;0BACQV;sBACJW,EAAU,gBAAgBA,EAAUC,SAASX;qBAC9CC;;;sBAGCH,EAAMD,cACRK,GACA,eAAeA,EAAqBJ;sBAClCA,EAAMD,cAzFhBe;;;SA8FH;;MAGHC,EAAcC,SAASC;UACnB,EAAGlB,mBACD,GAAIA,EACA,OAAOY,CAAG;sBACJb,EAAQ;;iBAGlB;;EAKCoB,EAAQvB,EAAOC,GAAG;;;;;;"}
+{"version":3,"file":"tag.style.js","sources":["../../src/tag/tag.style.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const wrapper = css`\n    border-radius: ${Radius[\"sm\"]};\n    padding: 0.125rem 0.5rem;\n    width: fit-content;\n    max-width: 100%;\n    ${Font[\"body-xs-semibold\"]}\n    transition: all 200ms ease;\n    cursor: default;\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    border: ${Border[\"width-010\"]} ${Border.solid} transparent;\n\n    svg {\n        flex-shrink: 0;\n    }\n`;\n\nexport const wrapperInteractive = css`\n    cursor: pointer;\n\n    ${MediaQuery.MaxWidth.lg} {\n        ${Font[\"body-md-semibold\"]}\n        padding: calc(0.5rem - 1px) 1rem;\n    }\n`;\n\nexport const wrapperSolidGrey = css`\n    background: ${Colour[\"bg-inverse-subtler\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-inverse-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidGreen = css`\n    background: ${Colour[\"bg-success-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-success-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidYellow = css`\n    background: ${Colour[\"bg-warning-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-warning-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidRed = css`\n    background: ${Colour[\"bg-error-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-error-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidBlue = css`\n    background: ${Colour[\"bg-info-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-info-strong-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidPrimary = css`\n    background: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-primary-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperSolidBlack = css`\n    background: ${Colour[\"bg-inverse\"]};\n    color: ${Colour[\"text-inverse\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-inverse-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineGrey = css`\n    background: ${Colour[\"bg-strong\"]};\n    border-color: ${Colour[\"border-strong\"]};\n    color: ${Colour[\"text-subtle\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-hover-neutral-strong\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineGreen = css`\n    background: ${Colour[\"bg-success\"]};\n    border-color: ${Colour[\"border-success\"]};\n    color: ${Colour[\"text-success\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-success-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineYellow = css`\n    background: ${Colour[\"bg-warning\"]};\n    border-color: ${Colour[\"border-warning\"]};\n    color: ${Colour[\"text-warning\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-warning-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineRed = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n    color: ${Colour[\"text-error\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-error-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineBlue = css`\n    background: ${Colour[\"bg-info\"]};\n    border-color: ${Colour[\"border-info\"]};\n    color: ${Colour[\"text-info\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-info-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlinePrimary = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border-color: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const wrapperOutlineBlack = css`\n    background: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour.text};\n\n    &.${wrapperInteractive} {\n        @media (hover: hover) {\n            &:hover {\n                background: ${Colour[\"bg-hover-neutral\"]};\n            }\n        }\n    }\n`;\n\nexport const label = css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-align: left;\n`;\n"],"names":["wrapper","wrapperInteractive","wrapperSolidGrey","wrapperSolidGreen","wrapperSolidYellow","wrapperSolidRed","wrapperSolidBlue","wrapperSolidPrimary","wrapperSolidBlack","wrapperOutlineGrey","wrapperOutlineGreen","wrapperOutlineYellow","wrapperOutlineRed","wrapperOutlineBlue","wrapperOutlinePrimary","wrapperOutlineBlack","label"],"mappings":"kDAQO,MAAMA,EAAO,UAkBPC,EAAkB,UASlBC,EAAgB,WAahBC,EAAiB,UAajBC,EAAkB,WAalBC,EAAe,WAafC,EAAgB,WAahBC,EAAmB,UAanBC,EAAiB,UAajBC,EAAkB,UAclBC,EAAmB,UAcnBC,EAAoB,UAcpBC,EAAiB,UAcjBC,EAAkB,WAclBC,EAAqB,UAcrBC,EAAmB,WAcnBC,EAAK"}

package/tag/tag.style_d98c53.css

@@ -0,0 +1,17 @@
+@layer fds{.w6gjrz2{border-radius:var(--fds-radius-sm);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:default;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;}.w6gjrz2 svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.w3k7rkk{cursor:pointer;}:where(body.fds-breakpoint-lg-max) .w3k7rkk{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);padding:calc(0.5rem - 1px) 1rem;}
+.w1bpyu8a{background:var(--fds-colour-bg-inverse-subtler);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1bpyu8a.w3k7rkk:hover{background:var(--fds-colour-bg-inverse-hover);}}
+.wq3qkg6{background:var(--fds-colour-bg-success-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wq3qkg6.w3k7rkk:hover{background:var(--fds-colour-bg-success-strong-hover);}}
+.w12fv5tt{background:var(--fds-colour-bg-warning-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w12fv5tt.w3k7rkk:hover{background:var(--fds-colour-bg-warning-strong-hover);}}
+.w1358sxl{background:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1358sxl.w3k7rkk:hover{background:var(--fds-colour-bg-error-strong-hover);}}
+.w1oi4bgz{background:var(--fds-colour-bg-info-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1oi4bgz.w3k7rkk:hover{background:var(--fds-colour-bg-info-strong-hover);}}
+.wpja2at{background:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wpja2at.w3k7rkk:hover{background:var(--fds-colour-bg-primary-hover);}}
+.wgwk3g6{background:var(--fds-colour-bg-inverse);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wgwk3g6.w3k7rkk:hover{background:var(--fds-colour-bg-inverse-hover);}}
+.wb0avxu{background:var(--fds-colour-bg-strong);border-color:var(--fds-colour-border-strong);color:var(--fds-colour-text-subtle);}@media (hover: hover){.wb0avxu.w3k7rkk:hover{background:var(--fds-colour-bg-hover-neutral-strong);}}
+.wn4wzi4{background:var(--fds-colour-bg-success);border-color:var(--fds-colour-border-success);color:var(--fds-colour-text-success);}@media (hover: hover){.wn4wzi4.w3k7rkk:hover{background:var(--fds-colour-bg-success-hover);}}
+.wyfwkab{background:var(--fds-colour-bg-warning);border-color:var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}@media (hover: hover){.wyfwkab.w3k7rkk:hover{background:var(--fds-colour-bg-warning-hover);}}
+.wocomht{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);color:var(--fds-colour-text-error);}@media (hover: hover){.wocomht.w3k7rkk:hover{background:var(--fds-colour-bg-error-hover);}}
+.w17cj89j{background:var(--fds-colour-bg-info);border-color:var(--fds-colour-border-info);color:var(--fds-colour-text-info);}@media (hover: hover){.w17cj89j.w3k7rkk:hover{background:var(--fds-colour-bg-info-hover);}}
+.wutpo14{background:var(--fds-colour-bg-primary-subtlest);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}@media (hover: hover){.wutpo14.w3k7rkk:hover{background:var(--fds-colour-bg-hover);}}
+.w1t1mrk9{background:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text);}@media (hover: hover){.w1t1mrk9.w3k7rkk:hover{background:var(--fds-colour-bg-hover-neutral);}}
+.l1sykhdi{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}}

package/tag/types.d.ts

@@ -1,10 +1,34 @@
 import type React from "react";
+/** Visual style variant. */
 export type TagType = "outline" | "solid";
+/** Color theme applied to the tag. */
 export type TagColorType = "black" | "grey" | "green" | "yellow" | "red" | "blue" | "primary";
+/** Props for the `Tag` component. */
 export interface TagProps extends React.HTMLAttributes<HTMLElement> {
+    /** Visual style variant. */
     type: TagType;
+    /**
+     * Color theme applied to the tag.
+     *
+     * @default "black"
+     */
     colorType?: TagColorType | undefined;
+    /**
+     * Optional icon rendered alongside the label. The position is controlled by `iconPosition`.
+     */
     icon?: JSX.Element | undefined;
+    /**
+     * Position of the icon relative to the label text.
+     *
+     * @default "left"
+     */
     iconPosition?: "left" | "right";
+    /**
+     * When `true`, renders the tag as a `<button>` element to support click
+     * and keyboard interactions. When `false`, renders as a non-interactive
+     * `<div>`.
+     *
+     * @default false
+     */
     interactive?: boolean | undefined;
 }

package/text-list/index.d.ts

@@ -1,10 +1,28 @@
+/**
+ * Renders styled ordered and unordered lists for body copy and structured content.
+ *
+ * Use `TextList` to present sequential or non-sequential items with consistent
+ * typography and spacing.
+ *
+ * Sub-components:
+ * - `TextList.Ol` — a numbered list with configurable counter style and direction.
+ * - `TextList.Ul` — a bulleted list supporting predefined marker types or a custom icon.
+ * @keywords bullet, list, numbered, ordered, unordered
+ */
 export declare const TextList: {
+    /**
+     * Renders a bulleted list. Supports predefined marker types or
+     * a custom decorative icon.
+     */
     Ul: {
-        ({ size, bulletType, bottomMargin, children, ...otherProps }: import("./types").UnorderedListProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, size, bulletType, bottomMargin, children, ...otherProps }: import("./types").UnorderedListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /**
+     * Renders a numbered list with configurable counter display.
+     */
     Ol: {
-        ({ size, counterType, counterSeparator, bottomMargin, children, ...otherProps }: import("./types").OrderedListProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, size, counterType, counterSeparator, reversed, start, bottomMargin, children, ...otherProps }: import("./types").OrderedListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/text-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/text-list/index.ts"],"sourcesContent":["import { OrderedList } from \"./ordered-list\";\nimport { UnorderedList } from \"./unordered-list\";\n\nexport const TextList = {\n    Ul: UnorderedList,\n    Ol: OrderedList,\n};\n\nexport * from \"./types\";\n"],"names":["TextList","Ul","UnorderedList","Ol","OrderedList"],"mappings":"oGAGO,MAAMA,EAAW,CACpBC,GAAIC,EACJC,GAAIC"}
+{"version":3,"file":"index.js","sources":["../../src/text-list/index.ts"],"sourcesContent":["import { OrderedList } from \"./ordered-list\";\nimport { UnorderedList } from \"./unordered-list\";\n\n// @catalog\n/**\n * Renders styled ordered and unordered lists for body copy and structured content.\n *\n * Use `TextList` to present sequential or non-sequential items with consistent\n * typography and spacing.\n *\n * Sub-components:\n * - `TextList.Ol` — a numbered list with configurable counter style and direction.\n * - `TextList.Ul` — a bulleted list supporting predefined marker types or a custom icon.\n * @keywords bullet, list, numbered, ordered, unordered\n */\nexport const TextList = {\n    /**\n     * Renders a bulleted list. Supports predefined marker types or\n     * a custom decorative icon.\n     */\n    Ul: UnorderedList,\n    /**\n     * Renders a numbered list with configurable counter display.\n     */\n    Ol: OrderedList,\n};\n\nexport * from \"./types\";\n"],"names":["TextList","Ul","UnorderedList","Ol","OrderedList"],"mappings":"oGAeO,MAAMA,EAAW,CAKpBC,GAAIC,EAIJC,GAAIC"}

package/text-list/ordered-list.d.ts

@@ -1,5 +1,5 @@
 import type { OrderedListProps } from "./types";
 export declare const OrderedList: {
-    ({ size, counterType, counterSeparator, bottomMargin, children, ...otherProps }: OrderedListProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, size, counterType, counterSeparator, reversed, start, bottomMargin, children, ...otherProps }: OrderedListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/text-list/ordered-list.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{StyledOrderedList as e}from"./text-list.styles.js";const o=o=>{var{size:i,counterType:n,counterSeparator:a,bottomMargin:s,children:c}=o,m=t(o,["size","counterType","counterSeparator","bottomMargin","children"]);return r(e,Object.assign({$size:i,$counterType:n,$counterSeparator:a,$bottomMargin:s},m,{children:c}))};o.displayName="TextList.Ol";export{o as OrderedList};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import{useRef as o}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as s}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as m,listBase as i,orderedList as l,listSize as a,orderedListReversed as n,orderedListCustomStart as p}from"./text-list.styles.js";const u=u=>{var{className:c,size:d,counterType:h,counterSeparator:j,reversed:y,start:f,bottomMargin:v,children:x}=u,b=e(u,["className","size","counterType","counterSeparator","reversed","start","bottomMargin","children"]);const g=o(null),S=Boolean(f);var k;return s(g,{[m.listBottomMargin]:`${null!=v?v:0}rem`,[m.orderedListCounterStyle]:null!=h?h:null,[m.orderedListCounterSeparator]:(k=null!=j?j:")",`"${k.replace(/"/g,'\\"')}"`),[m.orderedListStartValue]:S?y?f+1:f-1:null}),t("ol",Object.assign({ref:g,reversed:y,start:f,className:r(i,l,d&&a[d],y&&n,S&&p,c)},b,{children:x}))};u.displayName="TextList.Ol";export{u as OrderedList};
 //# sourceMappingURL=ordered-list.js.map

package/text-list/ordered-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ordered-list.js","sources":["../../src/text-list/ordered-list.tsx"],"sourcesContent":["import { StyledOrderedList } from \"./text-list.styles\";\nimport type { OrderedListProps } from \"./types\";\n\nexport const OrderedList = ({\n    size,\n    counterType,\n    counterSeparator,\n    bottomMargin,\n    children,\n    ...otherProps\n}: OrderedListProps) => {\n    return (\n        <StyledOrderedList\n            $size={size}\n            $counterType={counterType}\n            $counterSeparator={counterSeparator}\n            $bottomMargin={bottomMargin}\n            {...otherProps}\n        >\n            {children}\n        </StyledOrderedList>\n    );\n};\n\nOrderedList.displayName = \"TextList.Ol\";\n"],"names":["OrderedList","_a","size","counterType","counterSeparator","bottomMargin","children","otherProps","__rest","_jsx","StyledOrderedList","Object","assign","$size","$counterSeparator","$bottomMargin","displayName"],"mappings":"iJAGO,MAAMA,EAAeC,IAAA,IAAAC,KACxBA,EAAIC,YACJA,EAAWC,iBACXA,EAAgBC,aAChBA,EAAYC,SACZA,GAAQL,EACLM,EAAUC,EAAAP,EANW,qEAQxB,OACIQ,EAACC,EAAiBC,OAAAC,OAAA,CAAAC,MACPX,eACOC,EAAWW,kBACNV,EAAgBW,cACpBV,GACXE,YAEHD,IACe,EAI5BN,EAAYgB,YAAc"}
+{"version":3,"file":"ordered-list.js","sources":["../../src/text-list/ordered-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./text-list.styles\";\nimport type { OrderedListProps } from \"./types\";\n\nconst escapeDoubleQuotes = (value: string) => `\"${value.replace(/\"/g, '\\\\\"')}\"`;\n\nexport const OrderedList = ({\n    className,\n    size,\n    counterType,\n    counterSeparator,\n    reversed,\n    start,\n    bottomMargin,\n    children,\n    ...otherProps\n}: OrderedListProps) => {\n    const listRef = useRef<HTMLOListElement>(null);\n    const hasCustomStart = Boolean(start);\n\n    useApplyStyle(listRef, {\n        [styles.tokens.listBottomMargin]: `${bottomMargin ?? 0}rem`,\n        [styles.tokens.orderedListCounterStyle]: counterType ?? null,\n        [styles.tokens.orderedListCounterSeparator]: escapeDoubleQuotes(\n            counterSeparator ?? \")\"\n        ),\n        [styles.tokens.orderedListStartValue]: hasCustomStart\n            ? reversed\n                ? (start as number) + 1\n                : (start as number) - 1\n            : null,\n    });\n\n    return (\n        <ol\n            ref={listRef}\n            reversed={reversed}\n            start={start}\n            className={clsx(\n                styles.listBase,\n                styles.orderedList,\n                size && styles.listSize[size],\n                reversed && styles.orderedListReversed,\n                hasCustomStart && styles.orderedListCustomStart,\n                className\n            )}\n            {...otherProps}\n        >\n            {children}\n        </ol>\n    );\n};\n\nOrderedList.displayName = \"TextList.Ol\";\n"],"names":["OrderedList","_a","className","size","counterType","counterSeparator","reversed","start","bottomMargin","children","otherProps","__rest","listRef","useRef","hasCustomStart","Boolean","value","useApplyStyle","styles.tokens","listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","replace","orderedListStartValue","_jsx","Object","assign","ref","clsx","styles.listBase","styles.orderedList","styles.listSize","styles.orderedListReversed","styles.orderedListCustomStart","displayName"],"mappings":"umBAOA,MAEaA,EAAeC,QAAAC,UACxBA,EAASC,KACTA,EAAIC,YACJA,EAAWC,iBACXA,EAAgBC,SAChBA,EAAQC,MACRA,EAAKC,aACLA,EAAYC,SACZA,GAAQR,EACLS,EAAUC,EAAAV,EATW,oGAWxB,MAAMW,EAAUC,EAAyB,MACnCC,EAAiBC,QAAQR,GAdR,IAACS,EA6BxB,OAbAC,EAAcL,EAAS,CACnB,CAACM,EAAcC,kBAAmB,GAAGX,QAAAA,EAAgB,OACrD,CAACU,EAAcE,yBAA0BhB,QAAAA,EAAe,KACxD,CAACc,EAAcG,8BAnBKL,EAoBhBX,QAAAA,EAAoB,IApBc,IAAIW,EAAMM,QAAQ,KAAM,WAsB9D,CAACJ,EAAcK,uBAAwBT,EACjCR,EACKC,EAAmB,EACnBA,EAAmB,EACxB,OAINiB,EAAA,KAAAC,OAAAC,OAAA,CACIC,IAAKf,EACLN,SAAUA,EACVC,MAAOA,EACPL,UAAW0B,EACPC,EACAC,EACA3B,GAAQ4B,EAAgB5B,GACxBG,GAAY0B,EACZlB,GAAkBmB,EAClB/B,IAEAQ,EAAU,CAAAD,SAEbA,IACA,EAIbT,EAAYkC,YAAc"}

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

@@ -1,17 +1,15 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { BulletType, CounterType } from "./types";
-interface ListStyleProps {
-    $bottomMargin: number | undefined;
-    $size: V3_TypographySizeType | undefined;
-}
-interface OrderedListStyleProps extends ListStyleProps {
-    $counterType: CounterType | undefined;
-    $counterSeparator: string | undefined;
-}
-interface UnorderedListStyleProps extends ListStyleProps {
-    $bulletType: BulletType | undefined;
-    $hasCustomIcon: boolean | undefined;
-}
-export declare const StyledOrderedList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, OrderedListStyleProps>> & string;
-export declare const StyledUnorderedList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, UnorderedListStyleProps>> & string;
-export {};
+import type { TextListSize } from "./types";
+export declare const tokens: {
+    listBottomMargin: string;
+    orderedListCounterStyle: string;
+    orderedListCounterSeparator: string;
+    orderedListStartValue: string;
+    unorderedListBulletType: string;
+};
+export declare const listBase: import("@linaria/core").LinariaClassName;
+export declare const listSize: Record<TextListSize, string>;
+export declare const orderedList: import("@linaria/core").LinariaClassName;
+export declare const orderedListReversed: import("@linaria/core").LinariaClassName;
+export declare const orderedListCustomStart: import("@linaria/core").LinariaClassName;
+export declare const unorderedList: import("@linaria/core").LinariaClassName;
+export declare const unorderedListCustomIcon: import("@linaria/core").LinariaClassName;

package/text-list/text-list.styles.js

@@ -1,63 +1,2 @@
-import t,{css as e}from"styled-components";import{V3_Font as o,V3_Colour as r,V3_MediaQuery as i}from"../v3_theme/index.js";const s=e`
-    margin-bottom: ${t=>t.$bottomMargin||0}rem;
-
-    // Counter matters
-    counter-reset: list;
-
-    ${t=>t.$size&&o[`${t.$size}-regular`]}
-    font-weight: ${o.Spec["weight-regular"]};
-    color: ${r.text};
-
-    // nested lists styling
-    ol,
-    ul {
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
-    }
-`,n=t.ol`
-    ${s}
-
-    margin-left: 3em;
-
-    ${i.MaxWidth.lg} {
-        margin-left: 2.5em;
-    }
-
-    li {
-        position: relative;
-    }
-
-    ${t=>{const{reversed:o}=t,r=t.$counterType||"decimal",i=t.$counterSeparator||")";return e`
-            li:before {
-                content: counter(list, ${r}) "${i}";
-                counter-increment: ${o?"list -1":"list"};
-                position: absolute;
-                left: -2em;
-            }
-        `}}
-
-    ${t=>{const{reversed:o,start:r}=t;if(r){return e`
-                counter-reset: list ${o?r+1:r-1};
-            `}}}
-
-    list-style-position: outside;
-    list-style-type: none;
-
-    ul > li:before {
-        content: "";
-    }
-`,l=t.ul`
-    ${s}
-
-    margin-left: ${t=>t.$hasCustomIcon?0:"2.5em"};
-    list-style-type: ${t=>t.$hasCustomIcon?"none":t.$bulletType||"disc"};
-
-    ${t=>t.$hasCustomIcon&&e`
-            & > li {
-                display: flex;
-                align-items: flex-start;
-                gap: 0.5em;
-            }
-        `}
-`;export{n as StyledOrderedList,l as StyledUnorderedList};
+import"./text-list.styles_w3fvyt.css";const t={listBottomMargin:"--fds-internal-textList-list-bottomMargin",orderedListCounterStyle:"--fds-internal-textList-orderedList-counterStyle",orderedListCounterSeparator:"--fds-internal-textList-orderedList-counterSeparator",orderedListStartValue:"--fds-internal-textList-orderedList-startValue",unorderedListBulletType:"--fds-internal-textList-unorderedList-bulletType"},e="l1oajjj5",r={"heading-xxl":"h1cidf62","heading-xl":"hzza2og","heading-lg":"hvh12um","heading-md":"hmbxm0d","heading-sm":"he1b4ry","heading-xs":"hqe0fod","body-baseline":"bd07pl","body-md":"bsjejt8","body-sm":"b1lkco40","body-xs":"bru5c1n"},d="o1gavxb4",s="o1s96hsr",i="o14yxjmu",o="u1kb1ugb",n="u1fq31t2";export{e as listBase,r as listSize,d as orderedList,i as orderedListCustomStart,s as orderedListReversed,t as tokens,o as unorderedList,n as unorderedListCustomIcon};
 //# sourceMappingURL=text-list.styles.js.map