@digdir/designsystemet-react 1.0.0-next.17 → 1.0.0-next.33

package/dist/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lite = require('../../node_modules/clsx/dist/lite.js');
+var React = require('react');
+
+/**
+ * Accordion component, contains `Accordion.Item` components.
+ */
+const Accordion = React.forwardRef(function Accordion({ border = false, color = 'neutral', className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { className: lite.clsx('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
+});
+
+exports.Accordion = Accordion;

package/dist/cjs/components/Accordion/AccordionContent.js

@@ -2,10 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
-var AccordionItem = require('./AccordionItem.js');
-var AnimateHeight = require('../../utilities/AnimateHeight/AnimateHeight.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
@@ -13,14 +10,8 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
  * @example
  * <AccordionContent>Content</AccordionContent>
  */
-const AccordionContent = React.forwardRef(({ children, className, ...rest }, ref) => {
-    const context = React.useContext(AccordionItem.AccordionItemContext);
-    if (context === null) {
-        console.error('<Accordion.Content> has to be used within an <Accordion.Item>');
-        return null;
-    }
-    return (jsxRuntime.jsx(AnimateHeight.AnimateHeight, { id: context.contentId, open: context.open, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('ds-accordion__content', className), ...rest, children: children }) }) }));
+const AccordionContent = React.forwardRef(function AccordionContent(rest, ref) {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("div", { ref: ref, ...rest }) }));
 });
-AccordionContent.displayName = 'AccordionContent';
 
 exports.AccordionContent = AccordionContent;

package/dist/cjs/components/Accordion/AccordionHeading.js

@@ -2,30 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
-var AccordionItem = require('./AccordionItem.js');
-var Heading = require('../Typography/Heading/Heading.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
- * Accordion heading component, contains a button to toggle the content.
+ * Accordion header component, contains a button to toggle the content.
  * @example
- * <AccordionHeading>Header</AccordionHeading>
+ * <AccordionHeader>Header</AccordionHeader>
  */
-const AccordionHeading = React.forwardRef(({ level = 1, children, className, onHeaderClick, ...rest }, ref) => {
-    const context = React.useContext(AccordionItem.AccordionItemContext);
-    if (context === null) {
-        console.error('<Accordion.Heading> has to be used within an <Accordion.Item>');
-        return null;
-    }
-    const handleClick = (e) => {
-        context.toggleOpen();
-        onHeaderClick?.(e);
-    };
-    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xs', level: level, className: lite.clsx('ds-accordion__heading', className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: lite.clsx('ds-accordion__button', `ds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsxRuntime.jsx(akselIcons.ChevronDownIcon, { "aria-hidden": true, className: 'ds-accordion__expand-icon', fontSize: '1.5rem' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+const AccordionHeading = React.forwardRef(function AccordionHeading({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("u-summary", { class: lite.clsx('ds-focus ds-paragraph ds-paragraph--sm ds-line-height--md', // Very TMP fix awaiting CSS modules
+            className), ref: ref, ...rest }) }));
 });
-AccordionHeading.displayName = 'AccordionHeading';
 
 exports.AccordionHeading = AccordionHeading;

package/dist/cjs/components/Accordion/AccordionItem.js

@@ -2,32 +2,77 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
+require('../../node_modules/@u-elements/u-details/dist/u-details.js');
 
-const AccordionItemContext = React.createContext(null);
 /**
  * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
  * @example
  * <AccordionItem>
- *  <AccordionHeading>Header</AccordionHeading>
+ *  <AccordionHeader>Header</AccordionHeader>
  *  <AccordionContent>Content</AccordionContent>
  * </AccordionItem>
  */
