@digdir/designsystemet-react 0.0.0-next-20250603060245 → 0.0.0-react-side-effects-20260113071010

package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js

@@ -1,72 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-var useRovingFocus = require('./useRovingFocus.js');
-var useMergeRefs = require('../hooks/useMergeRefs/useMergeRefs.js');
-
-/** Get the next focusable RovingFocusItem */
-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 RovingFocusItem */
-function getPrevFocusableValue(items, value) {
-    const currIndex = items.findIndex((item) => item.value === value);
-    return items.at(currIndex === 0 ? -1 : currIndex - 1);
-}
-const RovingFocusItem = react.forwardRef(({ value, asChild, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
-    const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.useRovingFocus(focusValue);
-    const rovingProps = getRovingProps({
-        onKeyDown: (e) => {
-            rest?.onKeyDown?.(e);
-            const items = getOrderedItems();
-            let nextItem;
-            switch (orientation) {
-                case 'horizontal':
-                    if (e.key === 'ArrowRight') {
-                        nextItem = getNextFocusableValue(items, focusValue);
-                    }
-                    if (e.key === 'ArrowLeft') {
-                        nextItem = getPrevFocusableValue(items, focusValue);
-                    }
-                    break;
-                case 'vertical':
-                    if (e.key === 'ArrowDown') {
-                        nextItem = getNextFocusableValue(items, focusValue);
-                    }
-                    if (e.key === 'ArrowUp') {
-                        nextItem = getPrevFocusableValue(items, focusValue);
-                    }
-                    break;
-                case 'ambiguous':
-                    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
-                        nextItem = getNextFocusableValue(items, focusValue);
-                    }
-                    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
-                        nextItem = getPrevFocusableValue(items, focusValue);
-                    }
-            }
-            if (e.key === 'Home') {
-                nextItem = items[0];
-            }
-            if (e.key === 'End') {
-                nextItem = items[items.length - 1];
-            }
-            if (nextItem) {
-                e.preventDefault();
-                nextItem.element.focus();
-            }
-        },
-    });
-    const mergedRefs = useMergeRefs.useMergeRefs([ref, rovingProps.ref]);
-    return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
-});
-
-exports.RovingFocusItem = RovingFocusItem;
-exports.getNextFocusableValue = getNextFocusableValue;
-exports.getPrevFocusableValue = getPrevFocusableValue;

package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js

@@ -1,72 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-var useMergeRefs = require('../hooks/useMergeRefs/useMergeRefs.js');
-
-const RovingFocusContext = react.createContext({
-    elements: { current: new Map() },
-    getOrderedItems: () => [],
-    setFocusableValue: () => {
-        /* intentionally empty */
-    },
-    onShiftTab: () => {
-        /* intentionally empty */
-    },
-    focusableValue: null,
-    orientation: 'horizontal',
-});
-const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    const [focusableValue, setFocusableValue] = react.useState(null);
-    const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
-    const elements = react.useRef(new Map());
-    const myRef = react.useRef(null);
-    const refs = useMergeRefs.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 }));
-    };
-    react.useEffect(() => {
-        setFocusableValue(activeValue ?? null);
-    }, [activeValue]);
-    return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
-            elements,
-            getOrderedItems,
-            focusableValue,
-            setFocusableValue,
-            onShiftTab: () => {
-                setIsShiftTabbing(true);
-            },
-            orientation,
-        }, 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)
-                    return;
-                const orderedItems = getOrderedItems();
-                if (orderedItems.length === 0)
-                    return;
-                if (focusableValue != null) {
-                    elements.current.get(focusableValue)?.focus();
-                }
-                else if (activeValue != null) {
-                    elements.current.get(activeValue)?.focus();
-                }
-                else {
-                    orderedItems.at(0)?.element.focus();
-                }
-            }, ref: refs }) }));
-});
-
-exports.RovingFocusContext = RovingFocusContext;
-exports.RovingFocusRoot = RovingFocusRoot;

package/dist/cjs/utilities/RovingFocus/useRovingFocus.js

