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

package/theme/styles/pa.css

@@ -350,3 +350,179 @@ PRIMITIVE COLORS
     --fds-shadow-lg-strong: 0 2px 12px 1px
         rgb(from var(--fds-colour-neutral-50) r g b / 50%);
 }
+
+/* 
+============================================================================
+SEMANTIC COLOURS - DARK MODE
+============================================================================
+*/
+[data-fds-theme="pa"][data-fds-theme-mode="dark"] {
+    /* text */
+    --fds-colour-text: var(--fds-colour-neutral-100);
+    --fds-colour-text-subtle: var(--fds-colour-neutral-80);
+    --fds-colour-text-subtler: var(--fds-colour-neutral-60);
+    --fds-colour-text-subtlest: var(--fds-colour-neutral-50);
+    --fds-colour-text-primary: var(--fds-colour-primary-60);
+    --fds-colour-text-primary-strongest: var(--fds-colour-primary-90);
+    --fds-colour-text-hover: var(--fds-colour-primary-70);
+    --fds-colour-text-selected: var(--fds-colour-primary-60);
+    --fds-colour-text-selected-hover: var(--fds-colour-primary-70);
+    --fds-colour-text-disabled: var(--fds-colour-neutral-60);
+    --fds-colour-text-disabled-subtle: var(--fds-colour-neutral-50);
+    --fds-colour-text-disabled-subtlest: var(--fds-colour-neutral-30);
+    --fds-colour-text-selected-disabled: var(--fds-colour-neutral-90);
+    --fds-colour-text-success: var(--fds-colour-success-70);
+    --fds-colour-text-warning: var(--fds-colour-warning-70);
+    --fds-colour-text-error: var(--fds-colour-error-70);
+    --fds-colour-text-info: var(--fds-colour-info-70);
+    --fds-colour-text-inverse: var(--fds-colour-black);
+
+    /* icon */
+    --fds-colour-icon: var(--fds-colour-neutral-60);
+    --fds-colour-icon-subtle: var(--fds-colour-neutral-50);
+    --fds-colour-icon-strongest: var(--fds-colour-neutral-90);
+    --fds-colour-icon-primary: var(--fds-colour-primary-60);
+    --fds-colour-icon-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-icon-primary-subtlest: var(--fds-colour-primary-40);
+    --fds-colour-icon-hover: var(--fds-colour-primary-70);
+    --fds-colour-icon-selected: var(--fds-colour-primary-60);
+    --fds-colour-icon-selected-hover: var(--fds-colour-primary-70);
+    --fds-colour-icon-disabled: var(--fds-colour-neutral-60);
+    --fds-colour-icon-disabled-subtle: var(--fds-colour-neutral-50);
+    --fds-colour-icon-selected-disabled: var(--fds-colour-neutral-50);
+    --fds-colour-icon-success: var(--fds-colour-success-60);
+    --fds-colour-icon-warning: var(--fds-colour-warning-50);
+    --fds-colour-icon-error: var(--fds-colour-error-60);
+    --fds-colour-icon-error-strong: var(--fds-colour-error-70);
+    --fds-colour-icon-info: var(--fds-colour-info-60);
+    --fds-colour-icon-inverse: var(--fds-colour-black);
+    --fds-colour-icon-primary-inverse: var(--fds-colour-primary-inverse);
+
+    /* border - adjusted for dark mode */
+    --fds-colour-border: var(--fds-colour-neutral-20);
+    --fds-colour-border-strong: var(--fds-colour-neutral-40);
+    --fds-colour-border-stronger: var(--fds-colour-neutral-60);
+    --fds-colour-border-primary: var(--fds-colour-primary-60);
+    --fds-colour-border-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-border-hover: var(--fds-colour-primary-20);
+    --fds-colour-border-hover-strong: var(--fds-colour-primary-50);
+    --fds-colour-border-selected: var(--fds-colour-primary-60);
+    --fds-colour-border-selected-subtle: var(--fds-colour-primary-40);
+    --fds-colour-border-selected-subtlest: var(--fds-colour-primary-20);
+    --fds-colour-border-selected-hover: var(--fds-colour-primary-70);
+    --fds-colour-border-focus: var(--fds-colour-primary-50);
+    --fds-colour-border-focus-strong: var(--fds-colour-primary-60);
+    --fds-colour-border-disabled: var(--fds-colour-neutral-20);
+    --fds-colour-border-selected-disabled: var(--fds-colour-neutral-40);
+    --fds-colour-border-success: var(--fds-colour-success-50);
+    --fds-colour-border-warning: var(--fds-colour-warning-50);
+    --fds-colour-border-error: var(--fds-colour-error-50);
+    --fds-colour-border-error-focus: var(--fds-colour-error-50);
+    --fds-colour-border-error-focus-strong: var(--fds-colour-error-70);
+    --fds-colour-border-error-strong: var(--fds-colour-error-70);
+    --fds-colour-border-info: var(--fds-colour-info-50);
+
+    /* background - dark backgrounds */
+    --fds-colour-bg: var(--fds-colour-black);
+    --fds-colour-bg-strong: var(--fds-colour-neutral-10);
+    --fds-colour-bg-stronger: var(--fds-colour-neutral-20);
+    --fds-colour-bg-strongest: var(--fds-colour-neutral-20);
+    --fds-colour-bg-hover: var(--fds-colour-primary-20);
+    --fds-colour-bg-hover-strong: var(--fds-colour-primary-20);
+    --fds-colour-bg-hover-subtle: var(--fds-colour-primary-10);
+    --fds-colour-bg-hover-neutral: var(--fds-colour-neutral-10);
+    --fds-colour-bg-hover-neutral-strong: var(--fds-colour-neutral-20);
+    --fds-colour-bg-selected: var(--fds-colour-primary-20);
+    --fds-colour-bg-selected-hover: var(--fds-colour-primary-20);
+    --fds-colour-bg-selected-strong: var(--fds-colour-primary-20);
+    --fds-colour-bg-selected-stronger: var(--fds-colour-primary-40);
+    --fds-colour-bg-selected-strongest: var(--fds-colour-primary-60);
+    --fds-colour-bg-selected-strongest-hover: var(--fds-colour-primary-70);
+    --fds-colour-bg-disabled: var(--fds-colour-neutral-20);
+    --fds-colour-bg-selected-disabled: var(--fds-colour-neutral-20);
+    --fds-colour-bg-selected-stronger-disabled: var(--fds-colour-neutral-40);
+    --fds-colour-bg-success: var(--fds-colour-success-10);
+    --fds-colour-bg-success-hover: var(--fds-colour-success-20);
+    --fds-colour-bg-success-strong: var(--fds-colour-success-60);
+    --fds-colour-bg-success-strong-hover: var(--fds-colour-success-70);
+    --fds-colour-bg-warning: var(--fds-colour-warning-10);
+    --fds-colour-bg-warning-hover: var(--fds-colour-warning-20);
+    --fds-colour-bg-warning-strong: var(--fds-colour-warning-60);
+    --fds-colour-bg-warning-strong-hover: var(--fds-colour-warning-70);
+    --fds-colour-bg-info: var(--fds-colour-info-10);
+    --fds-colour-bg-info-hover: var(--fds-colour-info-20);
+    --fds-colour-bg-info-strong: var(--fds-colour-info-60);
+    --fds-colour-bg-info-strong-hover: var(--fds-colour-info-70);
+    --fds-colour-bg-error: var(--fds-colour-error-10);
+    --fds-colour-bg-error-hover: var(--fds-colour-error-20);
+    --fds-colour-bg-error-strong: var(--fds-colour-error-60);
+    --fds-colour-bg-error-strong-hover: var(--fds-colour-error-70);
+    --fds-colour-bg-inverse: var(--fds-colour-neutral-90);
+    --fds-colour-bg-inverse-subtle: var(--fds-colour-neutral-80);
+    --fds-colour-bg-inverse-subtler: var(--fds-colour-neutral-60);
+    --fds-colour-bg-inverse-subtlest: var(--fds-colour-neutral-50);
+    --fds-colour-bg-inverse-hover: var(--fds-colour-neutral-70);
+    --fds-colour-bg-primary: var(--fds-colour-primary-60);
+    --fds-colour-bg-primary-subtle: var(--fds-colour-primary-50);
+    --fds-colour-bg-primary-subtler: var(--fds-colour-primary-20);
+    --fds-colour-bg-primary-subtlest: var(--fds-colour-primary-10);
+    --fds-colour-bg-available: #185339;
+    --fds-colour-bg-primary-hover: var(--fds-colour-primary-70);
+    --fds-colour-bg-primary-subtlest-hover: var(--fds-colour-primary-20);
+    --fds-colour-bg-primary-subtlest-selected: var(--fds-colour-primary-20);
+
+    /* overlay - lighter overlays for dark backgrounds */
+    --fds-colour-overlay-strong: rgb(78 78 78 / 80%);
+    --fds-colour-overlay-subtle: rgb(78 78 78 / 50%);
+
+    /* hyperlink - adjusted for dark mode */
+    --fds-colour-hyperlink: var(--fds-colour-primary-60);
+    --fds-colour-hyperlink-hover: var(--fds-colour-primary-70);
+    --fds-colour-hyperlink-visited: var(--fds-colour-primary-70);
+    --fds-colour-hyperlink-inverse: var(--fds-colour-primary-inverse);
+
+    /* focus ring - adjusted for dark mode */
+    --fds-colour-focus-ring: var(--fds-colour-primary-60);
+    --fds-colour-focus-ring-inverse: var(--fds-colour-black);
+
+    /*
+    ============================================================================
+    COMPONENT TOKEN
+    ============================================================================
+    */
+
+    /* Button */
+    --fds-button-radius: var(--fds-radius-sm);
+    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
+    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
+    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
+    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
+    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
+    --fds-button-light-colour-text: var(--fds-colour-text-primary);
+    --fds-button-link-colour-text: var(--fds-colour-text-primary);
+
+    /* Navbar: */
+    --fds-navbar-full-height: 6rem;
+    --fds-navbar-full-logo-height: 2rem;
+    --fds-navbar-compressed-height: 4rem;
+    --fds-navbar-compressed-logo-height: 1.5rem;
+    --fds-navbar-mobile-height: 3.5rem;
+    --fds-navbar-mobile-logo-height: 1.5rem;
+    --fds-navbar-colour-bg: var(--fds-colour-bg);
+    --fds-navbar-colour-icon: var(--fds-colour-icon);
+    --fds-navbar-link-colour-text: var(--fds-colour-text);
+    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-navbar-link-colour-text-selected-hover: var(
+        --fds-text-selected-hover
+    );
+
+    /* Footer: */
+    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
+    --fds-footer-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
+    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
+    --fds-footer-disclaimer-link-colour-text-hover: var(
+        --fds-colour-text-subtler
+    );
+}

package/theme/theme-provider/breakpoint.js

