@digdir/designsystemet-react 1.0.0-rc.8 → 1.0.0

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

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { List } from '../List/index.js';
 
-function ErrorSummaryList({ ...rest }) {
-    return jsx(List.Unordered, { ...rest });
-}
-ErrorSummaryList.displayName = 'ErrorSummaryList';
+const ErrorSummaryList = forwardRef(function ErrorSummaryList({ ...rest }, ref) {
+    return jsx(List.Unordered, { ...rest, ref: ref });
+});
 
-export { ErrorSummaryList as default };
+export { ErrorSummaryList };

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

@@ -1,17 +1,35 @@
 'use client';
-import { ErrorSummaryRoot } from './ErrorSummaryRoot.js';
+import { ErrorSummary as ErrorSummary$1 } from './ErrorSummary.js';
 import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
 import { ErrorSummaryItem } from './ErrorSummaryItem.js';
-import ErrorSummaryList from './ErrorSummaryList.js';
+import { ErrorSummaryLink } from './ErrorSummaryLink.js';
+import { ErrorSummaryList } from './ErrorSummaryList.js';
 
-const ErrorSummary = {};
-ErrorSummary.Root = ErrorSummaryRoot;
-ErrorSummary.Item = ErrorSummaryItem;
-ErrorSummary.Heading = ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList;
-ErrorSummary.Root.displayName = 'ErrorSummary.Root';
+/**
+ * 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 = 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, ErrorSummaryRoot };
+export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryLink, ErrorSummaryList };

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+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]);
+    useEffect(() => fieldObserver(fieldRef.current), []);
+    return (jsx("div", { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+});
+
+export { Field };

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

@@ -0,0 +1,34 @@
+'use client';
+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 }));
+});
+
+export { FieldAffix, FieldAffixes };

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

@@ -0,0 +1,38 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { isInputLike } from './fieldObserver.js';
+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);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    useEffect(() => {
+        const field = counterRef.current?.closest('.ds-field');
+        const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
+        const onInput = ({ target }) => {
+            if (isInputLike(target))
+                setCount(target.value.length);
+        };
+        if (input)
+            onInput({ target: input }); // Initial setup
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, [setCount]);
+    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
+});
+
+export { FieldCounter };

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
+    return jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+export { FieldDescription };

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

@@ -0,0 +1,97 @@
+'use client';
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el)) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, 'aria-disabled', null); // Reset disabled state
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        const isDisabled = input?.hasAttribute('disabled') ||
+            input?.getAttribute('aria-disabled') === 'true';
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
+            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            if (descriptionType === 'validation')
+                describedbyIds.unshift(el.id); // Validations to the front
+            else if (descriptionType)
+                describedbyIds.push(el.id); // Other descriptions to the back
+        }
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => node instanceof HTMLElement &&
+    'validity' in node &&
+    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+export { fieldObserver, isElement, isInputLike, isLabel };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Field as Field$1 } from './Field.js';
+import { FieldAffix, FieldAffixes } from './FieldAffix.js';
+import { FieldCounter } from './FieldCounter.js';
+import { FieldDescription } from './FieldDescription.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = Object.assign(Field$1, {
+    Description: FieldDescription,
+    Affixes: FieldAffixes,
+    Affix: FieldAffix,
+    Counter: FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+export { Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

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

@@ -0,0 +1,25 @@
+'use client';
+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 }));
+});
+
+export { Fieldset };

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

@@ -0,0 +1,18 @@
+'use client';
+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 });
+});
+
+export { FieldsetDescription };

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

@@ -0,0 +1,16 @@
+'use client';
+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 }) }));
+});
+
+export { FieldsetLegend };

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

@@ -0,0 +1,28 @@
+'use client';
+import { Fieldset as Fieldset$1 } from './Fieldset.js';
+import { FieldsetDescription } from './FieldsetDescription.js';
+import { FieldsetLegend } from './FieldsetLegend.js';
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @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 = Object.assign(Fieldset$1, {
+    Legend: FieldsetLegend,
+    Description: FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+export { Fieldset, FieldsetDescription, FieldsetLegend };

package/dist/esm/components/Heading/Heading.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Heading` to render h1-6 elements with heading text styles.
+ *
+ * @example
+ * <Heading data-size='lg' level={2}>Heading</Heading>
+ */
+const Heading = forwardRef(function Heading({ level = 2, className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : `h${level}`;
+    return (jsx(Component, { className: cl(`ds-heading`, className), ref: ref, ...rest }));
+});
+
+export { Heading };

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Input renders a native `input` element.
+ *
+ * @example
+ * <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) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+export { Input };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Label` for labels. Renders a native `label` element.
+ *
+ * @example
+ * <Label data-size='lg' weight='medium'>Label</Label>
+ */
+const Label = forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'label';
+    return (jsx(Component, { ref: ref, className: cl('ds-label', className), "data-weight": weight, ...rest }));
+});
+
+export { Label };

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

@@ -1,12 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
-const Link = forwardRef(({ color = 'accent', asChild, children, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'a';
-    return (jsx(Component, { className: clsx('ds-link', `ds-link--${color}`, className), ref: ref, ...rest, children: children }));
+/**
+ * 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 }));
 });
 Link.displayName = 'Link';
 

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

@@ -1,13 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
-const ListItem = forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'li';
-    return (jsx(Component, { className: clsx('ds-list__item', className), ...rest, ref: ref }));
+const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ...rest, ref: ref });
 });
-ListItem.displayName = 'ListItem';
 
 export { ListItem };

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

@@ -1,22 +1,38 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { ListContext } from './ListRoot.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 
-const Unordered = forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = useContext(ListContext);
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'ul';
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`ds-list`, `ds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+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);
 });
