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

package/dist/cjs/components/Divider/Divider.js

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Divider = React.forwardRef(function Divider({ className, ...rest }, ref) {
+const Divider = react.forwardRef(function Divider({ className, ...rest }, ref) {
     return (
     // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
-    jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: lite.clsx('ds-divider', className), ref: ref, ...rest }));
+    jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
 });
 
 exports.Divider = Divider;

package/dist/cjs/components/Dropdown/Dropdown.js

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

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../Popover/index.js');
+var PopoverContext = require('../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 jsxRuntime.jsx(PopoverContext.PopoverContext, { children: children });
+};
+DropdownContext.displayName = 'DropdownContext';
+
+exports.DropdownContext = DropdownContext;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const DropdownHeading = react.forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("h2", { ref: ref, className: cl('ds-dropdown__heading', className), ...rest }));
+});
+
+exports.DropdownHeading = DropdownHeading;

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

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

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const DropdownList = react.forwardRef(function DropdownList({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("ul", { ref: ref, className: cl('ds-dropdown__list', className), ...rest }));
+});
+
+exports.DropdownList = DropdownList;

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

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../Popover/index.js');
+var PopoverTrigger = require('../Popover/PopoverTrigger.js');
+
+const DropdownTrigger = react.forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
+    return jsxRuntime.jsx(PopoverTrigger.PopoverTrigger, { ref: ref, ...rest });
+});
+
+exports.DropdownTrigger = DropdownTrigger;

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var Dropdown$1 = require('./Dropdown.js');
+var DropdownContext = require('./DropdownContext.js');
+var DropdownHeading = require('./DropdownHeading.js');
+var DropdownItem = require('./DropdownItem.js');
+var DropdownList = require('./DropdownList.js');
+var DropdownTrigger = require('./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.Dropdown, {
+    Context: DropdownContext.DropdownContext,
+    Heading: DropdownHeading.DropdownHeading,
+    List: DropdownList.DropdownList,
+    Item: DropdownItem.DropdownItem,
+    Trigger: DropdownTrigger.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';
+
+exports.DropdownContext = DropdownContext.DropdownContext;
+exports.DropdownHeading = DropdownHeading.DropdownHeading;
+exports.DropdownItem = DropdownItem.DropdownItem;
+exports.DropdownList = DropdownList.DropdownList;
+exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
+exports.Dropdown = Dropdown;

package/dist/cjs/components/ErrorSummary/ErrorSummary.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const ErrorSummaryContext = react.createContext({
+    size: 'md',
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ErrorSummary = react.forwardRef(function ErrorSummary({ className, size = 'md', role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) {
+    const randomId = react.useId();
+    const [headingId, setHeadingId] = react.useState(randomId);
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { size, headingId, setHeadingId }, children: jsxRuntime.jsx("div", { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+});
+
+exports.ErrorSummary = ErrorSummary;
+exports.ErrorSummaryContext = ErrorSummaryContext;

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

@@ -2,23 +2,22 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
-var Heading = require('../Typography/Heading/Heading.js');
+var react = require('react');
+var ErrorSummary = require('./ErrorSummary.js');
+var Heading = require('../Heading/Heading.js');
 
 const HEADING_SIZE_MAP = {
     sm: '2xs',
     md: 'xs',
     lg: 'sm',
 };
-const ErrorSummaryHeading = React.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
-    const { size, headingId, setHeadingId } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
-    React.useEffect(() => {
+const ErrorSummaryHeading = react.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
+    const { size, headingId, setHeadingId } = react.useContext(ErrorSummary.ErrorSummaryContext);
+    react.useEffect(() => {
         if (id && headingId !== id)
             setHeadingId(id);
     }, [headingId, id, setHeadingId]);
-    return (jsxRuntime.jsx(Heading.Heading, { className: 'ds-error-summary__heading', id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Heading.Heading, { id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], ref: ref, ...rest }));
 });
-ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading;

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

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var index = require('../List/index.js');
 var Link = require('../Link/Link.js');
 
-const ErrorSummaryItem = React.forwardRef(function ErrorSummaryItem({ href, asChild, children, ...rest }, ref) {
+const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ href, asChild, children, ...rest }, ref) {
     return (jsxRuntime.jsx(index.List.Item, { ...rest, ref: ref, children: jsxRuntime.jsx(Link.Link, { href: href, asChild: asChild, children: children }) }));
 });
 

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

@@ -2,12 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var index = require('../List/index.js');
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var ErrorSummary = require('./ErrorSummary.js');
 
-const ErrorSummaryList = React.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
-    const { size } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
+const ErrorSummaryList = react.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
+    const { size } = react.useContext(ErrorSummary.ErrorSummaryContext);
     return jsxRuntime.jsx(index.List.Unordered, { size: size, ...rest, ref: ref });
 });
 

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

@@ -1,26 +1,25 @@
 'use client';
 'use strict';
 
+var ErrorSummary$1 = require('./ErrorSummary.js');
 var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
 var ErrorSummaryItem = require('./ErrorSummaryItem.js');
 var ErrorSummaryList = require('./ErrorSummaryList.js');
-var ErrorSummaryRoot = require('./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.ErrorSummaryRoot;
-ErrorSummary.Item = ErrorSummaryItem.ErrorSummaryItem;
-ErrorSummary.Heading = ErrorSummaryHeading.ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList.ErrorSummaryList;
-ErrorSummary.Root.displayName = 'ErrorSummary.Root';
+const ErrorSummary = Object.assign(ErrorSummary$1.ErrorSummary, {
+    Heading: ErrorSummaryHeading.ErrorSummaryHeading,
+    Item: ErrorSummaryItem.ErrorSummaryItem,
+    List: ErrorSummaryList.ErrorSummaryList,
+});
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
@@ -28,5 +27,4 @@ ErrorSummary.List.displayName = 'ErrorSummary.List';
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
-exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
 exports.ErrorSummary = ErrorSummary;

package/dist/cjs/components/Heading/Heading.js

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

package/dist/cjs/components/HelpText/HelpText.js

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

package/dist/cjs/components/Label/Label.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `Label` for labels.
+ *
+ * @example
+ * <Label size='lg'>Label</Label>
+ */
+const Label = react.forwardRef(function Label({ className, size = 'md', weight = 'medium', asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'label';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-label--${size}`, weight && `ds-font-weight--${weight}`, className), ...rest }));
+});
+
+exports.Label = Label;

package/dist/cjs/components/Link/Link.js

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Link = React.forwardRef(({ asChild, className, color = 'accent', ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'a';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-link', className), "data-color": color, ref: ref, ...rest }));
+const Link = react.forwardRef(({ asChild, className, color = 'accent', ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'a';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), "data-color": color, ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

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

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const ListItem = React.forwardRef(function ListItem({ asChild, ...rest }, ref) {
-    const Component = asChild ? index.Slot : 'li';
+const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
 

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

@@ -2,19 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
 const render = (tagName, { asChild, className, size = 'md', ...rest }, ref) => {
-    const Component = asChild ? index.Slot : tagName;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-list`, className), "data-size": size, ref: ref, ...rest }) }));
+    const Component = asChild ? reactSlot.Slot : tagName;
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), "data-size": size, ref: ref, ...rest }));
 };
