@digdir/designsystemet-react 1.0.0-next.35 → 1.0.0-next.37

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/Alert/Alert.js

@@ -10,8 +10,8 @@ var react = require('react');
  * @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("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

@@ -10,7 +10,7 @@ var react = require('react');
  * 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">
@@ -22,9 +22,10 @@ var react = require('react');
  *  <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', 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

@@ -10,18 +10,18 @@ var react = require('react');
  *
  * @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("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

@@ -5,6 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const Breadcrumbs = react.forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, ref) => (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

@@ -12,13 +12,12 @@ 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.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, 
+    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', color: spinnerColor, size: 'sm', title: '' })) : (loading // Allow custom loading spinner
+        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 })] }));
 });
 

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

@@ -16,7 +16,7 @@ var react = require('react');
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-const Card = react.forwardRef(function Card({ 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';
     const cardRef = react.useRef(null);
     const mergedRefs = react$1.useMergeRefs([cardRef, ref]);

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

@@ -5,15 +5,16 @@ 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, size, ...rest }, ref) {
+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), "data-size": size, type: asChild ? undefined : 'button', ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: cl('ds-chip', className), type: asChild ? undefined : 'button', ref: ref, ...rest }));
 });
 /**
  * Chip.Removable used for interaction
@@ -29,10 +30,10 @@ const ChipRemovable = react.forwardRef(function ChipRemovable(props, ref) {
  * <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, size, ...rest }, ref) {
+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, ref: ref, children: [jsxRuntime.jsx("input", { ...rest, type: inputType }), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
+    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

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,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var cl = require('clsx/lite');
 var react = require('react');
+var Heading = require('../Heading/Heading.js');
 
 const DropdownHeading = react.forwardRef(function DropdownHeading({ className, ...rest }, ref) {
-    return (jsxRuntime.jsx("h2", { ref: ref, className: cl('ds-dropdown__heading', className), ...rest }));
+    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;

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

@@ -6,14 +6,13 @@ 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 ErrorSummary = react.forwardRef(function ErrorSummary({ className, 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 }) }));
+    return (jsxRuntime.jsx(ErrorSummaryContext.Provider, { value: { 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;

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

@@ -6,18 +6,13 @@ var react = require('react');
 var ErrorSummary = require('./ErrorSummary.js');
 var Heading = require('../Heading/Heading.js');
 
-const HEADING_SIZE_MAP = {
-    sm: '2xs',
-    md: 'xs',
-    lg: 'sm',
-};
 const ErrorSummaryHeading = react.forwardRef(function ErrorSummaryHeading({ className, id, ...rest }, ref) {
-    const { size, headingId, setHeadingId } = react.useContext(ErrorSummary.ErrorSummaryContext);
+    const { headingId, setHeadingId } = react.useContext(ErrorSummary.ErrorSummaryContext);
     react.useEffect(() => {
         if (id && headingId !== id)
             setHeadingId(id);
     }, [headingId, id, setHeadingId]);
-    return (jsxRuntime.jsx(Heading.Heading, { id: headingId, size: HEADING_SIZE_MAP[size ?? 'md'], ref: ref, ...rest }));
+    return jsxRuntime.jsx(Heading.Heading, { id: headingId, ref: ref, ...rest });
 });
 
 exports.ErrorSummaryHeading = ErrorSummaryHeading;

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

@@ -4,11 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var index = require('../List/index.js');
-var ErrorSummary = require('./ErrorSummary.js');
 
 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 });
+    return jsxRuntime.jsx(index.List.Unordered, { ...rest, ref: ref });
 });
 
 exports.ErrorSummaryList = ErrorSummaryList;

package/dist/cjs/components/Heading/Heading.js

@@ -10,11 +10,11 @@ var react = require('react');
  * Use `Heading` to render h1-6 elements with heading text styles.
  *
  * @example
- * <Heading size='lg' level={2}>Heading</Heading>
+ * <Heading data-size='lg' level={2}>Heading</Heading>
  */
