@gnist/design-system 6.0.0-alpha.3 → 6.1.0

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

@@ -1,85 +1,88 @@
 "use client";
-"use strict";
-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 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([
-  atoms_css_js.atoms({
-    display: "block",
-    boxShadow: "low",
-    borderRadius: "card"
-  }),
-  colors_css_js.boxColors["surface-variant"],
-  {
-    boxSizing: "border-box",
-    position: "relative",
-    textDecoration: "none"
-  }
+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_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+let _gnist_themes_typography_css_js = require("@gnist/themes/typography.css.js");
+let _gnist_themes_colors_css_js = require("@gnist/themes/colors.css.js");
+//#region src/components/surfaces/cards/cards.css.ts
+var cardsBase = (0, _vanilla_extract_css.style)([
+	(0, _gnist_themes_atoms_css_js.atoms)({
+		display: "block",
+		boxShadow: "low",
+		borderRadius: "card"
+	}),
+	_gnist_themes_colors_css_js.boxColors["surface-variant"],
+	{
+		boxSizing: "border-box",
+		position: "relative",
+		textDecoration: "none"
+	}
 ]);
-const actionLayers = layers_css_js.gnistStyle([
-  animations_css.clickAnimation,
-  states_css.focusStyle,
-  states_css.stateLayers({
-    borderSize: "x-small",
-    borderRadius: "card",
-    backgroundColor: "on-surface-variant",
-    setFocusState: true
-  })
+var actionLayers = (0, _vanilla_extract_css.style)([
+	require_animations_css.clickAnimation,
+	require_states_css.focusStyle,
+	require_states_css.stateLayers({
+		borderSize: "x-small",
+		borderRadius: "card",
+		backgroundColor: "on-surface-variant",
+		setFocusState: true
+	})
 ]);
-const cardsRecipe = layers_css_js.gnistRecipe({
-  base: [cardsBase],
-  variants: {
-    density: {
-      default: atoms_css_js.atoms({ padding: "l" }),
-      compact: atoms_css_js.atoms({ padding: "xs" })
-    },
-    transparent: {
-      true: { background: "transparent" },
-      false: ""
-    },
-    isLoading: {
-      false: "",
-      //styling depends on type
-      true: ""
-    },
-    type: {
-      action: [
-        { border: "none", width: "100%", textAlign: "start" },
-        typography_css_js.responsiveTypography["body"]
-      ],
-      checkbox: {},
-      info: [
-        {
-          borderStyle: "solid",
-          borderWidth: tokens_css_js.tokens.stroke["x-small"],
-          borderColor: tokens_css_js.tokens.color.outline,
-          boxShadow: "none"
-        }
-      ],
-      link: { cursor: "pointer" },
-      radio: {},
-      selection: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variants: { isLoading: false, type: "action" },
-      style: [{ cursor: "pointer" }, actionLayers]
-    },
-    {
-      variants: { type: "link", isLoading: false },
-      style: actionLayers
-    }
-  ],
-  defaultVariants: {
-    density: "default",
-    isLoading: false,
-    transparent: false
-  }
+var cardsRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [cardsBase],
+	variants: {
+		density: {
+			default: (0, _gnist_themes_atoms_css_js.atoms)({ padding: "l" }),
+			compact: (0, _gnist_themes_atoms_css_js.atoms)({ padding: "xs" })
+		},
+		transparent: {
+			true: { background: "transparent" },
+			false: ""
+		},
+		isLoading: {
+			false: "",
+			true: ""
+		},
+		type: {
+			action: [{
+				border: "none",
+				width: "100%",
+				textAlign: "start"
+			}, _gnist_themes_typography_css_js.responsiveTypography["body"]],
+			checkbox: {},
+			info: [{
+				borderStyle: "solid",
+				borderWidth: _gnist_themes_tokens_css_js.tokens.stroke["x-small"],
+				borderColor: _gnist_themes_tokens_css_js.tokens.color.outline,
+				boxShadow: "none"
+			}],
+			link: { cursor: "pointer" },
+			radio: {},
+			selection: {}
+		}
+	},
+	compoundVariants: [{
+		variants: {
+			isLoading: false,
+			type: "action"
+		},
+		style: [{ cursor: "pointer" }, actionLayers]
+	}, {
+		variants: {
+			type: "link",
+			isLoading: false
+		},
+		style: actionLayers
+	}],
+	defaultVariants: {
+		density: "default",
+		isLoading: false,
+		transparent: false
+	}
 });
+//#endregion
 exports.cardsRecipe = cardsRecipe;

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

@@ -2,84 +2,86 @@
 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 { recipe } from "@vanilla-extract/recipes";
 import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
 import { responsiveTypography } from "@gnist/themes/typography.css.js";
-const cardsBase = gnistStyle([
-  atoms({
-    display: "block",
-    boxShadow: "low",
-    borderRadius: "card"
-  }),
-  boxColors["surface-variant"],
-  {
-    boxSizing: "border-box",
-    position: "relative",
-    textDecoration: "none"
-  }
+import { boxColors } from "@gnist/themes/colors.css.js";
+//#region src/components/surfaces/cards/cards.css.ts
+var cardsBase = style([
+	atoms({
+		display: "block",
+		boxShadow: "low",
+		borderRadius: "card"
+	}),
+	boxColors["surface-variant"],
+	{
+		boxSizing: "border-box",
+		position: "relative",
+		textDecoration: "none"
+	}
 ]);
-const actionLayers = gnistStyle([
-  clickAnimation,
-  focusStyle,
-  stateLayers({
-    borderSize: "x-small",
-    borderRadius: "card",
-    backgroundColor: "on-surface-variant",
-    setFocusState: true
-  })
+var actionLayers = style([
+	clickAnimation,
+	focusStyle,
+	stateLayers({
+		borderSize: "x-small",
+		borderRadius: "card",
+		backgroundColor: "on-surface-variant",
+		setFocusState: true
+	})
 ]);
-const cardsRecipe = gnistRecipe({
-  base: [cardsBase],
-  variants: {
-    density: {
-      default: atoms({ padding: "l" }),
-      compact: atoms({ padding: "xs" })
-    },
-    transparent: {
-      true: { background: "transparent" },
-      false: ""
-    },
-    isLoading: {
-      false: "",
-      //styling depends on type
-      true: ""
-    },
-    type: {
-      action: [
-        { border: "none", width: "100%", textAlign: "start" },
-        responsiveTypography["body"]
-      ],
-      checkbox: {},
-      info: [
-        {
-          borderStyle: "solid",
-          borderWidth: tokens.stroke["x-small"],
-          borderColor: tokens.color.outline,
-          boxShadow: "none"
-        }
-      ],
-      link: { cursor: "pointer" },
-      radio: {},
-      selection: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variants: { isLoading: false, type: "action" },
-      style: [{ cursor: "pointer" }, actionLayers]
-    },
-    {
-      variants: { type: "link", isLoading: false },
-      style: actionLayers
-    }
-  ],
-  defaultVariants: {
-    density: "default",
-    isLoading: false,
-    transparent: false
-  }
+var cardsRecipe = recipe({
+	base: [cardsBase],
+	variants: {
+		density: {
+			default: atoms({ padding: "l" }),
+			compact: atoms({ padding: "xs" })
+		},
+		transparent: {
+			true: { background: "transparent" },
+			false: ""
+		},
+		isLoading: {
+			false: "",
+			true: ""
+		},
+		type: {
+			action: [{
+				border: "none",
+				width: "100%",
+				textAlign: "start"
+			}, responsiveTypography["body"]],
+			checkbox: {},
+			info: [{
+				borderStyle: "solid",
+				borderWidth: tokens.stroke["x-small"],
+				borderColor: tokens.color.outline,
+				boxShadow: "none"
+			}],
+			link: { cursor: "pointer" },
+			radio: {},
+			selection: {}
+		}
+	},
+	compoundVariants: [{
+		variants: {
+			isLoading: false,
+			type: "action"
+		},
+		style: [{ cursor: "pointer" }, actionLayers]
+	}, {
+		variants: {
+			type: "link",
+			isLoading: false
+		},
+		style: actionLayers
+	}],
+	defaultVariants: {
+		density: "default",
+		isLoading: false,
+		transparent: false
+	}
 });
-export {
-  cardsRecipe
-};
+//#endregion
+export { cardsRecipe };

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

@@ -1,34 +1,24 @@
 "use client";
-"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({
-  base: [
-    atoms_css_js.atoms({
-      display: "flex",
-      flexDirection: "column"
-    }),
-    {
-      position: "relative"
-    }
-  ],
-  variants: {
-    disabled: {
-      true: {
-        color: tokens_css_js.tokens.color["on-disabled"]
-      }
-    },
-    cardStyle: {
-      elevation: [
-        {
-          boxShadow: tokens_css_js.tokens.elevation.low,
-          border: "none"
-        }
-      ],
-      outline: []
-    }
-  }
+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_tokens_css_js = require("@gnist/themes/tokens.css.js");
+//#region src/components/surfaces/cards/checkboxCard.css.ts
+var StyledCardRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({
+		display: "flex",
+		flexDirection: "column"
+	}), { position: "relative" }],
+	variants: {
+		disabled: { true: { color: _gnist_themes_tokens_css_js.tokens.color["on-disabled"] } },
+		cardStyle: {
+			elevation: [{
+				boxShadow: _gnist_themes_tokens_css_js.tokens.elevation.low,
+				border: "none"
+			}],
+			outline: []
+		}
+	}
 });
+//#endregion
 exports.StyledCardRecipe = StyledCardRecipe;

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

@@ -1,34 +1,23 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe } from "@gnist/themes/layers.css.js";
+import { recipe } from "@vanilla-extract/recipes";
 import { tokens } from "@gnist/themes/tokens.css.js";
-const StyledCardRecipe = gnistRecipe({
-  base: [
-    atoms({
-      display: "flex",
-      flexDirection: "column"
-    }),
-    {
-      position: "relative"
-    }
-  ],
-  variants: {
-    disabled: {
-      true: {
-        color: tokens.color["on-disabled"]
-      }
-    },
-    cardStyle: {
-      elevation: [
-        {
-          boxShadow: tokens.elevation.low,
-          border: "none"
-        }
-      ],
-      outline: []
-    }
-  }
+//#region src/components/surfaces/cards/checkboxCard.css.ts
+var StyledCardRecipe = recipe({
+	base: [atoms({
+		display: "flex",
+		flexDirection: "column"
+	}), { position: "relative" }],
+	variants: {
+		disabled: { true: { color: tokens.color["on-disabled"] } },
+		cardStyle: {
+			elevation: [{
+				boxShadow: tokens.elevation.low,
+				border: "none"
+			}],
+			outline: []
+		}
+	}
 });
-export {
-  StyledCardRecipe
-};
+//#endregion
+export { StyledCardRecipe };

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

@@ -1,13 +1,12 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ActionCard = require("./ActionCard.cjs");
-const CheckboxCard = require("./CheckboxCard.cjs");
-const InfoCard = require("./InfoCard.cjs");
-const LinkCard = require("./LinkCard.cjs");
-const RadioCard = require("./RadioCard.cjs");
-exports.ActionCard = ActionCard.ActionCard;
-exports.CheckboxCard = CheckboxCard.CheckboxCard;
-exports.InfoCard = InfoCard.InfoCard;
-exports.LinkCard = LinkCard.LinkCard;
-exports.RadioCard = RadioCard.RadioCard;
+const require_ActionCard = require("./ActionCard.cjs");
+const require_InfoCard = require("./InfoCard.cjs");
+const require_CheckboxCard = require("./CheckboxCard.cjs");
+const require_LinkCard = require("./LinkCard.cjs");
+const require_RadioCard = require("./RadioCard.cjs");
+exports.ActionCard = require_ActionCard.ActionCard;
+exports.CheckboxCard = require_CheckboxCard.CheckboxCard;
+exports.InfoCard = require_InfoCard.InfoCard;
+exports.LinkCard = require_LinkCard.LinkCard;
+exports.RadioCard = require_RadioCard.RadioCard;

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

@@ -1,13 +1,7 @@
 "use client";
 import { ActionCard } from "./ActionCard.js";
-import { CheckboxCard } from "./CheckboxCard.js";
 import { InfoCard } from "./InfoCard.js";
+import { CheckboxCard } from "./CheckboxCard.js";
 import { LinkCard } from "./LinkCard.js";
 import { RadioCard } from "./RadioCard.js";
-export {
-  ActionCard,
-  CheckboxCard,
-  InfoCard,
-  LinkCard,
-  RadioCard
-};
+export { ActionCard, CheckboxCard, InfoCard, LinkCard, RadioCard };

package/dist/components/surfaces/cards/internal/SelectionCard.cjs

@@ -1,35 +1,40 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("@formkit/auto-animate/react");
-const componentUtils = require("@gnist/component-utils");
-require("../../../../building-blocks/inputs/internal/TextBelowInput.cjs");
-require("../../../../foundation/iconography/ExtraIconsProvider.cjs");
-require("../../../../foundation/iconography/IconVariantProvider.cjs");
-require("../../../../foundation/iconography/icons.cjs");
-require("../../../../foundation/iconography/Icon.cjs");
-require("../../../../foundation/typography/index.cjs");
-require("react");
-require("classnames");
-require("../../../../foundation/logos/Logo.css.cjs");
-require("@gnist/themes/atoms.css.js");
-const TextSkeleton = require("../../../../building-blocks/skeletons/TextSkeleton.cjs");
-require("@gnist/themes/tokens.css.js");
-require("react-content-loader");
-const RectangularSkeleton = require("../../../../building-blocks/skeletons/RectangularSkeleton.cjs");
-require("../../../../utilities/layout/Column.cjs");
-const Row = require("../../../../utilities/layout/Row.cjs");
-const SelectionCard_css = require("./SelectionCard.css.cjs");
-const shared_css = require("../../../actions/selectionControls/shared.css.cjs");
-const SelectionCardLoader = ({ type, density }) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Row.Row, { gap: "base", verticalAlign: "baseline", children: [jsxRuntime.jsx(RectangularSkeleton.RectangularSkeleton, { className: SelectionCard_css.SelectionControlSkeletonRecipe({ type }) }), jsxRuntime.jsx(TextSkeleton.TextSkeleton, {})] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CardDescription, { density, children: jsxRuntime.jsx(TextSkeleton.TextSkeleton, {}) }) })] });
-const CardDescription = componentUtils.component("CardDescription", SelectionCard_css.cardDescription, "span");
-const SelectionCardContent = ({ description, value, density, children }) => {
-  const [animationParent] = react.useAutoAnimate();
-  if (!(description || children)) {
-    return null;
-  }
-  return jsxRuntime.jsxs("div", { className: shared_css.indentedDescriptionStyle, ref: animationParent, children: [description && jsxRuntime.jsx(CardDescription, { density, children: description }), value && children && jsxRuntime.jsx(CardDescription, { density, children })] });
+require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_shared_css = require("../../../actions/selectionControls/shared.css.cjs");
+const require_Row = require("../../../../utilities/layout/Row.cjs");
+require("../../../../utilities/layout/index.cjs");
+const require_TextSkeleton = require("../../../../building-blocks/skeletons/TextSkeleton.cjs");
+const require_RectangularSkeleton = require("../../../../building-blocks/skeletons/RectangularSkeleton.cjs");
+require("../../../../building-blocks/index.cjs");
+const require_SelectionCard_css = require("./SelectionCard.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_component_utils = require("@gnist/component-utils");
+let _formkit_auto_animate_react = require("@formkit/auto-animate/react");
+//#region src/components/surfaces/cards/internal/SelectionCard.tsx
+var SelectionCardLoader = ({ type, density }) => (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)(require_Row.Row, {
+	gap: "base",
+	verticalAlign: "baseline",
+	children: [(0, react_jsx_runtime.jsx)(require_RectangularSkeleton.RectangularSkeleton, { className: require_SelectionCard_css.SelectionControlSkeletonRecipe({ type }) }), (0, react_jsx_runtime.jsx)(require_TextSkeleton.TextSkeleton, {})]
+}), (0, react_jsx_runtime.jsx)("div", { children: (0, react_jsx_runtime.jsx)(CardDescription, {
+	density,
+	children: (0, react_jsx_runtime.jsx)(require_TextSkeleton.TextSkeleton, {})
+}) })] });
+var CardDescription = (0, _gnist_component_utils.component)("CardDescription", require_SelectionCard_css.cardDescription, "span");
+var SelectionCardContent = ({ description, value, density, children }) => {
+	const [animationParent] = (0, _formkit_auto_animate_react.useAutoAnimate)();
+	if (!(description || children)) return null;
+	return (0, react_jsx_runtime.jsxs)("div", {
+		className: require_shared_css.indentedDescriptionStyle,
+		ref: animationParent,
+		children: [description && (0, react_jsx_runtime.jsx)(CardDescription, {
+			density,
+			children: description
+		}), value && children && (0, react_jsx_runtime.jsx)(CardDescription, {
+			density,
+			children
+		})]
+	});
 };
+//#endregion
 exports.SelectionCardContent = SelectionCardContent;
 exports.SelectionCardLoader = SelectionCardLoader;

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

@@ -1,44 +1,33 @@
 "use client";
-"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({
-  base: [atoms_css_js.atoms({ display: "block" })],
-  variants: {
-    density: {
-      default: atoms_css_js.atoms({
-        typography: "detail-large",
-        // Replaced description-large with 0.875rem fontsize
-        marginTop: "xxs"
-      }),
-      compact: atoms_css_js.atoms({
-        typography: "detail-small",
-        // Replaced description-small with 0.75rem fontsize
-        marginTop: "base"
-      })
-    }
-  },
-  defaultVariants: { density: "default" }
+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");
+//#region src/components/surfaces/cards/internal/SelectionCard.css.ts
+var cardDescription = (0, _vanilla_extract_recipes.recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({ display: "block" })],
+	variants: { density: {
+		default: (0, _gnist_themes_atoms_css_js.atoms)({
+			typography: "detail-large",
+			marginTop: "xxs"
+		}),
+		compact: (0, _gnist_themes_atoms_css_js.atoms)({
+			typography: "detail-small",
+			marginTop: "base"
+		})
+	} },
+	defaultVariants: { density: "default" }
 });
-const SelectionControlSkeletonRecipe = layers_css_js.gnistRecipe({
-  base: [
-    atoms_css_js.atoms({
-      height: "s",
-      width: "s",
-      margin: "base"
-    })
-  ],
-  variants: {
-    type: {
-      radio: atoms_css_js.atoms({
-        borderRadius: "full"
-      }),
-      checkbox: atoms_css_js.atoms({
-        borderRadius: "button"
-      })
-    }
-  }
+var SelectionControlSkeletonRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({
+		height: "s",
+		width: "s",
+		margin: "base"
+	})],
+	variants: { type: {
+		radio: (0, _gnist_themes_atoms_css_js.atoms)({ borderRadius: "full" }),
+		checkbox: (0, _gnist_themes_atoms_css_js.atoms)({ borderRadius: "button" })
+	} }
 });
+//#endregion
 exports.SelectionControlSkeletonRecipe = SelectionControlSkeletonRecipe;
 exports.cardDescription = cardDescription;