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

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 { TagProps } from "./types";
+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\";\nimport { Label, Wrapper } from \"./tag.style\";\nimport { 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":"0KAIO,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 { 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").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & 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> & Partial<Pick<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{Radius as o,Font as t,MediaQuery as s,Colour as i,Border as n}from"../theme/index.js";const a=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,a;if("solid"===e.$type)switch(s=i["text-inverse"],e.$color){case"grey":o=i["bg-inverse-subtler"],a=i["bg-inverse-hover"];break;case"green":o=i["bg-success-strong"],a=i["bg-success-strong-hover"];break;case"yellow":o=i["bg-warning-strong"],a=i["bg-warning-strong-hover"];break;case"red":o=i["bg-error-strong"],a=i["bg-error-strong-hover"];break;case"blue":o=i["bg-info-strong"],a=i["bg-info-strong-hover"];break;case"primary":o=i["bg-primary"],a=i["bg-primary-hover"];break;default:o=i["bg-inverse"],a=i["bg-inverse-hover"]}else switch(e.$color){case"grey":o=i["bg-strong"],t=i["border-strong"],s=i["text-subtle"],a=i["bg-hover-neutral-strong"];break;case"green":o=i["bg-success"],t=i["border-success"],s=i["text-success"],a=i["bg-success-hover"];break;case"yellow":o=i["bg-warning"],t=i["border-warning"],s=i["text-warning"],a=i["bg-warning-hover"];break;case"red":o=i["bg-error"],t=i["border-error"],s=i["text-error"],a=i["bg-error-hover"];break;case"blue":o=i["bg-info"],t=i["border-info"],s=i["text-info"],a=i["bg-info-hover"];break;case"primary":o=i["bg-primary-subtlest"],t=i["border-primary"],s=i["text-primary"],a=i["bg-hover"];break;default:o=i.bg,t=i.border,s=i.text,a=i["bg-hover-neutral"]}return r`
-            background: ${o};
-            border: ${n["width-010"]} ${n.solid} ${t};
-            color: ${s};
-            @media (hover: hover) {
-                &:hover {
-                    ${e.$interactive&&a&&`background: ${a(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,a 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\";\nimport { TagColorType, TagType } from \"./types\";\nimport { Border, Colour, Font, MediaQuery, Radius } from \"../theme\";\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: ${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: ${({ $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 = Colour[\"text-inverse\"];\n            switch (props.$color) {\n                case \"grey\":\n                    backgroundColor = Colour[\"bg-inverse-subtler\"];\n                    hoverBackgroundColor = Colour[\"bg-inverse-hover\"];\n                    break;\n                case \"green\":\n                    backgroundColor = Colour[\"bg-success-strong\"];\n                    hoverBackgroundColor = Colour[\"bg-success-strong-hover\"];\n                    break;\n                case \"yellow\":\n                    backgroundColor = Colour[\"bg-warning-strong\"];\n                    hoverBackgroundColor = Colour[\"bg-warning-strong-hover\"];\n                    break;\n                case \"red\":\n                    backgroundColor = Colour[\"bg-error-strong\"];\n                    hoverBackgroundColor = Colour[\"bg-error-strong-hover\"];\n                    break;\n                case \"blue\":\n                    backgroundColor = Colour[\"bg-info-strong\"];\n                    hoverBackgroundColor = Colour[\"bg-info-strong-hover\"];\n                    break;\n                case \"primary\":\n                    backgroundColor = Colour[\"bg-primary\"];\n                    hoverBackgroundColor = Colour[\"bg-primary-hover\"];\n                    break;\n                default:\n                    backgroundColor = Colour[\"bg-inverse\"];\n                    hoverBackgroundColor = Colour[\"bg-inverse-hover\"];\n                    break;\n            }\n        } else {\n            switch (props.$color) {\n                case \"grey\":\n                    backgroundColor = Colour[\"bg-strong\"];\n                    borderColor = Colour[\"border-strong\"];\n                    color = Colour[\"text-subtle\"];\n                    hoverBackgroundColor = Colour[\"bg-hover-neutral-strong\"];\n                    break;\n                case \"green\":\n                    backgroundColor = Colour[\"bg-success\"];\n                    borderColor = Colour[\"border-success\"];\n                    color = Colour[\"text-success\"];\n                    hoverBackgroundColor = Colour[\"bg-success-hover\"];\n                    break;\n                case \"yellow\":\n                    backgroundColor = Colour[\"bg-warning\"];\n                    borderColor = Colour[\"border-warning\"];\n                    color = Colour[\"text-warning\"];\n                    hoverBackgroundColor = Colour[\"bg-warning-hover\"];\n                    break;\n                case \"red\":\n                    backgroundColor = Colour[\"bg-error\"];\n                    borderColor = Colour[\"border-error\"];\n                    color = Colour[\"text-error\"];\n                    hoverBackgroundColor = Colour[\"bg-error-hover\"];\n                    break;\n                case \"blue\":\n                    backgroundColor = Colour[\"bg-info\"];\n                    borderColor = Colour[\"border-info\"];\n                    color = Colour[\"text-info\"];\n                    hoverBackgroundColor = Colour[\"bg-info-hover\"];\n                    break;\n                case \"primary\":\n                    backgroundColor = Colour[\"bg-primary-subtlest\"];\n                    borderColor = Colour[\"border-primary\"];\n                    color = Colour[\"text-primary\"];\n                    hoverBackgroundColor = Colour[\"bg-hover\"];\n                    break;\n                default:\n                    backgroundColor = Colour.bg;\n                    borderColor = Colour.border;\n                    color = Colour.text;\n                    hoverBackgroundColor = Colour[\"bg-hover-neutral\"];\n                    break;\n            }\n        }\n        return css`\n            background: ${backgroundColor};\n            border: ${Border[\"width-010\"]} ${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    ${MediaQuery.MaxWidth.lg} {\n        ${({ $interactive }) => {\n            if ($interactive) {\n                return css`\n                    ${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","Radius","Font","$interactive","props","backgroundColor","borderColor","color","hoverBackgroundColor","$type","Colour","$color","bg","border","text","css","Border","solid","hoverBorderColor","MediaQuery","MaxWidth","lg","Label"],"mappings":"wIAaO,MAAMA,EAAUC,EAAOC,GAAe;qBACxBC,EAAW;;;;MAI1BC,EAAK;;cAEG,EAAGC,kBAAoBA,EAAe,UAAY;;;;;;;;;MASzDC,IACC,IAAIC,EACAC,EACAC,EACAC,EAGJ,GAAoB,UAAhBJ,EAAMK,MAEN,OADAF,EAAQG,EAAO,gBACPN,EAAMO,QACV,IAAK,OACDN,EAAkBK,EAAO,sBACzBF,EAAuBE,EAAO,oBAC9B,MACJ,IAAK,QACDL,EAAkBK,EAAO,qBACzBF,EAAuBE,EAAO,2BAC9B,MACJ,IAAK,SACDL,EAAkBK,EAAO,qBACzBF,EAAuBE,EAAO,2BAC9B,MACJ,IAAK,MACDL,EAAkBK,EAAO,mBACzBF,EAAuBE,EAAO,yBAC9B,MACJ,IAAK,OACDL,EAAkBK,EAAO,kBACzBF,EAAuBE,EAAO,wBAC9B,MACJ,IAAK,UACDL,EAAkBK,EAAO,cACzBF,EAAuBE,EAAO,oBAC9B,MACJ,QACIL,EAAkBK,EAAO,cACzBF,EAAuBE,EAAO,yBAItC,OAAQN,EAAMO,QACV,IAAK,OACDN,EAAkBK,EAAO,aACzBJ,EAAcI,EAAO,iBACrBH,EAAQG,EAAO,eACfF,EAAuBE,EAAO,2BAC9B,MACJ,IAAK,QACDL,EAAkBK,EAAO,cACzBJ,EAAcI,EAAO,kBACrBH,EAAQG,EAAO,gBACfF,EAAuBE,EAAO,oBAC9B,MACJ,IAAK,SACDL,EAAkBK,EAAO,cACzBJ,EAAcI,EAAO,kBACrBH,EAAQG,EAAO,gBACfF,EAAuBE,EAAO,oBAC9B,MACJ,IAAK,MACDL,EAAkBK,EAAO,YACzBJ,EAAcI,EAAO,gBACrBH,EAAQG,EAAO,cACfF,EAAuBE,EAAO,kBAC9B,MACJ,IAAK,OACDL,EAAkBK,EAAO,WACzBJ,EAAcI,EAAO,eACrBH,EAAQG,EAAO,aACfF,EAAuBE,EAAO,iBAC9B,MACJ,IAAK,UACDL,EAAkBK,EAAO,uBACzBJ,EAAcI,EAAO,kBACrBH,EAAQG,EAAO,gBACfF,EAAuBE,EAAO,YAC9B,MACJ,QACIL,EAAkBK,EAAOE,GACzBN,EAAcI,EAAOG,OACrBN,EAAQG,EAAOI,KACfN,EAAuBE,EAAO,oBAI1C,OAAOK,CAAG;0BACQV;sBACJW,EAAO,gBAAgBA,EAAOC,SAASX;qBACxCC;;;sBAGCH,EAAMD,cACRK,GACA,eAAeA,EAAqBJ;sBAClCA,EAAMD,cAzFhBe;;;SA8FH;;MAGHC,EAAWC,SAASC;UAChB,EAAGlB,mBACD,GAAIA,EACA,OAAOY,CAAG;sBACJb,EAAK;;iBAGf;;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 React from "react";
+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

@@ -1,2 +1,2 @@
-import{UnorderedList as r}from"./unordered-list.js";import{OrderedList as o}from"./ordered-list.js";const t={Ul:r,Ol:o};export{t as TextList};
+import{OrderedList as r}from"./ordered-list.js";import{UnorderedList as o}from"./unordered-list.js";const t={Ul:o,Ol:r};export{t as TextList};
 //# sourceMappingURL=index.js.map

package/text-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/text-list/index.ts"],"sourcesContent":["import { UnorderedList } from \"./unordered-list\";\nimport { OrderedList } from \"./ordered-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 { OrderedListProps } from "./types";
+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 { 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 { TypographySizeType } from "../theme/font/types";
-import { BulletType, CounterType } from "./types";
-interface ListStyleProps {
-    $bottomMargin: number | undefined;
-    $size: 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").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, keyof OrderedListStyleProps> & OrderedListStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, keyof OrderedListStyleProps> & OrderedListStyleProps, never>>> & string;
-export declare const StyledUnorderedList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof UnorderedListStyleProps> & UnorderedListStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, keyof UnorderedListStyleProps> & UnorderedListStyleProps, never>>> & 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{Font as o,Colour as r,MediaQuery as i}from"../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

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\";\nimport { Colour, Font, MediaQuery } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { BulletType, CounterType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListStyleProps {\n    $bottomMargin: number | undefined;\n    $size: 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 && Font[`${props.$size}-regular`]}\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 StyledOrderedList = styled.ol<OrderedListStyleProps>`\n    ${baseStyle}\n\n    margin-left: 3em;\n\n    ${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","Font","Spec","Colour","text","StyledOrderedList","styled","ol","MediaQuery","MaxWidth","lg","reversed","counterType","$counterType","counterSeparator","$counterSeparator","start","StyledUnorderedList","ul","$hasCustomIcon","$bulletType"],"mappings":"gHA0BA,MAAMA,EAAYC,CAAmB;qBACfC,GAAUA,EAAMC,eAAiB;;;;;MAKhDD,GAAUA,EAAME,OAASC,EAAK,GAAGH,EAAME;mBAC3BC,EAAKC,KAAK;aAChBC,EAAOC;;;;;;;;EAUPC,EAAoBC,EAAOC,EAAyB;MAC3DX;;;;MAIAY,EAAWC,SAASC;;;;;;;;MAQnBZ,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":"+DAKO,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_w3fvyt.css

@@ -0,0 +1,16 @@
+@layer fds{.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-heading);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-heading);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-heading);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-heading);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-heading);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-heading);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-body);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-body);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-body);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-body);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,25 +1,56 @@
-import { TypographySizeType } from "../theme/font/types";
+import type { FontSize } from "../theme";
+/**
+ * Text size tokens available for list content.
+ */
+export type TextListSize = Exclude<FontSize, "form-label" | "form-description">;
+/** Shared props for both ordered and unordered text list variants. */
 interface BaseListProps {
     children: JSX.Element | JSX.Element[];
+    /** Bottom margin in pixels applied to each list item except the last. */
     bottomMargin?: number | undefined;
-    size?: TypographySizeType | undefined;
+    /** Text size applied to the list content. */
+    size?: TextListSize | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
 }
