@gnist/design-system 3.8.0 → 3.8.2

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.8.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.8.1...@gnist/design-system@3.8.2) (2025-08-22)
+
+**Note:** Version bump only for package @gnist/design-system
+
+## [3.8.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.8.0...@gnist/design-system@3.8.1) (2025-08-15)
+
+### Bug Fixes
+
+* set background and foreground color properly in storybook ([45044ba](https://github.com/mollerdigital/design-system-design-system/commit/45044bab6882c1cc812cd370ec83426ae7b276d4))
+
 ## [3.8.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.7.0...@gnist/design-system@3.8.0) (2025-08-11)
 
 ### Features

package/README.md

@@ -18,7 +18,11 @@ 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
+To use the library, the vanilla-extract plugin needs to be used.
+
+### Vite
+
+For Vite, you need
 
 ```
 npm install -D @vanilla-extract/vite-plugin @vanilla-extract/esbuild-plugin
@@ -27,6 +31,8 @@ npm install -D @vanilla-extract/vite-plugin @vanilla-extract/esbuild-plugin
 Your `vite.config.ts` might look like this:
 
 ```ts
+// vite.config.ts
+
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
@@ -49,6 +55,8 @@ export default defineConfig({
 In the application entrypoint, import the required global styles and choose a theme
 
 ```tsx
+// app.tsx
+
 import { LocalizationProvider } from "@gnist/design-system";
 // Import one or more of these themes
 import { bilholdLight } from "@gnist/themes/themes/bilholdLight.css.js";
@@ -96,11 +104,17 @@ export const App: React.FC = () => {
 
 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`.
+You will need to install and use `@vanilla-extract/next-plugin`:
 
-With this setup, your `next.config.mjs` might look like this
+```bash
+npm install -D @vanilla-extract/next-plugin
+```
+
+With this setup, your `next.config.mjs` might look like this:
 
 ```js
+// next.config.mjs
+
 import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
 const withVanillaExtract = createVanillaExtractPlugin();
 
@@ -112,16 +126,20 @@ 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.
 
-```
+```json
+// tsconfig.json
+
 "paths": {
      ...
       "react": [ "./node_modules/@types/react"]
     }
 ```
 
-Next, just add the styling to your `layout.tsx` file. It might look like this:
+Then add the styling to your `layout.tsx` file. It might look like this:
 
 ```tsx
+// layout.tsx
+
 import { bilholdLight } from "@gnist/themes/themes/bilholdLight.css.js";
 import { globalTextStyles } from "@gnist/themes/typography.css.js";
 import "@gnist/design-system/fonts/bilhold";
@@ -141,7 +159,88 @@ export default function RootLayout({
 }
 ```
 
-Finally, import components from `@gnist/design-system`.
+#### Using components
+
+Finally, import components from `@gnist/design-system`:
+
+```js
+// index.tsx
+
+import { PrimaryButton } from "@gnist/design-system";
+
+export default function Home() {
+    return <PrimaryButton>Hello</PrimaryButton>;
+}
+```
+
+#### Pages Router
+
+If you are running Pages Router, add `transpilePackages` to `next.config.mjs` so that Vanilla Extract is applied to the library code:
+
+```js
+// next.config.mjs
+const nextConfig = {
+    transpilePackages: ["@gnist/design-system", "@gnist/themes"],
+};
+```
+
+As Pages Router does not have `layout.tsx`, you need to split the setup between
+`pages/_document.tsx` and `pages/_app.tsx`.
+
+`_document.tsx` runs once on the server. Use a **named import** here to get the theme class for <body>:
+
+```js
+// _document.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>
+    );
+}
+```
+
+`_app.tsx` runs on every route change. Here you must use **side-effect imports** for the same theme and typography so the CSS actually ends up in the client bundle:
+
+```js
+// _app.tsx
+
+import { LocalizationProvider } from "@gnist/design-system";
+
+// Fonts matching your chosen theme
+import "@gnist/design-system/fonts/bilhold";
+
+// Side-effect imports to include CSS/tokens in client bundle
+import "@gnist/themes/themes/bilholdLight.css.js";
+import "@gnist/themes/typography.css.js";
+
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    // Wrap app in LocalizationProvider
+    <LocalizationProvider language="en">
+      <Component {...pageProps} />
+    </LocalizationProvider>
+  );
+}
+```
+
+This ensures:
+
+`_document.tsx` sets the correct theme class on <html> and <body>.
+
+`_app.tsx` loads the theme’s CSS variables and typography tokens into the client bundle.
 
 ## Migrating from [`@moller/design-system`](https://www.npmjs.com/package/@moller/design-system)
 

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

@@ -19,7 +19,7 @@ function InputHelperText({ id, helperText, validity = { type: "none" }, reserveS
 function useInputHelperText(props) {
   const { validity, id } = props;
   const inputAriaProps = {
-    ...(validity == null ? void 0 : validity.type) === "error" && {
+    ...validity?.type === "error" && {
       "aria-invalid": true,
       "aria-errormessage": id
     },

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

@@ -17,7 +17,7 @@ function InputHelperText({ id, helperText, validity = { type: "none" }, reserveS
 function useInputHelperText(props) {
   const { validity, id } = props;
   const inputAriaProps = {
-    ...(validity == null ? void 0 : validity.type) === "error" && {
+    ...validity?.type === "error" && {
       "aria-invalid": true,
       "aria-errormessage": id
     },

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

@@ -8,8 +8,7 @@ const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in
 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];
+  const numericPart = /(\d+)(\.\d+)?/.exec(dimension)?.[0];
   if (!numericPart) {
     return dimension;
   }

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

@@ -1 +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,GAAI,+BAI9B,qBAAqB,4CAoBvB,CAAC"}
+{"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

@@ -4,8 +4,7 @@ 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];
+  const numericPart = /(\d+)(\.\d+)?/.exec(dimension)?.[0];
   if (!numericPart) {
     return dimension;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"RectangularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/RectangularSkeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,wCAKjC,wBAAwB,4CAmB1B,CAAC"}
+{"version":3,"file":"RectangularSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/RectangularSkeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,2CAK7B,wBAAwB,4CAmB1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+BAI1B,iBAAiB,4CAiCnB,CAAC"}
+{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,kCAItB,iBAAiB,4CAiCnB,CAAC"}

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

@@ -35,10 +35,10 @@ function _interopNamespaceCompat(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const BoxedButtonBase = React__namespace.forwardRef(function BoxedButtonBase2({ $as, as, children, loading, className, disabled = loading == null ? void 0 : loading.isLoading, type = "button", density = "default", ...props }, ref) {
+function BoxedButtonBase({ $as, as, children, className, loading, disabled = loading?.isLoading, type = "button", density = "default", ref, ...props }) {
   const buttonProps = {
     ...props,
-    disabled: (loading == null ? void 0 : loading.isLoading) === true ? loading.isLoading : disabled,
+    disabled: loading?.isLoading === true ? loading.isLoading : disabled,
     className: classNames__default.default(className, styles_css.boxedButton({ density })),
     type,
     ref
@@ -53,6 +53,6 @@ const BoxedButtonBase = React__namespace.forwardRef(function BoxedButtonBase2({
       return jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: child });
     }
     return child;
-  }), (loading == null ? void 0 : loading.isLoading) && (loading == null ? void 0 : loading.loadingText) && jsxRuntime.jsx(Spinner.Spinner, { diameter: tokens_css_js.tokens.size[density === "compact" ? "xs" : "s"], textDescription: loading == null ? void 0 : loading.loadingText }), jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { "aria-live": "polite", children: (loading == null ? void 0 : loading.isLoading) && loading.loadingText })] }));
-});
+  }), 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 })] }));
+}
 exports.BoxedButtonBase = BoxedButtonBase;

package/dist/components/actions/buttons/ButtonBase.d.ts

@@ -22,6 +22,7 @@ export type BoxedButtonProps<AsElement extends ElementType> = PolymorphicProps<A
          */
         loadingText: string;
     };
