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

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,9 +2,8 @@
 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 { arrow } from '../../packages/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
@@ -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';
@@ -165,12 +164,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 +179,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;
 

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

@@ -1,17 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
-import { ComboboxContext } from '../ComboboxContext.js';
-import classes from './Empty.module.css.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { ComboboxContext } from './ComboboxContext.js';
 
 const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(ComboboxContext);
     if (!context) {
         throw new Error('ComboboxEmpty must be used within a Combobox');
     }
-    const { filteredOptions, size } = context;
-    return (filteredOptions.length === 0 && (jsx("div", { ref: ref, className: clsx(classes.empty, classes[size], className), ...rest, children: children })));
+    const { filteredOptions } = context;
+    return (filteredOptions.length === 0 && (jsx("div", { ref: ref, className: clsx('fds-combobox__empty', className), ...rest, children: children })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

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

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { clsx } from '../../../../../node_modules/clsx/dist/clsx.js';
-import classes from './Description.module.css.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 
 const ComboboxOptionDescription = forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsx("span", { className: clsx(classes.description, className), ref: ref, ...rest, children: children }));
+    return (jsx("span", { className: clsx('fds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
 var ComboboxOptionDescription$1 = ComboboxOptionDescription;

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

@@ -1,11 +1,10 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, forwardRef, useId, useContext } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import { SelectedIcon } from './Icon/SelectedIcon.js';
-import classes from './Option.module.css.js';
-import ComboboxOptionDescription from './Description/Description.js';
+import { SelectedIcon } from './SelectedIcon.js';
+import ComboboxOptionDescription from './Description.js';
 import useComboboxOption from './useComboboxOption.js';
 import { omit } from '../../../../utilities/objectUtils.js';
 import { Label } from '../../../Typography/Label/Label.js';
@@ -26,7 +25,7 @@ const ComboboxOption = memo(forwardRef(({ value, description, children, classNam
     return (jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
             onOptionClick();
             rest.onClick?.(e);
-        }, className: clsx(classes.option, classes[size], active && classes.active, multiple && classes.multiple, className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: classes.optionText, size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }));
+        }, className: clsx('fds-combobox__option', active && 'fds-combobox__option--active', multiple && 'fds-combobox__option--multiple', className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: 'fds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { CheckmarkIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+
+const SelectedIcon = ({ multiple, selected }) => {
+    return (jsx("div", { className: clsx(multiple && 'fds-combobox__option__icon-wrapper', selected && 'fds-combobox__option__icon-wrapper--selected'), children: selected && (jsx(CheckmarkIcon, { className: 'fds-combobox__option__icon-wrapper__icon', "aria-hidden": true })) }));
+};
+SelectedIcon.displayName = 'SelectedIcon';
+
+export { SelectedIcon, SelectedIcon as default };

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

@@ -1,7 +1,7 @@
 'use client';
 import { Combobox as Combobox$1 } from './Combobox.js';
 import { ComboboxOption } from './Option/Option.js';
-import { ComboboxEmpty } from './Empty/Empty.js';
+import { ComboboxEmpty } from './Empty.js';
 
 const Combobox = Combobox$1;
 Combobox.Option = ComboboxOption;

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

@@ -2,17 +2,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import classes from '../Combobox.module.css.js';
 
 const ComboboxClearButton = () => {
     const context = useContext(ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
-    return (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], `fds-focus`), onClick: () => {
+    const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+    return (jsx("button", { disabled: disabled, className: clsx('fds-combobox__clear-button', `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)

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

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import classes from '../Combobox.module.css.js';
 import { ErrorMessage } from '../../../Typography/ErrorMessage/ErrorMessage.js';
 
 const ComboboxError = ({ size, error, formFieldProps, }) => {
-    return (jsx("div", { className: classes.errorMessage, id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ErrorMessage, { size: size, children: error }) }));
+    return (jsx("div", { className: 'fds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ErrorMessage, { size: size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 var ComboboxError$1 = ComboboxError;

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

@@ -1,12 +1,10 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import classes from '../Combobox.module.css.js';
-import textFieldClasses from '../../Textfield/Textfield.module.css.js';
 import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
@@ -22,7 +20,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
     const setActiveIndex = (id) => {
         idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
     };
-    const { forwareddRef, size, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, } = context;
     const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
     // onChange function for the input
     const onChange = (event) => {
@@ -64,10 +62,11 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsxs(Box, { ...props, "aria-disabled": disabled, className: clsx(textFieldClasses.input, classes.inputWrapper, classes[size], readOnly && classes.readonly, error && classes.error), children: [jsxs("div", { className: classes.chipAndInput, children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
+    return (jsxs(Box, { ...props, "aria-disabled": disabled, className: clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
                             onChange(e);
+                            !open && setOpen(true);
                             rest.onChange && rest.onChange(e);
-                        } })] }), showClearButton && jsx(ComboboxClearButton, {}), jsx("div", { className: classes.arrow, children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+                        } })] }), showClearButton && jsx(ComboboxClearButton, {}), jsx("div", { className: 'fds-combobox__arrow', children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 var ComboboxInput$1 = ComboboxInput;

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

@@ -1,13 +1,12 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import classes from '../Combobox.module.css.js';
 import { Label } from '../../../Typography/Label/Label.js';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx(classes.label, hideLabel && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx(classes.description, hideLabel && `fds-sr-only`), children: description }) }))] }));
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx('fds-combobox__label', hideLabel && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'fds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx('fds-combobox__description', hideLabel && `fds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 var ComboboxLabel$1 = ComboboxLabel;

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

@@ -1,7 +1,7 @@
 'use client';
 import { useMemo, Children, useState, isValidElement } from 'react';
 import { ComboboxOption } from './Option/Option.js';
-import ComboboxCustom from './Custom/Custom.js';
+import ComboboxCustom from './Custom.js';
 
 const isOption = (option) => !!option;
 function isComboboxOption(child) {