-const Heading = react.forwardRef(function Heading({ size = 'xl', level = 2, className, asChild, ...rest }, ref) {
+const Heading = react.forwardRef(function Heading({ level = 2, className, asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : `h${level}`;
-    return (jsxRuntime.jsx(Component, { className: cl(`ds-heading`, className), "data-size": size, ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-heading`, className), ref: ref, ...rest }));
 });
 
 exports.Heading = Heading;

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

@@ -6,8 +6,8 @@ var cl = require('clsx/lite');
 var react = require('react');
 var index = require('../Popover/index.js');
 
-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 })] }));
+const HelpText = react.forwardRef(function HelpText({ placement = 'right', className, children, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Popover.TriggerContext, { children: [jsxRuntime.jsx(index.Popover.Trigger, { className: cl('ds-helptext', className), ref: ref, variant: 'tertiary', ...rest }), jsxRuntime.jsx(index.Popover, { placement: placement, "data-color": 'info', children: children })] }));
 });
 
 exports.HelpText = HelpText;

package/dist/cjs/components/Label/Label.js

@@ -10,11 +10,11 @@ var react = require('react');
  * Use `Label` for labels.
  *
  * @example
- * <Label size='lg'>Label</Label>
+ * <Label data-size='lg'>Label</Label>
  */
-const Label = react.forwardRef(function Label({ className, size = 'md', weight = 'medium', asChild, ...rest }, ref) {
+const Label = react.forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'label';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-label--${size}`, weight && `ds-font-weight--${weight}`, className), ...rest }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl('ds-label', className), "data-weight": weight, ...rest }));
 });
 
 exports.Label = Label;

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

@@ -6,9 +6,9 @@ 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 Link = react.forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? reactSlot.Slot : 'a';
-    return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), "data-color": color, ref: ref, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

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

@@ -6,9 +6,9 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const render = (tagName, { asChild, className, size = 'md', ...rest }, ref) => {
+const render = (tagName, { asChild, className, ...rest }, ref) => {
     const Component = asChild ? reactSlot.Slot : tagName;
-    return (jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), "data-size": size, ref: ref, ...rest }));
+    return jsxRuntime.jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
 };
 const ListUnordered = react.forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);

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

@@ -6,12 +6,12 @@ var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var ModalContext = require('./ModalContext.js');
+var ModalTriggerContext = require('./ModalTriggerContext.js');
 var Button = require('../Button/Button.js');
 
 const Modal = react.forwardRef(function Modal({ asChild, children, className, closeButton = 'Lukk dialogvindu', onClose, open, backdropClose = false, ...rest }, ref) {
-    const contextRef = react.useContext(ModalContext.Context);
-    const modalRef = react.useRef(null); // This local ref is used to make sure the modal works without a ModalContext
+    const contextRef = react.useContext(ModalTriggerContext.Context);
+    const modalRef = react.useRef(null); // This local ref is used to make sure the modal works without a ModalTriggerContext
     const Component = asChild ? reactSlot.Slot : 'dialog';
     const mergedRefs = react$1.useMergeRefs([contextRef, ref, modalRef]);
     react.useEffect(() => modalRef.current?.[open ? 'showModal' : 'close'](), [open]); // Toggle open based on prop
@@ -39,7 +39,13 @@ const Modal = react.forwardRef(function Modal({ asChild, children, className, cl
             modal?.removeEventListener('click', handleBackdropClick);
         };
     }, [backdropClose]);
-    return (jsxRuntime.jsxs(Component, { className: cl('ds-modal', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(Button.Button, { "aria-label": closeButton, autoFocus: true, color: 'neutral', icon: true, name: 'close', size: 'md', type: 'submit', variant: 'tertiary' }) })), children] }));
+    /* handle closing */
+    react.useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        modalRef.current?.addEventListener('close', handleClose);
+        return () => modalRef.current?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-modal', className), ref: mergedRefs, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(Button.Button, { "aria-label": closeButton, autoFocus: true, color: 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
 });
 
 exports.Modal = Modal;

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

