@gnist/design-system 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@0.0.2...@gnist/design-system@0.1.0) (2024-11-08)
+
+### ⚠ BREAKING CHANGES
+
+* Brand new packages
+
+### Features
+
+* Initial release of Gnist Design-system npm page and Gnist Themes npm package ([69b6f9f](https://github.com/mollerdigital/design-system-design-system/commit/69b6f9fe80741a0816b1e35d70b1d311dd3bed86))
+
+### Bug Fixes
+
+* Fix elevated label styling ([a17d0e6](https://github.com/mollerdigital/design-system-design-system/commit/a17d0e6b0cb7b0a7baedb7524c5ceae8e0501ff8))
+
+## [0.0.1] (2024-10-08)
+
+### Initial setup
+
+* Set up to push package to new npm registry

package/README.md

@@ -0,0 +1,144 @@
+# Multi-brand React component library for Møller
+
+`@gnist/design-system` is a React component library containing reusable, multi-brand GUI building blocks for applications in the Møller ecosystem.
+
+For instructions on developing components, see the [Development docs](#development).
+
+# Consuming the library
+
+The library is published as [`@gnist/design-system` in the public npm registry](npmjs.com/package/@gnist/design-system). The prefix `@moller` is an [npm scope](https://docs.npmjs.com/cli/v7/using-npm/scope) associated with [our organization on npm](https://www.npmjs.com/org/moller)
+
+## Installing the library
+
+Run the command
+
+```
+npm install @gnist/design-system @gnist/themes
+```
+
+## Using the library
+
+To use the library, the vanilla-extract plugin needs to be used. For Vite, you need
+
+```
+npm install -D @vanilla-extract/vite-plugin @vanilla-extract/esbuild-plugin
+```
+
+Your `vite.config.ts` might look like this:
+
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+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 })],
+        },
+    },
+});
+```
+
+In the application entrypoint, import the required global styles and choose a theme
+
+```tsx
+import { LocalizationProvider } from "@gnist/design-system";
+// Import one or more of these themes
+import { bilholdLight } from "@gnist/themes/themes/bilholdLight.css.js";
+import { gumpen } from "@gnist/themes/themes/gumpen.css.js";
+import { brandless } from "@gnist/themes/themes/brandless.css.js";
+import { mollerBil } from "@gnist/themes/themes/mollerBil.css.js";
+import { skodaDark } from "@gnist/themes/themes/skodaDark.css.js";
+import { vw } from "@gnist/themes/themes/vw.css.js";
+import { dahles } from "@gnist/themes/themes/dahles.css.js";
+import { autoria } from "@gnist/themes/themes/autoria.css.js";
+import { audi } from "@gnist/themes/themes/audi.css.js";
+import { cupra } from "@gnist/themes/themes/cupra.css.js";
+// Import global styles
+import { globalTextStyles } from "@gnist/themes/typography.css";
+// Import necessary fonts (one or more, dependent on which themes are in use)
+import "@gnist/design-system/fonts/moller";
+import "@gnist/design-system/fonts/bilhold";
+import "@gnist/design-system/fonts/skoda";
+import "@gnist/design-system/fonts/gumpen";
+import "@gnist/design-system/fonts/VW";
+import "@gnist/design-system/fonts/dahles";
+import "@gnist/design-system/fonts/autoria";
+import "@gnist/design-system/fonts/audi";
+import "@gnist/design-system/fonts/cupra";
+import "@gnist/design-system/fonts/tools";
+
+// Apply the theme
+document.body.classList.add(bilholdLight);
+
+// Apply global styles
+globalTextStyles.forEach((c) => {
+    document.body.classList.add(c);
+});
+
+export const App: React.FC = () => {
+    return (
+        <LocalizationProvider language="en">
+            {/* ...the rest of your app here...*/}
+        </LocalizationProvider>
+    );
+};
+```
+
+### Next.js projects
+
+If you are setting up in a Next.js project, the procedure is quite the same.
+
+You will need to install and use `@vanilla-extract/next-plugin`.
+
+With this setup, your `next.config.mjs` might look like this
+
+```js
+import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
+const withVanillaExtract = createVanillaExtractPlugin();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withVanillaExtract(nextConfig);
+```
+
+If you are running a React version 18 project, you will also need to add this to your `tsconfig.json` for it to work with this React 17 library.
+
+```
+"paths": {
+     ...
+      "react": [ "./node_modules/@types/react"]
+    }
+```
+
+Next, just add the styling to your `layout.tsx` file. It might look like this:
+
+```tsx
+import { bilholdLight } from "@gnist/themes/themes/bilholdLight.css.js";
+import { globalTextStyles } from "@gnist/themes/typography.css.js";
+import "@gnist/design-system/fonts/bilhold";
+
+const bodyClassList = [bilholdLight, ...globalTextStyles];
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body className={bodyClassList.join(" ")}>{children}</body>
+        </html>
+    );
+}
+```
+
+Finally, import components from `@gnist/design-system`.

package/dist/building-blocks/index.cjs

@@ -0,0 +1,12 @@
+"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;

package/dist/building-blocks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./inputs/index.js";
+export * from "./skeletons/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/building-blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/building-blocks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC"}

package/dist/building-blocks/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { InputHelperText, useInputHelperText } from "./inputs/InputHelperText.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
+};

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

@@ -0,0 +1,34 @@
+"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");
+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;
+}
+function useInputHelperText(props) {
+  const { validity, id } = props;
+  const inputAriaProps = {
+    ...(validity == null ? void 0 : validity.type) === "error" && {
+      "aria-invalid": true,
+      "aria-errormessage": id
+    },
+    "aria-describedby": id
+  };
+  return {
+    helperTextProps: props,
+    inputAriaProps
+  };
+}
+exports.InputHelperText = InputHelperText;
+exports.useInputHelperText = useInputHelperText;

package/dist/building-blocks/inputs/InputHelperText.d.ts

@@ -0,0 +1,47 @@
+import { InputFieldValidity, ValidityConfig } from "./types.js";
+interface InputHelpTextProps<T extends ValidityConfig = {
+    errorMsgRequired: true;
+}> {
+    /**
+     * Id for the text element. Use the same id for `aria-describedby` and `aria-errormessage`
+     * to tell screen readers about the helper- and validation text.
+     */
+    id: string;
+    helperText?: string;
+    validity?: InputFieldValidity<T>;
+    /**
+     * Whether space should be reserved for text even when there is no current validation message or helper text.
+     * This helps avoid layout changes if messages are conditional, but leads to a less tight layout.
+     */
+    reserveSpaceForMessage?: boolean;
+    /**
+     * The state of the component is disabled
+     */
+    disabled?: boolean;
+}
+/**
+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.
+*/
+export declare function InputHelperText<T extends ValidityConfig = {
+    errorMsgRequired: true;
+}>({ id, helperText, validity, reserveSpaceForMessage, disabled, className, }: InputHelpTextProps<T> & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | 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`
+ */
+export declare function useInputHelperText<T extends ValidityConfig>(props: InputHelpTextProps<T>): {
+    helperTextProps: InputHelpTextProps<T>;
+    inputAriaProps: {
+        "aria-describedby": string;
+        "aria-invalid"?: boolean | undefined;
+        "aria-errormessage"?: string | undefined;
+    };
+};
+export {};
+//# sourceMappingURL=InputHelperText.d.ts.map

