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

package/dist/cjs/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -1,9 +1,9 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 // https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/cjs/utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 
 // Inspired by Sam Selikoff
@@ -19,7 +19,7 @@ var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorp
  * ```
  */
 function useSynchronizedAnimation(animationName) {
-    const ref = React.useRef(null);
+    const ref = react.useRef(null);
     useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         const animations = document
             .getAnimations()

package/dist/esm/components/Accordion/Accordion.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
  * Accordion component, contains `Accordion.Item` components.
  */
 const Accordion = forwardRef(function Accordion({ border = false, color = 'neutral', className, ...rest }, ref) {
-    return (jsx("div", { className: clsx('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
+    return (jsx("div", { className: cl('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
 });
 
 export { Accordion };

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
@@ -10,7 +10,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <AccordionHeader>Header</AccordionHeader>
  */
 const AccordionHeading = forwardRef(function AccordionHeading({ className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("u-summary", { class: clsx('ds-focus ds-paragraph ds-paragraph--sm ds-line-height--md', // Very TMP fix awaiting CSS modules
+    return (jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("u-summary", { class: cl('ds-focus ds-paragraph ds-paragraph--sm ds-line-height--md', // Very TMP fix awaiting CSS modules
             className), ref: ref, ...rest }) }));
 });
 

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { useMergeRefs } from '@floating-ui/react';
+import cl from 'clsx/lite';
 import { forwardRef, useState, useRef, useEffect } from 'react';
-import '../../node_modules/@u-elements/u-details/dist/u-details.js';
+import '@u-elements/u-details';
 
 /**
  * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
@@ -47,7 +47,7 @@ const AccordionItem = forwardRef(function AccordionItem({ className, open, defau
     useEffect(() => {
         animateHeight(detailsRef.current, controlledOpen.current);
     }, [controlledOpen.current]);
-    return (jsx("u-details", { class: clsx('ds-accordion__item', className), open: initialOpen.current || undefined, ref: mergedRefs, ...rest }));
+    return (jsx("u-details", { class: cl('ds-accordion__item', className), open: initialOpen.current || undefined, ref: mergedRefs, ...rest }));
 });
 const animateHeight = (details, open) => {
     const content = details?.querySelector(':scope > :not(summary, u-summary)');

package/dist/esm/components/Alert/Alert.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
@@ -10,7 +10,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
 const Alert = forwardRef(function Alert({ color = 'info', size = 'md', className, ...rest }, ref) {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { className: clsx('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { className: cl('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
 });
 
 export { Alert };

package/dist/esm/components/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef, Fragment } from 'react';
 
 const fontSizeMap = {
@@ -28,7 +28,7 @@ const fontSizeMap = {
  */
 const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, color = 'accent', size = 'md', variant = 'circle', className, children, ...rest }, ref) {
     const Component = children && typeof children !== 'string' ? Slot : Fragment;
-    return (jsx("span", { ref: ref, className: clsx('ds-avatar', fontSizeMap[size], className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
+    return (jsx("span", { ref: ref, className: cl('ds-avatar', fontSizeMap[size], className), "data-variant": variant, "data-color": color, "data-size": size, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
 });
 
 export { Avatar };

package/dist/esm/components/Badge/Badge.js

@@ -1,6 +1,6 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
@@ -24,14 +24,8 @@ const paragraphSizeMap = {
  * </Badge>
  * ```
  */
-const Badge = forwardRef(({ color = 'accent', size = 'md', placement = 'top-right', overlap = 'rectangle', count, maxCount, children, className, ...rest }, ref) => {
-    return (jsxs("div", { className: clsx('ds-badge__wrapper', className), children: [children, jsx(Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsx("span", { className: clsx('ds-badge', count && 'ds-badge--count'), ref: ref, "data-size": size, "data-color": color, ...(children
-                        ? {
-                            'data-placement': placement,
-                            'data-overlap': overlap,
-                        }
-                        : {}), ...rest, children: maxCount && count && count > maxCount ? `${maxCount}+` : count }) })] }));
+const Badge = forwardRef(function Badge({ className, color = 'accent', count, maxCount, overlap = 'rectangle', placement = 'top-right', size = 'md', ...rest }, ref) {
+    return (jsx(Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsx("span", { className: cl('ds-badge', className), "data-color": color, "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, "data-size": size, ref: ref, ...rest }) }));
 });
-Badge.displayName = 'Badge';
 
 export { Badge };

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const Breadcrumbs = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, ref) => (jsx(Paragraph, { asChild: true, size: size, children: jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), "data-size": size, ref: ref, ...rest }) })));
+
+export { Breadcrumbs };

