@digdir/designsystemet-react 1.0.0-rc.12 → 1.0.0-rc.13

package/dist/cjs/components/Typography/Label/Label.js

@@ -6,7 +6,12 @@ var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
 
-/** Use `Label` for labels. */
+/**
+ * Use `Label` for labels.
+ *
+ * @example
+ * <Label size='lg'>Label</Label>
+ */
 const Label = React.forwardRef(({ className, spacing, size = 'md', weight = 'medium', asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'label';
     return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-label', `ds-label--${size}`, spacing && 'ds-label--spacing', weight && `ds-font-weight--${weight}`, className), ...rest }));

package/dist/cjs/components/Typography/Paragraph/Paragraph.js

@@ -11,7 +11,12 @@ const lineHeightMap = {
     default: 'ds-line-height--md',
     long: 'ds-line-height--lg',
 };
-/** Use `Paragraph` to display text with paragraph text styles. */
+/**
+ * Use `Paragraph` to display text with paragraph text styles.
+ *
+ * @example
+ * <Paragraph size='lg'>Paragraph</Paragraph>
+ */
 const Paragraph = React.forwardRef(({ className, spacing, size = 'md', asChild, variant, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'p';
     return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-paragraph', spacing && 'ds-paragraph--spacing', `ds-paragraph--${size}`, lineHeightMap[variant ?? 'default'], className), ...rest }));

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

@@ -7,7 +7,7 @@ var lite = require('../../../node_modules/clsx/dist/lite.js');
 var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var useCheckbox = require('./useCheckbox.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
+var omit = require('../../../utilities/omit/omit.js');
 var Label = require('../../Typography/Label/Label.js');
 
 const Checkbox = React.forwardRef((props, ref) => {
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: lite.clsx(`ds-checkbox__label`), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: lite.clsx(`ds-checkbox__label`), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 

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

@@ -7,7 +7,6 @@ var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/fl
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var index = require('../../../node_modules/@tanstack/react-virtual/dist/esm/index.js');
 var useFormField = require('../useFormField.js');
-var useDebounce = require('../../../utilities/useDebounce.js');
 var useCombobox = require('./useCombobox.js');
 var ComboboxInput = require('./internal/ComboboxInput.js');
 var ComboboxLabel = require('./internal/ComboboxLabel.js');
@@ -20,7 +19,8 @@ var ComboboxIdContext = require('./ComboboxIdContext.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var Box = require('../../Box/Box.js');
 var Spinner = require('../../Spinner/Spinner.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
+var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var omit = require('../../../utilities/omit/omit.js');
 
 const ComboboxComponent = React.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, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = React.useRef(null);
@@ -112,7 +112,7 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
         !multiple && setOpen(false);
         refs.domReference.current?.focus();
     };
-    const debouncedHandleSelectOption = useDebounce(handleSelectOption, 50);
+    const debouncedHandleSelectOption = useDebounceCallback.useDebounceCallback(handleSelectOption, 50);
     const handleKeyDown = useComboboxKeyboard.useComboboxKeyboard({
         filteredOptions,
         selectedOptions,
@@ -170,9 +170,9 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
             listRef,
             forwareddRef,
             setListRef: (index, node) => {
-                listRef.current[index] = node;
+                return (listRef.current[index] = node);
             },
-        }, children: [jsxRuntime.jsxs(Box.Box, { className: lite.clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative.default, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel.default, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput.default, { ...objectUtils.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError.default, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(floatingUi_react.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs(Box.Box, { id: listId, shadow: 'md', borderRadius: 'md', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxRuntime.jsxs(Box.Box, { className: lite.clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(floatingUi_react.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs(Box.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,
@@ -187,7 +187,7 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.default, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(Spinner.Spinner, { title: 'Laster', size: 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.ComboboxCustom, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(Spinner.Spinner, { title: 'Laster', size: 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
 });
 const Combobox = React.forwardRef((props, ref) => (jsxRuntime.jsx(ComboboxIdContext.ComboboxIdProvider, { children: jsxRuntime.jsx(ComboboxComponent, { ...props, ref: ref }) })));
 Combobox.displayName = 'Combobox';

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
@@ -11,7 +9,7 @@ var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/fl
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 var Label = require('../../Typography/Label/Label.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
+var omit = require('../../../utilities/omit/omit.js');
 
 const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -32,9 +30,7 @@ const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className,
         },
         ref,
     ]);
-    return (jsxRuntime.jsx(Label.Label, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: lite.clsx('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, ...objectUtils.omit(['interactive'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+    return (jsxRuntime.jsx(Label.Label, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: lite.clsx('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, ...omit.omit(['interactive'], rest), ...omit.omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
 });
-var ComboboxCustom$1 = ComboboxCustom;
 
 exports.ComboboxCustom = ComboboxCustom;
-exports.default = ComboboxCustom$1;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
@@ -20,4 +18,3 @@ const ComboboxEmpty = React.forwardRef(({ children, className, ...rest }, ref) =
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 
 exports.ComboboxEmpty = ComboboxEmpty;
-exports.default = ComboboxEmpty;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../../../node_modules/clsx/dist/lite.js');
@@ -13,5 +11,4 @@ const ComboboxOptionDescription = React.forwardRef(({ children, className, ...re
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
 var ComboboxOptionDescription$1 = ComboboxOptionDescription;
 
-exports.ComboboxOptionDescription = ComboboxOptionDescription;
-exports.default = ComboboxOptionDescription$1;
+module.exports = ComboboxOptionDescription$1;

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

@@ -9,7 +9,7 @@ var SelectedIcon = require('./SelectedIcon.js');
 var Description = require('./Description.js');
 var useComboboxOption = require('./useComboboxOption.js');
 var Label = require('../../../Typography/Label/Label.js');
-var objectUtils = require('../../../../utilities/objectUtils.js');
+var omit = require('../../../../utilities/omit/omit.js');
 
 const ComboboxOption = React.memo(React.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = React.useId();
@@ -27,7 +27,7 @@ const ComboboxOption = React.memo(React.forwardRef(({ value, description, childr
     return (jsxRuntime.jsx(Label.Label, { size: 'md', asChild: true, children: jsxRuntime.jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
                 onOptionClick();
                 rest.onClick?.(e);
-            }, className: lite.clsx('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...objectUtils.omit(['displayValue'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: 'ds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description.default, { children: description }))] })] }) }));
+            }, className: lite.clsx('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit.omit(['displayValue'], rest), ...omit.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: 'ds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description, { children: description }))] })] }) }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../../../node_modules/clsx/dist/lite.js');
@@ -13,4 +11,3 @@ const SelectedIcon = ({ multiple, selected }) => {
 SelectedIcon.displayName = 'SelectedIcon';
 
 exports.SelectedIcon = SelectedIcon;
-exports.default = SelectedIcon;

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

@@ -4,9 +4,9 @@
 var React = require('react');
 var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var useDebounce = require('../../../../utilities/useDebounce.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var useCombobox = require('../useCombobox.js');
+var useDebounceCallback = require('../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 
 function useComboboxOption({ id, ref, value, }) {
     const generatedId = React.useId();
@@ -17,11 +17,11 @@ function useComboboxOption({ id, ref, value, }) {
     if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
     }
-    const { selectedOptions, onOptionClick, listRef, customIds, filteredOptions, } = context;
+    const { selectedOptions, onOptionClick, setListRef, customIds, filteredOptions, } = context;
     const index = React.useMemo(() => filteredOptions.indexOf(useCombobox.prefix(String(value))) + customIds.length, [customIds.length, filteredOptions, value]);
     const combinedRef = floatingUi_react.useMergeRefs([
         (node) => {
-            listRef.current[index] = node;
+            setListRef(index, node);
         },
         ref,
     ]);
@@ -35,7 +35,7 @@ function useComboboxOption({ id, ref, value, }) {
             dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
         }
     }, [generatedId, id, dispatch, active, index]);
-    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
+    const onOptionClickDebounced = useDebounceCallback.useDebounceCallback(() => onOptionClick(value), 50);
     return {
         id: newId,
         ref: combinedRef,

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../Chip/index.js');
@@ -45,5 +43,4 @@ const ComboboxChips = () => {
 ComboboxChips.displayName = 'ComboboxChips';
 var ComboboxChips$1 = ComboboxChips;
 
-exports.ComboboxChips = ComboboxChips;
-exports.default = ComboboxChips$1;
+module.exports = ComboboxChips$1;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
@@ -35,5 +33,4 @@ const ComboboxClearButton = () => {
 ComboboxClearButton.displayName = 'ComboboxClearButton';
 var ComboboxClearButton$1 = ComboboxClearButton;
 
-exports.ComboboxClearButton = ComboboxClearButton;
-exports.default = ComboboxClearButton$1;
+module.exports = ComboboxClearButton$1;

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

@@ -1,16 +1,13 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var ErrorMessage = require('../../../Typography/ErrorMessage/ErrorMessage.js');
 
-const ComboboxError = ({ size, error, formFieldProps, }) => {
+const ComboboxError = ({ size, error, formFieldProps }) => {
     return (jsxRuntime.jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 var ComboboxError$1 = ComboboxError;
 
-exports.ComboboxError = ComboboxError;
-exports.default = ComboboxError$1;
+module.exports = ComboboxError$1;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../../../node_modules/clsx/dist/lite.js');
@@ -10,11 +8,12 @@ var akselIcons = require('@navikt/aksel-icons');
 var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
+var useCombobox = require('../useCombobox.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
 var Box = require('../../../Box/Box.js');
 var Paragraph = require('../../../Typography/Paragraph/Paragraph.js');
-var objectUtils = require('../../../../utilities/objectUtils.js');
+var omit = require('../../../../utilities/omit/omit.js');
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = React.useContext(ComboboxContext.ComboboxContext);
@@ -35,11 +34,14 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
         // check if input value is the same as a label, if so, select it
         Object.values(options).forEach((option) => {
             if (option.label.toLowerCase() === value.toLowerCase()) {
+                /* if option is already selected, discard selecting it, since it would de-select */
+                if (selectedOptions[useCombobox.prefix(option.value)])
+                    return;
                 handleSelectOption({ option: option });
             }
         });
     };
-    const showClearButton = multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
+    const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
     /* Props from floating-ui */
     const props = getReferenceProps({
         ref: refs?.setReference,
@@ -66,14 +68,13 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled ? 'true' : undefined, className: lite.clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled ? 'true' : undefined, className: lite.clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange && rest.onChange(e);
-                                } }) })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }) }));
+                                } }) })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton, {}), jsxRuntime.jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }) }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 var ComboboxInput$1 = ComboboxInput;
 
-exports.ComboboxInput = ComboboxInput;
-exports.default = ComboboxInput$1;
+module.exports = ComboboxInput$1;

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

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../../../node_modules/clsx/dist/lite.js');
 var akselIcons = require('@navikt/aksel-icons');
@@ -15,5 +13,4 @@ const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFiel
 ComboboxLabel.displayName = 'ComboboxLabel';
 var ComboboxLabel$1 = ComboboxLabel;
 
-exports.ComboboxLabel = ComboboxLabel;
-exports.default = ComboboxLabel$1;
+module.exports = ComboboxLabel$1;

package/dist/cjs/components/form/Combobox/internal/ComboboxNative.js

@@ -1,8 +1,6 @@
 'use client';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var useCombobox = require('../useCombobox.js');
 
@@ -13,5 +11,4 @@ const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
 ComboboxNative.displayName = 'ComboboxNative';
 var ComboboxNative$1 = ComboboxNative;
 
-exports.ComboboxNative = ComboboxNative;
-exports.default = ComboboxNative$1;
+module.exports = ComboboxNative$1;

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

@@ -12,7 +12,7 @@ function isComboboxOption(child) {
     return React.isValidElement(child) && child.type === Option.ComboboxOption;
 }
 function isComboboxCustom(child) {
-    return React.isValidElement(child) && child.type === Custom.default;
+    return React.isValidElement(child) && child.type === Custom.ComboboxCustom;
 }
 function isInteractiveComboboxCustom(child) {
     return isComboboxCustom(child) && child.props.interactive === true;
@@ -32,6 +32,7 @@ const removePrefix = (value) => {
 function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
     return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
 }, initialValue, }) {
+    const filterCallback = React.useCallback(filter, [filter]);
     const { optionsChildren, customIds, restChildren, interactiveChildren } = React.useMemo(() => {
         const allChildren = React.Children.toArray(children);
         const result = allChildren.reduce((acc, child) => {
@@ -108,7 +109,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
                 filteredOptions.push(option);
                 return optionsChildren[index];
             }
-            if (filter(inputValue, options[option])) {
+            if (filterCallback(inputValue, options[option])) {
                 filteredOptions.push(option);
                 return optionsChildren[index];
             }
@@ -116,8 +117,14 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         })
             .filter((child) => child);
         return { filteredOptions, filteredOptionsChildren };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
+    }, [
+        filterCallback,
+        inputValue,
+        multiple,
+        options,
+        optionsChildren,
+        selectedOptions,
+    ]);
     return {
         filteredOptionsChildren,
         filteredOptions,

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

@@ -1,8 +1,8 @@
 'use client';
 'use strict';
 
-var useDebounce = require('../../../utilities/useDebounce.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
+var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = ComboboxIdContext.useComboboxId();
@@ -69,7 +69,7 @@ const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filtered
                 break;
         }
     };
-    const handleKeyDown = useDebounce(handleKeyDownFunc, 20);
+    const handleKeyDown = useDebounceCallback.useDebounceCallback(handleKeyDownFunc, 20);
     return handleKeyDown;
 };
 

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

@@ -5,7 +5,7 @@ var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/fl
 var React = require('react');
 var ReactDOM = require('react-dom');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var floatingUi_dom = require('../../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 
 const useFloatingCombobox = ({ listRef }) => {
@@ -39,7 +39,7 @@ const useFloatingCombobox = ({ listRef }) => {
                 apply({ rects, elements }) {
                     requestAnimationFrame(() => {
                         Object.assign(elements.floating.style, {
-                            width: `calc(${rects.reference.width}px - calc(var(--ds-spacing-2) * 2))`,
+                            width: `${rects.reference.width}px`,
                             maxHeight: `200px`,
                         });
                     });

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

@@ -7,14 +7,14 @@ var lite = require('../../../node_modules/clsx/dist/lite.js');
 var akselIcons = require('@navikt/aksel-icons');
 var useNativeSelect = require('./useNativeSelect.js');
 var Label = require('../../Typography/Label/Label.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
+var omit = require('../../../utilities/omit/omit.js');
 var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
 const NativeSelect = React.forwardRef((props, ref) => {
     const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
     const { selectProps, descriptionId, errorId, readOnly = false, size = 'md', } = useNativeSelect.useNativeSelect(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: lite.clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-native-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: lite.clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...objectUtils.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: lite.clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-native-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: lite.clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit.omit(['size', 'error', 'errorId'], rest), ...omit.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
 });
 NativeSelect.displayName = 'NativeSelect';
 

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

@@ -6,13 +6,13 @@ var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var useRadio = require('./useRadio.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
+var omit = require('../../../utilities/omit/omit.js');
 var Label = require('../../Typography/Label/Label.js');
 
 const Radio = React.forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useRadio.useRadio(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: lite.clsx('ds-radio__label'), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: lite.clsx('ds-radio__label'), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
 });
 Radio.displayName = 'Radio';
 

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

@@ -10,8 +10,7 @@ var useSearch = require('./useSearch.js');
 var Button = require('../../Button/Button.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var omit = require('../../../utilities/omit/omit.js');
 
 /** Search field
  *
@@ -22,7 +21,7 @@ var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
  */
 const Search = React.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 = 'md' } = useSearch.useSearch(props);
+    const { inputProps, size = 'md' } = useSearch.useSearch(props);
     const inputRef = React.useRef();
     const mergedRef = floatingUi_react.useMergeRefs([ref, inputRef]);
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
@@ -43,7 +42,7 @@ const Search = React.forwardRef((props, ref) => {
     const showClearButton = Boolean(value ?? internalValue) && !disabled;
     return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: lite.clsx('ds-search', inputProps.disabled && 'ds-search--disabled', `ds-search--${size}`, className), children: [label && (jsxRuntime.jsx(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: lite.clsx('ds-search__label', hideLabel && 'ds-sr-only'), children: jsxRuntime.jsx("span", { children: label }) })), jsxRuntime.jsxs("div", { className: 'ds-search__field', children: [jsxRuntime.jsxs("div", { className: lite.clsx('ds-search__field', `ds-search--${size}`), children: [isSimple && (jsxRuntime.jsx(akselIcons.MagnifyingGlassIcon, { className: 'ds-search__icon', "aria-hidden": true })), jsxRuntime.jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: lite.clsx('ds-search__input', `ds-focus`, isSimple
                                         ? 'ds-search__input--simple'
-                                        : 'ds-search__input--with-search-button'), ...objectUtils.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: lite.clsx('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsxRuntime.jsx("div", { className: 'ds-search__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+                                        : 'ds-search__input--with-search-button'), ...omit.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: lite.clsx('ds-search__clear-button', `ds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `ds-sr-only`, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: 'ds-search__search-button', size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] })] }) }));
 });
 Search.displayName = 'Search';
 

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

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

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

@@ -9,7 +9,7 @@ var CharacterCounter = require('../CharacterCounter.js');
 var useTextarea = require('./useTextarea.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
+var omit = require('../../../utilities/omit/omit.js');
 var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
 
 /** Textarea field
@@ -26,7 +26,7 @@ const Textarea = React.forwardRef((props, ref) => {
     const characterLimitId = `${textareaProps.id}-charactercount}`;
     const hasCharacterLimit = characterLimit != null;
     const describedBy = lite.clsx(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: lite.clsx('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: lite.clsx('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__readonly-icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: lite.clsx('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: lite.clsx('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: lite.clsx('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__readonly-icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx('ds-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: lite.clsx('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
                         textareaProps?.onChange?.(e);
                         setValue(e.target.value);
                     } }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));