-const AccordionItem = React.forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
-    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const contentId = React.useId();
-    return (jsxRuntime.jsx("div", { className: lite.clsx('ds-accordion__item', (open ?? internalOpen) && 'ds-accordion__item--open', className), ref: ref, ...rest, children: jsxRuntime.jsx(AccordionItemContext.Provider, { value: {
-                open: open ?? internalOpen,
-                toggleOpen: () => {
-                    if (open === undefined) {
-                        setInternalOpen((iOpen) => !iOpen);
-                    }
-                },
-                contentId: contentId,
-            }, children: children }) }));
+const AccordionItem = React.forwardRef(function AccordionItem({ className, open, defaultOpen = false, onFound, ...rest }, ref) {
+    const [internalOpen, setInternalOpen] = React.useState(open ?? defaultOpen);
+    const initialOpen = React.useRef(internalOpen); // Allow rendering initial open state on server, but animate in browser
+    const controlledOpen = React.useRef(internalOpen); // Using ref so we can access it inside useEffect without unbinding/binding event listeners
+    const detailsRef = React.useRef(null);
+    const mergedRefs = floatingUi_react.useMergeRefs([detailsRef, ref]);
+    controlledOpen.current = open ?? internalOpen; // Update controlledOpen on prop change
+    // Control state with a useEffect to animate on prop change and prevent native <details> toggle
+    React.useEffect(() => {
+        const details = detailsRef.current;
+        const summary = details?.querySelector(':scope > :is(summary,u-summary)');
+        const handleSummaryClick = (event) => {
+            event?.preventDefault(); // Prevent native <details> toggle so we can animate
+            setInternalOpen((open) => !open);
+        };
+        const handleToggle = () => {
+            if (!details || details.open === controlledOpen.current)
+                return;
+            onFound?.();
+            setInternalOpen(details?.open || false);
+            window.requestAnimationFrame(() => {
+                details.open = controlledOpen.current;
+            }); // Let onFound run before correcting state
+        };
+        details?.addEventListener('toggle', handleToggle, true);
+        summary?.addEventListener('click', handleSummaryClick);
+        return () => {
+            details?.removeEventListener('toggle', handleToggle, true);
+            summary?.removeEventListener('click', handleSummaryClick);
+        };
+    }, []);
+    React.useEffect(() => {
+        animateHeight(detailsRef.current, controlledOpen.current);
+    }, [controlledOpen.current]);
+    return (jsxRuntime.jsx("u-details", { class: lite.clsx('ds-accordion__item', className), open: initialOpen.current || undefined, ref: mergedRefs, ...rest }));
 });
-AccordionItem.displayName = 'AccordionItem';
+const animateHeight = (details, open) => {
+    const content = details?.querySelector(':scope > :not(summary, u-summary)');
+    const hasContent = content instanceof HTMLElement;
+    const hasAnimate = details && 'animate' in details;
+    const hasReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    details?.setAttribute('data-chevron-open', `${open}`); // Make flip on click
+    if (hasReducedMotion || !hasAnimate || !hasContent) {
+        if (details)
+            details.open = open;
+    }
+    else if (details.open !== open) {
+        details.open = true;
+        const opened = `${content.scrollHeight}px`;
+        content.style.overflow = 'clip'; // Clip content while animating
+        content.animate({
+            height: [open ? '0px' : opened, open ? opened : '0px'],
+            paddingBlock: [open ? '0px' : '', open ? '' : '0px'],
+        }, { duration: 400, easing: 'ease-in-out' }).onfinish = () => {
+            content.style.removeProperty('overflow'); // Restore overlow
+            details.open = open;
+        };
+    }
+};
 
 exports.AccordionItem = AccordionItem;
-exports.AccordionItemContext = AccordionItemContext;

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

@@ -1,27 +1,25 @@
 'use client';
 'use strict';
 
+var Accordion$1 = require('./Accordion.js');
 var AccordionContent = require('./AccordionContent.js');
 var AccordionHeading = require('./AccordionHeading.js');
 var AccordionItem = require('./AccordionItem.js');
-var AccordionRoot = require('./AccordionRoot.js');
 
 /**
  * Accordions are used to toggle the visibility of content.
  * @example
- * <Accordion.Root>
+ * <Accordion>
  *  <Accordion.Item>
  *   <Accordion.Heading>Heading 1</Accordion.Heading>
  *   <Accordion.Content>Content 1</Accordion.Content>
  *  </Accordion.Item>
- * <Accordion.Item>
+ * <Accordion>
  */
-const Accordion = {};
-Accordion.Root = AccordionRoot.AccordionRoot;
+const Accordion = Accordion$1.Accordion;
 Accordion.Heading = AccordionHeading.AccordionHeading;
 Accordion.Content = AccordionContent.AccordionContent;
 Accordion.Item = AccordionItem.AccordionItem;
