@gnist/design-system 3.6.0 → 3.8.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.7.0...@gnist/design-system@3.8.0) (2025-08-11)
+
+### Features
+
+* add className prop to Modal ([dea7d5d](https://github.com/mollerdigital/design-system-design-system/commit/dea7d5d0814012321e765cf2ceee05ba8dab2453))
+
+## [3.7.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.6.0...@gnist/design-system@3.7.0) (2025-07-11)
+
+### Features
+
+* add mode prop to TextField ([015a59b](https://github.com/mollerdigital/design-system-design-system/commit/015a59b522fc04d0526a67de9d0e2ecc0fd3396f))
+
 ## [3.6.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.5.6...@gnist/design-system@3.6.0) (2025-07-07)
 
 ### Features

package/dist/building-blocks/skeletons/CircularSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/CircularSkeleton.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,kCAI1B,qBAAqB,4CAoBvB,CAAC"}
+{"version":3,"file":"CircularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/CircularSkeleton.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,+BAI9B,qBAAqB,4CAoBvB,CAAC"}

package/dist/building-blocks/skeletons/RectangularSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RectangularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/RectangularSkeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,2CAK7B,wBAAwB,4CAmB1B,CAAC"}
+{"version":3,"file":"RectangularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/RectangularSkeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,wCAKjC,wBAAwB,4CAmB1B,CAAC"}

package/dist/building-blocks/skeletons/TextSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,kCAItB,iBAAiB,4CAiCnB,CAAC"}
+{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+BAI1B,iBAAiB,4CAiCnB,CAAC"}

package/dist/components/actions/buttons/createButtonVariant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createButtonVariant.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/createButtonVariant.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,eAAO,MAAM,qBAAqB,GAAI,SAAS,SAAS,WAAW,SACxD,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,gBACtD,gBAAgB,CAAC,SAAS,CAAC,KAC1C,gBAAgB,CAAC,SAAS,CAuB3B,CAAC"}
+{"version":3,"file":"createButtonVariant.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/createButtonVariant.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,eAAO,MAAM,qBAAqB,GAAI,SAAS,SAAS,WAAW,EAC/D,OAAO,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,EACpE,cAAc,gBAAgB,CAAC,SAAS,CAAC,KAC1C,gBAAgB,CAAC,SAAS,CAuB3B,CAAC"}

package/dist/components/actions/buttons/styles.css.d.ts

@@ -7,7 +7,7 @@ export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<
         };
         false: {
             ":disabled": {
-                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})`;
             };
         };
     };
@@ -23,7 +23,7 @@ export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<
     buttonType: {
         box: {
             ":disabled": {
-                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})`;
             };
         };
         text: (string | {
@@ -45,10 +45,10 @@ export declare const boxedButton: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const iconButton: import("@vanilla-extract/recipes").RuntimeFn<{
     showLabel: {
         left: {
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})`;
         };
         right: {
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})`;
         };
         none: string;
     };
@@ -61,7 +61,7 @@ export declare const textButtonText: import("@vanilla-extract/recipes").RuntimeF
                 [x: string]: {
                     borderBottomColor: "inherit";
                 } | {
-                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderBottomColor: `var(--${string})`;
                 };
             };
         };

package/dist/components/actions/chips/styles.css.d.ts

@@ -1,9 +1,9 @@
 export declare const chipRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     selected: {
         true: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderColor: `var(--${string})`;
         }[];
         false: {};
     };
@@ -16,15 +16,15 @@ export declare const chipRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
             minWidth: string;
             border: "none";
             cursor: "not-allowed";
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})`;
         })[];
         false: {};
     };
     filled: {
         true: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderColor: `var(--${string})`;
         }[];
         false: {};
     };

package/dist/components/actions/selectionControls/radiobutton.css.d.ts

@@ -1,15 +1,15 @@
 export declare const RadioButtonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     validity: {
         error: {
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderColor: `var(--${string})`;
         }[];
         none: {};
         success: {};
     };
     disabled: {
         true: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})`;
+            borderColor: `var(--${string})`;
             cursor: "not-allowed";
         }[];
         false: {};