@@ -1,2 +1,2 @@
-import{Breakpoint as n}from"../tokens/breakpoint.js";import{parsePxOrRemValue as i,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";const e="fds-breakpoint-";function t(t){const s=document.body,a=window.innerWidth;[...s.classList].forEach((n=>{n.startsWith(e)&&s.classList.remove(n)}));const o=function(i){const e=n=>{const e=m(n,i);return e||(i!==document.documentElement?m(n,document.documentElement):e)};return[{key:"xxs",min:e(n["xxs-min"]),max:e(n["xxs-max"])},{key:"xs",min:e(n["xs-min"]),max:e(n["xs-max"])},{key:"sm",min:e(n["sm-min"]),max:e(n["sm-max"])},{key:"md",min:e(n["md-min"]),max:e(n["md-max"])},{key:"lg",min:e(n["lg-min"]),max:e(n["lg-max"])},{key:"xl",min:e(n["xl-min"]),max:e(n["xl-max"])},{key:"xxl",min:e(n["xxl-min"]),max:1/0}]}(t);o.forEach((n=>{const m=i(n.min),t=n.max===1/0?1/0:i(n.max),o=a>=m,r=t!==1/0&&a<=t;o&&(t===1/0||r)&&s.classList.add(`${e}${n.key}`),o&&s.classList.add(`${e}${n.key}-min`),r&&s.classList.add(`${e}${n.key}-max`)}))}function s(n){if(!globalThis.window)return;const i=()=>{t(n)};return i(),globalThis.window.addEventListener("resize",i),()=>{globalThis.window.removeEventListener("resize",i)}}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{t as applyBreakpointClasses,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":"iXAuDA,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\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"}

package/theme/tokens/font.js

@@ -1,2 +1,2 @@
-import{generateFont as d}from"../utils/font.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"../theme-provider/context.js";const e={"font-family":"var(--fds-font-family)","font-variant":"var(--fds-font-variant)","weight-light":"var(--fds-font-weight-light)","weight-regular":"var(--fds-font-weight-regular)","weight-semibold":"var(--fds-font-weight-semibold)","weight-bold":"var(--fds-font-weight-bold)","heading-size-xxl":"var(--fds-font-heading-size-xxl)","heading-size-xl":"var(--fds-font-heading-size-xl)","heading-size-lg":"var(--fds-font-heading-size-lg)","heading-size-md":"var(--fds-font-heading-size-md)","heading-size-sm":"var(--fds-font-heading-size-sm)","heading-size-xs":"var(--fds-font-heading-size-xs)","heading-lh-xxl":"var(--fds-font-heading-lh-xxl)","heading-lh-xl":"var(--fds-font-heading-lh-xl)","heading-lh-lg":"var(--fds-font-heading-lh-lg)","heading-lh-md":"var(--fds-font-heading-lh-md)","heading-lh-sm":"var(--fds-font-heading-lh-sm)","heading-lh-xs":"var(--fds-font-heading-lh-xs)","heading-ls-xxl":"var(--fds-font-heading-ls-xxl)","heading-ls-xl":"var(--fds-font-heading-ls-xl)","heading-ls-lg":"var(--fds-font-heading-ls-lg)","heading-ls-md":"var(--fds-font-heading-ls-md)","heading-ls-sm":"var(--fds-font-heading-ls-sm)","heading-ls-xs":"var(--fds-font-heading-ls-xs)","body-size-baseline":"var(--fds-font-body-size-baseline)","body-size-md":"var(--fds-font-body-size-md)","body-size-sm":"var(--fds-font-body-size-sm)","body-size-xs":"var(--fds-font-body-size-xs)","body-lh-baseline":"var(--fds-font-body-lh-baseline)","body-lh-md":"var(--fds-font-body-lh-md)","body-lh-sm":"var(--fds-font-body-lh-sm)","body-lh-xs":"var(--fds-font-body-lh-xs)","body-ls-baseline":"var(--fds-font-body-ls-baseline)","body-ls-md":"var(--fds-font-body-ls-md)","body-ls-sm":"var(--fds-font-body-ls-sm)","body-ls-xs":"var(--fds-font-body-ls-xs)","form-label-size":"var(--fds-font-form-label-size)","form-label-lh":"var(--fds-font-form-label-lh)","form-label-ls":"var(--fds-font-form-label-ls)","form-description-size":"var(--fds-font-form-description-size)","form-description-lh":"var(--fds-font-form-description-lh)","form-description-ls":"var(--fds-font-form-description-ls)"},l={"heading-xxl-light":d("heading-xxl","light"),"heading-xxl-regular":d("heading-xxl","regular"),"heading-xxl-semibold":d("heading-xxl","semibold"),"heading-xxl-bold":d("heading-xxl","bold"),"heading-xl-light":d("heading-xl","light"),"heading-xl-regular":d("heading-xl","regular"),"heading-xl-semibold":d("heading-xl","semibold"),"heading-xl-bold":d("heading-xl","bold"),"heading-lg-light":d("heading-lg","light"),"heading-lg-regular":d("heading-lg","regular"),"heading-lg-semibold":d("heading-lg","semibold"),"heading-lg-bold":d("heading-lg","bold"),"heading-md-light":d("heading-md","light"),"heading-md-regular":d("heading-md","regular"),"heading-md-semibold":d("heading-md","semibold"),"heading-md-bold":d("heading-md","bold"),"heading-sm-light":d("heading-sm","light"),"heading-sm-regular":d("heading-sm","regular"),"heading-sm-semibold":d("heading-sm","semibold"),"heading-sm-bold":d("heading-sm","bold"),"heading-xs-light":d("heading-xs","light"),"heading-xs-regular":d("heading-xs","regular"),"heading-xs-semibold":d("heading-xs","semibold"),"heading-xs-bold":d("heading-xs","bold"),"body-baseline-light":d("body-baseline","light"),"body-baseline-regular":d("body-baseline","regular"),"body-baseline-semibold":d("body-baseline","semibold"),"body-baseline-bold":d("body-baseline","bold"),"body-md-light":d("body-md","light"),"body-md-regular":d("body-md","regular"),"body-md-semibold":d("body-md","semibold"),"body-md-bold":d("body-md","bold"),"body-sm-light":d("body-sm","light"),"body-sm-regular":d("body-sm","regular"),"body-sm-semibold":d("body-sm","semibold"),"body-sm-bold":d("body-sm","bold"),"body-xs-light":d("body-xs","light"),"body-xs-regular":d("body-xs","regular"),"body-xs-semibold":d("body-xs","semibold"),"body-xs-bold":d("body-xs","bold"),"form-label":d("form-label","semibold"),"form-description":d("form-description","regular"),Spec:e};export{l as Font,e as FontSpec};
+import{generateFont as d}from"../utils/font.js";const l={"font-family":"var(--fds-font-family)","font-variant":"var(--fds-font-variant)","weight-light":"var(--fds-font-weight-light)","weight-regular":"var(--fds-font-weight-regular)","weight-semibold":"var(--fds-font-weight-semibold)","weight-bold":"var(--fds-font-weight-bold)","heading-size-xxl":"var(--fds-font-heading-size-xxl)","heading-size-xl":"var(--fds-font-heading-size-xl)","heading-size-lg":"var(--fds-font-heading-size-lg)","heading-size-md":"var(--fds-font-heading-size-md)","heading-size-sm":"var(--fds-font-heading-size-sm)","heading-size-xs":"var(--fds-font-heading-size-xs)","heading-lh-xxl":"var(--fds-font-heading-lh-xxl)","heading-lh-xl":"var(--fds-font-heading-lh-xl)","heading-lh-lg":"var(--fds-font-heading-lh-lg)","heading-lh-md":"var(--fds-font-heading-lh-md)","heading-lh-sm":"var(--fds-font-heading-lh-sm)","heading-lh-xs":"var(--fds-font-heading-lh-xs)","heading-ls-xxl":"var(--fds-font-heading-ls-xxl)","heading-ls-xl":"var(--fds-font-heading-ls-xl)","heading-ls-lg":"var(--fds-font-heading-ls-lg)","heading-ls-md":"var(--fds-font-heading-ls-md)","heading-ls-sm":"var(--fds-font-heading-ls-sm)","heading-ls-xs":"var(--fds-font-heading-ls-xs)","body-size-baseline":"var(--fds-font-body-size-baseline)","body-size-md":"var(--fds-font-body-size-md)","body-size-sm":"var(--fds-font-body-size-sm)","body-size-xs":"var(--fds-font-body-size-xs)","body-lh-baseline":"var(--fds-font-body-lh-baseline)","body-lh-md":"var(--fds-font-body-lh-md)","body-lh-sm":"var(--fds-font-body-lh-sm)","body-lh-xs":"var(--fds-font-body-lh-xs)","body-ls-baseline":"var(--fds-font-body-ls-baseline)","body-ls-md":"var(--fds-font-body-ls-md)","body-ls-sm":"var(--fds-font-body-ls-sm)","body-ls-xs":"var(--fds-font-body-ls-xs)","form-label-size":"var(--fds-font-form-label-size)","form-label-lh":"var(--fds-font-form-label-lh)","form-label-ls":"var(--fds-font-form-label-ls)","form-description-size":"var(--fds-font-form-description-size)","form-description-lh":"var(--fds-font-form-description-lh)","form-description-ls":"var(--fds-font-form-description-ls)"},e={"heading-xxl-light":d("heading-xxl","light"),"heading-xxl-regular":d("heading-xxl","regular"),"heading-xxl-semibold":d("heading-xxl","semibold"),"heading-xxl-bold":d("heading-xxl","bold"),"heading-xl-light":d("heading-xl","light"),"heading-xl-regular":d("heading-xl","regular"),"heading-xl-semibold":d("heading-xl","semibold"),"heading-xl-bold":d("heading-xl","bold"),"heading-lg-light":d("heading-lg","light"),"heading-lg-regular":d("heading-lg","regular"),"heading-lg-semibold":d("heading-lg","semibold"),"heading-lg-bold":d("heading-lg","bold"),"heading-md-light":d("heading-md","light"),"heading-md-regular":d("heading-md","regular"),"heading-md-semibold":d("heading-md","semibold"),"heading-md-bold":d("heading-md","bold"),"heading-sm-light":d("heading-sm","light"),"heading-sm-regular":d("heading-sm","regular"),"heading-sm-semibold":d("heading-sm","semibold"),"heading-sm-bold":d("heading-sm","bold"),"heading-xs-light":d("heading-xs","light"),"heading-xs-regular":d("heading-xs","regular"),"heading-xs-semibold":d("heading-xs","semibold"),"heading-xs-bold":d("heading-xs","bold"),"body-baseline-light":d("body-baseline","light"),"body-baseline-regular":d("body-baseline","regular"),"body-baseline-semibold":d("body-baseline","semibold"),"body-baseline-bold":d("body-baseline","bold"),"body-md-light":d("body-md","light"),"body-md-regular":d("body-md","regular"),"body-md-semibold":d("body-md","semibold"),"body-md-bold":d("body-md","bold"),"body-sm-light":d("body-sm","light"),"body-sm-regular":d("body-sm","regular"),"body-sm-semibold":d("body-sm","semibold"),"body-sm-bold":d("body-sm","bold"),"body-xs-light":d("body-xs","light"),"body-xs-regular":d("body-xs","regular"),"body-xs-semibold":d("body-xs","semibold"),"body-xs-bold":d("body-xs","bold"),"form-label":d("form-label","semibold"),"form-description":d("form-description","regular"),Spec:l};export{e as Font,l as FontSpec};
 //# sourceMappingURL=font.js.map

package/theme/tokens/font.js.map

@@ -1 +1 @@
-{"version":3,"file":"font.js","sources":["../../../src/theme/tokens/font.ts"],"sourcesContent":["import { generateFont } from \"../utils\";\n\nexport const FontSpec = {\n    \"font-family\": \"var(--fds-font-family)\",\n    \"font-variant\": \"var(--fds-font-variant)\",\n\n    \"weight-light\": \"var(--fds-font-weight-light)\",\n    \"weight-regular\": \"var(--fds-font-weight-regular)\",\n    \"weight-semibold\": \"var(--fds-font-weight-semibold)\",\n    \"weight-bold\": \"var(--fds-font-weight-bold)\",\n\n    \"heading-size-xxl\": \"var(--fds-font-heading-size-xxl)\",\n    \"heading-size-xl\": \"var(--fds-font-heading-size-xl)\",\n    \"heading-size-lg\": \"var(--fds-font-heading-size-lg)\",\n    \"heading-size-md\": \"var(--fds-font-heading-size-md)\",\n    \"heading-size-sm\": \"var(--fds-font-heading-size-sm)\",\n    \"heading-size-xs\": \"var(--fds-font-heading-size-xs)\",\n\n    \"heading-lh-xxl\": \"var(--fds-font-heading-lh-xxl)\",\n    \"heading-lh-xl\": \"var(--fds-font-heading-lh-xl)\",\n    \"heading-lh-lg\": \"var(--fds-font-heading-lh-lg)\",\n    \"heading-lh-md\": \"var(--fds-font-heading-lh-md)\",\n    \"heading-lh-sm\": \"var(--fds-font-heading-lh-sm)\",\n    \"heading-lh-xs\": \"var(--fds-font-heading-lh-xs)\",\n\n    \"heading-ls-xxl\": \"var(--fds-font-heading-ls-xxl)\",\n    \"heading-ls-xl\": \"var(--fds-font-heading-ls-xl)\",\n    \"heading-ls-lg\": \"var(--fds-font-heading-ls-lg)\",\n    \"heading-ls-md\": \"var(--fds-font-heading-ls-md)\",\n    \"heading-ls-sm\": \"var(--fds-font-heading-ls-sm)\",\n    \"heading-ls-xs\": \"var(--fds-font-heading-ls-xs)\",\n\n    \"body-size-baseline\": \"var(--fds-font-body-size-baseline)\",\n    \"body-size-md\": \"var(--fds-font-body-size-md)\",\n    \"body-size-sm\": \"var(--fds-font-body-size-sm)\",\n    \"body-size-xs\": \"var(--fds-font-body-size-xs)\",\n\n    \"body-lh-baseline\": \"var(--fds-font-body-lh-baseline)\",\n    \"body-lh-md\": \"var(--fds-font-body-lh-md)\",\n    \"body-lh-sm\": \"var(--fds-font-body-lh-sm)\",\n    \"body-lh-xs\": \"var(--fds-font-body-lh-xs)\",\n\n    \"body-ls-baseline\": \"var(--fds-font-body-ls-baseline)\",\n    \"body-ls-md\": \"var(--fds-font-body-ls-md)\",\n    \"body-ls-sm\": \"var(--fds-font-body-ls-sm)\",\n    \"body-ls-xs\": \"var(--fds-font-body-ls-xs)\",\n\n    \"form-label-size\": \"var(--fds-font-form-label-size)\",\n    \"form-label-lh\": \"var(--fds-font-form-label-lh)\",\n    \"form-label-ls\": \"var(--fds-font-form-label-ls)\",\n\n    \"form-description-size\": \"var(--fds-font-form-description-size)\",\n    \"form-description-lh\": \"var(--fds-font-form-description-lh)\",\n    \"form-description-ls\": \"var(--fds-font-form-description-ls)\",\n} as const;\n\nexport const Font = {\n    \"heading-xxl-light\": generateFont(\"heading-xxl\", \"light\"),\n    \"heading-xxl-regular\": generateFont(\"heading-xxl\", \"regular\"),\n    \"heading-xxl-semibold\": generateFont(\"heading-xxl\", \"semibold\"),\n    \"heading-xxl-bold\": generateFont(\"heading-xxl\", \"bold\"),\n\n    \"heading-xl-light\": generateFont(\"heading-xl\", \"light\"),\n    \"heading-xl-regular\": generateFont(\"heading-xl\", \"regular\"),\n    \"heading-xl-semibold\": generateFont(\"heading-xl\", \"semibold\"),\n    \"heading-xl-bold\": generateFont(\"heading-xl\", \"bold\"),\n\n    \"heading-lg-light\": generateFont(\"heading-lg\", \"light\"),\n    \"heading-lg-regular\": generateFont(\"heading-lg\", \"regular\"),\n    \"heading-lg-semibold\": generateFont(\"heading-lg\", \"semibold\"),\n    \"heading-lg-bold\": generateFont(\"heading-lg\", \"bold\"),\n\n    \"heading-md-light\": generateFont(\"heading-md\", \"light\"),\n    \"heading-md-regular\": generateFont(\"heading-md\", \"regular\"),\n    \"heading-md-semibold\": generateFont(\"heading-md\", \"semibold\"),\n    \"heading-md-bold\": generateFont(\"heading-md\", \"bold\"),\n\n    \"heading-sm-light\": generateFont(\"heading-sm\", \"light\"),\n    \"heading-sm-regular\": generateFont(\"heading-sm\", \"regular\"),\n    \"heading-sm-semibold\": generateFont(\"heading-sm\", \"semibold\"),\n    \"heading-sm-bold\": generateFont(\"heading-sm\", \"bold\"),\n\n    \"heading-xs-light\": generateFont(\"heading-xs\", \"light\"),\n    \"heading-xs-regular\": generateFont(\"heading-xs\", \"regular\"),\n    \"heading-xs-semibold\": generateFont(\"heading-xs\", \"semibold\"),\n    \"heading-xs-bold\": generateFont(\"heading-xs\", \"bold\"),\n\n    \"body-baseline-light\": generateFont(\"body-baseline\", \"light\"),\n    \"body-baseline-regular\": generateFont(\"body-baseline\", \"regular\"),\n    \"body-baseline-semibold\": generateFont(\"body-baseline\", \"semibold\"),\n    \"body-baseline-bold\": generateFont(\"body-baseline\", \"bold\"),\n\n    \"body-md-light\": generateFont(\"body-md\", \"light\"),\n    \"body-md-regular\": generateFont(\"body-md\", \"regular\"),\n    \"body-md-semibold\": generateFont(\"body-md\", \"semibold\"),\n    \"body-md-bold\": generateFont(\"body-md\", \"bold\"),\n\n    \"body-sm-light\": generateFont(\"body-sm\", \"light\"),\n    \"body-sm-regular\": generateFont(\"body-sm\", \"regular\"),\n    \"body-sm-semibold\": generateFont(\"body-sm\", \"semibold\"),\n    \"body-sm-bold\": generateFont(\"body-sm\", \"bold\"),\n\n    \"body-xs-light\": generateFont(\"body-xs\", \"light\"),\n    \"body-xs-regular\": generateFont(\"body-xs\", \"regular\"),\n    \"body-xs-semibold\": generateFont(\"body-xs\", \"semibold\"),\n    \"body-xs-bold\": generateFont(\"body-xs\", \"bold\"),\n\n    \"form-label\": generateFont(\"form-label\", \"semibold\"),\n    \"form-description\": generateFont(\"form-description\", \"regular\"),\n\n    Spec: FontSpec,\n} as const;\n"],"names":["FontSpec","Font","generateFont","Spec"],"mappings":"oSAEO,MAAMA,EAAW,CACpB,cAAe,yBACf,eAAgB,0BAEhB,eAAgB,+BAChB,iBAAkB,iCAClB,kBAAmB,kCACnB,cAAe,8BAEf,mBAAoB,mCACpB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCAEnB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,qBAAsB,qCACtB,eAAgB,+BAChB,eAAgB,+BAChB,eAAgB,+BAEhB,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,kBAAmB,kCACnB,gBAAiB,gCACjB,gBAAiB,gCAEjB,wBAAyB,wCACzB,sBAAuB,sCACvB,sBAAuB,uCAGdC,EAAO,CAChB,oBAAqBC,EAAa,cAAe,SACjD,sBAAuBA,EAAa,cAAe,WACnD,uBAAwBA,EAAa,cAAe,YACpD,mBAAoBA,EAAa,cAAe,QAEhD,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,sBAAuBA,EAAa,gBAAiB,SACrD,wBAAyBA,EAAa,gBAAiB,WACvD,yBAA0BA,EAAa,gBAAiB,YACxD,qBAAsBA,EAAa,gBAAiB,QAEpD,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,aAAcA,EAAa,aAAc,YACzC,mBAAoBA,EAAa,mBAAoB,WAErDC,KAAMH"}
+{"version":3,"file":"font.js","sources":["../../../src/theme/tokens/font.ts"],"sourcesContent":["import { generateFont } from \"../utils/font\";\n\nexport const FontSpec = {\n    \"font-family\": \"var(--fds-font-family)\",\n    \"font-variant\": \"var(--fds-font-variant)\",\n\n    \"weight-light\": \"var(--fds-font-weight-light)\",\n    \"weight-regular\": \"var(--fds-font-weight-regular)\",\n    \"weight-semibold\": \"var(--fds-font-weight-semibold)\",\n    \"weight-bold\": \"var(--fds-font-weight-bold)\",\n\n    \"heading-size-xxl\": \"var(--fds-font-heading-size-xxl)\",\n    \"heading-size-xl\": \"var(--fds-font-heading-size-xl)\",\n    \"heading-size-lg\": \"var(--fds-font-heading-size-lg)\",\n    \"heading-size-md\": \"var(--fds-font-heading-size-md)\",\n    \"heading-size-sm\": \"var(--fds-font-heading-size-sm)\",\n    \"heading-size-xs\": \"var(--fds-font-heading-size-xs)\",\n\n    \"heading-lh-xxl\": \"var(--fds-font-heading-lh-xxl)\",\n    \"heading-lh-xl\": \"var(--fds-font-heading-lh-xl)\",\n    \"heading-lh-lg\": \"var(--fds-font-heading-lh-lg)\",\n    \"heading-lh-md\": \"var(--fds-font-heading-lh-md)\",\n    \"heading-lh-sm\": \"var(--fds-font-heading-lh-sm)\",\n    \"heading-lh-xs\": \"var(--fds-font-heading-lh-xs)\",\n\n    \"heading-ls-xxl\": \"var(--fds-font-heading-ls-xxl)\",\n    \"heading-ls-xl\": \"var(--fds-font-heading-ls-xl)\",\n    \"heading-ls-lg\": \"var(--fds-font-heading-ls-lg)\",\n    \"heading-ls-md\": \"var(--fds-font-heading-ls-md)\",\n    \"heading-ls-sm\": \"var(--fds-font-heading-ls-sm)\",\n    \"heading-ls-xs\": \"var(--fds-font-heading-ls-xs)\",\n\n    \"body-size-baseline\": \"var(--fds-font-body-size-baseline)\",\n    \"body-size-md\": \"var(--fds-font-body-size-md)\",\n    \"body-size-sm\": \"var(--fds-font-body-size-sm)\",\n    \"body-size-xs\": \"var(--fds-font-body-size-xs)\",\n\n    \"body-lh-baseline\": \"var(--fds-font-body-lh-baseline)\",\n    \"body-lh-md\": \"var(--fds-font-body-lh-md)\",\n    \"body-lh-sm\": \"var(--fds-font-body-lh-sm)\",\n    \"body-lh-xs\": \"var(--fds-font-body-lh-xs)\",\n\n    \"body-ls-baseline\": \"var(--fds-font-body-ls-baseline)\",\n    \"body-ls-md\": \"var(--fds-font-body-ls-md)\",\n    \"body-ls-sm\": \"var(--fds-font-body-ls-sm)\",\n    \"body-ls-xs\": \"var(--fds-font-body-ls-xs)\",\n\n    \"form-label-size\": \"var(--fds-font-form-label-size)\",\n    \"form-label-lh\": \"var(--fds-font-form-label-lh)\",\n    \"form-label-ls\": \"var(--fds-font-form-label-ls)\",\n\n    \"form-description-size\": \"var(--fds-font-form-description-size)\",\n    \"form-description-lh\": \"var(--fds-font-form-description-lh)\",\n    \"form-description-ls\": \"var(--fds-font-form-description-ls)\",\n} as const;\n\nexport const Font = {\n    \"heading-xxl-light\": generateFont(\"heading-xxl\", \"light\"),\n    \"heading-xxl-regular\": generateFont(\"heading-xxl\", \"regular\"),\n    \"heading-xxl-semibold\": generateFont(\"heading-xxl\", \"semibold\"),\n    \"heading-xxl-bold\": generateFont(\"heading-xxl\", \"bold\"),\n\n    \"heading-xl-light\": generateFont(\"heading-xl\", \"light\"),\n    \"heading-xl-regular\": generateFont(\"heading-xl\", \"regular\"),\n    \"heading-xl-semibold\": generateFont(\"heading-xl\", \"semibold\"),\n    \"heading-xl-bold\": generateFont(\"heading-xl\", \"bold\"),\n\n    \"heading-lg-light\": generateFont(\"heading-lg\", \"light\"),\n    \"heading-lg-regular\": generateFont(\"heading-lg\", \"regular\"),\n    \"heading-lg-semibold\": generateFont(\"heading-lg\", \"semibold\"),\n    \"heading-lg-bold\": generateFont(\"heading-lg\", \"bold\"),\n\n    \"heading-md-light\": generateFont(\"heading-md\", \"light\"),\n    \"heading-md-regular\": generateFont(\"heading-md\", \"regular\"),\n    \"heading-md-semibold\": generateFont(\"heading-md\", \"semibold\"),\n    \"heading-md-bold\": generateFont(\"heading-md\", \"bold\"),\n\n    \"heading-sm-light\": generateFont(\"heading-sm\", \"light\"),\n    \"heading-sm-regular\": generateFont(\"heading-sm\", \"regular\"),\n    \"heading-sm-semibold\": generateFont(\"heading-sm\", \"semibold\"),\n    \"heading-sm-bold\": generateFont(\"heading-sm\", \"bold\"),\n\n    \"heading-xs-light\": generateFont(\"heading-xs\", \"light\"),\n    \"heading-xs-regular\": generateFont(\"heading-xs\", \"regular\"),\n    \"heading-xs-semibold\": generateFont(\"heading-xs\", \"semibold\"),\n    \"heading-xs-bold\": generateFont(\"heading-xs\", \"bold\"),\n\n    \"body-baseline-light\": generateFont(\"body-baseline\", \"light\"),\n    \"body-baseline-regular\": generateFont(\"body-baseline\", \"regular\"),\n    \"body-baseline-semibold\": generateFont(\"body-baseline\", \"semibold\"),\n    \"body-baseline-bold\": generateFont(\"body-baseline\", \"bold\"),\n\n    \"body-md-light\": generateFont(\"body-md\", \"light\"),\n    \"body-md-regular\": generateFont(\"body-md\", \"regular\"),\n    \"body-md-semibold\": generateFont(\"body-md\", \"semibold\"),\n    \"body-md-bold\": generateFont(\"body-md\", \"bold\"),\n\n    \"body-sm-light\": generateFont(\"body-sm\", \"light\"),\n    \"body-sm-regular\": generateFont(\"body-sm\", \"regular\"),\n    \"body-sm-semibold\": generateFont(\"body-sm\", \"semibold\"),\n    \"body-sm-bold\": generateFont(\"body-sm\", \"bold\"),\n\n    \"body-xs-light\": generateFont(\"body-xs\", \"light\"),\n    \"body-xs-regular\": generateFont(\"body-xs\", \"regular\"),\n    \"body-xs-semibold\": generateFont(\"body-xs\", \"semibold\"),\n    \"body-xs-bold\": generateFont(\"body-xs\", \"bold\"),\n\n    \"form-label\": generateFont(\"form-label\", \"semibold\"),\n    \"form-description\": generateFont(\"form-description\", \"regular\"),\n\n    Spec: FontSpec,\n} as const;\n"],"names":["FontSpec","Font","generateFont","Spec"],"mappings":"gDAEO,MAAMA,EAAW,CACpB,cAAe,yBACf,eAAgB,0BAEhB,eAAgB,+BAChB,iBAAkB,iCAClB,kBAAmB,kCACnB,cAAe,8BAEf,mBAAoB,mCACpB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCAEnB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,qBAAsB,qCACtB,eAAgB,+BAChB,eAAgB,+BAChB,eAAgB,+BAEhB,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,kBAAmB,kCACnB,gBAAiB,gCACjB,gBAAiB,gCAEjB,wBAAyB,wCACzB,sBAAuB,sCACvB,sBAAuB,uCAGdC,EAAO,CAChB,oBAAqBC,EAAa,cAAe,SACjD,sBAAuBA,EAAa,cAAe,WACnD,uBAAwBA,EAAa,cAAe,YACpD,mBAAoBA,EAAa,cAAe,QAEhD,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,sBAAuBA,EAAa,gBAAiB,SACrD,wBAAyBA,EAAa,gBAAiB,WACvD,yBAA0BA,EAAa,gBAAiB,YACxD,qBAAsBA,EAAa,gBAAiB,QAEpD,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,aAAcA,EAAa,aAAc,YACzC,mBAAoBA,EAAa,mBAAoB,WAErDC,KAAMH"}

