@digdir/designsystemet-react 0.59.1-alpha.1 → 0.60.0

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

@@ -1,15 +1,14 @@
 'use client';
 import { jsx, jsxs } 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 classes from '../Chip.module.css.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { ChipGroupContext } from '../Group/Group.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const RemovableChip = forwardRef(({ children, size = 'medium', className, ...rest }, ref) => {
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { type: 'button', ref: ref, className: clsx(classes.chipButton, `fds-focus`, classes[group?.size || size], classes.removable, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [jsx("span", { children: children }), jsx("span", { className: classes.xMark, "aria-hidden": true, children: jsx(XMarkIcon, { className: classes.icon }) })] }) }) }));
+    return (jsx("button", { type: 'button', ref: ref, className: clsx(`fds-focus`, `fds-chip--button`, `fds-chip--removable`, `fds-chip--${group?.size || size}`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `fds-chip__label`, children: [jsx("span", { children: children }), jsx("span", { className: `fds-chip__x-mark`, "aria-hidden": true, children: jsx(XMarkIcon, { className: `fds-chip__icon` }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

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

@@ -2,15 +2,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { CheckmarkIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import classes from '../Chip.module.css.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const ToggleChip = forwardRef(({ children, size = 'medium', selected = false, checkmark = true, className, ...rest }, ref) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(classes.chipButton, `fds-focus`, classes[group?.size || size], { [classes.spacing]: shouldDisplayCheckmark }, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: classes.checkmarkIcon, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
+    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(`fds-focus`, `fds-chip--button`, `fds-chip--${group?.size || size}`, shouldDisplayCheckmark && `fds-chip--spacing`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `fds-chip__label`, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: `fds-chip__checkmark-icon`, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
 });
 ToggleChip.displayName = 'ChipToggle';
 

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

@@ -2,10 +2,9 @@
 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 }));
+    return (jsx("hr", { className: clsx('fds-divider', `fds-divider--${color}`, className), ref: ref, ...rest }));
 });
 Divider.displayName = 'Divider';
 Divider.displayName = 'Divider';

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

@@ -3,8 +3,7 @@ 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 '../../packages/react/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 { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { DropdownMenuContext } from './DropdownMenu.js';
 import { autoUpdate, shift } from '../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset } from '../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js';
@@ -48,7 +47,7 @@ const DropdownMenuContent = forwardRef(({ className, children, ...rest }, 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 }) }) })) }));
+                    }), className: clsx('fds-dropdownmenu', `fds-dropdownmenu${size}`, className), ...rest, children: children }) }) })) }));
 });
 DropdownMenuContent.displayName = 'DropdownMenuContent';
 

package/dist/esm/components/DropdownMenu/{DropdownMenuGroup/DropdownMenuGroup.js → DropdownMenuGroup.js}

@@ -1,15 +1,13 @@
 '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';
+import { DropdownMenuContext } from './DropdownMenu.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] }) }));
+    return (jsx("li", { className: className, style: style, children: jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: 'fds-dropdownmenu__section', ...rest, children: [heading && (jsx(Paragraph, { asChild: true, size: size, children: jsx("h2", { id: headingId, className: 'fds-dropdownmenu__heading', children: heading }) })), children] }) }));
 });
 DropdownMenuGroup.displayName = 'DropdownMenuGroup';
 

package/dist/esm/components/DropdownMenu/{DropdownMenuItem/DropdownMenuItem.js → DropdownMenuItem.js}

@@ -1,13 +1,12 @@
 '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';
+import { DropdownMenuContext } from './DropdownMenu.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 }) }));
+    return (jsx("li", { className: className, style: style, children: jsx(Button, { ref: ref, variant: 'tertiary', size: menu.size, fullWidth: true, className: 'fds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
 });
 DropdownMenuItem.displayName = 'DropdownMenuItem';
 

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

@@ -1,7 +1,7 @@
 'use client';
 import { DropdownMenu as DropdownMenu$1 } from './DropdownMenu.js';
-import { DropdownMenuGroup } from './DropdownMenuGroup/DropdownMenuGroup.js';
-import { DropdownMenuItem } from './DropdownMenuItem/DropdownMenuItem.js';
+import { DropdownMenuGroup } from './DropdownMenuGroup.js';
+import { DropdownMenuItem } from './DropdownMenuItem.js';
 import { DropdownMenuTrigger } from './DropdownMenuTrigger.js';
 import { DropdownMenuContent } from './DropdownMenuContent.js';
 

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

@@ -1,10 +1,8 @@
 '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',
@@ -13,7 +11,7 @@ const ErrorSummaryContext = createContext({
 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 }) }) }));
