@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/cjs/components/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var DropdownMenu = require('../DropdownMenu.js');
+var DropdownMenuItem_module = require('./DropdownMenuItem.module.css.js');
+var Button = require('../../Button/Button.js');
+
+const DropdownMenuItem = React.forwardRef(({ children, className, style, ...rest }, ref) => {
+    const menu = React.useContext(DropdownMenu.DropdownMenuContext);
+    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', size: menu.size, fullWidth: true, className: DropdownMenuItem_module.item, role: 'menuitem', ...rest, children: children }) }));
+});
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+exports.DropdownMenuItem = DropdownMenuItem;

package/dist/cjs/components/DropdownMenu/DropdownMenuItem/DropdownMenuItem.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"item":"fds-dropdownmenuitem-item-bfb771d0"};
+
+module.exports = classes;

package/dist/cjs/components/DropdownMenu/DropdownMenuTrigger.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var DropdownMenu = require('./DropdownMenu.js');
+var Button = require('../Button/Button.js');
+
+const DropdownMenuTrigger = React.forwardRef(({ ...rest }, ref) => {
+    const { triggerRef, internalOpen, setInternalOpen, isControlled } = React.useContext(DropdownMenu.DropdownMenuContext);
+    const mergedRefs = floatingUi_react.useMergeRefs([ref, triggerRef]);
+    return (jsxRuntime.jsx(Button.Button, { ref: mergedRefs, onClick: () => {
+            if (!isControlled)
+                setInternalOpen(!internalOpen);
+        }, "aria-haspopup": 'menu', "aria-expanded": internalOpen, ...rest }));
+});
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+
+exports.DropdownMenuTrigger = DropdownMenuTrigger;

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

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+var DropdownMenu$1 = require('./DropdownMenu.js');
+var DropdownMenuGroup = require('./DropdownMenuGroup/DropdownMenuGroup.js');
+var DropdownMenuItem = require('./DropdownMenuItem/DropdownMenuItem.js');
+var DropdownMenuTrigger = require('./DropdownMenuTrigger.js');
+var DropdownMenuContent = require('./DropdownMenuContent.js');
+
+const DropdownMenu = DropdownMenu$1.DropdownMenu;
+DropdownMenu.Content = DropdownMenuContent.DropdownMenuContent;
+DropdownMenu.Group = DropdownMenuGroup.DropdownMenuGroup;
+DropdownMenu.Item = DropdownMenuItem.DropdownMenuItem;
+DropdownMenu.Trigger = DropdownMenuTrigger.DropdownMenuTrigger;
+DropdownMenu.Content.displayName = 'DropdownMenu.Content';
+DropdownMenu.Group.displayName = 'DropdownMenu.Group';
+DropdownMenu.Item.displayName = 'DropdownMenu.Item';
+DropdownMenu.Trigger.displayName = 'DropdownMenu.Trigger';
+
+exports.DropdownMenuGroup = DropdownMenuGroup.DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem.DropdownMenuItem;
+exports.DropdownMenuTrigger = DropdownMenuTrigger.DropdownMenuTrigger;
+exports.DropdownMenuContent = DropdownMenuContent.DropdownMenuContent;
+exports.DropdownMenu = DropdownMenu;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"errorSummary":"fds-errorsummary-errorSummary-3a4ecaaf"};
+
+module.exports = classes;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../List/index.js');
+var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+
+const ErrorSummaryHeading = ({ id, ...rest }) => {
+    const { headingId, setHeadingId } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
+    React.useEffect(() => {
+        if (id && headingId !== id) {
+            setHeadingId(id);
+        }
+    }, [headingId, id, setHeadingId]);
+    return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId }));
+};
+ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
+
+exports.ErrorSummaryHeading = ErrorSummaryHeading;

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

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../List/index.js');
+var Link = require('../Link/Link.js');
+
+const ErrorSummaryItem = ({ href, asChild, children, ...rest }) => {
+    return (jsxRuntime.jsx(index.List.Item, { ...rest, children: jsxRuntime.jsx(Link.Link, { href: href, asChild: asChild, children: children }) }));
+};
+ErrorSummaryItem.displayName = 'ErrorSummaryItem';
+
+exports.ErrorSummaryItem = ErrorSummaryItem;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../List/index.js');
+
+function ErrorSummaryList({ ...rest }) {
+    return jsxRuntime.jsx(index.List.Unordered, { ...rest });
+}
+ErrorSummaryList.displayName = 'ErrorSummaryList';
+
+module.exports = ErrorSummaryList;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var index$1 = require('../List/index.js');
+var ErrorSummary_module = require('./ErrorSummary.module.css.js');
+
+const ErrorSummaryContext = React.createContext({
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ErrorSummaryRoot = React.forwardRef(({ size, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', children, ...rest }, ref) => {
+    const randomId = React.useId();
+    const [headingId, setHeadingId] = React.useState(randomId);
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(index.Slot, { className: clsx.clsx(ErrorSummary_module.errorSummary), ref: ref, role: role, "aria-live": ariaLive, "aria-relevant": ariaRelevant, "aria-labelledby": headingId, ...rest, children: jsxRuntime.jsx(index$1.List.Root, { size: size, children: children }) }) }));
+});
+ErrorSummaryRoot.displayName = 'ErrorSummaryRoot';
+
+exports.ErrorSummaryContext = ErrorSummaryContext;
+exports.ErrorSummaryRoot = ErrorSummaryRoot;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
+var ErrorSummaryItem = require('./ErrorSummaryItem.js');
+var ErrorSummaryList = require('./ErrorSummaryList.js');
+
+const ErrorSummary = {};
+ErrorSummary.Root = ErrorSummaryRoot.ErrorSummaryRoot;
+ErrorSummary.Item = ErrorSummaryItem.ErrorSummaryItem;
+ErrorSummary.Heading = ErrorSummaryHeading.ErrorSummaryHeading;
+ErrorSummary.List = ErrorSummaryList;
+ErrorSummary.Root.displayName = 'ErrorSummary.Root';
+ErrorSummary.Item.displayName = 'ErrorSummary.Item';
+ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
+ErrorSummary.List.displayName = 'ErrorSummary.List';
+
+exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
+exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
+exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
+exports.ErrorSummaryList = ErrorSummaryList;
+exports.ErrorSummary = ErrorSummary;

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

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var index = require('../Popover/index.js');
+var utility_module = require('../../utilities/utility.module.css.js');
+var HelpText_module = require('./HelpText.module.css.js');
+var HelpTextIcon = require('./HelpTextIcon.js');
+
+const HelpText = ({ title, placement = 'right', size = 'medium', portal, className, children, ...rest }) => {
+    const [open, setOpen] = React.useState(false);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(index.Popover, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsxRuntime.jsx(index.Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxRuntime.jsxs("button", { className: clsx.clsx(HelpText_module.helpTextButton, utility_module.focusable, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { filled: true, className: clsx.clsx(HelpText_module.helpTextIcon, HelpText_module.helpTextIconFilled, HelpText_module[size], className), openState: open }), jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { className: clsx.clsx(HelpText_module.helpTextIcon, HelpText_module[size], className), openState: open }), jsxRuntime.jsx("span", { className: utility_module.visuallyHidden, children: title })] }) }), jsxRuntime.jsx(index.Popover.Content, { className: HelpText_module.helpTextContent, children: children })] }) }));
+};
+HelpText.displayName = 'HelpText';
+
+exports.HelpText = HelpText;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"helpTextButton":"fds-helptext-helpTextButton-1937672f","helpTextIconFilled":"fds-helptext-helpTextIconFilled-1937672f","helpTextIcon":"fds-helptext-helpTextIcon-1937672f","helpTextContent":"fds-helptext-helpTextContent-1937672f","small":"fds-helptext-small-1937672f","medium":"fds-helptext-medium-1937672f","large":"fds-helptext-large-1937672f"};
+
+module.exports = classes;

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

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const HelpTextIcon = ({ className, filled = false, openState, }) => {
+    const d = filled
+        ? 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 16a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z'
+        : 'M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 14a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-11c2.205 0 4 1.657 4 3.693 0 .986-.416 1.914-1.172 2.612l-.593.54-.294.28c-.477.466-.869.94-.936 1.417l-.01.144v.814h-1.991v-.814c0-1.254.84-2.214 1.675-3.002l.74-.68c.38-.35.59-.816.59-1.31 0-1.024-.901-1.856-2.01-1.856-1.054 0-1.922.755-2.002 1.71l-.006.145H8C8 6.657 9.794 5 12 5Z';
+    return (jsxRuntime.jsx("svg", { "aria-hidden": true, className: className, "data-state": openState ? 'open' : 'closed', fill: 'none', role: 'img', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { clipRule: 'evenodd', d: d, fill: 'currentColor', fillRule: 'evenodd' }) }));
+};
+HelpTextIcon.displayName = 'HelpText.Icon';
+
+exports.HelpTextIcon = HelpTextIcon;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var Link_module = require('./Link.module.css.js');
+
+const Link = React.forwardRef(({ as = 'a', asChild, children, className, inverted = false, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : as;
+    return (jsxRuntime.jsx(Component, { className: clsx.clsx(Link_module.link, inverted && Link_module.inverted, className), ref: ref, ...rest, children: children }));
+});
+Link.displayName = 'Link';
+
+exports.Link = Link;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"link":"fds-link-link-74840a2f","inverted":"fds-link-inverted-74840a2f"};
+
+module.exports = classes;