@@ -1,43 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-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 `RovingFocus` in context with `RovingFocusRoot` */
-const useRovingFocus = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = react.useContext(RovingFocusRoot.RovingFocusContext);
-    return {
-        getOrderedItems,
-        isFocusable: focusableValue === value,
-        orientation,
-        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.useRovingFocus = useRovingFocus;

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

@@ -1,49 +0,0 @@
-'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/useMergeRefs/useMergeRefs.js

@@ -1,57 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-
-// https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useMergeRefs.ts
-/**
- * Merges an array of refs into a single memoized callback ref or `null`.
- */
-function useMergeRefs(refs) {
-    const cleanupRef = react.useRef(undefined);
-    const refEffect = react.useCallback((instance) => {
-        const cleanups = refs.map((ref) => {
-            if (ref == null) {
-                return;
-            }
-            if (typeof ref === 'function') {
-                const refCallback = ref;
-                // biome-ignore lint/suspicious/noConfusingVoidType: @types-react wants `void` here
-                const refCleanup = refCallback(instance);
-                return typeof refCleanup === 'function'
-                    ? refCleanup
-                    : () => {
-                        refCallback(null);
-                    };
-            }
-            ref.current = instance;
-            return () => {
-                ref.current = null;
-            };
-        });
-        return () => {
-            for (const refCleanup of cleanups) {
-                refCleanup?.();
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, refs);
-    return react.useMemo(() => {
-        if (refs.every((ref) => ref == null)) {
-            return null;
-        }
-        return (value) => {
-            if (cleanupRef.current) {
-                cleanupRef.current();
-                cleanupRef.current = undefined;
-            }
-            if (value != null) {
-                cleanupRef.current =
-                    refEffect(value);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, refs);
-}
-
-exports.useMergeRefs = useMergeRefs;

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

@@ -1,97 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-
-const getSteps = (now, max, show) => {
-    const offset = (show - 1) / 2;
-    const start = Math.min(Math.max(now - Math.floor(offset), 1), max - show + 1);
-    const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
-    const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
-    if (show > 4 && start > 1)
-        pages.splice(0, 2, 1, 0);
-    if (show > 3 && end < max)
-        pages.splice(-2, 2, 0, max);
-    return pages;
-};
-/**
- * Hook to help manage pagination state
- *
- * @example
- * const { pages, nextButtonProps, prevButtonProps } = usePagination({
- *   currentPage: page,
- *   totalPages: 10,
- *   showPages: 7,
- *   setCurrentPage,
- * })
- *
- * <Pagination>
- *   <Pagination.Item>
- *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
- *   </Pagination.Item>
- *   {pages.map(({ page, itemKey, buttonProps }) => (
- *     <Pagination.Item key={itemKey}>
- *       {typeof page === 'number' && (
- *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
- *           {page}
- *         </Pagination.Button>
- *       )}
- *     </Pagination.Item>
- *   ))}
- *   <Pagination.Item>
- *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
- *   </Pagination.Item>
- * </Pagination>
- **/
-const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages = 1, showPages = 7, }) => react.useMemo(() => {
-    const hasNext = currentPage < totalPages;
-    const hasPrev = currentPage !== 1;
-    const handleClick = (page) => (event) => {
-        if (page < 1 || page > totalPages)
-            return event.preventDefault(); // Prevent out of bounds navigation
-        onChange?.(event, page);
-        if (!event.defaultPrevented)
-            setCurrentPage?.(page); // Allow stopping change by calling event.preventDefault() in onChange
-    };
-    return {
-        /** Number of steps */
-        pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
-            /**
-             * Page number or "ellipsis" for the ellipsis item
-             */
-            page: page || 'ellipsis',
-            /**
-             * Unique key for the item
-             */
-            itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
-            /**
-             * Properties to spread on Pagination.Button
-             */
-            buttonProps: (page
-                ? {
-                    'aria-current': page === currentPage ? 'page' : undefined,
-                    onClick: handleClick(page),
-                    variant: page === currentPage ? 'primary' : 'tertiary',
-                }
-                : null),
-        })),
-        /** Properties to spread on Pagination.Button used for previous naviagation */
-        prevButtonProps: {
-            'aria-disabled': !hasPrev, // Using aria-disabled to support all HTML elements because of potential asChild
-            onClick: handleClick(currentPage - 1),
-            variant: 'tertiary',
-        },
-        /** Properties to spread on Pagination.Button used for next naviagation */
-        nextButtonProps: {
-            'aria-disabled': !hasNext, // Using aria-disabled to support all HTML elements because of potential asChild
-            onClick: handleClick(currentPage + 1),
-            variant: 'tertiary',
-        },
-        /** Indication if previous page action should be shown or not */
-        hasPrev,
-        /** Indication if next page action should be shown or not */
-        hasNext,
-    };
-}, [currentPage, totalPages, showPages]);
-
-exports.usePagination = usePagination;

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

@@ -1,48 +0,0 @@
-'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?.currentTime &&
-            myAnimation !== firstOfType) {
-            myAnimation.currentTime = firstOfType.currentTime;
-        }
-        return () => {
-            if (myAnimation && firstOfType?.currentTime) {
-                myAnimation.currentTime = firstOfType.currentTime;
-            }
-        };
-    }, [animationName]);
-    return ref;
-}
-
-exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/cjs/utilities/omit/omit.js

@@ -1,28 +0,0 @@
-'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/esm/components/Avatar/Avatar.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, Fragment } from 'react';
-
-/**
- * Avatars are used to represent people or entities.
- *
- * @example
- * <Avatar aria-label="John Doe" initials="JD" />
- *
- * @example
- * <Avatar aria-label="John Doe">
- *  <img src='…' alt='John Doe' />
- * </Avatar>
- *
- * @example
- * <Avatar aria-label="John Doe">
- *  <Icon />
- * </Avatar>
- */
-const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...rest }, ref) {
-    const useSlot = children && typeof children !== 'string';
-    const Component = useSlot ? Slot : Fragment;
-    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: children }) }));
-});
-
-export { Avatar };

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

