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

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

@@ -2,23 +2,23 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
+var omit = require('../../../../utilities/omit/omit.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var Description = require('./Description.js');
 var SelectedIcon = require('./SelectedIcon.js');
 var useComboboxOption = require('./useComboboxOption.js');
-var Label = require('../../../Typography/Label/Label.js');
-var omit = require('../../../../utilities/omit/omit.js');
+var Label = require('../../../Label/Label.js');
 
-const ComboboxOption = React.memo(React.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
-    const labelId = React.useId();
+const ComboboxOption = react.memo(react.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
+    const labelId = react.useId();
     const { id, ref, selected, active, onOptionClick } = useComboboxOption.useComboboxOption({
         id: rest.id,
         ref: forwardedRef,
         value,
     });
-    const context = React.useContext(ComboboxContext.ComboboxContext);
+    const context = react.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
     }
@@ -27,8 +27,12 @@ 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), ...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 }))] })] }) }));
+            }, className: cl('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';
+function isComboboxOption(child) {
+    return react.isValidElement(child) && child.type === ComboboxOption;
+}
 
 exports.ComboboxOption = ComboboxOption;
+exports.isComboboxOption = isComboboxOption;

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

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

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

@@ -1,25 +1,25 @@
 'use client';
 'use strict';
 
-var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var React = require('react');
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+var useDebounceCallback = require('../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');
-var useDebounceCallback = require('../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 
 const useComboboxOption = ({ id, ref, value, }) => {
-    const generatedId = React.useId();
+    const generatedId = react.useId();
     const newId = id || generatedId;
-    const context = React.useContext(ComboboxContext.ComboboxContext);
+    const context = react.useContext(ComboboxContext.ComboboxContext);
     const { activeIndex } = ComboboxIdContext.useComboboxId();
     const dispatch = ComboboxIdContext.useComboboxIdDispatch();
     if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
     }
     const { selectedOptions, onOptionClick, setListRef, customIds, filteredOptions, } = context;
-    const index = React.useMemo(() => filteredOptions.indexOf(utilities.prefix(String(value))) + customIds.length, [customIds.length, filteredOptions, value]);
-    const combinedRef = floatingUi_react.useMergeRefs([
+    const index = react.useMemo(() => filteredOptions.indexOf(utilities.prefix(String(value))) + customIds.length, [customIds.length, filteredOptions, value]);
+    const combinedRef = react$1.useMergeRefs([
         (node) => {
             setListRef(index, node);
         },
@@ -30,7 +30,7 @@ const useComboboxOption = ({ id, ref, value, }) => {
     }
     const selected = selectedOptions[utilities.prefix(value)];
     const active = activeIndex === index;
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (active) {
             dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
         }

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

@@ -2,19 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 require('../../../Chip/index.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var Removable = require('../../../Chip/Removable/Removable.js');
+var Chips = require('../../../Chip/Chips.js');
 
 const ComboboxChips = () => {
-    const context = React.useContext(ComboboxContext.ComboboxContext);
+    const context = react.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
     const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(selectedOptions).map((value) => {
-            return (jsxRuntime.jsx(Removable.RemovableChip, { size: size, disabled: disabled, onKeyDown: (e) => {
+            return (jsxRuntime.jsx(Chips.ChipRemovable, { size: size, disabled: disabled, onKeyDown: (e) => {
                     if (readOnly)
                         return;
                     if (disabled)

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

@@ -3,17 +3,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 var ComboboxContext = require('../ComboboxContext.js');
 
-const ComboboxClearButton = React.forwardRef((props, ref) => {
-    const context = React.useContext(ComboboxContext.ComboboxContext);
+const ComboboxClearButton = react.forwardRef((props, ref) => {
+    const context = react.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
     const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
-    return (jsxRuntime.jsx("button", { ...props, ref: ref, disabled: disabled, className: lite.clsx('ds-combobox__clear-button', `ds-focus`), onClick: () => {
+    return (jsxRuntime.jsx("button", { ...props, ref: ref, disabled: disabled, className: cl('ds-combobox__clear-button', `ds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)

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

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ErrorMessage = require('../../../Typography/ErrorMessage/ErrorMessage.js');
+var ValidationMessage = require('../../../ValidationMessage/ValidationMessage.js');
 
 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 }) }));
+    return (jsxRuntime.jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 

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

@@ -2,22 +2,22 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var react$1 = require('@floating-ui/react');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
-var Paragraph = require('../../../Typography/Paragraph/Paragraph.js');
+var Paragraph = require('../../../Paragraph/Paragraph.js');
 var omit = require('../../../../utilities/omit/omit.js');
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
-    const context = React.useContext(ComboboxContext.ComboboxContext);
+    const context = react.useContext(ComboboxContext.ComboboxContext);
     const idDispatch = ComboboxIdContext.useComboboxIdDispatch();
-    const clearButtonRef = React.useRef(null);
+    const clearButtonRef = react.useRef(null);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
@@ -25,7 +25,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
         idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
     };
     const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, size, } = context;
-    const mergedRefs = floatingUi_react.useMergeRefs([forwareddRef, inputRef]);
+    const mergedRefs = react$1.useMergeRefs([forwareddRef, inputRef]);
     // onChange function for the input
     const onChange = (event) => {
         const value = event.target.value;
@@ -70,7 +70,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsxs("div", { ...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) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.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: [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": open ? listId : undefined, 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?.(e);

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

@@ -3,12 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../../node_modules/clsx/dist/lite.js');
-var Label = require('../../../Typography/Label/Label.js');
-var Paragraph = require('../../../Typography/Paragraph/Paragraph.js');
+var cl = require('clsx/lite');
+var Label = require('../../../Label/Label.js');
+var Paragraph = require('../../../Paragraph/Paragraph.js');
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: lite.clsx('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: formFieldProps.descriptionId, className: lite.clsx('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 

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

@@ -1,18 +1,19 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
+var Option = require('./Option/Option.js');
 var utilities = require('./utilities.js');
 
 const isOption = (option) => !!option;
 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 filterCallback = react.useCallback(filter, [filter]);
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = react.useMemo(() => {
+        const allChildren = react.Children.toArray(children);
         const result = allChildren.reduce((acc, child) => {
-            if (utilities.isComboboxOption(child)) {
+            if (Option.isComboboxOption(child)) {
                 acc.optionsChildren.push(child);
             }
             else {
@@ -35,7 +36,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         });
         return result;
     }, [children]);
-    const options = React.useMemo(() => {
+    const options = react.useMemo(() => {
         const values = [];
         const allOptions = {};
         optionsChildren.map((child) => {
@@ -44,7 +45,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
             if (!props.displayValue) {
                 let childrenLabel = '';
                 // go over children and find all strings
-                React.Children.forEach(props.children, (child) => {
+                react.Children.forEach(props.children, (child) => {
                     if (typeof child === 'string') {
                         childrenLabel += child;
                     }
@@ -67,7 +68,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         });
         return allOptions;
     }, [optionsChildren]);
-    const preSelectedOptions = React.useMemo(() => (initialValue?.map((key) => {
+    const preSelectedOptions = react.useMemo(() => (initialValue?.map((key) => {
         return utilities.prefix(key);
     }) || []).reduce((acc, value) => {
         const option = options[value];
@@ -76,8 +77,8 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         }
         return acc;
     }, {}), [initialValue, options]);
-    const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
-    const { filteredOptions, filteredOptionsChildren } = React.useMemo(() => {
+    const [selectedOptions, setSelectedOptions] = react.useState(preSelectedOptions);
+    const { filteredOptions, filteredOptionsChildren } = react.useMemo(() => {
         const filteredOptions = [];
         const filteredOptionsChildren = Object.keys(options)
             .map((option, index) => {

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

@@ -1,24 +1,22 @@
 'use client';
 'use strict';
 
-var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var React = require('react');
-var ReactDOM = require('react-dom');
+var react$1 = require('@floating-ui/react');
+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_reactDom = require('../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 
 const useFloatingCombobox = ({ listRef }) => {
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = react.useState(false);
     const { activeIndex } = ComboboxIdContext.useComboboxId();
     const dispatch = ComboboxIdContext.useComboboxIdDispatch();
     // floating UI
-    const { refs, floatingStyles, context } = floatingUi_react.useFloating({
+    const { refs, floatingStyles, context } = react$1.useFloating({
         open,
         onOpenChange: (newOpen) => {
             if (!newOpen)
                 dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
-            ReactDOM.flushSync(() => {
+            reactDom.flushSync(() => {
                 if (refs.floating.current && !newOpen) {
                     refs.floating.current.scrollTop = 0;
                 }
@@ -28,14 +26,14 @@ const useFloatingCombobox = ({ listRef }) => {
             });
         },
         whileElementsMounted: (reference, floating, update) => {
-            floatingUi_dom.autoUpdate(reference, floating, update);
+            react$1.autoUpdate(reference, floating, update);
             return () => {
                 floating.scrollTop = 0;
             };
         },
         middleware: [
-            floatingUi_reactDom.flip({ padding: 10 }),
-            floatingUi_reactDom.size({
+            react$1.flip({ padding: 10 }),
+            react$1.size({
                 apply({ rects, elements }) {
                     requestAnimationFrame(() => {
                         Object.assign(elements.floating.style, {
@@ -45,12 +43,12 @@ const useFloatingCombobox = ({ listRef }) => {
                     });
                 },
             }),
-            floatingUi_reactDom.offset(10),
+            react$1.offset(10),
         ],
     });
-    const role = floatingUi_react.useRole(context, { role: 'listbox' });
-    const dismiss = floatingUi_react.useDismiss(context);
-    const listNav = floatingUi_react.useListNavigation(context, {
+    const role = react$1.useRole(context, { role: 'listbox' });
+    const dismiss = react$1.useDismiss(context);
+    const listNav = react$1.useListNavigation(context, {
         listRef,
         activeIndex,
         virtual: true,
@@ -61,7 +59,7 @@ const useFloatingCombobox = ({ listRef }) => {
             dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
         },
     });
-    const { getReferenceProps, getFloatingProps, getItemProps } = floatingUi_react.useInteractions([role, dismiss, listNav]);
+    const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([role, dismiss, listNav]);
     return {
         open,
         setOpen,

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

@@ -1,15 +1,11 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var Custom = require('./Custom.js');
-var Option = require('./Option/Option.js');
 
-function isComboboxOption(child) {
-    return React.isValidElement(child) && child.type === Option.ComboboxOption;
-}
 function isComboboxCustom(child) {
-    return React.isValidElement(child) && child.type === Custom.ComboboxCustom;
+    return react.isValidElement(child) && child.type === Custom.ComboboxCustom;
 }
 function isInteractiveComboboxCustom(child) {
     return isComboboxCustom(child) && child.props.interactive === true;
@@ -38,7 +34,6 @@ const setReactInputValue = (input, value) => {
 };
 
 exports.isComboboxCustom = isComboboxCustom;
-exports.isComboboxOption = isComboboxOption;
 exports.isInteractiveComboboxCustom = isInteractiveComboboxCustom;
 exports.prefix = prefix;
 exports.removePrefix = removePrefix;

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

@@ -2,27 +2,25 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
+var useFormField = require('../useFormField.js');
 var FieldsetContext = require('./FieldsetContext.js');
-var useFieldset = require('./useFieldset.js');
-var Label = require('../../Typography/Label/Label.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var Label = require('../../Label/Label.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-const Fieldset = React.forwardRef((props, ref) => {
+const Fieldset = react.forwardRef(function Fieldset(props, ref) {
     const { children, legend, description, error, hideLegend, className, ...rest } = props;
-    const { fieldsetProps, size, readOnly, errorId, hasError, descriptionId } = useFieldset.useFieldset(props);
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
+    const { inputProps, size, readOnly, errorId, hasError, descriptionId } = useFormField.useFormField(props, 'fieldset');
     return (jsxRuntime.jsx(FieldsetContext.FieldsetContext.Provider, { value: {
+            disabled: props?.disabled,
             error: error ?? fieldset?.error,
             errorId: hasError ? errorId : undefined,
-            size,
-            disabled: props?.disabled,
             readOnly,
-        }, children: jsxRuntime.jsxs("fieldset", { ...fieldsetProps, className: lite.clsx('ds-fieldset', !hideLegend && 'ds-fieldset--spacing', readOnly && 'ds-fieldset--readonly', className), disabled: props?.disabled, ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { className: 'ds-fieldset__legend', children: jsxRuntime.jsxs("span", { className: lite.clsx('ds-fieldset__legend__content', hideLegend && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { className: 'ds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, variant: 'short', asChild: true, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx('ds-fieldset__description', 'ds-font-weight--regular', hideLegend && `ds-sr-only`), children: description }) })), children, jsxRuntime.jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'ds-fieldset__error-message', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) })] }) }));
+            size,
+        }, children: jsxRuntime.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: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { children: legend }) }), !!description && (jsxRuntime.jsx(Paragraph.Paragraph, { id: descriptionId, size: size, variant: 'short', children: description })), children, jsxRuntime.jsx("div", { "aria-live": 'polite', "aria-relevant": 'additions removals', id: errorId, children: hasError && (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: error })) })] }) }));
 });
-Fieldset.displayName = 'Fieldset';
 
 exports.Fieldset = Fieldset;

package/dist/cjs/components/form/Fieldset/FieldsetContext.js

@@ -1,8 +1,8 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
-const FieldsetContext = React.createContext(null);
+const FieldsetContext = react.createContext(null);
 
 exports.FieldsetContext = FieldsetContext;

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

@@ -2,17 +2,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 var useRadio = require('./useRadio.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
 var omit = require('../../../utilities/omit/omit.js');
-var Label = require('../../Typography/Label/Label.js');
+var Label = require('../../Label/Label.js');
 
-const Radio = React.forwardRef((props, ref) => {
+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, ...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 }) }))] }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl('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: cl('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/Radio/RadioGroup.js

@@ -2,20 +2,20 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 var Fieldset = require('../Fieldset/Fieldset.js');
 
-const RadioGroupContext = React.createContext(null);
-const RadioGroup = React.forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
-    const nameId = React.useId();
+const RadioGroupContext = react.createContext(null);
+const RadioGroup = react.forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
+    const nameId = react.useId();
     return (jsxRuntime.jsx(Fieldset.Fieldset, { readOnly: readOnly, size: size, className: className, ref: ref, ...rest, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                 value,
                 defaultValue,
                 name: name ?? `radiogroup-name-${nameId}`,
                 onChange,
                 required,
-            }, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
+            }, children: jsxRuntime.jsx("div", { className: cl('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 

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

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var useFormField = require('../useFormField.js');
 var RadioGroup = require('./RadioGroup.js');
 
 /** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
 const useRadio = (props) => {
-    const radioGroup = React.useContext(RadioGroup.RadioGroupContext);
+    const radioGroup = react.useContext(RadioGroup.RadioGroupContext);
     const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'radio');
     return {
         ...rest,

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

@@ -2,14 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var react$1 = require('@floating-ui/react');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
-var useSearch = require('./useSearch.js');
+var cl = require('clsx/lite');
+var react = require('react');
 var Button = require('../../Button/Button.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var Label = require('../../Typography/Label/Label.js');
+var useSearch = require('./useSearch.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+var Label = require('../../Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
 
 /** Search field
@@ -19,13 +19,13 @@ var omit = require('../../../utilities/omit/omit.js');
  * <Search label="Search" label">
  * ```
  */
-const Search = React.forwardRef((props, ref) => {
+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, size = 'md' } = useSearch.useSearch(props);
-    const inputRef = React.useRef();
-    const mergedRef = floatingUi_react.useMergeRefs([ref, inputRef]);
-    const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
-    const handleChange = React.useCallback((e) => {
+    const inputRef = react.useRef();
+    const mergedRef = react$1.useMergeRefs([ref, inputRef]);
+    const [internalValue, setInternalValue] = react.useState(defaultValue ?? '');
+    const handleChange = react.useCallback((e) => {
         const newValue = e.target.value;
         value === undefined && setInternalValue(newValue);
         onChange?.(e);
@@ -40,9 +40,9 @@ const Search = React.forwardRef((props, ref) => {
     };
     const isSimple = variant === 'simple';
     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
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl('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: cl('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: cl('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: cl('ds-search__input', `ds-focus`, isSimple
                                         ? 'ds-search__input--simple'
-                                        : '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 }))] })] }) }));
+                                        : 'ds-search__input--with-search-button'), ...omit.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: cl('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/Search/useSearch.js

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var FieldsetContext = require('../Fieldset/FieldsetContext.js');
 var useFormField = require('../useFormField.js');
 
 /** Handles props for `Search` in context with `Fieldset` */
 const useSearch = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
     const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'search');
     return {
         ...rest,