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

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

@@ -2,18 +2,19 @@
 "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 inputFieldConstants_css = require("./inputFieldConstants.css.cjs");
 const borderStyle = (borderColor, isFocused) => `0 0 0 ${isFocused ? tokens_css_js.tokens.stroke.medium : tokens_css_js.tokens.stroke.small} ${borderColor}`;
 const textAreaHeight = cssUtils.calc(cssUtils.calc(inputFieldConstants_css.visibleLines).multiply("1.5rem")).add(cssUtils.calc(tokens_css_js.tokens.spacing.xxs).multiply(2)).toString();
-const wrapperStyle = layers_css_js.gnistStyle({
+const wrapperStyle = css.style({
   position: "relative",
   display: "inline-block",
   minWidth: "min(100%, 280px)"
 });
-const inputFieldWrapperRecipe = layers_css_js.gnistRecipe({
+const inputFieldWrapperRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       marginTop: "xxs",
@@ -92,7 +93,7 @@ const inputFieldWrapperRecipe = layers_css_js.gnistRecipe({
     validityType: "none"
   }
 });
-const inputFieldStyle = layers_css_js.gnistStyle([
+const inputFieldStyle = css.style([
   atoms_css_js.atoms({ color: "on-surface" }),
   {
     boxSizing: "border-box",
@@ -116,7 +117,7 @@ const inputFieldStyle = layers_css_js.gnistStyle([
     }
   }
 ]);
-const inputContentWrapper = layers_css_js.gnistRecipe({
+const inputContentWrapper = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       paddingLeft: "s",

package/dist/components/inputs/shared-styles/inputField.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputField.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/inputField.css.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ElC,CAAC;AAEH,eAAO,MAAM,eAAe,QAuB1B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAyB9B,CAAC"}
+{"version":3,"file":"inputField.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/shared-styles/inputField.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ElC,CAAC;AAEH,eAAO,MAAM,eAAe,QAuB1B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;EAyB9B,CAAC"}

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

@@ -1,17 +1,18 @@
 "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";
+import { recipe } from "@vanilla-extract/recipes";
 import { visibleLines, transitionTime, postInputWidth, preInputWidth } from "./inputFieldConstants.css.js";
 const borderStyle = (borderColor, isFocused) => `0 0 0 ${isFocused ? tokens.stroke.medium : tokens.stroke.small} ${borderColor}`;
 const textAreaHeight = calc(calc(visibleLines).multiply("1.5rem")).add(calc(tokens.spacing.xxs).multiply(2)).toString();
-const wrapperStyle = gnistStyle({
+const wrapperStyle = style({
   position: "relative",
   display: "inline-block",
   minWidth: "min(100%, 280px)"
 });
-const inputFieldWrapperRecipe = gnistRecipe({
+const inputFieldWrapperRecipe = recipe({
   base: [
     atoms({
       marginTop: "xxs",
@@ -90,7 +91,7 @@ const inputFieldWrapperRecipe = gnistRecipe({
     validityType: "none"
   }
 });
-const inputFieldStyle = gnistStyle([
+const inputFieldStyle = style([
   atoms({ color: "on-surface" }),
   {
     boxSizing: "border-box",
@@ -114,7 +115,7 @@ const inputFieldStyle = gnistStyle([
     }
   }
 ]);
-const inputContentWrapper = gnistRecipe({
+const inputContentWrapper = recipe({
   base: [
     atoms({
       paddingLeft: "s",

package/dist/components/inputs/shared-styles/labelStyles.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 cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
 const inputField_css = require("./inputField.css.cjs");
 const inputFieldConstants_css = require("./inputFieldConstants.css.cjs");
 const elevatedLabel = (color) => ({
@@ -27,7 +27,7 @@ const elevatedLabelBackground = (backgroundColor) => ({
   top: "5px",
   height: tokens_css_js.tokens.stroke.medium
 });
-const labelStyle = layers_css_js.gnistRecipe({
+const labelStyle = recipes.recipe({
   base: {
     zIndex: 1,
     position: "relative",

package/dist/components/inputs/shared-styles/labelStyles.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";
 import { calc } from "@vanilla-extract/css-utils";
+import { recipe } from "@vanilla-extract/recipes";
 import { inputFieldStyle } from "./inputField.css.js";
 import { transitionTime, preInputWidth } from "./inputFieldConstants.css.js";
 const elevatedLabel = (color) => ({
@@ -25,7 +25,7 @@ const elevatedLabelBackground = (backgroundColor) => ({
   top: "5px",
   height: tokens.stroke.medium
 });
-const labelStyle = gnistRecipe({
+const labelStyle = recipe({
   base: {
     zIndex: 1,
     position: "relative",

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

@@ -2,11 +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 prefixStyle = layers_css_js.gnistStyle([
+const css = require("@vanilla-extract/css");
+const prefixStyle = css.style([
   atoms_css_js.atoms({ color: "text-variant", paddingRight: "xxs" })
 ]);
-const suffixStyle = layers_css_js.gnistStyle([
+const suffixStyle = css.style([
   atoms_css_js.atoms({ color: "text-variant", paddingLeft: "xxs" })
 ]);
 exports.prefixStyle = prefixStyle;

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

@@ -1,10 +1,10 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistStyle } from "@gnist/themes/layers.css.js";
-const prefixStyle = gnistStyle([
+import { style } from "@vanilla-extract/css";
+const prefixStyle = style([
   atoms({ color: "text-variant", paddingRight: "xxs" })
 ]);
-const suffixStyle = gnistStyle([
+const suffixStyle = style([
   atoms({ color: "text-variant", paddingLeft: "xxs" })
 ]);
 export {

package/dist/components/inputs/textFields/TextArea.cjs

@@ -6,12 +6,12 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
-require("react");
 require("../../../foundation/iconography/ExtraIconsProvider.cjs");
 require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
 const Icon = require("../../../foundation/iconography/Icon.cjs");
 require("../../../foundation/typography/index.cjs");
+require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");

package/dist/components/inputs/textFields/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAepD,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAClC,CAAC;AAEN;;;;;;;;;;;EAWE;AACF,wBAAgB,QAAQ,CAAC,EACrB,WAAW,EACX,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EACH,GAAG,KAAK,EACX,EAAE,aAAa,2CAyIf;AAED,eAAO,MAAM,SAAS,UAAW,MAAM,OAAO,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,UAAW,MAAM,OAAO,MAAM,WACtB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAepD,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAClC,CAAC;AAEN;;;;;;;;;;;EAWE;AACF,wBAAgB,QAAQ,CAAC,EACrB,WAAW,EACX,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EACH,GAAG,KAAK,EACX,EAAE,aAAa,2CAyIf;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,WACtB,CAAC"}

package/dist/components/inputs/textFields/TextArea.js

@@ -4,12 +4,12 @@ import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
-import "react";
 import "../../../foundation/iconography/ExtraIconsProvider.js";
 import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import "../../../foundation/typography/index.js";
+import "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";

package/dist/components/inputs/textFields/TextField.cjs

@@ -13,7 +13,6 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
-require("react");
 const iconButtonOverlay_css = require("../shared-styles/iconButtonOverlay.css.cjs");
 const inputField_css = require("../shared-styles/inputField.css.cjs");
 const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");

package/dist/components/inputs/textFields/TextField.js

@@ -11,7 +11,6 @@ import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
-import "react";
 import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
 import { inputFieldWrapperRecipe, inputFieldStyle, inputContentWrapper, wrapperStyle } from "../shared-styles/inputField.css.js";
 import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";

package/dist/components/inputs/textFields/textArea.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 wordCounterStyle = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const wordCounterStyle = recipes.recipe({
   base: atoms_css_js.atoms({
     display: "flex",
     backgroundColor: "surface",

package/dist/components/inputs/textFields/textArea.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 wordCounterStyle = gnistRecipe({
+import { recipe } from "@vanilla-extract/recipes";
+const wordCounterStyle = recipe({
   base: atoms({
     display: "flex",
     backgroundColor: "surface",

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

@@ -2,7 +2,6 @@
 "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 rotate360 = css.keyframes({
   "0%": { transform: "rotate(0deg)" },
@@ -12,7 +11,7 @@ const fadeIn = css.keyframes({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
 });
-const spinnerRecipe = layers_css_js.gnistStyle([
+const spinnerRecipe = css.style([
   atoms_css_js.atoms({ borderWidth: "medium" }),
   {
     position: "absolute",

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

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

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

@@ -1,7 +1,6 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistStyle } from "@gnist/themes/layers.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)" }
@@ -10,7 +9,7 @@ const fadeIn = keyframes({
   "0%": { opacity: 0 },
   "100%": { opacity: 1 }
 });
-const spinnerRecipe = gnistStyle([
+const spinnerRecipe = style([
   atoms({ borderWidth: "medium" }),
   {
     position: "absolute",

package/dist/components/surfaces/accordion/Accordion.d.ts

@@ -34,7 +34,7 @@ export declare const Accordion: import("@gnist/component-utils").VanillaRecipeCo
     };
     withBackground: {
         true: {
-            backgroundColor: `var(--${string})`;
+            background: `var(--${string})`;
             color: `var(--${string})`;
         };
     };

package/dist/components/surfaces/accordion/accordion.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 accordionRecipe = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const accordionRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       color: "on-background"
@@ -19,13 +19,13 @@ const accordionRecipe = layers_css_js.gnistRecipe({
     },
     withBackground: {
       true: {
-        backgroundColor: tokens_css_js.tokens.color["surface-variant"],
+        background: tokens_css_js.tokens.color["surface-variant"],
         color: tokens_css_js.tokens.color["on-surface-variant"]
       }
     }
   }
 });
-const head = layers_css_js.gnistStyle([
+const head = css.style([
   atoms_css_js.atoms({
     display: "flex",
     justifyContent: "space-between",
@@ -43,13 +43,13 @@ const head = layers_css_js.gnistStyle([
     }
   }
 ]);
-const heading = layers_css_js.gnistStyle([
+const heading = css.style([
   atoms_css_js.atoms({ typography: "heading3-small" }),
   {
     fontSize: tokens_css_js.tokens.type.medium.body.fontSize
   }
 ]);
-const headBackground = layers_css_js.gnistStyle({
+const headBackground = css.style({
   position: "absolute",
   width: "100%",
   height: "100%",
@@ -61,7 +61,7 @@ const headBackground = layers_css_js.gnistStyle({
     }
   }
 });
-const body = layers_css_js.gnistStyle({
+const body = css.style({
   padding: `${tokens_css_js.tokens.spacing.xxs} ${tokens_css_js.tokens.spacing.xxs} ${tokens_css_js.tokens.spacing.s}`
 });
 css.globalStyle("summary::-webkit-details-marker", {

package/dist/components/surfaces/accordion/accordion.css.d.ts

@@ -6,7 +6,7 @@ export declare const accordionRecipe: import("@vanilla-extract/recipes").Runtime
     };
     withBackground: {
         true: {
-            backgroundColor: `var(--${string})`;
+            background: `var(--${string})`;
             color: `var(--${string})`;
         };
     };

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

@@ -1,9 +1,9 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe, gnistStyle } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { globalStyle } from "@vanilla-extract/css";
-const accordionRecipe = gnistRecipe({
+import { style, globalStyle } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+const accordionRecipe = recipe({
   base: [
     atoms({
       color: "on-background"
@@ -17,13 +17,13 @@ const accordionRecipe = gnistRecipe({
     },
     withBackground: {
       true: {
-        backgroundColor: tokens.color["surface-variant"],
+        background: tokens.color["surface-variant"],
         color: tokens.color["on-surface-variant"]
       }
     }
   }
 });
-const head = gnistStyle([
+const head = style([
   atoms({
     display: "flex",
     justifyContent: "space-between",
@@ -41,13 +41,13 @@ const head = gnistStyle([
     }
   }
 ]);
-const heading = gnistStyle([
+const heading = style([
   atoms({ typography: "heading3-small" }),
   {
     fontSize: tokens.type.medium.body.fontSize
   }
 ]);
-const headBackground = gnistStyle({
+const headBackground = style({
   position: "absolute",
   width: "100%",
   height: "100%",
@@ -59,7 +59,7 @@ const headBackground = gnistStyle({
     }
   }
 });
-const body = gnistStyle({
+const body = style({
   padding: `${tokens.spacing.xxs} ${tokens.spacing.xxs} ${tokens.spacing.s}`
 });
 globalStyle("summary::-webkit-details-marker", {

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

@@ -5,10 +5,11 @@ 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 colors_css_js = require("@gnist/themes/colors.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const typography_css_js = require("@gnist/themes/typography.css.js");
-const cardsBase = layers_css_js.gnistStyle([
+const css = require("@vanilla-extract/css");
+const recipes = require("@vanilla-extract/recipes");
+const cardsBase = css.style([
   atoms_css_js.atoms({
     display: "block",
     boxShadow: "low",
@@ -21,7 +22,7 @@ const cardsBase = layers_css_js.gnistStyle([
     textDecoration: "none"
   }
 ]);
-const actionLayers = layers_css_js.gnistStyle([
+const actionLayers = css.style([
   animations_css.clickAnimation,
   states_css.focusStyle,
   states_css.stateLayers({
@@ -31,7 +32,7 @@ const actionLayers = layers_css_js.gnistStyle([
     setFocusState: true
   })
 ]);
-const cardsRecipe = layers_css_js.gnistRecipe({
+const cardsRecipe = recipes.recipe({
   base: [cardsBase],
   variants: {
     density: {
@@ -39,7 +40,7 @@ const cardsRecipe = layers_css_js.gnistRecipe({
       compact: atoms_css_js.atoms({ padding: "xs" })
     },
     transparent: {
-      true: { backgroundColor: "transparent" },
+      true: { background: "transparent" },
       false: ""
     },
     isLoading: {

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

@@ -5,7 +5,7 @@ export declare const cardsRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     };
     transparent: {
         true: {
-            backgroundColor: "transparent";
+            background: "transparent";
         };
         false: string;
     };

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

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

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

@@ -3,10 +3,11 @@ import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
 import { boxColors } from "@gnist/themes/colors.css.js";
-import { gnistStyle, gnistRecipe } from "@gnist/themes/layers.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { responsiveTypography } from "@gnist/themes/typography.css.js";
-const cardsBase = gnistStyle([
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+const cardsBase = style([
   atoms({
     display: "block",
     boxShadow: "low",
@@ -19,7 +20,7 @@ const cardsBase = gnistStyle([
     textDecoration: "none"
   }
 ]);
-const actionLayers = gnistStyle([
+const actionLayers = style([
   clickAnimation,
   focusStyle,
   stateLayers({
@@ -29,7 +30,7 @@ const actionLayers = gnistStyle([
     setFocusState: true
   })
 ]);
-const cardsRecipe = gnistRecipe({
+const cardsRecipe = recipe({
   base: [cardsBase],
   variants: {
     density: {
@@ -37,7 +38,7 @@ const cardsRecipe = gnistRecipe({
       compact: atoms({ padding: "xs" })
     },
     transparent: {
-      true: { backgroundColor: "transparent" },
+      true: { background: "transparent" },
       false: ""
     },
     isLoading: {

package/dist/components/surfaces/cards/checkboxCard.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 StyledCardRecipe = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const StyledCardRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       display: "flex",

package/dist/components/surfaces/cards/checkboxCard.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 StyledCardRecipe = gnistRecipe({
+import { recipe } from "@vanilla-extract/recipes";
+const StyledCardRecipe = recipe({
   base: [
     atoms({
       display: "flex",

package/dist/components/surfaces/cards/internal/SelectionCard.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 cardDescription = layers_css_js.gnistRecipe({
+const recipes = require("@vanilla-extract/recipes");
+const cardDescription = recipes.recipe({
   base: [atoms_css_js.atoms({ display: "block" })],
   variants: {
     density: {
@@ -21,7 +21,7 @@ const cardDescription = layers_css_js.gnistRecipe({
   },
   defaultVariants: { density: "default" }
 });
-const SelectionControlSkeletonRecipe = layers_css_js.gnistRecipe({
+const SelectionControlSkeletonRecipe = recipes.recipe({
   base: [
     atoms_css_js.atoms({
       height: "s",

package/dist/components/surfaces/cards/internal/SelectionCard.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 cardDescription = gnistRecipe({
+import { recipe } from "@vanilla-extract/recipes";
+const cardDescription = recipe({
   base: [atoms({ display: "block" })],
   variants: {
     density: {
@@ -19,7 +19,7 @@ const cardDescription = gnistRecipe({
   },
   defaultVariants: { density: "default" }
 });
-const SelectionControlSkeletonRecipe = gnistRecipe({
+const SelectionControlSkeletonRecipe = recipe({
   base: [
     atoms({
       height: "s",

package/dist/components/surfaces/cards/internal/SelectionCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACX,6CAAoE;AACrE,OAAO,EAAE,gBAAgB,EAAE,+BAAwC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CACxC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,CAC5D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB,CAAC,IAAI,CACpC,SAAQ,sBAAsB,EAC1B,aAAa,CAAC,KAAK,CAAC,EACpB,cAAc,EACd,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;CAAG;AAEhD,eAAO,MAAM,mBAAmB,uBAG7B;IAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAAA;CAAE,GAAG,gBAAgB,4CAcnD,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,IAAI,8CAKtC,IAAI,CACH,kBAAkB,CAAC,IAAI,CAAC,EACxB,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACnD,mDAiBA,CAAC"}
+{"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/surfaces/cards/internal/SelectionCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACX,6CAAoE;AACrE,OAAO,EAAE,gBAAgB,EAAE,+BAAwC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOhD,MAAM,WAAW,cAAc;IAC3B,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACvC;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CACxC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACjC,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,CAC5D,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAkB,CAAC,IAAI,CACpC,SAAQ,sBAAsB,EAC1B,aAAa,CAAC,KAAK,CAAC,EACpB,cAAc,EACd,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC;CAAG;AAEhD,eAAO,MAAM,mBAAmB,GAAI,oBAGjC;IAAE,IAAI,EAAE,UAAU,GAAG,OAAO,CAAA;CAAE,GAAG,gBAAgB,4CAcnD,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,IAAI,EAAG,4CAKzC,IAAI,CACH,kBAAkB,CAAC,IAAI,CAAC,EACxB,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CACnD,mDAoBA,CAAC"}