package/dist/building-blocks/inputs/InputHelperText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputHelperText.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/inputs/InputHelperText.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEhE,UAAU,kBAAkB,CACxB,CAAC,SAAS,cAAc,GAAG;IAAE,gBAAgB,EAAE,IAAI,CAAA;CAAE;IAErD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;EAKE;AACF,wBAAgB,eAAe,CAC3B,CAAC,SAAS,cAAc,GAAG;IAAE,gBAAgB,EAAE,IAAI,CAAA;CAAE,EACvD,EACE,EAAE,EACF,UAAU,EACV,QAA2B,EAC3B,sBAA6B,EAC7B,QAAQ,EACR,SAAS,GACZ,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDA6BhD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,EACvD,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC;;;;;;;EAc/B"}

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { TextBelowInput } from "./internal/TextBelowInput.js";
+import { ValidationText } from "./internal/ValidationText.js";
+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;
+}
+function useInputHelperText(props) {
+  const { validity, id } = props;
+  const inputAriaProps = {
+    ...(validity == null ? void 0 : validity.type) === "error" && {
+      "aria-invalid": true,
+      "aria-errormessage": id
+    },
+    "aria-describedby": id
+  };
+  return {
+    helperTextProps: props,
+    inputAriaProps
+  };
+}
+export {
+  InputHelperText,
+  useInputHelperText
+};

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

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

package/dist/building-blocks/inputs/index.d.ts

@@ -0,0 +1,3 @@
+export { InputHelperText, useInputHelperText } from "./InputHelperText.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/building-blocks/inputs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,cAAc,YAAY,CAAC"}

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

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

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

@@ -0,0 +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");
+exports.TextBelowInput = TextBelowInput;

package/dist/building-blocks/inputs/internal/TextBelowInput.d.ts

