@gnist/design-system 3.12.0 → 3.12.1

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.12.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.12.0...@gnist/design-system@3.12.1) (2025-09-12)
+
+### Bug Fixes
+
+* make unselected radioButton not appear as selected when error ([8a73d22](https://github.com/mollerdigital/design-system-design-system/commit/8a73d2212bd97885ffc325b96063356ed9f53e68))
+
 ## [3.12.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.11.2...@gnist/design-system@3.12.0) (2025-09-12)
 
 ### Features

package/dist/components/actions/selectionControls/radiobutton.css.cjs

@@ -76,13 +76,10 @@ const CheckedCircleRecipe = recipes.recipe({
       success: {}
     },
     disabled: {
-      true: [
-        atoms_css_js.atoms({}),
-        {
-          backgroundColor: tokens_css_js.tokens.color["disabled"],
-          cursor: "not-allowed"
-        }
-      ],
+      true: {
+        backgroundColor: tokens_css_js.tokens.color["disabled"],
+        cursor: "not-allowed"
+      },
       false: {}
     }
   },
@@ -97,6 +94,17 @@ const CheckedCircleRecipe = recipes.recipe({
           background: tokens_css_js.tokens.color["on-disabled"]
         }
       ]
+    },
+    {
+      variants: {
+        checked: false,
+        validity: "error"
+      },
+      style: [
+        {
+          background: "transparent"
+        }
+      ]
     }
   ]
 });

package/dist/components/actions/selectionControls/radiobutton.css.d.ts

@@ -30,10 +30,10 @@ export declare const CheckedCircleRecipe: import("@vanilla-extract/recipes").Run
         success: {};
     };
     disabled: {
-        true: (string | {
+        true: {
             backgroundColor: `var(--${string})`;
             cursor: "not-allowed";
-        })[];
+        };
         false: {};
     };
 }>;

package/dist/components/actions/selectionControls/radiobutton.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radiobutton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiobutton.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;EAwC5B,CAAC;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;EAuD9B,CAAC"}
+{"version":3,"file":"radiobutton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/radiobutton.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;EAwC5B,CAAC;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;EA8D9B,CAAC"}

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

@@ -74,13 +74,10 @@ const CheckedCircleRecipe = recipe({
       success: {}
     },
     disabled: {
-      true: [
-        atoms({}),
-        {
-          backgroundColor: tokens.color["disabled"],
-          cursor: "not-allowed"
-        }
-      ],
+      true: {
+        backgroundColor: tokens.color["disabled"],
+        cursor: "not-allowed"
+      },
       false: {}
     }
   },
@@ -95,6 +92,17 @@ const CheckedCircleRecipe = recipe({
           background: tokens.color["on-disabled"]
         }
       ]
+    },
+    {
+      variants: {
+        checked: false,
+        validity: "error"
+      },
+      style: [
+        {
+          background: "transparent"
+        }
+      ]
     }
   ]
 });

package/dist/components/surfaces/accordion/Accordion.cjs

@@ -8,14 +8,14 @@ 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");
+require("react");
 require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
 const accordion_css = require("./accordion.css.cjs");
-const AccordionElement = React.forwardRef(function AccordionElement2({ head, expanded, children, ...props }, ref) {
+function AccordionElement({ head, expanded, children, ref, ...props }) {
   const headElement = typeof head === "string" ? jsxRuntime.jsx(index.Heading3Text, { className: atoms_css_js.atoms({ typography: "heading3-small" }), children: head }) : head;
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("details", { ...props, open: expanded, ref, children: [jsxRuntime.jsxs("summary", { className: accordion_css.head, children: [jsxRuntime.jsx("div", { className: accordion_css.headBackground }), headElement, jsxRuntime.jsx(Icon.Icon, { icon: "expand_more" })] }), jsxRuntime.jsx("div", { className: accordion_css.body, children })] }) });
-});
+}
 const Accordion = componentUtils.component("Accordion", accordion_css.accordionRecipe, AccordionElement);
 exports.Accordion = Accordion;

