@digdir/designsystemet-react 0.52.0-alpha.0

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

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

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { forwardRef } from 'react';
+import classes from './Divider.module.css.js';
+
+const Divider = forwardRef(({ color = 'default', className, ...rest }, ref) => {
+    return (jsx("hr", { className: clsx(classes.divider, classes[color], className), ref: ref, ...rest }));
+});
+Divider.displayName = 'Divider';
+Divider.displayName = 'Divider';
+
+export { Divider };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"divider":"fds-divider-divider-72ee397b","default":"fds-divider-default-72ee397b","strong":"fds-divider-strong-72ee397b","subtle":"fds-divider-subtle-72ee397b"};
+
+export { classes as default };

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, createContext } from 'react';
+
+const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children, ...rest }) => {
+    const triggerRef = useRef(null);
+    const [internalOpen, setInternalOpen] = useState(open ?? false);
+    const anchorEl = rest.anchorEl ?? triggerRef.current;
+    const isControlled = typeof open === 'boolean';
+    useEffect(() => {
+        setInternalOpen(open ?? false);
+    }, [open]);
+    return (jsx(DropdownMenuContext.Provider, { value: {
+            anchorEl,
+            triggerRef,
+            size,
+            portal,
+            placement,
+            internalOpen,
+            isControlled,
+            onClose,
+            setInternalOpen,
+        }, children: children }));
+};
+const DropdownMenuContext = createContext({
+    triggerRef: { current: null },
+    size: 'medium',
+    anchorEl: null,
+    internalOpen: false,
+    setInternalOpen: () => { },
+});
+DropdownMenu.displayName = 'DropdownMenu';
+
+export { DropdownMenu, DropdownMenuContext };

package/dist/esm/components/DropdownMenu/DropdownMenu.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"dropdown":"fds-dropdownmenu-dropdown-ef66056f","small":"fds-dropdownmenu-small-ef66056f","medium":"fds-dropdownmenu-medium-ef66056f","large":"fds-dropdownmenu-large-ef66056f"};
+
+export { classes as default };

package/dist/esm/components/DropdownMenu/DropdownMenuContent.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { forwardRef, useContext, useRef } from 'react';
+import { useFloating, useInteractions, useFocus, useClick, useDismiss, useRole, useMergeRefs, FloatingFocusManager, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './DropdownMenu.module.css.js';
+import { DropdownMenuContext } from './DropdownMenu.js';
+import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { offset, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
+
+const GAP = 4;
+const DropdownMenuContent = forwardRef(({ className, children, ...rest }, ref) => {
+    const { size, placement, portal, anchorEl, isControlled, internalOpen, setInternalOpen, onClose, } = useContext(DropdownMenuContext);
+    const Container = portal ? FloatingPortal : React.Fragment;
+    const floatingEl = useRef(null);
+    const { context, update, refs, placement: flPlacement, floatingStyles, } = useFloating({
+        placement,
+        open: internalOpen,
+        onOpenChange: (localOpen) => {
+            if (!localOpen)
+                onClose && onClose();
+            if (!isControlled)
+                setInternalOpen(localOpen);
+        },
+        elements: {
+            reference: anchorEl,
+            floating: floatingEl.current,
+        },
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(GAP), shift()],
+    });
+    const { getFloatingProps } = useInteractions([
+        useFocus(context),
+        useClick(context),
+        useDismiss(context),
+        useRole(context),
+    ]);
+    useIsomorphicLayoutEffect(() => {
+        refs.setReference(anchorEl);
+        if (!refs.reference.current || !refs.floating.current || !internalOpen)
+            return;
+        const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update);
+        return () => cleanup();
+    }, [refs.floating, refs.reference, update, anchorEl, refs, internalOpen]);
+    const floatingRef = useMergeRefs([refs.setFloating, ref]);
+    return (jsx(Fragment, { children: internalOpen && (jsx(FloatingFocusManager, { context: context, guards: false, modal: false, children: jsx(Container, { children: jsx("ul", { role: 'menu', "aria-hidden": !internalOpen, "data-placement": flPlacement, ref: floatingRef, style: floatingStyles, ...getFloatingProps({
+                        ref: floatingRef,
+                        tabIndex: undefined,
+                    }), className: clsx(classes.dropdown, classes[size], className), ...rest, children: children }) }) })) }));
+});
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+export { DropdownMenuContent };

