@digdir/designsystemet-react 1.0.0-next.33 → 1.0.0-next.35

package/dist/esm/components/Chip/Chips.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slottable, Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Chip.Button used for interaction
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = forwardRef(function ChipButton({ asChild, className, size, ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    return (jsx(Component, { className: cl('ds-chip', className), "data-size": size, type: asChild ? undefined : 'button', ref: ref, ...rest }));
+});
+/**
+ * Chip.Removable used for interaction
+ * @example
+ * <Chip.Removable>Click to remove me</Chip.Removable>
+ */
+const ChipRemovable = forwardRef(function ChipRemovable(props, ref) {
+    return jsx(ChipButton, { "data-removable": true, ref: ref, ...props });
+});
+/**
+ * Chip.Checkbox used for multiselection
+ * @example
+ * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
+ * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
+ */
+const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, size, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? Slot : 'label';
+    return (jsxs(Component, { className: cl('ds-chip', className), "data-size": size, ref: ref, children: [jsx("input", { ...rest, type: inputType }), jsx(Slottable, { children: children })] }));
+});
+/**
+ * Chip.Radio used for single selection
+ * @example
+ * <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
+ * <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
+ */
+const ChipRadio = forwardRef(function ChipRadio(props, ref) {
+    return jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -1,15 +1,15 @@
 'use client';
-import { Group } from './Group/Group.js';
-import { RemovableChip } from './Removable/Removable.js';
-import { ToggleChip } from './Toggle/Toggle.js';
+import { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './Chips.js';
 
 const Chip = {
-    Group: Group,
-    Removable: RemovableChip,
-    Toggle: ToggleChip,
+    Button: ChipButton,
+    Checkbox: ChipCheckbox,
+    Radio: ChipRadio,
+    Removable: ChipRemovable,
 };
-Chip.Group.displayName = 'Chip.Group';
+Chip.Button.displayName = 'Chip.Button';
+Chip.Checkbox.displayName = 'Chip.Checkbox';
+Chip.Radio.displayName = 'Chip.Radio';
 Chip.Removable.displayName = 'Chip.Removable';
-Chip.Toggle.displayName = 'Chip.Toggle';
 
-export { Chip, Group as ChipGroup, RemovableChip as ChipRemovable, ToggleChip as ChipToggle };
+export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const Divider = forwardRef(function Divider({ className, ...rest }, ref) {
     return (
     // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
-    jsx("hr", { "aria-hidden": 'true', className: clsx('ds-divider', className), ref: ref, ...rest }));
+    jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
 });
 
 export { Divider };

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useState, useEffect, createContext } from 'react';
+import { Popover } from '../Popover/index.js';
+
+const Dropdown = forwardRef(function DropddownMenuContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    const [size, setSize] = useState(rest.size || 'md');
+    useEffect(() => {
+        setSize(rest.size || 'md');
+    }, [rest.size]);
+    return (jsx(DropdownCtx.Provider, { value: {
+            size,
+        }, children: jsx(Popover, { ref: ref, placement: placement, size: size, className: cl('ds-dropdown', className), ...rest }) }));
+});
+const DropdownCtx = createContext({
+    size: 'md',
+});
+
+export { Dropdown, DropdownCtx };

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '../Popover/index.js';
+import { PopoverContext } from '../Popover/PopoverContext.js';
+
+/**
+ * DropdownContext is the root component for the DropdownMenu component.
+ * @example
+ * <DropdownMenu.Context>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu>
+ *   <DropdownMenu.Heading>Heading</DropdownMenu.Heading>
+ *    <DropdownMenu.List>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.List>
+ *  </DropdownMenu>
+ * </DropdownMenu.Context>
+ */
+const DropdownContext = ({ children }) => {
+    return jsx(PopoverContext, { children: children });
+};
+DropdownContext.displayName = 'DropdownContext';
+
+export { DropdownContext };

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const DropdownHeading = forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+    return (jsx("h2", { ref: ref, className: cl('ds-dropdown__heading', className), ...rest }));
+});
+
+export { DropdownHeading };

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { Button } from '../Button/Button.js';
+import { DropdownCtx } from './Dropdown.js';
+
+const DropdownItem = forwardRef(function DropdownItem({ className, style, ...rest }, ref) {
+    const { size } = useContext(DropdownCtx);
+    return (jsx("li", { className: className, style: style, children: jsx(Button, { ref: ref, variant: 'tertiary', size: size, className: 'ds-dropdown__item', ...rest }) }));
+});
+
+export { DropdownItem };

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const DropdownList = forwardRef(function DropdownList({ className, ...rest }, ref) {
+    return (jsx("ul", { ref: ref, className: cl('ds-dropdown__list', className), ...rest }));
+});
+
+export { DropdownList };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../Popover/index.js';
+import { PopoverTrigger } from '../Popover/PopoverTrigger.js';
+
+const DropdownTrigger = forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
+    return jsx(PopoverTrigger, { ref: ref, ...rest });
+});
+
+export { DropdownTrigger };

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

