@gnist/design-system 6.3.1 → 7.0.0-alpha.1

package/dist/components/actions/selectionControls/switch.css.js

@@ -1,34 +1,33 @@
 "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 { style } from "@vanilla-extract/css";
 //#region src/components/actions/selectionControls/switch.css.ts
-var focusContainer = style({
+var focusContainer = gnistStyle({
 	display: "inline-flex",
 	alignItems: "center",
 	position: "relative",
 	flexShrink: 0
 });
-var switchField = style({
+var switchField = gnistStyle({
 	display: "inline-flex",
 	flexDirection: "column",
 	gap: tokens.spacing.base
 });
-var switchRow = style({
+var switchRow = gnistStyle({
 	display: "inline-flex",
 	alignItems: "center",
 	gap: tokens.spacing.xxs
 });
-var switchLabelContent = style({
+var switchLabelContent = gnistStyle({
 	display: "inline-flex",
 	flexDirection: "column",
 	gap: tokens.spacing.base,
 	minWidth: 0
 });
-var SwitchRecipe = recipe({
-	base: [style([{
+var SwitchRecipe = gnistRecipe({
+	base: [gnistStyle([{
 		position: "relative",
 		display: "inline-flex",
 		alignItems: "center",
@@ -80,9 +79,9 @@ var SwitchRecipe = recipe({
 		})]
 	}]
 });
-var SwitchThumbRecipe = recipe({
+var SwitchThumbRecipe = gnistRecipe({
 	base: [
-		style({
+		gnistStyle({
 			position: "absolute",
 			top: "50%",
 			transform: "translateY(-50%)",
@@ -125,15 +124,15 @@ var SwitchThumbRecipe = recipe({
 		style: [atoms({ borderColor: "surface" })]
 	}]
 });
-var switchThumbIcon = style([{
+var switchThumbIcon = gnistStyle([{
 	display: "inline-flex",
 	alignItems: "center",
 	justifyContent: "center",
 	lineHeight: 0,
 	pointerEvents: "none"
 }, atoms({ color: "on-surface" })]);
-var SwitchLabelRecipe = recipe({
-	base: [style([{
+var SwitchLabelRecipe = gnistRecipe({
+	base: [gnistStyle([{
 		userSelect: "none",
 		fontSize: tokens.type.small.body.fontSize,
 		lineHeight: tokens.typeface.size.xl
@@ -143,6 +142,6 @@ var SwitchLabelRecipe = recipe({
 		false: {}
 	} }
 });
-var switchDescription = style([atoms({ color: "text-variant" })]);
+var switchDescription = gnistStyle([atoms({ color: "text-variant" })]);
 //#endregion
 export { SwitchLabelRecipe, SwitchRecipe, SwitchThumbRecipe, focusContainer, switchDescription, switchField, switchLabelContent, switchRow, switchThumbIcon };

package/dist/components/feedback/alerts/AlertBanner.css.cjs

@@ -1,15 +1,14 @@
 "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 _vanilla_extract_css = require("@vanilla-extract/css");
+let _gnist_themes_layers_css_js = require("@gnist/themes/layers.css.js");
 //#region src/components/feedback/alerts/AlertBanner.css.ts
 var boxColors = (colorName) => (0, _gnist_themes_atoms_css_js.atoms)({
 	backgroundColor: `${colorName}-container`,
 	color: `on-${colorName}-container`,
 	borderColor: `on-${colorName}-container`
 });
-var banner = (0, _vanilla_extract_recipes.recipe)({
+var banner = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [{ borderStyle: "solid" }, (0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		borderWidth: "small",
@@ -28,25 +27,25 @@ var banner = (0, _vanilla_extract_recipes.recipe)({
 		}
 	}
 });
-var icon = (0, _vanilla_extract_recipes.recipe)({ variants: { type: {
+var icon = (0, _gnist_themes_layers_css_js.gnistRecipe)({ variants: { type: {
 	success: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-success-container" }),
 	warning: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-warning-container" }),
 	error: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-error-container" }),
 	info: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-info-container" })
 } } });
-var mainContentContainer = (0, _vanilla_extract_recipes.recipe)({
+var mainContentContainer = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [{ flex: 1 }],
 	variants: { density: {
 		default: (0, _gnist_themes_atoms_css_js.atoms)({ marginLeft: "xs" }),
 		compact: (0, _gnist_themes_atoms_css_js.atoms)({ marginLeft: "xxs" })
 	} }
 });
-var bannerHeading = (0, _vanilla_extract_css.style)([{ float: "left" }, (0, _gnist_themes_atoms_css_js.atoms)({
+var bannerHeading = (0, _gnist_themes_layers_css_js.gnistStyle)([{ float: "left" }, (0, _gnist_themes_atoms_css_js.atoms)({
 	margin: "none",
 	typography: "heading3-small"
 })]);
-var closeButton = (0, _vanilla_extract_css.style)({ float: "right" });
-var messageContainer = (0, _vanilla_extract_css.style)({ clear: "left" });
+var closeButton = (0, _gnist_themes_layers_css_js.gnistStyle)({ float: "right" });
+var messageContainer = (0, _gnist_themes_layers_css_js.gnistStyle)({ clear: "left" });
 var actionButton = (0, _gnist_themes_atoms_css_js.atoms)({ marginTop: "xs" });
 //#endregion
 exports.actionButton = actionButton;

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

@@ -1 +1 @@
-{"version":3,"file":"AlertBanner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.css.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM;;;;;;;;;;;EAuBjB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;EASf,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAY/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAA4B,CAAC;AAErD,eAAO,MAAM,gBAAgB,QAA2B,CAAC;AAEzD,eAAO,MAAM,YAAY,QAA6B,CAAC"}
+{"version":3,"file":"AlertBanner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM;;;;;;;;;;;EAuBjB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;EASf,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;EAY/B,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAAiC,CAAC;AAE1D,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAE9D,eAAO,MAAM,YAAY,QAA6B,CAAC"}

package/dist/components/feedback/alerts/AlertBanner.css.js

@@ -1,14 +1,13 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { recipe } from "@vanilla-extract/recipes";
-import { style } from "@vanilla-extract/css";
+import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 //#region src/components/feedback/alerts/AlertBanner.css.ts
 var boxColors = (colorName) => atoms({
 	backgroundColor: `${colorName}-container`,
 	color: `on-${colorName}-container`,
 	borderColor: `on-${colorName}-container`
 });
-var banner = recipe({
+var banner = gnistRecipe({
 	base: [{ borderStyle: "solid" }, atoms({
 		display: "flex",
 		borderWidth: "small",
@@ -27,25 +26,25 @@ var banner = recipe({
 		}
 	}
 });
-var icon = recipe({ variants: { type: {
+var icon = gnistRecipe({ variants: { type: {
 	success: atoms({ color: "on-success-container" }),
 	warning: atoms({ color: "on-warning-container" }),
 	error: atoms({ color: "on-error-container" }),
 	info: atoms({ color: "on-info-container" })
 } } });
-var mainContentContainer = recipe({
+var mainContentContainer = gnistRecipe({
 	base: [{ flex: 1 }],
 	variants: { density: {
 		default: atoms({ marginLeft: "xs" }),
 		compact: atoms({ marginLeft: "xxs" })
 	} }
 });
-var bannerHeading = style([{ float: "left" }, atoms({
+var bannerHeading = gnistStyle([{ float: "left" }, atoms({
 	margin: "none",
 	typography: "heading3-small"
 })]);
-var closeButton = style({ float: "right" });
-var messageContainer = style({ clear: "left" });
+var closeButton = gnistStyle({ float: "right" });
+var messageContainer = gnistStyle({ clear: "left" });
 var actionButton = atoms({ marginTop: "xs" });
 //#endregion
 export { actionButton, banner, bannerHeading, closeButton, icon, mainContentContainer, messageContainer };

package/dist/components/feedback/loaders/loadingBar.css.cjs

@@ -1,10 +1,11 @@
 "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 _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/feedback/loaders/loadingBar.css.ts
-var loadingBarStyles = (0, _vanilla_extract_css.style)([{
+var loadingBarStyles = (0, _gnist_themes_layers_css_js.gnistStyle)([{
 	overflow: "hidden",
 	display: "flex",
 	backgroundColor: _gnist_themes_tokens_css_js.tokens.palette.neutral[20],
@@ -14,7 +15,7 @@ var loadingAnimation = (0, _vanilla_extract_css.keyframes)({
 	"0%": { width: "0%" },
 	"100%": { width: "100%" }
 });
-var loadingBar = (0, _vanilla_extract_css.style)([{
+var loadingBar = (0, _gnist_themes_layers_css_js.gnistStyle)([{
 	backgroundColor: _gnist_themes_tokens_css_js.tokens.palette.tertiary[40],
 	animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`
 }, (0, _gnist_themes_atoms_css_js.atoms)({ borderRadius: "medium" })]);

package/dist/components/feedback/loaders/loadingBar.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loadingBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingBar.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,QAU3B,CAAC;AAWH,eAAO,MAAM,UAAU,QAQrB,CAAC"}
+{"version":3,"file":"loadingBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingBar.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,QAU3B,CAAC;AAWH,eAAO,MAAM,UAAU,QAQrB,CAAC"}

package/dist/components/feedback/loaders/loadingBar.css.js

@@ -1,9 +1,10 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { keyframes, style } from "@vanilla-extract/css";
+import { keyframes } from "@vanilla-extract/css";
 //#region src/components/feedback/loaders/loadingBar.css.ts
-var loadingBarStyles = style([{
+var loadingBarStyles = gnistStyle([{
 	overflow: "hidden",
 	display: "flex",
 	backgroundColor: tokens.palette.neutral[20],
@@ -13,7 +14,7 @@ var loadingAnimation = keyframes({
 	"0%": { width: "0%" },
 	"100%": { width: "100%" }
 });
-var loadingBar = style([{
+var loadingBar = gnistStyle([{
 	backgroundColor: tokens.palette.tertiary[40],
 	animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`
 }, atoms({ borderRadius: "medium" })]);

package/dist/components/feedback/loaders/loadingSpinner.css.cjs

@@ -1,14 +1,14 @@
 "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 _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
-let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/feedback/loaders/loadingSpinner.css.ts
-var rotate360 = (0, _vanilla_extract_css.keyframes)({
+var rotate360 = (0, require("@vanilla-extract/css").keyframes)({
 	"0%": { transform: "rotate(0deg)" },
 	"100%": { transform: "rotate(360deg)" }
 });
-var loadingSpinnerStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var loadingSpinnerStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	borderRadius: "full",
 	width: "xxl",
 	height: "xxl"

package/dist/components/feedback/loaders/loadingSpinner.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loadingSpinner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingSpinner.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,QAW9B,CAAC"}
+{"version":3,"file":"loadingSpinner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingSpinner.css.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,mBAAmB,QAW9B,CAAC"}

package/dist/components/feedback/loaders/loadingSpinner.css.js

@@ -1,13 +1,14 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { keyframes, style } from "@vanilla-extract/css";
+import { keyframes } from "@vanilla-extract/css";
 //#region src/components/feedback/loaders/loadingSpinner.css.ts
 var rotate360 = keyframes({
 	"0%": { transform: "rotate(0deg)" },
 	"100%": { transform: "rotate(360deg)" }
 });
-var loadingSpinnerStyle = style([atoms({
+var loadingSpinnerStyle = gnistStyle([atoms({
 	borderRadius: "full",
 	width: "xxl",
 	height: "xxl"

package/dist/components/feedback/notifications/lozenge.css.cjs

@@ -1,7 +1,7 @@
 "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");
@@ -19,7 +19,7 @@ var getColors = (variant) => {
 	});
 };
 var largeBody = _gnist_themes_tokens_css_js.tokens.type.large.body;
-var lozengeRecipe = (0, _vanilla_extract_recipes.recipe)({
+var lozengeRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "inline-flex",
 		alignItems: "center",

package/dist/components/feedback/notifications/lozenge.css.js

@@ -1,6 +1,6 @@
 "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";
 import { calc } from "@vanilla-extract/css-utils";
 import { globalStyle } from "@vanilla-extract/css";
@@ -18,7 +18,7 @@ var getColors = (variant) => {
 	});
 };
 var largeBody = tokens.type.large.body;
-var lozengeRecipe = recipe({
+var lozengeRecipe = gnistRecipe({
 	base: [atoms({
 		display: "inline-flex",
 		alignItems: "center",

package/dist/components/feedback/progress/ProgressBar.css.cjs

@@ -1,21 +1,22 @@
 "use client";
 require("../../../_virtual/_rolldown/runtime.cjs");
+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/feedback/progress/ProgressBar.css.ts
-var progressBarStyles = (0, _vanilla_extract_css.style)({
+var progressBarStyles = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	overflow: "hidden",
 	display: "flex",
 	backgroundColor: _gnist_themes_tokens_css_js.tokens.color.outline,
 	width: "100%"
 });
-var progressBar = (0, _vanilla_extract_css.style)({ transition: "width 0.5s ease-in-out" });
+var progressBar = (0, _gnist_themes_layers_css_js.gnistStyle)({ transition: "width 0.5s ease-in-out" });
 var progressPercentage = (0, _vanilla_extract_css.createVar)();
 var progress = (0, _vanilla_extract_css.keyframes)({
 	from: { width: "0%" },
 	to: { width: progressPercentage }
 });
-var progressAnimation = (0, _vanilla_extract_css.style)({
+var progressAnimation = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	animationName: progress,
 	animationDuration: "1s",
 	animationTimingFunction: "ease-in-out",

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,oBAAc,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":"AAIA,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/feedback/progress/ProgressBar.css.js

@@ -1,16 +1,17 @@
 "use client";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { createVar, keyframes, style } from "@vanilla-extract/css";
+import { createVar, keyframes } from "@vanilla-extract/css";
 //#region src/components/feedback/progress/ProgressBar.css.ts
-var progressBarStyles = style({
+var progressBarStyles = gnistStyle({
 	overflow: "hidden",
 	display: "flex",
 	backgroundColor: tokens.color.outline,
 	width: "100%"
 });
-var progressBar = style({ transition: "width 0.5s ease-in-out" });
+var progressBar = gnistStyle({ transition: "width 0.5s ease-in-out" });
 var progressPercentage = createVar();
-var progressAnimation = style({
+var progressAnimation = gnistStyle({
 	animationName: keyframes({
 		from: { width: "0%" },
 		to: { width: progressPercentage }

package/dist/components/inputs/dropdowns/select.css.cjs

@@ -2,10 +2,10 @@
 require("../../../_virtual/_rolldown/runtime.cjs");
 const require_inputField_css = require("../shared-styles/inputField.css.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 _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
-let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/inputs/dropdowns/select.css.ts
-var listBoxStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var listBoxStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	marginTop: "xxs",
 	display: "flex",
 	flexDirection: "column",
@@ -21,12 +21,12 @@ var listBoxStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_
 	height: "fit-content",
 	overflow: "auto"
 }]);
-var popUpStyle = (0, _vanilla_extract_css.style)({
+var popUpStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	zIndex: 1400,
 	minWidth: "280px",
 	maxWidth: "100%"
 });
-var selectStyle = (0, _vanilla_extract_css.style)([require_inputField_css.inputFieldStyle, {
+var selectStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([require_inputField_css.inputFieldStyle, {
 	overflow: "hidden",
 	textOverflow: "ellipsis",
 	whiteSpace: "nowrap",
@@ -37,7 +37,7 @@ var selectStyle = (0, _vanilla_extract_css.style)([require_inputField_css.inputF
 	paddingBottom: "inherit",
 	boxSizing: "border-box"
 }]);
-var optionStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var optionStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	position: "relative",
 	height: "xl",
@@ -49,12 +49,12 @@ var optionStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_j
 	outline: "none",
 	selectors: { "&:focus,&:focus-visible": { outline: `${_gnist_themes_tokens_css_js.tokens.stroke.medium} solid ${_gnist_themes_tokens_css_js.tokens.color.interactive}` } }
 }]);
-var singleOptionStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var singleOptionStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between"
 }), { width: "100%" }]);
-var optionBackground = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var optionBackground = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	position: "absolute",
 	backgroundColor: "on-surface",

package/dist/components/inputs/dropdowns/select.css.js

@@ -1,10 +1,10 @@
 "use client";
 import { inputFieldStyle } from "../shared-styles/inputField.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
+import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { style } from "@vanilla-extract/css";
 //#region src/components/inputs/dropdowns/select.css.ts
-var listBoxStyle = style([atoms({
+var listBoxStyle = gnistStyle([atoms({
 	marginTop: "xxs",
 	display: "flex",
 	flexDirection: "column",
@@ -20,12 +20,12 @@ var listBoxStyle = style([atoms({
 	height: "fit-content",
 	overflow: "auto"
 }]);
-var popUpStyle = style({
+var popUpStyle = gnistStyle({
 	zIndex: 1400,
 	minWidth: "280px",
 	maxWidth: "100%"
 });
-var selectStyle = style([inputFieldStyle, {
+var selectStyle = gnistStyle([inputFieldStyle, {
 	overflow: "hidden",
 	textOverflow: "ellipsis",
 	whiteSpace: "nowrap",
@@ -36,7 +36,7 @@ var selectStyle = style([inputFieldStyle, {
 	paddingBottom: "inherit",
 	boxSizing: "border-box"
 }]);
-var optionStyle = style([atoms({
+var optionStyle = gnistStyle([atoms({
 	display: "flex",
 	position: "relative",
 	height: "xl",
@@ -48,12 +48,12 @@ var optionStyle = style([atoms({
 	outline: "none",
 	selectors: { "&:focus,&:focus-visible": { outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}` } }
 }]);
-var singleOptionStyle = style([atoms({
+var singleOptionStyle = gnistStyle([atoms({
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between"
 }), { width: "100%" }]);
-var optionBackground = style([atoms({
+var optionBackground = gnistStyle([atoms({
 	display: "flex",
 	position: "absolute",
 	backgroundColor: "on-surface",

package/dist/components/inputs/pickers/Calendar.css.cjs

@@ -2,12 +2,12 @@
 require("../../../_virtual/_rolldown/runtime.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_utils = require("@vanilla-extract/css-utils");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/inputs/pickers/Calendar.css.ts
-var containerStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var containerStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	flexDirection: "column",
 	padding: "s",
@@ -16,12 +16,12 @@ var containerStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_cs
 	boxShadow: "low",
 	backgroundColor: "surface"
 }), { width: "fit-content" }]);
-var gridStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var gridStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	flexDirection: "column",
 	gap: "xs"
 }), { width: "fit-content" }]);
-var rowStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var rowStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	gap: "base",
 	height: "xl"
 }), {
@@ -35,8 +35,8 @@ var selectMonthRow = (0, _gnist_themes_atoms_css_js.atoms)({
 	justifyContent: "space-between",
 	typography: "body-medium"
 });
-var headerCell = (0, _vanilla_extract_css.style)([{ textAlign: "center" }, (0, _gnist_themes_atoms_css_js.atoms)({ typography: "detail-large" })]);
-var cellRecipe = (0, _vanilla_extract_recipes.recipe)({
+var headerCell = (0, _gnist_themes_layers_css_js.gnistStyle)([{ textAlign: "center" }, (0, _gnist_themes_atoms_css_js.atoms)({ typography: "detail-large" })]);
+var cellRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [
 		(0, _gnist_themes_atoms_css_js.atoms)({
 			typography: "body-large",
@@ -96,8 +96,8 @@ var buttonRow = (0, _gnist_themes_atoms_css_js.atoms)({
 	display: "flex",
 	gap: "base"
 });
-var arrowButton = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({ color: "on-background" })]);
-var cellSkeletonStyle = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({
+var arrowButton = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({ color: "on-background" })]);
+var cellSkeletonStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({
 	padding: "base",
 	borderRadius: "picker"
 }), { boxSizing: "border-box" }]);

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,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"}
+{"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,QAAkD,CAAC;AAE3E,eAAO,MAAM,iBAAiB,QAQ5B,CAAC"}

package/dist/components/inputs/pickers/Calendar.css.js

@@ -1,12 +1,12 @@
 "use client";
 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 { calc } from "@vanilla-extract/css-utils";
-import { createVar, globalStyle, style } from "@vanilla-extract/css";
+import { createVar, globalStyle } from "@vanilla-extract/css";
 //#region src/components/inputs/pickers/Calendar.css.ts
-var containerStyle = style([atoms({
+var containerStyle = gnistStyle([atoms({
 	display: "flex",
 	flexDirection: "column",
 	padding: "s",
@@ -15,12 +15,12 @@ var containerStyle = style([atoms({
 	boxShadow: "low",
 	backgroundColor: "surface"
 }), { width: "fit-content" }]);
-var gridStyle = style([atoms({
+var gridStyle = gnistStyle([atoms({
 	display: "flex",
 	flexDirection: "column",
 	gap: "xs"
 }), { width: "fit-content" }]);
-var rowStyle = style([atoms({
+var rowStyle = gnistStyle([atoms({
 	gap: "base",
 	height: "xl"
 }), {
@@ -34,8 +34,8 @@ var selectMonthRow = atoms({
 	justifyContent: "space-between",
 	typography: "body-medium"
 });
-var headerCell = style([{ textAlign: "center" }, atoms({ typography: "detail-large" })]);
-var cellRecipe = recipe({
+var headerCell = gnistStyle([{ textAlign: "center" }, atoms({ typography: "detail-large" })]);
+var cellRecipe = gnistRecipe({
 	base: [
 		atoms({
 			typography: "body-large",
@@ -95,8 +95,8 @@ var buttonRow = atoms({
 	display: "flex",
 	gap: "base"
 });
-var arrowButton = style([atoms({ color: "on-background" })]);
-var cellSkeletonStyle = style([atoms({
+var arrowButton = gnistStyle([atoms({ color: "on-background" })]);
+var cellSkeletonStyle = gnistStyle([atoms({
 	padding: "base",
 	borderRadius: "picker"
 }), { boxSizing: "border-box" }]);

package/dist/components/inputs/shared-styles/iconButtonOverlay.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/inputs/shared-styles/iconButtonOverlay.css.ts
-var iconButtonOverlayRecipe = (0, _vanilla_extract_recipes.recipe)({
+var iconButtonOverlayRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		width: "l",
 		height: "l"

package/dist/components/inputs/shared-styles/iconButtonOverlay.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/inputs/shared-styles/iconButtonOverlay.css.ts
-var iconButtonOverlayRecipe = recipe({
+var iconButtonOverlayRecipe = gnistRecipe({
 	base: [atoms({
 		width: "l",
 		height: "l"