@digdir/designsystemet-react 0.52.0-alpha.0

package/dist/esm/components/Modal/ModalRoot.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useState } from 'react';
+
+const ModalContext = createContext({
+    modalRef: { current: null },
+    open: false,
+    setOpen: () => { },
+});
+const ModalRoot = ({ children }) => {
+    const modalRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    return (jsx(ModalContext.Provider, { value: {
+            closeModal: () => { },
+            modalRef,
+            open,
+            setOpen,
+        }, children: children }));
+};
+ModalRoot.displayName = 'ModalRoot';
+
+export { ModalContext, ModalRoot };

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { ModalContext } from '../ModalRoot.js';
+import { Button } from '../../Button/Button.js';
+
+const ModalTrigger = forwardRef(({ ...rest }, ref) => {
+    const { modalRef, open } = useContext(ModalContext);
+    return (jsx(Button, { ref: ref, onClick: () => modalRef?.current?.showModal(), "aria-expanded": open, "aria-haspopup": 'dialog', ...rest }));
+});
+ModalTrigger.displayName = 'ModalTrigger';
+
+export { ModalTrigger };

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

@@ -0,0 +1,23 @@
+'use client';
+import { ModalRoot } from './ModalRoot.js';
+import { ModalContent } from './ModalContent/ModaContent.js';
+import { ModalDialog } from './ModalDialog.js';
+import { ModalFooter } from './ModalFooter/ModalFooter.js';
+import { ModalHeader } from './ModalHeader/ModalHeader.js';
+import { ModalTrigger } from './ModalTrigger/ModalTrigger.js';
+
+const Modal = ModalDialog;
+Modal.Root = ModalRoot;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;
+Modal.Header = ModalHeader;
+Modal.Trigger = ModalTrigger;
+Modal.Dialog = ModalDialog;
+Modal.Root.displayName = 'Modal.Root';
+Modal.Dialog.displayName = 'Modal.Dialog';
+Modal.Footer.displayName = 'Modal.Footer';
+Modal.Header.displayName = 'Modal.Header';
+Modal.Content.displayName = 'Modal.Content';
+Modal.Trigger.displayName = 'Modal.Trigger';
+
+export { Modal, ModalContent, ModalDialog, ModalFooter, ModalHeader, ModalTrigger };

package/dist/esm/components/Modal/useModalState.js

