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

package/dist/components/actions/chips/ActionChip.js

@@ -1,31 +1,53 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { BodyText } from "../../../foundation/typography/index.js";
-import "react";
-import classNames from "classnames";
-import "../../../foundation/logos/Logo.css.js";
+import "../../../foundation/index.js";
+import { Spinner } from "../../progress/Spinner.js";
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
-import { tokens } from "@gnist/themes/tokens.css.js";
-import { Spinner } from "../../progress/Spinner.js";
-import { chipRecipe } from "./styles.css.js";
 import { actionText } from "../buttons/styles.css.js";
+import { chipRecipe } from "./styles.css.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import classNames from "classnames";
+//#region src/components/actions/chips/ActionChip.tsx
+/**
+* Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
+*
+* Action chips represent smart or automated actions. Action chips function as though the user asked an assistant to complete the action. Action chips should be shown dynamically and contextually in a UI underneath primary content.
+*
+* Action chips could also allow selection of a single chip from a set of options.
+* In this case action chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus. When used in this way, you should ensure that selecting a single action chip automatically deselects all other chips in the set.
+
+Documentation: [ActionChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-actionchip--docs)
+**/
 function ActionChip({ label, onClick, selected, icon, loading, density = "default", ...props }) {
-  return jsx("button", { type: "button", ...props, title: label, onClick, className: classNames(chipRecipe({
-    selected,
-    filterVariant: false,
-    loading: loading?.isLoading
-  }), clickAnimation, focusStyle, stateLayers({
-    borderSize: "medium",
-    borderRadius: "full",
-    backgroundColor: "on-background",
-    setFocusState: true
-  })), children: loading?.isLoading ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsxs(Fragment, { children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { className: actionText, children: label })] }) });
+	return jsx("button", {
+		type: "button",
+		...props,
+		title: label,
+		onClick,
+		className: classNames(chipRecipe({
+			selected,
+			filterVariant: false,
+			loading: loading?.isLoading
+		}), clickAnimation, focusStyle, stateLayers({
+			borderSize: "medium",
+			borderRadius: "full",
+			backgroundColor: "on-background",
+			setFocusState: true
+		})),
+		children: loading?.isLoading ? jsx(Spinner, {
+			diameter: density === "compact" ? tokens.size.xs : tokens.size.s,
+			textDescription: loading.loadingText
+		}) : jsxs(Fragment, { children: [icon && jsx(Icon, {
+			icon,
+			size: density === "compact" ? "m" : "l"
+		}), jsx(BodyText, {
+			className: actionText,
+			children: label
+		})] })
+	});
 }
-export {
-  ActionChip
-};
+//#endregion
+export { ActionChip };

package/dist/components/actions/chips/FilterChip.cjs