+    ref?: React.ForwardedRef<Element>;
 };
-export declare const BoxedButtonBase: React.ForwardRefExoticComponent<Omit<BoxedButtonProps<React.ElementType>, "ref"> & React.RefAttributes<Element>>;
+export declare function BoxedButtonBase<AsElement extends ElementType = "button">({ $as, as, children, className, loading, disabled, type, density, ref, ...props }: BoxedButtonProps<AsElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 //# sourceMappingURL=ButtonBase.d.ts.map

package/dist/components/actions/buttons/ButtonBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAK1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAEH,YAAY,EACf,MAAM,yCAAyC,CAAC;AAKjD,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAElE,MAAM,MAAM,gBAAgB,CAAC,SAAS,SAAS,WAAW,IACtD,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE;QACN;;WAEG;QACH,SAAS,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;CACL,CAAC;AAEN,eAAO,MAAM,eAAe,kHAmD1B,CAAC"}
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAK1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAEH,YAAY,EACf,MAAM,yCAAyC,CAAC;AAKjD,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAElE,MAAM,MAAM,gBAAgB,CAAC,SAAS,SAAS,WAAW,IACtD,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE;QACN;;WAEG;QACH,SAAS,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;CACrC,CAAC;AAEN,wBAAgB,eAAe,CAAC,SAAS,SAAS,WAAW,GAAG,QAAQ,EAAE,EACtE,GAAG,EACH,EAAE,EACF,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAA6B,EAC7B,IAAe,EACf,OAAmB,EACnB,GAAG,EACH,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,SAAS,CAAC,sEAoC7B"}

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

@@ -13,10 +13,10 @@ import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderO
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { Spinner } from "../../progress/Spinner.js";
 import { boxedButton, actionText } from "./styles.css.js";
-const BoxedButtonBase = React.forwardRef(function BoxedButtonBase2({ $as, as, children, loading, className, disabled = loading == null ? void 0 : loading.isLoading, type = "button", density = "default", ...props }, ref) {
+function BoxedButtonBase({ $as, as, children, className, loading, disabled = loading?.isLoading, type = "button", density = "default", ref, ...props }) {
   const buttonProps = {
     ...props,
-    disabled: (loading == null ? void 0 : loading.isLoading) === true ? loading.isLoading : disabled,
+    disabled: loading?.isLoading === true ? loading.isLoading : disabled,
     className: classNames(className, boxedButton({ density })),
     type,
     ref
@@ -31,8 +31,8 @@ const BoxedButtonBase = React.forwardRef(function BoxedButtonBase2({ $as, as, ch
       return jsx(BodyText, { className: actionText, children: child });
     }
     return child;
-  }), (loading == null ? void 0 : loading.isLoading) && (loading == null ? void 0 : loading.loadingText) && jsx(Spinner, { diameter: tokens.size[density === "compact" ? "xs" : "s"], textDescription: loading == null ? void 0 : loading.loadingText }), jsx(ScreenReaderOnly, { "aria-live": "polite", children: (loading == null ? void 0 : loading.isLoading) && loading.loadingText })] }));
-});
+  }), 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
 };

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