@@ -0,0 +1,28 @@
+'use client';
+import { useState, useEffect } from 'react';
+
+const useModalState = (modalRef) => {
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        if (!modalRef?.current)
+            return;
+        if (modalRef.current?.open)
+            setIsOpen(true);
+        const observer = new MutationObserver(() => {
+            if (modalRef.current?.open)
+                setIsOpen(true);
+            else
+                setIsOpen(false);
+        });
+        observer.observe(modalRef.current, {
+            attributes: true,
+            attributeFilter: ['open'],
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [modalRef]);
+    return isOpen;
+};
+
+export { useModalState };

package/dist/esm/components/Modal/useScrollLock.js

@@ -0,0 +1,27 @@
+'use client';
+import { useEffect } from 'react';
+
+function useScrollLock(modalRef, bodyClass) {
+    useEffect(() => {
+        if (!modalRef.current)
+            return;
+        if (modalRef.current.open)
+            document.body.classList.add(bodyClass);
+        const observer = new MutationObserver(() => {
+            if (modalRef.current?.open)
+                document.body.classList.add(bodyClass);
+            else
+                document.body.classList.remove(bodyClass);
+        });
+        observer.observe(modalRef.current, {
+            attributes: true,
+            attributeFilter: ['open'],
+        });
+        return () => {
+            observer.disconnect();
+            document.body.classList.remove(bodyClass);
+        };
+    }, [bodyClass, modalRef]);
+}
+
+export { useScrollLock };

package/dist/esm/components/Pagination/Pagination.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
+import { PaginationRoot } from './PaginationRoot.js';
+import { PaginationContent } from './PaginationContent.js';
+import { PaginationItem } from './PaginationItem.js';
+import { PaginationButton } from './PaginationButton.js';
+import { PaginationEllipsis } from './PaginationEllipsis.js';
+import classes from './Pagination.module.css.js';
+import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
+import { usePagination } from './usePagination.js';
+
+const Pagination = forwardRef(({ nextLabel = '', previousLabel = '', size = 'medium', compact = false, hideLabels = false, currentPage = 1, totalPages, onChange, itemLabel = (num) => `Side ${num}`, ...rest }, ref) => {
+    const { pages, showNextPage, showPreviousPage } = usePagination({
+        compact,
+        currentPage,
+        totalPages,
+    });
+    return (jsx(PaginationRoot, { ref: ref, "aria-label": 'Pagination', size: size, compact: compact, ...rest, children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsxs(PaginationPrevious, { className: clsx({ [classes.hidden]: !showPreviousPage }), onClick: () => {
+                            onChange(currentPage - 1);
+                        }, "aria-label": previousLabel, children: [jsx(ChevronLeftIcon, { "aria-hidden": true }), !hideLabels && previousLabel] }) }), pages.map((page, i) => (jsx(PaginationItem, { children: page === 'ellipsis' ? (jsx(PaginationEllipsis, {})) : (jsx(PaginationButton, { "aria-current": currentPage === page, isActive: currentPage === page, "aria-label": itemLabel(page), onClick: () => {
+                            onChange(page);
+                        }, children: page })) }, `${page}${i}`))), jsx(PaginationItem, { children: jsxs(PaginationNext, { "aria-label": nextLabel, onClick: () => {
+                            onChange(currentPage + 1);
+                        }, className: clsx({
+                            [classes.hidden]: !showNextPage,
+                        }), children: [!hideLabels && nextLabel, jsx(ChevronRightIcon, { "aria-hidden": true })] }) })] }) }));
+});
+Pagination.displayName = 'Pagination';
+
+export { Pagination };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"pagination":"fds-pagination-pagination-796b1b6f","hidden":"fds-pagination-hidden-796b1b6f","small":"fds-pagination-small-796b1b6f","medium":"fds-pagination-medium-796b1b6f","large":"fds-pagination-large-796b1b6f","listitem":"fds-pagination-listitem-796b1b6f","compact":"fds-pagination-compact-796b1b6f","ellipsis":"fds-pagination-ellipsis-796b1b6f"};
+
+export { classes as default };

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { PaginationContext } from './PaginationRoot.js';
+import { Button } from '../Button/Button.js';
+
+const PaginationButton = forwardRef(({ isActive, ...rest }, ref) => {
+    const { size } = useContext(PaginationContext);
+    return (jsx(Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive, color: 'first', size: size, ...rest }));
+});
+
+export { PaginationButton };

package/dist/esm/components/Pagination/PaginationContent.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Pagination.module.css.js';
+import { PaginationContext } from './PaginationRoot.js';
+
+const PaginationContent = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'ul';
+    const { size } = useContext(PaginationContext);
+    return (jsx(Component, { ref: ref, className: clsx(classes.pagination, classes[size], className), ...rest }));
+});
+
+export { PaginationContent };

package/dist/esm/components/Pagination/PaginationEllipsis.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Pagination.module.css.js';
+import { PaginationContext } from './PaginationRoot.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const PaginationEllipsis = forwardRef(({ className, ...rest }, ref) => {
+    const { size } = useContext(PaginationContext);
+    return (jsx(Paragraph, { ref: ref, className: clsx(classes.ellipsis, className), size: size, ...rest, children: "\u2026" }));
+});
+var PaginationEllipsis$1 = PaginationEllipsis;
+
+export { PaginationEllipsis, PaginationEllipsis$1 as default };

package/dist/esm/components/Pagination/PaginationItem.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { PaginationContext } from './PaginationRoot.js';
+import classes from './Pagination.module.css.js';
+
+const PaginationItem = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'li';
+    const { size, compact } = useContext(PaginationContext);
+    return (jsx(Component, { ref: ref, className: clsx(classes.listitem, classes[size], compact && classes.compact, className), ...rest }));
+});
+var PaginationItem$1 = PaginationItem;
+
+export { PaginationItem, PaginationItem$1 as default };

