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

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

@@ -16,10 +16,8 @@ const useFormField = (props, prefix) => {
     const descriptionId = `${prefix}-description-${randomId}`;
     const size = props.size ?? fieldset?.size ?? 'md';
     const disabled = fieldset?.disabled || props?.disabled;
-    const readOnly = ((fieldset?.readOnly || props?.readOnly) && !disabled) || undefined;
-    const hasError = !disabled && !readOnly && !!(props.error || fieldset?.error);
+    const hasError = !disabled && !!(props.error || fieldset?.error);
     return {
-        readOnly,
         hasError,
         errorId,
         descriptionId,

package/dist/cjs/components/loaders/Skeleton/Skeleton.js

@@ -8,13 +8,12 @@ var cl = require('clsx/lite');
 var react = require('react');
 var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
-const Skeleton = react.forwardRef(function Skeleton({ asChild, className, children, height, style, variant = 'rectangle', width, ...rest }, ref) {
+const Skeleton = react.forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'span';
     const isText = variant === 'text';
-    const childrenText = isText && '-'.repeat(Number(width) || 1); // s followed by a ­ makes the most average character length
     const animationRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
     const mergedRefs = react$1.useMergeRefs([animationRef, ref]);
-    return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest, children: children || childrenText }));
+    return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-text": isText ? '-'.repeat(Number(width) || 1) : undefined, "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest }));
 });
 
 exports.Skeleton = Skeleton;

package/dist/cjs/components/loaders/Spinner/Spinner.js

@@ -2,15 +2,17 @@
 '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 useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Spinner component used for indicating busy or indeterminate loading */
