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

package/tab/tab-link-chain.styles.js

@@ -1,2 +1,2 @@
-import"./tab-link-chain.styles_1nreqrp.css";const c={chainItem:{width:"--fds-internal-tab-chainItem-width"}},t="c16oikpn",i="c2536gp",n="c1c3wbud",s="cdfiwt",d="fxd8c9t",a="c1gdrjx",e="cj41vce",l="lmiq2g0",r="l1yi6azs",b="d97pn0z",h="d1v8j9lw",p="s5l4m4t",m="shqgesl",w="c1r7bbxk";export{t as chain,i as chainFullWidthIndicator,n as chainItem,s as chainItemActive,a as chainLink,e as chainLinkReversed,w as customFadeWrapper,b as deselectedLabel,h as deselectedLabelActive,d as flexRow,r as label,l as labelContainer,p as selectedLabel,m as selectedLabelActive,c as tokens};
+import"./tab-link-chain.styles_49got4.css";const t={chainItem:{width:"--fds-internal-tab-chainItem-width"}},c="c16oikpn",i="c2536gp",s="c1c3wbud",d="cdfiwt",n="fxd8c9t",a="c1gdrjx",l="cj41vce",e="lmiq2g0",b="l1yi6azs",h="d97pn0z",g="d1v8j9lw",m="s5l4m4t",o="shqgesl",p="c1r7bbxk";export{c as chain,i as chainFullWidthIndicator,s as chainItem,d as chainItemActive,a as chainLink,l as chainLinkReversed,p as customFadeWrapper,h as deselectedLabel,g as deselectedLabelActive,n as flexRow,b as label,e as labelContainer,m as selectedLabel,o as selectedLabelActive,t as tokens};
 //# sourceMappingURL=tab-link-chain.styles.js.map

