@digdir/designsystemet-react 1.0.0-next.41-test-react19 → 1.0.0-next.43

package/dist/cjs/index.js

@@ -9,92 +9,91 @@ var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
 var omit = require('./utilities/omit/omit.js');
 var Avatar = require('./components/Avatar/Avatar.js');
 var Button = require('./components/Button/Button.js');
-var Badge = require('./components/Badge/Badge.js');
-var index = require('./components/Breadcrumbs/index.js');
+var index = require('./components/Badge/index.js');
+var BadgePosition = require('./components/Badge/BadgePosition.js');
+var index$1 = require('./components/Breadcrumbs/index.js');
 var BreadcrumbsList = require('./components/Breadcrumbs/BreadcrumbsList.js');
 var BreadcrumbsItem = require('./components/Breadcrumbs/BreadcrumbsItem.js');
 var BreadcrumbsLink = require('./components/Breadcrumbs/BreadcrumbsLink.js');
 var HelpText = require('./components/HelpText/HelpText.js');
-var Spinner = require('./components/loaders/Spinner/Spinner.js');
-var Skeleton = require('./components/loaders/Skeleton/Skeleton.js');
+var Spinner = require('./components/Spinner/Spinner.js');
+var Skeleton = require('./components/Skeleton/Skeleton.js');
 var Link = require('./components/Link/Link.js');
-var index$1 = require('./components/List/index.js');
+var index$2 = require('./components/List/index.js');
 var Lists = require('./components/List/Lists.js');
 var ListItem = require('./components/List/ListItem.js');
 var Label = require('./components/Label/Label.js');
 var Heading = require('./components/Heading/Heading.js');
 var Paragraph = require('./components/Paragraph/Paragraph.js');
 var ValidationMessage = require('./components/ValidationMessage/ValidationMessage.js');
-var index$2 = require('./components/Details/index.js');
+var index$3 = require('./components/Details/index.js');
 var DetailsContent = require('./components/Details/DetailsContent.js');
 var DetailsSummary = require('./components/Details/DetailsSummary.js');
-var index$3 = require('./components/form/Select/index.js');
-var SelectOption = require('./components/form/Select/SelectOption.js');
-var SelectOptgroup = require('./components/form/Select/SelectOptgroup.js');
+var index$4 = require('./components/Select/index.js');
+var SelectOption = require('./components/Select/SelectOption.js');
+var SelectOptgroup = require('./components/Select/SelectOptgroup.js');
 var Alert = require('./components/Alert/Alert.js');
 var Tag = require('./components/Tag/Tag.js');
-var index$4 = require('./components/Chip/index.js');
+var index$5 = require('./components/Chip/index.js');
 var Chips = require('./components/Chip/Chips.js');
 var usePagination = require('./components/Pagination/usePagination.js');
