@lifesg/react-design-system 4.0.0-alpha.10 → 4.0.0-alpha.12

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{s as setupBreakpointListener};
+import{Breakpoint as i}from"../tokens/breakpoint.js";import{parseCSSVariableValue as m}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 t="fds-breakpoint-";function e(e){const n=document.body;[...n.classList].forEach((i=>{i.startsWith(t)&&n.classList.remove(i)}));const s=function(t){const e=i=>{const e=m(i,t);return e||(t!==document.documentElement?m(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}]}(e);s.forEach((i=>{const m=window.matchMedia(`(min-width: ${i.min})`).matches,e=i.max!==1/0&&window.matchMedia(`(max-width: ${i.max})`).matches;m&&(i.max===1/0||e)&&n.classList.add(`${t}${i.key}`),m&&n.classList.add(`${t}${i.key}-min`),e&&n.classList.add(`${t}${i.key}-max`)}))}function n(i){if(!globalThis.window||!globalThis.window.matchMedia)return;const m=()=>{e(i)};return m(),globalThis.window.addEventListener("resize",m),()=>{globalThis.window.removeEventListener("resize",m)}}export{n 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\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"}
+{"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 } 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\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 isMinMatched = window.matchMedia(\n            `(min-width: ${range.min})`\n        ).matches;\n        const isMaxMatched =\n            range.max === Infinity\n                ? false\n                : window.matchMedia(`(max-width: ${range.max})`).matches;\n        const isWithinRange =\n            isMinMatched && (range.max === 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 || !globalThis.window.matchMedia) 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","classList","forEach","cls","startsWith","remove","BREAKPOINT_RANGES","getBreakpointValue","token","scopedValue","parseCSSVariableValue","documentElement","key","min","Breakpoint","max","Infinity","getBreakpointRanges","range","isMinMatched","window","matchMedia","matches","isMaxMatched","add","setupBreakpointListener","globalThis","handleBreakpointChange","addEventListener","removeEventListener"],"mappings":"8XAuDA,MAAMA,EAA0B,kBAEhC,SAASC,EAAuBC,GAC5B,MAAMC,EAAOC,SAASD,KAEtB,IAAIA,EAAKE,WAAWC,SAASC,IACrBA,EAAIC,WAAWR,IACfG,EAAKE,UAAUI,OAAOF,EAC1B,IAGJ,MAAMG,EA9DV,SAA6BR,GACzB,MAAMS,EAAsBC,IACxB,MAAMC,EAAcC,EAAsBF,EAAOV,GACjD,OAAIW,IAEAX,IAAkBE,SAASW,gBACpBD,EAAsBF,EAAOR,SAASW,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,CAa8BC,CAAoBnB,GAE9CQ,EAAkBJ,SAASgB,IACvB,MAAMC,EAAeC,OAAOC,WACxB,eAAeH,EAAML,QACvBS,QACIC,EACFL,EAAMH,MAAQC,KAERI,OAAOC,WAAW,eAAeH,EAAMH,QAAQO,QAErDH,IAAiBD,EAAMH,MAAQC,KAAYO,IAG3CxB,EAAKE,UAAUuB,IAAI,GAAG5B,IAA0BsB,EAAMN,OAGtDO,GACApB,EAAKE,UAAUuB,IAAI,GAAG5B,IAA0BsB,EAAMN,WAGtDW,GACAxB,EAAKE,UAAUuB,IAAI,GAAG5B,IAA0BsB,EAAMN,UAC1D,GAER,CAEM,SAAUa,EAAwB3B,GACpC,IAAK4B,WAAWN,SAAWM,WAAWN,OAAOC,WAAY,OAEzD,MAAMM,EAAyB,KAC3B9B,EAAuBC,EAAc,EAMzC,OAHA6B,IACAD,WAAWN,OAAOQ,iBAAiB,SAAUD,GAEtC,KACHD,WAAWN,OAAOS,oBAAoB,SAAUF,EAAuB,CAE/E"}

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

@@ -4,6 +4,7 @@ type InheritedThemeScope = {
     themeProps: {
         "data-fds-theme"?: string;
         "data-fds-theme-mode"?: string;
+        "data-fds-theme-font"?: string;
     };
     themeStyle: CSSProperties;
 };

package/theme/theme-provider/hooks.js

@@ -1,2 +1,2 @@
-import{useContext as e,useMemo as t}from"react";import{getInheritedInlineCssVariables as l}from"../utils/css-variable.js";import{ThemeContext as m}from"./context.js";const o=()=>{const t=e(m);return t||{theme:"lifesg",mode:"light",themeElement:null}},n=o=>{const n=e(m);return t((()=>{var e;return o?{themeProps:{"data-fds-theme":null==n?void 0:n.theme,"data-fds-theme-mode":null==n?void 0:n.mode},themeStyle:l(null!==(e=null==n?void 0:n.themeElement)&&void 0!==e?e:null)}:{themeProps:{},themeStyle:{}}}),[o,null==n?void 0:n.mode,null==n?void 0:n.theme,null==n?void 0:n.themeElement])};export{n as useInheritedThemeScope,o as useTheme};
+import{useContext as e,useMemo as t}from"react";import{getInheritedInlineCssVariables as l}from"../utils/css-variable.js";import{ThemeContext as o}from"./context.js";const m=()=>{const t=e(o);return t||{theme:"lifesg",mode:"light",fontPreset:void 0,themeElement:null}},n=m=>{const n=e(o);return t((()=>{var e;return m?{themeProps:{"data-fds-theme":null==n?void 0:n.theme,"data-fds-theme-mode":null==n?void 0:n.mode,"data-fds-theme-font":null==n?void 0:n.fontPreset},themeStyle:l(null!==(e=null==n?void 0:n.themeElement)&&void 0!==e?e:null)}:{themeProps:{},themeStyle:{}}}),[m,null==n?void 0:n.fontPreset,null==n?void 0:n.mode,null==n?void 0:n.theme,null==n?void 0:n.themeElement])};export{n as useInheritedThemeScope,m as useTheme};
 //# sourceMappingURL=hooks.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\n// @catalog\n/**\n * Returns the theme context from the nearest `ThemeProvider`.\n *\n * @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n * @keywords context, hook, theme context\n */\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\n// @catalog\n/**\n * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping\n * the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n *\n * @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n * @keywords design tokens, hook, portal, theming\n */\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"sKAuBO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,aAAc,KAIR,EAeLC,EACTC,IAEA,MAAMC,EAAeP,EAAWC,GAEhC,OAAOO,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcL,MAChC,sBAAuBK,aAAY,EAAZA,EAAcJ,MAEzCO,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAZ3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAYnB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcJ,KACdI,aAAY,EAAZA,EAAcL,MACdK,aAAY,EAAZA,EAAcH,cAChB"}
+{"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n    themeProps: {\n        \"data-fds-theme\"?: string;\n        \"data-fds-theme-mode\"?: string;\n        \"data-fds-theme-font\"?: string;\n    };\n    themeStyle: CSSProperties;\n};\n\n// @catalog\n/**\n * Returns the theme context from the nearest `ThemeProvider`.\n *\n * @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n * @keywords context, hook, theme context\n */\nexport const useTheme = (): ThemeContextValue => {\n    const context = useContext(ThemeContext);\n\n    if (!context) {\n        return {\n            theme: \"lifesg\",\n            mode: \"light\",\n            fontPreset: undefined,\n            themeElement: null,\n        };\n    }\n\n    return context;\n};\n\n// @catalog\n/**\n * Builds `data-fds-theme*` attributes and inline CSS variables for re-stamping\n * the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n *\n * @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n * @keywords design tokens, hook, portal, theming\n */\nexport const useInheritedThemeScope = (\n    enabled: boolean\n): InheritedThemeScope => {\n    const themeContext = useContext(ThemeContext);\n\n    return useMemo(() => {\n        if (!enabled) {\n            return {\n                themeProps: {},\n                themeStyle: {},\n            };\n        }\n\n        return {\n            themeProps: {\n                \"data-fds-theme\": themeContext?.theme,\n                \"data-fds-theme-mode\": themeContext?.mode,\n                \"data-fds-theme-font\": themeContext?.fontPreset,\n            },\n            themeStyle: getInheritedInlineCssVariables(\n                themeContext?.themeElement ?? null\n            ),\n        };\n    }, [\n        enabled,\n        themeContext?.fontPreset,\n        themeContext?.mode,\n        themeContext?.theme,\n        themeContext?.themeElement,\n    ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","fontPreset","undefined","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"sKAwBO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,gBAAYC,EACZC,aAAc,KAIR,EAeLC,EACTC,IAEA,MAAMC,EAAeT,EAAWC,GAEhC,OAAOS,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcP,MAChC,sBAAuBO,aAAY,EAAZA,EAAcN,KACrC,sBAAuBM,aAAY,EAAZA,EAAcL,YAEzCQ,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAb3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAanB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcL,WACdK,aAAY,EAAZA,EAAcN,KACdM,aAAY,EAAZA,EAAcP,MACdO,aAAY,EAAZA,EAAcH,cAChB"}

package/theme/theme-provider/index.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as r,useEffect as o,useMemo as m}from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as i}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as s}from"../../util/use-isomorphic-layout-effect.js";import{setupBreakpointListener as l}from"./breakpoint.js";import{ThemeContext as n}from"./context.js";import{listenToSystemColourMode as a}from"./system-colour-mode.js";const c=t((({children:t,theme:c="lifesg",mode:u="auto",className:d,style:p},f)=>{const h="auto"!==u,[j,y]=r(h?u:"light"),[g,v]=r(null);s((()=>{const e=null!=g?g:document.documentElement;return l(e)}),[g,c,j]),o((()=>{if(!h)return a(y);y(u)}),[h,u]);const x=m((()=>({theme:c,mode:j,themeElement:g})),[c,j,g]);return e(n.Provider,{value:x,children:e("div",{ref:i(f,v),"data-fds-theme":c,"data-fds-theme-mode":j,className:d,style:p,children:t})})}));export{c as ThemeProvider};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as t,useState as r,useContext as o,useEffect as m,useMemo as i}from"react";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as s}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as n}from"../../util/use-isomorphic-layout-effect.js";import{setupBreakpointListener as l}from"./breakpoint.js";import{ThemeContext as a}from"./context.js";import{listenToSystemColourMode as d}from"./system-colour-mode.js";const u=t((({children:t,theme:u="lifesg",mode:c="auto",className:f,style:p,fontPreset:h},j)=>{const y="auto"!==c,[g,v]=r(y?c:"light"),[x,P]=r(null),E=!!o(a);n((()=>{if(E)return;const e=null!=x?x:document.documentElement;return l(e)}),[x,u,g,E]),m((()=>{if(!y)return d(v);v(c)}),[y,c]);const N=i((()=>({theme:u,mode:g,fontPreset:h,themeElement:x})),[u,g,h,x]);return e(a.Provider,{value:N,children:e("div",{ref:s(j,P),"data-fds-theme":u,"data-fds-theme-font":h,"data-fds-theme-mode":g,className:f,style:p,children:t})})}));export{u as ThemeProvider};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n    {\n        children,\n        theme = \"lifesg\",\n        mode = \"auto\",\n        className,\n        style,\n    }: ThemeProviderProps,\n    ref: Ref<HTMLDivElement>\n) => {\n    const isModeControlled = mode !== \"auto\";\n\n    const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n        isModeControlled ? mode : \"light\"\n    );\n    const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n        null\n    );\n\n    // Re-subscribe when the source node or token set changes:\n    // - `themeElement`: scoped breakpoint tokens may live on this element\n    // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n    useIsomorphicLayoutEffect(() => {\n        const sourceElement = themeElement ?? document.documentElement;\n        const cleanup = setupBreakpointListener(sourceElement);\n        return cleanup;\n    }, [themeElement, theme, computedMode]);\n\n    useEffect(() => {\n        if (isModeControlled) {\n            setComputedMode(mode);\n            return;\n        }\n\n        return listenToSystemColourMode(setComputedMode);\n    }, [isModeControlled, mode]);\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            mode: computedMode,\n            themeElement,\n        }),\n        [theme, computedMode, themeElement]\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <div\n                ref={mergeRefs(ref, setThemeElement)}\n                data-fds-theme={theme}\n                data-fds-theme-mode={computedMode}\n                className={className}\n                style={style}\n            >\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n * @keywords context, scope, theming\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n    InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","ThemeContext","Provider","value","mergeRefs"],"mappings":"2mBAUA,MAsEaA,EAAgBC,GAtEF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,SAEJC,KAEA,MAAMC,EAA4B,SAATJ,GAElBK,EAAcC,GAAmBC,EACpCH,EAAmBJ,EAAO,UAEvBQ,EAAcC,GAAmBF,EACpC,MAMJG,GAA0B,KACtB,MAAMC,EAAgBH,QAAAA,EAAgBI,SAASC,gBAE/C,OADgBC,EAAwBH,EAC1B,GACf,CAACH,EAAcT,EAAOM,IAEzBU,GAAU,KACN,IAAIX,EAKJ,OAAOY,EAAyBV,GAJ5BA,EAAgBN,EAI4B,GACjD,CAACI,EAAkBJ,IAEtB,MAAMiB,EAAeC,GACjB,KAAA,CACInB,QACAC,KAAMK,EACNG,kBAEJ,CAACT,EAAOM,EAAcG,IAG1B,OACIW,EAACC,EAAaC,UAASC,MAAOL,EAAYnB,SACtCqB,SACIhB,IAAKoB,EAAUpB,EAAKM,GAAgB,iBACpBV,EAAK,sBACAM,EACrBJ,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}
+{"version":3,"file":"index.js","sources":["../../../src/theme/theme-provider/index.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { forwardRef, useContext, useEffect, useMemo, useState } from \"react\";\n\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../../util\";\nimport type { ResolvedThemeMode } from \"../types\";\nimport { setupBreakpointListener } from \"./breakpoint\";\nimport { ThemeContext } from \"./context\";\nimport { listenToSystemColourMode } from \"./system-colour-mode\";\nimport type { ThemeProviderProps } from \"./types\";\n\nconst InnerThemeProvider = (\n    {\n        children,\n        theme = \"lifesg\",\n        mode = \"auto\",\n        className,\n        style,\n        fontPreset,\n    }: ThemeProviderProps,\n    ref: Ref<HTMLDivElement>\n) => {\n    const isModeControlled = mode !== \"auto\";\n\n    const [computedMode, setComputedMode] = useState<ResolvedThemeMode>(\n        isModeControlled ? mode : \"light\"\n    );\n    const [themeElement, setThemeElement] = useState<HTMLDivElement | null>(\n        null\n    );\n\n    const themeContext = useContext(ThemeContext);\n    const isNestedThemeProvider = !!themeContext;\n\n    // Re-subscribe when the source node or token set changes:\n    // - `themeElement`: scoped breakpoint tokens may live on this element\n    // - `theme` / `themeMode`: breakpoint token values can differ across theme/mode\n    useIsomorphicLayoutEffect(() => {\n        // Only set up the breakpoint listener once in the root theme provider\n        if (isNestedThemeProvider) return;\n\n        const sourceElement = themeElement ?? document.documentElement;\n        const cleanup = setupBreakpointListener(sourceElement);\n        return cleanup;\n    }, [themeElement, theme, computedMode, isNestedThemeProvider]);\n\n    useEffect(() => {\n        if (isModeControlled) {\n            setComputedMode(mode);\n            return;\n        }\n\n        return listenToSystemColourMode(setComputedMode);\n    }, [isModeControlled, mode]);\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            mode: computedMode,\n            fontPreset,\n            themeElement,\n        }),\n        [theme, computedMode, fontPreset, themeElement]\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <div\n                ref={mergeRefs(ref, setThemeElement)}\n                data-fds-theme={theme}\n                data-fds-theme-font={fontPreset}\n                data-fds-theme-mode={computedMode}\n                className={className}\n                style={style}\n            >\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};\n\n// @catalog\n/**\n * Establishes a themed scope for its subtree.\n *\n * Wrap a section of the tree in `ThemeProvider` to activate a design-token set\n * and colour mode. Components below it read tokens via CSS variables or the\n * `useTheme` hook. Providers can be nested to override a subtree's theme.\n * @keywords context, scope, theming\n */\nexport const ThemeProvider = forwardRef<HTMLDivElement, ThemeProviderProps>(\n    InnerThemeProvider\n);\n"],"names":["ThemeProvider","forwardRef","children","theme","mode","className","style","fontPreset","ref","isModeControlled","computedMode","setComputedMode","useState","themeElement","setThemeElement","isNestedThemeProvider","useContext","ThemeContext","useIsomorphicLayoutEffect","sourceElement","document","documentElement","setupBreakpointListener","useEffect","listenToSystemColourMode","contextValue","useMemo","_jsx","Provider","value","mergeRefs"],"mappings":"2nBAUA,MA+EaA,EAAgBC,GA/EF,EAEnBC,WACAC,QAAQ,SACRC,OAAO,OACPC,YACAC,QACAC,cAEJC,KAEA,MAAMC,EAA4B,SAATL,GAElBM,EAAcC,GAAmBC,EACpCH,EAAmBL,EAAO,UAEvBS,EAAcC,GAAmBF,EACpC,MAIEG,IADeC,EAAWC,GAMhCC,GAA0B,KAEtB,GAAIH,EAAuB,OAE3B,MAAMI,EAAgBN,QAAAA,EAAgBO,SAASC,gBAE/C,OADgBC,EAAwBH,EAC1B,GACf,CAACN,EAAcV,EAAOO,EAAcK,IAEvCQ,GAAU,KACN,IAAId,EAKJ,OAAOe,EAAyBb,GAJ5BA,EAAgBP,EAI4B,GACjD,CAACK,EAAkBL,IAEtB,MAAMqB,EAAeC,GACjB,KAAA,CACIvB,QACAC,KAAMM,EACNH,aACAM,kBAEJ,CAACV,EAAOO,EAAcH,EAAYM,IAGtC,OACIc,EAACV,EAAaW,UAASC,MAAOJ,EAAYvB,SACtCyB,SACInB,IAAKsB,EAAUtB,EAAKM,GAAgB,iBACpBX,wBACKI,EAAU,sBACVG,EACrBL,UAAWA,EACXC,MAAOA,EAAKJ,SAEXA,KAEe"}

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

@@ -0,0 +1,2 @@
+import type { ThemeFontPreset, ThemeType } from "../types";
+export declare const getDefaultFontPresetForTheme: (theme: ThemeType) => ThemeFontPreset | undefined;

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

@@ -1,11 +1,13 @@
 import type { CSSProperties } from "react";
-import type { ResolvedThemeMode, ThemeMode, ThemeType } from "../types";
+import type { ResolvedThemeMode, ThemeFontPreset, ThemeMode, ThemeType } from "../types";
 /** Value exposed by the `ThemeProvider` context. */
 export interface ThemeContextValue {
     /** Active theme token set name. */
     theme: ThemeType;
     /** Resolved colour mode. */
     mode: ResolvedThemeMode;
+    /** Active font preset, if set. */
+    fontPreset: ThemeFontPreset | undefined;
     /**
      * Element that hosts the current theme scope. Useful for scoped theming.
      */
@@ -28,4 +30,9 @@ export interface ThemeProviderProps {
      * @default "lifesg"
      */
     theme?: ThemeType | undefined;
+    /**
+     * Optional font preset to apply to the themed subtree.
+     * Applicable to WISE product themes (wise, vica, websg, wogaa).
+     */
+    fontPreset?: ThemeFontPreset | undefined;
 }

package/theme/types.d.ts

@@ -1,9 +1,17 @@
 import type { ValueOf } from "../util/utility-types";
 import type { Border, Breakpoint, ComponentToken, FontSpec, Motion, PrimitiveColours, Radius, SemanticColours, Shadow, Spacing } from "./tokens";
 /** All available theme names. */
-export declare const THEME_TYPES: readonly ["a11y-playground", "bookingsg", "careercompass", "ccube", "imda", "lifesg", "mylegacy", "oneservice", "pa", "rbs", "sgw-digital-lobby", "smgs", "spf", "supportgowhere", "tote-board"];
+export declare const THEME_TYPES: readonly ["a11y-playground", "bookingsg", "careercompass", "ccube", "imda", "lifesg", "mylegacy", "oneservice", "pa", "rbs", "sgw-digital-lobby", "smgs", "spf", "sportsg-orange", "supportgowhere", "tote-board", "vica", "websg", "wise", "wogaa"];
 /** Union of all supported theme names. */
 export type ThemeType = (typeof THEME_TYPES)[number];
+/**
+ * All available theme presets.
+ * For WISE product themes: wise, vica, websg, wogaa
+ * For SportSG product themes: sportsg-orange
+ *  */
+export declare const THEME_FONT_PRESETS: readonly ["wise-public", "wise-admin", "sportsg-gms"];
+/** Union of all supported font presets. */
+export type ThemeFontPreset = (typeof THEME_FONT_PRESETS)[number];
 /**
  * Colour mode accepted by `ThemeProvider`.
  * — `"auto"` follows OS preference.

package/theme/types.js

@@ -1,2 +1,2 @@
-const e=["a11y-playground","bookingsg","careercompass","ccube","imda","lifesg","mylegacy","oneservice","pa","rbs","sgw-digital-lobby","smgs","spf","supportgowhere","tote-board"];export{e as THEME_TYPES};
+const s=["a11y-playground","bookingsg","careercompass","ccube","imda","lifesg","mylegacy","oneservice","pa","rbs","sgw-digital-lobby","smgs","spf","sportsg-orange","supportgowhere","tote-board","vica","websg","wise","wogaa"],e=["wise-public","wise-admin","sportsg-gms"];export{e as THEME_FONT_PRESETS,s as THEME_TYPES};
 //# sourceMappingURL=types.js.map

package/theme/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../src/theme/types.ts"],"sourcesContent":["import type { ValueOf } from \"../util/utility-types\";\nimport type {\n    Border,\n    Breakpoint,\n    ComponentToken,\n    FontSpec,\n    Motion,\n    PrimitiveColours,\n    Radius,\n    SemanticColours,\n    Shadow,\n    Spacing,\n} from \"./tokens\";\n\n/** All available theme names. */\nexport const THEME_TYPES = [\n    \"a11y-playground\",\n    \"bookingsg\",\n    \"careercompass\",\n    \"ccube\",\n    \"imda\",\n    \"lifesg\",\n    \"mylegacy\",\n    \"oneservice\",\n    \"pa\",\n    \"rbs\",\n    \"sgw-digital-lobby\",\n    \"smgs\",\n    \"spf\",\n    \"supportgowhere\",\n    \"tote-board\",\n] as const;\n\n/** Union of all supported theme names. */\nexport type ThemeType = (typeof THEME_TYPES)[number];\n/**\n * Colour mode accepted by `ThemeProvider`.\n * — `\"auto\"` follows OS preference.\n * - `\"light\"` light mode.\n * - `\"dark\"` dark mode.\n */\nexport type ThemeMode = \"light\" | \"dark\" | \"auto\";\n\n/** Resolved colour mode. */\nexport type ResolvedThemeMode = \"light\" | \"dark\";\n\n/** Available typography size presets. */\nexport type FontSize =\n    | \"heading-xxl\"\n    | \"heading-xl\"\n    | \"heading-lg\"\n    | \"heading-md\"\n    | \"heading-sm\"\n    | \"heading-xs\"\n    | \"body-baseline\"\n    | \"body-md\"\n    | \"body-sm\"\n    | \"body-xs\"\n    | \"form-label\"\n    | \"form-description\";\n\n/** Available typography weight presets. */\nexport type FontWeight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\n/** Accepted breakpoint CSS variable strings. */\nexport type BreakpointCSSVariableString = ValueOf<typeof Breakpoint>;\n/** Accepted border CSS variable strings. */\nexport type BorderCSSVariableString = ValueOf<typeof Border>;\n/** Accepted component-scoped CSS variable strings. */\nexport type ComponentTokenCSSVariableString =\n    | ValueOf<typeof ComponentToken.Animation>\n    | ValueOf<typeof ComponentToken.Button>\n    | ValueOf<typeof ComponentToken.Footer>\n    | ValueOf<typeof ComponentToken.Navbar>;\n/** Accepted font CSS variable strings. */\nexport type FontSpecCSSVariableString = ValueOf<typeof FontSpec>;\n/** Accepted motion CSS variable strings. */\nexport type MotionCSSVariableString = ValueOf<typeof Motion>;\n/** Accepted primitive colour CSS variable strings. */\nexport type PrimitiveColourCSSVariableString = ValueOf<typeof PrimitiveColours>;\n/** Accepted radius CSS variable strings. */\nexport type RadiusCSSVariableString = ValueOf<typeof Radius>;\n/** Accepted semantic colour CSS variable strings. */\nexport type SemanticColourCSSVariableString = ValueOf<typeof SemanticColours>;\n/** Accepted colour CSS variable strings. */\nexport type ColourCSSVariableString =\n    | PrimitiveColourCSSVariableString\n    | SemanticColourCSSVariableString;\n/** Accepted shadow CSS variable strings. */\nexport type ShadowCSSVariableString = ValueOf<typeof Shadow>;\n/** Accepted spacing and layout CSS variable strings. */\nexport type SpacingCSSVariableString = ValueOf<typeof Spacing>;\n\n/** Union of all design-token CSS variable string literals. */\nexport type CSSVariableString =\n    | BreakpointCSSVariableString\n    | BorderCSSVariableString\n    | ColourCSSVariableString\n    | ComponentTokenCSSVariableString\n    | FontSpecCSSVariableString\n    | MotionCSSVariableString\n    | RadiusCSSVariableString\n    | ShadowCSSVariableString\n    | SpacingCSSVariableString;\n"],"names":["THEME_TYPES"],"mappings":"AAeO,MAAMA,EAAc,CACvB,kBACA,YACA,gBACA,QACA,OACA,SACA,WACA,aACA,KACA,MACA,oBACA,OACA,MACA,iBACA"}
+{"version":3,"file":"types.js","sources":["../../src/theme/types.ts"],"sourcesContent":["import type { ValueOf } from \"../util/utility-types\";\nimport type {\n    Border,\n    Breakpoint,\n    ComponentToken,\n    FontSpec,\n    Motion,\n    PrimitiveColours,\n    Radius,\n    SemanticColours,\n    Shadow,\n    Spacing,\n} from \"./tokens\";\n\n/** All available theme names. */\nexport const THEME_TYPES = [\n    \"a11y-playground\",\n    \"bookingsg\",\n    \"careercompass\",\n    \"ccube\",\n    \"imda\",\n    \"lifesg\",\n    \"mylegacy\",\n    \"oneservice\",\n    \"pa\",\n    \"rbs\",\n    \"sgw-digital-lobby\",\n    \"smgs\",\n    \"spf\",\n    \"sportsg-orange\",\n    \"supportgowhere\",\n    \"tote-board\",\n    \"vica\",\n    \"websg\",\n    \"wise\",\n    \"wogaa\",\n] as const;\n\n/** Union of all supported theme names. */\nexport type ThemeType = (typeof THEME_TYPES)[number];\n\n/**\n * All available theme presets.\n * For WISE product themes: wise, vica, websg, wogaa\n * For SportSG product themes: sportsg-orange\n *  */\nexport const THEME_FONT_PRESETS = [\n    \"wise-public\",\n    \"wise-admin\",\n    \"sportsg-gms\",\n] as const;\n\n/** Union of all supported font presets. */\nexport type ThemeFontPreset = (typeof THEME_FONT_PRESETS)[number];\n\n/**\n * Colour mode accepted by `ThemeProvider`.\n * — `\"auto\"` follows OS preference.\n * - `\"light\"` light mode.\n * - `\"dark\"` dark mode.\n */\nexport type ThemeMode = \"light\" | \"dark\" | \"auto\";\n\n/** Resolved colour mode. */\nexport type ResolvedThemeMode = \"light\" | \"dark\";\n\n/** Available typography size presets. */\nexport type FontSize =\n    | \"heading-xxl\"\n    | \"heading-xl\"\n    | \"heading-lg\"\n    | \"heading-md\"\n    | \"heading-sm\"\n    | \"heading-xs\"\n    | \"body-baseline\"\n    | \"body-md\"\n    | \"body-sm\"\n    | \"body-xs\"\n    | \"form-label\"\n    | \"form-description\";\n\n/** Available typography weight presets. */\nexport type FontWeight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\n/** Accepted breakpoint CSS variable strings. */\nexport type BreakpointCSSVariableString = ValueOf<typeof Breakpoint>;\n/** Accepted border CSS variable strings. */\nexport type BorderCSSVariableString = ValueOf<typeof Border>;\n/** Accepted component-scoped CSS variable strings. */\nexport type ComponentTokenCSSVariableString =\n    | ValueOf<typeof ComponentToken.Animation>\n    | ValueOf<typeof ComponentToken.Button>\n    | ValueOf<typeof ComponentToken.Footer>\n    | ValueOf<typeof ComponentToken.Navbar>;\n/** Accepted font CSS variable strings. */\nexport type FontSpecCSSVariableString = ValueOf<typeof FontSpec>;\n/** Accepted motion CSS variable strings. */\nexport type MotionCSSVariableString = ValueOf<typeof Motion>;\n/** Accepted primitive colour CSS variable strings. */\nexport type PrimitiveColourCSSVariableString = ValueOf<typeof PrimitiveColours>;\n/** Accepted radius CSS variable strings. */\nexport type RadiusCSSVariableString = ValueOf<typeof Radius>;\n/** Accepted semantic colour CSS variable strings. */\nexport type SemanticColourCSSVariableString = ValueOf<typeof SemanticColours>;\n/** Accepted colour CSS variable strings. */\nexport type ColourCSSVariableString =\n    | PrimitiveColourCSSVariableString\n    | SemanticColourCSSVariableString;\n/** Accepted shadow CSS variable strings. */\nexport type ShadowCSSVariableString = ValueOf<typeof Shadow>;\n/** Accepted spacing and layout CSS variable strings. */\nexport type SpacingCSSVariableString = ValueOf<typeof Spacing>;\n\n/** Union of all design-token CSS variable string literals. */\nexport type CSSVariableString =\n    | BreakpointCSSVariableString\n    | BorderCSSVariableString\n    | ColourCSSVariableString\n    | ComponentTokenCSSVariableString\n    | FontSpecCSSVariableString\n    | MotionCSSVariableString\n    | RadiusCSSVariableString\n    | ShadowCSSVariableString\n    | SpacingCSSVariableString;\n"],"names":["THEME_TYPES","THEME_FONT_PRESETS"],"mappings":"AAeO,MAAMA,EAAc,CACvB,kBACA,YACA,gBACA,QACA,OACA,SACA,WACA,aACA,KACA,MACA,oBACA,OACA,MACA,iBACA,iBACA,aACA,OACA,QACA,OACA,SAWSC,EAAqB,CAC9B,cACA,aACA"}

