@dbcdk/react-components 0.0.88 → 0.0.90

package/dist/components/state-page/StatePage.js

@@ -5,7 +5,7 @@ import { ErrorIllustration } from './error';
 import { NotFoundIllustration } from './notFound';
 import styles from './StatePage.module.css';
 import { Headline } from '../headline/Headline';
-export function StatePage({ header, type, children, actions }) {
+export function StatePage({ header, subheader, type, children, actions, }) {
     const illustration = useMemo(() => {
         switch (type) {
             case 'error':
@@ -16,5 +16,5 @@ export function StatePage({ header, type, children, actions }) {
                 return _jsx(NotFoundIllustration, {});
         }
     }, [type]);
-    return (_jsxs("div", { className: `dbc-flex dbc-flex-column dbc-gap-lg dbc-items-center dbc-justify-center ${styles.container}`, children: [_jsx("div", { className: styles.illustration, children: illustration }), _jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-items-center", children: [_jsx(Headline, { disableMargin: true, size: 1, children: header }), _jsx("div", { children: children }), _jsx("div", { className: "dbc-flex dbc-gap-sm dbc-justify-center", children: actions })] })] }));
+    return (_jsxs("div", { className: `dbc-flex dbc-flex-column dbc-gap-lg dbc-items-center dbc-justify-center ${styles.container}`, children: [_jsx("div", { className: styles.illustration, children: illustration }), _jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-items-center", children: [_jsx(Headline, { disableMargin: true, size: 1, subheader: subheader, children: header }), _jsx("div", { children: children }), _jsx("div", { className: "dbc-flex dbc-gap-sm dbc-justify-center", children: actions })] })] }));
 }

package/dist/components/table/Table.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useMemo } from 'react';
+import { useCallback, useId, useMemo, useRef } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
+import { useViewportFill } from '../../hooks/useViewportFill';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
@@ -9,17 +10,34 @@ import { TableLoadingBody } from './components/TableLoadingBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
 import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
-export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, tableWidth, tableRootRef, measuringLayout = false, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
+export function Table({ data, dataKey, columns, selectedRows, selectionMode = 'single', allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant = 'primary', size = 'md', viewMode, striped, fillViewport = false, fillViewportBottomOffset = 16, tableWidth, tableRootRef, measuringLayout = false, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement = 'bottom', showFirstLast = false, pageSizeOptions, getRowSeverity, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }) {
     const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
     const selectionInputName = useId();
+    const internalTableRootRef = useRef(null);
+    const tableRootRefWrapper = useRef(tableRootRef);
     const hasSelection = Boolean(selectedRows && onRowSelect);
+    const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+    const paginationOffset = hasPagination ? 72 : 0;
+    const { style: viewportFillStyle } = useViewportFill(internalTableRootRef, {
+        bottomOffset: fillViewportBottomOffset + paginationOffset,
+        min: 120,
+    });
+    const setTableRootRef = useCallback((node) => {
+        internalTableRootRef.current = node;
+        if (typeof tableRootRefWrapper.current === 'function') {
+            tableRootRefWrapper.current(node);
+        }
+        else if (tableRootRefWrapper.current) {
+            tableRootRefWrapper.current.current = node;
+        }
+    }, []);
     const handlePageChange = useCallback((e) => {
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
     }, [onPageChange]);
     const bodyContent = loading && !data.length ? (_jsx(TableLoadingBody, { rows: take !== null && take !== void 0 ? take : 5, columns: visibleColumns, hasSelection: hasSelection })) : (_jsx(TableBody, { data: data, dataKey: dataKey, columns: visibleColumns, striped: striped, selectedRows: selectedRows, hasSelection: hasSelection, selectionMode: selectionMode, selectionInputName: selectionInputName, viewMode: viewMode, getRowSeverity: getRowSeverity, onRowClick: onRowClick, onRowMouseEnter: onRowMouseEnter, onRowSelect: onRowSelect }));
-    const paginationEl = onPageChange && (loading || data.length > 0) ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
+    const paginationEl = hasPagination ? (_jsx("div", { className: cx(styles.paginationSlot, paginationPlacement === 'top' && styles.paginationSlotTop), children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast, pageSizeOptions: pageSizeOptions }) })) : null;
     const tableClassName = cx(styles.tableRoot, styles[variant], styles[size], measuringLayout && styles.measuringLayout, getRowSeverity && styles.severityTable);
-    const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: tableRootRef, className: styles.tableScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
+    const tableShell = (_jsx("div", { ...rest, className: tableClassName, children: _jsx("div", { ref: setTableRootRef, className: styles.tableScroll, style: fillViewport ? viewportFillStyle : undefined, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (_jsxs("table", { className: styles.tableElement, "aria-rowcount": data.length, style: tableWidth != null ? { width: tableWidth } : undefined, children: [_jsxs("colgroup", { children: [hasSelection ? _jsx("col", { style: { width: SELECTION_COLUMN_PX } }) : null, visibleColumns.map(column => (_jsx("col", { style: column.width != null ? { width: column.width } : undefined }, column.id)))] }), _jsx(TableHeader, { columns: visibleColumns, hasSelection: hasSelection, selectionMode: selectionMode, allRowsSelected: allRowsSelected, onSelectAllRows: onSelectAllRows, sortById: sortById, sortDirection: sortDirection, onSortChange: onSortChange, headerExtras: headerExtras }), bodyContent] })) }) }));
     if (fillViewport) {
         return (_jsxs("div", { className: styles.fillViewportRoot, style: {
                 flexDirection: paginationPlacement === 'top' ? 'column-reverse' : 'column',

package/dist/components/table/Table.module.css

@@ -101,6 +101,10 @@
   min-block-size: 0;
 }
 
+.body .row:first-child .cell {
+  border-block-start: var(--spacing-xs) solid var(--table-row-bg);
+}
+
 .headerCell,
 .cell {
   position: relative;
@@ -136,6 +140,16 @@
   line-height: 20px;
 }
 
+.md .headerCell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
+.md .cell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
 .sm .headerCell {
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);

package/dist/components/table/Table.types.d.ts

@@ -42,6 +42,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     viewMode?: ViewMode;
     striped?: boolean;
     fillViewport?: boolean;
+    fillViewportBottomOffset?: number;
     tableWidth?: number;
     tableRootRef?: Ref<HTMLDivElement>;
     measuringLayout?: boolean;

package/dist/components/tabs/Tabs.d.ts

@@ -12,6 +12,7 @@ export type TabItem = {
 type TabsVariant = 'filled' | 'outlined';
 export interface TabsProps {
     header?: string;
+    subheader?: ReactNode;
     variant: TabsVariant;
     panelStyle?: boolean;
     /** Data-driven API */
@@ -22,6 +23,7 @@ export interface TabsProps {
     defaultValue?: TabId;
     onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
     addition?: ReactNode;
+    disableTopPadding?: boolean;
     /** Composition API */
     children?: ReactNode;
 }
@@ -38,7 +40,7 @@ type SlotName = 'Item';
 type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
     __TABS_SLOT__?: SlotName;
 };
-export declare function Tabs({ header, variant, panelStyle, tabs, value, defaultValue, onValueChange, addition, children, }: TabsProps): JSX.Element;
+export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, onValueChange, addition, disableTopPadding, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }

package/dist/components/tabs/Tabs.js

@@ -33,7 +33,7 @@ function normalizeFromChildren(children) {
     });
     return items;
 }
-export function Tabs({ header, variant, panelStyle = false, tabs, value, defaultValue, onValueChange, addition, children, }) {
+export function Tabs({ header, subheader, variant, panelStyle = false, tabs, value, defaultValue, onValueChange, addition, disableTopPadding, children, }) {
     const uid = useId();
     // Data API wins if provided; otherwise parse <Tabs.Item>
     const sourceTabs = useMemo(() => {
@@ -113,7 +113,9 @@ export function Tabs({ header, variant, panelStyle = false, tabs, value, default
             focusAndSelect(enabled.length - 1);
         }
     }, [uid, visibleTabs, setValue]);
-    return (_jsxs("div", { className: styles.root, children: [header ? (_jsxs("div", { className: styles.headerContainer, children: [_jsx(Headline, { disableMargin: true, size: 2, children: header }), addition] })) : null, _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, role: "tablist", "aria-label": header !== null && header !== void 0 ? header : 'Tabs', children: visibleTabs.map((tab, index) => {
+    return (_jsxs("div", { className: styles.root, children: [header ? (_jsx("div", { className: [styles.headerContainer, disableTopPadding ? styles.disableTopPadding : '']
+                    .filter(Boolean)
+                    .join(' '), children: _jsx(Headline, { disableMargin: true, size: 2, subheader: subheader, addition: addition, children: header }) })) : null, _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, role: "tablist", "aria-label": header !== null && header !== void 0 ? header : 'Tabs', children: visibleTabs.map((tab, index) => {
                             const selected = index === activeIndex;
                             const tabDomId = `${uid}-tab-${String(tab.id)}`;
                             const panelDomId = `${uid}-panel-${String(tab.id)}`;

package/dist/components/tabs/Tabs.module.css

@@ -13,6 +13,10 @@
   gap: var(--spacing-md);
 }
 
+.headerContainer.disableTopPadding {
+  padding-block-start: 0;
+}
+
 /* Outer wrapper for tablist + content */
 .tabs {
   display: flex;

package/dist/components/theme-button/ThemeButton.d.ts

@@ -4,4 +4,5 @@ export interface ThemeButtonProps {
     size?: ButtonSize;
     variant?: ButtonVariant;
 }
+export declare function ThemeMenuSection(): JSX.Element;
 export declare function ThemeButton({ size, variant }: ThemeButtonProps): JSX.Element;

package/dist/components/theme-button/ThemeButton.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Monitor, Moon, Palette, Sun } from 'lucide-react';
 import { Button } from '../../components/button/Button';
 import { Menu } from '../../components/menu/Menu';
@@ -10,6 +10,10 @@ const THEME_OPTIONS = [
     { value: 'light', label: 'Lyst', icon: _jsx(Sun, { size: 16 }) },
     { value: 'dark', label: 'Mørkt', icon: _jsx(Moon, { size: 16 }) },
 ];
+export function ThemeMenuSection() {
+    const { theme, switchTheme } = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.RadioItem, { name: "theme", value: option.value, checked: theme === option.value, label: option.label, onValueChange: value => switchTheme(value) }, option.value)))] }));
+}
 export function ThemeButton({ size, variant = 'outlined' }) {
     const { theme, switchTheme } = useTheme();
     return (_jsx(Popover, { matchTriggerWidth: false, minWidth: "140px", trigger: (handleClick, chevron) => (_jsxs(Button, { variant: variant, size: size, onClick: handleClick, "aria-label": "Skift tema", "aria-haspopup": "menu", children: [_jsx(Palette, {}), chevron] })), children: close => (_jsxs(Menu, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.Item, { active: theme === option.value, children: _jsxs("button", { onClick: () => {

package/dist/components/toast/Toast.d.ts

@@ -6,9 +6,10 @@ export type ToastActionConfig = {
 };
 export type ToastProps = {
     title?: ReactNode;
+    subheader?: ReactNode;
     message?: ReactNode;
     severity: Severity;
     action?: ToastActionConfig;
     onClose?: () => void;
 };
-export declare function Toast({ title, message, severity, action, onClose, }: ToastProps): React.ReactNode;
+export declare function Toast({ title, subheader, message, severity, action, onClose, }: ToastProps): React.ReactNode;

package/dist/components/toast/Toast.js

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
 import styles from './Toast.module.css';
 import { Button } from '../button/Button';
 import { Headline } from '../headline/Headline';
-export function Toast({ title, message, severity = 'info', action, onClose, }) {
+export function Toast({ title, subheader, message, severity = 'info', action, onClose, }) {
     const showHeader = Boolean(title);
     const showMessage = Boolean(message);
     const canClose = severity !== 'neutral';
@@ -16,5 +16,5 @@ export function Toast({ title, message, severity = 'info', action, onClose, }) {
                     onClose === null || onClose === void 0 ? void 0 : onClose();
                 }
             }
-            : undefined, tabIndex: isDismissibleNeutral ? 0 : undefined, "aria-label": isDismissibleNeutral ? 'Luk notifikation' : undefined, children: [_jsxs("div", { className: styles.content, children: [showHeader && (_jsxs("div", { className: styles.row, children: [_jsx(Headline, { size: 4, severity: severity, disableMargin: true, children: title }), CloseButton] })), showMessage && (_jsxs("div", { className: styles.row, children: [_jsx("div", { className: styles.message, children: message }), !showHeader && CloseButton] }))] }), action && (_jsx("div", { className: styles.actions, children: _jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) }))] }));
+            : undefined, tabIndex: isDismissibleNeutral ? 0 : undefined, "aria-label": isDismissibleNeutral ? 'Luk notifikation' : undefined, children: [_jsxs("div", { className: styles.content, children: [showHeader && (_jsxs("div", { className: styles.row, children: [_jsx(Headline, { size: 4, severity: severity, disableMargin: true, subheader: subheader, children: title }), CloseButton] })), showMessage && (_jsxs("div", { className: styles.row, children: [_jsx("div", { className: styles.message, children: message }), !showHeader && CloseButton] }))] }), action && (_jsx("div", { className: styles.actions, children: _jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) }))] }));
 }

package/dist/hooks/useViewportFill.d.ts

@@ -1,15 +1,11 @@
-import { CSSProperties, RefObject } from 'react';
+import { type CSSProperties, type RefObject } from 'react';
 type Options = {
     bottomOffset?: number;
     min?: number;
     includeMarginTop?: boolean;
-    /**
-     * Optional element to observe in addition to the target itself.
-     * Useful when a nearby wrapper changes height and pushes the table.
-     */
     watchRef?: RefObject<HTMLElement | null>;
 };
-export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T>, { bottomOffset, min, includeMarginTop, watchRef }?: Options): {
+export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T | null>, { bottomOffset, min, includeMarginTop, watchRef }?: Options): {
     maxHeight: number;
     style: CSSProperties;
     recompute: () => void;

package/dist/hooks/useViewportFill.js

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
     const [maxHeight, setMaxHeight] = useState(min);
@@ -11,18 +11,22 @@ export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMargi
         const rect = el.getBoundingClientRect();
         let top = rect.top;
         if (includeMarginTop) {
-            const mt = parseFloat(window.getComputedStyle(el).marginTop || '0') || 0;
-            top -= mt;
+            const marginTop = parseFloat(window.getComputedStyle(el).marginTop || '0') || 0;
+            top -= marginTop;
         }
         const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
-        setMaxHeight(prev => (prev !== next ? next : prev));
+        setMaxHeight(prev => (prev === next ? prev : next));
     }, [ref, bottomOffset, min, includeMarginTop]);
     const scheduleMeasure = useCallback(() => {
         if (typeof window === 'undefined')
             return;
-        if (raf.current != null)
+        if (raf.current != null) {
             cancelAnimationFrame(raf.current);
-        raf.current = window.requestAnimationFrame(measure);
+        }
+        raf.current = window.requestAnimationFrame(() => {
+            raf.current = null;
+            measure();
+        });
     }, [measure]);
     useIsomorphicLayoutEffect(() => {
         measure();
@@ -34,39 +38,40 @@ export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMargi
         const target = ref.current;
         const extra = (_a = watchRef === null || watchRef === void 0 ? void 0 : watchRef.current) !== null && _a !== void 0 ? _a : null;
         const parent = target.parentElement;
-        const onResizeOrScroll = () => scheduleMeasure();
+        const onResize = () => scheduleMeasure();
         const onTransitionOrAnimationEnd = () => scheduleMeasure();
-        window.addEventListener('resize', onResizeOrScroll);
-        window.addEventListener('scroll', onResizeOrScroll, { passive: true });
-        // Cheap and often enough for collapsible filter panels.
+        window.addEventListener('resize', onResize);
         document.addEventListener('transitionend', onTransitionOrAnimationEnd, true);
         document.addEventListener('animationend', onTransitionOrAnimationEnd, true);
-        let ro = null;
+        let resizeObserver = null;
         if ('ResizeObserver' in window) {
-            ro = new ResizeObserver(() => scheduleMeasure());
-            ro.observe(target);
-            if (parent && parent !== target)
-                ro.observe(parent);
-            if (extra && extra !== target && extra !== parent)
-                ro.observe(extra);
+            resizeObserver = new ResizeObserver(() => scheduleMeasure());
+            resizeObserver.observe(target);
+            if (parent && parent !== target) {
+                resizeObserver.observe(parent);
+            }
+            if (extra && extra !== target && extra !== parent) {
+                resizeObserver.observe(extra);
+            }
         }
         return () => {
-            window.removeEventListener('resize', onResizeOrScroll);
-            window.removeEventListener('scroll', onResizeOrScroll);
+            window.removeEventListener('resize', onResize);
             document.removeEventListener('transitionend', onTransitionOrAnimationEnd, true);
             document.removeEventListener('animationend', onTransitionOrAnimationEnd, true);
-            ro === null || ro === void 0 ? void 0 : ro.disconnect();
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
             if (raf.current != null) {
                 cancelAnimationFrame(raf.current);
+                raf.current = null;
             }
         };
     }, [ref, watchRef, scheduleMeasure]);
+    const style = useMemo(() => ({
+        maxHeight,
+        overflow: 'auto',
+    }), [maxHeight]);
     return {
         maxHeight,
-        style: {
-            maxHeight,
-            overflow: 'auto',
-        },
+        style,
         recompute: measure,
     };
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/stack/Stack';
 export * from './components/button/Button';
 export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
@@ -8,6 +9,7 @@ export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
+export * from './components/headline/CollapsibleHeadline';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/layout-footer/LayoutFooter';
 export * from './components/forms/input/Input';
@@ -71,3 +73,6 @@ export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
 export * from './components/theme-button/ThemeButton';
+export * from './components/copy-button/CopyButton';
+export * from './components/divider/Divider';
+export * from './components/grid/Grid';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './components/stack/Stack';
 export * from './components/button/Button';
 export * from './components/button-select/ButtonSelect';
 export * from './components/nav-bar/NavBar';
@@ -8,6 +9,7 @@ export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
+export * from './components/headline/CollapsibleHeadline';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/layout-footer/LayoutFooter';
 export * from './components/forms/input/Input';
@@ -71,3 +73,6 @@ export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
 export * from './components/theme-button/ThemeButton';
+export * from './components/copy-button/CopyButton';
+export * from './components/divider/Divider';
+export * from './components/grid/Grid';

package/dist/styles/css-helper-classes/flex.css

@@ -84,6 +84,18 @@
   gap: var(--spacing-xl);
 }
 
+.dbc-gap-2xl {
+  gap: var(--spacing-2xl);
+}
+
+.dbc-gap-3xl {
+  gap: var(--spacing-3xl);
+}
+
+.dbc-gap-4xl {
+  gap: var(--spacing-4xl);
+}
+
 .dbc-flex-grow {
   flex-grow: 1;
 }

package/dist/styles/css-helper-classes/spacing.css

@@ -1,4 +1,9 @@
 /* Margin - all axes */
+
+.dbc-m-0 {
+  margin: 0;
+}
+
 .dbc-m-xxs {
   margin: var(--spacing-xxs);
 }