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

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_1af5ipv.css";const t="txzjt0s",s="t110f2kz",e="tdex3lc",a="htqww2s",b="b1gaqki2",l="b183mjh5";export{l as bodyCell,b as bodyRow,a 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    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\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,UAeZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}

package/table/table.styles_1af5ipv.css

@@ -0,0 +1,6 @@
+.txzjt0s{overflow:auto;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);}.txzjt0s::-webkit-scrollbar{display:none;}.txzjt0s *{-ms-overflow-style:none;scrollbar-width: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/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\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,IAIFC,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_10tn8i.css";const w="w6gjrz2",t="w3k7rkk",k="w1bpyu8a",a="wq3qkg6",g="w12fv5tt",o="w1358sxl",s="w1oi4bgz",i="wpja2at",p="wgwk3g6",r="wb0avxu",b="wn4wzi4",c="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,c as wrapperOutlineYellow,p as wrapperSolidBlack,s as wrapperSolidBlue,a as wrapperSolidGreen,k as wrapperSolidGrey,i 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_10tn8i.css

@@ -0,0 +1,17 @@
+.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);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);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/text-list/index.d.ts

@@ -1,10 +1,10 @@
 export declare const TextList: {
     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;
     };
     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/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_1gohl3f.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

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

@@ -1 +1 @@
-{"version":3,"file":"text-list.styles.js","sources":["../../src/text-list/text-list.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_MediaQuery } from \"../v3_theme\";\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport type { BulletType, CounterType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListStyleProps {\n    $bottomMargin: number | undefined;\n    $size: V3_TypographySizeType | undefined;\n}\n\ninterface OrderedListStyleProps extends ListStyleProps {\n    $counterType: CounterType | undefined;\n    $counterSeparator: string | undefined;\n}\n\ninterface UnorderedListStyleProps extends ListStyleProps {\n    $bulletType: BulletType | undefined;\n    $hasCustomIcon: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst baseStyle = css<ListStyleProps>`\n    margin-bottom: ${(props) => props.$bottomMargin || 0}rem;\n\n    // Counter matters\n    counter-reset: list;\n\n    ${(props) => props.$size && V3_Font[`${props.$size}-regular`]}\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    color: ${V3_Colour.text};\n\n    // nested lists styling\n    ol,\n    ul {\n        margin-top: 0.5rem;\n        margin-bottom: 0.5rem;\n    }\n`;\n\nexport const StyledOrderedList = styled.ol<OrderedListStyleProps>`\n    ${baseStyle}\n\n    margin-left: 3em;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin-left: 2.5em;\n    }\n\n    li {\n        position: relative;\n    }\n\n    ${(props) => {\n        const { reversed } = props;\n        const counterType = props.$counterType || \"decimal\";\n        const counterSeparator = props.$counterSeparator || \")\";\n\n        return css`\n            li:before {\n                content: counter(list, ${counterType}) \"${counterSeparator}\";\n                counter-increment: ${reversed ? \"list -1\" : \"list\"};\n                position: absolute;\n                left: -2em;\n            }\n        `;\n    }}\n\n    ${(props) => {\n        const { reversed, start } = props;\n\n        if (start) {\n            const resetValue = reversed ? start + 1 : start - 1;\n            return css`\n                counter-reset: list ${resetValue};\n            `;\n        }\n    }}\n\n    list-style-position: outside;\n    list-style-type: none;\n\n    ul > li:before {\n        content: \"\";\n    }\n`;\n\nexport const StyledUnorderedList = styled.ul<UnorderedListStyleProps>`\n    ${baseStyle}\n\n    margin-left: ${(props) => (props.$hasCustomIcon ? 0 : \"2.5em\")};\n    list-style-type: ${(props) =>\n        props.$hasCustomIcon ? \"none\" : props.$bulletType || \"disc\"};\n\n    ${(props) =>\n        props.$hasCustomIcon &&\n        css`\n            & > li {\n                display: flex;\n                align-items: flex-start;\n                gap: 0.5em;\n            }\n        `}\n`;\n"],"names":["baseStyle","css","props","$bottomMargin","$size","V3_Font","Spec","V3_Colour","text","StyledOrderedList","styled","ol","V3_MediaQuery","MaxWidth","lg","reversed","counterType","$counterType","counterSeparator","$counterSeparator","start","StyledUnorderedList","ul","$hasCustomIcon","$bulletType"],"mappings":"4HA2BA,MAAMA,EAAYC,CAAmB;qBACfC,GAAUA,EAAMC,eAAiB;;;;;MAKhDD,GAAUA,EAAME,OAASC,EAAQ,GAAGH,EAAME;mBAC9BC,EAAQC,KAAK;aACnBC,EAAUC;;;;;;;;EAUVC,EAAoBC,EAAOC,EAAyB;MAC3DX;;;;MAIAY,EAAcC,SAASC;;;;;;;;MAQtBZ,IACC,MAAMa,SAAEA,GAAab,EACfc,EAAcd,EAAMe,cAAgB,UACpCC,EAAmBhB,EAAMiB,mBAAqB,IAEpD,OAAOlB,CAAG;;yCAEuBe,OAAiBE;qCACrBH,EAAW,UAAY;;;;SAInD;;MAGFb,IACC,MAAMa,SAAEA,EAAQK,MAAEA,GAAUlB,EAE5B,GAAIkB,EAAO,CAEP,OAAOnB,CAAG;sCADSc,EAAWK,EAAQ,EAAIA,EAAQ;aAItD;;;;;;;;EAWKC,EAAsBX,EAAOY,EAA2B;MAC/DtB;;mBAEcE,GAAWA,EAAMqB,eAAiB,EAAI;uBAClCrB,GAChBA,EAAMqB,eAAiB,OAASrB,EAAMsB,aAAe;;MAEtDtB,GACCA,EAAMqB,gBACNtB,CAAG;;;;;;;"}
+{"version":3,"file":"text-list.styles.js","sources":["../../src/text-list/text-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\nimport type { TextListSize } from \"./types\";\n\nexport const tokens = {\n    listBottomMargin: \"--fds-internal-textList-list-bottomMargin\",\n    orderedListCounterStyle: \"--fds-internal-textList-orderedList-counterStyle\",\n    orderedListCounterSeparator:\n        \"--fds-internal-textList-orderedList-counterSeparator\",\n    orderedListStartValue: \"--fds-internal-textList-orderedList-startValue\",\n    unorderedListBulletType: \"--fds-internal-textList-unorderedList-bulletType\",\n};\n\nexport const listBase = css`\n    ${tokens.listBottomMargin}: 0rem;\n    margin-bottom: var(${tokens.listBottomMargin});\n\n    // Counter matters\n    counter-reset: list;\n\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour.text};\n\n    // nested lists styling\n    ol,\n    ul {\n        margin-top: 0.5rem;\n        margin-bottom: 0.5rem;\n    }\n`;\n\nexport const listSize: Record<TextListSize, string> = {\n    \"heading-xxl\": css`\n        ${Font[\"heading-xxl-regular\"]}\n    `,\n    \"heading-xl\": css`\n        ${Font[\"heading-xl-regular\"]}\n    `,\n    \"heading-lg\": css`\n        ${Font[\"heading-lg-regular\"]}\n    `,\n    \"heading-md\": css`\n        ${Font[\"heading-md-regular\"]}\n    `,\n    \"heading-sm\": css`\n        ${Font[\"heading-sm-regular\"]}\n    `,\n    \"heading-xs\": css`\n        ${Font[\"heading-xs-regular\"]}\n    `,\n    \"body-baseline\": css`\n        ${Font[\"body-baseline-regular\"]}\n    `,\n    \"body-md\": css`\n        ${Font[\"body-md-regular\"]}\n    `,\n    \"body-sm\": css`\n        ${Font[\"body-sm-regular\"]}\n    `,\n    \"body-xs\": css`\n        ${Font[\"body-xs-regular\"]}\n    `,\n};\n\nexport const orderedList = css`\n    ${tokens.orderedListCounterSeparator}: \")\";\n\n    margin-left: 3em;\n    list-style-position: outside;\n    list-style-type: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-left: 2.5em;\n    }\n\n    li {\n        position: relative;\n    }\n\n    li:before {\n        counter-increment: list;\n        content: counter(list, var(${tokens.orderedListCounterStyle}, decimal))\n            var(${tokens.orderedListCounterSeparator});\n        position: absolute;\n        left: -2em;\n    }\n\n    ul > li:before {\n        content: \"\";\n    }\n`;\n\nexport const orderedListReversed = css`\n    li:before {\n        counter-increment: list -1;\n    }\n`;\n\nexport const orderedListCustomStart = css`\n    counter-reset: list var(${tokens.orderedListStartValue});\n`;\n\nexport const unorderedList = css`\n    margin-left: 2.5em;\n    list-style-type: var(${tokens.unorderedListBulletType}, disc);\n`;\n\nexport const unorderedListCustomIcon = css`\n    margin-left: 0;\n    list-style-type: none;\n\n    & > li {\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5em;\n    }\n`;\n"],"names":["tokens","listBottomMargin","orderedListCounterStyle","orderedListCounterSeparator","orderedListStartValue","unorderedListBulletType","listBase","listSize","orderedList","orderedListReversed","orderedListCustomStart","unorderedList","unorderedListCustomIcon"],"mappings":"gEAKO,MAAMA,EAAS,CAClBC,iBAAkB,4CAClBC,wBAAyB,mDACzBC,4BACI,uDACJC,sBAAuB,iDACvBC,wBAAyB,oDAGhBC,EAAQ,WAkBRC,EAAyC,CAClD,cAAa,WAGb,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,aAAY,UAGZ,gBAAe,SAGf,UAAS,UAGT,UAAS,WAGT,UAAS,WAKAC,EAAW,WA4BXC,EAAmB,WAMnBC,EAAsB,WAItBC,EAAa,WAKbC,EAAuB"}

