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

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

@@ -9,7 +9,7 @@ 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 Label = require('../../../Label/Label.js');
 
 const ComboboxOption = react.memo(react.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = react.useId();
@@ -24,10 +24,12 @@ const ComboboxOption = react.memo(react.forwardRef(({ value, description, childr
     }
     const { size, multiple, getItemProps } = context;
     const props = getItemProps();
-    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) => {
+    return (jsxRuntime.jsx(Label.Label, { "data-size": 'md', asChild: true, children: jsxRuntime.jsxs("button", { ref: ref, id: id, 
+            // biome-ignore lint/a11y/useSemanticElements: biome wants me to use the <option> element
+            role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
                 onOptionClick();
                 rest.onClick?.(e);
-            }, 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 }))] })] }) }));
+            }, 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, "data-size": size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description, { children: description }))] })] }) }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 function isComboboxOption(child) {

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

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 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);
@@ -14,7 +14,7 @@ const ComboboxChips = () => {
     }
     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, { "data-size": size, disabled: disabled, onKeyDown: (e) => {
                     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 ValidationMessage = require('../../../Typography/ValidationMessage/ValidationMessage.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(ValidationMessage.ValidationMessage, { 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, { "data-size": size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 

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

@@ -11,7 +11,7 @@ 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 }) => {
@@ -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: 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": 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, { "data-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, { "data-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

@@ -4,11 +4,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
-var Label = require('../../../Typography/Label/Label.js');
-var Paragraph = require('../../../Typography/Paragraph/Paragraph.js');
+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: 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 }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs(Label.Label, { "data-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, "data-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/Field/Field.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var cl = require('clsx/lite');
+var react = require('react');
+var fieldObserver = require('./fieldObserver.js');
+
+const Field = react.forwardRef(function Field({ className, ...rest }, ref) {
+    const fieldRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([fieldRef, ref]);
+    react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
+    return (jsxRuntime.jsx("div", { className: cl('ds-field', className), ref: mergedRefs, ...rest }));
+});
+
+exports.Field = Field;

package/dist/cjs/components/form/Field/FieldAffix.js

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const FieldAffixes = react.forwardRef(function FieldAffixes({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
+});
+const FieldAffix = react.forwardRef(function FieldAffix({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
+});
+
+exports.FieldAffix = FieldAffix;
+exports.FieldAffixes = FieldAffixes;

package/dist/cjs/components/form/Field/FieldCounter.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
+
+const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
+    const [count, setCount] = react.useState(0);
+    const counterRef = react.useRef(null);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    react.useEffect(() => {
+        const onInput = ({ target }) => {
+            if (target instanceof HTMLInputElement ||
+                target instanceof HTMLTextAreaElement) {
+                setCount(target.value.length);
+            }
+        };
+        const field = counterRef.current?.closest('.ds-field');
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, [setCount]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), jsxRuntime.jsx(ValidationMessage.ValidationMessage, { error: hasExceededLimit, ref: ref, ...rest, children: label(hasExceededLimit ? over : under, remainder) })] }));
+});
+
+exports.FieldCounter = FieldCounter;

package/dist/cjs/components/form/Field/FieldDescription.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const FieldDescription = react.forwardRef(function FieldDescription(rest, ref) {
+    return jsxRuntime.jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+exports.FieldDescription = FieldDescription;

package/dist/cjs/components/form/Field/fieldObserver.js

@@ -0,0 +1,97 @@
+'use client';
+'use strict';
+
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el)) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, 'aria-disabled', null); // Reset disabled state
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        const isDisabled = input?.hasAttribute('disabled') ||
+            input?.getAttribute('aria-disabled') === 'true';
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
+            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
+            if (!value)
+                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
+            if (descriptionType === 'validation')
+                describedbyIds.unshift(el.id); // Validations to the front
+            else if (descriptionType)
+                describedbyIds.push(el.id); // Other descriptions to the back
+        }
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => 'validity' in node && !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+exports.fieldObserver = fieldObserver;

package/dist/cjs/components/form/Field/index.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var Field$1 = require('./Field.js');
+var FieldAffix = require('./FieldAffix.js');
+var FieldCounter = require('./FieldCounter.js');
+var FieldDescription = require('./FieldDescription.js');
+
+/**
+ * @example
+ * <Field>
+ *  <Label>Label text</Label>
+ *  <Field.Description>Description</Field.Description>
+ *  <Input />
+ *  <ValidationMessage>Validation message</ValidationMessage>
+ * </Field>
+ */
+const Field = Object.assign(Field$1.Field, {
+    Description: FieldDescription.FieldDescription,
+    Affixes: FieldAffix.FieldAffixes,
+    Affix: FieldAffix.FieldAffix,
+    Counter: FieldCounter.FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+exports.FieldAffix = FieldAffix.FieldAffix;
+exports.FieldAffixes = FieldAffix.FieldAffixes;
+exports.FieldCounter = FieldCounter.FieldCounter;
+exports.FieldDescription = FieldDescription.FieldDescription;
+exports.Field = Field;

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

@@ -4,23 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var useFormField = require('../useFormField.js');
-var FieldsetContext = require('./FieldsetContext.js');
-var Label = require('../../Typography/Label/Label.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
 
-const Fieldset = react.forwardRef(function Fieldset(props, ref) {
-    const { children, legend, description, error, hideLegend, className, ...rest } = props;
-    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,
-            readOnly,
-            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 })) })] }) }));
+const Fieldset = react.forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
 });
 
 exports.Fieldset = Fieldset;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+
