@digdir/designsystemet-react 0.60.0 → 0.62.0

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

@@ -1,11 +1,12 @@
 'use client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useId, useState, useEffect } from 'react';
-import { FloatingPortal, FloatingFocusManager } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { FloatingPortal, FloatingFocusManager } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { useVirtualizer } from '../../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
 import { useFormField } from '../useFormField.js';
 import useDebounce from '../../../utilities/useDebounce.js';
+import { getSize } from '../../../utilities/getSize.js';
 import useCombobox from './useCombobox.js';
 import ComboboxInput from './internal/ComboboxInput.js';
 import ComboboxLabel from './internal/ComboboxLabel.js';
@@ -20,7 +21,8 @@ import { Box } from '../../Box/Box.js';
 import { Spinner } from '../../Spinner/Spinner.js';
 import { omit } from '../../../utilities/objectUtils.js';
 
-const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+    const size = getSize(rest.size || 'md');
     const inputRef = useRef(null);
     const portalRef = useRef(null);
     const listRef = useRef([]);
@@ -94,6 +96,10 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             inputRef.current?.focus();
         }
         else {
+            /* clear newSelectedOptions */
+            Object.keys(newSelectedOptions).forEach((key) => {
+                delete newSelectedOptions[key];
+            });
             newSelectedOptions[option.value] = option;
             setInputValue(option?.label || '');
             // move cursor to the end of the input
@@ -102,7 +108,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             }, 0);
         }
         setSelectedOptions(newSelectedOptions);
-        console.log('calling new value with: ', Object.keys(newSelectedOptions));
         onValueChange?.(Object.keys(newSelectedOptions));
         !multiple && setOpen(false);
         refs.domReference.current?.focus();
@@ -164,7 +169,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             chipSrLabel,
             listRef,
             forwareddRef,
