@digdir/designsystemet-react 1.0.0-next.33 → 1.0.0-next.35

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { useMergeRefs } from '@floating-ui/react';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useCheckbox } from './useCheckbox.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
 import { omit } from '../../../utilities/omit/omit.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Label } from '../../Label/Label.js';
 
 const Checkbox = forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
@@ -19,7 +19,7 @@ const Checkbox = forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: clsx(`ds-checkbox__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: `ds-checkbox__description`, children: description }) }))] }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: cl(`ds-checkbox__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: `ds-checkbox__description`, children: description }) }))] }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/esm/components/form/Checkbox/CheckboxGroup.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { createContext, forwardRef, useState } from 'react';
 import { Fieldset } from '../Fieldset/Fieldset.js';
 
@@ -21,7 +21,7 @@ const CheckboxGroup = forwardRef(({ onChange, children, value, readOnly, default
                 value,
                 defaultValue,
                 toggleValue,
-            }, children: jsx("div", { className: clsx('ds-checkbox__group', `ds-checkbox__group--${size}`), children: children }) }) }));
+            }, children: jsx("div", { className: cl('ds-checkbox__group', `ds-checkbox__group--${size}`), children: children }) }) }));
 });
 CheckboxGroup.displayName = 'CheckboxGroup';
 

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { FloatingPortal, FloatingFocusManager } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { useVirtualizer } from '../../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { forwardRef, useRef, useId, useState, useEffect } from 'react';
+import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { useFormField } from '../useFormField.js';
 import { ComboboxContext } from './ComboboxContext.js';
 import { ComboboxIdProvider } from './ComboboxIdContext.js';
@@ -24,7 +24,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
     const inputRef = useRef(null);
     const portalRef = useRef(null);
     const listRef = useRef([]);