package/dist/esm/components/Pagination/PaginationNextPrev.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { PaginationButton } from './PaginationButton.js';
+
+const PaginationNext = forwardRef(({ ...rest }, ref) => {
+    return (jsx(PaginationButton, { ref: ref, "aria-label": rest.children != null ? undefined : 'Neste side', ...rest }));
+});
+const PaginationPrevious = forwardRef(({ ...rest }, ref) => {
+    return (jsx(PaginationButton, { ref: ref, "aria-label": rest.children != null ? undefined : 'Forrige side', ...rest }));
+});
+
+export { PaginationNext, PaginationPrevious };

package/dist/esm/components/Pagination/PaginationRoot.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { createContext, forwardRef } from 'react';
+
+const PaginationContext = createContext({
+    size: 'medium',
+    compact: false,
+});
+const PaginationRoot = forwardRef(({ asChild, size = 'medium', compact = false, ...rest }, ref) => {
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'nav';
+    return (jsx(PaginationContext.Provider, { value: { size, compact }, children: jsx(Component, { ref: ref, "aria-label": 'Pagination', ...rest }) }));
+});
+var PaginationRoot$1 = PaginationRoot;
+
+export { PaginationContext, PaginationRoot, PaginationRoot$1 as default };

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

@@ -0,0 +1,26 @@
+'use client';
+import { Pagination as Pagination$1 } from './Pagination.js';
+import { PaginationContent } from './PaginationContent.js';
+import PaginationEllipsis from './PaginationEllipsis.js';
+import PaginationItem from './PaginationItem.js';
+import { PaginationButton } from './PaginationButton.js';
+import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
+import PaginationRoot from './PaginationRoot.js';
+
+const Pagination = Pagination$1;
+Pagination.Root = PaginationRoot;
+Pagination.Content = PaginationContent;
+Pagination.Item = PaginationItem;
+Pagination.Button = PaginationButton;
+Pagination.Ellipsis = PaginationEllipsis;
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+Pagination.Root.displayName = 'Pagination.Root';
+Pagination.Content.displayName = 'Pagination.Content';
+Pagination.Item.displayName = 'Pagination.Item';
+Pagination.Button.displayName = 'Pagination.Button';
+Pagination.Ellipsis.displayName = 'Pagination.Ellipsis';
+Pagination.Previous.displayName = 'Pagination.Previous';
+Pagination.Next.displayName = 'Pagination.Next';
+
+export { Pagination, PaginationButton, PaginationContent, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PaginationRoot };

package/dist/esm/components/Pagination/usePagination.js

@@ -0,0 +1,63 @@
+'use client';
+import { useState, useEffect } from 'react';
+
+const getSteps = ({ compact, currentPage, totalPages, }) => {
+    /**  Number of always visible pages at the start and end. */
+    const boundaryCount = 1;
+    /** Number of always visible pages before and after the current page. */
+    const siblingCount = compact ? 0 : 1;
+    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    if (totalPages <= (boundaryCount + siblingCount) * 2 + 3)
+        return range(1, totalPages);
+    const startPages = range(1, boundaryCount);
+    const endPages = range(totalPages - boundaryCount + 1, totalPages);
+    const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = siblingsStart + siblingCount * 2;
+    return [
+        ...startPages,
+        siblingsStart - (startPages[startPages.length - 1] ?? 0) === 2
+            ? siblingsStart - 1
+            : 'ellipsis',
+        ...range(siblingsStart, siblingsEnd),
+        (endPages[0] ?? totalPages + 1) - siblingsEnd === 2
+            ? siblingsEnd + 1
+            : 'ellipsis',
+        ...endPages,
+    ];
+};
+/** Hook to help manage pagination state */
+const usePagination = ({ totalPages, currentPage: currentPageProps = 1, compact, }) => {
+    const [currentPage, setCurrentPage] = useState(currentPageProps);
+    useEffect(() => {
+        setCurrentPage(currentPageProps);
+    }, [currentPageProps]);
+    const pages = getSteps({ currentPage, totalPages, compact });
+    const showNextPage = currentPage < totalPages;
+    const showPreviousPage = currentPage !== 1;
+    const nextPage = () => {
+        setCurrentPage(currentPage + 1 <= totalPages ? currentPage + 1 : totalPages);
+    };
+    const previousPage = () => {
+        setCurrentPage(currentPage - 1 > 0 ? currentPage - 1 : 1);
+    };
+    return {
+        /** Number of steps */
+        pages,
+        /** Current active page  */
+        currentPage,
+        /** Set active page */
+        setCurrentPage,
+        /** Decrements active page by 1 */
+        previousPage,
+        /** Increments active page by 1 */
+        nextPage,
+        /** Total amount of pages */
+        totalPages,
+        /** Indication if next page action should be shown or not */
+        showNextPage,
+        /** Indication if previous page action should be shown or not */
+        showPreviousPage,
+    };
+};
+
+export { usePagination };

