@digdir/designsystemet-react 0.0.0-next-20250710132619 → 0.0.0-react-side-effects-20260113071010

package/README.md

@@ -3,8 +3,8 @@
 React implementation of the Designsystemet components
 
 - Uses `@digdir/designsystemet-css` for styling.
-- Uses `@digdir/designsystemet-theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
-  - Build your own theme on https://theme.designsystemet.no/
+- Uses `@digdir/designsystemet-css/theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
+  - Build your own theme on https://theme.designsystemet.no/en
 - All components support `ref`.
 - All components support SSR.
   - Use full component name, e.g. `CardBlock` instead of `Card.Block`

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

@@ -6,7 +6,9 @@ var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var cl = require('clsx/lite');
 var react = require('react');
-var omit = require('../../utilities/omit/omit.js');
+var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
 var spinner = require('../spinner/spinner.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
@@ -15,12 +17,12 @@ var ComboboxError = require('./internal/ComboboxError.js');
 var ComboboxInput = require('./internal/ComboboxInput.js');
 var ComboboxLabel = require('./internal/ComboboxLabel.js');
 var ComboboxNative = require('./internal/ComboboxNative.js');
+var omit = require('./omit/omit.js');
 var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var useFormField = require('./useFormField/useFormField.js');
 var utilities = require('./utilities.js');
-var useDebounceCallback = require('../../utilities/hooks/use-debounce-callback/use-debounce-callback.js');
 
 /**
  * @deprecated Use `Suggestion` instead

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

@@ -6,10 +6,10 @@ var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var omit = require('../../utilities/omit/omit.js');
 var label = require('../label/label.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
+var omit = require('./omit/omit.js');
 
 const ComboboxCustom = react.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {

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

@@ -4,9 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var omit = require('../../../utilities/omit/omit.js');
 var label = require('../../label/label.js');
 var ComboboxContext = require('../ComboboxContext.js');
+var omit = require('../omit/omit.js');
 var Description = require('./Description.js');
 var SelectedIcon = require('./SelectedIcon.js');
 var useComboboxOption = require('./useComboboxOption.js');

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

@@ -3,7 +3,9 @@
 
 var react$1 = require('@floating-ui/react');
 var react = require('react');
-var useDebounceCallback = require('../../../utilities/hooks/use-debounce-callback/use-debounce-callback.js');
+var useDebounceCallback = require('../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('../../../utilities/roving-focus/roving-focus-item.js');
+require('../../../utilities/roving-focus/roving-focus-root.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');

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

@@ -6,10 +6,10 @@ var react$1 = require('@floating-ui/react');
 var akselIcons = require('@navikt/aksel-icons');
 var cl = require('clsx/lite');
 var react = require('react');
-var omit = require('../../../utilities/omit/omit.js');
 var paragraph = require('../../paragraph/paragraph.js');
 var ComboboxContext = require('../ComboboxContext.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
+var omit = require('../omit/omit.js');
 var utilities = require('../utilities.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');

package/dist/cjs/{utilities → components/Combobox}/omit/omit.js

@@ -2,6 +2,8 @@
 'use strict';
 
 /**
+ * @deprecated This function is deprecated. Use suggest using `omit` from dedicated utiility libraries or create your own utility function.
+ *
  * Returns a partial copy of an object omitting the keys specified.
  * @param {Array} names an array of String property names to omit from the new object
  * @param {Object} obj The object to copy from

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

@@ -65,6 +65,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
                 displayValue: props.displayValue,
                 description: props.description,
             };
+            return null;
         });
         return allOptions;
     }, [optionsChildren]);
@@ -95,7 +96,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
                 filteredOptions.push(option);
                 return optionsChildren[index];
             }
-            return;
+            return null;
         })
             .filter((child) => child);
         return { filteredOptions, filteredOptionsChildren };

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

@@ -1,8 +1,11 @@
 'use client';
 'use strict';
 
+var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('react');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var useDebounceCallback = require('../../utilities/hooks/use-debounce-callback/use-debounce-callback.js');
 
 const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = ComboboxIdContext.useComboboxId();

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

@@ -10,7 +10,7 @@ var breadcrumbsList = require('./breadcrumbs-list.js');
  * `Breadcrumbs` is a component that displays a list of breadcrumbs.
  *
  * @example
- * <Breadcrumbs aria-label='Du er her:' {...args}>
+ * <Breadcrumbs aria-label='Du er her:'>
  *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
  *    Nivå 1
  *  </Breadcrumbs.Link>
@@ -24,16 +24,16 @@ var breadcrumbsList = require('./breadcrumbs-list.js');
  *  </Breadcrumbs.List>
  * </Breadcrumbs>
  */
-const Breadcrumbs = Object.assign(breadcrumbs.Breadcrumbs, {
+const BreadcrumbsComponent = Object.assign(breadcrumbs.Breadcrumbs, {
     List: breadcrumbsList.BreadcrumbsList,
     Item: breadcrumbsItem.BreadcrumbsItem,
     Link: breadcrumbsLink.BreadcrumbsLink,
 });
-Breadcrumbs.List.displayName = 'Breadcrumbs.List';
-Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
-Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+BreadcrumbsComponent.List.displayName = 'Breadcrumbs.List';
+BreadcrumbsComponent.Item.displayName = 'Breadcrumbs.Item';
+BreadcrumbsComponent.Link.displayName = 'Breadcrumbs.Link';
 
 exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
 exports.BreadcrumbsLink = breadcrumbsLink.BreadcrumbsLink;
 exports.BreadcrumbsList = breadcrumbsList.BreadcrumbsList;
-exports.Breadcrumbs = Breadcrumbs;
+exports.Breadcrumbs = BreadcrumbsComponent;

package/dist/cjs/components/button/button.js

@@ -19,7 +19,7 @@ const Button = react.forwardRef(function Button({ asChild, className, children,
     return (jsxRuntime.jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": 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 ? (jsxRuntime.jsx(spinner.Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
-            ), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
+            ), jsxRuntime.jsx(reactSlot.Slottable, { children: icon && loading ? null : children })] }));
 });
 
 exports.Button = Button;

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