package/dist/cjs/components/List/List.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"small":"fds-list-small-f2433af","medium":"fds-list-medium-f2433af","large":"fds-list-large-f2433af","listItem":"fds-list-listItem-f2433af","heading":"fds-list-heading-f2433af"};
+
+module.exports = classes;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ListRoot = require('./ListRoot.js');
+var Heading = require('../Typography/Heading/Heading.js');
+
+const HEADING_SIZE_MAP = {
+    small: 'xxsmall',
+    medium: 'xsmall',
+    large: 'small',
+};
+const ListHeading = React.forwardRef(({ level = 2, id, ...rest }, ref) => {
+    const { size, headingId, setHeadingId } = React.useContext(ListRoot.ListContext);
+    const randomId = React.useId();
+    const headingId_ = id ?? randomId;
+    const headingSize = React.useMemo(() => HEADING_SIZE_MAP[size], [size]);
+    React.useEffect(() => {
+        if (headingId !== headingId_) {
+            setHeadingId(headingId_);
+        }
+    }, [headingId, id, setHeadingId, headingId_]);
+    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: headingSize, id: headingId, level: level, spacing: true, ...rest }));
+});
+ListHeading.displayName = 'ListHeading';
+
+exports.ListHeading = ListHeading;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var List_module = require('./List.module.css.js');
+
+const ListItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'li';
+    return (jsxRuntime.jsx(Component, { className: clsx.clsx(List_module.listItem, className), ...rest, ref: ref }));
+});
+ListItem.displayName = 'ListItem';
+
+exports.ListItem = ListItem;

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var React = require('react');
+
+const ListContext = React.createContext({
+    size: 'medium',
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ListRoot = React.forwardRef(({ asChild, size = 'medium', ...rest }, ref) => {
+    const [headingId, setHeadingId] = React.useState();
+    const Component = asChild ? index.Slot : 'div';
+    return (jsxRuntime.jsx(ListContext.Provider, { value: { size, headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { ref: ref, ...rest }) }));
+});
+ListRoot.displayName = 'ListRoot';
+
+exports.ListContext = ListContext;
+exports.ListRoot = ListRoot;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var ListRoot = require('./ListRoot.js');
+var List_module = require('./List.module.css.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+
+const Unordered = React.forwardRef(({ asChild, ...rest }, ref) => {
+    const { size, headingId } = React.useContext(ListRoot.ListContext);
+    const Component = asChild ? index.Slot : 'ul';
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: clsx.clsx(List_module[size], rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+});
+Unordered.displayName = 'ListUnordered';
+const Ordered = React.forwardRef(({ asChild, ...rest }, ref) => {
+    const { size, headingId } = React.useContext(ListRoot.ListContext);
+    const Component = asChild ? index.Slot : 'ol';
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: clsx.clsx(List_module[size], rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+});
+Ordered.displayName = 'ListOrdered';
+
+exports.Ordered = Ordered;
+exports.Unordered = Unordered;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var ListRoot = require('./ListRoot.js');
+var ListItem = require('./ListItem.js');
+var ListHeading = require('./ListHeading.js');
+var Lists = require('./Lists.js');
+
+const List = {};
+List.Root = ListRoot.ListRoot;
+List.Item = ListItem.ListItem;
+List.Heading = ListHeading.ListHeading;
+List.Ordered = Lists.Ordered;
+List.Unordered = Lists.Unordered;
+List.Root.displayName = 'List.Root';
+List.Item.displayName = 'List.Item';
+List.Heading.displayName = 'List.Heading';
+List.Ordered.displayName = 'List.Ordered';
+List.Unordered.displayName = 'List.Unordered';
+
+exports.ListRoot = ListRoot.ListRoot;
+exports.ListItem = ListItem.ListItem;
+exports.ListHeading = ListHeading.ListHeading;
+exports.ListOrdered = Lists.Ordered;
+exports.ListUnordered = Lists.Unordered;
+exports.List = List;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"modal":"fds-modal-modal-999bed53","fade-in":"fds-modal-fade-in-999bed53","slide-in":"fds-modal-slide-in-999bed53","lockScroll":"fds-modal-lockScroll-999bed53"};
+
+module.exports = classes;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var ModalContent_module = require('./ModalContent.module.css.js');
+
+const ModalContent = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(ModalContent_module.modalContent, className), ...rest }));
+});
+ModalContent.displayName = 'ModalContent';
+
+exports.ModalContent = ModalContent;

