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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var Option = require('./Option/Option.js');
-var Custom = require('./Custom/Custom.js');
+var Custom = require('./Custom.js');
 
 const isOption = (option) => !!option;
 function isComboboxOption(child) {
@@ -20,35 +20,59 @@ function isInteractiveComboboxCustom(child) {
 function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
     return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
 }, initialValue, }) {
-    const options = React.useMemo(() => {
-        const allOptions = {};
-        React.Children.forEach(children, (child) => {
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = React.useMemo(() => {
+        const allChildren = React.Children.toArray(children);
+        const result = allChildren.reduce((acc, child) => {
             if (isComboboxOption(child)) {
-                const props = child.props;
-                let label = props.displayValue || '';
-                if (!props.displayValue) {
-                    let childrenLabel = '';
-                    // go over children and find all strings
-                    React.Children.forEach(props.children, (child) => {
-                        if (typeof child === 'string') {
-                            childrenLabel += child;
-                        }
-                        else {
-                            throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
-                        }
-                    });
-                    label = childrenLabel;
+                acc.optionsChildren.push(child);
+            }
+            else {
+                acc.restChildren.push(child);
+                if (isInteractiveComboboxCustom(child)) {
+                    const childElement = child;
+                    acc.interactiveChildren.push(childElement);
+                    if (!childElement.props.id) {
+                        throw new Error('If ComboboxCustom is interactive, it must have an id');
+                    }
+                    acc.customIds.push(childElement.props.id);
                 }
-                allOptions[props.value] = {
-                    value: props.value,
-                    label,
-                    displayValue: props.displayValue,
-                    description: props.description,
-                };
             }
+            return acc;
+        }, {
+            optionsChildren: [],
+            customIds: [],
+            restChildren: [],
+            interactiveChildren: [],
         });
-        return allOptions;
+        return result;
     }, [children]);
+    const options = React.useMemo(() => {
+        const allOptions = {};
+        optionsChildren.map((child) => {
+            const props = child.props;
+            let label = props.displayValue || '';
+            if (!props.displayValue) {
+                let childrenLabel = '';
+                // go over children and find all strings
+                React.Children.forEach(props.children, (child) => {
+                    if (typeof child === 'string') {
+                        childrenLabel += child;
+                    }
+                    else {
+                        throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
+                    }
+                });
+                label = childrenLabel;
+            }
+            allOptions[props.value] = {
+                value: props.value,
+                label,
+                displayValue: props.displayValue,
+                description: props.description,
+            };
+        });
+        return allOptions;
+    }, [optionsChildren]);
     const preSelectedOptions = React.useMemo(() => (initialValue || []).reduce((acc, value) => {
         const option = options[value];
         if (isOption(option)) {
@@ -57,22 +81,6 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         return acc;
     }, {}), [initialValue, options]);
     const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
-    const [prevSelectedHash, setPrevSelectedHash] = React.useState(JSON.stringify(selectedOptions));
-    const { optionsChildren, customIds } = React.useMemo(() => {
-        const allChildren = React.Children.toArray(children);
-        const optionsChildren = allChildren.filter((child) => isComboboxOption(child));
-        // find all custom components with `interactive=true` and generate random values for them
-        const customChildren = allChildren.filter((child) => {
-            return isInteractiveComboboxCustom(child);
-        });
-        // return all ids
-        const customIds = customChildren.map((child) => {
-            if (!child.props.id)
-                throw new Error('If ComboboxCustom is interactive, it must have an id');
-            return child.props.id;
-        });
-        return { optionsChildren, customIds };
-    }, [children]);
     const { filteredOptions, filteredOptionsChildren } = React.useMemo(() => {
         const filteredOptions = [];
         const filteredOptionsChildren = Object.keys(options)
@@ -90,35 +98,15 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         return { filteredOptions, filteredOptionsChildren };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
-    const optionValues = React.useMemo(() => {
-        // create an index map of values from optionsChildren
-        const options = optionsChildren.map((child) => {
-            const { value } = child.props;
-            return value;
-        });
-        return [...customIds, ...options];
-    }, [customIds, optionsChildren]);
-    const { restChildren, interactiveChildren } = React.useMemo(() => {
-        const restChildren = React.Children.toArray(children).filter((child) => {
-            return !isComboboxOption(child);
-        });
-        const interactiveChildren = restChildren.filter((child) => {
-            return isInteractiveComboboxCustom(child);
-        });
-        return { restChildren, interactiveChildren };
-    }, [children]);
     return {
         filteredOptionsChildren,
         filteredOptions,
-        optionValues,
         restChildren,
         options,
         customIds,
         selectedOptions,
-        prevSelectedHash,
         interactiveChildren,
         setSelectedOptions,
-        setPrevSelectedHash,
     };
 }
 

package/dist/cjs/components/form/Combobox/useComboboxKeyboard.js

@@ -4,7 +4,7 @@
 var useDebounce = require('../../../utilities/useDebounce.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 
-const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, setInputValue, setSelectedOptions, handleSelectOption, }) => {
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = ComboboxIdContext.useComboboxId();
     // handle keyboard navigation in the list
     const handleKeyDownFunc = (event) => {
@@ -15,16 +15,16 @@ const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filtered
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                if (!open) {
-                    setOpen(true);
-                }
+                if (open)
+                    break;
+                setOpen(true);
                 break;
             case 'ArrowUp':
                 event.preventDefault();
                 /* If we are on the first item, close */
-                if (activeIndex === 0) {
-                    setOpen(false);
-                }
+                if (activeIndex !== 0)
+                    break;
+                setOpen(false);
                 break;
             case 'Enter':
                 event.preventDefault();
@@ -44,30 +44,27 @@ const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filtered
                 const valueIndex = activeIndex - interactiveChildren.length;
                 // eslint-disable-next-line no-case-declarations
                 const option = filteredOptions[valueIndex];
-                if (!multiple) {
-                    // check if option is already selected, if so, deselect it
-                    if (selectedOptions[option]) {
-                        setSelectedOptions({});
-                        setInputValue('');
-                        return;
-                    }
-                }
-                handleSelectOption(options[option]);
+                handleSelectOption({ option: options[option] });
                 break;
             case 'Backspace':
-                if (inputValue === '' &&
-                    multiple &&
-                    Object.keys(selectedOptions).length >= 0) {
-                    setSelectedOptions((prev) => {
-                        const updated = { ...prev };
-                        const keys = Object.keys(updated);
-                        delete updated[keys[keys.length - 1]];
-                        return updated;
-                    });
-                }
-                // if we are in single mode, we need to set activeValue to null
+                // if we are in single mode, we need to set selectedOptions to empty
                 if (!multiple) {
-                    setSelectedOptions({});
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                    break;
+                }
+                if (inputValue === '' && multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    /* Remove last option, and use handleSelectOption */
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
                 }
                 break;
         }

package/dist/cjs/components/form/Fieldset/Fieldset.js

@@ -6,7 +6,6 @@ var React = require('react');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
 var useFieldset = require('./useFieldset.js');
-var Fieldset_module = require('./Fieldset.module.css.js');
 var FieldsetContext = require('./FieldsetContext.js');
 var Label = require('../../Typography/Label/Label.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
@@ -22,7 +21,7 @@ const Fieldset = React.forwardRef((props, ref) => {
             size,
             disabled: props?.disabled,
             readOnly,
-        }, children: jsxRuntime.jsxs("fieldset", { ...fieldsetProps, className: clsx.clsx(Fieldset_module.fieldset, !hideLegend && Fieldset_module.withSpacing, readOnly && Fieldset_module.readonly, props?.disabled && Fieldset_module.disabled, className), ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { className: Fieldset_module.legend, children: jsxRuntime.jsxs("span", { className: clsx.clsx(Fieldset_module.legendContent, hideLegend && `fds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { className: Fieldset_module.padlock, "aria-hidden": true })), legend] }) }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, short: true, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx(Fieldset_module.description, hideLegend && `fds-sr-only`), children: description }) })), children, jsxRuntime.jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: Fieldset_module.errorWrapper, children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) })] }) }));
+        }, children: jsxRuntime.jsxs("fieldset", { ...fieldsetProps, className: clsx.clsx('fds-fieldset', !hideLegend && 'fds-fieldset--spacing', readOnly && 'fds-fieldset--readonly', props?.disabled && 'fds-fieldset--disabled', className), ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { className: 'fds-fieldset__legend', children: jsxRuntime.jsxs("span", { className: clsx.clsx('fds-fieldset__legend__content', hideLegend && `fds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { className: 'fds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, variant: 'short', asChild: true, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx('fds-fieldset__description', hideLegend && `fds-sr-only`), children: description }) })), children, jsxRuntime.jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'fds-fieldset__error-message', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) })] }) }));
 });
 Fieldset.displayName = 'Fieldset';
 

package/dist/cjs/components/form/NativeSelect/NativeSelect.js

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
-var NativeSelect_module = require('./NativeSelect.module.css.js');
 var useNativeSelect = require('./useNativeSelect.js');
 var Label = require('../../Typography/Label/Label.js');
 var objectUtils = require('../../../utilities/objectUtils.js');
@@ -13,9 +12,9 @@ var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
 const NativeSelect = React.forwardRef((props, ref) => {
-    const { children, disabled = false, label, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, errorId, readOnly = false, size = 'medium', } = useNativeSelect.useNativeSelect(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(NativeSelect_module.formField, disabled && NativeSelect_module.disabled, readOnly && NativeSelect_module.readOnly, error && NativeSelect_module.error), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx.clsx(NativeSelect_module.label, hideLabel && 'fds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: NativeSelect_module.padlock })), label] })), jsxRuntime.jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx.clsx(NativeSelect_module.select, NativeSelect_module[size], `fds-focus`, props.multiple && NativeSelect_module.multiple, className), ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...objectUtils.omit(['readOnly', 'disabled'], selectProps), children: children }), error && (jsxRuntime.jsx("div", { id: errorId, className: NativeSelect_module.errorMessage, "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
+    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
+    const { selectProps, descriptionId, errorId, readOnly = false, size = 'medium', } = useNativeSelect.useNativeSelect(props);
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx('fds-native-select--container', disabled && 'fds-native-select--disabled', readOnly && 'fds-native-select--readonly', error && 'fds-native-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx.clsx('fds-native-select__label', hideLabel && 'fds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'fds-native-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx(`fds-native-select__description`, hideLabel && `fds-sr-only`), children: description }) })), jsxRuntime.jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx.clsx('fds-native-select', `fds-native-select--${size}`, `fds-focus`, props.multiple && 'fds-native-select--multiple', className), ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...objectUtils.omit(['readOnly', 'disabled'], selectProps), children: children }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'fds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
 });
 NativeSelect.displayName = 'NativeSelect';
 

package/dist/cjs/components/form/Radio/Group/Group.js

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
-var Group_module = require('./Group.module.css.js');
 var Fieldset = require('../../Fieldset/Fieldset.js');
 
 const RadioGroupContext = React.createContext(null);
@@ -16,7 +15,7 @@ const RadioGroup = React.forwardRef(({ onChange, children, value, readOnly, defa
                 name: name ?? `radiogroup-name-${nameId}`,
                 onChange,
                 required,
-            }, children: jsxRuntime.jsx("div", { className: clsx.clsx(inline && Group_module.inline), children: children }) }) }));
+            }, children: jsxRuntime.jsx("div", { className: clsx.clsx('fds-radio-group', inline && 'fds-radio-group--horizontal'), children: children }) }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 

package/dist/cjs/components/form/Radio/Radio.js

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
-var Radio_module = require('./Radio.module.css.js');
 var useRadio = require('./useRadio.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var objectUtils = require('../../../utilities/objectUtils.js');
@@ -13,7 +12,7 @@ var Label = require('../../Typography/Label/Label.js');
 const Radio = React.forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useRadio.useRadio(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Radio_module.container, Radio_module[size], inputProps.disabled && Radio_module.disabled, hasError && Radio_module.error, readOnly && Radio_module.readonly, className), style: style, children: [jsxRuntime.jsx("input", { className: Radio_module.input, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: Radio_module.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: Radio_module.description, children: description }) }))] }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx('fds-radio', `fds-radio--${size}`, inputProps.disabled && `fds-radio--disabled`, hasError && `fds-radio--error`, readOnly && `fds-radio--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: 'fds-radio__input', ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: 'fds-radio__label', htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: 'fds-radio__description', children: description }) }))] }))] }) }));
 });
 Radio.displayName = 'Radio';
 

package/dist/cjs/components/form/Search/Search.js

@@ -7,7 +7,6 @@ var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
 var floatingUi_react = require('../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var useSearch = require('./useSearch.js');
-var Search_module = require('./Search.module.css.js');
 var Button = require('../../Button/Button.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
@@ -42,7 +41,9 @@ const Search = React.forwardRef((props, ref) => {
     };
     const isSimple = variant === 'simple';
     const showClearButton = Boolean(value ?? internalValue) && !disabled;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: clsx.clsx(Search_module.formField, inputProps.disabled && Search_module.disabled, Search_module[size], className), children: [label && (jsxRuntime.jsx(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx.clsx(Search_module.label, hideLabel && 'fds-sr-only'), children: jsxRuntime.jsx("span", { children: label }) })), jsxRuntime.jsxs("div", { className: Search_module.field, children: [jsxRuntime.jsxs("div", { className: clsx.clsx(Search_module.field, Search_module[size]), children: [isSimple && (jsxRuntime.jsx(akselIcons.MagnifyingGlassIcon, { className: Search_module.icon, "aria-hidden": true })), jsxRuntime.jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx.clsx(Search_module.input, `fds-focus`, isSimple && Search_module.simple, !isSimple && Search_module.withSearchButton), ...objectUtils.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: clsx.clsx(Search_module.clearButton, `fds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `fds-sr-only`, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: Search_module.searchButton, size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsxRuntime.jsx("div", { className: Search_module.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: clsx.clsx('fds-search', inputProps.disabled && 'fds-search--disabled', `fds-search--${size}`, className), children: [label && (jsxRuntime.jsx(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx.clsx('fds-search__label', hideLabel && 'fds-sr-only'), children: jsxRuntime.jsx("span", { children: label }) })), jsxRuntime.jsxs("div", { className: 'fds-search__field', children: [jsxRuntime.jsxs("div", { className: clsx.clsx('fds-search__field', `fds-search--${size}`), children: [isSimple && (jsxRuntime.jsx(akselIcons.MagnifyingGlassIcon, { className: 'fds-search__icon', "aria-hidden": true })), jsxRuntime.jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx.clsx('fds-search__input', `fds-focus`, isSimple
+                                        ? 'fds-search__input--simple'
+                                        : 'fds-search__input--with-search-button'), ...objectUtils.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: clsx.clsx('fds-search__clear-button', `fds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `fds-sr-only`, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: 'fds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsxRuntime.jsx("div", { className: 'fds-search__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
 });
 Search.displayName = 'Search';
 

package/dist/cjs/components/form/Switch/Switch.js

@@ -3,9 +3,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var akselIcons = require('@navikt/aksel-icons');
-var Switch_module = require('./Switch.module.css.js');
 var useSwitch = require('./useSwitch.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var objectUtils = require('../../../utilities/objectUtils.js');
@@ -14,7 +13,7 @@ var Label = require('../../Typography/Label/Label.js');
 const Switch = React.forwardRef((props, ref) => {
     const { children, description, position = 'left', className, ...rest } = props;
     const { inputProps, descriptionId, size = 'medium', readOnly, } = useSwitch.useSwitch(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Switch_module.switch, Switch_module[size], inputProps.disabled && Switch_module.disabled, readOnly && Switch_module.readonly, className), children: [jsxRuntime.jsx("input", { className: Switch_module.input, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: clsx.clsx(Switch_module.label, position === 'right' && Switch_module.right), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: Switch_module.track, children: jsxRuntime.jsx("span", { className: Switch_module.thumb }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: Switch_module.padlock })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: Switch_module.description, children: description }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx(`fds-switch`, `fds-switch--${size}`, inputProps.disabled && `fds-switch--disabled`, readOnly && `fds-switch--readonly`, className), children: [jsxRuntime.jsx("input", { className: `fds-switch__input`, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: lite.clsx(`fds-switch__label`, position === 'right' && `fds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: `fds-switch__track`, children: jsxRuntime.jsx("span", { className: `fds-switch__thumb` }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: `fds-switch__readonly__icon` })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `fds-switch__description`, children: description }) }))] }) }));
 });
 Switch.displayName = 'Switch';
 

package/dist/cjs/components/form/Textarea/Textarea.js

@@ -7,7 +7,6 @@ var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
 var CharacterCounter = require('../CharacterCounter.js');
 var useTextarea = require('./useTextarea.js');
-var Textarea_module = require('./Textarea.module.css.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
 var objectUtils = require('../../../utilities/objectUtils.js');
@@ -27,10 +26,10 @@ const Textarea = React.forwardRef((props, ref) => {
     const characterLimitId = `${textareaProps.id}-charactercount}`;
     const hasCharacterLimit = characterLimit != null;
     const describedBy = clsx.clsx(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: clsx.clsx(Textarea_module.formField, textareaProps.disabled && Textarea_module.disabled, readOnly && Textarea_module.readonly, hasError && Textarea_module.error, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: clsx.clsx(Textarea_module.label, hideLabel && `fds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: Textarea_module.padlock })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx(Textarea_module.description, hideLabel && `fds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: clsx.clsx(Textarea_module.textarea, `fds-focus`, Textarea_module[size]), ref: ref, "aria-describedby": describedBy, ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: clsx.clsx('fds-textarea', `fds-textarea--${size}`, textareaProps.disabled && 'fds-textarea--disabled', readOnly && `fds-textarea--readonly`, hasError && `fds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: clsx.clsx('fds-textarea__label', hideLabel && `fds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'fds-textarea__readonly__icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx('fds-textarea__description', hideLabel && `fds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: clsx.clsx('fds-textarea__input', `fds-focus`), ref: ref, "aria-describedby": describedBy, ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
                         textareaProps?.onChange?.(e);
                         setValue(e.target.value);
-                    } }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: Textarea_module.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+                    } }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'fds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
 });
 Textarea.displayName = 'Textarea';
 

package/dist/cjs/components/form/Textfield/Textfield.js

@@ -7,7 +7,6 @@ var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
 var CharacterCounter = require('../CharacterCounter.js');
 var useTextfield = require('./useTextfield.js');
-var Textfield_module = require('./Textfield.module.css.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
 var objectUtils = require('../../../utilities/objectUtils.js');
@@ -27,10 +26,10 @@ const Textfield = React.forwardRef((props, ref) => {
     const characterLimitId = `textfield-charactercount-${React.useId()}`;
     const hasCharacterLimit = characterLimit != null;
     const describedBy = clsx.clsx(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: clsx.clsx(Textfield_module.formField, Textfield_module[size], inputProps.disabled && Textfield_module.disabled, readOnly && Textfield_module.readonly, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx.clsx(Textfield_module.label, hideLabel && `fds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: Textfield_module.padlock })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx(Textfield_module.description, hideLabel && `fds-sr-only`), children: description }) })), jsxRuntime.jsxs("div", { className: clsx.clsx(Textfield_module.field, hasError && Textfield_module.error), children: [prefix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, short: true, children: jsxRuntime.jsx("div", { className: clsx.clsx(Textfield_module.adornment, Textfield_module.prefix), "aria-hidden": 'true', children: prefix }) })), jsxRuntime.jsx("input", { className: clsx.clsx(Textfield_module.input, Textfield_module[size], `fds-focus`, prefix && Textfield_module.inputPrefix, suffix && Textfield_module.inputSuffix), ref: ref, type: type, "aria-describedby": describedBy, size: htmlSize, ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: clsx.clsx(`fds-textfield`, `fds-textfield--${size}`, inputProps.disabled && `fds-textfield--disabled`, readOnly && `fds-textfield--readonly`, hasError && `fds-textfield--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx.clsx(`fds-textfield__label`, hideLabel && `fds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'fds-textfield__readonly__icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx(`fds-textfield__description`, hideLabel && `fds-sr-only`), children: description }) })), jsxRuntime.jsxs("div", { className: 'fds-textfield__field', children: [prefix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: clsx.clsx(`fds-textfield__adornment`, `fds-textfield__prefix`), "aria-hidden": 'true', children: prefix }) })), jsxRuntime.jsx("input", { className: clsx.clsx(`fds-textfield__input`, `fds-focus`, prefix && `fds-textfield__input--with-prefix`, suffix && `fds-textfield__input--with-suffix`), ref: ref, type: type, "aria-describedby": describedBy, size: htmlSize, ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
                                 inputProps?.onChange?.(e);
                                 setInputValue(e.target.value);
-                            } }), suffix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, short: true, children: jsxRuntime.jsx("div", { className: clsx.clsx(Textfield_module.adornment, Textfield_module.suffix), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: Textfield_module.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+                            } }), suffix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: clsx.clsx(`fds-textfield__adornment`, `fds-textfield__suffix`), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'fds-textfield__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
 });
 Textfield.displayName = 'Textfield';
 

package/dist/cjs/index.js

@@ -56,15 +56,15 @@ var PopoverContent = require('./components/Popover/PopoverContent.js');
 var PopoverTrigger = require('./components/Popover/PopoverTrigger.js');
 var Divider = require('./components/Divider/Divider.js');
 var index$9 = require('./components/Modal/index.js');
-var ModaContent = require('./components/Modal/ModalContent/ModaContent.js');
-var ModalFooter = require('./components/Modal/ModalFooter/ModalFooter.js');
-var ModalHeader = require('./components/Modal/ModalHeader/ModalHeader.js');
-var ModalTrigger = require('./components/Modal/ModalTrigger/ModalTrigger.js');
+var ModaContent = require('./components/Modal/ModaContent.js');
+var ModalFooter = require('./components/Modal/ModalFooter.js');
+var ModalHeader = require('./components/Modal/ModalHeader.js');
+var ModalTrigger = require('./components/Modal/ModalTrigger.js');
 var ModalDialog = require('./components/Modal/ModalDialog.js');
 var index$a = require('./components/DropdownMenu/index.js');
 var DropdownMenuContent = require('./components/DropdownMenu/DropdownMenuContent.js');
-var DropdownMenuGroup = require('./components/DropdownMenu/DropdownMenuGroup/DropdownMenuGroup.js');
-var DropdownMenuItem = require('./components/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js');
+var DropdownMenuGroup = require('./components/DropdownMenu/DropdownMenuGroup.js');
+var DropdownMenuItem = require('./components/DropdownMenu/DropdownMenuItem.js');
 var DropdownMenuTrigger = require('./components/DropdownMenu/DropdownMenuTrigger.js');
 var Search = require('./components/form/Search/Search.js');
 var index$b = require('./components/Skeleton/index.js');
@@ -79,7 +79,7 @@ var CardFooter = require('./components/Card/CardFooter.js');
 var CardMedia = require('./components/Card/CardMedia.js');
 var index$d = require('./components/form/Combobox/index.js');
 var Option = require('./components/form/Combobox/Option/Option.js');
-var Empty = require('./components/form/Combobox/Empty/Empty.js');
+var Empty = require('./components/form/Combobox/Empty.js');
 var index$e = require('./components/Table/index.js');
 var TableHead = require('./components/Table/TableHead.js');
 var TableBody = require('./components/Table/TableBody.js');

package/dist/cjs/node_modules/clsx/dist/clsx.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 exports.clsx = clsx;
 exports.default = clsx;

package/dist/cjs/node_modules/clsx/dist/lite.js

@@ -0,0 +1,9 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function clsx(){for(var t,r=0,e="",n=arguments.length;r<n;r++)(t=arguments[r])&&"string"==typeof t&&(e+=(e&&" ")+t);return e}
+
+exports.clsx = clsx;
+exports.default = clsx;

package/dist/cjs/utilities/AnimateHeight/AnimateHeight.js

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var AnimateHeight_module = require('./AnimateHeight.module.css.js');
 var usePrevious = require('../../hooks/usePrevious.js');
 var useMediaQuery = require('../../hooks/useMediaQuery.js');
 
@@ -38,7 +37,7 @@ const AnimateHeight = ({ children, className, open = false, style, ...rest }) =>
     const transition = state === 'openingOrClosing'
         ? `height ${transitionDurationInMilliseconds}ms ease-in-out`
         : undefined;
-    return (jsxRuntime.jsx("div", { ...rest, className: clsx.clsx(AnimateHeight_module.root, AnimateHeight_module[state], className), style: { height, transition, ...style }, children: jsxRuntime.jsx("div", { ref: contentRef, className: AnimateHeight_module.content, children: children }) }));
+    return (jsxRuntime.jsx("div", { ...rest, className: clsx.clsx('fds-animate-height', `fds-animate-height--${state}`, className), style: { height, transition, ...style }, children: jsxRuntime.jsx("div", { ref: contentRef, className: 'fds-animate-height__content', children: children }) }));
 };
 
 exports.AnimateHeight = AnimateHeight;

package/dist/cjs/utilities/RovingTabIndex/RovingTabindexItem.js

@@ -17,8 +17,8 @@ function getPrevFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
-const RovingTabindexItem = React.forwardRef(({ value, as = 'div', asChild, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : as;
+const RovingTabindexItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'div';
     const focusValue = value ?? (typeof rest.children == 'string' ? rest.children : '');
     const { getOrderedItems, getRovingProps } = useRovingTabindex.useRovingTabindex(focusValue);
     const rovingProps = getRovingProps({

package/dist/cjs/utilities/RovingTabIndex/RovingTabindexRoot.js

@@ -17,8 +17,8 @@ const RovingTabindexContext = React.createContext({
     },
     focusableValue: null,
 });
-const RovingTabindexRoot = React.forwardRef(({ valueId, as = 'div', asChild, onBlur, onFocus, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : as;
+const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'div';
     const [focusableValue, setFocusableValue] = React.useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = React.useState(false);
     const elements = React.useRef(new Map());

package/dist/esm/components/Accordion/Accordion.js

@@ -2,11 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Accordion.module.css.js';
 
-const Accordion = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsx("div", { className: clsx(classes.accordion, classes[color], {
-        [classes.border]: border,
-    }, className), ref: ref, ...rest })));
+const Accordion = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsx("div", { className: clsx('fds-accordion', border && 'fds-accordion--border', color && `fds-accordion--${color}`, className), ref: ref, ...rest })));
 Accordion.displayName = 'Accordion';
 
 export { Accordion };

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

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

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

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

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

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