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

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,8 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var react = require('react');
+var ErrorSummary = require('./ErrorSummary.js');
 var Heading = require('../Typography/Heading/Heading.js');
 
 const HEADING_SIZE_MAP = {
@@ -11,14 +11,13 @@ const HEADING_SIZE_MAP = {
     md: 'xs',
     lg: 'sm',
 };
-const ErrorSummaryHeading = React.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
-    const { size, headingId, setHeadingId } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
-    React.useEffect(() => {
+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(Heading.Heading, { className: 'ds-error-summary__heading', id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], spacing: true, ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Heading.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,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var index = require('../List/index.js');
 var Link = require('../Link/Link.js');
 
-const ErrorSummaryItem = React.forwardRef(function ErrorSummaryItem({ href, asChild, children, ...rest }, ref) {
+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 }) }));
 });
 

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

@@ -2,12 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var index = require('../List/index.js');
-var ErrorSummaryRoot = require('./ErrorSummaryRoot.js');
+var ErrorSummary = require('./ErrorSummary.js');
 
-const ErrorSummaryList = React.forwardRef(function ErrorSummaryList({ ...rest }, ref) {
-    const { size } = React.useContext(ErrorSummaryRoot.ErrorSummaryContext);
+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 });
 });
 

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

@@ -1,26 +1,25 @@
 '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.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';
@@ -28,5 +27,4 @@ ErrorSummary.List.displayName = 'ErrorSummary.List';
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;
-exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
 exports.ErrorSummary = ErrorSummary;

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

@@ -2,18 +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 = React.forwardRef(function HelpText({ title, placement = 'right', size = 'md', className, children, ...rest }, ref) {
-    const [open, setOpen] = React.useState(false);
-    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 }) })] }));
+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(({ asChild, className, color = 'accent', ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'a';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-link', className), "data-color": color, ref: ref, ...rest }));
+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,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const ListItem = React.forwardRef(function ListItem({ asChild, ...rest }, ref) {
-    const Component = asChild ? index.Slot : 'li';
+const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
 

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

@@ -2,19 +2,19 @@
 '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');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 const render = (tagName, { asChild, className, size = 'md', ...rest }, ref) => {
-    const Component = asChild ? index.Slot : tagName;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.clsx(`ds-list`, className), "data-size": size, ref: ref, ...rest }) }));
+    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) {
+const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
 });
-const ListOrdered = React.forwardRef(function ListOrdered(props, ref) {
+const ListOrdered = react.forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);
 });
 

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';
 

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

@@ -2,19 +2,18 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var akselIcons = require('@navikt/aksel-icons');
-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');
+var Button = require('../Button/Button.js');
 var ModalRoot = require('./ModalRoot.js');
 var Heading = require('../Typography/Heading/Heading.js');
-var Button = require('../Button/Button.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-const ModalHeader = React.forwardRef(({ closeButton = true, closeButtonTitle = 'close modal', children, subtitle, asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'div';
-    const { closeModal } = React.useContext(ModalRoot.ModalContext);
-    return (jsxRuntime.jsxs(Component, { ref: ref, className: lite.clsx('ds-modal__header', !closeButton && 'ds-modal__header--no-button', className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: () => closeModal?.(), autoFocus: true, icon: true, className: 'ds-modal__header__button', title: closeButtonTitle, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { title: closeButtonTitle, fontSize: '1.5em' }) }))] }));
+const ModalHeader = react.forwardRef(({ closeButton = true, closeButtonTitle = 'close modal', children, subtitle, asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const { closeModal } = react.useContext(ModalRoot.ModalContext);
+    return (jsxRuntime.jsxs(Component, { ref: ref, className: cl('ds-modal__header', className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: () => closeModal?.(), autoFocus: true, icon: true, className: 'ds-modal__header__button', title: closeButtonTitle }))] }));
 });
 ModalHeader.displayName = 'ModalHeader';
 

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