-var index$5 = require('./components/Pagination/index.js');
+var index$6 = require('./components/Pagination/index.js');
 var PaginationList = require('./components/Pagination/PaginationList.js');
 var PaginationItem = require('./components/Pagination/PaginationItem.js');
 var PaginationButton = require('./components/Pagination/PaginationButton.js');
 var SkipLink = require('./components/SkipLink/SkipLink.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
-var index$6 = require('./components/form/Field/index.js');
-var FieldDescription = require('./components/form/Field/FieldDescription.js');
-var FieldAffix = require('./components/form/Field/FieldAffix.js');
-var FieldCounter = require('./components/form/Field/FieldCounter.js');
-var Checkbox = require('./components/form/Checkbox/Checkbox.js');
-var useCheckboxGroup = require('./utilities/hooks/useCheckboxGroup/useCheckboxGroup.js');
-var Radio = require('./components/form/Radio/Radio.js');
-var useRadioGroup = require('./utilities/hooks/useRadioGroup/useRadioGroup.js');
-var index$7 = require('./components/form/Fieldset/index.js');
-var FieldsetLegend = require('./components/form/Fieldset/FieldsetLegend.js');
-var FieldsetDescription = require('./components/form/Fieldset/FieldsetDescription.js');
-var Switch = require('./components/form/Switch/Switch.js');
-var Textfield = require('./components/form/Textfield/Textfield.js');
-var Textarea = require('./components/form/Textarea/Textarea.js');
-var Input = require('./components/form/Input/Input.js');
-var index$8 = require('./components/Tabs/index.js');
+var index$7 = require('./components/Field/index.js');
+var FieldDescription = require('./components/Field/FieldDescription.js');
+var FieldAffix = require('./components/Field/FieldAffix.js');
+var FieldCounter = require('./components/Field/FieldCounter.js');
+var Checkbox = require('./components/Checkbox/Checkbox.js');
+var Radio = require('./components/Radio/Radio.js');
+var index$8 = require('./components/Fieldset/index.js');
+var FieldsetLegend = require('./components/Fieldset/FieldsetLegend.js');
+var FieldsetDescription = require('./components/Fieldset/FieldsetDescription.js');
+var Switch = require('./components/Switch/Switch.js');
+var Textfield = require('./components/Textfield/Textfield.js');
+var Textarea = require('./components/Textarea/Textarea.js');
+var Input = require('./components/Input/Input.js');
+var index$9 = require('./components/Tabs/index.js');
 var TabsTab = require('./components/Tabs/TabsTab.js');
 var TabsList = require('./components/Tabs/TabsList.js');
 var TabsPanel = require('./components/Tabs/TabsPanel.js');
-var index$9 = require('./components/ToggleGroup/index.js');
+var index$a = require('./components/ToggleGroup/index.js');
 var ToggleGroupItem = require('./components/ToggleGroup/ToggleGroupItem.js');
-var index$a = require('./components/Popover/index.js');
+var index$b = require('./components/Popover/index.js');
 var PopoverTriggerContext = require('./components/Popover/PopoverTriggerContext.js');
 var PopoverTrigger = require('./components/Popover/PopoverTrigger.js');
 var Divider = require('./components/Divider/Divider.js');
-var index$b = require('./components/Modal/index.js');
+var index$c = require('./components/Modal/index.js');
 var ModalBlock = require('./components/Modal/ModalBlock.js');
 var ModalTriggerContext = require('./components/Modal/ModalTriggerContext.js');
 var ModalTrigger = require('./components/Modal/ModalTrigger.js');
-var index$c = require('./components/Dropdown/index.js');
+var index$d = require('./components/Dropdown/index.js');
 var DropdownTriggerContext = require('./components/Dropdown/DropdownTriggerContext.js');
 var DropdownList = require('./components/Dropdown/DropdownList.js');
 var DropdownHeading = require('./components/Dropdown/DropdownHeading.js');
 var DropdownItem = require('./components/Dropdown/DropdownItem.js');
 var DropdownButton = require('./components/Dropdown/DropdownButton.js');
 var DropdownTrigger = require('./components/Dropdown/DropdownTrigger.js');
-var SearchClear = require('./components/form/Search/SearchClear.js');
-var SearchButton = require('./components/form/Search/SearchButton.js');
-var SearchInput = require('./components/form/Search/SearchInput.js');
-var index$d = require('./components/form/Search/index.js');
-var index$e = require('./components/Card/index.js');
+var SearchClear = require('./components/Search/SearchClear.js');
+var SearchButton = require('./components/Search/SearchButton.js');
+var SearchInput = require('./components/Search/SearchInput.js');
+var index$e = require('./components/Search/index.js');
+var index$f = require('./components/Card/index.js');
 var CardBlock = require('./components/Card/CardBlock.js');
-var index$f = require('./components/form/Combobox/index.js');
-var Option = require('./components/form/Combobox/Option/Option.js');
-var Empty = require('./components/form/Combobox/Empty.js');
-var index$g = require('./components/Table/index.js');
+var index$g = require('./components/Combobox/index.js');
+var Option = require('./components/Combobox/Option/Option.js');
+var Empty = require('./components/Combobox/Empty.js');
+var index$h = require('./components/Table/index.js');
 var TableHead = require('./components/Table/TableHead.js');
 var TableBody = require('./components/Table/TableBody.js');
 var TableRow = require('./components/Table/TableRow.js');
 var TableCell = require('./components/Table/TableCell.js');
 var TableHeaderCell = require('./components/Table/TableHeaderCell.js');
 var TableFoot = require('./components/Table/TableFoot.js');
-var index$h = require('./components/ErrorSummary/index.js');
+var index$i = require('./components/ErrorSummary/index.js');
 var ErrorSummaryItem = require('./components/ErrorSummary/ErrorSummaryItem.js');
 var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading.js');
 var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
@@ -111,8 +110,9 @@ exports.getPrevFocusableValue = RovingFocusItem.getPrevFocusableValue;
 exports.omit = omit.omit;
 exports.Avatar = Avatar.Avatar;
 exports.Button = Button.Button;
-exports.Badge = Badge.Badge;
-exports.Breadcrumbs = index.Breadcrumbs;
+exports.Badge = index.Badge;
+exports.BadgePosition = BadgePosition.BadgePosition;
+exports.Breadcrumbs = index$1.Breadcrumbs;
 exports.BreadcrumbsList = BreadcrumbsList.BreadcrumbsList;
 exports.BreadcrumbsItem = BreadcrumbsItem.BreadcrumbsItem;
 exports.BreadcrumbsLink = BreadcrumbsLink.BreadcrumbsLink;
@@ -120,7 +120,7 @@ exports.HelpText = HelpText.HelpText;
 exports.Spinner = Spinner.Spinner;
 exports.Skeleton = Skeleton.Skeleton;
 exports.Link = Link.Link;
-exports.List = index$1.List;
+exports.List = index$2.List;
 exports.ListOrdered = Lists.ListOrdered;
 exports.ListUnordered = Lists.ListUnordered;
 exports.ListItem = ListItem.ListItem;
@@ -128,57 +128,55 @@ exports.Label = Label.Label;
 exports.Heading = Heading.Heading;
 exports.Paragraph = Paragraph.Paragraph;
 exports.ValidationMessage = ValidationMessage.ValidationMessage;
-exports.Details = index$2.Details;
+exports.Details = index$3.Details;
 exports.DetailsContent = DetailsContent.DetailsContent;
 exports.DetailsSummary = DetailsSummary.DetailsSummary;
-exports.Select = index$3.Select;
+exports.Select = index$4.Select;
 exports.SelectOption = SelectOption.SelectOption;
 exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
 exports.Alert = Alert.Alert;
 exports.Tag = Tag.Tag;
-exports.Chip = index$4.Chip;
+exports.Chip = index$5.Chip;
 exports.ChipButton = Chips.ChipButton;
 exports.ChipCheckbox = Chips.ChipCheckbox;
 exports.ChipRadio = Chips.ChipRadio;
 exports.ChipRemovable = Chips.ChipRemovable;
 exports.usePagination = usePagination.usePagination;
-exports.Pagination = index$5.Pagination;
+exports.Pagination = index$6.Pagination;
 exports.PaginationList = PaginationList.PaginationList;
 exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Tooltip = Tooltip.Tooltip;
-exports.Field = index$6.Field;
+exports.Field = index$7.Field;
 exports.FieldDescription = FieldDescription.FieldDescription;
 exports.FieldAffix = FieldAffix.FieldAffix;
 exports.FieldAffixes = FieldAffix.FieldAffixes;
 exports.FieldCounter = FieldCounter.FieldCounter;
 exports.Checkbox = Checkbox.Checkbox;
-exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.Radio = Radio.Radio;
-exports.useRadioGroup = useRadioGroup.useRadioGroup;
-exports.Fieldset = index$7.Fieldset;
+exports.Fieldset = index$8.Fieldset;
 exports.FieldsetLegend = FieldsetLegend.FieldsetLegend;
 exports.FieldsetDescription = FieldsetDescription.FieldsetDescription;
 exports.Switch = Switch.Switch;
 exports.Textfield = Textfield.Textfield;
 exports.Textarea = Textarea.Textarea;
 exports.Input = Input.Input;
-exports.Tabs = index$8.Tabs;
+exports.Tabs = index$9.Tabs;
 exports.TabsTab = TabsTab.TabsTab;
 exports.TabsList = TabsList.TabsList;
 exports.TabsPanel = TabsPanel.TabsPanel;
-exports.ToggleGroup = index$9.ToggleGroup;
+exports.ToggleGroup = index$a.ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
-exports.Popover = index$a.Popover;
+exports.Popover = index$b.Popover;
 exports.PopoverTriggerContext = PopoverTriggerContext.PopoverTriggerContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
-exports.Modal = index$b.Modal;
+exports.Modal = index$c.Modal;
 exports.ModalBlock = ModalBlock.ModalBlock;
 exports.ModalTriggerContext = ModalTriggerContext.ModalTriggerContext;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
-exports.Dropdown = index$c.Dropdown;
+exports.Dropdown = index$d.Dropdown;
 exports.DropdownTriggerContext = DropdownTriggerContext.DropdownTriggerContext;
 exports.DropdownList = DropdownList.DropdownList;
 exports.DropdownHeading = DropdownHeading.DropdownHeading;
@@ -188,20 +186,20 @@ exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
 exports.SearchClear = SearchClear.SearchClear;
 exports.SearchButton = SearchButton.SearchButton;
 exports.SearchInput = SearchInput.SearchInput;
-exports.Search = index$d.Search;
-exports.Card = index$e.Card;
+exports.Search = index$e.Search;
+exports.Card = index$f.Card;
 exports.CardBlock = CardBlock.CardBlock;
-exports.Combobox = index$f.Combobox;
+exports.Combobox = index$g.Combobox;
 exports.ComboboxOption = Option.ComboboxOption;
 exports.ComboboxEmpty = Empty.ComboboxEmpty;
-exports.Table = index$g.Table;
+exports.Table = index$h.Table;
 exports.TableHead = TableHead.TableHead;
 exports.TableBody = TableBody.TableBody;
 exports.TableRow = TableRow.TableRow;
 exports.TableCell = TableCell.TableCell;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
 exports.TableFoot = TableFoot.TableFoot;
-exports.ErrorSummary = index$h.ErrorSummary;
+exports.ErrorSummary = index$i.ErrorSummary;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;

package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js

@@ -23,7 +23,7 @@ const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation =
     const [focusableValue, setFocusableValue] = react.useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
     const elements = react.useRef(new Map());
-    const myRef = react.useRef(null);
+    const myRef = react.useRef();
     const refs = react$1.useMergeRefs([ref, myRef]);
     const getOrderedItems = () => {
         if (!myRef.current)

package/dist/cjs/{components/form → utilities/hooks/useFormField}/useFormField.js

@@ -3,7 +3,7 @@
 
 var cl = require('clsx/lite');
 var react = require('react');
-var FieldsetContext = require('./Fieldset/FieldsetContext.js');
+var FieldsetContext = require('../../../components/Fieldset/FieldsetContext.js');
 
 /**
  * Handles props and their state for various form-fields in context with Fieldset

package/dist/esm/components/Badge/Badge.js

@@ -18,8 +18,8 @@ import { forwardRef } from 'react';
  * </Badge>
  * ```
  */
-const Badge = forwardRef(function Badge({ className, count, maxCount, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
-    return (jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, ref: ref, ...rest }));
+const Badge = forwardRef(function Badge({ className, count, maxCount, ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, ref: ref, ...rest }));
 });
 
 export { Badge };

package/dist/esm/components/Badge/BadgePosition.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const BadgePosition = forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
+});
+
+export { BadgePosition };

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

