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

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

@@ -1,232 +1,148 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.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 { calc } from "@vanilla-extract/css-utils";
-const focusContainer = gnistStyle({
-  display: "inline-flex",
-  alignItems: "center",
-  position: "relative",
-  flexShrink: 0
+import { style } from "@vanilla-extract/css";
+//#region src/components/actions/selectionControls/switch.css.ts
+var focusContainer = style({
+	display: "inline-flex",
+	alignItems: "center",
+	position: "relative",
+	flexShrink: 0
 });
-const switchField = gnistStyle({
-  display: "inline-flex",
-  flexDirection: "column",
-  gap: tokens.spacing.base
+var switchField = style({
+	display: "inline-flex",
+	flexDirection: "column",
+	gap: tokens.spacing.base
 });
-const switchRow = gnistStyle({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: tokens.spacing.xxs
+var switchRow = style({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: tokens.spacing.xxs
 });
-const switchLabelContent = gnistStyle({
-  display: "inline-flex",
-  flexDirection: "column",
-  gap: tokens.spacing.base,
-  minWidth: 0
+var switchLabelContent = style({
+	display: "inline-flex",
+	flexDirection: "column",
+	gap: tokens.spacing.base,
+	minWidth: 0
 });
-const switchContainer = gnistStyle([
-  {
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    flexShrink: 0,
-    cursor: "pointer",
-    overflow: "hidden",
-    transition: "background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease"
-  },
-  atoms({
-    borderRadius: "full",
-    width: "xxl",
-    height: "m"
-  })
-]);
-const SwitchRecipe = gnistRecipe({
-  base: [
-    switchContainer,
-    {
-      borderWidth: tokens.stroke.small,
-      borderStyle: "solid",
-      boxSizing: "border-box",
-      selectors: {
-        [`${focusContainer}:has(input:focus-visible) &`]: {
-          boxShadow: `0 0 0 ${tokens.stroke.medium} ${tokens.color.interactive}`
-        },
-        [`${focusContainer}:has(input:not(:disabled):hover) &`]: {
-          filter: "brightness(0.98)"
-        },
-        [`${focusContainer}:has(input:not(:disabled):active) &`]: {
-          filter: "brightness(0.94)"
-        }
-      }
-    }
-  ],
-  variants: {
-    selected: {
-      true: [
-        atoms({
-          backgroundColor: "success",
-          borderColor: "success"
-        })
-      ],
-      false: [
-        atoms({
-          backgroundColor: "surface-variant",
-          borderColor: "on-surface"
-        })
-      ]
-    },
-    disabled: {
-      true: [
-        atoms({
-          backgroundColor: "disabled",
-          borderColor: "on-disabled"
-        }),
-        {
-          cursor: "not-allowed"
-        }
-      ],
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variants: {
-        selected: true,
-        disabled: true
-      },
-      style: [
-        atoms({
-          backgroundColor: "on-disabled",
-          borderColor: "on-disabled"
-        })
-      ]
-    }
-  ]
+var SwitchRecipe = recipe({
+	base: [style([{
+		position: "relative",
+		display: "inline-flex",
+		alignItems: "center",
+		flexShrink: 0,
+		cursor: "pointer",
+		overflow: "hidden",
+		transition: "background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease"
+	}, atoms({
+		borderRadius: "full",
+		width: "xxl",
+		height: "m"
+	})]), {
+		borderWidth: tokens.stroke.small,
+		borderStyle: "solid",
+		boxSizing: "border-box",
+		selectors: {
+			[`${focusContainer}:has(input:focus-visible) &`]: { boxShadow: `0 0 0 ${tokens.stroke.medium} ${tokens.color.interactive}` },
+			[`${focusContainer}:has(input:not(:disabled):hover) &`]: { filter: "brightness(0.98)" },
+			[`${focusContainer}:has(input:not(:disabled):active) &`]: { filter: "brightness(0.94)" }
+		}
+	}],
+	variants: {
+		selected: {
+			true: [atoms({
+				backgroundColor: "success",
+				borderColor: "success"
+			})],
+			false: [atoms({
+				backgroundColor: "surface-variant",
+				borderColor: "on-surface"
+			})]
+		},
+		disabled: {
+			true: [atoms({
+				backgroundColor: "disabled",
+				borderColor: "on-disabled"
+			}), { cursor: "not-allowed" }],
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		variants: {
+			selected: true,
+			disabled: true
+		},
+		style: [atoms({
+			backgroundColor: "on-disabled",
+			borderColor: "on-disabled"
+		})]
+	}]
 });
-const switchThumb = gnistStyle({
-  position: "absolute",
-  top: "50%",
-  transform: "translateY(-50%)",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  transition: "left 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease",
-  borderRadius: "50%",
-  backgroundColor: tokens.color.surface,
-  selectors: {
-    [`${focusContainer}:has(input:not(:disabled):active) &`]: {
-      transform: "translateY(-50%) scale(0.94)"
-    }
-  }
+var SwitchThumbRecipe = recipe({
+	base: [
+		style({
+			position: "absolute",
+			top: "50%",
+			transform: "translateY(-50%)",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			transition: "left 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease",
+			borderRadius: "50%",
+			backgroundColor: tokens.color.surface,
+			selectors: { [`${focusContainer}:has(input:not(:disabled):active) &`]: { transform: "translateY(-50%) scale(0.94)" } }
+		}),
+		atoms({
+			width: "s",
+			height: "s"
+		}),
+		{
+			borderWidth: tokens.stroke.small,
+			borderStyle: "solid",
+			boxSizing: "border-box"
+		}
+	],
+	variants: {
+		selected: {
+			true: [atoms({ borderColor: "on-surface" }), { left: calc.subtract("100%", calc.add(tokens.size.s, tokens.stroke.small)) }],
+			false: [atoms({ borderColor: "on-surface" }), { left: tokens.stroke.small }]
+		},
+		disabled: {
+			true: [atoms({
+				backgroundColor: "surface",
+				borderColor: "on-disabled"
+			})],
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		variants: {
+			selected: true,
+			disabled: true
+		},
+		style: [atoms({ borderColor: "surface" })]
+	}]
 });
-const SwitchThumbRecipe = gnistRecipe({
-  base: [
-    switchThumb,
-    atoms({
-      width: "s",
-      height: "s"
-    }),
-    {
-      borderWidth: tokens.stroke.small,
-      borderStyle: "solid",
-      boxSizing: "border-box"
-    }
-  ],
-  variants: {
-    selected: {
-      true: [
-        atoms({
-          borderColor: "on-surface"
-        }),
-        {
-          left: calc.subtract("100%", calc.add(tokens.size.s, tokens.stroke.small))
-        }
-      ],
-      false: [
-        atoms({
-          borderColor: "on-surface"
-        }),
-        {
-          left: tokens.stroke.small
-        }
-      ]
-    },
-    disabled: {
-      true: [
-        atoms({
-          backgroundColor: "surface",
-          borderColor: "on-disabled"
-        })
-      ],
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variants: {
-        selected: true,
-        disabled: true
-      },
-      style: [
-        atoms({
-          borderColor: "surface"
-        })
-      ]
-    }
-  ]
+var switchThumbIcon = style([{
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	lineHeight: 0,
+	pointerEvents: "none"
+}, atoms({ color: "on-surface" })]);
+var SwitchLabelRecipe = recipe({
+	base: [style([{
+		userSelect: "none",
+		fontSize: tokens.type.small.body.fontSize,
+		lineHeight: tokens.typeface.size.xl
+	}, atoms({ color: "on-surface" })])],
+	variants: { disabled: {
+		true: [atoms({ color: "on-disabled" })],
+		false: {}
+	} }
 });
-const switchThumbIcon = gnistStyle([
-  {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    lineHeight: 0,
-    pointerEvents: "none"
-  },
-  atoms({
-    color: "on-surface"
-  })
-]);
-const switchLabel = gnistStyle([
-  {
-    userSelect: "none",
-    fontSize: tokens.type.small.body.fontSize,
-    lineHeight: tokens.typeface.size.xl
-  },
-  atoms({
-    color: "on-surface"
-  })
-]);
-const SwitchLabelRecipe = gnistRecipe({
-  base: [switchLabel],
-  variants: {
-    disabled: {
-      true: [
-        atoms({
-          color: "on-disabled"
-        })
-      ],
-      false: {}
-    }
-  }
-});
-const switchDescription = gnistStyle([
-  atoms({
-    color: "text-variant"
-  })
-]);
-export {
-  SwitchLabelRecipe,
-  SwitchRecipe,
-  SwitchThumbRecipe,
-  focusContainer,
-  switchContainer,
-  switchDescription,
-  switchField,
-  switchLabel,
-  switchLabelContent,
-  switchRow,
-  switchThumb,
-  switchThumbIcon
-};
+var switchDescription = style([atoms({ color: "text-variant" })]);
+//#endregion
+export { SwitchLabelRecipe, SwitchRecipe, SwitchThumbRecipe, focusContainer, switchDescription, switchField, switchLabelContent, switchRow, switchThumbIcon };

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

@@ -1,31 +1,67 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const componentUtils = require("@gnist/component-utils");
-require("../../../foundation/iconography/ExtraIconsProvider.cjs");
-require("../../../foundation/iconography/IconVariantProvider.cjs");
-require("../../../foundation/iconography/icons.cjs");
-const Icon = require("../../../foundation/iconography/Icon.cjs");
-const index$1 = require("../../../foundation/typography/index.cjs");
-const index = require("../../../translations/index.cjs");
-const classNames = require("classnames");
-require("react");
-require("../../../foundation/logos/Logo.css.cjs");
-require("@gnist/themes/tokens.css.js");
-require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
-require("../../../utilities/accessibility/visuallyHidden.css.cjs");
-require("../../progress/Spinner.cjs");
-require("../../actions/buttons/styles.css.cjs");
-require("../../../styles/states.css.cjs");
-const TextButton = require("../../actions/buttons/TextButton.cjs");
-const IconButton = require("../../actions/buttons/IconButton.cjs");
-const AlertBanner_css = require("./AlertBanner.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const BannerHeading = componentUtils.component("BannerHeading", AlertBanner_css.bannerHeading, "h2");
-const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
-  const text = index.useTranslation((t) => t.components.feedback.alerts);
-  return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type, className: AlertBanner_css.icon({ type }) }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), typeof message === "string" ? jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }) : jsxRuntime.jsx("div", { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(TextButton.TextButton, { className: AlertBanner_css.actionButton, onClick: action.onClick, underline: true, children: action.label })] })] });
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_Icon = require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/iconography/index.cjs");
+const require_index$1 = require("../../../foundation/typography/index.cjs");
+const require_TextButton = require("../../actions/buttons/TextButton.cjs");
+const require_IconButton = require("../../actions/buttons/IconButton.cjs");
+require("../../actions/buttons/index.cjs");
+const require_index$3 = require("../../../translations/index.cjs");
+const require_AlertBanner_css = require("./AlertBanner.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_component_utils = require("@gnist/component-utils");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/feedback/alerts/AlertBanner.tsx
+var BannerHeading = (0, _gnist_component_utils.component)("BannerHeading", require_AlertBanner_css.bannerHeading, "h2");
+/** An alert banner displays an important and high-signal message, and provides actions for users to address (or dismiss the banner). They’re meant to be noticed and often requires a user action to be dismissed.
+
+Message is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take. The message prop can be string or other React Node.
+
+Title and button with a contextual action are optional.
+
+Documentation: [AlertBanner](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-alerts-alertbanner--docs)
+*/
+var AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
+	const text = require_index$3.useTranslation((t) => t.components.feedback.alerts);
+	return (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(className, require_AlertBanner_css.banner({
+			type,
+			density
+		})),
+		children: [(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			type,
+			icon: type,
+			className: require_AlertBanner_css.icon({ type })
+		}), (0, react_jsx_runtime.jsxs)("div", {
+			className: require_AlertBanner_css.mainContentContainer({ density }),
+			children: [
+				heading && (0, react_jsx_runtime.jsx)(BannerHeading, {
+					"$as": headingLevel,
+					children: heading
+				}),
+				dismiss && (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+					className: require_AlertBanner_css.closeButton,
+					icon: "close",
+					label: text.dismissLabel,
+					onClick: dismiss
+				}),
+				typeof message === "string" ? (0, react_jsx_runtime.jsx)(require_index$1.TextContainer, {
+					className: require_AlertBanner_css.messageContainer,
+					children: message
+				}) : (0, react_jsx_runtime.jsx)("div", {
+					className: require_AlertBanner_css.messageContainer,
+					children: message
+				}),
+				action && (0, react_jsx_runtime.jsx)(require_TextButton.TextButton, {
+					className: require_AlertBanner_css.actionButton,
+					onClick: action.onClick,
+					underline: true,
+					children: action.label
+				})
+			]
+		})]
+	});
 };
+//#endregion
 exports.AlertBanner = AlertBanner;

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

@@ -1,67 +1,54 @@
 "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 boxColors = (colorName) => atoms_css_js.atoms({
-  backgroundColor: `${colorName}-container`,
-  color: `on-${colorName}-container`,
-  borderColor: `on-${colorName}-container`
+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 _vanilla_extract_css = require("@vanilla-extract/css");
+//#region src/components/feedback/alerts/AlertBanner.css.ts
+var boxColors = (colorName) => (0, _gnist_themes_atoms_css_js.atoms)({
+	backgroundColor: `${colorName}-container`,
+	color: `on-${colorName}-container`,
+	borderColor: `on-${colorName}-container`
 });
-const banner = layers_css_js.gnistRecipe({
-  base: [
-    {
-      borderStyle: "solid"
-    },
-    atoms_css_js.atoms({
-      display: "flex",
-      borderWidth: "small",
-      borderRadius: "card"
-    })
-  ],
-  variants: {
-    density: {
-      default: atoms_css_js.atoms({ padding: "s" }),
-      compact: atoms_css_js.atoms({ padding: "xxs" })
-    },
-    type: {
-      success: boxColors("success"),
-      warning: boxColors("warning"),
-      error: boxColors("error"),
-      info: boxColors("info")
-    }
-  }
+var banner = (0, _vanilla_extract_recipes.recipe)({
+	base: [{ borderStyle: "solid" }, (0, _gnist_themes_atoms_css_js.atoms)({
+		display: "flex",
+		borderWidth: "small",
+		borderRadius: "card"
+	})],
+	variants: {
+		density: {
+			default: (0, _gnist_themes_atoms_css_js.atoms)({ padding: "s" }),
+			compact: (0, _gnist_themes_atoms_css_js.atoms)({ padding: "xxs" })
+		},
+		type: {
+			success: boxColors("success"),
+			warning: boxColors("warning"),
+			error: boxColors("error"),
+			info: boxColors("info")
+		}
+	}
 });
-const icon = layers_css_js.gnistRecipe({
-  variants: {
-    type: {
-      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" })
-    }
-  }
+var icon = (0, _vanilla_extract_recipes.recipe)({ variants: { type: {
+	success: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-success-container" }),
+	warning: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-warning-container" }),
+	error: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-error-container" }),
+	info: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-info-container" })
+} } });
+var mainContentContainer = (0, _vanilla_extract_recipes.recipe)({
+	base: [{ flex: 1 }],
+	variants: { density: {
+		default: (0, _gnist_themes_atoms_css_js.atoms)({ marginLeft: "xs" }),
+		compact: (0, _gnist_themes_atoms_css_js.atoms)({ marginLeft: "xxs" })
+	} }
 });
-const mainContentContainer = layers_css_js.gnistRecipe({
-  base: [
-    {
-      flex: 1
-    }
-  ],
-  variants: {
-    density: {
-      default: atoms_css_js.atoms({ marginLeft: "xs" }),
-      compact: atoms_css_js.atoms({ marginLeft: "xxs" })
-    }
-  }
-});
-const bannerHeading = layers_css_js.gnistStyle([
-  { 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 actionButton = atoms_css_js.atoms({ marginTop: "xs" });
+var bannerHeading = (0, _vanilla_extract_css.style)([{ float: "left" }, (0, _gnist_themes_atoms_css_js.atoms)({
+	margin: "none",
+	typography: "heading3-small"
+})]);
+var closeButton = (0, _vanilla_extract_css.style)({ float: "right" });
+var messageContainer = (0, _vanilla_extract_css.style)({ clear: "left" });
+var actionButton = (0, _gnist_themes_atoms_css_js.atoms)({ marginTop: "xs" });
+//#endregion
 exports.actionButton = actionButton;
 exports.banner = banner;
 exports.bannerHeading = bannerHeading;

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