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

package/README.md

@@ -2,8 +2,7 @@
 
 React implementation of the Designsystemet components
 
-- Headless components.
-  - Uses `@digdir/designsystemet-theme` and `@digdir/designsystemet-css` for styling.
+- Uses `@digdir/designsystemet-theme` and `@digdir/designsystemet-css` for styling.
 - All components support `forwardRef`.
 - Most components extend and behave as native html-elements.
 - Most components support composition and `asChild` for overriding the underlying html-element.

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

@@ -8,7 +8,7 @@ var react = require('react');
 /**
  * Accordion component, contains `Accordion.Item` components.
  */
-const Accordion = react.forwardRef(function Accordion({ border = false, color = 'neutral', className, ...rest }, ref) {
+const Accordion = react.forwardRef(function Accordion({ border = false, 'data-color': color = 'neutral', className, ...rest }, ref) {
     return (jsxRuntime.jsx("div", { className: cl('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
 });
 

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

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
  * Accordion content component, contains the content of the accordion item.
@@ -11,7 +10,7 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
  * <AccordionContent>Content</AccordionContent>
  */
 const AccordionContent = react.forwardRef(function AccordionContent(rest, ref) {
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.jsx("div", { ref: ref, ...rest }) }));
+    return jsxRuntime.jsx("div", { ref: ref, ...rest });
 });
 
 exports.AccordionContent = AccordionContent;

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

@@ -2,18 +2,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
 var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
- * Accordion header component, contains a button to toggle the content.
+ * Accordion heading component, contains a button to toggle the content.
  * @example
- * <AccordionHeader>Header</AccordionHeader>
+ * <AccordionHeading>Heading</AccordionHeading>
  */
 const AccordionHeading = react.forwardRef(function AccordionHeading({ className, ...rest }, ref) {
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'sm', children: jsxRuntime.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 }) }));
+    /* Set `className` as `class` so react is happy */
+    return jsxRuntime.jsx("u-summary", { ref: ref, class: className, ...rest });
 });
 
 exports.AccordionHeading = AccordionHeading;

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

@@ -8,71 +8,35 @@ var react = require('react');
 require('@u-elements/u-details');
 
 /**
- * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * Accordion item component, contains `Accordion.Heading` and `Accordion.Content` components.
  * @example
  * <AccordionItem>
- *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionHeading>Header</AccordionHeading>
  *  <AccordionContent>Content</AccordionContent>
  * </AccordionItem>
  */