@@ -18,20 +18,20 @@ export declare const RadioButtonRecipe: import("@vanilla-extract/recipes").Runti
 export declare const CheckedCircleRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     checked: {
         true: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
         }[];
         false: {};
     };
     validity: {
         error: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})`;
         }[];
         none: {};
         success: {};
     };
     disabled: {
         true: (string | {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})`;
             cursor: "not-allowed";
         })[];
         false: {};

package/dist/components/actions/selectionControls/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAI/E,MAAM,WAAW,qBAAqB,CAAC,MAAM,CACzC,SAAQ,IAAI,CACJ,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CACnE,EACD,gBAAgB,CAAC,MAAM,CAAC,EACxB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3E;AAED,UAAU,sBAAuB,SAAQ,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmB9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,4BAG9B;IACC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,4CAMA,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAI/E,MAAM,WAAW,qBAAqB,CAAC,MAAM,CACzC,SAAQ,IAAI,CACJ,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CACnE,EACD,gBAAgB,CAAC,MAAM,CAAC,EACxB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3E;AAED,UAAU,sBAAuB,SAAQ,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmB9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,yBAGlC;IACC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,4CAMA,CAAC"}

package/dist/components/feedback/alerts/AlertBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAapD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,mFASrB,gBAAgB,4CAuClB,CAAC"}
+{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAapD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,GAAI,gFASzB,gBAAgB,4CAuClB,CAAC"}

package/dist/components/feedback/loaders/LoadingSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACpD;AAID;;;;KAIK;AAEL,eAAO,MAAM,cAAc,+CAIxB,mBAAmB,mDAgCrB,CAAC"}
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACpD;AAID;;;;KAIK;AAEL,eAAO,MAAM,cAAc,GAAI,4CAI5B,mBAAmB,mDAgCrB,CAAC"}

package/dist/components/feedback/notifications/Lozenge.d.ts

@@ -14,10 +14,10 @@ export declare const Lozenge: import("@gnist/component-utils").VanillaRecipeComp
     };
     density: {
         compact: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})`;
         };
         default: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})`;
         };
     };
 }>>;

package/dist/components/feedback/notifications/lozenge.css.d.ts

@@ -11,10 +11,10 @@ export declare const lozengeRecipe: import("@vanilla-extract/recipes").RuntimeFn
     };
     density: {
         compact: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})`;
         };
         default: {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})`;
         };
     };
 }>;

package/dist/components/feedback/progress/ProgressBar.css.d.ts

@@ -1,5 +1,5 @@
 export declare const progressBarStyles: string;
 export declare const progressBar: string;
-export declare const progressPercentage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const progressPercentage: `var(--${string})`;
 export declare const progressAnimation: string;
 //# sourceMappingURL=ProgressBar.css.d.ts.map

package/dist/components/feedback/progress/ProgressBar.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress/ProgressBar.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,QAK5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,kBAAkB,oFAAc,CAAC;AAO9C,eAAO,MAAM,iBAAiB,QAK5B,CAAC"}
+{"version":3,"file":"ProgressBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress/ProgressBar.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,QAK5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,kBAAkB,oBAAc,CAAC;AAO9C,eAAO,MAAM,iBAAiB,QAK5B,CAAC"}

package/dist/components/inputs/pickers/Calendar.css.d.ts

@@ -1,13 +1,13 @@
 export declare const containerStyle: string;
 export declare const gridStyle: string;
 export declare const rowStyle: string;
-export declare const firstDay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const firstDay: `var(--${string})`;
 export declare const selectMonthRow: string;
 export declare const headerCell: string;
 export declare const cellRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     isToday: {
         true: {
-            border: `var(--${string}) var(--${string}) solid` | `var(--${string}) var(--${string}, ${string}) solid` | `var(--${string}) var(--${string}, ${number}) solid` | `var(--${string}, ${string}) var(--${string}) solid` | `var(--${string}, ${string}) var(--${string}, ${string}) solid` | `var(--${string}, ${string}) var(--${string}, ${number}) solid` | `var(--${string}, ${number}) var(--${string}) solid` | `var(--${string}, ${number}) var(--${string}, ${string}) solid` | `var(--${string}, ${number}) var(--${string}, ${number}) solid`;
+            border: `var(--${string}) var(--${string}) solid`;
         };
     };
     isSelected: {
@@ -21,13 +21,13 @@ export declare const cellRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     };
     isDisabled: {
         true: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
             textDecoration: "line-through";
         };
     };
     isUnavailable: {
         true: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
             textDecoration: "line-through";
         };
     };

