@digdir/designsystemet-react 0.61.0 → 1.0.0-rc.0

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

@@ -3,9 +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 getColor = require('../../utilities/getColor.js');
 
-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 })));
+const Accordion = React.forwardRef(({ border = false, className, ...rest }, ref) => {
+    const color = getColor.getColor(rest.color || 'neutral');
+    return (jsxRuntime.jsx("div", { className: lite.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

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 var AnimateHeight = require('../../../utilities/AnimateHeight/AnimateHeight.js');
@@ -14,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('fds-accordion__content', className), ...rest, children: children }) }) }));
+    return (jsxRuntime.jsx(AnimateHeight.AnimateHeight, { id: context.contentId, open: context.open, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('fds-accordion__content', className), ...rest, children: children }) }) }));
 });
 AccordionContent.displayName = 'AccordionContent';
 

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

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 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 React = require('react');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 var Heading = require('../../Typography/Heading/Heading.js');
@@ -19,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('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 }) })] }) }));
+    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xs', level: level, className: lite.clsx('fds-accordion__header', className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: lite.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: 'sm', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
 });
 AccordionHeader.displayName = 'AccordionHeader';
 

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

@@ -2,14 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
 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('fds-accordion__item', (open ?? internalOpen) && 'fds-accordion__item--open', className), ref: ref, ...rest, children: jsxRuntime.jsx(AccordionItemContext.Provider, { value: {
+    return (jsxRuntime.jsx("div", { className: lite.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/Alert/Alert.js

@@ -4,7 +4,8 @@
 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 getSize = require('../../utilities/getSize.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 const icons = {
@@ -19,9 +20,10 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = React.forwardRef(({ severity = 'info', elevated, iconTitle, size, children, className, ...rest }, ref) => {
+const Alert = React.forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
+    const size = getSize.getSize(rest.size || 'md');
     const { Icon, title } = icons[severity];
-    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-alert', `fds-alert--${size}`, `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, className: 'fds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('fds-alert', `fds-alert--${size}`, `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, className: 'fds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

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

@@ -5,10 +5,13 @@ 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');
+var getSize = require('../../utilities/getSize.js');
 
 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 }));
+    const shadowSize = shadow && getSize.getSize(shadow);
+    const borderRadiusSize = borderRadius && getSize.getSize(borderRadius);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(shadowSize && `fds-box--${shadowSize}-shadow`, borderColor && `fds-box--${borderColor}-border-color`, borderRadiusSize && `fds-box--${borderRadiusSize}-border-radius`, `fds-box--${background}-background`, className), ...rest, children: children }));
 });
 Box.displayName = 'Box';
 

package/dist/cjs/components/Button/Button.js

@@ -6,12 +6,14 @@ 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');
 var getSize = require('../../utilities/getSize.js');
+var getColor = require('../../utilities/getColor.js');
 
 /**
  * Button used for interaction
  */
-const Button = React.forwardRef(({ children, color = 'first', variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
+const Button = React.forwardRef(({ children, variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
     const size = getSize.getSize(rest.size || 'md');
+    const color = getColor.getColor(rest.color || 'accent', 'action');
     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 }));
 });

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

@@ -5,9 +5,11 @@ 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');
+var getColor = require('../../utilities/getColor.js');
 
-const Card = React.forwardRef(({ color = 'neutral', isLink = false, asChild = false, className, ...rest }, ref) => {
+const Card = React.forwardRef(({ isLink = false, asChild = false, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
+    const color = getColor.getColor(rest.color || 'neutral');
     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/Chip/Group/Group.js

@@ -4,9 +4,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
+var getSize = require('../../../utilities/getSize.js');
 
 const ChipGroupContext = React.createContext(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) }) })));
+const Group = React.forwardRef(({ children, className, ...rest }, ref) => {
+    const size = getSize.getSize(rest.size || 'md');
+    return (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

@@ -6,10 +6,12 @@ var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var Group = require('../Group/Group.js');
+var getSize = require('../../../utilities/getSize.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
-const RemovableChip = React.forwardRef(({ children, size = 'medium', className, ...rest }, ref) => {
+const RemovableChip = React.forwardRef(({ children, className, ...rest }, ref) => {
     const group = React.useContext(Group.ChipGroupContext);
+    const size = getSize.getSize(rest.size || 'md');
     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

@@ -6,11 +6,13 @@ var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var Group = require('../Group/Group.js');
+var getSize = require('../../../utilities/getSize.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
-const ToggleChip = React.forwardRef(({ children, size = 'medium', selected = false, checkmark = true, className, ...rest }, ref) => {
+const ToggleChip = React.forwardRef(({ children, selected = false, checkmark = true, className, ...rest }, ref) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = React.useContext(Group.ChipGroupContext);
+    const size = getSize.getSize(rest.size || 'md');
     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

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
 const Divider = React.forwardRef(({ color = 'default', className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("hr", { className: clsx.clsx('fds-divider', `fds-divider--${color}`, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx("hr", { className: lite.clsx('fds-divider', `fds-divider--${color}`, className), ref: ref, ...rest }));
 });
 Divider.displayName = 'Divider';
 Divider.displayName = 'Divider';

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

@@ -3,8 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var getSize = require('../../utilities/getSize.js');
 
-const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium', portal, children, }) => {
+const DropdownMenu = ({ open, onClose, placement = 'bottom-end', portal, children, ...rest }) => {
+    const size = getSize.getSize(rest.size || 'md');
     const triggerRef = React.useRef(null);
     const [internalOpen, setInternalOpen] = React.useState(open ?? false);
     const anchorEl = triggerRef.current;
@@ -26,7 +28,7 @@ const DropdownMenu = ({ open, onClose, placement = 'bottom-end', size = 'medium'
 };
 const DropdownMenuContext = React.createContext({
     triggerRef: { current: null },
-    size: 'medium',
+    size: 'md',
     anchorEl: null,
     internalOpen: false,
     setInternalOpen: () => { },

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

@@ -3,10 +3,10 @@
 
 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 floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.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_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
 
@@ -67,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: lite.clsx('fds-dropdownmenu', `fds-dropdownmenu${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/DropdownMenuItem.js

@@ -7,8 +7,8 @@ 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: 'fds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
+    const { size } = React.useContext(DropdownMenu.DropdownMenuContext);
+    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', size: size, fullWidth: true, className: 'fds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
 });
 DropdownMenuItem.displayName = 'DropdownMenuItem';
 

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

@@ -3,7 +3,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 floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var DropdownMenu = require('./DropdownMenu.js');
 var Button = require('../Button/Button.js');

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

@@ -3,13 +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('../Popover/index.js');
+var getSize = require('../../utilities/getSize.js');
 var HelpTextIcon = require('./HelpTextIcon.js');
 
-const HelpText = ({ title, placement = 'right', size = 'medium', portal, className, children, ...rest }) => {
+const HelpText = ({ title, placement = 'right', portal, className, children, ...rest }) => {
+    const size = getSize.getSize(rest.size || 'md');
     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(`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 })] }) }));
+    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: lite.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: lite.clsx(`fds-helptext__icon`, `fds-helptext__icon--filled`, className), openState: open }), jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { className: lite.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

@@ -8,7 +8,7 @@ var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 
 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 }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx('fds-link', className), ref: ref, "data-ds-theme": inverted ? 'dark' : undefined, ...rest, children: children }));
 });
 Link.displayName = 'Link';
 

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

@@ -7,9 +7,9 @@ var ListRoot = require('./ListRoot.js');
 var Heading = require('../Typography/Heading/Heading.js');
 
 const HEADING_SIZE_MAP = {
-    small: 'xxsmall',
-    medium: 'xsmall',
-    large: 'small',
+    sm: '2xs',
+    md: 'xs',
+    lg: 'sm',
 };
 const ListHeading = React.forwardRef(({ level = 2, id, ...rest }, ref) => {
     const { size, headingId, setHeadingId } = React.useContext(ListRoot.ListContext);

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

@@ -3,12 +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');
 
 const ListItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'li';
-    return (jsxRuntime.jsx(Component, { className: clsx.clsx('fds-list__item', className), ...rest, ref: ref }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx('fds-list__item', className), ...rest, ref: ref }));
 });
 ListItem.displayName = 'ListItem';
 

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

@@ -4,15 +4,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var React = require('react');
+var getSize = require('../../utilities/getSize.js');
 
 const ListContext = React.createContext({
-    size: 'medium',
+    size: 'md',
     headingId: 'heading',
     setHeadingId: () => { },
 });
-const ListRoot = React.forwardRef(({ asChild, size = 'medium', ...rest }, ref) => {
+const ListRoot = React.forwardRef(({ asChild, ...rest }, ref) => {
     const [headingId, setHeadingId] = React.useState();
     const Component = asChild ? index.Slot : 'div';
+    const size = getSize.getSize(rest.size || 'md');
     return (jsxRuntime.jsx(ListContext.Provider, { value: { size, headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { ref: ref, ...rest }) }));
 });
 ListRoot.displayName = 'ListRoot';

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

@@ -3,7 +3,7 @@
 
 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 ListRoot = require('./ListRoot.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
@@ -11,13 +11,13 @@ 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(`fds-list`, `fds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.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(`fds-list`, `fds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`fds-list`, `fds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
 });
 Ordered.displayName = 'ListOrdered';
 

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

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var React = require('react');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');

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

@@ -14,7 +14,7 @@ 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' }) }))] }));
+    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: 'sm', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', 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';
 

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

@@ -5,6 +5,7 @@ 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 getSize = require('../../utilities/getSize.js');
 var PaginationRoot = require('./PaginationRoot.js');
 var PaginationContent = require('./PaginationContent.js');
 var PaginationItem = require('./PaginationItem.js');
@@ -14,16 +15,17 @@ var PaginationNextPrev = require('./PaginationNextPrev.js');
 var usePagination = require('./usePagination.js');
 
 const iconSize = {
-    small: '1rem',
-    medium: '1.5rem',
-    large: '2rem',
+    sm: '1rem',
+    md: '1.5rem',
+    lg: '2rem',
 };
-const Pagination = React.forwardRef(({ nextLabel = '', previousLabel = '', size = 'medium', compact = false, hideLabels = false, currentPage = 1, totalPages, onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) => {
+const Pagination = React.forwardRef(({ nextLabel = '', previousLabel = '', compact = false, hideLabels = false, currentPage = 1, totalPages, onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) => {
     const { pages, showNextPage, showPreviousPage } = usePagination.usePagination({
         compact,
         currentPage,
         totalPages,
     });
+    const size = getSize.getSize(rest.size || 'md');
     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: () => {

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

@@ -8,7 +8,7 @@ var Button = require('../Button/Button.js');
 
 const PaginationButton = React.forwardRef(({ isActive, ...rest }, ref) => {
     const { size } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive, color: 'first', size: size, ...rest }));
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive, size: size, ...rest }));
 });
 
 exports.PaginationButton = PaginationButton;

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

@@ -6,13 +6,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var React = require('react');
+var getSize = require('../../utilities/getSize.js');
 
 const PaginationContext = React.createContext({
-    size: 'medium',
+    size: 'md',
     compact: false,
 });
-const PaginationRoot = React.forwardRef(({ asChild, size = 'medium', compact = false, ...rest }, ref) => {
+const PaginationRoot = React.forwardRef(({ asChild, compact = false, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'nav';
+    const size = getSize.getSize(rest.size || 'md');
     return (jsxRuntime.jsx(PaginationContext.Provider, { value: { size, compact }, children: jsxRuntime.jsx(Component, { ref: ref, "aria-label": 'Pagination', ...rest }) }));
 });
 var PaginationRoot$1 = PaginationRoot;

package/dist/cjs/components/Popover/Popover.js

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var getSize = require('../../utilities/getSize.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -23,7 +24,8 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const Popover = ({ children, placement = 'top', open, variant = 'default', size = 'medium', portal, onOpenChange, onClose, }) => {
+const Popover = ({ children, placement = 'top', open, variant = 'default', portal, onOpenChange, onClose, ...rest }) => {
+    const size = getSize.getSize(rest.size || 'md');
     const triggerRef = React.useRef(null);
     const [internalOpen, setInternalOpen] = React.useState(open ?? false);
     const randomPopoverId = React.useId();
@@ -54,7 +56,7 @@ const Popover = ({ children, placement = 'top', open, variant = 'default', size
         }, children: children }));
 };
 const PopoverContext = React__namespace.createContext({
-    size: 'small',
+    size: 'sm',
     variant: 'default',
     anchorEl: null,
     placement: 'top',

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

@@ -3,12 +3,12 @@
 
 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 floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var Popover = require('./Popover.js');
-var floatingUi_dom = require('../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
-var floatingUi_reactDom = require('../../packages/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
+var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
@@ -90,10 +90,10 @@ const PopoverContent = React.forwardRef(({ className, children, style, id, ...re
     const arrowPlacement = React.useMemo(() => {
         return ARROW_PLACEMENT[flPlacement.split('-')[0]];
     }, [flPlacement]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { ref: floatingEl, className: clsx.clsx('fds-popover', `fds-popover--${variant}`, `fds-popover--${size}`, className), "data-placement": flPlacement, ...getFloatingProps({
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { ref: floatingEl, className: lite.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, jsxRuntime.jsx("div", { ref: arrowRef, className: clsx.clsx('fds-popover__arrow', `fds-popover__arrow--${arrowPlacement}`), style: {
+                    }), style: { ...floatingStyles, ...style }, id: popoverId, "aria-labelledby": triggerId, ...rest, children: [children, jsxRuntime.jsx("div", { ref: arrowRef, className: lite.clsx('fds-popover__arrow', `fds-popover__arrow--${arrowPlacement}`), style: {
                                 height: ARROW_HEIGHT,
                                 width: ARROW_HEIGHT,
                                 ...(arrowX != null ? { left: arrowX } : {}),

package/dist/cjs/components/Popover/PopoverTrigger.js

@@ -3,7 +3,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 floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var Popover = require('./Popover.js');
 var Button = require('../Button/Button.js');

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

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of circular shape */
 const Circle = ({ width, height, className, children, style, ...rest }) => {
     const ref = useSynchronizedAnimation.useSynchronizedAnimation('fds-skeleton-opacity-fade');
-    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-skeleton', 'fds-skeleton--circle', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: lite.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/cjs/components/Skeleton/Rectangle/Rectangle.js

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of rectangle shape */
 const Rectangle = ({ width, height, className, children, style, ...rest }) => {
     const ref = useSynchronizedAnimation.useSynchronizedAnimation('fds-skeleton-opacity-fade');
-    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-skeleton', 'fds-skeleton--rectangle', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: lite.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/cjs/components/Skeleton/Text/Text.js

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of text */
 const Text = ({ width, height, className, style, children, ...rest }) => {
     const ref = useSynchronizedAnimation.useSynchronizedAnimation('fds-skeleton-opacity-fade');
-    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-skeleton', 'fds-skeleton--text', Boolean(children) && 'fds-skeleton--has-children', className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: lite.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';