+    return (jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsx($5e63c961fc1ce211$export$8c6ed5c666ac1360, { className: 'fds-error-summary', 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';
 

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

@@ -3,12 +3,11 @@ 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 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, `fds-focus`, 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: `fds-sr-only`, children: title })] }) }), jsx(Popover.Content, { className: classes.helpTextContent, children: children })] }) }));
+    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(`fds-helptext--${size}`, 'fds-helptext__button', `fds-focus`, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsx(HelpTextIcon, { filled: true, className: clsx(`fds-helptext__icon`, `fds-helptext__icon--filled`, className), openState: open }), jsx(HelpTextIcon, { className: clsx(`fds-helptext__icon`, className), openState: open }), jsx("span", { className: `fds-sr-only`, children: title })] }) }), jsx(Popover.Content, { className: 'fds-helptext__content', children: children })] }) }));
 };
 HelpText.displayName = 'HelpText';
 

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

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

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

@@ -3,11 +3,10 @@ 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 }));
+    return (jsx(Component, { className: clsx('fds-list__item', className), ...rest, ref: ref }));
 });
 ListItem.displayName = 'ListItem';
 

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

@@ -4,19 +4,18 @@ 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 }) }));
+    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`fds-list`, `fds-list--${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 }) }));
+    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`fds-list`, `fds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
 });
 Ordered.displayName = 'ListOrdered';
 

package/dist/esm/components/Modal/{ModalContent/ModaContent.js → ModaContent.js}

@@ -1,13 +1,12 @@
 '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';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
 const ModalContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { ref: ref, className: clsx(classes.modalContent, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx('fds-modal__content', className), ...rest }));
 });
 ModalContent.displayName = 'ModalContent';
 

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

@@ -3,8 +3,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useFloating, useMergeRefs, FloatingFocusManager } from '../../packages/react/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 { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { useScrollLock } from './useScrollLock.js';
 import { useModalState } from './useModalState.js';
 import { ModalContext } from './ModalRoot.js';
@@ -23,7 +22,7 @@ const ModalDialog = forwardRef(({ onInteractOutside, onClose, onBeforeClose, asC
         modalDialogRef.current?.close();
     };
     const mergedRefs = useMergeRefs([modalRef, ref, modalDialogRef]);
-    useScrollLock(modalDialogRef, classes.lockScroll);
+    useScrollLock(modalDialogRef, 'fds-modal--lock-scroll');
     useEffect(() => {
         setOpen(open);
     }, [open, setOpen]);
@@ -65,7 +64,7 @@ const ModalDialog = forwardRef(({ onInteractOutside, onClose, onBeforeClose, asC
         }
         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 }) })) }));
+    return (jsx(Component, { ref: mergedRefs, className: clsx('fds-modal', className), onCancel: onCancel, ...rest, children: open && (jsx(FloatingFocusManager, { context: context, children: jsx(Fragment, { children: children }) })) }));
 });
 ModalDialog.displayName = 'ModalDialog';
 

package/dist/esm/components/Modal/{ModalFooter/ModalFooter.js → ModalFooter.js}

@@ -1,13 +1,12 @@
 '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';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
 const ModalFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'footer';