-Unordered.displayName = 'ListUnordered';
-const Ordered = forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = useContext(ListContext);
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'ol';
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`ds-list`, `ds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+/**
+ * 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);
 });
-Ordered.displayName = 'ListOrdered';
 
-export { Ordered, Unordered };
+export { ListOrdered, ListUnordered };

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

@@ -1,19 +1,14 @@
 'use client';
-import { ListRoot } from './ListRoot.js';
 import { ListItem } from './ListItem.js';
-import { ListHeading } from './ListHeading.js';
-import { Ordered, Unordered } from './Lists.js';
+import { ListUnordered, ListOrdered } from './Lists.js';
 
-const List = {};
-List.Root = ListRoot;
-List.Item = ListItem;
-List.Heading = ListHeading;
-List.Ordered = Ordered;
-List.Unordered = Unordered;
-List.Root.displayName = 'List.Root';
+const List = {
+    Item: ListItem,
+    Ordered: ListOrdered,
+    Unordered: ListUnordered,
+};
 List.Item.displayName = 'List.Item';
-List.Heading.displayName = 'List.Heading';
 List.Ordered.displayName = 'List.Ordered';
 List.Unordered.displayName = 'List.Unordered';
 
-export { List, ListHeading, ListItem, Ordered as ListOrdered, ListRoot, Unordered as ListUnordered };
+export { List, ListItem, ListOrdered, ListUnordered };

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

@@ -1,35 +1,30 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
-import { PaginationRoot } from './PaginationRoot.js';
-import { PaginationContent } from './PaginationContent.js';
-import { PaginationItem } from './PaginationItem.js';
-import { PaginationButton } from './PaginationButton.js';
-import { PaginationEllipsis } from './PaginationEllipsis.js';
-import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
-import { usePagination } from './usePagination.js';
 
-const iconSize = {
-    sm: '1rem',
-    md: '1.5rem',
-    lg: '2rem',
-};
-const Pagination = forwardRef(({ nextLabel = '', previousLabel = '', compact = false, hideLabels = false, currentPage = 1, totalPages, size = 'md', onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) => {
-    const { pages, showNextPage, showPreviousPage } = usePagination({
-        compact,
-        currentPage,
-        totalPages,
-    });
-    return (jsx(PaginationRoot, { ref: ref, "aria-label": 'Pagination', size: size, compact: compact, ...rest, children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsxs(PaginationPrevious, { className: clsx(!showPreviousPage && 'ds-pagination--hidden'), onClick: () => {
-                            onChange(currentPage - 1);
-                        }, "aria-label": previousLabel, children: [jsx(ChevronLeftIcon, { "aria-hidden": true, fontSize: iconSize[size] }), !hideLabels && previousLabel] }) }), pages.map((page, i) => (jsx(PaginationItem, { children: page === 'ellipsis' ? (jsx(PaginationEllipsis, {})) : (jsx(PaginationButton, { "aria-current": currentPage === page, isActive: currentPage === page, "aria-label": itemLabel(page), onClick: () => {
-                            onChange(page);
-                        }, children: page })) }, `${page}${i}`))), jsx(PaginationItem, { children: jsxs(PaginationNext, { "aria-label": nextLabel, onClick: () => {
-                            onChange(currentPage + 1);
-                        }, className: clsx(!showNextPage && 'ds-pagination--hidden'), children: [!hideLabels && nextLabel, jsx(ChevronRightIcon, { "aria-hidden": true, fontSize: iconSize[size] })] }) })] }) }));
+/**
+ * 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 }));
 });
-Pagination.displayName = 'Pagination';
 
 export { Pagination };