package/dist/esm/components/DropdownMenu/DropdownMenuGroup/DropdownMenuGroup.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useId } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { DropdownMenuContext } from '../DropdownMenu.js';
+import classes from './DropdownMenuGroup.module.css.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+
+const DropdownMenuGroup = forwardRef(({ children, heading, className, style, ...rest }, ref) => {
+    const { size } = useContext(DropdownMenuContext);
+    const headingId = useId();
+    return (jsx("li", { className: className, style: style, children: jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: classes.section, ...rest, children: [heading && (jsx(Paragraph, { asChild: true, size: size, children: jsx("h2", { id: headingId, className: clsx(classes.heading), children: heading }) })), children] }) }));
+});
+DropdownMenuGroup.displayName = 'DropdownMenuGroup';
+
+export { DropdownMenuGroup };

package/dist/esm/components/DropdownMenu/DropdownMenuGroup/DropdownMenuGroup.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"section":"fds-dropdownmenugroup-section-480ce10","heading":"fds-dropdownmenugroup-heading-480ce10"};
+
+export { classes as default };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { DropdownMenuContext } from '../DropdownMenu.js';
+import classes from './DropdownMenuItem.module.css.js';
+import { Button } from '../../Button/Button.js';
+
+const DropdownMenuItem = forwardRef(({ children, className, style, ...rest }, ref) => {
+    const menu = useContext(DropdownMenuContext);
+    return (jsx("li", { className: className, style: style, children: jsx(Button, { ref: ref, variant: 'tertiary', size: menu.size, fullWidth: true, className: classes.item, role: 'menuitem', ...rest, children: children }) }));
+});
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+export { DropdownMenuItem };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"item":"fds-dropdownmenuitem-item-bfb771d0"};
+
+export { classes as default };

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

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

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

@@ -0,0 +1,18 @@
+'use client';
+import { DropdownMenu as DropdownMenu$1 } from './DropdownMenu.js';
+import { DropdownMenuGroup } from './DropdownMenuGroup/DropdownMenuGroup.js';
+import { DropdownMenuItem } from './DropdownMenuItem/DropdownMenuItem.js';
+import { DropdownMenuTrigger } from './DropdownMenuTrigger.js';
+import { DropdownMenuContent } from './DropdownMenuContent.js';
+
+const DropdownMenu = DropdownMenu$1;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Group = DropdownMenuGroup;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content.displayName = 'DropdownMenu.Content';
+DropdownMenu.Group.displayName = 'DropdownMenu.Group';
+DropdownMenu.Item.displayName = 'DropdownMenu.Item';
+DropdownMenu.Trigger.displayName = 'DropdownMenu.Trigger';
+
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"errorSummary":"fds-errorsummary-errorSummary-3a4ecaaf"};
+
+export { classes as default };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useEffect } from 'react';
+import { List } from '../List/index.js';
+import { ErrorSummaryContext } from './ErrorSummaryRoot.js';
+
+const ErrorSummaryHeading = ({ id, ...rest }) => {
+    const { headingId, setHeadingId } = useContext(ErrorSummaryContext);
+    useEffect(() => {
+        if (id && headingId !== id) {
+            setHeadingId(id);
+        }
+    }, [headingId, id, setHeadingId]);
+    return (jsx(List.Heading, { ...rest, id: headingId }));
+};
+ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
+
+export { ErrorSummaryHeading };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { List } from '../List/index.js';
+import { Link } from '../Link/Link.js';
+
+const ErrorSummaryItem = ({ href, asChild, children, ...rest }) => {
+    return (jsx(List.Item, { ...rest, children: jsx(Link, { href: href, asChild: asChild, children: children }) }));
+};
+ErrorSummaryItem.displayName = 'ErrorSummaryItem';
+
+export { ErrorSummaryItem };

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

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

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useId, useState } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { List } from '../List/index.js';
+import classes from './ErrorSummary.module.css.js';
+
+const ErrorSummaryContext = createContext({
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ErrorSummaryRoot = forwardRef(({ size, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', children, ...rest }, ref) => {
+    const randomId = useId();
+    const [headingId, setHeadingId] = useState(randomId);
+    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx($5e63c961fc1ce211$export$8c6ed5c666ac1360, { className: clsx(classes.errorSummary), ref: ref, role: role, "aria-live": ariaLive, "aria-relevant": ariaRelevant, "aria-labelledby": headingId, ...rest, children: jsx(List.Root, { size: size, children: children }) }) }));
+});
+ErrorSummaryRoot.displayName = 'ErrorSummaryRoot';
+
+export { ErrorSummaryContext, ErrorSummaryRoot };

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

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

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

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

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