@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var Button = require('../Button/Button.js');
-var ModalContext = require('./ModalContext.js');
+var ModalTriggerContext = require('./ModalTriggerContext.js');
 
 const ModalTrigger = react.forwardRef(function ModalTrigger({ asChild, ...rest }, ref) {
-    const contextRef = react.useContext(ModalContext.Context);
+    const contextRef = react.useContext(ModalTriggerContext.Context);
     const Component = asChild ? reactSlot.Slot : Button.Button;
     return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: () => contextRef?.current?.showModal(), ref: ref, ...rest }));
 });

package/dist/cjs/components/Modal/{ModalContext.js → ModalTriggerContext.js}

@@ -7,11 +7,11 @@ var react = require('react');
 const Context = react.createContext({
     current: null,
 });
-const ModalContext = ({ children }) => {
+const ModalTriggerContext = ({ children }) => {
     const contextRef = react.useRef(null);
     return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
 };
-ModalContext.displayName = 'ModalContext';
+ModalTriggerContext.displayName = 'ModalTriggerContext';
 
 exports.Context = Context;
-exports.ModalContext = ModalContext;
+exports.ModalTriggerContext = ModalTriggerContext;

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

@@ -3,19 +3,19 @@
 
 var Modal$1 = require('./Modal.js');
 var ModalBlock = require('./ModalBlock.js');
-var ModalContext = require('./ModalContext.js');
 var ModalTrigger = require('./ModalTrigger.js');
+var ModalTriggerContext = require('./ModalTriggerContext.js');
 
 const Modal = Object.assign(Modal$1.Modal, {
     Block: ModalBlock.ModalBlock,
-    Context: ModalContext.ModalContext,
+    TriggerContext: ModalTriggerContext.ModalTriggerContext,
     Trigger: ModalTrigger.ModalTrigger,
 });
 Modal.Block.displayName = 'Modal.Block';
-Modal.Context.displayName = 'Modal.Context';
+Modal.TriggerContext.displayName = 'Modal.TriggerContext';
 Modal.Trigger.displayName = 'Modal.Trigger';
 
 exports.ModalBlock = ModalBlock.ModalBlock;
-exports.ModalContext = ModalContext.ModalContext;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
+exports.ModalTriggerContext = ModalTriggerContext.ModalTriggerContext;
 exports.Modal = Modal;

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

@@ -6,13 +6,9 @@ var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 
-const PaginationContext = react.createContext({
-    size: 'md',
-});
-const Pagination = react.forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, size = 'md', ...rest }, ref) {
+const Pagination = react.forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'nav';
-    return (jsxRuntime.jsx(PaginationContext.Provider, { value: { size }, children: jsxRuntime.jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }) }));
+    return (jsxRuntime.jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));
 });
 
 exports.Pagination = Pagination;
-exports.PaginationContext = PaginationContext;

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

@@ -4,11 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Button = require('../Button/Button.js');
-var Pagination = require('./Pagination.js');
 
 const PaginationButton = react.forwardRef(function PaginationButton(rest, ref) {
-    const { size } = react.useContext(Pagination.PaginationContext);
-    return jsxRuntime.jsx(Button.Button, { ref: ref, size: size, ...rest });
+    return jsxRuntime.jsx(Button.Button, { ref: ref, ...rest });
 });
 
 exports.PaginationButton = PaginationButton;

package/dist/cjs/components/Paragraph/Paragraph.js

@@ -10,11 +10,11 @@ var react = require('react');
  * Use `Paragraph` to display text with paragraph text styles.
  *
  * @example
- * <Paragraph size='lg'>Paragraph</Paragraph>
+ * <Paragraph data-size='lg'>Paragraph</Paragraph>
  */
-const Paragraph = react.forwardRef(function Paragraph({ className, size = 'md', asChild, variant = 'default', ...rest }, ref) {
+const Paragraph = react.forwardRef(function Paragraph({ className, asChild, variant = 'default', ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'p';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-size": size, "data-variant": variant, ...rest }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: cl(`ds-paragraph`, className), "data-variant": variant, ...rest }));
 });
 
 exports.Paragraph = Paragraph;