package/dist/esm/components/Popover/Popover.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useRef, useState, useId } from 'react';
+
+const Popover = ({ children, placement = 'top', open, variant = 'default', size = 'medium', portal, onOpenChange, onClose, ...rest }) => {
+    const triggerRef = useRef(null);
+    const [internalOpen, setInternalOpen] = useState(open ?? false);
+    const randomPopoverId = useId();
+    const [popoverId, setPopoverId] = useState(randomPopoverId);
+    const randomTriggerId = useId();
+    const [triggerId, setTriggerId] = useState(randomTriggerId);
+    const isControlled = typeof open === 'boolean';
+    React.useEffect(() => {
+        setInternalOpen(open ?? false);
+    }, [open]);
+    const anchorEl = rest.anchorEl ?? triggerRef.current;
+    return (jsx(PopoverContext.Provider, { value: {
+            triggerRef,
+            anchorEl,
+            portal,
+            internalOpen,
+            isControlled,
+            setInternalOpen,
+            size,
+            variant,
+            placement,
+            onOpenChange,
+            onClose,
+            popoverId,
+            setPopoverId,
+            triggerId,
+            setTriggerId,
+        }, children: children }));
+};
+const PopoverContext = React.createContext({
+    size: 'small',
+    variant: 'default',
+    anchorEl: null,
+    placement: 'top',
+    triggerRef: { current: null },
+    internalOpen: false,
+    setInternalOpen: () => { },
+});
+Popover.displayName = 'Popover';
+
+export { Popover, PopoverContext };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"popover":"fds-popover-popover-baea8f63","small":"fds-popover-small-baea8f63","medium":"fds-popover-medium-baea8f63","large":"fds-popover-large-baea8f63","default":"fds-popover-default-baea8f63","info":"fds-popover-info-baea8f63","warning":"fds-popover-warning-baea8f63","danger":"fds-popover-danger-baea8f63","arrow":"fds-popover-arrow-baea8f63","top":"fds-popover-top-baea8f63","bottom":"fds-popover-bottom-baea8f63","right":"fds-popover-right-baea8f63","left":"fds-popover-left-baea8f63"};
+
+export { classes as default };

package/dist/esm/components/Popover/PopoverContent.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { forwardRef, useContext, useRef, useEffect, useMemo } from 'react';
+import { useFloating, useInteractions, useFocus, useClick, useDismiss, useRole, useMergeRefs, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { PopoverContext } from './Popover.js';
+import classes from './Popover.module.css.js';
+import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { arrow } from '../../node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const ARROW_HEIGHT = 7;
+const ARROW_GAP = 4;
+const ARROW_PLACEMENT = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+const PopoverContent = forwardRef(({ className, children, style, id, ...rest }, ref) => {
+    const { portal, internalOpen, size, isControlled, variant, placement, setInternalOpen, onClose, onOpenChange, anchorEl, popoverId, setPopoverId, triggerId, } = useContext(PopoverContext);
+    const Container = portal ? FloatingPortal : React.Fragment;
+    const floatingEl = useRef(null);
+    const arrowRef = useRef(null);
+    useEffect(() => {
+        id && setPopoverId?.(id);
+    }, [id, setPopoverId]);
+    const { context, update, refs, floatingStyles, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = useFloating({
+        placement,
+        open: internalOpen,
+        onOpenChange: (localOpen) => {
+            onOpenChange && onOpenChange(localOpen);
+            if (!localOpen)
+                onClose && onClose();
+            if (!isControlled)
+                setInternalOpen(localOpen);
+        },
+        whileElementsMounted: autoUpdate,
+        elements: {
+            reference: anchorEl,
+            floating: floatingEl.current,
+        },
+        middleware: [
+            offset(ARROW_HEIGHT + ARROW_GAP),
+            flip({
+                fallbackAxisSideDirection: 'start',
+            }),
+            shift(),
+            arrow({
+                element: arrowRef,
+            }),
+        ],
+    });
+    const { getFloatingProps } = useInteractions([
+        useFocus(context),
+        useClick(context),
+        useDismiss(context),
+        useRole(context),
+    ]);
+    const floatingRef = useMergeRefs([refs.setFloating, ref]);
+    useIsomorphicLayoutEffect(() => {
+        refs.setReference(anchorEl);
+        if (!refs.reference.current || !refs.floating.current || !internalOpen)
+            return;
+        const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update);
+        return () => cleanup();
+    }, [refs.floating, refs.reference, update, anchorEl, refs, internalOpen]);
+    const arrowPlacement = useMemo(() => {
+        return ARROW_PLACEMENT[flPlacement.split('-')[0]];
+    }, [flPlacement]);
+    return (jsx(Fragment, { children: internalOpen && (jsx(Container, { children: jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { ref: floatingEl, className: clsx(classes.popover, classes[variant], classes[size], className), "data-placement": flPlacement, ...getFloatingProps({
+                        ref: floatingRef,
+                        tabIndex: undefined,
+                    }), style: { ...floatingStyles, ...style }, id: popoverId, "aria-labelledby": triggerId, ...rest, children: [children, jsx("div", { ref: arrowRef, className: clsx(classes.arrow, classes[arrowPlacement]), style: {
+                                height: ARROW_HEIGHT,
+                                width: ARROW_HEIGHT,
+                                ...(arrowX != null ? { left: arrowX } : {}),
+                                ...(arrowY != null ? { top: arrowY } : {}),
+                                ...(arrowPlacement ? { [arrowPlacement]: -4.5 } : {}),
+                            } })] }) }) })) }));
+});
+PopoverContent.displayName = 'Popover.Content';
+
+export { PopoverContent };

package/dist/esm/components/Popover/PopoverTrigger.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { PopoverContext } from './Popover.js';
+import { Button } from '../Button/Button.js';
+
+const PopoverTrigger = forwardRef(({ id, ...rest }, ref) => {
+    const { triggerRef, internalOpen, setInternalOpen, isControlled, popoverId, triggerId, setTriggerId, } = useContext(PopoverContext);
+    const mergedRefs = useMergeRefs([ref, triggerRef]);
+    useEffect(() => {
+        id && setTriggerId?.(id);
+    }, [id, setTriggerId]);
+    return (jsx(Button, { ref: mergedRefs, onClick: () => {
+            if (!isControlled)
+                setInternalOpen(!internalOpen);
+        }, "aria-expanded": internalOpen, role: 'button', "aria-controls": internalOpen ? popoverId : undefined, id: triggerId, type: 'button', ...rest }));
+});
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export { PopoverTrigger };

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

@@ -0,0 +1,12 @@
+'use client';
+import { Popover as Popover$1 } from './Popover.js';
+import { PopoverContent } from './PopoverContent.js';
+import { PopoverTrigger } from './PopoverTrigger.js';
+
+const Popover = Popover$1;
+Popover.Content = PopoverContent;
+Popover.Trigger = PopoverTrigger;
+Popover.Content.displayName = 'Popover.Content';
+Popover.Trigger.displayName = 'Popover.Trigger';
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/esm/components/Skeleton/Circle/Circle.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from '../Skeleton.module.css.js';
+import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
+
+/**  Skeleton component used for indicating loading elements of circular shape */
+const Circle = ({ width, height, className, children, style, ...rest }) => {
+    const ref = useSynchronizedAnimation(classes['opacity-fade']);
+    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.circle, { [classes.hasChildren]: Boolean(children) }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+};
+Circle.displayName = 'SkeletonCircle';
+
+export { Circle };