-    return (jsx(Component, { ref: ref, className: clsx(classes.modalFooter, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx('fds-modal__footer', className), ...rest }));
 });
 ModalFooter.displayName = 'ModalFooter';
 

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/lite.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 { 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('fds-modal__header', !closeButton && 'fds-modal__header--no-button', 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, className: 'fds-modal__header__button', children: jsx(XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
+});
+ModalHeader.displayName = 'ModalHeader';
+
+export { ModalHeader };

package/dist/esm/components/Modal/{ModalTrigger/ModalTrigger.js → ModalTrigger.js}

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { ModalContext } from '../ModalRoot.js';
-import { Button } from '../../Button/Button.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { ModalContext } from './ModalRoot.js';
+import { Button } from '../Button/Button.js';
 
 const ModalTrigger = forwardRef(({ asChild, ...rest }, ref) => {
     const { modalRef, open } = useContext(ModalContext);

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

@@ -1,10 +1,10 @@
 'use client';
 import { ModalRoot } from './ModalRoot.js';
-import { ModalContent } from './ModalContent/ModaContent.js';
+import { ModalContent } from './ModaContent.js';
 import { ModalDialog } from './ModalDialog.js';
-import { ModalFooter } from './ModalFooter/ModalFooter.js';
-import { ModalHeader } from './ModalHeader/ModalHeader.js';
-import { ModalTrigger } from './ModalTrigger/ModalTrigger.js';
+import { ModalFooter } from './ModalFooter.js';
+import { ModalHeader } from './ModalHeader.js';
+import { ModalTrigger } from './ModalTrigger.js';
 
 const Modal = ModalDialog;
 Modal.Root = ModalRoot;

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

@@ -1,14 +1,13 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 import { PaginationRoot } from './PaginationRoot.js';
 import { PaginationContent } from './PaginationContent.js';
 import { PaginationItem } from './PaginationItem.js';
 import { PaginationButton } from './PaginationButton.js';
 import { PaginationEllipsis } from './PaginationEllipsis.js';
-import classes from './Pagination.module.css.js';
 import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
 import { usePagination } from './usePagination.js';
 
@@ -23,15 +22,13 @@ const Pagination = forwardRef(({ nextLabel = '', previousLabel = '', size = 'med
         currentPage,
         totalPages,
     });
-    return (jsx(PaginationRoot, { ref: ref, "aria-label": 'Pagination', size: size, compact: compact, ...rest, children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsxs(PaginationPrevious, { className: clsx({ [classes.hidden]: !showPreviousPage }), onClick: () => {
+    return (jsx(PaginationRoot, { ref: ref, "aria-label": 'Pagination', size: size, compact: compact, ...rest, children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsxs(PaginationPrevious, { className: clsx(!showPreviousPage && 'fds-pagination--hidden'), onClick: () => {
                             onChange(currentPage - 1);
                         }, "aria-label": previousLabel, children: [jsx(ChevronLeftIcon, { "aria-hidden": true, fontSize: iconSize[size] }), !hideLabels && previousLabel] }) }), pages.map((page, i) => (jsx(PaginationItem, { children: page === 'ellipsis' ? (jsx(PaginationEllipsis, {})) : (jsx(PaginationButton, { "aria-current": currentPage === page, isActive: currentPage === page, "aria-label": itemLabel(page), onClick: () => {
                             onChange(page);
                         }, children: page })) }, `${page}${i}`))), jsx(PaginationItem, { children: jsxs(PaginationNext, { "aria-label": nextLabel, onClick: () => {
                             onChange(currentPage + 1);
-                        }, className: clsx({
-                            [classes.hidden]: !showNextPage,
-                        }), children: [!hideLabels && nextLabel, jsx(ChevronRightIcon, { "aria-hidden": true, fontSize: iconSize[size] })] }) })] }) }));
+                        }, className: clsx(!showNextPage && 'fds-pagination--hidden'), children: [!hideLabels && nextLabel, jsx(ChevronRightIcon, { "aria-hidden": true, fontSize: iconSize[size] })] }) })] }) }));
 });
 Pagination.displayName = 'Pagination';
 

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

@@ -2,14 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { forwardRef, useContext } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Pagination.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { PaginationContext } from './PaginationRoot.js';
 
 const PaginationContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'ul';
     const { size } = useContext(PaginationContext);
