@digdir/designsystemet-react 0.63.0 → 1.0.0-next.14

package/dist/cjs/utilities/{RovingTabIndex/RovingTabindexRoot.js → RovingFocus/RovingFocusRoot.js}

@@ -6,7 +6,7 @@ var React = require('react');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 
-const RovingTabindexContext = React.createContext({
+const RovingFocusContext = React.createContext({
     elements: { current: new Map() },
     getOrderedItems: () => [],
     setFocusableValue: () => {
@@ -17,7 +17,7 @@ const RovingTabindexContext = React.createContext({
     },
     focusableValue: null,
 });
-const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus, ...rest }, ref) => {
+const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, onBlur, onFocus, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
     const [focusableValue, setFocusableValue] = React.useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = React.useState(false);
@@ -32,7 +32,10 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
             .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
             .map(([value, element]) => ({ value, element }));
     };
-    return (jsxRuntime.jsx(RovingTabindexContext.Provider, { value: {
+    React.useEffect(() => {
+        setFocusableValue(activeValue ?? null);
+    }, [activeValue]);
+    return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
             elements,
             getOrderedItems,
             focusableValue,
@@ -43,6 +46,7 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
         }, children: jsxRuntime.jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
                 onBlur?.(e);
                 setIsShiftTabbing(false);
+                setFocusableValue(activeValue ?? null);
             }, onFocus: (e) => {
                 onFocus?.(e);
                 if (e.target !== e.currentTarget)
@@ -53,8 +57,8 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
                 if (focusableValue != null) {
                     elements.current.get(focusableValue)?.focus();
                 }
-                else if (valueId != null) {
-                    elements.current.get(valueId)?.focus();
+                else if (activeValue != null) {
+                    elements.current.get(activeValue)?.focus();
                 }
                 else {
                     orderedItems.at(0)?.element.focus();
@@ -62,5 +66,5 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
             }, ref: refs }) }));
 });
 
-exports.RovingTabindexContext = RovingTabindexContext;
-exports.RovingTabindexRoot = RovingTabindexRoot;
+exports.RovingFocusContext = RovingFocusContext;
+exports.RovingFocusRoot = RovingFocusRoot;

package/dist/cjs/utilities/{RovingTabIndex/useRovingTabindex.js → RovingFocus/useRovingFocus.js}

@@ -2,13 +2,13 @@
 'use strict';
 
 var React = require('react');
-var RovingTabindexRoot = require('./RovingTabindexRoot.js');
+var RovingFocusRoot = require('./RovingFocusRoot.js');
 
 // Logic from: https://www.joshuawootonn.com/react-roving-tabindex
 // Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