@@ -1,33 +1,50 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-require("../../../foundation/iconography/ExtraIconsProvider.cjs");
-require("../../../foundation/iconography/IconVariantProvider.cjs");
-require("../../../foundation/iconography/icons.cjs");
-const Icon = require("../../../foundation/iconography/Icon.cjs");
-const index = require("../../../foundation/typography/index.cjs");
-require("react");
-const classNames = require("classnames");
-require("../../../foundation/logos/Logo.css.cjs");
-const animations_css = require("../../../styles/animations.css.cjs");
-const states_css = require("../../../styles/states.css.cjs");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const Spinner = require("../../progress/Spinner.cjs");
-const styles_css$1 = require("./styles.css.cjs");
-const styles_css = require("../buttons/styles.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Icon = require("../../../foundation/iconography/Icon.cjs");
+const require_index = require("../../../foundation/typography/index.cjs");
+require("../../../foundation/index.cjs");
+const require_Spinner = require("../../progress/Spinner.cjs");
+require("../../progress/index.cjs");
+const require_animations_css = require("../../../styles/animations.css.cjs");
+const require_states_css = require("../../../styles/states.css.cjs");
+const require_styles_css = require("../buttons/styles.css.cjs");
+const require_styles_css$1 = require("./styles.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/actions/chips/FilterChip.tsx
+/**
+* Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
+*
+* Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes. Tapping on a filter chip activates it and appends a leading checkmark icon in front of the label. Multiple filter chips can be selected or unselected.
+
+Documentation: [FilterChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-filterchip--docs)
+**/
 function FilterChip({ label, onClick, selected, loading, density = "default", icon, ...props }) {
-  return jsxRuntime.jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames__default.default(styles_css$1.chipRecipe({
-    selected,
-    filterVariant: true,
-    loading: loading?.isLoading
-  }), animations_css.clickAnimation, states_css.focusStyle, states_css.stateLayers({
-    borderSize: "medium",
-    borderRadius: "full",
-    backgroundColor: "on-background",
-    setFocusState: true
-  })), children: [(icon || selected) && !loading?.isLoading && jsxRuntime.jsx(Icon.Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? jsxRuntime.jsx(Spinner.Spinner, { diameter: density === "compact" ? tokens_css_js.tokens.size.xs : tokens_css_js.tokens.size.s, textDescription: loading.loadingText }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }) })] });
+	return (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		...props,
+		title: label,
+		onClick,
+		className: (0, classnames.default)(require_styles_css$1.chipRecipe({
+			selected,
+			filterVariant: true,
+			loading: loading?.isLoading
+		}), require_animations_css.clickAnimation, require_states_css.focusStyle, require_states_css.stateLayers({
+			borderSize: "medium",
+			borderRadius: "full",
+			backgroundColor: "on-background",
+			setFocusState: true
+		})),
+		children: [(icon || selected) && !loading?.isLoading && (0, react_jsx_runtime.jsx)(require_Icon.Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, {
+			diameter: density === "compact" ? _gnist_themes_tokens_css_js.tokens.size.xs : _gnist_themes_tokens_css_js.tokens.size.s,
+			textDescription: loading.loadingText
+		}) : (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react_jsx_runtime.jsx)(require_index.BodyText, {
+			className: require_styles_css.actionText,
+			children: label
+		}) })]
+	});
 }
+//#endregion
 exports.FilterChip = FilterChip;

package/dist/components/actions/chips/FilterChip.js

@@ -1,31 +1,48 @@
 "use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { BodyText } from "../../../foundation/typography/index.js";
-import "react";
-import classNames from "classnames";
-import "../../../foundation/logos/Logo.css.js";
+import "../../../foundation/index.js";
+import { Spinner } from "../../progress/Spinner.js";
+import "../../progress/index.js";
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
-import { tokens } from "@gnist/themes/tokens.css.js";
-import { Spinner } from "../../progress/Spinner.js";
-import { chipRecipe } from "./styles.css.js";
 import { actionText } from "../buttons/styles.css.js";
+import { chipRecipe } from "./styles.css.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import classNames from "classnames";
+//#region src/components/actions/chips/FilterChip.tsx
+/**
+* Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
+*
+* Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes. Tapping on a filter chip activates it and appends a leading checkmark icon in front of the label. Multiple filter chips can be selected or unselected.
+
+Documentation: [FilterChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-filterchip--docs)
+**/
 function FilterChip({ label, onClick, selected, loading, density = "default", icon, ...props }) {
-  return jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames(chipRecipe({
-    selected,
-    filterVariant: true,
-    loading: loading?.isLoading
-  }), clickAnimation, focusStyle, stateLayers({
-    borderSize: "medium",
-    borderRadius: "full",
-    backgroundColor: "on-background",
-    setFocusState: true
-  })), children: [(icon || selected) && !loading?.isLoading && jsx(Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? jsx(Spinner, { diameter: density === "compact" ? tokens.size.xs : tokens.size.s, textDescription: loading.loadingText }) : jsx(Fragment, { children: jsx(BodyText, { className: actionText, children: label }) })] });
+	return jsxs("button", {
+		type: "button",
+		...props,
+		title: label,
+		onClick,
+		className: classNames(chipRecipe({
+			selected,
+			filterVariant: true,
+			loading: loading?.isLoading
+		}), clickAnimation, focusStyle, stateLayers({
+			borderSize: "medium",
+			borderRadius: "full",
+			backgroundColor: "on-background",
+			setFocusState: true
+		})),
+		children: [(icon || selected) && !loading?.isLoading && jsx(Icon, { icon: selected ? "check" : icon }), loading?.isLoading ? jsx(Spinner, {
+			diameter: density === "compact" ? tokens.size.xs : tokens.size.s,
+			textDescription: loading.loadingText
+		}) : jsx(Fragment, { children: jsx(BodyText, {
+			className: actionText,
+			children: label
+		}) })]
+	});
 }
