@navikt/ds-react 0.18.1 → 0.18.2

package/esm/typography/Detail.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "classnames";
-const Detail = forwardRef((_a, ref) => {
+export const Detail = forwardRef((_a, ref) => {
     var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-detail", {
             "navds-detail--small": size === "small",

package/esm/typography/Detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Detail.js","sourceRoot":"","sources":["../../src/typography/Detail.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAoB5B,MAAM,MAAM,GAGR,UAAU,CACZ,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE;YACvC,qBAAqB,EAAE,IAAI,KAAK,OAAO;YACvC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Detail.js","sourceRoot":"","sources":["../../src/typography/Detail.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAoB5B,MAAM,CAAC,MAAM,MAAM,GAGf,UAAU,CACZ,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE;YACvC,qBAAqB,EAAE,IAAI,KAAK,OAAO;YACvC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/typography/Heading.d.ts

@@ -20,5 +20,5 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
      */
     spacing?: boolean;
 }
-declare const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement>;
+export declare const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement>;
 export default Heading;

package/esm/typography/Heading.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "classnames";
-const Heading = forwardRef((_a, ref) => {
+export const Heading = forwardRef((_a, ref) => {
     var { level = "1", size, spacing = false, className, as } = _a, rest = __rest(_a, ["level", "size", "spacing", "className", "as"]);
     let HeadingTag = as !== null && as !== void 0 ? as : `h${level}`;
     return (React.createElement(HeadingTag, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-heading", `navds-heading--${size}`, {

package/esm/typography/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAwB5B,MAAM,OAAO,GAGT,UAAU,CACZ,CAAC,EAA8D,EAAE,GAAG,EAAE,EAAE;QAAvE,EAAE,KAAK,GAAG,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAA5D,+CAA8D,CAAF;IAC3D,IAAI,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAK,IAAI,KAAK,EAAwB,CAAC;IAE1D,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,kBAAkB,IAAI,EAAE,EAAE;YAClE,qBAAqB,EAAE,OAAO;SAC/B,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAwB5B,MAAM,CAAC,MAAM,OAAO,GAGhB,UAAU,CACZ,CAAC,EAA8D,EAAE,GAAG,EAAE,EAAE;QAAvE,EAAE,KAAK,GAAG,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAA5D,+CAA8D,CAAF;IAC3D,IAAI,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAK,IAAI,KAAK,EAAwB,CAAC;IAE1D,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,kBAAkB,IAAI,EAAE,EAAE;YAClE,qBAAqB,EAAE,OAAO;SAC/B,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/esm/typography/Ingress.d.ts

@@ -10,5 +10,5 @@ export interface IngressProps extends React.HTMLAttributes<HTMLParagraphElement>
      */
     spacing?: boolean;
 }
-declare const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement>;
+export declare const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement>;
 export default Ingress;

package/esm/typography/Ingress.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "classnames";
-const Ingress = forwardRef((_a, ref) => {
+export const Ingress = forwardRef((_a, ref) => {
     var { className, spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-ingress", {
             "navds-typo--spacing": !!spacing,

package/esm/typography/Ingress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,MAAM,OAAO,GAGT,UAAU,CAAC,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAlD,8BAAoD,CAAF;IAAY,OAAA,CAC5E,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;YACxC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,MAAM,CAAC,MAAM,OAAO,GAGhB,UAAU,CAAC,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAlD,8BAAoD,CAAF;IAAY,OAAA,CAC5E,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;YACxC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/esm/typography/Label.d.ts

@@ -15,5 +15,5 @@ export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
      */
     spacing?: boolean;
 }
-declare const Label: OverridableComponent<LabelProps, HTMLParagraphElement>;
+export declare const Label: OverridableComponent<LabelProps, HTMLParagraphElement>;
 export default Label;

package/esm/typography/Label.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "classnames";
-const Label = forwardRef((_a, ref) => {
+export const Label = forwardRef((_a, ref) => {
     var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-label", {
             "navds-label--small": size === "small",

package/esm/typography/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAmB5B,MAAM,KAAK,GAGP,UAAU,CACZ,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAmB5B,MAAM,CAAC,MAAM,KAAK,GAGd,UAAU,CACZ,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/typography/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Heading } from "./Heading";
-export { default as Ingress } from "./Ingress";
-export { default as BodyLong } from "./BodyLong";
-export { default as BodyShort } from "./BodyShort";
-export { default as Detail } from "./Detail";
-export { default as Label } from "./Label";
+export { BodyLongProps, default as BodyLong } from "./BodyLong";
+export { BodyShortProps, default as BodyShort } from "./BodyShort";
+export { default as Detail, DetailProps } from "./Detail";
+export { default as Heading, HeadingProps } from "./Heading";
+export { default as Ingress, IngressProps } from "./Ingress";
+export { default as Label, LabelProps } from "./Label";

package/esm/typography/index.js

@@ -1,7 +1,7 @@
-export { default as Heading } from "./Heading";
-export { default as Ingress } from "./Ingress";
 export { default as BodyLong } from "./BodyLong";
 export { default as BodyShort } from "./BodyShort";
 export { default as Detail } from "./Detail";
+export { default as Heading } from "./Heading";
+export { default as Ingress } from "./Ingress";
 export { default as Label } from "./Label";
 //# sourceMappingURL=index.js.map

package/esm/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAkB,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAe,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAgB,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAgB,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAc,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -24,12 +24,14 @@
   "files": [
     "/cjs",
     "/esm",
-    "/src"
+    "/src",
+    "_docs.json"
   ],
   "scripts": {
+    "docgen": "yarn ts-node ../../../scripts/docgen.ts",
     "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn docgen",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "jest"
   },
@@ -58,16 +60,19 @@
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
     "faker": "5.5.3",
+    "fast-glob": "3.2.11",
     "jest": "^27.5.0",
+    "react-docgen-typescript": "2.2.2",
     "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
     "swr": "^1.1.2",
-    "ts-jest": "^27.1.0"
+    "ts-jest": "^27.1.0",
+    "ts-node": "10.7.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "56642ed7b59629d46254655d7c5453c19e76568a"
+  "gitHead": "1f2b183c4488fd897576a3a50f96a2337c47bc8e"
 }

package/src/accordion/Accordion.tsx

@@ -20,7 +20,7 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   ({ className, ...rest }, ref) => (
     <div {...rest} className={cl("navds-accordion", className)} ref={ref} />
   )

package/src/accordion/AccordionHeader.tsx

@@ -7,7 +7,7 @@ import { useClientLayoutEffect, useId } from "..";
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
-   * Button content
+   * Accordion button content
    */
   children: React.ReactNode;
 }

package/src/accordion/AccordionItem.tsx

@@ -4,7 +4,7 @@ import React, { createContext, forwardRef, useState } from "react";
 export interface AccordionItemProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Content inside accordion item
+   * Content inside Accordion.Item
    */
   children: React.ReactNode;
   /**
@@ -13,7 +13,7 @@ export interface AccordionItemProps
    */
   open?: boolean;
   /**
-   * Defaults the accordion to opened state
+   * Defaults the accordion to opened state if not controlled
    * @default false
    */
   defaultOpen?: boolean;

package/src/accordion/index.ts

@@ -1,2 +1 @@
-export { default as Accordion } from "./Accordion";
-export * from "./Accordion";
+export { AccordionProps, default as Accordion } from "./Accordion";

package/src/alert/Alert.tsx

@@ -23,7 +23,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   size?: "medium" | "small";
   /**
-   * Toggles full-width Alert
+   * Toggles full-width Alert (removes border-radius)
    * @default false
    */
   fullWidth?: boolean;
@@ -52,7 +52,7 @@ export interface AlertContextProps {
   size: "medium" | "small";
 }
 
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
     {
       children,

package/src/alert/index.ts

@@ -1,2 +1,2 @@
 export { default as Alert } from "./Alert";
-export * from "./Alert";
+export { AlertProps } from "./Alert";

package/src/button/Button.tsx

@@ -7,11 +7,11 @@ import { useClientLayoutEffect } from "../util";
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
-   * Component content
+   * Button content
    */
   children: React.ReactNode;
   /**
-   * Changes design and interactions
+   * Changes design and interaction-visuals
    * @default "primary"
    */
   variant?: "primary" | "secondary" | "tertiary" | "danger";
@@ -33,7 +33,10 @@ export interface ButtonProps
   loading?: boolean;
 }
 
-const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
+export const Button: OverridableComponent<
+  ButtonProps,
+  HTMLButtonElement
+> = forwardRef(
   (
     {
       as: Component = "button",

package/src/button/index.ts

@@ -1,2 +1,2 @@
 export { default as Button } from "./Button";
-export * from "./Button";
+export { ButtonProps } from "./Button";

package/src/card/index.ts

@@ -1,2 +1,2 @@
 export { default as MicroCard } from "./MicroCard";
-export * from "./MicroCard";
+export { MicroCardProps } from "./MicroCard";

package/src/form/ConfirmationPanel.tsx

@@ -14,29 +14,30 @@ export interface ConfirmationPanelProps
   label: React.ReactNode;
 }
 
-const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
-  ({ className, children, label, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cl("navds-confirmation-panel", className, {
-          "navds-confirmation-panel--small": props.size === "small",
-          "navds-confirmation-panel--error": !!props.error,
-          "navds-confirmation-panel--checked": !!props.checked,
-        })}
-      >
-        {children && (
-          <BodyLong
-            size={props.size}
-            className="navds-confirmation-panel__content"
-          >
-            {children}
-          </BodyLong>
-        )}
-        <Checkbox {...props}>{label}</Checkbox>
-      </div>
-    );
-  }
-);
+export const ConfirmationPanel = forwardRef<
+  HTMLDivElement,
+  ConfirmationPanelProps
+>(({ className, children, label, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cl("navds-confirmation-panel", className, {
+        "navds-confirmation-panel--small": props.size === "small",
+        "navds-confirmation-panel--error": !!props.error,
+        "navds-confirmation-panel--checked": !!props.checked,
+      })}
+    >
+      {children && (
+        <BodyLong
+          size={props.size}
+          className="navds-confirmation-panel__content"
+        >
+          {children}
+        </BodyLong>
+      )}
+      <Checkbox {...props}>{label}</Checkbox>
+    </div>
+  );
+});
 
 export default ConfirmationPanel;

package/src/form/Fieldset/Fieldset.tsx

@@ -24,6 +24,7 @@ export type FieldsetContextProps = {
 export const FieldsetContext = React.createContext<FieldsetContextProps | null>(
   null
 );
+
 export interface FieldsetProps
   extends FormFieldProps,
     FieldsetHTMLAttributes<HTMLFieldSetElement> {
@@ -46,7 +47,7 @@ export interface FieldsetProps
   errorPropagation?: boolean;
 }
 
-const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
+export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   (props, ref) => {
     const {
       inputProps,

package/src/form/Fieldset/index.ts

@@ -1 +1,5 @@
-export { default, FieldsetProps, FieldsetContext } from "./Fieldset";
+export {
+  default as Fieldset,
+  FieldsetProps,
+  FieldsetContext,
+} from "./Fieldset";

package/src/form/Select.tsx

@@ -26,81 +26,85 @@ export interface SelectProps
   hideLabel?: boolean;
 }
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useFormField(props, "textField");
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "textField");
 
-  const {
-    children,
-    label,
-    className,
-    description,
-    htmlSize,
-    hideLabel = false,
-    ...rest
-  } = props;
+    const {
+      children,
+      label,
+      className,
+      description,
+      htmlSize,
+      hideLabel = false,
+      ...rest
+    } = props;
 
-  return (
-    <div
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        {
-          "navds-select--error": hasError,
-          "navds-select--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-select__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    return (
+      <div
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          {
+            "navds-select--error": hasError,
+            "navds-select--disabled": !!inputProps.disabled,
+          }
+        )}
       >
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cl("navds-select__description", {
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-select__label", {
             "navds-sr-only": hideLabel,
           })}
-          id={inputDescriptionId}
-          size={size}
         >
-          {description}
-        </BodyShort>
-      )}
-      <div className="navds-select__container">
-        <select
-          {...omit(rest, ["error", "errorId", "size"])}
-          {...inputProps}
-          ref={ref}
-          className={cl(
-            "navds-select__input",
-            "navds-body-short",
-            `navds-body--${size ?? "medium"}`
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cl("navds-select__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
+        )}
+        <div className="navds-select__container">
+          <select
+            {...omit(rest, ["error", "errorId", "size"])}
+            {...inputProps}
+            ref={ref}
+            className={cl(
+              "navds-select__input",
+              "navds-body-short",
+              `navds-body--${size ?? "medium"}`
+            )}
+            size={props.htmlSize}
+          >
+            {children}
+          </select>
+          <Expand className="navds-select__chevron" aria-hidden />
+        </div>
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}
-          size={props.htmlSize}
-        >
-          {children}
-        </select>
-        <Expand className="navds-select__chevron" aria-hidden />
-      </div>
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default Select;