-/** Handles props for `RovingTabIndex` in context with `RovingTabIndexRoot` */
-const useRovingTabindex = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = React.useContext(RovingTabindexRoot.RovingTabindexContext);
+/** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = React.useContext(RovingFocusRoot.RovingFocusContext);
     return {
         getOrderedItems,
         isFocusable: focusableValue === value,
@@ -39,4 +39,4 @@ const useRovingTabindex = (value) => {
     };
 };
 
-exports.useRovingTabindex = useRovingTabindex;
+exports.useRovingFocus = useRovingFocus;

package/dist/cjs/utilities/{useDebounce.js → hooks/useDebounceCallback/useDebounceCallback.js}

@@ -3,7 +3,7 @@
 
 var React = require('react');
 
-function useDebounce(callback, delay = 50) {
+function useDebounceCallback(callback, delay = 50) {
     const timeoutRef = React.useRef(null);
     React.useEffect(() => {
         // Cleanup the previous timeout on re-render
@@ -24,4 +24,4 @@ function useDebounce(callback, delay = 50) {
     return debouncedCallback;
 }
 
-module.exports = useDebounce;
+exports.useDebounceCallback = useDebounceCallback;

package/dist/cjs/{hooks → utilities/hooks/useIsomorphicLayoutEffect}/useIsomorphicLayoutEffect.js

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

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

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+
+// from https://usehooks-ts.com/react-hook/use-media-query
+const IS_SERVER = typeof window === 'undefined';
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = React.useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+exports.useMediaQuery = useMediaQuery;

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

@@ -0,0 +1,46 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+
+// Inspired by Sam Selikoff
+// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+function useSynchronizedAnimation(animationName) {
+    const ref = React.useRef(null);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const firstOfType = animations.find((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation && myAnimation === firstOfType) {
+            myAnimation.currentTime = 0;
+        }
+        if (myAnimation && firstOfType && myAnimation !== firstOfType) {
+            myAnimation.currentTime = firstOfType.currentTime;
+        }
+        return () => {
+            if (myAnimation && firstOfType) {
+                myAnimation.currentTime = firstOfType.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/esm/components/Accordion/{AccordionContent/AccordionContent.js → AccordionContent.js}

@@ -1,18 +1,23 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef, useContext } from 'react';
-import { AccordionItemContext } from '../AccordionItem/AccordionItem.js';
-import { AnimateHeight } from '../../../utilities/AnimateHeight/AnimateHeight.js';
-import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { AccordionItemContext } from './AccordionItem.js';
+import { AnimateHeight } from '../../utilities/AnimateHeight/AnimateHeight.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
+/**
+ * Accordion content component, contains the content of the accordion item.
+ * @example
+ * <AccordionContent>Content</AccordionContent>
+ */
 const AccordionContent = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
     if (context === null) {
         console.error('<Accordion.Content> has to be used within an <Accordion.Item>');
         return null;
     }
-    return (jsx(AnimateHeight, { id: context.contentId, open: context.open, children: jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, className: clsx('fds-accordion__content', className), ...rest, children: children }) }) }));
+    return (jsx(AnimateHeight, { id: context.contentId, open: context.open, children: jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, className: clsx('ds-accordion__content', className), ...rest, children: children }) }) }));
 });
 AccordionContent.displayName = 'AccordionContent';
 

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