-const Spinner = ({ title, color = 'neutral', size = 'md', className, ...rest }) => {
+const Spinner = react.forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
     const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-rotate-animation');
     const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-stroke-animation');
-    return (jsxRuntime.jsxs("svg", { className: cl('ds-spinner', className), viewBox: '0 0 50 50', ref: svgRef, "data-color": color, "data-size": size, ...rest, children: [jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
-};
-Spinner.displayName = 'Spinner';
+    const mergedRefs = react$1.useMergeRefs([svgRef, ref]);
+    return (jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsxRuntime.jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+});
 
 exports.Spinner = Spinner;

package/dist/cjs/index.js

@@ -43,14 +43,21 @@ 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/Checkbox/index.js');
-var CheckboxGroup = require('./components/form/Checkbox/CheckboxGroup.js');
-var index$7 = require('./components/form/Radio/index.js');
-var RadioGroup = require('./components/form/Radio/RadioGroup.js');
-var Fieldset = require('./components/form/Fieldset/Fieldset.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 TabsTab = require('./components/Tabs/TabsTab.js');
 var TabsList = require('./components/Tabs/TabsList.js');
@@ -58,32 +65,37 @@ var TabsPanel = require('./components/Tabs/TabsPanel.js');
 var index$9 = require('./components/ToggleGroup/index.js');
 var ToggleGroupItem = require('./components/ToggleGroup/ToggleGroupItem.js');
 var index$a = require('./components/Popover/index.js');
-var PopoverContext = require('./components/Popover/PopoverContext.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 ModalBlock = require('./components/Modal/ModalBlock.js');
-var ModalContext = require('./components/Modal/ModalContext.js');
+var ModalTriggerContext = require('./components/Modal/ModalTriggerContext.js');
 var ModalTrigger = require('./components/Modal/ModalTrigger.js');
 var index$c = require('./components/Dropdown/index.js');
-var DropdownContext = require('./components/Dropdown/DropdownContext.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 Search = require('./components/form/Search/Search.js');
-var index$d = require('./components/Card/index.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 CardBlock = require('./components/Card/CardBlock.js');
-var index$e = require('./components/form/Combobox/index.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$f = require('./components/Table/index.js');
+var index$g = 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 index$g = require('./components/ErrorSummary/index.js');
+var TableFoot = require('./components/Table/TableFoot.js');
+var index$h = 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');
@@ -138,14 +150,22 @@ exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Tooltip = Tooltip.Tooltip;
-exports.Checkbox = index$6.Checkbox;
-exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
-exports.Radio = index$7.Radio;
-exports.RadioGroup = RadioGroup.RadioGroup;
-exports.Fieldset = Fieldset.Fieldset;
+exports.Field = index$6.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.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.TabsTab = TabsTab.TabsTab;
 exports.TabsList = TabsList.TabsList;
@@ -153,32 +173,37 @@ exports.TabsPanel = TabsPanel.TabsPanel;
 exports.ToggleGroup = index$9.ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
 exports.Popover = index$a.Popover;
-exports.PopoverContext = PopoverContext.PopoverContext;
+exports.PopoverTriggerContext = PopoverTriggerContext.PopoverTriggerContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
 exports.Modal = index$b.Modal;
 exports.ModalBlock = ModalBlock.ModalBlock;
-exports.ModalContext = ModalContext.ModalContext;
+exports.ModalTriggerContext = ModalTriggerContext.ModalTriggerContext;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
 exports.Dropdown = index$c.Dropdown;
-exports.DropdownContext = DropdownContext.DropdownContext;
+exports.DropdownTriggerContext = DropdownTriggerContext.DropdownTriggerContext;
 exports.DropdownList = DropdownList.DropdownList;
 exports.DropdownHeading = DropdownHeading.DropdownHeading;
 exports.DropdownItem = DropdownItem.DropdownItem;
+exports.DropdownButton = DropdownButton.DropdownButton;
 exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
-exports.Search = Search.Search;
-exports.Card = index$d.Card;
+exports.SearchClear = SearchClear.SearchClear;
+exports.SearchButton = SearchButton.SearchButton;
+exports.SearchInput = SearchInput.SearchInput;
+exports.Search = index$d.Search;
+exports.Card = index$e.Card;
 exports.CardBlock = CardBlock.CardBlock;
-exports.Combobox = index$e.Combobox;
+exports.Combobox = index$f.Combobox;
 exports.ComboboxOption = Option.ComboboxOption;
 exports.ComboboxEmpty = Empty.ComboboxEmpty;
-exports.Table = index$f.Table;
+exports.Table = index$g.Table;
 exports.TableHead = TableHead.TableHead;
 exports.TableBody = TableBody.TableBody;
 exports.TableRow = TableRow.TableRow;
 exports.TableCell = TableCell.TableCell;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
-exports.ErrorSummary = index$g.ErrorSummary;
+exports.TableFoot = TableFoot.TableFoot;
+exports.ErrorSummary = index$h.ErrorSummary;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;

package/dist/cjs/utilities/hooks/useCheckboxGroup/useCheckboxGroup.js

@@ -0,0 +1,121 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+
+const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
+    const inputs = getIndeterminateInputs();
+    const checked = !!getInputs(true).length;
+    const unchecked = !!getInputs(false).length;
+    for (const input of inputs) {
+        input.indeterminate = unchecked && checked;
+        input.checked = !unchecked && checked;
+    }
+};
+function useCheckboxGroup(props) {
+    const { error, name: groupName, onChange, value = [], disabled, readOnly, required, } = props || {};
+    const [groupValue, setGroupValue] = react.useState(value);
+    const namedId = react.useId();
+    const errorId = react.useId();
+    const checkboxRefs = react.useRef(new Set());
+    const indeterminateRefs = react.useRef(new Set());
+    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Checkbox` component.
+         * Accepts value or object
+         * @example
+         * <Checkbox {...getCheckboxProps('value')} />
+         *
+         * @example allow indeterminate
+         * <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
+         */
+        getCheckboxProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue || {};
+            const { allowIndeterminate = false, ref = undefined, value = '', ...rest } = props;
+            const inputRef = react.useRef(null);
+            const mergedRefs = react$1.useMergeRefs([ref, inputRef]);
+            const handleChange = () => {
+                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+                setGroupValue(nextGroupValue);
+                onChange?.(nextGroupValue, groupValue);
+            };
+            const indeterminateChange = () => {
+                if (!inputRef.current)
+                    return;
+                const checked = !!inputRef.current.checked;
+                for (const input of getInputs(!checked)) {
+                    /* We use click to send both event and change checked state */
+                    input.click();
+                }
+            };
+            react.useEffect(() => {
+                if (!allowIndeterminate)
+                    return;
+                toggleIndeterminate(getIndeterminateInputs, getInputs);
+            }, [groupValue]);
+            react.useEffect(() => {
+                if (!inputRef.current)
+                    return;
+                const input = inputRef.current;
+                const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                refs.current.add(input);
+                if (getIndeterminateInputs().length)
+                    toggleIndeterminate(getIndeterminateInputs, getInputs);
+                return () => {
+                    refs.current.delete(input);
+                };
+            }, [value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                checked: allowIndeterminate ? undefined : groupValue.includes(value),
+                name: rest.name || groupName || namedId,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    allowIndeterminate && indeterminateChange();
+                    handleChange();
+                },
+                ref: mergedRefs,
+                value,
+                disabled: disabled || rest.disabled,
+                readOnly: readOnly || rest.readOnly,
+                required: required || rest.required,
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+exports.useCheckboxGroup = useCheckboxGroup;

package/dist/cjs/utilities/hooks/useDebounceCallback/useDebounceCallback.js

@@ -17,7 +17,7 @@ function useDebounceCallback(callback, delay = 50) {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
         }
-        timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = window.setTimeout(() => {
             callback(...args);
         }, delay);
     };

package/dist/cjs/utilities/hooks/useRadioGroup/useRadioGroup.js

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+function useRadioGroup({ error, readOnly, required, disabled, name, onChange, value: initalValue = '', } = {}) {
+    const [groupValue, setGroupValue] = react.useState(initalValue);
+    const errorId = react.useId();
+    const namedId = react.useId();
+    const radioGroupName = name || namedId;
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Radio` component.
+         * @example
+         * <Radio label="Option 1" {...getRadioProps('option-1')} />
+         */
+        getRadioProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue;
+            const { ref = undefined, value = '', ...rest } = props;
+            const localRef = react.useRef(null);
+            const mergedRefs = react$1.useMergeRefs([ref, localRef]);
+            const handleChange = () => {
+                const input = localRef.current;
+                const isInput = input instanceof HTMLInputElement;
+                if (isInput && input.name === radioGroupName) {
+                    setGroupValue((prevValue) => {
+                        onChange?.(input.value, prevValue);
+                        return input.value;
+                    });
+                }
+            };
+            react.useEffect(() => {
+                if (!localRef.current)
+                    return;
+                localRef.current.checked = value === groupValue;
+            }, [groupValue, value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                name: radioGroupName,
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                value,
+                ref: mergedRefs,
+                required: required || rest.required,
+                readOnly: readOnly || rest.readOnly,
+                disabled: disabled || rest.disabled,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    handleChange();
+                },
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+exports.useRadioGroup = useRadioGroup;

package/dist/esm/components/Accordion/Accordion.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 /**
  * Accordion component, contains `Accordion.Item` components.
  */
-const Accordion = forwardRef(function Accordion({ border = false, color = 'neutral', className, ...rest }, ref) {
+const Accordion = forwardRef(function Accordion({ border = false, 'data-color': color = 'neutral', className, ...rest }, ref) {
     return (jsx("div", { className: cl('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
 });
 

package/dist/esm/components/Alert/Alert.js

@@ -8,8 +8,8 @@ import { forwardRef } from 'react';
  * @example
  * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
-const Alert = forwardRef(function Alert({ color = 'info', size = 'md', className, ...rest }, ref) {
-    return (jsx("div", { className: cl('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }));
+const Alert = forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
+    return (jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));
 });
 
 export { Alert };

package/dist/esm/components/Avatar/Avatar.js

@@ -8,7 +8,7 @@ import { forwardRef, Fragment } from 'react';
  * Avatars are used to represent people or entities.
  *
  * @example
- * <Avatar aria-label="John Doe">JD</Avatar>
+ * <Avatar aria-label="John Doe" initials="JD" />
  *
  * @example
  * <Avatar aria-label="John Doe">
@@ -20,9 +20,10 @@ import { forwardRef, Fragment } from 'react';
  *  <Icon />
  * </Avatar>
  */
-const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, color = 'accent', size = 'md', variant = 'circle', className, children, ...rest }, ref) {
-    const Component = children && typeof children !== 'string' ? Slot : Fragment;
-    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
+const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...rest }, ref) {
+    const useSlot = children && typeof children !== 'string';
+    const Component = useSlot ? Slot : Fragment;
+    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: children }) }));
 });
 
 export { Avatar };

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

@@ -8,18 +8,18 @@ import { forwardRef } from 'react';
  *
  * @example without children
  * ```jsx
- * <Badge color='accent' size='md' count={5} />
+ * <Badge color='accent' count={5} />
  * ```
  *
  * @example with children
  * ```jsx
- * <Badge color='accent' size='md'>
+ * <Badge color='accent'>
  *  <Icon />
  * </Badge>
  * ```
  */
-const Badge = forwardRef(function Badge({ className, color = 'accent', count, maxCount, overlap = 'rectangle', placement = 'top-right', size = 'md', ...rest }, ref) {
-    return (jsx("span", { className: cl('ds-badge', className), "data-color": color, "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, "data-size": size, ref: ref, ...rest }));
+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 }));
 });
 
 export { Badge };

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -3,6 +3,6 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), "data-size": size, ref: ref, ...rest })));
+const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
 
 export { Breadcrumbs };

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

@@ -10,13 +10,12 @@ import { Spinner } from '../loaders/Spinner/Spinner.js';
  * @example
  * <Button>Click me</Button>
  */
-const Button = forwardRef(function Button({ asChild, className, children, color = 'accent', icon = false, loading = false, size = 'md', variant = 'primary', ...rest }, ref) {
+const Button = forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
     const Component = asChild ? Slot : 'button';
-    const spinnerColor = color === 'accent' ? color : 'neutral';
     // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "data-variant": variant, ref: ref, 
+    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
         /* don't set type when we use `asChild` */
-        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
+        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true', "data-size": 'sm' })) : (loading // Allow custom loading spinner
             ), jsx(Slottable, { children: children })] }));
 });
 

