@digdir/designsystemet-react 1.0.0-next.46 → 1.0.0-next.48

package/dist/cjs/components/Alert/Alert.js

@@ -7,8 +7,9 @@ var react = require('react');
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
  * @example
- * <Alert color='info'>Dette er en informasjonsmelding</Alert>
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
  */
 const Alert = react.forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
     return (jsxRuntime.jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));

package/dist/cjs/components/Badge/Badge.js

@@ -9,16 +9,12 @@ var react = require('react');
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
  * @example without children
- * ```jsx
- * <Badge color='accent' count={5} />
- * ```
+ * <Badge count={5} maxCount={10} />
  *
  * @example with children
- * ```jsx
- * <Badge color='accent'>
- *  <Icon />
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
  * </Badge>
- * ```
  */
 const Badge = react.forwardRef(function Badge({ className, count, maxCount, ...rest }, ref) {
     return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, ref: ref, ...rest }));

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

@@ -5,6 +5,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
 const BadgePosition = react.forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
     return (jsxRuntime.jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
 });

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

@@ -4,6 +4,12 @@
 var Badge$1 = require('./Badge.js');
 var BadgePosition = require('./BadgePosition.js');
 
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
 const Badge = Object.assign(Badge$1.Badge, { Position: BadgePosition.BadgePosition });
 Badge.Position.displayName = 'Badge.Position';
 

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -5,6 +5,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
 const Breadcrumbs = react.forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
 
 exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/Breadcrumbs/index.js

@@ -7,17 +7,22 @@ var BreadcrumbsLink = require('./BreadcrumbsLink.js');
 var BreadcrumbsList = require('./BreadcrumbsList.js');
 
 /**
- * Breadcrumbs are used to visualize the current page path.
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
  * @example
- * <Breadcrumbs aria-label="You are here:">
- *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
  *  <Breadcrumbs.List>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
  *  </Breadcrumbs.List>
- * <Breadcrumbs>
+ * </Breadcrumbs>
  */
 const Breadcrumbs = Object.assign(Breadcrumbs$1.Breadcrumbs, {
     List: BreadcrumbsList.BreadcrumbsList,

package/dist/cjs/components/Button/Button.js

@@ -9,6 +9,7 @@ var Spinner = require('../Spinner/Spinner.js');
 
 /**
  * Button used for interaction
+ *
  * @example
  * <Button>Click me</Button>
  */

package/dist/cjs/components/Card/Card.js

@@ -9,6 +9,7 @@ var react = require('react');
 
 /**
  * Card component to present content in a structured way.
+ *
  * @example
  * <Card>
  *  <Card.Block>Header</Card.Block>

package/dist/cjs/components/Card/index.js

@@ -4,6 +4,16 @@
 var Card$1 = require('./Card.js');
 var CardBlock = require('./CardBlock.js');
 
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
 const Card = Object.assign(Card$1.Card, {
     Block: CardBlock.CardBlock,
 });

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -10,11 +10,12 @@ var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
 
 /**
  * Checkbox used to select multiple options.
+ *
  * @example
  * <Checkbox label="I agree" value="agree" />
  */
-const Checkbox = react.forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, description, validation, ...rest }, ref) {
-    return (jsxRuntime.jsxs(index.Field, { "data-size": size, className: className, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!validation && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: validation })] }));
+const Checkbox = react.forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, className: className, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error })] }));
 });
 
 exports.Checkbox = Checkbox;

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

@@ -9,6 +9,7 @@ var Input = require('../Input/Input.js');
 
 /**
  * Chip.Button used for interaction
+ *
  * @example
  * <Chip.Button>Click me</Chip.Button>
  */

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

@@ -18,10 +18,13 @@ var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var utilities = require('./utilities.js');
+var Spinner = require('../Spinner/Spinner.js');
 var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var omit = require('../../utilities/omit/omit.js');
-var Spinner = require('../Spinner/Spinner.js');
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const ComboboxComponent = react.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 = react.useRef(null);
     const portalRef = react.useRef(null);
@@ -178,7 +181,7 @@ const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueC
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId || '', error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,

package/dist/cjs/components/Combobox/Custom.js

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

package/dist/cjs/components/Combobox/index.js

@@ -5,6 +5,9 @@ var Combobox$1 = require('./Combobox.js');
 var Empty = require('./Empty.js');
 var Option = require('./Option/Option.js');
 