package/theme/utils/css-variable.d.ts

@@ -1,5 +1,10 @@
 import type { CSSProperties } from "react";
 import type { CSSVariableString } from "../types";
+/**
+ * Extracts an fds CSS variable name from raw token input.
+ * Supports values like "var(--fds-breakpoint-sm-max)" and "--fds-breakpoint-sm-max".
+ */
+export declare const extractFdsCssVariableName: (value: string | undefined) => `--fds-${string}` | undefined;
 /**
  * Parse a CSS variable string and return its computed value.
  * @param cssVarString CSS variable string (e.g., "var(--fds-breakpoint-xxs-min)")
@@ -13,7 +18,16 @@ export declare function parseCSSVariableValue(cssVarString: CSSVariableString |
  * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid
  */
 export declare function parsePxOrRemValue(cssValue: string): number;
+/**
+ * Normalizes a CSS length value and accepts px/rem or unitless zero.
+ * Returns undefined for invalid inputs.
+ */
+export declare const normalizeCssLengthValue: (value: string | undefined) => string | undefined;
 /**
  * Extracts inline token CSS custom properties from the theme element.
  */
 export declare const getInheritedInlineCssVariables: (themeElement: HTMLElement | null) => CSSProperties;
+/**
+ * Convert a numeric value to a CSS unit string (e.g., 12 → "12px"). Returns null for non-numeric values.
+ */
+export declare const formatUnitValue: (value: unknown, unit: string) => string | null;

package/theme/utils/css-variable.js

@@ -1,2 +1,2 @@
-function e(e,t){var r;if(!e)return"";if(!globalThis.window||!t)return console.warn(`Cannot parse CSS variable value for "${e}" because window or sourceElement is not available.`),"";const n=null===(r=/--fds-[\w-]+/.exec(e))||void 0===r?void 0:r[0];return n?getComputedStyle(t).getPropertyValue(n).trim():(console.warn(`Invalid CSS variable string: ${e}. Expected format: var(--fds-token-name)`),"")}function t(e){const t=e.trim(),r=/^(-?\d*\.?\d+)(px|rem)$/i.exec(t);if(!r)return 0;const n=Number.parseFloat(r[1]);if(Number.isNaN(n))return 0;if("px"===r[2].toLowerCase())return n;const o=globalThis.window?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):16;return n*(Number.isNaN(o)?16:o)}const r=e=>{if(!e||0===e.style.length)return{};const t={};return((e,t)=>{const{style:r}=e;for(let e=0;e<r.length;e++){const n=r.item(e);if(!(null==n?void 0:n.startsWith("--fds")))continue;const o=r.getPropertyValue(n).trim();o&&(t[n]=o)}})(e,t),t};export{r as getInheritedInlineCssVariables,e as parseCSSVariableValue,t as parsePxOrRemValue};
+const e=/^(-?\d*\.?\d+)(px|rem)$/i,t=e=>{var t;if(!e)return;const r=null===(t=/--fds-[\w-]+/.exec(e))||void 0===t?void 0:t[0];return r||void 0};function r(e,r){if(!e)return"";if(!globalThis.window||!r)return console.warn(`Cannot parse CSS variable value for "${e}" because window or sourceElement is not available.`),"";const n=t(e);return n?getComputedStyle(r).getPropertyValue(n).trim():(console.warn(`Invalid CSS variable string: ${e}. Expected format: var(--fds-token-name)`),"")}function n(t){const r=t.trim(),n=e.exec(r);if(!n)return 0;const o=Number.parseFloat(n[1]);if(Number.isNaN(o))return 0;if("px"===n[2].toLowerCase())return o;const i=globalThis.window?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):16;return o*(Number.isNaN(i)?16:i)}const o=t=>{if(!t)return;const r=t.trim();return"0"===r||e.test(r)?r:void 0},i=e=>{if(!e||0===e.style.length)return{};const t={};return((e,t)=>{const{style:r}=e;for(let e=0;e<r.length;e++){const n=r.item(e);if(!(null==n?void 0:n.startsWith("--fds")))continue;const o=r.getPropertyValue(n).trim();o&&(t[n]=o)}})(e,t),t},s=(e,t)=>"number"==typeof e?`${e}${t}`:null;export{t as extractFdsCssVariableName,s as formatUnitValue,i as getInheritedInlineCssVariables,o as normalizeCssLengthValue,r as parseCSSVariableValue,n as parsePxOrRemValue};
 //# sourceMappingURL=css-variable.js.map