package/dist/cjs/components/Modal/ModalContent/ModalContent.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"modalContent":"fds-modalcontent-modalContent-37ec52f1"};
+
+module.exports = classes;

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

@@ -0,0 +1,74 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var React = require('react');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Modal_module = require('./Modal.module.css.js');
+var useScrollLock = require('./useScrollLock.js');
+var useModalState = require('./useModalState.js');
+var ModalRoot = require('./ModalRoot.js');
+
+const ModalDialog = React.forwardRef(({ onInteractOutside, onClose, onBeforeClose, asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'dialog';
+    // This local ref is used to make sure the modal works without a ModalRoot
+    const modalDialogRef = React.useRef(null);
+    const { context } = floatingUi_react.useFloating();
+    const modal = React.useContext(ModalRoot.ModalContext);
+    const open = useModalState.useModalState(modalDialogRef);
+    const { modalRef, setOpen } = modal;
+    modal.closeModal = () => {
+        if (onBeforeClose && onBeforeClose() === false)
+            return;
+        modalDialogRef.current?.close();
+    };
+    const mergedRefs = floatingUi_react.useMergeRefs([modalRef, ref, modalDialogRef]);
+    useScrollLock.useScrollLock(modalDialogRef, Modal_module.lockScroll);
+    React.useEffect(() => {
+        setOpen(open);
+    }, [open, setOpen]);
+    React.useEffect(() => {
+        const modalEl = modalRef.current;
+        const handleBackdropClick = (e) => {
+            if (e.target === modalEl && onInteractOutside) {
+                // Fix bug where if you select text spanning two divs it thinks you clicked outside
+                if (window.getSelection()?.toString())
+                    return;
+                onInteractOutside?.();
+            }
+        };
+        if (modalEl)
+            modalEl.addEventListener('click', handleBackdropClick);
+        return () => {
+            if (modalEl) {
+                modalEl.removeEventListener('click', handleBackdropClick);
+            }
+        };
+    }, [onInteractOutside, modalRef, onBeforeClose, ref]);
+    React.useEffect(() => {
+        const modalEl = modalRef.current;
+        const handleModalClose = () => {
+            onClose?.();
+        };
+        if (modalEl)
+            modalEl.addEventListener('close', handleModalClose);
+        return () => {
+            if (modalEl) {
+                modalEl.removeEventListener('close', handleModalClose);
+            }
+        };
+    }, [modalRef, onClose]);
+    const onCancel = (e) => {
+        if (onBeforeClose && onBeforeClose() === false) {
+            e.preventDefault();
+            return;
+        }
+        modalRef.current?.close();
+    };
+    return (jsxRuntime.jsx(Component, { ref: mergedRefs, className: clsx.clsx(Modal_module.modal, className), onCancel: onCancel, ...rest, children: open && (jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })) }));
+});
+ModalDialog.displayName = 'ModalDialog';
+
+exports.ModalDialog = ModalDialog;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var ModalFooter_module = require('./ModalFooter.module.css.js');
+
+const ModalFooter = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'footer';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(ModalFooter_module.modalFooter, className), ...rest }));
+});
+ModalFooter.displayName = 'ModalFooter';
+
+exports.ModalFooter = ModalFooter;