-export {
-  FilterChip
-};
+//#endregion
+export { FilterChip };

package/dist/components/actions/chips/TagChip.cjs

@@ -1,27 +1,50 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-require("../../../foundation/iconography/ExtraIconsProvider.cjs");
-require("../../../foundation/iconography/IconVariantProvider.cjs");
-require("../../../foundation/iconography/icons.cjs");
-const Icon = require("../../../foundation/iconography/Icon.cjs");
-const index = require("../../../foundation/typography/index.cjs");
-require("react");
-const classNames = require("classnames");
-require("../../../foundation/logos/Logo.css.cjs");
-const animations_css = require("../../../styles/animations.css.cjs");
-const states_css = require("../../../styles/states.css.cjs");
-const styles_css$1 = require("./styles.css.cjs");
-const styles_css = require("../buttons/styles.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Icon = require("../../../foundation/iconography/Icon.cjs");
+const require_index = require("../../../foundation/typography/index.cjs");
+require("../../../foundation/index.cjs");
+const require_animations_css = require("../../../styles/animations.css.cjs");
+const require_states_css = require("../../../styles/states.css.cjs");
+const require_styles_css = require("../buttons/styles.css.cjs");
+const require_styles_css$1 = require("./styles.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/actions/chips/TagChip.tsx
+/**
+* Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
+*
+* Tag chips appear when selecting an option that triggers a tag and can be removed by clicking on the remove icon or unchecking the option. Tag chips appear within a multi select component or search field, presented as a horizontally scrollable list.
+
+Documentation: [TagChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-tagchip--docs)
+**/
 function TagChip({ label, onClick, icon, density = "default", ...props }) {
-  return jsxRuntime.jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames__default.default(styles_css$1.chipRecipe(), animations_css.clickAnimation, states_css.focusStyle, states_css.stateLayers({
-    borderSize: "medium",
-    borderRadius: "full",
-    backgroundColor: "on-background",
-    setFocusState: true
-  })), children: [icon && jsxRuntime.jsx(Icon.Icon, { icon, size: density === "compact" ? "m" : "l" }), jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }), jsxRuntime.jsx(Icon.Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
+	return (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		...props,
+		title: label,
+		onClick,
+		className: (0, classnames.default)(require_styles_css$1.chipRecipe(), require_animations_css.clickAnimation, require_states_css.focusStyle, require_states_css.stateLayers({
+			borderSize: "medium",
+			borderRadius: "full",
+			backgroundColor: "on-background",
+			setFocusState: true
+		})),
+		children: [
+			icon && (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				icon,
+				size: density === "compact" ? "m" : "l"
+			}),
+			(0, react_jsx_runtime.jsx)(require_index.BodyText, {
+				className: require_styles_css.actionText,
+				children: label
+			}),
+			(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				icon: "clear",
+				size: density === "compact" ? "m" : "l"
+			})
+		]
+	});
 }
+//#endregion
 exports.TagChip = TagChip;

package/dist/components/actions/chips/TagChip.js