@@ -1,14 +0,0 @@
-'use client';
-import { Badge as Badge$1 } from './Badge.js';
-import { BadgePosition } from './BadgePosition.js';
-
-/**
- * `Badge` is a non-interactive component for displaying status with or without numbers.
- *
- * @example without children
- * <Badge count={5} maxCount={10} />
- */
-const Badge = Object.assign(Badge$1, { Position: BadgePosition });
-Badge.Position.displayName = 'Badge.Position';
-
-export { Badge, BadgePosition };

package/dist/esm/components/Breadcrumbs/BreadcrumbsLink.js

@@ -1,10 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Link } from '../Link/Link.js';
-
-const BreadcrumbsLink = forwardRef(function BreadcrumbsLink(rest, ref) {
-    return jsx(Link, { ref: ref, ...rest });
-});
-
-export { BreadcrumbsLink };

package/dist/esm/components/Breadcrumbs/BreadcrumbsList.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
-
-const BreadcrumbsList = forwardRef(function BreadcrumbsList(rest, ref) {
-    const innerRef = useRef(null);
-    const mergedRefs = useMergeRefs([innerRef, ref]);
-    // Set aria-current on last link
-    useEffect(() => {
-        const links = innerRef.current?.querySelectorAll(':scope > * > *') || [];
-        const lastLink = links[links?.length - 1];
-        lastLink?.setAttribute('aria-current', 'page');
-        return () => lastLink?.removeAttribute('aria-current'); // Remove on re-render as React can re-use DOM elements
-    });
-    return jsx("ol", { ref: mergedRefs, ...rest });
-});
-
-export { BreadcrumbsList };

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

@@ -1,34 +0,0 @@
-'use client';
-import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.js';
-import { BreadcrumbsItem } from './BreadcrumbsItem.js';
-import { BreadcrumbsLink } from './BreadcrumbsLink.js';
-import { BreadcrumbsList } from './BreadcrumbsList.js';
-
-/**
- * `Breadcrumbs` is a component that displays a list of breadcrumbs.
- *
- * @example
- * <Breadcrumbs aria-label='Du er her:' {...args}>
- *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
- *    Nivå 1
- *  </Breadcrumbs.Link>
- *  <Breadcrumbs.List>
- *    <Breadcrumbs.Item>
- *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
- *    </Breadcrumbs.Item>
- *    <Breadcrumbs.Item>
- *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
- *    </Breadcrumbs.Item>
- *  </Breadcrumbs.List>
- * </Breadcrumbs>
- */
-const Breadcrumbs = Object.assign(Breadcrumbs$1, {
-    List: BreadcrumbsList,
-    Item: BreadcrumbsItem,
-    Link: BreadcrumbsLink,
-});
-Breadcrumbs.List.displayName = 'Breadcrumbs.List';
-Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
-Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
-
-export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList };

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

@@ -1,23 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slot, Slottable } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-import { Spinner } from '../Spinner/Spinner.js';
-
-/**
- * Button used for interaction
- *
- * @example
- * <Button>Click me</Button>
- */
-const Button = forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
-    const Component = asChild ? Slot : 'button';
-    // Fallbacks to undefined to prevent rendering attribute="false"
-    return (jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
-        /* don't set type when we use `asChild` */
-        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsx(Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
-            ), jsx(Slottable, { children: children })] }));
-});
-
-export { Button };

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

@@ -1,41 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, useRef, useEffect } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
-
-/**
- * Card component to present content in a structured way.
- *
- * @example
- * <Card>
- *  <Card.Block>Header</Card.Block>
- *  <Card.Block>Content</Card.Block>
- *  <Card.Block>Footer</Card.Block>
- * </Card>
- */
-const Card = forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
-    const Component = asChild ? Slot : 'div';
-    const cardRef = useRef(null);
-    const mergedRefs = useMergeRefs([cardRef, ref]);
-    // Forward click on card to heading links for better accessibility
-    // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
-    useEffect(() => {
-        const card = cardRef.current;
-        const handleClick = ({ ctrlKey, metaKey, target }) => {
-            const link = card?.querySelector(':is(h1,h2,h3,h4,h5,h6) a');
-            if (!link || link?.contains(target))
-                return; // Let links handle their own clicks
-            if (ctrlKey || metaKey)
-                window.open(link.href, '', 'noreferrer');
-            else
-                link.click(); // Using link.click instead of window.location.href as this will trigger the browser's handling of rel=, target=, etc.
-        };
-        card?.addEventListener('click', handleClick);
-        return () => card?.removeEventListener('click', handleClick);
-    }, []);
-    return (jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
-});
-
-export { Card };

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

@@ -1,20 +0,0 @@
-'use client';
-import { Card as Card$1 } from './Card.js';
-import { CardBlock } from './CardBlock.js';
-
-/**
- * Card component to present content in a structured way.
- *
- * @example
- * <Card>
- *  <Card.Block>Header</Card.Block>
- *  <Card.Block>Content</Card.Block>
- *  <Card.Block>Footer</Card.Block>
- * </Card>
- */
-const Card = Object.assign(Card$1, {
-    Block: CardBlock,
-});
-Card.Block.displayName = 'Card.Block';
-
-export { Card, CardBlock };