@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/components/menu/Menu.js

@@ -1,165 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import styles from './Menu.module.css';
-import { Checkbox } from '../forms/checkbox/Checkbox';
-import { RadioButton } from '../forms/radio-buttons/RadioButton';
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
-function getMenuItems(el) {
-    return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
-}
-const MenuBase = React.forwardRef(({ children, className, itemRole = 'menuitem', gap, onKeyDown, ...props }, ref) => {
-    const internalRef = React.useRef(null);
-    const handleKeyDown = (e) => {
-        const ul = internalRef.current;
-        if (!ul)
-            return;
-        const items = getMenuItems(ul);
-        if (items.length === 0)
-            return;
-        const focused = document.activeElement;
-        const currentIndex = items.indexOf(focused);
-        let nextIndex = null;
-        if (e.key === 'ArrowDown') {
-            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-        }
-        else if (e.key === 'ArrowUp') {
-            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-        }
-        else if (e.key === 'Home') {
-            nextIndex = 0;
-        }
-        else if (e.key === 'End') {
-            nextIndex = items.length - 1;
-        }
-        if (nextIndex !== null) {
-            e.preventDefault();
-            items[nextIndex].focus();
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    };
-    return (_jsx("ul", { ref: node => {
-            internalRef.current = node;
-            if (typeof ref === 'function')
-                ref(node);
-            else if (ref)
-                ref.current = node;
-        }, role: "menu", "data-itemrole": itemRole, className: [styles.container, gap ? styles.gap : '', className].filter(Boolean).join(' '), onKeyDown: handleKeyDown, ...props, children: children }));
-});
-MenuBase.displayName = 'Menu';
-const isInteractiveEl = (el) => React.isValidElement(el) &&
-    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true);
-function applyMenuItemPropsToElement(child, opts) {
-    var _a, _b, _c, _d;
-    const { active, selected, disabled, role, tabIndex = 0, className } = opts;
-    const childClass = [styles.item, active ? styles.active : '', selected ? styles.selected : '']
-        .filter(Boolean)
-        .join(' ');
-    const nextImmediate = React.cloneElement(child, {
-        className: [child.props.className, styles.interactiveChild, className]
-            .filter(Boolean)
-            .join(' '),
-    });
-    // If immediate child is interactive, apply a11y+styles there
-    if (typeof child.type === 'string' && (child.type === 'a' || child.type === 'button')) {
-        return React.cloneElement(child, {
-            role: (_a = child.props.role) !== null && _a !== void 0 ? _a : role,
-            tabIndex: (_b = child.props.tabIndex) !== null && _b !== void 0 ? _b : tabIndex,
-            'aria-selected': selected || undefined,
-            'aria-disabled': disabled || undefined,
-            className: [child.props.className, styles.interactive, childClass, className]
-                .filter(Boolean)
-                .join(' '),
-            ...(child.type === 'button' ? { disabled } : {}),
-        });
-    }
-    // For custom components, assume they forward props
-    return React.cloneElement(nextImmediate, {
-        role: (_c = nextImmediate.props.role) !== null && _c !== void 0 ? _c : role,
-        tabIndex: (_d = nextImmediate.props.tabIndex) !== null && _d !== void 0 ? _d : tabIndex,
-        'aria-selected': selected || undefined,
-        'aria-disabled': disabled || undefined,
-        className: [nextImmediate.props.className, styles.interactive, childClass]
-            .filter(Boolean)
-            .join(' '),
-        disabled,
-    });
-}
-const MenuItem = React.forwardRef(({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
-    // If caller sets itemRole prop, use it; otherwise attempt to inherit from parent Menu via data attr.
-    // (We can’t reliably read parent props here without context; simplest is: caller passes itemRole on Menu.Item when needed.)
-    const resolvedRole = itemRole !== null && itemRole !== void 0 ? itemRole : 'menuitem';
-    const isBordered = variant === 'bordered';
-    const itemClassName = variant === 'danger' ? styles.itemDanger : undefined;
-    const rowClass = [styles.row, isBordered ? styles.rowBordered : '', className]
-        .filter(Boolean)
-        .join(' ');
-    if (isInteractiveEl(children)) {
-        const child = children;
-        return (_jsx("li", { ref: ref, role: "none", className: rowClass, ...liProps, children: applyMenuItemPropsToElement(child, {
-                active,
-                selected,
-                disabled,
-                role: resolvedRole,
-                className: itemClassName,
-            }) }));
-    }
-    // Fallback: wrap non-interactive children in a <button>
-    return (_jsx("li", { ref: ref, role: "none", className: rowClass, ...liProps, children: _jsx("button", { role: resolvedRole, tabIndex: 0, "aria-selected": selected || undefined, "aria-disabled": disabled || undefined, className: [
-                styles.interactive,
-                styles.item,
-                itemClassName,
-                active ? styles.active : '',
-                selected ? styles.selected : '',
-            ]
-                .filter(Boolean)
-                .join(' '), type: "button", disabled: disabled, children: children }) }));
-});
-MenuItem.displayName = 'Menu.Item';
-const MenuCheckItem = React.forwardRef(({ label, checked, active, disabled, interactiveRef, interactiveProps, onCheckedChange, className, ...liProps }, ref) => {
-    const isSelected = checked;
-    const interactiveClass = [
-        styles.interactiveChild,
-        styles.item,
-        active ? styles.active : '',
-        isSelected ? styles.selected : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { ref: interactiveRef, role: interactiveProps === null || interactiveProps === void 0 ? void 0 : interactiveProps.role, tabIndex: -1, "aria-selected": isSelected || undefined, "aria-disabled": disabled || undefined, className: interactiveClass, ...interactiveProps, onClick: event => {
-                var _a;
-                (_a = interactiveProps === null || interactiveProps === void 0 ? void 0 : interactiveProps.onClick) === null || _a === void 0 ? void 0 : _a.call(interactiveProps, event);
-                if (event.defaultPrevented || disabled)
-                    return;
-                const target = event.target;
-                if (target instanceof Element && target.closest('button') !== null) {
-                    return;
-                }
-                onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
-            }, children: _jsx(Checkbox, { variant: "primary", size: "sm", noContainer: true, checked: checked, disabled: disabled, labelAs: "span", label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
-});
-MenuCheckItem.displayName = 'Menu.CheckItem';
-const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, onClick: event => {
-                var _a;
-                if (disabled)
-                    return;
-                const target = event.target;
-                // Let native label/input clicks handle themselves to avoid double-firing
-                if ((_a = target.closest('label')) !== null && _a !== void 0 ? _a : target.closest('input'))
-                    return;
-                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
-            }, children: _jsx(RadioButton, { noContainer: true, name: name, size: "sm", value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
-});
-MenuRadioItem.displayName = 'Menu.RadioItem';
-const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));
-MenuSeparator.displayName = 'Menu.Separator';
-const MenuHeader = React.forwardRef(({ className, children, ...props }, ref) => (_jsx("li", { ref: ref, role: "presentation", "aria-hidden": "true", className: [styles.header, className].filter(Boolean).join(' '), ...props, children: children })));
-MenuHeader.displayName = 'Menu.Header';
-export const Menu = Object.assign(MenuBase, {
-    Item: MenuItem,
-    CheckItem: MenuCheckItem,
-    RadioItem: MenuRadioItem,
-    Separator: MenuSeparator,
-    Header: MenuHeader,
-});

package/dist/components/menu/Menu.module.css

@@ -1,220 +0,0 @@
-.container {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  display: flex;
-  flex-direction: column;
-}
-
-.row {
-  display: block;
-}
-
-/* Applied to actual interactive elements (button/a/custom that forwards className) */
-.interactive {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: var(--spacing-xs);
-  inline-size: 100%;
-  text-align: start;
-  text-decoration: none;
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-md);
-  margin-block: var(--spacing-2xs);
-  min-block-size: var(--component-size-sm);
-  background: transparent;
-  border: none;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  color: var(--color-fg-default);
-  cursor: pointer;
-  border-radius: var(--border-radius-md);
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
-}
-
-.interactive > :last-child {
-  min-width: 0;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-/*
-  Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
-  so that menu row styling still works for components that render a wrapper.
-*/
-.interactiveChild {
-  display: block;
-  inline-size: 100%;
-  border-radius: var(--border-radius-md);
-}
-
-/* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
-.row > .interactiveChild {
-  display: flex;
-  align-items: center;
-  inline-size: 100%;
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-md);
-  margin-block: var(--spacing-2xs);
-  min-block-size: var(--component-size-sm);
-  border-radius: var(--border-radius-md);
-  cursor: pointer;
-}
-
-/* NEW: add consistent gap between control and label inside Checkbox/Radio
-   Both components use a root element with className={styles.container}.
-   Because they're CSS modules, we must target it with :global(.container). */
-.row :global(.container) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  inline-size: 100%;
-  cursor: pointer;
-}
-
-.row :global(.label) {
-  flex: 1 1 auto;
-  cursor: pointer;
-}
-
-.row :global(.label) * {
-  cursor: pointer;
-}
-
-/* Hover: support both cases (interactive element, or wrapper child) */
-.interactive:hover:not(.selected),
-.row:hover > .interactiveChild:not(.selected) {
-  background-color: var(--color-bg-toolbar-hover);
-}
-
-/* Focus ring: support both cases */
-.interactive:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-/* If wrapper contains a focusable element, show ring when any child is focused */
-.row:focus-within > .interactiveChild {
-  outline: none;
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-/* Keyboard active/current item */
-.active,
-.interactive.active,
-.row > .interactiveChild.active {
-  background-color: var(--color-bg-toolbar-hover);
-}
-
-/* Selected item */
-.selected,
-.interactive[aria-selected='true'],
-.row > .interactiveChild.selected,
-.row > .interactiveChild[aria-selected='true'] {
-  background-color: var(--color-bg-selected);
-  color: var(--color-fg-default);
-}
-
-.selected:hover,
-.interactive.selected:hover,
-.interactive[aria-selected='true']:hover,
-.row:hover > .interactiveChild.selected,
-.row:hover > .interactiveChild[aria-selected='true'],
-.active.selected,
-.interactive.active.selected,
-.interactive.active[aria-selected='true'],
-.row > .interactiveChild.active.selected,
-.row > .interactiveChild.active[aria-selected='true'] {
-  background-color: var(--color-bg-selected-hover);
-}
-
-/* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
-.interactive[aria-checked='true'],
-.row > .interactiveChild[aria-checked='true'] {
-  background-color: var(--color-bg-selected);
-  color: var(--color-fg-default);
-}
-
-.itemDanger {
-  color: var(--color-status-error);
-}
-
-.itemDanger svg {
-  color: inherit;
-}
-
-/* Disabled: support both cases */
-.interactive[aria-disabled='true'],
-.interactive:disabled,
-.row > .interactiveChild[aria-disabled='true'] {
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* Icons inside either interactive element or wrapper */
-.interactive svg,
-.interactiveChild svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  /* Vertically center the icon against the first text line when parent is flex-start */
-  margin-block: calc((var(--line-height-normal) * var(--font-size-sm) - var(--icon-size-sm)) / 2);
-  flex-shrink: 0;
-}
-
-/* Visual separator row (used by <Menu.Separator />) */
-.separator {
-  block-size: 1px;
-  margin-block: var(--spacing-xxs);
-  background: var(--color-border-subtle);
-  opacity: 0.8;
-  border-radius: 999px;
-}
-
-.header {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-md);
-  color: var(--color-fg-muted);
-  font-size: var(--font-size-xs);
-  font-weight: 500;
-  line-height: var(--line-height-normal);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  cursor: default;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-
-.header svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-  color: inherit;
-}
-
-/* Gap between items */
-.gap {
-  gap: var(--spacing-xs);
-}
-
-/* Bordered item variant */
-.rowBordered {
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--border-radius-md);
-  overflow: hidden;
-}
-
-/* Inside a bordered row, remove inner border-radius so hover bg fills the full area */
-.rowBordered .interactive,
-.rowBordered .interactiveChild {
-  border-radius: 0;
-}

package/dist/components/meta-bar/MetaBar.js

@@ -1,9 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import styles from './MetaBar.module.css';
-export function MetaBar({ items, separator = '•' }) {
-    const visibleItems = items.filter(item => item.value !== null && item.value !== undefined && item.value !== '');
-    if (visibleItems.length === 0)
-        return null;
-    return (_jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("span", { className: item.muted === false ? styles.itemDefault : styles.itemMuted, children: [item.label && _jsxs("span", { children: [item.label, ":\u00A0"] }), _jsx("span", { children: item.value })] }), index < visibleItems.length - 1 && (_jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator }))] }, index))) }));
-}

