@digdir/designsystemet-react 0.52.0-alpha.0

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

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var React = require('react');
+
+const useModalState = (modalRef) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    React.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;
+};
+
+exports.useModalState = useModalState;

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

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+var React = require('react');
+
+function useScrollLock(modalRef, bodyClass) {
+    React.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]);
+}
+
+exports.useScrollLock = useScrollLock;

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

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

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+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"};
+
+module.exports = classes;

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

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

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Pagination_module = require('./Pagination.module.css.js');
+var PaginationRoot = require('./PaginationRoot.js');
+
+const PaginationContent = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'ul';
+    const { size } = React.useContext(PaginationRoot.PaginationContext);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Pagination_module.pagination, Pagination_module[size], className), ...rest }));
+});
+
+exports.PaginationContent = PaginationContent;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Pagination_module = require('./Pagination.module.css.js');
+var PaginationRoot = require('./PaginationRoot.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+
+const PaginationEllipsis = React.forwardRef(({ className, ...rest }, ref) => {
+    const { size } = React.useContext(PaginationRoot.PaginationContext);
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, className: clsx.clsx(Pagination_module.ellipsis, className), size: size, ...rest, children: "\u2026" }));
+});
+var PaginationEllipsis$1 = PaginationEllipsis;
+
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.default = PaginationEllipsis$1;

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

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var React = require('react');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var PaginationRoot = require('./PaginationRoot.js');
+var Pagination_module = require('./Pagination.module.css.js');
+
+const PaginationItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'li';
+    const { size, compact } = React.useContext(PaginationRoot.PaginationContext);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Pagination_module.listitem, Pagination_module[size], compact && Pagination_module.compact, className), ...rest }));
+});
+var PaginationItem$1 = PaginationItem;
+
+exports.PaginationItem = PaginationItem;
+exports.default = PaginationItem$1;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PaginationButton = require('./PaginationButton.js');
+
+const PaginationNext = React.forwardRef(({ ...rest }, ref) => {
+    return (jsxRuntime.jsx(PaginationButton.PaginationButton, { ref: ref, "aria-label": rest.children != null ? undefined : 'Neste side', ...rest }));
+});
+const PaginationPrevious = React.forwardRef(({ ...rest }, ref) => {
+    return (jsxRuntime.jsx(PaginationButton.PaginationButton, { ref: ref, "aria-label": rest.children != null ? undefined : 'Forrige side', ...rest }));
+});
+
+exports.PaginationNext = PaginationNext;
+exports.PaginationPrevious = PaginationPrevious;

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

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var React = require('react');
+
+const PaginationContext = React.createContext({
+    size: 'medium',
+    compact: false,
+});
+const PaginationRoot = React.forwardRef(({ asChild, size = 'medium', compact = false, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : 'nav';
+    return (jsxRuntime.jsx(PaginationContext.Provider, { value: { size, compact }, children: jsxRuntime.jsx(Component, { ref: ref, "aria-label": 'Pagination', ...rest }) }));
+});
+var PaginationRoot$1 = PaginationRoot;
+
+exports.PaginationContext = PaginationContext;
+exports.PaginationRoot = PaginationRoot;
+exports.default = PaginationRoot$1;

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

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var Pagination$1 = require('./Pagination.js');
+var PaginationContent = require('./PaginationContent.js');
+var PaginationEllipsis = require('./PaginationEllipsis.js');
+var PaginationItem = require('./PaginationItem.js');
+var PaginationButton = require('./PaginationButton.js');
+var PaginationNextPrev = require('./PaginationNextPrev.js');
+var PaginationRoot = require('./PaginationRoot.js');
+
+const Pagination = Pagination$1.Pagination;
+Pagination.Root = PaginationRoot.default;
+Pagination.Content = PaginationContent.PaginationContent;
+Pagination.Item = PaginationItem.default;
+Pagination.Button = PaginationButton.PaginationButton;
+Pagination.Ellipsis = PaginationEllipsis.default;
+Pagination.Previous = PaginationNextPrev.PaginationPrevious;
+Pagination.Next = PaginationNextPrev.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';
+
+exports.PaginationContent = PaginationContent.PaginationContent;
+exports.PaginationEllipsis = PaginationEllipsis.default;
+exports.PaginationItem = PaginationItem.default;
+exports.PaginationButton = PaginationButton.PaginationButton;
+exports.PaginationNext = PaginationNextPrev.PaginationNext;
+exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
+exports.PaginationRoot = PaginationRoot.default;
+exports.Pagination = Pagination;

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

@@ -0,0 +1,65 @@
+'use client';
+'use strict';
+
+var React = require('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] = React.useState(currentPageProps);
+    React.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,
+    };
+};
+
+exports.usePagination = usePagination;

