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

package/CHANGELOG.md

@@ -3,34 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.0-alpha.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.0.0-alpha.2...@gnist/design-system@6.0.0-alpha.3) (2026-04-20)
+## [6.1.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.0.0...@gnist/design-system@6.1.0) (2026-04-28)
 
-**Note:** Version bump only for package @gnist/design-system
+### Features
 
-## [6.0.0-alpha.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.0.0-alpha.1...@gnist/design-system@6.0.0-alpha.2) (2026-04-20)
+* add icons `add_circle` and `content_copy` ([d9c9ccb](https://github.com/mollerdigital/design-system-design-system/commit/d9c9ccb037c889f819126fc25687bf0a5f9e6d1c))
 
-**Note:** Version bump only for package @gnist/design-system
+## [6.0.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.8.0...@gnist/design-system@6.0.0) (2026-04-27)
 
-## [6.0.0-alpha.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@6.0.0-alpha.0...@gnist/design-system@6.0.0-alpha.1) (2026-04-20)
+### ⚠ BREAKING CHANGES
 
-### Features
+* Removed `favorite_border` and `star_outline` icons. Use `favorite` or `star` with the `variantOverride` prop to switch between filled and outlined variants. Also removed `binoculars` and `automatic_gear`.
+* The default icon variant has been changed from `filled` to `outlined`.
 
-* Wrap gnist css in [@layer](https://github.com/layer) gnist { ... } ([c513601](https://github.com/mollerdigital/design-system-design-system/commit/c513601b4831e7d02f08028cdf1f0cd4c42f60bc))
+### Features
 
-### Bug Fixes
+* replace icons with Material Symbols and restructure icon build pipeline ([2b66494](https://github.com/mollerdigital/design-system-design-system/commit/2b66494aa98313cc9fbb600edfcd3e5a91c9953a))
 
-* lint ([1c19f04](https://github.com/mollerdigital/design-system-design-system/commit/1c19f04a0aae90d887e3f26f4c31321bea84dced))
+## [5.8.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.7.0...@gnist/design-system@5.8.0) (2026-04-24)
 
-## [6.0.0-alpha.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.6.1...@gnist/design-system@6.0.0-alpha.0) (2026-04-17)
+### Features
 
-### ⚠ BREAKING CHANGES
+* add support for baltic characters for all fonts ([bc30b85](https://github.com/mollerdigital/design-system-design-system/commit/bc30b8576b5e8caa901c14b404de145e6958ed22))
 
-* Removed `favorite_border` and `star_outline` icons. Use `favorite` or `star` with the `variantOverride` prop to switch between filled and outlined variants.
-* The default icon variant has been changed from `filled` to `outlined`.
+## [5.7.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.6.1...@gnist/design-system@5.7.0) (2026-04-21)
 
 ### Features
 
-* replace icons with Material Symbols and restructure icon build pipeline ([ede842a](https://github.com/mollerdigital/design-system-design-system/commit/ede842af1e6ab14a9f3dd7b843a00e3886240bcd))
+* replace Figtree with Geist Variable font for bilhold theme ([a365dbc](https://github.com/mollerdigital/design-system-design-system/commit/a365dbc938fc50cd9871a506770e031dd447c14b))
 
 ## [5.6.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.6.0...@gnist/design-system@5.6.1) (2026-04-17)
 

package/README.md

@@ -22,10 +22,10 @@ To use the library, the vanilla-extract plugin needs to be used.
 
 ### Vite
 
-For Vite, you need
+For Vite 8, you need
 
 ```
-npm install -D @vanilla-extract/vite-plugin @vanilla-extract/esbuild-plugin
+npm install -D @vanilla-extract/vite-plugin @vanilla-extract/rollup-plugin
 ```
 
 Your `vite.config.ts` might look like this:
@@ -35,18 +35,21 @@ Your `vite.config.ts` might look like this:
 
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin as vanillaExtractRollupPlugin } from "@vanilla-extract/rollup-plugin";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
-import { vanillaExtractPlugin as veEsbuildPlugin } from "@vanilla-extract/esbuild-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [react(), vanillaExtractPlugin()],
     optimizeDeps: {
-        esbuildOptions: {
-            // Handle vanilla-extract .css.js files during Vite dev mode optimization
-            // This prevents error "Styles were unable to be assigned to a file." in dev mode
-            // See https://github.com/vanilla-extract-css/vanilla-extract/discussions/1051
-            plugins: [veEsbuildPlugin({ runtime: true })],
+        // Gnist publishes JS that imports vanilla-extract .css.js files,
+        // so force those packages through Vite 8 prebundling.
+        include: ["@gnist/design-system", "@gnist/design-system/**/*"],
+        rolldownOptions: {
+            plugins: [
+                // Handle vanilla-extract file scopes during dep optimization.
+                vanillaExtractRollupPlugin({ unstable_injectFilescopes: true }),
+            ],
         },
     },
 });

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,34 @@
+"use client";
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__exportAll = __exportAll;
+exports.__toESM = __toESM;

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,14 @@
+"use client";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/building-blocks/index.cjs

@@ -1,12 +1,13 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const InputHelperText = require("./inputs/InputHelperText.cjs");
-const TextSkeleton = require("./skeletons/TextSkeleton.cjs");
-const CircularSkeleton = require("./skeletons/CircularSkeleton.cjs");
-const RectangularSkeleton = require("./skeletons/RectangularSkeleton.cjs");
-exports.InputHelperText = InputHelperText.InputHelperText;
-exports.useInputHelperText = InputHelperText.useInputHelperText;
-exports.TextSkeleton = TextSkeleton.TextSkeleton;
-exports.CircularSkeleton = CircularSkeleton.CircularSkeleton;
-exports.RectangularSkeleton = RectangularSkeleton.RectangularSkeleton;
+const require_InputHelperText = require("./inputs/InputHelperText.cjs");
+require("./inputs/index.cjs");
+const require_TextSkeleton = require("./skeletons/TextSkeleton.cjs");
+const require_CircularSkeleton = require("./skeletons/CircularSkeleton.cjs");
+const require_RectangularSkeleton = require("./skeletons/RectangularSkeleton.cjs");
+require("./skeletons/index.cjs");
+exports.CircularSkeleton = require_CircularSkeleton.CircularSkeleton;
+exports.InputHelperText = require_InputHelperText.InputHelperText;
+exports.RectangularSkeleton = require_RectangularSkeleton.RectangularSkeleton;
+exports.TextSkeleton = require_TextSkeleton.TextSkeleton;
+exports.useInputHelperText = require_InputHelperText.useInputHelperText;

package/dist/building-blocks/index.js

@@ -1,12 +1,8 @@
 "use client";
 import { InputHelperText, useInputHelperText } from "./inputs/InputHelperText.js";
+import "./inputs/index.js";
 import { TextSkeleton } from "./skeletons/TextSkeleton.js";
 import { CircularSkeleton } from "./skeletons/CircularSkeleton.js";
 import { RectangularSkeleton } from "./skeletons/RectangularSkeleton.js";
-export {
-  CircularSkeleton,
-  InputHelperText,
-  RectangularSkeleton,
-  TextSkeleton,
-  useInputHelperText
-};
+import "./skeletons/index.js";
+export { CircularSkeleton, InputHelperText, RectangularSkeleton, TextSkeleton, useInputHelperText };

package/dist/building-blocks/inputs/InputHelperText.cjs

@@ -1,34 +1,56 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const TextBelowInput = require("./internal/TextBelowInput.cjs");
-const ValidationText = require("./internal/ValidationText.cjs");
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_TextBelowInput = require("./internal/TextBelowInput.cjs");
+const require_ValidationText = require("./internal/ValidationText.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/building-blocks/inputs/InputHelperText.tsx
+/**
+A building block for helper text and validation, used by input components.
+Will show the validation message if appropriate, otherwise the given helper text if any is set.
+
+Note: `useInputHelperText` will help you with correct aria props for the related input.
+
+Documentation: [InputHelperText](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-inputs-inputhelpertext--docs)
+*/
 function InputHelperText({ id, helperText, validity = { type: "none" }, reserveSpaceForMessage = true, disabled, className }) {
-  if (validity.type !== "none" && validity.message) {
-    return jsxRuntime.jsx(ValidationText.ValidationText, { className, id, validationState: validity.type, message: validity.message, disabled });
-  }
-  if (helperText) {
-    return jsxRuntime.jsx(TextBelowInput.TextBelowInput, { className, id, isDisabled: disabled, children: helperText });
-  }
-  if (reserveSpaceForMessage) {
-    return jsxRuntime.jsx(TextBelowInput.TextBelowInput, { className, isDisabled: disabled, children: " " });
-  }
-  return null;
+	if (validity.type !== "none" && validity.message) return (0, react_jsx_runtime.jsx)(require_ValidationText.ValidationText, {
+		className,
+		id,
+		validationState: validity.type,
+		message: validity.message,
+		disabled
+	});
+	if (helperText) return (0, react_jsx_runtime.jsx)(require_TextBelowInput.TextBelowInput, {
+		className,
+		id,
+		isDisabled: disabled,
+		children: helperText
+	});
+	if (reserveSpaceForMessage) return (0, react_jsx_runtime.jsx)(require_TextBelowInput.TextBelowInput, {
+		className,
+		isDisabled: disabled,
+		children: "\xA0"
+	});
+	return null;
 }
+/**
+* Hook which helps you handle aria props for a input field/control and an {@link InputHelperText}.
+* @param props Props for `InputHelperText`
+* @returns `helperTextProps`: Props for InputHelperText, and `inputAriaProps`: correct `aria-invalid`, `aria-errormessage` and `aria-describedby` props to correctly tie together the given input and the `InputHelperText`
+*/
 function useInputHelperText(props) {
-  const { validity, id } = props;
-  const inputAriaProps = {
-    ...validity?.type === "error" && {
-      "aria-invalid": true,
-      "aria-errormessage": id
-    },
-    "aria-describedby": id
-  };
-  return {
-    helperTextProps: props,
-    inputAriaProps
-  };
+	const { validity, id } = props;
+	return {
+		helperTextProps: props,
+		inputAriaProps: {
+			...validity?.type === "error" && {
+				"aria-invalid": true,
+				"aria-errormessage": id
+			},
+			"aria-describedby": id
+		}
+	};
 }
+//#endregion
 exports.InputHelperText = InputHelperText;
 exports.useInputHelperText = useInputHelperText;

package/dist/building-blocks/inputs/InputHelperText.js

@@ -1,34 +1,54 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
 import { TextBelowInput } from "./internal/TextBelowInput.js";
 import { ValidationText } from "./internal/ValidationText.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/building-blocks/inputs/InputHelperText.tsx
+/**
+A building block for helper text and validation, used by input components.
+Will show the validation message if appropriate, otherwise the given helper text if any is set.
+
+Note: `useInputHelperText` will help you with correct aria props for the related input.
+
+Documentation: [InputHelperText](https://gnist.moller.no/developers/components/latest/?path=/docs/buildingblocks-inputs-inputhelpertext--docs)
+*/
 function InputHelperText({ id, helperText, validity = { type: "none" }, reserveSpaceForMessage = true, disabled, className }) {
-  if (validity.type !== "none" && validity.message) {
-    return jsx(ValidationText, { className, id, validationState: validity.type, message: validity.message, disabled });
-  }
-  if (helperText) {
-    return jsx(TextBelowInput, { className, id, isDisabled: disabled, children: helperText });
-  }
-  if (reserveSpaceForMessage) {
-    return jsx(TextBelowInput, { className, isDisabled: disabled, children: " " });
-  }
-  return null;
+	if (validity.type !== "none" && validity.message) return jsx(ValidationText, {
+		className,
+		id,
+		validationState: validity.type,
+		message: validity.message,
+		disabled
+	});
+	if (helperText) return jsx(TextBelowInput, {
+		className,
+		id,
+		isDisabled: disabled,
+		children: helperText
+	});
+	if (reserveSpaceForMessage) return jsx(TextBelowInput, {
+		className,
+		isDisabled: disabled,
+		children: "\xA0"
+	});
+	return null;
 }
+/**
+* Hook which helps you handle aria props for a input field/control and an {@link InputHelperText}.
+* @param props Props for `InputHelperText`
+* @returns `helperTextProps`: Props for InputHelperText, and `inputAriaProps`: correct `aria-invalid`, `aria-errormessage` and `aria-describedby` props to correctly tie together the given input and the `InputHelperText`
+*/
 function useInputHelperText(props) {
-  const { validity, id } = props;
-  const inputAriaProps = {
-    ...validity?.type === "error" && {
-      "aria-invalid": true,
-      "aria-errormessage": id
-    },
-    "aria-describedby": id
-  };
-  return {
-    helperTextProps: props,
-    inputAriaProps
-  };
+	const { validity, id } = props;
+	return {
+		helperTextProps: props,
+		inputAriaProps: {
+			...validity?.type === "error" && {
+				"aria-invalid": true,
+				"aria-errormessage": id
+			},
+			"aria-describedby": id
+		}
+	};
 }
-export {
-  InputHelperText,
-  useInputHelperText
-};
+//#endregion
+export { InputHelperText, useInputHelperText };

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

@@ -1,6 +1,5 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const InputHelperText = require("./InputHelperText.cjs");
-exports.InputHelperText = InputHelperText.InputHelperText;
-exports.useInputHelperText = InputHelperText.useInputHelperText;
+const require_InputHelperText = require("./InputHelperText.cjs");
+exports.InputHelperText = require_InputHelperText.InputHelperText;
+exports.useInputHelperText = require_InputHelperText.useInputHelperText;

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

@@ -1,6 +1,3 @@
 "use client";
 import { InputHelperText, useInputHelperText } from "./InputHelperText.js";
-export {
-  InputHelperText,
-  useInputHelperText
-};
+export { InputHelperText, useInputHelperText };

package/dist/building-blocks/inputs/internal/TextBelowInput.cjs

@@ -1,7 +1,7 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const componentFactories_js = require("@gnist/component-utils/componentFactories.js");
-const textBelowInput_css = require("./textBelowInput.css.cjs");
-const TextBelowInput = componentFactories_js.component("TextBelowInput", textBelowInput_css.textBelowInputRecipe, "div");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_textBelowInput_css = require("./textBelowInput.css.cjs");
+//#region src/building-blocks/inputs/internal/TextBelowInput.tsx
+var TextBelowInput = (0, require("@gnist/component-utils/componentFactories.js").component)("TextBelowInput", require_textBelowInput_css.textBelowInputRecipe, "div");
+//#endregion
 exports.TextBelowInput = TextBelowInput;

package/dist/building-blocks/inputs/internal/TextBelowInput.js

@@ -1,7 +1,7 @@
 "use client";
-import { component } from "@gnist/component-utils/componentFactories.js";
 import { textBelowInputRecipe } from "./textBelowInput.css.js";
-const TextBelowInput = component("TextBelowInput", textBelowInputRecipe, "div");
-export {
-  TextBelowInput
-};
+import { component } from "@gnist/component-utils/componentFactories.js";
+//#region src/building-blocks/inputs/internal/TextBelowInput.tsx
+var TextBelowInput = component("TextBelowInput", textBelowInputRecipe, "div");
+//#endregion
+export { TextBelowInput };

package/dist/building-blocks/inputs/internal/ValidationText.cjs

@@ -1,18 +1,28 @@
 "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");
-require("../../../foundation/typography/index.cjs");
-require("react");
-require("classnames");
-require("../../../foundation/logos/Logo.css.cjs");
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const TextBelowInput = require("./TextBelowInput.cjs");
-const ValidationText = ({ id, message, validationState, className, disabled }) => {
-  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: message ? jsxRuntime.jsxs(TextBelowInput.TextBelowInput, { id, "aria-live": "polite", "aria-atomic": "true", className, validity: validationState, isDisabled: disabled, children: [jsxRuntime.jsx(Icon.Icon, { icon: validationState, size: "s", className: atoms_css_js.atoms({ paddingRight: "base" }) }), message] }) : jsxRuntime.jsx(TextBelowInput.TextBelowInput, { isDisabled: disabled, children: " " }) });
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_TextBelowInput = require("./TextBelowInput.cjs");
+const require_Icon = require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+//#region src/building-blocks/inputs/internal/ValidationText.tsx
+var ValidationText = ({ id, message, validationState, className, disabled }) => {
+	return (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: message ? (0, react_jsx_runtime.jsxs)(require_TextBelowInput.TextBelowInput, {
+		id,
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		className,
+		validity: validationState,
+		isDisabled: disabled,
+		children: [(0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			icon: validationState,
+			size: "s",
+			className: (0, _gnist_themes_atoms_css_js.atoms)({ paddingRight: "base" })
+		}), message]
+	}) : (0, react_jsx_runtime.jsx)(require_TextBelowInput.TextBelowInput, {
+		isDisabled: disabled,
+		children: "\xA0"
+	}) });
 };
+//#endregion
 exports.ValidationText = ValidationText;

package/dist/building-blocks/inputs/internal/ValidationText.js

@@ -1,18 +1,27 @@
 "use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import "../../../foundation/iconography/ExtraIconsProvider.js";
-import "../../../foundation/iconography/IconVariantProvider.js";
-import "../../../foundation/iconography/icons.js";
+import { TextBelowInput } from "./TextBelowInput.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
-import "../../../foundation/typography/index.js";
-import "react";
-import "classnames";
-import "../../../foundation/logos/Logo.css.js";
+import "../../../foundation/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { TextBelowInput } from "./TextBelowInput.js";
-const ValidationText = ({ id, message, validationState, className, disabled }) => {
-  return jsx(Fragment, { children: message ? jsxs(TextBelowInput, { id, "aria-live": "polite", "aria-atomic": "true", className, validity: validationState, isDisabled: disabled, children: [jsx(Icon, { icon: validationState, size: "s", className: atoms({ paddingRight: "base" }) }), message] }) : jsx(TextBelowInput, { isDisabled: disabled, children: " " }) });
-};
-export {
-  ValidationText
+//#region src/building-blocks/inputs/internal/ValidationText.tsx
+var ValidationText = ({ id, message, validationState, className, disabled }) => {
+	return jsx(Fragment, { children: message ? jsxs(TextBelowInput, {
+		id,
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		className,
+		validity: validationState,
+		isDisabled: disabled,
+		children: [jsx(Icon, {
+			icon: validationState,
+			size: "s",
+			className: atoms({ paddingRight: "base" })
+		}), message]
+	}) : jsx(TextBelowInput, {
+		isDisabled: disabled,
+		children: "\xA0"
+	}) });
 };
+//#endregion
+export { ValidationText };

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

@@ -1,38 +1,38 @@
 "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 textBelowInputRecipe = layers_css_js.gnistRecipe({
-  base: [
-    atoms_css_js.atoms({
-      typography: "detail-small",
-      // Replaced description-small with 0.75rem fontsize
-      paddingTop: "base",
-      display: "flex",
-      alignItems: "center",
-      color: "text-variant"
-    })
-  ],
-  variants: {
-    validity: {
-      error: atoms_css_js.atoms({ color: "error" }),
-      success: atoms_css_js.atoms({ color: "success" })
-    },
-    isDisabled: {
-      true: atoms_css_js.atoms({ color: "on-disabled" }),
-      false: atoms_css_js.atoms({ color: "on-surface" })
-    }
-  },
-  compoundVariants: [
-    {
-      variants: { validity: "error", isDisabled: true },
-      style: atoms_css_js.atoms({ color: "error" })
-    },
-    {
-      variants: { validity: "success", isDisabled: true },
-      style: atoms_css_js.atoms({ color: "success" })
-    }
-  ]
+require("../../../_virtual/_rolldown/runtime.cjs");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+//#region src/building-blocks/inputs/internal/textBelowInput.css.ts
+var textBelowInputRecipe = (0, require("@vanilla-extract/recipes").recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({
+		typography: "detail-small",
+		paddingTop: "base",
+		display: "flex",
+		alignItems: "center",
+		color: "text-variant"
+	})],
+	variants: {
+		validity: {
+			error: (0, _gnist_themes_atoms_css_js.atoms)({ color: "error" }),
+			success: (0, _gnist_themes_atoms_css_js.atoms)({ color: "success" })
+		},
+		isDisabled: {
+			true: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-disabled" }),
+			false: (0, _gnist_themes_atoms_css_js.atoms)({ color: "on-surface" })
+		}
+	},
+	compoundVariants: [{
+		variants: {
+			validity: "error",
+			isDisabled: true
+		},
+		style: (0, _gnist_themes_atoms_css_js.atoms)({ color: "error" })
+	}, {
+		variants: {
+			validity: "success",
+			isDisabled: true
+		},
+		style: (0, _gnist_themes_atoms_css_js.atoms)({ color: "success" })
+	}]
 });
+//#endregion
 exports.textBelowInputRecipe = textBelowInputRecipe;