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

package/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const tableWrapper = css`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    &::-webkit-scrollbar {\n        display: none;\n    }\n    * {\n        -ms-overflow-style: none; /* IE and Edge */\n        scrollbar-width: none; /* Firefox */\n    }\n`;\n\nexport const tableComponent = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const tableBody = css`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const headerCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const bodyCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["tableWrapper","tableComponent","tableBody","headerCell","bodyRow","bodyCell"],"mappings":"wDAaO,MAAMA,EAAY,UAeZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}
+{"version":3,"file":"table.styles.js","sources":["../../src/table/table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = Colour[\"border\"];\nconst fontColor = Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const tableWrapper = css`\n    overflow: auto;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n    border-radius: ${Radius[\"md\"]};\n\n    /* Hide scrollbar */\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const tableComponent = css`\n    text-align: left;\n    border-collapse: separate;\n    border-spacing: 0;\n    width: 100%;\n`;\n\nexport const tableBody = css`\n    :where(tr:last-child) {\n        td {\n            border-bottom: none;\n        }\n    }\n`;\n\nexport const headerCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    text-align: left;\n    cursor: default;\n    vertical-align: middle;\n    color: ${fontColor};\n    background-color: ${Colour[\"bg-stronger\"]};\n    height: 6rem;\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n\nexport const bodyRow = css`\n    background-color: ${Colour[\"bg\"]};\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n`;\n\nexport const bodyCell = css`\n    padding: ${Spacing[\"spacing-20\"]} ${Spacing[\"spacing-16\"]};\n    vertical-align: middle;\n    color: ${fontColor};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${borderColor};\n\n    &:where(&:first-child) {\n        padding-left: ${Spacing[\"spacing-24\"]};\n    }\n    &:where(&:last-child) {\n        padding-right: ${Spacing[\"spacing-24\"]};\n    }\n`;\n"],"names":["tableWrapper","tableComponent","tableBody","headerCell","bodyRow","bodyCell"],"mappings":"wDAaO,MAAMA,EAAY,UAaZC,EAAc,WAOdC,EAAS,UAQTC,EAAU,UAkBVC,EAAO,WAKPC,EAAQ"}

package/table/{table.styles_1af5ipv.css → table.styles_1vjx31g.css}

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

package/tag/tag.d.ts

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

package/tag/tag.js.map

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

package/tag/tag.style_d98c53.css

@@ -1,4 +1,4 @@
-.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;}
+@layer fds{.w6gjrz2{border-radius:var(--fds-radius-sm);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:default;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;}.w6gjrz2 svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .w3k7rkk{cursor:pointer;}:where(body.fds-breakpoint-lg-max) .w3k7rkk{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);padding:calc(0.5rem - 1px) 1rem;}
 .w1bpyu8a{background:var(--fds-colour-bg-inverse-subtler);color:var(--fds-colour-text-inverse);}@media (hover: hover){.w1bpyu8a.w3k7rkk:hover{background:var(--fds-colour-bg-inverse-hover);}}
 .wq3qkg6{background:var(--fds-colour-bg-success-strong);color:var(--fds-colour-text-inverse);}@media (hover: hover){.wq3qkg6.w3k7rkk:hover{background:var(--fds-colour-bg-success-strong-hover);}}
@@ -14,4 +14,4 @@
 .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;}
+.l1sykhdi{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}}

package/tag/types.d.ts

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

package/text-list/index.d.ts

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

package/text-list/index.js.map

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

package/text-list/text-list.styles_w3fvyt.css

@@ -1,4 +1,4 @@
-.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;}
+@layer fds{.l1oajjj5{--fds-internal-textList-list-bottomMargin:0rem;margin-bottom:var(--fds-internal-textList-list-bottomMargin);counter-reset:list;font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);}.l1oajjj5 ol,.l1oajjj5 ul{margin-top:0.5rem;margin-bottom:0.5rem;}
 .h1cidf62{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xxl);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xxl);letter-spacing:var(--fds-font-heading-ls-xxl);}
 .hzza2og{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xl);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-xl);letter-spacing:var(--fds-font-heading-ls-xl);}
 .hvh12um{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-lg);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-heading-lh-lg);letter-spacing:var(--fds-font-heading-ls-lg);}
