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

package/theme/tokens/font.d.ts

@@ -1,5 +1,9 @@
+/**
+ * Raw font CSS variable tokens.
+ */
 export declare const FontSpec: {
-    readonly "font-family": "var(--fds-font-family)";
+    readonly "font-family-heading": "var(--fds-font-family-heading)";
+    readonly "font-family-body": "var(--fds-font-family-body)";
     readonly "font-variant": "var(--fds-font-variant)";
     readonly "weight-light": "var(--fds-font-weight-light)";
     readonly "weight-regular": "var(--fds-font-weight-regular)";
@@ -42,6 +46,10 @@ export declare const FontSpec: {
     readonly "form-description-lh": "var(--fds-font-form-description-lh)";
     readonly "form-description-ls": "var(--fds-font-form-description-ls)";
 };
+/**
+ * Pre-composed font declaration strings for all size & weight combinations.
+ * @keywords design tokens, typography
+ */
 export declare const Font: {
     readonly "heading-xxl-light": string;
     readonly "heading-xxl-regular": string;
@@ -86,7 +94,8 @@ export declare const Font: {
     readonly "form-label": string;
     readonly "form-description": string;
     readonly Spec: {
-        readonly "font-family": "var(--fds-font-family)";
+        readonly "font-family-heading": "var(--fds-font-family-heading)";
+        readonly "font-family-body": "var(--fds-font-family-body)";
         readonly "font-variant": "var(--fds-font-variant)";
         readonly "weight-light": "var(--fds-font-weight-light)";
         readonly "weight-regular": "var(--fds-font-weight-regular)";

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/string-helper.js";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-heading":"var(--fds-font-family-heading)","font-family-body":"var(--fds-font-family-body)","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":"uNAEO,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\n/**\n * Raw font CSS variable tokens.\n */\nexport const FontSpec = {\n    \"font-family-heading\": \"var(--fds-font-family-heading)\",\n    \"font-family-body\": \"var(--fds-font-family-body)\",\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\n// @catalog\n/**\n * Pre-composed font declaration strings for all size & weight combinations.\n * @keywords design tokens, typography\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":"gDAKO,MAAMA,EAAW,CACpB,sBAAuB,iCACvB,mBAAoB,8BACpB,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,uCAQdC,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/tokens/media-query.d.ts

@@ -1,4 +1,8 @@
 type PseudoMediaQuerySpec<T extends readonly string[]> = Record<T[number], string>;
+/**
+ * CSS class-based pseudo media-query selectors keyed by breakpoint name.
+ * @keywords breakpoint, responsive
+ */
 export declare const MediaQuery: {
     readonly MaxWidth: PseudoMediaQuerySpec<readonly ["xxs", "xs", "sm", "md", "lg", "xl"]>;
     readonly MinWidth: PseudoMediaQuerySpec<readonly ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"]>;

package/theme/tokens/media-query.js

@@ -1,2 +1,2 @@
-const x=["xxs","xs","sm","md","lg","xl"],t=[...x,"xxl"],n=(x,t)=>{const n={};return x.forEach((x=>{n[x]=((x,t)=>`body.fds-breakpoint-${x}-${t} &`)(x,t)})),n},o={MaxWidth:n(x,"max"),MinWidth:n(t,"min")};export{o as MediaQuery};
+const x=["xxs","xs","sm","md","lg","xl"],t=[...x,"xxl"],n=(x,t)=>{const n={};return x.forEach((x=>{n[x]=((x,t)=>`:where(body.fds-breakpoint-${x}-${t}) &`)(x,t)})),n},o={MaxWidth:n(x,"max"),MinWidth:n(t,"min")};export{o as MediaQuery};
 //# sourceMappingURL=media-query.js.map

package/theme/tokens/media-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-query.js","sources":["../../../src/theme/tokens/media-query.ts"],"sourcesContent":["const MAX_WIDTH_BREAKPOINTS = [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst MIN_WIDTH_BREAKPOINTS = [...MAX_WIDTH_BREAKPOINTS, \"xxl\"] as const;\n\ntype WidthConstraint = \"min\" | \"max\";\ntype PseudoMediaQuerySpec<T extends readonly string[]> = Record<\n    T[number],\n    string\n>;\n\nconst getPseudoMediaQuery = (breakpoint: string, type: WidthConstraint) =>\n    `body.fds-breakpoint-${breakpoint}-${type} &`;\n\nconst getPseudoMediaQuerySpec = <T extends readonly string[]>(\n    breakpoints: T,\n    type: WidthConstraint\n): PseudoMediaQuerySpec<T> => {\n    const spec = {} as Record<T[number], string>;\n\n    breakpoints.forEach((breakpoint) => {\n        spec[breakpoint as T[number]] = getPseudoMediaQuery(breakpoint, type);\n    });\n\n    return spec;\n};\n\nexport const MediaQuery = {\n    MaxWidth: getPseudoMediaQuerySpec(MAX_WIDTH_BREAKPOINTS, \"max\"),\n    MinWidth: getPseudoMediaQuerySpec(MIN_WIDTH_BREAKPOINTS, \"min\"),\n} as const;\n"],"names":["MAX_WIDTH_BREAKPOINTS","MIN_WIDTH_BREAKPOINTS","getPseudoMediaQuerySpec","breakpoints","type","spec","forEach","breakpoint","getPseudoMediaQuery","MediaQuery","MaxWidth","MinWidth"],"mappings":"AAAA,MAAMA,EAAwB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,MACxDC,EAAwB,IAAID,EAAuB,OAWnDE,EAA0B,CAC5BC,EACAC,KAEA,MAAMC,EAAO,CAAA,EAMb,OAJAF,EAAYG,SAASC,IACjBF,EAAKE,GAVe,EAACA,EAAoBH,IAC7C,uBAAuBG,KAAcH,MASDI,CAAoBD,EAAYH,EAAK,IAGlEC,CAAI,EAGFI,EAAa,CACtBC,SAAUR,EAAwBF,EAAuB,OACzDW,SAAUT,EAAwBD,EAAuB"}
+{"version":3,"file":"media-query.js","sources":["../../../src/theme/tokens/media-query.ts"],"sourcesContent":["const MAX_WIDTH_BREAKPOINTS = [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst MIN_WIDTH_BREAKPOINTS = [...MAX_WIDTH_BREAKPOINTS, \"xxl\"] as const;\n\ntype WidthConstraint = \"min\" | \"max\";\ntype PseudoMediaQuerySpec<T extends readonly string[]> = Record<\n    T[number],\n    string\n>;\n\nconst getPseudoMediaQuery = (breakpoint: string, type: WidthConstraint) =>\n    `:where(body.fds-breakpoint-${breakpoint}-${type}) &`;\n\nconst getPseudoMediaQuerySpec = <T extends readonly string[]>(\n    breakpoints: T,\n    type: WidthConstraint\n): PseudoMediaQuerySpec<T> => {\n    const spec = {} as Record<T[number], string>;\n\n    breakpoints.forEach((breakpoint) => {\n        spec[breakpoint as T[number]] = getPseudoMediaQuery(breakpoint, type);\n    });\n\n    return spec;\n};\n\n// @catalog\n/**\n * CSS class-based pseudo media-query selectors keyed by breakpoint name.\n * @keywords breakpoint, responsive\n */\nexport const MediaQuery = {\n    MaxWidth: getPseudoMediaQuerySpec(MAX_WIDTH_BREAKPOINTS, \"max\"),\n    MinWidth: getPseudoMediaQuerySpec(MIN_WIDTH_BREAKPOINTS, \"min\"),\n} as const;\n"],"names":["MAX_WIDTH_BREAKPOINTS","MIN_WIDTH_BREAKPOINTS","getPseudoMediaQuerySpec","breakpoints","type","spec","forEach","breakpoint","getPseudoMediaQuery","MediaQuery","MaxWidth","MinWidth"],"mappings":"AAAA,MAAMA,EAAwB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,MACxDC,EAAwB,IAAID,EAAuB,OAWnDE,EAA0B,CAC5BC,EACAC,KAEA,MAAMC,EAAO,CAAA,EAMb,OAJAF,EAAYG,SAASC,IACjBF,EAAKE,GAVe,EAACA,EAAoBH,IAC7C,8BAA8BG,KAAcH,OASRI,CAAoBD,EAAYH,EAAK,IAGlEC,CAAI,EAQFI,EAAa,CACtBC,SAAUR,EAAwBF,EAAuB,OACzDW,SAAUT,EAAwBD,EAAuB"}

package/theme/tokens/motion.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Animation tokens consisting of durations and easing functions.
+ * @keywords animation, design tokens, transition
+ */
 export declare const Motion: {
     readonly "duration-150": "var(--fds-motion-duration-150)";
     readonly "duration-250": "var(--fds-motion-duration-250)";

package/theme/tokens/motion.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion.js","sources":["../../../src/theme/tokens/motion.ts"],"sourcesContent":["export const Motion = {\n    \"duration-150\": \"var(--fds-motion-duration-150)\",\n    \"duration-250\": \"var(--fds-motion-duration-250)\",\n    \"duration-350\": \"var(--fds-motion-duration-350)\",\n    \"duration-500\": \"var(--fds-motion-duration-500)\",\n    \"duration-800\": \"var(--fds-motion-duration-800)\",\n    \"duration-1000\": \"var(--fds-motion-duration-1000)\",\n\n    \"ease-default\": \"var(--fds-motion-timing-ease-default)\",\n    \"ease-standard\": \"var(--fds-motion-timing-ease-standard)\",\n    \"ease-entrance\": \"var(--fds-motion-timing-ease-entrance)\",\n    \"ease-exit\": \"var(--fds-motion-timing-ease-exit)\",\n} as const;\n"],"names":["Motion"],"mappings":"AAAO,MAAMA,EAAS,CAClB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,gBAAiB,kCAEjB,eAAgB,wCAChB,gBAAiB,yCACjB,gBAAiB,yCACjB,YAAa"}
+{"version":3,"file":"motion.js","sources":["../../../src/theme/tokens/motion.ts"],"sourcesContent":["// @catalog\n/**\n * Animation tokens consisting of durations and easing functions.\n * @keywords animation, design tokens, transition\n */\nexport const Motion = {\n    \"duration-150\": \"var(--fds-motion-duration-150)\",\n    \"duration-250\": \"var(--fds-motion-duration-250)\",\n    \"duration-350\": \"var(--fds-motion-duration-350)\",\n    \"duration-500\": \"var(--fds-motion-duration-500)\",\n    \"duration-800\": \"var(--fds-motion-duration-800)\",\n    \"duration-1000\": \"var(--fds-motion-duration-1000)\",\n\n    \"ease-default\": \"var(--fds-motion-timing-ease-default)\",\n    \"ease-standard\": \"var(--fds-motion-timing-ease-standard)\",\n    \"ease-entrance\": \"var(--fds-motion-timing-ease-entrance)\",\n    \"ease-exit\": \"var(--fds-motion-timing-ease-exit)\",\n} as const;\n"],"names":["Motion"],"mappings":"AAKO,MAAMA,EAAS,CAClB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,gBAAiB,kCAEjB,eAAgB,wCAChB,gBAAiB,yCACjB,gBAAiB,yCACjB,YAAa"}

package/theme/tokens/radius.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Border radius tokens.
+ * @keywords border radius, design tokens, shape
+ */
 export declare const Radius: {
     readonly none: "var(--fds-radius-none)";
     readonly xs: "var(--fds-radius-xs)";

package/theme/tokens/radius.js.map

@@ -1 +1 @@
-{"version":3,"file":"radius.js","sources":["../../../src/theme/tokens/radius.ts"],"sourcesContent":["export const Radius = {\n    none: \"var(--fds-radius-none)\",\n    xs: \"var(--fds-radius-xs)\",\n    sm: \"var(--fds-radius-sm)\",\n    md: \"var(--fds-radius-md)\",\n    lg: \"var(--fds-radius-lg)\",\n    full: \"var(--fds-radius-full)\",\n} as const;\n"],"names":["Radius","none","xs","sm","md","lg","full"],"mappings":"AAAO,MAAMA,EAAS,CAClBC,KAAM,yBACNC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,KAAM"}
+{"version":3,"file":"radius.js","sources":["../../../src/theme/tokens/radius.ts"],"sourcesContent":["// @catalog\n/**\n * Border radius tokens.\n * @keywords border radius, design tokens, shape\n */\nexport const Radius = {\n    none: \"var(--fds-radius-none)\",\n    xs: \"var(--fds-radius-xs)\",\n    sm: \"var(--fds-radius-sm)\",\n    md: \"var(--fds-radius-md)\",\n    lg: \"var(--fds-radius-lg)\",\n    full: \"var(--fds-radius-full)\",\n} as const;\n"],"names":["Radius","none","xs","sm","md","lg","full"],"mappings":"AAKO,MAAMA,EAAS,CAClBC,KAAM,yBACNC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,KAAM"}

package/theme/tokens/shadow.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Box-shadow tokens.
+ * @keywords box-shadow, depth, design tokens, elevation
+ */
 export declare const Shadow: {
     readonly "xs-subtle": "var(--fds-shadow-xs-subtle)";
     readonly "xs-strong": "var(--fds-shadow-xs-strong)";

package/theme/tokens/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sources":["../../../src/theme/tokens/shadow.ts"],"sourcesContent":["export const Shadow = {\n    \"xs-subtle\": \"var(--fds-shadow-xs-subtle)\",\n    \"xs-strong\": \"var(--fds-shadow-xs-strong)\",\n    \"xs-focus-strong\": \"var(--fds-shadow-xs-focus-strong)\",\n    \"xs-error-strong\": \"var(--fds-shadow-xs-error-strong)\",\n    \"sm-subtle\": \"var(--fds-shadow-sm-subtle)\",\n    \"sm-strong\": \"var(--fds-shadow-sm-strong)\",\n    \"md-subtle\": \"var(--fds-shadow-md-subtle)\",\n    \"md-strong\": \"var(--fds-shadow-md-strong)\",\n    \"lg-subtle\": \"var(--fds-shadow-lg-subtle)\",\n    \"lg-strong\": \"var(--fds-shadow-lg-strong)\",\n} as const;\n"],"names":["Shadow"],"mappings":"AAAO,MAAMA,EAAS,CAClB,YAAa,8BACb,YAAa,8BACb,kBAAmB,oCACnB,kBAAmB,oCACnB,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa"}
+{"version":3,"file":"shadow.js","sources":["../../../src/theme/tokens/shadow.ts"],"sourcesContent":["// @catalog\n/**\n * Box-shadow tokens.\n * @keywords box-shadow, depth, design tokens, elevation\n */\nexport const Shadow = {\n    \"xs-subtle\": \"var(--fds-shadow-xs-subtle)\",\n    \"xs-strong\": \"var(--fds-shadow-xs-strong)\",\n    \"xs-focus-strong\": \"var(--fds-shadow-xs-focus-strong)\",\n    \"xs-error-strong\": \"var(--fds-shadow-xs-error-strong)\",\n    \"sm-subtle\": \"var(--fds-shadow-sm-subtle)\",\n    \"sm-strong\": \"var(--fds-shadow-sm-strong)\",\n    \"md-subtle\": \"var(--fds-shadow-md-subtle)\",\n    \"md-strong\": \"var(--fds-shadow-md-strong)\",\n    \"lg-subtle\": \"var(--fds-shadow-lg-subtle)\",\n    \"lg-strong\": \"var(--fds-shadow-lg-strong)\",\n} as const;\n"],"names":["Shadow"],"mappings":"AAKO,MAAMA,EAAS,CAClB,YAAa,8BACb,YAAa,8BACb,kBAAmB,oCACnB,kBAAmB,oCACnB,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa"}

package/theme/tokens/spacing.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Spacing tokens consisting of component spacing and layout spacing.
+ * @keywords design tokens, gap, layout, margin
+ */
 export declare const Spacing: {
     readonly "spacing-0": "var(--fds-spacing-0)";
     readonly "spacing-4": "var(--fds-spacing-4)";

package/theme/tokens/spacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.js","sources":["../../../src/theme/tokens/spacing.ts"],"sourcesContent":["export const Spacing = {\n    \"spacing-0\": \"var(--fds-spacing-0)\",\n    \"spacing-4\": \"var(--fds-spacing-4)\",\n    \"spacing-8\": \"var(--fds-spacing-8)\",\n    \"spacing-12\": \"var(--fds-spacing-12)\",\n    \"spacing-16\": \"var(--fds-spacing-16)\",\n    \"spacing-20\": \"var(--fds-spacing-20)\",\n    \"spacing-24\": \"var(--fds-spacing-24)\",\n    \"spacing-32\": \"var(--fds-spacing-32)\",\n    \"spacing-40\": \"var(--fds-spacing-40)\",\n    \"spacing-48\": \"var(--fds-spacing-48)\",\n    \"spacing-64\": \"var(--fds-spacing-64)\",\n    \"spacing-72\": \"var(--fds-spacing-72)\",\n\n    \"layout-xs\": \"var(--fds-layout-xs)\",\n    \"layout-sm\": \"var(--fds-layout-sm)\",\n    \"layout-md\": \"var(--fds-layout-md)\",\n    \"layout-lg\": \"var(--fds-layout-lg)\",\n    \"layout-xl\": \"var(--fds-layout-xl)\",\n    \"layout-xxl\": \"var(--fds-layout-xxl)\",\n    \"layout-xxxl\": \"var(--fds-layout-xxxl)\",\n} as const;\n"],"names":["Spacing"],"mappings":"AAAO,MAAMA,EAAU,CACnB,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBAEd,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,cAAe"}
+{"version":3,"file":"spacing.js","sources":["../../../src/theme/tokens/spacing.ts"],"sourcesContent":["// @catalog\n/**\n * Spacing tokens consisting of component spacing and layout spacing.\n * @keywords design tokens, gap, layout, margin\n */\nexport const Spacing = {\n    \"spacing-0\": \"var(--fds-spacing-0)\",\n    \"spacing-4\": \"var(--fds-spacing-4)\",\n    \"spacing-8\": \"var(--fds-spacing-8)\",\n    \"spacing-12\": \"var(--fds-spacing-12)\",\n    \"spacing-16\": \"var(--fds-spacing-16)\",\n    \"spacing-20\": \"var(--fds-spacing-20)\",\n    \"spacing-24\": \"var(--fds-spacing-24)\",\n    \"spacing-32\": \"var(--fds-spacing-32)\",\n    \"spacing-40\": \"var(--fds-spacing-40)\",\n    \"spacing-48\": \"var(--fds-spacing-48)\",\n    \"spacing-64\": \"var(--fds-spacing-64)\",\n    \"spacing-72\": \"var(--fds-spacing-72)\",\n\n    \"layout-xs\": \"var(--fds-layout-xs)\",\n    \"layout-sm\": \"var(--fds-layout-sm)\",\n    \"layout-md\": \"var(--fds-layout-md)\",\n    \"layout-lg\": \"var(--fds-layout-lg)\",\n    \"layout-xl\": \"var(--fds-layout-xl)\",\n    \"layout-xxl\": \"var(--fds-layout-xxl)\",\n    \"layout-xxxl\": \"var(--fds-layout-xxxl)\",\n} as const;\n"],"names":["Spacing"],"mappings":"AAKO,MAAMA,EAAU,CACnB,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBAEd,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,cAAe"}

package/theme/types.d.ts

@@ -1,22 +1,45 @@
 import type { ValueOf } from "../util/utility-types";
 import type { Border, Breakpoint, ComponentToken, FontSpec, Motion, PrimitiveColours, Radius, SemanticColours, Shadow, Spacing } from "./tokens";
-export type ThemeType = "a11y-playground" | "bookingsg" | "ccube" | "imda" | "lifesg" | "mylegacy" | "oneservice" | "pa" | "rbs" | "sgw-digital-lobby" | "spf" | "supportgowhere";
+/** 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", "vica", "websg", "wise", "wogaa"];
+/** Union of all supported theme names. */
+export type ThemeType = (typeof THEME_TYPES)[number];
+/** Available font presets for WISE product themes (wise, vica, websg, wogaa). */
+export type ThemeFontPreset = "wise-public" | "wise-admin";
+/**
+ * Colour mode accepted by `ThemeProvider`.
+ * — `"auto"` follows OS preference.
+ * - `"light"` light mode.
+ * - `"dark"` dark mode.
+ */
 export type ThemeMode = "light" | "dark" | "auto";
+/** Resolved colour mode. */
 export type ResolvedThemeMode = "light" | "dark";
+/** Available typography size presets. */
 export type FontSize = "heading-xxl" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-baseline" | "body-md" | "body-sm" | "body-xs" | "form-label" | "form-description";
+/** Available typography weight presets. */
 export type FontWeight = "light" | "regular" | "semibold" | "bold";
+/** Accepted breakpoint CSS variable strings. */
 export type BreakpointCSSVariableString = ValueOf<typeof Breakpoint>;
+/** Accepted border CSS variable strings. */
 export type BorderCSSVariableString = ValueOf<typeof Border>;
+/** Accepted component-scoped CSS variable strings. */
 export type ComponentTokenCSSVariableString = ValueOf<typeof ComponentToken.Animation> | ValueOf<typeof ComponentToken.Button> | ValueOf<typeof ComponentToken.Footer> | ValueOf<typeof ComponentToken.Navbar>;
+/** Accepted font CSS variable strings. */
 export type FontSpecCSSVariableString = ValueOf<typeof FontSpec>;
+/** Accepted motion CSS variable strings. */
 export type MotionCSSVariableString = ValueOf<typeof Motion>;
+/** Accepted primitive colour CSS variable strings. */
 export type PrimitiveColourCSSVariableString = ValueOf<typeof PrimitiveColours>;
+/** Accepted radius CSS variable strings. */
 export type RadiusCSSVariableString = ValueOf<typeof Radius>;
+/** Accepted semantic colour CSS variable strings. */
 export type SemanticColourCSSVariableString = ValueOf<typeof SemanticColours>;
+/** Accepted colour CSS variable strings. */
 export type ColourCSSVariableString = PrimitiveColourCSSVariableString | SemanticColourCSSVariableString;
+/** Accepted shadow CSS variable strings. */
 export type ShadowCSSVariableString = ValueOf<typeof Shadow>;
+/** Accepted spacing and layout CSS variable strings. */
 export type SpacingCSSVariableString = ValueOf<typeof Spacing>;
+/** Union of all design-token CSS variable string literals. */
 export type CSSVariableString = BreakpointCSSVariableString | BorderCSSVariableString | ColourCSSVariableString | ComponentTokenCSSVariableString | FontSpecCSSVariableString | MotionCSSVariableString | RadiusCSSVariableString | ShadowCSSVariableString | SpacingCSSVariableString;
-type ExtractCleanCSSVariableName<T extends string> = T extends `var(${infer Name})` ? Name : never;
-export type CSSVariableKey = ExtractCleanCSSVariableName<CSSVariableString>;
-export {};

package/theme/types.js

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

package/theme/types.js.map

@@ -0,0 +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    \"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/** Available font presets for WISE product themes (wise, vica, websg, wogaa). */\nexport type ThemeFontPreset = \"wise-public\" | \"wise-admin\";\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,aACA,OACA,QACA,OACA"}

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

@@ -1,5 +1,13 @@
 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"`.
+ *
+ * @returns The extracted `--fds-*` variable name, or `undefined` if the input
+ * does not contain a valid fds token.
+ */
+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)")
@@ -15,5 +23,14 @@ export declare function parseCSSVariableValue(cssVarString: CSSVariableString |
 export declare function parsePxOrRemValue(cssValue: string): number;
 /**
  * Extracts inline token CSS custom properties from the theme element.
+ *
+ * @returns An object of `--fds-*` properties, or `{}` when the element is
+ * `null` or has no inline styles.
  */
 export declare const getInheritedInlineCssVariables: (themeElement: HTMLElement | null) => CSSProperties;
+/**
+ * Convert a numeric value to a CSS unit string (e.g., `12` → `"12px"`).
+ *
+ * @returns The formatted string, or `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 n=null===(t=/--fds-[\w-]+/.exec(e))||void 0===t?void 0:t[0];return n||void 0};function n(e,n){if(!e)return"";if(!globalThis.window||!n)return console.warn(`Cannot parse CSS variable value for "${e}" because window or sourceElement is not available.`),"";const r=t(e);return r?getComputedStyle(n).getPropertyValue(r).trim():(console.warn(`Invalid CSS variable string: ${e}. Expected format: var(--fds-token-name)`),"")}function r(t){const n=t.trim(),r=e.exec(n);if(!r)return 0;const o=Number.parseFloat(r[1]);if(Number.isNaN(o))return 0;if("px"===r[2].toLowerCase())return o;const i=globalThis.window?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):16;return o*(Number.isNaN(i)?16:i)}const o=e=>{if(!e||0===e.style.length)return{};const t={};return((e,t)=>{const{style:n}=e;for(let e=0;e<n.length;e++){const r=n.item(e);if(!(null==r?void 0:r.startsWith("--fds")))continue;const o=n.getPropertyValue(r).trim();o&&(t[r]=o)}})(e,t),t},i=(e,t)=>"number"==typeof e?`${e}${t}`:null;export{t as extractFdsCssVariableName,i as formatUnitValue,o as getInheritedInlineCssVariables,n as parseCSSVariableValue,r 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 *\n * @returns The extracted `--fds-*` variable name, or `undefined` if the input\n * does not contain a valid fds token.\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\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 *\n * @returns An object of `--fds-*` properties, or `{}` when the element is\n * `null` or has no inline styles.\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\"`).\n *\n * @returns The formatted string, or `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","getInheritedInlineCssVariables","themeElement","style","length","variables","element","target","i","propertyName","item","startsWith","mergeInlineCssVariables","formatUnitValue","unit"],"mappings":"AAMA,MACMA,EAAgC,2BASzBC,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,UAzE1C,GAgFzB,OAAOR,GAJsBC,OAAOE,MAAME,GA5EjB,GA8EnBA,EAGV,CAEA,MAuBaI,EACTC,IAEA,IAAKA,GAA8C,IAA9BA,EAAaC,MAAMC,OAAc,MAAO,CAAA,EAE7D,MAAMC,EAAgC,CAAA,EAGtC,MA/B4B,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,MAAMpC,EAAQ4B,EAAMhB,iBAAiBsB,GAAcrB,OAC9Cb,IAELgC,EAAOE,GAAiClC,EAC5C,GAeAqC,CAAwBV,EAAcG,GAE/BA,CAAS,EAQPQ,EAAkB,CAC3BtC,EACAuC,IAEqB,iBAAVvC,EACA,GAAGA,IAAQuC,IAEf"}

package/theme/utils/font.d.ts

@@ -1,12 +1,32 @@
 import type { FontSize, FontWeight } from "../types";
+interface FontDeclarationProperties {
+    "font-family": string;
+    "font-variant": string;
+    "font-size": string;
+    "font-weight": string;
+    "line-height": string;
+    "letter-spacing": string;
+}
 /**
- * Generates a CSS font shorthand string using FDS CSS variables.
+ * Generates a CSS font declaration map using FDS CSS variables.
+ *
+ * @example
+ * generateFontProperties("heading-xxl", "light")
+ * // => { "font-family": "var(--fds-font-family-heading)", ... }
+ */
+export declare const generateFontProperties: (size: FontSize, weight: FontWeight, options?: {
+    noCommonLigatures?: boolean;
+    fontVariant?: string;
+}) => FontDeclarationProperties;
+/**
+ * Generates a CSS declaration string using FDS CSS variables.
  *
  * @example
  * generateFont("heading-xxl", "light")
- * // => "font-family: var(--fds-font-family); font-variant: var(--fds-font-variant); ..."
+ * // => "font-family: var(--fds-font-family-heading); font-variant: var(--fds-font-variant); ..."
  */
 export declare const generateFont: (size: FontSize, weight: FontWeight, options?: {
     noCommonLigatures?: boolean;
     fontVariant?: string;
 }) => string;
+export {};

package/theme/utils/font.js

@@ -1,2 +1,2 @@
-const s={"heading-xxl":{size:"var(--fds-font-heading-size-xxl)",lh:"var(--fds-font-heading-lh-xxl)",ls:"var(--fds-font-heading-ls-xxl)"},"heading-xl":{size:"var(--fds-font-heading-size-xl)",lh:"var(--fds-font-heading-lh-xl)",ls:"var(--fds-font-heading-ls-xl)"},"heading-lg":{size:"var(--fds-font-heading-size-lg)",lh:"var(--fds-font-heading-lh-lg)",ls:"var(--fds-font-heading-ls-lg)"},"heading-md":{size:"var(--fds-font-heading-size-md)",lh:"var(--fds-font-heading-lh-md)",ls:"var(--fds-font-heading-ls-md)"},"heading-sm":{size:"var(--fds-font-heading-size-sm)",lh:"var(--fds-font-heading-lh-sm)",ls:"var(--fds-font-heading-ls-sm)"},"heading-xs":{size:"var(--fds-font-heading-size-xs)",lh:"var(--fds-font-heading-lh-xs)",ls:"var(--fds-font-heading-ls-xs)"},"body-baseline":{size:"var(--fds-font-body-size-baseline)",lh:"var(--fds-font-body-lh-baseline)",ls:"var(--fds-font-body-ls-baseline)"},"body-md":{size:"var(--fds-font-body-size-md)",lh:"var(--fds-font-body-lh-md)",ls:"var(--fds-font-body-ls-md)"},"body-sm":{size:"var(--fds-font-body-size-sm)",lh:"var(--fds-font-body-lh-sm)",ls:"var(--fds-font-body-ls-sm)"},"body-xs":{size:"var(--fds-font-body-size-xs)",lh:"var(--fds-font-body-lh-xs)",ls:"var(--fds-font-body-ls-xs)"},"form-label":{size:"var(--fds-font-form-label-size)",lh:"var(--fds-font-form-label-lh)",ls:"var(--fds-font-form-label-ls)"},"form-description":{size:"var(--fds-font-form-description-size)",lh:"var(--fds-font-form-description-lh)",ls:"var(--fds-font-form-description-ls)"}},d={light:"var(--fds-font-weight-light)",regular:"var(--fds-font-weight-regular)",semibold:"var(--fds-font-weight-semibold)",bold:"var(--fds-font-weight-bold)"},f=(f,n,l)=>{const{size:o,lh:a,ls:e}=s[f],i=d[n],t=[null==l?void 0:l.fontVariant,(null==l?void 0:l.noCommonLigatures)?"no-common-ligatures":""].filter((s=>Boolean(s))).join(" ");return`font-family: var(--fds-font-family); font-variant: ${"var(--fds-font-variant)"+(t?` ${t}`:"")}; font-size: ${o}; font-weight: ${i}; line-height: ${a}; letter-spacing: ${e};`};export{f as generateFont};
+const f={"heading-xxl":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-xxl)",lh:"var(--fds-font-heading-lh-xxl)",ls:"var(--fds-font-heading-ls-xxl)"},"heading-xl":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-xl)",lh:"var(--fds-font-heading-lh-xl)",ls:"var(--fds-font-heading-ls-xl)"},"heading-lg":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-lg)",lh:"var(--fds-font-heading-lh-lg)",ls:"var(--fds-font-heading-ls-lg)"},"heading-md":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-md)",lh:"var(--fds-font-heading-lh-md)",ls:"var(--fds-font-heading-ls-md)"},"heading-sm":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-sm)",lh:"var(--fds-font-heading-lh-sm)",ls:"var(--fds-font-heading-ls-sm)"},"heading-xs":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-xs)",lh:"var(--fds-font-heading-lh-xs)",ls:"var(--fds-font-heading-ls-xs)"},"body-baseline":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-baseline)",lh:"var(--fds-font-body-lh-baseline)",ls:"var(--fds-font-body-ls-baseline)"},"body-md":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-md)",lh:"var(--fds-font-body-lh-md)",ls:"var(--fds-font-body-ls-md)"},"body-sm":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-sm)",lh:"var(--fds-font-body-lh-sm)",ls:"var(--fds-font-body-ls-sm)"},"body-xs":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-xs)",lh:"var(--fds-font-body-lh-xs)",ls:"var(--fds-font-body-ls-xs)"},"form-label":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-form-label-size)",lh:"var(--fds-font-form-label-lh)",ls:"var(--fds-font-form-label-ls)"},"form-description":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-form-description-size)",lh:"var(--fds-font-form-description-lh)",ls:"var(--fds-font-form-description-ls)"}},s={light:"var(--fds-font-weight-light)",regular:"var(--fds-font-weight-regular)",semibold:"var(--fds-font-weight-semibold)",bold:"var(--fds-font-weight-bold)"},a=(a,d,n)=>{const{fontFamily:o,size:i,lh:l,ls:t}=f[a],e=s[d],r=[void 0,""].filter(Boolean).join(" ");return{"font-family":o,"font-variant":"var(--fds-font-variant)"+(r?` ${r}`:""),"font-size":i,"font-weight":e,"line-height":l,"letter-spacing":t}},d=(f,s,d)=>{const n=a(f,s);return Object.entries(n).map((([f,s])=>`${f}: ${s};`)).join(" ")};export{d as generateFont,a as generateFontProperties};
 //# sourceMappingURL=font.js.map

package/theme/utils/font.js.map

@@ -1 +1 @@
-{"version":3,"file":"font.js","sources":["../../../src/theme/utils/font.ts"],"sourcesContent":["import type { FontSize, FontWeight } from \"../types\";\n\nconst sizeVarMap: Record<FontSize, { size: string; lh: string; ls: string }> = {\n    \"heading-xxl\": {\n        size: \"var(--fds-font-heading-size-xxl)\",\n        lh: \"var(--fds-font-heading-lh-xxl)\",\n        ls: \"var(--fds-font-heading-ls-xxl)\",\n    },\n    \"heading-xl\": {\n        size: \"var(--fds-font-heading-size-xl)\",\n        lh: \"var(--fds-font-heading-lh-xl)\",\n        ls: \"var(--fds-font-heading-ls-xl)\",\n    },\n    \"heading-lg\": {\n        size: \"var(--fds-font-heading-size-lg)\",\n        lh: \"var(--fds-font-heading-lh-lg)\",\n        ls: \"var(--fds-font-heading-ls-lg)\",\n    },\n    \"heading-md\": {\n        size: \"var(--fds-font-heading-size-md)\",\n        lh: \"var(--fds-font-heading-lh-md)\",\n        ls: \"var(--fds-font-heading-ls-md)\",\n    },\n    \"heading-sm\": {\n        size: \"var(--fds-font-heading-size-sm)\",\n        lh: \"var(--fds-font-heading-lh-sm)\",\n        ls: \"var(--fds-font-heading-ls-sm)\",\n    },\n    \"heading-xs\": {\n        size: \"var(--fds-font-heading-size-xs)\",\n        lh: \"var(--fds-font-heading-lh-xs)\",\n        ls: \"var(--fds-font-heading-ls-xs)\",\n    },\n    \"body-baseline\": {\n        size: \"var(--fds-font-body-size-baseline)\",\n        lh: \"var(--fds-font-body-lh-baseline)\",\n        ls: \"var(--fds-font-body-ls-baseline)\",\n    },\n    \"body-md\": {\n        size: \"var(--fds-font-body-size-md)\",\n        lh: \"var(--fds-font-body-lh-md)\",\n        ls: \"var(--fds-font-body-ls-md)\",\n    },\n    \"body-sm\": {\n        size: \"var(--fds-font-body-size-sm)\",\n        lh: \"var(--fds-font-body-lh-sm)\",\n        ls: \"var(--fds-font-body-ls-sm)\",\n    },\n    \"body-xs\": {\n        size: \"var(--fds-font-body-size-xs)\",\n        lh: \"var(--fds-font-body-lh-xs)\",\n        ls: \"var(--fds-font-body-ls-xs)\",\n    },\n    \"form-label\": {\n        size: \"var(--fds-font-form-label-size)\",\n        lh: \"var(--fds-font-form-label-lh)\",\n        ls: \"var(--fds-font-form-label-ls)\",\n    },\n    \"form-description\": {\n        size: \"var(--fds-font-form-description-size)\",\n        lh: \"var(--fds-font-form-description-lh)\",\n        ls: \"var(--fds-font-form-description-ls)\",\n    },\n};\n\nconst weightVarMap: Record<FontWeight, string> = {\n    light: \"var(--fds-font-weight-light)\",\n    regular: \"var(--fds-font-weight-regular)\",\n    semibold: \"var(--fds-font-weight-semibold)\",\n    bold: \"var(--fds-font-weight-bold)\",\n};\n\n/**\n * Generates a CSS font shorthand string using FDS CSS variables.\n *\n * @example\n * generateFont(\"heading-xxl\", \"light\")\n * // => \"font-family: var(--fds-font-family); font-variant: var(--fds-font-variant); ...\"\n */\nexport const generateFont = (\n    size: FontSize,\n    weight: FontWeight,\n    options?: { noCommonLigatures?: boolean; fontVariant?: string }\n): string => {\n    const { size: s, lh, ls } = sizeVarMap[size];\n    const w = weightVarMap[weight];\n\n    const extraVariant = [\n        options?.fontVariant,\n        options?.noCommonLigatures ? \"no-common-ligatures\" : \"\",\n    ]\n        .filter((v) => Boolean(v))\n        .join(\" \");\n\n    const fontVariant = `var(--fds-font-variant)${\n        extraVariant ? ` ${extraVariant}` : \"\"\n    }`;\n\n    return `font-family: var(--fds-font-family); font-variant: ${fontVariant}; font-size: ${s}; font-weight: ${w}; line-height: ${lh}; letter-spacing: ${ls};`;\n};\n"],"names":["sizeVarMap","size","lh","ls","weightVarMap","light","regular","semibold","bold","generateFont","weight","options","s","w","extraVariant","fontVariant","noCommonLigatures","filter","v","Boolean","join"],"mappings":"AAEA,MAAMA,EAAyE,CAC3E,cAAe,CACXC,KAAM,mCACNC,GAAI,iCACJC,GAAI,kCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,gBAAiB,CACbF,KAAM,qCACNC,GAAI,mCACJC,GAAI,oCAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPF,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,aAAc,CACVF,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,mBAAoB,CAChBF,KAAM,wCACNC,GAAI,sCACJC,GAAI,wCAINC,EAA2C,CAC7CC,MAAO,+BACPC,QAAS,iCACTC,SAAU,kCACVC,KAAM,+BAUGC,EAAe,CACxBR,EACAS,EACAC,KAEA,MAAQV,KAAMW,EAACV,GAAEA,EAAEC,GAAEA,GAAOH,EAAWC,GACjCY,EAAIT,EAAaM,GAEjBI,EAAe,CACjBH,aAAO,EAAPA,EAASI,aACTJ,aAAO,EAAPA,EAASK,mBAAoB,sBAAwB,IAEpDC,QAAQC,GAAMC,QAAQD,KACtBE,KAAK,KAMV,MAAO,sDAJa,2BAChBN,EAAe,IAAIA,IAAiB,mBAGgDF,mBAAmBC,mBAAmBX,sBAAuBC,IAAK"}
+{"version":3,"file":"font.js","sources":["../../../src/theme/utils/font.ts"],"sourcesContent":["import type { FontSize, FontWeight } from \"../types\";\n\ninterface FontDeclarationProperties {\n    \"font-family\": string;\n    \"font-variant\": string;\n    \"font-size\": string;\n    \"font-weight\": string;\n    \"line-height\": string;\n    \"letter-spacing\": string;\n}\n\nconst sizeVarMap: Record<\n    FontSize,\n    { fontFamily: string; size: string; lh: string; ls: string }\n> = {\n    \"heading-xxl\": {\n        fontFamily: \"var(--fds-font-family-heading)\",\n        size: \"var(--fds-font-heading-size-xxl)\",\n        lh: \"var(--fds-font-heading-lh-xxl)\",\n        ls: \"var(--fds-font-heading-ls-xxl)\",\n    },\n    \"heading-xl\": {\n        fontFamily: \"var(--fds-font-family-heading)\",\n        size: \"var(--fds-font-heading-size-xl)\",\n        lh: \"var(--fds-font-heading-lh-xl)\",\n        ls: \"var(--fds-font-heading-ls-xl)\",\n    },\n    \"heading-lg\": {\n        fontFamily: \"var(--fds-font-family-heading)\",\n        size: \"var(--fds-font-heading-size-lg)\",\n        lh: \"var(--fds-font-heading-lh-lg)\",\n        ls: \"var(--fds-font-heading-ls-lg)\",\n    },\n    \"heading-md\": {\n        fontFamily: \"var(--fds-font-family-heading)\",\n        size: \"var(--fds-font-heading-size-md)\",\n        lh: \"var(--fds-font-heading-lh-md)\",\n        ls: \"var(--fds-font-heading-ls-md)\",\n    },\n    \"heading-sm\": {\n        fontFamily: \"var(--fds-font-family-heading)\",\n        size: \"var(--fds-font-heading-size-sm)\",\n        lh: \"var(--fds-font-heading-lh-sm)\",\n        ls: \"var(--fds-font-heading-ls-sm)\",\n    },\n    \"heading-xs\": {\n        fontFamily: \"var(--fds-font-family-heading)\",\n        size: \"var(--fds-font-heading-size-xs)\",\n        lh: \"var(--fds-font-heading-lh-xs)\",\n        ls: \"var(--fds-font-heading-ls-xs)\",\n    },\n    \"body-baseline\": {\n        fontFamily: \"var(--fds-font-family-body)\",\n        size: \"var(--fds-font-body-size-baseline)\",\n        lh: \"var(--fds-font-body-lh-baseline)\",\n        ls: \"var(--fds-font-body-ls-baseline)\",\n    },\n    \"body-md\": {\n        fontFamily: \"var(--fds-font-family-body)\",\n        size: \"var(--fds-font-body-size-md)\",\n        lh: \"var(--fds-font-body-lh-md)\",\n        ls: \"var(--fds-font-body-ls-md)\",\n    },\n    \"body-sm\": {\n        fontFamily: \"var(--fds-font-family-body)\",\n        size: \"var(--fds-font-body-size-sm)\",\n        lh: \"var(--fds-font-body-lh-sm)\",\n        ls: \"var(--fds-font-body-ls-sm)\",\n    },\n    \"body-xs\": {\n        fontFamily: \"var(--fds-font-family-body)\",\n        size: \"var(--fds-font-body-size-xs)\",\n        lh: \"var(--fds-font-body-lh-xs)\",\n        ls: \"var(--fds-font-body-ls-xs)\",\n    },\n    \"form-label\": {\n        fontFamily: \"var(--fds-font-family-body)\",\n        size: \"var(--fds-font-form-label-size)\",\n        lh: \"var(--fds-font-form-label-lh)\",\n        ls: \"var(--fds-font-form-label-ls)\",\n    },\n    \"form-description\": {\n        fontFamily: \"var(--fds-font-family-body)\",\n        size: \"var(--fds-font-form-description-size)\",\n        lh: \"var(--fds-font-form-description-lh)\",\n        ls: \"var(--fds-font-form-description-ls)\",\n    },\n};\n\nconst weightVarMap: Record<FontWeight, string> = {\n    light: \"var(--fds-font-weight-light)\",\n    regular: \"var(--fds-font-weight-regular)\",\n    semibold: \"var(--fds-font-weight-semibold)\",\n    bold: \"var(--fds-font-weight-bold)\",\n};\n\n/**\n * Generates a CSS font declaration map using FDS CSS variables.\n *\n * @example\n * generateFontProperties(\"heading-xxl\", \"light\")\n * // => { \"font-family\": \"var(--fds-font-family-heading)\", ... }\n */\nexport const generateFontProperties = (\n    size: FontSize,\n    weight: FontWeight,\n    options?: { noCommonLigatures?: boolean; fontVariant?: string }\n): FontDeclarationProperties => {\n    const { fontFamily, size: s, lh, ls } = sizeVarMap[size];\n    const w = weightVarMap[weight];\n\n    const extraVariant = [\n        options?.fontVariant,\n        options?.noCommonLigatures ? \"no-common-ligatures\" : \"\",\n    ]\n        .filter(Boolean)\n        .join(\" \");\n\n    const fontVariant = `var(--fds-font-variant)${\n        extraVariant ? ` ${extraVariant}` : \"\"\n    }`;\n\n    return {\n        \"font-family\": fontFamily,\n        \"font-variant\": fontVariant,\n        \"font-size\": s,\n        \"font-weight\": w,\n        \"line-height\": lh,\n        \"letter-spacing\": ls,\n    };\n};\n\n/**\n * Generates a CSS declaration string using FDS CSS variables.\n *\n * @example\n * generateFont(\"heading-xxl\", \"light\")\n * // => \"font-family: var(--fds-font-family-heading); font-variant: var(--fds-font-variant); ...\"\n */\nexport const generateFont = (\n    size: FontSize,\n    weight: FontWeight,\n    options?: { noCommonLigatures?: boolean; fontVariant?: string }\n): string => {\n    const declarations = generateFontProperties(size, weight, options);\n\n    return Object.entries(declarations)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join(\" \");\n};\n"],"names":["sizeVarMap","fontFamily","size","lh","ls","weightVarMap","light","regular","semibold","bold","generateFontProperties","weight","options","s","w","extraVariant","filter","Boolean","join","generateFont","declarations","Object","entries","map","key","value"],"mappings":"AAWA,MAAMA,EAGF,CACA,cAAe,CACXC,WAAY,iCACZC,KAAM,mCACNC,GAAI,iCACJC,GAAI,kCAER,aAAc,CACVH,WAAY,iCACZC,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVH,WAAY,iCACZC,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVH,WAAY,iCACZC,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVH,WAAY,iCACZC,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,aAAc,CACVH,WAAY,iCACZC,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,gBAAiB,CACbH,WAAY,8BACZC,KAAM,qCACNC,GAAI,mCACJC,GAAI,oCAER,UAAW,CACPH,WAAY,8BACZC,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPH,WAAY,8BACZC,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,UAAW,CACPH,WAAY,8BACZC,KAAM,+BACNC,GAAI,6BACJC,GAAI,8BAER,aAAc,CACVH,WAAY,8BACZC,KAAM,kCACNC,GAAI,gCACJC,GAAI,iCAER,mBAAoB,CAChBH,WAAY,8BACZC,KAAM,wCACNC,GAAI,sCACJC,GAAI,wCAINC,EAA2C,CAC7CC,MAAO,+BACPC,QAAS,iCACTC,SAAU,kCACVC,KAAM,+BAUGC,EAAyB,CAClCR,EACAS,EACAC,KAEA,MAAMX,WAAEA,EAAYC,KAAMW,EAACV,GAAEA,EAAEC,GAAEA,GAAOJ,EAAWE,GAC7CY,EAAIT,EAAaM,GAEjBI,EAAe,MACV,EAC8C,IAEpDC,OAAOC,SACPC,KAAK,KAMV,MAAO,CACH,cAAejB,EACf,eANgB,2BAChBc,EAAe,IAAIA,IAAiB,IAMpC,YAAaF,EACb,cAAeC,EACf,cAAeX,EACf,iBAAkBC,EACrB,EAUQe,EAAe,CACxBjB,EACAS,EACAC,KAEA,MAAMQ,EAAeV,EAAuBR,EAAMS,GAElD,OAAOU,OAAOC,QAAQF,GACjBG,KAAI,EAAEC,EAAKC,KAAW,GAAGD,MAAQC,OACjCP,KAAK,IAAI"}