package/dist/cjs/components/Modal/ModalFooter/ModalFooter.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"modalFooter":"fds-modalfooter-modalFooter-d697f79f"};
+
+module.exports = classes;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var akselIcons = require('@navikt/aksel-icons');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var ModalRoot = require('../ModalRoot.js');
+var ModalHeader_module = require('./ModalHeader.module.css.js');
+var Button = require('../../Button/Button.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var Heading = require('../../Typography/Heading/Heading.js');
+
+const ModalHeader = React.forwardRef(({ closeButton = true, children, subtitle, asChild, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'div';
+    const context = React.useContext(ModalRoot.ModalContext);
+    return (jsxRuntime.jsxs(Component, { ref: ref, className: clsx.clsx(ModalHeader_module.modalHeader, !closeButton && ModalHeader_module.noCloseButton, className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'small', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xsmall', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'second', size: 'medium', onClick: context?.closeModal, autoFocus: true, icon: true, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
+});
+ModalHeader.displayName = 'ModalHeader';
+
+exports.ModalHeader = ModalHeader;

package/dist/cjs/components/Modal/ModalHeader/ModalHeader.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"modalHeader":"fds-modalheader-modalHeader-4ace023b","noCloseButton":"fds-modalheader-noCloseButton-4ace023b"};
+
+module.exports = classes;

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const ModalContext = React.createContext({
+    modalRef: { current: null },
+    open: false,
+    setOpen: () => { },
+});
+const ModalRoot = ({ children }) => {
+    const modalRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    return (jsxRuntime.jsx(ModalContext.Provider, { value: {
+            closeModal: () => { },
+            modalRef,
+            open,
+            setOpen,
+        }, children: children }));
+};
+ModalRoot.displayName = 'ModalRoot';
+
+exports.ModalContext = ModalContext;
+exports.ModalRoot = ModalRoot;

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

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ModalRoot = require('../ModalRoot.js');
+var Button = require('../../Button/Button.js');
+
+const ModalTrigger = React.forwardRef(({ ...rest }, ref) => {
+    const { modalRef, open } = React.useContext(ModalRoot.ModalContext);
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, onClick: () => modalRef?.current?.showModal(), "aria-expanded": open, "aria-haspopup": 'dialog', ...rest }));
+});
+ModalTrigger.displayName = 'ModalTrigger';
+
+exports.ModalTrigger = ModalTrigger;

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

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var ModalRoot = require('./ModalRoot.js');
+var ModaContent = require('./ModalContent/ModaContent.js');
+var ModalDialog = require('./ModalDialog.js');
+var ModalFooter = require('./ModalFooter/ModalFooter.js');
+var ModalHeader = require('./ModalHeader/ModalHeader.js');
+var ModalTrigger = require('./ModalTrigger/ModalTrigger.js');
+
+const Modal = ModalDialog.ModalDialog;
+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';
+Modal.Trigger.displayName = 'Modal.Trigger';
+
+exports.ModalContent = ModaContent.ModalContent;
+exports.ModalDialog = ModalDialog.ModalDialog;
+exports.ModalFooter = ModalFooter.ModalFooter;
+exports.ModalHeader = ModalHeader.ModalHeader;
+exports.ModalTrigger = ModalTrigger.ModalTrigger;
+exports.Modal = Modal;