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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/components/Tabs/Tab/Tab.js

@@ -2,14 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from './Tab.module.css.js';
 import { useTabItem } from './useTab.js';
 import { RovingTabindexItem } from '../../../utilities/RovingTabIndex/RovingTabindexItem.js';
 
 const Tab = forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
-    const { active, size = 'medium', ...useTabRest } = useTabItem(props);
-    return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, className: clsx(classes.tabItem, classes[size], active && classes.isActive, className), ref: ref, children: children }) }));
+    const { active, ...useTabRest } = useTabItem(props);
+    return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, className: clsx('fds-tabs__tab', active && 'fds-tabs__tab--active', className), ref: ref, children: children }) }));
 });
 Tab.displayName = 'Tab';
 

package/dist/esm/components/Tabs/Tab/useTab.js

@@ -11,7 +11,6 @@ const useTabItem = (props) => {
     return {
         ...rest,
         active: active,
-        size: tabs?.size,
         id: buttonId,
         'aria-selected': active,
         role: 'tab',

package/dist/esm/components/Tabs/TabContent/TabContent.js

@@ -1,15 +1,13 @@
 'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { TabsContext } from '../Tabs.js';
-import classes from './TabContent.module.css.js';
 
 const TabContent = forwardRef(({ children, value, className, ...rest }, ref) => {
-    const { value: tabsValue, size = 'medium' } = useContext(TabsContext);
+    const { value: tabsValue } = useContext(TabsContext);
     const active = value == tabsValue;
-    const onlyText = typeof children === 'string';
-    return (jsx(Fragment, { children: active && (jsx("div", { className: clsx(classes[size], classes.tabContent, onlyText && classes.onlyText, className), ref: ref, ...rest, children: children })) }));
+    return (jsx(Fragment, { children: active && (jsx("div", { className: clsx('fds-tabs__content', className), ref: ref, ...rest, children: children })) }));
 });
 TabContent.displayName = 'TabContent';
 

package/dist/esm/components/Tabs/TabList/TabList.js

@@ -2,11 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from './TabList.module.css.js';
 import { RovingTabindexRoot } from '../../../utilities/RovingTabIndex/RovingTabindexRoot.js';
 
 const TabList = forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsx(RovingTabindexRoot, { role: 'tablist', className: clsx(classes.tabItemList, className), ref: ref, ...rest, children: children }));
+    return (jsx(RovingTabindexRoot, { role: 'tablist', className: clsx('fds-tabs__tablist', className), ref: ref, ...rest, children: children }));
 });
 TabList.displayName = 'TabList';
 

package/dist/esm/components/Tabs/Tabs.js

@@ -18,8 +18,7 @@ const Tabs = forwardRef(({ children, value, defaultValue, onChange, size = 'medi
             value,
             defaultValue,
             onChange: onValueChange,
-            size,
-        }, children: jsx("div", { ref: ref, ...rest, children: children }) }));
+        }, children: jsx("div", { className: `fds-tabs--${size}`, ref: ref, ...rest, children: children }) }));
 });
 Tabs.displayName = 'Tabs';
 

package/dist/esm/components/Tag/Tag.js

