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

package/dist/building-blocks/inputs/internal/textBelowInput.css.js

@@ -1,38 +1,38 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { gnistRecipe } from "@gnist/themes/layers.css.js";
-const textBelowInputRecipe = gnistRecipe({
-  base: [
-    atoms({
-      typography: "detail-small",
-      // Replaced description-small with 0.75rem fontsize
-      paddingTop: "base",
-      display: "flex",
-      alignItems: "center",
-      color: "text-variant"
-    })
-  ],
-  variants: {
-    validity: {
-      error: atoms({ color: "error" }),
-      success: atoms({ color: "success" })
-    },
-    isDisabled: {
-      true: atoms({ color: "on-disabled" }),
-      false: atoms({ color: "on-surface" })
-    }
-  },
-  compoundVariants: [
-    {
-      variants: { validity: "error", isDisabled: true },
-      style: atoms({ color: "error" })
-    },
-    {
-      variants: { validity: "success", isDisabled: true },
-      style: atoms({ color: "success" })
-    }
-  ]
+import { recipe } from "@vanilla-extract/recipes";
+//#region src/building-blocks/inputs/internal/textBelowInput.css.ts
+var textBelowInputRecipe = recipe({
+	base: [atoms({
+		typography: "detail-small",
+		paddingTop: "base",
+		display: "flex",
+		alignItems: "center",
+		color: "text-variant"
+	})],
+	variants: {
+		validity: {
+			error: atoms({ color: "error" }),
+			success: atoms({ color: "success" })
+		},
+		isDisabled: {
+			true: atoms({ color: "on-disabled" }),
+			false: atoms({ color: "on-surface" })
+		}
+	},
+	compoundVariants: [{
+		variants: {
+			validity: "error",
+			isDisabled: true
+		},
+		style: atoms({ color: "error" })
+	}, {
+		variants: {
+			validity: "success",
+			isDisabled: true
+		},
+		style: atoms({ color: "success" })
+	}]
 });
-export {
-  textBelowInputRecipe
-};
+//#endregion
+export { textBelowInputRecipe };

package/dist/building-blocks/skeletons/CircularSkeleton.cjs

@@ -1,23 +1,40 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const reactContentLoader = require("react-content-loader");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
-const ContentLoader = reactContentLoader__default.default;
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let react_content_loader = require("react-content-loader");
+react_content_loader = require_runtime.__toESM(react_content_loader, 1);
+//#region src/building-blocks/skeletons/CircularSkeleton.tsx
+var ContentLoader = react_content_loader.default;
 function transformDimension(dimension, transform) {
-  const numericPart = /(\d+)(\.\d+)?/.exec(dimension)?.[0];
-  if (!numericPart) {
-    return dimension;
-  }
-  const newNumericPart = transform(parseFloat(numericPart)).toString();
-  return dimension.replace(numericPart, newNumericPart);
+	const numericPart = /(\d+)(\.\d+)?/.exec(dimension)?.[0];
+	if (!numericPart) return dimension;
+	const newNumericPart = transform(parseFloat(numericPart)).toString();
+	return dimension.replace(numericPart, newNumericPart);
 }
-const CircularSkeleton = ({ className, height = "100%", width = "100%" }) => {
-  const halfHeight = transformDimension(height, (n) => n / 2);
-  const halfWidth = transformDimension(width, (n) => n / 2);
-  return jsxRuntime.jsx(ContentLoader, { height, width, title: "", className, backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("ellipse", { cx: halfWidth, cy: halfHeight, rx: halfWidth, ry: halfHeight }) });
+/**
+* A skeleton representing a circular or elliptical element.
+* By default, fills the entire width and height of the parent element.
+*
+* Documentation: [CircularSkeleton](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-skeletons-circularskeleton--docs)
+*/
+var CircularSkeleton = ({ className, height = "100%", width = "100%" }) => {
+	const halfHeight = transformDimension(height, (n) => n / 2);
+	const halfWidth = transformDimension(width, (n) => n / 2);
+	return (0, react_jsx_runtime.jsx)(ContentLoader, {
+		height,
+		width,
+		title: "",
+		className,
+		backgroundColor: _gnist_themes_tokens_css_js.tokens.color.loader,
+		foregroundColor: _gnist_themes_tokens_css_js.tokens.color["on-loader"],
+		children: (0, react_jsx_runtime.jsx)("ellipse", {
+			cx: halfWidth,
+			cy: halfHeight,
+			rx: halfWidth,
+			ry: halfHeight
+		})
+	});
 };
+//#endregion
 exports.CircularSkeleton = CircularSkeleton;

package/dist/building-blocks/skeletons/CircularSkeleton.js

@@ -2,20 +2,37 @@
 import { jsx } from "react/jsx-runtime";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import reactContentLoader from "react-content-loader";
-const ContentLoader = reactContentLoader;
+//#region src/building-blocks/skeletons/CircularSkeleton.tsx
+var ContentLoader = reactContentLoader;
 function transformDimension(dimension, transform) {
-  const numericPart = /(\d+)(\.\d+)?/.exec(dimension)?.[0];
-  if (!numericPart) {
-    return dimension;
-  }
-  const newNumericPart = transform(parseFloat(numericPart)).toString();
-  return dimension.replace(numericPart, newNumericPart);
+	const numericPart = /(\d+)(\.\d+)?/.exec(dimension)?.[0];
+	if (!numericPart) return dimension;
+	const newNumericPart = transform(parseFloat(numericPart)).toString();
+	return dimension.replace(numericPart, newNumericPart);
 }
-const CircularSkeleton = ({ className, height = "100%", width = "100%" }) => {
-  const halfHeight = transformDimension(height, (n) => n / 2);
-  const halfWidth = transformDimension(width, (n) => n / 2);
-  return jsx(ContentLoader, { height, width, title: "", className, backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("ellipse", { cx: halfWidth, cy: halfHeight, rx: halfWidth, ry: halfHeight }) });
-};
-export {
-  CircularSkeleton
+/**
+* A skeleton representing a circular or elliptical element.
+* By default, fills the entire width and height of the parent element.
+*
+* Documentation: [CircularSkeleton](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-skeletons-circularskeleton--docs)
+*/
+var CircularSkeleton = ({ className, height = "100%", width = "100%" }) => {
+	const halfHeight = transformDimension(height, (n) => n / 2);
+	const halfWidth = transformDimension(width, (n) => n / 2);
+	return jsx(ContentLoader, {
+		height,
+		width,
+		title: "",
+		className,
+		backgroundColor: tokens.color.loader,
+		foregroundColor: tokens.color["on-loader"],
+		children: jsx("ellipse", {
+			cx: halfWidth,
+			cy: halfHeight,
+			rx: halfWidth,
+			ry: halfHeight
+		})
+	});
 };
+//#endregion
+export { CircularSkeleton };

package/dist/building-blocks/skeletons/RectangularSkeleton.cjs

@@ -1,11 +1,32 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const reactContentLoader = require("react-content-loader");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
-const ContentLoader = reactContentLoader__default.default;
-const RectangularSkeleton = ({ className, height = "100%", width = "100%", rounded = false }) => jsxRuntime.jsx(ContentLoader, { height, width, title: "", className, backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: rounded ? "4" : "0", ry: rounded ? "4" : "0", height, width }) });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let react_content_loader = require("react-content-loader");
+react_content_loader = require_runtime.__toESM(react_content_loader, 1);
+//#region src/building-blocks/skeletons/RectangularSkeleton.tsx
+var ContentLoader = react_content_loader.default;
+/**
+* A skeleton representing a rectangular element.
+* By default, fills the entire width and height of the parent element.
+*
+* Documentation: [RectangularSkeleton](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-skeletons-rectangularskeleton--docs)
+*/
+var RectangularSkeleton = ({ className, height = "100%", width = "100%", rounded = false }) => (0, react_jsx_runtime.jsx)(ContentLoader, {
+	height,
+	width,
+	title: "",
+	className,
+	backgroundColor: _gnist_themes_tokens_css_js.tokens.color.loader,
+	foregroundColor: _gnist_themes_tokens_css_js.tokens.color["on-loader"],
+	children: (0, react_jsx_runtime.jsx)("rect", {
+		x: "0",
+		y: "0",
+		rx: rounded ? "4" : "0",
+		ry: rounded ? "4" : "0",
+		height,
+		width
+	})
+});
+//#endregion
 exports.RectangularSkeleton = RectangularSkeleton;

package/dist/building-blocks/skeletons/RectangularSkeleton.js

@@ -2,8 +2,29 @@
 import { jsx } from "react/jsx-runtime";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import reactContentLoader from "react-content-loader";
-const ContentLoader = reactContentLoader;
-const RectangularSkeleton = ({ className, height = "100%", width = "100%", rounded = false }) => jsx(ContentLoader, { height, width, title: "", className, backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: rounded ? "4" : "0", ry: rounded ? "4" : "0", height, width }) });
-export {
-  RectangularSkeleton
-};
+//#region src/building-blocks/skeletons/RectangularSkeleton.tsx
+var ContentLoader = reactContentLoader;
+/**
+* A skeleton representing a rectangular element.
+* By default, fills the entire width and height of the parent element.
+*
+* Documentation: [RectangularSkeleton](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-skeletons-rectangularskeleton--docs)
+*/
+var RectangularSkeleton = ({ className, height = "100%", width = "100%", rounded = false }) => jsx(ContentLoader, {
+	height,
+	width,
+	title: "",
+	className,
+	backgroundColor: tokens.color.loader,
+	foregroundColor: tokens.color["on-loader"],
+	children: jsx("rect", {
+		x: "0",
+		y: "0",
+		rx: rounded ? "4" : "0",
+		ry: rounded ? "4" : "0",
+		height,
+		width
+	})
+});
+//#endregion
+export { RectangularSkeleton };