@@ -0,0 +1,29 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDownIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useContext } from 'react';
+import { AccordionItemContext } from './AccordionItem.js';
+import { Heading } from '../Typography/Heading/Heading.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+/**
+ * Accordion header component, contains a button to toggle the content.
+ * @example
+ * <AccordionHeader>Header</AccordionHeader>
+ */
+const AccordionHeading = forwardRef(({ level = 1, children, className, onHeaderClick, ...rest }, ref) => {
+    const context = useContext(AccordionItemContext);
+    if (context === null) {
+        console.error('<Accordion.Header> has to be used within an <Accordion.Item>');
+        return null;
+    }
+    const handleClick = (e) => {
+        context.toggleOpen();
+        onHeaderClick && onHeaderClick(e);
+    };
+    return (jsx(Heading, { ref: ref, size: 'xs', level: level, className: clsx('ds-accordion__header', className), ...rest, children: jsxs("button", { type: 'button', className: clsx('ds-accordion__button', `ds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: 'ds-accordion__expand-icon', fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("span", { children: children }) })] }) }));
+});
+AccordionHeading.displayName = 'AccordionHeading';
+
+export { AccordionHeading };

package/dist/esm/components/Accordion/{AccordionItem/AccordionItem.js → AccordionItem.js}

@@ -1,13 +1,21 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { createContext, forwardRef, useState, useId } from 'react';
 
 const AccordionItemContext = createContext(null);
+/**
+ * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * @example
+ * <AccordionItem>
+ *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ */
 const AccordionItem = forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const contentId = useId();
-    return (jsx("div", { className: clsx('fds-accordion__item', (open ?? internalOpen) && 'fds-accordion__item--open', className), ref: ref, ...rest, children: jsx(AccordionItemContext.Provider, { value: {
+    return (jsx("div", { className: clsx('ds-accordion__item', (open ?? internalOpen) && 'ds-accordion__item--open', className), ref: ref, ...rest, children: jsx(AccordionItemContext.Provider, { value: {
                 open: open ?? internalOpen,
                 toggleOpen: () => {
                     if (open === undefined) {

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+
+/**
+ * Accordion root component, contains `Accordion.Item` components.
+ */
+const AccordionRoot = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => {
+    return (jsx("div", { className: clsx('ds-accordion', border && 'ds-accordion--border', color && `ds-accordion--${color}`, className), ref: ref, ...rest }));
+});
+AccordionRoot.displayName = 'AccordionRoot';
+
+export { AccordionRoot };

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

@@ -1,15 +1,27 @@
 'use client';
-import { Accordion as Accordion$1 } from './Accordion.js';
-import { AccordionHeader } from './AccordionHeader/AccordionHeader.js';
-import { AccordionContent } from './AccordionContent/AccordionContent.js';
-import { AccordionItem } from './AccordionItem/AccordionItem.js';
+import { AccordionRoot } from './AccordionRoot.js';
+import { AccordionItem } from './AccordionItem.js';
+import { AccordionContent } from './AccordionContent.js';
+import { AccordionHeading } from './AccordionHeading.js';
 
-const Accordion = Accordion$1;
-Accordion.Header = AccordionHeader;
+/**
+ * Accordions are used to toggle the visibility of content.
+ * @example
+ * <Accordion.Root>
+ *  <Accordion.Item>
+ *   <Accordion.Heading>Heading 1</Accordion.Heading>
+ *  <Accordion.Content>Content 1</Accordion.Content>
+ * </Accordion.Item>
+ * <Accordion.Item>
+ */
+const Accordion = {};
+Accordion.Root = AccordionRoot;
+Accordion.Heading = AccordionHeading;
 Accordion.Content = AccordionContent;
 Accordion.Item = AccordionItem;
-Accordion.Header.displayName = 'Accordion.Header';
+Accordion.Root.displayName = 'Accordion.Root';
+Accordion.Heading.displayName = 'Accordion.Heading';
 Accordion.Content.displayName = 'Accordion.Content';
 Accordion.Item.displayName = 'Accordion.Item';
 
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem };
+export { Accordion, AccordionContent, AccordionHeading, AccordionItem, AccordionRoot };

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

@@ -3,7 +3,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { InformationSquareFillIcon, ExclamationmarkTriangleFillIcon, CheckmarkCircleFillIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { getSize } from '../../utilities/getSize.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const icons = {
@@ -18,10 +17,14 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
-    const size = getSize(rest.size || 'md');
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ * @example
+ * <Alert severity='info'>Dette er en informasjonsmelding</Alert>
+ */
+const Alert = forwardRef(({ severity = 'info', iconTitle, children, size = 'md', className, ...rest }, ref) => {
     const { Icon, title } = icons[severity];
-    return (jsx("div", { ref: ref, className: clsx('fds-alert', `fds-alert--${size}`, `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsx(Paragraph, { asChild: true, size: size, className: 'fds-alert__content', children: jsx("span", { children: children }) })] }) }));
+    return (jsx("div", { ref: ref, className: clsx('ds-alert', `ds-alert--${size}`, `ds-alert--${severity}`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'ds-alert__icon' }), jsx(Paragraph, { asChild: true, size: size, className: 'ds-alert__content', children: jsx("span", { children: children }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

package/dist/esm/components/Box/Box.js

@@ -3,13 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { getSize } from '../../utilities/getSize.js';
 
 const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    const shadowSize = shadow && getSize(shadow);
-    const borderRadiusSize = borderRadius && getSize(borderRadius);
-    return (jsx(Component, { ref: ref, className: clsx(shadowSize && `fds-box--${shadowSize}-shadow`, borderColor && `fds-box--${borderColor}-border-color`, borderRadiusSize && `fds-box--${borderRadiusSize}-border-radius`, `fds-box--${background}-background`, className), ...rest, children: children }));
+    return (jsx(Component, { ref: ref, className: clsx(shadow && `ds-box--${shadow}-shadow`, borderColor && `ds-box--${borderColor}-border-color`, borderRadius && `ds-box--${borderRadius}-border-radius`, `ds-box--${background}-background`, className), ...rest, children: children }));
 });
 Box.displayName = 'Box';
 

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

@@ -3,15 +3,16 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { getSize } from '../../utilities/getSize.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Button used for interaction
+ * @example
+ * <Button>Click me</Button>
  */
-const Button = forwardRef(({ children, color = 'first', variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
-    const size = getSize(rest.size || 'md');
+const Button = forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
-    return (jsx(Component, { ref: ref, type: type, className: clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
+    return (jsx(Paragraph, { variant: 'short', size: size, asChild: true, children: jsx(Component, { ref: ref, type: type, className: clsx('ds-btn', `ds-focus`, `ds-btn--${size}`, `ds-btn--${variant}`, `ds-btn--${color}`, fullWidth && 'ds-btn--full-width', icon && 'ds-btn--icon-only', className), ...rest, children: children }) }));
 });
 Button.displayName = 'Button';
 

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

@@ -4,9 +4,18 @@ import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
-const Card = forwardRef(({ color = 'neutral', isLink = false, asChild = false, className, ...rest }, ref) => {
+/**
+ * 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>
+ */
+const Card = forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { ref: ref, className: clsx(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx(`ds-card`, `ds-card--${color}`, isLink && `ds-card--link`, isLink && `ds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

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

@@ -3,10 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const CardContent = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__content`, className), ref: ref, ...rest }));
+    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__content`, className), ref: ref, ...rest }) }));
 });
 CardContent.displayName = 'CardContent';
 

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

@@ -3,10 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const CardFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__footer`, className), ref: ref, ...rest }));
+    return (jsx(Paragraph, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__footer`, className), ref: ref, ...rest }) }));
 });
 CardFooter.displayName = 'CardFooter';
 

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

@@ -3,10 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Heading } from '../Typography/Heading/Heading.js';
 
 const CardHeader = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__header`, className), ref: ref, ...rest }));
+    return (jsx(Heading, { size: 'md', asChild: true, children: jsx(Component, { className: clsx(`ds-card__header`, className), ref: ref, ...rest }) }));
 });
 CardHeader.displayName = 'CardHeader';
 

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

@@ -6,7 +6,7 @@ import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_mo
 
 const CardMedia = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { className: clsx(`fds-card__media`, className), ref: ref, ...rest }));
