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

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

@@ -1,8 +1,9 @@
 "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";
-const focusContainer = gnistStyle({
+import { recipe } from "@vanilla-extract/recipes";
+import { style } from "@vanilla-extract/css";
+const focusContainer = style({
   display: "inline-flex",
   alignItems: "center",
   selectors: {
@@ -12,10 +13,10 @@ const focusContainer = gnistStyle({
     }
   }
 });
-const switchContainerStyle = gnistStyle({
+const switchContainerStyle = style({
   display: "flex"
 });
-const switchContainer = gnistStyle([
+const switchContainer = style([
   {
     position: "relative",
     display: "inline-flex",
@@ -28,7 +29,7 @@ const switchContainer = gnistStyle([
     height: "l"
   })
 ]);
-const SwitchRecipe = gnistRecipe({
+const SwitchRecipe = recipe({
   base: [
     switchContainer,
     atoms({
@@ -68,7 +69,7 @@ const SwitchRecipe = gnistRecipe({
     }
   }
 });
-const switchThumb = gnistStyle({
+const switchThumb = style({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
@@ -77,7 +78,7 @@ const switchThumb = gnistStyle({
   backgroundColor: tokens.palette.white,
   boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
 });
-const SwitchThumbRecipe = gnistRecipe({
+const SwitchThumbRecipe = recipe({
   base: [
     switchThumb,
     atoms({
@@ -104,7 +105,7 @@ const SwitchThumbRecipe = gnistRecipe({
     }
   }
 });
-const switchLabel = gnistStyle([
+const switchLabel = style([
   {
     userSelect: "none",
     fontSize: tokens.type.small.body.fontSize,
@@ -114,7 +115,7 @@ const switchLabel = gnistStyle([
     color: "on-surface"
   })
 ]);
-const SwitchLabelRecipe = gnistRecipe({
+const SwitchLabelRecipe = recipe({
   base: [switchLabel],
   variants: {
     disabled: {
@@ -139,7 +140,7 @@ const SwitchLabelRecipe = gnistRecipe({
     }
   }
 });
-const switchDescription = gnistStyle([
+const switchDescription = style([
   atoms({
     color: "text-variant"
   })

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

@@ -2,13 +2,14 @@
 "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 css = require("@vanilla-extract/css");
+const recipes = require("@vanilla-extract/recipes");
 const boxColors = (colorName) => atoms_css_js.atoms({
   backgroundColor: `${colorName}-container`,
   color: `on-${colorName}-container`,
-  borderColor: `${colorName}`
+  borderColor: `on-${colorName}-container`
 });
-const banner = layers_css_js.gnistRecipe({
+const banner = recipes.recipe({
   base: [
     {
       borderStyle: "solid"
@@ -32,17 +33,17 @@ const banner = layers_css_js.gnistRecipe({
     }
   }
 });
-const icon = layers_css_js.gnistRecipe({
+const icon = recipes.recipe({
   variants: {
     type: {
-      success: atoms_css_js.atoms({ color: "success" }),
-      warning: atoms_css_js.atoms({ color: "warning" }),
-      error: atoms_css_js.atoms({ color: "error" }),
-      info: atoms_css_js.atoms({ color: "info" })
+      success: atoms_css_js.atoms({ color: "on-success-container" }),
+      warning: atoms_css_js.atoms({ color: "on-warning-container" }),
+      error: atoms_css_js.atoms({ color: "on-error-container" }),
+      info: atoms_css_js.atoms({ color: "on-info-container" })
     }
   }
 });
-const mainContentContainer = layers_css_js.gnistRecipe({
+const mainContentContainer = recipes.recipe({
   base: [
     {
       flex: 1
@@ -55,12 +56,12 @@ const mainContentContainer = layers_css_js.gnistRecipe({
     }
   }
 });
-const bannerHeading = layers_css_js.gnistStyle([
+const bannerHeading = css.style([
   { float: "left" },
   atoms_css_js.atoms({ margin: "none", typography: "heading3-small" })
 ]);
-const closeButton = layers_css_js.gnistStyle({ float: "right" });
-const messageContainer = layers_css_js.gnistStyle({ clear: "left" });
+const closeButton = css.style({ float: "right" });
+const messageContainer = css.style({ clear: "left" });
 const actionButton = atoms_css_js.atoms({ marginTop: "xs" });
 exports.actionButton = actionButton;
 exports.banner = banner;

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

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

@@ -1,12 +1,13 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
 const boxColors = (colorName) => atoms({
   backgroundColor: `${colorName}-container`,
   color: `on-${colorName}-container`,
-  borderColor: `${colorName}`
+  borderColor: `on-${colorName}-container`
 });
-const banner = gnistRecipe({
+const banner = recipe({
   base: [
     {
       borderStyle: "solid"
@@ -30,17 +31,17 @@ const banner = gnistRecipe({
     }
   }
 });
-const icon = gnistRecipe({
+const icon = recipe({
   variants: {
     type: {
-      success: atoms({ color: "success" }),
-      warning: atoms({ color: "warning" }),
-      error: atoms({ color: "error" }),
-      info: atoms({ color: "info" })
+      success: atoms({ color: "on-success-container" }),
+      warning: atoms({ color: "on-warning-container" }),
+      error: atoms({ color: "on-error-container" }),
+      info: atoms({ color: "on-info-container" })
     }
   }
 });
-const mainContentContainer = gnistRecipe({
+const mainContentContainer = recipe({
   base: [
     {
       flex: 1
@@ -53,12 +54,12 @@ const mainContentContainer = gnistRecipe({
     }
   }
 });
-const bannerHeading = gnistStyle([
+const bannerHeading = style([
   { float: "left" },
   atoms({ margin: "none", typography: "heading3-small" })
 ]);
-const closeButton = gnistStyle({ float: "right" });
-const messageContainer = gnistStyle({ clear: "left" });
+const closeButton = style({ float: "right" });
+const messageContainer = style({ clear: "left" });
 const actionButton = atoms({ marginTop: "xs" });
 export {
   actionButton,

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

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

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

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

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

@@ -2,10 +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 css = require("@vanilla-extract/css");
-const loadingBarStyles = layers_css_js.gnistStyle([
+const loadingBarStyles = css.style([
   {
     overflow: "hidden",
     display: "flex",
@@ -24,7 +23,7 @@ const loadingAnimation = css.keyframes({
     width: "100%"
   }
 });
-const loadingBar = layers_css_js.gnistStyle([
+const loadingBar = css.style([
   {
     backgroundColor: tokens_css_js.tokens.palette.tertiary[40],
     animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`

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":"AAKA,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":"AAIA,eAAO,MAAM,gBAAgB,QAU3B,CAAC;AAWH,eAAO,MAAM,UAAU,QAQrB,CAAC"}

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

@@ -1,9 +1,8 @@
 "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 } from "@vanilla-extract/css";
-const loadingBarStyles = gnistStyle([
+import { style, keyframes } from "@vanilla-extract/css";
+const loadingBarStyles = style([
   {
     overflow: "hidden",
     display: "flex",
@@ -22,7 +21,7 @@ const loadingAnimation = keyframes({
     width: "100%"
   }
 });
-const loadingBar = gnistStyle([
+const loadingBar = style([
   {
     backgroundColor: tokens.palette.tertiary[40],
     animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`

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

@@ -2,14 +2,13 @@
 "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 rotate360 = css.keyframes({
   "0%": { transform: "rotate(0deg)" },
   "100%": { transform: "rotate(360deg)" }
 });
-const loadingSpinnerStyle = layers_css_js.gnistStyle([
+const loadingSpinnerStyle = css.style([
   atoms_css_js.atoms({
     borderRadius: "full",
     width: "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":"AAUA,eAAO,MAAM,mBAAmB,QAW9B,CAAC"}
+{"version":3,"file":"loadingSpinner.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingSpinner.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,QAW9B,CAAC"}

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

@@ -1,13 +1,12 @@
 "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 } from "@vanilla-extract/css";
+import { keyframes, style } from "@vanilla-extract/css";
 const rotate360 = keyframes({
   "0%": { transform: "rotate(0deg)" },
   "100%": { transform: "rotate(360deg)" }
 });
-const loadingSpinnerStyle = gnistStyle([
+const loadingSpinnerStyle = style([
   atoms({
     borderRadius: "full",
     width: "xxl",

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

@@ -2,10 +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 css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
 const getColors = (variant) => {
   if (variant === "neutral") {
     return atoms_css_js.atoms({
@@ -21,7 +21,7 @@ const getColors = (variant) => {
   });
 };
 const largeBody = tokens_css_js.tokens.type.large.body;
-const lozengeRecipe = layers_css_js.gnistRecipe({
+const lozengeRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       display: "inline-flex",

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

@@ -1,9 +1,9 @@
 "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";
 import { globalStyle } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
 const getColors = (variant) => {
   if (variant === "neutral") {
     return atoms({
@@ -19,7 +19,7 @@ const getColors = (variant) => {
   });
 };
 const largeBody = tokens.type.large.body;
-const lozengeRecipe = gnistRecipe({
+const lozengeRecipe = recipe({
   base: [
     atoms({
       display: "inline-flex",

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

@@ -1,16 +1,15 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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 progressBarStyles = layers_css_js.gnistStyle({
+const progressBarStyles = css.style({
   overflow: "hidden",
   display: "flex",
   backgroundColor: tokens_css_js.tokens.color.outline,
   width: "100%"
 });
-const progressBar = layers_css_js.gnistStyle({
+const progressBar = css.style({
   transition: "width 0.5s ease-in-out"
 });
 const progressPercentage = css.createVar();
@@ -18,7 +17,7 @@ const progress = css.keyframes({
   from: { width: "0%" },
   to: { width: progressPercentage }
 });
-const progressAnimation = layers_css_js.gnistStyle({
+const progressAnimation = css.style({
   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":"AAIA,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":"AAGA,eAAO,MAAM,iBAAiB,QAK5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAEtB,CAAC;AAEH,eAAO,MAAM,kBAAkB,oBAAc,CAAC;AAO9C,eAAO,MAAM,iBAAiB,QAK5B,CAAC"}

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

@@ -1,14 +1,13 @@
 "use client";
-import { gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { createVar, keyframes } from "@vanilla-extract/css";
-const progressBarStyles = gnistStyle({
+import { style, createVar, keyframes } from "@vanilla-extract/css";
+const progressBarStyles = style({
   overflow: "hidden",
   display: "flex",
   backgroundColor: tokens.color.outline,
   width: "100%"
 });
-const progressBar = gnistStyle({
+const progressBar = style({
   transition: "width 0.5s ease-in-out"
 });
 const progressPercentage = createVar();
@@ -16,7 +15,7 @@ const progress = keyframes({
   from: { width: "0%" },
   to: { width: progressPercentage }
 });
-const progressAnimation = gnistStyle({
+const progressAnimation = style({
   animationName: progress,
   animationDuration: "1s",
   animationTimingFunction: "ease-in-out",

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

@@ -2,10 +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 css = require("@vanilla-extract/css");
 const inputField_css = require("../shared-styles/inputField.css.cjs");
-const listBoxStyle = layers_css_js.gnistStyle([
+const listBoxStyle = css.style([
   atoms_css_js.atoms({
     marginTop: "xxs",
     display: "flex",
@@ -24,12 +24,12 @@ const listBoxStyle = layers_css_js.gnistStyle([
     overflow: "auto"
   }
 ]);
-const popUpStyle = layers_css_js.gnistStyle({
+const popUpStyle = css.style({
   zIndex: 1400,
   minWidth: "280px",
   maxWidth: "100%"
 });
-const selectStyle = layers_css_js.gnistStyle([
+const selectStyle = css.style([
   inputField_css.inputFieldStyle,
   {
     overflow: "hidden",
@@ -44,7 +44,7 @@ const selectStyle = layers_css_js.gnistStyle([
     boxSizing: "border-box"
   }
 ]);
-const optionStyle = layers_css_js.gnistStyle([
+const optionStyle = css.style([
   atoms_css_js.atoms({
     display: "flex",
     position: "relative",
@@ -63,7 +63,7 @@ const optionStyle = layers_css_js.gnistStyle([
     }
   }
 ]);
-const singleOptionStyle = layers_css_js.gnistStyle([
+const singleOptionStyle = css.style([
   atoms_css_js.atoms({
     display: "flex",
     alignItems: "center",
@@ -71,7 +71,7 @@ const singleOptionStyle = layers_css_js.gnistStyle([
   }),
   { width: "100%" }
 ]);
-const optionBackground = layers_css_js.gnistStyle([
+const optionBackground = css.style([
   atoms_css_js.atoms({
     display: "flex",
     position: "absolute",

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

@@ -1,9 +1,9 @@
 "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 { style } from "@vanilla-extract/css";
 import { inputFieldStyle } from "../shared-styles/inputField.css.js";
-const listBoxStyle = gnistStyle([
+const listBoxStyle = style([
   atoms({
     marginTop: "xxs",
     display: "flex",
@@ -22,12 +22,12 @@ const listBoxStyle = gnistStyle([
     overflow: "auto"
   }
 ]);
-const popUpStyle = gnistStyle({
+const popUpStyle = style({
   zIndex: 1400,
   minWidth: "280px",
   maxWidth: "100%"
 });
-const selectStyle = gnistStyle([
+const selectStyle = style([
   inputFieldStyle,
   {
     overflow: "hidden",
@@ -42,7 +42,7 @@ const selectStyle = gnistStyle([
     boxSizing: "border-box"
   }
 ]);
-const optionStyle = gnistStyle([
+const optionStyle = style([
   atoms({
     display: "flex",
     position: "relative",
@@ -61,7 +61,7 @@ const optionStyle = gnistStyle([
     }
   }
 ]);
-const singleOptionStyle = gnistStyle([
+const singleOptionStyle = style([
   atoms({
     display: "flex",
     alignItems: "center",
@@ -69,7 +69,7 @@ const singleOptionStyle = gnistStyle([
   }),
   { width: "100%" }
 ]);
-const optionBackground = gnistStyle([
+const optionBackground = style([
   atoms({
     display: "flex",
     position: "absolute",

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

@@ -3,11 +3,11 @@
 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 containerStyle = layers_css_js.gnistStyle([
+const recipes = require("@vanilla-extract/recipes");
+const containerStyle = css.style([
   atoms_css_js.atoms({
     display: "flex",
     flexDirection: "column",
@@ -21,7 +21,7 @@ const containerStyle = layers_css_js.gnistStyle([
     width: "fit-content"
   }
 ]);
-const gridStyle = layers_css_js.gnistStyle([
+const gridStyle = css.style([
   atoms_css_js.atoms({
     display: "flex",
     flexDirection: "column",
@@ -31,7 +31,7 @@ const gridStyle = layers_css_js.gnistStyle([
     width: "fit-content"
   }
 ]);
-const rowStyle = layers_css_js.gnistStyle([
+const rowStyle = css.style([
   atoms_css_js.atoms({
     gap: "base",
     height: "xl"
@@ -50,11 +50,11 @@ const selectMonthRow = atoms_css_js.atoms({
   justifyContent: "space-between",
   typography: "body-medium"
 });
-const headerCell = layers_css_js.gnistStyle([
+const headerCell = css.style([
   { textAlign: "center" },
   atoms_css_js.atoms({ typography: "detail-large" })
 ]);
-const cellRecipe = layers_css_js.gnistRecipe({
+const cellRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       typography: "body-large",
@@ -130,8 +130,8 @@ const buttonRow = atoms_css_js.atoms({
   display: "flex",
   gap: "base"
 });
-const arrowButton = layers_css_js.gnistStyle([atoms_css_js.atoms({ color: "on-background" })]);
-const cellSkeletonStyle = layers_css_js.gnistStyle([
+const arrowButton = css.style([atoms_css_js.atoms({ color: "on-background" })]);
+const cellSkeletonStyle = css.style([
   atoms_css_js.atoms({
     padding: "base",
     borderRadius: "picker"

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

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

@@ -1,11 +1,11 @@
 "use client";
 import { stateLayers, 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 { createVar, globalStyle } from "@vanilla-extract/css";
+import { style, createVar, globalStyle } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-const containerStyle = gnistStyle([
+import { recipe } from "@vanilla-extract/recipes";
+const containerStyle = style([
   atoms({
     display: "flex",
     flexDirection: "column",
@@ -19,7 +19,7 @@ const containerStyle = gnistStyle([
     width: "fit-content"
   }
 ]);
-const gridStyle = gnistStyle([
+const gridStyle = style([
   atoms({
     display: "flex",
     flexDirection: "column",
@@ -29,7 +29,7 @@ const gridStyle = gnistStyle([
     width: "fit-content"
   }
 ]);
-const rowStyle = gnistStyle([
+const rowStyle = style([
   atoms({
     gap: "base",
     height: "xl"
@@ -48,11 +48,11 @@ const selectMonthRow = atoms({
   justifyContent: "space-between",
   typography: "body-medium"
 });
-const headerCell = gnistStyle([
+const headerCell = style([
   { textAlign: "center" },
   atoms({ typography: "detail-large" })
 ]);
-const cellRecipe = gnistRecipe({
+const cellRecipe = recipe({
   base: [
     atoms({
       typography: "body-large",
@@ -128,8 +128,8 @@ const buttonRow = atoms({
   display: "flex",
   gap: "base"
 });
-const arrowButton = gnistStyle([atoms({ color: "on-background" })]);
-const cellSkeletonStyle = gnistStyle([
+const arrowButton = style([atoms({ color: "on-background" })]);
+const cellSkeletonStyle = style([
   atoms({
     padding: "base",
     borderRadius: "picker"

package/dist/components/inputs/shared-styles/iconButtonOverlay.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 iconButtonOverlayRecipe = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const iconButtonOverlayRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       width: "l",

package/dist/components/inputs/shared-styles/iconButtonOverlay.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 iconButtonOverlayRecipe = gnistRecipe({
+import { recipe } from "@vanilla-extract/recipes";
+const iconButtonOverlayRecipe = recipe({
   base: [
     atoms({
       width: "l",