package/dist/building-blocks/skeletons/TextSkeleton.cjs

@@ -1,17 +1,42 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const Row = require("../../utilities/layout/Row.cjs");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const reactContentLoader = require("react-content-loader");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
-const ContentLoader = reactContentLoader__default.default;
-const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
-  return jsxRuntime.jsx(Row.Row, { className, style: {
-    height: `calc(1em * ${tokens_css_js.tokens.typeface["line-height"]})`,
-    width
-  }, verticalAlign: "center", children: jsxRuntime.jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Row = require("../../utilities/layout/Row.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let react_content_loader = require("react-content-loader");
+react_content_loader = require_runtime.__toESM(react_content_loader, 1);
+//#region src/building-blocks/skeletons/TextSkeleton.tsx
+var ContentLoader = react_content_loader.default;
+/**
+* A skeleton representing a line of text.
+* By default, gets an appropriate height from the font-size of the parent element, and fills the entire width.
+*
+* Documentation: [TextSkeleton](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-skeletons-textskeleton--docs)
+*/
+var TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
+	return (0, react_jsx_runtime.jsx)(require_Row.Row, {
+		className,
+		style: {
+			height: `calc(1em * ${_gnist_themes_tokens_css_js.tokens.typeface["line-height"]})`,
+			width
+		},
+		verticalAlign: "center",
+		children: (0, react_jsx_runtime.jsx)(ContentLoader, {
+			height,
+			width,
+			title: "",
+			backgroundColor: _gnist_themes_tokens_css_js.tokens.color.loader,
+			foregroundColor: _gnist_themes_tokens_css_js.tokens.color["on-loader"],
+			children: (0, react_jsx_runtime.jsx)("rect", {
+				x: "0",
+				y: "0",
+				rx: "4",
+				ry: "6.7",
+				height,
+				width
+			})
+		})
+	});
 };
+//#endregion
 exports.TextSkeleton = TextSkeleton;

package/dist/building-blocks/skeletons/TextSkeleton.js

@@ -1,15 +1,40 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { Row } from "../../utilities/layout/Row.js";
+import { jsx } from "react/jsx-runtime";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import reactContentLoader from "react-content-loader";
-const ContentLoader = reactContentLoader;
-const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
-  return jsx(Row, { className, style: {
-    height: `calc(1em * ${tokens.typeface["line-height"]})`,
-    width
-  }, verticalAlign: "center", children: jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
-};
-export {
-  TextSkeleton
+//#region src/building-blocks/skeletons/TextSkeleton.tsx
+var ContentLoader = reactContentLoader;
+/**
+* A skeleton representing a line of text.
+* By default, gets an appropriate height from the font-size of the parent element, and fills the entire width.
+*
+* Documentation: [TextSkeleton](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-skeletons-textskeleton--docs)
+*/
+var TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
+	return jsx(Row, {
+		className,
+		style: {
+			height: `calc(1em * ${tokens.typeface["line-height"]})`,
+			width
+		},
+		verticalAlign: "center",
+		children: jsx(ContentLoader, {
+			height,
+			width,
+			title: "",
+			backgroundColor: tokens.color.loader,
+			foregroundColor: tokens.color["on-loader"],
+			children: jsx("rect", {
+				x: "0",
+				y: "0",
+				rx: "4",
+				ry: "6.7",
+				height,
+				width
+			})
+		})
+	});
 };
+//#endregion
+export { TextSkeleton };

package/dist/building-blocks/skeletons/index.cjs

@@ -1,9 +1,8 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const TextSkeleton = require("./TextSkeleton.cjs");
-const CircularSkeleton = require("./CircularSkeleton.cjs");
-const RectangularSkeleton = require("./RectangularSkeleton.cjs");
-exports.TextSkeleton = TextSkeleton.TextSkeleton;
-exports.CircularSkeleton = CircularSkeleton.CircularSkeleton;
-exports.RectangularSkeleton = RectangularSkeleton.RectangularSkeleton;
+const require_TextSkeleton = require("./TextSkeleton.cjs");
+const require_CircularSkeleton = require("./CircularSkeleton.cjs");
+const require_RectangularSkeleton = require("./RectangularSkeleton.cjs");
+exports.CircularSkeleton = require_CircularSkeleton.CircularSkeleton;
+exports.RectangularSkeleton = require_RectangularSkeleton.RectangularSkeleton;
+exports.TextSkeleton = require_TextSkeleton.TextSkeleton;

package/dist/building-blocks/skeletons/index.js

@@ -2,8 +2,4 @@
 import { TextSkeleton } from "./TextSkeleton.js";
 import { CircularSkeleton } from "./CircularSkeleton.js";
 import { RectangularSkeleton } from "./RectangularSkeleton.js";
-export {
-  CircularSkeleton,
-  RectangularSkeleton,
-  TextSkeleton
-};
+export { CircularSkeleton, RectangularSkeleton, TextSkeleton };

package/dist/components/actions/buttons/ButtonBase.cjs

@@ -1,58 +1,46 @@
 "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");
-const React = require("react");
-const classNames = require("classnames");
-require("../../../foundation/logos/Logo.css.cjs");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
-require("../../../utilities/accessibility/visuallyHidden.css.cjs");
-const Spinner = require("../../progress/Spinner.cjs");
-const styles_css = require("./styles.css.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === "object" && "default" in e) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
-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_ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
+require("../../../utilities/accessibility/index.cjs");
+const require_Spinner = require("../../progress/Spinner.cjs");
+require("../../progress/index.cjs");
+const require_styles_css = require("./styles.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+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/buttons/ButtonBase.tsx
 function BoxedButtonBase({ $as, as, children, className, loading, disabled = loading?.isLoading, type = "button", density = "default", ref, ...props }) {
-  const buttonProps = {
-    ...props,
-    disabled: loading?.isLoading === true ? loading.isLoading : disabled,
-    className: classNames__default.default(className, styles_css.boxedButton({ density })),
-    type,
-    ref
-  };
-  return React__namespace.createElement($as ?? as ?? "button", buttonProps, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React__namespace.Children.map(children, (child) => {
-    if (React__namespace.isValidElement(child) && child.type === Icon.Icon) {
-      return React__namespace.cloneElement(child, {
-        size: density === "compact" ? "m" : "l"
-      });
-    }
-    if (typeof child === "string") {
-      return jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: child });
-    }
-    return child;
-  }), loading?.isLoading && loading?.loadingText && jsxRuntime.jsx(Spinner.Spinner, { diameter: tokens_css_js.tokens.size[density === "compact" ? "xs" : "s"], textDescription: loading?.loadingText }), jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { "aria-live": "polite", children: loading?.isLoading && loading.loadingText })] }));
+	const buttonProps = {
+		...props,
+		disabled: loading?.isLoading === true ? loading.isLoading : disabled,
+		className: (0, classnames.default)(className, require_styles_css.boxedButton({ density })),
+		type,
+		ref
+	};
+	return react.createElement($as ?? as ?? "button", buttonProps, (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		react.Children.map(children, (child) => {
+			if (react.isValidElement(child) && child.type === require_Icon.Icon) return react.cloneElement(child, { size: density === "compact" ? "m" : "l" });
+			if (typeof child === "string") return (0, react_jsx_runtime.jsx)(require_index.BodyText, {
+				className: require_styles_css.actionText,
+				children: child
+			});
+			return child;
+		}),
+		loading?.isLoading && loading?.loadingText && (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, {
+			diameter: _gnist_themes_tokens_css_js.tokens.size[density === "compact" ? "xs" : "s"],
+			textDescription: loading?.loadingText
+		}),
+		(0, react_jsx_runtime.jsx)(require_ScreenReaderOnly.ScreenReaderOnly, {
+			"aria-live": "polite",
+			children: loading?.isLoading && loading.loadingText
+		})
+	] }));
 }