-const AccordionItem = react.forwardRef(function AccordionItem({ className, open, defaultOpen = false, onFound, ...rest }, ref) {
-    const [internalOpen, setInternalOpen] = react.useState(open ?? defaultOpen);
-    const initialOpen = react.useRef(internalOpen); // Allow rendering initial open state on server, but animate in browser
-    const controlledOpen = react.useRef(internalOpen); // Using ref so we can access it inside useEffect without unbinding/binding event listeners
+const AccordionItem = react.forwardRef(function AccordionItem({ className, open, defaultOpen = false, onToggle, ...rest }, ref) {
     const detailsRef = react.useRef(null);
+    const initialOpen = react.useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
     const mergedRefs = react$1.useMergeRefs([detailsRef, ref]);
-    controlledOpen.current = open ?? internalOpen; // Update controlledOpen on prop change
-    // Control state with a useEffect to animate on prop change and prevent native <details> toggle
+    const onToggleRef = react.useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
+    const openRef = react.useRef(open);
+    onToggleRef.current = onToggle;
+    openRef.current = open;
+    // Provide onToggle event and controlled state
     react.useEffect(() => {
         const details = detailsRef.current;
-        const summary = details?.querySelector(':scope > :is(summary,u-summary)');
-        const handleSummaryClick = (event) => {
-            event?.preventDefault(); // Prevent native <details> toggle so we can animate
-            setInternalOpen((open) => !open);
-        };
-        const handleToggle = () => {
-            if (!details || details.open === controlledOpen.current)
+        const handleToggle = (event) => {
+            if (!details || details?.open === openRef.current)
                 return;
-            onFound?.();
-            setInternalOpen(details?.open || false);
-            window.requestAnimationFrame(() => {
-                details.open = controlledOpen.current;
-            }); // Let onFound run before correcting state
+            onToggleRef.current?.(event);
+            if (openRef.current !== undefined)
+                details.open = openRef.current; // Don't update DOM unless controlled state changes
         };
         details?.addEventListener('toggle', handleToggle, true);
-        summary?.addEventListener('click', handleSummaryClick);
-        return () => {
-            details?.removeEventListener('toggle', handleToggle, true);
-            summary?.removeEventListener('click', handleSummaryClick);
-        };
+        return () => details?.removeEventListener('toggle', handleToggle, true);
     }, []);
-    react.useEffect(() => {
-        animateHeight(detailsRef.current, controlledOpen.current);
-    }, [controlledOpen.current]);
-    return (jsxRuntime.jsx("u-details", { class: cl('ds-accordion__item', className), open: initialOpen.current || undefined, ref: mergedRefs, ...rest }));
+    return (jsxRuntime.jsx("u-details", { class: cl('ds-accordion__item', className), open: (open ?? initialOpen.current) || undefined, ref: mergedRefs, ...rest }));
 });
-const animateHeight = (details, open) => {
-    const content = details?.querySelector(':scope > :not(summary, u-summary)');
-    const hasContent = content instanceof HTMLElement;
-    const hasAnimate = details && 'animate' in details;
-    const hasReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    details?.setAttribute('data-chevron-open', `${open}`); // Make flip on click
-    if (hasReducedMotion || !hasAnimate || !hasContent) {
-        if (details)
-            details.open = open;
-    }
-    else if (details.open !== open) {
-        details.open = true;
-        const opened = `${content.scrollHeight}px`;
-        content.style.overflow = 'clip'; // Clip content while animating
-        content.animate({
-            height: [open ? '0px' : opened, open ? opened : '0px'],
-            paddingBlock: [open ? '0px' : '', open ? '' : '0px'],
-        }, { duration: 400, easing: 'ease-in-out' }).onfinish = () => {
-            content.style.removeProperty('overflow'); // Restore overlow
-            details.open = open;
-        };
-    }
-};
 
 exports.AccordionItem = AccordionItem;

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

@@ -4,15 +4,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
  * @example
  * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
-const Alert = react.forwardRef(function Alert({ color = 'info', size = 'md', className, ...rest }, ref) {
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { className: cl('ds-alert', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
+const Alert = react.forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));
 });
 
 exports.Alert = Alert;

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

@@ -6,17 +6,11 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const fontSizeMap = {
-    xs: 'ds-paragraph--xs',
-    sm: 'ds-heading--2xs',
-    md: 'ds-heading--sm',
-    lg: 'ds-heading--md',
-};
 /**
  * Avatars are used to represent people or entities.
  *
  * @example
- * <Avatar aria-label="John Doe">JD</Avatar>
+ * <Avatar aria-label="John Doe" initials="JD" />
  *
  * @example
  * <Avatar aria-label="John Doe">
@@ -28,9 +22,10 @@ const fontSizeMap = {
  *  <Icon />
  * </Avatar>
  */
-const Avatar = react.forwardRef(function Avatar({ 'aria-label': ariaLabel, color = 'accent', size = 'md', variant = 'circle', className, children, ...rest }, ref) {
-    const Component = children && typeof children !== 'string' ? reactSlot.Slot : react.Fragment;
-    return (jsxRuntime.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: jsxRuntime.jsx(Component, { ...(children ? { 'aria-hidden': true } : {}), children: children }) }));
+const Avatar = react.forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...rest }, ref) {
+    const useSlot = children && typeof children !== 'string';
+    const Component = useSlot ? reactSlot.Slot : react.Fragment;
+    return (jsxRuntime.jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsxRuntime.jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: children }) }));
 });
 
 exports.Avatar = Avatar;

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

@@ -4,30 +4,24 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-const paragraphSizeMap = {
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-};
 /**
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
  * @example without children
  * ```jsx
- * <Badge color='accent' size='md' count={5} />
+ * <Badge color='accent' count={5} />
  * ```
  *
  * @example with children
  * ```jsx
- * <Badge color='accent' size='md'>
+ * <Badge color='accent'>
  *  <Icon />
  * </Badge>
  * ```
  */
-const Badge = react.forwardRef(function Badge({ className, color = 'accent', count, maxCount, overlap = 'rectangle', placement = 'top-right', size = 'md', ...rest }, ref) {
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, variant: 'short', size: paragraphSizeMap[size], children: jsxRuntime.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 }) }));
+const Badge = react.forwardRef(function Badge({ className, count, maxCount, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-overlap": rest.children ? overlap : null, "data-placement": rest.children ? placement : null, ref: ref, ...rest }));
 });
 
 exports.Badge = Badge;

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -4,8 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-const Breadcrumbs = react.forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, ref) => (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), "data-size": size, ref: ref, ...rest }) })));
+const Breadcrumbs = react.forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
 
 exports.Breadcrumbs = Breadcrumbs;

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

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 var Spinner = require('../loaders/Spinner/Spinner.js');
 
 /**
@@ -13,12 +12,13 @@ var Spinner = require('../loaders/Spinner/Spinner.js');
  * @example
  * <Button>Click me</Button>
  */