package/dist/components/inputs/pickers/Calendar.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/Calendar.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc,QAazB,CAAC;AAEH,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QASnB,CAAC;AAEH,eAAO,MAAM,QAAQ,oFAAc,CAAC;AAMpC,eAAO,MAAM,cAAc,QAIzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuErB,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA6C,CAAC;AAEtE,eAAO,MAAM,iBAAiB,QAQ5B,CAAC"}
+{"version":3,"file":"Calendar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/Calendar.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc,QAazB,CAAC;AAEH,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QASnB,CAAC;AAEH,eAAO,MAAM,QAAQ,oBAAc,CAAC;AAMpC,eAAO,MAAM,cAAc,QAIzB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuErB,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA6C,CAAC;AAEtE,eAAO,MAAM,iBAAiB,QAQ5B,CAAC"}

package/dist/components/inputs/shared-styles/iconButtonOverlay.css.d.ts

@@ -5,10 +5,10 @@ export declare const iconButtonOverlayRecipe: import("@vanilla-extract/recipes")
     };
     placement: {
         left: {
-            left: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            left: `var(--${string})`;
         };
         right: {
-            right: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            right: `var(--${string})`;
         };
     };
 }>;

package/dist/components/inputs/shared-styles/inputFieldConstants.css.d.ts

@@ -1,5 +1,5 @@
-export declare const preInputWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const postInputWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const visibleLines: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const preInputWidth: `var(--${string})`;
+export declare const postInputWidth: `var(--${string})`;
+export declare const visibleLines: `var(--${string})`;
 export declare const transitionTime = "250ms";
 //# sourceMappingURL=inputFieldConstants.css.d.ts.map

package/dist/components/inputs/shared-styles/inputFieldConstants.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputFieldConstants.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/inputFieldConstants.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,oFAAc,CAAC;AACzC,eAAO,MAAM,cAAc,oFAAc,CAAC;AAC1C,eAAO,MAAM,YAAY,oFAAc,CAAC;AACxC,eAAO,MAAM,cAAc,UAAU,CAAC"}
+{"version":3,"file":"inputFieldConstants.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/inputFieldConstants.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,oBAAc,CAAC;AACzC,eAAO,MAAM,cAAc,oBAAc,CAAC;AAC1C,eAAO,MAAM,YAAY,oBAAc,CAAC;AACxC,eAAO,MAAM,cAAc,UAAU,CAAC"}

package/dist/components/inputs/shared-styles/labelStyles.css.d.ts