@@ -0,0 +1,11 @@
+export declare const TextBelowInput: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, "div", import("@gnist/component-utils").VariantSelection<{
+    validity: {
+        error: string;
+        success: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}>>;
+//# sourceMappingURL=TextBelowInput.d.ts.map

package/dist/building-blocks/inputs/internal/TextBelowInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextBelowInput.d.ts","sourceRoot":"","sources":["../../../../src/building-blocks/inputs/internal/TextBelowInput.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc;;;;;;;;;GAI1B,CAAC"}

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

@@ -0,0 +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
+};

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

@@ -0,0 +1,18 @@
+"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: " " }) });
+};
+exports.ValidationText = ValidationText;

package/dist/building-blocks/inputs/internal/ValidationText.d.ts

@@ -0,0 +1,9 @@
+export interface ValidationTextProps {
+    id: string;
+    validationState: "success" | "error";
+    message?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const ValidationText: React.FC<ValidationTextProps>;
+//# sourceMappingURL=ValidationText.d.ts.map

package/dist/building-blocks/inputs/internal/ValidationText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationText.d.ts","sourceRoot":"","sources":["../../../../src/building-blocks/inputs/internal/ValidationText.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,eAAe,EAAE,SAAS,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8BxD,CAAC"}

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

@@ -0,0 +1,18 @@
+"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 { Icon } from "../../../foundation/iconography/Icon.js";
+import "../../../foundation/typography/index.js";
+import "react";
+import "classnames";
+import "../../../foundation/logos/Logo.css.js";
+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
+};

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

@@ -0,0 +1,38 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const recipes = require("@vanilla-extract/recipes");
+const textBelowInputRecipe = recipes.recipe({
+  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" })
+    }
+  ]
+});
+exports.textBelowInputRecipe = textBelowInputRecipe;

package/dist/building-blocks/inputs/internal/textBelowInput.css.d.ts

@@ -0,0 +1,11 @@
+export declare const textBelowInputRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    validity: {
+        error: string;
+        success: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}>;
+//# sourceMappingURL=textBelowInput.css.d.ts.map

package/dist/building-blocks/inputs/internal/textBelowInput.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textBelowInput.css.d.ts","sourceRoot":"","sources":["../../../../src/building-blocks/inputs/internal/textBelowInput.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB;;;;;;;;;EA8B/B,CAAC"}

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

@@ -0,0 +1,38 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { recipe } from "@vanilla-extract/recipes";
+const textBelowInputRecipe = recipe({
+  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" })
+    }
+  ]
+});
+export {
+  textBelowInputRecipe
+};

package/dist/building-blocks/inputs/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/building-blocks/inputs/types.d.ts

@@ -0,0 +1,20 @@
+export type ValidityConfig = {
+    errorMsgRequired: boolean;
+};
+export type InputFieldValidity<TOptions extends ValidityConfig = {
+    errorMsgRequired: true;
+}> = {
+    type: "none";
+} | (TOptions extends {
+    errorMsgRequired: true;
+} ? {
+    type: "error";
+    message: string;
+} : {
+    type: "error";
+    message?: string;
+}) | {
+    type: "success";
+    message?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/building-blocks/inputs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/inputs/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAAE,gBAAgB,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,kBAAkB,CAC1B,QAAQ,SAAS,cAAc,GAAG;IAAE,gBAAgB,EAAE,IAAI,CAAA;CAAE,IAE1D;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB,CAAC,QAAQ,SAAS;IAAE,gBAAgB,EAAE,IAAI,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAClC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GAC1C;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/dist/building-blocks/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

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

@@ -0,0 +1,24 @@
+"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;
+function transformDimension(dimension, transform) {
+  var _a;
+  const numericPart = (_a = /(\d+)(\.\d+)?/.exec(dimension)) == null ? void 0 : _a[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 }) });
+};
+exports.CircularSkeleton = CircularSkeleton;

package/dist/building-blocks/skeletons/CircularSkeleton.d.ts

@@ -0,0 +1,11 @@
+export interface CircularSkeletonProps {
+    width?: string;
+    height?: string;
+    className?: string;
+}
+/**
+ * A skeleton representing a circular or elliptical element.
+ * By default, fills the entire width and height of the parent element.
+ */
+export declare const CircularSkeleton: ({ className, height, width, }: CircularSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CircularSkeleton.d.ts.map

package/dist/building-blocks/skeletons/CircularSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/CircularSkeleton.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,kCAI1B,qBAAqB,4CAoBvB,CAAC"}

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import reactContentLoader from "react-content-loader";
+const ContentLoader = reactContentLoader;
+function transformDimension(dimension, transform) {
+  var _a;
+  const numericPart = (_a = /(\d+)(\.\d+)?/.exec(dimension)) == null ? void 0 : _a[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
+};