package/dist/components/surfaces/accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 type AccordionProps = {
     /** Head is the top section of the accordion. It can be a string or a React node. */
     head: string | ReactNode;
@@ -12,7 +12,10 @@ type AccordionProps = {
     withBackground?: boolean;
     /** className is a string that can be used to add custom styling to the accordion. */
     className?: string;
+    /** ref to the underlying HTMLDetailsElement. */
+    ref?: Ref<HTMLDetailsElement>;
 };
+declare function AccordionElement({ head, expanded, children, ref, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The Accordion component is used to show and hide content.
  * It is typically used when there is a lot of content that should be hidden by default. It is built with the HTML details and summary elements.
@@ -23,7 +26,7 @@ type AccordionProps = {
  *
  * Documentation: [Accordion](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-accordion--docs)
  */
-export declare const Accordion: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDetailsElement>>, import("@gnist/component-utils").VariantSelection<{
+export declare const Accordion: import("@gnist/component-utils").VanillaRecipeComponent<import("react").ElementType, typeof AccordionElement, import("@gnist/component-utils").VariantSelection<{
     withDivider: {
         true: {
             borderBottom: `var(--${string}) solid var(--${string})`;

package/dist/components/surfaces/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,KAAK,cAAc,GAAG;IAClB,oFAAoF;IACpF,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8GAA8G;IAC9G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA6BF;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;GAIrB,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,cAAc,GAAG;IAClB,oFAAoF;IACpF,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8GAA8G;IAC9G,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,GAAG,CAAC,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;CACjC,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACX,EAAE,cAAc,2CAsBhB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;GAIrB,CAAC"}

package/dist/components/surfaces/accordion/Accordion.js

@@ -6,15 +6,15 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { Heading3Text } from "../../../foundation/typography/index.js";
-import { forwardRef } from "react";
+import "react";
 import "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { head, headBackground, body, accordionRecipe } from "./accordion.css.js";
-const AccordionElement = forwardRef(function AccordionElement2({ head: head$1, expanded, children, ...props }, ref) {
+import { accordionRecipe, head, headBackground, body } from "./accordion.css.js";
+function AccordionElement({ head: head$1, expanded, children, ref, ...props }) {
   const headElement = typeof head$1 === "string" ? jsx(Heading3Text, { className: atoms({ typography: "heading3-small" }), children: head$1 }) : head$1;
   return jsx(Fragment, { children: jsxs("details", { ...props, open: expanded, ref, children: [jsxs("summary", { className: head, children: [jsx("div", { className: headBackground }), headElement, jsx(Icon, { icon: "expand_more" })] }), jsx("div", { className: body, children })] }) });
-});
+}
 const Accordion = component("Accordion", accordionRecipe, AccordionElement);
 export {
   Accordion

package/dist/components/surfaces/cards/ActionCard.cjs

@@ -8,7 +8,7 @@ const cards_css = require("./cards.css.cjs");
 const SharedComponents = require("./SharedComponents.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const ActionCard = React.forwardRef(function ActionCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+function ActionCard({ $as, as, children, isLoading, density, ref, ...props }) {
   const cardProps = {
     ref,
     ...props,
@@ -19,5 +19,5 @@ const ActionCard = React.forwardRef(function ActionCard2({ $as, as, children, is
     }), props.className)
   };
   return React.createElement($as ?? as ?? "button", cardProps, jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : children }));
-});
+}
 exports.ActionCard = ActionCard;

package/dist/components/surfaces/cards/ActionCard.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ForwardRefExoticComponent } from "react";
+import { ElementType } from "react";
 import { ActionCardProps } from "./CardProps.js";
 /** Cards that contain content and actions about a single subject that helps users make a decision. The card serves as an overview and an entry point for more detailed information about the subject. A card can stand alone, without relying on surrounding elements for context.
 
@@ -10,5 +10,5 @@ Card layouts can vary to support the types of content they contain. Imagery, ico
 
  Documentation: [ActionCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-actioncard--docs)
 */
-export declare const ActionCard: ForwardRefExoticComponent<ActionCardProps<ElementType>>;
+export declare function ActionCard<AsElement extends ElementType = "button">({ $as, as, children, isLoading, density, ref, ...props }: ActionCardProps<AsElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=ActionCard.d.ts.map

package/dist/components/surfaces/cards/ActionCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/ActionCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMjD;;;;;;;;;EASE;AACF,eAAO,MAAM,UAAU,EAAE,yBAAyB,CAC9C,eAAe,CAAC,WAAW,CAAC,CA6B9B,CAAC"}
+{"version":3,"file":"ActionCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/ActionCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwC,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMjD;;;;;;;;;EASE;AACF,wBAAgB,UAAU,CAAC,SAAS,SAAS,WAAW,GAAG,QAAQ,EAAE,EACjE,GAAG,EACH,EAAE,EACF,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,SAAS,CAAC,0FAkB5B"}

package/dist/components/surfaces/cards/ActionCard.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
-import { forwardRef, createElement } from "react";
+import { createElement } from "react";
 import { cardsRecipe } from "./cards.css.js";
 import { LoadingSkeleton } from "./SharedComponents.js";
-const ActionCard = forwardRef(function ActionCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+function ActionCard({ $as, as, children, isLoading, density, ref, ...props }) {
   const cardProps = {
     ref,
     ...props,
@@ -15,7 +15,7 @@ const ActionCard = forwardRef(function ActionCard2({ $as, as, children, isLoadin
     }), props.className)
   };
   return createElement($as ?? as ?? "button", cardProps, jsx(Fragment, { children: isLoading ? jsx(LoadingSkeleton, {}) : children }));
-});
+}
 export {
   ActionCard
 };

package/dist/components/surfaces/cards/CheckboxCard.cjs

@@ -6,14 +6,13 @@ const Checkbox = require("../../actions/selectionControls/Checkbox.cjs");
 const SelectionCard = require("./internal/SelectionCard.cjs");
 const InfoCard = require("./InfoCard.cjs");
 const checkboxCard_css = require("./checkboxCard.css.cjs");
-const React = require("react");
 const classNames = require("classnames");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const CheckboxCard = React.forwardRef(function CheckboxCard2({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ...props }, ref) {
+function CheckboxCard({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ref, ...props }) {
   return jsxRuntime.jsx(InfoCard.InfoCard, { ref, ...props, className: classNames__default.default(checkboxCard_css.StyledCardRecipe({
     disabled: props.disabled,
     cardStyle: cardStyle ?? "elevation"
   }), props.className), children: isLoading ? jsxRuntime.jsx(SelectionCard.SelectionCardLoader, { type: "checkbox", density: props.density }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Checkbox.Checkbox, { label, value, onChange, validity, id, disabled: props.disabled, ...checkboxProps }), jsxRuntime.jsx(SelectionCard.SelectionCardContent, { description, value, density: props.density, children })] }) });
-});
+}
 exports.CheckboxCard = CheckboxCard;

package/dist/components/surfaces/cards/CheckboxCard.d.ts

@@ -8,7 +8,7 @@ interface CheckboxCardProps extends SelectionCardProps {
     /**
      * Props which will be passed to the checkbox
      */
-    checkboxProps?: Omit<HtmlSelectionControlProps, "ref">;
+    checkboxProps?: HtmlSelectionControlProps;
 }
 /**
 Checkbox cards allow you to present an option and optionally provide additional information and supplementary actions.
@@ -19,6 +19,6 @@ The card serves to draw extra attention to a checkbox selection in the user inte
 
 Documentation: [CheckboxCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-checkboxcard--docs)
  */
-export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function CheckboxCard({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ref, ...props }: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CheckboxCard.d.ts.map

package/dist/components/surfaces/cards/CheckboxCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CheckboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAMrC,UAAU,iBAAkB,SAAQ,kBAAkB;IAClD;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;CAC1D;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,yBAAyB,CACtD,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAwDtE,CAAC"}
+{"version":3,"file":"CheckboxCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/CheckboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,iBAAkB,SAAQ,kBAAkB;IAClD;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,WAAW,EACX,KAAK,EACL,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACX,EAAE,iBAAiB,2CAwCnB"}

package/dist/components/surfaces/cards/CheckboxCard.js

@@ -4,14 +4,13 @@ import { Checkbox } from "../../actions/selectionControls/Checkbox.js";
 import { SelectionCardLoader, SelectionCardContent } from "./internal/SelectionCard.js";
 import { InfoCard } from "./InfoCard.js";
 import { StyledCardRecipe } from "./checkboxCard.css.js";
-import { forwardRef } from "react";
 import classNames from "classnames";
-const CheckboxCard = forwardRef(function CheckboxCard2({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ...props }, ref) {
+function CheckboxCard({ label, description, value, id, onChange, children, isLoading, validity, checkboxProps, cardStyle, ref, ...props }) {
   return jsx(InfoCard, { ref, ...props, className: classNames(StyledCardRecipe({
     disabled: props.disabled,
     cardStyle: cardStyle ?? "elevation"
   }), props.className), children: isLoading ? jsx(SelectionCardLoader, { type: "checkbox", density: props.density }) : jsxs(Fragment, { children: [jsx(Checkbox, { label, value, onChange, validity, id, disabled: props.disabled, ...checkboxProps }), jsx(SelectionCardContent, { description, value, density: props.density, children })] }) });
-});
+}
 export {
   CheckboxCard
 };

package/dist/components/surfaces/cards/InfoCard.cjs

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const classNames = require("classnames");
-const React = require("react");
 const cards_css = require("./cards.css.cjs");
 const SharedComponents = require("./SharedComponents.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const InfoCard = React.forwardRef(function InfoCard2({ isLoading, transparent, density, ...props }, ref) {
+function InfoCard({ isLoading, transparent, density, ref, ...props }) {
   return jsxRuntime.jsx("div", { ref, ...props, className: classNames__default.default(cards_css.cardsRecipe({
     type: "info",
     isLoading,
     transparent,
     density
   }), props.className), children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : props.children });
-});
+}
 exports.InfoCard = InfoCard;

package/dist/components/surfaces/cards/InfoCard.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ForwardRefExoticComponent } from "react";
+import { ElementType } from "react";
 import { InfoCardProps } from "./CardProps.js";
 /** Cards that contain content but is not clickable. A card can stand alone, without relying on surrounding elements for context.
 
@@ -8,5 +8,5 @@ Card layouts can vary to support the types of content they contain. Imagery, ico
 
  Documentation: [InfoCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-infocard--docs)
 */