-const ListUnordered = React.forwardRef(function ListUnordered(props, ref) {
+const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
 });
-const ListOrdered = React.forwardRef(function ListOrdered(props, ref) {
+const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);
 });
 

package/dist/cjs/components/Modal/Modal.js

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var ModalContext = require('./ModalContext.js');
+var Button = require('../Button/Button.js');
+
+const Modal = react.forwardRef(function Modal({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
+    const contextRef = react.useContext(ModalContext.Context);
+    const modalRef = react.useRef(null); // This local ref is used to make sure the modal works without a ModalContext
+    const Component = asChild ? reactSlot.Slot : 'dialog';
+    const mergedRefs = react$1.useMergeRefs([contextRef, ref, modalRef]);
+    react.useEffect(() => modalRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
+    react.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 (jsxRuntime.jsxs(Component, { className: cl('ds-modal', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(Button.Button, { "aria-label": closeButton, autoFocus: true, color: 'neutral', icon: true, name: 'close', size: 'md', type: 'submit', variant: 'tertiary' }) })), children] }));
+});
+
+exports.Modal = Modal;

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

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const ModalBlock = react.forwardRef(function ModalBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-modal__block', className), ref: ref, ...rest }));
+});
+
+exports.ModalBlock = ModalBlock;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Context = react.createContext({
+    current: null,
+});
+const ModalContext = ({ children }) => {
+    const contextRef = react.useRef(null);
+    return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
+};
+ModalContext.displayName = 'ModalContext';
+
+exports.Context = Context;
+exports.ModalContext = ModalContext;

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