+    return (jsx(Component, { className: clsx(`ds-card__media`, className), ref: ref, ...rest }));
 });
 CardMedia.displayName = 'CardMedia';
 

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

@@ -2,12 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, forwardRef, Children, isValidElement } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { getSize } from '../../../utilities/getSize.js';
 
 const ChipGroupContext = createContext(null);
-const Group = forwardRef(({ children, className, ...rest }, ref) => {
-    const size = getSize(rest.size || 'md');
-    return (jsx("ul", { ref: ref, className: clsx(`fds-chip--group-container`, `fds-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) }) }));
+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) }) }));
 });
 Group.displayName = 'ChipGroup';
 

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

@@ -4,13 +4,11 @@ import { forwardRef, useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import { getSize } from '../../../utilities/getSize.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
-const RemovableChip = forwardRef(({ children, className, ...rest }, ref) => {
+const RemovableChip = forwardRef(({ size = 'md', children, className, ...rest }, ref) => {
     const group = useContext(ChipGroupContext);
-    const size = getSize(rest.size || 'md');
-    return (jsx("button", { type: 'button', ref: ref, className: clsx(`fds-focus`, `fds-chip--button`, `fds-chip--removable`, `fds-chip--${group?.size || size}`, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, variant: 'short', children: jsxs("span", { className: `fds-chip__label`, children: [jsx("span", { children: children }), jsx("span", { className: `fds-chip__x-mark`, "aria-hidden": true, children: jsx(XMarkIcon, { className: `fds-chip__icon` }) })] }) }) }));
+    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` }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

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

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

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

@@ -4,7 +4,7 @@ import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
 const Divider = forwardRef(({ color = 'default', className, ...rest }, ref) => {
-    return (jsx("hr", { className: clsx('fds-divider', `fds-divider--${color}`, className), ref: ref, ...rest }));
+    return (jsx("hr", { className: clsx('ds-divider', `ds-divider--${color}`, className), ref: ref, ...rest }));
 });
 Divider.displayName = 'Divider';
 Divider.displayName = 'Divider';

package/dist/esm/components/DropdownMenu/DropdownMenuContent.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import { forwardRef, useContext, useRef } from 'react';
 import { useFloating, useInteractions, useFocus, useClick, useDismiss, useRole, useMergeRefs, FloatingFocusManager, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { DropdownMenuContext } from './DropdownMenu.js';
+import { DropdownMenuContext } from './DropdownMenuRoot.js';
 import { autoUpdate, shift } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
-import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
+import { useIsomorphicLayoutEffect } from '../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 
 const GAP = 4;
 const DropdownMenuContent = forwardRef(({ className, children, ...rest }, ref) => {
@@ -47,7 +47,7 @@ const DropdownMenuContent = forwardRef(({ className, children, ...rest }, ref) =
     return (jsx(Fragment, { children: internalOpen && (jsx(FloatingFocusManager, { context: context, guards: false, modal: false, children: jsx(Container, { children: jsx("ul", { role: 'menu', "aria-hidden": !internalOpen, "data-placement": flPlacement, ref: floatingRef, style: floatingStyles, ...getFloatingProps({
                         ref: floatingRef,
                         tabIndex: undefined,
-                    }), className: clsx('fds-dropdownmenu', `fds-dropdownmenu--${size}`, className), ...rest, children: children }) }) })) }));
+                    }), className: clsx('ds-dropdownmenu', `ds-dropdownmenu--${size}`, className), ...rest, children: children }) }) })) }));
 });
 DropdownMenuContent.displayName = 'DropdownMenuContent';
 