-export declare const InfoCard: ForwardRefExoticComponent<InfoCardProps<ElementType>>;
+export declare function InfoCard<AsElement extends ElementType = "div">({ isLoading, transparent, density, ref, ...props }: InfoCardProps<AsElement>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=InfoCard.d.ts.map

package/dist/components/surfaces/cards/InfoCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/InfoCard.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C;;;;;;;EAOE;AACF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,WAAW,CAAC,CAsBrE,CAAC"}
+{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/InfoCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C;;;;;;;EAOE;AACF,wBAAgB,QAAQ,CAAC,SAAS,SAAS,WAAW,GAAG,KAAK,EAAE,EAC5D,SAAS,EACT,WAAW,EACX,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,SAAS,CAAC,2CAkB1B"}

package/dist/components/surfaces/cards/InfoCard.js

@@ -1,17 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import { forwardRef } from "react";
 import { cardsRecipe } from "./cards.css.js";
 import { LoadingSkeleton } from "./SharedComponents.js";
-const InfoCard = forwardRef(function InfoCard2({ isLoading, transparent, density, ...props }, ref) {
+function InfoCard({ isLoading, transparent, density, ref, ...props }) {
   return jsx("div", { ref, ...props, className: classNames(cardsRecipe({
     type: "info",
     isLoading,
     transparent,
     density
   }), props.className), children: isLoading ? jsx(LoadingSkeleton, {}) : props.children });
-});
+}
 export {
   InfoCard
 };

package/dist/components/surfaces/cards/LinkCard.cjs

@@ -8,7 +8,7 @@ const cards_css = require("./cards.css.cjs");
 const SharedComponents = require("./SharedComponents.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const LinkCard = React.forwardRef(function LinkCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+function LinkCard({ $as, as, children, isLoading, density, ref, ...props }) {
   const cardProps = {
     ...props,
     ref,
@@ -19,5 +19,5 @@ const LinkCard = React.forwardRef(function LinkCard2({ $as, as, children, isLoad
     }), props.className)
   };
   return React.createElement($as ?? as ?? "a", cardProps, jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? jsxRuntime.jsx(SharedComponents.LoadingSkeleton, {}) : children }));
-});
+}
 exports.LinkCard = LinkCard;