+const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
+    return jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest });
+});
+
+exports.FieldsetDescription = FieldsetDescription;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Label = require('../../Label/Label.js');
+
+const FieldsetLegend = react.forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsxRuntime.jsx(Label.Label, { asChild: true, children: jsxRuntime.jsx("legend", { ref: ref, ...rest }) }));
+});
+
+exports.FieldsetLegend = FieldsetLegend;

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var Fieldset$1 = require('./Fieldset.js');
+var FieldsetDescription = require('./FieldsetDescription.js');
+var FieldsetLegend = require('./FieldsetLegend.js');
+
+/**
+ * @example
+ * <Fieldset>
+ *  <Fieldset.Legend>Legend text</Fieldset.Legend>
+ *  <Fieldset.Description>Description text</Fieldset.Description>
+ *  ...input components
+ * </Fieldset>
+ */
+const Fieldset = Object.assign(Fieldset$1.Fieldset, {
+    Legend: FieldsetLegend.FieldsetLegend,
+    Description: FieldsetDescription.FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+exports.FieldsetDescription = FieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = FieldsetLegend.FieldsetLegend;
+exports.Fieldset = Fieldset;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/** Input field
+ *
+ * @example
+ * ```tsx
+ * <Input />
+ * ```
+ */
+const Input = react.forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsxRuntime.jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+exports.Input = Input;

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

@@ -2,18 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
 var react = require('react');
-var useRadio = require('./useRadio.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var omit = require('../../../utilities/omit/omit.js');
-var Label = require('../../Typography/Label/Label.js');
+var index = require('../Field/index.js');
+var Input = require('../Input/Input.js');
+var Label = require('../../Label/Label.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.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: 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 used to select multiple options.
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+const Radio = react.forwardRef(function Radio({ 'data-size': size, children, label, description, validation, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, children: [jsxRuntime.jsx(Input.Input, { type: 'radio', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!validation && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: validation })] }));
 });
-Radio.displayName = 'Radio';
 
 exports.Radio = Radio;

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

@@ -2,48 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
-var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
-var Button = require('../../Button/Button.js');
-var useSearch = require('./useSearch.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var Label = require('../../Typography/Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
 
-/** Search field
- *
- * @example
- * ```tsx
- * <Search label="Search" label">
- * ```
- */
-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 = 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);
-    }, [onChange, value]);
-    const handleClear = () => {
-        onClear?.(internalValue);
-        setInternalValue('');
-        inputRef?.current?.focus();
-    };
-    const handleSearchClick = () => {
-        onSearchClick?.((value ?? internalValue).toString());
-    };
-    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: 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: 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 }))] })] }) }));
+const Search = react.forwardRef(function Search({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });
-Search.displayName = 'Search';
 
 exports.Search = Search;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../../Button/Button.js');
+
+const SearchButton = react.forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, type: 'submit', ...rest, children: children }));
+});
+
+exports.SearchButton = SearchButton;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utilities = require('../Combobox/utilities.js');
+var Button = require('../../Button/Button.js');
+
+const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const handleClear = (e) => {
+        const target = e.target;
+        let input = null;
+        if (target instanceof HTMLElement)
+            input = target.closest('.ds-search')?.querySelector('input');
+        if (!input)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(input instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        e.preventDefault();
+        utilities.setReactInputValue(input, '');
+        input.focus();
+        onClick?.(e);
+    };
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+
+exports.SearchClear = SearchClear;

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

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Input = require('../Input/Input.js');
+
+const SearchInput = react.forwardRef(function SearchInput({ ...rest }, ref) {
+    return (jsxRuntime.jsx(Input.Input, { ref: ref, type: 'search', 
+        /* We need an empty placeholder for the clear button to be able to show/hide */
+        placeholder: '', ...rest }));
+});
+
+exports.SearchInput = SearchInput;

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

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var Search$1 = require('./Search.js');
+var SearchButton = require('./SearchButton.js');
+var SearchClear = require('./SearchClear.js');
+var SearchInput = require('./SearchInput.js');
+
+/**
+ * Search field
+ *
+ * @example
+ * ```tsx
+ * <Search>
+ *  <Search.Input aria-label='Søk' />
+ *  <Search.Clear />
+ *  <Search.Button />
+ * </Search>
+ * ```
+ */
+const Search = Object.assign(Search$1.Search, {
+    Clear: SearchClear.SearchClear,
+    Button: SearchButton.SearchButton,
+    Input: SearchInput.SearchInput,
+});
+Search.Clear.displayName = 'Search.Clear';
+Search.Button.displayName = 'Search.Button';
+Search.Input.displayName = 'Search.Input';
+
+exports.SearchButton = SearchButton.SearchButton;
+exports.SearchClear = SearchClear.SearchClear;
+exports.SearchInput = SearchInput.SearchInput;
+exports.Search = Search;

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

@@ -2,19 +2,21 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
-var useSelect = require('./useSelect.js');
-var Label = require('../../Typography/Label/Label.js');
-var omit = require('../../../utilities/omit/omit.js');
-var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
-const Select = react.forwardRef(function Select(props, ref) {
-    const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useSelect.useSelect(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: cl('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: cl(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: cl('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit.omit(['size', 'error', 'errorId'], rest), ...omit.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: error }) }))] }) }));
+const Select = react.forwardRef(function Select({ className, onKeyDown, onMouseDown, ...rest }, ref) {
+    return (jsxRuntime.jsx("select", { className: cl('ds-input', className), ref: ref, onKeyDown: (event) => {
+            if (event.key === 'Tab')
+                return;
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onKeyDown?.(event);
+        }, onMouseDown: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for select
+            onMouseDown?.(event);
+        }, ...rest }));
 });
 
 exports.Select = Select;