+/** Counter style applied to each item in an ordered list. */
 export type CounterType = "lower-alpha" | "decimal" | "lower-roman";
+/**
+ * Props for the `TextList.Ol` component.
+ */
 export interface OrderedListProps extends BaseListProps {
-    /**  Values: "lower-alpha" | "decimal" | "lower-roman" */
+    /**
+     * Counter style applied to each list item.
+     *
+     * @default "decimal"
+     */
     counterType?: CounterType | undefined;
+    /**
+     * Character or string rendered after each counter value.
+     *
+     * @default ")"
+     */
     counterSeparator?: string | undefined;
-    /** Specifies if the list counter decrements */
+    /** The counter is decremented from the start value instead of incremented. */
     reversed?: boolean | undefined;
-    /** The value to start the list count from */
+    /** The value to start the list count from. */
     start?: number | undefined;
 }
+/** Predefined bullet marker style for an unordered list. */
 export type BulletType = "disc" | "circle" | "square" | "none";
+type CustomBulletIcon = Exclude<React.ReactNode, string>;
+/**
+ * Props for the `TextList.Ul` component.
+ */
 export interface UnorderedListProps extends BaseListProps {
-    /** Values: "disc" | "circle" | "square" | "none" or custom React.ReactNode icon */
-    bulletType?: BulletType | React.ReactNode | undefined;
+    /**
+     * Marker style for list items. Pass a `BulletType` token for a predefined
+     * marker, or any React node to render a custom decorative icon before each
+     * item's content.
+     *
+     * @default "disc"
+     */
+    bulletType?: BulletType | CustomBulletIcon | undefined;
 }
 export {};

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

@@ -1,5 +1,5 @@
-import { UnorderedListProps } from "./types";
+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