@@ -0,0 +1,34 @@
+'use client';
+import { Dropdown as Dropdown$1 } from './Dropdown.js';
+import { DropdownContext } from './DropdownContext.js';
+import { DropdownHeading } from './DropdownHeading.js';
+import { DropdownItem } from './DropdownItem.js';
+import { DropdownList } from './DropdownList.js';
+import { DropdownTrigger } from './DropdownTrigger.js';
+
+/**
+ * @example
+ * <Dropdown.Context>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *    <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.Context>
+ */
+const Dropdown = Object.assign(Dropdown$1, {
+    Context: DropdownContext,
+    Heading: DropdownHeading,
+    List: DropdownList,
+    Item: DropdownItem,
+    Trigger: DropdownTrigger,
+});
+Dropdown.Context.displayName = 'Dropdown.Context';
+Dropdown.List.displayName = 'Dropdown.List';
+Dropdown.Heading.displayName = 'Dropdown.Heading';
+Dropdown.Item.displayName = 'Dropdown.Item';
+Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+
+export { Dropdown, DropdownContext, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger };

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { createContext, forwardRef, useId, useState } from 'react';
+
+const ErrorSummaryContext = createContext({
+    size: 'md',
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ErrorSummary = forwardRef(function ErrorSummary({ className, size = 'md', role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) {
+    const randomId = useId();
+    const [headingId, setHeadingId] = useState(randomId);
+    return (jsx(ErrorSummaryContext.Provider, { value: { size, 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 }) }));
+});
+
+export { ErrorSummary, ErrorSummaryContext };

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useEffect } from 'react';
-import { ErrorSummaryContext } from './ErrorSummaryRoot.js';
-import { Heading } from '../Typography/Heading/Heading.js';
+import { ErrorSummaryContext } from './ErrorSummary.js';
+import { Heading } from '../Heading/Heading.js';
 
 const HEADING_SIZE_MAP = {
     sm: '2xs',
@@ -15,8 +15,7 @@ const ErrorSummaryHeading = forwardRef(function ErrorSummaryHeading({ className,
         if (id && headingId !== id)
             setHeadingId(id);
     }, [headingId, id, setHeadingId]);
-    return (jsx(Heading, { className: 'ds-error-summary__heading', id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
+    return (jsx(Heading, { id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], ref: ref, ...rest }));
 });
-ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
 
 export { ErrorSummaryHeading };

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

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { List } from '../List/index.js';
-import { ErrorSummaryContext } from './ErrorSummaryRoot.js';
+import { ErrorSummaryContext } from './ErrorSummary.js';
 
 const ErrorSummaryList = forwardRef(function ErrorSummaryList({ ...rest }, ref) {
     const { size } = useContext(ErrorSummaryContext);

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

@@ -1,26 +1,25 @@
 'use client';
+import { ErrorSummary as ErrorSummary$1 } from './ErrorSummary.js';
 import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
 import { ErrorSummaryItem } from './ErrorSummaryItem.js';
 import { ErrorSummaryList } from './ErrorSummaryList.js';
-import { ErrorSummaryRoot } from './ErrorSummaryRoot.js';
 
 /**
  * @example
- * <ErrorSummary.Root>
+ * <ErrorSummary>
  *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
  *  <ErrorSummary.List>
  *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
  *  </ErrorSummary.List>
- * </ErrorSummary.Root>
+ * </ErrorSummary>
  */
-const ErrorSummary = {};
-ErrorSummary.Root = ErrorSummaryRoot;
-ErrorSummary.Item = ErrorSummaryItem;
-ErrorSummary.Heading = ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList;
-ErrorSummary.Root.displayName = 'ErrorSummary.Root';
+const ErrorSummary = Object.assign(ErrorSummary$1, {
+    Heading: ErrorSummaryHeading,
+    Item: ErrorSummaryItem,
+    List: ErrorSummaryList,
+});
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
 
-export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryList, ErrorSummaryRoot };
+export { ErrorSummary, ErrorSummaryHeading, ErrorSummaryItem, ErrorSummaryList };

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 size='lg' level={2}>Heading</Heading>
+ */
+const Heading = forwardRef(function Heading({ size = 'xl', level = 2, className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : `h${level}`;
+    return (jsx(Component, { className: cl(`ds-heading`, className), "data-size": size, ref: ref, ...rest }));
+});
+
+export { Heading };

package/dist/esm/components/HelpText/HelpText.js

@@ -1,17 +1,11 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef, useState, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 import { Popover } from '../Popover/index.js';
-import { HelpTextIcon } from './HelpTextIcon.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const HelpText = forwardRef(function HelpText({ title, placement = 'right', size = 'md', className, children, ...rest }, ref) {
-    const [open, setOpen] = useState(false);
-    const randomId = useId();
-    return (jsxs(Fragment, { children: [jsxs("button", { className: clsx(`ds-helptext--${size}`, 'ds-helptext__button', `ds-focus`, className), onClick: () => setOpen(!open), 
-                // @ts-ignore
-                popovertarget: randomId, ref: ref, ...rest, children: [jsx(HelpTextIcon, { filled: true, className: clsx(`ds-helptext__icon`, `ds-helptext__icon--filled`, className), openState: open }), jsx(HelpTextIcon, { className: clsx(`ds-helptext__icon`, className), openState: open }), jsx("span", { className: `ds-sr-only`, children: title })] }), jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Popover, { id: randomId, className: 'ds-helptext__content', onClose: () => setOpen(false), open: open, placement: placement, size: size, variant: 'info', children: children }) })] }));
+const HelpText = forwardRef(function HelpText({ placement = 'right', size = 'md', className, children, ...rest }, ref) {
+    return (jsxs(Popover.Context, { children: [jsx(Popover.Trigger, { className: cl('ds-helptext', className), ref: ref, size: size, variant: 'tertiary', ...rest }), jsx(Popover, { placement: placement, size: size, variant: 'info', children: children })] }));
 });
 
 export { HelpText };

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.
+ *
+ * @example
+ * <Label size='lg'>Label</Label>
+ */
+const Label = forwardRef(function Label({ className, size = 'md', weight = 'medium', asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'label';
+    return (jsx(Component, { ref: ref, className: cl(`ds-label--${size}`, weight && `ds-font-weight--${weight}`, className), ...rest }));
+});
+
+export { Label };

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const Link = forwardRef(({ asChild, className, color = 'accent', ...rest }, ref) => {
     const Component = asChild ? Slot : 'a';
-    return (jsx(Component, { className: clsx('ds-link', className), "data-color": color, ref: ref, ...rest }));
+    return (jsx(Component, { className: cl('ds-link', className), "data-color": color, ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
 const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {

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

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const render = (tagName, { asChild, className, size = 'md', ...rest }, ref) => {
     const Component = asChild ? Slot : tagName;
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`ds-list`, className), "data-size": size, ref: ref, ...rest }) }));
+    return (jsx(Component, { className: cl(`ds-list`, className), "data-size": size, ref: ref, ...rest }));
 };
 const ListUnordered = forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);

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

@@ -0,0 +1,43 @@
+'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 './ModalContext.js';
+import { Button } from '../Button/Button.js';
+
+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 ModalContext
+    const Component = asChild ? Slot : 'dialog';
+    const mergedRefs = useMergeRefs([contextRef, ref, modalRef]);
+    useEffect(() => modalRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
+    useEffect(() => {
+        const modal = modalRef.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 (modal && target === modal && backdropClose) {
+                const { top, left, right, bottom } = modal.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    modal?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = modal?.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        modal?.addEventListener('animationend', handleAutoFocus);
+        modal?.addEventListener('click', handleBackdropClick);
+        return () => {
+            modal?.removeEventListener('animationend', handleAutoFocus);
+            modal?.removeEventListener('click', handleBackdropClick);
+        };
+    }, [backdropClose]);
+    return (jsxs(Component, { className: cl('ds-modal', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, color: 'neutral', icon: true, name: 'close', size: 'md', type: 'submit', variant: 'tertiary' }) })), children] }));
+});
+
+export { Modal };

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+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 }));
+});
+
+export { ModalBlock };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef } from 'react';
+
+const Context = createContext({
+    current: null,
+});
+const ModalContext = ({ children }) => {
+    const contextRef = useRef(null);
+    return jsx(Context.Provider, { value: contextRef, children: children });
+};
+ModalContext.displayName = 'ModalContext';
+
+export { Context, ModalContext };

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

