Lerna versionbump [ci skip]

- @navikt/ds-react@0.18.2
 - @navikt/ds-react-internal@0.13.2

.gitignore

@@ -117,3 +117,4 @@ react-docgen-docs.json
 cjs
 esm
 .vercel
+_docs.json

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.16.19",
+  "version": "0.17.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.7",
+    "@navikt/ds-tokens": "^0.9.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/css/read-more.css

@@ -9,6 +9,7 @@
   align-items: center;
   gap: var(--navds-spacing-2);
   color: var(--navds-semantic-color-link);
+  text-align: left;
 }
 
 .navds-read-more:hover {
@@ -24,6 +25,7 @@
 }
 
 .navds-read-more__expand-icon {
+  flex-shrink: 0;
   font-size: 1.25rem;
 }
 

@navikt/core/css/table.css

@@ -47,7 +47,20 @@
 
 .navds-table--zebra-stripes
   .navds-table__body
-  .navds-table__row:nth-of-type(odd):not(:hover):not(.navds-table__row--selected) {
+  .navds-table__row:nth-child(odd):not(:hover):not(.navds-table__row--selected) {
+  background-color: var(--navds-table-row-color-background-zebra);
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__expandable-row:nth-child(4n
+    + 1):not(:hover):not(.navds-table__row--selected) {
+  background-color: transparent;
+}
+
+.navds-table--zebra-stripes
+  .navds-table__body
+  .navds-table__expanded-row:nth-child(4n) {
   background-color: var(--navds-table-row-color-background-zebra);
 }
 

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -36,7 +36,7 @@
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.30",
+    "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.22",
+  "version": "0.18.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -24,19 +24,21 @@
   "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"
   },
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.10",
+    "@navikt/ds-icons": "^0.8.11",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -58,15 +60,18 @@
     "@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",
+    "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   }
 }

@navikt/core/react/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} />
   )

@navikt/core/react/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;
 }

@navikt/core/react/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;

@navikt/core/react/src/accordion/index.ts

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

@navikt/core/react/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,

@navikt/core/react/src/alert/index.ts

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

@navikt/core/react/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",

@navikt/core/react/src/button/index.ts

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

@navikt/core/react/src/card/index.ts

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

@navikt/core/react/src/form/ConfirmationPanel.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from "react";
 import cl from "classnames";
 import { BodyLong, Checkbox, CheckboxProps } from "..";
 
-export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
+export interface ConfirmationPanelProps
+  extends Omit<CheckboxProps, "children"> {
   /**
    * Additional information on panel
    */
@@ -11,35 +12,32 @@ export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
    * Checkbox label
    */
   label: React.ReactNode;
-  /**
-   * Checked state for checkbox
-   */
-  checked: boolean;
 }
 
-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;

@navikt/core/react/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,

@navikt/core/react/src/form/Fieldset/index.ts

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

@navikt/core/react/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>
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default Select;

@navikt/core/react/src/form/Switch.tsx

@@ -51,92 +51,94 @@ export interface SwitchProps
   position?: "left" | "right";
 }
 
-const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
-  const { inputProps, size } = useFormField(props, "switch");
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (props, ref) => {
+    const { inputProps, size } = useFormField(props, "switch");
 
-  const {
-    children,
-    className,
-    description,
-    hideLabel = false,
-    loading,
-    checked: checkedProp,
-    defaultChecked,
-    position = "left",
-    ...rest
-  } = props;
+    const {
+      children,
+      className,
+      description,
+      hideLabel = false,
+      loading,
+      checked: checkedProp,
+      defaultChecked,
+      position = "left",
+      ...rest
+    } = props;
 
-  const Description = size === "medium" ? BodyShort : Detail;
+    const Description = size === "medium" ? BodyShort : Detail;
 
-  const [checked, setChecked] = useState(
-    defaultChecked ?? checkedProp ?? false
-  );
+    const [checked, setChecked] = useState(
+      defaultChecked ?? checkedProp ?? false
+    );
 
-  useEffect(() => {
-    checkedProp !== undefined && setChecked(checkedProp);
-  }, [checkedProp]);
+    useEffect(() => {
+      checkedProp !== undefined && setChecked(checkedProp);
+    }, [checkedProp]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(e.target.checked);
-    props.onChange && props.onChange(e);
-  };
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(e.target.checked);
+      props.onChange && props.onChange(e);
+    };
 
-  return (
-    <div
-      className={cl(
-        "navds-switch",
-        props.className,
-        `navds-switch--${size}`,
-        `navds-switch--${position}`,
-        {
-          "navds-switch--loading": loading,
-          "navds-switch--disabled": inputProps.disabled ?? loading,
-        }
-      )}
-    >
-      <input
-        {...omit(rest, ["size"])}
-        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-        disabled={inputProps.disabled ?? loading}
-        checked={checkedProp}
-        defaultChecked={defaultChecked}
-        ref={ref}
-        type="checkbox"
-        onChange={(e) => handleChange(e)}
-        className={cl(className, "navds-switch__input")}
-      />
-      <span className="navds-switch__track">
-        <span className="navds-switch__thumb">
-          {loading ? (
-            <Loader size="xsmall" aria-live="polite" />
-          ) : checked ? (
-            <SelectedIcon />
-          ) : null}
+    return (
+      <div
+        className={cl(
+          "navds-switch",
+          props.className,
+          `navds-switch--${size}`,
+          `navds-switch--${position}`,
+          {
+            "navds-switch--loading": loading,
+            "navds-switch--disabled": inputProps.disabled ?? loading,
+          }
+        )}
+      >
+        <input
+          {...omit(rest, ["size"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          disabled={inputProps.disabled ?? loading}
+          checked={checkedProp}
+          defaultChecked={defaultChecked}
+          ref={ref}
+          type="checkbox"
+          onChange={(e) => handleChange(e)}
+          className={cl(className, "navds-switch__input")}
+        />
+        <span className="navds-switch__track">
+          <span className="navds-switch__thumb">
+            {loading ? (
+              <Loader size="xsmall" aria-live="polite" />
+            ) : checked ? (
+              <SelectedIcon />
+            ) : null}
+          </span>
         </span>
-      </span>
-      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
-        <div
-          className={cl("navds-switch__content", {
-            "navds-sr-only": hideLabel,
-            "navds-switch--with-description": !!description && !hideLabel,
-          })}
-        >
-          <BodyShort as="div" size={size} className="navds-switch__label">
-            {children}
-          </BodyShort>
-          {description && (
-            <Description
-              as="div"
-              size="small"
-              className="navds-switch__description"
-            >
-              {description}
-            </Description>
-          )}
-        </div>
-      </label>
-    </div>
-  );
-});
+        <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+          <div
+            className={cl("navds-switch__content", {
+              "navds-sr-only": hideLabel,
+              "navds-switch--with-description": !!description && !hideLabel,
+            })}
+          >
+            <BodyShort as="div" size={size} className="navds-switch__label">
+              {children}
+            </BodyShort>
+            {description && (
+              <Description
+                as="div"
+                size="small"
+                className="navds-switch__description"
+              >
+                {description}
+              </Description>
+            )}
+          </div>
+        </label>
+      </div>
+    );
+  }
+);
 
 export default Switch;