package/theme/utils/index.d.ts

@@ -3,3 +3,5 @@ export * from "./font";
 export * from "./token-resolver";
 export * from "./use-apply-styles";
 export * from "./use-design-token";
+export * from "./use-design-token-override";
+export * from "./use-media-query";

package/theme/utils/token-resolver.js

@@ -1,2 +1,2 @@
-const t=(t,e)=>t&&t.trim().length>0?t:e,e=t=>"number"==typeof t?`${t}px`:String(t),r=(t,e)=>"string"==typeof t&&e.has(t),o=(t,e)=>"string"==typeof t&&t.startsWith(e),s=(t,e,r)=>e(t)?t:r,n=({value:e,resolvedValue:r,guard:o,normalizeCustom:s})=>o(e)?t(r,e):s(e);export{n as getEffectiveTokenOrCustom,t as getResolvedValue,s as getTokenOrDefault,r as isTokenFromSet,o as isTokenWithPrefix,e as toCssValue};
+const t=t=>"number"==typeof t?`${t}px`:String(t),r=(t,r)=>"string"==typeof t&&r.has(t),s=(t,r)=>"string"==typeof t&&t.startsWith(r);export{r as isTokenFromSet,s as isTokenWithPrefix,t as toCssValue};
 //# sourceMappingURL=token-resolver.js.map