@@ -2,10 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const ButtonBase = require("./ButtonBase.cjs");
 const createButtonVariant = require("./createButtonVariant.cjs");
-const DangerButton = React.forwardRef(function DangerButton2(props, ref) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("error", props) });
-});
+function DangerButton(props) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("error", props) });
+}
 exports.DangerButton = DangerButton;

package/dist/components/actions/buttons/DangerButton.d.ts

@@ -5,5 +5,5 @@ The danger button appears as a final confirmation for a destructive action like
 
 Documentation: [DangerButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-dangerbutton--docs)
  */
-export declare const DangerButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+export declare function DangerButton<AsElement extends ElementType = "button">(props: BoxedButtonProps<AsElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DangerButton.d.ts.map

package/dist/components/actions/buttons/DangerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DangerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/DangerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;GAIG;AAEH,eAAO,MAAM,YAAY,gIAMvB,CAAC"}
+{"version":3,"file":"DangerButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/DangerButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;GAIG;AAEH,wBAAgB,YAAY,CAAC,SAAS,SAAS,WAAW,GAAG,QAAQ,EACjE,KAAK,EAAE,gBAAgB,CAAC,SAAS,CAAC,2CAGrC"}

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

@@ -1,11 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
-const DangerButton = forwardRef(function DangerButton2(props, ref) {
-  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("error", props) });
-});
+function DangerButton(props) {
+  return jsx(BoxedButtonBase, { ...getButtonVariantProps("error", props) });
+}
 export {
   DangerButton
 };

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