package/dist/components/surfaces/cards/LinkCard.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ForwardRefExoticComponent } from "react";
+import { ElementType } from "react";
 import { LinkCardProps } from "./CardProps.js";
 /** Cards that contain content and actions about a single subject that helps users make a decision. The card serves as an overview and an entry point for more detailed information about the subject. A card can stand alone, without relying on surrounding elements for context.
 
@@ -10,5 +10,5 @@ Card layouts can vary to support the types of content they contain. Imagery, ico
 
  Documentation: [LinkCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-linkcard--docs)
 */
-export declare const LinkCard: ForwardRefExoticComponent<LinkCardProps<ElementType>>;
+export declare function LinkCard<AsElement extends ElementType = "a">({ $as, as, children, isLoading, density, ref, ...props }: LinkCardProps<AsElement>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=LinkCard.d.ts.map

package/dist/components/surfaces/cards/LinkCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/LinkCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,WAAW,EAGX,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C;;;;;;;;;EASE;AAEF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,WAAW,CAAC,CA6BrE,CAAC"}
+{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/LinkCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuC,WAAW,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAK/C;;;;;;;;;EASE;AAEF,wBAAgB,QAAQ,CAAC,SAAS,SAAS,WAAW,GAAG,GAAG,EAAE,EAC1D,GAAG,EACH,EAAE,EACF,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACX,EAAE,aAAa,CAAC,SAAS,CAAC,0FAkB1B"}

package/dist/components/surfaces/cards/LinkCard.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
-import { forwardRef, createElement } from "react";
+import { createElement } from "react";
 import { cardsRecipe } from "./cards.css.js";
 import { LoadingSkeleton } from "./SharedComponents.js";
-const LinkCard = forwardRef(function LinkCard2({ $as, as, children, isLoading, density, ...props }, ref) {
+function LinkCard({ $as, as, children, isLoading, density, ref, ...props }) {
   const cardProps = {
     ...props,
     ref,
@@ -15,7 +15,7 @@ const LinkCard = forwardRef(function LinkCard2({ $as, as, children, isLoading, d
     }), props.className)
   };
   return createElement($as ?? as ?? "a", cardProps, jsx(Fragment, { children: isLoading ? jsx(LoadingSkeleton, {}) : children }));
-});
+}
 export {
   LinkCard
 };

package/dist/components/surfaces/cards/RadioCard.cjs

@@ -5,15 +5,14 @@ const jsxRuntime = require("react/jsx-runtime");
 const RadioButton = require("../../actions/selectionControls/RadioButton.cjs");
 const SelectionCard = require("./internal/SelectionCard.cjs");
 const InfoCard = require("./InfoCard.cjs");
-const React = require("react");
 const checkboxCard_css = require("./checkboxCard.css.cjs");
 const classNames = require("classnames");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const RadioCard = React.forwardRef(function RadioCard2({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ...props }, ref) {
+function RadioCard({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ref, ...props }) {
   return jsxRuntime.jsx(InfoCard.InfoCard, { ref, ...props, className: classNames__default.default(checkboxCard_css.StyledCardRecipe({
     disabled: props.disabled,
     cardStyle: cardStyle ?? "elevation"
   }), props.className), children: isLoading ? jsxRuntime.jsx(SelectionCard.SelectionCardLoader, { type: "radio", density: props.density }) : jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(RadioButton.RadioButton, { label, value, onChange, disabled: props.disabled, validity, id, name }), jsxRuntime.jsx(SelectionCard.SelectionCardContent, { description, value, density: props.density, children })] }) });
-});
+}
 exports.RadioCard = RadioCard;