package/dist/esm/components/Card/Card.js

@@ -14,7 +14,7 @@ import { forwardRef, useRef, useEffect } from 'react';
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = forwardRef(function Card({ asChild = false, color = 'neutral', className, ...rest }, ref) {
+const Card = forwardRef(function Card({ asChild = false, 'data-color': color = 'neutral', className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const cardRef = useRef(null);
     const mergedRefs = useMergeRefs([cardRef, ref]);

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

@@ -3,15 +3,16 @@ 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';
 
 /**
  * Chip.Button used for interaction
  * @example
  * <Chip.Button>Click me</Chip.Button>
  */
-const ChipButton = forwardRef(function ChipButton({ asChild, className, size, ...rest }, ref) {
+const ChipButton = forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'button';
-    return (jsx(Component, { className: cl('ds-chip', className), "data-size": size, type: asChild ? undefined : 'button', ref: ref, ...rest }));
+    return (jsx(Component, { className: cl('ds-chip', className), type: asChild ? undefined : 'button', ref: ref, ...rest }));
 });
 /**
  * Chip.Removable used for interaction
@@ -27,10 +28,10 @@ const ChipRemovable = forwardRef(function ChipRemovable(props, ref) {
  * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
  * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
  */
-const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, size, ...rest }, ref) {
+const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-color': color, ...rest }, ref) {
     const inputType = rest.type ?? 'checkbox';
     const Component = asChild ? Slot : 'label';
-    return (jsxs(Component, { className: cl('ds-chip', className), "data-size": size, ref: ref, children: [jsx("input", { ...rest, type: inputType }), jsx(Slottable, { children: children })] }));
+    return (jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-color": color, ref: ref, children: [jsx(Input, { ...rest, type: inputType }), jsx(Slottable, { children: children })] }));
 });
 /**
  * Chip.Radio used for single selection

package/dist/esm/components/Dropdown/Dropdown.js

@@ -1,20 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
-import { forwardRef, useState, useEffect, createContext } from 'react';
+import { forwardRef } from 'react';
 import { Popover } from '../Popover/index.js';
 
-const Dropdown = forwardRef(function DropddownMenuContent({ placement = 'bottom-end', className, ...rest }, ref) {
-    const [size, setSize] = useState(rest.size || 'md');
-    useEffect(() => {
-        setSize(rest.size || 'md');
-    }, [rest.size]);
-    return (jsx(DropdownCtx.Provider, { value: {
-            size,
-        }, children: jsx(Popover, { ref: ref, placement: placement, size: size, className: cl('ds-dropdown', className), ...rest }) }));
-});
-const DropdownCtx = createContext({
-    size: 'md',
+const Dropdown = forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    return (jsx(Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
 });
 
-export { Dropdown, DropdownCtx };
+export { Dropdown };

package/dist/esm/components/Dropdown/DropdownButton.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../Button/Button.js';
+
+const DropdownButton = forwardRef(function DropdownButton({ className, ...rest }, ref) {
+    return jsx(Button, { ref: ref, variant: 'tertiary', ...rest });
+});
+
+export { DropdownButton };

package/dist/esm/components/Dropdown/DropdownHeading.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
 import { forwardRef } from 'react';
+import { Heading } from '../Heading/Heading.js';
 
 const DropdownHeading = forwardRef(function DropdownHeading({ className, ...rest }, ref) {
-    return (jsx("h2", { ref: ref, className: cl('ds-dropdown__heading', className), ...rest }));
+    return jsx(Heading, { ref: ref, ...rest });
 });
 
 export { DropdownHeading };