package/text-list/text-list.styles_1gohl3f.css

@@ -0,0 +1,16 @@
+.l1oajjj5{--fds-internal-textList-list-bottomMargin:0rem;margin-bottom:var(--fds-internal-textList-list-bottomMargin);counter-reset:list;font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);}.l1oajjj5 ol,.l1oajjj5 ul{margin-top:0.5rem;margin-bottom:0.5rem;}
+.h1cidf62{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xxl);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xxl);letter-spacing:var(--fds-font-heading-ls-xxl);}
+.hzza2og{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xl);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xl);letter-spacing:var(--fds-font-heading-ls-xl);}
+.hvh12um{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-lg);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-lg);letter-spacing:var(--fds-font-heading-ls-lg);}
+.hmbxm0d{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}
+.he1b4ry{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.hqe0fod{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.bd07pl{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.bsjejt8{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.b1lkco40{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.bru5c1n{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.o1gavxb4{--fds-internal-textList-orderedList-counterSeparator:")";margin-left:3em;list-style-position:outside;list-style-type:none;}:where(body.fds-breakpoint-lg-max) .o1gavxb4{margin-left:2.5em;}.o1gavxb4 li{position:relative;}.o1gavxb4 li:before{counter-increment:list;content:counter(list, var(--fds-internal-textList-orderedList-counterStyle, decimal)) var(--fds-internal-textList-orderedList-counterSeparator);position:absolute;left:-2em;}.o1gavxb4 ul>li:before{content:"";}
+.o1s96hsr li:before{counter-increment:list -1;}
+.o14yxjmu{counter-reset:list var(--fds-internal-textList-orderedList-startValue);}
+.u1kb1ugb{margin-left:2.5em;list-style-type:var(--fds-internal-textList-unorderedList-bulletType, disc);}
+.u1fq31t2{margin-left:0;list-style-type:none;}.u1fq31t2>li{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:0.5em;}

package/text-list/types.d.ts

@@ -1,8 +1,9 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
+import type { FontSize } from "../theme";
+export type TextListSize = Exclude<FontSize, "form-label" | "form-description">;
 interface BaseListProps {
     children: JSX.Element | JSX.Element[];
     bottomMargin?: number | undefined;
-    size?: V3_TypographySizeType | undefined;
+    size?: TextListSize | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
@@ -18,8 +19,9 @@ export interface OrderedListProps extends BaseListProps {
     start?: number | undefined;
 }
 export type BulletType = "disc" | "circle" | "square" | "none";
+type CustomBulletIcon = Exclude<React.ReactNode, string>;
 export interface UnorderedListProps extends BaseListProps {
     /** Values: "disc" | "circle" | "square" | "none" or custom React.ReactNode icon */
-    bulletType?: BulletType | React.ReactNode | undefined;
+    bulletType?: BulletType | CustomBulletIcon | undefined;
 }
 export {};

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

@@ -1,5 +1,5 @@
 import type { UnorderedListProps } from "./types";
 export declare const UnorderedList: {
-    ({ size, bulletType, bottomMargin, children, ...otherProps }: UnorderedListProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, size, bulletType, bottomMargin, children, ...otherProps }: UnorderedListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/text-list/unordered-list.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as r}from"react/jsx-runtime";import l from"react";import{StyledUnorderedList as o}from"./text-list.styles.js";const n=n=>{var{size:s,bulletType:d,bottomMargin:m,children:a}=n,c=e(n,["size","bulletType","bottomMargin","children"]);const p=void 0!==d&&"string"!=typeof d;return i(o,Object.assign({$size:s,$bulletType:p?void 0:d,$bottomMargin:m,$hasCustomIcon:p},c,{children:p?l.Children.map(a,(e=>l.isValidElement(e)?l.cloneElement(e,{children:t(r,{children:[i("div",{"aria-hidden":!0,children:d}),i("div",{children:e.props.children})]})}):e)):a}))};n.displayName="TextList.Ul";export{n as UnorderedList};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r,Fragment as i}from"react/jsx-runtime";import s from"clsx";import o,{useRef as l}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as m}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as n,listBase as d,unorderedList as p,listSize as a,unorderedListCustomIcon as c}from"./text-list.styles.js";const h=e=>"disc"===e||"circle"===e||"square"===e||"none"===e,u=u=>{var{className:j,size:y,bulletType:f,bottomMargin:b,children:v}=u,x=e(u,["className","size","bulletType","bottomMargin","children"]);const g=l(null),k=void 0!==f&&!h(f);m(g,{[n.listBottomMargin]:`${null!=b?b:0}rem`,[n.unorderedListBulletType]:h(f)?f:null});return t("ul",Object.assign({ref:g,className:s(d,p,y&&a[y],k&&c,j)},x,{children:k?o.Children.map(v,(e=>o.isValidElement(e)?o.cloneElement(e,{children:r(i,{children:[t("div",{"aria-hidden":!0,children:f}),t("div",{children:e.props.children})]})}):e)):v}))};u.displayName="TextList.Ul";export{u as UnorderedList};
 //# sourceMappingURL=unordered-list.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"unordered-list.js","sources":["../../src/text-list/unordered-list.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { StyledUnorderedList } from \"./text-list.styles\";\nimport type { BulletType, UnorderedListProps } from \"./types\";\n\nexport const UnorderedList = ({\n    size,\n    bulletType,\n    bottomMargin,\n    children,\n    ...otherProps\n}: UnorderedListProps) => {\n    const isCustomIcon =\n        bulletType !== undefined && typeof bulletType !== \"string\";\n\n    const renderChildren = () => {\n        if (!isCustomIcon) {\n            return children;\n        }\n\n        return React.Children.map(children, (child) => {\n            if (React.isValidElement<{ children?: React.ReactNode }>(child)) {\n                return React.cloneElement(child, {\n                    children: (\n                        <>\n                            {/* Icon is decorative, hide from screen readers */}\n                            <div aria-hidden>{bulletType}</div>\n                            <div>{child.props.children}</div>\n                        </>\n                    ),\n                });\n            }\n            return child;\n        });\n    };\n\n    return (\n        <StyledUnorderedList\n            $size={size}\n            $bulletType={isCustomIcon ? undefined : (bulletType as BulletType)}\n            $bottomMargin={bottomMargin}\n            $hasCustomIcon={isCustomIcon}\n            {...otherProps}\n        >\n            {renderChildren()}\n        </StyledUnorderedList>\n    );\n};\n\nUnorderedList.displayName = \"TextList.Ul\";\n"],"names":["UnorderedList","_a","size","bulletType","bottomMargin","children","otherProps","__rest","isCustomIcon","undefined","_jsx","StyledUnorderedList","Object","assign","$size","$bulletType","$bottomMargin","$hasCustomIcon","React","Children","map","child","isValidElement","cloneElement","_jsxs","_Fragment","props","displayName"],"mappings":"gMAKO,MAAMA,EAAiBC,IAAA,IAAAC,KAC1BA,EAAIC,WACJA,EAAUC,aACVA,EAAYC,SACZA,GAAQJ,EACLK,EAAUC,EAAAN,EALa,CAAA,OAAA,aAAA,eAAA,aAO1B,MAAMO,OACaC,IAAfN,GAAkD,iBAAfA,EAuBvC,OACIO,EAACC,EAAmBC,OAAAC,OAAA,CAAAC,MACTZ,EAAIa,YACEP,OAAeC,EAAaN,EAAyBa,cACnDZ,EAAYa,eACXT,GACZF,EAAU,CAAAD,SA1BbG,EAIEU,EAAMC,SAASC,IAAIf,GAAWgB,GAC7BH,EAAMI,eAA+CD,GAC9CH,EAAMK,aAAaF,EAAO,CAC7BhB,SACImB,EAAAC,EAAA,CAAApB,SAAA,CAEIK,EAAA,MAAA,CAAA,eAAA,EAAAL,SAAkBF,IAClBO,EAAA,MAAA,CAAAL,SAAMgB,EAAMK,MAAMrB,gBAK3BgB,IAfAhB,IA4BW,EAI9BL,EAAc2B,YAAc"}
+{"version":3,"file":"unordered-list.js","sources":["../../src/text-list/unordered-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./text-list.styles\";\nimport type { BulletType, UnorderedListProps } from \"./types\";\n\nconst isBulletType = (value: unknown): value is BulletType =>\n    value === \"disc\" ||\n    value === \"circle\" ||\n    value === \"square\" ||\n    value === \"none\";\n\nexport const UnorderedList = ({\n    className,\n    size,\n    bulletType,\n    bottomMargin,\n    children,\n    ...otherProps\n}: UnorderedListProps) => {\n    const listRef = useRef<HTMLUListElement>(null);\n    const isCustomIcon = bulletType !== undefined && !isBulletType(bulletType);\n\n    useApplyStyle(listRef, {\n        [styles.tokens.listBottomMargin]: `${bottomMargin ?? 0}rem`,\n        [styles.tokens.unorderedListBulletType]: isBulletType(bulletType)\n            ? bulletType\n            : null,\n    });\n\n    const renderChildren = () => {\n        if (!isCustomIcon) {\n            return children;\n        }\n\n        return React.Children.map(children, (child) => {\n            if (React.isValidElement<{ children?: React.ReactNode }>(child)) {\n                return React.cloneElement(child, {\n                    children: (\n                        <>\n                            {/* Icon is decorative, hide from screen readers */}\n                            <div aria-hidden>{bulletType}</div>\n                            <div>{child.props.children}</div>\n                        </>\n                    ),\n                });\n            }\n            return child;\n        });\n    };\n\n    return (\n        <ul\n            ref={listRef}\n            className={clsx(\n                styles.listBase,\n                styles.unorderedList,\n                size && styles.listSize[size],\n                isCustomIcon && styles.unorderedListCustomIcon,\n                className\n            )}\n            {...otherProps}\n        >\n            {renderChildren()}\n        </ul>\n    );\n};\n\nUnorderedList.displayName = \"TextList.Ul\";\n"],"names":["isBulletType","value","UnorderedList","_a","className","size","bulletType","bottomMargin","children","otherProps","__rest","listRef","useRef","isCustomIcon","undefined","useApplyStyle","styles.tokens","listBottomMargin","unorderedListBulletType","_jsx","Object","assign","ref","clsx","styles.listBase","styles.unorderedList","styles.listSize","styles.unorderedListCustomIcon","React","Children","map","child","isValidElement","cloneElement","_jsxs","_Fragment","props","displayName"],"mappings":"4mBAOA,MAAMA,EAAgBC,GACR,SAAVA,GACU,WAAVA,GACU,WAAVA,GACU,SAAVA,EAESC,EAAiBC,IAAA,IAAAC,UAC1BA,EAASC,KACTA,EAAIC,WACJA,EAAUC,aACVA,EAAYC,SACZA,GAAQL,EACLM,EAAUC,EAAAP,EANa,6DAQ1B,MAAMQ,EAAUC,EAAyB,MACnCC,OAA8BC,IAAfR,IAA6BN,EAAaM,GAE/DS,EAAcJ,EAAS,CACnB,CAACK,EAAcC,kBAAmB,GAAGV,QAAAA,EAAgB,OACrD,CAACS,EAAcE,yBAA0BlB,EAAaM,GAChDA,EACA,OAwBV,OACIa,EAAA,KAAAC,OAAAC,OAAA,CACIC,IAAKX,EACLP,UAAWmB,EACPC,EACAC,EACApB,GAAQqB,EAAgBrB,GACxBQ,GAAgBc,EAChBvB,IAEAK,EAAU,CAAAD,SA9BbK,EAIEe,EAAMC,SAASC,IAAItB,GAAWuB,GAC7BH,EAAMI,eAA+CD,GAC9CH,EAAMK,aAAaF,EAAO,CAC7BvB,SACI0B,EAAAC,EAAA,CAAA3B,SAAA,CAEIW,EAAA,MAAA,CAAA,eAAA,EAAAX,SAAkBF,IAClBa,EAAA,MAAA,CAAAX,SAAMuB,EAAMK,MAAM5B,gBAK3BuB,IAfAvB,IAgCN,EAIbN,EAAcmC,YAAc"}

package/theme/index.js

@@ -1,2 +1,2 @@
-export{ThemeProvider}from"./theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./tokens/border.js";export{Breakpoint}from"./tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./tokens/colour.js";export{ComponentToken}from"./tokens/component.js";export{Font,FontSpec}from"./tokens/font.js";export{MediaQuery}from"./tokens/media-query.js";export{Motion}from"./tokens/motion.js";export{Radius}from"./tokens/radius.js";export{Shadow}from"./tokens/shadow.js";export{Spacing}from"./tokens/spacing.js";export{getInheritedInlineCssVariables,parseCSSVariableValue,parsePxOrRemValue}from"./utils/css-variable.js";export{generateFont}from"./utils/font.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./utils/token-resolver.js";export{useApplyStyle}from"./utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./utils/use-design-token.js";
+export{ThemeProvider}from"./theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./tokens/border.js";export{Breakpoint}from"./tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./tokens/colour.js";export{ComponentToken}from"./tokens/component.js";export{Font,FontSpec}from"./tokens/font.js";export{MediaQuery}from"./tokens/media-query.js";export{Motion}from"./tokens/motion.js";export{Radius}from"./tokens/radius.js";export{Shadow}from"./tokens/shadow.js";export{Spacing}from"./tokens/spacing.js";export{THEME_TYPES}from"./types.js";export{extractFdsCssVariableName,formatUnitValue,getInheritedInlineCssVariables,normalizeCssLengthValue,parseCSSVariableValue,parsePxOrRemValue}from"./utils/css-variable.js";export{generateFont,generateFontProperties}from"./utils/font.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./utils/token-resolver.js";export{useApplyStyle}from"./utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./utils/use-design-token.js";export{DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./utils/use-media-query.js";
 //# sourceMappingURL=index.js.map