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

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2023 Digitaliseringsdirektoratet (Digdir)
+Copyright 2024 Digitaliseringsdirektoratet (Digdir)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/cjs/components/Accordion/Accordion.js

@@ -4,11 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var Accordion_module = require('./Accordion.module.css.js');
 
-const Accordion = React.forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsxRuntime.jsx("div", { className: clsx.clsx(Accordion_module.accordion, Accordion_module[color], {
-        [Accordion_module.border]: border,
-    }, className), ref: ref, ...rest })));
+const Accordion = React.forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsxRuntime.jsx("div", { className: clsx.clsx('fds-accordion', border && 'fds-accordion--border', color && `fds-accordion--${color}`, className), ref: ref, ...rest })));
 Accordion.displayName = 'Accordion';
 
 exports.Accordion = Accordion;

package/dist/cjs/components/Accordion/AccordionContent/AccordionContent.js

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var React = require('react');
-var Accordion_module = require('../Accordion.module.css.js');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 var AnimateHeight = require('../../../utilities/AnimateHeight/AnimateHeight.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
@@ -15,7 +14,7 @@ const AccordionContent = React.forwardRef(({ children, className, ...rest }, ref
         console.error('<Accordion.Content> has to be used within an <Accordion.Item>');
         return null;
     }
-    return (jsxRuntime.jsx(AnimateHeight.AnimateHeight, { id: context.contentId, open: context.open, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Accordion_module.content, className), ...rest, children: children }) }) }));
+    return (jsxRuntime.jsx(AnimateHeight.AnimateHeight, { id: context.contentId, open: context.open, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-accordion__content', className), ...rest, children: children }) }) }));
 });
 AccordionContent.displayName = 'AccordionContent';
 

package/dist/cjs/components/Accordion/AccordionHeader/AccordionHeader.js

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var React = require('react');
-var Accordion_module = require('../Accordion.module.css.js');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 var Heading = require('../../Typography/Heading/Heading.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
@@ -20,7 +19,7 @@ const AccordionHeader = React.forwardRef(({ level = 1, children, className, onHe
         context.toggleOpen();
         onHeaderClick && onHeaderClick(e);
     };
-    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xsmall', level: level, className: clsx.clsx(Accordion_module.header, className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: clsx.clsx(Accordion_module.accordionButton, `fds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsxRuntime.jsx(akselIcons.ChevronDownIcon, { "aria-hidden": true, className: Accordion_module.expandIcon, fontSize: '1.5rem' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xsmall', level: level, className: clsx.clsx('fds-accordion__header', className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: clsx.clsx('fds-accordion__button', `fds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsxRuntime.jsx(akselIcons.ChevronDownIcon, { "aria-hidden": true, className: 'fds-accordion__expand-icon', fontSize: '1.5rem' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
 });
 AccordionHeader.displayName = 'AccordionHeader';
 

package/dist/cjs/components/Accordion/AccordionItem/AccordionItem.js

@@ -4,15 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var React = require('react');
-var Accordion_module = require('../Accordion.module.css.js');
 
 const AccordionItemContext = React.createContext(null);
 const AccordionItem = React.forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
     const contentId = React.useId();
-    return (jsxRuntime.jsx("div", { className: clsx.clsx(Accordion_module.item, {
-            [Accordion_module.open]: open ?? internalOpen,
-        }, className), ref: ref, ...rest, children: jsxRuntime.jsx(AccordionItemContext.Provider, { value: {
+    return (jsxRuntime.jsx("div", { className: clsx.clsx('fds-accordion__item', (open ?? internalOpen) && 'fds-accordion__item--open', className), ref: ref, ...rest, children: jsxRuntime.jsx(AccordionItemContext.Provider, { value: {
                 open: open ?? internalOpen,
                 toggleOpen: () => {
                     if (open === undefined) {

package/dist/cjs/components/Box/Box.js

@@ -3,13 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Box_module = require('./Box.module.css.js');
 
-const Box = React.forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, as = 'div', className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : as;
-    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(shadow && Box_module[shadow + 'Shadow'], borderRadius && Box_module[borderRadius + 'BorderRadius'], borderColor && Box_module[borderColor + 'BorderColor'], Box_module[background + 'Background'], className), ...rest, children: children }));
+const Box = React.forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.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/cjs/components/Button/Button.js

@@ -3,15 +3,15 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 
 /**
  * Button used for interaction
  */
-const Button = React.forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : as;
-    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: clsx.clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, { 'fds-btn--full-width': fullWidth }, { 'fds-btn--icon-only': icon }, className), ...rest, children: children }));
+const Button = React.forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'button';
+    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: lite.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/cjs/components/Card/Card.js

@@ -3,13 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Card_module = require('./Card.module.css.js');
 
-const Card = React.forwardRef(({ color = 'neutral', as = 'div', isLink = false, asChild = false, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : as;
-    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Card_module.card, Card_module[color], isLink && Card_module.linkCard, isLink && `fds-focus`, className), ...rest }));
+const Card = React.forwardRef(({ color = 'neutral', isLink = false, asChild = false, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

package/dist/cjs/components/Card/CardContent.js

@@ -3,13 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Card_module = require('./Card.module.css.js');
 
 const CardContent = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: clsx.clsx(Card_module.content, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__content`, className), ref: ref, ...rest }));
 });
 CardContent.displayName = 'CardContent';
 