@@ -14,10 +14,10 @@ var cardBlock = require('./card-block.js');
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = Object.assign(card.Card, {
+const CardComponent = Object.assign(card.Card, {
     Block: cardBlock.CardBlock,
 });
-Card.Block.displayName = 'Card.Block';
+CardComponent.Block.displayName = 'Card.Block';
 
 exports.CardBlock = cardBlock.CardBlock;
-exports.Card = Card;
+exports.Card = CardComponent;

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

@@ -3,19 +3,19 @@
 
 var chips = require('./chips.js');
 
-const Chip = {
+const ChipComponent = {
     Button: chips.ChipButton,
     Checkbox: chips.ChipCheckbox,
     Radio: chips.ChipRadio,
     Removable: chips.ChipRemovable,
 };
-Chip.Button.displayName = 'Chip.Button';
-Chip.Checkbox.displayName = 'Chip.Checkbox';
-Chip.Radio.displayName = 'Chip.Radio';
-Chip.Removable.displayName = 'Chip.Removable';
+ChipComponent.Button.displayName = 'Chip.Button';
+ChipComponent.Checkbox.displayName = 'Chip.Checkbox';
+ChipComponent.Radio.displayName = 'Chip.Radio';
+ChipComponent.Removable.displayName = 'Chip.Removable';
 
 exports.ChipButton = chips.ChipButton;
 exports.ChipCheckbox = chips.ChipCheckbox;
 exports.ChipRadio = chips.ChipRadio;
 exports.ChipRemovable = chips.ChipRemovable;
-exports.Chip = Chip;
+exports.Chip = ChipComponent;

package/dist/cjs/components/details/details.js

@@ -4,8 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-require('@u-elements/u-details');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
+require('@u-elements/u-details');
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.

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

@@ -14,13 +14,13 @@ var detailsSummary = require('./details-summary.js');
  *  <Details.Content>Content</Details.Content>
  * </Details>
  */
-const Details = Object.assign(details.Details, {
+const DetailsComponent = Object.assign(details.Details, {
     Summary: detailsSummary.DetailsSummary,
     Content: detailsContent.DetailsContent,
 });
-Details.Summary.displayName = 'Details.Summary';
-Details.Content.displayName = 'Details.Content';
+DetailsComponent.Summary.displayName = 'Details.Summary';
+DetailsComponent.Content.displayName = 'Details.Content';
 
 exports.DetailsContent = detailsContent.DetailsContent;
 exports.DetailsSummary = detailsSummary.DetailsSummary;
-exports.Details = Details;
+exports.Details = DetailsComponent;

package/dist/cjs/components/dialog/dialog.js

@@ -5,9 +5,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 var button = require('../button/button.js');
 var dialogTriggerContext = require('./dialog-trigger-context.js');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 /**
  * Dialog component, used to display a dialog dialog.
@@ -32,7 +32,7 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  *   Content
  * </Dialog>
  */
-const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
+const Dialog = react.forwardRef(function Dialog({ asChild, children, className, placement = 'center', closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
     const contextRef = react.useContext(dialogTriggerContext.Context);
     const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
     const Component = asChild ? reactSlot.Slot : 'dialog';
@@ -42,7 +42,19 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
     react.useEffect(() => {
         const dialog = dialogRef.current;
         const handleClosedby = (event) => {
+            if (event.defaultPrevented)
+                return; // Skip if default action is prevented
             const { clientY: y, clientX: x, target } = event;
+            /* Check if clicked element or its closest parent has data-command='close' */
+            if (target instanceof Element && event.type === 'click') {
+                const closeElement = target.closest('[data-command="close"]');
+                if (closeElement)
+                    return dialog?.close();
+            }
+            // if the browser supports closedBy, we let the browser handle it
+            // see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy
+            if (dialog && 'closedBy' in dialog)
+                return;
             if (event instanceof KeyboardEvent)
                 return (closedby === 'none' &&
                     event.key === 'Escape' &&
@@ -73,10 +85,11 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
     /* handle closing */
     react.useEffect(() => {
         const handleClose = (event) => onClose?.(event);
-        dialogRef.current?.addEventListener('close', handleClose);
-        return () => dialogRef.current?.removeEventListener('close', handleClose);
+        const currentRef = dialogRef.current;
+        currentRef?.addEventListener('close', handleClose);
+        return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
-    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-placement": placement, "data-modal": modal, closedby: closedby, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
 });
 
 exports.Dialog = Dialog;

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

@@ -19,16 +19,16 @@ var dialogTriggerContext = require('./dialog-trigger-context.js');
  *   </Dialog>
  * </Dialog.TriggerContext>
  */
-const Dialog = Object.assign(dialog.Dialog, {
+const DialogComponent = Object.assign(dialog.Dialog, {
     Block: dialogBlock.DialogBlock,
     TriggerContext: dialogTriggerContext.DialogTriggerContext,
     Trigger: dialogTrigger.DialogTrigger,
 });
-Dialog.Block.displayName = 'Dialog.Block';
-Dialog.TriggerContext.displayName = 'Dialog.TriggerContext';
-Dialog.Trigger.displayName = 'Dialog.Trigger';
+DialogComponent.Block.displayName = 'Dialog.Block';
+DialogComponent.TriggerContext.displayName = 'Dialog.TriggerContext';
+DialogComponent.Trigger.displayName = 'Dialog.Trigger';
 
 exports.DialogBlock = dialogBlock.DialogBlock;
 exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.DialogTriggerContext = dialogTriggerContext.DialogTriggerContext;
-exports.Dialog = Dialog;
+exports.Dialog = DialogComponent;

package/dist/cjs/components/dropdown/dropdown-button.js

@@ -5,6 +5,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var button = require('../button/button.js');
 
+/**
+ * DropdownButton component, used to display a button in the DropdownItem.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownButton = react.forwardRef(function DropdownButton({ ...rest }, ref) {
     return jsxRuntime.jsx(button.Button, { ref: ref, variant: 'tertiary', ...rest });
 });

package/dist/cjs/components/dropdown/dropdown-heading.js

@@ -5,6 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var heading = require('../heading/heading.js');
 
+/**
+ * DropdownHeading component, used to display a heading in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownHeading>Heading</DropdownHeading>
+ * </Dropdown>
+ */
 const DropdownHeading = react.forwardRef(function DropdownHeading({ className, ...rest }, ref) {
     return jsxRuntime.jsx(heading.Heading, { ref: ref, ...rest });
 });

package/dist/cjs/components/dropdown/dropdown-item.js

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * DropdownItem component, used to display an item in the Dropdown. Used within a DropdownList.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownItem = react.forwardRef(function DropdownItem({ className, ...rest }, ref) {
     return jsxRuntime.jsx("li", { ref: ref, ...rest });
 });

package/dist/cjs/components/dropdown/dropdown-list.js

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * DropdownList component, used to display a list of items in the Dropdown.
+ *
+ * @example
+ * <Dropdown>
+ *  <DropdownList>
+ *    <DropdownItem>
+ *      <DropdownButton>Button</DropdownButton>
+ *    </DropdownItem>
+ *  </DropdownList>
+ * </Dropdown>
+ */
 const DropdownList = react.forwardRef(function DropdownList({ className, ...rest }, ref) {
     return jsxRuntime.jsx("ul", { ref: ref, ...rest });
 });

package/dist/cjs/components/dropdown/dropdown-trigger-context.js

@@ -8,17 +8,17 @@ var popoverTriggerContext = require('../popover/popover-trigger-context.js');
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
  *
  * @example
- * <Dropdown.TriggerContext>
- *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ * <DropdownTriggerContext>
+ *  <DropdownTrigger>Dropdown</DropdownTrigger>
  *  <Dropdown>
- *   <Dropdown.Heading>Heading</Dropdown.Heading>
- *    <Dropdown.List>
- *      <Dropdown.Item>
- *        <Dropdown.Button>Button</Dropdown.Button>
- *      </Dropdown.Item>
- *    </Dropdown.List>
+ *   <DropdownHeading>Heading</DropdownHeading>
+ *    <DropdownList>
+ *      <DropdownItem>
+ *        <DropdownButton>Button</DropdownButton>
+ *      </DropdownItem>
+ *    </DropdownList>
  *  </Dropdown>
- * </Dropdown.TriggerContext>
+ * </DropdownTriggerContext>
  */
 const DropdownTriggerContext = ({ children, }) => {
     return jsxRuntime.jsx(popoverTriggerContext.PopoverTriggerContext, { children: children });

package/dist/cjs/components/dropdown/dropdown-trigger.js

@@ -5,6 +5,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var popoverTrigger = require('../popover/popover-trigger.js');
 
+/**
+ * DropdownTrigger component, used within a Dropdown.TriggerContext to open a Dropdown.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
 const DropdownTrigger = react.forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
     return jsxRuntime.jsx(popoverTrigger.PopoverTrigger, { ref: ref, ...rest });
 });

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

@@ -12,7 +12,7 @@ var dropdownTriggerContext = require('./dropdown-trigger-context.js');
 /**
  * Dropdown component, used to display a list of options.
  *
- * @example
+ * @example with TriggerContext
  * <Dropdown.TriggerContext>
  *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
  *   <Dropdown placement='bottom-end'>
@@ -24,8 +24,19 @@ var dropdownTriggerContext = require('./dropdown-trigger-context.js');
  *     </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 = Object.assign(dropdown.Dropdown, {
+const DropdownComponent = Object.assign(dropdown.Dropdown, {
     TriggerContext: dropdownTriggerContext.DropdownTriggerContext,
     Heading: dropdownHeading.DropdownHeading,
     List: dropdownList.DropdownList,
@@ -33,12 +44,12 @@ const Dropdown = Object.assign(dropdown.Dropdown, {
     Button: dropdownButton.DropdownButton,
     Trigger: dropdownTrigger.DropdownTrigger,
 });
-Dropdown.TriggerContext.displayName = 'Dropdown.TriggerContext';
-Dropdown.List.displayName = 'Dropdown.List';
-Dropdown.Heading.displayName = 'Dropdown.Heading';
-Dropdown.Item.displayName = 'Dropdown.Item';
-Dropdown.Button.displayName = 'Dropdown.Button';
-Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+DropdownComponent.TriggerContext.displayName = 'Dropdown.TriggerContext';
+DropdownComponent.List.displayName = 'Dropdown.List';
+DropdownComponent.Heading.displayName = 'Dropdown.Heading';
+DropdownComponent.Item.displayName = 'Dropdown.Item';
+DropdownComponent.Button.displayName = 'Dropdown.Button';
+DropdownComponent.Trigger.displayName = 'Dropdown.Trigger';
 
 exports.DropdownButton = dropdownButton.DropdownButton;
 exports.DropdownHeading = dropdownHeading.DropdownHeading;
@@ -46,4 +57,4 @@ exports.DropdownItem = dropdownItem.DropdownItem;
 exports.DropdownList = dropdownList.DropdownList;
 exports.DropdownTrigger = dropdownTrigger.DropdownTrigger;
 exports.DropdownTriggerContext = dropdownTriggerContext.DropdownTriggerContext;
-exports.Dropdown = Dropdown;
+exports.Dropdown = DropdownComponent;

package/dist/cjs/components/error-summary/error-summary-heading.js

@@ -6,6 +6,14 @@ var react = require('react');
 var heading = require('../heading/heading.js');
 var errorSummary = require('./error-summary.js');
 
+/**
+ * ErrorSummary heading component, used to display a heading for the error summary.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryHeading>Heading</ErrorSummaryHeading>
+ * </ErrorSummary>
+ */
 const ErrorSummaryHeading = react.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
     const { headingId, setHeadingId } = react.useContext(errorSummary.ErrorSummaryContext);
     react.useEffect(() => {

package/dist/cjs/components/error-summary/error-summary-item.js

@@ -10,11 +10,11 @@ var listItem = require('../list/list-item.js');
  * ErrorSummaryItem component, used to display an error link in the ErrorSummary.
  *
  * @example
- * <ErrorSummary.Item>
- *  <ErrorSummary.Link href="#">
+ * <ErrorSummaryItem>
+ *  <ErrorSummaryLink href="#">
  *    Link to error
- *  </ErrorSummary.Link>
- * </ErrorSummary.Item>
+ *  </ErrorSummaryLink>
+ * </ErrorSummaryItem>
  */
 const ErrorSummaryItem = react.forwardRef(function ErrorSummaryItem({ ...rest }, ref) {
     return jsxRuntime.jsx(listItem.ListItem, { ref: ref, ...rest });

package/dist/cjs/components/error-summary/error-summary-link.js

@@ -6,7 +6,14 @@ var react = require('react');
 var link = require('../link/link.js');
 
 /**
- * Link component used in ErrorSummary.
+ * ErrorSummary link component, used to link to a specific error. Used within an ErrorSummary.Item.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummaryItem>
+ *     <ErrorSummaryLink href='#'>Error 1</ErrorSummaryLink>
+ *   </ErrorSummaryItem>
+ * </ErrorSummary>
  */
 const ErrorSummaryLink = react.forwardRef(function ErrorSummaryLink({ ...rest }, ref) {
     return jsxRuntime.jsx(link.Link, { ref: ref, "data-color": 'neutral', ...rest });

package/dist/cjs/components/error-summary/error-summary-list.js

@@ -5,6 +5,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var index = require('../list/index.js');
 
+/**
+ * ErrorSummary list component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <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 ErrorSummaryList = react.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
     return jsxRuntime.jsx(index.List.Unordered, { ...rest, ref: ref });
 });

package/dist/cjs/components/error-summary/index.js

@@ -23,19 +23,19 @@ var errorSummaryList = require('./error-summary-list.js');
  *   </ErrorSummary.List>
  * </ErrorSummary>
  */
-const ErrorSummary = Object.assign(errorSummary.ErrorSummary, {
+const ErrorSummaryComponent = Object.assign(errorSummary.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';
+ErrorSummaryComponent.Item.displayName = 'ErrorSummary.Item';
+ErrorSummaryComponent.Heading.displayName = 'ErrorSummary.Heading';
+ErrorSummaryComponent.List.displayName = 'ErrorSummary.List';
+ErrorSummaryComponent.Link.displayName = 'ErrorSummary.Link';
 
 exports.ErrorSummaryHeading = errorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = errorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryLink = errorSummaryLink.ErrorSummaryLink;
 exports.ErrorSummaryList = errorSummaryList.ErrorSummaryList;
-exports.ErrorSummary = ErrorSummary;
+exports.ErrorSummary = ErrorSummaryComponent;