@@ -2,10 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const ButtonBase = require("./ButtonBase.cjs");
 const createButtonVariant = require("./createButtonVariant.cjs");
-const GhostButton = React.forwardRef(function GhostButton2(props, ref) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("transparent", props) });
-});
+function GhostButton(props) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("transparent", props) });
+}
 exports.GhostButton = GhostButton;

package/dist/components/actions/buttons/GhostButton.d.ts

@@ -7,5 +7,5 @@ As the ghost button looks less like a traditional button, it must always be used
 
 Documentation: [GhostButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-ghostbutton--docs)
 */
-export declare const GhostButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+export declare function GhostButton<AsElement extends ElementType = "button">(props: BoxedButtonProps<AsElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GhostButton.d.ts.map

package/dist/components/actions/buttons/GhostButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GhostButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/GhostButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;;;EAME;AACF,eAAO,MAAM,WAAW,gIAStB,CAAC"}
+{"version":3,"file":"GhostButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/GhostButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;;;EAME;AACF,wBAAgB,WAAW,CAAC,SAAS,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,gBAAgB,CAAC,SAAS,CAAC,2CAGrC"}

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

@@ -1,11 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
-const GhostButton = forwardRef(function GhostButton2(props, ref) {
-  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("transparent", props) });
-});
+function GhostButton(props) {
+  return jsx(BoxedButtonBase, { ...getButtonVariantProps("transparent", props) });
+}
 export {
   GhostButton
 };

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

@@ -13,19 +13,15 @@ const index = require("../../../foundation/typography/index.cjs");
 const styles_css = require("./styles.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const IconButton = React.forwardRef(
-  // @ts-expect-error - This is a valid type
-  function IconButton2({ $as, as, className, showLabel, label, icon, variantOverride, ...props }, ref) {
-    return React.createElement($as ?? as ?? "button", {
-      ...props,
-      ref,
-      className: classNames__default.default(className, styles_css.buttonRecipe({ color: "transparent", buttonType: "icon" }), styles_css.iconButton({ showLabel }), states_css.stateLayers({
-        borderSize: "medium",
-        borderRadius: "button",
-        backgroundColor: "palette-black",
-        setFocusState: true
-      }))
-    }, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showLabel === "left" && jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }), jsxRuntime.jsx(Icon.Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label })] }));
-  }
-);
+function IconButton({ $as, as, className, showLabel, label, icon, variantOverride, ...props }) {
+  return React.createElement($as ?? as ?? "button", {
+    ...props,
+    className: classNames__default.default(className, styles_css.buttonRecipe({ color: "transparent", buttonType: "icon" }), styles_css.iconButton({ showLabel }), states_css.stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }))
+  }, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showLabel === "left" && jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label }), jsxRuntime.jsx(Icon.Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsxRuntime.jsx(index.BodyText, { className: styles_css.actionText, children: label })] }));
+}
 exports.IconButton = IconButton;

package/dist/components/actions/buttons/IconButton.d.ts

@@ -1,6 +1,6 @@
 import { PolymorphicProps } from "@gnist/component-utils";
 import { VariantNames } from "../../../foundation/iconography/variantNames.js";