package/dist/cjs/components/Card/CardFooter.js

@@ -3,13 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Card_module = require('./Card.module.css.js');
 
 const CardFooter = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: clsx.clsx(Card_module.footer, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__footer`, className), ref: ref, ...rest }));
 });
 CardFooter.displayName = 'CardFooter';
 

package/dist/cjs/components/Card/CardHeader.js

@@ -3,13 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Card_module = require('./Card.module.css.js');
 
 const CardHeader = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: clsx.clsx(Card_module.header, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__header`, className), ref: ref, ...rest }));
 });
 CardHeader.displayName = 'CardHeader';
 

package/dist/cjs/components/Card/CardMedia.js

@@ -3,13 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Card_module = require('./Card.module.css.js');
 
 const CardMedia = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: clsx.clsx(Card_module.media, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__media`, className), ref: ref, ...rest }));
 });
 CardMedia.displayName = 'CardMedia';
 

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

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

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

@@ -3,15 +3,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
-var Chip_module = require('../Chip.module.css.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var Group = require('../Group/Group.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
 const RemovableChip = React.forwardRef(({ children, size = 'medium', className, ...rest }, ref) => {
     const group = React.useContext(Group.ChipGroupContext);
-    return (jsxRuntime.jsx("button", { type: 'button', ref: ref, className: clsx.clsx(Chip_module.chipButton, `fds-focus`, Chip_module[group?.size || size], Chip_module.removable, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxRuntime.jsxs("span", { className: Chip_module.label, children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("span", { className: Chip_module.xMark, "aria-hidden": true, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { className: Chip_module.icon }) })] }) }) }));
+    return (jsxRuntime.jsx("button", { type: 'button', ref: ref, className: lite.clsx(`fds-focus`, `fds-chip--button`, `fds-chip--removable`, `fds-chip--${group?.size || size}`, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxRuntime.jsxs("span", { className: `fds-chip__label`, children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("span", { className: `fds-chip__x-mark`, "aria-hidden": true, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { className: `fds-chip__icon` }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

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

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

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

@@ -4,10 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
 var React = require('react');
-var Divider_module = require('./Divider.module.css.js');
 
 const Divider = React.forwardRef(({ color = 'default', className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("hr", { className: clsx.clsx(Divider_module.divider, Divider_module[color], className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx("hr", { className: clsx.clsx('fds-divider', `fds-divider--${color}`, className), ref: ref, ...rest }));
 });
 Divider.displayName = 'Divider';
 Divider.displayName = 'Divider';

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

@@ -4,8 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var floatingUi_react = require('../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var DropdownMenu_module = require('./DropdownMenu.module.css.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var DropdownMenu = require('./DropdownMenu.js');
 var floatingUi_dom = require('../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js');
@@ -68,7 +67,7 @@ const DropdownMenuContent = React.forwardRef(({ className, children, ...rest },
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: internalOpen && (jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, guards: false, modal: false, children: jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("ul", { role: 'menu', "aria-hidden": !internalOpen, "data-placement": flPlacement, ref: floatingRef, style: floatingStyles, ...getFloatingProps({
                         ref: floatingRef,
                         tabIndex: undefined,
-                    }), className: clsx.clsx(DropdownMenu_module.dropdown, DropdownMenu_module[size], className), ...rest, children: children }) }) })) }));
+                    }), className: lite.clsx('fds-dropdownmenu', `fds-dropdownmenu${size}`, className), ...rest, children: children }) }) })) }));
 });
 DropdownMenuContent.displayName = 'DropdownMenuContent';
 

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

@@ -3,15 +3,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
-var DropdownMenu = require('../DropdownMenu.js');
-var DropdownMenuGroup_module = require('./DropdownMenuGroup.module.css.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var DropdownMenu = require('./DropdownMenu.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 const DropdownMenuGroup = React.forwardRef(({ children, heading, className, style, ...rest }, ref) => {
     const { size } = React.useContext(DropdownMenu.DropdownMenuContext);
     const headingId = React.useId();
-    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: DropdownMenuGroup_module.section, ...rest, children: [heading && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("h2", { id: headingId, className: clsx.clsx(DropdownMenuGroup_module.heading), children: heading }) })), children] }) }));
+    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: 'fds-dropdownmenu__section', ...rest, children: [heading && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("h2", { id: headingId, className: 'fds-dropdownmenu__heading', children: heading }) })), children] }) }));
 });
 DropdownMenuGroup.displayName = 'DropdownMenuGroup';
 

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

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

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

@@ -2,8 +2,8 @@
 'use strict';
 
 var DropdownMenu$1 = require('./DropdownMenu.js');
-var DropdownMenuGroup = require('./DropdownMenuGroup/DropdownMenuGroup.js');
-var DropdownMenuItem = require('./DropdownMenuItem/DropdownMenuItem.js');
+var DropdownMenuGroup = require('./DropdownMenuGroup.js');
+var DropdownMenuItem = require('./DropdownMenuItem.js');
 var DropdownMenuTrigger = require('./DropdownMenuTrigger.js');
 var DropdownMenuContent = require('./DropdownMenuContent.js');
 

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

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

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

@@ -5,12 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
 var index = require('../Popover/index.js');
-var HelpText_module = require('./HelpText.module.css.js');
 var HelpTextIcon = require('./HelpTextIcon.js');
 
 const HelpText = ({ title, placement = 'right', size = 'medium', portal, className, children, ...rest }) => {
     const [open, setOpen] = React.useState(false);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(index.Popover, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsxRuntime.jsx(index.Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxRuntime.jsxs("button", { className: clsx.clsx(HelpText_module.helpTextButton, `fds-focus`, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { filled: true, className: clsx.clsx(HelpText_module.helpTextIcon, HelpText_module.helpTextIconFilled, HelpText_module[size], className), openState: open }), jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { className: clsx.clsx(HelpText_module.helpTextIcon, HelpText_module[size], className), openState: open }), jsxRuntime.jsx("span", { className: `fds-sr-only`, children: title })] }) }), jsxRuntime.jsx(index.Popover.Content, { className: HelpText_module.helpTextContent, children: children })] }) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(index.Popover, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsxRuntime.jsx(index.Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxRuntime.jsxs("button", { className: clsx.clsx(`fds-helptext--${size}`, 'fds-helptext__button', `fds-focus`, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { filled: true, className: clsx.clsx(`fds-helptext__icon`, `fds-helptext__icon--filled`, className), openState: open }), jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { className: clsx.clsx(`fds-helptext__icon`, className), openState: open }), jsxRuntime.jsx("span", { className: `fds-sr-only`, children: title })] }) }), jsxRuntime.jsx(index.Popover.Content, { className: 'fds-helptext__content', children: children })] }) }));
 };
 HelpText.displayName = 'HelpText';
 

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

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

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

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

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

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

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

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

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

@@ -5,8 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_react = require('../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var React = require('react');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var Modal_module = require('./Modal.module.css.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var useScrollLock = require('./useScrollLock.js');
 var useModalState = require('./useModalState.js');
 var ModalRoot = require('./ModalRoot.js');
@@ -25,7 +24,7 @@ const ModalDialog = React.forwardRef(({ onInteractOutside, onClose, onBeforeClos
         modalDialogRef.current?.close();
     };
     const mergedRefs = floatingUi_react.useMergeRefs([modalRef, ref, modalDialogRef]);
-    useScrollLock.useScrollLock(modalDialogRef, Modal_module.lockScroll);
+    useScrollLock.useScrollLock(modalDialogRef, 'fds-modal--lock-scroll');
     React.useEffect(() => {
         setOpen(open);
     }, [open, setOpen]);
@@ -67,7 +66,7 @@ const ModalDialog = React.forwardRef(({ onInteractOutside, onClose, onBeforeClos
         }
         modalRef.current?.close();
     };
-    return (jsxRuntime.jsx(Component, { ref: mergedRefs, className: clsx.clsx(Modal_module.modal, className), onCancel: onCancel, ...rest, children: open && (jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })) }));
+    return (jsxRuntime.jsx(Component, { ref: mergedRefs, className: lite.clsx('fds-modal', className), onCancel: onCancel, ...rest, children: open && (jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })) }));
 });
 ModalDialog.displayName = 'ModalDialog';
 

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

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

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

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

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

@@ -3,9 +3,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
-var ModalRoot = require('../ModalRoot.js');
-var Button = require('../../Button/Button.js');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var ModalRoot = require('./ModalRoot.js');
+var Button = require('../Button/Button.js');
 
 const ModalTrigger = React.forwardRef(({ asChild, ...rest }, ref) => {
     const { modalRef, open } = React.useContext(ModalRoot.ModalContext);

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

@@ -2,11 +2,11 @@
 'use strict';
 
 var ModalRoot = require('./ModalRoot.js');
-var ModaContent = require('./ModalContent/ModaContent.js');
+var ModaContent = require('./ModaContent.js');
 var ModalDialog = require('./ModalDialog.js');
-var ModalFooter = require('./ModalFooter/ModalFooter.js');
-var ModalHeader = require('./ModalHeader/ModalHeader.js');
-var ModalTrigger = require('./ModalTrigger/ModalTrigger.js');
+var ModalFooter = require('./ModalFooter.js');
+var ModalHeader = require('./ModalHeader.js');
+var ModalTrigger = require('./ModalTrigger.js');
 
 const Modal = ModalDialog.ModalDialog;
 Modal.Root = ModalRoot.ModalRoot;

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

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