package/dist/esm/components/DropdownMenu/DropdownMenuGroup.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext, useId } from 'react';
-import { DropdownMenuContext } from './DropdownMenu.js';
+import { DropdownMenuContext } from './DropdownMenuRoot.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const DropdownMenuGroup = forwardRef(({ children, heading, className, style, ...rest }, ref) => {
     const { size } = useContext(DropdownMenuContext);
     const headingId = useId();
-    return (jsx("li", { className: className, style: style, children: jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: 'fds-dropdownmenu__section', ...rest, children: [heading && (jsx(Paragraph, { asChild: true, size: size, children: jsx("h2", { id: headingId, className: 'fds-dropdownmenu__heading', children: heading }) })), children] }) }));
+    return (jsx("li", { className: className, style: style, children: jsxs("ul", { ...(heading ? { 'aria-labelledby': headingId } : {}), ref: ref, role: 'group', className: 'ds-dropdownmenu__section', ...rest, children: [heading && (jsx(Paragraph, { asChild: true, size: size, children: jsx("h2", { id: headingId, className: 'ds-dropdownmenu__heading', children: heading }) })), children] }) }));
 });
 DropdownMenuGroup.displayName = 'DropdownMenuGroup';
 

package/dist/esm/components/DropdownMenu/DropdownMenuItem.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { DropdownMenuContext } from './DropdownMenu.js';
+import { DropdownMenuContext } from './DropdownMenuRoot.js';
 import { Button } from '../Button/Button.js';
 
 const DropdownMenuItem = forwardRef(({ children, className, style, ...rest }, ref) => {
     const { size } = useContext(DropdownMenuContext);
-    return (jsx("li", { className: className, style: style, children: jsx(Button, { ref: ref, variant: 'tertiary', size: size, fullWidth: true, className: 'fds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
+    return (jsx("li", { className: className, style: style, children: jsx(Button, { ref: ref, variant: 'tertiary', size: size, fullWidth: true, className: 'ds-dropdownmenu__item', role: 'menuitem', ...rest, children: children }) }));
 });
 DropdownMenuItem.displayName = 'DropdownMenuItem';