@@ -0,0 +1,8 @@
+'use client';
+import { Badge as Badge$1 } from './Badge.js';
+import { BadgePosition } from './BadgePosition.js';
+
+const Badge = Object.assign(Badge$1, { Position: BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+export { Badge, BadgePosition };

package/dist/esm/components/Button/Button.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Spinner } from '../loaders/Spinner/Spinner.js';
+import { Spinner } from '../Spinner/Spinner.js';
 
 /**
  * Button used for interaction

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
+
+/**
+ * Checkbox used to select multiple options.
+ * @example
+ * <Checkbox label="I agree" value="agree" />
+ */
+const Checkbox = forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, description, validation, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!validation && jsx(ValidationMessage, { children: validation })] }));
+});
+
+export { Checkbox };

package/dist/esm/components/Chip/Chips.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { Input } from '../form/Input/Input.js';
+import { Input } from '../Input/Input.js';
 
 /**
  * Chip.Button used for interaction

package/dist/esm/components/{form/Combobox → Combobox}/Combobox.js

@@ -4,7 +4,7 @@ import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useState, useEffect } from 'react';
-import { useFormField } from '../useFormField.js';
+import { useFormField } from '../../utilities/hooks/useFormField/useFormField.js';
 import { ComboboxContext } from './ComboboxContext.js';
 import { ComboboxIdProvider } from './ComboboxIdContext.js';
 import { ComboboxCustom } from './Custom.js';
@@ -16,9 +16,9 @@ import { useCombobox } from './useCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { prefix, setReactInputValue, removePrefix } from './utilities.js';
-import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { Spinner } from '../../loaders/Spinner/Spinner.js';
+import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { omit } from '../../utilities/omit/omit.js';
+import { Spinner } from '../Spinner/Spinner.js';
 
 const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = useRef(null);

package/dist/esm/components/{form/Combobox → Combobox}/Custom.js

@@ -6,8 +6,8 @@ import cl from 'clsx/lite';
 import { forwardRef, useId, useContext, useMemo } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { omit } from '../../../utilities/omit/omit.js';
-import { Label } from '../../Label/Label.js';
+import { omit } from '../../utilities/omit/omit.js';
+import { Label } from '../Label/Label.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {

package/dist/esm/components/{form/Combobox → Combobox}/Empty.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
-import { Label } from '../../Label/Label.js';
+import { Label } from '../Label/Label.js';
 
 const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(ComboboxContext);

package/dist/esm/components/{form/Combobox → Combobox}/Option/Option.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { memo, forwardRef, useId, useContext, isValidElement } from 'react';
-import { omit } from '../../../../utilities/omit/omit.js';
+import { omit } from '../../../utilities/omit/omit.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import ComboboxOptionDescription from './Description.js';
 import { SelectedIcon } from './SelectedIcon.js';
 import { useComboboxOption } from './useComboboxOption.js';
-import { Label } from '../../../Label/Label.js';
+import { Label } from '../../Label/Label.js';
 
 const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = useId();

package/dist/esm/components/{form/Combobox → Combobox}/Option/useComboboxOption.js

@@ -1,7 +1,7 @@
 'use client';
 import { useMergeRefs } from '@floating-ui/react';
 import { useId, useContext, useMemo, useEffect } from 'react';
-import { useDebounceCallback } from '../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';

package/dist/esm/components/{form/Combobox → Combobox}/internal/ComboboxChips.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import '../../../Chip/index.js';
+import '../../Chip/index.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import { ChipRemovable } from '../../../Chip/Chips.js';
+import { ChipRemovable } from '../../Chip/Chips.js';
 
 const ComboboxChips = () => {
     const context = useContext(ComboboxContext);

package/dist/esm/components/{form/Combobox → Combobox}/internal/ComboboxError.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { ValidationMessage } from '../../../ValidationMessage/ValidationMessage.js';
+import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
 
 const ComboboxError = ({ size, error, formFieldProps }) => {
     return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ValidationMessage, { "data-size": size, children: error }) }));

package/dist/esm/components/{form/Combobox → Combobox}/internal/ComboboxInput.js

@@ -9,8 +9,8 @@ import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
-import { Paragraph } from '../../../Paragraph/Paragraph.js';
-import { omit } from '../../../../utilities/omit/omit.js';
+import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { omit } from '../../../utilities/omit/omit.js';
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = useContext(ComboboxContext);

package/dist/esm/components/{form/Combobox → Combobox}/internal/ComboboxLabel.js

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

package/dist/esm/components/{form/Combobox → Combobox}/useComboboxKeyboard.js

@@ -1,6 +1,6 @@
 'use client';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = useComboboxId();

package/dist/esm/components/{form/Field → Field}/FieldCounter.js

@@ -1,7 +1,9 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useEffect } from 'react';
-import { ValidationMessage } from '../../ValidationMessage/ValidationMessage.js';
+import { isInputLike } from './fieldObserver.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
+import { Paragraph } from '../Paragraph/Paragraph.js';
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
 const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
@@ -10,17 +12,18 @@ const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn
     const hasExceededLimit = count > limit;
     const remainder = limit - count;
     useEffect(() => {
+        const field = counterRef.current?.closest('.ds-field');
+        const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
         const onInput = ({ target }) => {
-            if (target instanceof HTMLInputElement ||
-                target instanceof HTMLTextAreaElement) {
+            if (isInputLike(target))
                 setCount(target.value.length);
-            }
         };
-        const field = counterRef.current?.closest('.ds-field');
+        if (input)
+            onInput({ target: input }); // Initial setup
         field?.addEventListener('input', onInput);
         return () => field?.removeEventListener('input', onInput);
     }, [setCount]);
-    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), jsx(ValidationMessage, { "data-color": hasExceededLimit ? 'danger' : 'neutral', ref: ref, ...rest, children: label(hasExceededLimit ? over : under, remainder) })] }));
+    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
 });
 
 export { FieldCounter };

package/dist/{cjs/components/form → esm/components}/Field/fieldObserver.js

@@ -1,6 +1,4 @@
 'use client';
-'use strict';
-
 function fieldObserver(fieldElement) {
     if (!fieldElement)
         return;
@@ -76,7 +74,9 @@ function fieldObserver(fieldElement) {
 // 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 isInputLike = (node) => node instanceof HTMLElement &&
+    '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) {
@@ -94,4 +94,4 @@ function createOptimizedMutationObserver(callback) {
     return observer;
 }
 
-exports.fieldObserver = fieldObserver;
+export { fieldObserver, isElement, isInputLike, isLabel };

package/dist/esm/components/{form/Fieldset → Fieldset}/FieldsetDescription.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Paragraph } from '../../Paragraph/Paragraph.js';
+import { Paragraph } from '../Paragraph/Paragraph.js';
 
 const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
     return jsx(Paragraph, { ref: ref, ...rest });

package/dist/esm/components/{form/Fieldset → Fieldset}/FieldsetLegend.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Label } from '../../Label/Label.js';
+import { Label } from '../Label/Label.js';
 
 const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
     return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../Field/index.js';
+import { Input } from '../Input/Input.js';
+import { Label } from '../Label/Label.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
+
+/**
+ * Radio used to select multiple options.
+ * @example
+ * <Radio label="I agree" value="agree" />
+ */
+const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, validation, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!validation && jsx(ValidationMessage, { children: validation })] }));
+});
+
+export { Radio };

package/dist/esm/components/{form/Search → Search}/SearchButton.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Button } from '../../Button/Button.js';
+import { Button } from '../Button/Button.js';
 
 const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
     return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));

package/dist/esm/components/{form/Search → Search}/SearchClear.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { setReactInputValue } from '../Combobox/utilities.js';
-import { Button } from '../../Button/Button.js';
+import { Button } from '../Button/Button.js';
 
 const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
     const handleClear = (e) => {

package/dist/esm/components/{form/Select → Select}/Select.js

@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, ...rest }, ref) {
-    return (jsx("select", { className: cl('ds-input', className), ref: ref, onKeyDown: (event) => {
+const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
+    return (jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
             if (event.key === 'Tab')
                 return;
             if (rest.readOnly)