@digdir/designsystemet-react 1.0.0-next.46 → 1.0.0-next.48

package/dist/esm/components/Field/Field.js

@@ -5,6 +5,17 @@ import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
 import { fieldObserver } from './fieldObserver.js';
 
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
 const Field = forwardRef(function Field({ className, position, ...rest }, ref) {
     const fieldRef = useRef(null);
     const mergedRefs = useMergeRefs([fieldRef, ref]);

package/dist/esm/components/Field/FieldAffix.js

@@ -3,9 +3,30 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 const FieldAffixes = forwardRef(function FieldAffixes({ className, ...rest }, ref) {
     return (jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
 });
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 const FieldAffix = forwardRef(function FieldAffix({ className, ...rest }, ref) {
     return (jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
 });

package/dist/esm/components/Field/FieldCounter.js

@@ -6,6 +6,15 @@ import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
 import { Paragraph } from '../Paragraph/Paragraph.js';
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
 const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
     const [count, setCount] = useState(0);
     const counterRef = useRef(null);

package/dist/esm/components/Field/index.js

@@ -5,12 +5,14 @@ import { FieldCounter } from './FieldCounter.js';
 import { FieldDescription } from './FieldDescription.js';
 
 /**
+ * Field component, used to wrap a form field.
+ *
  * @example
- * <Field>
- *  <Label>Label text</Label>
- *  <Field.Description>Description</Field.Description>
- *  <Input />
- *  <ValidationMessage>Validation message</ValidationMessage>
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
 const Field = Object.assign(Field$1, {

package/dist/esm/components/Fieldset/Fieldset.js

@@ -3,6 +3,21 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
 const Fieldset = forwardRef(function Fieldset({ className, ...rest }, ref) {
     return (jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
 });

package/dist/esm/components/Fieldset/FieldsetDescription.js

@@ -3,6 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Paragraph/Paragraph.js';
 
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
 const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
     return jsx(Paragraph, { ref: ref, ...rest });
 });

package/dist/esm/components/Fieldset/FieldsetLegend.js

@@ -3,6 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Label } from '../Label/Label.js';
 
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ */
 const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
     return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));
 });

package/dist/esm/components/Fieldset/index.js

@@ -4,11 +4,18 @@ import { FieldsetDescription } from './FieldsetDescription.js';
 import { FieldsetLegend } from './FieldsetLegend.js';
 
 /**
+ * Fieldset component, used to wrap a form field.
+ *
  * @example
  * <Fieldset>
- *  <Fieldset.Legend>Legend text</Fieldset.Legend>
- *  <Fieldset.Description>Description text</Fieldset.Description>
- *  ...input components
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
  * </Fieldset>
  */
 const Fieldset = Object.assign(Fieldset$1, {

package/dist/esm/components/Input/Input.js

@@ -3,12 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-/** Input field
+/**
+ * Input renders a native `input` element.
  *
  * @example
- * ```tsx
  * <Input />
- * ```
  */
 const Input = forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
     return (jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {

package/dist/esm/components/Label/Label.js

@@ -5,10 +5,10 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
- * Use `Label` for labels.
+ * Use `Label` for labels. Renders a native `label` element.
  *
  * @example
- * <Label data-size='lg'>Label</Label>
+ * <Label data-size='lg' weight='medium'>Label</Label>
  */
 const Label = forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'label';

package/dist/esm/components/Link/Link.js

@@ -4,6 +4,12 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
 const Link = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'a';
     return (jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));

package/dist/esm/components/List/Lists.js

@@ -8,9 +8,29 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : tagName;
     return jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
 };
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <List.Unordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Unordered>
+ */
 const ListUnordered = forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
 });
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <List.Ordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Ordered>
+ */
 const ListOrdered = forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);
 });

package/dist/esm/components/Modal/Modal.js

@@ -7,6 +7,29 @@ import { forwardRef, useContext, useRef, useEffect } from 'react';
 import { Context } from './ModalTriggerContext.js';
 import { Button } from '../Button/Button.js';
 
+/**
+ * Modal component, used to display a modal dialog.
+ *
+ * @example with TriggerContext
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     <Modal.Block>
+ *       Content
+ *     </Modal.Block>
+ *   </Modal>
+ * </Modal.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const modalRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
+ * <Modal ref={modalRef}>
+ *   Content
+ * </Modal>
+ */
 const Modal = forwardRef(function Modal({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
     const contextRef = useContext(Context);
     const modalRef = useRef(null); // This local ref is used to make sure the modal works without a ModalTriggerContext

package/dist/esm/components/Modal/ModalBlock.js

@@ -4,6 +4,22 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * ModalBlock component, used to separate content in a modal.
+ *
+ * @example
+ * <Modal>
+ *   <Modal.Block>
+ *     Header
+ *   </Modal.Block>
+ *   <Modal.Block>
+ *     Content
+ *   </Modal.Block>
+ *   <Modal.Block>
+ *     Footer
+ *   </Modal.Block>
+ * </Modal>
+ */
 const ModalBlock = forwardRef(function ModalBlock({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     return (jsx(Component, { className: cl('ds-modal__block', className), ref: ref, ...rest }));

package/dist/esm/components/Modal/ModalTrigger.js

@@ -5,6 +5,17 @@ import { forwardRef, useContext } from 'react';
 import { Button } from '../Button/Button.js';
 import { Context } from './ModalTriggerContext.js';
 
+/**
+ * ModalTrigger component, used within a Modal.TriggerContext to open a modal.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     Content
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 const ModalTrigger = forwardRef(function ModalTrigger({ asChild, ...rest }, ref) {
     const contextRef = useContext(Context);
     const Component = asChild ? Slot : Button;

package/dist/esm/components/Modal/ModalTriggerContext.js

@@ -5,6 +5,17 @@ import { createContext, useRef } from 'react';
 const Context = createContext({
     current: null,
 });
+/**
+ * ModalTriggerContext component, used to provide a context for a modal trigger.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     Content
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 const ModalTriggerContext = ({ children }) => {
     const contextRef = useRef(null);
     return jsx(Context.Provider, { value: contextRef, children: children });

package/dist/esm/components/Modal/index.js

@@ -4,6 +4,19 @@ import { ModalBlock } from './ModalBlock.js';
 import { ModalTrigger } from './ModalTrigger.js';
 import { ModalTriggerContext } from './ModalTriggerContext.js';
 
+/**
+ * Modal component, used to display a modal dialog.
+ *
+ * @example
+ * <Modal.TriggerContext>
+ *   <Modal.Trigger>Open Modal</Modal.Trigger>
+ *   <Modal>
+ *     <Modal.Block>
+ *       Content
+ *     </Modal.Block>
+ *   </Modal>
+ * </Modal.TriggerContext>
+ */
 const Modal = Object.assign(Modal$1, {
     Block: ModalBlock,
     TriggerContext: ModalTriggerContext,

package/dist/esm/components/Pagination/Pagination.js

@@ -4,6 +4,24 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const Pagination = forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'nav';
     return (jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));

package/dist/esm/components/Pagination/PaginationButton.js

@@ -3,6 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from '../Button/Button.js';
 
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <Pagination.Item>
+ *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ * </Pagination.Item>
+ */
 const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
     return jsx(Button, { ref: ref, ...rest });
 });

package/dist/esm/components/Pagination/PaginationItem.js

@@ -3,6 +3,16 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <Pagination.List>
+ *   <Pagination.Item>
+ *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination.List>
+ */
 const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';
     return jsx(Component, { ref: ref, ...rest });

package/dist/esm/components/Pagination/PaginationList.js

@@ -3,6 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'ul';
     return jsx(Component, { ref: ref, ...rest });

package/dist/esm/components/Pagination/index.js

@@ -4,6 +4,24 @@ import { PaginationButton } from './PaginationButton.js';
 import { PaginationItem } from './PaginationItem.js';
 import { PaginationList } from './PaginationList.js';
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const Pagination = Object.assign(Pagination$1, {
     List: PaginationList,
     Item: PaginationItem,

package/dist/esm/components/Pagination/usePagination.js

@@ -12,7 +12,35 @@ const getSteps = (now, max, show) => {
         pages.splice(-2, 2, 0, max);
     return pages;
 };
-/** Hook to help manage pagination state */
+/**
+ * Hook to help manage pagination state
+ *
+ * @example
+ * const { pages, nextButtonProps, prevButtonProps } = usePagination({
+ *   currentPage: page,
+ *   totalPages: 10,
+ *   showPages: 7,
+ *   setCurrentPage,
+ * })
+ *
+ * <Pagination>
+ *   <Pagination.Item>
+ *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ *   {pages.map(({ page, itemKey, buttonProps }) => (
+ *     <Pagination.Item key={itemKey}>
+ *       {typeof page === 'number' && (
+ *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+ *           {page}
+ *         </Pagination.Button>
+ *       )}
+ *     </Pagination.Item>
+ *   ))}
+ *   <Pagination.Item>
+ *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination>
+ **/
 const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages, showPages = 7, }) => useMemo(() => {
     const hasNext = currentPage < totalPages;
     const hasPrev = currentPage !== 1;

package/dist/esm/components/Paragraph/Paragraph.js

@@ -6,6 +6,7 @@ import { forwardRef } from 'react';
 
 /**
  * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
  *
  * @example
  * <Paragraph data-size='lg'>Paragraph</Paragraph>

package/dist/esm/components/Popover/Popover.js

@@ -7,6 +7,23 @@ import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
 import { Context } from './PopoverTriggerContext.js';
 
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example with TriggerContext
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
+ */
 const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const popoverRef = useRef(null);

package/dist/esm/components/Popover/PopoverTrigger.js

@@ -1,18 +1,43 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, version } from 'react';
 import { Button } from '../Button/Button.js';
 import { Context } from './PopoverTriggerContext.js';
 
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example inline
+ * <Popover.TriggerContext>
+ *   <Paragraph>
+ *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);
     const Component = asChild ? Slot : inline ? 'button' : Button;
-    return (jsx(Component, { ref: ref, popovertarget: popoverId, ...(inline
+    const popoverProps = Object.assign({
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
+        ...(inline
             ? {
                 'data-popover': 'inline',
             }
-            : {}), ...rest }));
+            : {}),
+    }, rest);
+    return jsx(Component, { ref: ref, ...popoverProps });
 });
 
 export { PopoverTrigger };

package/dist/esm/components/Popover/PopoverTriggerContext.js

@@ -2,6 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId, useState, createContext } from 'react';
 
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = useId();
     const [popoverId, setPopoverId] = useState(randomPopoverId);

package/dist/esm/components/Popover/index.js

@@ -3,9 +3,21 @@ import { Popover as Popover$1 } from './Popover.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
 import { PopoverTriggerContext } from './PopoverTriggerContext.js';
 
-const Popover = Popover$1;
-Popover.TriggerContext = PopoverTriggerContext;
-Popover.Trigger = PopoverTrigger;
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const Popover = Object.assign(Popover$1, {
+    TriggerContext: PopoverTriggerContext,
+    Trigger: PopoverTrigger,
+});
 Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 

package/dist/esm/components/Radio/Radio.js

@@ -8,11 +8,12 @@ import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
 
 /**
  * Radio used to select multiple options.
+ *
  * @example
  * <Radio label="I agree" value="agree" />
  */
-const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, validation, ...rest }, ref) {
-    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!validation && jsx(ValidationMessage, { children: validation })] }));
+const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Radio };

package/dist/esm/components/Search/Search.js

@@ -3,6 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 const Search = forwardRef(function Search({ className, ...rest }, ref) {
     return jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });