@digdir/designsystemet-react 0.52.0-alpha.0

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

@@ -0,0 +1,108 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var akselIcons = require('@navikt/aksel-icons');
+var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var Combobox = require('../Combobox.js');
+var Combobox_module = require('../Combobox.module.css.js');
+var Textfield_module = require('../../Textfield/Textfield.module.css.js');
+var ComboboxChips = require('./ComboboxChips.js');
+var ComboboxClearButton = require('./ComboboxClearButton.js');
+var Box = require('../../../Box/Box.js');
+var objectUtils = require('../../../../utilities/objectUtils.js');
+
+const ComboboxInput = ({ ...rest }) => {
+    const context = React.useContext(Combobox.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const mergedRefs = floatingUi_react.useMergeRefs([forwareddRef, inputRef]);
+    // we need to check if input is in focus, to add focus styles to the wrapper
+    const [inputInFocus, setInputInFocus] = React.useState(false);
+    React.useEffect(() => {
+        const input = inputRef.current;
+        const onFocus = () => {
+            setInputInFocus(true);
+        };
+        const onBlur = () => {
+            setInputInFocus(false);
+        };
+        input?.addEventListener('focus', onFocus);
+        input?.addEventListener('blur', onBlur);
+        return () => {
+            input?.removeEventListener('focus', onFocus);
+            input?.removeEventListener('blur', onBlur);
+        };
+    }, [inputRef]);
+    // onChange function for the input
+    const onChange = (event) => {
+        const value = event.target.value;
+        setInputValue(value);
+        setActiveIndex(0);
+        if (typeof value === 'string') {
+            setOpen(true);
+        }
+        else {
+            setOpen(false);
+        }
+        // check if input value is the same as a label, if so, select it
+        const option = options.find((option) => option.label === value);
+        if (!option)
+            return;
+        if (selectedOptions.find((selectedOption) => selectedOption.value === option.value))
+            return;
+        handleSelectOption(option);
+        if (multiple) {
+            inputRef.current?.focus();
+        }
+        else {
+            // move cursor to the end of the input
+            setTimeout(() => {
+                inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
+            }, 0);
+        }
+    };
+    return (jsxRuntime.jsxs(Box.Box
+    /* Props from floating-ui */
+    , { ...getReferenceProps({
+            ref: refs?.setReference,
+            role: null,
+            'aria-controls': null,
+            'aria-expanded': null,
+            'aria-haspopup': null,
+            /* If we click the wrapper, open the list, set index to first option, and focus the input */
+            onClick() {
+                if (disabled)
+                    return;
+                if (readOnly)
+                    return;
+                setOpen(true);
+                setActiveIndex(0);
+                inputRef.current?.focus();
+            },
+            /* Handles list navigation */
+            onKeyDown(event) {
+                handleKeyDown(event);
+            },
+            // preventDefault on keydown to avoid sending in form
+            onKeyPress(event) {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                }
+            },
+        }), "aria-disabled": disabled, className: clsx.clsx(Textfield_module.input, Combobox_module.inputWrapper, Combobox_module[size], inputInFocus && Combobox_module.inFocus, readOnly && Combobox_module.readonly, error && Combobox_module.error), children: [jsxRuntime.jsxs("div", { className: Combobox_module.chipAndInput, children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": activeDescendant, readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
+                            onChange(e);
+                            rest.onChange && rest.onChange(e);
+                        } })] }), multiple && selectedOptions.length > 0 && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: Combobox_module.arrow, children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+};
+ComboboxInput.displayName = 'ComboboxInput';
+var ComboboxInput$1 = ComboboxInput;
+
+exports.ComboboxInput = ComboboxInput;
+exports.default = ComboboxInput$1;

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var akselIcons = require('@navikt/aksel-icons');
+var Combobox_module = require('../Combobox.module.css.js');
+var utility_module = require('../../../../utilities/utility.module.css.js');
+var Label = require('../../../Typography/Label/Label.js');
+var Paragraph = require('../../../Typography/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: clsx.clsx(Combobox_module.label, hideLabel && utility_module.visuallyHidden), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: Combobox_module.padlock })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: formFieldProps.descriptionId, className: clsx.clsx(Combobox_module.description, hideLabel && utility_module.visuallyHidden), children: description }) }))] }));
+};
+ComboboxLabel.displayName = 'ComboboxLabel';
+var ComboboxLabel$1 = ComboboxLabel;
+
+exports.ComboboxLabel = ComboboxLabel;
+exports.default = ComboboxLabel$1;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
+    return (jsxRuntime.jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple
+            ? selectedOptions.map((option) => option.value)
+            : selectedOptions[0]?.value, onChange: () => { }, children: selectedOptions.map((option) => (jsxRuntime.jsx("option", { value: option.value }, option.value))) }));
+};
+ComboboxNative.displayName = 'ComboboxNative';
+var ComboboxNative$1 = ComboboxNative;
+
+exports.ComboboxNative = ComboboxNative;
+exports.default = ComboboxNative$1;

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

