@navikt/ds-react 6.6.1 → 6.7.0

package/esm/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/progress-bar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAqD1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,GAAG,EACd,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,SAAS,OAEV,EADI,IAAI,cAPT,2EAQC,CADQ;IAIT,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAC7D,MAAM,QAAQ,GAAG,SAAS,CAAC;IAE3B,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,SAAS,CACV,mBACc,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,mBACnC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,oBAE7C,QAAQ;YACN,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAEvD,IAAI,EAAC,aAAa,qBACD,cAAc,gBACnB,SAAS,IACjB,IAAI;QAER,6BACE,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE;gBAC9C,+CAA+C,EAC7C,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;aAC7B,CAAC,EACF,KAAK,EAAE;gBACL,8BAA8B,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;oBACxD,CAAC,CAAC,GAAG,QAAQ,GAAG;oBAChB,CAAC,CAAC,SAAS;gBACb,2BAA2B,EAAE,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;gBACzD,+BAA+B,EAAE,IAAI,SAAS,GAAG;aAClD,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar.js";

package/esm/progress-bar/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { default as ProgressBar } from "./ProgressBar.js";
+//# sourceMappingURL=index.js.map

package/esm/progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAyB,MAAM,eAAe,CAAC"}

package/esm/typography/BodyLong.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface BodyLongProps extends TypoProps, React.HTMLAttributes<HTMLParagraphElement> {
     /**
-     * large: 20px, medium: 18px, small: 16px
+     * large: 20px, medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "large" | "medium" | "small";
     /**
-     * Text
+     * Text.
      */
     children: React.ReactNode;
 }
@@ -21,11 +21,11 @@ export interface BodyLongProps extends TypoProps, React.HTMLAttributes<HTMLParag
  *
  * @example
  * ```jsx
- *     <BodyLong>
- *       Hvis du ikke bor sammen med begge foreldrene dine,
- *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
- *       fullfører videregående skole eller tilsvarende.
- *     </BodyLong>
+ * <BodyLong>
+ *   Hvis du ikke bor sammen med begge foreldrene dine,
+ *   kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *   fullfører videregående skole eller tilsvarende.
+ * </BodyLong>
  * ```
  */
 export declare const BodyLong: OverridableComponent<BodyLongProps, HTMLParagraphElement>;

package/esm/typography/BodyLong.js

@@ -21,11 +21,11 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <BodyLong>
- *       Hvis du ikke bor sammen med begge foreldrene dine,
- *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
- *       fullfører videregående skole eller tilsvarende.
- *     </BodyLong>
+ * <BodyLong>
+ *   Hvis du ikke bor sammen med begge foreldrene dine,
+ *   kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *   fullfører videregående skole eller tilsvarende.
+ * </BodyLong>
  * ```
  */
 export const BodyLong = forwardRef((_a, ref) => {

package/esm/typography/BodyShort.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface BodyShortProps extends TypoProps, React.HTMLAttributes<HTMLParagraphElement> {
     /**
-     * large: 20px, medium: 18px, small: 16px
+     * large: 20px, medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "large" | "medium" | "small";
     /**
-     * Paragraph text
+     * Paragraph text.
      */
     children: React.ReactNode;
 }
@@ -21,9 +21,9 @@ export interface BodyShortProps extends TypoProps, React.HTMLAttributes<HTMLPara
  *
  * @example
  * ```jsx