@@ -19,14 +19,14 @@ export declare const labelStyle: import("@vanilla-extract/recipes").RuntimeFn<{
         error: {
             selectors: {
                 [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                 };
             };
         };
         success: {
             selectors: {
                 [x: string]: {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})`;
                 };
             };
         };
@@ -49,14 +49,14 @@ export declare const labelStyle: import("@vanilla-extract/recipes").RuntimeFn<{
                     readonly left: 0;
                     readonly right: 0;
                     readonly top: "5px";
-                    readonly height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    readonly height: `var(--${string})`;
                 };
             };
             color: string;
             lineHeight: "1em";
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})`;
+            paddingLeft: `var(--${string})`;
+            paddingRight: `var(--${string})`;
             left: string;
         };
         false: {};

package/dist/components/inputs/textFields/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAezE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEN;;;;;;;;;;;EAWE;AACF,eAAO,MAAM,QAAQ;IA5Bb;;;;;;;OAOG;kBACW,MAAM;IACpB;;;OAGG;mBACY,MAAM;mDAiK3B,CAAC;AAEH,eAAO,MAAM,SAAS,UAAW,MAAM,OAAO,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,UAAW,MAAM,OAAO,MAAM,WACtB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAezE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEN;;;;;;;;;;;EAWE;AACF,eAAO,MAAM,QAAQ;IA5Bb;;;;;;;OAOG;kBACW,MAAM;IACpB;;;OAGG;mBACY,MAAM;mDAiK3B,CAAC;AAEH,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,WACtB,CAAC"}

package/dist/components/inputs/textFields/TextField.cjs

@@ -23,17 +23,40 @@ const shared = require("../shared.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
 const TextField = React.forwardRef(function TextField2(props, ref) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
   const { inputProps } = shared.getInputFieldProps(props);
+  const isModeCurrencyOrNumberFormatting = ((_a = props.mode) == null ? void 0 : _a.style) === "currency" || ((_b = props.mode) == null ? void 0 : _b.style) === "numberSpacing";
+  const onChangeHandler = (event) => {
+    var _a2;
+    if (isModeCurrencyOrNumberFormatting) {
+      event.target.value = event.target.value.replace(new RegExp("(?<!^)-|[^\\d\\W.,]+|[.,]|\\s+", "g"), "");
+    }
+    (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, event);
+  };
+  if (isModeCurrencyOrNumberFormatting && !!inputProps.value) {
+    inputProps.type = "text";
+    inputProps.inputMode = "numeric";
+    const number = inputProps.value;
+    const isNegativeNumber = number[0] === "-";
+    inputProps.value = isNegativeNumber ? inputProps.value.slice(1) : inputProps.value;
+    const numberPrefix = isNegativeNumber ? "-" : "";
+    const formattedValue = new Intl.NumberFormat("nb-NB", {
+      style: "currency",
+      currency: "NOK",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 5
+    }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
+    inputProps.value = numberPrefix + formattedValue;
+  }
   return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
-    validityType: (_a = props.validity) == null ? void 0 : _a.type
-  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
+    validityType: (_c = props.validity) == null ? void 0 : _c.type
+  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
     [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
     [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -44,7 +67,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
     (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
   } }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms_css_js.atoms({ paddingRight: "xxs" }) }), props.prefix && jsxRuntime.jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: suffixPrefix_css.prefixStyle, children: props.prefix }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
     density: props.density,
-    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    validityType: (_d = props.validity) == null ? void 0 : _d.type,
     isElevated: !!props.value || props.type === "date" || props.type === "time",
     disabled: props.disabled
   }), style: {

package/dist/components/inputs/textFields/TextField.d.ts

@@ -1,12 +1,17 @@
 import { InputHTMLAttributes } from "react";
 import { TextInputProps } from "../shared.js";
-export type TextFieldProps = TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value" | "type"> & {
+export type TextFieldModeProps = {
     /**
-     * Input type
-     * @default text
+     * Applies number spacing and numeric input mode
      */
-    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
+    mode?: {
+        style: "numberSpacing";
+    } | {
+        style: "currency";
+        currency: "NOK";
+    };
 };
+export type TextFieldProps = TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value">;
 /**
 A text field is an input that allows a user to write or edit text. Text fields typically appear in forms and dialogs.
 
@@ -18,11 +23,5 @@ _Accessibility note:_ The leading/trailing icon and prefix/suffix text will not
 
 Documentation: [TextField](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textfield--docs)
  */
-export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "placeholder"> & {
-    /**
-     * Input type
-     * @default text
-     */
-    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
-} & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder"> & import("react").RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/inputs/textFields/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,IAAI,CACA,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,CACnC,GAAG;IACA;;;OAGG;IACH,IAAI,CAAC,EACC,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;CAChB,CAAC;AAEN;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;IA3Bd;;;OAGG;WAEG,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM;mDAuJlB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,eAAe,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAA;KAAE,CAAC;CAC9E,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,kBAAkB,GAClB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC;AAEzE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,wMAqLpB,CAAC"}

package/dist/components/inputs/textFields/TextField.js