@@ -2,19 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 
-const ModalContext = React.createContext({
+const ModalContext = react.createContext({
     setCloseModal: () => { },
     modalRef: { current: null },
     open: false,
     setOpen: () => { },
 });
 const ModalRoot = ({ children }) => {
-    const modalRef = React.useRef(null);
-    const [open, setOpen] = React.useState(false);
-    const [closeModal, setCloseModal] = React.useState();
-    const setCloseModalInContext = React.useCallback((fn) => {
+    const modalRef = react.useRef(null);
+    const [open, setOpen] = react.useState(false);
+    const [closeModal, setCloseModal] = react.useState();
+    const setCloseModalInContext = react.useCallback((fn) => {
         setCloseModal(() => fn);
     }, []);
     return (jsxRuntime.jsx(ModalContext.Provider, { value: {

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

@@ -2,14 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
-var ModalRoot = require('./ModalRoot.js');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 var Button = require('../Button/Button.js');
+var ModalRoot = require('./ModalRoot.js');
 
-const ModalTrigger = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { modalRef, open } = React.useContext(ModalRoot.ModalContext);
-    const Component = asChild ? index.Slot : Button.Button;
+const ModalTrigger = react.forwardRef(({ asChild, ...rest }, ref) => {
+    const { modalRef, open } = react.useContext(ModalRoot.ModalContext);
+    const Component = asChild ? reactSlot.Slot : Button.Button;
     return (jsxRuntime.jsx(Component, { ref: ref, onClick: () => modalRef?.current?.showModal(), "aria-expanded": open, "aria-haspopup": 'dialog', ...rest }));
 });
 ModalTrigger.displayName = 'ModalTrigger';

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

@@ -1,11 +1,11 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 const useModalState = (modalRef) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    React.useEffect(() => {
+    const [isOpen, setIsOpen] = react.useState(false);
+    react.useEffect(() => {
         if (!modalRef?.current)
             return;
         if (modalRef.current?.open)

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

@@ -1,10 +1,10 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 function useScrollLock(modalRef, bodyClass) {
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (!modalRef.current)
             return;
         if (modalRef.current.open)

package/dist/cjs/components/Pagination/Pagination.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var PaginationButton = require('./PaginationButton.js');
 var PaginationEllipsis = require('./PaginationEllipsis.js');
 var PaginationItem = require('./PaginationItem.js');
@@ -11,7 +11,7 @@ var PaginationNextPrev = require('./PaginationNextPrev.js');
 var PaginationRoot = require('./PaginationRoot.js');
 var usePagination = require('./usePagination.js');
 
-const Pagination = React.forwardRef(function Pagination({ nextLabel = '', previousLabel = '', compact = false, hideLabels = false, currentPage = 1, totalPages, size = 'md', onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) {
+const Pagination = react.forwardRef(function Pagination({ nextLabel = '', previousLabel = '', compact = false, hideLabels = false, currentPage = 1, totalPages, size = 'md', onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) {
     const { pages, showNextPage, showPreviousPage } = usePagination.usePagination({
         compact,
         currentPage,

package/dist/cjs/components/Pagination/PaginationButton.js

@@ -2,12 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var PaginationRoot = require('./PaginationRoot.js');
+var react = require('react');
 var Button = require('../Button/Button.js');
+var PaginationRoot = require('./PaginationRoot.js');
 
-const PaginationButton = React.forwardRef(function PaginationButton({ isActive, ...rest }, ref) {
-    const { size } = React.useContext(PaginationRoot.PaginationContext);
+const PaginationButton = react.forwardRef(function PaginationButton({ isActive, ...rest }, ref) {
+    const { size } = react.useContext(PaginationRoot.PaginationContext);
     return (jsxRuntime.jsx(Button.Button, { "aria-current": isActive, ref: ref, size: size, variant: isActive ? 'primary' : 'tertiary', ...rest }));
 });
 

package/dist/cjs/components/Pagination/PaginationEllipsis.js

@@ -2,14 +2,14 @@
 '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 PaginationRoot = require('./PaginationRoot.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-const PaginationEllipsis = React.forwardRef(function PaginationEllipsis({ className, ...rest }, ref) {
-    const { size } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, className: lite.clsx('ds-pagination__ellipsis', className), size: size, ...rest, children: "\u2026" }));
+const PaginationEllipsis = react.forwardRef(function PaginationEllipsis({ className, ...rest }, ref) {
+    const { size } = react.useContext(PaginationRoot.PaginationContext);
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, className: cl('ds-pagination__ellipsis', className), size: size, ...rest, children: "\u2026" }));
 });
 
 exports.PaginationEllipsis = PaginationEllipsis;

package/dist/cjs/components/Pagination/PaginationItem.js

@@ -2,15 +2,15 @@
 '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');
 var PaginationRoot = require('./PaginationRoot.js');
 
-const PaginationItem = React.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
-    const Component = asChild ? index.Slot : 'li';
-    const { size, compact } = React.useContext(PaginationRoot.PaginationContext);
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
+const PaginationItem = react.forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    const { size, compact } = react.useContext(PaginationRoot.PaginationContext);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
 });
 
 exports.PaginationItem = PaginationItem;