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

package/CHANGELOG.md

@@ -3,21 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.3.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.3.0...@gnist/design-system@6.3.1) (2026-06-01)
+## [7.0.0-alpha.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.3.1...@gnist/design-system@7.0.0-alpha.1) (2026-06-03)
+
+### ⚠ BREAKING CHANGES
+
+* **design-system:** Design system styles are now emitted inside @layer gnist. Consumers should declare @layer base, gnist; at the top of their main CSS file and wrap global/reset styles in @layer base { ... } to avoid unintentionally overriding design system styles. Unlayered styles will now override design system styles by design.
+
+### Features
+
+* **design-system:** wrap gnist css in [@layer](https://github.com/layer) gnist ([168f0af](https://github.com/mollerdigital/design-system-design-system/commit/168f0af6ac367c2189060edf030f9a76059164cc))
+## [7.0.0-alpha.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.3.0-alpha.0...@gnist/design-system@7.0.0-alpha.0) (2026-05-21)
+
+### ⚠ BREAKING CHANGES
+
+* **design-system:** Bumping major version.
+
+### Features
+
+* **design-system:** trigger major version bump ([bbec7c0](https://github.com/mollerdigital/design-system-design-system/commit/bbec7c025f9bbc73e66ac87a08b844a066abebb5))
+* Wrap gnist css in [@layer](https://github.com/layer) gnist { ... } ([c513601](https://github.com/mollerdigital/design-system-design-system/commit/c513601b4831e7d02f08028cdf1f0cd4c42f60bc))
 
 ### Bug Fixes
 
-* skeletons should be treated as decorative, so adding aria-hidden ([e66ae17](https://github.com/mollerdigital/design-system-design-system/commit/e66ae17da1cf61309f0ffd695a7478f1e4568c26))
+* lint ([1c19f04](https://github.com/mollerdigital/design-system-design-system/commit/1c19f04a0aae90d887e3f26f4c31321bea84dced))
+
+## [7.0.0-alpha.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.3.0-alpha.0...@gnist/design-system@7.0.0-alpha.0) (2026-05-21)
 
-## [6.3.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.2.3...@gnist/design-system@6.3.0) (2026-05-27)
+### ⚠ BREAKING CHANGES
+
+* **design-system:** Bumping major version.
 
 ### Features
 
-* add colorMode to Logo, making it possible to use certain logos on both dark and light mode ([fc47632](https://github.com/mollerdigital/design-system-design-system/commit/fc476323fa78159eb7e6da0c9cb50d244e1ca0d8))
+* **design-system:** trigger major version bump ([bbec7c0](https://github.com/mollerdigital/design-system-design-system/commit/bbec7c025f9bbc73e66ac87a08b844a066abebb5))
 
-## [6.2.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.2.2...@gnist/design-system@6.2.3) (2026-05-26)
+## [6.3.0-alpha.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.2.2...@gnist/design-system@6.3.0-alpha.0) (2026-05-21)
 
-**Note:** Version bump only for package @gnist/design-system
+### Features
+
+* Wrap gnist css in [@layer](https://github.com/layer) gnist { ... } ([c513601](https://github.com/mollerdigital/design-system-design-system/commit/c513601b4831e7d02f08028cdf1f0cd4c42f60bc))
+
+### Bug Fixes
+
+* lint ([1c19f04](https://github.com/mollerdigital/design-system-design-system/commit/1c19f04a0aae90d887e3f26f4c31321bea84dced))
 
 ## [6.2.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.2.1...@gnist/design-system@6.2.2) (2026-05-21)
 

package/README.md

@@ -1,5 +1,6 @@
 # Multi-brand React component library for Møller
 
+
 `@gnist/design-system` is a React component library containing reusable, multi-brand GUI building blocks for applications in the Møller ecosystem.
 
 For instructions on developing components, see the [Development docs](#development).

package/dist/building-blocks/inputs/internal/textBelowInput.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/building-blocks/inputs/internal/textBelowInput.css.ts
-var textBelowInputRecipe = (0, require("@vanilla-extract/recipes").recipe)({
+var textBelowInputRecipe = (0, require("@gnist/themes/layers.css.js").gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		typography: "detail-small",
 		paddingTop: "base",

package/dist/building-blocks/inputs/internal/textBelowInput.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/building-blocks/inputs/internal/textBelowInput.css.ts
-var textBelowInputRecipe = recipe({
+var textBelowInputRecipe = gnistRecipe({
 	base: [atoms({
 		typography: "detail-small",
 		paddingTop: "base",

package/dist/components/actions/buttons/styles.css.cjs

@@ -3,12 +3,11 @@ 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_utils = require("@vanilla-extract/css-utils");
-let _vanilla_extract_css = require("@vanilla-extract/css");
 //#region src/components/actions/buttons/styles.css.ts
-var buttonBase = (0, _vanilla_extract_css.style)([
+var buttonBase = (0, _gnist_themes_layers_css_js.gnistStyle)([
 	require_states_css.focusStyle,
 	require_animations_css.clickAnimation,
 	(0, _gnist_themes_atoms_css_js.atoms)({
@@ -34,12 +33,12 @@ var getColors = (variant) => (0, _gnist_themes_atoms_css_js.atoms)({
 	backgroundColor: variant,
 	color: `on-${variant}`
 });
-var textAndIconButton = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({ height: "l" }), {
+var textAndIconButton = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({ height: "l" }), {
 	color: "inherit",
 	minWidth: 0,
 	flexShrink: 0
 }]);
-var buttonRecipe = (0, _vanilla_extract_recipes.recipe)({
+var buttonRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [buttonBase],
 	variants: {
 		isLoading: {
@@ -94,7 +93,7 @@ var buttonRecipe = (0, _vanilla_extract_recipes.recipe)({
 	}],
 	defaultVariants: { isLoading: false }
 });
-var boxedButton = (0, _vanilla_extract_recipes.recipe)({
+var boxedButton = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: (0, _gnist_themes_atoms_css_js.atoms)({ columnGap: "base" }),
 	variants: { density: {
 		default: (0, _gnist_themes_atoms_css_js.atoms)({
@@ -108,13 +107,13 @@ var boxedButton = (0, _vanilla_extract_recipes.recipe)({
 	} },
 	defaultVariants: { density: "default" }
 });
-var iconButton = (0, _vanilla_extract_recipes.recipe)({ variants: { showLabel: {
+var iconButton = (0, _gnist_themes_layers_css_js.gnistRecipe)({ variants: { showLabel: {
 	left: { paddingLeft: _gnist_themes_tokens_css_js.tokens.spacing.base },
 	right: { paddingRight: _gnist_themes_tokens_css_js.tokens.spacing.base },
 	none: ""
 } } });
-var actionText = (0, _vanilla_extract_css.style)({ fontWeight: _gnist_themes_tokens_css_js.tokens.typeface.weight.semibold });
-var textButtonText = (0, _vanilla_extract_recipes.recipe)({
+var actionText = (0, _gnist_themes_layers_css_js.gnistStyle)({ fontWeight: _gnist_themes_tokens_css_js.tokens.typeface.weight.semibold });
+var textButtonText = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: {
 		borderBottomStyle: "solid",
 		borderBottomWidth: _gnist_themes_tokens_css_js.tokens.stroke.medium

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

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/styles.css.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAStB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;EAQrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EA0BzB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/styles.css.ts"],"names":[],"mappings":"AA6CA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAStB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;EAQrB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EA0BzB,CAAC"}

package/dist/components/actions/buttons/styles.css.js

@@ -2,12 +2,11 @@
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle } 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 { style } from "@vanilla-extract/css";
 //#region src/components/actions/buttons/styles.css.ts
-var buttonBase = style([
+var buttonBase = gnistStyle([
 	focusStyle,
 	clickAnimation,
 	atoms({
@@ -33,12 +32,12 @@ var getColors = (variant) => atoms({
 	backgroundColor: variant,
 	color: `on-${variant}`
 });
-var textAndIconButton = style([atoms({ height: "l" }), {
+var textAndIconButton = gnistStyle([atoms({ height: "l" }), {
 	color: "inherit",
 	minWidth: 0,
 	flexShrink: 0
 }]);
-var buttonRecipe = recipe({
+var buttonRecipe = gnistRecipe({
 	base: [buttonBase],
 	variants: {
 		isLoading: {
@@ -93,7 +92,7 @@ var buttonRecipe = recipe({
 	}],
 	defaultVariants: { isLoading: false }
 });
-var boxedButton = recipe({
+var boxedButton = gnistRecipe({
 	base: atoms({ columnGap: "base" }),
 	variants: { density: {
 		default: atoms({
@@ -107,13 +106,13 @@ var boxedButton = recipe({
 	} },
 	defaultVariants: { density: "default" }
 });
-var iconButton = recipe({ variants: { showLabel: {
+var iconButton = gnistRecipe({ variants: { showLabel: {
 	left: { paddingLeft: tokens.spacing.base },
 	right: { paddingRight: tokens.spacing.base },
 	none: ""
 } } });
-var actionText = style({ fontWeight: tokens.typeface.weight.semibold });
-var textButtonText = recipe({
+var actionText = gnistStyle({ fontWeight: tokens.typeface.weight.semibold });
+var textButtonText = gnistRecipe({
 	base: {
 		borderBottomStyle: "solid",
 		borderBottomWidth: tokens.stroke.medium

package/dist/components/actions/chips/styles.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_utils = require("@vanilla-extract/css-utils");
 //#region src/components/actions/chips/styles.css.ts
-var chipBase = (0, require("@vanilla-extract/css").style)({
+var chipBase = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	display: "flex",
 	gap: _gnist_themes_tokens_css_js.tokens.spacing.base,
 	textWrap: "nowrap",
@@ -19,7 +19,7 @@ var chipBase = (0, require("@vanilla-extract/css").style)({
 	minHeight: _gnist_themes_tokens_css_js.tokens.size.xl,
 	justifyContent: "center"
 });
-var chipRecipe = (0, _vanilla_extract_recipes.recipe)({
+var chipRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: chipBase,
 	variants: {
 		selected: {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/styles.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/styles.css.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,CAAC"}

package/dist/components/actions/chips/styles.css.js

@@ -1,11 +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 { calc } from "@vanilla-extract/css-utils";
-import { style } from "@vanilla-extract/css";
-var chipRecipe = recipe({
-	base: style({
+var chipRecipe = gnistRecipe({
+	base: gnistStyle({
 		display: "flex",
 		gap: tokens.spacing.base,
 		textWrap: "nowrap",

package/dist/components/actions/selectionControls/checkbox.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/actions/selectionControls/checkbox.css.ts
-var CheckboxRecipe = (0, _vanilla_extract_recipes.recipe)({
+var CheckboxRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [{
 		borderStyle: "solid",
 		boxSizing: "border-box"
@@ -63,7 +63,7 @@ var CheckboxRecipe = (0, _vanilla_extract_recipes.recipe)({
 		}
 	]
 });
-var checkbox = (0, _vanilla_extract_recipes.recipe)({
+var checkbox = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({ color: "surface" }), {
 		display: "flex",
 		alignItems: "center"

package/dist/components/actions/selectionControls/checkbox.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/actions/selectionControls/checkbox.css.ts
-var CheckboxRecipe = recipe({
+var CheckboxRecipe = gnistRecipe({
 	base: [{
 		borderStyle: "solid",
 		boxSizing: "border-box"
@@ -62,7 +62,7 @@ var CheckboxRecipe = recipe({
 		}
 	]
 });
-var checkbox = recipe({
+var checkbox = gnistRecipe({
 	base: [atoms({ color: "surface" }), {
 		display: "flex",
 		alignItems: "center"

package/dist/components/actions/selectionControls/radiobutton.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/actions/selectionControls/radiobutton.css.ts
-var RadioButtonRecipe = (0, _vanilla_extract_recipes.recipe)({
+var RadioButtonRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		height: "s",
 		width: "s"
@@ -36,7 +36,7 @@ var RadioButtonRecipe = (0, _vanilla_extract_recipes.recipe)({
 		}
 	}
 });
-var CheckedCircleRecipe = (0, _vanilla_extract_recipes.recipe)({
+var CheckedCircleRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "inline",
 		borderRadius: "full",

package/dist/components/actions/selectionControls/radiobutton.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/actions/selectionControls/radiobutton.css.ts
-var RadioButtonRecipe = recipe({
+var RadioButtonRecipe = gnistRecipe({
 	base: [atoms({
 		height: "s",
 		width: "s"
@@ -35,7 +35,7 @@ var RadioButtonRecipe = recipe({
 		}
 	}
 });
-var CheckedCircleRecipe = recipe({
+var CheckedCircleRecipe = gnistRecipe({
 	base: [atoms({
 		display: "inline",
 		borderRadius: "full",

package/dist/components/actions/selectionControls/radiogroup.css.cjs

@@ -1,16 +1,16 @@
 "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/actions/selectionControls/radiogroup.css.ts
-var fieldSetStyle = (0, require("@vanilla-extract/css").style)([{ border: "none" }, (0, _gnist_themes_atoms_css_js.atoms)({
+var fieldSetStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([{ border: "none" }, (0, _gnist_themes_atoms_css_js.atoms)({
 	padding: "none",
 	display: "flex",
 	flexDirection: "column",
 	gap: "base"
 })]);
 var legendStyle = (0, _gnist_themes_atoms_css_js.atoms)({ marginBottom: "base" });
-var radioContainerStyle = (0, _vanilla_extract_recipes.recipe)({
+var radioContainerStyle = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [(0, _gnist_themes_atoms_css_js.atoms)({
 		display: "flex",
 		gap: "xs"

package/dist/components/actions/selectionControls/radiogroup.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radiogroup.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiogroup.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAUxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAsB9B,CAAC"}
+{"version":3,"file":"radiogroup.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiogroup.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,QAUxB,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAsB9B,CAAC"}

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

@@ -1,16 +1,15 @@
 "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/actions/selectionControls/radiogroup.css.ts
-var fieldSetStyle = style([{ border: "none" }, atoms({
+var fieldSetStyle = gnistStyle([{ border: "none" }, atoms({
 	padding: "none",
 	display: "flex",
 	flexDirection: "column",
 	gap: "base"
 })]);
 var legendStyle = atoms({ marginBottom: "base" });
-var radioContainerStyle = recipe({
+var radioContainerStyle = gnistRecipe({
 	base: [atoms({
 		display: "flex",
 		gap: "xs"

package/dist/components/actions/selectionControls/shared.css.cjs

@@ -2,19 +2,18 @@
 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/actions/selectionControls/shared.css.ts
-var InputWrapper = (0, _vanilla_extract_css.style)({
+var InputWrapper = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	position: "relative",
 	display: "flex",
 	width: "fit-content",
 	height: "fit-content"
 });
-var LabelStyle = (0, _vanilla_extract_css.style)([{ alignSelf: "center" }]);
-var LabelRecipe = (0, _vanilla_extract_recipes.recipe)({
+var LabelStyle = (0, _gnist_themes_layers_css_js.gnistStyle)([{ alignSelf: "center" }]);
+var LabelRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [
 		{
 			display: "flex",
@@ -30,7 +29,7 @@ var LabelRecipe = (0, _vanilla_extract_recipes.recipe)({
 	],
 	variants: { disabled: { true: [(0, _gnist_themes_atoms_css_js.atoms)({ color: "on-disabled" }), { cursor: "not-allowed" }] } }
 });
-var InputStyleRecipe = (0, _vanilla_extract_recipes.recipe)({
+var InputStyleRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [{
 		position: "absolute",
 		width: "100%",
@@ -45,7 +44,7 @@ var InputStyleRecipe = (0, _vanilla_extract_recipes.recipe)({
 	}, require_states_css.focusStyle],
 	variants: { disabled: { true: [{ cursor: "not-allowed" }] } }
 });
-var indentedDescriptionStyle = (0, _vanilla_extract_css.style)({ paddingLeft: _vanilla_extract_css_utils.calc.add(_gnist_themes_tokens_css_js.tokens.size.s, _vanilla_extract_css_utils.calc.multiply(_gnist_themes_tokens_css_js.tokens.spacing.base, 3)) });
+var indentedDescriptionStyle = (0, _gnist_themes_layers_css_js.gnistStyle)({ paddingLeft: _vanilla_extract_css_utils.calc.add(_gnist_themes_tokens_css_js.tokens.size.s, _vanilla_extract_css_utils.calc.multiply(_gnist_themes_tokens_css_js.tokens.spacing.base, 3)) });
 //#endregion
 exports.InputStyleRecipe = InputStyleRecipe;
 exports.InputWrapper = InputWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"shared.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;EA2BtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;EAyB3B,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAEnC,CAAC"}
+{"version":3,"file":"shared.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/shared.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;EA2BtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;EAyB3B,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAEnC,CAAC"}

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

@@ -1,19 +1,18 @@
 "use client";
 import { focusStyle } 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 { style } from "@vanilla-extract/css";
 //#region src/components/actions/selectionControls/shared.css.ts
-var InputWrapper = style({
+var InputWrapper = gnistStyle({
 	position: "relative",
 	display: "flex",
 	width: "fit-content",
 	height: "fit-content"
 });
-var LabelStyle = style([{ alignSelf: "center" }]);
-var LabelRecipe = recipe({
+var LabelStyle = gnistStyle([{ alignSelf: "center" }]);
+var LabelRecipe = gnistRecipe({
 	base: [
 		{
 			display: "flex",
@@ -29,7 +28,7 @@ var LabelRecipe = recipe({
 	],
 	variants: { disabled: { true: [atoms({ color: "on-disabled" }), { cursor: "not-allowed" }] } }
 });
-var InputStyleRecipe = recipe({
+var InputStyleRecipe = gnistRecipe({
 	base: [{
 		position: "absolute",
 		width: "100%",
@@ -44,6 +43,6 @@ var InputStyleRecipe = recipe({
 	}, focusStyle],
 	variants: { disabled: { true: [{ cursor: "not-allowed" }] } }
 });
-var indentedDescriptionStyle = style({ paddingLeft: calc.add(tokens.size.s, calc.multiply(tokens.spacing.base, 3)) });
+var indentedDescriptionStyle = gnistStyle({ paddingLeft: calc.add(tokens.size.s, calc.multiply(tokens.spacing.base, 3)) });
 //#endregion
 export { InputStyleRecipe, InputWrapper, LabelRecipe, LabelStyle, indentedDescriptionStyle };

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

@@ -1,34 +1,33 @@
 "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/actions/selectionControls/switch.css.ts
-var focusContainer = (0, _vanilla_extract_css.style)({
+var focusContainer = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	display: "inline-flex",
 	alignItems: "center",
 	position: "relative",
 	flexShrink: 0
 });
-var switchField = (0, _vanilla_extract_css.style)({
+var switchField = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	display: "inline-flex",
 	flexDirection: "column",
 	gap: _gnist_themes_tokens_css_js.tokens.spacing.base
 });
-var switchRow = (0, _vanilla_extract_css.style)({
+var switchRow = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	display: "inline-flex",
 	alignItems: "center",
 	gap: _gnist_themes_tokens_css_js.tokens.spacing.xxs
 });
-var switchLabelContent = (0, _vanilla_extract_css.style)({
+var switchLabelContent = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	display: "inline-flex",
 	flexDirection: "column",
 	gap: _gnist_themes_tokens_css_js.tokens.spacing.base,
 	minWidth: 0
 });
-var switchContainer = (0, _vanilla_extract_css.style)([{
+var switchContainer = (0, _gnist_themes_layers_css_js.gnistStyle)([{
 	position: "relative",
 	display: "inline-flex",
 	alignItems: "center",
@@ -41,7 +40,7 @@ var switchContainer = (0, _vanilla_extract_css.style)([{
 	width: "xxl",
 	height: "m"
 })]);
-var SwitchRecipe = (0, _vanilla_extract_recipes.recipe)({
+var SwitchRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [switchContainer, {
 		borderWidth: _gnist_themes_tokens_css_js.tokens.stroke.small,
 		borderStyle: "solid",
@@ -82,7 +81,7 @@ var SwitchRecipe = (0, _vanilla_extract_recipes.recipe)({
 		})]
 	}]
 });
-var switchThumb = (0, _vanilla_extract_css.style)({
+var switchThumb = (0, _gnist_themes_layers_css_js.gnistStyle)({
 	position: "absolute",
 	top: "50%",
 	transform: "translateY(-50%)",
@@ -94,7 +93,7 @@ var switchThumb = (0, _vanilla_extract_css.style)({
 	backgroundColor: _gnist_themes_tokens_css_js.tokens.color.surface,
 	selectors: { [`${focusContainer}:has(input:not(:disabled):active) &`]: { transform: "translateY(-50%) scale(0.94)" } }
 });
-var SwitchThumbRecipe = (0, _vanilla_extract_recipes.recipe)({
+var SwitchThumbRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [
 		switchThumb,
 		(0, _gnist_themes_atoms_css_js.atoms)({
@@ -128,26 +127,26 @@ var SwitchThumbRecipe = (0, _vanilla_extract_recipes.recipe)({
 		style: [(0, _gnist_themes_atoms_css_js.atoms)({ borderColor: "surface" })]
 	}]
 });
-var switchThumbIcon = (0, _vanilla_extract_css.style)([{
+var switchThumbIcon = (0, _gnist_themes_layers_css_js.gnistStyle)([{
 	display: "inline-flex",
 	alignItems: "center",
 	justifyContent: "center",
 	lineHeight: 0,
 	pointerEvents: "none"
 }, (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-surface" })]);
-var switchLabel = (0, _vanilla_extract_css.style)([{
+var switchLabel = (0, _gnist_themes_layers_css_js.gnistStyle)([{
 	userSelect: "none",
 	fontSize: _gnist_themes_tokens_css_js.tokens.type.small.body.fontSize,
 	lineHeight: _gnist_themes_tokens_css_js.tokens.typeface.size.xl
 }, (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-surface" })]);
-var SwitchLabelRecipe = (0, _vanilla_extract_recipes.recipe)({
+var SwitchLabelRecipe = (0, _gnist_themes_layers_css_js.gnistRecipe)({
 	base: [switchLabel],
 	variants: { disabled: {
 		true: [(0, _gnist_themes_atoms_css_js.atoms)({ color: "on-disabled" })],
 		false: {}
 	} }
 });
-var switchDescription = (0, _vanilla_extract_css.style)([(0, _gnist_themes_atoms_css_js.atoms)({ color: "text-variant" })]);
+var switchDescription = (0, _gnist_themes_layers_css_js.gnistStyle)([(0, _gnist_themes_atoms_css_js.atoms)({ color: "text-variant" })]);
 //#endregion
 exports.SwitchLabelRecipe = SwitchLabelRecipe;
 exports.SwitchRecipe = SwitchRecipe;

package/dist/components/actions/selectionControls/switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,eAAe,QAgB1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;EA8DvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAgBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0D5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,eAAe,QAgB1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;EA8DvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAgBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0D5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}