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

package/dist/cjs/utilities/getSize.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+function getSize(size) {
+    switch (size) {
+        case 'xxxsmall':
+            return '3xs';
+        case 'xxsmall':
+            return '2xs';
+        case 'xsmall':
+            return 'xs';
+        case 'small':
+            return 'sm';
+        case 'medium':
+            return 'md';
+        case 'large':
+            return 'lg';
+        case 'xlarge':
+            return 'xl';
+        case 'xxlarge':
+            return '2xl';
+        case 'xxxlarge':
+            return '3xl';
+        case 'xxxxlarge':
+            return '4xl';
+        default:
+            return size;
+    }
+}
+
+exports.getSize = getSize;

package/dist/esm/components/Box/Box.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 './Box.module.css.js';
 
-const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, as = 'div', className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(shadow && classes[shadow + 'Shadow'], borderRadius && classes[borderRadius + 'BorderRadius'], borderColor && classes[borderColor + 'BorderColor'], classes[background + 'Background'], className), ...rest, children: children }));
+const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { ref: ref, className: clsx(shadow && `fds-box--${shadow}-shadow`, borderColor && `fds-box--${borderColor}-border-color`, borderRadius && `fds-box--${borderRadius}-border-radius`, `fds-box--${background}-background`, className), ...rest, children: children }));
 });
 Box.displayName = 'Box';
 

package/dist/esm/components/Button/Button.js

@@ -3,12 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 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 { getSize } from '../../utilities/getSize.js';
 
 /**
  * Button used for interaction
  */
-const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+const Button = forwardRef(({ children, color = 'first', variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
+    const size = getSize(rest.size || 'md');
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
     return (jsx(Component, { ref: ref, type: type, className: clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
 });
 Button.displayName = 'Button';

package/dist/esm/components/Card/Card.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 './Card.module.css.js';
 
-const Card = forwardRef(({ color = 'neutral', as = 'div', isLink = false, asChild = false, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.card, classes[color], isLink && classes.linkCard, isLink && `fds-focus`, className), ...rest }));
+const Card = forwardRef(({ color = 'neutral', isLink = false, asChild = false, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { ref: ref, className: clsx(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

package/dist/esm/components/Card/CardContent.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 './Card.module.css.js';
 
 const CardContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.content, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__content`, className), ref: ref, ...rest }));
 });
 CardContent.displayName = 'CardContent';
 

package/dist/esm/components/Card/CardFooter.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 './Card.module.css.js';
 
 const CardFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.footer, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__footer`, className), ref: ref, ...rest }));
 });
 CardFooter.displayName = 'CardFooter';
 

package/dist/esm/components/Card/CardHeader.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 './Card.module.css.js';
 
 const CardHeader = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.header, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__header`, className), ref: ref, ...rest }));
 });
 CardHeader.displayName = 'CardHeader';
 

package/dist/esm/components/Card/CardMedia.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 './Card.module.css.js';
 
 const CardMedia = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.media, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__media`, className), ref: ref, ...rest }));
 });
 CardMedia.displayName = 'CardMedia';
 

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

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, forwardRef, Children, isValidElement } from 'react';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from '../Chip.module.css.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 
 const ChipGroupContext = createContext(null);
-const Group = forwardRef(({ children, size = 'medium', className, ...rest }, ref) => (jsx("ul", { ref: ref, className: clsx(classes.groupContainer, classes[size], className), ...rest, children: jsx(ChipGroupContext.Provider, { value: { size }, children: Children.toArray(children).map((child, index) => isValidElement(child) ? jsx("li", { children: child }, `chip-${index}`) : null) }) })));
+const Group = forwardRef(({ children, size = 'medium', className, ...rest }, ref) => (jsx("ul", { ref: ref, className: clsx(`fds-chip--group-container`, `fds-chip--${size}`, className), ...rest, children: jsx(ChipGroupContext.Provider, { value: { size }, children: Children.toArray(children).map((child, index) => isValidElement(child) ? jsx("li", { children: child }, `chip-${index}`) : null) }) })));
 Group.displayName = 'ChipGroup';
 
 export { ChipGroupContext, Group };

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,11 +3,10 @@ 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';
+import { offset } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
 
 const GAP = 4;
@@ -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;