package/tab/tab-link-chain.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.styles.js","sources":["../../src/tab/tab-link-chain.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    chainItem: {\n        width: \"--fds-internal-tab-chainItem-width\",\n    },\n};\n\nexport const chain = css`\n    display: inline-flex;\n    width: 100%;\n    list-style-type: none;\n`;\n\nexport const chainFullWidthIndicator = css`\n    &::after {\n        content: \"\";\n        height: inherit;\n        flex-grow: 1;\n        /* follows the border in ChainItem */\n        border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const chainItem = css`\n    display: flex;\n    justify-content: center;\n    flex-shrink: 0;\n    border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    ${tokens.chainItem.width}: initial;\n    width: var(${tokens.chainItem.width}, auto);\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n        justify-content: center;\n    }\n`;\n\nexport const chainItemActive = css`\n    border-color: ${Colour[\"border-primary\"]};\n`;\n\nexport const flexRow = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const chainLink = css`\n    /* position: relative; */\n    flex-direction: row;\n    gap: 0.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-20\"]};\n    cursor: pointer;\n    width: 100%;\n    justify-content: center;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n        border-radius: ${Radius.sm};\n    }\n`;\n\nexport const chainLinkReversed = css`\n    flex-direction: row-reverse;\n`;\n\nexport const labelContainer = css`\n    position: relative;\n`;\n\nexport const label = css`\n    border: none;\n    background: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const deselectedLabel = css`\n    position: absolute;\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n    opacity: 1;\n`;\n\nexport const deselectedLabelActive = css`\n    opacity: 0;\n`;\n\nexport const selectedLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    opacity: 0;\n    outline: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const selectedLabelActive = css`\n    opacity: 1;\n`;\n\nexport const customFadeWrapper = css`\n    [data-id=\"left-fade-indicator-button\"],\n    [data-id=\"right-fade-indicator-button\"] {\n        margin-bottom: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["tokens","chainItem","width","chain","chainFullWidthIndicator","chainItemActive","flexRow","chainLink","chainLinkReversed","labelContainer","label","deselectedLabel","deselectedLabelActive","selectedLabel","selectedLabelActive","customFadeWrapper"],"mappings":"+DAWO,MAAMA,EAAS,CAClBC,UAAW,CACPC,MAAO,uCAIFC,EAAK,WAMLC,EAAuB,UAUvBH,EAAS,WAcTI,EAAe,SAIfC,EAAO,UAMPC,EAAS,UAiBTC,EAAiB,UAIjBC,EAAc,UAIdC,EAAK,WAYLC,EAAe,UAOfC,EAAqB,WAIrBC,EAAa,UAcbC,EAAmB,UAInBC,EAAiB"}
+{"version":3,"file":"tab-link-chain.styles.js","sources":["../../src/tab/tab-link-chain.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    chainItem: {\n        width: \"--fds-internal-tab-chainItem-width\",\n    },\n};\n\nexport const chain = css`\n    display: inline-flex;\n    width: 100%;\n    list-style-type: none;\n`;\n\nexport const chainFullWidthIndicator = css`\n    &::after {\n        content: \"\";\n        height: inherit;\n        flex-grow: 1;\n        /* follows the border in ChainItem */\n        border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const chainItem = css`\n    display: flex;\n    justify-content: center;\n    flex-shrink: 0;\n    border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    ${tokens.chainItem.width}: initial;\n    width: var(${tokens.chainItem.width}, auto);\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n        justify-content: center;\n    }\n`;\n\nexport const chainItemActive = css`\n    border-color: ${Colour[\"border-primary\"]};\n`;\n\nexport const flexRow = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const chainLink = css`\n    /* position: relative; */\n    flex-direction: row;\n    gap: 0.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-20\"]};\n    cursor: pointer;\n    width: 100%;\n    justify-content: center;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n        border-radius: ${Radius.sm};\n    }\n`;\n\nexport const chainLinkReversed = css`\n    flex-direction: row-reverse;\n`;\n\nexport const labelContainer = css`\n    position: relative;\n`;\n\nexport const label = css`\n    border: none;\n    background: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const deselectedLabel = css`\n    position: absolute;\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n    opacity: 1;\n`;\n\nexport const deselectedLabelActive = css`\n    opacity: 0;\n`;\n\nexport const selectedLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    opacity: 0;\n    outline: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const selectedLabelActive = css`\n    opacity: 1;\n`;\n\nexport const customFadeWrapper = css`\n    [data-id=\"left-fade-indicator-button\"],\n    [data-id=\"right-fade-indicator-button\"] {\n        margin-bottom: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["tokens","chainItem","width","chain","chainFullWidthIndicator","chainItemActive","flexRow","chainLink","chainLinkReversed","labelContainer","label","deselectedLabel","deselectedLabelActive","selectedLabel","selectedLabelActive","customFadeWrapper"],"mappings":"8DAWO,MAAMA,EAAS,CAClBC,UAAW,CACPC,MAAO,uCAIFC,EAAK,WAMLC,EAAuB,UAUvBH,EAAS,WAcTI,EAAe,SAIfC,EAAO,UAMPC,EAAS,UAiBTC,EAAiB,UAIjBC,EAAc,UAIdC,EAAK,WAYLC,EAAe,UAOfC,EAAqB,WAIrBC,EAAa,UAcbC,EAAmB,UAInBC,EAAiB"}

package/tab/tab-link-chain.styles_49got4.css

@@ -0,0 +1,14 @@
+.c16oikpn{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;list-style-type:none;}
+.c2536gp::after{content:"";height:inherit;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c1c3wbud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);--fds-internal-tab-chainItem-width:initial;width:var(--fds-internal-tab-chainItem-width, auto);}:where(body.fds-breakpoint-sm-max) .c1c3wbud{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.cdfiwt{border-color:var(--fds-colour-border-primary);}
+.fxd8c9t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.c1gdrjx{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:0.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-16) var(--fds-spacing-20);cursor:pointer;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.c1gdrjx:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;border-radius:var(--fds-radius-sm);}
+.cj41vce{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.lmiq2g0{position:relative;}
+.l1yi6azs{border:none;background:none;}:where(body.fds-breakpoint-sm-max) .l1yi6azs{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.d97pn0z{position:absolute;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);color:var(--fds-colour-text-subtler);opacity:1;}
+.d1v8j9lw{opacity:0;}
+.s5l4m4t{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-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-primary);opacity:0;outline:none;}:where(body.fds-breakpoint-sm-max) .s5l4m4t{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.shqgesl{opacity:1;}
+.c1r7bbxk [data-id="left-fade-indicator-button"],.c1r7bbxk [data-id="right-fade-indicator-button"]{margin-bottom:var(--fds-spacing-4);}

package/tag/tag.style.js

@@ -1,2 +1,2 @@
-import"./tag.style_10tn8i.css";const w="w6gjrz2",t="w3k7rkk",k="w1bpyu8a",a="wq3qkg6",g="w12fv5tt",o="w1358sxl",s="w1oi4bgz",i="wpja2at",p="wgwk3g6",r="wb0avxu",b="wn4wzi4",c="wyfwkab",j="wocomht",y="w17cj89j",_="wutpo14",l="w1t1mrk9",m="l1sykhdi";export{m as label,w as wrapper,t as wrapperInteractive,l as wrapperOutlineBlack,y as wrapperOutlineBlue,b as wrapperOutlineGreen,r as wrapperOutlineGrey,_ as wrapperOutlinePrimary,j as wrapperOutlineRed,c as wrapperOutlineYellow,p as wrapperSolidBlack,s as wrapperSolidBlue,a as wrapperSolidGreen,k as wrapperSolidGrey,i as wrapperSolidPrimary,o as wrapperSolidRed,g as wrapperSolidYellow};
+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_d98c53.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-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/text-list/ordered-list.js

@@ -1,2 +1,2 @@
-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};
+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 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"}
+{"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.js

@@ -1,2 +1,2 @@
-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};
+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.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"}
+{"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 @@
+.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/unordered-list.js

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

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

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

package/theme/index.d.ts

@@ -2,4 +2,7 @@ export { ThemeProvider } from "./theme-provider";
 export { useInheritedThemeScope, useTheme } from "./theme-provider/hooks";
 export * from "./tokens";
 export * from "./types";
-export * from "./utils";
+export { formatUnitValue, parsePxOrRemValue } from "./utils/css-variable";
+export { useApplyStyle } from "./utils/use-apply-styles";
+export { useDesignToken } from "./utils/use-design-token";
+export { useMaxWidthMediaQuery, useMediaQuery, useMinWidthMediaQuery, useResolvedBreakpointToken, } from "./utils/use-media-query";

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{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";
+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{formatUnitValue,parsePxOrRemValue}from"./utils/css-variable.js";export{useApplyStyle}from"./utils/use-apply-styles.js";export{useDesignToken}from"./utils/use-design-token.js";export{useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./utils/use-media-query.js";
 //# sourceMappingURL=index.js.map

package/theme/styles/a11y-playground.css

@@ -110,7 +110,11 @@
     --fds-colour-text-subtler: var(--fds-colour-neutral-50);
     --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
     --fds-colour-text-primary: var(--fds-colour-primary-50);
+    --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
+    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-60);
     --fds-colour-text-hover: var(--fds-colour-primary-40);
     --fds-colour-text-selected: var(--fds-colour-primary-50);
     --fds-colour-text-selected-hover: var(--fds-colour-primary-40);
@@ -131,6 +135,9 @@
     --fds-colour-icon-primary: var(--fds-colour-primary-50);
     --fds-colour-icon-primary-subtle: var(--fds-colour-primary-60);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-70);
+    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-60);
     --fds-colour-icon-hover: var(--fds-colour-primary-40);
     --fds-colour-icon-selected: var(--fds-colour-primary-50);
     --fds-colour-icon-selected-hover: var(--fds-colour-primary-40);
@@ -150,6 +157,7 @@
     --fds-colour-border-strong: var(--fds-colour-neutral-70);
     --fds-colour-border-stronger: var(--fds-colour-neutral-50);
     --fds-colour-border-primary: var(--fds-colour-primary-50);
+    --fds-colour-border-primary-strong: var(--fds-colour-primary-40);
     --fds-colour-border-primary-subtle: var(--fds-colour-primary-60);
     --fds-colour-border-hover: var(--fds-colour-primary-90);
     --fds-colour-border-hover-strong: var(--fds-colour-primary-60);
@@ -210,11 +218,17 @@
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-60);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
     --fds-colour-bg-primary: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
     --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
     --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
     --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
     --fds-colour-bg-available: #6DD0A1;
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-30);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-90);
     --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-90);
 