@@ -0,0 +1,123 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Option = require('./Option/Option.js');
+var Custom = require('./Custom/Custom.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function useCombobox({ children, inputValue, multiple, selectedOptions, filter, }) {
+    const options = React.useMemo(() => {
+        const allOptions = [];
+        React__namespace.Children.forEach(children, (child) => {
+            if (isComboboxOption(child)) {
+                const props = child.props;
+                let label = props.displayValue || '';
+                if (!props.displayValue) {
+                    let childrenLabel = '';
+                    // go over children and find all strings
+                    React__namespace.Children.forEach(props.children, (child) => {
+                        if (typeof child === 'string') {
+                            childrenLabel += child;
+                        }
+                        else {
+                            throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
+                        }
+                    });
+                    label = childrenLabel;
+                }
+                allOptions.push({
+                    value: props.value,
+                    label,
+                    displayValue: props.displayValue,
+                    description: props.description,
+                });
+            }
+        });
+        return allOptions;
+    }, [children]);
+    const optionsChildren = React.useMemo(() => {
+        const valuesArray = Array.from(options);
+        const children_ = React__namespace.Children.toArray(children).filter((child) => isComboboxOption(child));
+        const activeValue = valuesArray.find((item) => item.label === inputValue);
+        if (activeValue && !multiple)
+            return children_;
+        if (inputValue === '' && !multiple)
+            return children_;
+        return children_.filter((child) => {
+            const { value } = child.props;
+            const option = valuesArray.find((item) => item.value === value);
+            if (!option)
+                return false;
+            const isSelected = selectedOptions.some((selectedOption) => selectedOption.value === value);
+            // show what we search for, and all selected options
+            return filter(inputValue, { ...option }) || isSelected;
+        });
+    }, [options, children, multiple, inputValue, selectedOptions, filter]);
+    const customIds = React.useMemo(() => {
+        // find all custom components with `interactive=true` and generate random values for them
+        const children_ = React__namespace.Children.toArray(children).filter((child) => {
+            return isInteractiveComboboxCustom(child);
+        });
+        // return all ids
+        return children_.map((child) => {
+            if (!child.props.id)
+                throw new Error('If ComboboxCustom is interactive, it must have an id');
+            return child.props.id;
+        });
+    }, [children]);
+    const optionValues = React.useMemo(() => {
+        // create an index map of values from optionsChildren
+        const options = optionsChildren.map((child) => {
+            const { value } = child.props;
+            return value;
+        });
+        return [...customIds, ...options];
+    }, [customIds, optionsChildren]);
+    const restChildren = React.useMemo(() => {
+        return React__namespace.Children.toArray(children).filter((child) => {
+            return !isComboboxOption(child);
+        });
+    }, [children]);
+    return {
+        optionsChildren,
+        optionValues,
+        restChildren,
+        options,
+        customIds,
+    };
+}
+function isComboboxOption(child) {
+    return React__namespace.isValidElement(child) && child.type === Option.ComboboxOption;
+}
+function isComboboxCustom(child) {
+    return React__namespace.isValidElement(child) && child.type === Custom.default;
+}
+function isInteractiveComboboxCustom(child) {
+    return isComboboxCustom(child) && child.props.interactive === true;
+}
+
+exports.default = useCombobox;
+exports.isComboboxCustom = isComboboxCustom;
+exports.isComboboxOption = isComboboxOption;
+exports.isInteractiveComboboxCustom = isInteractiveComboboxCustom;

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

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var akselIcons = require('@navikt/aksel-icons');
+var utility_module = require('../../../utilities/utility.module.css.js');
+var useFieldset = require('./useFieldset.js');
+var Fieldset_module = require('./Fieldset.module.css.js');
+var Label = require('../../Typography/Label/Label.js');
+var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+
+const FieldsetContext = React.createContext(null);
+const Fieldset = React.forwardRef((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);
+    return (jsxRuntime.jsx(FieldsetContext.Provider, { value: {
+            error: error ?? fieldset?.error,
+            errorId: hasError ? errorId : undefined,
+            size,
+            disabled: props?.disabled,
+            readOnly,
+        }, children: jsxRuntime.jsxs("fieldset", { ...fieldsetProps, className: clsx.clsx(Fieldset_module.fieldset, !hideLegend && Fieldset_module.withSpacing, readOnly && Fieldset_module.readonly, props?.disabled && Fieldset_module.disabled, className), ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { className: Fieldset_module.legend, children: jsxRuntime.jsxs("span", { className: clsx.clsx(Fieldset_module.legendContent, hideLegend && utility_module.visuallyHidden), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { className: Fieldset_module.padlock, "aria-hidden": true })), legend] }) }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, short: true, children: jsxRuntime.jsx("div", { id: descriptionId, className: clsx.clsx(Fieldset_module.description, hideLegend && utility_module.visuallyHidden), children: description }) })), children, jsxRuntime.jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: Fieldset_module.errorWrapper, children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) })] }) }));
+});
+Fieldset.displayName = 'Fieldset';
+
+exports.Fieldset = Fieldset;
+exports.FieldsetContext = FieldsetContext;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"fieldset":"fds-fieldset-fieldset-4ef8e1c","withSpacing":"fds-fieldset-withSpacing-4ef8e1c","description":"fds-fieldset-description-4ef8e1c","legend":"fds-fieldset-legend-4ef8e1c","readonly":"fds-fieldset-readonly-4ef8e1c","legendContent":"fds-fieldset-legendContent-4ef8e1c","padlock":"fds-fieldset-padlock-4ef8e1c","disabled":"fds-fieldset-disabled-4ef8e1c","errorWrapper":"fds-fieldset-errorWrapper-4ef8e1c"};
+
+module.exports = classes;

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var useFormField = require('../useFormField.js');
+
+/** Handles fieldset props and state */
+const useFieldset = (props) => {
+    const formField = useFormField.useFormField(props, 'fieldset');
+    const { inputProps } = formField;
+    return {
+        ...formField,
+        fieldsetProps: {
+            'aria-invalid': inputProps['aria-invalid'],
+            'aria-describedby': inputProps['aria-describedby'],
+        },
+    };
+};
+
+exports.useFieldset = useFieldset;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var akselIcons = require('@navikt/aksel-icons');
+var NativeSelect_module = require('./NativeSelect.module.css.js');
+var utility_module = require('../../../utilities/utility.module.css.js');
+var useNativeSelect = require('./useNativeSelect.js');
+var objectUtils = require('../../../utilities/objectUtils.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var Label = require('../../Typography/Label/Label.js');
+var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+
+const NativeSelect = React.forwardRef((props, ref) => {
+    const { children, disabled = false, label, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
+    const { selectProps, errorId, readOnly = false, size = 'medium', } = useNativeSelect.useNativeSelect(props);
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(NativeSelect_module.formField, disabled && NativeSelect_module.disabled, readOnly && NativeSelect_module.readOnly, error && NativeSelect_module.error), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx.clsx(NativeSelect_module.label, hideLabel && utility_module.visuallyHidden), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: NativeSelect_module.padlock })), label] })), jsxRuntime.jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx.clsx(NativeSelect_module.select, NativeSelect_module[size], utility_module.focusable, props.multiple && NativeSelect_module.multiple, className), ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...objectUtils.omit(['readOnly', 'disabled'], selectProps), children: children }), error && (jsxRuntime.jsx("div", { id: errorId, className: NativeSelect_module.errorMessage, "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
+});
+NativeSelect.displayName = 'NativeSelect';
+
+exports.NativeSelect = NativeSelect;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"select":"fds-nativeselect-select-88cf3fbc","multiple":"fds-nativeselect-multiple-88cf3fbc","small":"fds-nativeselect-small-88cf3fbc","medium":"fds-nativeselect-medium-88cf3fbc","large":"fds-nativeselect-large-88cf3fbc","formField":"fds-nativeselect-formField-88cf3fbc","disabled":"fds-nativeselect-disabled-88cf3fbc","readOnly":"fds-nativeselect-readOnly-88cf3fbc","error":"fds-nativeselect-error-88cf3fbc","padlock":"fds-nativeselect-padlock-88cf3fbc","errorMessage":"fds-nativeselect-errorMessage-88cf3fbc","label":"fds-nativeselect-label-88cf3fbc"};
+
+module.exports = classes;

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

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useFormField = require('../useFormField.js');
+var Fieldset = require('../Fieldset/Fieldset.js');
+
+/** Handles props for `NativeSelect` in context with `Fieldset` */
+const useNativeSelect = (props) => {
+    const fieldset = React.useContext(Fieldset.FieldsetContext);
+    const { inputProps: selectProps, readOnly, ...rest } = useFormField.useFormField(props, 'select');
+    return {
+        ...rest,
+        readOnly,
+        size: fieldset?.size ?? props.size,
+        selectProps: {
+            ...selectProps,
+            readOnly,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+            },
+        },
+    };
+};
+
+exports.useNativeSelect = useNativeSelect;

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

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var Group_module = require('./Group.module.css.js');
+var Fieldset = require('../../Fieldset/Fieldset.js');
+
+const RadioGroupContext = React.createContext(null);
+const RadioGroup = React.forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'medium', 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: clsx.clsx(inline && Group_module.inline), children: children }) }) }));
+});
+RadioGroup.displayName = 'RadioGroup';
+
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupContext = RadioGroupContext;