package/dist/esm/components/Skeleton/Rectangle/Rectangle.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from '../Skeleton.module.css.js';
+import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
+
+/**  Skeleton component used for indicating loading elements of rectangle shape */
+const Rectangle = ({ width, height, className, children, style, ...rest }) => {
+    const ref = useSynchronizedAnimation(classes['opacity-fade']);
+    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.rectangle, {
+            [classes.hasChildren]: Boolean(children),
+        }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+};
+Rectangle.displayName = 'SkeletonRectangle';
+
+export { Rectangle };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"skeleton":"fds-skeleton-skeleton-14bc844f","opacity-fade":"fds-skeleton-opacity-fade-14bc844f","circle":"fds-skeleton-circle-14bc844f","rectangle":"fds-skeleton-rectangle-14bc844f","text":"fds-skeleton-text-14bc844f","hasChildren":"fds-skeleton-hasChildren-14bc844f"};
+
+export { classes as default };

package/dist/esm/components/Skeleton/Text/Text.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import classes from '../Skeleton.module.css.js';
+import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
+
+/**  Skeleton component used for indicating loading elements of text */
+const Text = ({ width, height, className, style, children, ...rest }) => {
+    const ref = useSynchronizedAnimation(classes['opacity-fade']);
+    return (jsx("div", { ref: ref, className: clsx(classes.skeleton, classes.text, {
+            [classes.hasChildren]: Boolean(children),
+        }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest, children: children }));
+};
+Text.displayName = 'SkeletonText';
+
+export { Text };

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

@@ -0,0 +1,15 @@
+'use client';
+import { Circle } from './Circle/Circle.js';
+import { Rectangle } from './Rectangle/Rectangle.js';
+import { Text } from './Text/Text.js';
+
+const Skeleton = {
+    Circle: Circle,
+    Rectangle: Rectangle,
+    Text: Text,
+};
+Skeleton.Circle.displayName = 'Skeleton.Circle';
+Skeleton.Rectangle.displayName = 'Skeleton.Rectangle';
+Skeleton.Text.displayName = 'Skeleton.Text';
+
+export { Skeleton, Circle as SkeletonCircle, Rectangle as SkeletonRectangle, Text as SkeletonText };

package/dist/esm/components/SkipLink/SkipLink.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import utilityClasses from '../../utilities/utility.module.css.js';
+import classes from './SkipLink.module.css.js';
+
+const SkipLink = ({ href, children, className, ...rest }) => {
+    return (jsx("a", { href: href, className: clsx(utilityClasses.visuallyHidden, classes.skiplink, className), ...rest, children: children }));
+};
+SkipLink.displayName = 'SkipLink';
+
+export { SkipLink };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"skiplink":"fds-skiplink-skiplink-fcabcecf"};
+
+export { classes as default };

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import classes from './Spinner.module.css.js';
+import { useSynchronizedAnimation } from '../../hooks/useSynchronizedAnimation.js';
+
+const sizeMap = {
+    xxsmall: 13,
+    xsmall: 20,
+    small: 27,
+    medium: 40,
+    large: 56,
+    xlarge: 79,
+};
+/**  Spinner component used for indicating busy or indeterminate loading */
+const Spinner = ({ title, size = 'medium', variant = 'default', className, style, ...rest }) => {
+    const svgRef = useSynchronizedAnimation(classes['rotate-animation']);
+    const strokeRef = useSynchronizedAnimation(classes['stroke-animation']);
+    return (jsxs("svg", { className: clsx(classes.spinner, className), style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx(classes.background, variant === 'inverted' && classes.invertedBackground), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(classes.spinnerCircle, classes[variant]), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+};
+Spinner.displayName = 'Spinner';
+
+export { Spinner };