-        }, children: [jsxs(Box, { className: clsx('fds-combobox', `fds-combobox--${size}`, disabled && 'fds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'medium', borderRadius: 'medium', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs(Box, { className: clsx('fds-combobox', `fds-combobox--${size}`, disabled && 'fds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'md', borderRadius: 'md', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,
@@ -179,7 +184,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'fds-combobox__loading', children: [jsx(Spinner, { title: 'Laster', size: 'small' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'fds-combobox__loading', children: [jsx(Spinner, { title: 'Laster', size: 'sm' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
 });
 const Combobox = forwardRef((props, ref) => (jsx(ComboboxIdProvider, { children: jsx(ComboboxComponent, { ...props, ref: ref }) })));
 Combobox.displayName = 'Combobox';

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

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useContext, useMemo } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { useMergeRefs } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
 import { omit } from '../../../utilities/objectUtils.js';

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

@@ -1,6 +1,6 @@
 'use client';
 import { useId, useContext, useMemo, useEffect } from 'react';
-import { useMergeRefs } from '../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import useDebounce from '../../../../utilities/useDebounce.js';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';

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

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 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 { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import ComboboxChips from './ComboboxChips.js';

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

@@ -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

@@ -1,10 +1,10 @@
 'use client';
-import { useFloating, useRole, useDismiss, useListNavigation, useInteractions } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useFloating, useRole, useDismiss, useListNavigation, useInteractions } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 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 { autoUpdate, flip, size } from '../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext } 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 { useFieldset } from './useFieldset.js';
 import { FieldsetContext } from './FieldsetContext.js';

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

@@ -1,7 +1,7 @@
 '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 { useNativeSelect } from './useNativeSelect.js';
 import { Label } from '../../Typography/Label/Label.js';
@@ -11,7 +11,7 @@ import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const NativeSelect = forwardRef((props, ref) => {
     const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly = false, size = 'medium', } = useNativeSelect(props);
+    const { selectProps, descriptionId, errorId, readOnly = false, size = 'md', } = 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/NativeSelect/useNativeSelect.js

@@ -2,15 +2,17 @@
 import { useContext } from 'react';
 import { useFormField } from '../useFormField.js';
 import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
+import { getSize } from '../../../utilities/getSize.js';
 
 /** Handles props for `NativeSelect` in context with `Fieldset` */
 const useNativeSelect = (props) => {
     const fieldset = useContext(FieldsetContext);
     const { inputProps: selectProps, readOnly, ...rest } = useFormField(props, 'select');
+    const size = getSize(fieldset?.size ?? props.size ?? 'md');
     return {
         ...rest,
         readOnly,
-        size: fieldset?.size ?? props.size,
+        size,
         selectProps: {
             ...selectProps,
             readOnly,

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, forwardRef, useId } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { Fieldset } from '../../Fieldset/Fieldset.js';
 
 const RadioGroupContext = createContext(null);
-const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'medium', required, inline, className, ...rest }, ref) => {
+const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
     const nameId = useId();
     return (jsx(Fieldset, { readOnly: readOnly, size: size, className: className, ref: ref, ...rest, children: jsx(RadioGroupContext.Provider, { value: {
                 value,

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs, Fragment } 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 { useRadio } from './useRadio.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { omit } from '../../../utilities/objectUtils.js';
@@ -9,7 +9,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);
+    const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useRadio(props);
     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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useCallback } from 'react';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
-import { useMergeRefs } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { useSearch } from './useSearch.js';
 import { Button } from '../../Button/Button.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
@@ -20,7 +20,7 @@ import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
  */
 const Search = forwardRef((props, ref) => {
     const { label, style, hideLabel = true, variant = 'simple', searchButtonLabel = 'Søk', clearButtonLabel = 'Tøm', defaultValue, value, onChange, onClear, disabled, onSearchClick, htmlSize = 27, className, ...rest } = props;
-    const { inputProps, hasError, errorId, size = 'medium' } = useSearch(props);
+    const { inputProps, hasError, errorId, size = 'md' } = useSearch(props);
     const inputRef = useRef();
     const mergedRef = useMergeRefs([ref, inputRef]);
     const [internalValue, setInternalValue] = useState(defaultValue ?? '');

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

@@ -2,21 +2,17 @@
 import { useContext } from 'react';
 import { useFormField } from '../useFormField.js';
 import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
+import { getSize } from '../../../utilities/getSize.js';
 
-const sizeMap = {
-    small: 'small',
-    medium: 'medium',
-    large: 'large',
-};
 /** Handles props for `Search` in context with `Fieldset` */
 const useSearch = (props) => {
     const fieldset = useContext(FieldsetContext);
     const { inputProps, readOnly, ...rest } = useFormField(props, 'search');
-    const fieldSetSize = fieldset?.size ? sizeMap[fieldset?.size] : null;
+    const size = fieldset?.size ?? getSize(props.size || 'md');
     return {
         ...rest,
         readOnly,
-        size: fieldSetSize ?? props.size,
+        size,
         inputProps: {
             ...inputProps,
             type: 'search',

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

@@ -10,7 +10,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);
+    const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch(props);
     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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState } 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 { CharacterCounter } from '../CharacterCounter.js';
 import { useTextarea } from './useTextarea.js';
@@ -19,7 +19,7 @@ import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
  */
 const Textarea = forwardRef((props, ref) => {
     const { label, description, style, characterLimit, hideLabel, className, ...rest } = props;
-    const { textareaProps, descriptionId, hasError, errorId, size = 'medium', readOnly, } = useTextarea(props);
+    const { textareaProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextarea(props);
     const [value, setValue] = useState(props.defaultValue);
     const characterLimitId = `${textareaProps.id}-charactercount}`;
     const hasCharacterLimit = characterLimit != null;

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

@@ -2,15 +2,17 @@
 import { useContext } from 'react';
 import { useFormField } from '../useFormField.js';
 import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
+import { getSize } from '../../../utilities/getSize.js';
 
 /** Handles props for `Textarea` in context with `Fieldset` */
 const useTextarea = (props) => {
     const fieldset = useContext(FieldsetContext);
     const { inputProps, readOnly, ...rest } = useFormField(props, 'textarea');
+    const size = fieldset?.size ?? getSize(props.size ?? 'md');
     return {
         ...rest,
         readOnly,
-        size: fieldset?.size ?? props.size,
+        size,
         textareaProps: {
             ...inputProps,
             readOnly,

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState, useId } 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 { CharacterCounter } from '../CharacterCounter.js';
 import { useTextfield } from './useTextfield.js';
@@ -19,8 +19,8 @@ import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
  */
 const Textfield = forwardRef((props, ref) => {
     const { label, description, suffix, prefix, style, characterLimit, hideLabel, type = 'text', htmlSize = 20, className, ...rest } = props;
-    const { inputProps, descriptionId, hasError, errorId, size = 'medium', readOnly, } = useTextfield(props);
-    const [inputValue, setInputValue] = useState(props.defaultValue);
+    const { inputProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextfield(props);
+    const [inputValue, setInputValue] = useState(props.value || props.defaultValue);
     const characterLimitId = `textfield-charactercount-${useId()}`;
     const hasCharacterLimit = characterLimit != null;
     const describedBy = clsx(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;

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

@@ -2,15 +2,17 @@
 import { useContext } from 'react';
 import { useFormField } from '../useFormField.js';
 import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
+import { getSize } from '../../../utilities/getSize.js';
 
 /** Handles props for `Textfield` in context with `Fieldset` */
 const useTextfield = (props) => {
     const fieldset = useContext(FieldsetContext);
     const { inputProps, readOnly, ...rest } = useFormField(props, 'textfield');
+    const size = getSize(fieldset?.size ?? props.size ?? 'md');
     return {
         ...rest,
         readOnly,
-        size: fieldset?.size ?? props.size,
+        size,
         inputProps: {
             ...inputProps,
             readOnly,

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

@@ -1,6 +1,7 @@
 'use client';
 import { useContext, useId } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { getSize } from '../../utilities/getSize.js';
 import { FieldsetContext } from './Fieldset/FieldsetContext.js';
 
 /**
@@ -15,21 +16,18 @@ const useFormField = (props, prefix) => {
     const disabled = fieldset?.disabled || props?.disabled;
     const readOnly = ((fieldset?.readOnly || props?.readOnly) && !disabled) || undefined;
     const hasError = !disabled && !readOnly && !!(props.error || fieldset?.error);
+    const size = getSize(props.size || fieldset?.size || 'md');
     return {
         readOnly,
         hasError,
         errorId,
         descriptionId,
-        size: props?.size ?? fieldset?.size ?? 'medium',
+        size,
         inputProps: {
             id,
             disabled,
             'aria-invalid': hasError ? true : undefined,
-            'aria-describedby': clsx(props['aria-describedby'], {
-                [descriptionId]: !!props?.description && typeof props?.description === 'string',
-                [errorId]: hasError && !fieldset?.error,
-                [fieldset?.errorId ?? '']: hasError && !!fieldset?.error,
-            }) || undefined,
+            'aria-describedby': clsx(props['aria-describedby'], (!!props?.description && typeof props?.description === 'string') && descriptionId, (hasError && !fieldset?.error) && errorId, (hasError && !!fieldset?.error) && fieldset?.errorId) || undefined,
         },
     };
 };

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

@@ -1,8 +1,8 @@
 '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 { 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';
+import { createCoords, rectToClientRect, round, max, min, floor } from '../../utils/dist/floating-ui.utils.js';
+import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../utils/dist/floating-ui.utils.dom.js';
 
 function getCssDimensions(element) {
   const css = getComputedStyle(element);

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

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import { useLayoutEffect, useEffect, useRef } from 'react';
 import { getDocument, isMouseLikePointerType, isTypeableCombobox, activeElement, contains, isVirtualClick, isVirtualPointerEvent, getTarget, isSafari, isMac, isTypeableElement, stopEvent, isReactEvent, isRootElement, isEventTargetWithin } from './floating-ui.react.utils.js';
-import { floor } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js';
+import { floor } from '../../utils/dist/floating-ui.utils.js';
 import { useFloating as useFloating$1 } from '../../react-dom/dist/floating-ui.react-dom.js';
 export { arrow } from '../../react-dom/dist/floating-ui.react-dom.js';
-import { isElement, isHTMLElement, getOverflowAncestors, getWindow, getNodeName, isLastTraversableNode, getParentNode, getComputedStyle } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js';
+import { isElement, isHTMLElement, getOverflowAncestors, getWindow, getNodeName, isLastTraversableNode, getParentNode, getComputedStyle } from '../../utils/dist/floating-ui.utils.dom.js';
 import { tabbable, isTabbable } from '../../../tabbable/dist/index.esm.js';
 import { createPortal } from 'react-dom';
 import { platform } from '../../dom/dist/floating-ui.dom.js';

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

@@ -1,5 +1,5 @@
 'use client';
-import { isShadowRoot, isHTMLElement } from '../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js';
+import { isShadowRoot, isHTMLElement } from '../../utils/dist/floating-ui.utils.dom.js';
 
 function activeElement(doc) {
   let activeElement = doc.activeElement;

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/utilities/AnimateHeight/AnimateHeight.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { usePrevious } from '../../hooks/usePrevious.js';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useMergeRefs } from '../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { useRovingTabindex } from './useRovingTabindex.js';
 

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, forwardRef, useState, useRef } from 'react';
-import { useMergeRefs } from '../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
 const RovingTabindexContext = createContext({

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/Alert/Alert.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'react';
 type Severity = 'info' | 'warning' | 'success' | 'danger';
+type OldAlertSizes = 'small' | 'medium' | 'large';
 export type AlertProps = {
     /** Sets color & icon according to severity */
     severity?: Severity;
@@ -10,12 +11,15 @@ export type AlertProps = {
      * Use this to inform screenreaders of severity.
      *  Defaults to Norwegian. */
     iconTitle?: string;
-    /** Sets the size of the alert.
+    /**
+     * Sets the size of the alert.
      * Does not affect font size.
      *
-     * @default 'medium'
+     * @default md
+     *
+     * @note `small`, `medium`, `large` is deprecated
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'sm' | 'md' | 'lg' | OldAlertSizes;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Alert: import("react").ForwardRefExoticComponent<{
     /** Sets color & icon according to severity */
@@ -27,12 +31,15 @@ export declare const Alert: import("react").ForwardRefExoticComponent<{
      * Use this to inform screenreaders of severity.
      *  Defaults to Norwegian. */
     iconTitle?: string | undefined;
-    /** Sets the size of the alert.
+    /**
+     * Sets the size of the alert.
      * Does not affect font size.
      *
-     * @default 'medium'
+     * @default md
+     *
+     * @note `small`, `medium`, `large` is deprecated
      */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "sm" | "md" | "lg" | OldAlertSizes | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA4B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;iCAG6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AACnC,eAAO,MAAM,KAAK;IAhBhB,8CAA8C;;IAE9C,6CAA6C;;IAE7C;;;iCAG6B;;IAE7B;;;;OAIG;;mFA8CJ,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA6B5C,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,KAAK,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;iCAG6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAa,CAAC;CAC3C,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AACnC,eAAO,MAAM,KAAK;IAnBhB,8CAA8C;;IAE9C,6CAA6C;;IAE7C;;;iCAG6B;;IAE7B;;;;;;;OAOG;;mFAuCJ,CAAC"}

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

@@ -1,10 +1,12 @@
 import type { HTMLAttributes } from 'react';
+type OldShadowSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type OldBorderRadii = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge';
 export type BoxProps = {
     /**
      * Shadow size of the box
      * @default undefined
      */
-    shadow?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | OldShadowSizes;
     /**
      * Border color of the box
      * @default undefined
@@ -14,7 +16,7 @@ export type BoxProps = {
      * Border radius of the box
      * @default undefined
      */
-    borderRadius?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'full';
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full' | OldBorderRadii;
     /**
      * Background color of the box
      * @default 'default'
@@ -31,7 +33,7 @@ export declare const Box: import("react").ForwardRefExoticComponent<{
      * Shadow size of the box
      * @default undefined
      */
-    shadow?: "small" | "medium" | "large" | "xsmall" | "xlarge" | undefined;
+    shadow?: "xs" | "sm" | "md" | "lg" | "xl" | OldShadowSizes | undefined;
     /**
      * Border color of the box
      * @default undefined
@@ -41,7 +43,7 @@ export declare const Box: import("react").ForwardRefExoticComponent<{
      * Border radius of the box
      * @default undefined
      */
-    borderRadius?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | "full" | undefined;
+    borderRadius?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | OldBorderRadii | "full" | undefined;
     /**
      * Background color of the box
      * @default 'default'
@@ -53,4 +55,5 @@ export declare const Box: import("react").ForwardRefExoticComponent<{
      */
     asChild?: boolean | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
 //# sourceMappingURL=Box.d.ts.map