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

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

@@ -5,13 +5,12 @@ 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 index = require('../../../../node_modules/@radix-ui/react-slot/dist/index.js');
-var floatingUi_react = require('../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var ComboboxContext = require('../ComboboxContext.js');
-var ComboboxIdContext = require('../ComboboxIdContext.js');
-var Custom_module = require('./Custom.module.css.js');
-var objectUtils = require('../../../../utilities/objectUtils.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var floatingUi_react = require('../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var ComboboxContext = require('./ComboboxContext.js');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+var objectUtils = require('../../../utilities/objectUtils.js');
 
 const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -24,7 +23,7 @@ const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className,
     if (!context) {
         throw new Error('ComboboxCustom must be used within a Combobox');
     }
-    const { size, customIds, listRef, getItemProps } = context;
+    const { customIds, listRef, getItemProps } = context;
     const index$1 = React.useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
     const combinedRef = floatingUi_react.useMergeRefs([
         (node) => {
@@ -32,7 +31,7 @@ const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className,
         },
         ref,
     ]);
-    return (jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx.clsx(Custom_module.custom, Custom_module[size], className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, ...objectUtils.omit(['interactive'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], getItemProps()) }));
+    return (jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: lite.clsx('fds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, ...objectUtils.omit(['interactive'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], getItemProps()) }));
 });
 var ComboboxCustom$1 = ComboboxCustom;
 

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

@@ -5,17 +5,16 @@ 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 ComboboxContext = require('../ComboboxContext.js');
-var Empty_module = require('./Empty.module.css.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
+var ComboboxContext = require('./ComboboxContext.js');
 
 const ComboboxEmpty = React.forwardRef(({ children, className, ...rest }, ref) => {
     const context = React.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxEmpty must be used within a Combobox');
     }
-    const { filteredOptions, size } = context;
-    return (filteredOptions.length === 0 && (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Empty_module.empty, Empty_module[size], className), ...rest, children: children })));
+    const { filteredOptions } = context;
+    return (filteredOptions.length === 0 && (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('fds-combobox__empty', className), ...rest, children: children })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

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

@@ -5,11 +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 Description_module = require('./Description.module.css.js');
+var lite = require('../../../../node_modules/clsx/dist/lite.js');
 
 const ComboboxOptionDescription = React.forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("span", { className: clsx.clsx(Description_module.description, className), ref: ref, ...rest, children: children }));
+    return (jsxRuntime.jsx("span", { className: lite.clsx('fds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
 var ComboboxOptionDescription$1 = ComboboxOptionDescription;

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) {
@@ -83,8 +83,12 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
     const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
     const { filteredOptions, filteredOptionsChildren } = React.useMemo(() => {
         const filteredOptions = [];
-        const filteredOptionsChildren = Object.keys(options)
-            .map((option, index) => {
+        const filteredOptionsChildren = Object.keys(options).map((option, index) => {
+            /* If we have a selected value in single mode and the input matches an option, return all children */
+            if (!multiple && Object.keys(selectedOptions).length === 1) {
+                filteredOptions.push(options[option].value);
+                return optionsChildren[index];
+            }
             if (multiple && selectedOptions[option]) {
                 filteredOptions.push(options[option].value);
                 return optionsChildren[index];
@@ -93,8 +97,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
                 filteredOptions.push(options[option].value);
                 return optionsChildren[index];
             }
-        })
-            .filter((child) => child);
+        });
         return { filteredOptions, filteredOptionsChildren };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputValue, multiple, options, optionsChildren, selectedOptions]);

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

@@ -6,7 +6,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 var floatingUi_dom = require('../../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
-var floatingUi_core = require('../../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js');
+var floatingUi_core = require('../../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 
 const useFloatingCombobox = ({ listRef }) => {
     const [open, setOpen] = React.useState(false);

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/{packages/react/node_modules → node_modules}/@floating-ui/core/dist/floating-ui.core.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var floatingUi_utils = require('../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
+var floatingUi_utils = require('../../utils/dist/floating-ui.utils.js');
 
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {

package/dist/cjs/node_modules/@radix-ui/react-slot/dist/index.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var _extends = require('../../../@babel/runtime/helpers/esm/extends.js');
+var _extends = require('../node_modules/@babel/runtime/helpers/esm/extends.js');
 var React = require('react');
 var index = require('../../react-compose-refs/dist/index.js');
 

package/dist/cjs/packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var floatingUi_core = require('../../core/dist/floating-ui.core.js');
+var floatingUi_core = require('../../../../../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 var floatingUi_utils = require('../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
 var floatingUi_utils_dom = require('../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.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());