@@ -1,15 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
-import { ModalContext } from './ModalRoot.js';
 import { Button } from '../Button/Button.js';
+import { Context } from './ModalContext.js';
 
-const ModalTrigger = forwardRef(({ asChild, ...rest }, ref) => {
-    const { modalRef, open } = useContext(ModalContext);
+const ModalTrigger = forwardRef(function ModalTrigger({ asChild, ...rest }, ref) {
+    const contextRef = useContext(Context);
     const Component = asChild ? Slot : Button;
-    return (jsx(Component, { ref: ref, onClick: () => modalRef?.current?.showModal(), "aria-expanded": open, "aria-haspopup": 'dialog', ...rest }));
+    return (jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
 });
-ModalTrigger.displayName = 'ModalTrigger';
 
 export { ModalTrigger };

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

@@ -1,23 +1,16 @@
 'use client';
-import { ModalContent } from './ModaContent.js';
-import { ModalDialog } from './ModalDialog.js';
-import { ModalFooter } from './ModalFooter.js';
-import { ModalHeader } from './ModalHeader.js';
-import { ModalRoot } from './ModalRoot.js';
+import { Modal as Modal$1 } from './Modal.js';
+import { ModalBlock } from './ModalBlock.js';
+import { ModalContext } from './ModalContext.js';
 import { ModalTrigger } from './ModalTrigger.js';
 
-const Modal = {};
-Modal.Root = ModalRoot;
-Modal.Content = ModalContent;
-Modal.Footer = ModalFooter;
-Modal.Header = ModalHeader;
-Modal.Trigger = ModalTrigger;
-Modal.Dialog = ModalDialog;
-Modal.Root.displayName = 'Modal.Root';
-Modal.Dialog.displayName = 'Modal.Dialog';
-Modal.Footer.displayName = 'Modal.Footer';
-Modal.Header.displayName = 'Modal.Header';
-Modal.Content.displayName = 'Modal.Content';
+const Modal = Object.assign(Modal$1, {
+    Block: ModalBlock,
+    Context: ModalContext,
+    Trigger: ModalTrigger,
+});
+Modal.Block.displayName = 'Modal.Block';
+Modal.Context.displayName = 'Modal.Context';
 Modal.Trigger.displayName = 'Modal.Trigger';
 
-export { Modal, ModalContent, ModalDialog, ModalFooter, ModalHeader, ModalRoot, ModalTrigger };
+export { Modal, ModalBlock, ModalContext, ModalTrigger };

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

@@ -1,21 +1,15 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { PaginationButton } from './PaginationButton.js';
-import { PaginationEllipsis } from './PaginationEllipsis.js';
-import { PaginationItem } from './PaginationItem.js';
-import { PaginationList } from './PaginationList.js';
-import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
-import { PaginationRoot } from './PaginationRoot.js';
-import { usePagination } from './usePagination.js';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { createContext, forwardRef } from 'react';
 
-const Pagination = forwardRef(function Pagination({ 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, { "aria-label": 'Pagination', compact: compact, ref: ref, size: size, ...rest, children: jsxs(PaginationList, { children: [jsx(PaginationItem, { children: jsx(PaginationPrevious, { "aria-label": previousLabel, disabled: !showPreviousPage, onClick: () => onChange(currentPage - 1), children: !hideLabels && previousLabel }) }), pages.map((page, i) => (jsx(PaginationItem, { children: page === 'ellipsis' ? (jsx(PaginationEllipsis, {})) : (jsx(PaginationButton, { "aria-current": currentPage === page, "aria-label": itemLabel(page), isActive: currentPage === page, onClick: () => onChange(page), children: page })) }, `${page}${i}`))), jsx(PaginationItem, { children: jsx(PaginationNext, { "aria-label": nextLabel, disabled: !showNextPage, onClick: () => onChange(currentPage + 1), children: !hideLabels && nextLabel }) })] }) }));
+const PaginationContext = createContext({
+    size: 'md',
+});
+const Pagination = forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, size = 'md', ...rest }, ref) {
+    const Component = asChild ? Slot : 'nav';
+    return (jsx(PaginationContext.Provider, { value: { size }, children: jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }) }));
 });
 
-export { Pagination };
+export { Pagination, PaginationContext };

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { PaginationContext } from './PaginationRoot.js';
 import { Button } from '../Button/Button.js';
+import { PaginationContext } from './Pagination.js';
 
-const PaginationButton = forwardRef(function PaginationButton({ isActive, ...rest }, ref) {
+const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
     const { size } = useContext(PaginationContext);
-    return (jsx(Button, { "aria-current": isActive, ref: ref, size: size, variant: isActive ? 'primary' : 'tertiary', ...rest }));
+    return jsx(Button, { ref: ref, size: size, ...rest });
 });
 
 export { PaginationButton };

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

@@ -1,14 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef, useContext } from 'react';
-import { PaginationContext } from './PaginationRoot.js';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
 
 const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';
-    const { size, compact } = useContext(PaginationContext);
-    return (jsx(Component, { ref: ref, className: clsx('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
+    return jsx(Component, { ref: ref, ...rest });
 });
 
 export { PaginationItem };