@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/cjs/utilities/AnimateHeight/AnimateHeight.js

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var AnimateHeight_module = require('./AnimateHeight.module.css.js');
+var usePrevious = require('../../hooks/usePrevious.js');
+var useMediaQuery = require('../../hooks/useMediaQuery.js');
+
+const transitionDurationInMilliseconds = 250;
+/**
+ * AnimateHeight is a component that animates its height when the `open` prop changes.
+ */
+const AnimateHeight = ({ children, className, open = false, style, ...rest }) => {
+    const [height, setHeight] = React.useState(0);
+    const prevOpen = usePrevious.usePrevious(open);
+    const openOrClosed = open ? 'open' : 'closed';
+    const [state, setState] = React.useState(openOrClosed);
+    const timeoutRef = React.useRef(null);
+    const shouldAnimate = !useMediaQuery.useMediaQuery('(prefers-reduced-motion)');
+    const contentRef = React.useCallback((node) => {
+        if (node) {
+            const resizeObserver = new ResizeObserver(() => {
+                setHeight(open ? node.getBoundingClientRect().height : 0);
+            });
+            resizeObserver.observe(node);
+        }
+        if (prevOpen !== undefined && prevOpen !== open) {
+            // Opening or closing
+            setState(shouldAnimate ? 'openingOrClosing' : openOrClosed);
+            timeoutRef.current && clearTimeout(timeoutRef.current); // Reset timeout if already active (i.e. if the user closes the component before it finishes opening)
+            timeoutRef.current = setTimeout(() => {
+                setState(openOrClosed);
+            }, transitionDurationInMilliseconds);
+        }
+    }, [open, openOrClosed, prevOpen, shouldAnimate]);
+    const transition = state === 'openingOrClosing'
+        ? `height ${transitionDurationInMilliseconds}ms ease-in-out`
+        : undefined;
+    return (jsxRuntime.jsx("div", { ...rest, className: clsx.clsx(AnimateHeight_module.root, AnimateHeight_module[state], className), style: { height, transition, ...style }, children: jsxRuntime.jsx("div", { ref: contentRef, className: AnimateHeight_module.content, children: children }) }));
+};
+
+exports.AnimateHeight = AnimateHeight;

package/dist/cjs/utilities/AnimateHeight/AnimateHeight.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"root":"fds-animateheight-root-e875993d","openingOrClosing":"fds-animateheight-openingOrClosing-e875993d","closed":"fds-animateheight-closed-e875993d","open":"fds-animateheight-open-e875993d","content":"fds-animateheight-content-e875993d"};
+
+module.exports = classes;