@navikt/core/react/src/form/TextField.tsx

@@ -7,6 +7,14 @@ import { FormFieldProps, useFormField } from "./useFormField";
 export interface TextFieldProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * The current value (controlled).
+   */
+  value?: string;
+  /**
+   * The default value (uncontrolled).
+   */
+  defaultValue?: string;
   /**
    * Expose the HTML size attribute
    */
@@ -26,93 +34,97 @@ export interface TextFieldProps
   type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useFormField(props, "textField");
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "textField");
 
-  const {
-    label,
-    className,
-    description,
-    htmlSize,
-    hideLabel = false,
-    type = "text",
-    ...rest
-  } = props;
+    const {
+      label,
+      className,
+      description,
+      htmlSize,
+      hideLabel = false,
+      type = "text",
+      ...rest
+    } = props;
 
-  return (
-    <div
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        {
-          "navds-text-field--error": hasError,
-          "navds-text-field--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-text-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
-      >
-        {label}
-      </Label>
-
-      {!!description && (
-        <>
-          {size === "medium" ? (
-            <BodyShort
-              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
-              })}
-              id={inputDescriptionId}
-              size="small"
-              as="div"
-            >
-              {description}
-            </BodyShort>
-          ) : (
-            <Detail
-              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
-              })}
-              id={inputDescriptionId}
-              size="small"
-              as="div"
-            >
-              {description}
-            </Detail>
-          )}
-        </>
-      )}
-      <input
-        {...omit(rest, ["error", "errorId", "size"])}
-        {...inputProps}
-        ref={ref}
-        type={type}
+    return (
+      <div
         className={cl(
-          "navds-text-field__input",
-          "navds-body-short",
-          `navds-body-${size ?? "medium"}`
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          {
+            "navds-text-field--error": hasError,
+            "navds-text-field--disabled": !!inputProps.disabled,
+          }
         )}
-        size={htmlSize}
-      />
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      >
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-text-field__label", {
+            "navds-sr-only": hideLabel,
+          })}
+        >
+          {label}
+        </Label>
+
+        {!!description && (
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-text-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-text-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
+        )}
+        <input
+          {...omit(rest, ["error", "errorId", "size"])}
+          {...inputProps}
+          ref={ref}
+          type={type}
+          className={cl(
+            "navds-text-field__input",
+            "navds-body-short",
+            `navds-body-${size ?? "medium"}`
+          )}
+          size={htmlSize}
+        />
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default TextField;

@navikt/core/react/src/form/Textarea.tsx

@@ -16,8 +16,8 @@ export interface TextareaProps
    * Visually allowed length of content
    */
   maxLength?: number;