package/dist/cjs/components/form/Radio/Group/Group.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"inline":"fds-group-inline-d0931a50"};
+
+module.exports = classes;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var Radio_module = require('./Radio.module.css.js');
+var useRadio = require('./useRadio.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var objectUtils = require('../../../utilities/objectUtils.js');
+var Label = require('../../Typography/Label/Label.js');
+
+const Radio = React.forwardRef((props, ref) => {
+    const { children, description, className, ...rest } = props;
+    const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useRadio.useRadio(props);
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: clsx.clsx(Radio_module.container, Radio_module[size], inputProps.disabled && Radio_module.disabled, hasError && Radio_module.error, readOnly && Radio_module.readonly, className), children: [jsxRuntime.jsx("input", { className: Radio_module.input, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsx(Label.Label, { className: Radio_module.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: Radio_module.description, children: description }) }))] }) }));
+});
+Radio.displayName = 'Radio';
+
+exports.Radio = Radio;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"container":"fds-radio-container-631ff5a4","label":"fds-radio-label-631ff5a4","description":"fds-radio-description-631ff5a4","input":"fds-radio-input-631ff5a4","disabled":"fds-radio-disabled-631ff5a4","readonly":"fds-radio-readonly-631ff5a4","error":"fds-radio-error-631ff5a4","small":"fds-radio-small-631ff5a4","medium":"fds-radio-medium-631ff5a4","large":"fds-radio-large-631ff5a4"};
+
+module.exports = classes;

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

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var Radio$1 = require('./Radio.js');
+var Group = require('./Group/Group.js');
+
+/** `<input> element with `type="radio"` used for selecting one option */
+const Radio = Radio$1.Radio;
+Radio.Group = Group.RadioGroup;
+Radio.Group.displayName = 'Radio.Group';
+
+exports.RadioGroup = Group.RadioGroup;
+exports.Radio = Radio;

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