package/dist/cjs/components/Popover/Popover.js

@@ -0,0 +1,68 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Popover = ({ children, placement = 'top', open, variant = 'default', size = 'medium', portal, onOpenChange, onClose, ...rest }) => {
+    const triggerRef = React.useRef(null);
+    const [internalOpen, setInternalOpen] = React.useState(open ?? false);
+    const randomPopoverId = React.useId();
+    const [popoverId, setPopoverId] = React.useState(randomPopoverId);
+    const randomTriggerId = React.useId();
+    const [triggerId, setTriggerId] = React.useState(randomTriggerId);
+    const isControlled = typeof open === 'boolean';
+    React__namespace.useEffect(() => {
+        setInternalOpen(open ?? false);
+    }, [open]);
+    const anchorEl = rest.anchorEl ?? triggerRef.current;
+    return (jsxRuntime.jsx(PopoverContext.Provider, { value: {
+            triggerRef,
+            anchorEl,
+            portal,
+            internalOpen,
+            isControlled,
+            setInternalOpen,
+            size,
+            variant,
+            placement,
+            onOpenChange,
+            onClose,
+            popoverId,
+            setPopoverId,
+            triggerId,
+            setTriggerId,
+        }, children: children }));
+};
+const PopoverContext = React__namespace.createContext({
+    size: 'small',
+    variant: 'default',
+    anchorEl: null,
+    placement: 'top',
+    triggerRef: { current: null },
+    internalOpen: false,
+    setInternalOpen: () => { },
+});
+Popover.displayName = 'Popover';
+
+exports.Popover = Popover;
+exports.PopoverContext = PopoverContext;

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+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"};
+
+module.exports = classes;

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

@@ -0,0 +1,107 @@
+'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 clsx = require('../../node_modules/clsx/dist/clsx.js');
+var Popover = require('./Popover.js');
+var Popover_module = require('./Popover.module.css.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
+var floatingUi_reactDom = require('../../node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
+var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
+var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ARROW_HEIGHT = 7;
+const ARROW_GAP = 4;
+const ARROW_PLACEMENT = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+const PopoverContent = React.forwardRef(({ className, children, style, id, ...rest }, ref) => {
+    const { portal, internalOpen, size, isControlled, variant, placement, setInternalOpen, onClose, onOpenChange, anchorEl, popoverId, setPopoverId, triggerId, } = React.useContext(Popover.PopoverContext);
+    const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;
+    const floatingEl = React.useRef(null);
+    const arrowRef = React.useRef(null);
+    React.useEffect(() => {
+        id && setPopoverId?.(id);
+    }, [id, setPopoverId]);
+    const { context, update, refs, floatingStyles, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = floatingUi_react.useFloating({
+        placement,
+        open: internalOpen,
+        onOpenChange: (localOpen) => {
+            onOpenChange && onOpenChange(localOpen);
+            if (!localOpen)
+                onClose && onClose();
+            if (!isControlled)
+                setInternalOpen(localOpen);
+        },
+        whileElementsMounted: floatingUi_dom.autoUpdate,
+        elements: {
+            reference: anchorEl,
+            floating: floatingEl.current,
+        },
+        middleware: [
+            floatingUi_core.offset(ARROW_HEIGHT + ARROW_GAP),
+            floatingUi_core.flip({
+                fallbackAxisSideDirection: 'start',
+            }),
+            floatingUi_core.shift(),
+            floatingUi_reactDom.arrow({
+                element: arrowRef,
+            }),
+        ],
+    });
+    const { getFloatingProps } = floatingUi_react.useInteractions([
+        floatingUi_react.useFocus(context),
+        floatingUi_react.useClick(context),
+        floatingUi_react.useDismiss(context),
+        floatingUi_react.useRole(context),
+    ]);
+    const floatingRef = floatingUi_react.useMergeRefs([refs.setFloating, ref]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        refs.setReference(anchorEl);
+        if (!refs.reference.current || !refs.floating.current || !internalOpen)
+            return;
+        const cleanup = floatingUi_dom.autoUpdate(refs.reference.current, refs.floating.current, update);
+        return () => cleanup();
+    }, [refs.floating, refs.reference, update, anchorEl, refs, internalOpen]);
+    const arrowPlacement = React.useMemo(() => {
+        return ARROW_PLACEMENT[flPlacement.split('-')[0]];
+    }, [flPlacement]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { ref: floatingEl, className: clsx.clsx(Popover_module.popover, Popover_module[variant], Popover_module[size], className), "data-placement": flPlacement, ...getFloatingProps({
+                        ref: floatingRef,
+                        tabIndex: undefined,
+                    }), style: { ...floatingStyles, ...style }, id: popoverId, "aria-labelledby": triggerId, ...rest, children: [children, jsxRuntime.jsx("div", { ref: arrowRef, className: clsx.clsx(Popover_module.arrow, Popover_module[arrowPlacement]), style: {
+                                height: ARROW_HEIGHT,
+                                width: ARROW_HEIGHT,
+                                ...(arrowX != null ? { left: arrowX } : {}),
+                                ...(arrowY != null ? { top: arrowY } : {}),
+                                ...(arrowPlacement ? { [arrowPlacement]: -4.5 } : {}),
+                            } })] }) }) })) }));
+});
+PopoverContent.displayName = 'Popover.Content';
+
+exports.PopoverContent = PopoverContent;

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

