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

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{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:f,start:v,bottomMargin:y,children:x}=u,b=e(u,["className","size","counterType","counterSeparator","reversed","start","bottomMargin","children"]);const g=o(null),S=Boolean(v);var k;return s(g,{[m.listBottomMargin]:`${null!=y?y:0}rem`,[m.orderedListCounterStyle]:null!=h?h:null,[m.orderedListCounterSeparator]:(k=null!=j?j:")",`"${k.replace(/"/g,'\\"')}"`),[m.orderedListStartValue]:S?f?v+1:v-1:null}),t("ol",Object.assign({ref:g,reversed:f,start:v,className:r(i,l,d&&a[d],f&&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":"6jBAOA,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 o from"clsx";import s,{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{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:f,bulletType:y,bottomMargin:b,children:v}=u,x=e(u,["className","size","bulletType","bottomMargin","children"]);const g=l(null),k=void 0!==y&&!h(y);m(g,{[n.listBottomMargin]:`${null!=b?b:0}rem`,[n.unorderedListBulletType]:h(y)?y:null});return t("ul",Object.assign({ref:g,className:o(d,p,f&&a[f],k&&c,j)},x,{children:k?s.Children.map(v,(e=>s.isValidElement(e)?s.cloneElement(e,{children:r(i,{children:[t("div",{"aria-hidden":!0,children:y}),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":"kkBAOA,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{getInheritedInlineCssVariables,parseCSSVariableValue,parsePxOrRemValue}from"./utils/css-variable.js";export{generateFont,generateFontProperties}from"./utils/font.js";export{DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,useSafeMaxWidthMediaQuery}from"./utils/media-query.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";
 //# sourceMappingURL=index.js.map

package/theme/styles/a11y-playground.css

@@ -1,11 +1,11 @@
 @import url("./default.css");
 
-/* 
-============================================================================
-PRIMITIVE COLOURS
-============================================================================
-*/
 [data-fds-theme="a11y-playground"] {
+    /* 
+    ============================================================================
+    PRIMITIVE COLOURS
+    ============================================================================
+    */
     --fds-colour-brand-10: #170F39;
     --fds-colour-brand-20: #281C62;
     --fds-colour-brand-30: #38268B;
@@ -94,8 +94,8 @@ PRIMITIVE COLOURS
     --fds-colour-info-90: #D3DFFF;
     --fds-colour-info-95: #E9EFFF;
     --fds-colour-info-100: #F5F8FF;
-    --fds-colour-white: #FFF;
-    --fds-colour-black: #000;
+    --fds-colour-white: #FFFFFF;
+    --fds-colour-black: #000000;
     --fds-colour-primary-inverse: #FEAB10;
 
     /*
@@ -231,6 +231,124 @@ PRIMITIVE COLOURS
     /* focus ring */
     --fds-colour-focus-ring: var(--fds-colour-primary-50);
     --fds-colour-focus-ring-inverse: var(--fds-colour-white);
+
+    /* 
+    ========================================================================
+    COMPONENT TOKENS
+    ========================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-md);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-colour-text-selected-hover
+    );
+
+    /* Footer */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+
+    /* Animation */
+    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
+
+    /* 
+    ========================================================================
+    SHADOW
+    ========================================================================
+    */
+    --fds-shadow-xs-subtle: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-xs-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-xs-focus-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-focus) r g b / 50%);
+    --fds-shadow-xs-error-strong: 0 0 4px 1px
+        rgb(from var(--fds-colour-border-error) r g b / 50%);
+    --fds-shadow-sm-subtle: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-sm-strong: 0 2px 4px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-md-subtle: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-md-strong: 0 2px 8px 0
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+    --fds-shadow-lg-subtle: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 24%);
+    --fds-shadow-lg-strong: 0 2px 12px 1px
+        rgb(from var(--fds-colour-neutral-50) r g b / 50%);
+
+    /* 
+    ============================================================================
+    FONT
+    ============================================================================
+    */
+    --fds-font-variant: no-common-ligatures;
+    --fds-font-heading-size-xxl: 3rem;
+    --fds-font-heading-size-xl: 2.5rem;
+    --fds-font-heading-size-lg: 2rem;
+    --fds-font-heading-size-md: 1.625rem;
+    --fds-font-heading-size-sm: 1.375rem;
+    --fds-font-heading-size-xs: 1.125rem;
+    --fds-font-heading-lh-xxl: 3.5rem;
+    --fds-font-heading-lh-xl: 3rem;
+    --fds-font-heading-lh-lg: 2.5rem;
+    --fds-font-heading-lh-md: 2.25rem;
+    --fds-font-heading-lh-sm: 1.75rem;
+    --fds-font-heading-lh-xs: 1.625rem;
+    --fds-font-heading-ls-xxl: -0.035rem;
+    --fds-font-heading-ls-xl: -0.02rem;
+    --fds-font-heading-ls-lg: -0.02rem;
+    --fds-font-heading-ls-md: 0rem;
+    --fds-font-heading-ls-sm: 0rem;
+    --fds-font-heading-ls-xs: 0rem;
+    --fds-font-weight-light: 300;
+    --fds-font-weight-regular: 400;
+    --fds-font-weight-semibold: 600;
+    --fds-font-weight-bold: 700;
+    --fds-font-family: "Atkinson Hyperlegible Next";
+    --fds-font-body-size-baseline: 1.125rem;
+    --fds-font-body-size-md: 1rem;
+    --fds-font-body-size-sm: 0.875rem;
+    --fds-font-body-size-xs: 0.75rem;
+    --fds-font-body-lh-baseline: 1.625rem;
+    --fds-font-body-lh-md: 1.5rem;
+    --fds-font-body-lh-sm: 1.625rem;
+    --fds-font-body-lh-xs: 1.25rem;
+    --fds-font-body-ls-baseline: 0rem;
+    --fds-font-body-ls-md: 0.009rem;
+    --fds-font-body-ls-sm: 0.008rem;
+    --fds-font-body-ls-xs: 0.008rem;
+    --fds-font-form-label-size: 1.125rem;
+    --fds-font-form-description-size: 1rem;
+    --fds-font-form-label-lh: 1.5rem;
+    --fds-font-form-description-lh: 1.625rem;
+    --fds-font-form-label-ls: 0rem;
+    --fds-font-form-description-ls: 0.009rem;
 }
 
 /* 
@@ -366,96 +484,4 @@ SEMANTIC COLOURS - DARK MODE
     /* focus ring - adjusted for dark mode */
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
-
-    /*
-    ============================================================================
-    COMPONENT TOKENS
-    ============================================================================
-    */
-
-    /* Button */
-    --fds-button-radius: var(--fds-radius-md);
-    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
-    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
-    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
-    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
-    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
-    --fds-button-light-colour-text: var(--fds-colour-text-primary);
-    --fds-button-link-colour-text: var(--fds-colour-text-primary);
-
-    /* Animation */
-    --fds-animation-loading-dots-spinner-colour: var(--fds-colour-icon-primary);
-
-    /* Navbar */
-    --fds-navbar-full-height: 6rem;
-    --fds-navbar-full-logo-height: 2rem;
-    --fds-navbar-compressed-height: 4rem;
-    --fds-navbar-compressed-logo-height: 1.5rem;
-    --fds-navbar-mobile-height: 3.5rem;
-    --fds-navbar-mobile-logo-height: 1.5rem;
-    --fds-navbar-colour-bg: var(--fds-colour-bg);
-    --fds-navbar-colour-icon: var(--fds-colour-icon);
-    --fds-navbar-link-colour-text: var(--fds-colour-text);
-    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
-    --fds-navbar-link-colour-text-selected-hover: var(
-        --fds-text-selected-hover
-    );
-
-    /* Footer */
-    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
-    --fds-footer-colour-text: var(--fds-colour-text);
-    --fds-footer-link-colour-text: var(--fds-colour-text);
-    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
-    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
-    --fds-footer-disclaimer-link-colour-text-hover: var(
-        --fds-colour-text-subtler
-    );
-
-    /* 
-   ============================================================================
-   FONT
-   ============================================================================
-   */
-    --fds-font-variant: no-common-ligatures;
-    --fds-font-heading-size-xxl: 3rem;
-    --fds-font-heading-size-xl: 2.5rem;
-    --fds-font-heading-size-lg: 2rem;
-    --fds-font-heading-size-md: 1.625rem;
-    --fds-font-heading-size-sm: 1.375rem;
-    --fds-font-heading-size-xs: 1.125rem;
-    --fds-font-heading-lh-xxl: 3.5rem;
-    --fds-font-heading-lh-xl: 3rem;
-    --fds-font-heading-lh-lg: 2.5rem;
-    --fds-font-heading-lh-md: 2.25rem;
-    --fds-font-heading-lh-sm: 1.75rem;
-    --fds-font-heading-lh-xs: 1.625rem;
-    --fds-font-heading-ls-xxl: -0.035rem;
-    --fds-font-heading-ls-xl: -0.02rem;
-    --fds-font-heading-ls-lg: -0.02rem;
-    --fds-font-heading-ls-md: 0rem;
-    --fds-font-heading-ls-sm: 0rem;
-    --fds-font-heading-ls-xs: 0rem;
-    --fds-font-weight-light: 300;
-    --fds-font-weight-regular: 400;
-    --fds-font-weight-semibold: 600;
-    --fds-font-weight-bold: 700;
-    --fds-font-family: "Atkinson Hyperlegible Next";
-    --fds-font-body-size-baseline: 1.125rem;
-    --fds-font-body-size-md: 1rem;
-    --fds-font-body-size-sm: 0.875rem;
-    --fds-font-body-size-xs: 0.75rem;
-    --fds-font-body-lh-baseline: 1.625rem;
-    --fds-font-body-lh-md: 1.5rem;
-    --fds-font-body-lh-sm: 1.625rem;
-    --fds-font-body-lh-xs: 1.25rem;
-    --fds-font-body-ls-baseline: 0rem;
-    --fds-font-body-ls-md: 0.009rem;
-    --fds-font-body-ls-sm: 0.008rem;
-    --fds-font-body-ls-xs: 0.008rem;
-    --fds-font-form-label-size: 1.125rem;
-    --fds-font-form-description-size: 1rem;
-    --fds-font-form-label-lh: 1.5rem;
-    --fds-font-form-description-lh: 1.625rem;
-    --fds-font-form-label-ls: 0rem;
-    --fds-font-form-description-ls: 0.009rem;
 }