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

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

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

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

package/dist/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/node_modules/clsx/dist/clsx.js

@@ -1,4 +1,4 @@
 'use client';
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 export { clsx, clsx as default };

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

@@ -0,0 +1,4 @@
+'use client';
+function clsx(){for(var t,r=0,e="",n=arguments.length;r<n;r++)(t=arguments[r])&&"string"==typeof t&&(e+=(e&&" ")+t);return e}
+
+export { clsx, clsx as default };

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/types/components/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvD,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5D,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS;IARpB,iCAAiC;;IAEjC,kBAAkB;;IAElB,oCAAoC;cAC1B,SAAS;mFAkBpB,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5D,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS;IARpB,iCAAiC;;IAEjC,kBAAkB;;IAElB,oCAAoC;cAC1B,SAAS;mFAgBpB,CAAC"}

package/dist/types/components/Accordion/AccordionContent/AccordionContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionContent/AccordionContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,gBAAgB;IAJ3B,wCAAwC;cAC9B,SAAS;mFAmCnB,CAAC"}
+{"version":3,"file":"AccordionContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionContent/AccordionContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,gBAAgB;IAJ3B,wCAAwC;cAC9B,SAAS;mFAmCnB,CAAC"}

package/dist/types/components/Accordion/AccordionHeader/AccordionHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO1E,MAAM,MAAM,oBAAoB,GAAG;IACjC,uGAAuG;IACvG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC,eAAO,MAAM,eAAe;IAR1B,uGAAuG;;IAEvG,oCAAoC;oBACpB,kBAAkB,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAkDnB,CAAC"}
+{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM1E,MAAM,MAAM,oBAAoB,GAAG;IACjC,uGAAuG;IACvG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,oCAAoC;IACpC,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC,eAAO,MAAM,eAAe;IAR1B,uGAAuG;;IAEvG,oCAAoC;oBACpB,kBAAkB,iBAAiB,CAAC,GAAG,SAAS;IAChE,mBAAmB;cACT,SAAS;2FAkDnB,CAAC"}

package/dist/types/components/Accordion/AccordionItem/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,2DACsB,CAAC;AAExD,eAAO,MAAM,aAAa;IArBxB;;;;OAIG;;IAEH,wDAAwD;;IAExD,2EAA2E;cACjE,SAAS;mFA6CpB,CAAC"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,2DACsB,CAAC;AAExD,eAAO,MAAM,aAAa;IArBxB;;;;OAIG;;IAEH,wDAAwD;;IAExD,2EAA2E;cACjE,SAAS;mFA2CpB,CAAC"}

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?: "small" | "medium" | "large" | "xsmall" | "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

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAI7E,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5D;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC9C;;;OAGG;IACH,YAAY,CAAC,EACT,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,UAAU,GACV,WAAW,GACX,MAAM,CAAC;IACX;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG,EAAE,oBAAoB,CAAC,QAAQ,EAAE,cAAc,CAiC9D,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5D;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC9C;;;OAGG;IACH,YAAY,CAAC,EACT,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,GACT,UAAU,GACV,WAAW,GACX,MAAM,CAAC;IACX;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,GAAG;IAnCd;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAUH;;;OAGG;;IAEH;;;OAGG;;mFAoCJ,CAAC"}