-const Button = react.forwardRef(function Button({ asChild, className, children, color = 'accent', icon = false, loading = false, size = 'md', variant = 'primary', ...rest }, ref) {
+const Button = react.forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'button';
-    const spinnerColor = color === 'accent' ? color : 'neutral';
     // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { variant: 'short', size: size, asChild: true, children: jsxRuntime.jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: 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 ? (jsxRuntime.jsx(Spinner.Spinner, { "aria-hidden": 'true', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
-                ), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }) }));
+    return (jsxRuntime.jsxs(Component, { "aria-busy": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
+        /* don't set type when we use `asChild` */
+        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsxRuntime.jsx(Spinner.Spinner, { "aria-hidden": 'true', "data-size": 'sm' })) : (loading // Allow custom loading spinner
+            ), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
 });
 
 exports.Button = Button;

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

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
@@ -10,15 +11,32 @@ var react = require('react');
  * 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.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = react.forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
+const Card = react.forwardRef(function Card({ asChild = false, 'data-color': color = 'neutral', className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-card`, isLink && `ds-focus`, className), "data-color": color, "data-link": isLink ? '' : undefined, ...rest }));
+    const cardRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([cardRef, ref]);
+    // Forward click on card to heading links for better accessibility
+    // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
+    react.useEffect(() => {
+        const card = cardRef.current;
+        const handleClick = ({ ctrlKey, metaKey, target }) => {
+            const link = card?.querySelector(':is(h1,h2,h3,h4,h5,h6) a');
+            if (!link || link?.contains(target))
+                return; // Let links handle their own clicks
+            if (ctrlKey || metaKey)
+                window.open(link.href, '', 'noreferrer');
+            else
+                link.click(); // Using link.click instead of window.location.href as this will trigger the browser's handling of rel=, target=, etc.
+        };
+        card?.addEventListener('click', handleClick);
+        return () => card?.removeEventListener('click', handleClick);
+    }, []);
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-color": color, ref: mergedRefs, ...rest }));
 });
-Card.displayName = 'Card';
 
 exports.Card = Card;

package/dist/cjs/components/Card/{CardMedia.js → CardBlock.js}

@@ -6,10 +6,9 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const CardMedia = react.forwardRef(({ asChild, className, ...rest }, ref) => {
+const CardBlock = react.forwardRef(function CardBlock({ asChild, className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
-    return (jsxRuntime.jsx(Component, { className: cl(`ds-card__media`, className), ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-card__block`, className), ref: ref, ...rest }));
 });
-CardMedia.displayName = 'CardMedia';
 
-exports.CardMedia = CardMedia;
+exports.CardBlock = CardBlock;

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

@@ -2,23 +2,12 @@
 'use strict';
 
 var Card$1 = require('./Card.js');
-var CardContent = require('./CardContent.js');
-var CardFooter = require('./CardFooter.js');
-var CardHeader = require('./CardHeader.js');
-var CardMedia = require('./CardMedia.js');
+var CardBlock = require('./CardBlock.js');
 
-const Card = Card$1.Card;
-Card.Header = CardHeader.CardHeader;
-Card.Content = CardContent.CardContent;
-Card.Footer = CardFooter.CardFooter;
-Card.Media = CardMedia.CardMedia;
-Card.Header.displayName = 'Card.Header';
-Card.Content.displayName = 'Card.Content';
-Card.Footer.displayName = 'Card.Footer';
-Card.Media.displayName = 'Card.Media';
+const Card = Object.assign(Card$1.Card, {
+    Block: CardBlock.CardBlock,
+});
+Card.Block.displayName = 'Card.Block';
 
-exports.CardContent = CardContent.CardContent;
-exports.CardFooter = CardFooter.CardFooter;
-exports.CardHeader = CardHeader.CardHeader;
-exports.CardMedia = CardMedia.CardMedia;
+exports.CardBlock = CardBlock.CardBlock;
 exports.Card = Card;

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