@@ -0,0 +1,4 @@
+'use client';
+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"};
+
+export { classes as default };

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from '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 (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: jsx("path", { clipRule: 'evenodd', d: d, fill: 'currentColor', fillRule: 'evenodd' }) }));
+};
+HelpTextIcon.displayName = 'HelpText.Icon';
+
+export { HelpTextIcon };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Link.module.css.js';
+
+const Link = forwardRef(({ as = 'a', asChild, children, className, inverted = false, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { className: clsx(classes.link, inverted && classes.inverted, className), ref: ref, ...rest, children: children }));
+});
+Link.displayName = 'Link';
+
+export { Link };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"link":"fds-link-link-74840a2f","inverted":"fds-link-inverted-74840a2f"};
+
+export { classes as default };

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

@@ -0,0 +1,4 @@
+'use client';
+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"};
+
+export { classes as default };

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

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

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './List.module.css.js';
+
+const ListItem = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'li';
+    return (jsx(Component, { className: clsx(classes.listItem, className), ...rest, ref: ref }));
+});
+ListItem.displayName = 'ListItem';
+
+export { ListItem };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { createContext, forwardRef, useState } from 'react';
+
+const ListContext = createContext({
+    size: 'medium',
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ListRoot = forwardRef(({ asChild, size = 'medium', ...rest }, ref) => {
+    const [headingId, setHeadingId] = useState();
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(ListContext.Provider, { value: { size, headingId, setHeadingId }, children: jsx(Component, { ref: ref, ...rest }) }));
+});
+ListRoot.displayName = 'ListRoot';
+
+export { ListContext, ListRoot };

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { ListContext } from './ListRoot.js';
+import classes from './List.module.css.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+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(classes[size], rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+});
+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(classes[size], rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+});
+Ordered.displayName = 'ListOrdered';
+
+export { Ordered, Unordered };

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

@@ -0,0 +1,19 @@
+'use client';
+import { ListRoot } from './ListRoot.js';
+import { ListItem } from './ListItem.js';
+import { ListHeading } from './ListHeading.js';
+import { Ordered, Unordered } 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';
+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 };

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

@@ -0,0 +1,4 @@
+'use client';
+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"};
+
+export { classes as default };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './ModalContent.module.css.js';
+
+const ModalContent = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { ref: ref, className: clsx(classes.modalContent, className), ...rest }));
+});
+ModalContent.displayName = 'ModalContent';
+
+export { ModalContent };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"modalContent":"fds-modalcontent-modalContent-37ec52f1"};
+
+export { classes as default };

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

@@ -0,0 +1,72 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useFloating, useMergeRefs, FloatingFocusManager } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { forwardRef, useRef, useContext, useEffect } from 'react';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Modal.module.css.js';
+import { useScrollLock } from './useScrollLock.js';
+import { useModalState } from './useModalState.js';
+import { ModalContext } from './ModalRoot.js';
+
+const ModalDialog = forwardRef(({ onInteractOutside, onClose, onBeforeClose, asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'dialog';
+    // This local ref is used to make sure the modal works without a ModalRoot
+    const modalDialogRef = useRef(null);
+    const { context } = useFloating();
+    const modal = useContext(ModalContext);
+    const open = useModalState(modalDialogRef);
+    const { modalRef, setOpen } = modal;
+    modal.closeModal = () => {
+        if (onBeforeClose && onBeforeClose() === false)
+            return;
+        modalDialogRef.current?.close();
+    };
+    const mergedRefs = useMergeRefs([modalRef, ref, modalDialogRef]);
+    useScrollLock(modalDialogRef, classes.lockScroll);
+    useEffect(() => {
+        setOpen(open);
+    }, [open, setOpen]);
+    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]);
+    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 (jsx(Component, { ref: mergedRefs, className: clsx(classes.modal, className), onCancel: onCancel, ...rest, children: open && (jsx(FloatingFocusManager, { context: context, children: jsx(Fragment, { children: children }) })) }));
+});
+ModalDialog.displayName = 'ModalDialog';
+
+export { ModalDialog };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './ModalFooter.module.css.js';
+
+const ModalFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'footer';
+    return (jsx(Component, { ref: ref, className: clsx(classes.modalFooter, className), ...rest }));
+});
+ModalFooter.displayName = 'ModalFooter';
+
+export { ModalFooter };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"modalFooter":"fds-modalfooter-modalFooter-d697f79f"};
+
+export { classes as default };

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

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

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"modalHeader":"fds-modalheader-modalHeader-4ace023b","noCloseButton":"fds-modalheader-noCloseButton-4ace023b"};
+
+export { classes as default };