@digdir/designsystemet-react 0.63.0 → 1.0.0-next.15

package/dist/cjs/components/Accordion/{AccordionContent/AccordionContent.js → AccordionContent.js}

@@ -2,19 +2,24 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
-var AccordionItem = require('../AccordionItem/AccordionItem.js');
-var AnimateHeight = require('../../../utilities/AnimateHeight/AnimateHeight.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var AccordionItem = require('./AccordionItem.js');
+var AnimateHeight = require('../../utilities/AnimateHeight/AnimateHeight.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
+/**
+ * Accordion content component, contains the content of the accordion item.
+ * @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('fds-accordion__content', className), ...rest, children: children }) }) }));
+    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 }) }) }));
 });
 AccordionContent.displayName = 'AccordionContent';
 

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

@@ -0,0 +1,31 @@
+'use client';
+'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 header component, contains a button to toggle the content.
+ * @example
+ * <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.Header> 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__header', 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 }) })] }) }));
+});
+AccordionHeading.displayName = 'AccordionHeading';
+
+exports.AccordionHeading = AccordionHeading;

package/dist/cjs/components/Accordion/{AccordionItem/AccordionItem.js → AccordionItem.js}

@@ -2,14 +2,22 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
 const AccordionItemContext = React.createContext(null);
+/**
+ * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * @example
+ * <AccordionItem>
+ *  <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('fds-accordion__item', (open ?? internalOpen) && 'fds-accordion__item--open', className), ref: ref, ...rest, children: jsxRuntime.jsx(AccordionItemContext.Provider, { value: {
+    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) {

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

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

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

@@ -1,20 +1,33 @@
 'use client';
 'use strict';
 
-var Accordion$1 = require('./Accordion.js');
-var AccordionHeader = require('./AccordionHeader/AccordionHeader.js');
-var AccordionContent = require('./AccordionContent/AccordionContent.js');
-var AccordionItem = require('./AccordionItem/AccordionItem.js');
+var AccordionContent = require('./AccordionContent.js');
+var AccordionHeading = require('./AccordionHeading.js');
+var AccordionItem = require('./AccordionItem.js');
+var AccordionRoot = require('./AccordionRoot.js');
 
-const Accordion = Accordion$1.Accordion;
-Accordion.Header = AccordionHeader.AccordionHeader;
+/**
+ * Accordions are used to toggle the visibility of content.
+ * @example
+ * <Accordion.Root>
+ *  <Accordion.Item>
+ *   <Accordion.Heading>Heading 1</Accordion.Heading>
+ *  <Accordion.Content>Content 1</Accordion.Content>
+ * </Accordion.Item>
+ * <Accordion.Item>
+ */
+const Accordion = {};
+Accordion.Root = AccordionRoot.AccordionRoot;
+Accordion.Heading = AccordionHeading.AccordionHeading;
 Accordion.Content = AccordionContent.AccordionContent;
 Accordion.Item = AccordionItem.AccordionItem;
-Accordion.Header.displayName = 'Accordion.Header';
+Accordion.Root.displayName = 'Accordion.Root';
+Accordion.Heading.displayName = 'Accordion.Heading';
 Accordion.Content.displayName = 'Accordion.Content';
 Accordion.Item.displayName = 'Accordion.Item';
 
-exports.AccordionHeader = AccordionHeader.AccordionHeader;
 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,10 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../node_modules/clsx/dist/lite.js');
-var getSize = require('../../utilities/getSize.js');
+var React = require('react');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 const icons = {
@@ -20,10 +19,14 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = React.forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
-    const size = getSize.getSize(rest.size || 'md');
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ * @example
+ * <Alert severity='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('fds-alert', `fds-alert--${size}`, `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, className: 'fds-alert__content', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+    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 }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

package/dist/cjs/components/Box/Box.js

@@ -2,16 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var getSize = require('../../utilities/getSize.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
+var React = require('react');
 
 const Box = React.forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    const shadowSize = shadow && getSize.getSize(shadow);
-    const borderRadiusSize = borderRadius && getSize.getSize(borderRadius);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(shadowSize && `fds-box--${shadowSize}-shadow`, borderColor && `fds-box--${borderColor}-border-color`, borderRadiusSize && `fds-box--${borderRadiusSize}-border-radius`, `fds-box--${background}-background`, className), ...rest, children: children }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(shadow && `ds-box--${shadow}-shadow`, borderColor && `ds-box--${borderColor}-border-color`, borderRadius && `ds-box--${borderRadius}-border-radius`, `ds-box--${background}-background`, className), ...rest, children: children }));
 });
 Box.displayName = 'Box';
 

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

@@ -2,18 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var getSize = require('../../utilities/getSize.js');
+var lite = require('../../node_modules/clsx/dist/lite.js');
+var React = require('react');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
  * Button used for interaction