package/theme/utils/css-variable.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-variable.js","sources":["../../../src/theme/utils/css-variable.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport type { CSSVariableString } from \"../types\";\n\ntype InlineCssVariables = Record<`--${string}`, string>;\n\nconst DEFAULT_FONT_SIZE_PX = 16;\n\n/**\n * Parse a CSS variable string and return its computed value.\n * @param cssVarString CSS variable string (e.g., \"var(--fds-breakpoint-xxs-min)\")\n * @param sourceElement Element to compute the CSS variable value from\n * @returns The CSS variable value, or an empty string if not found or invalid\n */\nexport function parseCSSVariableValue(\n    cssVarString: CSSVariableString | undefined,\n    sourceElement: HTMLElement | null\n): string {\n    if (!cssVarString) return \"\";\n\n    if (!globalThis.window || !sourceElement) {\n        console.warn(\n            `Cannot parse CSS variable value for \"${cssVarString}\" because window or sourceElement is not available.`\n        );\n        return \"\";\n    }\n\n    const variableName = /--fds-[\\w-]+/.exec(cssVarString as string)?.[0];\n    if (!variableName) {\n        console.warn(\n            `Invalid CSS variable string: ${cssVarString}. Expected format: var(--fds-token-name)`\n        );\n        return \"\";\n    }\n\n    return getComputedStyle(sourceElement)\n        .getPropertyValue(variableName)\n        .trim();\n}\n\n/**\n * Parse a pixel or rem value and return its numeric value.\n * @param cssValue CSS unit value (e.g., \"12px\", \"1.5rem\")\n * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid\n */\nexport function parsePxOrRemValue(cssValue: string): number {\n    const value = cssValue.trim();\n    const match = /^(-?\\d*\\.?\\d+)(px|rem)$/i.exec(value);\n    if (!match) return 0;\n\n    const parsedValue = Number.parseFloat(match[1]);\n    if (Number.isNaN(parsedValue)) return 0;\n\n    const unit = match[2].toLowerCase();\n    if (unit === \"px\") return parsedValue;\n\n    const rootFontSize = globalThis.window\n        ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize)\n        : DEFAULT_FONT_SIZE_PX;\n\n    const resolvedRootFontSize = Number.isNaN(rootFontSize)\n        ? DEFAULT_FONT_SIZE_PX\n        : rootFontSize;\n\n    return parsedValue * resolvedRootFontSize;\n}\n\nconst mergeInlineCssVariables = (\n    element: HTMLElement,\n    target: InlineCssVariables\n) => {\n    const { style } = element;\n\n    for (let i = 0; i < style.length; i++) {\n        const propertyName = style.item(i);\n        if (!propertyName?.startsWith(\"--fds\")) continue;\n\n        const value = style.getPropertyValue(propertyName).trim();\n        if (!value) continue;\n\n        target[propertyName as `--${string}`] = value;\n    }\n};\n\n/**\n * Extracts inline token CSS custom properties from the theme element.\n */\nexport const getInheritedInlineCssVariables = (\n    themeElement: HTMLElement | null\n): CSSProperties => {\n    if (!themeElement || themeElement.style.length === 0) return {};\n\n    const variables: InlineCssVariables = {};\n    mergeInlineCssVariables(themeElement, variables);\n\n    return variables;\n};\n"],"names":["parseCSSVariableValue","cssVarString","sourceElement","globalThis","window","console","warn","variableName","_a","exec","getComputedStyle","getPropertyValue","trim","parsePxOrRemValue","cssValue","value","match","parsedValue","Number","parseFloat","isNaN","toLowerCase","rootFontSize","document","documentElement","fontSize","getInheritedInlineCssVariables","themeElement","style","length","variables","element","target","i","propertyName","item","startsWith","mergeInlineCssVariables"],"mappings":"AAcM,SAAUA,EACZC,EACAC,SAEA,IAAKD,EAAc,MAAO,GAE1B,IAAKE,WAAWC,SAAWF,EAIvB,OAHAG,QAAQC,KACJ,wCAAwCL,wDAErC,GAGX,MAAMM,EAA0D,QAA3CC,EAAA,eAAeC,KAAKR,UAAuB,IAAAO,OAAA,EAAAA,EAAG,GACnE,OAAKD,EAOEG,iBAAiBR,GACnBS,iBAAiBJ,GACjBK,QARDP,QAAQC,KACJ,gCAAgCL,6CAE7B,GAMf,CAOM,SAAUY,EAAkBC,GAC9B,MAAMC,EAAQD,EAASF,OACjBI,EAAQ,2BAA2BP,KAAKM,GAC9C,IAAKC,EAAO,OAAO,EAEnB,MAAMC,EAAcC,OAAOC,WAAWH,EAAM,IAC5C,GAAIE,OAAOE,MAAMH,GAAc,OAAO,EAGtC,GAAa,OADAD,EAAM,GAAGK,cACH,OAAOJ,EAE1B,MAAMK,EAAenB,WAAWC,OAC1Bc,OAAOC,WAAWT,iBAAiBa,SAASC,iBAAiBC,UAnD1C,GA0DzB,OAAOR,GAJsBC,OAAOE,MAAME,GAtDjB,GAwDnBA,EAGV,CAEA,MAoBaI,EACTC,IAEA,IAAKA,GAA8C,IAA9BA,EAAaC,MAAMC,OAAc,MAAO,CAAA,EAE7D,MAAMC,EAAgC,CAAA,EAGtC,MA5B4B,EAC5BC,EACAC,KAEA,MAAMJ,MAAEA,GAAUG,EAElB,IAAK,IAAIE,EAAI,EAAGA,EAAIL,EAAMC,OAAQI,IAAK,CACnC,MAAMC,EAAeN,EAAMO,KAAKF,GAChC,KAAKC,aAAY,EAAZA,EAAcE,WAAW,UAAU,SAExC,MAAMrB,EAAQa,EAAMjB,iBAAiBuB,GAActB,OAC9CG,IAELiB,EAAOE,GAAiCnB,EAC5C,GAYAsB,CAAwBV,EAAcG,GAE/BA,CAAS"}
+{"version":3,"file":"css-variable.js","sources":["../../../src/theme/utils/css-variable.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport type { CSSVariableString } from \"../types\";\n\ntype InlineCssVariables = Record<`--${string}`, string>;\n\nconst DEFAULT_FONT_SIZE_PX = 16;\nconst CSS_PX_OR_REM_CAPTURE_PATTERN = /^(-?\\d*\\.?\\d+)(px|rem)$/i;\n\n/**\n * Extracts an fds CSS variable name from raw token input.\n * Supports values like \"var(--fds-breakpoint-sm-max)\" and \"--fds-breakpoint-sm-max\".\n */\nexport const extractFdsCssVariableName = (\n    value: string | undefined\n): `--fds-${string}` | undefined => {\n    if (!value) return undefined;\n\n    const variableName = /--fds-[\\w-]+/.exec(value)?.[0];\n\n    if (!variableName) {\n        return undefined;\n    }\n\n    return variableName as `--fds-${string}`;\n};\n\n/**\n * Parse a CSS variable string and return its computed value.\n * @param cssVarString CSS variable string (e.g., \"var(--fds-breakpoint-xxs-min)\")\n * @param sourceElement Element to compute the CSS variable value from\n * @returns The CSS variable value, or an empty string if not found or invalid\n */\nexport function parseCSSVariableValue(\n    cssVarString: CSSVariableString | undefined,\n    sourceElement: HTMLElement | null\n): string {\n    if (!cssVarString) return \"\";\n\n    if (!globalThis.window || !sourceElement) {\n        console.warn(\n            `Cannot parse CSS variable value for \"${cssVarString}\" because window or sourceElement is not available.`\n        );\n        return \"\";\n    }\n\n    const variableName = extractFdsCssVariableName(cssVarString);\n    if (!variableName) {\n        console.warn(\n            `Invalid CSS variable string: ${cssVarString}. Expected format: var(--fds-token-name)`\n        );\n        return \"\";\n    }\n\n    return getComputedStyle(sourceElement)\n        .getPropertyValue(variableName)\n        .trim();\n}\n\n/**\n * Parse a pixel or rem value and return its numeric value.\n * @param cssValue CSS unit value (e.g., \"12px\", \"1.5rem\")\n * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid\n */\nexport function parsePxOrRemValue(cssValue: string): number {\n    const value = cssValue.trim();\n    const match = CSS_PX_OR_REM_CAPTURE_PATTERN.exec(value);\n    if (!match) return 0;\n\n    const parsedValue = Number.parseFloat(match[1]);\n    if (Number.isNaN(parsedValue)) return 0;\n\n    const unit = match[2].toLowerCase();\n    if (unit === \"px\") return parsedValue;\n\n    const rootFontSize = globalThis.window\n        ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize)\n        : DEFAULT_FONT_SIZE_PX;\n\n    const resolvedRootFontSize = Number.isNaN(rootFontSize)\n        ? DEFAULT_FONT_SIZE_PX\n        : rootFontSize;\n\n    return parsedValue * resolvedRootFontSize;\n}\n\n/**\n * Normalizes a CSS length value and accepts px/rem or unitless zero.\n * Returns undefined for invalid inputs.\n */\nexport const normalizeCssLengthValue = (\n    value: string | undefined\n): string | undefined => {\n    if (!value) return undefined;\n\n    const trimmedValue = value.trim();\n\n    // CSS allows unitless zero in width-like properties.\n    if (trimmedValue === \"0\") {\n        return trimmedValue;\n    }\n\n    if (!CSS_PX_OR_REM_CAPTURE_PATTERN.test(trimmedValue)) {\n        return undefined;\n    }\n\n    return trimmedValue;\n};\n\nconst mergeInlineCssVariables = (\n    element: HTMLElement,\n    target: InlineCssVariables\n) => {\n    const { style } = element;\n\n    for (let i = 0; i < style.length; i++) {\n        const propertyName = style.item(i);\n        if (!propertyName?.startsWith(\"--fds\")) continue;\n\n        const value = style.getPropertyValue(propertyName).trim();\n        if (!value) continue;\n\n        target[propertyName as `--${string}`] = value;\n    }\n};\n\n/**\n * Extracts inline token CSS custom properties from the theme element.\n */\nexport const getInheritedInlineCssVariables = (\n    themeElement: HTMLElement | null\n): CSSProperties => {\n    if (!themeElement || themeElement.style.length === 0) return {};\n\n    const variables: InlineCssVariables = {};\n    mergeInlineCssVariables(themeElement, variables);\n\n    return variables;\n};\n\n/**\n * Convert a numeric value to a CSS unit string (e.g., 12 → \"12px\"). Returns null for non-numeric values.\n */\nexport const formatUnitValue = (\n    value: unknown,\n    unit: string\n): string | null => {\n    if (typeof value === \"number\") {\n        return `${value}${unit}`;\n    }\n    return null;\n};\n"],"names":["CSS_PX_OR_REM_CAPTURE_PATTERN","extractFdsCssVariableName","value","variableName","_a","exec","parseCSSVariableValue","cssVarString","sourceElement","globalThis","window","console","warn","getComputedStyle","getPropertyValue","trim","parsePxOrRemValue","cssValue","match","parsedValue","Number","parseFloat","isNaN","toLowerCase","rootFontSize","document","documentElement","fontSize","normalizeCssLengthValue","trimmedValue","test","getInheritedInlineCssVariables","themeElement","style","length","variables","element","target","i","propertyName","item","startsWith","mergeInlineCssVariables","formatUnitValue","unit"],"mappings":"AAMA,MACMA,EAAgC,2BAMzBC,EACTC,UAEA,IAAKA,EAAO,OAEZ,MAAMC,EAAyC,QAA1BC,EAAA,eAAeC,KAAKH,UAAM,IAAAE,OAAA,EAAAA,EAAG,GAElD,OAAKD,QAAL,CAIwC,EAStC,SAAUG,EACZC,EACAC,GAEA,IAAKD,EAAc,MAAO,GAE1B,IAAKE,WAAWC,SAAWF,EAIvB,OAHAG,QAAQC,KACJ,wCAAwCL,wDAErC,GAGX,MAAMJ,EAAeF,EAA0BM,GAC/C,OAAKJ,EAOEU,iBAAiBL,GACnBM,iBAAiBX,GACjBY,QARDJ,QAAQC,KACJ,gCAAgCL,6CAE7B,GAMf,CAOM,SAAUS,EAAkBC,GAC9B,MAAMf,EAAQe,EAASF,OACjBG,EAAQlB,EAA8BK,KAAKH,GACjD,IAAKgB,EAAO,OAAO,EAEnB,MAAMC,EAAcC,OAAOC,WAAWH,EAAM,IAC5C,GAAIE,OAAOE,MAAMH,GAAc,OAAO,EAGtC,GAAa,OADAD,EAAM,GAAGK,cACH,OAAOJ,EAE1B,MAAMK,EAAef,WAAWC,OAC1BU,OAAOC,WAAWR,iBAAiBY,SAASC,iBAAiBC,UAtE1C,GA6EzB,OAAOR,GAJsBC,OAAOE,MAAME,GAzEjB,GA2EnBA,EAGV,CAMO,MAAMI,EACT1B,IAEA,IAAKA,EAAO,OAEZ,MAAM2B,EAAe3B,EAAMa,OAG3B,MAAqB,MAAjBc,GAIC7B,EAA8B8B,KAAKD,GAH7BA,OAGX,CAImB,EAuBVE,EACTC,IAEA,IAAKA,GAA8C,IAA9BA,EAAaC,MAAMC,OAAc,MAAO,CAAA,EAE7D,MAAMC,EAAgC,CAAA,EAGtC,MA5B4B,EAC5BC,EACAC,KAEA,MAAMJ,MAAEA,GAAUG,EAElB,IAAK,IAAIE,EAAI,EAAGA,EAAIL,EAAMC,OAAQI,IAAK,CACnC,MAAMC,EAAeN,EAAMO,KAAKF,GAChC,KAAKC,aAAY,EAAZA,EAAcE,WAAW,UAAU,SAExC,MAAMvC,EAAQ+B,EAAMnB,iBAAiByB,GAAcxB,OAC9Cb,IAELmC,EAAOE,GAAiCrC,EAC5C,GAYAwC,CAAwBV,EAAcG,GAE/BA,CAAS,EAMPQ,EAAkB,CAC3BzC,EACA0C,IAEqB,iBAAV1C,EACA,GAAGA,IAAQ0C,IAEf"}