@@ -330,7 +344,8 @@
     --fds-font-weight-regular: 400;
     --fds-font-weight-semibold: 600;
     --fds-font-weight-bold: 700;
-    --fds-font-family: "Atkinson Hyperlegible Next";
+    --fds-font-family-heading: "Atkinson Hyperlegible Next";
+    --fds-font-family-body: "Atkinson Hyperlegible Next";
     --fds-font-body-size-baseline: 1.125rem;
     --fds-font-body-size-md: 1rem;
     --fds-font-body-size-sm: 0.875rem;
@@ -363,7 +378,11 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-text-subtler: var(--fds-colour-neutral-60);
     --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
     --fds-colour-text-primary: var(--fds-colour-primary-60);
+    --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
+    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-text-hover: var(--fds-colour-primary-70);
     --fds-colour-text-selected: var(--fds-colour-primary-60);
     --fds-colour-text-selected-hover: var(--fds-colour-primary-70);
@@ -384,6 +403,9 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-icon-primary: var(--fds-colour-primary-60);
     --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
+    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-icon-hover: var(--fds-colour-primary-70);
     --fds-colour-icon-selected: var(--fds-colour-primary-60);
     --fds-colour-icon-selected-hover: var(--fds-colour-primary-70);
@@ -403,6 +425,7 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-border-strong: var(--fds-colour-neutral-40);
     --fds-colour-border-stronger: var(--fds-colour-neutral-60);
     --fds-colour-border-primary: var(--fds-colour-primary-60);
+    --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
     --fds-colour-border-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-border-hover: var(--fds-colour-primary-20);
     --fds-colour-border-hover-strong: var(--fds-colour-primary-50);
@@ -463,11 +486,17 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
     --fds-colour-bg-primary: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
     --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
     --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
     --fds-colour-bg-available: #185339;
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
     --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-20);
 

