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

package/dist/esm/components/ToggleGroup/ToggleGroupItem.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem.js';
+import { Button } from '../Button/Button.js';
+import { useToggleGroupItem } from './useToggleGroupitem.js';
+
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ */
+const ToggleGroupItem = forwardRef(function ToggleGroupItem(rest, ref) {
+    const { active, size = 'md', buttonProps, value } = useToggleGroupItem(rest);
+    return (jsx(RovingFocusItem, { asChild: true, value: value, children: jsx(Button, { variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps }) }));
+});
+
+export { ToggleGroupItem };

package/dist/esm/components/ToggleGroup/index.js

@@ -1,22 +1,20 @@
 'use client';
-import { ToggleGroupItem } from './ToggleGroupItem/ToggleGroupItem.js';
-import { ToggleGroupRoot } from './ToggleGroupRoot.js';
+import { ToggleGroup as ToggleGroup$1 } from './ToggleGroup.js';
+import { ToggleGroupItem } from './ToggleGroupItem.js';
 
 /**
  * Display a group of buttons that can be toggled between.
  * @example
  * ```tsx
- * <ToggleGroup.Root onChange={(value) => console.log(value)}>
+ * <ToggleGroup onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
- * </ToggleGroup.Root>
+ * </ToggleGroup>
  * ```
  */
-const ToggleGroup = {};
-ToggleGroup.Root = ToggleGroupRoot;
+const ToggleGroup = ToggleGroup$1;
 ToggleGroup.Item = ToggleGroupItem;
-ToggleGroup.Root.displayName = 'ToggleGroup.Root';
 ToggleGroup.Item.displayName = 'ToggleGroup.Item';
 
-export { ToggleGroup, ToggleGroupItem, ToggleGroupRoot };
+export { ToggleGroup, ToggleGroupItem };

package/dist/esm/components/ToggleGroup/{ToggleGroupItem/useToggleGroupitem.js → useToggleGroupitem.js}

@@ -1,6 +1,6 @@
 'use client';
 import { useId, useContext } from 'react';
-import { ToggleGroupContext } from '../ToggleGroupRoot.js';
+import { ToggleGroupContext } from './ToggleGroup.js';
 
 /** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
 const useToggleGroupItem = (props) => {

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,10 +1,8 @@
 'use client';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
-import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '@floating-ui/react';
+import cl from 'clsx/lite';
 import { forwardRef, useState, useRef, Fragment, cloneElement } from 'react';
-import { autoUpdate } from '../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset, flip, shift, arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const ARROW_HEIGHT = 7;
@@ -64,7 +62,7 @@ const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150,
     return (jsxs(Fragment$1, { children: [cloneElement(children, getReferenceProps({
                 ref: childMergedRef,
             })), internalOpen && (jsx(Container, { children: jsx(Paragraph, { size: 'xs', asChild: true, children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                            className: clsx('ds-tooltip', className),
+                            className: cl('ds-tooltip', className),
                             ref: mergedRef,
                             ...rest,
                         }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'ds-tooltip__arrow', height: ARROW_HEIGHT })] }) }) }))] }));

package/dist/esm/components/Typography/Heading/Heading.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
@@ -12,7 +12,7 @@ import { forwardRef } from 'react';
  */
 const Heading = forwardRef(({ size = 'xl', level = 2, spacing = false, className, asChild, ...rest }, ref) => {
     const Component = asChild ? Slot : `h${level}`;
-    return (jsx(Component, { ref: ref, className: clsx('ds-heading', `ds-heading--${size}`, spacing && 'ds-heading--spacing', className), ...rest }));
+    return (jsx(Component, { ref: ref, className: cl('ds-heading', `ds-heading--${size}`, spacing && 'ds-heading--spacing', className), ...rest }));
 });
 Heading.displayName = 'Heading';
 