+//#endregion
 exports.BoxedButtonBase = BoxedButtonBase;

package/dist/components/actions/buttons/ButtonBase.js

@@ -1,38 +1,43 @@
 "use client";
-import { jsxs, Fragment, 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 * as React from "react";
-import classNames from "classnames";
-import "../../../foundation/logos/Logo.css.js";
-import { tokens } from "@gnist/themes/tokens.css.js";
+import "../../../foundation/index.js";
 import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
-import "../../../utilities/accessibility/visuallyHidden.css.js";
+import "../../../utilities/accessibility/index.js";
 import { Spinner } from "../../progress/Spinner.js";
-import { boxedButton, actionText } from "./styles.css.js";
+import "../../progress/index.js";
+import { actionText, boxedButton } from "./styles.css.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import classNames from "classnames";
+//#region src/components/actions/buttons/ButtonBase.tsx
 function BoxedButtonBase({ $as, as, children, className, loading, disabled = loading?.isLoading, type = "button", density = "default", ref, ...props }) {
-  const buttonProps = {
-    ...props,
-    disabled: loading?.isLoading === true ? loading.isLoading : disabled,
-    className: classNames(className, boxedButton({ density })),
-    type,
-    ref
-  };
-  return React.createElement($as ?? as ?? "button", buttonProps, jsxs(Fragment, { children: [React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.type === Icon) {
-      return React.cloneElement(child, {
-        size: density === "compact" ? "m" : "l"
-      });
-    }
-    if (typeof child === "string") {
-      return jsx(BodyText, { className: actionText, children: child });
-    }
-    return child;
-  }), loading?.isLoading && loading?.loadingText && jsx(Spinner, { diameter: tokens.size[density === "compact" ? "xs" : "s"], textDescription: loading?.loadingText }), jsx(ScreenReaderOnly, { "aria-live": "polite", children: loading?.isLoading && loading.loadingText })] }));
+	const buttonProps = {
+		...props,
+		disabled: loading?.isLoading === true ? loading.isLoading : disabled,
+		className: classNames(className, boxedButton({ density })),
+		type,
+		ref
+	};
+	return React.createElement($as ?? as ?? "button", buttonProps, jsxs(Fragment, { children: [
+		React.Children.map(children, (child) => {
+			if (React.isValidElement(child) && child.type === Icon) return React.cloneElement(child, { size: density === "compact" ? "m" : "l" });
+			if (typeof child === "string") return jsx(BodyText, {
+				className: actionText,
+				children: child
+			});
+			return child;
+		}),
+		loading?.isLoading && loading?.loadingText && jsx(Spinner, {
+			diameter: tokens.size[density === "compact" ? "xs" : "s"],
+			textDescription: loading?.loadingText
+		}),
+		jsx(ScreenReaderOnly, {
+			"aria-live": "polite",
+			children: loading?.isLoading && loading.loadingText
+		})
+	] }));
 }
