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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 'use client';
 import { useMemo, Children, useState, isValidElement } from 'react';
 import { ComboboxOption } from './Option/Option.js';
-import ComboboxCustom from './Custom/Custom.js';
+import ComboboxCustom from './Custom.js';
 
 const isOption = (option) => !!option;
 function isComboboxOption(child) {
@@ -79,8 +79,12 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
     const [selectedOptions, setSelectedOptions] = useState(preSelectedOptions);
     const { filteredOptions, filteredOptionsChildren } = 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];
@@ -89,8 +93,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/esm/components/form/Combobox/useFloatingCombobox.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';
 import { autoUpdate, flip, size } from '../../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset } from '../../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { offset } from '../../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
 
 const useFloatingCombobox = ({ listRef }) => {
     const [open, setOpen] = useState(false);

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

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

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

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

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

@@ -2,7 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, forwardRef, useId } from 'react';
 import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
-import classes from './Group.module.css.js';
 import { Fieldset } from '../../Fieldset/Fieldset.js';
 
 const RadioGroupContext = createContext(null);
@@ -14,7 +13,7 @@ const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultVal
                 name: name ?? `radiogroup-name-${nameId}`,
                 onChange,
                 required,
-            }, children: jsx("div", { className: clsx(inline && classes.inline), children: children }) }) }));
+            }, children: jsx("div", { className: clsx('fds-radio-group', inline && 'fds-radio-group--horizontal'), children: children }) }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 

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

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

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

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

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