@@ -0,0 +1,23 @@
+'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 Popover = require('./Popover.js');
+var Button = require('../Button/Button.js');
+
+const PopoverTrigger = React.forwardRef(({ id, ...rest }, ref) => {
+    const { triggerRef, internalOpen, setInternalOpen, isControlled, popoverId, triggerId, setTriggerId, } = React.useContext(Popover.PopoverContext);
+    const mergedRefs = floatingUi_react.useMergeRefs([ref, triggerRef]);
+    React.useEffect(() => {
+        id && setTriggerId?.(id);
+    }, [id, setTriggerId]);
+    return (jsxRuntime.jsx(Button.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';
+
+exports.PopoverTrigger = PopoverTrigger;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var Popover$1 = require('./Popover.js');
+var PopoverContent = require('./PopoverContent.js');
+var PopoverTrigger = require('./PopoverTrigger.js');
+
+const Popover = Popover$1.Popover;
+Popover.Content = PopoverContent.PopoverContent;
+Popover.Trigger = PopoverTrigger.PopoverTrigger;
+Popover.Content.displayName = 'Popover.Content';
+Popover.Trigger.displayName = 'Popover.Trigger';
+
+exports.PopoverContent = PopoverContent.PopoverContent;
+exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
+exports.Popover = Popover;

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

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

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

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

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

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+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"};
+
+module.exports = classes;

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

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

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var Circle = require('./Circle/Circle.js');
+var Rectangle = require('./Rectangle/Rectangle.js');
+var Text = require('./Text/Text.js');
+
+const Skeleton = {
+    Circle: Circle.Circle,
+    Rectangle: Rectangle.Rectangle,
+    Text: Text.Text,
+};
+Skeleton.Circle.displayName = 'Skeleton.Circle';
+Skeleton.Rectangle.displayName = 'Skeleton.Rectangle';
+Skeleton.Text.displayName = 'Skeleton.Text';
+
+exports.SkeletonCircle = Circle.Circle;
+exports.SkeletonRectangle = Rectangle.Rectangle;
+exports.SkeletonText = Text.Text;
+exports.Skeleton = Skeleton;

package/dist/cjs/components/SkipLink/SkipLink.js

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../node_modules/clsx/dist/clsx.js');
+var utility_module = require('../../utilities/utility.module.css.js');
+var SkipLink_module = require('./SkipLink.module.css.js');
+
+const SkipLink = ({ href, children, className, ...rest }) => {
+    return (jsxRuntime.jsx("a", { href: href, className: clsx.clsx(utility_module.visuallyHidden, SkipLink_module.skiplink, className), ...rest, children: children }));
+};
+SkipLink.displayName = 'SkipLink';
+
+exports.SkipLink = SkipLink;