-    const listId = useId();
     const [inputValue, setInputValue] = useState(rest.inputValue || '');
     useEffect(() => {
         if (typeof rest.inputValue === 'string') {
@@ -177,12 +176,12 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxs("div", { className: clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-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("div", { id: listId, "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-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: context.floatingId, 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("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,
                             },
-                        }), className: clsx('ds-combobox__options-wrapper', `ds-combobox--${size}`), children: [virtual && (jsx("div", { style: {
+                        }), className: cl('ds-combobox__options-wrapper', `ds-combobox--${size}`), children: [virtual && (jsx("div", { style: {
                                     height: `${rowVirtualizer.getTotalSize()}px`,
                                     width: '100%',
                                     position: 'relative',

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef, useId, useContext, useMemo } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Label } from '../../Label/Label.js';
 import { omit } from '../../../utilities/omit/omit.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
@@ -28,7 +28,7 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
         },
         ref,
     ]);
-    return (jsx(Label, { size: size, asChild: true, children: jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+    return (jsx(Label, { size: size, asChild: true, children: jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
 });
 
 export { ComboboxCustom };

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Label } from '../../Label/Label.js';
 
 const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(ComboboxContext);
@@ -11,7 +11,7 @@ const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
         throw new Error('ComboboxEmpty must be used within a Combobox');
     }
     const { filteredOptions, size } = context;
-    return (filteredOptions.length === 0 && (jsx(Label, { size: size, asChild: true, children: jsx("div", { ref: ref, className: clsx('ds-combobox__empty', className), ...rest, children: children }) })));
+    return (filteredOptions.length === 0 && (jsx(Label, { size: size, asChild: true, children: jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

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

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const ComboboxOptionDescription = forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsx("span", { className: clsx('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
+    return (jsx("span", { className: cl('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
 

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
-import { memo, forwardRef, useId, useContext } from 'react';
+import cl from 'clsx/lite';
+import { memo, forwardRef, useId, useContext, isValidElement } from 'react';
+import { omit } from '../../../../utilities/omit/omit.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import ComboboxOptionDescription from './Description.js';
 import { SelectedIcon } from './SelectedIcon.js';
 import { useComboboxOption } from './useComboboxOption.js';
-import { Label } from '../../../Typography/Label/Label.js';
-import { omit } from '../../../../utilities/omit/omit.js';
+import { Label } from '../../../Label/Label.js';
 
 const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = useId();
@@ -25,8 +25,11 @@ const ComboboxOption = memo(forwardRef(({ value, description, children, classNam
     return (jsx(Label, { size: 'md', asChild: true, children: 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('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-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: 'ds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }) }));
+            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-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: 'ds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }) }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
+function isComboboxOption(child) {
+    return isValidElement(child) && child.type === ComboboxOption;
+}
 
-export { ComboboxOption };
+export { ComboboxOption, isComboboxOption };

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

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

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

@@ -1,10 +1,10 @@
 'use client';
-import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '@floating-ui/react';
 import { useId, useContext, useMemo, useEffect } from 'react';
+import { useDebounceCallback } from '../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';
-import { useDebounceCallback } from '../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 
 const useComboboxOption = ({ id, ref, value, }) => {
     const generatedId = useId();

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

@@ -3,7 +3,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import '../../../Chip/index.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import { RemovableChip } from '../../../Chip/Removable/Removable.js';
+import { ChipRemovable } from '../../../Chip/Chips.js';
 
 const ComboboxChips = () => {
     const context = useContext(ComboboxContext);
@@ -12,7 +12,7 @@ const ComboboxChips = () => {
     }
     const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
     return (jsx(Fragment, { children: Object.keys(selectedOptions).map((value) => {
-            return (jsx(RemovableChip, { size: size, disabled: disabled, onKeyDown: (e) => {
+            return (jsx(ChipRemovable, { size: size, disabled: disabled, onKeyDown: (e) => {
                     if (readOnly)
                         return;
                     if (disabled)

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { XMarkIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { ComboboxContext } from '../ComboboxContext.js';
 
@@ -11,7 +11,7 @@ const ComboboxClearButton = forwardRef((props, ref) => {
         throw new Error('ComboboxContext is missing');
     }
     const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
-    return (jsx("button", { ...props, ref: ref, disabled: disabled, className: clsx('ds-combobox__clear-button', `ds-focus`), onClick: () => {
+    return (jsx("button", { ...props, ref: ref, disabled: disabled, className: cl('ds-combobox__clear-button', `ds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)

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

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

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '@floating-ui/react';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { useContext, useRef } from 'react';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
-import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
+import { Paragraph } from '../../../Paragraph/Paragraph.js';
 import { omit } from '../../../../utilities/omit/omit.js';
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
@@ -68,7 +68,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { size: size, asChild: true, children: 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: 'ds-combobox__input', onChange: (e) => {
+    return (jsx(Paragraph, { size: size, asChild: true, children: jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { size: size, asChild: true, children: jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange?.(e);

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
-import { Label } from '../../../Typography/Label/Label.js';
-import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
+import cl from 'clsx/lite';
+import { Label } from '../../../Label/Label.js';
+import { Paragraph } from '../../../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('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 

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

@@ -1,6 +1,7 @@
 'use client';
 import { useCallback, useMemo, Children, useState } from 'react';
-import { isComboboxOption, isInteractiveComboboxCustom, prefix } from './utilities.js';
+import { isComboboxOption } from './Option/Option.js';
+import { isInteractiveComboboxCustom, prefix } from './utilities.js';
 
 const isOption = (option) => !!option;
 function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {

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

@@ -1,10 +1,8 @@
 'use client';
-import { useFloating, useRole, useDismiss, useListNavigation, useInteractions } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useFloating, autoUpdate, flip, size, offset, useRole, useDismiss, useListNavigation, useInteractions } from '@floating-ui/react';
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';
-import { autoUpdate } from '../../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { flip, size, offset } from '../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 
 const useFloatingCombobox = ({ listRef }) => {
     const [open, setOpen] = useState(false);

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

@@ -1,11 +1,7 @@
 'use client';
 import { isValidElement } from 'react';
 import { ComboboxCustom } from './Custom.js';
-import { ComboboxOption } from './Option/Option.js';
 
-function isComboboxOption(child) {
-    return isValidElement(child) && child.type === ComboboxOption;
-}
 function isComboboxCustom(child) {
     return isValidElement(child) && child.type === ComboboxCustom;
 }
@@ -35,4 +31,4 @@ const setReactInputValue = (input, value) => {
     input.dispatchEvent(new Event('change', { bubbles: true }));
 };
 
-export { isComboboxCustom, isComboboxOption, isInteractiveComboboxCustom, prefix, removePrefix, setReactInputValue };
+export { isComboboxCustom, isInteractiveComboboxCustom, prefix, removePrefix, setReactInputValue };

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

@@ -1,26 +1,24 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
+import { useFormField } from '../useFormField.js';
 import { FieldsetContext } from './FieldsetContext.js';
-import { useFieldset } from './useFieldset.js';
-import { Label } from '../../Typography/Label/Label.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+import { Label } from '../../Label/Label.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
-const Fieldset = forwardRef((props, ref) => {
+const Fieldset = forwardRef(function Fieldset(props, ref) {
     const { children, legend, description, error, hideLegend, className, ...rest } = props;
-    const { fieldsetProps, size, readOnly, errorId, hasError, descriptionId } = useFieldset(props);
     const fieldset = useContext(FieldsetContext);
+    const { inputProps, size, readOnly, errorId, hasError, descriptionId } = useFormField(props, 'fieldset');
     return (jsx(FieldsetContext.Provider, { value: {
+            disabled: props?.disabled,
             error: error ?? fieldset?.error,
             errorId: hasError ? errorId : undefined,
-            size,
-            disabled: props?.disabled,
             readOnly,
-        }, children: jsxs("fieldset", { ...fieldsetProps, className: clsx('ds-fieldset', !hideLegend && 'ds-fieldset--spacing', readOnly && 'ds-fieldset--readonly', className), disabled: props?.disabled, ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { className: 'ds-fieldset__legend', children: jsxs("span", { className: clsx('ds-fieldset__legend__content', hideLegend && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { className: 'ds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsx(Paragraph, { size: size, variant: 'short', asChild: true, children: jsx("div", { id: descriptionId, className: clsx('ds-fieldset__description', 'ds-font-weight--regular', hideLegend && `ds-sr-only`), children: description }) })), children, jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'ds-fieldset__error-message', children: hasError && jsx(ErrorMessage, { size: size, children: error }) })] }) }));
+            size,
+        }, children: jsxs("fieldset", { "aria-describedby": inputProps['aria-describedby'], "aria-invalid": inputProps['aria-invalid'], className: cl('ds-fieldset', className), "data-hidelegend": hideLegend || undefined, "data-readonly": readOnly || undefined, disabled: props?.disabled, ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { children: legend }) }), !!description && (jsx(Paragraph, { id: descriptionId, size: size, variant: 'short', children: description })), children, jsx("div", { "aria-live": 'polite', "aria-relevant": 'additions removals', id: errorId, children: hasError && (jsx(ValidationMessage, { size: size, children: error })) })] }) }));
 });
-Fieldset.displayName = 'Fieldset';
 
 export { Fieldset };

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useRadio } from './useRadio.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
 import { omit } from '../../../utilities/omit/omit.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Label } from '../../Label/Label.js';
 
 const Radio = forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useRadio(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), children && (jsxs(Fragment, { children: [jsx(Label, { className: clsx('ds-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: 'ds-radio__description', children: description }) }))] }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), children && (jsxs(Fragment, { children: [jsx(Label, { className: cl('ds-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: 'ds-radio__description', children: description }) }))] }))] }) }));
 });
 Radio.displayName = 'Radio';
 

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { createContext, forwardRef, useId } from 'react';
 import { Fieldset } from '../Fieldset/Fieldset.js';
 
@@ -13,7 +13,7 @@ const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultVal
                 name: name ?? `radiogroup-name-${nameId}`,
                 onChange,
                 required,
-            }, children: jsx("div", { className: clsx('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
+            }, children: jsx("div", { className: cl('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useMergeRefs } from '@floating-ui/react';
 import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useRef, useState, useCallback } from 'react';
-import { useSearch } from './useSearch.js';
 import { Button } from '../../Button/Button.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { useSearch } from './useSearch.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { Label } from '../../Label/Label.js';
 import { omit } from '../../../utilities/omit/omit.js';
 
 /** Search field
@@ -38,9 +38,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('ds-search', inputProps.disabled && 'ds-search--disabled', `ds-search--${size}`, className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx('ds-search__label', hideLabel && 'ds-sr-only'), children: jsx("span", { children: label }) })), jsxs("div", { className: 'ds-search__field', children: [jsxs("div", { className: clsx('ds-search__field', `ds-search--${size}`), children: [isSimple && (jsx(MagnifyingGlassIcon, { className: 'ds-search__icon', "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx('ds-search__input', `ds-focus`, isSimple
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: cl('ds-search', inputProps.disabled && 'ds-search--disabled', `ds-search--${size}`, className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: cl('ds-search__label', hideLabel && 'ds-sr-only'), children: jsx("span", { children: label }) })), jsxs("div", { className: 'ds-search__field', children: [jsxs("div", { className: cl('ds-search__field', `ds-search--${size}`), children: [isSimple && (jsx(MagnifyingGlassIcon, { className: 'ds-search__icon', "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: cl('ds-search__input', `ds-focus`, isSimple
                                         ? 'ds-search__input--simple'
-                                        : 'ds-search__input--with-search-button'), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: clsx('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] })] }) }));
+                                        : 'ds-search__input--with-search-button'), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: cl('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] })] }) }));
 });
 Search.displayName = 'Search';
 

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

@@ -1,18 +1,18 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useSelect } from './useSelect.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { Label } from '../../Label/Label.js';
 import { omit } from '../../../utilities/omit/omit.js';
-import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
 const Select = forwardRef(function Select(props, ref) {
     const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
     const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useSelect(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: clsx('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: cl('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: cl('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: cl(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: cl('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ValidationMessage, { size: size, children: error }) }))] }) }));
 });
 
 export { Select };

package/dist/esm/components/form/Select/SelectOptgroup.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
 const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {

package/dist/esm/components/form/Select/SelectOption.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
 const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {

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

@@ -1,17 +1,17 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useSwitch } from './useSwitch.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
 import { omit } from '../../../utilities/omit/omit.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Label } from '../../Label/Label.js';
 
 const Switch = forwardRef((props, ref) => {
     const { children, description, position = 'left', className, ...rest } = props;
     const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsxs(Label, { className: clsx(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsx("span", { className: `ds-switch__track`, children: jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsx("span", { children: children })] }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, ...(inputProps.disabled && { 'aria-disabled': true }), children: jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), jsxs(Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsx("span", { className: `ds-switch__track`, children: jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsx("span", { children: children })] }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
 });
 Switch.displayName = 'Switch';
 

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useState } from 'react';
 import { CharacterCounter } from '../CharacterCounter.js';
 import { useTextarea } from './useTextarea.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { Label } from '../../Typography/Label/Label.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { Label } from '../../Label/Label.js';
 import { omit } from '../../../utilities/omit/omit.js';
-import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
 /** Textarea field
  *
@@ -23,11 +23,11 @@ const Textarea = forwardRef((props, ref) => {
     const [value, setValue] = useState(props.defaultValue);
     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('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: clsx('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__readonly-icon' })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsx("textarea", { className: clsx('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
+    const describedBy = cl(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: cl('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: cl('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__readonly-icon' })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: cl('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsx("textarea", { className: cl('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...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: 'ds-textarea__error-message', 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: 'ds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsx(ValidationMessage, { size: size, children: props.error })) })] }) }));
 });
 Textarea.displayName = 'Textarea';