@@ -13,4 +13,4 @@
 .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;}
+.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,27 +1,56 @@
 import type { FontSize } from "../theme";
+/**
+ * Text size tokens available for list content.
+ */
 export type TextListSize = Exclude<FontSize, "form-label" | "form-description">;
+/** Shared props for both ordered and unordered text list variants. */
 interface BaseListProps {
     children: JSX.Element | JSX.Element[];
+    /** Bottom margin in pixels applied to each list item except the last. */
     bottomMargin?: number | undefined;
+    /** Text size applied to the list content. */
     size?: TextListSize | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
 }
+/** Counter style applied to each item in an ordered list. */
 export type CounterType = "lower-alpha" | "decimal" | "lower-roman";
+/**
+ * Props for the `TextList.Ol` component.
+ */
 export interface OrderedListProps extends BaseListProps {
-    /**  Values: "lower-alpha" | "decimal" | "lower-roman" */
+    /**
+     * Counter style applied to each list item.
+     *
+     * @default "decimal"
+     */
     counterType?: CounterType | undefined;
+    /**
+     * Character or string rendered after each counter value.
+     *
+     * @default ")"
+     */
     counterSeparator?: string | undefined;
-    /** Specifies if the list counter decrements */
+    /** The counter is decremented from the start value instead of incremented. */
     reversed?: boolean | undefined;
-    /** The value to start the list count from */
+    /** The value to start the list count from. */
     start?: number | undefined;
 }
+/** Predefined bullet marker style for an unordered list. */
 export type BulletType = "disc" | "circle" | "square" | "none";
 type CustomBulletIcon = Exclude<React.ReactNode, string>;
+/**
+ * Props for the `TextList.Ul` component.
+ */
 export interface UnorderedListProps extends BaseListProps {
-    /** Values: "disc" | "circle" | "square" | "none" or custom React.ReactNode icon */
+    /**
+     * Marker style for list items. Pass a `BulletType` token for a predefined
+     * marker, or any React node to render a custom decorative icon before each
+     * item's content.
+     *
+     * @default "disc"
+     */
     bulletType?: BulletType | CustomBulletIcon | undefined;
 }
 export {};

package/theme/styles/a11y-playground.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 [data-fds-theme="a11y-playground"] {
     /* 
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/bookingsg.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 [data-fds-theme="bookingsg"] {
     /*
@@ -333,7 +334,7 @@
     --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.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;
@@ -350,10 +351,10 @@
     --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.75rem;
+    --fds-font-body-lh-baseline: 1.625rem;
     --fds-font-body-lh-md: 1.5rem;
-    --fds-font-body-lh-sm: 1.6rem;
-    --fds-font-body-lh-xs: 1.2rem;
+    --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;
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/careercompass.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 [data-fds-theme="careercompass"] {
     /*
@@ -333,7 +334,7 @@
     --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.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;
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/ccube.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 /*
 ============================================================================
@@ -465,3 +466,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/default.css

@@ -1,3 +1,5 @@
+
+@layer fds {
 :root {
     /* 
     ========================================================================
@@ -86,7 +88,7 @@
     --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-sm: 1.25rem;
     --fds-font-body-lh-xs: 1.25rem;
     --fds-font-body-ls-baseline: 0rem;
     --fds-font-body-ls-md: 0.009rem;
@@ -94,10 +96,10 @@
     --fds-font-body-ls-xs: 0.008rem;
     --fds-font-form-label-size: 1rem;
     --fds-font-form-description-size: 0.875rem;
-    --fds-font-form-label-lh: 1.5rem;
-    --fds-font-form-description-lh: 1.625rem;
-    --fds-font-form-label-ls: 0.009rem;
-    --fds-font-form-description-ls: 0.008rem;
+    --fds-font-form-label-lh: 1.375rem;
+    --fds-font-form-description-lh: 1.25rem;
+    --fds-font-form-label-ls: 0rem;
+    --fds-font-form-description-ls: 0rem;
 
     /* 
     ========================================================================
@@ -152,3 +154,5 @@
     --fds-radius-lg: 12px;
     --fds-radius-full: 9999px;
 }
+
+}

package/theme/styles/imda.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 [data-fds-theme="imda"] {
     /*
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/lifesg.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 /*
 ============================================================================
@@ -506,3 +507,5 @@ SEMANTIC COLOURS - DARK MODE
         --fds-colour-text-subtler
     );
 }
+
+}

package/theme/styles/mylegacy.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 [data-fds-theme="mylegacy"] {
     /*
@@ -358,12 +359,12 @@
     --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: 1rem;
-    --fds-font-form-description-size: 0.875rem;
+    --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: 0.009rem;
-    --fds-font-form-description-ls: 0.008rem;
+    --fds-font-form-label-ls: 0rem;
+    --fds-font-form-description-ls: 0.009rem;
 }
 
 /* 
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/oneservice.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 [data-fds-theme="oneservice"] {
     /*
@@ -315,6 +316,55 @@
         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: normal;
+    --fds-font-heading-size-xxl: 2.5rem;
+    --fds-font-heading-size-xl: 2rem;
+    --fds-font-heading-size-lg: 1.75rem;
+    --fds-font-heading-size-md: 1.375rem;
+    --fds-font-heading-size-sm: 1.125rem;
+    --fds-font-heading-size-xs: 1rem;
+    --fds-font-heading-lh-xxl: 3.5rem;
+    --fds-font-heading-lh-xl: 3rem;
+    --fds-font-heading-lh-lg: 2.625rem;
+    --fds-font-heading-lh-md: 2rem;
+    --fds-font-heading-lh-sm: 1.625rem;
+    --fds-font-heading-lh-xs: 1.5rem;
+    --fds-font-heading-ls-xxl: 0rem;
+    --fds-font-heading-ls-xl: 0rem;
+    --fds-font-heading-ls-lg: 0rem;
+    --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-heading: "Open Sans";
+    --fds-font-family-body: "Open Sans";
+    --fds-font-body-size-baseline: 1rem;
+    --fds-font-body-size-md: 0.875rem;
+    --fds-font-body-size-sm: 0.75rem;
+    --fds-font-body-size-xs: 0.75rem;
+    --fds-font-body-lh-baseline: 1.5rem;
+    --fds-font-body-lh-md: 1.313rem;
+    --fds-font-body-lh-sm: 1.125rem;
+    --fds-font-body-lh-xs: 1.125rem;
+    --fds-font-body-ls-baseline: 0rem;
+    --fds-font-body-ls-md: 0rem;
+    --fds-font-body-ls-sm: 0rem;
+    --fds-font-body-ls-xs: 0rem;
+    --fds-font-form-label-size: 0.875rem;
+    --fds-font-form-description-size: 0.875rem;
+    --fds-font-form-label-lh: 1.313rem;
+    --fds-font-form-description-lh: 1.313rem;
+    --fds-font-form-label-ls: 0rem;
+    --fds-font-form-description-ls: 0rem;
 }
 
 /*
@@ -465,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/pa.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 /*
 ============================================================================
@@ -555,3 +556,5 @@ SEMANTIC COLOURS - DARK MODE
         --fds-colour-text-subtler
     );
 }
+
+}

package/theme/styles/rbs.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 /*
 ============================================================================
@@ -465,3 +466,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/sgw-digital-lobby.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 [data-fds-theme="sgw-digital-lobby"] {
     /* 
@@ -335,7 +336,7 @@
     --fds-font-heading-lh-sm: 2.25rem;
     --fds-font-heading-lh-xs: 1.75rem;
     --fds-font-heading-ls-xxl: -0.035rem;
-    --fds-font-heading-ls-xl: -0.035em;
+    --fds-font-heading-ls-xl: -0.035rem;
     --fds-font-heading-ls-lg: -0.02rem;
     --fds-font-heading-ls-md: -0.02rem;
     --fds-font-heading-ls-sm: 0rem;
@@ -347,7 +348,7 @@
     --fds-font-family-heading: "Libre Franklin";
     --fds-font-family-body: "Libre Franklin";
     --fds-font-body-size-baseline: 1.375rem;
-    --fds-font-body-size-md: 1.2rem;
+    --fds-font-body-size-md: 1.25rem;
     --fds-font-body-size-sm: 1.125rem;
     --fds-font-body-size-xs: 1rem;
     --fds-font-body-lh-baseline: 1.75rem;
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/smgs.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 /*
 ============================================================================
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/spf.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 /* 
 ============================================================================
@@ -526,3 +527,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/styles/supportgowhere.css

@@ -1,4 +1,5 @@
 @import url("./default.css");
+@layer fds {
 
 /*
 ============================================================================
@@ -514,3 +515,5 @@ SEMANTIC COLOURS - DARK MODE
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
 }
+
+}

package/theme/theme-provider/breakpoint.d.ts

@@ -1,2 +1 @@
-export declare function applyBreakpointClasses(sourceElement: HTMLElement): void;
 export declare function setupBreakpointListener(sourceElement: HTMLElement): (() => void) | undefined;

package/theme/theme-provider/breakpoint.js

@@ -1,2 +1,2 @@
-import{Breakpoint as i}from"../tokens/breakpoint.js";import{parsePxOrRemValue as m,parseCSSVariableValue as n}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";import"../utils/use-media-query.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((i=>{i.startsWith(e)&&s.classList.remove(i)}));const o=function(m){const e=i=>{const e=n(i,m);return e||(m!==document.documentElement?n(i,document.documentElement):e)};return[{key:"xxs",min:e(i["xxs-min"]),max:e(i["xxs-max"])},{key:"xs",min:e(i["xs-min"]),max:e(i["xs-max"])},{key:"sm",min:e(i["sm-min"]),max:e(i["sm-max"])},{key:"md",min:e(i["md-min"]),max:e(i["md-max"])},{key:"lg",min:e(i["lg-min"]),max:e(i["lg-max"])},{key:"xl",min:e(i["xl-min"]),max:e(i["xl-max"])},{key:"xxl",min:e(i["xxl-min"]),max:1/0}]}(t);o.forEach((i=>{const n=m(i.min),t=i.max===1/0?1/0:m(i.max),o=a>=n,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${i.key}`),o&&s.classList.add(`${e}${i.key}-min`),r&&s.classList.add(`${e}${i.key}-max`)}))}function s(i){if(!globalThis.window)return;const m=()=>{t(i)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{t as applyBreakpointClasses,s as setupBreakpointListener};
+import{Breakpoint as i}from"../tokens/breakpoint.js";import{parsePxOrRemValue as m,parseCSSVariableValue as n}from"../utils/css-variable.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"./context.js";import"../utils/use-media-query.js";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((i=>{i.startsWith(e)&&s.classList.remove(i)}));const o=function(m){const e=i=>{const e=n(i,m);return e||(m!==document.documentElement?n(i,document.documentElement):e)};return[{key:"xxs",min:e(i["xxs-min"]),max:e(i["xxs-max"])},{key:"xs",min:e(i["xs-min"]),max:e(i["xs-max"])},{key:"sm",min:e(i["sm-min"]),max:e(i["sm-max"])},{key:"md",min:e(i["md-min"]),max:e(i["md-max"])},{key:"lg",min:e(i["lg-min"]),max:e(i["lg-max"])},{key:"xl",min:e(i["xl-min"]),max:e(i["xl-max"])},{key:"xxl",min:e(i["xxl-min"]),max:1/0}]}(t);o.forEach((i=>{const n=m(i.min),t=i.max===1/0?1/0:m(i.max),o=a>=n,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${i.key}`),o&&s.classList.add(`${e}${i.key}-min`),r&&s.classList.add(`${e}${i.key}-max`)}))}function s(i){if(!globalThis.window)return;const m=()=>{t(i)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{s as setupBreakpointListener};
 //# sourceMappingURL=breakpoint.js.map

package/theme/theme-provider/breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nexport function applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"qZAuDA,MAAMA,EAA0B,kBAE1B,SAAUC,EAAuBC,GACnC,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}
+{"version":3,"file":"breakpoint.js","sources":["../../../src/theme/theme-provider/breakpoint.ts"],"sourcesContent":["import { Breakpoint } from \"../tokens/breakpoint\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue, parsePxOrRemValue } from \"../utils\";\n\nfunction getBreakpointRanges(sourceElement: HTMLElement) {\n    const getBreakpointValue = (token: CSSVariableString) => {\n        const scopedValue = parseCSSVariableValue(token, sourceElement);\n        if (scopedValue) return scopedValue;\n\n        if (sourceElement !== document.documentElement) {\n            return parseCSSVariableValue(token, document.documentElement);\n        }\n\n        return scopedValue;\n    };\n\n    return [\n        {\n            key: \"xxs\",\n            min: getBreakpointValue(Breakpoint[\"xxs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xxs-max\"]),\n        },\n        {\n            key: \"xs\",\n            min: getBreakpointValue(Breakpoint[\"xs-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xs-max\"]),\n        },\n        {\n            key: \"sm\",\n            min: getBreakpointValue(Breakpoint[\"sm-min\"]),\n            max: getBreakpointValue(Breakpoint[\"sm-max\"]),\n        },\n        {\n            key: \"md\",\n            min: getBreakpointValue(Breakpoint[\"md-min\"]),\n            max: getBreakpointValue(Breakpoint[\"md-max\"]),\n        },\n        {\n            key: \"lg\",\n            min: getBreakpointValue(Breakpoint[\"lg-min\"]),\n            max: getBreakpointValue(Breakpoint[\"lg-max\"]),\n        },\n        {\n            key: \"xl\",\n            min: getBreakpointValue(Breakpoint[\"xl-min\"]),\n            max: getBreakpointValue(Breakpoint[\"xl-max\"]),\n        },\n        {\n            key: \"xxl\",\n            min: getBreakpointValue(Breakpoint[\"xxl-min\"]),\n            max: Infinity,\n        },\n    ] as const;\n}\n\nconst BREAKPOINT_CLASS_PREFIX = \"fds-breakpoint-\";\n\nfunction applyBreakpointClasses(sourceElement: HTMLElement) {\n    const body = document.body;\n    const width = window.innerWidth;\n\n    [...body.classList].forEach((cls) => {\n        if (cls.startsWith(BREAKPOINT_CLASS_PREFIX)) {\n            body.classList.remove(cls);\n        }\n    });\n\n    const BREAKPOINT_RANGES = getBreakpointRanges(sourceElement);\n\n    BREAKPOINT_RANGES.forEach((range) => {\n        const minValue = parsePxOrRemValue(range.min);\n        const maxValue =\n            range.max === Infinity\n                ? Infinity\n                : parsePxOrRemValue(range.max as string);\n\n        const isMinMatched = width >= minValue;\n        const isMaxMatched = maxValue === Infinity ? false : width <= maxValue;\n        const isWithinRange =\n            isMinMatched && (maxValue === Infinity || isMaxMatched);\n\n        if (isWithinRange) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}`);\n        }\n\n        if (isMinMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-min`);\n        }\n\n        if (isMaxMatched) {\n            body.classList.add(`${BREAKPOINT_CLASS_PREFIX}${range.key}-max`);\n        }\n    });\n}\n\nexport function setupBreakpointListener(sourceElement: HTMLElement) {\n    if (!globalThis.window) return;\n\n    const handleBreakpointChange = () => {\n        applyBreakpointClasses(sourceElement);\n    };\n\n    handleBreakpointChange();\n    globalThis.window.addEventListener(\"resize\", handleBreakpointChange);\n\n    return () => {\n        globalThis.window.removeEventListener(\"resize\", handleBreakpointChange);\n    };\n}\n"],"names":["BREAKPOINT_CLASS_PREFIX","applyBreakpointClasses","sourceElement","body","document","width","window","innerWidth","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","minValue","parsePxOrRemValue","maxValue","isMinMatched","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"qZAuDA,MAAMA,EAA0B,kBAEhC,SAASC,EAAuBC,GAC5B,MAAMC,EAAOC,SAASD,KAChBE,EAAQC,OAAOC,WAErB,IAAIJ,EAAKK,WAAWC,SAASC,IACrBA,EAAIC,WAAWX,IACfG,EAAKK,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA/DV,SAA6BX,GACzB,MAAMY,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOb,GACjD,OAAIc,IAEAd,IAAkBE,SAASc,gBACpBD,EAAsBF,EAAOX,SAASc,iBAG1CF,EAAW,EAGtB,MAAO,CACH,CACIG,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKR,EAAmBO,EAAW,aAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,KACLC,IAAKN,EAAmBO,EAAW,WACnCC,IAAKR,EAAmBO,EAAW,YAEvC,CACIF,IAAK,MACLC,IAAKN,EAAmBO,EAAW,YACnCC,IAAKC,KAGjB,CAc8BC,CAAoBtB,GAE9CW,EAAkBJ,SAASgB,IACvB,MAAMC,EAAWC,EAAkBF,EAAML,KACnCQ,EACFH,EAAMH,MAAQC,IACRA,IACAI,EAAkBF,EAAMH,KAE5BO,EAAexB,GAASqB,EACxBI,EAAeF,IAAaL,KAAmBlB,GAASuB,EAE1DC,IAAiBD,IAAaL,KAAYO,IAG1C3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,OAGtDU,GACA1B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,WAGtDW,GACA3B,EAAKK,UAAUuB,IAAI,GAAG/B,IAA0ByB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB9B,GACpC,IAAK+B,WAAW3B,OAAQ,OAExB,MAAM4B,EAAyB,KAC3BjC,EAAuBC,EAAc,EAMzC,OAHAgC,IACAD,WAAW3B,OAAO6B,iBAAiB,SAAUD,GAEtC,KACHD,WAAW3B,OAAO8B,oBAAoB,SAAUF,EAAuB,CAE/E"}

package/theme/theme-provider/hooks.d.ts

@@ -7,6 +7,22 @@ type InheritedThemeScope = {
     };
     themeStyle: CSSProperties;
 };
+/**
+ * Returns the theme context from the nearest `ThemeProvider`.
+ *
+ * @returns The active `ThemeContextValue`. When called outside a provider,
+ * returns defaults: `theme: "lifesg"`, `mode: "light"`, `themeElement: null`.
+ */
 export declare const useTheme: () => ThemeContextValue;
+/**
+ * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping
+ * the current theme onto a detached DOM element (e.g. a portal or floating
+ * overlay).
+ *
+ * @param enabled When `false`, returns empty objects — useful to conditionally
+ * skip the attribute injection.
+ * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline
+ * CSS variables to apply).
+ */
 export declare const useInheritedThemeScope: (enabled: boolean) => InheritedThemeScope;
 export {};