-import { ElementType } from "react";
+import { ElementType, ForwardedRef } from "react";
 import { AllowedIcons } from "../../../foundation/iconography/index.js";
 type IconButtonProps<AsElement extends ElementType> = PolymorphicProps<AsElement> & {
     /**
@@ -18,6 +18,7 @@ type IconButtonProps<AsElement extends ElementType> = PolymorphicProps<AsElement
     showLabel?: "left" | "right" | "none";
     /** Override the default icon variant for this icon. To change the default icon variant, use IconVariantProvider */
     variantOverride?: VariantNames;
+    ref?: ForwardedRef<Element>;
 };
 /**
 An icon button is a button which displays only an icon with or without a label. Icon buttons allow users to take actions, and make choices, with a single tap. Because the background is transparent, the icon and label color is inherited from ancestors to acommodate use on different background colors.
@@ -26,6 +27,6 @@ Note: Unlike most button components, `disabled`, `loading` and `density` props d
 
 Documentation: [IconButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-iconbutton--docs)
  */
-export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+export declare function IconButton<AsElement extends ElementType = "button">({ $as, as, className, showLabel, label, icon, variantOverride, ...props }: IconButtonProps<AsElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export {};
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/components/actions/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,wDAAoE;AAG3F,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAQ,MAAM,0CAA0C,CAAC;AAI9E,KAAK,eAAe,CAAC,SAAS,SAAS,WAAW,IAC9C,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,mHAAmH;IACnH,eAAe,CAAC,EAAE,YAAY,CAAC;CAClC,CAAC;AAEN;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,+HA+CtB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,wDAAoE;AAG3F,OAAO,EAAE,WAAW,EAAE,YAAY,EAAiB,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,YAAY,EAAQ,MAAM,0CAA0C,CAAC;AAI9E,KAAK,eAAe,CAAC,SAAS,SAAS,WAAW,IAC9C,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACtC,mHAAmH;IACnH,eAAe,CAAC,EAAE,YAAY,CAAC;IAC/B,GAAG,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;CAC/B,CAAC;AAEN;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,SAAS,SAAS,WAAW,GAAG,QAAQ,EAAE,EACjE,GAAG,EACH,EAAE,EACF,SAAS,EACT,SAAS,EACT,KAAK,EACL,IAAI,EACJ,eAAe,EACf,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,SAAS,CAAC,0FA+B5B"}

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

@@ -2,28 +2,24 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { stateLayers } from "../../../styles/states.css.js";
 import classNames from "classnames";
-import { forwardRef, createElement } from "react";
+import { createElement } from "react";
 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 { buttonRecipe, iconButton, actionText } from "./styles.css.js";
-const IconButton = forwardRef(
-  // @ts-expect-error - This is a valid type
-  function IconButton2({ $as, as, className, showLabel, label, icon, variantOverride, ...props }, ref) {
-    return createElement($as ?? as ?? "button", {
-      ...props,
-      ref,
-      className: classNames(className, buttonRecipe({ color: "transparent", buttonType: "icon" }), iconButton({ showLabel }), stateLayers({
-        borderSize: "medium",
-        borderRadius: "button",
-        backgroundColor: "palette-black",
-        setFocusState: true
-      }))
-    }, jsxs(Fragment, { children: [showLabel === "left" && jsx(BodyText, { className: actionText, children: label }), jsx(Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsx(BodyText, { className: actionText, children: label })] }));
-  }
-);
+function IconButton({ $as, as, className, showLabel, label, icon, variantOverride, ...props }) {
+  return createElement($as ?? as ?? "button", {
+    ...props,
+    className: classNames(className, buttonRecipe({ color: "transparent", buttonType: "icon" }), iconButton({ showLabel }), stateLayers({
+      borderSize: "medium",
+      borderRadius: "button",
+      backgroundColor: "palette-black",
+      setFocusState: true
+    }))
+  }, jsxs(Fragment, { children: [showLabel === "left" && jsx(BodyText, { className: actionText, children: label }), jsx(Icon, { icon, title: showLabel ? void 0 : label, variantOverride }), showLabel === "right" && jsx(BodyText, { className: actionText, children: label })] }));
+}
 export {
   IconButton
 };

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

@@ -2,10 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const ButtonBase = require("./ButtonBase.cjs");
 const createButtonVariant = require("./createButtonVariant.cjs");
-const PrimaryButton = React.forwardRef(function PrimaryButton2(props, ref) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("primary", props) });
-});
+function PrimaryButton(props) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("primary", props) });
+}
 exports.PrimaryButton = PrimaryButton;