@@ -1,12 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Tag.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const Tag = forwardRef(({ children, color = 'neutral', size = 'medium', className, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx(classes.tag, classes[color], classes[size], className), ref: ref, ...rest, children: children }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx('fds-tag', `fds-tag--${color}`, `fds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
 });
 Tag.displayName = 'Tag';
 

package/dist/esm/components/ToggleGroup/ToggleGroup.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, forwardRef, useId, useState } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './ToggleGroup.module.css.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { RovingTabindexRoot } from '../../utilities/RovingTabIndex/RovingTabindexRoot.js';
 
 const ToggleGroupContext = createContext({});
@@ -28,13 +27,13 @@ const ToggleGroup = forwardRef(({ children, value, defaultValue, onChange, size
         };
         value = uncontrolledValue;
     }
-    return (jsx("div", { className: clsx(classes.toggleGroupContainer, className), ref: ref, ...rest, children: jsxs(ToggleGroupContext.Provider, { value: {
+    return (jsx("div", { className: clsx('fds-togglegroup', className), ref: ref, ...rest, children: jsxs(ToggleGroupContext.Provider, { value: {
                 value,
                 defaultValue,
                 name: name ?? `togglegroup-name-${nameId}`,
                 onChange: onValueChange,
                 size,
-            }, children: [name && (jsx("input", { type: 'hidden', name: name, value: value })), jsx(RovingTabindexRoot, { asChild: true, valueId: value, children: jsx("div", { className: classes.groupContent, role: 'radiogroup', children: children }) })] }) }));
+            }, children: [name && (jsx("input", { className: 'fds-togglegroup__input', name: name, value: value })), jsx(RovingTabindexRoot, { asChild: true, valueId: value, children: jsx("div", { className: 'fds-togglegroup__content', role: 'radiogroup', children: children }) })] }) }));
 });
 ToggleGroup.displayName = 'ToggleGroup';
 

package/dist/esm/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js

@@ -2,7 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
-import classes from './ToggleGroupItem.module.css.js';
 import { useToggleGroupItem } from './useToggleGroupitem.js';
 import { RovingTabindexItem } from '../../../utilities/RovingTabIndex/RovingTabindexItem.js';
 import { Button } from '../../Button/Button.js';
@@ -10,7 +9,7 @@ import { Button } from '../../Button/Button.js';
 const ToggleGroupItem = forwardRef((props, ref) => {
     const { children, icon, className, ...rest } = props;
     const { active, size = 'medium', buttonProps } = useToggleGroupItem(props);
-    return (jsx(RovingTabindexItem, { asChild: true, value: rest.value, children: jsx(Button, { className: clsx(classes.toggleGroupItem, className), icon: icon, color: 'first', variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
+    return (jsx(RovingTabindexItem, { asChild: true, value: rest.value, children: jsx(Button, { className: clsx('fds-togglegroup__item', className), icon: icon, color: 'first', variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
 });
 ToggleGroupItem.displayName = 'ToggleGroupItem';
 

package/dist/esm/components/Tooltip/Tooltip.js

@@ -2,11 +2,10 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { forwardRef, useState, cloneElement } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingPortal, FloatingArrow } from '../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import classes from './Tooltip.module.css.js';
 import { autoUpdate, flip, shift } from '../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset } from '../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { offset } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
 import { arrow } from '../../packages/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 
 const ARROW_HEIGHT = 7;
@@ -59,10 +58,10 @@ const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150,
     return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps({
                 ref: childMergedRef,
             })), internalOpen && (jsx(FloatingPortal, { children: jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                            className: clsx(classes.wrapper, inverted && classes.inverted, className),
+                            className: clsx('fds-tooltip', inverted && 'fds-tooltip--inverted', className),
                             ref: mergedRef,
                             ...rest,
-                        }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: classes.arrow, height: ARROW_HEIGHT })] }) }) }))] }));
+                        }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'fds-tooltip__arrow', height: ARROW_HEIGHT })] }) }) }))] }));
 });
 Tooltip.displayName = 'Tooltip';
 

package/dist/esm/components/Typography/ErrorMessage/ErrorMessage.js

@@ -3,14 +3,11 @@ 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 './ErrorMessage.module.css.js';
 
 /** Use `ErrorMessage` to display text as error message. */
-const ErrorMessage = forwardRef(({ className, size = 'medium', spacing, as = 'div', asChild, error = true, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.errorMessage, classes[size], {
-            [classes.spacing]: !!spacing,
-        }, error && classes.error, className), ...rest }));
+const ErrorMessage = forwardRef(({ className, size = 'medium', spacing, asChild, error = true, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { ref: ref, className: clsx('fds-error-message', `fds-error-message--${size}`, spacing && 'fds-error-message--spacing', error && 'fds-error-message--error', className), ...rest }));
 });
 ErrorMessage.displayName = 'ErrorMessage';
 

package/dist/esm/components/Typography/Heading/Heading.js

@@ -3,16 +3,11 @@ 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 './Heading.module.css.js';
 
 /** Use `Heading` to render h1-6 elements with heading text styles.  */
-const Heading = forwardRef(({ level = 1, size = 'xlarge', spacing = false, className, as, asChild, ...rest }, ref) => {
-    const Component = asChild
-        ? $5e63c961fc1ce211$export$8c6ed5c666ac1360
-        : as ?? `h${level ?? 1}`;
-    return (jsx(Component, { ref: ref, className: clsx(classes.heading, classes[`size-${size}`], {
-            [classes.spacing]: spacing,
-        }, className), ...rest }));
+const Heading = forwardRef(({ level = 1, size = 'xlarge', spacing = false, className, asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : `h${level ?? 1}`;
+    return (jsx(Component, { ref: ref, className: clsx('fds-heading', `fds-heading--${size}`, spacing && 'fds-heading--spacing', className), ...rest }));
 });
 Heading.displayName = 'Heading';
 

package/dist/esm/components/Typography/Ingress/Ingress.js

@@ -5,11 +5,9 @@ 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';
 
 /** Use `Ingress` to display text as ingress. */
-const Ingress = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(`fds-ingress`, `fds-ingress--${size}`, {
-            'fds-ingress--spacing': !!spacing,
-        }, className), ...rest }));
+const Ingress = forwardRef(({ className, size = 'medium', spacing, asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'p';
+    return (jsx(Component, { ref: ref, className: clsx(`fds-ingress`, `fds-ingress--${size}`, spacing && 'fds-ingress--spacing', className), ...rest }));
 });
 Ingress.displayName = 'Ingress';
 

package/dist/esm/components/Typography/Label/Label.js

@@ -3,17 +3,11 @@ 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 './Label.module.css.js';
 
-const fontWeightsClasses = {
-    regular: classes.regularWeight,
-    medium: classes.mediumWeight,
-    semibold: classes.semiboldWeight,
-};
 /** Use `Label` for labels. */
-const Label = forwardRef(({ className, size = 'medium', spacing, as = 'label', weight = 'medium', asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.label, classes[size], spacing && classes.spacing, weight && [fontWeightsClasses[weight]], className), ...rest }));
+const Label = forwardRef(({ className, size = 'medium', spacing, weight = 'medium', asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'label';
+    return (jsx(Component, { ref: ref, className: clsx('fds-label', `fds-label--${size}`, spacing && 'fds-label--spacing', weight && `fds-label--${weight}-weight`, className), ...rest }));
 });
 Label.displayName = 'Label';
 

package/dist/esm/components/Typography/Paragraph/Paragraph.js

@@ -3,15 +3,11 @@ 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 './Paragraph.module.css.js';
 
 /** Use `Paragraph` to display text with paragraph text styles. */
-const Paragraph = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, short, variant, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.paragraph, classes[size], {
-            [classes.spacing]: !!spacing,
-            [classes.short]: short,
-        }, variant && classes[variant], className), ...rest }));
+const Paragraph = forwardRef(({ className, size = 'medium', spacing, asChild, variant, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'p';
+    return (jsx(Component, { ref: ref, className: clsx('fds-paragraph', `fds-paragraph--${size}`, spacing && 'fds-paragraph--spacing', variant && `fds-paragraph--${variant}`, className), ...rest }));
 });
 Paragraph.displayName = 'Paragraph';
 

package/dist/esm/components/form/Checkbox/Checkbox.js

@@ -1,9 +1,8 @@
 'use client';
 import { jsx, jsxs, Fragment } 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 { useMergeRefs } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import classes from './Checkbox.module.css.js';
 import { useCheckbox } from './useCheckbox.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { omit } from '../../../utilities/objectUtils.js';
@@ -11,7 +10,7 @@ import { Label } from '../../Typography/Label/Label.js';
 
 const Checkbox = forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
-    const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useCheckbox(props);
+    const { inputProps, descriptionId, hasError, size = 'medium', readOnly } = useCheckbox(props);
     const inputRef = useMergeRefs([
         ref,
         (el) => {
@@ -20,7 +19,7 @@ const Checkbox = forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), style: style, children: [jsx("input", { className: classes.input, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('fds-checkbox', `fds-checkbox--${size}`, inputProps.disabled && `fds-checkbox--disabled`, hasError && `fds-checkbox--error`, readOnly && `fds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `fds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: `fds-checkbox__label`, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `fds-checkbox__description`, children: description }) }))] }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/esm/components/form/Combobox/Combobox.js

@@ -2,17 +2,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useId, useState, useEffect } from 'react';
 import { FloatingPortal, FloatingFocusManager } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { useVirtualizer } from '../../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
 import { useFormField } from '../useFormField.js';
 import useDebounce from '../../../utilities/useDebounce.js';
 import useCombobox from './useCombobox.js';
-import classes from './Combobox.module.css.js';
 import ComboboxInput from './internal/ComboboxInput.js';
 import ComboboxLabel from './internal/ComboboxLabel.js';
 import ComboboxError from './internal/ComboboxError.js';
 import ComboboxNative from './internal/ComboboxNative.js';
-import ComboboxCustom from './Custom/Custom.js';
+import ComboboxCustom from './Custom.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { ComboboxIdProvider } from './ComboboxIdContext.js';
@@ -95,6 +94,10 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             inputRef.current?.focus();
         }
         else {
+            /* clear newSelectedOptions */
+            Object.keys(newSelectedOptions).forEach((key) => {
+                delete newSelectedOptions[key];
+            });
             newSelectedOptions[option.value] = option;
             setInputValue(option?.label || '');
             // move cursor to the end of the input
@@ -103,7 +106,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             }, 0);
         }
         setSelectedOptions(newSelectedOptions);
-        console.log('calling new value with: ', Object.keys(newSelectedOptions));
         onValueChange?.(Object.keys(newSelectedOptions));
         !multiple && setOpen(false);
         refs.domReference.current?.focus();
@@ -165,12 +167,12 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             chipSrLabel,
             listRef,
             forwareddRef,
-        }, children: [jsxs(Box, { className: clsx(classes.combobox, disabled && classes.disabled, className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'medium', borderRadius: 'medium', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs(Box, { className: clsx('fds-combobox', `fds-combobox--${size}`, disabled && 'fds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'medium', borderRadius: 'medium', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,
                             },
-                        }), className: clsx(classes.optionsWrapper, classes[size]), children: [virtual && (jsx("div", { style: {
+                        }), className: clsx('fds-combobox__options-wrapper', `fds-combobox--${size}`), children: [virtual && (jsx("div", { style: {
                                     height: `${rowVirtualizer.getTotalSize()}px`,
                                     width: '100%',
                                     position: 'relative',
@@ -180,7 +182,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: classes.loading, children: [jsx(Spinner, { title: 'Laster', size: 'small' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'fds-combobox__loading', children: [jsx(Spinner, { title: 'Laster', size: 'small' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
 });
 const Combobox = forwardRef((props, ref) => (jsx(ComboboxIdProvider, { children: jsx(ComboboxComponent, { ...props, ref: ref }) })));
 Combobox.displayName = 'Combobox';

package/dist/esm/components/form/Combobox/{Custom/Custom.js → Custom.js}

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useContext, useMemo } 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 { useMergeRefs } from '../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { ComboboxContext } from '../ComboboxContext.js';
-import { useComboboxId } from '../ComboboxIdContext.js';
-import classes from './Custom.module.css.js';
-import { omit } from '../../../../utilities/objectUtils.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 { useMergeRefs } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { ComboboxContext } from './ComboboxContext.js';
+import { useComboboxId } from './ComboboxIdContext.js';
+import { omit } from '../../../utilities/objectUtils.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -20,7 +19,7 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
     if (!context) {
         throw new Error('ComboboxCustom must be used within a Combobox');
     }
-    const { size, customIds, listRef, getItemProps } = context;
+    const { customIds, listRef, getItemProps } = context;
     const index = useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
     const combinedRef = useMergeRefs([
         (node) => {
@@ -28,7 +27,7 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
         },
         ref,
     ]);
-    return (jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx(classes.custom, classes[size], className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }));
+    return (jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx('fds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }));
 });
 var ComboboxCustom$1 = ComboboxCustom;