@@ -1,25 +1,48 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { BodyText } from "../../../foundation/typography/index.js";
-import "react";
-import classNames from "classnames";
-import "../../../foundation/logos/Logo.css.js";
+import "../../../foundation/index.js";
 import { clickAnimation } from "../../../styles/animations.css.js";
 import { focusStyle, stateLayers } from "../../../styles/states.css.js";
-import { chipRecipe } from "./styles.css.js";
 import { actionText } from "../buttons/styles.css.js";
+import { chipRecipe } from "./styles.css.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+//#region src/components/actions/chips/TagChip.tsx
+/**
+* Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. Chips are typically displayed horizontally and sequentially.
+*
+* Tag chips appear when selecting an option that triggers a tag and can be removed by clicking on the remove icon or unchecking the option. Tag chips appear within a multi select component or search field, presented as a horizontally scrollable list.
+
+Documentation: [TagChip](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-chips-tagchip--docs)
+**/
 function TagChip({ label, onClick, icon, density = "default", ...props }) {
-  return jsxs("button", { type: "button", ...props, title: label, onClick, className: classNames(chipRecipe(), clickAnimation, focusStyle, stateLayers({
-    borderSize: "medium",
-    borderRadius: "full",
-    backgroundColor: "on-background",
-    setFocusState: true
-  })), children: [icon && jsx(Icon, { icon, size: density === "compact" ? "m" : "l" }), jsx(BodyText, { className: actionText, children: label }), jsx(Icon, { icon: "clear", size: density === "compact" ? "m" : "l" })] });
+	return jsxs("button", {
+		type: "button",
+		...props,
+		title: label,
+		onClick,
+		className: classNames(chipRecipe(), clickAnimation, focusStyle, stateLayers({
+			borderSize: "medium",
+			borderRadius: "full",
+			backgroundColor: "on-background",
+			setFocusState: true
+		})),
+		children: [
+			icon && jsx(Icon, {
+				icon,
+				size: density === "compact" ? "m" : "l"
+			}),
+			jsx(BodyText, {
+				className: actionText,
+				children: label
+			}),
+			jsx(Icon, {
+				icon: "clear",
+				size: density === "compact" ? "m" : "l"
+			})
+		]
+	});
 }
-export {
-  TagChip
-};
+//#endregion
+export { TagChip };

package/dist/components/actions/chips/index.cjs

@@ -1,9 +1,8 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ActionChip = require("./ActionChip.cjs");
-const FilterChip = require("./FilterChip.cjs");
-const TagChip = require("./TagChip.cjs");
-exports.ActionChip = ActionChip.ActionChip;
-exports.FilterChip = FilterChip.FilterChip;
-exports.TagChip = TagChip.TagChip;
+const require_ActionChip = require("./ActionChip.cjs");
+const require_FilterChip = require("./FilterChip.cjs");
+const require_TagChip = require("./TagChip.cjs");
+exports.ActionChip = require_ActionChip.ActionChip;
+exports.FilterChip = require_FilterChip.FilterChip;
+exports.TagChip = require_TagChip.TagChip;

package/dist/components/actions/chips/index.js

@@ -2,8 +2,4 @@
 import { ActionChip } from "./ActionChip.js";
 import { FilterChip } from "./FilterChip.js";
 import { TagChip } from "./TagChip.js";
-export {
-  ActionChip,
-  FilterChip,
-  TagChip
-};
+export { ActionChip, FilterChip, TagChip };

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

@@ -1,73 +1,65 @@
 "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 cssUtils = require("@vanilla-extract/css-utils");