@@ -0,0 +1,51 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var Input = require('../form/Input/Input.js');
+
+/**
+ * Chip.Button used for interaction
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = react.forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'button';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-chip', className), type: asChild ? undefined : 'button', ref: ref, ...rest }));
+});
+/**
+ * Chip.Removable used for interaction
+ * @example
+ * <Chip.Removable>Click to remove me</Chip.Removable>
+ */
+const ChipRemovable = react.forwardRef(function ChipRemovable(props, ref) {
+    return jsxRuntime.jsx(ChipButton, { "data-removable": true, ref: ref, ...props });
+});
+/**
+ * Chip.Checkbox used for multiselection
+ * @example
+ * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
+ * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
+ */
+const ChipCheckbox = react.forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-color': color, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? reactSlot.Slot : 'label';
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-color": color, ref: ref, children: [jsxRuntime.jsx(Input.Input, { ...rest, type: inputType }), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
+});
+/**
+ * Chip.Radio used for single selection
+ * @example
+ * <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
+ * <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
+ */
+const ChipRadio = react.forwardRef(function ChipRadio(props, ref) {
+    return jsxRuntime.jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+exports.ChipButton = ChipButton;
+exports.ChipCheckbox = ChipCheckbox;
+exports.ChipRadio = ChipRadio;
+exports.ChipRemovable = ChipRemovable;

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

@@ -1,20 +1,21 @@
 'use client';
 'use strict';
 
-var Group = require('./Group/Group.js');
-var Removable = require('./Removable/Removable.js');
-var Toggle = require('./Toggle/Toggle.js');
+var Chips = require('./Chips.js');
 
 const Chip = {
-    Group: Group.Group,
-    Removable: Removable.RemovableChip,
-    Toggle: Toggle.ToggleChip,
+    Button: Chips.ChipButton,
+    Checkbox: Chips.ChipCheckbox,
+    Radio: Chips.ChipRadio,
+    Removable: Chips.ChipRemovable,
 };
-Chip.Group.displayName = 'Chip.Group';
+Chip.Button.displayName = 'Chip.Button';
+Chip.Checkbox.displayName = 'Chip.Checkbox';
+Chip.Radio.displayName = 'Chip.Radio';
 Chip.Removable.displayName = 'Chip.Removable';
-Chip.Toggle.displayName = 'Chip.Toggle';
 
-exports.ChipGroup = Group.Group;
-exports.ChipRemovable = Removable.RemovableChip;
-exports.ChipToggle = Toggle.ToggleChip;
+exports.ChipButton = Chips.ChipButton;
+exports.ChipCheckbox = Chips.ChipCheckbox;
+exports.ChipRadio = Chips.ChipRadio;
+exports.ChipRemovable = Chips.ChipRemovable;
 exports.Chip = Chip;

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

@@ -6,18 +6,8 @@ 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',
+const Dropdown = react.forwardRef(function DropdownContent({ placement = 'bottom-end', className, ...rest }, ref) {
+    return (jsxRuntime.jsx(index.Popover, { className: cl('ds-dropdown', className), placement: placement, ref: ref, ...rest }));
 });
 
 exports.Dropdown = Dropdown;
-exports.DropdownCtx = DropdownCtx;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../Button/Button.js');
+
+const DropdownButton = react.forwardRef(function DropdownButton({ className, ...rest }, ref) {
+    return jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', ...rest });
+});
+
+exports.DropdownButton = DropdownButton;

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

@@ -2,14 +2,11 @@
 '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');
+var Heading = require('../Heading/Heading.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 }) }));
+const DropdownHeading = react.forwardRef(function DropdownHeading({ className, ...rest }, ref) {
+    return jsxRuntime.jsx(Heading.Heading, { ref: ref, ...rest });
 });
 
 exports.DropdownHeading = DropdownHeading;

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

@@ -3,12 +3,9 @@
 
 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 }) }));
+const DropdownItem = react.forwardRef(function DropdownItem({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("li", { ref: ref, ...rest });
 });
 
 exports.DropdownItem = DropdownItem;

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

@@ -2,11 +2,10 @@
 '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 }));
+    return jsxRuntime.jsx("ul", { ref: ref, ...rest });
 });
 
 exports.DropdownList = DropdownList;

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

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../Popover/index.js');
+var PopoverTriggerContext = require('../Popover/PopoverTriggerContext.js');
+
+/**
+ * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ * @example
+ * <Dropdown.TriggerContext>
+ *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+ *  <Dropdown>
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *    <Dropdown.List>
+ *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *    </Dropdown.List>
+ *  </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
+const DropdownTriggerContext = ({ children, }) => {
+    return jsxRuntime.jsx(PopoverTriggerContext.PopoverTriggerContext, { children: children });
+};
+DropdownTriggerContext.displayName = 'DropdownTriggerContext';
+
+exports.DropdownTriggerContext = DropdownTriggerContext;

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

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