- *     <BodyShort>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </BodyShort>
+ * <BodyShort>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </BodyShort>
  * ```
  */
 export declare const BodyShort: OverridableComponent<BodyShortProps, HTMLParagraphElement>;

package/esm/typography/BodyShort.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <BodyShort>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </BodyShort>
+ * <BodyShort>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </BodyShort>
  * ```
  */
 export const BodyShort = forwardRef((_a, ref) => {

package/esm/typography/Detail.d.ts

@@ -7,11 +7,11 @@ export interface DetailProps extends TypoProps, React.HTMLAttributes<HTMLParagra
      */
     size?: "medium" | "small";
     /**
-     * Paragraph text
+     * Text.
      */
     children: React.ReactNode;
     /**
-     * All caps
+     * ALL CAPS.
      */
     uppercase?: boolean;
 }
@@ -24,9 +24,9 @@ export interface DetailProps extends TypoProps, React.HTMLAttributes<HTMLParagra
  *
  * @example
  * ```jsx
- *     <Detail>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </Detail>
+ * <Detail>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </Detail>
  * ```
  */
 export declare const Detail: OverridableComponent<DetailProps, HTMLParagraphElement>;

package/esm/typography/Detail.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <Detail>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </Detail>
+ * <Detail>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </Detail>
  * ```
  */
 export const Detail = forwardRef((_a, ref) => {

package/esm/typography/ErrorMessage.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface ErrorMessageProps extends Pick<TypoProps, "spacing">, React.HTMLAttributes<HTMLParagraphElement> {
     /**
-     * medium: 18px, small: 16px
+     * medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "medium" | "small";
     /**
-     * Error text
+     * Error text.
      */
     children: React.ReactNode;
 }
@@ -21,9 +21,9 @@ export interface ErrorMessageProps extends Pick<TypoProps, "spacing">, React.HTM
  *
  * @example
  * ```jsx
- *     <ErrorMessage>
- *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </ErrorMessage>
+ * <ErrorMessage>
+ *   Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </ErrorMessage>
  * ```
  */
 export declare const ErrorMessage: OverridableComponent<ErrorMessageProps, HTMLParagraphElement>;

package/esm/typography/ErrorMessage.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <ErrorMessage>
- *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </ErrorMessage>
+ * <ErrorMessage>
+ *   Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </ErrorMessage>
  * ```
  */
 export const ErrorMessage = forwardRef((_a, ref) => {

package/esm/typography/Heading.d.ts

@@ -3,16 +3,16 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface HeadingProps extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">, React.HTMLAttributes<HTMLHeadingElement> {
     /**
-     * Heading level
+     * Heading level.
      * @default "1"
      */
     level?: "1" | "2" | "3" | "4" | "5" | "6";
     /**
-     * Changes text-sizing
+     * xlarge: 40px, large: 32px, medium: 24px, small: 20px, xsmall: 18px.
      */
     size: "xlarge" | "large" | "medium" | "small" | "xsmall";
     /**
-     * Heading text
+     * Heading text.
      */
     children: React.ReactNode;
 }
@@ -25,9 +25,9 @@ export interface HeadingProps extends Pick<TypoProps, "spacing" | "visuallyHidde
  *
  * @example
  * ```jsx
- *     <Heading level="1" size="xlarge">
- *       Hva kan vi hjelpe deg med?
- *     </Heading>
+ * <Heading level="1" size="xlarge">
+ *   Hva kan vi hjelpe deg med?
+ * </Heading>
  * ```
  */
 export declare const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement>;

package/esm/typography/Heading.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <Heading level="1" size="xlarge">
- *       Hva kan vi hjelpe deg med?
- *     </Heading>
+ * <Heading level="1" size="xlarge">
+ *   Hva kan vi hjelpe deg med?
+ * </Heading>
  * ```
  */
 export const Heading = forwardRef((_a, ref) => {

package/esm/typography/Label.d.ts

@@ -3,12 +3,12 @@ import { OverridableComponent } from "../util/types/index.js";
 import { TypoProps } from "./types.js";
 export interface LabelProps extends Omit<TypoProps, "weight" | "align" | "truncate">, React.LabelHTMLAttributes<HTMLLabelElement> {
     /**
-     * medium: 18px, small: 16px
+     * medium: 18px, small: 16px.
      * @default "medium"
      */
     size?: "medium" | "small";
     /**
-     * Paragraph text
+     * Label text.
      */
     children: React.ReactNode;
 }
@@ -21,9 +21,9 @@ export interface LabelProps extends Omit<TypoProps, "weight" | "align" | "trunca
  *
  * @example
  * ```jsx
- *     <Label>
- *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </Label>
+ * <Label>
+ *   Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </Label>
  * ```
  */
 export declare const Label: OverridableComponent<LabelProps, HTMLLabelElement>;

package/esm/typography/Label.js

@@ -21,9 +21,9 @@ import { typoClassNames } from "./util.js";
  *
  * @example
  * ```jsx
- *     <Label>
- *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </Label>
+ * <Label>
+ *   Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </Label>
  * ```
  */
 export const Label = forwardRef((_a, ref) => {

package/esm/typography/types.d.ts

@@ -12,15 +12,15 @@ export type TypoProps = {
      */
     align?: "start" | "center" | "end";
     /**
-     * Visually hide text. Text will still be accessible for screenreaders
+     * Visually hide text. Text will still be accessible for screenreaders.
      */
     visuallyHidden?: boolean;
     /**
-     * Adds spacing below text
+     * Adds spacing below text.
      */
     spacing?: boolean;
     /**
-     * Adjusts color
+     * Adjusts color.
      */
     textColor?: "default" | "subtle";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.6.1",
+  "version": "6.7.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -310,6 +310,16 @@
         "default": "./cjs/popover/index.js"
       }
     },
+    "./ProgressBar": {
+      "import": {
+        "types": "./esm/progress-bar/index.d.ts",
+        "default": "./esm/progress-bar/index.js"
+      },
+      "require": {
+        "types": "./cjs/progress-bar/index.d.ts",
+        "default": "./cjs/progress-bar/index.js"
+      }
+    },
     "./Provider": {
       "import": {
         "types": "./esm/provider/index.d.ts",
@@ -573,8 +583,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.6.1",
-    "@navikt/ds-tokens": "^6.6.1",
+    "@navikt/aksel-icons": "^6.7.0",
+    "@navikt/ds-tokens": "^6.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

package/src/index.ts

@@ -59,6 +59,7 @@ export { Modal, type ModalProps } from "./modal";
 export { Pagination, type PaginationProps } from "./pagination";
 export { Popover, type PopoverProps } from "./popover";
 export { Portal, type PortalProps } from "./portal";
+export { ProgressBar, type ProgressBarProps } from "./progress-bar";
 export { Provider, type ProviderProps } from "./provider";
 export { ReadMore, type ReadMoreProps } from "./read-more";
 export { Skeleton, type SkeletonProps } from "./skeleton";

package/src/progress-bar/ProgressBar.tsx

@@ -0,0 +1,124 @@
+import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
+
+interface ProgressBarPropsBase
+  extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+  /**
+   * Changes height.
+   * @default "medium"
+   */
+  size?: "large" | "medium" | "small";
+  /**
+   * Current progress. When duration is set, value is ignored.
+   */
+  value?: number;
+  /**
+   * Maximum progress.
+   * @default 100
+   */
+  valueMax?: number;
+  /**
+   * Expected task duration in seconds.
+   * ProgressBar grows with a preset animation for {duration} seconds.
+   * After a 4 sec delay, it then shows an indeterminate animation.
+   * A duration of 0 will show an indeterminate animation immediately.
+   * Temporary removed to avoid conflicts when updating API
+   */
+  //duration?: number;
+  /**
+   * String ID of the element that labels the progress bar.
+   * Not needed if `aria-label` is used.
+   */
+  "aria-labelledby"?: string;
+  /**
+   * String value that labels the progress bar.
+   * Not needed if `aria-labelledby` is used.
+   */
+  "aria-label"?: string;
+}
+
+export type ProgressBarProps = ProgressBarPropsBase &
+  (
+    | {
+        "aria-hidden": string;
+      }
+    | {
+        "aria-labelledby": string;
+        "aria-label"?: never;
+      }
+    | {
+        "aria-label": string;
+        "aria-labelledby"?: never;
+      }
+  );
+
+/**
+ * ProgressBar
+ * A component for visualizing progression in a process.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
+ * @see 🏷️ {@link ProgressBarProps}
+ *
+ * @example
+ * // For loading content with an approximate duration in sec.
+ * <ProgressBar duration={30} />
+ *
+ * @example
+ * // As a step indicator for forms, questionnaires, etc.
+ * <ProgressBar value={2} valueMax={7} />
+ */
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  (
+    {
+      size = "medium",
+      value = 0,
+      valueMax = 100,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const translate = 100 - (Math.round(value) / valueMax) * 100;
+    const duration = undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-progress-bar",
+          `navds-progress-bar--${size}`,
+          className,
+        )}
+        aria-valuemax={duration ? 0 : Math.round(valueMax)}
+        aria-valuenow={duration ? 0 : Math.round(value)}
+        aria-valuetext={
+          duration
+            ? "Fremdrift kan ikke beregnes"
+            : `${Math.round(value)} av ${Math.round(valueMax)}`
+        }
+        role="progressbar"
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabel}
+        {...rest}
+      >
+        <div
+          className={cl("navds-progress-bar__foreground", {
+            "navds-progress-bar__foreground--indeterminate":
+              Number.isInteger(duration),
+          })}
+          style={{
+            "--__ac-progress-bar-duration": Number.isInteger(duration)
+              ? `${duration}s`
+              : undefined,
+            "--__ac-progress-bar-delay": `${duration === 0 ? 0 : 4}s`,
+            "--__ac-progress-bar-translate": `-${translate}%`,
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+export default ProgressBar;

package/src/progress-bar/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar";

package/src/typography/BodyLong.tsx

@@ -8,12 +8,12 @@ export interface BodyLongProps
   extends TypoProps,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * large: 20px, medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
   /**
-   * Text
+   * Text.
    */
   children: React.ReactNode;
 }
@@ -27,11 +27,11 @@ export interface BodyLongProps
  *
  * @example
  * ```jsx
- *     <BodyLong>
- *       Hvis du ikke bor sammen med begge foreldrene dine,
- *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
- *       fullfører videregående skole eller tilsvarende.
- *     </BodyLong>
+ * <BodyLong>
+ *   Hvis du ikke bor sammen med begge foreldrene dine,
+ *   kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *   fullfører videregående skole eller tilsvarende.
+ * </BodyLong>
  * ```
  */
 export const BodyLong: OverridableComponent<

package/src/typography/BodyShort.tsx

@@ -8,12 +8,12 @@ export interface BodyShortProps
   extends TypoProps,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * large: 20px, medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
   /**
-   * Paragraph text
+   * Paragraph text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface BodyShortProps
  *
  * @example
  * ```jsx
- *     <BodyShort>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </BodyShort>
+ * <BodyShort>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </BodyShort>
  * ```
  */
 export const BodyShort: OverridableComponent<

package/src/typography/Detail.tsx

@@ -12,11 +12,11 @@ export interface DetailProps
    */
   size?: "medium" | "small";
   /**
-   * Paragraph text
+   * Text.
    */
   children: React.ReactNode;
   /**
-   * All caps
+   * ALL CAPS.
    */
   uppercase?: boolean;
 }
@@ -30,9 +30,9 @@ export interface DetailProps
  *
  * @example
  * ```jsx
- *     <Detail>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </Detail>
+ * <Detail>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </Detail>
  * ```
  */
 export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =

package/src/typography/ErrorMessage.tsx

@@ -8,12 +8,12 @@ export interface ErrorMessageProps
   extends Pick<TypoProps, "spacing">,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 18px, small: 16px
+   * medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Error text
+   * Error text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface ErrorMessageProps
  *
  * @example
  * ```jsx
- *     <ErrorMessage>
- *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </ErrorMessage>
+ * <ErrorMessage>
+ *   Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </ErrorMessage>
  * ```
  */
 export const ErrorMessage: OverridableComponent<

package/src/typography/Heading.tsx

@@ -8,16 +8,16 @@ export interface HeadingProps
   extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
     React.HTMLAttributes<HTMLHeadingElement> {
   /**
-   * Heading level
+   * Heading level.
    * @default "1"
    */
   level?: "1" | "2" | "3" | "4" | "5" | "6";
   /**
-   * Changes text-sizing
+   * xlarge: 40px, large: 32px, medium: 24px, small: 20px, xsmall: 18px.
    */
   size: "xlarge" | "large" | "medium" | "small" | "xsmall";
   /**
-   * Heading text
+   * Heading text.
    */
   children: React.ReactNode;
 }
@@ -31,9 +31,9 @@ export interface HeadingProps
  *
  * @example
  * ```jsx
- *     <Heading level="1" size="xlarge">
- *       Hva kan vi hjelpe deg med?
- *     </Heading>
+ * <Heading level="1" size="xlarge">
+ *   Hva kan vi hjelpe deg med?
+ * </Heading>
  * ```
  */
 export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =

package/src/typography/Label.tsx

@@ -8,12 +8,12 @@ export interface LabelProps
   extends Omit<TypoProps, "weight" | "align" | "truncate">,
     React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
-   * medium: 18px, small: 16px
+   * medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Paragraph text
+   * Label text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface LabelProps
  *
  * @example
  * ```jsx
- *     <Label>
- *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </Label>
+ * <Label>
+ *   Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </Label>
  * ```
  */
 export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =