@navikt/ds-react 1.0.0-rc.6 → 1.0.0

package/esm/typography/ErrorMessage.js

@@ -1,6 +1,22 @@
-import React from "react";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
 import cl from "clsx";
-import { Label } from "..";
-const ErrorMessage = (props) => (React.createElement(Label, Object.assign({}, props, { as: "div", className: cl("navds-error-message", props.className) })));
+const ErrorMessage = forwardRef((_a, ref) => {
+    var { className, size, spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-error-message", "navds-label", className, {
+            "navds-label--small": size === "small",
+            "navds-typo--spacing": !!spacing,
+        }) })));
+});
 export default ErrorMessage;
 //# sourceMappingURL=ErrorMessage.js.map

package/esm/typography/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../src/typography/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAe3B,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,KAAK,oBACA,KAAK,IACT,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,IACrD,CACH,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../src/typography/ErrorMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB,MAAM,YAAY,GAGd,UAAU,CACZ,CAAC,EAA0D,EAAE,GAAG,EAAE,EAAE;QAAnE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAxD,sCAA0D,CAAF;IAAY,OAAA,CACnE,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE;YAC7D,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/esm/typography/Label.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { OverridableComponent } from "..";
-export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     /**
      * medium: 18px, small: 16px
      * @default "medium"
@@ -15,5 +15,5 @@ export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
      */
     spacing?: boolean;
 }
-export declare const Label: OverridableComponent<LabelProps, HTMLParagraphElement>;
+export declare const Label: OverridableComponent<LabelProps, HTMLLabelElement>;
 export default Label;

package/esm/typography/Label.js

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

package/esm/typography/Label.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "test": "jest"
   },
   "dependencies": {
-    "@floating-ui/react-dom-interactions": "0.6.6",
-    "@navikt/ds-icons": "^1.0.0-rc.6",
-    "@radix-ui/react-tabs": "0.1.5",
-    "@radix-ui/react-toggle-group": "0.1.5",
+    "@floating-ui/react-dom-interactions": "0.9.2",
+    "@navikt/ds-icons": "^1.0.0",
+    "@radix-ui/react-tabs": "1.0.0",
+    "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.1.1",
     "react-modal": "3.15.1"
   },
@@ -74,5 +74,5 @@
       "optional": true
     }
   },
-  "gitHead": "e943e716375c95e9e81de474577b77dcb2312752"
+  "gitHead": "155c556feab360fd9d3cdc4062408bd29ff17e71"
 }

package/src/form/Fieldset/Fieldset.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { BodyShort, Detail, Label, ErrorMessage, omit } from "../..";
+import { BodyLong, Detail, Label, ErrorMessage, omit } from "../..";
 import { FormFieldProps } from "../useFormField";
 import { useFieldset } from "./useFieldset";
 
@@ -106,7 +106,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           </Label>
           {!!description &&
             (size === "medium" ? (
-              <BodyShort
+              <BodyLong
                 className={cl("navds-fieldset__description", {
                   "navds-sr-only": !!hideLegend,
                 })}
@@ -115,7 +115,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
                 as="div"
               >
                 {props.description}
-              </BodyShort>
+              </BodyLong>
             ) : (
               <Detail
                 className={cl("navds-fieldset__description", {

package/src/form/Select.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, SelectHTMLAttributes } from "react";
 import cl from "clsx";
 import { Expand } from "@navikt/ds-icons";
-import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
+import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface SelectProps
@@ -66,7 +66,6 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          as="label"
           className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
@@ -76,7 +75,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         {!!description && (
           <>
             {size === "medium" ? (
-              <BodyShort
+              <BodyLong
                 className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
@@ -85,7 +84,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
                 as="div"
               >
                 {description}
-              </BodyShort>
+              </BodyLong>
             ) : (
               <Detail
                 className={cl("navds-form-field__description", {

package/src/form/TextField.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import cl from "clsx";
-import { BodyShort, Detail, Label, ErrorMessage, omit } from "..";
+import { BodyLong, Detail, Label, ErrorMessage, omit } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 
 export interface TextFieldProps
@@ -70,7 +70,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          as="label"
           className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
@@ -81,7 +80,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         {!!description && (
           <>
             {size === "medium" ? (
-              <BodyShort
+              <BodyLong
                 className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
@@ -90,7 +89,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
                 as="div"
               >
                 {description}
-              </BodyShort>
+              </BodyLong>
             ) : (
               <Detail
                 className={cl("navds-form-field__description", {

package/src/form/Textarea.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { BodyShort, Label, ErrorMessage, omit, Detail } from "..";
+import { BodyShort, BodyLong, Label, ErrorMessage, omit, Detail } from "..";
 import { FormFieldProps, useFormField } from "./useFormField";
 import { useId } from "..";
 import TextareaAutosize from "../util/TextareaAutoSize";
@@ -83,6 +83,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       return rows;
     };
 
+    const describedBy = cl(inputProps["aria-describedby"], {
+      [maxLengthId ?? ""]: hasMaxLength,
+    });
+
     return (
       <div
         className={cl(
@@ -99,7 +103,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          as="label"
           className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
@@ -109,7 +112,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         {!!description && (
           <>
             {size === "medium" ? (
-              <BodyShort
+              <BodyLong
                 className={cl("navds-form-field__description", {
                   "navds-sr-only": hideLabel,
                 })}
@@ -118,7 +121,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 as="div"
               >
                 {description}
-              </BodyShort>
+              </BodyLong>
             ) : (
               <Detail
                 className={cl("navds-form-field__description", {
@@ -152,9 +155,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 "navds-textarea--counter": hasMaxLength,
               }
             )}
-            aria-describedby={cl(inputProps["aria-describedby"], {
-              [maxLengthId ?? ""]: hasMaxLength,
-            })}
+            {...(describedBy ? { "aria-describedby": describedBy } : {})}
           />
           {hasMaxLength && (
             <>

package/src/form/checkbox/Checkbox.tsx

@@ -84,24 +84,24 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           }}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
-          <div
+          <span
             className={cl("navds-checkbox__content", {
               "navds-sr-only": props.hideLabel,
             })}
           >
-            <BodyShort as="div" size={size}>
+            <BodyShort as="span" size={size}>
               {props.children}
             </BodyShort>
             {props.description && (
               <Description
-                as="div"
+                as="span"
                 size="small"
                 className="navds-checkbox__description"
               >
                 {props.description}
               </Description>
             )}
-          </div>
+          </span>
         </label>
       </div>
     );

package/src/form/checkbox/checkbox.stories.tsx

@@ -8,6 +8,9 @@ export default {
   subcomponents: {
     CheckboxGroup,
   },
+  argTypes: {
+    size: { control: { type: "select", options: ["medium", "small"] } },
+  },
 } as Meta;
 
 export const Default = (props) => {
@@ -22,7 +25,7 @@ export const Default = (props) => {
         onChange={props.controlled ? setState : undefined}
         hideLegend={props.hideLegend}
         error={props.errorGroup ? "Errormelding for checkboxgruppe" : undefined}
-        {...props}
+        size={props?.size}
       >
         <Checkbox
           value="checkbox1"

package/src/form/radio/Radio.tsx

@@ -40,20 +40,20 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         ref={ref}
       />
       <label htmlFor={inputProps.id} className="navds-radio__label">
-        <div className="navds-radio__content">
-          <BodyShort as="div" size={size}>
+        <span className="navds-radio__content">
+          <BodyShort as="span" size={size}>
             {props.children}
           </BodyShort>
           {props.description && (
             <Description
-              as="div"
+              as="span"
               size="small"
               className="navds-radio__description"
             >
               {props.description}
             </Description>
           )}
-        </div>
+        </span>
       </label>
     </div>
   );

package/src/form/radio/radio.stories.tsx

@@ -8,6 +8,9 @@ export default {
   subcomponents: {
     RadioGroup,
   },
+  argTypes: {
+    size: { control: { type: "select", options: ["medium", "small"] } },
+  },
 } as Meta;
 
 export const Default = (props) => {
@@ -21,7 +24,7 @@ export const Default = (props) => {
       onChange={props.controlled ? setState : undefined}
       hideLegend={props.hideLegend}
       error={props.errorGroup ? "Errormelding" : undefined}
-      {...props}
+      size={props?.size}
     >
       <Radio value="radio1">{props.children || "Apple"}</Radio>
       <Radio
@@ -38,6 +41,7 @@ export const Default = (props) => {
 
 Default.args = {
   controlled: false,
+  size: "medium",
   legend: "Legend-tekst",
   radioDescription: false,
   hideLegend: false,

package/src/form/search/Search.tsx

@@ -163,7 +163,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          as="label"
           className={cl("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}

package/src/help-text/HelpText.tsx

@@ -9,7 +9,7 @@ export interface HelpTextProps
   /**
    * Helptext-dialog content
    */
-  children: React.ReactNode;
+  children: string;
   /**
    * Adds a title-tooltip with the given text
    * @default "hjelp"

package/src/loader/loader.stories.tsx

@@ -55,7 +55,7 @@ export const Variant = () => (
       <Loader size="3xlarge" variant="inverted" />
       <Loader size="3xlarge" variant="interaction" />
     </div>
-    <div style={{ backgroundColor: "#292929" }}>
+    <div style={{ backgroundColor: "#262626" }}>
       <Loader size="3xlarge" variant="neutral" />
       <Loader size="3xlarge" variant="inverted" />
       <Loader size="3xlarge" variant="interaction" />
@@ -70,7 +70,7 @@ export const Transparent = () => (
       <Loader size="3xlarge" transparent variant="inverted" />
       <Loader size="3xlarge" transparent variant="interaction" />
     </div>
-    <div style={{ backgroundColor: "#292929" }}>
+    <div style={{ backgroundColor: "#262626" }}>
       <Loader size="3xlarge" transparent variant="neutral" />
       <Loader size="3xlarge" transparent variant="inverted" />
       <Loader size="3xlarge" transparent variant="interaction" />

package/src/modal/Modal.tsx

@@ -32,6 +32,10 @@ export interface ModalProps {
    * @default true
    */
   closeButton?: boolean;
+  /**
+   * Allows custom styling of ReactModal, in accordance with their typing
+   */
+  style?: ReactModal.Styles;
   /**
    * Callback for setting parent element modal will attach to
    */
@@ -71,6 +75,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
       "aria-labelledby": ariaLabelledBy,
       "aria-modal": ariaModal,
       "aria-label": contentLabel,
+      style,
       ...rest
     },
     ref
@@ -90,6 +95,7 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
     return (
       <ReactModal
         {...rest}
+        style={style}
         isOpen={open}
         ref={mergedRef}
         className={cl("navds-modal", className)}

package/src/modal/modal.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { BodyLong, Button, Heading, Modal } from "../..";
+import { BodyLong, Button, Heading } from "../..";
+import Modal from "./Modal";
 
 export default {
   title: "ds-react/Modal",
@@ -13,16 +14,23 @@ export const Default = (props) => {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    Modal.setAppElement("#root");
+    Modal.setAppElement?.("#root");
   }, []);
 
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Open</Button>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <p>
+        We can also custom style the modal by passing in a react-modal style
+        object. Here the backdrop is red.
+      </p>
       <Modal
         open={open}
         onClose={() => setOpen(false)}
         aria-labelledby="header123"
+        style={{
+          overlay: { backgroundColor: "#ff0000aa" },
+        }}
         {...props}
       >
         <Modal.Content>
@@ -43,62 +51,3 @@ Default.args = {
   shouldCloseOnOverlayClick: true,
   closeButton: true,
 };
-
-export const Open = () => {
-  const [open, setOpen] = useState(null);
-
-  useEffect(() => {
-    Modal.setAppElement("#root");
-  }, []);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open</Button>
-      <Modal
-        open={open ?? true}
-        onClose={() => setOpen(false)}
-        aria-labelledby="header123"
-      >
-        <Modal.Content>
-          <Heading spacing id="header123" level="1" size="large">
-            Header
-          </Heading>
-          <Heading spacing level="2" size="medium">
-            Header
-          </Heading>
-          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
-        </Modal.Content>
-      </Modal>
-    </>
-  );
-};
-
-export const CloseButton = () => {
-  const [open, setOpen] = useState(true);
-
-  useEffect(() => {
-    Modal.setAppElement("#root");
-  }, []);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open</Button>
-      <Modal
-        open={open}
-        onClose={() => setOpen(false)}
-        aria-labelledby="header123"
-        closeButton={false}
-      >
-        <Modal.Content>
-          <Heading spacing id="header123" level="1" size="large">
-            Header
-          </Heading>
-          <Heading spacing level="2" size="medium">
-            Header
-          </Heading>
-          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
-        </Modal.Content>
-      </Modal>
-    </>
-  );
-};

package/src/table/HeaderCell.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { Label } from "..";
 import { TableContext } from "./Table";
 
 export interface HeaderCellProps
@@ -23,17 +22,16 @@ export const HeaderCell: HeaderCellType = forwardRef(
     const context = useContext(TableContext);
 
     return (
-      <Label
-        as="th"
+      <th
         ref={ref}
-        className={cl("navds-table__header-cell", className, {
+        className={cl("navds-table__header-cell", "navds-label", className, {
           [`navds-table__header-cell--align-${align}`]: align,
+          "navds-label--small": context?.size === "small",
         })}
-        size={context?.size}
         {...rest}
       >
         {children}
-      </Label>
+      </th>
     );
   }
 );

package/src/typography/ErrorMessage.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import cl from "clsx";
-import { Label } from "..";
+import { OverridableComponent } from "..";
 
 export interface ErrorMessageProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+  extends React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * medium: 18px, small: 16px
    * @default "medium"
@@ -13,14 +13,26 @@ export interface ErrorMessageProps
    * Error text
    */
   children: React.ReactNode;
+  /**
+   * Adds margin-bottom
+   */
+  spacing?: boolean;
 }
 
-const ErrorMessage = (props) => (
-  <Label
-    {...props}
-    as="div"
-    className={cl("navds-error-message", props.className)}
-  />
+const ErrorMessage: OverridableComponent<
+  ErrorMessageProps,
+  HTMLParagraphElement
+> = forwardRef(
+  ({ className, size, spacing, as: Component = "p", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl("navds-error-message", "navds-label", className, {
+        "navds-label--small": size === "small",
+        "navds-typo--spacing": !!spacing,
+      })}
+    />
+  )
 );
 
 export default ErrorMessage;

package/src/typography/Label.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "..";
 
-export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * medium: 18px, small: 16px
    * @default "medium"
@@ -18,10 +19,10 @@ export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
   spacing?: boolean;
 }
 
-export const Label: OverridableComponent<LabelProps, HTMLParagraphElement> =
+export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
   forwardRef(
     (
-      { className, size = "medium", spacing, as: Component = "p", ...rest },
+      { className, size = "medium", spacing, as: Component = "label", ...rest },
       ref
     ) => (
       <Component