@digdir/designsystemet-react 1.0.0-next.47 → 1.0.0-next.49

package/dist/esm/components/Combobox/Combobox.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
@@ -16,10 +16,13 @@ import { useCombobox } from './useCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { prefix, setReactInputValue, removePrefix } from './utilities.js';
+import { Spinner } from '../Spinner/Spinner.js';
 import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 import { omit } from '../../utilities/omit/omit.js';
-import { Spinner } from '../Spinner/Spinner.js';
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = useRef(null);
     const portalRef = useRef(null);
@@ -42,7 +45,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
     });
     const formFieldProps = useFormField({
         disabled,
-        readOnly,
         error,
         errorId,
         size,
@@ -128,7 +130,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
         open,
         interactiveChildren,
         setOpen,
-        setInputValue,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = useVirtualizer({
@@ -176,7 +177,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId || '', error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,

package/dist/esm/components/Combobox/ComboboxIdContext.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useReducer, useContext } from 'react';
+import { useReducer, createContext, useContext } from 'react';
 
 const ComboboxIdContext = createContext({
     activeIndex: 0,

package/dist/esm/components/Combobox/Custom.js

@@ -6,8 +6,8 @@ import cl from 'clsx/lite';
 import { forwardRef, useId, useContext, useMemo } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { omit } from '../../utilities/omit/omit.js';
 import { Label } from '../Label/Label.js';
+import { omit } from '../../utilities/omit/omit.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {

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

@@ -3,6 +3,9 @@ import { Combobox as Combobox$1 } from './Combobox.js';
 import { ComboboxEmpty } from './Empty.js';
 import { ComboboxOption } from './Option/Option.js';
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const Combobox = Combobox$1;
 Combobox.Option = ComboboxOption;
 Combobox.Empty = ComboboxEmpty;

package/dist/esm/components/Combobox/internal/ComboboxChips.js

@@ -23,7 +23,7 @@ const ComboboxChips = () => {
                             option: selectedOptions[value],
                             remove: true,
                         });
-                        inputRef.current?.focus();
+                        inputRef?.current?.focus();
                     }
                 }, onClick: () => {
                     if (readOnly)

package/dist/esm/components/Combobox/useFloatingCombobox.js

@@ -1,5 +1,5 @@
 'use client';
-import { useFloating, autoUpdate, flip, size, offset, useRole, useDismiss, useListNavigation, useInteractions } from '@floating-ui/react';
+import { useFloating, flip, size, offset, autoUpdate, useRole, useDismiss, useListNavigation, useInteractions } from '@floating-ui/react';
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';

package/dist/esm/components/Details/Details.js

@@ -7,13 +7,14 @@ import '@u-elements/u-details';
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <DetailsSummary>Header</DetailsSummary>
- *  <DetailsContent>Content</DetailsContent>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = forwardRef(function Details({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {
+const Details = forwardRef(function Details({ className, open, defaultOpen = false, 'data-variant': variant = 'default', onToggle, ...rest }, ref) {
     const detailsRef = useRef(null);
     const initialOpen = useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
     const mergedRefs = useMergeRefs([detailsRef, ref]);
@@ -34,7 +35,7 @@ const Details = forwardRef(function Details({ className, open, defaultOpen = fal
         details?.addEventListener('toggle', handleToggle, true);
         return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    return (jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, ref: mergedRefs, ...rest }));
+    return (jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 
 export { Details };

package/dist/esm/components/Details/DetailsContent.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 
 /**
  * Details content component, contains the content of the details item.
+ *
  * @example
  * <DetailsContent>Content</DetailsContent>
  */

package/dist/esm/components/Details/DetailsSummary.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 
 /**
  * Details summary component, contains a the heading to toggle the content.
+ *
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */

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

@@ -4,11 +4,12 @@ import { DetailsContent } from './DetailsContent.js';
 import { DetailsSummary } from './DetailsSummary.js';
 
 /**
- * Details are used to toggle the visibility of content.
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <Details.Summary>Heading 1</Details.Summary>
- *  <Details.Content>Content 1</Details.Content>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = Object.assign(Details$1, {

package/dist/esm/components/Dialog/Dialog.js

@@ -0,0 +1,72 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { Context } from './DialogTriggerContext.js';
+import { Button } from '../Button/Button.js';
+
+/**
+ * Dialog component, used to display a dialog dialog.
+ *
+ * @example with TriggerContext
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const dialogRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => dialogRef.current?.showDialog()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+const Dialog = forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
+    const contextRef = useContext(Context);
+    const dialogRef = useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
+    const Component = asChild ? Slot : 'dialog';
+    const mergedRefs = useMergeRefs([contextRef, ref, dialogRef]);
+    useEffect(() => dialogRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleBackdropClick = ({ clientY: y, clientX: x, target, }) => {
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && backdropClose) {
+                const { top, left, right, bottom } = dialog.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = dialog?.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        dialog?.addEventListener('animationend', handleAutoFocus);
+        dialog?.addEventListener('click', handleBackdropClick);
+        return () => {
+            dialog?.removeEventListener('animationend', handleAutoFocus);
+            dialog?.removeEventListener('click', handleBackdropClick);
+        };
+    }, [backdropClose]);
+    /* handle closing */
+    useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+});
+
+export { Dialog };

package/dist/esm/components/Dialog/DialogBlock.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * DialogBlock component, used to separate content in a Dialog.
+ *
+ * @example
+ * <Dialog>
+ *   <Dialog.Block>
+ *     Header
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Content
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Footer
+ *   </Dialog.Block>
+ * </Dialog>
+ */
+const DialogBlock = forwardRef(function DialogBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    return (jsx(Component, { className: cl('ds-dialog__block', className), ref: ref, ...rest }));
+});
+
+export { DialogBlock };

package/dist/esm/components/{Modal/ModalTrigger.js → Dialog/DialogTrigger.js}

@@ -3,12 +3,23 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
 import { Button } from '../Button/Button.js';
-import { Context } from './ModalTriggerContext.js';
+import { Context } from './DialogTriggerContext.js';
 
-const ModalTrigger = forwardRef(function ModalTrigger({ asChild, ...rest }, ref) {
+/**
+ * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTrigger = forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
     const contextRef = useContext(Context);
     const Component = asChild ? Slot : Button;
     return (jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
 });
 
-export { ModalTrigger };
+export { DialogTrigger };

package/dist/esm/components/Dialog/DialogTriggerContext.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, createContext } from 'react';
+
+const Context = createContext({
+    current: null,
+});
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTriggerContext = ({ children, }) => {
+    const contextRef = useRef(null);
+    return jsx(Context.Provider, { value: contextRef, children: children });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+export { Context, DialogTriggerContext };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Dialog as Dialog$1 } from './Dialog.js';
+import { DialogBlock } from './DialogBlock.js';
+import { DialogTrigger } from './DialogTrigger.js';
+import { DialogTriggerContext } from './DialogTriggerContext.js';
+
+/**
+ * Dialog component, used to display a Dialog dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const Dialog = Object.assign(Dialog$1, {
+    Block: DialogBlock,
+    TriggerContext: DialogTriggerContext,
+    Trigger: DialogTrigger,
+});
+Dialog.Block.displayName = 'Dialog.Block';
+Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
+Dialog.Trigger.displayName = 'Dialog.Trigger';
+
+export { Dialog, DialogBlock, DialogTrigger, DialogTriggerContext };

package/dist/esm/components/Divider/Divider.js

@@ -3,6 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
 const Divider = forwardRef(function Divider({ className, ...rest }, ref) {
     return (
     // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is

package/dist/esm/components/Dropdown/Dropdown.js

@@ -4,6 +4,33 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Popover } from '../Popover/index.js';
 
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
 const Dropdown = forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
     return (jsx(Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
 });

package/dist/esm/components/Dropdown/DropdownTriggerContext.js

@@ -5,13 +5,16 @@ import { PopoverTriggerContext } from '../Popover/PopoverTriggerContext.js';
 
 /**
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
  * @example
  * <Dropdown.TriggerContext>
  *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
  *  <Dropdown>
  *   <Dropdown.Heading>Heading</Dropdown.Heading>
  *    <Dropdown.List>
- *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
  *    </Dropdown.List>
  *  </Dropdown>
  * </Dropdown.TriggerContext>

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

@@ -8,17 +8,19 @@ import { DropdownTrigger } from './DropdownTrigger.js';
 import { DropdownTriggerContext } from './DropdownTriggerContext.js';
 
 /**
+ * Dropdown component, used to display a list of options.
+ *
  * @example
  * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
- *  <Dropdown>
- *    <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button 1</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
- *  </Dropdown>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
  * </Dropdown.TriggerContext>
  */
 const Dropdown = Object.assign(Dropdown$1, {

package/dist/esm/components/ErrorSummary/ErrorSummary.js

@@ -1,16 +1,34 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useId, useState } from 'react';
+import { forwardRef, createContext, useId, useState } from 'react';
 
 const ErrorSummaryContext = createContext({
     headingId: 'heading',
     setHeadingId: () => { },
 });
-const ErrorSummary = forwardRef(function ErrorSummary({ className, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) {
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = forwardRef(function ErrorSummary({ asChild, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', className, ...rest }, ref) {
     const randomId = useId();
     const [headingId, setHeadingId] = useState(randomId);
-    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx("div", { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+    const Component = asChild ? Slot : 'div';
+    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx(Component, { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
 });
 
 export { ErrorSummary, ErrorSummaryContext };

package/dist/esm/components/ErrorSummary/ErrorSummaryItem.js

@@ -1,11 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { List } from '../List/index.js';
-import { Link } from '../Link/Link.js';
+import '../List/index.js';
+import { ListItem } from '../List/ListItem.js';
 
-const ErrorSummaryItem = forwardRef(function ErrorSummaryItem({ href, asChild, children, ...rest }, ref) {
-    return (jsx(List.Item, { ...rest, ref: ref, children: jsx(Link, { href: href, asChild: asChild, children: children }) }));
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummary.Item href='#'>Link to error</ErrorSummary.Item>
+ */
+const ErrorSummaryItem = forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
+    return jsx(ListItem, { ref: ref, ...rest });
 });
 
 export { ErrorSummaryItem };

package/dist/esm/components/ErrorSummary/ErrorSummaryLink.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../Link/Link.js';
+
+/**
+ * Link component used in ErrorSummary.
+ */
+const ErrorSummaryLink = forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
+    return jsx(Link, { ref: ref, "data-color": 'neutral', ...rest });
+});
+
+export { ErrorSummaryLink };

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

@@ -2,24 +2,34 @@
 import { ErrorSummary as ErrorSummary$1 } from './ErrorSummary.js';
 import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
 import { ErrorSummaryItem } from './ErrorSummaryItem.js';
+import { ErrorSummaryLink } from './ErrorSummaryLink.js';
 import { ErrorSummaryList } from './ErrorSummaryList.js';
 
 /**
+ * ErrorSummary component, used to display a list of errors.
+ *
  * @example
  * <ErrorSummary>
- *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
- *  <ErrorSummary.List>
- *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
- *  </ErrorSummary.List>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
  * </ErrorSummary>
  */
 const ErrorSummary = Object.assign(ErrorSummary$1, {
     Heading: ErrorSummaryHeading,
     Item: ErrorSummaryItem,
     List: ErrorSummaryList,
+    Link: ErrorSummaryLink,
 });
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
+ErrorSummary.Link.displayName = 'ErrorSummary.Link';
 
-export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryList };
+export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };

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);