package/cjs/file-download/file-list-card/file-list-card.styles_18j2gut.css

@@ -1,16 +0,0 @@
-@layer fds{.ifkrwze{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;width:100%;border:none;}.ifkrwze:not(:last-child){margin-bottom:var(--fds-spacing-16);}
-.b7grm6i{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;width:100%;padding:var(--fds-spacing-16) var(--fds-spacing-32);cursor:pointer;background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}:where(body.fds-breakpoint-lg-max) .b7grm6i{padding:var(--fds-spacing-16);}.b7grm6i:hover{background:var(--fds-colour-bg-hover);}
-.b1ryf4f4{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}.b1ryf4f4:hover{background:var(--fds-colour-bg-error);}
-.casceiz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .casceiz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
-:where(body.fds-breakpoint-lg-max) .c83cih3{-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;}
-.n13wqyhg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;overflow-wrap:break-word;word-break:break-all;white-space:normal;}
-.ethi1vt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .ethi1vt{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
-.ff8ofzq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;width:5rem;margin-left:var(--fds-spacing-8);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);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .ff8ofzq{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;margin-left:0;margin-top:var(--fds-spacing-8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
-.iytzo9z{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);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .iytzo9z{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
-.e4y82lx{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
-.dga23xt{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-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-lg-max) .dga23xt{display:none;visibility:hidden;}
-.m1qdniby{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-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-lg-max) .m1qdniby{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
-.a1xq0zd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--fds-spacing-32);}:where(body.fds-breakpoint-lg-max) .a1xq0zd{margin-left:var(--fds-spacing-16);}
-.i18nltf5{min-width:unset;}.i18nltf5:not(:last-child){margin-right:var(--fds-spacing-16);}
-.tmpqdeo{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-lg-max) .tmpqdeo{margin-right:var(--fds-spacing-16);}
-.t4orgj8{border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);width:96px;height:96px;aspect-ratio:1;object-fit:cover;}:where(body.fds-breakpoint-lg-max) .t4orgj8{width:64px;height:64px;}}

package/cjs/modal-v2/slots/slot-styles_10ut1v7.css

@@ -1,30 +0,0 @@
-@layer fds{.metykyj{width:40rem;margin:var(--fds-spacing-64) auto;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
-.c1247joo{margin-right:var(--fds-spacing-16);margin-left:auto;margin-top:var(--fds-spacing-16);margin-bottom:var(--fds-spacing-16);}
-.st53q25{padding:0;color:var(--fds-colour-icon);}.st53q25 svg{height:2rem;width:2rem;}
-.c1ls09wh{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);}:where(body.fds-breakpoint-sm-max) .c1ls09wh{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}
-.f1s12qxk{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-column-gap:var(--fds-spacing-32);column-gap:var(--fds-spacing-32);row-gap:var(--fds-spacing-16);}:where(body.fds-breakpoint-sm-max) .f1s12qxk{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}.f1s12qxk>button{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-md-max) .f1s12qxk{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s1vsayl1{--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop:initial;--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
-        --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
-        var(--fds-spacing-64)
-    );}.s1vsayl1>:where(.c1ls09wh:last-child){margin-bottom:var(
-            --fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom,
-            var(--fds-spacing-64)
-        );}.s1vsayl1>:where(.f1s12qxk:not(:first-child)){margin-top:var(
-            --fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop,
-            var(--fds-spacing-32)
-        );}.s1vsayl1>:where(.f1s12qxk:last-child){margin-bottom:var(
-            --fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom,
-            var(--fds-spacing-64)
-        );}.s1vsayl1>:where(
-            .c1ls09wh:first-child, .f1s12qxk:first-child
-        ){margin-top:var(--fds-internal-modalV2-slotSpacer-firstChildMarginTop);}.s1vsayl1[data-has-close-button="true"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
-            --fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton,
-            0
-        );}.s1vsayl1[data-has-close-button="false"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
-            --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
-            var(--fds-spacing-64)
-        );}
-.h1adf5mq{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;padding:var(--fds-spacing-16);}.h1adf5mq[data-close-button-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
-.hii7rdr{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-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}
-.ha88pah{padding:0;color:var(--fds-colour-icon);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.ha88pah svg{height:2rem;width:2rem;}
-.h3mtfiz{width:2rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}

package/file-download/file-list-card/file-list-card.styles_18j2gut.css

@@ -1,16 +0,0 @@
-@layer fds{.ifkrwze{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;width:100%;border:none;}.ifkrwze:not(:last-child){margin-bottom:var(--fds-spacing-16);}
-.b7grm6i{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;width:100%;padding:var(--fds-spacing-16) var(--fds-spacing-32);cursor:pointer;background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}:where(body.fds-breakpoint-lg-max) .b7grm6i{padding:var(--fds-spacing-16);}.b7grm6i:hover{background:var(--fds-colour-bg-hover);}
-.b1ryf4f4{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}.b1ryf4f4:hover{background:var(--fds-colour-bg-error);}
-.casceiz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .casceiz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
-:where(body.fds-breakpoint-lg-max) .c83cih3{-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;}
-.n13wqyhg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;overflow-wrap:break-word;word-break:break-all;white-space:normal;}
-.ethi1vt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .ethi1vt{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
-.ff8ofzq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;width:5rem;margin-left:var(--fds-spacing-8);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);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .ff8ofzq{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;margin-left:0;margin-top:var(--fds-spacing-8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
-.iytzo9z{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);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .iytzo9z{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
-.e4y82lx{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
-.dga23xt{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-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-lg-max) .dga23xt{display:none;visibility:hidden;}
-.m1qdniby{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-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-lg-max) .m1qdniby{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
-.a1xq0zd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--fds-spacing-32);}:where(body.fds-breakpoint-lg-max) .a1xq0zd{margin-left:var(--fds-spacing-16);}
-.i18nltf5{min-width:unset;}.i18nltf5:not(:last-child){margin-right:var(--fds-spacing-16);}
-.tmpqdeo{width:auto;margin-right:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-lg-max) .tmpqdeo{margin-right:var(--fds-spacing-16);}
-.t4orgj8{border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);width:96px;height:96px;aspect-ratio:1;object-fit:cover;}:where(body.fds-breakpoint-lg-max) .t4orgj8{width:64px;height:64px;}}

package/modal-v2/slots/slot-styles_10ut1v7.css

@@ -1,30 +0,0 @@
-@layer fds{.metykyj{width:40rem;margin:var(--fds-spacing-64) auto;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-xs-strong);border-radius:var(--fds-radius-lg);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;max-width:calc(100% - var(--fds-breakpoint-margin-xxl) * 2);}:where(body.fds-breakpoint-xl-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xl) * 2);}:where(body.fds-breakpoint-lg-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-lg) * 2);}:where(body.fds-breakpoint-md-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-md) * 2);}:where(body.fds-breakpoint-sm-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .metykyj{max-width:calc(100% - var(--fds-breakpoint-margin-xxs) * 2);}
-.c1247joo{margin-right:var(--fds-spacing-16);margin-left:auto;margin-top:var(--fds-spacing-16);margin-bottom:var(--fds-spacing-16);}
-.st53q25{padding:0;color:var(--fds-colour-icon);}.st53q25 svg{height:2rem;width:2rem;}
-.c1ls09wh{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);}:where(body.fds-breakpoint-sm-max) .c1ls09wh{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}
-.f1s12qxk{margin-right:var(--fds-spacing-64);margin-left:var(--fds-spacing-64);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-column-gap:var(--fds-spacing-32);column-gap:var(--fds-spacing-32);row-gap:var(--fds-spacing-16);}:where(body.fds-breakpoint-sm-max) .f1s12qxk{margin-right:var(--fds-spacing-20);margin-left:var(--fds-spacing-20);}.f1s12qxk>button{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-md-max) .f1s12qxk{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s1vsayl1{--fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop:initial;--fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton:initial;--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
-        --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
-        var(--fds-spacing-64)
-    );}.s1vsayl1>:where(.c1ls09wh:last-child){margin-bottom:var(
-            --fds-internal-modalV2-slotSpacer-contentLastChildMarginBottom,
-            var(--fds-spacing-64)
-        );}.s1vsayl1>:where(.f1s12qxk:not(:first-child)){margin-top:var(
-            --fds-internal-modalV2-slotSpacer-footerNotFirstChildMarginTop,
-            var(--fds-spacing-32)
-        );}.s1vsayl1>:where(.f1s12qxk:last-child){margin-bottom:var(
-            --fds-internal-modalV2-slotSpacer-footerLastChildMarginBottom,
-            var(--fds-spacing-64)
-        );}.s1vsayl1>:where(
-            .c1ls09wh:first-child, .f1s12qxk:first-child
-        ){margin-top:var(--fds-internal-modalV2-slotSpacer-firstChildMarginTop);}.s1vsayl1[data-has-close-button="true"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
-            --fds-internal-modalV2-slotSpacer-firstChildMarginTopWithCloseButton,
-            0
-        );}.s1vsayl1[data-has-close-button="false"]{--fds-internal-modalV2-slotSpacer-firstChildMarginTop:var(
-            --fds-internal-modalV2-slotSpacer-firstChildMarginTopNoCloseButton,
-            var(--fds-spacing-64)
-        );}
-.h1adf5mq{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;padding:var(--fds-spacing-16);}.h1adf5mq[data-close-button-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
-.hii7rdr{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-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}
-.ha88pah{padding:0;color:var(--fds-colour-icon);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.ha88pah svg{height:2rem;width:2rem;}
-.h3mtfiz{width:2rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}