package/theme/utils/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./css-variable";
 export * from "./font";
-export * from "./media-query";
 export * from "./token-resolver";
 export * from "./use-apply-styles";
 export * from "./use-design-token";
+export * from "./use-media-query";

package/theme/utils/use-media-query.d.ts

@@ -0,0 +1,24 @@
+import { Breakpoint } from "../tokens/breakpoint";
+export type BreakpointName = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type MaxWidthBreakpointName = Exclude<BreakpointName, "xxl">;
+type MinWidthBreakpointTokenKey = `${BreakpointName}-min`;
+type MaxWidthBreakpointTokenKey = `${MaxWidthBreakpointName}-max`;
+type WidthBreakpointTokenKey = MinWidthBreakpointTokenKey | MaxWidthBreakpointTokenKey;
+type WidthBreakpointCSSVariableString = (typeof Breakpoint)[WidthBreakpointTokenKey];
+type MediaQueryFeature = "aspect-ratio" | "color-index" | "color" | "device-aspect-ratio" | "device-height" | "device-width" | "grid" | "height" | "max-height" | "min-height" | "hover" | "monochrome" | "orientation" | "pointer" | "prefers-color-scheme" | "resolution" | "scan" | "width";
+export type MediaQueryClauseValue = string | number | boolean;
+export interface MediaQueryClause {
+    feature: MediaQueryFeature;
+    value: MediaQueryClauseValue | undefined;
+}
+export interface MediaQueryOptions {
+    minWidth?: WidthBreakpointCSSVariableString;
+    maxWidth?: WidthBreakpointCSSVariableString;
+    clauses?: MediaQueryClause[];
+}
+export declare const DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT = "480px";
+export declare const useMinWidthMediaQuery: (breakpoint: BreakpointName) => boolean;
+export declare const useMaxWidthMediaQuery: (breakpoint: MaxWidthBreakpointName) => boolean;
+export declare const useResolvedBreakpointToken: (breakpointToken: WidthBreakpointCSSVariableString | undefined, fallbackLength?: string) => string | undefined;
+export declare const useMediaQuery: (options: MediaQueryOptions) => boolean;
+export {};

package/theme/utils/use-media-query.js

@@ -0,0 +1,2 @@
+import{useState as i,useEffect as e}from"react";import{Breakpoint as n}from"../tokens/breakpoint.js";import{normalizeCssLengthValue as t}from"./css-variable.js";import{isTokenFromSet as r}from"./token-resolver.js";import{useResolvedTokenValue as a}from"./use-design-token.js";const m="480px",o=new Set([n["xxs-min"],n["xs-min"],n["sm-min"],n["md-min"],n["lg-min"],n["xl-min"],n["xxl-min"],n["xxs-max"],n["xs-max"],n["sm-max"],n["md-max"],n["lg-max"],n["xl-max"]]),l=i=>r(i,o),s=i=>n[`${i}-min`],d=i=>n[`${i}-max`],u=i=>w({minWidth:s(i)}),v=i=>w({maxWidth:d(i)}),x=(i,e)=>{if(e)return`(${i}: ${e})`},c=i=>{if(void 0===(null==i?void 0:i.value))return;if(!0===i.value)return`(${i.feature})`;if(!1===i.value)return;const e=`${i.value}`.trim();return e?`(${i.feature}: ${e})`:void 0},h=(i,e)=>{var n,r;const m=a({value:i,fallback:null!==(n=null!=e?e:i)&&void 0!==n?n:"",isToken:l,normalizeCustom:i=>i});return null!==(r=t(m))&&void 0!==r?r:t(e)},f=(n,t)=>{const[r,a]=i((()=>((i,e)=>{var n;return i&&(null===(n=globalThis.window)||void 0===n?void 0:n.matchMedia)?globalThis.window.matchMedia(i).matches:e})(n,t)));return e((()=>{var i;if(!n||!(null===(i=globalThis.window)||void 0===i?void 0:i.matchMedia))return void a(t);const e=globalThis.window.matchMedia(n),r=i=>{a(i.matches)};return a(e.matches),e.addEventListener("change",r),()=>{e.removeEventListener("change",r)}}),[t,n]),r},w=i=>{const{minWidth:e,maxWidth:n,clauses:t=[]}=i,r=h(e),a=h(n),m=[...[x("min-width",r),x("max-width",a)].filter((i=>!!i)),...t.map(c).filter((i=>!!i))].join(" and "),o=((i,e)=>!e&&!!i)(!!r,!!a);return f(m,o)};export{m as DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,v as useMaxWidthMediaQuery,w as useMediaQuery,u as useMinWidthMediaQuery,h as useResolvedBreakpointToken};
+//# sourceMappingURL=use-media-query.js.map