@@ -0,0 +1,46 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useFormField = require('../useFormField.js');
+var Group = require('./Group/Group.js');
+
+/** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
+const useRadio = (props) => {
+    const radioGroup = React.useContext(Group.RadioGroupContext);
+    const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'radio');
+    return {
+        ...rest,
+        readOnly,
+        inputProps: {
+            ...inputProps,
+            readOnly,
+            type: 'radio',
+            name: radioGroup?.name ?? props.name,
+            required: radioGroup?.required,
+            defaultChecked: radioGroup?.defaultValue
+                ? radioGroup?.defaultValue === props.value
+                : props.defaultChecked,
+            checked: radioGroup?.value
+                ? radioGroup?.value === props.value
+                : props.checked,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+                radioGroup?.onChange?.(props.value);
+            },
+        },
+    };
+};
+
+exports.useRadio = useRadio;

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

@@ -0,0 +1,50 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var akselIcons = require('@navikt/aksel-icons');
+var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var useSearch = require('./useSearch.js');
+var Search_module = require('./Search.module.css.js');
+var utility_module = require('../../../utilities/utility.module.css.js');
+var Button = require('../../Button/Button.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var Label = require('../../Typography/Label/Label.js');
+var objectUtils = require('../../../utilities/objectUtils.js');
+var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+
+/** 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, hasError, errorId, size = 'medium' } = 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 newValue = e.target.value;
+        value === undefined && setInternalValue(newValue);
+        onChange?.(e);
+    }, [onChange, value]);
+    const handleClear = () => {
+        onClear?.(internalValue);
+        setInternalValue('');
+        inputRef?.current && 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: clsx.clsx(Search_module.formField, inputProps.disabled && Search_module.disabled, Search_module[size], className), children: [label && (jsxRuntime.jsx(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx.clsx(Search_module.label, hideLabel && utility_module.visuallyHidden), children: jsxRuntime.jsx("span", { children: label }) })), jsxRuntime.jsxs("div", { className: Search_module.field, children: [jsxRuntime.jsxs("div", { className: Search_module.field, children: [isSimple && (jsxRuntime.jsx(akselIcons.MagnifyingGlassIcon, { className: Search_module.icon, "aria-hidden": true })), jsxRuntime.jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx.clsx(Search_module.input, utility_module.focusable, Search_module[size], isSimple && Search_module.simple, !isSimple && Search_module.withSearchButton), ...objectUtils.omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxRuntime.jsxs("button", { className: clsx.clsx(Search_module.clearButton, utility_module.focusable), type: 'button', onClick: handleClear, disabled: disabled, children: [jsxRuntime.jsx("span", { className: utility_module.visuallyHidden, children: clearButtonLabel }), jsxRuntime.jsx(akselIcons.XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsxRuntime.jsx(Button.Button, { className: Search_module.searchButton, size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsxRuntime.jsx("div", { className: Search_module.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+});
+Search.displayName = 'Search';
+
+exports.Search = Search;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"formField":"fds-search-formField-7eb2965c","small":"fds-search-small-7eb2965c","medium":"fds-search-medium-7eb2965c","large":"fds-search-large-7eb2965c","errorMessage":"fds-search-errorMessage-7eb2965c","label":"fds-search-label-7eb2965c","field":"fds-search-field-7eb2965c","icon":"fds-search-icon-7eb2965c","input":"fds-search-input-7eb2965c","withSearchButton":"fds-search-withSearchButton-7eb2965c","disabled":"fds-search-disabled-7eb2965c","searchButton":"fds-search-searchButton-7eb2965c","clearButton":"fds-search-clearButton-7eb2965c","simple":"fds-search-simple-7eb2965c","error":"fds-search-error-7eb2965c"};
+
+module.exports = classes;

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

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useFormField = require('../useFormField.js');
+var Fieldset = require('../Fieldset/Fieldset.js');
+
+const sizeMap = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+/** Handles props for `Search` in context with `Fieldset` */
+const useSearch = (props) => {
+    const fieldset = React.useContext(Fieldset.FieldsetContext);
+    const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'search');
+    const fieldSetSize = fieldset?.size ? sizeMap[fieldset?.size] : null;
+    return {
+        ...rest,
+        readOnly,
+        size: fieldSetSize ?? props.size,
+        inputProps: {
+            ...inputProps,
+            type: 'search',
+            name: props.name ?? 'q',
+            readOnly,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+            },
+        },
+    };
+};
+
+exports.useSearch = useSearch;