-Accordion.Root.displayName = 'Accordion.Root';
 Accordion.Heading.displayName = 'Accordion.Heading';
 Accordion.Content.displayName = 'Accordion.Content';
 Accordion.Item.displayName = 'Accordion.Item';
@@ -29,5 +27,4 @@ Accordion.Item.displayName = 'Accordion.Item';
 exports.AccordionContent = AccordionContent.AccordionContent;
 exports.AccordionHeading = AccordionHeading.AccordionHeading;
 exports.AccordionItem = AccordionItem.AccordionItem;
-exports.AccordionRoot = AccordionRoot.AccordionRoot;
 exports.Accordion = Accordion;

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

@@ -2,32 +2,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-const icons = {
-    info: {
-        Icon: akselIcons.InformationSquareFillIcon,
-        title: 'Informasjon',
-    },
-    warning: { Icon: akselIcons.ExclamationmarkTriangleFillIcon, title: 'Advarsel' },
-    success: { Icon: akselIcons.CheckmarkCircleFillIcon, title: 'Suksess' },
-    danger: {
-        Icon: akselIcons.XMarkOctagonFillIcon,
-        title: 'Feil',
-    },
-};
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
  * @example
- * <Alert severity='info'>Dette er en informasjonsmelding</Alert>
+ * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
-const Alert = React.forwardRef(({ severity = 'info', iconTitle, children, size = 'md', className, ...rest }, ref) => {
-    const { Icon, title } = icons[severity];
-    return (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('ds-alert', `ds-alert--${size}`, `ds-alert--${severity}`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'ds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, className: 'ds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+const Alert = React.forwardRef(function Alert({ color = 'info', size = 'md', className, ...rest }, ref) {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
 });
-Alert.displayName = 'Alert';
 
 exports.Alert = Alert;

package/dist/cjs/components/Avatar/Avatar.js

@@ -0,0 +1,36 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
+var React = require('react');
+
+const fontSizeMap = {
+    xs: 'ds-paragraph--xs',
+    sm: 'ds-heading--2xs',
+    md: 'ds-heading--sm',
+    lg: 'ds-heading--md',
+};
+/**
+ * Avatars are used to represent people or entities.
+ *
+ * @example
+ * <Avatar aria-label="John Doe">JD</Avatar>
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <img src='…' alt='John Doe' />
+ * </Avatar>
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <Icon />
+ * </Avatar>
+ */
+const Avatar = React.forwardRef(function Avatar({ 'aria-label': ariaLabel, color = 'accent', size = 'md', variant = 'circle', className, children, ...rest }, ref) {
+    const Component = children && typeof children !== 'string' ? index.Slot : React.Fragment;
+    return (jsxRuntime.jsx("span", { ref: ref, className: lite.clsx('ds-avatar', fontSizeMap[size], className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsxRuntime.jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
+});
+
+exports.Avatar = Avatar;

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

@@ -27,7 +27,12 @@ const paragraphSizeMap = {
  * ```
  */
 const Badge = React.forwardRef(({ color = 'accent', size = 'md', placement = 'top-right', overlap = 'rectangle', count, maxCount, children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsxs("div", { className: lite.clsx('ds-badge__wrapper', className), children: [children, jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsxRuntime.jsx("span", { className: lite.clsx('ds-badge', `ds-badge--${size}`, `ds-badge--${color}`, count && 'ds-badge--count', children && `ds-badge--${placement}__${overlap}`, children && 'ds-badge--float'), ref: ref, ...rest, children: maxCount && count && count > maxCount ? `${maxCount}+` : count }) })] }));
+    return (jsxRuntime.jsxs("div", { className: lite.clsx('ds-badge__wrapper', className), children: [children, jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsxRuntime.jsx("span", { className: lite.clsx('ds-badge', count && 'ds-badge--count'), ref: ref, "data-size": size, "data-color": color, ...(children
+                        ? {
+                            'data-placement': placement,
+                            'data-overlap': overlap,
+                        }
+                        : {}), ...rest, children: maxCount && count && count > maxCount ? `${maxCount}+` : count }) })] }));
 });
 Badge.displayName = 'Badge';
 

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

@@ -6,16 +6,19 @@ var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+var Spinner = require('../loaders/Spinner/Spinner.js');
 
 /**
  * Button used for interaction
  * @example
  * <Button>Click me</Button>
  */
-const Button = React.forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
+const Button = React.forwardRef(function Button({ asChild, className, children, color = 'accent', icon = false, loading = false, size = 'md', type = 'button', variant = 'primary', ...rest }, ref) {
     const Component = asChild ? index.Slot : 'button';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { variant: 'short', size: size, asChild: true, children: jsxRuntime.jsx(Component, { ref: ref, type: type, className: lite.clsx('ds-btn', `ds-focus`, `ds-btn--${size}`, `ds-btn--${variant}`, `ds-btn--${color}`, fullWidth && 'ds-btn--full-width', icon && 'ds-btn--icon-only', className), ...rest, children: children }) }));
+    const spinnerColor = color === 'accent' ? color : 'neutral';
+    // Fallbacks to undefined to prevent rendering attribute="false"
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { variant: 'short', size: size, asChild: true, children: jsxRuntime.jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: lite.clsx('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "data-variant": variant, ref: ref, type: type, ...rest, children: [loading === true ? (jsxRuntime.jsx(Spinner.Spinner, { "aria-hidden": 'true', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
+                ), jsxRuntime.jsx(index.Slottable, { children: children })] }) }));
 });
-Button.displayName = 'Button';
 
 exports.Button = Button;

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

@@ -17,7 +17,7 @@ var React = require('react');
  */
 const Card = React.forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(`ds-card`, `ds-card--${color}`, isLink && `ds-card--link`, isLink && `ds-focus`, className), ...rest }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(`ds-card`, isLink && `ds-focus`, className), "data-color": color, "data-link": isLink ? '' : undefined, ...rest }));
 });
 Card.displayName = 'Card';
 

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

@@ -5,9 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
-const Divider = React.forwardRef(({ color = 'default', className, ...rest }, ref) => (
-// biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
-jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: lite.clsx('ds-divider', `ds-divider--${color}`, className), ref: ref, ...rest })));
-Divider.displayName = '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
+    jsxRuntime.jsx("hr", { "aria-hidden": 'true', className: lite.clsx('ds-divider', className), ref: ref, ...rest }));
+});
 
 exports.Divider = Divider;

package/dist/cjs/components/DropdownMenu/DropdownMenuContent.js

@@ -6,33 +6,14 @@ var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/float
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 var DropdownMenuRoot = require('./DropdownMenuRoot.js');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 var useIsomorphicLayoutEffect = require('../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const GAP = 4;
 const DropdownMenuContent = React.forwardRef(({ className, children, ...rest }, ref) => {
     const { size, placement, portal, anchorEl, isControlled, internalOpen, setInternalOpen, onClose, } = React.useContext(DropdownMenuRoot.DropdownMenuContext);
-    const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;
+    const Container = portal ? floatingUi_react.FloatingPortal : React.Fragment;
     const floatingEl = React.useRef(null);
     const { context, update, refs, placement: flPlacement, floatingStyles, } = floatingUi_react.useFloating({
         placement,
@@ -67,7 +48,7 @@ const DropdownMenuContent = React.forwardRef(({ className, children, ...rest },
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: internalOpen && (jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, guards: false, modal: false, children: jsxRuntime.jsx(Container, { children: jsxRuntime.jsx("ul", { role: 'menu', "aria-hidden": !internalOpen, "data-placement": flPlacement, ref: floatingRef, style: floatingStyles, ...getFloatingProps({
                         ref: floatingRef,
                         tabIndex: undefined,
-                    }), className: lite.clsx('ds-dropdownmenu', `ds-dropdownmenu--${size}`, className), ...rest, children: children }) }) })) }));
+                    }), className: lite.clsx('ds-dropdownmenu', className), "data-size": size, ...rest, children: children }) }) })) }));
 });
 DropdownMenuContent.displayName = 'DropdownMenuContent';
 

package/dist/cjs/components/DropdownMenu/DropdownMenuGroup.js

@@ -9,7 +9,7 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 const DropdownMenuGroup = React.forwardRef(({ children, heading, className, style, ...rest }, ref) => {
     const { size } = React.useContext(DropdownMenuRoot.DropdownMenuContext);
     const headingId = React.useId();
-    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: 'ds-dropdownmenu__section', ...rest, children: [heading && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("h2", { id: headingId, className: 'ds-dropdownmenu__heading', children: heading }) })), children] }) }));
+    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: 'ds-dropdownmenu__group', ...rest, children: [heading && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("h2", { id: headingId, className: 'ds-dropdownmenu__heading', children: heading }) })), children] }) }));
 });
 DropdownMenuGroup.displayName = 'DropdownMenuGroup';
 

package/dist/cjs/components/DropdownMenu/DropdownMenuItem.js

@@ -8,7 +8,7 @@ var Button = require('../Button/Button.js');
 
 const DropdownMenuItem = React.forwardRef(({ children, className, style, ...rest }, ref) => {
     const { size } = React.useContext(DropdownMenuRoot.DropdownMenuContext);
-    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', size: size, fullWidth: true, className: 'ds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
+    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', size: size, className: 'ds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
 });
 DropdownMenuItem.displayName = 'DropdownMenuItem';
 

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

@@ -3,18 +3,22 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('../List/index.js');
 var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var Heading = require('../Typography/Heading/Heading.js');
 
-const ErrorSummaryHeading = ({ id, ...rest }) => {
-    const { headingId, setHeadingId } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
+const HEADING_SIZE_MAP = {
+    sm: '2xs',
+    md: 'xs',
+    lg: 'sm',
+};
+const ErrorSummaryHeading = React.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
+    const { size, headingId, setHeadingId } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
     React.useEffect(() => {
-        if (id && headingId !== id) {
+        if (id && headingId !== id)
             setHeadingId(id);
-        }
     }, [headingId, id, setHeadingId]);
-    return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId, className: 'ds-error-summary__heading' }));
-};
+    return (jsxRuntime.jsx(Heading.Heading, { className: 'ds-error-summary__heading', id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
+});
 ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading;

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

@@ -2,12 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var index = require('../List/index.js');
 var Link = require('../Link/Link.js');
 
-const ErrorSummaryItem = ({ href, asChild, children, ...rest }) => {
-    return (jsxRuntime.jsx(index.List.Item, { ...rest, children: jsxRuntime.jsx(Link.Link, { href: href, asChild: asChild, children: children }) }));
-};
-ErrorSummaryItem.displayName = 'ErrorSummaryItem';
+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 }) }));
+});
 
 exports.ErrorSummaryItem = ErrorSummaryItem;

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

@@ -2,11 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var index = require('../List/index.js');
+var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
 
-function ErrorSummaryList({ ...rest }) {
-    return jsxRuntime.jsx(index.List.Unordered, { ...rest });
-}
-ErrorSummaryList.displayName = 'ErrorSummaryList';
+const ErrorSummaryList = React.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
+    const { size } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
+    return jsxRuntime.jsx(index.List.Unordered, { size: size, ...rest, ref: ref });
+});
 
-module.exports = ErrorSummaryList;
+exports.ErrorSummaryList = ErrorSummaryList;

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

@@ -2,18 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
-var index$1 = require('../List/index.js');
 
 const ErrorSummaryContext = React.createContext({
+    size: 'md',
     headingId: 'heading',
     setHeadingId: () => { },
 });
-const ErrorSummaryRoot = React.forwardRef(({ size, role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', children, ...rest }, ref) => {
+const ErrorSummaryRoot = React.forwardRef(({ className, size = 'md', role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) => {
     const randomId = React.useId();
     const [headingId, setHeadingId] = React.useState(randomId);
-    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { headingId, setHeadingId }, children: jsxRuntime.jsx(index.Slot, { className: 'ds-error-summary', ref: ref, role: role, "aria-live": ariaLive, "aria-relevant": ariaRelevant, "aria-labelledby": headingId, ...rest, children: jsxRuntime.jsx(index$1.List.Root, { size: size, children: children }) }) }));
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { size, headingId, setHeadingId }, children: jsxRuntime.jsx("div", { className: lite.clsx('ds-error-summary', className), ref: ref, role: role, "aria-live": ariaLive, "aria-relevant": ariaRelevant, "aria-labelledby": headingId, ...rest }) }));
 });
 ErrorSummaryRoot.displayName = 'ErrorSummaryRoot';
 

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

@@ -19,7 +19,7 @@ const ErrorSummary = {};
 ErrorSummary.Root = ErrorSummaryRoot.ErrorSummaryRoot;
 ErrorSummary.Item = ErrorSummaryItem.ErrorSummaryItem;
 ErrorSummary.Heading = ErrorSummaryHeading.ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList;
+ErrorSummary.List = ErrorSummaryList.ErrorSummaryList;
 ErrorSummary.Root.displayName = 'ErrorSummary.Root';
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
@@ -27,6 +27,6 @@ ErrorSummary.List.displayName = 'ErrorSummary.List';
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
-exports.ErrorSummaryList = ErrorSummaryList;
+exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
 exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
 exports.ErrorSummary = ErrorSummary;

package/dist/cjs/components/HelpText/HelpText.js

@@ -8,10 +8,12 @@ var index = require('../Popover/index.js');
 var HelpTextIcon = require('./HelpTextIcon.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-const HelpText = ({ title, placement = 'right', portal, size = 'md', className, children, ...rest }) => {
+const HelpText = React.forwardRef(function HelpText({ title, placement = 'right', size = 'md', className, children, ...rest }, ref) {
     const [open, setOpen] = React.useState(false);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(index.Popover.Root, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsxRuntime.jsx(index.Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxRuntime.jsxs("button", { className: lite.clsx(`ds-helptext--${size}`, 'ds-helptext__button', `ds-focus`, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { filled: true, className: lite.clsx(`ds-helptext__icon`, `ds-helptext__icon--filled`, className), openState: open }), jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { className: lite.clsx(`ds-helptext__icon`, className), openState: open }), jsxRuntime.jsx("span", { className: `ds-sr-only`, children: title })] }) }), jsxRuntime.jsx(Paragraph.Paragraph, { size: 'md', asChild: true, children: jsxRuntime.jsx(index.Popover.Content, { className: 'ds-helptext__content', children: children }) })] }) }));
-};
-HelpText.displayName = 'HelpText';
+    const randomId = React.useId();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { className: lite.clsx(`ds-helptext--${size}`, 'ds-helptext__button', `ds-focus`, className), onClick: () => setOpen(!open), 
+                // @ts-ignore
+                popovertarget: randomId, ref: ref, ...rest, children: [jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { filled: true, className: lite.clsx(`ds-helptext__icon`, `ds-helptext__icon--filled`, className), openState: open }), jsxRuntime.jsx(HelpTextIcon.HelpTextIcon, { className: lite.clsx(`ds-helptext__icon`, className), openState: open }), jsxRuntime.jsx("span", { className: `ds-sr-only`, children: title })] }), jsxRuntime.jsx(Paragraph.Paragraph, { size: 'md', asChild: true, children: jsxRuntime.jsx(index.Popover, { id: randomId, className: 'ds-helptext__content', onClose: () => setOpen(false), open: open, placement: placement, size: size, variant: 'info', children: children }) })] }));
+});
 
 exports.HelpText = HelpText;

package/dist/cjs/components/Link/Link.js

@@ -6,9 +6,9 @@ var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
-const Link = React.forwardRef(({ color = 'accent', asChild, children, className, ...rest }, ref) => {
+const Link = React.forwardRef(({ asChild, className, color = 'accent', ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'a';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-link', `ds-link--${color}`, className), ref: ref, ...rest, children: children }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-link', className), "data-color": color, ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

package/dist/cjs/components/List/ListItem.js

@@ -3,13 +3,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
-const ListItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+const ListItem = React.forwardRef(function ListItem({ asChild, ...rest }, ref) {
     const Component = asChild ? index.Slot : 'li';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-list__item', className), ...rest, ref: ref }));
+    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
-ListItem.displayName = 'ListItem';
 
 exports.ListItem = ListItem;