-  value: string;
-  onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+  value?: string;
+  defaultValue?: string;
   /**
    * Maximum number of rows to display.
    * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
@@ -37,7 +37,7 @@ export interface TextareaProps
   hideLabel?: boolean;
 }
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
     const {
       inputProps,
@@ -119,7 +119,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
               </span>
               <Counter
                 maxLength={maxLength}
-                currentLength={props.value.length}
+                currentLength={props.value?.length}
                 size={size}
               />
             </>

@navikt/core/react/src/form/checkbox/Checkbox.tsx

@@ -31,70 +31,72 @@ export interface CheckboxProps
   indeterminate?: boolean;
 }
 
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { inputProps, hasError, size } = useCheckbox(props);
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    const { inputProps, hasError, size } = useCheckbox(props);
 
-  const Description = size === "medium" ? BodyShort : Detail;
+    const Description = size === "medium" ? BodyShort : Detail;
 
-  return (
-    <div
-      className={cl(
-        props.className,
-        "navds-checkbox",
-        `navds-checkbox--${size}`,
-        {
-          "navds-checkbox--error": hasError,
-          "navds-checkbox--disabled": inputProps.disabled,
-        }
-      )}
-    >
-      <input
-        {...omit(props, [
-          "children",
-          "size",
-          "error",
-          "description",
-          "hideLabel",
-          "indeterminate",
-        ])}
-        {...inputProps}
-        type="checkbox"
-        className="navds-checkbox__input"
-        aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
-        ref={(el) => {
-          if (el) {
-            el.indeterminate = props.indeterminate ?? false;
+    return (
+      <div
+        className={cl(
+          props.className,
+          "navds-checkbox",
+          `navds-checkbox--${size}`,
+          {
+            "navds-checkbox--error": hasError,
+            "navds-checkbox--disabled": inputProps.disabled,
           }
+        )}
+      >
+        <input
+          {...omit(props, [
+            "children",
+            "size",
+            "error",
+            "description",
+            "hideLabel",
+            "indeterminate",
+          ])}
+          {...inputProps}
+          type="checkbox"
+          className="navds-checkbox__input"
+          aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
+          ref={(el) => {
+            if (el) {
+              el.indeterminate = props.indeterminate ?? false;
+            }
 
-          if (typeof ref === "function") {
-            ref(el);
-          } else if (ref != null) {
-            ref.current = el;
-          }
-        }}
-      />
-      <label htmlFor={inputProps.id} className="navds-checkbox__label">
-        <div
-          className={cl("navds-checkbox__content", {
-            "navds-sr-only": props.hideLabel,
-          })}
-        >
-          <BodyShort as="div" size={size}>
-            {props.children}
-          </BodyShort>
-          {props.description && (
-            <Description
-              as="div"
-              size="small"
-              className="navds-checkbox__description"
-            >
-              {props.description}
-            </Description>
-          )}
-        </div>
-      </label>
-    </div>
-  );
-});
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref != null) {
+              ref.current = el;
+            }
+          }}
+        />
+        <label htmlFor={inputProps.id} className="navds-checkbox__label">
+          <div
+            className={cl("navds-checkbox__content", {
+              "navds-sr-only": props.hideLabel,
+            })}
+          >
+            <BodyShort as="div" size={size}>
+              {props.children}
+            </BodyShort>
+            {props.description && (
+              <Description
+                as="div"
+                size="small"
+                className="navds-checkbox__description"
+              >
+                {props.description}
+              </Description>
+            )}
+          </div>
+        </label>
+      </div>
+    );
+  }
+);
 
 export default Checkbox;

@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx

@@ -35,7 +35,10 @@ export interface CheckboxGroupProps
   onChange?: (value: any[]) => void;
 }
 
-const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
+export const CheckboxGroup = forwardRef<
+  HTMLFieldSetElement,
+  CheckboxGroupProps
+>(
   (
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -31,7 +31,7 @@ interface ErrorSummaryComponent
   Item: ErrorSummaryItemType;
 }
 
-const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
+export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
     {
       children,

@navikt/core/react/src/form/error-summary/ErrorSummaryItem.tsx

@@ -15,7 +15,7 @@ export type ErrorSummaryItemType = OverridableComponent<
   HTMLAnchorElement
 >;
 
-const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
+export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
       <Component

@navikt/core/react/src/form/error-summary/index.ts

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

@navikt/core/react/src/form/index.ts

@@ -1,22 +1,18 @@
 export {
   Checkbox,
-  CheckboxProps,
   CheckboxGroup,
   CheckboxGroupProps,
+  CheckboxProps,
 } from "./checkbox";
 export {
-  default as Fieldset,
-  FieldsetContext,
-  FieldsetProps,
-} from "./Fieldset";
+  ConfirmationPanelProps,
+  default as ConfirmationPanel,
+} from "./ConfirmationPanel";
+export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
+export { Fieldset, FieldsetContext, FieldsetProps } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export { Search, SearchProps, SearchClearEvent } from "./search";
+export { Search, SearchClearEvent, SearchProps } from "./search";
 export { default as Select, SelectProps } from "./Select";
 export { default as Switch, SwitchProps } from "./Switch";
-export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
-export {
-  default as ConfirmationPanel,
-  ConfirmationPanelProps,
-} from "./ConfirmationPanel";

@navikt/core/react/src/form/radio/Radio.tsx

@@ -17,7 +17,7 @@ export interface RadioProps
   value: any;
 }
 
-const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { inputProps, size, hasError } = useRadio(props);
 
   const Description = size === "medium" ? BodyShort : Detail;

@navikt/core/react/src/form/radio/RadioGroup.tsx

@@ -46,7 +46,7 @@ export interface RadioGroupProps
   required?: boolean;
 }
 
-const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
+export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
   (
     {
       children,

@navikt/core/react/src/form/search/Search.tsx

@@ -38,10 +38,6 @@ export interface SearchProps
    * Callback for value-change in input
    */
   onChange?: (value: string) => void;
-  /**
-   * Callback for <Search.Button/> click or onSubmit in form
-   */
-  onSearch?: (value: string | number | readonly string[]) => void;
   /**
    * Callback for click on clear-button or Escape keydown
    */
@@ -74,157 +70,156 @@ export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
   variant: "primary" | "secondary" | "simple";
-  onSearch: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
   null
 );
 