package/dist/cjs/utilities/RovingTabIndex/RovingTabindexItem.js

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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');
+var useRovingTabindex = require('./useRovingTabindex.js');
+
+/** Get the next focusable RovingTabindexItem */
+function getNextFocusableValue(items, value) {
+    const currIndex = items.findIndex((item) => item.value === value);
+    return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
+}
+/** Get the previous focusable RovingTabindexItem */
+function getPrevFocusableValue(items, value) {
+    const currIndex = items.findIndex((item) => item.value === value);
+    return items.at(currIndex === 0 ? -1 : currIndex - 1);
+}
+const RovingTabindexItem = React.forwardRef(({ value, as = 'div', asChild, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : as;
+    const focusValue = value ?? (typeof rest.children == 'string' ? rest.children : '');
+    const { getOrderedItems, getRovingProps } = useRovingTabindex.useRovingTabindex(focusValue);
+    const rovingProps = getRovingProps({
+        onKeyDown: (e) => {
+            rest?.onKeyDown?.(e);
+            const items = getOrderedItems();
+            let nextItem;
+            if (e.key === 'ArrowRight') {
+                nextItem = getNextFocusableValue(items, focusValue);
+            }
+            if (e.key === 'ArrowLeft') {
+                nextItem = getPrevFocusableValue(items, focusValue);
+            }
+            nextItem?.element.focus();
+        },
+    });
+    const mergedRefs = floatingUi_react.useMergeRefs([ref, rovingProps.ref]);
+    return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
+});
+
+exports.RovingTabindexItem = RovingTabindexItem;
+exports.getNextFocusableValue = getNextFocusableValue;
+exports.getPrevFocusableValue = getPrevFocusableValue;

package/dist/cjs/utilities/RovingTabIndex/RovingTabindexRoot.js

@@ -0,0 +1,66 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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({
+    elements: { current: new Map() },
+    getOrderedItems: () => [],
+    setFocusableValue: () => {
+        /* intentionally empty */
+    },
+    onShiftTab: () => {
+        /* intentionally empty */
+    },
+    focusableValue: null,
+});
+const RovingTabindexRoot = React.forwardRef(({ valueId, as = 'div', asChild, onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : as;
+    const [focusableValue, setFocusableValue] = React.useState(null);
+    const [isShiftTabbing, setIsShiftTabbing] = React.useState(false);
+    const elements = React.useRef(new Map());
+    const myRef = React.useRef();
+    const refs = floatingUi_react.useMergeRefs([ref, myRef]);
+    const getOrderedItems = () => {
+        if (!myRef.current)
+            return [];
+        const elementsFromDOM = Array.from(myRef.current.querySelectorAll('[data-roving-tabindex-item]'));
+        return Array.from(elements.current)
+            .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
+            .map(([value, element]) => ({ value, element }));
+    };
+    return (jsxRuntime.jsx(RovingTabindexContext.Provider, { value: {
+            elements,
+            getOrderedItems,
+            focusableValue,
+            setFocusableValue,
+            onShiftTab: () => {
+                setIsShiftTabbing(true);
+            },
+        }, children: jsxRuntime.jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
+                onBlur?.(e);
+                setIsShiftTabbing(false);
+            }, onFocus: (e) => {
+                onFocus?.(e);
+                if (e.target !== e.currentTarget)
+                    return;
+                const orderedItems = getOrderedItems();
+                if (orderedItems.length === 0)
+                    return;
+                if (focusableValue != null) {
+                    elements.current.get(focusableValue)?.focus();
+                }
+                else if (valueId != null) {
+                    elements.current.get(valueId)?.focus();
+                }
+                else {
+                    orderedItems.at(0)?.element.focus();
+                }
+            }, ref: refs }) }));
+});
+
+exports.RovingTabindexContext = RovingTabindexContext;
+exports.RovingTabindexRoot = RovingTabindexRoot;

package/dist/cjs/utilities/RovingTabIndex/useRovingTabindex.js

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var RovingTabindexRoot = require('./RovingTabindexRoot.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);
+    return {
+        getOrderedItems,
+        isFocusable: focusableValue === value,
+        getRovingProps: (props) => ({
+            ...props,
+            ref: (element) => {
+                if (element) {
+                    elements.current.set(value, element);
+                }
+                else {
+                    elements.current.delete(value);
+                }
+            },
+            onKeyDown: (e) => {
+                props?.onKeyDown?.(e);
+                if (e.shiftKey && e.key === 'Tab') {
+                    onShiftTab();
+                    return;
+                }
+            },
+            onFocus: (e) => {
+                props?.onFocus?.(e);
+                setFocusableValue(value);
+            },
+            ['data-roving-tabindex-item']: true,
+            tabIndex: focusableValue === value ? 0 : -1,
+        }),
+    };
+};
+
+exports.useRovingTabindex = useRovingTabindex;

package/dist/cjs/utilities/objectUtils.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+/**
+ * Returns a partial copy of an object omitting the keys specified.
+ * @param {Array} names an array of String property names to omit from the new object
+ * @param {Object} obj The object to copy from
+ * @return {Object} A new object with properties from `names` not on it.
+ * @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
+ */
+const omit = (names, obj) => {
+    const result = {};
+    const index = {};
+    let idx = 0;
+    const len = names.length;
+    while (idx < len) {
+        index[names[idx]] = 1;
+        idx += 1;
+    }
+    for (const prop in obj) {
+        if (!Object.prototype.hasOwnProperty.call(index, prop)) {
+            result[prop] = obj[prop];
+        }
+    }
+    return result;
+};
+
+exports.omit = omit;

package/dist/cjs/utilities/useDebounce.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var React = require('react');
+
+function useDebounce(callback, delay = 50) {
+    const timeoutRef = React.useRef(null);
+    React.useEffect(() => {
+        // Cleanup the previous timeout on re-render
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const debouncedCallback = (...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            callback(...args);
+        }, delay);
+    };
+    return debouncedCallback;
+}
+
+module.exports = useDebounce;