@@ -2,16 +2,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
-var ModalRoot = require('./ModalRoot.js');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 var Button = require('../Button/Button.js');
+var ModalContext = require('./ModalContext.js');
 
-const ModalTrigger = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { modalRef, open } = React.useContext(ModalRoot.ModalContext);
-    const Component = asChild ? index.Slot : Button.Button;
-    return (jsxRuntime.jsx(Component, { ref: ref, onClick: () => modalRef?.current?.showModal(), "aria-expanded": open, "aria-haspopup": 'dialog', ...rest }));
+const ModalTrigger = react.forwardRef(function ModalTrigger({ asChild, ...rest }, ref) {
+    const contextRef = react.useContext(ModalContext.Context);
+    const Component = asChild ? reactSlot.Slot : Button.Button;
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
 });
-ModalTrigger.displayName = 'ModalTrigger';
 
 exports.ModalTrigger = ModalTrigger;

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

@@ -1,31 +1,21 @@
 'use client';
 'use strict';
 
-var ModaContent = require('./ModaContent.js');
-var ModalDialog = require('./ModalDialog.js');
-var ModalFooter = require('./ModalFooter.js');
-var ModalHeader = require('./ModalHeader.js');
-var ModalRoot = require('./ModalRoot.js');
+var Modal$1 = require('./Modal.js');
+var ModalBlock = require('./ModalBlock.js');
+var ModalContext = require('./ModalContext.js');
 var ModalTrigger = require('./ModalTrigger.js');
 
-const Modal = {};
-Modal.Root = ModalRoot.ModalRoot;
-Modal.Content = ModaContent.ModalContent;
-Modal.Footer = ModalFooter.ModalFooter;
-Modal.Header = ModalHeader.ModalHeader;
-Modal.Trigger = ModalTrigger.ModalTrigger;
-Modal.Dialog = ModalDialog.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.Modal, {
+    Block: ModalBlock.ModalBlock,
+    Context: ModalContext.ModalContext,
+    Trigger: ModalTrigger.ModalTrigger,
+});
+Modal.Block.displayName = 'Modal.Block';
+Modal.Context.displayName = 'Modal.Context';
 Modal.Trigger.displayName = 'Modal.Trigger';
 
-exports.ModalContent = ModaContent.ModalContent;
-exports.ModalDialog = ModalDialog.ModalDialog;
-exports.ModalFooter = ModalFooter.ModalFooter;
-exports.ModalHeader = ModalHeader.ModalHeader;
-exports.ModalRoot = ModalRoot.ModalRoot;
+exports.ModalBlock = ModalBlock.ModalBlock;
+exports.ModalContext = ModalContext.ModalContext;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
 exports.Modal = Modal;

package/dist/cjs/components/Pagination/Pagination.js

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

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

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var PaginationRoot = require('./PaginationRoot.js');
+var react = require('react');
 var Button = require('../Button/Button.js');
+var Pagination = require('./Pagination.js');
 
-const PaginationButton = React.forwardRef(function PaginationButton({ isActive, ...rest }, ref) {
-    const { size } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Button.Button, { "aria-current": isActive, ref: ref, size: size, variant: isActive ? 'primary' : 'tertiary', ...rest }));
+const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
+    const { size } = react.useContext(Pagination.PaginationContext);
+    return jsxRuntime.jsx(Button.Button, { ref: ref, size: size, ...rest });
 });
 
 exports.PaginationButton = PaginationButton;