@@ -19,17 +19,40 @@ import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
 import { useInputFieldLogic, getInputFieldProps, isClickableIcon } from "../shared.js";
 const TextField = forwardRef(function TextField2(props, ref) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
   const { inputProps } = getInputFieldProps(props);
+  const isModeCurrencyOrNumberFormatting = ((_a = props.mode) == null ? void 0 : _a.style) === "currency" || ((_b = props.mode) == null ? void 0 : _b.style) === "numberSpacing";
+  const onChangeHandler = (event) => {
+    var _a2;
+    if (isModeCurrencyOrNumberFormatting) {
+      event.target.value = event.target.value.replace(new RegExp("(?<!^)-|[^\\d\\W.,]+|[.,]|\\s+", "g"), "");
+    }
+    (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, event);
+  };
+  if (isModeCurrencyOrNumberFormatting && !!inputProps.value) {
+    inputProps.type = "text";
+    inputProps.inputMode = "numeric";
+    const number = inputProps.value;
+    const isNegativeNumber = number[0] === "-";
+    inputProps.value = isNegativeNumber ? inputProps.value.slice(1) : inputProps.value;
+    const numberPrefix = isNegativeNumber ? "-" : "";
+    const formattedValue = new Intl.NumberFormat("nb-NB", {
+      style: "currency",
+      currency: "NOK",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 5
+    }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
+    inputProps.value = numberPrefix + formattedValue;
+  }
   return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
-    validityType: (_a = props.validity) == null ? void 0 : _a.type
-  }), children: [jsx("input", { ...commonInputProps, ...inputProps, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
+    validityType: (_c = props.validity) == null ? void 0 : _c.type
+  }), children: [jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
     [preInputWidth]: wrapperProps.preInputWidth,
     [postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -40,7 +63,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
     (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
   } }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms({ paddingRight: "xxs" }) }), props.prefix && jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: prefixStyle, children: props.prefix }), jsx("label", { id: contentProps.labelId, className: labelStyle({
     density: props.density,
-    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    validityType: (_d = props.validity) == null ? void 0 : _d.type,
     isElevated: !!props.value || props.type === "date" || props.type === "time",
     disabled: props.disabled
   }), style: {

package/dist/components/surfaces/accordion/Accordion.d.ts

@@ -26,13 +26,13 @@ type AccordionProps = {
 export declare const Accordion: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDetailsElement>>, import("@gnist/component-utils").VariantSelection<{
     withDivider: {
         true: {
-            borderBottom: `var(--${string}) solid var(--${string})` | `var(--${string}) solid var(--${string}, ${string})` | `var(--${string}) solid var(--${string}, ${number})` | `var(--${string}, ${string}) solid var(--${string})` | `var(--${string}, ${string}) solid var(--${string}, ${string})` | `var(--${string}, ${string}) solid var(--${string}, ${number})` | `var(--${string}, ${number}) solid var(--${string})` | `var(--${string}, ${number}) solid var(--${string}, ${string})` | `var(--${string}, ${number}) solid var(--${string}, ${number})`;
+            borderBottom: `var(--${string}) solid var(--${string})`;
         };
     };
     withBackground: {
         true: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>>;

package/dist/components/surfaces/accordion/accordion.css.d.ts

@@ -1,13 +1,13 @@
 export declare const accordionRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     withDivider: {
         true: {
-            borderBottom: `var(--${string}) solid var(--${string})` | `var(--${string}) solid var(--${string}, ${string})` | `var(--${string}) solid var(--${string}, ${number})` | `var(--${string}, ${string}) solid var(--${string})` | `var(--${string}, ${string}) solid var(--${string}, ${string})` | `var(--${string}, ${string}) solid var(--${string}, ${number})` | `var(--${string}, ${number}) solid var(--${string})` | `var(--${string}, ${number}) solid var(--${string}, ${string})` | `var(--${string}, ${number}) solid var(--${string}, ${number})`;
+            borderBottom: `var(--${string}) solid var(--${string})`;
         };
     };
     withBackground: {
         true: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
 }>;

package/dist/components/surfaces/cards/cards.css.d.ts

@@ -22,8 +22,8 @@ export declare const cardsRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
         checkbox: {};
         info: {
             borderStyle: "solid";
-            borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderWidth: `var(--${string})`;
+            borderColor: `var(--${string})`;
             boxShadow: "none";
         }[];
         link: {

package/dist/components/surfaces/cards/checkboxCard.css.d.ts

@@ -1,12 +1,12 @@
 export declare const StyledCardRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     disabled: {
         true: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})`;
         };
     };
     cardStyle: {
         elevation: {
-            boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            boxShadow: `var(--${string})`;
             border: "none";
         }[];
         outline: never[];

package/dist/components/surfaces/cards/internal/SelectionCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACX,6CAAoE;AACrE,OAAO,EAAE,gBAAgB,EAAE,+BAAwC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CACxC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,CAC5D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,kBACb,SAAQ,sBAAsB,EAC1B,aAAa,CAAC,KAAK,CAAC,EACpB,cAAc,EACd,gBAAgB,CAAC,OAAO,CAAC,EACzB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;CAAG;AAEhD,eAAO,MAAM,mBAAmB,uBAG7B;IAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAAA;CAAE,GAAG,gBAAgB,4CAcnD,CAAC;AAIF,eAAO,MAAM,oBAAoB,+CAK9B,IAAI,CACH,kBAAkB,EAClB,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACnD,mDAqBA,CAAC"}
+{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACX,6CAAoE;AACrE,OAAO,EAAE,gBAAgB,EAAE,+BAAwC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CACxC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,CAC5D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,kBACb,SAAQ,sBAAsB,EAC1B,aAAa,CAAC,KAAK,CAAC,EACpB,cAAc,EACd,gBAAgB,CAAC,OAAO,CAAC,EACzB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;CAAG;AAEhD,eAAO,MAAM,mBAAmB,GAAI,oBAGjC;IAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAAA;CAAE,GAAG,gBAAgB,4CAcnD,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,4CAKlC,IAAI,CACH,kBAAkB,EAClB,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACnD,mDAqBA,CAAC"}

package/dist/components/surfaces/modal/Modal.cjs

@@ -17,9 +17,11 @@ require("../../actions/chips/TagChip.cjs");
 const index$1 = require("../../../foundation/typography/index.cjs");
 const index = require("../../../translations/index.cjs");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const classNames = require("classnames");
 const React = require("react");
 const reactDom = require("react-dom");
 const modal_css = require("./modal.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 function _interopNamespaceCompat(e) {
   if (e && typeof e === "object" && "default" in e) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -37,6 +39,7 @@ function _interopNamespaceCompat(e) {
   n.default = e;
   return Object.freeze(n);
 }
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
 const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
 const hasScroll = (size, height) => {
   switch (size) {
@@ -50,7 +53,7 @@ const hasScroll = (size, height) => {
       return height > 271;
   }
 };
-const Modal = React__namespace.forwardRef(function Modal2({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens_css_js.tokens.color.surface, ...rest }, ref) {
+const Modal = React__namespace.forwardRef(function Modal2({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens_css_js.tokens.color.surface, className }, ref) {
   var _a, _b;
   const text = index.useTranslation((t) => t.components.surfaces.modal);
   const [contentHeight, setContentHeight] = React.useState(0);
@@ -92,7 +95,7 @@ const Modal = React__namespace.forwardRef(function Modal2({ children, title, isO
   if (!renderComponent) {
     return null;
   }
-  return reactDom.createPortal(jsxRuntime.jsxs("dialog", { ref: dialogRef, className: isOpen ? modal_css.modalStyle : "", onClick: handleDialogClose, children: [jsxRuntime.jsx("div", { role: "presentation", className: modal_css.backdropStyle, onClick: handleBackdropClick }), jsxRuntime.jsxs("div", { ref, className: modal_css.dialogRecipe({ size }), ...rest, style: { backgroundColor }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: modal_css.headerRowRecipe({
+  return reactDom.createPortal(jsxRuntime.jsxs("dialog", { ref: dialogRef, className: isOpen ? modal_css.modalStyle : "", onClick: handleDialogClose, children: [jsxRuntime.jsx("div", { role: "presentation", className: modal_css.backdropStyle, onClick: handleBackdropClick }), jsxRuntime.jsxs("div", { ref, className: classNames__default.default(modal_css.dialogRecipe({ size }), className), style: { backgroundColor }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: modal_css.headerRowRecipe({
     size,
     hasScroll: hasScroll(size, contentHeight)
   }), style: { backgroundColor }, children: [title ? jsxRuntime.jsx(index$1.LeadText, { "$as": "h2", className: modal_css.modalHeadingStyle, children: title }) : jsxRuntime.jsx("span", { "aria-hidden": true }), jsxRuntime.jsx(IconButton.IconButton, { icon: "close", label: text.dismissLabel, onClick: handleClose, disabled: (_a = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _a.isLoading, autoFocus: true })] }), jsxRuntime.jsx("div", { ref: (element) => {

package/dist/components/surfaces/modal/Modal.d.ts

@@ -23,6 +23,7 @@ export interface ModalProps {
     action?: React.ReactNode;
     /** Background color of the modal. */
     backgroundColor?: string;
+    className?: string;
 }
 /**
  *