package/dist/cjs/utilities/utility.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var utilityClasses = {"visuallyHidden":"fds-utility-visuallyHidden-1bd8d932","focusable":"fds-utility-focusable-1bd8d932"};
+
+module.exports = utilityClasses;

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Accordion.module.css.js';
+
+const Accordion = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsx("div", { className: clsx(classes.accordion, classes[color], {
+        [classes.border]: border,
+    }, className), ref: ref, ...rest })));
+Accordion.displayName = 'Accordion';
+
+export { Accordion };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"accordion":"fds-accordion-accordion-cfa9e81d","border":"fds-accordion-border-cfa9e81d","expandIcon":"fds-accordion-expandIcon-cfa9e81d","content":"fds-accordion-content-cfa9e81d","header":"fds-accordion-header-cfa9e81d","accordionButton":"fds-accordion-accordionButton-cfa9e81d","item":"fds-accordion-item-cfa9e81d","neutral":"fds-accordion-neutral-cfa9e81d","subtle":"fds-accordion-subtle-cfa9e81d","first":"fds-accordion-first-cfa9e81d","second":"fds-accordion-second-cfa9e81d","third":"fds-accordion-third-cfa9e81d","open":"fds-accordion-open-cfa9e81d","filled":"fds-accordion-filled-cfa9e81d"};
+
+export { classes as default };

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { forwardRef, useContext } from 'react';
+import classes from '../Accordion.module.css.js';
+import { AccordionItemContext } from '../AccordionItem/AccordionItem.js';
+import { AnimateHeight } from '../../../utilities/AnimateHeight/AnimateHeight.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+
+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: 'small', children: jsx("div", { ref: ref, className: clsx(classes.content, className), ...rest, children: children }) }) }));
+});
+AccordionContent.displayName = 'AccordionContent';
+
+export { AccordionContent };

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDownIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { forwardRef, useContext } from 'react';
+import classes from '../Accordion.module.css.js';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import { AccordionItemContext } from '../AccordionItem/AccordionItem.js';
+import { Heading } from '../../Typography/Heading/Heading.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+
+const AccordionHeader = 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: 'xsmall', level: level, className: clsx(classes.header, className), ...rest, children: jsxs("button", { type: 'button', className: clsx(classes.accordionButton, utilityClasses.focusable), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: classes.expandIcon }), jsx(Paragraph, { asChild: true, size: 'small', children: jsx("span", { children: children }) })] }) }));
+});
+AccordionHeader.displayName = 'AccordionHeader';
+
+export { AccordionHeader };

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { createContext, forwardRef, useState, useId } from 'react';
+import classes from '../Accordion.module.css.js';
+
+const AccordionItemContext = createContext(null);
+const AccordionItem = forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const contentId = useId();
+    return (jsx("div", { className: clsx(classes.item, {
+            [classes.open]: open ?? internalOpen,
+        }, className), ref: ref, ...rest, children: jsx(AccordionItemContext.Provider, { value: {
+                open: open ?? internalOpen,
+                toggleOpen: () => {
+                    if (open === undefined) {
+                        setInternalOpen((iOpen) => !iOpen);
+                    }
+                },
+                contentId: contentId,
+            }, children: children }) }));
+});
+AccordionItem.displayName = 'AccordionItem';
+
+export { AccordionItem, AccordionItemContext };

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

@@ -0,0 +1,15 @@
+'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';
+
+const Accordion = Accordion$1;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+Accordion.Item = AccordionItem;
+Accordion.Header.displayName = 'Accordion.Header';
+Accordion.Content.displayName = 'Accordion.Content';
+Accordion.Item.displayName = 'Accordion.Item';
+
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem };

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