+ * @example
+ * <Button>Click me</Button>
  */
-const Button = React.forwardRef(({ children, color = 'first', variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
-    const size = getSize.getSize(rest.size || 'md');
+const Button = React.forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'button';
-    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: lite.clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
+    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 }) }));
 });
 Button.displayName = 'Button';
 

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

@@ -2,13 +2,22 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 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 Card = React.forwardRef(({ color = 'neutral', isLink = false, asChild = false, className, ...rest }, ref) => {
+/**
+ * Card component to present content in a structured way.
+ * @example
+ * <Card>
+ *  <Card.Header>Header</Card.Header>
+ *  <Card.Content>Content</Card.Content>
+ *  <Card.Footer>Footer</Card.Footer>
+ * </Card>
+ */
+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(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(`ds-card`, `ds-card--${color}`, isLink && `ds-card--link`, isLink && `ds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

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

@@ -2,13 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 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');
 
 const CardContent = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__content`, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'md', asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-card__content`, className), ref: ref, ...rest }) }));
 });
 CardContent.displayName = 'CardContent';
 

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

@@ -2,13 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 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');
 
 const CardFooter = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__footer`, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'md', asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-card__footer`, className), ref: ref, ...rest }) }));
 });
 CardFooter.displayName = 'CardFooter';
 

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

@@ -2,13 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 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 Heading = require('../Typography/Heading/Heading.js');
 
 const CardHeader = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__header`, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Heading.Heading, { size: 'md', asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-card__header`, className), ref: ref, ...rest }) }));
 });
 CardHeader.displayName = 'CardHeader';
 

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

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
 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 CardMedia = React.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx(`fds-card__media`, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: lite.clsx(`ds-card__media`, className), ref: ref, ...rest }));
 });
 CardMedia.displayName = 'CardMedia';
 

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

@@ -1,10 +1,10 @@
 'use client';
 'use strict';
 
-var CardHeader = require('./CardHeader.js');
+var Card$1 = require('./Card.js');
 var CardContent = require('./CardContent.js');
 var CardFooter = require('./CardFooter.js');
-var Card$1 = require('./Card.js');
+var CardHeader = require('./CardHeader.js');
 var CardMedia = require('./CardMedia.js');
 
 const Card = Card$1.Card;
@@ -17,8 +17,8 @@ Card.Content.displayName = 'Card.Content';
 Card.Footer.displayName = 'Card.Footer';
 Card.Media.displayName = 'Card.Media';
 
-exports.CardHeader = CardHeader.CardHeader;
 exports.CardContent = CardContent.CardContent;
 exports.CardFooter = CardFooter.CardFooter;
+exports.CardHeader = CardHeader.CardHeader;
 exports.CardMedia = CardMedia.CardMedia;
 exports.Card = Card;

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

@@ -2,14 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
-var getSize = require('../../../utilities/getSize.js');
+var React = require('react');
 
 const ChipGroupContext = React.createContext(null);
-const Group = React.forwardRef(({ children, className, ...rest }, ref) => {
-    const size = getSize.getSize(rest.size || 'md');
-    return (jsxRuntime.jsx("ul", { ref: ref, className: lite.clsx(`fds-chip--group-container`, `fds-chip--${size}`, className), ...rest, children: jsxRuntime.jsx(ChipGroupContext.Provider, { value: { size }, children: React.Children.toArray(children).map((child, index) => React.isValidElement(child) ? (jsxRuntime.jsx("li", { children: child }, `chip-${index}`)) : null) }) }));
+const Group = React.forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("ul", { ref: ref, className: lite.clsx(`ds-chip--group-container`, `ds-chip--${size}`, className), ...rest, children: jsxRuntime.jsx(ChipGroupContext.Provider, { value: { size }, children: React.Children.toArray(children).map((child, index) => React.isValidElement(child) ? (jsxRuntime.jsx("li", { children: child }, `chip-${index}`)) : null) }) }));
 });
 Group.displayName = 'ChipGroup';
 

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

@@ -2,17 +2,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
+var React = require('react');
 var Group = require('../Group/Group.js');
-var getSize = require('../../../utilities/getSize.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
-const RemovableChip = React.forwardRef(({ children, className, ...rest }, ref) => {
+const RemovableChip = React.forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
     const group = React.useContext(Group.ChipGroupContext);
-    const size = getSize.getSize(rest.size || 'md');
-    return (jsxRuntime.jsx("button", { type: 'button', ref: ref, className: lite.clsx(`fds-focus`, `fds-chip--button`, `fds-chip--removable`, `fds-chip--${group?.size || size}`, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxRuntime.jsxs("span", { className: `fds-chip__label`, children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("span", { className: `fds-chip__x-mark`, "aria-hidden": true, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { className: `fds-chip__icon` }) })] }) }) }));
+    return (jsxRuntime.jsx("button", { type: 'button', ref: ref, className: lite.clsx(`ds-focus`, `ds-chip--button`, `ds-chip--removable`, `ds-chip--${group?.size || size}`, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxRuntime.jsxs("span", { className: `ds-chip__label`, children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("span", { className: `ds-chip__x-mark`, "aria-hidden": true, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { className: `ds-chip__icon` }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

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

@@ -2,18 +2,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
+var React = require('react');
 var Group = require('../Group/Group.js');
-var getSize = require('../../../utilities/getSize.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
-const ToggleChip = React.forwardRef(({ children, selected = false, checkmark = true, className, ...rest }, ref) => {
+const ToggleChip = React.forwardRef(({ children, selected = false, checkmark = true, size = 'md', className, ...rest }, ref) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = React.useContext(Group.ChipGroupContext);
-    const size = getSize.getSize(rest.size || 'md');
-    return (jsxRuntime.jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: lite.clsx(`fds-focus`, `fds-chip--button`, `fds-chip--${group?.size || size}`, shouldDisplayCheckmark && `fds-chip--spacing`, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxRuntime.jsxs("span", { className: `fds-chip__label`, children: [shouldDisplayCheckmark && (jsxRuntime.jsx(akselIcons.CheckmarkIcon, { className: `fds-chip__checkmark-icon`, "aria-hidden": true })), jsxRuntime.jsx("span", { children: children })] }) }) }));
+    return (jsxRuntime.jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: lite.clsx(`ds-focus`, `ds-chip--button`, `ds-chip--${group?.size || size}`, shouldDisplayCheckmark && `ds-chip--spacing`, className), ...rest, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxRuntime.jsxs("span", { className: `ds-chip__label`, children: [shouldDisplayCheckmark && (jsxRuntime.jsx(akselIcons.CheckmarkIcon, { className: `ds-chip__checkmark-icon`, "aria-hidden": true })), jsxRuntime.jsx("span", { children: children })] }) }) }));
 });
 ToggleChip.displayName = 'ChipToggle';
 

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

@@ -6,7 +6,7 @@ var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
 
 const Divider = React.forwardRef(({ color = 'default', className, ...rest }, ref) => {
-    return (jsxRuntime.jsx("hr", { className: lite.clsx('fds-divider', `fds-divider--${color}`, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx("hr", { className: lite.clsx('ds-divider', `ds-divider--${color}`, className), ref: ref, ...rest }));
 });
 Divider.displayName = 'Divider';
 Divider.displayName = 'Divider';

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

@@ -2,13 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');
-var DropdownMenu = require('./DropdownMenu.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_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
-var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
+var useIsomorphicLayoutEffect = require('../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -31,7 +31,7 @@ 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(DropdownMenu.DropdownMenuContext);
+    const { size, placement, portal, anchorEl, isControlled, internalOpen, setInternalOpen, onClose, } = React.useContext(DropdownMenuRoot.DropdownMenuContext);
     const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;
     const floatingEl = React.useRef(null);
     const { context, update, refs, placement: flPlacement, floatingStyles, } = floatingUi_react.useFloating({
@@ -39,7 +39,7 @@ const DropdownMenuContent = React.forwardRef(({ className, children, ...rest },
         open: internalOpen,
         onOpenChange: (localOpen) => {
             if (!localOpen)
-                onClose && onClose();
+                onClose?.();
             if (!isControlled)
                 setInternalOpen(localOpen);
         },
@@ -67,7 +67,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('fds-dropdownmenu', `fds-dropdownmenu--${size}`, className), ...rest, children: children }) }) })) }));
+                    }), className: lite.clsx('ds-dropdownmenu', `ds-dropdownmenu--${size}`, className), ...rest, children: children }) }) })) }));
 });
 DropdownMenuContent.displayName = 'DropdownMenuContent';
 

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

@@ -3,13 +3,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var DropdownMenu = require('./DropdownMenu.js');
+var DropdownMenuRoot = require('./DropdownMenuRoot.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 const DropdownMenuGroup = React.forwardRef(({ children, heading, className, style, ...rest }, ref) => {
-    const { size } = React.useContext(DropdownMenu.DropdownMenuContext);
+    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: 'fds-dropdownmenu__section', ...rest, children: [heading && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("h2", { id: headingId, className: 'fds-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__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] }) }));
 });
 DropdownMenuGroup.displayName = 'DropdownMenuGroup';
 

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

@@ -3,12 +3,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var DropdownMenu = require('./DropdownMenu.js');
+var DropdownMenuRoot = require('./DropdownMenuRoot.js');
 var Button = require('../Button/Button.js');
 
 const DropdownMenuItem = React.forwardRef(({ children, className, style, ...rest }, ref) => {
-    const { size } = React.useContext(DropdownMenu.DropdownMenuContext);
-    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', size: size, fullWidth: true, className: 'fds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
+    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 }) }));
 });
 DropdownMenuItem.displayName = 'DropdownMenuItem';
 

package/dist/cjs/components/DropdownMenu/{DropdownMenu.js → DropdownMenuRoot.js}

@@ -3,10 +3,20 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var getSize = require('../../utilities/getSize.js');
 
-const DropdownMenu = ({ open, onClose, placement = 'bottom-end', portal, children, ...rest }) => {
-    const size = getSize.getSize(rest.size || 'md');
+/**
+ * DropdownMenuRoot is the root component for the DropdownMenu component.
+ * @example
+ * <DropdownMenu.Root>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu.Content>
+ *    <DropdownMenu.Group heading='Heading'>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.Group>
+ *  </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ */
+const DropdownMenuRoot = ({ open, onClose, placement = 'bottom-end', portal, size = 'md', children, }) => {
     const triggerRef = React.useRef(null);
     const [internalOpen, setInternalOpen] = React.useState(open ?? false);
     const anchorEl = triggerRef.current;
@@ -33,7 +43,7 @@ const DropdownMenuContext = React.createContext({
     internalOpen: false,
     setInternalOpen: () => { },
 });
-DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenuRoot.displayName = 'DropdownMenuRoot';
 
-exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuContext = DropdownMenuContext;
+exports.DropdownMenuRoot = DropdownMenuRoot;

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

@@ -2,14 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var DropdownMenu = require('./DropdownMenu.js');
+var React = require('react');
+var DropdownMenuRoot = require('./DropdownMenuRoot.js');
 var Button = require('../Button/Button.js');
 
 const DropdownMenuTrigger = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { triggerRef, internalOpen, setInternalOpen, isControlled } = React.useContext(DropdownMenu.DropdownMenuContext);
+    const { triggerRef, internalOpen, setInternalOpen, isControlled } = React.useContext(DropdownMenuRoot.DropdownMenuContext);
     const mergedRefs = floatingUi_react.useMergeRefs([ref, triggerRef]);
     const Component = asChild ? index.Slot : Button.Button;
     return (jsxRuntime.jsx(Component, { ref: mergedRefs, onClick: () => {

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

@@ -1,24 +1,38 @@
 'use client';
 'use strict';
 
-var DropdownMenu$1 = require('./DropdownMenu.js');
+var DropdownMenuContent = require('./DropdownMenuContent.js');
 var DropdownMenuGroup = require('./DropdownMenuGroup.js');
 var DropdownMenuItem = require('./DropdownMenuItem.js');
+var DropdownMenuRoot = require('./DropdownMenuRoot.js');
 var DropdownMenuTrigger = require('./DropdownMenuTrigger.js');
-var DropdownMenuContent = require('./DropdownMenuContent.js');
 
-const DropdownMenu = DropdownMenu$1.DropdownMenu;
+/**
+ * @example
+ * <DropdownMenu.Root>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu.Content>
+ *    <DropdownMenu.Group heading='Heading'>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.Group>
+ *  </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ */
+const DropdownMenu = {};
+DropdownMenu.Root = DropdownMenuRoot.DropdownMenuRoot;
 DropdownMenu.Content = DropdownMenuContent.DropdownMenuContent;
 DropdownMenu.Group = DropdownMenuGroup.DropdownMenuGroup;
 DropdownMenu.Item = DropdownMenuItem.DropdownMenuItem;
 DropdownMenu.Trigger = DropdownMenuTrigger.DropdownMenuTrigger;
+DropdownMenu.Root.displayName = 'DropdownMenu.Root';
 DropdownMenu.Content.displayName = 'DropdownMenu.Content';
 DropdownMenu.Group.displayName = 'DropdownMenu.Group';
 DropdownMenu.Item.displayName = 'DropdownMenu.Item';
 DropdownMenu.Trigger.displayName = 'DropdownMenu.Trigger';
 
+exports.DropdownMenuContent = DropdownMenuContent.DropdownMenuContent;
 exports.DropdownMenuGroup = DropdownMenuGroup.DropdownMenuGroup;
 exports.DropdownMenuItem = DropdownMenuItem.DropdownMenuItem;
+exports.DropdownMenuRoot = DropdownMenuRoot.DropdownMenuRoot;
 exports.DropdownMenuTrigger = DropdownMenuTrigger.DropdownMenuTrigger;
-exports.DropdownMenuContent = DropdownMenuContent.DropdownMenuContent;
 exports.DropdownMenu = DropdownMenu;

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

@@ -13,7 +13,7 @@ const ErrorSummaryHeading = ({ id, ...rest }) => {
             setHeadingId(id);
         }
     }, [headingId, id, setHeadingId]);
-    return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId }));
+    return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId, className: 'ds-error-summary__heading' }));
 };
 ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';