package/theme/utils/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","sources":["../../../src/theme/utils/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Breakpoint } from \"../tokens/breakpoint\";\nimport { normalizeCssLengthValue } from \"./css-variable\";\nimport { isTokenFromSet } from \"./token-resolver\";\nimport { useResolvedTokenValue } from \"./use-design-token\";\n\nexport type BreakpointName = \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\nexport type MaxWidthBreakpointName = Exclude<BreakpointName, \"xxl\">;\ntype MinWidthBreakpointTokenKey = `${BreakpointName}-min`;\ntype MaxWidthBreakpointTokenKey = `${MaxWidthBreakpointName}-max`;\ntype WidthBreakpointTokenKey =\n    | MinWidthBreakpointTokenKey\n    | MaxWidthBreakpointTokenKey;\ntype WidthBreakpointCSSVariableString =\n    (typeof Breakpoint)[WidthBreakpointTokenKey];\n\ntype MediaQueryFeature =\n    | \"aspect-ratio\"\n    | \"color-index\"\n    | \"color\"\n    | \"device-aspect-ratio\"\n    | \"device-height\"\n    | \"device-width\"\n    | \"grid\"\n    | \"height\"\n    | \"max-height\"\n    | \"min-height\"\n    | \"hover\"\n    | \"monochrome\"\n    | \"orientation\"\n    | \"pointer\"\n    | \"prefers-color-scheme\"\n    | \"resolution\"\n    | \"scan\"\n    | \"width\";\n\nexport type MediaQueryClauseValue = string | number | boolean;\n\nexport interface MediaQueryClause {\n    feature: MediaQueryFeature;\n    value: MediaQueryClauseValue | undefined;\n}\n\nexport interface MediaQueryOptions {\n    minWidth?: WidthBreakpointCSSVariableString;\n    maxWidth?: WidthBreakpointCSSVariableString;\n    clauses?: MediaQueryClause[];\n}\n\nexport const DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT = \"480px\";\nconst WIDTH_BREAKPOINT_TOKEN_SET = new Set<WidthBreakpointCSSVariableString>([\n    Breakpoint[\"xxs-min\"],\n    Breakpoint[\"xs-min\"],\n    Breakpoint[\"sm-min\"],\n    Breakpoint[\"md-min\"],\n    Breakpoint[\"lg-min\"],\n    Breakpoint[\"xl-min\"],\n    Breakpoint[\"xxl-min\"],\n    Breakpoint[\"xxs-max\"],\n    Breakpoint[\"xs-max\"],\n    Breakpoint[\"sm-max\"],\n    Breakpoint[\"md-max\"],\n    Breakpoint[\"lg-max\"],\n    Breakpoint[\"xl-max\"],\n]);\n\nconst isBreakpointToken = (\n    value: unknown\n): value is WidthBreakpointCSSVariableString => {\n    return isTokenFromSet<WidthBreakpointCSSVariableString>(\n        value,\n        WIDTH_BREAKPOINT_TOKEN_SET\n    );\n};\n\nconst getMinWidthBreakpointToken = (breakpoint: BreakpointName) => {\n    return Breakpoint[`${breakpoint}-min`];\n};\n\nconst getMaxWidthBreakpointToken = (breakpoint: MaxWidthBreakpointName) => {\n    return Breakpoint[`${breakpoint}-max`];\n};\n\nexport const useMinWidthMediaQuery = (breakpoint: BreakpointName) =>\n    useMediaQuery({\n        minWidth: getMinWidthBreakpointToken(breakpoint),\n    });\n\nexport const useMaxWidthMediaQuery = (breakpoint: MaxWidthBreakpointName) =>\n    useMediaQuery({\n        maxWidth: getMaxWidthBreakpointToken(breakpoint),\n    });\n\nconst getMediaQueryClause = (\n    feature: \"min-width\" | \"max-width\",\n    value: string | undefined\n) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return `(${feature}: ${value})`;\n};\n\nconst getCustomMediaQueryClause = (\n    clause: MediaQueryClause | null | undefined\n) => {\n    if (clause?.value === undefined) {\n        return undefined;\n    }\n\n    if (clause.value === true) {\n        return `(${clause.feature})`;\n    }\n\n    if (clause.value === false) {\n        return undefined;\n    }\n\n    const value = `${clause.value}`.trim();\n\n    if (!value) {\n        return undefined;\n    }\n\n    return `(${clause.feature}: ${value})`;\n};\n\nconst getDefaultMatch = (hasMinWidth: boolean, hasMaxWidth: boolean) => {\n    if (hasMaxWidth) {\n        return false;\n    }\n\n    if (hasMinWidth) {\n        return true;\n    }\n\n    return false;\n};\n\nconst getCurrentMatch = (queryString: string, defaultMatch: boolean) => {\n    if (!queryString) {\n        return defaultMatch;\n    }\n\n    if (!globalThis.window?.matchMedia) {\n        return defaultMatch;\n    }\n\n    return globalThis.window.matchMedia(queryString).matches;\n};\n\nexport const useResolvedBreakpointToken = (\n    breakpointToken: WidthBreakpointCSSVariableString | undefined,\n    fallbackLength?: string\n): string | undefined => {\n    const resolvedTokenValue = useResolvedTokenValue<\n        WidthBreakpointCSSVariableString,\n        string\n    >({\n        value: breakpointToken,\n        fallback: fallbackLength ?? breakpointToken ?? \"\",\n        isToken: isBreakpointToken,\n        normalizeCustom: (value) => value,\n    });\n\n    return (\n        normalizeCssLengthValue(resolvedTokenValue) ??\n        normalizeCssLengthValue(fallbackLength)\n    );\n};\n\nconst useMatchMediaQuery = (\n    queryString: string,\n    defaultMatch: boolean\n): boolean => {\n    const [matches, setMatches] = useState(() =>\n        getCurrentMatch(queryString, defaultMatch)\n    );\n\n    useEffect(() => {\n        if (!queryString || !globalThis.window?.matchMedia) {\n            setMatches(defaultMatch);\n            return;\n        }\n\n        const mediaQueryList = globalThis.window.matchMedia(queryString);\n        const handleChange = (event: MediaQueryListEvent) => {\n            setMatches(event.matches);\n        };\n\n        setMatches(mediaQueryList.matches);\n        mediaQueryList.addEventListener(\"change\", handleChange);\n\n        return () => {\n            mediaQueryList.removeEventListener(\"change\", handleChange);\n        };\n    }, [defaultMatch, queryString]);\n\n    return matches;\n};\n\nexport const useMediaQuery = (options: MediaQueryOptions): boolean => {\n    const { minWidth, maxWidth, clauses = [] } = options;\n    const normalizedMinWidth = useResolvedBreakpointToken(minWidth);\n    const normalizedMaxWidth = useResolvedBreakpointToken(maxWidth);\n    const widthClauses = [\n        getMediaQueryClause(\"min-width\", normalizedMinWidth),\n        getMediaQueryClause(\"max-width\", normalizedMaxWidth),\n    ].filter((value): value is string => !!value);\n    const customClauses = clauses\n        .map(getCustomMediaQueryClause)\n        .filter((value): value is string => !!value);\n    const queryString = [...widthClauses, ...customClauses].join(\" and \");\n    const hasMinWidth = !!normalizedMinWidth;\n    const hasMaxWidth = !!normalizedMaxWidth;\n    const defaultMatch = getDefaultMatch(hasMinWidth, hasMaxWidth);\n\n    return useMatchMediaQuery(queryString, defaultMatch);\n};\n"],"names":["DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT","WIDTH_BREAKPOINT_TOKEN_SET","Set","Breakpoint","isBreakpointToken","value","isTokenFromSet","getMinWidthBreakpointToken","breakpoint","getMaxWidthBreakpointToken","useMinWidthMediaQuery","useMediaQuery","minWidth","useMaxWidthMediaQuery","maxWidth","getMediaQueryClause","feature","getCustomMediaQueryClause","clause","undefined","trim","useResolvedBreakpointToken","breakpointToken","fallbackLength","resolvedTokenValue","useResolvedTokenValue","fallback","_a","isToken","normalizeCustom","_b","normalizeCssLengthValue","useMatchMediaQuery","queryString","defaultMatch","matches","setMatches","useState","globalThis","window","matchMedia","getCurrentMatch","useEffect","mediaQueryList","handleChange","event","addEventListener","removeEventListener","options","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"oRAkDO,MAAMA,EAAsC,QAC7CC,EAA6B,IAAIC,IAAsC,CACzEC,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,WACXA,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,YAGTC,EACFC,GAEOC,EACHD,EACAJ,GAIFM,EAA8BC,GACzBL,EAAW,GAAGK,SAGnBC,EAA8BD,GACzBL,EAAW,GAAGK,SAGZE,EAAyBF,GAClCG,EAAc,CACVC,SAAUL,EAA2BC,KAGhCK,EAAyBL,GAClCG,EAAc,CACVG,SAAUL,EAA2BD,KAGvCO,EAAsB,CACxBC,EACAX,KAEA,GAAKA,EAIL,MAAO,IAAIW,MAAYX,IAAQ,EAG7BY,EACFC,IAEA,QAAsBC,KAAlBD,aAAM,EAANA,EAAQb,OACR,OAGJ,IAAqB,IAAjBa,EAAOb,MACP,MAAO,IAAIa,EAAOF,WAGtB,IAAqB,IAAjBE,EAAOb,MACP,OAGJ,MAAMA,EAAQ,GAAGa,EAAOb,QAAQe,OAEhC,OAAKf,EAIE,IAAIa,EAAOF,YAAYX,UAJ9B,CAIsC,EA2B7BgB,EAA6B,CACtCC,EACAC,aAEA,MAAMC,EAAqBC,EAGzB,CACEpB,MAAOiB,EACPI,SAA2C,QAAjCC,EAAAJ,QAAAA,EAAkBD,SAAe,IAAAK,EAAAA,EAAI,GAC/CC,QAASxB,EACTyB,gBAAkBxB,GAAUA,IAGhC,OAC+C,QAA3CyB,EAAAC,EAAwBP,UAAmB,IAAAM,EAAAA,EAC3CC,EAAwBR,EAAe,EAIzCS,EAAqB,CACvBC,EACAC,KAEA,MAAOC,EAASC,GAAcC,GAAS,IApCnB,EAACJ,EAAqBC,WAC1C,OAAKD,IAIiB,QAAjBN,EAAAW,WAAWC,cAAM,IAAAZ,OAAA,EAAAA,EAAEa,YAIjBF,WAAWC,OAAOC,WAAWP,GAAaE,QAPtCD,CAO6C,EA4BpDO,CAAgBR,EAAaC,KAsBjC,OAnBAQ,GAAU,WACN,IAAKT,KAAiC,QAAjBN,EAAAW,WAAWC,cAAM,IAAAZ,OAAA,EAAAA,EAAEa,YAEpC,YADAJ,EAAWF,GAIf,MAAMS,EAAiBL,WAAWC,OAAOC,WAAWP,GAC9CW,EAAgBC,IAClBT,EAAWS,EAAMV,QAAQ,EAM7B,OAHAC,EAAWO,EAAeR,SAC1BQ,EAAeG,iBAAiB,SAAUF,GAEnC,KACHD,EAAeI,oBAAoB,SAAUH,EAAa,CAC7D,GACF,CAACV,EAAcD,IAEXE,CAAO,EAGLxB,EAAiBqC,IAC1B,MAAMpC,SAAEA,EAAQE,SAAEA,EAAQmC,QAAEA,EAAU,IAAOD,EACvCE,EAAqB7B,EAA2BT,GAChDuC,EAAqB9B,EAA2BP,GAQhDmB,EAAc,IAPC,CACjBlB,EAAoB,YAAamC,GACjCnC,EAAoB,YAAaoC,IACnCC,QAAQ/C,KAA6BA,OACjB4C,EACjBI,IAAIpC,GACJmC,QAAQ/C,KAA6BA,KACciD,KAAK,SAGvDpB,EAxFc,EAACqB,EAAsBC,KACvCA,KAIAD,EAmFiBE,GAFCP,IACAC,GAGtB,OAAOnB,EAAmBC,EAAaC,EAAa"}

package/time-range-picker/combobox-picker/combobox-picker.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import{CrossIcon as i}from"@lifesg/react-icons/cross";import{useState as o,useRef as l,useMemo as a,useCallback as n,useEffect as s}from"react";import{FormErrorMessage as d}from"../../form/form-label.js";import{clearIcon as m}from"../../input/input.styles.js";import{ClearIconContainer as c}from"../../input-range-select/input-range-select.style.js";import{VisuallyHidden as p,concatIds as u}from"../../shared/accessibility/index.js";import"clsx";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as h}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as f}from"../../shared/dropdown-list/dropdown-list.js";import{DropdownListState as v}from"../../shared/dropdown-list/dropdown-list-state.js";import"../../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../../markup/markup.js";import"../../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as g}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import"../../shared/input-wrapper/input-wrapper.js";import"../../shared/dropdown-list/dropdown-list.styles_1qveyb9.css";import"../../shared/dropdown-list/dropdown-search.js";import"../../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../../external/lodash/_getTag.js";import"../../external/lodash/isArguments.js";import"../../external/lodash/_baseGetTag.js";import"../../external/lodash/isBuffer.js";import"../../external/lodash/isTypedArray.js";import"../../external/lodash/_Stack.js";import"../../external/lodash/_SetCache.js";import"../../external/lodash/_equalByTag.js";import"../../shared/dropdown-list/virtuoso-components.js";import{RangeInputInnerContainer as b}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimeHelper as j}from"../../util/time-helper.js";import{Wrapper as y,SelectorInput as x}from"../common.styles.js";import{TimeFieldContainer as w}from"./combobox-picker.styles.js";const I=I=>{var{id:_,disabled:T=!1,error:C,value:k,format:S="12hr",readOnly:A,onChange:O,onFocus:E,onBlur:F,alignment:B="left",dropdownZIndex:q,startLimit:H,endLimit:$,initialScrollStartTime:L,initialScrollEndTime:N,interval:G=15,dropdownRootNode:P,"aria-labelledby":D,"aria-describedby":M,"aria-invalid":Z}=I,K=e(I,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const R=h(),[W,z]=o(null),[J,Q]=o(!1),[U,V]=o(""),[X,Y]=o(""),[ee,te]=o(""),[re,ie]=o(""),[oe,le]=o(""),ae=l(null),ne=l(null),se=l(null),de=`${R}-listbox`,me=`${R}-start-label`,ce=`${R}-end-label`,pe=`${R}-error-message`,ue=a((()=>j.generateTimings(G,S,H,$)),[G,S,H,$]),he=a((()=>{if(""===re)return ue;const e=j.findClosestFlooredTime(re,ue);return e?ue.slice(ue.indexOf(e)):[]}),[ue,re]),fe=n((e=>j.parseInput(e,S)),[S]),ve=a((()=>{var e;return null!==(e=fe(L))&&void 0!==e?e:""}),[L,fe]),ge=a((()=>{var e;return null!==(e=fe(N))&&void 0!==e?e:""}),[N,fe]);s((()=>{var e,t;if(k){const r=null!==(e=fe(k.start))&&void 0!==e?e:"",i=null!==(t=fe(k.end))&&void 0!==t?t:"";Y(r),te(i),ie(r),le(i)}}),[k,fe]),s((()=>{if(C)return void Q(!1);const e=fe(X),t=fe(ee);if(void 0===e)V("Invalid start time");else if(void 0===t)V("Invalid end time");else{if(!(""!==e&&""!==t&&j.to24Hour(t)<j.to24Hour(e)))return V(""),void(document.activeElement!==ne.current&&document.activeElement!==se.current||Q(!0));V("End time must be after start time")}Q(!1)}),[X,ee,fe,C]);const be=()=>"start"===W?"Selecting for: Start time":"end"===W?"Selecting for: End time":void 0,je=e=>u(D,"start"===e?me:ce),ye=()=>u(M,!C&&U?pe:void 0),xe=e=>{T||A||(W||J||null==E||E(),z(e),Q(!0))},we=e=>{var t;T||A||(z(e),Q(!0),null===(t=("start"===e?ne:se).current)||void 0===t||t.select())};function Ie(e){var t;switch(e.code){case"Enter":"start"===W?_e(X):"end"===W&&(J&&Te(ee),null===(t=se.current)||void 0===t||t.blur());break;case"Tab":Ce(X,ee,{})}}const _e=e=>{Ce(e,ee,{goToNextInput:!0})},Te=e=>{Ce(X,e,{triggerOnBlur:!0})},Ce=(e,t,{goToNextInput:r,triggerOnBlur:i})=>{var o,l,a;const n=null!==(o=fe(e))&&void 0!==o?o:re,s=null!==(l=fe(t))&&void 0!==l?l:oe;Y(n),te(s);n===re&&s===oe||null==O||O({start:n,end:s}),r&&void 0!==fe(e)&&(z("end"),null===(a=se.current)||void 0===a||a.select()),i&&(z(null),Q(!1),null==F||F()),ie(n),le(s)},ke=e=>{e.stopPropagation(),Y(""),te(""),ie(""),le("");null==O||O({start:"",end:""}),z(null),Q(!1)},Se=e=>{var t,r;const i=e.relatedTarget,o=(null===(t=null==i?void 0:i.matches)||void 0===t?void 0:t.call(i,"[data-floating-ui-focusable]"))||(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focus-guard]")),l=ae.current&&ae.current.contains(i);W&&!J&&!l&&!o&&Ce(X,ee,{triggerOnBlur:!0})},Ae=()=>{if(!A&&!T&&((null==X?void 0:X.length)>0||(null==ee?void 0:ee.length)>0))return r(c,{onClick:ke,type:"button","aria-label":"Clear",children:r(i,{className:m,"aria-hidden":!0})})};return t(y,Object.assign({id:_},K,{children:[r(v,{children:r(g,{enabled:!A&&!T,isOpen:J,renderElement:()=>t(w,{ref:ae,disabled:T,error:C||!!U,readOnly:A,onBlur:Se,role:"group",children:[r(p,{id:me,children:"Start time"}),r(p,{id:ce,children:"End time"}),t(b,{error:C||!!U,currentActive:null===W?"none":W,children:[r(x,{ref:ne,onFocus:()=>xe("start"),placeholder:"start"===W?"hh:mm":"From",onChange:e=>Y(e.target.value),value:X,readOnly:A,"data-testid":K["data-testid"]?`${K["data-testid"]}-timepicker-selector-start`:"timepicker-selector-start",onClick:()=>we("start"),onKeyDown:Ie,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":je("start"),"aria-describedby":ye(),"aria-expanded":J&&"start"===W,"aria-controls":de,"aria-autocomplete":"list","aria-invalid":C||Z||!!U,"aria-disabled":T,"aria-readonly":A}),r(x,{ref:se,onFocus:()=>xe("end"),placeholder:"end"===W?"hh:mm":"To",onChange:e=>te(e.target.value),value:ee,readOnly:A,"data-testid":K["data-testid"]?`${K["data-testid"]}-timepicker-selector-end`:"timepicker-selector-end",onClick:()=>we("end"),onKeyDown:Ie,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":je("end"),"aria-describedby":ye(),"aria-expanded":J&&"end"===W,"aria-controls":de,"aria-autocomplete":"list","aria-invalid":C||Z||!!U||void 0,"aria-disabled":T||void 0,"aria-readonly":A||void 0})]}),Ae()]}),renderDropdown:()=>{if("start"===W){const e=fe(X)||ve;return r(f,{listItems:ue,onSelectItem:_e,selectedItems:[X],topScrollItem:j.findClosestFlooredTime(e,ue),listboxId:de,ariaLabel:be(),disableItemFocus:!0,matchElementWidth:!0})}{const e=fe(ee)||ge;return r(f,{listItems:he,onSelectItem:Te,selectedItems:[ee],topScrollItem:j.findClosestFlooredTime(e,he),listboxId:de,ariaLabel:be(),disableItemFocus:!0,matchElementWidth:!0})}},onClose:e=>{"outside-press"===e?(z(null),Q(!1),null==F||F()):Ce(X,ee,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===W?ne:se).current)||void 0===e||e.focus(),Q(!1)},offset:8,alignment:B,fitAvailableHeight:!0,customZIndex:q,rootNode:P})}),!C&&U&&r(d,{id:pe,tabIndex:0,"data-testid":_?`${_}-error-message`:"error-message",children:U})]}))};export{I as ComboboxPicker};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import i from"clsx";import{useState as o,useRef as a,useMemo as l,useCallback as n,useEffect as s}from"react";import{FormErrorMessage as d}from"../../form/form-label.js";import{VisuallyHidden as m,concatIds as c}from"../../shared/accessibility/index.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as p}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import"../../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as u}from"../../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}from"../../shared/dropdown-list/dropdown-list-state.js";import"../../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../../markup/markup.js";import"../../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as f}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as v,BasicInput as b,ClearButton as g}from"../../shared/input-wrapper/input-wrapper.js";import"../../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"../../shared/dropdown-list/dropdown-search.js";import"../../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../../external/lodash/_getTag.js";import"../../external/lodash/isArguments.js";import"../../external/lodash/_baseGetTag.js";import"../../external/lodash/isBuffer.js";import"../../external/lodash/isTypedArray.js";import"../../external/lodash/_Stack.js";import"../../external/lodash/_SetCache.js";import"../../external/lodash/_equalByTag.js";import"../../shared/dropdown-list/virtuoso-components.js";import{clearButtonContainer as j}from"../../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as x}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimeHelper as y}from"../../util/time-helper.js";import{wrapper as w,selectorInput as I}from"../common.styles.js";import{timeFieldContainer as _}from"./combobox-picker.styles.js";const T=T=>{var{id:k,disabled:C=!1,error:S,value:A,format:O="12hr",readOnly:E,onChange:N,onFocus:F,onBlur:B,alignment:q="left",dropdownZIndex:H,startLimit:$,endLimit:L,initialScrollStartTime:G,initialScrollEndTime:P,interval:D=15,dropdownRootNode:M,"aria-labelledby":Z,"aria-describedby":K,"aria-invalid":R}=T,W=e(T,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const z=p(),[J,Q]=o(null),[U,V]=o(!1),[X,Y]=o(""),[ee,te]=o(""),[re,ie]=o(""),[oe,ae]=o(""),[le,ne]=o(""),se=a(null),de=a(null),me=a(null),ce=`${z}-listbox`,pe=`${z}-start-label`,ue=`${z}-end-label`,he=`${z}-error-message`,fe=l((()=>y.generateTimings(D,O,$,L)),[D,O,$,L]),ve=l((()=>{if(""===oe)return fe;const e=y.findClosestFlooredTime(oe,fe);return e?fe.slice(fe.indexOf(e)):[]}),[fe,oe]),be=n((e=>y.parseInput(e,O)),[O]),ge=l((()=>{var e;return null!==(e=be(G))&&void 0!==e?e:""}),[G,be]),je=l((()=>{var e;return null!==(e=be(P))&&void 0!==e?e:""}),[P,be]);s((()=>{var e,t;if(A){const r=null!==(e=be(A.start))&&void 0!==e?e:"",i=null!==(t=be(A.end))&&void 0!==t?t:"";te(r),ie(i),ae(r),ne(i)}}),[A,be]),s((()=>{if(S)return void V(!1);const e=be(ee),t=be(re);if(void 0===e)Y("Invalid start time");else if(void 0===t)Y("Invalid end time");else{if(!(""!==e&&""!==t&&y.to24Hour(t)<y.to24Hour(e)))return Y(""),void(document.activeElement!==de.current&&document.activeElement!==me.current||V(!0));Y("End time must be after start time")}V(!1)}),[ee,re,be,S]);const xe=()=>"start"===J?"Selecting for: Start time":"end"===J?"Selecting for: End time":void 0,ye=e=>c(Z,"start"===e?pe:ue),we=()=>c(K,!S&&X?he:void 0),Ie=e=>{C||E||(J||U||null==F||F(),Q(e),V(!0))},_e=e=>{var t;C||E||(Q(e),V(!0),null===(t=("start"===e?de:me).current)||void 0===t||t.select())};function Te(e){var t;switch(e.code){case"Enter":"start"===J?ke(ee):"end"===J&&(U&&Ce(re),null===(t=me.current)||void 0===t||t.blur());break;case"Tab":Se(ee,re,{})}}const ke=e=>{Se(e,re,{goToNextInput:!0})},Ce=e=>{Se(ee,e,{triggerOnBlur:!0})},Se=(e,t,{goToNextInput:r,triggerOnBlur:i})=>{var o,a,l;const n=null!==(o=be(e))&&void 0!==o?o:oe,s=null!==(a=be(t))&&void 0!==a?a:le;te(n),ie(s);n===oe&&s===le||null==N||N({start:n,end:s}),r&&void 0!==be(e)&&(Q("end"),null===(l=me.current)||void 0===l||l.select()),i&&(Q(null),V(!1),null==B||B()),ae(n),ne(s)},Ae=e=>{e.stopPropagation(),te(""),ie(""),ae(""),ne("");null==N||N({start:"",end:""}),Q(null),V(!1)},Oe=e=>{var t,r;const i=e.relatedTarget,o=(null===(t=null==i?void 0:i.matches)||void 0===t?void 0:t.call(i,"[data-floating-ui-focusable]"))||(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focus-guard]")),a=se.current&&se.current.contains(i);J&&!U&&!a&&!o&&Se(ee,re,{triggerOnBlur:!0})},Ee=()=>{if(!E&&!C&&((null==ee?void 0:ee.length)>0||(null==re?void 0:re.length)>0))return r("div",{className:j,children:r(g,{onClick:Ae,type:"button","aria-label":"Clear"})})};return t("div",Object.assign({id:k},W,{className:i(w,W.className),children:[r(h,{children:r(f,{enabled:!E&&!C,isOpen:U,renderElement:()=>t(v,{ref:se,disabled:C,error:S||!!X,readOnly:E,onBlur:Oe,role:"group","data-testid":"timepicker-container",className:_,children:[r(m,{id:pe,children:"Start time"}),r(m,{id:ue,children:"End time"}),t(x,{error:S||!!X,currentActive:null===J?"none":J,children:[r(b,{ref:de,onFocus:()=>Ie("start"),placeholder:"start"===J?"hh:mm":"From",onChange:e=>te(e.target.value),value:ee,readOnly:E,"data-testid":W["data-testid"]?`${W["data-testid"]}-timepicker-selector-start`:"timepicker-selector-start",onClick:()=>_e("start"),onKeyDown:Te,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":ye("start"),"aria-describedby":we(),"aria-expanded":U&&"start"===J,"aria-controls":ce,"aria-autocomplete":"list","aria-invalid":S||R||!!X,"aria-disabled":C,"aria-readonly":E,className:I}),r(b,{ref:me,onFocus:()=>Ie("end"),placeholder:"end"===J?"hh:mm":"To",onChange:e=>ie(e.target.value),value:re,readOnly:E,"data-testid":W["data-testid"]?`${W["data-testid"]}-timepicker-selector-end`:"timepicker-selector-end",onClick:()=>_e("end"),onKeyDown:Te,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":ye("end"),"aria-describedby":we(),"aria-expanded":U&&"end"===J,"aria-controls":ce,"aria-autocomplete":"list","aria-invalid":S||R||!!X||void 0,"aria-disabled":C||void 0,"aria-readonly":E||void 0,className:I})]}),Ee()]}),renderDropdown:()=>{if("start"===J){const e=be(ee)||ge;return r(u,{listItems:fe,onSelectItem:ke,selectedItems:[ee],topScrollItem:y.findClosestFlooredTime(e,fe),listboxId:ce,ariaLabel:xe(),disableItemFocus:!0,matchElementWidth:!0})}{const e=be(re)||je;return r(u,{listItems:ve,onSelectItem:Ce,selectedItems:[re],topScrollItem:y.findClosestFlooredTime(e,ve),listboxId:ce,ariaLabel:xe(),disableItemFocus:!0,matchElementWidth:!0})}},onClose:e=>{"outside-press"===e?(Q(null),V(!1),null==B||B()):Se(ee,re,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===J?de:me).current)||void 0===e||e.focus(),V(!1)},offset:8,alignment:q,fitAvailableHeight:!0,customZIndex:H,rootNode:M})}),!S&&X&&r(d,{id:he,tabIndex:0,"data-testid":k?`${k}-error-message`:"error-message",children:X})]}))};export{T as ComboboxPicker};
 //# sourceMappingURL=combobox-picker.js.map