@digdir/designsystemet-react 1.0.0-next.32 → 1.0.0-next.34

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

@@ -3,14 +3,14 @@
 
 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 cl = require('clsx/lite');
+var react = require('react');
 var Group = require('../Group/Group.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
-const RemovableChip = React.forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
-    const group = React.useContext(Group.ChipGroupContext);
-    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` }) })] }) }) }));
+const RemovableChip = react.forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
+    const group = react.useContext(Group.ChipGroupContext);
+    return (jsxRuntime.jsx("button", { type: 'button', ref: ref, className: cl(`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

@@ -3,15 +3,15 @@
 
 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 cl = require('clsx/lite');
+var react = require('react');
 var Group = require('../Group/Group.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 
-const ToggleChip = React.forwardRef(({ children, selected = false, checkmark = true, size = 'md', 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);
-    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 })] }) }) }));
+    const group = react.useContext(Group.ChipGroupContext);
+    return (jsxRuntime.jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: cl(`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

@@ -2,12 +2,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+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: cl('ds-divider', className), ref: ref, ...rest }));
+});
 
 exports.Divider = Divider;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var index = require('../Popover/index.js');
+
+const Dropdown = react.forwardRef(function DropddownMenuContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    const [size, setSize] = react.useState(rest.size || 'md');
+    react.useEffect(() => {
+        setSize(rest.size || 'md');
+    }, [rest.size]);
+    return (jsxRuntime.jsx(DropdownCtx.Provider, { value: {
+            size,
+        }, children: jsxRuntime.jsx(index.Popover, { ref: ref, placement: placement, size: size, className: cl('ds-dropdown', className), ...rest }) }));
+});
+const DropdownCtx = react.createContext({
+    size: 'md',
+});
+
+exports.Dropdown = Dropdown;
+exports.DropdownCtx = DropdownCtx;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../Popover/index.js');
+var PopoverContext = require('../Popover/PopoverContext.js');
+
+/**
+ * DropdownContext is the root component for the DropdownMenu component.
+ * @example
+ * <DropdownMenu.Context>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu>
+ *   <DropdownMenu.Heading>Heading</DropdownMenu.Heading>
+ *    <DropdownMenu.List>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.List>
+ *  </DropdownMenu>
+ * </DropdownMenu.Context>
+ */
+const DropdownContext = ({ children }) => {
+    return jsxRuntime.jsx(PopoverContext.PopoverContext, { children: children });
+};
+DropdownContext.displayName = 'DropdownContext';
+
+exports.DropdownContext = DropdownContext;

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

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var Dropdown = require('./Dropdown.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+
+const DropdownHeading = react.forwardRef(function DropdownHeading({ children, className, ...rest }, ref) {
+    const { size } = react.useContext(Dropdown.DropdownCtx);
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("h2", { ref: ref, className: cl('ds-dropdown__heading', className), ...rest, children: children }) }));
+});
+
+exports.DropdownHeading = DropdownHeading;

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

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../Button/Button.js');
+var Dropdown = require('./Dropdown.js');
+
+const DropdownItem = react.forwardRef(function DropdownItem({ className, style, ...rest }, ref) {
+    const { size } = react.useContext(Dropdown.DropdownCtx);
+    return (jsxRuntime.jsx("li", { className: className, style: style, children: jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', size: size, className: 'ds-dropdown__item', ...rest }) }));
+});
+
+exports.DropdownItem = DropdownItem;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const DropdownList = react.forwardRef(function DropdownList({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("ul", { ref: ref, className: cl('ds-dropdown__list', className), ...rest }));
+});
+
+exports.DropdownList = DropdownList;

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

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../Popover/index.js');
+var PopoverTrigger = require('../Popover/PopoverTrigger.js');
+
+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/index.js

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var Dropdown$1 = require('./Dropdown.js');
+var DropdownContext = require('./DropdownContext.js');
+var DropdownHeading = require('./DropdownHeading.js');
+var DropdownItem = require('./DropdownItem.js');
+var DropdownList = require('./DropdownList.js');
+var DropdownTrigger = require('./DropdownTrigger.js');
+
+/**
+ * @example
+ * <Dropdown.Context>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *    <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.Context>
+ */
+const Dropdown = Object.assign(Dropdown$1.Dropdown, {
+    Context: DropdownContext.DropdownContext,
+    Heading: DropdownHeading.DropdownHeading,
+    List: DropdownList.DropdownList,
+    Item: DropdownItem.DropdownItem,
+    Trigger: DropdownTrigger.DropdownTrigger,
+});
+Dropdown.Context.displayName = 'Dropdown.Context';
+Dropdown.List.displayName = 'Dropdown.List';
+Dropdown.Heading.displayName = 'Dropdown.Heading';
+Dropdown.Item.displayName = 'Dropdown.Item';
+Dropdown.Trigger.displayName = 'Dropdown.Trigger';
+
+exports.DropdownContext = DropdownContext.DropdownContext;
+exports.DropdownHeading = DropdownHeading.DropdownHeading;
+exports.DropdownItem = DropdownItem.DropdownItem;
+exports.DropdownList = DropdownList.DropdownList;
+exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
+exports.Dropdown = Dropdown;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const ErrorSummaryContext = react.createContext({
+    size: 'md',
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ErrorSummary = react.forwardRef(function ErrorSummary({ 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: { size, headingId, setHeadingId }, children: jsxRuntime.jsx("div", { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+});
+
+exports.ErrorSummary = ErrorSummary;
+exports.ErrorSummaryContext = ErrorSummaryContext;

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

@@ -2,19 +2,22 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../List/index.js');
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var react = require('react');
+var ErrorSummary = require('./ErrorSummary.js');
+var Heading = require('../Typography/Heading/Heading.js');
 
-const ErrorSummaryHeading = ({ id, ...rest }) => {
-    const { headingId, setHeadingId } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
-    React.useEffect(() => {
-        if (id && headingId !== id) {
+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(ErrorSummary.ErrorSummaryContext);
+    react.useEffect(() => {
+        if (id && headingId !== id)
             setHeadingId(id);
-        }
     }, [headingId, id, setHeadingId]);
-    return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId, className: 'ds-error-summary__heading' }));
-};
-ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
+    return (jsxRuntime.jsx(Heading.Heading, { id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
+});
 
 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 ErrorSummary = require('./ErrorSummary.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(ErrorSummary.ErrorSummaryContext);
+    return jsxRuntime.jsx(index.List.Unordered, { size: size, ...rest, ref: ref });
+});
 
-module.exports = ErrorSummaryList;
+exports.ErrorSummaryList = ErrorSummaryList;

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

@@ -1,32 +1,30 @@
 'use client';
 'use strict';
 
+var ErrorSummary$1 = require('./ErrorSummary.js');
 var ErrorSummaryHeading = require('./ErrorSummaryHeading.js');
 var ErrorSummaryItem = require('./ErrorSummaryItem.js');
 var ErrorSummaryList = require('./ErrorSummaryList.js');
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
 
 /**
  * @example
- * <ErrorSummary.Root>
+ * <ErrorSummary>
  *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
  *  <ErrorSummary.List>
  *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
  *  </ErrorSummary.List>
- * </ErrorSummary.Root>
+ * </ErrorSummary>
  */
-const ErrorSummary = {};
-ErrorSummary.Root = ErrorSummaryRoot.ErrorSummaryRoot;
-ErrorSummary.Item = ErrorSummaryItem.ErrorSummaryItem;
-ErrorSummary.Heading = ErrorSummaryHeading.ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList;
-ErrorSummary.Root.displayName = 'ErrorSummary.Root';
+const ErrorSummary = Object.assign(ErrorSummary$1.ErrorSummary, {
+    Heading: ErrorSummaryHeading.ErrorSummaryHeading,
+    Item: ErrorSummaryItem.ErrorSummaryItem,
+    List: ErrorSummaryList.ErrorSummaryList,
+});
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
-exports.ErrorSummaryList = ErrorSummaryList;
-exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
+exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
 exports.ErrorSummary = ErrorSummary;

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

@@ -2,16 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 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 [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 HelpText = react.forwardRef(function HelpText({ placement = 'right', size = 'md', className, children, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Popover.Context, { children: [jsxRuntime.jsx(index.Popover.Trigger, { className: cl('ds-helptext', className), ref: ref, size: size, variant: 'tertiary', ...rest }), jsxRuntime.jsx(index.Popover, { placement: placement, size: size, variant: 'info', children: children })] }));
+});
 
 exports.HelpText = HelpText;

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

@@ -2,13 +2,13 @@
 '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 reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Link = React.forwardRef(({ color = 'accent', asChild, children, className, ...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 }));
+const Link = react.forwardRef(({ asChild, className, color = 'accent', ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'a';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), "data-color": color, ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

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

@@ -2,14 +2,12 @@
 '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 reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const ListItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'li';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-list__item', className), ...rest, ref: ref }));
+const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
-ListItem.displayName = 'ListItem';
 
 exports.ListItem = ListItem;

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

@@ -2,24 +2,21 @@
 '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 ListRoot = require('./ListRoot.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-const Unordered = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const { size, headingId } = React.useContext(ListRoot.ListContext);
-    const Component = asChild ? index.Slot : 'ul';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-list`, `ds-list--${size}`, className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+const render = (tagName, { asChild, className, size = 'md', ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : tagName;
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), "data-size": size, ref: ref, ...rest }) }));
+};
+const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
 });