-    return (jsx(Component, { ref: ref, className: clsx(classes.pagination, classes[size], className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx('fds-pagination', `fds-pagination--${size}`, className), ...rest }));
 });
 
 export { PaginationContent };

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

@@ -1,14 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Pagination.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { PaginationContext } from './PaginationRoot.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const PaginationEllipsis = forwardRef(({ className, ...rest }, ref) => {
     const { size } = useContext(PaginationContext);
-    return (jsx(Paragraph, { ref: ref, className: clsx(classes.ellipsis, className), size: size, ...rest, children: "\u2026" }));
+    return (jsx(Paragraph, { ref: ref, className: clsx('fds-pagination__ellipsis', className), size: size, ...rest, children: "\u2026" }));
 });
 var PaginationEllipsis$1 = PaginationEllipsis;
 

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

@@ -2,14 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { forwardRef, useContext } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { PaginationContext } from './PaginationRoot.js';
-import classes from './Pagination.module.css.js';
 
 const PaginationItem = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'li';
     const { size, compact } = useContext(PaginationContext);
-    return (jsx(Component, { ref: ref, className: clsx(classes.listitem, classes[size], compact && classes.compact, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx('fds-pagination__item', `fds-pagination--${size}`, compact && 'fds-pagination--compact', className), ...rest }));
 });
 var PaginationItem$1 = PaginationItem;
 

package/dist/esm/components/Popover/PopoverContent.js

@@ -5,7 +5,6 @@ import { forwardRef, useContext, useRef, useEffect, useMemo } from 'react';
 import { useFloating, useInteractions, useFocus, useClick, useDismiss, useRole, useMergeRefs, FloatingPortal } from '../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { PopoverContext } from './Popover.js';
-import classes from './Popover.module.css.js';
 import { autoUpdate, flip, shift } from '../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset } from '../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js';
 import { arrow } from '../../packages/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