@@ -0,0 +1,26 @@
+'use client';
+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/clsx.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const icons = {
+    info: {
+        Icon: InformationSquareFillIcon,
+        title: 'Informasjon',
+    },
+    warning: { Icon: ExclamationmarkTriangleFillIcon, title: 'Advarsel' },
+    success: { Icon: CheckmarkCircleFillIcon, title: 'Suksess' },
+    danger: {
+        Icon: XMarkOctagonFillIcon,
+        title: 'Feil',
+    },
+};
+const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
+    const { Icon, title } = icons[severity];
+    return (jsx("div", { ref: ref, className: clsx('fds-alert', `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, className: 'fds-alert__content', children: jsx("span", { children: children }) })] }) }));
+});
+Alert.displayName = 'Alert';
+
+export { Alert };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Box.module.css.js';
+
+const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, as = 'div', className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { ref: ref, className: clsx(shadow && classes[shadow + 'Shadow'], borderRadius && classes[borderRadius + 'BorderRadius'], borderColor && classes[borderColor + 'BorderColor'], classes[background + 'Background'], className), ...rest, children: children }));
+});
+Box.displayName = 'Box';
+
+export { Box };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"xsmallShadow":"fds-box-xsmallShadow-22dfa097","smallShadow":"fds-box-smallShadow-22dfa097","mediumShadow":"fds-box-mediumShadow-22dfa097","largeShadow":"fds-box-largeShadow-22dfa097","xlargeShadow":"fds-box-xlargeShadow-22dfa097","defaultBorderColor":"fds-box-defaultBorderColor-22dfa097","subtleBorderColor":"fds-box-subtleBorderColor-22dfa097","strongBorderColor":"fds-box-strongBorderColor-22dfa097","smallBorderRadius":"fds-box-smallBorderRadius-22dfa097","mediumBorderRadius":"fds-box-mediumBorderRadius-22dfa097","largeBorderRadius":"fds-box-largeBorderRadius-22dfa097","xlargeBorderRadius":"fds-box-xlargeBorderRadius-22dfa097","xxlargeBorderRadius":"fds-box-xxlargeBorderRadius-22dfa097","xxxlargeBorderRadius":"fds-box-xxxlargeBorderRadius-22dfa097","xxxxlargeBorderRadius":"fds-box-xxxxlargeBorderRadius-22dfa097","fullBorderRadius":"fds-box-fullBorderRadius-22dfa097","defaultBackground":"fds-box-defaultBackground-22dfa097","subtleBackground":"fds-box-subtleBackground-22dfa097"};
+
+export { classes as default };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import utilityClasses from '../../utilities/utility.module.css.js';
+import classes from './Button.module.css.js';
+
+/**
+ * Button used for interaction
+ */
+const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { ref: ref, type: type, className: clsx(classes.button, utilityClasses.focusable, classes[size], classes[variant], classes[color], { [classes.fullWidth]: fullWidth }, { [classes.onlyIcon]: icon }, className), ...rest, children: children }));
+});
+Button.displayName = 'Button';
+
+export { Button };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"button":"fds-button-button-13ece2ef","small":"fds-button-small-13ece2ef","medium":"fds-button-medium-13ece2ef","large":"fds-button-large-13ece2ef","fullWidth":"fds-button-fullWidth-13ece2ef","secondary":"fds-button-secondary-13ece2ef","tertiary":"fds-button-tertiary-13ece2ef","onlyIcon":"fds-button-onlyIcon-13ece2ef","primary":"fds-button-primary-13ece2ef","first":"fds-button-first-13ece2ef","second":"fds-button-second-13ece2ef","success":"fds-button-success-13ece2ef","danger":"fds-button-danger-13ece2ef","inverted":"fds-button-inverted-13ece2ef"};
+
+export { classes as default };

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import utilityClasses from '../../utilities/utility.module.css.js';
+import classes from './Card.module.css.js';
+
+const Card = forwardRef(({ color = 'neutral', as = 'div', isLink = false, asChild = false, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
+    return (jsx(Component, { ref: ref, className: clsx(classes.card, classes[color], isLink && classes.linkCard, isLink && utilityClasses.focusable, className), ...rest }));
+});
+Card.displayName = 'Card';
+
+export { Card };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"media":"fds-card-media-cae746f","footer":"fds-card-footer-cae746f","content":"fds-card-content-cae746f","header":"fds-card-header-cae746f","card":"fds-card-card-cae746f","linkCard":"fds-card-linkCard-cae746f","neutral":"fds-card-neutral-cae746f","subtle":"fds-card-subtle-cae746f","first":"fds-card-first-cae746f","second":"fds-card-second-cae746f","third":"fds-card-third-cae746f"};
+
+export { classes as default };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Card.module.css.js';
+
+const CardContent = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { className: clsx(classes.content, className), ref: ref, ...rest }));
+});
+CardContent.displayName = 'CardContent';
+
+export { CardContent };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Card.module.css.js';
+
+const CardFooter = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { className: clsx(classes.footer, className), ref: ref, ...rest }));
+});
+CardFooter.displayName = 'CardFooter';
+
+export { CardFooter };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Card.module.css.js';
+
+const CardHeader = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { className: clsx(classes.header, className), ref: ref, ...rest }));
+});
+CardHeader.displayName = 'CardHeader';
+
+export { CardHeader };

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import classes from './Card.module.css.js';
+
+const CardMedia = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    return (jsx(Component, { className: clsx(classes.media, className), ref: ref, ...rest }));
+});
+CardMedia.displayName = 'CardMedia';
+
+export { CardMedia };

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

@@ -0,0 +1,18 @@
+'use client';
+import { CardHeader } from './CardHeader.js';
+import { CardContent } from './CardContent.js';
+import { CardFooter } from './CardFooter.js';
+import { Card as Card$1 } from './Card.js';
+import { CardMedia } from './CardMedia.js';
+
+const Card = Card$1;
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+Card.Media = CardMedia;
+Card.Header.displayName = 'Card.Header';
+Card.Content.displayName = 'Card.Content';
+Card.Footer.displayName = 'Card.Footer';
+Card.Media.displayName = 'Card.Media';
+
+export { Card, CardContent, CardFooter, CardHeader, CardMedia };

package/dist/esm/components/Chip/Chip.module.css.js

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"chip":"fds-chip-chip-b1f59eef","chipButton":"fds-chip-chipButton-b1f59eef","label":"fds-chip-label-b1f59eef","removable":"fds-chip-removable-b1f59eef","xMark":"fds-chip-xMark-b1f59eef","small":"fds-chip-small-b1f59eef","medium":"fds-chip-medium-b1f59eef","large":"fds-chip-large-b1f59eef","icon":"fds-chip-icon-b1f59eef","spacing":"fds-chip-spacing-b1f59eef","checkmarkIcon":"fds-chip-checkmarkIcon-b1f59eef","groupContainer":"fds-chip-groupContainer-b1f59eef"};
+
+export { classes as default };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, Children, isValidElement } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from '../Chip.module.css.js';
+
+const ChipGroupContext = createContext(null);
+const Group = forwardRef(({ children, size = 'medium', className, ...rest }, ref) => (jsx("ul", { ref: ref, className: clsx(classes.groupContainer, classes[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';
+
+export { ChipGroupContext, Group };

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { XMarkIcon } from '@navikt/aksel-icons';
+import classes from '../Chip.module.css.js';
+import { ChipGroupContext } from '../Group/Group.js';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+
+const RemovableChip = forwardRef(({ children, size = 'medium', className, ...rest }, ref) => {
+    const group = useContext(ChipGroupContext);
+    return (jsx("button", { type: 'button', ref: ref, className: clsx(classes.chipButton, utilityClasses.focusable, classes[group?.size || size], classes.removable, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [jsx("span", { children: children }), jsx("span", { className: classes.xMark, "aria-hidden": true, children: jsx(XMarkIcon, { className: classes.icon }) })] }) }) }));
+});
+RemovableChip.displayName = 'ChipRemovable';
+
+export { RemovableChip };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { CheckmarkIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { ChipGroupContext } from '../Group/Group.js';
+import utilityClasses from '../../../utilities/utility.module.css.js';
+import classes from '../Chip.module.css.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+
+const ToggleChip = forwardRef(({ children, size = 'medium', selected = false, checkmark = true, className, ...rest }, ref) => {
+    const shouldDisplayCheckmark = checkmark && selected;
+    const group = useContext(ChipGroupContext);
+    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(classes.chipButton, utilityClasses.focusable, classes[group?.size || size], { [classes.spacing]: shouldDisplayCheckmark }, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: classes.checkmarkIcon, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
+});
+ToggleChip.displayName = 'ChipToggle';
+
+export { ToggleChip };