-export {
-  BoxedButtonBase
-};
+//#endregion
+export { BoxedButtonBase };

package/dist/components/actions/buttons/DangerButton.cjs

@@ -1,10 +1,16 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ButtonBase = require("./ButtonBase.cjs");
-const createButtonVariant = require("./createButtonVariant.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_ButtonBase = require("./ButtonBase.cjs");
+const require_createButtonVariant = require("./createButtonVariant.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/actions/buttons/DangerButton.tsx
+/**
+The danger button appears as a final confirmation for a destructive action like deleting or removing content. These are found mostly in confirmation states and modals.
+
+Documentation: [DangerButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-dangerbutton--docs)
+*/
 function DangerButton(props) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("error", props) });
+	return (0, react_jsx_runtime.jsx)(require_ButtonBase.BoxedButtonBase, { ...require_createButtonVariant.getButtonVariantProps("error", props) });
 }
+//#endregion
 exports.DangerButton = DangerButton;

package/dist/components/actions/buttons/DangerButton.js

@@ -1,10 +1,15 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actions/buttons/DangerButton.tsx
+/**
+The danger button appears as a final confirmation for a destructive action like deleting or removing content. These are found mostly in confirmation states and modals.
+
+Documentation: [DangerButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-dangerbutton--docs)
+*/
 function DangerButton(props) {
-  return jsx(BoxedButtonBase, { ...getButtonVariantProps("error", props) });
+	return jsx(BoxedButtonBase, { ...getButtonVariantProps("error", props) });
 }
-export {
-  DangerButton
-};
+//#endregion
+export { DangerButton };