@gnist/design-system 6.2.1 → 7.0.0-alpha.0

package/dist/components/inputs/shared-styles/labelStyles.css.cjs

@@ -3,7 +3,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_inputFieldConstants_css = require("./inputFieldConstants.css.cjs");
 const require_inputField_css = require("./inputField.css.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
 //#region src/components/inputs/shared-styles/labelStyles.css.ts
@@ -27,7 +27,7 @@ var elevatedLabelBackground = (backgroundColor) => ({
 	top: "5px",
 	height: _gnist_themes_tokens_css_js.tokens.stroke.medium
 });
-var labelStyle = (0, _vanilla_extract_recipes.recipe)({
+var labelStyle = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: {
 		zIndex: 1,
 		position: "relative",

package/dist/components/inputs/shared-styles/labelStyles.css.js

@@ -2,7 +2,7 @@
 import { preInputWidth, transitionTime } from "./inputFieldConstants.css.js";
 import { inputFieldStyle } from "./inputField.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { calc } from "@vanilla-extract/css-utils";
 //#region src/components/inputs/shared-styles/labelStyles.css.ts
@@ -26,7 +26,7 @@ var elevatedLabelBackground = (backgroundColor) => ({
 	top: "5px",
 	height: tokens.stroke.medium
 });
-var labelStyle = recipe({
+var labelStyle = gnistRecipe({
 	base: {
 		zIndex: 1,
 		position: "relative",

package/dist/components/inputs/shared-styles/suffixPrefix.css.cjs

@@ -1,13 +1,13 @@
 "use client";
 require("../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_css = require("@vanilla-extract/css");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 //#region src/components/inputs/shared-styles/suffixPrefix.css.ts
-var prefixStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var prefixStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	color: "text-variant",
 	paddingRight: "xxs"
 })]);
-var suffixStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var suffixStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	color: "text-variant",
 	paddingLeft: "xxs"
 })]);

package/dist/components/inputs/shared-styles/suffixPrefix.css.js

@@ -1,12 +1,12 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 //#region src/components/inputs/shared-styles/suffixPrefix.css.ts
-var prefixStyle = style([atoms({
+var prefixStyle = gnistStyle([atoms({
 	color: "text-variant",
 	paddingRight: "xxs"
 })]);
-var suffixStyle = style([atoms({
+var suffixStyle = gnistStyle([atoms({
 	color: "text-variant",
 	paddingLeft: "xxs"
 })]);

package/dist/components/inputs/textFields/textArea.css.cjs

@@ -2,7 +2,7 @@
 require("../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
 //#region src/components/inputs/textFields/textArea.css.ts
-var wordCounterStyle = (0, require("@vanilla-extract/recipes").recipe)({
+var wordCounterStyle = (0, require("@gnist/themes/layers.css.js").gnistRecipe)({
 	base: (0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		backgroundColor: "surface",

package/dist/components/inputs/textFields/textArea.css.js

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 //#region src/components/inputs/textFields/textArea.css.ts
-var wordCounterStyle = recipe({
+var wordCounterStyle = gnistRecipe({
 	base: atoms({
 		display: "flex",
 		backgroundColor: "surface",

package/dist/components/progress/spinner.css.cjs

@@ -1,6 +1,7 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/progress/spinner.css.ts
 var rotate360 = (0, _vanilla_extract_css.keyframes)({
@@ -11,7 +12,7 @@ var fadeIn = (0, _vanilla_extract_css.keyframes)({
 	"0%": { opacity: 0 },
 	"100%": { opacity: 1 }
 });
-var spinnerRecipe = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({ borderWidth: "medium" }), {
+var spinnerRecipe = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({ borderWidth: "medium" }), {
 	position: "absolute",
 	borderRadius: "50%",
 	background: "transparent",

package/dist/components/progress/spinner.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.css.d.ts","sourceRoot":"","sources":["../../../src/components/progress/spinner.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,QAYxB,CAAC"}
+{"version":3,"file":"spinner.css.d.ts","sourceRoot":"","sources":["../../../src/components/progress/spinner.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,QAYxB,CAAC"}

package/dist/components/progress/spinner.css.js

@@ -1,6 +1,7 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { keyframes, style } from "@vanilla-extract/css";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
+import { keyframes } from "@vanilla-extract/css";
 //#region src/components/progress/spinner.css.ts
 var rotate360 = keyframes({
 	"0%": { transform: "rotate(0deg)" },
@@ -10,7 +11,7 @@ var fadeIn = keyframes({
 	"0%": { opacity: 0 },
 	"100%": { opacity: 1 }
 });
-var spinnerRecipe = style([atoms({ borderWidth: "medium" }), {
+var spinnerRecipe = gnistStyle([atoms({ borderWidth: "medium" }), {
 	position: "absolute",
 	borderRadius: "50%",
 	background: "transparent",

package/dist/components/surfaces/accordion/accordion.css.cjs

@@ -1,11 +1,11 @@
 "use client";
 require("../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/surfaces/accordion/accordion.css.ts
-var accordionRecipe = (0, _vanilla_extract_recipes.recipe)({
+var accordionRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({ color: "on-background" })],
 	variants: {
 		withDivider: { true: { borderBottom: `${_gnist_themes_tokens_css_js.tokens.stroke.small} solid ${_gnist_themes_tokens_css_js.tokens.color.outline}` } },
@@ -15,7 +15,7 @@ var accordionRecipe = (0, _vanilla_extract_recipes.recipe)({
 		} }
 	}
 });
-var head = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var head = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	justifyContent: "space-between",
 	alignItems: "center",
@@ -26,8 +26,8 @@ var head = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms
 	position: "relative",
 	selectors: { "&:focus": { outline: `${_gnist_themes_tokens_css_js.tokens.stroke.medium} solid ${_gnist_themes_tokens_css_js.tokens.color.interactive}` } }
 }]);
-var heading = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({ typography: "heading3-small" }), { fontSize: _gnist_themes_tokens_css_js.tokens.type.medium.body.fontSize }]);
-var headBackground = (0, _vanilla_extract_css.style)({
+var heading = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({ typography: "heading3-small" }), { fontSize: _gnist_themes_tokens_css_js.tokens.type.medium.body.fontSize }]);
+var headBackground = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	position: "absolute",
 	width: "100%",
 	height: "100%",
@@ -37,7 +37,7 @@ var headBackground = (0, _vanilla_extract_css.style)({
 		opacity: _gnist_themes_tokens_css_js.tokens.opacity["on-hover"]
 	} }
 });
-var body = (0, _vanilla_extract_css.style)({ padding: `${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.s}` });
+var body = (0, _gnist_themes_layers_css_js.gnistStyle)({ padding: `${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.xxs} ${_gnist_themes_tokens_css_js.tokens.spacing.s}` });
 (0, _vanilla_extract_css.globalStyle)("summary::-webkit-details-marker", { display: "none" });
 (0, _vanilla_extract_css.globalStyle)(":not(details[open]) summary svg", {
 	transform: "rotate(0deg)",

package/dist/components/surfaces/accordion/accordion.css.js

@@ -1,10 +1,10 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { globalStyle, style } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css";
 //#region src/components/surfaces/accordion/accordion.css.ts
-var accordionRecipe = recipe({
+var accordionRecipe = gnistRecipe({
 	base: [atoms({ color: "on-background" })],
 	variants: {
 		withDivider: { true: { borderBottom: `${tokens.stroke.small} solid ${tokens.color.outline}` } },
@@ -14,7 +14,7 @@ var accordionRecipe = recipe({
 		} }
 	}
 });
-var head = style([atoms({
+var head = gnistStyle([atoms({
 	display: "flex",
 	justifyContent: "space-between",
 	alignItems: "center",
@@ -25,8 +25,8 @@ var head = style([atoms({
 	position: "relative",
 	selectors: { "&:focus": { outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}` } }
 }]);
-var heading = style([atoms({ typography: "heading3-small" }), { fontSize: tokens.type.medium.body.fontSize }]);
-var headBackground = style({
+var heading = gnistStyle([atoms({ typography: "heading3-small" }), { fontSize: tokens.type.medium.body.fontSize }]);
+var headBackground = gnistStyle({
 	position: "absolute",
 	width: "100%",
 	height: "100%",
@@ -36,7 +36,7 @@ var headBackground = style({
 		opacity: tokens.opacity["on-hover"]
 	} }
 });
-var body = style({ padding: `${tokens.spacing.xxs} ${tokens.spacing.xxs} ${tokens.spacing.s}` });
+var body = gnistStyle({ padding: `${tokens.spacing.xxs} ${tokens.spacing.xxs} ${tokens.spacing.s}` });
 globalStyle("summary::-webkit-details-marker", { display: "none" });
 globalStyle(":not(details[open]) summary svg", {
 	transform: "rotate(0deg)",

package/dist/components/surfaces/cards/cards.css.cjs

@@ -3,13 +3,12 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_animations_css = require("../../../styles/animations.css.cjs");
 const require_states_css = require("../../../styles/states.css.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
-let _vanilla_extract_css = require("@vanilla-extract/css");
 let _gnist_themes_typography_css_js = require("@gnist/themes/typography.css.js");
 let _gnist_themes_colors_css_js = require("@gnist/themes/colors.css.js");
 //#region src/components/surfaces/cards/cards.css.ts
-var cardsBase = (0, _vanilla_extract_css.style)([
+var cardsBase = (0, _gnist_themes_layers_css_js.gnistStyle)([
 	(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "block",
 		boxShadow: "low",
@@ -22,7 +21,7 @@ var cardsBase = (0, _vanilla_extract_css.style)([
 		textDecoration: "none"
 	}
 ]);
-var actionLayers = (0, _vanilla_extract_css.style)([
+var actionLayers = (0, _gnist_themes_layers_css_js.gnistStyle)([
 	require_animations_css.clickAnimation,
 	require_states_css.focusStyle,
 	require_states_css.stateLayers({
@@ -32,7 +31,7 @@ var actionLayers = (0, _vanilla_extract_css.style)([
 		setFocusState: true
 	})
 ]);
-var cardsRecipe = (0, _vanilla_extract_recipes.recipe)({
+var cardsRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [cardsBase],
 	variants: {
 		density: {

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

@@ -1 +1 @@
-{"version":3,"file":"cards.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/cards.css.ts"],"names":[],"mappings":"AAqCA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDtB,CAAC"}
+{"version":3,"file":"cards.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/cards.css.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDtB,CAAC"}

package/dist/components/surfaces/cards/cards.css.js

@@ -2,13 +2,12 @@
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { style } from "@vanilla-extract/css";
 import { responsiveTypography } from "@gnist/themes/typography.css.js";
 import { boxColors } from "@gnist/themes/colors.css.js";
 //#region src/components/surfaces/cards/cards.css.ts
-var cardsBase = style([
+var cardsBase = gnistStyle([
 	atoms({
 		display: "block",
 		boxShadow: "low",
@@ -21,7 +20,7 @@ var cardsBase = style([
 		textDecoration: "none"
 	}
 ]);
-var actionLayers = style([
+var actionLayers = gnistStyle([
 	clickAnimation,
 	focusStyle,
 	stateLayers({
@@ -31,7 +30,7 @@ var actionLayers = style([
 		setFocusState: true
 	})
 ]);
-var cardsRecipe = recipe({
+var cardsRecipe = gnistRecipe({
 	base: [cardsBase],
 	variants: {
 		density: {

package/dist/components/surfaces/cards/checkboxCard.css.cjs

@@ -1,10 +1,10 @@
 "use client";
 require("../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 //#region src/components/surfaces/cards/checkboxCard.css.ts
-var StyledCardRecipe = (0, _vanilla_extract_recipes.recipe)({
+var StyledCardRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		flexDirection: "column"

package/dist/components/surfaces/cards/checkboxCard.css.js

@@ -1,9 +1,9 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 //#region src/components/surfaces/cards/checkboxCard.css.ts
-var StyledCardRecipe = recipe({
+var StyledCardRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		flexDirection: "column"

package/dist/components/surfaces/cards/internal/SelectionCard.css.cjs

@@ -1,9 +1,9 @@
 "use client";
 require("../../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 //#region src/components/surfaces/cards/internal/SelectionCard.css.ts
-var cardDescription = (0, _vanilla_extract_recipes.recipe)({
+var cardDescription = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({ display: "block" })],
 	variants: { density: {
 		default: (0, _gnist_themes_atoms_css_js.atoms)({
@@ -17,7 +17,7 @@ var cardDescription = (0, _vanilla_extract_recipes.recipe)({
 	} },
 	defaultVariants: { density: "default" }
 });
-var SelectionControlSkeletonRecipe = (0, _vanilla_extract_recipes.recipe)({
+var SelectionControlSkeletonRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		height: "s",
 		width: "s",

package/dist/components/surfaces/cards/internal/SelectionCard.css.js

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe } from "@gnist/themes/layers.css.js";
 //#region src/components/surfaces/cards/internal/SelectionCard.css.ts
-var cardDescription = recipe({
+var cardDescription = gnistRecipe({
 	base: [atoms({ display: "block" })],
 	variants: { density: {
 		default: atoms({
@@ -16,7 +16,7 @@ var cardDescription = recipe({
 	} },
 	defaultVariants: { density: "default" }
 });
-var SelectionControlSkeletonRecipe = recipe({
+var SelectionControlSkeletonRecipe = gnistRecipe({
 	base: [atoms({
 		height: "s",
 		width: "s",

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

@@ -17,6 +17,7 @@ let react_dom = require("react-dom");
 var hasScroll = (size, height) => {
 	switch (size) {
 		case "fullscreen": return true;
+		case "x-large":
 		case "large": return height > 654;
 		case "medium": return height > 487;
 		default: return height > 271;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKH,UAAU,EAIb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACnC;AAeD;;;;;;;;;;;GAWG;AAEH,wBAAgB,KAAK,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,WAAW,EACX,IAAe,EACf,aAAa,EACb,eAAe,EACf,MAAM,EACN,eAAsC,EACtC,GAAG,EACH,SAAS,GACZ,EAAE,UAAU,4BAmIZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKH,UAAU,EAIb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACnC;AAgBD;;;;;;;;;;;GAWG;AAEH,wBAAgB,KAAK,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,WAAW,EACX,IAAe,EACf,aAAa,EACb,eAAe,EACf,MAAM,EACN,eAAsC,EACtC,GAAG,EACH,SAAS,GACZ,EAAE,UAAU,4BAmIZ"}

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

@@ -15,6 +15,7 @@ import { createPortal } from "react-dom";
 var hasScroll = (size, height) => {
 	switch (size) {
 		case "fullscreen": return true;
+		case "x-large":
 		case "large": return height > 654;
 		case "medium": return height > 487;
 		default: return height > 271;

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

@@ -1,12 +1,12 @@
 "use client";
 require("../../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
-let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/surfaces/modal/modal.css.ts
-var backdropStyle = (0, _vanilla_extract_css.style)({
+var backdropStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	zIndex: -1,
 	position: "fixed",
 	right: 0,
@@ -16,7 +16,7 @@ var backdropStyle = (0, _vanilla_extract_css.style)({
 	backgroundColor: "rgba(0, 0, 0, 0.5)",
 	WebkitTapHighlightColor: "transparent"
 });
-var modalStyle = (0, _vanilla_extract_css.style)({
+var modalStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	position: "fixed",
 	zIndex: 1300,
 	right: 0,
@@ -36,7 +36,7 @@ var modalStyle = (0, _vanilla_extract_css.style)({
 	margin: 0,
 	padding: 0
 });
-var modalHeadingStyle = (0, _vanilla_extract_css.style)({ fontWeight: _gnist_themes_tokens_css_js.tokens.typeface.weight.semibold });
+var modalHeadingStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({ fontWeight: _gnist_themes_tokens_css_js.tokens.typeface.weight.semibold });
 var dialogPadding = (size) => {
 	switch (size) {
 		case "fullscreen":
@@ -46,7 +46,7 @@ var dialogPadding = (size) => {
 		case "small": return _gnist_themes_tokens_css_js.tokens.spacing.m;
 	}
 };
-var dialogRecipe = (0, _vanilla_extract_recipes.recipe)({
+var dialogRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		color: "on-surface",
 		display: "flex",
@@ -93,12 +93,12 @@ var dialogRecipe = (0, _vanilla_extract_recipes.recipe)({
 	} },
 	defaultVariants: { size: "medium" }
 });
-var headerRowPaddingBySize = (size) => (0, _vanilla_extract_css.style)({
+var headerRowPaddingBySize = (size) => (0, _gnist_themes_layers_css_js.gnistStyle)({
 	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var headerRowRecipe = (0, _vanilla_extract_recipes.recipe)({
+var headerRowRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [{
 		position: "sticky",
 		top: 0,
@@ -128,7 +128,7 @@ var headerRowRecipe = (0, _vanilla_extract_recipes.recipe)({
 		style: { border: "none" }
 	}]
 });
-var contentContainerRecipe = (0, _vanilla_extract_recipes.recipe)({
+var contentContainerRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		flexDirection: "column"
@@ -159,37 +159,37 @@ var contentContainerRecipe = (0, _vanilla_extract_recipes.recipe)({
 				size: "x-large",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("x-large") }
+			style: { padding: dialogPadding("x-large") }
 		},
 		{
 			variants: {
 				size: "large",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("large") }
+			style: { padding: dialogPadding("large") }
 		},
 		{
 			variants: {
 				size: "medium",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("medium") }
+			style: { padding: dialogPadding("medium") }
 		},
 		{
 			variants: {
 				size: "small",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("small") }
+			style: { padding: dialogPadding("small") }
 		}
 	]
 });
-var actionRowPaddingBySize = (size) => (0, _vanilla_extract_css.style)({
-	paddingTop: (0, _vanilla_extract_css_utils.calc)(dialogPadding(size)).add(_gnist_themes_tokens_css_js.tokens.spacing.xxs).toString(),
+var actionRowPaddingBySize = (size) => (0, _gnist_themes_layers_css_js.gnistStyle)({
+	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var actionRowRecipe = (0, _vanilla_extract_recipes.recipe)({
+var actionRowRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		alignItems: "center",

package/dist/components/surfaces/modal/modal.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/modal.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAChB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,YAAY,CAAC;AAEnB,eAAO,MAAM,aAAa,QASxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAmBrB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAE5B,CAAC;AAeH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EvB,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;EAkC1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;EAiEjC,CAAC;AAWH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;EA0C1B,CAAC"}
+{"version":3,"file":"modal.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/modal.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAChB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,YAAY,CAAC;AAEnB,eAAO,MAAM,aAAa,QASxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAmBrB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAE5B,CAAC;AAeH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EvB,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;EAkC1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;EAiEjC,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;EA0C1B,CAAC"}

package/dist/components/surfaces/modal/modal.css.js

@@ -1,11 +1,11 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { calc } from "@vanilla-extract/css-utils";
-import { globalStyle, style } from "@vanilla-extract/css";
+import { globalStyle } from "@vanilla-extract/css";
 //#region src/components/surfaces/modal/modal.css.ts
-var backdropStyle = style({
+var backdropStyle = gnistStyle({
 	zIndex: -1,
 	position: "fixed",
 	right: 0,
@@ -15,7 +15,7 @@ var backdropStyle = style({
 	backgroundColor: "rgba(0, 0, 0, 0.5)",
 	WebkitTapHighlightColor: "transparent"
 });
-var modalStyle = style({
+var modalStyle = gnistStyle({
 	position: "fixed",
 	zIndex: 1300,
 	right: 0,
@@ -35,7 +35,7 @@ var modalStyle = style({
 	margin: 0,
 	padding: 0
 });
-var modalHeadingStyle = style({ fontWeight: tokens.typeface.weight.semibold });
+var modalHeadingStyle = gnistStyle({ fontWeight: tokens.typeface.weight.semibold });
 var dialogPadding = (size) => {
 	switch (size) {
 		case "fullscreen":
@@ -45,7 +45,7 @@ var dialogPadding = (size) => {
 		case "small": return tokens.spacing.m;
 	}
 };
-var dialogRecipe = recipe({
+var dialogRecipe = gnistRecipe({
 	base: [atoms({
 		color: "on-surface",
 		display: "flex",
@@ -92,12 +92,12 @@ var dialogRecipe = recipe({
 	} },
 	defaultVariants: { size: "medium" }
 });
-var headerRowPaddingBySize = (size) => style({
+var headerRowPaddingBySize = (size) => gnistStyle({
 	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var headerRowRecipe = recipe({
+var headerRowRecipe = gnistRecipe({
 	base: [{
 		position: "sticky",
 		top: 0,
@@ -127,7 +127,7 @@ var headerRowRecipe = recipe({
 		style: { border: "none" }
 	}]
 });
-var contentContainerRecipe = recipe({
+var contentContainerRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		flexDirection: "column"
@@ -158,37 +158,37 @@ var contentContainerRecipe = recipe({
 				size: "x-large",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("x-large") }
+			style: { padding: dialogPadding("x-large") }
 		},
 		{
 			variants: {
 				size: "large",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("large") }
+			style: { padding: dialogPadding("large") }
 		},
 		{
 			variants: {
 				size: "medium",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("medium") }
+			style: { padding: dialogPadding("medium") }
 		},
 		{
 			variants: {
 				size: "small",
 				hasScroll: true
 			},
-			style: { paddingBottom: dialogPadding("small") }
+			style: { padding: dialogPadding("small") }
 		}
 	]
 });
-var actionRowPaddingBySize = (size) => style({
-	paddingTop: calc(dialogPadding(size)).add(tokens.spacing.xxs).toString(),
+var actionRowPaddingBySize = (size) => gnistStyle({
+	paddingTop: dialogPadding(size),
 	paddingRight: dialogPadding(size),
 	paddingLeft: dialogPadding(size)
 });
-var actionRowRecipe = recipe({
+var actionRowRecipe = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		alignItems: "center",

package/dist/foundation/iconography/Icon.css.cjs

@@ -1,15 +1,16 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
 let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/foundation/iconography/Icon.css.ts
 var svgHeight = (0, _vanilla_extract_css.createVar)();
 var svgWidth = (0, _vanilla_extract_css.createVar)();
-var iconContainer = (0, _vanilla_extract_css.style)([{ display: "inline-flex" }, (0, _gnist_themes_atoms_css_js.atoms)({
+var iconContainer = (0, _gnist_themes_layers_css_js.gnistStyle)([{ display: "inline-flex" }, (0, _gnist_themes_atoms_css_js.atoms)({
 	justifyContent: "center",
 	alignItems: "center"
 })]);
-var svg = (0, _vanilla_extract_css.style)({
+var svg = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	overflow: "visible",
 	height: svgHeight,
 	width: svgWidth,

package/dist/foundation/iconography/Icon.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.css.d.ts","sourceRoot":"","sources":["../../../src/foundation/iconography/Icon.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,oBAAc,CAAC;AACrC,eAAO,MAAM,QAAQ,oBAAc,CAAC;AAEpC,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,GAAG,QAKd,CAAC"}
+{"version":3,"file":"Icon.css.d.ts","sourceRoot":"","sources":["../../../src/foundation/iconography/Icon.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,oBAAc,CAAC;AACrC,eAAO,MAAM,QAAQ,oBAAc,CAAC;AAEpC,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,GAAG,QAKd,CAAC"}