package/theme/utils/token-resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-resolver.js","sources":["../../../src/theme/utils/token-resolver.ts"],"sourcesContent":["type TokenGuard<TToken extends string> = (value: unknown) => value is TToken;\n\n/**\n * Prefers a resolved token value and falls back to the original token string\n * when the token has not been resolved yet.\n * @param resolved Resolved value from a token lookup.\n * @param fallback Original token string used as fallback.\n * @returns Resolved value when available, otherwise the fallback token string.\n */\nexport const getResolvedValue = (\n    resolved: string | undefined,\n    fallback: string\n) => {\n    return resolved && resolved.trim().length > 0 ? resolved : fallback;\n};\n\n/**\n * Converts numeric CSS values to px while preserving string inputs.\n * @param value CSS value as number or string.\n * @returns CSS value string.\n */\nexport const toCssValue = (value: string | number) => {\n    return typeof value === \"number\" ? `${value}px` : String(value);\n};\n\n/**\n * Checks whether a value is one of the known token literals.\n * @param value Unknown value to validate.\n * @param tokenSet Set of allowed token strings.\n * @returns True when value is a string token in the provided set.\n */\nexport const isTokenFromSet = <TToken extends string>(\n    value: unknown,\n    tokenSet: Set<string>\n): value is TToken => {\n    return typeof value === \"string\" && tokenSet.has(value);\n};\n\n/**\n * Checks whether a value is a token by matching a token prefix.\n * @param value Unknown value to validate.\n * @param prefix Token prefix to match.\n * @returns True when value is a string starting with the given prefix.\n */\nexport const isTokenWithPrefix = <TToken extends string>(\n    value: unknown,\n    prefix: string\n): value is TToken => {\n    return typeof value === \"string\" && value.startsWith(prefix);\n};\n\n/**\n * Uses a token value when valid, otherwise falls back to a default token.\n * @param value Candidate token value.\n * @param guard Type guard that validates the token.\n * @param fallback Default token to use when value is invalid.\n * @returns Valid token value or fallback token.\n */\nexport const getTokenOrDefault = <TToken extends string>(\n    value: unknown,\n    guard: TokenGuard<TToken>,\n    fallback: TToken\n) => {\n    return guard(value) ? value : fallback;\n};\n\n/**\n * Resolves token values through the resolved token string and normalizes\n * non-token values through a caller-provided normalizer.\n * @param args.value Token or custom value.\n * @param args.resolvedValue Resolved token value from lookup.\n * @param args.guard Type guard that checks whether the value is a token.\n * @param args.normalizeCustom Normalizer for custom (non-token) values.\n * @returns Effective CSS value string.\n */\nexport const getEffectiveTokenOrCustom = <TToken extends string, TCustom>({\n    value,\n    resolvedValue,\n    guard,\n    normalizeCustom,\n}: {\n    value: TToken | TCustom;\n    resolvedValue: string | undefined;\n    guard: TokenGuard<TToken>;\n    normalizeCustom: (value: TCustom) => string;\n}) => {\n    return guard(value)\n        ? getResolvedValue(resolvedValue, value)\n        : normalizeCustom(value);\n};\n"],"names":["getResolvedValue","resolved","fallback","trim","length","toCssValue","value","String","isTokenFromSet","tokenSet","has","isTokenWithPrefix","prefix","startsWith","getTokenOrDefault","guard","getEffectiveTokenOrCustom","resolvedValue","normalizeCustom"],"mappings":"MASaA,EAAmB,CAC5BC,EACAC,IAEOD,GAAYA,EAASE,OAAOC,OAAS,EAAIH,EAAWC,EAQlDG,EAAcC,GACC,iBAAVA,EAAqB,GAAGA,MAAYC,OAAOD,GAShDE,EAAiB,CAC1BF,EACAG,IAEwB,iBAAVH,GAAsBG,EAASC,IAAIJ,GASxCK,EAAoB,CAC7BL,EACAM,IAEwB,iBAAVN,GAAsBA,EAAMO,WAAWD,GAU5CE,EAAoB,CAC7BR,EACAS,EACAb,IAEOa,EAAMT,GAASA,EAAQJ,EAYrBc,EAA4B,EACrCV,QACAW,gBACAF,QACAG,qBAOOH,EAAMT,GACPN,EAAiBiB,EAAeX,GAChCY,EAAgBZ"}
+{"version":3,"file":"token-resolver.js","sources":["../../../src/theme/utils/token-resolver.ts"],"sourcesContent":["type TokenGuard<TToken extends string> = (value: unknown) => value is TToken;\n\n/**\n * Prefers a resolved token value and falls back to the original token string\n * when the token has not been resolved yet.\n * @param resolved Resolved value from a token lookup.\n * @param fallback Original token string used as fallback.\n * @returns Resolved value when available, otherwise the fallback token string.\n */\nexport const getResolvedValue = (\n    resolved: string | undefined,\n    fallback: string\n) => {\n    return resolved && resolved.trim().length > 0 ? resolved : fallback;\n};\n\n/**\n * Converts numeric CSS values to px while preserving string inputs.\n * @param value CSS value as number or string.\n * @returns CSS value string.\n */\nexport const toCssValue = (value: string | number) => {\n    return typeof value === \"number\" ? `${value}px` : String(value);\n};\n\n/**\n * Checks whether a value is one of the known token literals.\n * @param value Unknown value to validate.\n * @param tokenSet Set of allowed token strings.\n * @returns True when value is a string token in the provided set.\n */\nexport const isTokenFromSet = <TToken extends string>(\n    value: unknown,\n    tokenSet: Set<string>\n): value is TToken => {\n    return typeof value === \"string\" && tokenSet.has(value);\n};\n\n/**\n * Checks whether a value is a token by matching a token prefix.\n * @param value Unknown value to validate.\n * @param prefix Token prefix to match.\n * @returns True when value is a string starting with the given prefix.\n */\nexport const isTokenWithPrefix = <TToken extends string>(\n    value: unknown,\n    prefix: string\n): value is TToken => {\n    return typeof value === \"string\" && value.startsWith(prefix);\n};\n\n/**\n * Uses a token value when valid, otherwise falls back to a default token.\n * @param value Candidate token value.\n * @param guard Type guard that validates the token.\n * @param fallback Default token to use when value is invalid.\n * @returns Valid token value or fallback token.\n */\nexport const getTokenOrDefault = <TToken extends string>(\n    value: unknown,\n    guard: TokenGuard<TToken>,\n    fallback: TToken\n) => {\n    return guard(value) ? value : fallback;\n};\n\n/**\n * Resolves token values through the resolved token string and normalizes\n * non-token values through a caller-provided normalizer.\n * @param args.value Token or custom value.\n * @param args.resolvedValue Resolved token value from lookup.\n * @param args.guard Type guard that checks whether the value is a token.\n * @param args.normalizeCustom Normalizer for custom (non-token) values.\n * @returns Effective CSS value string.\n */\nexport const getEffectiveTokenOrCustom = <TToken extends string, TCustom>({\n    value,\n    resolvedValue,\n    guard,\n    normalizeCustom,\n}: {\n    value: TToken | TCustom;\n    resolvedValue: string | undefined;\n    guard: TokenGuard<TToken>;\n    normalizeCustom: (value: TCustom) => string;\n}) => {\n    return guard(value)\n        ? getResolvedValue(resolvedValue, value)\n        : normalizeCustom(value);\n};\n"],"names":["toCssValue","value","String","isTokenFromSet","tokenSet","has","isTokenWithPrefix","prefix","startsWith"],"mappings":"AAqBO,MAAMA,EAAcC,GACC,iBAAVA,EAAqB,GAAGA,MAAYC,OAAOD,GAShDE,EAAiB,CAC1BF,EACAG,IAEwB,iBAAVH,GAAsBG,EAASC,IAAIJ,GASxCK,EAAoB,CAC7BL,EACAM,IAEwB,iBAAVN,GAAsBA,EAAMO,WAAWD"}