-const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
-  const { inputProps, size = "medium", inputDescriptionId } = useSearch(
-    props,
-    "searchfield"
-  );
+export const Search = forwardRef<HTMLInputElement, SearchProps>(
+  (props, ref) => {
+    const { inputProps, size = "medium", inputDescriptionId } = useSearch(
+      props,
+      "searchfield"
+    );
 
-  const {
-    className,
-    hideLabel = true,
-    label,
-    description,
-    value,
-    clearButtonLabel,
-    onClear,
-    clearButton = true,
-    children,
-    onSearch,
-    variant = "primary",
-    defaultValue,
-    onChange,
-    ...rest
-  } = props;
+    const {
+      className,
+      hideLabel = true,
+      label,
+      description,
+      value,
+      clearButtonLabel,
+      onClear,
+      clearButton = true,
+      children,
+      variant = "primary",
+      defaultValue,
+      onChange,
+      ...rest
+    } = props;
 
-  const searchRef = useRef<HTMLInputElement | null>(null);
-  const mergedRef = mergeRefs([searchRef, ref]);
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const searchRef = useRef<HTMLInputElement | null>(null);
+    const mergedRef = mergeRefs([searchRef, ref]);
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
-  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
-  const handleChange = useCallback(
-    (v: string) => {
-      value === undefined && setInternalValue(v);
-      onChange?.(v);
-    },
-    [onChange, value]
-  );
-
-  const handleClear = useCallback(
-    (event: SearchClearEvent) => {
-      onClear?.(event);
-      handleChange("");
-      searchRef.current && searchRef.current?.focus?.();
-    },
-    [handleChange, onClear]
-  );
-
-  useEventListener(
-    "keydown",
-    useCallback(
-      (e) => {
-        if (e.key === "Escape") {
-          e.preventDefault();
-          handleClear({ trigger: "Escape", event: e });
-        }
+    const handleChange = useCallback(
+      (v: string) => {
+        value === undefined && setInternalValue(v);
+        onChange?.(v);
       },
-      [handleClear]
-    ),
-    wrapperRef
-  );
+      [onChange, value]
+    );
 
-  return (
-    <div
-      ref={setWrapperRef}
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        "navds-search",
-        {
-          "navds-search--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-text-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    const handleClear = useCallback(
+      (event: SearchClearEvent) => {
+        onClear?.(event);
+        handleChange("");
+        searchRef.current && searchRef.current?.focus?.();
+      },
+      [handleChange, onClear]
+    );
+
+    useEventListener(
+      "keydown",
+      useCallback(
+        (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            handleClear({ trigger: "Escape", event: e });
+          }
+        },
+        [handleClear]
+      ),
+      wrapperRef
+    );
+
+    return (
+      <div
+        ref={setWrapperRef}
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          "navds-search",
+          {
+            "navds-search--disabled": !!inputProps.disabled,
+          }
+        )}
       >
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cl("navds-text-field__description", {
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-text-field__label", {
             "navds-sr-only": hideLabel,
           })}
-          id={inputDescriptionId}
-          size={size}
         >
-          {description}
-        </BodyShort>
-      )}
-      <div className="navds-search__wrapper">
-        <div className="navds-search__wrapper-inner">
-          {variant === "simple" && (
-            <SearchIcon aria-hidden className="navds-search__search-icon" />
-          )}
-          <input
-            ref={mergedRef}
-            {...omit(rest, ["size"])}
-            {...inputProps}
-            value={value ?? internalValue}
-            onChange={(e) => handleChange(e.target.value)}
-            type="search"
-            role="searchbox"
-            className={cl(
-              className,
-              "navds-search__input",
-              `navds-search__input--${variant}`,
-              "navds-text-field__input",
-              "navds-body-short",
-              `navds-body-${size}`
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cl("navds-text-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
+        )}
+        <div className="navds-search__wrapper">
+          <div className="navds-search__wrapper-inner">
+            {variant === "simple" && (
+              <SearchIcon aria-hidden className="navds-search__search-icon" />
             )}
-          />
-          {(value ?? internalValue) && clearButton && (
-            <button
-              type="button"
-              onClick={(e) => handleClear({ trigger: "Click", event: e })}
-              className="navds-search__button-clear"
-            >
-              <span className="navds-sr-only">
-                {clearButtonLabel ? clearButtonLabel : "Tøm"}
-              </span>
-              <Close aria-hidden />
-            </button>
-          )}
+            <input
+              ref={mergedRef}
+              {...omit(rest, ["size"])}
+              {...inputProps}
+              value={value ?? internalValue}
+              onChange={(e) => handleChange(e.target.value)}
+              type="search"
+              role="searchbox"
+              className={cl(
+                className,
+                "navds-search__input",
+                `navds-search__input--${variant}`,
+                "navds-text-field__input",
+                "navds-body-short",
+                `navds-body-${size}`
+              )}
+            />
+            {(value ?? internalValue) && clearButton && (
+              <button
+                type="button"
+                onClick={(e) => handleClear({ trigger: "Click", event: e })}
+                className="navds-search__button-clear"
+              >
+                <span className="navds-sr-only">
+                  {clearButtonLabel ? clearButtonLabel : "Tøm"}
+                </span>
+                <Close aria-hidden />
+              </button>
+            )}
+          </div>
+          <SearchContext.Provider
+            value={{
+              size,
+              disabled: inputProps.disabled,
+              variant,
+            }}
+          >
+            {children ? children : variant !== "simple" && <SearchButton />}
+          </SearchContext.Provider>
         </div>
-        <SearchContext.Provider
-          value={{
-            size,
-            disabled: inputProps.disabled,
-            variant,
-            onSearch: () => onSearch?.(value ?? internalValue),
-          }}
-        >
-          {children ? children : variant !== "simple" && <SearchButton />}
-        </SearchContext.Provider>
       </div>
-    </div>
-  );
-}) as SearchComponent;
+    );
+  }
+) as SearchComponent;
 
 Search.Button = SearchButton;
 

@navikt/core/react/src/form/search/SearchButton.tsx