package/dist/components/surfaces/cards/RadioCard.d.ts

@@ -23,6 +23,6 @@ The card serves to draw extra attention to a radio button selection in the user
 
 Documentation: [RadioCard](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-cards-radiocard--docs)
  */
-export declare const RadioCard: React.ForwardRefExoticComponent<Omit<RadioCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function RadioCard({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ref, ...props }: RadioCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RadioCard.d.ts.map

package/dist/components/surfaces/cards/RadioCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAMrC,UAAU,cAAe,SAAQ,kBAAkB;IAC/C;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,yBAAyB,CACnD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAqDnE,CAAC"}
+{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACH,yBAAyB,EAGzB,kBAAkB,EACrB,MAAM,6BAA6B,CAAC;AAKrC,UAAU,cAAe,SAAQ,kBAAkB;IAC/C;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;CAC1C;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,KAAK,EACL,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACX,EAAE,cAAc,2CAqChB"}

package/dist/components/surfaces/cards/RadioCard.js

@@ -3,15 +3,14 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { RadioButton } from "../../actions/selectionControls/RadioButton.js";
 import { SelectionCardLoader, SelectionCardContent } from "./internal/SelectionCard.js";
 import { InfoCard } from "./InfoCard.js";
-import { forwardRef } from "react";
 import { StyledCardRecipe } from "./checkboxCard.css.js";
 import classNames from "classnames";
-const RadioCard = forwardRef(function RadioCard2({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ...props }, ref) {
+function RadioCard({ label, description, value, id, name, onChange, children, isLoading, validity, cardStyle, ref, ...props }) {
   return jsx(InfoCard, { ref, ...props, className: classNames(StyledCardRecipe({
     disabled: props.disabled,
     cardStyle: cardStyle ?? "elevation"
   }), props.className), children: isLoading ? jsx(SelectionCardLoader, { type: "radio", density: props.density }) : jsxs(Fragment, { children: [jsx(RadioButton, { label, value, onChange, disabled: props.disabled, validity, id, name }), jsx(SelectionCardContent, { description, value, density: props.density, children })] }) });
-});
+}
 export {
   RadioCard
 };

package/dist/components/surfaces/modal/Modal.cjs

@@ -33,24 +33,6 @@ const index = require("../../../translations/index.cjs");
 const reactDom = require("react-dom");
 const modal_css = require("./modal.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 hasScroll = (size, height) => {
   switch (size) {
@@ -64,7 +46,7 @@ const hasScroll = (size, height) => {
       return height > 271;
   }
 };
-const Modal = React__namespace.forwardRef(function Modal2({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens_css_js.tokens.color.surface, className }, ref) {
+function Modal({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens_css_js.tokens.color.surface, ref, className }) {
   const text = index.useTranslation((t) => t.components.surfaces.modal);
   const [contentHeight, setContentHeight] = React.useState(0);
   const [renderComponent, setRenderComponent] = React.useState(false);
@@ -118,5 +100,5 @@ const Modal = React__namespace.forwardRef(function Modal2({ children, title, isO
     size,
     hasScroll: hasScroll(size, contentHeight)
   }), style: { backgroundColor }, children: [primaryAction ? jsxRuntime.jsx(PrimaryButton.PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsxRuntime.jsx(TextButton.TextButton, { ...secondaryAction, disabled: primaryAction?.loading?.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] })] }), document.body);
-});
+}
 exports.Modal = Modal;

package/dist/components/surfaces/modal/Modal.d.ts

@@ -24,6 +24,7 @@ export interface ModalProps {
     /** Background color of the modal. */
     backgroundColor?: string;
     className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 }
 /**
  *
@@ -37,6 +38,6 @@ export interface ModalProps {
  *
  * Documentation: [Modal](https://gnist.moller.no/developers/components/latest/?path=/docs/components-surfaces-modal--docs)
  */
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Modal({ children, title, isOpen, handleClose, size, primaryAction, secondaryAction, action, backgroundColor, ref, className, }: ModalProps): React.ReactPortal | null;
 export {};
 //# sourceMappingURL=Modal.d.ts.map

package/dist/components/surfaces/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKH,UAAU,EAIb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAeD;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,mFAiJhB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKH,UAAU,EAIb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACnC;AAeD;;;;;;;;;;;GAWG;AAEH,wBAAgB,KAAK,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,WAAW,EACX,IAAe,EACf,aAAa,EACb,eAAe,EACf,MAAM,EACN,eAAsC,EACtC,GAAG,EACH,SAAS,GACZ,EAAE,UAAU,4BAmIZ"}

package/dist/components/surfaces/modal/Modal.js

@@ -6,7 +6,6 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import "../../../foundation/iconography/Icon.js";
 import { LeadText } from "../../../foundation/typography/index.js";
-import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
@@ -43,7 +42,7 @@ const hasScroll = (size, height) => {
       return height > 271;
   }
 };
-const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens.color.surface, className }, ref) {
+function Modal({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens.color.surface, ref, className }) {
   const text = useTranslation((t) => t.components.surfaces.modal);
   const [contentHeight, setContentHeight] = useState(0);
   const [renderComponent, setRenderComponent] = useState(false);
@@ -97,7 +96,7 @@ const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handle
     size,
     hasScroll: hasScroll(size, contentHeight)
   }), style: { backgroundColor }, children: [primaryAction ? jsx(PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsx(TextButton, { ...secondaryAction, disabled: primaryAction?.loading?.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] })] }), document.body);
-});
+}
 export {
   Modal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnist/design-system",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "license": "UNLICENSED",
   "type": "module",
   "main": "dist/index.cjs",
@@ -102,5 +102,5 @@
       "optional": true
     }
   },
-  "gitHead": "4922d841043fcd2bee5c90bb8afa56f65df62a68"
+  "gitHead": "0991cca0228700718ae27f309495a2afe3b67634"
 }