package/dist/esm/components/Typography/Ingress/Ingress.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
@@ -12,7 +12,7 @@ import { forwardRef } from 'react';
  */
 const Ingress = forwardRef(({ size = 'md', className, spacing, asChild, ...rest }, ref) => {
     const Component = asChild ? Slot : 'p';
-    return (jsx(Component, { ref: ref, className: clsx(`ds-ingress`, `ds-ingress--${size}`, spacing && 'ds-ingress--spacing', className), ...rest }));
+    return (jsx(Component, { ref: ref, className: cl(`ds-ingress`, `ds-ingress--${size}`, spacing && 'ds-ingress--spacing', className), ...rest }));
 });
 Ingress.displayName = 'Ingress';
 

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
@@ -12,7 +12,7 @@ import { forwardRef } from 'react';
  */
 const Label = forwardRef(({ className, spacing, size = 'md', weight = 'medium', asChild, ...rest }, ref) => {
     const Component = asChild ? Slot : 'label';
-    return (jsx(Component, { ref: ref, className: clsx('ds-label', `ds-label--${size}`, spacing && 'ds-label--spacing', weight && `ds-font-weight--${weight}`, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: cl('ds-label', `ds-label--${size}`, spacing && 'ds-label--spacing', weight && `ds-font-weight--${weight}`, className), ...rest }));
 });
 Label.displayName = 'Label';
 

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const lineHeightMap = {
@@ -17,7 +17,7 @@ const lineHeightMap = {
  */
 const Paragraph = forwardRef(({ className, spacing, size = 'md', asChild, variant, ...rest }, ref) => {
     const Component = asChild ? Slot : 'p';
-    return (jsx(Component, { ref: ref, className: clsx('ds-paragraph', spacing && 'ds-paragraph--spacing', `ds-paragraph--${size}`, lineHeightMap[variant ?? 'default'], className), ...rest }));
+    return (jsx(Component, { ref: ref, className: cl('ds-paragraph', spacing && 'ds-paragraph--spacing', `ds-paragraph--${size}`, lineHeightMap[variant ?? 'default'], className), ...rest }));
 });
 Paragraph.displayName = 'Paragraph';
 

package/dist/esm/components/Typography/ValidationMessage/ValidationMessage.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/** Use `ValidationMessage` to display validation text */
+const ValidationMessage = forwardRef(function ValidationMessage({ size = 'md', className, spacing, asChild, error = true, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    return (jsx(Component, { ref: ref, className: cl('ds-validation-message', `ds-error_message--${size}`, spacing && 'ds-validation-message--spacing', error && 'ds-validation-message--error', className), ...rest }));
+});
+
+export { ValidationMessage };

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ErrorMessage } from '../Typography/ErrorMessage/ErrorMessage.js';
+import { ValidationMessage } from '../Typography/ValidationMessage/ValidationMessage.js';
 
 const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
 const defaultSrLabel = (maxCount) => `Tekstfelt med plass til ${maxCount} tegn`;
@@ -8,7 +8,7 @@ const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCoun
     const currentCount = maxCount - value.length;
     const hasExceededLimit = value.length > maxCount;
     const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
-    return (jsxs(Fragment, { children: [jsx("span", { className: `ds-sr-only`, id: id, children: srLabel }), jsx(ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
+    return (jsxs(Fragment, { children: [jsx("span", { className: `ds-sr-only`, id: id, children: srLabel }), jsx(ValidationMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
 };
 CharacterCounter.displayName = 'CharacterCounter';
 

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

@@ -1,7 +1,7 @@
 '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';
@@ -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,8 +1,8 @@
 '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 { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import cl from 'clsx/lite';
 import { forwardRef, useRef, useId, useState, useEffect } from 'react';
 import { useFormField } from '../useFormField.js';
 import { ComboboxContext } from './ComboboxContext.js';
@@ -177,12 +177,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: 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({
                             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,8 +1,8 @@
 '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';
@@ -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,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 { forwardRef, useContext } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
 import { Label } from '../../Typography/Label/Label.js';
@@ -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';
 
 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/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 '../../../Typography/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,8 +1,8 @@
 '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';
@@ -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": listId, 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 cl from 'clsx/lite';
 import { Label } from '../../../Typography/Label/Label.js';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx('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 { ValidationMessage } from '../../Typography/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,6 +1,6 @@
 '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';
@@ -10,7 +10,7 @@ import { Label } from '../../Typography/Label/Label.js';
 const Radio = forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = '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';