@@ -17,7 +17,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 >;
 
 const SearchButton: SearchButtonType = forwardRef(
-  ({ className, children, disabled, onClick, ...rest }, ref) => {
+  ({ className, children, disabled, ...rest }, ref) => {
     const context = useContext(SearchContext);
 
     if (context === null) {
@@ -25,7 +25,7 @@ const SearchButton: SearchButtonType = forwardRef(
       return null;
     }
 
-    const { size, variant, onSearch } = context;
+    const { size, variant } = context;
 
     return (
       <Button
@@ -36,10 +36,6 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
-        onClick={(e) => {
-          onSearch?.();
-          onClick?.(e);
-        }}
       >
         <Search aria-hidden />
         {children ? children : <span className="navds-sr-only">Søk</span>}

@navikt/core/react/src/form/search/search.stories.tsx

@@ -33,7 +33,6 @@ export const Default = (props) => {
       <Search
         value={props.controlled ? state : undefined}
         onChange={props.controlled ? setState : null}
-        onSearch={(v) => console.log({ onSearch: v })}
         label="Søk"
         size={props.size}
         clearButton={props.clearButton}

@navikt/core/react/src/form/stories/confirmation-panel.stories.tsx

@@ -57,6 +57,13 @@ export const All = () => {
         onChange={() => setChecked(!checked)}
         label="Checkbox label text"
       ></ConfirmationPanel>
+      <h2>Uncontrolled</h2>
+      <ConfirmationPanel label="Checkbox label text"></ConfirmationPanel>
+      <h3>defaultChecked</h3>
+      <ConfirmationPanel
+        defaultChecked
+        label="Checkbox label text"
+      ></ConfirmationPanel>
     </div>
   );
 };

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -19,6 +19,14 @@ export const All = () => {
 
       <Textarea label="In anim elit" value={value} onChange={handleChange} />
 
+      <h2>Uncontrolled</h2>
+
+      <Textarea label="In anim elit" />
+
+      <h3>defaultValue</h3>
+
+      <Textarea label="In anim elit" defaultValue="wat" />
+
       <h2>Description</h2>
 
       <Textarea

@navikt/core/react/src/grid/Cell.tsx

@@ -25,7 +25,7 @@ export interface CellProps extends HTMLAttributes<HTMLDivElement> {
   lg?: Column;
 }
 
-const Cell = forwardRef<HTMLDivElement, CellProps>(
+export const Cell = forwardRef<HTMLDivElement, CellProps>(
   ({ children, xs, sm, md, lg, className, ...rest }, ref) => {
     return (
       <div

@navikt/core/react/src/grid/ContentContainer.tsx

@@ -8,14 +8,15 @@ export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-const ContentContainer = forwardRef<HTMLDivElement, ContentContainerProps>(
-  ({ className, ...rest }, ref) => (
-    <div
-      ref={ref}
-      className={cl("navds-content-container", className)}
-      {...rest}
-    />
-  )
-);
+export const ContentContainer = forwardRef<
+  HTMLDivElement,
+  ContentContainerProps
+>(({ className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    className={cl("navds-content-container", className)}
+    {...rest}
+  />
+));
 
 export default ContentContainer;

@navikt/core/react/src/grid/Grid.tsx

@@ -7,7 +7,8 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
 }
-const Grid = forwardRef<HTMLDivElement, GridProps>(
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
   ({ children, className, ...rest }, ref) => (
     <div ref={ref} className={cl("navds-grid", className)} {...rest}>
       {children}

@navikt/core/react/src/grid/index.ts

@@ -1,6 +1,6 @@
-export { default as Cell } from "./Cell";
-export * from "./Cell";
-export { default as Grid } from "./Grid";
-export * from "./Grid";
-export { default as ContentContainer } from "./ContentContainer";
-export * from "./ContentContainer";
+export { default as Cell, CellProps } from "./Cell";
+export { default as Grid, GridProps } from "./Grid";
+export {
+  default as ContentContainer,
+  ContentContainerProps,
+} from "./ContentContainer";

@navikt/core/react/src/guide-panel/GuidePanel.tsx

@@ -18,7 +18,7 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
   poster?: boolean;
 }
 
-const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
+export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
   (
     { children, className, illustration, poster = false, color, ...rest },
     ref

@navikt/core/react/src/guide-panel/index.ts

@@ -1,3 +1,2 @@
-export { default as GuidePanel } from "./GuidePanel";
-export * from "./GuidePanel";
+export { default as GuidePanel, GuidePanelProps } from "./GuidePanel";
 export { GuideProps } from "./Guide";

@navikt/core/react/src/help-text/HelpText.tsx

@@ -13,7 +13,7 @@ export interface HelpTextProps
   children: React.ReactNode;
 }
 
-const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
+export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   (
     {
       className,

@navikt/core/react/src/help-text/index.ts

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

@navikt/core/react/src/link-panel/LinkPanel.tsx

@@ -26,7 +26,7 @@ interface LinkPanelComponentType
   Description: LinkPanelDescriptionType;
 }
 
-const LinkPanelComponent: OverridableComponent<
+export const LinkPanelComponent: OverridableComponent<
   LinkPanelProps,
   HTMLAnchorElement
 > = forwardRef(

@navikt/core/react/src/link-panel/index.ts

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

@navikt/core/react/src/link/Link.tsx

@@ -10,7 +10,7 @@ export interface LinkProps
   children: React.ReactNode;
 }
 
-const Link: OverridableComponent<
+export const Link: OverridableComponent<
   LinkProps,
   HTMLAnchorElement
 > = forwardRef(({ as: Component = "a", className, ...rest }, ref) => (

@navikt/core/react/src/link/index.ts

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

@navikt/core/react/src/loader/Loader.tsx

@@ -25,7 +25,7 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
   variant?: "neutral" | "interaction" | "inverted";
 }
 
-const Loader = forwardRef<SVGSVGElement, LoaderProps>(
+export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
   (
     {
       children,

@navikt/core/react/src/loader/index.ts

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

@navikt/core/react/src/menu/Menu.tsx

@@ -17,7 +17,7 @@ interface MenuComponent
   Item: MenuItemType;
 }
 
-const Menu = forwardRef<HTMLElement, MenuProps>(
+export const Menu = forwardRef<HTMLElement, MenuProps>(
   ({ children, className, ...rest }, ref) => (
     <nav
       {...rest}

@navikt/core/react/src/menu/MenuCollapse.tsx

@@ -35,7 +35,7 @@ export type MenuCollapseType = React.ForwardRefExoticComponent<
   MenuCollapseProps & React.RefAttributes<HTMLDivElement>
 >;
 
-const Collapse: MenuCollapseType = forwardRef(
+export const Collapse: MenuCollapseType = forwardRef(
   ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useState(defaultOpen);
     const context = useContext(NestingContext);

@navikt/core/react/src/menu/MenuItem.tsx

@@ -17,7 +17,7 @@ export type MenuItemType = OverridableComponent<
   HTMLAnchorElement
 >;
 
-const Item: MenuItemType = forwardRef(
+export const Item: MenuItemType = forwardRef(
   (
     { children, as: Component = "a", active = false, className, ...rest },
     ref

@navikt/core/react/src/modal/Modal.tsx

@@ -59,7 +59,7 @@ type ModalLifecycle = {
   setAppElement?: (element: any) => void;
 };
 
-const Modal = forwardRef<ReactModal, ModalProps>(
+export const Modal = forwardRef<ReactModal, ModalProps>(
   (
     {
       children,

@navikt/core/react/src/modal/index.ts

@@ -1,3 +1,2 @@
-export { default as Modal } from "./Modal";
+export { default as Modal, ModalProps } from "./Modal";
 export { ModalContentProps } from "./ModalContent";
-export * from "./Modal";

@navikt/core/react/src/page-header/index.ts

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

@navikt/core/react/src/pagination/Pagination.tsx

@@ -3,7 +3,7 @@ import cl from "classnames";
 import { Back, Next } from "@navikt/ds-icons";
 import { BodyShort } from "..";
 
-interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Current page
    */
@@ -71,7 +71,7 @@ export const getSteps = ({
   ];
 };
 
-const Pagination = forwardRef<HTMLElement, PaginationProps>(
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
   (
     {
       page,

@navikt/core/react/src/pagination/index.ts

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

@navikt/core/react/src/panel/Panel.tsx

@@ -16,7 +16,7 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
 
 export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 
-const Panel: PanelType = forwardRef(
+export const Panel: PanelType = forwardRef(
   (
     { children, className, border = false, as: Component = "div", ...rest },
     ref

@navikt/core/react/src/panel/index.ts

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

@navikt/core/react/src/popover/Popover.tsx

@@ -67,7 +67,7 @@ interface PopoverComponent
   Content: PopoverContentType;
 }
 
-const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
     {
       className,

@navikt/core/react/src/popover/index.ts

@@ -1,3 +1,2 @@
-export { default as Popover } from "./Popover";
-export * from "./Popover";
+export { default as Popover, PopoverProps } from "./Popover";
 export { PopoverContentProps } from "./PopoverContent";

@navikt/core/react/src/read-more/ReadMore.tsx

@@ -31,7 +31,7 @@ export interface ReadMoreProps
   renderContentWhenClosed?: boolean;
 }
 
-const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
+export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
   (
     {
       className,

@navikt/core/react/src/read-more/index.ts

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

@navikt/core/react/src/read-more/read-more.stories.tsx

@@ -17,7 +17,7 @@ export const All = () => {
       <ReadMore
         open={open}
         onClick={() => setOpen(!open)}
-        header="ReadMore header text"
+        header="ReadMore header text ReadMore header text ReadMore header text ReadMore header text ReadMore header text"
       >
         Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
         officia laboris voluptate officia pariatur.Lorem est ex anim velit

@navikt/core/react/src/speech-bubble/SpeechBubble.tsx

@@ -37,7 +37,7 @@ interface SpeechBubbleComponent
   Bubble: BubbleType;
 }
 
-const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
+export const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
   (
     {
       children,

@navikt/core/react/src/speech-bubble/index.ts

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

@navikt/core/react/src/step-indicator/Step.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
-import { StepContext } from ".";
+import { StepContext } from "./StepIndicator";
 import { BodyShort, Label, OverridableComponent } from "..";
 
 export interface StepIndicatorStepProps
@@ -22,7 +22,7 @@ export interface StepIndicatorStepProps
 export interface StepIndicatorStepType
   extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {}
 
-const StepComponent: OverridableComponent<
+export const StepIndicatorStepComponent: OverridableComponent<
   StepIndicatorStepProps,
   HTMLButtonElement
 > = forwardRef(
@@ -74,6 +74,6 @@ const StepComponent: OverridableComponent<
   }
 );
 
-const Step = StepComponent as StepIndicatorStepType;
+const Step = StepIndicatorStepComponent as StepIndicatorStepType;
 
 export default Step;

@navikt/core/react/src/step-indicator/StepIndicator.tsx

@@ -8,7 +8,10 @@ import React, {
   useState,
 } from "react";
 import mergeRefs from "react-merge-refs";
-import Step, { StepIndicatorStepProps, StepIndicatorStepType } from "./Step";
+import StepIndicatorStep, {
+  StepIndicatorStepProps,
+  StepIndicatorStepType,
+} from "./Step";
 
 export interface StepIndicatorProps
   extends React.HTMLAttributes<HTMLOListElement> {
@@ -55,7 +58,7 @@ interface StepContextProps {
 
 export const StepContext = createContext<StepContextProps | null>(null);
 
-const StepIndicator: StepIndicatorComponent = forwardRef<
+export const StepIndicator: StepIndicatorComponent = forwardRef<
   HTMLOListElement,
   StepIndicatorProps
 >(
@@ -140,6 +143,6 @@ const StepIndicator: StepIndicatorComponent = forwardRef<
   }
 ) as StepIndicatorComponent;
 
-StepIndicator.Step = Step;
+StepIndicator.Step = StepIndicatorStep;
 
 export default StepIndicator;

@navikt/core/react/src/step-indicator/index.ts

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

@navikt/core/react/src/stepper/Step.tsx

@@ -1,6 +1,6 @@
 import cl from "classnames";
 import React, { forwardRef, useContext } from "react";
-import { StepperContext } from ".";
+import { StepperContext } from "./Stepper";
 import { Label, OverridableComponent } from "..";
 
 export interface StepperStepProps
@@ -18,7 +18,7 @@ export interface StepperStepProps
 export interface StepperStepType
   extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
 
-const StepComponent: OverridableComponent<
+export const StepComponent: OverridableComponent<
   StepperStepProps,
   HTMLAnchorElement
 > = forwardRef(

@navikt/core/react/src/stepper/Stepper.tsx

@@ -36,7 +36,10 @@ interface StepperContextProps {
 
 export const StepperContext = createContext<StepperContextProps | null>(null);
 
-const Stepper: StepperComponent = forwardRef<HTMLOListElement, StepperProps>(
+export const Stepper: StepperComponent = forwardRef<
+  HTMLOListElement,
+  StepperProps
+>(
   (
     { children, className, activeStep, onStepChange = () => {}, ...rest },
     ref

@navikt/core/react/src/stepper/index.ts

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

@navikt/core/react/src/table/Body.tsx

@@ -1,14 +1,15 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export interface BodyProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
 export interface BodyType
   extends React.ForwardRefExoticComponent<
     BodyProps & React.RefAttributes<HTMLTableSectionElement>
   > {}
 
-const Body: BodyType = forwardRef(({ className, ...rest }, ref) => (
+export const Body: BodyType = forwardRef(({ className, ...rest }, ref) => (
   <tbody {...rest} ref={ref} className={cl("navds-table__body", className)} />
 ));
 

@navikt/core/react/src/table/ColumnHeader.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, useContext } from "react";
 import { Down, Up, UpDown } from "@navikt/ds-icons";
-import { TableContext } from "..";
+import { TableContext } from "./Table";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 
-interface ColumnHeaderProps extends HeaderCellProps {
+export interface ColumnHeaderProps extends HeaderCellProps {
   /**
    * Key to sort by
    */
@@ -20,7 +20,7 @@ export interface ColumnHeaderType
     ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const ColumnHeader: ColumnHeaderType = forwardRef(
+export const ColumnHeader: ColumnHeaderType = forwardRef(
   ({ className, children, sortable = false, sortKey, ...rest }, ref) => {
     const context = useContext(TableContext);
 

@navikt/core/react/src/table/DataCell.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { BodyShort } from "..";
-import { TableContext } from ".";
+import { TableContext } from "./Table";
 
-interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+export interface DataCellProps
+  extends React.TdHTMLAttributes<HTMLTableCellElement> {
   /**
    * Content alignment
    * @default "left"
@@ -16,7 +17,7 @@ export interface DataCellType
     DataCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const DataCell: DataCellType = forwardRef(
+export const DataCell: DataCellType = forwardRef(
   ({ className, children = "", align, ...rest }, ref) => {
     const context = useContext(TableContext);
 

@navikt/core/react/src/table/ExpandableRow.tsx

@@ -6,7 +6,7 @@ import { UnmountClosed } from "react-collapse";
 import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import { useId } from "..";
 
-interface ExpandableRowProps extends RowProps {
+export interface ExpandableRowProps extends RowProps {
   /**
    * Content of the expanded row
    */
@@ -30,6 +30,11 @@ interface ExpandableRowProps extends RowProps {
    * Change handler for open
    */
   onOpenChange?: (open: boolean) => void;
+  /**
+   * Disable expansion
+   * @default false
+   */
+  expansionDisabled?: boolean;
 }
 
 export interface ExpandableRowType
@@ -37,7 +42,7 @@ export interface ExpandableRowType
     ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>
   > {}
 
-const ExpandableRow: ExpandableRowType = forwardRef(
+export const ExpandableRow: ExpandableRowType = forwardRef(
   (
     {
       className,
@@ -47,6 +52,7 @@ const ExpandableRow: ExpandableRowType = forwardRef(
       defaultOpen = false,
       open,
       onOpenChange,
+      expansionDisabled = false,
       ...rest
     },
     ref
@@ -71,26 +77,28 @@ const ExpandableRow: ExpandableRowType = forwardRef(
               "navds-table__toggle-expand-cell--open": isOpen,
             })}
           >
-            <button
-              className="navds-table__toggle-expand-button"
-              aria-controls={id}
-              aria-expanded={isOpen}
-              onClick={() => {
-                onOpenChange?.(!isOpen);
-                if (open === undefined) {
-                  setInternalOpen((open) => !open);
-                }
-              }}
-            >
-              <Expand
-                className="navds-table__expandable-icon"
-                title={isOpen ? "Vis mindre" : "Vis mer"}
-              />
-              <ExpandFilled
-                className="navds-table__expandable-icon navds-table__expandable-icon--filled"
-                title={isOpen ? "Vis mindre" : "Vis mer"}
-              />
-            </button>
+            {!expansionDisabled && (
+              <button
+                className="navds-table__toggle-expand-button"
+                aria-controls={id}
+                aria-expanded={isOpen}
+                onClick={() => {
+                  onOpenChange?.(!isOpen);
+                  if (open === undefined) {
+                    setInternalOpen((open) => !open);
+                  }
+                }}
+              >
+                <Expand
+                  className="navds-table__expandable-icon"
+                  title={isOpen ? "Vis mindre" : "Vis mer"}
+                />
+                <ExpandFilled
+                  className="navds-table__expandable-icon navds-table__expandable-icon--filled"
+                  title={isOpen ? "Vis mindre" : "Vis mer"}
+                />
+              </button>
+            )}
           </DataCell>
           {togglePlacement === "left" && children}
         </Row>

@navikt/core/react/src/table/Header.tsx

@@ -1,14 +1,15 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-interface HeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export interface HeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
 export interface HeaderType
   extends React.ForwardRefExoticComponent<
     HeaderProps & React.RefAttributes<HTMLTableSectionElement>
   > {}
 
-const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => (
+export const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => (
   <thead {...rest} ref={ref} className={cl("navds-table__header", className)} />
 ));
 

@navikt/core/react/src/table/HeaderCell.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
-import { Label, TableContext } from "..";
+import { Label } from "..";
+import { TableContext } from "./Table";
 
 export interface HeaderCellProps
   extends React.ThHTMLAttributes<HTMLTableCellElement> {
@@ -17,7 +18,7 @@ export interface HeaderCellType
     HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const HeaderCell: HeaderCellType = forwardRef(
+export const HeaderCell: HeaderCellType = forwardRef(
   ({ className, children, align, ...rest }, ref) => {
     const context = useContext(TableContext);
 

@navikt/core/react/src/table/Row.tsx

@@ -14,7 +14,7 @@ export interface RowType
     RowProps & React.RefAttributes<HTMLTableRowElement>
   > {}
 
-const Row: RowType = forwardRef(
+export const Row: RowType = forwardRef(
   ({ className, selected = false, ...rest }, ref) => (
     <tr
       {...rest}

@navikt/core/react/src/table/Table.tsx

@@ -56,7 +56,7 @@ export interface TableContextProps {
 
 export const TableContext = createContext<TableContextProps | null>(null);
 
-const Table = forwardRef(
+export const Table = forwardRef(
   (
     {
       className,

@navikt/core/react/src/table/index.ts

@@ -1,2 +1,8 @@
-export { default as Table } from "./Table";
-export * from "./Table";
+export { BodyProps } from "./Body";
+export { ColumnHeaderProps } from "./ColumnHeader";
+export { DataCellProps } from "./DataCell";
+export { ExpandableRowProps } from "./ExpandableRow";
+export { HeaderProps } from "./Header";
+export { HeaderCellProps } from "./HeaderCell";
+export { RowProps } from "./Row";
+export { default as Table, TableProps } from "./Table";

@navikt/core/react/src/table/stories/table-expandable.stories.tsx

@@ -12,7 +12,7 @@ export const Expandable = () => {
 
   return (
     <>
-      <Table>
+      <Table zebraStripes>
         <Table.Header>
           <Table.Row>
             {columns.map(({ key, name }) => (
@@ -24,6 +24,7 @@ export const Expandable = () => {
         <Table.Body>
           {data.map((data) => (
             <Table.ExpandableRow
+              expansionDisabled={data.animal === "Sel"}
               content={data.content}
               key={data.name}
               togglePlacement="right"

@navikt/core/react/src/tabs/Tab.tsx

@@ -27,7 +27,7 @@ export interface TabProps
 
 export type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
 
-const Tab: TabType = forwardRef(
+export const Tab: TabType = forwardRef(
   (
     {
       className,

@navikt/core/react/src/tabs/TabList.tsx

@@ -5,7 +5,7 @@ import cl from "classnames";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 
-export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Tab elements
    */
@@ -16,11 +16,11 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   loop?: boolean;
 }
 
-export type ListType = React.ForwardRefExoticComponent<
-  ListProps & React.RefAttributes<HTMLDivElement>
+export type TabListType = React.ForwardRefExoticComponent<
+  TabListProps & React.RefAttributes<HTMLDivElement>
 >;
 
-const List = forwardRef<HTMLDivElement, ListProps>(
+export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, ...rest }, ref) => {
     const listRef = useRef<HTMLDivElement | null>(null);
     const mergedRef = mergeRefs([listRef, ref]);
@@ -122,6 +122,6 @@ const List = forwardRef<HTMLDivElement, ListProps>(
       </div>
     );
   }
-) as ListType;
+) as TabListType;
 
-export default List;
+export default TabList;

@navikt/core/react/src/tabs/TabPanel.tsx

@@ -2,7 +2,7 @@ import { TabsContent } from "@radix-ui/react-tabs";
 import cl from "classnames";
 import React, { forwardRef } from "react";
 
-export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Tab panel
    */
@@ -13,11 +13,11 @@ export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string;
 }
 
-export type PanelType = React.ForwardRefExoticComponent<
-  PanelProps & React.RefAttributes<HTMLDivElement>
+export type TabPanelType = React.ForwardRefExoticComponent<
+  TabPanelProps & React.RefAttributes<HTMLDivElement>
 >;
 
-const Panel = forwardRef<HTMLDivElement, PanelProps>(
+const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
   ({ className, ...rest }, ref) => (
     <TabsContent
       {...rest}
@@ -25,6 +25,6 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(
       className={cl("navds-tabs__tabpanel", className)}
     />
   )
-) as PanelType;
+) as TabPanelType;
 
-export default Panel;
+export default TabPanel;

@navikt/core/react/src/tabs/Tabs.tsx

@@ -2,8 +2,8 @@ import cl from "classnames";
 import React, { createContext, forwardRef, HTMLAttributes } from "react";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import Tab, { TabType } from "./Tab";
-import List, { ListType } from "./TabList";
-import Panel, { PanelType } from "./TabPanel";
+import TabList, { TabListType } from "./TabList";
+import TabPanel, { TabPanelType } from "./TabPanel";
 
 export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -40,8 +40,8 @@ interface TabsComponent
     TabsProps & React.RefAttributes<HTMLDivElement>
   > {
   Tab: TabType;
-  List: ListType;
-  Panel: PanelType;
+  List: TabListType;
+  Panel: TabPanelType;
 }
 
 interface TabsContextProps {
@@ -50,7 +50,7 @@ interface TabsContextProps {
 
 export const TabsContext = createContext<TabsContextProps | null>(null);
 
-const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
   (
     {
       className,
@@ -83,7 +83,7 @@ const Tabs = forwardRef<HTMLDivElement, TabsProps>(
 ) as TabsComponent;
 
 Tabs.Tab = Tab;
-Tabs.List = List;
-Tabs.Panel = Panel;
+Tabs.List = TabList;
+Tabs.Panel = TabPanel;
 
 export default Tabs;

@navikt/core/react/src/tabs/index.ts

@@ -1,2 +1,4 @@
-export { default as Tabs, TabsProps } from "./Tabs";
 export { TabProps } from "./Tab";
+export { TabListProps } from "./TabList";
+export { TabPanelProps } from "./TabPanel";
+export { default as Tabs, TabsProps } from "./Tabs";

@navikt/core/react/src/tag/Tag.tsx

@@ -19,7 +19,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   size?: "medium" | "small";
 }
 
-const Tag = forwardRef<HTMLSpanElement, TagProps>(
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(
   ({ className, variant, size = "medium", ...rest }, ref) => {
     const Component = size === "medium" ? BodyShort : Detail;
 

@navikt/core/react/src/tag/index.ts

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

@navikt/core/react/src/toggle-group/ToggleGroup.tsx

@@ -53,7 +53,7 @@ export const ToggleGroupContext = createContext<ToggleContextProps | null>(
   null
 );
 
-const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (
     {
       className,

@navikt/core/react/src/toggle-group/index.ts

@@ -1,2 +1,2 @@
-export { default as ToggleGroup } from "./ToggleGroup";
-export { ToggleGroupProps } from "./ToggleGroup";
+export { default as ToggleGroup, ToggleGroupProps } from "./ToggleGroup";
+export { ToggleItemProps } from "./ToggleItem";

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -71,7 +71,7 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   keys?: string[];
 }
 
-const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   (
     {
       children,
@@ -165,8 +165,7 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     useEventListener(
       "keydown",
-      useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]),
-      document
+      useCallback((e) => e.key === "Escape" && handleClose(), [handleClose])
     );
 
     /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
@@ -212,7 +211,10 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           ),
           onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
             isMouseDownRef.current = true;
-            document.addEventListener("mouseup", handleMouseUp, { once: true });
+            document &&
+              document.addEventListener("mouseup", handleMouseUp, {
+                once: true,
+              });
           }),
           onFocus: composeEventHandlers(
             children.props.onFocus,

@navikt/core/react/src/tooltip/index.ts

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

@navikt/core/react/src/typography/BodyLong.tsx

@@ -19,7 +19,7 @@ export interface BodyLongProps
   spacing?: boolean;
 }
 
-const BodyLong: OverridableComponent<
+export const BodyLong: OverridableComponent<
   BodyLongProps,
   HTMLParagraphElement
 > = forwardRef(

@navikt/core/react/src/typography/BodyShort.tsx

@@ -19,7 +19,7 @@ export interface BodyShortProps
   spacing?: boolean;
 }
 
-const BodyShort: OverridableComponent<
+export const BodyShort: OverridableComponent<
   BodyShortProps,
   HTMLParagraphElement
 > = forwardRef(

@navikt/core/react/src/typography/Detail.tsx

@@ -19,7 +19,7 @@ export interface DetailProps
   spacing?: boolean;
 }
 
-const Detail: OverridableComponent<
+export const Detail: OverridableComponent<
   DetailProps,
   HTMLParagraphElement
 > = forwardRef(

@navikt/core/react/src/typography/Heading.tsx

@@ -23,7 +23,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   spacing?: boolean;
 }
 
-const Heading: OverridableComponent<
+export const Heading: OverridableComponent<
   HeadingProps,
   HTMLHeadingElement
 > = forwardRef(

@navikt/core/react/src/typography/Ingress.tsx

@@ -14,7 +14,7 @@ export interface IngressProps
   spacing?: boolean;
 }
 
-const Ingress: OverridableComponent<
+export const Ingress: OverridableComponent<
   IngressProps,
   HTMLParagraphElement
 > = forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => (

@navikt/core/react/src/typography/Label.tsx

@@ -18,7 +18,7 @@ export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
   spacing?: boolean;
 }
 
-const Label: OverridableComponent<
+export const Label: OverridableComponent<
   LabelProps,
   HTMLParagraphElement
 > = forwardRef(

@navikt/core/react/src/typography/index.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";