package/theme/utils/use-apply-styles.d.ts

@@ -1,12 +1,28 @@
-import type { RefObject } from "react";
-import type { CSSVariableKey } from "../types";
+import type { CSSProperties, RefObject } from "react";
+import type { CSSVariableString } from "../types";
 type StyleValue = string | number | null | undefined;
-export type ApplyStyleMap = {
-    [K in keyof React.CSSProperties]?: StyleValue;
+type ExtractCleanCSSVariableName<T extends string> = T extends `var(${infer Name})` ? Name : never;
+type CSSVariableKey = ExtractCleanCSSVariableName<CSSVariableString>;
+/**
+ * Style map accepted by `useApplyStyle`. Supports camelCase CSS properties,
+ * theme CSS variable keys, and arbitrary `--custom-property` names.
+ */
+export type ApplyStyleMap = ({
+    [K in keyof CSSStyleDeclaration]?: StyleValue;
 } & {
     [K in CSSVariableKey]?: StyleValue;
 } & {
     [K in `--${string}`]?: StyleValue;
-};
-export declare function useApplyStyle<TElement extends HTMLElement>(ref: RefObject<TElement | null>, styles: ApplyStyleMap): void;
+}) | CSSProperties;
+/**
+ * Hook to apply styles to a HTML DOM element. Use when you need to apply inline
+ * styles but cannot use the inline React `style` prop due to strict CSP rules.
+ *
+ * @param ref The HTML element to receive the styles
+ * @param styles The styles to apply, in the same format as the React `style`
+ * prop, or CSS variables. Values will be normalised to strings and numeric
+ * values will have "px" appended for properties that typically require units.
+ * @keywords css variables, hook, inline styles
+ */
+export declare function useApplyStyle<TElement extends HTMLElement>(ref: RefObject<TElement | null>, styles: ApplyStyleMap | undefined): void;
 export {};

package/theme/utils/use-apply-styles.js

@@ -1,2 +1,2 @@
-import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"react";import"../../util/string-helper.js";import{useIsomorphicLayoutEffect as t}from"../../util/use-isomorphic-layout-effect.js";function r(r,e){t((()=>{const t=null==r?void 0:r.current;t&&Object.entries(e).forEach((([r,e])=>{null!=e?t.style.setProperty(r,String(e)):t.style.setProperty(r,"")}))}),[r,e])}export{r as useApplyStyle};
+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{useIsomorphicLayoutEffect as t}from"../../util/use-isomorphic-layout-effect.js";const r=new Set(["width","height","top","left","right","bottom","margin","marginTop","marginLeft","marginRight","marginBottom","padding","paddingTop","paddingLeft","paddingRight","paddingBottom"]);function e(e,i){t((()=>{const t=null==e?void 0:e.current;t&&i&&Object.entries(i).forEach((([e,i])=>{const o=function(t){if(t.startsWith("--"))return t;const r=t.replace(/([A-Z])/g,"-$1").toLowerCase();return/^(o|moz|ms|webkit)-/.test(r)?`-${r}`:r}(e);if(null==i)return void t.style.removeProperty(o);const n=function(t,e){return"number"==typeof e&&r.has(t)?`${e}px`:String(e)}(e,i);t.style.setProperty(o,n)}))}),[e,i])}export{e as useApplyStyle};
 //# sourceMappingURL=use-apply-styles.js.map

