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

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

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+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.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, variant = 'default', onToggle, ...rest }, ref) {
+    const detailsRef = react.useRef(null);
+    const initialOpen = react.useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
+    const mergedRefs = useMergeRefs.useMergeRefs([detailsRef, ref]);
+    const onToggleRef = react.useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
+    const openRef = react.useRef(open);
+    onToggleRef.current = onToggle;
+    openRef.current = open;
+    // Provide onToggle event and controlled state
+    react.useEffect(() => {
+        const details = detailsRef.current;
+        const handleToggle = (event) => {
+            if (!details || details?.open === openRef.current)
+                return;
+            onToggleRef.current?.(event);
+            if (openRef.current !== undefined)
+                details.open = openRef.current; // Don't update DOM unless controlled state changes
+        };
+        details?.addEventListener('toggle', handleToggle, true);
+        return () => details?.removeEventListener('toggle', handleToggle, true);
+    }, []);
+    return (jsxRuntime.jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+exports.Details = Details;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var details = require('./details.js');
+var detailsContent = require('./details-content.js');
+var detailsSummary = require('./details-summary.js');
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const DetailsComponent = Object.assign(details.Details, {
+    Summary: detailsSummary.DetailsSummary,
+    Content: detailsContent.DetailsContent,
+});
+DetailsComponent.Summary.displayName = 'Details.Summary';
+DetailsComponent.Content.displayName = 'Details.Content';
+
+exports.DetailsContent = detailsContent.DetailsContent;
+exports.DetailsSummary = detailsSummary.DetailsSummary;
+exports.Details = DetailsComponent;

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

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var button = require('../button/button.js');
+var dialogTriggerContext = require('./dialog-trigger-context.js');
+
+/**
+ * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTrigger = react.forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
+    const contextRef = react.useContext(dialogTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : button.Button;
+    const openDialog = () => {
+        /* check if element has `data-modal`, it it has, use `showModal` */
+        contextRef.current?.getAttribute('data-modal') === 'true'
+            ? contextRef.current?.showModal()
+            : contextRef.current?.show();
+    };
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+});
+
+exports.DialogTrigger = DialogTrigger;

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

@@ -0,0 +1,95 @@
+'use client';
+'use strict';
+
+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');
+
+/**
+ * Dialog component, used to display a dialog dialog.
+ *
+ * @example with TriggerContext
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const dialogRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => dialogRef.current?.showModal()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+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';
+    const mergedRefs = useMergeRefs.useMergeRefs([contextRef, ref, dialogRef]);
+    const showProp = modal ? 'showModal' : 'show';
+    react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
+    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' &&
+                    event.preventDefault()); // Skip ESC-key if closedby="none"
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && closedby === 'any') {
+                const { top, left, right, bottom } = dialog.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = dialog?.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        dialog?.addEventListener('animationend', handleAutoFocus);
+        dialog?.addEventListener('click', handleClosedby);
+        dialog?.addEventListener('keydown', handleClosedby);
+        return () => {
+            dialog?.removeEventListener('animationend', handleAutoFocus);
+            dialog?.removeEventListener('click', handleClosedby);
+            dialog?.removeEventListener('keydown', handleClosedby);
+        };
+    }, [closedby]);
+    /* handle closing */
+    react.useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        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-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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var dialog = require('./dialog.js');
+var dialogBlock = require('./dialog-block.js');
+var dialogTrigger = require('./dialog-trigger.js');
+var dialogTriggerContext = require('./dialog-trigger-context.js');
+
+/**
+ * Dialog component, used to display a Dialog dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogComponent = Object.assign(dialog.Dialog, {
+    Block: dialogBlock.DialogBlock,
+    TriggerContext: dialogTriggerContext.DialogTriggerContext,
+    Trigger: dialogTrigger.DialogTrigger,
+});
+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 = DialogComponent;

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

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.DropdownButton = DropdownButton;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.DropdownHeading = DropdownHeading;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.DropdownItem = DropdownItem;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.DropdownList = DropdownList;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var popoverTriggerContext = require('../popover/popover-trigger-context.js');
+
+/**
+ * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
+ * @example
+ * <DropdownTriggerContext>
+ *  <DropdownTrigger>Dropdown</DropdownTrigger>
+ *  <Dropdown>
+ *   <DropdownHeading>Heading</DropdownHeading>
+ *    <DropdownList>
+ *      <DropdownItem>
+ *        <DropdownButton>Button</DropdownButton>
+ *      </DropdownItem>
+ *    </DropdownList>
+ *  </Dropdown>
+ * </DropdownTriggerContext>
+ */
+const DropdownTriggerContext = ({ children, }) => {
+    return jsxRuntime.jsx(popoverTriggerContext.PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+exports.DropdownTriggerContext = DropdownTriggerContext;

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

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.DropdownTrigger = DropdownTrigger;

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

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var popover = require('../popover/popover.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(popover.Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
+});
+
+exports.Dropdown = Dropdown;

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

@@ -0,0 +1,60 @@
+'use client';
+'use strict';
+
+var dropdown = require('./dropdown.js');
+var dropdownButton = require('./dropdown-button.js');
+var dropdownHeading = require('./dropdown-heading.js');
+var dropdownItem = require('./dropdown-item.js');
+var dropdownList = require('./dropdown-list.js');
+var dropdownTrigger = require('./dropdown-trigger.js');
+var dropdownTriggerContext = require('./dropdown-trigger-context.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 DropdownComponent = Object.assign(dropdown.Dropdown, {
+    TriggerContext: dropdownTriggerContext.DropdownTriggerContext,
+    Heading: dropdownHeading.DropdownHeading,
+    List: dropdownList.DropdownList,
+    Item: dropdownItem.DropdownItem,
+    Button: dropdownButton.DropdownButton,
+    Trigger: dropdownTrigger.DropdownTrigger,
+});
+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;
+exports.DropdownItem = dropdownItem.DropdownItem;
+exports.DropdownList = dropdownList.DropdownList;
+exports.DropdownTrigger = dropdownTrigger.DropdownTrigger;
+exports.DropdownTriggerContext = dropdownTriggerContext.DropdownTriggerContext;
+exports.Dropdown = DropdownComponent;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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(() => {
+        if (id && headingId !== id)
+            setHeadingId(id);
+    }, [headingId, id, setHeadingId]);
+    return jsxRuntime.jsx(heading.Heading, { id: headingId, ref: ref, ...rest });
+});
+
+exports.ErrorSummaryHeading = ErrorSummaryHeading;

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

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

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var link = require('../link/link.js');
+
+/**
+ * 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 });
+});
+
+exports.ErrorSummaryLink = ErrorSummaryLink;

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

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+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 });
+});
+
+exports.ErrorSummaryList = ErrorSummaryList;

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var errorSummary = require('./error-summary.js');
+var errorSummaryHeading = require('./error-summary-heading.js');
+var errorSummaryItem = require('./error-summary-item.js');
+var errorSummaryLink = require('./error-summary-link.js');
+var errorSummaryList = require('./error-summary-list.js');
+
+/**
+ * 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 ErrorSummaryComponent = Object.assign(errorSummary.ErrorSummary, {
+    Heading: errorSummaryHeading.ErrorSummaryHeading,
+    Item: errorSummaryItem.ErrorSummaryItem,
+    List: errorSummaryList.ErrorSummaryList,
+    Link: errorSummaryLink.ErrorSummaryLink,
+});
+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 = ErrorSummaryComponent;