package/theme/styles/bookingsg.css

@@ -110,7 +110,11 @@
     --fds-colour-text-subtler: var(--fds-colour-neutral-50);
     --fds-colour-text-subtlest: var(--fds-colour-neutral-60);
     --fds-colour-text-primary: var(--fds-colour-primary-50);
+    --fds-colour-text-primary-strong: var(--fds-colour-primary-40);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-20);
+    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-60);
     --fds-colour-text-hover: var(--fds-colour-primary-40);
     --fds-colour-text-selected: var(--fds-colour-primary-50);
     --fds-colour-text-selected-hover: var(--fds-colour-primary-40);
@@ -131,6 +135,9 @@
     --fds-colour-icon-primary: var(--fds-colour-primary-50);
     --fds-colour-icon-primary-subtle: var(--fds-colour-primary-60);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-70);
+    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-60);
     --fds-colour-icon-hover: var(--fds-colour-primary-40);
     --fds-colour-icon-selected: var(--fds-colour-primary-50);
     --fds-colour-icon-selected-hover: var(--fds-colour-primary-40);
@@ -150,6 +157,7 @@
     --fds-colour-border-strong: var(--fds-colour-neutral-70);
     --fds-colour-border-stronger: var(--fds-colour-neutral-50);
     --fds-colour-border-primary: var(--fds-colour-primary-50);
+    --fds-colour-border-primary-strong: var(--fds-colour-primary-40);
     --fds-colour-border-primary-subtle: var(--fds-colour-primary-60);
     --fds-colour-border-hover: var(--fds-colour-primary-90);
     --fds-colour-border-hover-strong: var(--fds-colour-primary-60);
@@ -210,11 +218,17 @@
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-60);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-40);
     --fds-colour-bg-primary: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-40);
     --fds-colour-bg-primary-subtle: var(--fds-colour-primary-60);
     --fds-colour-bg-primary-subtler: var(--fds-colour-primary-95);
     --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-100);
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-95);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-100);
     --fds-colour-bg-available: #6DD0A1;
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-40);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-30);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-90);
     --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-90);
 
@@ -330,7 +344,8 @@
     --fds-font-weight-regular: 400;
     --fds-font-weight-semibold: 600;
     --fds-font-weight-bold: 700;
-    --fds-font-family: "Plus Jakarta Sans";
+    --fds-font-family-heading: "Plus Jakarta Sans";
+    --fds-font-family-body: "Plus Jakarta Sans";
     --fds-font-body-size-baseline: 1.125rem;
     --fds-font-body-size-md: 1rem;
     --fds-font-body-size-sm: 0.875rem;
@@ -363,7 +378,11 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-text-subtler: var(--fds-colour-neutral-60);
     --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
     --fds-colour-text-primary: var(--fds-colour-primary-60);
+    --fds-colour-text-primary-strong: var(--fds-colour-primary-70);
     --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
+    --fds-colour-text-brand: var(--fds-colour-brand-50);
+    --fds-colour-text-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-text-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-text-hover: var(--fds-colour-primary-70);
     --fds-colour-text-selected: var(--fds-colour-primary-60);
     --fds-colour-text-selected-hover: var(--fds-colour-primary-70);
@@ -384,6 +403,9 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-icon-primary: var(--fds-colour-primary-60);
     --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
+    --fds-colour-icon-brand: var(--fds-colour-brand-50);
+    --fds-colour-icon-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-icon-secondary-subtle: var(--fds-colour-secondary-50);
     --fds-colour-icon-hover: var(--fds-colour-primary-70);
     --fds-colour-icon-selected: var(--fds-colour-primary-60);
     --fds-colour-icon-selected-hover: var(--fds-colour-primary-70);
@@ -403,6 +425,7 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-border-strong: var(--fds-colour-neutral-40);
     --fds-colour-border-stronger: var(--fds-colour-neutral-60);
     --fds-colour-border-primary: var(--fds-colour-primary-60);
+    --fds-colour-border-primary-strong: var(--fds-colour-primary-70);
     --fds-colour-border-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-border-hover: var(--fds-colour-primary-20);
     --fds-colour-border-hover-strong: var(--fds-colour-primary-50);
@@ -463,11 +486,17 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
     --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
     --fds-colour-bg-primary: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-strong: var(--fds-colour-primary-70);
     --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
     --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
     --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
     --fds-colour-bg-available: #185339;
+    --fds-colour-bg-secondary: var(--fds-colour-secondary-60);
+    --fds-colour-bg-secondary-subtle: var(--fds-colour-secondary-50);
+    --fds-colour-bg-secondary-subtler: var(--fds-colour-secondary-20);
+    --fds-colour-bg-secondary-subtlest: var(--fds-colour-secondary-10);
     --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-strong-hover: var(--fds-colour-primary-80);
     --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
     --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-20);