package/theme/utils/use-apply-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-apply-styles.js","sources":["../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableKey } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\nexport type ApplyStyleMap = {\n    [K in keyof React.CSSProperties]?: StyleValue;\n} & {\n    [K in CSSVariableKey]?: StyleValue;\n} & {\n    [K in `--${string}`]?: StyleValue;\n};\n\nexport function useApplyStyle<TElement extends HTMLElement>(\n    ref: RefObject<TElement | null>,\n    styles: ApplyStyleMap\n) {\n    useIsomorphicLayoutEffect(() => {\n        const element = ref?.current;\n        if (!element) return;\n\n        Object.entries(styles).forEach(([key, value]) => {\n            if (value == null) {\n                element.style.setProperty(key, \"\");\n                return;\n            }\n\n            element.style.setProperty(key, String(value));\n        });\n    }, [ref, styles]);\n}\n"],"names":["useApplyStyle","ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","style","setProperty","String"],"mappings":"yNAeM,SAAUA,EACZC,EACAC,GAEAC,GAA0B,KACtB,MAAMC,EAAUH,aAAG,EAAHA,EAAKI,QAChBD,GAELE,OAAOC,QAAQL,GAAQM,SAAQ,EAAEC,EAAKC,MACrB,MAATA,EAKJN,EAAQO,MAAMC,YAAYH,EAAKI,OAAOH,IAJlCN,EAAQO,MAAMC,YAAYH,EAAK,GAIU,GAC/C,GACH,CAACR,EAAKC,GACb"}
+{"version":3,"file":"use-apply-styles.js","sources":["../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableString } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\ntype ExtractCleanCSSVariableName<T extends string> =\n    T extends `var(${infer Name})` ? Name : never;\ntype CSSVariableKey = ExtractCleanCSSVariableName<CSSVariableString>;\n\n/**\n * Style map accepted by `useApplyStyle`. Supports camelCase CSS properties,\n * theme CSS variable keys, and arbitrary `--custom-property` names.\n */\nexport type ApplyStyleMap =\n    | ({\n          [K in keyof CSSStyleDeclaration]?: StyleValue;\n      } & {\n          [K in CSSVariableKey]?: StyleValue;\n      } & {\n          [K in `--${string}`]?: StyleValue;\n      })\n    | CSSProperties;\n\n/**\n * List of properties that expect units but can be provided as\n * numbers through React style prop\n */\nconst numericCssStyleProperties: Set<keyof CSSStyleDeclaration> = new Set([\n    \"width\",\n    \"height\",\n    \"top\",\n    \"left\",\n    \"right\",\n    \"bottom\",\n    \"margin\",\n    \"marginTop\",\n    \"marginLeft\",\n    \"marginRight\",\n    \"marginBottom\",\n    \"padding\",\n    \"paddingTop\",\n    \"paddingLeft\",\n    \"paddingRight\",\n    \"paddingBottom\",\n]);\n\n/**\n * Normalises standard CSS property names from camelCase to kebab-case\n * - `backgroundColor` → `background-color`\n * - `WebkitLineClamp` → `-webkit-line-clamp`\n * - `--custom-variable` → `--custom-variable`\n *\n * Ref\n * https://github.com/facebook/react/blob/ad5dfc82b7107728da1430dd142f75b97b684dac/packages/react-dom-bindings/src/shared/hyphenateStyleName.js#L26\n */\nfunction normaliseCssProperty(key: string): string {\n    if (key.startsWith(\"--\")) return key;\n\n    const kebabCased = key.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\n    if (/^(o|moz|ms|webkit)-/.test(kebabCased)) {\n        return `-${kebabCased}`;\n    }\n\n    return kebabCased;\n}\n\nfunction normaliseCssValue(key: string, value: string | number): string {\n    if (\n        typeof value === \"number\" &&\n        numericCssStyleProperties.has(key as keyof CSSStyleDeclaration)\n    ) {\n        return `${value}px`;\n    }\n\n    return String(value);\n}\n\n// @catalog\n/**\n * Hook to apply styles to a HTML DOM element. Use when you need to apply inline\n * styles but cannot use the inline React `style` prop due to strict CSP rules.\n *\n * @param ref The HTML element to receive the styles\n * @param styles The styles to apply, in the same format as the React `style`\n * prop, or CSS variables. Values will be normalised to strings and numeric\n * values will have \"px\" appended for properties that typically require units.\n * @keywords css variables, hook, inline styles\n */\nexport function useApplyStyle<TElement extends HTMLElement>(\n    ref: RefObject<TElement | null>,\n    styles: ApplyStyleMap | undefined\n) {\n    useIsomorphicLayoutEffect(() => {\n        const element = ref?.current;\n        if (!element || !styles) return;\n\n        Object.entries(styles).forEach(([key, value]: [string, StyleValue]) => {\n            const normalisedKey = normaliseCssProperty(key);\n\n            if (value == null) {\n                element.style.removeProperty(normalisedKey);\n                return;\n            }\n\n            const normalisedValue = normaliseCssValue(key, value);\n            element.style.setProperty(normalisedKey, normalisedValue);\n        });\n    }, [ref, styles]);\n}\n"],"names":["numericCssStyleProperties","Set","useApplyStyle","ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","normalisedKey","startsWith","kebabCased","replace","toLowerCase","test","normaliseCssProperty","style","removeProperty","normalisedValue","has","String","normaliseCssValue","setProperty"],"mappings":"sSA6BA,MAAMA,EAA4D,IAAIC,IAAI,CACtE,QACA,SACA,MACA,OACA,QACA,SACA,SACA,YACA,aACA,cACA,eACA,UACA,aACA,cACA,eACA,kBA8CE,SAAUC,EACZC,EACAC,GAEAC,GAA0B,KACtB,MAAMC,EAAUH,aAAG,EAAHA,EAAKI,QAChBD,GAAYF,GAEjBI,OAAOC,QAAQL,GAAQM,SAAQ,EAAEC,EAAKC,MAClC,MAAMC,EA3ClB,SAA8BF,GAC1B,GAAIA,EAAIG,WAAW,MAAO,OAAOH,EAEjC,MAAMI,EAAaJ,EAAIK,QAAQ,WAAY,OAAOC,cAElD,MAAI,sBAAsBC,KAAKH,GACpB,IAAIA,IAGRA,CACX,CAiCkCI,CAAqBR,GAE3C,GAAa,MAATC,EAEA,YADAN,EAAQc,MAAMC,eAAeR,GAIjC,MAAMS,EAtClB,SAA2BX,EAAaC,GACpC,MACqB,iBAAVA,GACPZ,EAA0BuB,IAAIZ,GAEvB,GAAGC,MAGPY,OAAOZ,EAClB,CA6BoCa,CAAkBd,EAAKC,GAC/CN,EAAQc,MAAMM,YAAYb,EAAeS,EAAgB,GAC3D,GACH,CAACnB,EAAKC,GACb"}

package/theme/utils/use-design-token-override.d.ts

@@ -0,0 +1,19 @@
+import type { CSSVariableString, ResolvedThemeMode } from "../types";
+interface UseDesignTokenOverrideOptions {
+    token: CSSVariableString;
+    mode?: ResolvedThemeMode;
+}
+/**
+ * Resolves a design token's value in a specific theme mode,
+ * regardless of the current active mode.
+ *
+ * @param options.token The CSS variable token to resolve.
+ * @param options.mode The mode to resolve in.
+ *
+ * @returns The computed CSS value, or `undefined` when the theme element has
+ * not yet mounted.
+ *
+ * @default options.mode "light"
+ */
+export declare const useDesignTokenOverride: ({ token, mode, }: UseDesignTokenOverrideOptions) => string | undefined;
+export {};

package/theme/utils/use-design-token-override.js

@@ -0,0 +1,2 @@
+import{useState as e,useEffect as t}from"react";import{useTheme as o}from"../theme-provider/hooks.js";import{parseCSSVariableValue as r}from"./css-variable.js";const m=({token:m,mode:s="light"})=>{const{theme:d,themeElement:n}=o(),[i,a]=e();return t((()=>{if(!n)return;const e=document.createElement("div");e.dataset.fdsTheme=d,e.dataset.fdsThemeMode=s,e.style.display="none",n.appendChild(e);const t=r(m,e);a(t||void 0),e.remove()}),[d,n,m,s]),i};export{m as useDesignTokenOverride};
+//# sourceMappingURL=use-design-token-override.js.map

package/theme/utils/use-design-token-override.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-design-token-override.js","sources":["../../../src/theme/utils/use-design-token-override.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useTheme } from \"../theme-provider/hooks\";\nimport type { CSSVariableString, ResolvedThemeMode } from \"../types\";\nimport { parseCSSVariableValue } from \"./css-variable\";\n\ninterface UseDesignTokenOverrideOptions {\n    token: CSSVariableString;\n    mode?: ResolvedThemeMode;\n}\n\n/**\n * Resolves a design token's value in a specific theme mode,\n * regardless of the current active mode.\n *\n * @param options.token The CSS variable token to resolve.\n * @param options.mode The mode to resolve in.\n *\n * @returns The computed CSS value, or `undefined` when the theme element has\n * not yet mounted.\n *\n * @default options.mode \"light\"\n */\nexport const useDesignTokenOverride = ({\n    token,\n    mode = \"light\",\n}: UseDesignTokenOverrideOptions): string | undefined => {\n    const { theme, themeElement } = useTheme();\n    const [value, setValue] = useState<string | undefined>();\n\n    useEffect(() => {\n        if (!themeElement) return;\n\n        const tempEl = document.createElement(\"div\");\n        tempEl.dataset.fdsTheme = theme;\n        tempEl.dataset.fdsThemeMode = mode;\n        tempEl.style.display = \"none\";\n        themeElement.appendChild(tempEl);\n\n        const resolved = parseCSSVariableValue(token, tempEl);\n        setValue(resolved || undefined);\n\n        tempEl.remove();\n    }, [theme, themeElement, token, mode]);\n\n    return value;\n};\n"],"names":["useDesignTokenOverride","token","mode","theme","themeElement","useTheme","value","setValue","useState","useEffect","tempEl","document","createElement","dataset","fdsTheme","fdsThemeMode","style","display","appendChild","resolved","parseCSSVariableValue","undefined","remove"],"mappings":"gKAuBO,MAAMA,EAAyB,EAClCC,QACAC,OAAO,YAEP,MAAMC,MAAEA,EAAKC,aAAEA,GAAiBC,KACzBC,EAAOC,GAAYC,IAiB1B,OAfAC,GAAU,KACN,IAAKL,EAAc,OAEnB,MAAMM,EAASC,SAASC,cAAc,OACtCF,EAAOG,QAAQC,SAAWX,EAC1BO,EAAOG,QAAQE,aAAeb,EAC9BQ,EAAOM,MAAMC,QAAU,OACvBb,EAAac,YAAYR,GAEzB,MAAMS,EAAWC,EAAsBnB,EAAOS,GAC9CH,EAASY,QAAYE,GAErBX,EAAOY,QAAQ,GAChB,CAACnB,EAAOC,EAAcH,EAAOC,IAEzBI,CAAK"}