package/dist/esm/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
-const BreadcrumbsItem = forwardRef(({ className, ...rest }, ref) => (jsx("li", { ref: ref, className: clsx('ds-breadcrumbs__item', className), ...rest })));
-BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+const BreadcrumbsItem = forwardRef(function BreadcrumbsItem({ className, ...rest }, ref) {
+    return jsx("li", { ref: ref, ...rest });
+});
 
 export { BreadcrumbsItem };

package/dist/esm/components/Breadcrumbs/BreadcrumbsLink.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 import { Link } from '../Link/Link.js';
 
-const BreadcrumbsLink = forwardRef(({ className, ...rest }, ref) => (jsx(Link, { className: clsx(`ds-breadcrumbs__link`, className), ref: ref, ...rest })));
-BreadcrumbsLink.displayName = 'BreadcrumbsLink';
+const BreadcrumbsLink = forwardRef(function BreadcrumbsLink(rest, ref) {
+    return jsx(Link, { ref: ref, ...rest });
+});
 
 export { BreadcrumbsLink };

package/dist/esm/components/Breadcrumbs/BreadcrumbsList.js

@@ -1,21 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { useMergeRefs } from '@floating-ui/react';
 import { forwardRef, useRef, useEffect } from 'react';
 
-const BreadcrumbsList = forwardRef(({ className, ...rest }, ref) => {
+const BreadcrumbsList = forwardRef(function BreadcrumbsList(rest, ref) {
     const innerRef = useRef(null);
     const mergedRefs = useMergeRefs([innerRef, ref]);
     // Set aria-current on last link
     useEffect(() => {
-        const links = innerRef.current?.querySelectorAll('a') || [];
+        const links = innerRef.current?.querySelectorAll(':scope > * > *') || [];
         const lastLink = links[links?.length - 1];
         lastLink?.setAttribute('aria-current', 'page');
         return () => lastLink?.removeAttribute('aria-current'); // Remove on re-render as React can re-use DOM elements
     });
-    return (jsx("ol", { className: clsx('ds-breadcrumbs__list', className), ref: mergedRefs, ...rest }));
+    return jsx("ol", { ref: mergedRefs, ...rest });
 });
-BreadcrumbsList.displayName = 'BreadcrumbsList';
 
 export { BreadcrumbsList };

package/dist/esm/components/Breadcrumbs/index.js

@@ -1,36 +1,29 @@
 'use client';
+import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.js';
 import { BreadcrumbsItem } from './BreadcrumbsItem.js';
 import { BreadcrumbsLink } from './BreadcrumbsLink.js';
 import { BreadcrumbsList } from './BreadcrumbsList.js';
-import { BreadcrumbsNav } from './BreadcrumbsNav.js';
-import { BreadcrumbsRoot } from './BreadcrumbsRoot.js';
 
 /**
  * Breadcrumbs are used to visualize the current page path.
  * @example
- * <Breadcrumbs.Root>
+ * <Breadcrumbs aria-label="You are here:">
  *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
- *  <Breadcrumbs.Nav aria-label="You are here:">
- *   <Breadcrumbs.List>
- *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
- *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
- *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
- *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
- *   </Breadcrumbs.List>
- *  </Breadcrumbs.Nav>
- * <Breadcrumbs.Root>
+ *  <Breadcrumbs.List>
+ *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
+ *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
+ *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
+ *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * <Breadcrumbs>
  */
-const Breadcrumbs = {
-    Root: BreadcrumbsRoot,
-    Nav: BreadcrumbsNav,
+const Breadcrumbs = Object.assign(Breadcrumbs$1, {
     List: BreadcrumbsList,
     Item: BreadcrumbsItem,
     Link: BreadcrumbsLink,
-};
-Breadcrumbs.Root.displayName = 'Breadcrumbs.Root';
-Breadcrumbs.Nav.displayName = 'Breadcrumbs.Nav';
+});
 Breadcrumbs.List.displayName = 'Breadcrumbs.List';
 Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
 Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
 
-export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList, BreadcrumbsNav, BreadcrumbsRoot };
+export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList };

package/dist/esm/components/Button/Button.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Slottable, Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slottable, Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 import { Spinner } from '../loaders/Spinner/Spinner.js';
@@ -11,11 +11,11 @@ import { Spinner } from '../loaders/Spinner/Spinner.js';
  * @example
  * <Button>Click me</Button>
  */
-const Button = forwardRef(function Button({ asChild, className, children, color = 'accent', icon = false, loading = false, size = 'md', type = 'button', variant = 'primary', ...rest }, ref) {
+const Button = forwardRef(function Button({ asChild, className, children, color = 'accent', icon = false, loading = false, size = 'md', variant = 'primary', ...rest }, ref) {
     const Component = asChild ? Slot : 'button';
     const spinnerColor = color === 'accent' ? color : 'neutral';
     // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsx(Paragraph, { variant: 'short', size: size, asChild: true, children: jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: clsx('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "data-variant": variant, ref: ref, type: type, ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
+    return (jsx(Paragraph, { variant: 'short', size: size, asChild: true, children: jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-color": color, "data-icon": icon || undefined, "data-size": size, "data-variant": variant, ref: ref, ...(asChild ? { asChild: true } : { type: 'button' }), ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
                 ), jsx(Slottable, { children: children })] }) }));
 });
 

package/dist/esm/components/Card/Card.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
@@ -15,7 +15,7 @@ import { forwardRef } from 'react';
  */
 const Card = forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { ref: ref, className: clsx(`ds-card`, isLink && `ds-focus`, className), "data-color": color, "data-link": isLink ? '' : undefined, ...rest }));