-const chipBase = layers_css_js.gnistStyle({
-  display: "flex",
-  gap: tokens_css_js.tokens.spacing.base,
-  textWrap: "nowrap",
-  border: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.primary}`,
-  padding: `${tokens_css_js.tokens.spacing.base} ${tokens_css_js.tokens.spacing.xs}`,
-  borderRadius: tokens_css_js.tokens["border-radius"].full,
-  color: tokens_css_js.tokens.color["on-background"],
-  backgroundColor: tokens_css_js.tokens.color.background,
-  cursor: "pointer",
-  position: "relative",
-  minHeight: tokens_css_js.tokens.size.xl,
-  justifyContent: "center"
+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");
+let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
+//#region src/components/actions/chips/styles.css.ts
+var chipBase = (0, require("@vanilla-extract/css").style)({
+	display: "flex",
+	gap: _gnist_themes_tokens_css_js.tokens.spacing.base,
+	textWrap: "nowrap",
+	border: `${_gnist_themes_tokens_css_js.tokens.stroke.medium} solid ${_gnist_themes_tokens_css_js.tokens.color.primary}`,
+	padding: `${_gnist_themes_tokens_css_js.tokens.spacing.base} ${_gnist_themes_tokens_css_js.tokens.spacing.xs}`,
+	borderRadius: _gnist_themes_tokens_css_js.tokens["border-radius"].full,
+	color: _gnist_themes_tokens_css_js.tokens.color["on-background"],
+	backgroundColor: _gnist_themes_tokens_css_js.tokens.color.background,
+	cursor: "pointer",
+	position: "relative",
+	minHeight: _gnist_themes_tokens_css_js.tokens.size.xl,
+	justifyContent: "center"
 });
-const chipRecipe = layers_css_js.gnistRecipe({
-  base: chipBase,
-  variants: {
-    selected: {
-      true: [
-        {
-          backgroundColor: tokens_css_js.tokens.color.primary,
-          color: tokens_css_js.tokens.color["on-primary"],
-          borderColor: tokens_css_js.tokens.color.primary
-        }
-      ],
-      false: {}
-    },
-    filterVariant: {
-      true: [
-        atoms_css_js.atoms({
-          backgroundColor: "on-background",
-          color: "background",
-          borderColor: "on-background"
-        })
-      ],
-      false: {}
-    },
-    loading: {
-      true: [
-        atoms_css_js.atoms({
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        }),
-        {
-          minWidth: cssUtils.calc.multiply(tokens_css_js.tokens.size.xxl, 2),
-          border: "none",
-          cursor: "not-allowed",
-          backgroundColor: tokens_css_js.tokens.color.disabled
-        }
-      ],
-      false: {}
-    },
-    filled: {
-      true: [
-        {
-          backgroundColor: tokens_css_js.tokens.color["primary-container"],
-          color: tokens_css_js.tokens.color["on-primary"],
-          borderColor: tokens_css_js.tokens.color.primary
-        }
-      ],
-      false: {}
-    }
-  }
+var chipRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: chipBase,
+	variants: {
+		selected: {
+			true: [{
+				backgroundColor: _gnist_themes_tokens_css_js.tokens.color.primary,
+				color: _gnist_themes_tokens_css_js.tokens.color["on-primary"],
+				borderColor: _gnist_themes_tokens_css_js.tokens.color.primary
+			}],
+			false: {}
+		},
+		filterVariant: {
+			true: [(0, _gnist_themes_atoms_css_js.atoms)({
+				backgroundColor: "on-background",
+				color: "background",
+				borderColor: "on-background"
+			})],
+			false: {}
+		},
+		loading: {
+			true: [(0, _gnist_themes_atoms_css_js.atoms)({
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center"
+			}), {
+				minWidth: _vanilla_extract_css_utils.calc.multiply(_gnist_themes_tokens_css_js.tokens.size.xxl, 2),
+				border: "none",
+				cursor: "not-allowed",
+				backgroundColor: _gnist_themes_tokens_css_js.tokens.color.disabled
+			}],
+			false: {}
+		},
+		filled: {
+			true: [{
+				backgroundColor: _gnist_themes_tokens_css_js.tokens.color["primary-container"],
+				color: _gnist_themes_tokens_css_js.tokens.color["on-primary"],
+				borderColor: _gnist_themes_tokens_css_js.tokens.color.primary
+			}],
+			false: {}
+		}
+	}
 });
+//#endregion
 exports.chipRecipe = chipRecipe;

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"}