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

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

@@ -3,11 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../../node_modules/clsx/dist/lite.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var SelectedIcon = require('./Icon/SelectedIcon.js');
-var Option_module = require('./Option.module.css.js');
-var Description = require('./Description/Description.js');
+var SelectedIcon = require('./SelectedIcon.js');
+var Description = require('./Description.js');
 var useComboboxOption = require('./useComboboxOption.js');
 var objectUtils = require('../../../../utilities/objectUtils.js');
 var Label = require('../../../Typography/Label/Label.js');
@@ -28,7 +27,7 @@ const ComboboxOption = React.memo(React.forwardRef(({ value, description, childr
     return (jsxRuntime.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.clsx(Option_module.option, Option_module[size], active && Option_module.active, multiple && Option_module.multiple, className), ...objectUtils.omit(['displayValue'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: Option_module.optionText, size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description.default, { children: description }))] })] }));
+        }, className: lite.clsx('fds-combobox__option', active && 'fds-combobox__option--active', multiple && 'fds-combobox__option--multiple', className), ...objectUtils.omit(['displayValue'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: 'fds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description.default, { children: description }))] })] }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var akselIcons = require('@navikt/aksel-icons');
+var lite = require('../../../../node_modules/clsx/dist/lite.js');
+
+const SelectedIcon = ({ multiple, selected }) => {
+    return (jsxRuntime.jsx("div", { className: lite.clsx(multiple && 'fds-combobox__option__icon-wrapper', selected && 'fds-combobox__option__icon-wrapper--selected'), children: selected && (jsxRuntime.jsx(akselIcons.CheckmarkIcon, { className: 'fds-combobox__option__icon-wrapper__icon', "aria-hidden": true })) }));
+};
+SelectedIcon.displayName = 'SelectedIcon';
+
+exports.SelectedIcon = SelectedIcon;
+exports.default = SelectedIcon;

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

@@ -3,7 +3,7 @@
 
 var Combobox$1 = require('./Combobox.js');
 var Option = require('./Option/Option.js');
-var Empty = require('./Empty/Empty.js');
+var Empty = require('./Empty.js');
 
 const Combobox = Combobox$1.Combobox;
 Combobox.Option = Option.ComboboxOption;

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

@@ -6,17 +6,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
-var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../../node_modules/clsx/dist/lite.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var Combobox_module = require('../Combobox.module.css.js');
 
 const ComboboxClearButton = () => {
     const context = React.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
-    return (jsxRuntime.jsx("button", { disabled: disabled, className: clsx.clsx(Combobox_module.clearButton, Combobox_module[size], `fds-focus`), onClick: () => {
+    const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+    return (jsxRuntime.jsx("button", { disabled: disabled, className: lite.clsx('fds-combobox__clear-button', `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)

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

@@ -4,11 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var Combobox_module = require('../Combobox.module.css.js');
 var ErrorMessage = require('../../../Typography/ErrorMessage/ErrorMessage.js');
 
 const ComboboxError = ({ size, error, formFieldProps, }) => {
-    return (jsxRuntime.jsx("div", { className: Combobox_module.errorMessage, id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }));
+    return (jsxRuntime.jsx("div", { className: 'fds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 var ComboboxError$1 = ComboboxError;

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

@@ -5,12 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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 floatingUi_react = require('../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var Combobox_module = require('../Combobox.module.css.js');
-var Textfield_module = require('../../Textfield/Textfield.module.css.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
@@ -26,7 +24,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 = floatingUi_react.useMergeRefs([forwareddRef, inputRef]);
     // onChange function for the input
     const onChange = (event) => {
@@ -68,10 +66,11 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled, className: clsx.clsx(Textfield_module.input, Combobox_module.inputWrapper, Combobox_module[size], readOnly && Combobox_module.readonly, error && Combobox_module.error), children: [jsxRuntime.jsxs("div", { className: Combobox_module.chipAndInput, children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.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, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
+    return (jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled, className: lite.clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.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, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
                             onChange(e);
+                            !open && setOpen(true);
                             rest.onChange && rest.onChange(e);
-                        } })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: Combobox_module.arrow, children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+                        } })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: 'fds-combobox__arrow', children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 var ComboboxInput$1 = ComboboxInput;

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

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

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) {

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/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/Box/Box.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } 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 { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Box.module.css.js';
 
-const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, as = 'div', className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(shadow && classes[shadow + 'Shadow'], borderRadius && classes[borderRadius + 'BorderRadius'], borderColor && classes[borderColor + 'BorderColor'], classes[background + 'Background'], className), ...rest, children: children }));
+const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { ref: ref, className: clsx(shadow && `fds-box--${shadow}-shadow`, borderColor && `fds-box--${borderColor}-border-color`, borderRadius && `fds-box--${borderRadius}-border-radius`, `fds-box--${background}-background`, className), ...rest, children: children }));
 });
 Box.displayName = 'Box';
 

package/dist/esm/components/Button/Button.js

@@ -7,8 +7,8 @@ import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_mo
 /**
  * Button used for interaction
  */
-const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
     return (jsx(Component, { ref: ref, type: type, className: clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
 });
 Button.displayName = 'Button';

package/dist/esm/components/Card/Card.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } 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 { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Card.module.css.js';
 
-const Card = forwardRef(({ color = 'neutral', as = 'div', isLink = false, asChild = false, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.card, classes[color], isLink && classes.linkCard, isLink && `fds-focus`, className), ...rest }));
+const Card = forwardRef(({ color = 'neutral', isLink = false, asChild = false, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { ref: ref, className: clsx(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

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

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } 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 { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Card.module.css.js';
 
 const CardContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.content, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__content`, className), ref: ref, ...rest }));
 });
 CardContent.displayName = 'CardContent';
 

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

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } 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 { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Card.module.css.js';
 
 const CardFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.footer, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__footer`, className), ref: ref, ...rest }));
 });
 CardFooter.displayName = 'CardFooter';
 

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

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } 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 { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Card.module.css.js';
 
 const CardHeader = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.header, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__header`, className), ref: ref, ...rest }));
 });
 CardHeader.displayName = 'CardHeader';
 

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

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } 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 { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Card.module.css.js';
 
 const CardMedia = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(classes.media, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`fds-card__media`, className), ref: ref, ...rest }));
 });
 CardMedia.displayName = 'CardMedia';
 

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

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