package/dist/components/meta-bar/MetaBar.module.css

@@ -1,27 +0,0 @@
-.meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-size: var(--font-size-xs);
-}
-
-.itemMuted,
-.itemDefault {
-  display: inline-flex;
-  align-items: center;
-  gap: 0;
-  line-height: 1;
-}
-
-.itemMuted {
-  color: var(--color-fg-subtle);
-}
-
-.itemDefault {
-  color: var(--color-fg-default);
-}
-
-.dot {
-  opacity: 0.6;
-}

package/dist/components/nav-bar/NavBar.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu as MenuIcon, X } from 'lucide-react';
-import { useRef, useState } from 'react';
-import styles from './NavBar.module.css';
-import { Logo } from '../../assets/logo';
-import { useDeviceSize } from '../../hooks/useDeviceSize';
-import { AppHeader } from '../app-header/AppHeader';
-import { Headline } from '../headline/Headline';
-import { Popover } from '../popover/Popover';
-export function NavBar({ logo, items, productName, addition, activeLink, size, }) {
-    const [mobileOpen, setMobileOpen] = useState(false);
-    const deviceSize = useDeviceSize();
-    const isMobile = deviceSize === 'mobile';
-    const navRef = useRef(null);
-    const navLinks = items === null || items === void 0 ? void 0 : items.filter(i => i.enabled !== false).map((item, id) => {
-        const { component: Component, label, icon, href, active, external } = item;
-        const isActive = activeLink ? href === activeLink : Boolean(active);
-        const linkClass = [styles.link, isActive ? styles.active : ''].filter(Boolean).join(' ');
-        const commonProps = {
-            className: linkClass,
-            href,
-            ...(isActive ? { 'aria-current': 'page' } : {}),
-            ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
-        };
-        return (_jsx("li", { className: styles.navItem, role: "listitem", children: Component ? (_jsxs(Component, { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) : (_jsxs("a", { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) }, id));
-    });
-    return (_jsx(AppHeader, { size: size, children: _jsxs("nav", { ref: navRef, className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [(logo || productName) && (_jsxs("div", { className: styles.logoRow, children: [logo, productName && (_jsxs("span", { className: styles.productName, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] }))] })), (navLinks === null || navLinks === void 0 ? void 0 : navLinks.length) > 0 && (_jsx("div", { className: styles.navContent, children: _jsx("ul", { className: styles.navItems, role: "list", children: navLinks }) })), addition && !isMobile && _jsx("div", { className: styles.addition, children: addition }), isMobile && (_jsx(Popover, { open: mobileOpen, onOpenChange: setMobileOpen, matchTriggerWidth: true, fullWidth: false, autoFocusContent: true, anchorRef: navRef, trigger: (toggle, _icon, open) => (_jsx("button", { type: "button", className: styles.burgerButton, "aria-label": open ? 'Close navigation menu' : 'Open navigation menu', "aria-expanded": open, onClick: toggle, children: open ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) })), children: close => (_jsxs("div", { className: styles.mobileMenu, children: [_jsx("ul", { className: styles.mobileNavItems, role: "list", onClick: close, children: navLinks }), addition && _jsx("div", { className: styles.mobileAddition, children: addition })] })) }))] }) }));
-}

package/dist/components/nav-bar/NavBar.module.css

@@ -1,221 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xl);
-  inline-size: 100%;
-  box-sizing: border-box;
-  flex-grow: 1;
-}
-
-.logoRow {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex-shrink: 0;
-}
-
-.navContent {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  min-inline-size: 0;
-  flex: 1 1 auto;
-}
-
-/* Burger: hidden on desktop, visible on mobile */
-.burger {
-  display: none;
-  margin-inline-start: auto;
-}
-
-.burgerButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--component-size-md);
-  block-size: var(--component-size-md);
-  border: none;
-  background: transparent;
-  color: var(--color-fg-default);
-  border-radius: var(--border-radius-default);
-  cursor: pointer;
-  padding: 0;
-  transition: background-color var(--transition-fast) var(--ease-standard);
-}
-
-.burgerButton:hover {
-  background-color: var(--color-bg-hover-subtle);
-}
-
-.burgerButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* Mobile dropdown content */
-.mobileMenu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs);
-}
-
-.mobileNavItems {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.mobileAddition {
-  border-top: var(--border-width-thin) solid var(--color-border-subtle);
-  padding-top: var(--spacing-xs);
-}
-
-@media (max-width: 640px) {
-  .container {
-    flex-wrap: nowrap;
-    overflow: hidden;
-  }
-
-  .logoRow {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    overflow: hidden;
-  }
-
-  .navContent {
-    display: none;
-  }
-
-  .addition {
-    display: none;
-  }
-
-  .burger {
-    display: flex;
-    flex-shrink: 0;
-    margin-inline-start: 0;
-  }
-}
-
-.productName {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  color: inherit;
-  text-decoration: none;
-}
-.productName svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
-
-.navItems {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-lg);
-  min-inline-size: 0;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.addition {
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  margin-inline-start: auto;
-}
-
-.mobileAddition {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--spacing-xs);
-}
-
-.navItem {
-  list-style: none;
-  min-inline-size: 0;
-}
-
-.link {
-  text-transform: var(--nav-link-transform);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  color: var(--color-fg-muted);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  text-decoration: none;
-  border-radius: var(--border-radius-default);
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
-}
-
-/* Hover + focus */
-.link:hover {
-  color: var(--color-fg-default);
-}
-.link:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* Active underline */
-.link.active,
-.link[aria-current='page'] {
-  color: var(--color-fg-default);
-  box-shadow: none;
-}
-
-.link::after {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-end: 0;
-  inline-size: 0;
-  block-size: 2px;
-  background-color: var(--color-border-strong);
-  transition: inline-size var(--transition-fast) var(--ease-standard);
-}
-
-.link:hover::after {
-  inline-size: 100%;
-}
-
-.link.active::after,
-.link[aria-current='page']::after {
-  inline-size: 100%;
-  background-color: var(--color-brand);
-}
-
-/* Icons/images inside links */
-.link svg,
-.link img {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-  flex: 0 0 auto;
-}
-
-@media (max-width: 767px) {
-  .addition,
-  .mobileAddition {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--spacing-xs);
-  }
-
-  .addition > *,
-  .mobileAddition > * {
-    width: 100%;
-  }
-}

package/dist/components/overlay/fade-overlay/FadeOverlay.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './FadeOverlay.module.css';
-function cx(...parts) {
-    return parts.filter(Boolean).join(' ');
-}
-export function FadeOverlay({ edge = 'bottom', size = 'md', className, 'aria-hidden': ariaHidden = true, ...rest }) {
-    return (_jsx("div", { "aria-hidden": ariaHidden, className: cx(styles.overlay, styles[edge], styles[size], className), ...rest }));
-}