package/dist/components/actions/buttons/PrimaryButton.d.ts

@@ -7,5 +7,5 @@ Primary buttons shouldn’t appear more than once in a section, and preferably j
 
 Documentation: [PrimaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-primarybutton--docs)
  */
-export declare const PrimaryButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+export declare function PrimaryButton<AsElement extends ElementType = "button">(props: BoxedButtonProps<AsElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/components/actions/buttons/PrimaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,gIASxB,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;;;GAMG;AAEH,wBAAgB,aAAa,CAAC,SAAS,SAAS,WAAW,GAAG,QAAQ,EAClE,KAAK,EAAE,gBAAgB,CAAC,SAAS,CAAC,2CAGrC"}

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

@@ -1,11 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
-const PrimaryButton = forwardRef(function PrimaryButton2(props, ref) {
-  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("primary", props) });
-});
+function PrimaryButton(props) {
+  return jsx(BoxedButtonBase, { ...getButtonVariantProps("primary", props) });
+}
 export {
   PrimaryButton
 };

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

@@ -2,10 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const ButtonBase = require("./ButtonBase.cjs");
 const createButtonVariant = require("./createButtonVariant.cjs");
-const SecondaryButton = React.forwardRef(function SecondaryButton2(props, ref) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("secondary", props) });
-});
+function SecondaryButton(props) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("secondary", props) });
+}
 exports.SecondaryButton = SecondaryButton;

package/dist/components/actions/buttons/SecondaryButton.d.ts

@@ -5,5 +5,5 @@ Secondary buttons are used for the second most important action. These are often
 
 Documentation: [SecondaryButton](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-buttons-secondarybutton--docs)
 */
-export declare const SecondaryButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+export declare function SecondaryButton<AsElement extends ElementType = "button">(props: BoxedButtonProps<AsElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SecondaryButton.d.ts.map

package/dist/components/actions/buttons/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;EAIE;AAEF,eAAO,MAAM,eAAe,gIAS1B,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;EAIE;AAEF,wBAAgB,eAAe,CAAC,SAAS,SAAS,WAAW,GAAG,QAAQ,EACpE,KAAK,EAAE,gBAAgB,CAAC,SAAS,CAAC,2CAGrC"}

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

@@ -1,11 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { BoxedButtonBase } from "./ButtonBase.js";
 import { getButtonVariantProps } from "./createButtonVariant.js";
-const SecondaryButton = forwardRef(function SecondaryButton2(props, ref) {
-  return jsx(BoxedButtonBase, { ref, ...getButtonVariantProps("secondary", props) });
-});
+function SecondaryButton(props) {
+  return jsx(BoxedButtonBase, { ...getButtonVariantProps("secondary", props) });
+}
 export {
   SecondaryButton
 };

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

@@ -2,10 +2,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
 const ButtonBase = require("./ButtonBase.cjs");
 const createButtonVariant = require("./createButtonVariant.cjs");
-const SuccessButton = React.forwardRef(function SuccessButton2(props, ref) {
-  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ref, ...createButtonVariant.getButtonVariantProps("success", props) });
-});
+function SuccessButton(props) {
+  return jsxRuntime.jsx(ButtonBase.BoxedButtonBase, { ...createButtonVariant.getButtonVariantProps("success", props) });
+}
 exports.SuccessButton = SuccessButton;