@gnist/design-system 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.1...@gnist/design-system@2.0.2) (2025-01-22)
+
+### Bug Fixes
+
+* set uniqueKey prop on TextSkeleton component ([ec276b0](https://github.com/mollerdigital/design-system-design-system/commit/ec276b0bdeff238723f3dba13dd2bd7453c45604))
+
+## [2.0.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.0...@gnist/design-system@2.0.1) (2025-01-22)
+
+### Bug Fixes
+
+* bump remaining apps to react 18 ([9462c63](https://github.com/mollerdigital/design-system-design-system/commit/9462c63869a3cf6a9a8d81658e5bdb056ee56c82))
+
 ## [2.0.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@1.0.5...@gnist/design-system@2.0.0) (2025-01-22)
 
 ### ⚠ BREAKING CHANGES

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

@@ -5,11 +5,15 @@ const jsxRuntime = require("react/jsx-runtime");
 const Row = require("../../utilities/layout/Row.cjs");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const reactContentLoader = require("react-content-loader");
+const React = require("react");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
 const ContentLoader = reactContentLoader__default.default;
-const TextSkeleton = ({ className, height = "1em", width = "100%" }) => jsxRuntime.jsx(Row.Row, { className, style: {
-  height: `calc(1em * ${tokens_css_js.tokens.typeface["line-height"]})`,
-  width
-}, verticalAlign: "center", horizontalAlign: "end", children: jsxRuntime.jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
+  const uniqueKey = React.useId();
+  return jsxRuntime.jsx(Row.Row, { className, style: {
+    height: `calc(1em * ${tokens_css_js.tokens.typeface["line-height"]})`,
+    width
+  }, verticalAlign: "center", horizontalAlign: "end", children: jsxRuntime.jsx(ContentLoader, { uniqueKey, height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+};
 exports.TextSkeleton = TextSkeleton;

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":"AAMA,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,4CAqBnB,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/building-blocks/skeletons/TextSkeleton.js

@@ -3,11 +3,15 @@ import { jsx } from "react/jsx-runtime";
 import { Row } from "../../utilities/layout/Row.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import reactContentLoader from "react-content-loader";
+import { useId } from "react";
 const ContentLoader = reactContentLoader;
-const TextSkeleton = ({ className, height = "1em", width = "100%" }) => jsx(Row, { className, style: {
-  height: `calc(1em * ${tokens.typeface["line-height"]})`,
-  width
-}, verticalAlign: "center", horizontalAlign: "end", children: jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
+  const uniqueKey = useId();
+  return jsx(Row, { className, style: {
+    height: `calc(1em * ${tokens.typeface["line-height"]})`,
+    width
+  }, verticalAlign: "center", horizontalAlign: "end", children: jsx(ContentLoader, { uniqueKey, height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+};
 export {
   TextSkeleton
 };

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

@@ -23,27 +23,5 @@ export type BoxedButtonProps<AsElement extends ElementType> = PolymorphicProps<A
         loadingText: string;
     };
 };
-export declare const BoxedButtonBase: React.ForwardRefExoticComponent<Omit<{
-    as?: React.ElementType | undefined;
-    $as?: React.ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
-    /**
-     * Density of the button
-     * @default default
-     */
-    density?: DensitySizes;
-    /**
-     * Loading state of the button and a placeholder text for screen readers
-     */
-    loading?: {
-        /**
-         * Loading state of the button
-         */
-        isLoading: boolean;
-        /**
-         * Placeholder text for screen readers
-         */
-        loadingText: string;
-    };
-}, "ref"> & React.RefAttributes<Element>>;
+export declare const BoxedButtonBase: React.ForwardRefExoticComponent<Omit<BoxedButtonProps<React.ElementType>, "ref"> & React.RefAttributes<Element>>;
 //# 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;;;;IApBpB;;;OAGG;cACO,YAAY;IACtB;;OAEG;cACO;QACN;;WAEG;QACH,SAAS,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;KACvB;yCA8DP,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;CACL,CAAC;AAEN,eAAO,MAAM,eAAe,kHA2D1B,CAAC"}

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

@@ -1,15 +1,7 @@
 import { ElementType } from "react";
+import { BoxedButtonProps } from "./ButtonBase.js";
 /**
 The danger button appears as a final confirmation for a destructive action like deleting or removing content. These are found mostly in confirmation states and modals.
 */
-export declare const DangerButton: import("react").ForwardRefExoticComponent<Omit<{
-    as?: ElementType | undefined;
-    $as?: ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
-    density?: import("../../../index.js").DensitySizes;
-    loading?: {
-        isLoading: boolean;
-        loadingText: string;
-    };
-}, "ref"> & import("react").RefAttributes<Element>>;
+export declare const DangerButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<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;AAI9D;;EAEE;AAEF,eAAO,MAAM,YAAY;;;;;;;;;mDAMvB,CAAC"}
+{"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;;EAEE;AAEF,eAAO,MAAM,YAAY,gIAMvB,CAAC"}

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

@@ -1,17 +1,9 @@
 import { ElementType } from "react";
+import { BoxedButtonProps } from "./ButtonBase.js";
 /**
 Ghost buttons indicate a lower level of emphasis and have a solid outline to draw less attention from the primary action. Because the background is transparent, the text and icon color is inherited from ancestors to acommodate use on different background colors.
 
 As the ghost button looks less like a traditional button, it must always be used with a CTA button nearby.
 */
-export declare const GhostButton: import("react").ForwardRefExoticComponent<Omit<{
-    as?: ElementType | undefined;
-    $as?: ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
-    density?: import("../../../index.js").DensitySizes;
-    loading?: {
-        isLoading: boolean;
-        loadingText: string;
-    };
-}, "ref"> & import("react").RefAttributes<Element>>;
+export declare const GhostButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<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;AAI9D;;;;EAIE;AACF,eAAO,MAAM,WAAW;;;;;;;;;mDAStB,CAAC"}
+{"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;;;;EAIE;AACF,eAAO,MAAM,WAAW,gIAStB,CAAC"}

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

@@ -1,13 +1,8 @@
+import { PolymorphicProps } from "@gnist/component-utils";
 import { VariantNames } from "../../../foundation/iconography/variantNames.js";
 import { ElementType } from "react";
 import { AllowedIcons } from "../../../foundation/iconography/index.js";
-/**
-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.
-*/
-export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<{
-    as?: ElementType | undefined;
-    $as?: ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
+type IconButtonProps<AsElement extends ElementType> = PolymorphicProps<AsElement> & {
     /**
      * Which icon to show.
      */
@@ -23,5 +18,10 @@ export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<
     showLabel?: "left" | "right" | "none";
     /** Override the default icon variant for this icon. To change the default icon variant, use IconVariantProvider */
     variantOverride?: VariantNames;
-}, "ref"> & import("react").RefAttributes<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.
+*/
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+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":"AACA,OAAO,EAAE,YAAY,EAAE,wDAAoE;AAG3F,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAQ,MAAM,0CAA0C,CAAC;AAuB9E;;EAEE;AACF,eAAO,MAAM,UAAU;;;;IApBf;;OAEG;UACG,YAAY;IAClB;;OAEG;WACI,MAAM;IACb;;;OAGG;gBACS,MAAM,GAAG,OAAO,GAAG,MAAM;IACrC,mHAAmH;sBACjG,YAAY;mDAgDpC,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,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;;EAEE;AACF,eAAO,MAAM,UAAU,+HA0CrB,CAAC"}

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

@@ -1,17 +1,9 @@
 import { ElementType } from "react";
+import { BoxedButtonProps } from "./ButtonBase.js";
 /**
 The primary button commands the highest emphasis on the page and is reserved for the main action you want a user to take on a page — the "Call To Action" (CTA) button.
 
 Primary buttons shouldn’t appear more than once in a section, and preferably just once on a screen, as it will confuse users as to which is the most important action. If you need a button next to a primary action, use the ghost button.
 */
-export declare const PrimaryButton: import("react").ForwardRefExoticComponent<Omit<{
-    as?: ElementType | undefined;
-    $as?: ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
-    density?: import("../../../index.js").DensitySizes;
-    loading?: {
-        isLoading: boolean;
-        loadingText: string;
-    };
-}, "ref"> & import("react").RefAttributes<Element>>;
+export declare const PrimaryButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<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;AAI9D;;;;EAIE;AAEF,eAAO,MAAM,aAAa;;;;;;;;;mDASxB,CAAC"}
+{"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;;;;EAIE;AAEF,eAAO,MAAM,aAAa,gIASxB,CAAC"}

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

@@ -1,15 +1,7 @@
 import { ElementType } from "react";
+import { BoxedButtonProps } from "./ButtonBase.js";
 /**
 Secondary buttons are used for the second most important action. These are often used if you have multiple actions on a page so need more than one button.
 */
-export declare const SecondaryButton: import("react").ForwardRefExoticComponent<Omit<{
-    as?: ElementType | undefined;
-    $as?: ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
-    density?: import("../../../index.js").DensitySizes;
-    loading?: {
-        isLoading: boolean;
-        loadingText: string;
-    };
-}, "ref"> & import("react").RefAttributes<Element>>;
+export declare const SecondaryButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<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;AAI9D;;EAEE;AAEF,eAAO,MAAM,eAAe;;;;;;;;;mDAS1B,CAAC"}
+{"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;;EAEE;AAEF,eAAO,MAAM,eAAe,gIAS1B,CAAC"}

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

@@ -1,17 +1,9 @@
 import { ElementType } from "react";
+import { BoxedButtonProps } from "./ButtonBase.js";
 /**
 The success button is used for positive actions such as to complete, save or fulfill an order.
 
 There shouldn’t be more than one success button on a page to avoid overwhelming customers.
 */
-export declare const SuccessButton: import("react").ForwardRefExoticComponent<Omit<{
-    as?: ElementType | undefined;
-    $as?: ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
-    density?: import("../../../index.js").DensitySizes;
-    loading?: {
-        isLoading: boolean;
-        loadingText: string;
-    };
-}, "ref"> & import("react").RefAttributes<Element>>;
+export declare const SuccessButton: import("react").ForwardRefExoticComponent<Omit<BoxedButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
 //# sourceMappingURL=SuccessButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SuccessButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SuccessButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAI9D;;;;EAIE;AAEF,eAAO,MAAM,aAAa;;;;;;;;;mDASxB,CAAC"}
+{"version":3,"file":"SuccessButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/SuccessButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAmB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGpE;;;;EAIE;AAEF,eAAO,MAAM,aAAa,gIASxB,CAAC"}

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

@@ -1,16 +1,16 @@
+import { PolymorphicProps } from "@gnist/component-utils";
 import { ElementType } from "react";
+type TextButtonProps<AsElement extends ElementType> = PolymorphicProps<AsElement> & {
+    /**
+     * Should the text be underlined?
+     */
+    underline?: boolean;
+};
 /**
 Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards and dialogs, text buttons help maintain an emphasis on card content. Because the background is transparent, the text and underline color is inherited from ancestors to acommodate use on different background colors.
 
 Note: Unlike most button components, `disabled`, `loading` and `density` props don't exist for TextButton.
 */
-export declare const TextButton: import("react").ForwardRefExoticComponent<Omit<{
-    as?: ElementType | undefined;
-    $as?: ElementType | undefined;
-} & Omit<any, "as" | "$as"> & {
-    /**
-     * Should the text be underlined?
-     */
-    underline?: boolean;
-}, "ref"> & import("react").RefAttributes<Element>>;
+export declare const TextButton: import("react").ForwardRefExoticComponent<Omit<TextButtonProps<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+export {};
 //# sourceMappingURL=TextButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/TextButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAW7E;;;;EAIE;AACF,eAAO,MAAM,UAAU;;;;IAXf;;OAEG;gBACS,OAAO;mDAoCzB,CAAC"}
+{"version":3,"file":"TextButton.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/buttons/TextButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI1D,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,KAAK,eAAe,CAAC,SAAS,SAAS,WAAW,IAC9C,gBAAgB,CAAC,SAAS,CAAC,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEN;;;;EAIE;AACF,eAAO,MAAM,UAAU,+HA4BrB,CAAC"}

package/dist/components/inputs/dropdowns/SelectBase.cjs

@@ -7,13 +7,13 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
+const React = require("react");
 const shared = require("../shared.cjs");
 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");
-const React = require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
@@ -53,7 +53,7 @@ function SelectBase(props, isMultiple, ref) {
       [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
       [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
     })
-  }, ...commonInputProps, ...selectProps, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+  }, ...commonInputProps, ...selectProps, ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
     listbox: listBoxComponent,
     popup: popUpComponent
   }, onChange: (e, value) => {

package/dist/components/inputs/dropdowns/SelectBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,oBAAoB,EAGvB,qBAAyD;AAM1D,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAqB/C,MAAM,WAAW,eAAe,CAAC,IAAI,CAAE,SAAQ,oBAAoB,CAAC,IAAI,CAAC;IACrE;;;OAGG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EACxB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,UAAU,EAAE,OAAO,EACnB,GAAG,EAAE,YAAY,CAAC,iBAAiB,CAAC,2CA2HvC"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,oBAAoB,EAGvB,qBAAyD;AAM1D,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAqB/C,MAAM,WAAW,eAAe,CAAC,IAAI,CAAE,SAAQ,oBAAoB,CAAC,IAAI,CAAC;IACrE;;;OAGG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EACxB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,UAAU,EAAE,OAAO,EACnB,GAAG,EAAE,YAAY,CAAC,iBAAiB,CAAC,2CA4HvC"}

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -5,13 +5,13 @@ import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
+import { useState } from "react";
 import { useSelectInputLogic, getSelectInputProps } from "../shared.js";
 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 { useState } from "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
@@ -49,7 +49,7 @@ function SelectBase(props, isMultiple, ref) {
       [preInputWidth]: wrapperProps.preInputWidth,
       [postInputWidth]: wrapperProps.postInputWidth
     })
-  }, ...commonInputProps, ...selectProps, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+  }, ...commonInputProps, ...selectProps, ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
     listbox: listBoxComponent,
     popup: popUpComponent
   }, onChange: (e, value) => {

package/dist/components/inputs/shared.d.ts

@@ -143,7 +143,7 @@ export declare function getSelectInputProps<T>({ label, density, leadingIcon, he
          * onChange prop for setting value to selected options
          */
         onChange: (value: T) => void;
-        ref?: import("react").Ref<HTMLButtonElement> | undefined;
+        ref?: import("react").LegacyRef<HTMLButtonElement> | undefined;
         key?: import("react").Key | null | undefined;
         value?: T | undefined;
         id?: string;

package/dist/components/inputs/textFields/TextArea.cjs

@@ -6,12 +6,12 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
+const React = require("react");
 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");
-const React = require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");

package/dist/components/inputs/textFields/TextArea.js

@@ -4,12 +4,12 @@ import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
+import { forwardRef } 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 "../../../foundation/typography/index.js";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";

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

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent } from "react";
+import { ElementType, ForwardRefExoticComponent } 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.
 
@@ -7,5 +7,5 @@ The component is empty and the content and layout can be designed for each spesi
 Card layouts can vary to support the types of content they contain. Imagery, icons, title, supporting texts and actions are optional elements that can be used.
 
 */
-export declare const InfoCard: ForwardRefExoticComponent<InfoCardProps<"div">>;
+export declare const InfoCard: ForwardRefExoticComponent<InfoCardProps<ElementType>>;
 //# 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,EAIH,yBAAyB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C;;;;;;EAME;AACF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAsB/D,CAAC"}
+{"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;;;;;;EAME;AACF,eAAO,MAAM,QAAQ,EAAE,yBAAyB,CAAC,aAAa,CAAC,WAAW,CAAC,CAsBrE,CAAC"}

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

@@ -21,6 +21,6 @@ The radio card includes a radio button, label, and description. The card is clic
 
 The card serves to draw extra attention to a radio button selection in the user interface.
  */
-export declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioCard: React.ForwardRefExoticComponent<Omit<RadioCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 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;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;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,yBAAyB,CACnD,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAkDtD,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;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,yBAAyB,CACnD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAkDnE,CAAC"}

package/dist/translations/LocalizationProvider.cjs

@@ -24,7 +24,7 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
 const localizationContext = React__namespace.createContext({
   language: "no"
 });
-const LocalizationProvider = ({ children, ...props }) => jsxRuntime.jsx(localizationContext.Provider, { value: props, children });
+const LocalizationProvider = ({ children, language }) => jsxRuntime.jsx(localizationContext.Provider, { value: { language }, children });
 function useLocalization() {
   return React__namespace.useContext(localizationContext);
 }

package/dist/translations/LocalizationProvider.d.ts

@@ -7,7 +7,7 @@ export interface LocalizationState {
 /**
  * Use this to set the localization context for the library.
  */
-export declare const LocalizationProvider: React.FC<LocalizationState>;
+export declare const LocalizationProvider: React.FC<React.PropsWithChildren<LocalizationState>>;
 export declare function useLocalization(): LocalizationState;
 export declare function useLanguage(): Language;
 //# sourceMappingURL=LocalizationProvider.d.ts.map

package/dist/translations/LocalizationProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizationProvider.d.ts","sourceRoot":"","sources":["../../src/translations/LocalizationProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,WAAW,iBAAiB;IAC9B,4GAA4G;IAC5G,QAAQ,EAAE,QAAQ,CAAC;CACtB;AAMD;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAO5D,CAAC;AAEF,wBAAgB,eAAe,sBAE9B;AAED,wBAAgB,WAAW,aAE1B"}
+{"version":3,"file":"LocalizationProvider.d.ts","sourceRoot":"","sources":["../../src/translations/LocalizationProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,WAAW,iBAAiB;IAC9B,4GAA4G;IAC5G,QAAQ,EAAE,QAAQ,CAAC;CACtB;AAMD;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CACvC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAK7C,CAAC;AAEF,wBAAgB,eAAe,sBAE9B;AAED,wBAAgB,WAAW,aAE1B"}

package/dist/translations/LocalizationProvider.js

@@ -4,7 +4,7 @@ import * as React from "react";
 const localizationContext = React.createContext({
   language: "no"
 });
-const LocalizationProvider = ({ children, ...props }) => jsx(localizationContext.Provider, { value: props, children });
+const LocalizationProvider = ({ children, language }) => jsx(localizationContext.Provider, { value: { language }, children });
 function useLocalization() {
   return React.useContext(localizationContext);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -48,7 +48,7 @@
     },
     "dependencies": {
         "@formkit/auto-animate": "^0.7.0",
-        "@gnist/component-utils": "3.0.0",
+        "@gnist/component-utils": "3.0.1",
         "@gnist/themes": "^2.0.0",
         "@mui/base": "^5.0.0-beta.36",
         "@vanilla-extract/css": "^1.14.1",
@@ -73,8 +73,8 @@
         "@tsconfig/node20": "^20.1.2",
         "@types/node": "^20.11.16",
         "@types/prettier": "^2.6.1",
-        "@types/react": "^17.0.45",
-        "@types/react-dom": "^17.0.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
         "@types/semver": "^7.3.8",
         "@typescript-eslint/eslint-plugin": "^6.19.1",
         "@typescript-eslint/parser": "^6.19.1",
@@ -113,5 +113,5 @@
             "optional": true
         }
     },
-    "gitHead": "37c44e7b40b7e948c71648b419fa2a6bf8d9f850"
+    "gitHead": "6d4d0a95ab2aeca8009aa39a8e9d70b75731b24a"
 }