@gnist/design-system 5.5.0-alpha.1 → 5.5.1

package/CHANGELOG.md

@@ -3,17 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.5.0-alpha.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.4.1...@gnist/design-system@5.5.0-alpha.1) (2026-01-15)
+## [5.5.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.5.0...@gnist/design-system@5.5.1) (2026-02-23)
+
+**Note:** Version bump only for package @gnist/design-system
+
+## [5.5.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.4.4...@gnist/design-system@5.5.0) (2026-02-19)
 
 ### Features
 
-* Wrap gnist css in [@layer](https://github.com/layer) gnist { ... } ([c513601](https://github.com/mollerdigital/design-system-design-system/commit/c513601b4831e7d02f08028cdf1f0cd4c42f60bc))
+* add new icons archive, unarchive and file_copy ([7351b5a](https://github.com/mollerdigital/design-system-design-system/commit/7351b5aa4d60403c75d59a590c3df4aee6204fb0))
 
-## [5.5.0-alpha.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.4.1...@gnist/design-system@5.5.0-alpha.0) (2026-01-15)
+## [5.4.4](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.4.3...@gnist/design-system@5.4.4) (2026-02-13)
 
-### Features
+### Bug Fixes
+
+* update react-content-loader to 7.1.2 with fix for hydration errors ([5dc1b4c](https://github.com/mollerdigital/design-system-design-system/commit/5dc1b4c3d6a8e39577c0228e03d0615500ee7194))
+
+## [5.4.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.4.2...@gnist/design-system@5.4.3) (2026-02-06)
+
+**Note:** Version bump only for package @gnist/design-system
+
+## [5.4.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.4.1...@gnist/design-system@5.4.2) (2026-01-16)
+
+### Bug Fixes
 
-* Wrap gnist css in [@layer](https://github.com/layer) gnist { ... } ([c513601](https://github.com/mollerdigital/design-system-design-system/commit/c513601b4831e7d02f08028cdf1f0cd4c42f60bc))
+* correct logo colors and add symbol for autoria ([1cfbeac](https://github.com/mollerdigital/design-system-design-system/commit/1cfbeac74c55e6dd52722e9775e043bdfe811a37))
 
 ## [5.4.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.4.0...@gnist/design-system@5.4.1) (2026-01-09)
 

package/dist/building-blocks/inputs/internal/textBelowInput.css.cjs

@@ -2,8 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const textBelowInputRecipe = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const textBelowInputRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       typography: "detail-small",

package/dist/building-blocks/inputs/internal/textBelowInput.css.js

@@ -1,7 +1,7 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe } from "@gnist/themes/layers.css.js";
-const textBelowInputRecipe = gnistRecipe({
+import { recipe } from "@vanilla-extract/recipes";
+const textBelowInputRecipe = recipe({
   base: [
     atoms({
       typography: "detail-small",

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;;;;;GAKG;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;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,+BAI9B,qBAAqB,4CAqBvB,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;;;;;GAKG;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;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,wCAKjC,wBAAwB,4CAmB1B,CAAC"}

package/dist/building-blocks/skeletons/TextSkeleton.cjs

@@ -5,15 +5,13 @@ const jsxRuntime = require("react/jsx-runtime");
 const Row = require("../../utilities/layout/Row.cjs");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const reactContentLoader = require("react-content-loader");
-const React = require("react");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
 const ContentLoader = reactContentLoader__default.default;
 const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
-  const uniqueKey = React.useId();
   return jsxRuntime.jsx(Row.Row, { className, style: {
     height: `calc(1em * ${tokens_css_js.tokens.typeface["line-height"]})`,
     width
-  }, verticalAlign: "center", children: jsxRuntime.jsx(ContentLoader, { uniqueKey, height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+  }, verticalAlign: "center", children: jsxRuntime.jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
 };
 exports.TextSkeleton = TextSkeleton;

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;;;;;GAKG;AACH,eAAO,MAAM,YAAY,kCAItB,iBAAiB,4CAgCnB,CAAC"}
+{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,+BAI1B,iBAAiB,4CA6BnB,CAAC"}

package/dist/building-blocks/skeletons/TextSkeleton.js

@@ -3,14 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import { Row } from "../../utilities/layout/Row.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import reactContentLoader from "react-content-loader";
-import { useId } from "react";
 const ContentLoader = reactContentLoader;
 const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
-  const uniqueKey = useId();
   return jsx(Row, { className, style: {
     height: `calc(1em * ${tokens.typeface["line-height"]})`,
     width
-  }, verticalAlign: "center", children: jsx(ContentLoader, { uniqueKey, height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+  }, verticalAlign: "center", children: jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
 };
 export {
   TextSkeleton

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.cjs

@@ -4,10 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const animations_css = require("../../../styles/animations.css.cjs");
 const states_css = require("../../../styles/states.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const buttonBase = layers_css_js.gnistStyle([
+const recipes = require("@vanilla-extract/recipes");
+const buttonBase = css.style([
   states_css.focusStyle,
   animations_css.clickAnimation,
   atoms_css_js.atoms({
@@ -32,7 +33,7 @@ const buttonBase = layers_css_js.gnistStyle([
   }
 ]);
 const getColors = (variant) => atoms_css_js.atoms({ backgroundColor: variant, color: `on-${variant}` });
-const textAndIconButton = layers_css_js.gnistStyle([
+const textAndIconButton = css.style([
   atoms_css_js.atoms({ height: "l" }),
   {
     color: "inherit",
@@ -40,7 +41,7 @@ const textAndIconButton = layers_css_js.gnistStyle([
     flexShrink: 0
   }
 ]);
-const buttonRecipe = layers_css_js.gnistRecipe({
+const buttonRecipe = recipes.recipe({
   base: [buttonBase],
   variants: {
     isLoading: {
@@ -99,7 +100,7 @@ const buttonRecipe = layers_css_js.gnistRecipe({
     isLoading: false
   }
 });
-const boxedButton = layers_css_js.gnistRecipe({
+const boxedButton = recipes.recipe({
   base: atoms_css_js.atoms({ columnGap: "base" }),
   variants: {
     density: {
@@ -109,7 +110,7 @@ const boxedButton = layers_css_js.gnistRecipe({
   },
   defaultVariants: { density: "default" }
 });
-const iconButton = layers_css_js.gnistRecipe({
+const iconButton = recipes.recipe({
   variants: {
     showLabel: {
       left: { paddingLeft: tokens_css_js.tokens.spacing.base },
@@ -118,10 +119,10 @@ const iconButton = layers_css_js.gnistRecipe({
     }
   }
 });
-const actionText = layers_css_js.gnistStyle({
+const actionText = css.style({
   fontWeight: tokens_css_js.tokens.typeface.weight.semibold
 });
-const textButtonText = layers_css_js.gnistRecipe({
+const textButtonText = recipes.recipe({
   base: {
     borderBottomStyle: "solid",
     borderBottomWidth: 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":"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"}
+{"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"}

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

@@ -2,10 +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 { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-const buttonBase = gnistStyle([
+import { recipe } from "@vanilla-extract/recipes";
+const buttonBase = style([
   focusStyle,
   clickAnimation,
   atoms({
@@ -30,7 +31,7 @@ const buttonBase = gnistStyle([
   }
 ]);
 const getColors = (variant) => atoms({ backgroundColor: variant, color: `on-${variant}` });
-const textAndIconButton = gnistStyle([
+const textAndIconButton = style([
   atoms({ height: "l" }),
   {
     color: "inherit",
@@ -38,7 +39,7 @@ const textAndIconButton = gnistStyle([
     flexShrink: 0
   }
 ]);
-const buttonRecipe = gnistRecipe({
+const buttonRecipe = recipe({
   base: [buttonBase],
   variants: {
     isLoading: {
@@ -97,7 +98,7 @@ const buttonRecipe = gnistRecipe({
     isLoading: false
   }
 });
-const boxedButton = gnistRecipe({
+const boxedButton = recipe({
   base: atoms({ columnGap: "base" }),
   variants: {
     density: {
@@ -107,7 +108,7 @@ const boxedButton = gnistRecipe({
   },
   defaultVariants: { density: "default" }
 });
-const iconButton = gnistRecipe({
+const iconButton = recipe({
   variants: {
     showLabel: {
       left: { paddingLeft: tokens.spacing.base },
@@ -116,10 +117,10 @@ const iconButton = gnistRecipe({
     }
   }
 });
-const actionText = gnistStyle({
+const actionText = style({
   fontWeight: tokens.typeface.weight.semibold
 });
-const textButtonText = gnistRecipe({
+const textButtonText = recipe({
   base: {
     borderBottomStyle: "solid",
     borderBottomWidth: tokens.stroke.medium

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

@@ -2,10 +2,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const chipBase = layers_css_js.gnistStyle({
+const recipes = require("@vanilla-extract/recipes");
+const chipBase = css.style({
   display: "flex",
   gap: tokens_css_js.tokens.spacing.base,
   textWrap: "nowrap",
@@ -19,7 +20,7 @@ const chipBase = layers_css_js.gnistStyle({
   minHeight: tokens_css_js.tokens.size.xl,
   justifyContent: "center"
 });
-const chipRecipe = layers_css_js.gnistRecipe({
+const chipRecipe = recipes.recipe({
   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":"AAoBA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/chips/styles.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDrB,CAAC"}

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

@@ -1,9 +1,10 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-const chipBase = gnistStyle({
+import { recipe } from "@vanilla-extract/recipes";
+const chipBase = style({
   display: "flex",
   gap: tokens.spacing.base,
   textWrap: "nowrap",
@@ -17,7 +18,7 @@ const chipBase = gnistStyle({
   minHeight: tokens.size.xl,
   justifyContent: "center"
 });
-const chipRecipe = gnistRecipe({
+const chipRecipe = recipe({
   base: chipBase,
   variants: {
     selected: {

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

@@ -2,9 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const CheckboxRecipe = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const CheckboxRecipe = recipes.recipe({
   base: [
     {
       borderStyle: "solid",
@@ -95,7 +95,7 @@ const CheckboxRecipe = layers_css_js.gnistRecipe({
     }
   ]
 });
-const checkbox = layers_css_js.gnistRecipe({
+const checkbox = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       color: "surface"

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

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-const CheckboxRecipe = gnistRecipe({
+import { recipe } from "@vanilla-extract/recipes";
+const CheckboxRecipe = recipe({
   base: [
     {
       borderStyle: "solid",
@@ -93,7 +93,7 @@ const CheckboxRecipe = gnistRecipe({
     }
   ]
 });
-const checkbox = gnistRecipe({
+const checkbox = recipe({
   base: [
     atoms({
       color: "surface"

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

@@ -2,9 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const RadioButtonRecipe = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const RadioButtonRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       height: "s",
@@ -45,7 +45,7 @@ const RadioButtonRecipe = layers_css_js.gnistRecipe({
     }
   }
 });
-const CheckedCircleRecipe = layers_css_js.gnistRecipe({
+const CheckedCircleRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       display: "inline",

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

@@ -1,8 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-const RadioButtonRecipe = gnistRecipe({
+import { recipe } from "@vanilla-extract/recipes";
+const RadioButtonRecipe = recipe({
   base: [
     atoms({
       height: "s",
@@ -43,7 +43,7 @@ const RadioButtonRecipe = gnistRecipe({
     }
   }
 });
-const CheckedCircleRecipe = gnistRecipe({
+const CheckedCircleRecipe = recipe({
   base: [
     atoms({
       display: "inline",

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

@@ -2,8 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const fieldSetStyle = layers_css_js.gnistStyle([
+const css = require("@vanilla-extract/css");
+const recipes = require("@vanilla-extract/recipes");
+const fieldSetStyle = css.style([
   {
     border: "none"
   },
@@ -17,7 +18,7 @@ const fieldSetStyle = layers_css_js.gnistStyle([
 const legendStyle = atoms_css_js.atoms({
   marginBottom: "base"
 });
-const radioContainerStyle = layers_css_js.gnistRecipe({
+const radioContainerStyle = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",

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":"AAGA,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":"AAIA,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,7 +1,8 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
-const fieldSetStyle = gnistStyle([
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+const fieldSetStyle = style([
   {
     border: "none"
   },
@@ -15,7 +16,7 @@ const fieldSetStyle = gnistStyle([
 const legendStyle = atoms({
   marginBottom: "base"
 });
-const radioContainerStyle = gnistRecipe({
+const radioContainerStyle = recipe({
   base: [
     atoms({
       display: "flex",

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

@@ -3,21 +3,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const states_css = require("../../../styles/states.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const InputWrapper = layers_css_js.gnistStyle({
+const recipes = require("@vanilla-extract/recipes");
+const InputWrapper = css.style({
   position: "relative",
   display: "flex",
   width: "fit-content",
   height: "fit-content"
 });
-const LabelStyle = layers_css_js.gnistStyle([
+const LabelStyle = css.style([
   {
     alignSelf: "center"
   }
 ]);
-const LabelRecipe = layers_css_js.gnistRecipe({
+const LabelRecipe = recipes.recipe({
   base: [
     {
       display: "flex",
@@ -44,7 +45,7 @@ const LabelRecipe = layers_css_js.gnistRecipe({
     }
   }
 });
-const InputStyleRecipe = layers_css_js.gnistRecipe({
+const InputStyleRecipe = recipes.recipe({
   base: [
     {
       position: "absolute",
@@ -70,7 +71,7 @@ const InputStyleRecipe = layers_css_js.gnistRecipe({
     }
   }
 });
-const indentedDescriptionStyle = layers_css_js.gnistStyle({
+const indentedDescriptionStyle = css.style({
   paddingLeft: cssUtils.calc.add(tokens_css_js.tokens.size.s, cssUtils.calc.multiply(tokens_css_js.tokens.spacing.base, 3))
 });
 exports.InputStyleRecipe = InputStyleRecipe;

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":"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"}
+{"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"}

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

@@ -1,21 +1,22 @@
 "use client";
 import { focusStyle } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-const InputWrapper = gnistStyle({
+import { recipe } from "@vanilla-extract/recipes";
+const InputWrapper = style({
   position: "relative",
   display: "flex",
   width: "fit-content",
   height: "fit-content"
 });
-const LabelStyle = gnistStyle([
+const LabelStyle = style([
   {
     alignSelf: "center"
   }
 ]);
-const LabelRecipe = gnistRecipe({
+const LabelRecipe = recipe({
   base: [
     {
       display: "flex",
@@ -42,7 +43,7 @@ const LabelRecipe = gnistRecipe({
     }
   }
 });
-const InputStyleRecipe = gnistRecipe({
+const InputStyleRecipe = recipe({
   base: [
     {
       position: "absolute",
@@ -68,7 +69,7 @@ const InputStyleRecipe = gnistRecipe({
     }
   }
 });
-const indentedDescriptionStyle = gnistStyle({
+const indentedDescriptionStyle = style({
   paddingLeft: calc.add(tokens.size.s, calc.multiply(tokens.spacing.base, 3))
 });
 export {

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;AAK/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,4CAeA,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;AAK/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,4CAeA,CAAC"}

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

@@ -2,9 +2,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const focusContainer = layers_css_js.gnistStyle({
+const recipes = require("@vanilla-extract/recipes");
+const css = require("@vanilla-extract/css");
+const focusContainer = css.style({
   display: "inline-flex",
   alignItems: "center",
   selectors: {
@@ -14,10 +15,10 @@ const focusContainer = layers_css_js.gnistStyle({
     }
   }
 });
-const switchContainerStyle = layers_css_js.gnistStyle({
+const switchContainerStyle = css.style({
   display: "flex"
 });
-const switchContainer = layers_css_js.gnistStyle([
+const switchContainer = css.style([
   {
     position: "relative",
     display: "inline-flex",
@@ -30,7 +31,7 @@ const switchContainer = layers_css_js.gnistStyle([
     height: "l"
   })
 ]);
-const SwitchRecipe = layers_css_js.gnistRecipe({
+const SwitchRecipe = recipes.recipe({
   base: [
     switchContainer,
     atoms_css_js.atoms({
@@ -70,7 +71,7 @@ const SwitchRecipe = layers_css_js.gnistRecipe({
     }
   }
 });
-const switchThumb = layers_css_js.gnistStyle({
+const switchThumb = css.style({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
@@ -79,7 +80,7 @@ const switchThumb = layers_css_js.gnistStyle({
   backgroundColor: tokens_css_js.tokens.palette.white,
   boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
 });
-const SwitchThumbRecipe = layers_css_js.gnistRecipe({
+const SwitchThumbRecipe = recipes.recipe({
   base: [
     switchThumb,
     atoms_css_js.atoms({
@@ -106,7 +107,7 @@ const SwitchThumbRecipe = layers_css_js.gnistRecipe({
     }
   }
 });
-const switchLabel = layers_css_js.gnistStyle([
+const switchLabel = css.style([
   {
     userSelect: "none",
     fontSize: tokens_css_js.tokens.type.small.body.fontSize,
@@ -116,7 +117,7 @@ const switchLabel = layers_css_js.gnistStyle([
     color: "on-surface"
   })
 ]);
-const SwitchLabelRecipe = layers_css_js.gnistRecipe({
+const SwitchLabelRecipe = recipes.recipe({
   base: [switchLabel],
   variants: {
     disabled: {
@@ -141,7 +142,7 @@ const SwitchLabelRecipe = layers_css_js.gnistRecipe({
     }
   }
 });
-const switchDescription = layers_css_js.gnistStyle([
+const switchDescription = css.style([
   atoms_css_js.atoms({
     color: "text-variant"
   })

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":"AAIA,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAE/B,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;EAuCvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0B5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;EAwB5B,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,QASzB,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAE/B,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;EAuCvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0B5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;EAwB5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}