@@ -71,10 +70,10 @@ const PopoverContent = forwardRef(({ className, children, style, id, ...rest },
     const arrowPlacement = useMemo(() => {
         return ARROW_PLACEMENT[flPlacement.split('-')[0]];
     }, [flPlacement]);
-    return (jsx(Fragment, { children: internalOpen && (jsx(Container, { children: jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { ref: floatingEl, className: clsx(classes.popover, classes[variant], classes[size], className), "data-placement": flPlacement, ...getFloatingProps({
+    return (jsx(Fragment, { children: internalOpen && (jsx(Container, { children: jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { ref: floatingEl, className: clsx('fds-popover', `fds-popover--${variant}`, `fds-popover--${size}`, className), "data-placement": flPlacement, ...getFloatingProps({
                         ref: floatingRef,
                         tabIndex: undefined,
-                    }), style: { ...floatingStyles, ...style }, id: popoverId, "aria-labelledby": triggerId, ...rest, children: [children, jsx("div", { ref: arrowRef, className: clsx(classes.arrow, classes[arrowPlacement]), style: {
+                    }), style: { ...floatingStyles, ...style }, id: popoverId, "aria-labelledby": triggerId, ...rest, children: [children, jsx("div", { ref: arrowRef, className: clsx('fds-popover__arrow', `fds-popover__arrow--${arrowPlacement}`), style: {
                                 height: ARROW_HEIGHT,
                                 width: ARROW_HEIGHT,
                                 ...(arrowX != null ? { left: arrowX } : {}),

package/dist/esm/components/Skeleton/Circle/Circle.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from '../Skeleton.module.css.js';
 import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of circular shape */
 const Circle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation(classes['opacity-fade']);
-    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.circle, { [classes.hasChildren]: Boolean(children) }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    const ref = useSynchronizedAnimation('fds-skeleton-opacity-fade');
+    return (jsx("div", { ref: ref, className: clsx('fds-skeleton', 'fds-skeleton--circle', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
 };
 Circle.displayName = 'SkeletonCircle';
 

package/dist/esm/components/Skeleton/Rectangle/Rectangle.js

@@ -1,15 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from '../Skeleton.module.css.js';
 import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of rectangle shape */
 const Rectangle = ({ width, height, className, children, style, ...rest }) => {
-    const ref = useSynchronizedAnimation(classes['opacity-fade']);
-    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.rectangle, {
-            [classes.hasChildren]: Boolean(children),
-        }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    const ref = useSynchronizedAnimation('fds-skeleton-opacity-fade');
+    return (jsx("div", { ref: ref, className: clsx('fds-skeleton', 'fds-skeleton--rectangle', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
 };
 Rectangle.displayName = 'SkeletonRectangle';
 

package/dist/esm/components/Skeleton/Text/Text.js

@@ -1,15 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from '../Skeleton.module.css.js';
 import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of text */
 const Text = ({ width, height, className, style, children, ...rest }) => {
-    const ref = useSynchronizedAnimation(classes['opacity-fade']);
-    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.text, {
-            [classes.hasChildren]: Boolean(children),
-        }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    const ref = useSynchronizedAnimation('fds-skeleton-opacity-fade');
+    return (jsx("div", { ref: ref, className: clsx('fds-skeleton', 'fds-skeleton--text', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
 };
 Text.displayName = 'SkeletonText';
 

package/dist/esm/components/Spinner/Spinner.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Spinner.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { useSynchronizedAnimation } from '../../hooks/useSynchronizedAnimation.js';
 
 const sizeMap = {
@@ -14,9 +13,9 @@ const sizeMap = {
 };
 /**  Spinner component used for indicating busy or indeterminate loading */
 const Spinner = ({ title, size = 'medium', variant = 'default', className, style, ...rest }) => {
-    const svgRef = useSynchronizedAnimation(classes['rotate-animation']);
-    const strokeRef = useSynchronizedAnimation(classes['stroke-animation']);
-    return (jsxs("svg", { className: clsx(classes.spinner, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx(classes.background, variant === 'inverted' && classes.invertedBackground), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(classes.spinnerCircle, classes[variant]), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+    const svgRef = useSynchronizedAnimation('fds-spinner-rotate-animation');
+    const strokeRef = useSynchronizedAnimation('fds-spinner-stroke-animation');
+    return (jsxs("svg", { className: clsx('fds-spinner', `fds-spinner--${variant}`, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx('fds-spinner__background', variant === 'inverted' && 'fds-spinner__background--inverted'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(`fds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
 };
 Spinner.displayName = 'Spinner';
 

package/dist/esm/components/Table/Table.js

@@ -1,12 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const Table = React.forwardRef(({ zebra = false, size = 'medium', stickyHeader = false, border = false, className, children, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx(classes[size], zebra && classes.zebra, stickyHeader && classes.stickyHeader, border && classes.border, classes.table, className), ...rest, children: children }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx('fds-table', `fds-table--${size}`, zebra && 'fds-table--zebra', stickyHeader && 'fds-table--sticky-header', border && 'fds-table--border', className), ...rest, children: children }) }));
 });
 Table.displayName = 'Table';
 

package/dist/esm/components/Table/TableCell.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
 const TableCell = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("td", { ref: ref, className: clsx(classes.cell, className), ...rest, children: children }));
+    return (jsx("td", { ref: ref, className: clsx('fds-table__cell', className), ...rest, children: children }));
 });
 TableCell.displayName = 'TableCell';
 

package/dist/esm/components/Table/TableHead.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
 const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("thead", { ref: ref, className: clsx(classes.head, className), ...rest, children: children }));
+    return (jsx("thead", { ref: ref, className: clsx('fds-table__head', className), ...rest, children: children }));
 });
 TableHead.displayName = 'TableHead';
 

package/dist/esm/components/Table/TableHeaderCell.js

@@ -2,8 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
 import * as React from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Table.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
 const SORT_ICON = {
     ascending: jsx(ChevronUpIcon, {}),
@@ -11,7 +10,7 @@ const SORT_ICON = {
 };
 const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
     const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
-    return (jsxs("th", { className: clsx(sortable && classes.sortable, sort && classes.sorted, classes.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `fds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+    return (jsxs("th", { className: clsx('fds-table__header__cell', sortable && 'fds-table__header__cell--sortable', sort && `fds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `fds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';