@@ -1,9 +1,8 @@
 'use client';
 import { jsx, jsxs } 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 { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import classes from './Switch.module.css.js';
 import { useSwitch } from './useSwitch.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { omit } from '../../../utilities/objectUtils.js';
@@ -12,7 +11,7 @@ import { Label } from '../../Typography/Label/Label.js';
 const Switch = forwardRef((props, ref) => {
     const { children, description, position = 'left', className, ...rest } = props;
     const { inputProps, descriptionId, size = 'medium', readOnly, } = useSwitch(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.switch, classes[size], inputProps.disabled && classes.disabled, readOnly && classes.readonly, className), children: [jsx("input", { className: classes.input, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsxs(Label, { className: clsx(classes.label, position === 'right' && classes.right), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsx("span", { className: classes.track, children: jsx("span", { className: classes.thumb }) }), readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), children && jsx("span", { children: children })] }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(`fds-switch`, `fds-switch--${size}`, inputProps.disabled && `fds-switch--disabled`, readOnly && `fds-switch--readonly`, className), children: [jsx("input", { className: `fds-switch__input`, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsxs(Label, { className: clsx(`fds-switch__label`, position === 'right' && `fds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsx("span", { className: `fds-switch__track`, children: jsx("span", { className: `fds-switch__thumb` }) }), readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: `fds-switch__readonly__icon` })), children && jsx("span", { children: children })] }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `fds-switch__description`, children: description }) }))] }) }));
 });
 Switch.displayName = 'Switch';
 

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

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

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

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

package/dist/esm/index.js

@@ -54,15 +54,15 @@ export { PopoverContent } from './components/Popover/PopoverContent.js';
 export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Modal } from './components/Modal/index.js';
-export { ModalContent } from './components/Modal/ModalContent/ModaContent.js';
-export { ModalFooter } from './components/Modal/ModalFooter/ModalFooter.js';
-export { ModalHeader } from './components/Modal/ModalHeader/ModalHeader.js';
-export { ModalTrigger } from './components/Modal/ModalTrigger/ModalTrigger.js';
+export { ModalContent } from './components/Modal/ModaContent.js';
+export { ModalFooter } from './components/Modal/ModalFooter.js';
+export { ModalHeader } from './components/Modal/ModalHeader.js';
+export { ModalTrigger } from './components/Modal/ModalTrigger.js';
 export { ModalDialog } from './components/Modal/ModalDialog.js';
 export { DropdownMenu } from './components/DropdownMenu/index.js';
 export { DropdownMenuContent } from './components/DropdownMenu/DropdownMenuContent.js';
-export { DropdownMenuGroup } from './components/DropdownMenu/DropdownMenuGroup/DropdownMenuGroup.js';
-export { DropdownMenuItem } from './components/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js';
+export { DropdownMenuGroup } from './components/DropdownMenu/DropdownMenuGroup.js';
+export { DropdownMenuItem } from './components/DropdownMenu/DropdownMenuItem.js';
 export { DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenuTrigger.js';
 export { Search } from './components/form/Search/Search.js';
 export { Skeleton } from './components/Skeleton/index.js';
@@ -77,7 +77,7 @@ export { CardFooter } from './components/Card/CardFooter.js';
 export { CardMedia } from './components/Card/CardMedia.js';
 export { Combobox } from './components/form/Combobox/index.js';
 export { ComboboxOption } from './components/form/Combobox/Option/Option.js';
-export { ComboboxEmpty } from './components/form/Combobox/Empty/Empty.js';
+export { ComboboxEmpty } from './components/form/Combobox/Empty.js';
 export { Table } from './components/Table/index.js';
 export { TableHead } from './components/Table/TableHead.js';
 export { TableBody } from './components/Table/TableBody.js';

package/dist/esm/{packages/react/node_modules → node_modules}/@floating-ui/core/dist/floating-ui.core.js

@@ -1,5 +1,5 @@
 'use client';
-import { evaluate, getSide, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, getAlignment, getSideAxis, clamp, getPaddingObject, rectToClientRect, getAlignmentAxis, getOppositeAxis, getAxisLength, min, max } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js';
+import { evaluate, getSide, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, getAlignment, getSideAxis, clamp, getPaddingObject, rectToClientRect, getAlignmentAxis, getOppositeAxis, getAxisLength, min, max } from '../../utils/dist/floating-ui.utils.js';
 
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {

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

@@ -1,5 +1,5 @@
 'use client';
-import _extends from '../../../@babel/runtime/helpers/esm/extends.js';
+import _extends from '../node_modules/@babel/runtime/helpers/esm/extends.js';
 import { forwardRef, Children, isValidElement, createElement, cloneElement, Fragment } from 'react';
 import { composeRefs as $6ed0406888f73fc4$export$43e446d32b3d21af } from '../../react-compose-refs/dist/index.js';
 

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

@@ -1,6 +1,6 @@
 'use client';
-import { shift as shift$1, flip as flip$1, arrow as arrow$1, size as size$1, computePosition as computePosition$1 } from '../../core/dist/floating-ui.core.js';
-export { detectOverflow, offset } from '../../core/dist/floating-ui.core.js';
+import { shift as shift$1, flip as flip$1, arrow as arrow$1, size as size$1, computePosition as computePosition$1 } from '../../../../../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+export { detectOverflow, offset } from '../../../../../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
 import { createCoords, rectToClientRect, round, max, min, floor } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js';
 import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js';
 

package/dist/esm/utilities/AnimateHeight/AnimateHeight.js

@@ -2,7 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './AnimateHeight.module.css.js';
 import { usePrevious } from '../../hooks/usePrevious.js';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 
@@ -36,7 +35,7 @@ const AnimateHeight = ({ children, className, open = false, style, ...rest }) =>
     const transition = state === 'openingOrClosing'
         ? `height ${transitionDurationInMilliseconds}ms ease-in-out`
         : undefined;
-    return (jsx("div", { ...rest, className: clsx(classes.root, classes[state], className), style: { height, transition, ...style }, children: jsx("div", { ref: contentRef, className: classes.content, children: children }) }));
+    return (jsx("div", { ...rest, className: clsx('fds-animate-height', `fds-animate-height--${state}`, className), style: { height, transition, ...style }, children: jsx("div", { ref: contentRef, className: 'fds-animate-height__content', children: children }) }));
 };
 
 export { AnimateHeight };

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

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

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

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

package/dist/esm/utilities/getSize.js

@@ -0,0 +1,29 @@
+'use client';
+function getSize(size) {
+    switch (size) {
+        case 'xxxsmall':
+            return '3xs';
+        case 'xxsmall':
+            return '2xs';
+        case 'xsmall':
+            return 'xs';
+        case 'small':
+            return 'sm';
+        case 'medium':
+            return 'md';
+        case 'large':
+            return 'lg';
+        case 'xlarge':
+            return 'xl';
+        case 'xxlarge':
+            return '2xl';
+        case 'xxxlarge':
+            return '3xl';
+        case 'xxxxlarge':
+            return '4xl';
+        default:
+            return size;
+    }
+}
+
+export { getSize };

package/dist/types/components/Box/Box.d.ts

@@ -1,5 +1,4 @@
 import type { HTMLAttributes } from 'react';
-import type { OverridableComponent } from '../../types/OverridableComponent';
 export type BoxProps = {
     /**
      * Shadow size of the box
@@ -27,5 +26,31 @@ export type BoxProps = {
      */
     asChild?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
-export declare const Box: OverridableComponent<BoxProps, HTMLDivElement>;
+export declare const Box: import("react").ForwardRefExoticComponent<{
+    /**
+     * Shadow size of the box
+     * @default undefined
+     */
+    shadow?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+    /**
+     * Border color of the box
+     * @default undefined
+     */
+    borderColor?: "strong" | "default" | "subtle" | undefined;
+    /**
+     * Border radius of the box
+     * @default undefined
+     */
+    borderRadius?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | "full" | undefined;
+    /**
+     * Background color of the box
+     * @default 'default'
+     */
+    background?: "default" | "subtle" | undefined;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Box.d.ts.map