+/**
+ * @deprecated Use `Suggestion` instead
+ */
 const Combobox = Combobox$1.Combobox;
 Combobox.Option = Option.ComboboxOption;
 Combobox.Empty = Empty.ComboboxEmpty;

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

@@ -25,7 +25,7 @@ const ComboboxChips = () => {
                             option: selectedOptions[value],
                             remove: true,
                         });
-                        inputRef.current?.focus();
+                        inputRef?.current?.focus();
                     }
                 }, onClick: () => {
                     if (readOnly)

package/dist/cjs/components/Details/Details.js

@@ -9,10 +9,11 @@ require('@u-elements/u-details');
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <DetailsSummary>Header</DetailsSummary>
- *  <DetailsContent>Content</DetailsContent>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {

package/dist/cjs/components/Details/DetailsContent.js

@@ -6,6 +6,7 @@ var react = require('react');
 
 /**
  * Details content component, contains the content of the details item.
+ *
  * @example
  * <DetailsContent>Content</DetailsContent>
  */

package/dist/cjs/components/Details/DetailsSummary.js

@@ -6,6 +6,7 @@ var react = require('react');
 
 /**
  * Details summary component, contains a the heading to toggle the content.
+ *
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */

package/dist/cjs/components/Details/index.js

@@ -6,11 +6,12 @@ var DetailsContent = require('./DetailsContent.js');
 var DetailsSummary = require('./DetailsSummary.js');
 
 /**
- * Details are used to toggle the visibility of content.
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <Details.Summary>Heading 1</Details.Summary>
- *  <Details.Content>Content 1</Details.Content>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = Object.assign(Details$1.Details, {

package/dist/cjs/components/Divider/Divider.js

@@ -5,6 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Divider component, used to separate content. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
 const Divider = react.forwardRef(function Divider({ className, ...rest }, ref) {
     return (
     // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -6,6 +6,33 @@ var cl = require('clsx/lite');
 var react = require('react');
 var index = require('../Popover/index.js');
 
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example with TriggerContext
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
 const Dropdown = react.forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
     return (jsxRuntime.jsx(index.Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
 });

package/dist/cjs/components/Dropdown/DropdownTriggerContext.js

@@ -7,13 +7,16 @@ var PopoverTriggerContext = require('../Popover/PopoverTriggerContext.js');
 
 /**
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
  * @example
  * <Dropdown.TriggerContext>
  *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
  *  <Dropdown>
  *   <Dropdown.Heading>Heading</Dropdown.Heading>
  *    <Dropdown.List>
- *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
  *    </Dropdown.List>
  *  </Dropdown>
  * </Dropdown.TriggerContext>

package/dist/cjs/components/Dropdown/index.js

@@ -10,17 +10,19 @@ var DropdownTrigger = require('./DropdownTrigger.js');
 var DropdownTriggerContext = require('./DropdownTriggerContext.js');
 
 /**
+ * Dropdown component, used to display a list of options.
+ *
  * @example
  * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
- *  <Dropdown>
- *    <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button 1</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
- *  </Dropdown>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
  * </Dropdown.TriggerContext>
  */
 const Dropdown = Object.assign(Dropdown$1.Dropdown, {

package/dist/cjs/components/ErrorSummary/ErrorSummary.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
@@ -9,10 +10,27 @@ const ErrorSummaryContext = react.createContext({
     headingId: 'heading',
     setHeadingId: () => { },
 });
-const ErrorSummary = react.forwardRef(function ErrorSummary({ className, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) {
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
+const ErrorSummary = react.forwardRef(function ErrorSummary({ asChild, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', className, ...rest }, ref) {
     const randomId = react.useId();
     const [headingId, setHeadingId] = react.useState(randomId);
-    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx("div", { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(Component, { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
 });
 
 exports.ErrorSummary = ErrorSummary;

package/dist/cjs/components/ErrorSummary/ErrorSummaryItem.js

@@ -3,11 +3,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var index = require('../List/index.js');
-var Link = require('../Link/Link.js');
+require('../List/index.js');
+var ListItem = require('../List/ListItem.js');
 
-const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ href, asChild, children, ...rest }, ref) {
-    return (jsxRuntime.jsx(index.List.Item, { ...rest, ref: ref, children: jsxRuntime.jsx(Link.Link, { href: href, asChild: asChild, children: children }) }));
+/**
+ * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
+ *
+ * @example
+ * <ErrorSummary.Item href='#'>Link to error</ErrorSummary.Item>
+ */
+const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
+    return jsxRuntime.jsx(ListItem.ListItem, { ref: ref, ...rest });
 });
 
 exports.ErrorSummaryItem = ErrorSummaryItem;

package/dist/cjs/components/ErrorSummary/ErrorSummaryLink.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Link = require('../Link/Link.js');
+
+/**
+ * Link component used in ErrorSummary.
+ */
+const ErrorSummaryLink = react.forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
+    return jsxRuntime.jsx(Link.Link, { ref: ref, "data-color": 'neutral', ...rest });
+});
+
+exports.ErrorSummaryLink = ErrorSummaryLink;

package/dist/cjs/components/ErrorSummary/index.js

@@ -4,27 +4,38 @@
 var ErrorSummary$1 = require('./ErrorSummary.js');
 var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
 var ErrorSummaryItem = require('./ErrorSummaryItem.js');
+var ErrorSummaryLink = require('./ErrorSummaryLink.js');
 var ErrorSummaryList = require('./ErrorSummaryList.js');
 
 /**
+ * ErrorSummary component, used to display a list of errors.
+ *
  * @example
  * <ErrorSummary>
- *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
- *  <ErrorSummary.List>
- *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
- *  </ErrorSummary.List>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 1</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *     <ErrorSummary.Item>
+ *       <ErrorSummary.Link href='#'>Error 2</ErrorSummary.Link>
+ *     </ErrorSummary.Item>
+ *   </ErrorSummary.List>
  * </ErrorSummary>
  */
 const ErrorSummary = Object.assign(ErrorSummary$1.ErrorSummary, {
     Heading: ErrorSummaryHeading.ErrorSummaryHeading,
     Item: ErrorSummaryItem.ErrorSummaryItem,
     List: ErrorSummaryList.ErrorSummaryList,
+    Link: ErrorSummaryLink.ErrorSummaryLink,
 });
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
+ErrorSummary.Link.displayName = 'ErrorSummary.Link';
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
+exports.ErrorSummaryLink = ErrorSummaryLink.ErrorSummaryLink;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
 exports.ErrorSummary = ErrorSummary;

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

@@ -7,6 +7,17 @@ var cl = require('clsx/lite');
 var react = require('react');
 var fieldObserver = require('./fieldObserver.js');
 
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
 const Field = react.forwardRef(function Field({ className, position, ...rest }, ref) {
     const fieldRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([fieldRef, ref]);

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

@@ -5,9 +5,30 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * FieldAffixes component, used to wrap a form field.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 const FieldAffixes = react.forwardRef(function FieldAffixes({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("div", { className: cl('ds-field-affixes', className), ref: ref, ...rest }));
 });
+/**
+ * FieldAffix component, used to wrap a form field.
+ * Use together with Field.Affixes.
+ *
+ * @example
+ * <Field.Affixes>
+ *   <Field.Affix>NOK</Field.Affix>
+ *   <Input />
+ *   <Field.Affix>pr. mnd.</Field.Affix>
+ * </Field.Affixes>
+ */
 const FieldAffix = react.forwardRef(function FieldAffix({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("span", { className: cl('ds-field-affix', className), "aria-hidden": 'true', ref: ref, ...rest }));
 });

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

@@ -8,6 +8,15 @@ var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
 var Paragraph = require('../Paragraph/Paragraph.js');
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
 const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
     const [count, setCount] = react.useState(0);
     const counterRef = react.useRef(null);

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

@@ -7,12 +7,14 @@ var FieldCounter = require('./FieldCounter.js');
 var FieldDescription = require('./FieldDescription.js');
 
 /**
+ * Field component, used to wrap a form field.
+ *
  * @example
- * <Field>
- *  <Label>Label text</Label>
- *  <Field.Description>Description</Field.Description>
- *  <Input />
- *  <ValidationMessage>Validation message</ValidationMessage>
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
 const Field = Object.assign(Field$1.Field, {

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

@@ -5,6 +5,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
 const Fieldset = react.forwardRef(function Fieldset({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
 });

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

@@ -5,6 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Paragraph = require('../Paragraph/Paragraph.js');
 
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
 const FieldsetDescription = react.forwardRef(function FieldsetDescription(rest, ref) {
     return jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest });
 });