-Unordered.displayName = 'ListUnordered';
-const Ordered = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const { size, headingId } = React.useContext(ListRoot.ListContext);
-    const Component = asChild ? index.Slot : 'ol';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-list`, `ds-list--${size}`, className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
 });
-Ordered.displayName = 'ListOrdered';
 
-exports.Ordered = Ordered;
-exports.Unordered = Unordered;
+exports.ListOrdered = ListOrdered;
+exports.ListUnordered = ListUnordered;

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

@@ -1,26 +1,19 @@
 'use client';
 'use strict';
 
-var ListHeading = require('./ListHeading.js');
 var ListItem = require('./ListItem.js');
-var ListRoot = require('./ListRoot.js');
 var Lists = require('./Lists.js');
 
-const List = {};
-List.Root = ListRoot.ListRoot;
-List.Item = ListItem.ListItem;
-List.Heading = ListHeading.ListHeading;
-List.Ordered = Lists.Ordered;
-List.Unordered = Lists.Unordered;
-List.Root.displayName = 'List.Root';
+const List = {
+    Item: ListItem.ListItem,
+    Ordered: Lists.ListOrdered,
+    Unordered: Lists.ListUnordered,
+};
 List.Item.displayName = 'List.Item';
-List.Heading.displayName = 'List.Heading';
 List.Ordered.displayName = 'List.Ordered';
 List.Unordered.displayName = 'List.Unordered';
 
-exports.ListHeading = ListHeading.ListHeading;
 exports.ListItem = ListItem.ListItem;
-exports.ListRoot = ListRoot.ListRoot;
-exports.ListOrdered = Lists.Ordered;
-exports.ListUnordered = Lists.Unordered;
+exports.ListOrdered = Lists.ListOrdered;
+exports.ListUnordered = Lists.ListUnordered;
 exports.List = List;

package/dist/cjs/components/Modal/ModaContent.js

@@ -2,13 +2,13 @@
 '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 reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const ModalContent = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-modal__content', className), ...rest }));
+const ModalContent = react.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl('ds-modal__content', className), ...rest }));
 });
 ModalContent.displayName = 'ModalContent';
 

package/dist/cjs/components/Modal/ModalDialog.js

@@ -2,33 +2,33 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-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 lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 var ModalRoot = require('./ModalRoot.js');
 var useModalState = require('./useModalState.js');
 var useScrollLock = require('./useScrollLock.js');
 
-const ModalDialog = React.forwardRef(({ onInteractOutside, onClose, onBeforeClose, asChild, className, children, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'dialog';
+const ModalDialog = react.forwardRef(({ onInteractOutside, onClose, onBeforeClose, asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'dialog';
     // This local ref is used to make sure the modal works without a ModalRoot
-    const modalDialogRef = React.useRef(null);
-    const { modalRef, setOpen, setCloseModal } = React.useContext(ModalRoot.ModalContext);
+    const modalDialogRef = react.useRef(null);
+    const { modalRef, setOpen, setCloseModal } = react.useContext(ModalRoot.ModalContext);
     const open = useModalState.useModalState(modalDialogRef);
-    React.useEffect(() => {
+    react.useEffect(() => {
         setCloseModal?.(() => {
             if (onBeforeClose && onBeforeClose() === false)
                 return;
             modalDialogRef.current?.close();
         });
     }, [onBeforeClose, setCloseModal]);
-    const mergedRefs = floatingUi_react.useMergeRefs([modalRef, ref, modalDialogRef]);
+    const mergedRefs = react$1.useMergeRefs([modalRef, ref, modalDialogRef]);
     useScrollLock.useScrollLock(modalDialogRef, 'ds-modal--lock-scroll');
-    React.useEffect(() => {
+    react.useEffect(() => {
         setOpen(open);
     }, [open, setOpen]);
-    React.useEffect(() => {
+    react.useEffect(() => {
         const modalEl = modalRef.current;
         const handleBackdropClick = (e) => {
             if (e.target === modalEl && onInteractOutside) {
@@ -46,7 +46,7 @@ const ModalDialog = React.forwardRef(({ onInteractOutside, onClose, onBeforeClos
             }
         };
     }, [onInteractOutside, modalRef, onBeforeClose, ref]);
-    React.useEffect(() => {
+    react.useEffect(() => {
         const modalEl = modalRef.current;
         const handleModalClose = () => {
             onClose?.();
@@ -66,7 +66,7 @@ const ModalDialog = React.forwardRef(({ onInteractOutside, onClose, onBeforeClos
         }
         modalRef.current?.close();
     };
-    return (jsxRuntime.jsx(Component, { ref: mergedRefs, className: lite.clsx('ds-modal', className), onCancel: onCancel, ...rest, children: children }));
+    return (jsxRuntime.jsx(Component, { ref: mergedRefs, className: cl('ds-modal', className), onCancel: onCancel, ...rest, children: children }));
 });
 ModalDialog.displayName = 'ModalDialog';
 

package/dist/cjs/components/Modal/ModalFooter.js

@@ -2,13 +2,13 @@
 '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 reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const ModalFooter = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'footer';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-modal__footer', className), ...rest }));
+const ModalFooter = react.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'footer';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl('ds-modal__footer', className), ...rest }));
 });
 ModalFooter.displayName = 'ModalFooter';