+    return (jsx(Component, { ref: ref, className: cl(`ds-card`, isLink && `ds-focus`, className), "data-color": color, "data-link": isLink ? '' : undefined, ...rest }));
 });
 Card.displayName = 'Card';
 

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const CardContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__content`, className), ref: ref, ...rest }) }));
+    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: cl(`ds-card__content`, className), ref: ref, ...rest }) }));
 });
 CardContent.displayName = 'CardContent';
 

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const CardFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__footer`, className), ref: ref, ...rest }) }));
+    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: cl(`ds-card__footer`, className), ref: ref, ...rest }) }));
 });
 CardFooter.displayName = 'CardFooter';
 

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { Heading } from '../Typography/Heading/Heading.js';
 
 const CardHeader = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Heading, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__header`, className), ref: ref, ...rest }) }));
+    return (jsx(Heading, { size: 'md', asChild: true, children: jsx(Component, { className: cl(`ds-card__header`, className), ref: ref, ...rest }) }));
 });
 CardHeader.displayName = 'CardHeader';
 

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const CardMedia = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'div';
-    return (jsx(Component, { className: clsx(`ds-card__media`, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: cl(`ds-card__media`, className), ref: ref, ...rest }));
 });
 CardMedia.displayName = 'CardMedia';
 

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { createContext, forwardRef, Children, isValidElement } from 'react';
 
 const ChipGroupContext = createContext(null);
 const Group = forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
-    return (jsx("ul", { ref: ref, className: clsx(`ds-chip--group-container`, `ds-chip--${size}`, className), ...rest, children: jsx(ChipGroupContext.Provider, { value: { size }, children: Children.toArray(children).map((child, index) => isValidElement(child) ? (jsx("li", { children: child }, `chip-${index}`)) : null) }) }));
+    return (jsx("ul", { ref: ref, className: cl(`ds-chip--group-container`, `ds-chip--${size}`, className), ...rest, children: jsx(ChipGroupContext.Provider, { value: { size }, children: Children.toArray(children).map((child, index) => isValidElement(child) ? (jsx("li", { children: child }, `chip-${index}`)) : null) }) }));
 });
 Group.displayName = 'ChipGroup';
 

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { XMarkIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { ChipGroupContext } from '../Group/Group.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const RemovableChip = forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { type: 'button', ref: ref, className: clsx(`ds-focus`, `ds-chip--button`, `ds-chip--removable`, `ds-chip--${group?.size || size}`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `ds-chip__label`, children: [jsx("span", { children: children }), jsx("span", { className: `ds-chip__x-mark`, "aria-hidden": true, children: jsx(XMarkIcon, { className: `ds-chip__icon` }) })] }) }) }));
+    return (jsx("button", { type: 'button', ref: ref, className: cl(`ds-focus`, `ds-chip--button`, `ds-chip--removable`, `ds-chip--${group?.size || size}`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `ds-chip__label`, children: [jsx("span", { children: children }), jsx("span", { className: `ds-chip__x-mark`, "aria-hidden": true, children: jsx(XMarkIcon, { className: `ds-chip__icon` }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { CheckmarkIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import { ChipGroupContext } from '../Group/Group.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
@@ -9,7 +9,7 @@ import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 const ToggleChip = forwardRef(({ children, selected = false, checkmark = true, size = 'md', className, ...rest }, ref) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(`ds-focus`, `ds-chip--button`, `ds-chip--${group?.size || size}`, shouldDisplayCheckmark && `ds-chip--spacing`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `ds-chip__label`, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: `ds-chip__checkmark-icon`, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
+    return (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: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `ds-chip__label`, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: `ds-chip__checkmark-icon`, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
 });
 ToggleChip.displayName = 'ChipToggle';
 

package/dist/esm/components/Divider/Divider.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 const Divider = forwardRef(function Divider({ className, ...rest }, ref) {
     return (
     // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <hr> is not foucsable but biome thinks it is
-    jsx("hr", { "aria-hidden": 'true', className: clsx('ds-divider', className), ref: ref, ...rest }));
+    jsx("hr", { "aria-hidden": 'true', className: cl('ds-divider', className), ref: ref, ...rest }));
 });
 
 export { Divider };

package/dist/esm/components/Dropdown/Dropdown.js

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

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import '../Popover/index.js';
+import { PopoverContext } from '../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 jsx(PopoverContext, { children: children });
+};
+DropdownContext.displayName = 'DropdownContext';
+
+export { DropdownContext };

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

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

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

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

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const DropdownList = forwardRef(function DropdownList({ className, ...rest }, ref) {
+    return (jsx("ul", { ref: ref, className: cl('ds-dropdown__list', className), ...rest }));
+});
+
+export { DropdownList };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../Popover/index.js';
+import { PopoverTrigger } from '../Popover/PopoverTrigger.js';
+
+const DropdownTrigger = forwardRef(function DropdownTrigger({ asChild, ...rest }, ref) {
+    return jsx(PopoverTrigger, { ref: ref, ...rest });
+});
+
+export { DropdownTrigger };

package/dist/esm/components/Dropdown/index.js

@@ -0,0 +1,34 @@
+'use client';
+import { Dropdown as Dropdown$1 } from './Dropdown.js';
+import { DropdownContext } from './DropdownContext.js';
+import { DropdownHeading } from './DropdownHeading.js';
+import { DropdownItem } from './DropdownItem.js';
+import { DropdownList } from './DropdownList.js';
+import { DropdownTrigger } from './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, {
+    Context: DropdownContext,
+    Heading: DropdownHeading,
+    List: DropdownList,
+    Item: DropdownItem,
+    Trigger: 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';
+
+export { Dropdown, DropdownContext, DropdownHeading, DropdownItem, DropdownList, DropdownTrigger };

package/dist/esm/components/ErrorSummary/ErrorSummary.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { createContext, forwardRef, useId, useState } from 'react';
+
+const ErrorSummaryContext = createContext({
+    size: 'md',
+    headingId: 'heading',
+    setHeadingId: () => { },
+});
+const ErrorSummary = forwardRef(function ErrorSummary({ className, size = 'md', role = 'alert', 'aria-live': ariaLive = 'polite', 'aria-relevant': ariaRelevant = 'all', ...rest }, ref) {
+    const randomId = useId();
+    const [headingId, setHeadingId] = useState(randomId);
+    return (jsx(ErrorSummaryContext.Provider, { value: { size, headingId, setHeadingId }, children: jsx("div", { "aria-labelledby": headingId, "aria-live": ariaLive, "aria-relevant": ariaRelevant, className: cl('ds-error-summary', className), ref: ref, role: role, ...rest }) }));
+});
+
+export { ErrorSummary, ErrorSummaryContext };