@dbcdk/react-components 0.0.21 → 0.0.23

package/dist/components/button/Button.module.css

@@ -23,6 +23,7 @@
   user-select: none;
   white-space: nowrap;
 }
+
 .buttonLink {
   color: inherit;
   text-decoration: none;
@@ -35,9 +36,11 @@
     border-color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard);
 }
+
 .button:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
 .round {
@@ -47,6 +50,7 @@
 .rounded {
   border-radius: var(--border-radius-rounded);
 }
+
 .button:disabled,
 .button[aria-disabled='true'] {
   cursor: not-allowed;
@@ -73,7 +77,8 @@
 
 .link:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  text-decoration: underline;
+  text-decoration-color: currentColor;
 }
 
 /* Icons */
@@ -93,8 +98,9 @@
 
 .button.xs {
   height: var(--component-size-xs);
-  min-block-size: var(--component-size-sm);
-  padding-inline: var(--spacing-sm);
+  min-block-size: var(--component-size-xs);
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
 }
 
 .button.sm {
@@ -103,13 +109,6 @@
   padding-inline: var(--spacing-xs);
 }
 
-.button.xs {
-  height: var(--component-size-xs);
-  min-block-size: var(--component-size-xs);
-  padding-inline: var(--spacing-xs);
-  font-size: var(--font-size-xs);
-}
-
 .button.sm svg {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
@@ -163,9 +162,8 @@
 
 .default:focus-visible {
   outline: none;
-  box-shadow:
-    inset 0 0 0 1px var(--color-border-selected),
-    var(--focus-ring);
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
 .outlined {
@@ -223,6 +221,13 @@
   background-color: var(--opac-bg-light);
 }
 
+.button.inline:focus-visible {
+  outline: none;
+  background-color: var(--opac-bg-light);
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
 .active {
   background-color: var(--button-bg-primary);
   color: var(--button-fg-primary);

package/dist/components/filter-field/FilterField.js

@@ -137,7 +137,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
                         isTypingRef.current = true;
                         setLocalValue(next);
                         scheduleEmitValue(next);
-                    }, fullWidth: true, inputSize: size, placeholder: placeholder, width: "160px", minWidth: "120px", disabled: disabled, onClear: () => {
+                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, onClear: () => {
                         isTypingRef.current = false;
                         if (debounceRef.current)
                             clearTimeout(debounceRef.current);

package/dist/components/filter-field/FilterField.module.css

@@ -96,6 +96,15 @@
   z-index: 2;
 }
 
+.filterField.outlined.active::before {
+  inset-inline-start: -1px;
+  top: -1px;
+  bottom: -1px;
+  width: 4px;
+  border-top-left-radius: var(--border-radius-default);
+  border-bottom-left-radius: var(--border-radius-default);
+}
+
 /* =========================
    FOCUS
    ========================= */
@@ -157,9 +166,10 @@
   display: inline-flex;
   align-items: center;
   padding-block: var(--spacing-2xs);
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xs);
+  padding-inline-end: var(--spacing-xxs);
   font-size: var(--font-size-sm);
-  color: var(--color-fg-muted);
+  color: var(--color-fg-subtle);
   white-space: nowrap;
   user-select: none;
 }
@@ -175,8 +185,7 @@
   gap: var(--spacing-xxs);
   height: 100%;
   padding-block: var(--spacing-2xs);
-  padding-inline: var(--spacing-sm);
-
+  padding-inline: var(--spacing-xxs);
   color: var(--color-fg-default);
   background: transparent;
   border: 0;
@@ -184,7 +193,7 @@
   position: relative;
   z-index: 0;
   font-weight: var(--font-weight-default);
-
+  font-size: var(--font-size-sm);
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
@@ -206,6 +215,17 @@
   z-index: 1;
 }
 
+.filterField .operatorTrigger:hover:not(:disabled) {
+  color: var(--color-fg-default);
+}
+
+.filterField .operatorTrigger:hover:not(:disabled)::after {
+  background: color-mix(
+    in srgb,
+    var(--color-fg-default) 8%,
+    var(--filter-operator-bg, transparent)
+  );
+}
 /* =========================
    SEPARATORS
    ========================= */
@@ -272,8 +292,6 @@
   min-width: 0;
 }
 
-/* subtle highlight when active */
-
 .filterField.active .valueWrapper {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-selected) 18%, transparent);
 }

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.d.ts

@@ -12,8 +12,6 @@ interface ChipMultiToggleProps {
     onChange: (nextSelectedValues: string[]) => void;
     onToggle?: (toggledValue: string, isSelected: boolean) => void;
     size?: 'sm' | 'md' | 'lg';
-    selectedSeverity: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand';
-    unselectedSeverity?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | null;
     fullWidth?: boolean;
     disabled?: boolean;
     showAllOption?: boolean;

package/dist/components/forms/input/Input.module.css

@@ -72,9 +72,8 @@
   border-bottom-right-radius: 0;
 }
 
-/* Optional: if ClearButton is absolutely positioned, reserve space */
 .withClear .input {
-  padding-inline-end: calc(var(--spacing-md) + 28px);
+  padding-inline-end: calc(var(--spacing-md) + 16px);
 }
 
 /* Global focus reset - variants own visible focus treatment */
@@ -133,13 +132,12 @@
   box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
-/* Embedded = chromeless input for grouped controls like FilterField */
 .embedded {
   background-color: transparent;
   border-color: transparent;
   border-radius: 0;
   box-shadow: none;
-  padding-inline: calc(var(--spacing-sm) + var(--spacing-2xs));
+  padding-inline: var(--spacing-xs);
   padding-block: 0;
 }
 
@@ -175,7 +173,7 @@
 /* Sizes */
 .xs {
   block-size: var(--component-size-xs);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   padding: 0 var(--spacing-xxs);
 }
 

package/dist/components/pagination/Pagination.js

@@ -1,13 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useRef } from 'react';
 import styles from './Pagination.module.css';
 import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_OPTIONS[1], onPageChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showFirstLast = true, showGoToPage = true, }) {
+    const popoverRef = useRef(null);
+    const pageSizeRef = useRef(null);
     const totalPages = useMemo(() => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))), [itemsCount, take]);
     const currentPage = useMemo(() => {
         const p = Math.floor(skip / Math.max(1, take)) + 1;
@@ -40,5 +42,13 @@ export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_
     }, [itemsCount, skip, take]);
     const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
     const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
-    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", currentPage, "/", totalPages, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => goToPage(page), children: page }) }, page))) }) })), _jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", take, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size))) }) })] }));
+    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { ref: popoverRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", currentPage, "/", totalPages, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages === null || pages === void 0 ? void 0 : pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => {
+                                var _a;
+                                goToPage(page);
+                                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                            }, children: page }) }, page))) }) })), _jsx(Popover, { ref: pageSizeRef, trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", take, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => {
+                                var _a;
+                                handlePageSizeChange(size);
+                                (_a = pageSizeRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                            }, children: size }) }, size))) }) })] }));
 }

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -66,11 +66,11 @@
 }
 
 .progressSegment[data-severity='progress'] {
-  background: color-mix(in srgb, var(--color-fg-subtle) 18%, var(--color-bg-surface));
+  background: color-mix(in srgb, var(--color-fg-subtle) 5%, var(--color-bg-surface));
 }
 
 .progressSegment[data-severity='missing'] {
-  background: color-mix(in srgb, var(--color-border-subtle) 65%, var(--color-bg-surface));
+  background: color-mix(in srgb, var(--color-fg-subtle) 2.5%, var(--color-bg-surface));
 }
 
 .progressSegment[data-severity='neutral'] {

package/dist/components/sidebar/Sidebar.d.ts

@@ -10,6 +10,7 @@ interface SidebarProps {
     productLogo?: React.ReactNode;
     activeLink?: string;
     version?: string | number;
+    hideSearch?: boolean;
 }
-export declare function Sidebar({ items, productLogo, activeLink, version }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
-export function Sidebar({ items, productLogo, activeLink, version }) {
-    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version }) }));
+export function Sidebar({ items, productLogo, activeLink, version, hideSearch, }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch }) }));
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -5,6 +5,7 @@ interface SidebarContainerProps {
     productLogo?: ReactNode;
     activeLink?: string;
     version?: string | number;
+    hideSearch?: boolean;
 }
-export declare function SidebarContainer({ logo, productLogo, activeLink, version, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, }: SidebarContainerProps): JSX.Element;
 export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -6,7 +6,7 @@ import { SidebarItems } from '../../../../components/sidebar/components/sidebar-
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
 import styles from './SidebarContainer.module.css';
-export function SidebarContainer({ logo, productLogo, activeLink, version, }) {
+export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: "dbc-muted-text dbc-sm-text", children: version })] })] }));
+    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] })] }));
 }

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -140,6 +140,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: var(--spacing-sm);
 }
 
 .companyLogo {
@@ -157,6 +158,12 @@
   display: none;
 }
 
+.version {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
 .logo {
   display: none;
 }

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

@@ -25,7 +25,7 @@ type HeaderExtrasArgs<T> = {
     index: number;
 };
 export type TableVariant = 'primary' | 'embedded';
-export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> & {
+export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseEnter'> & {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
@@ -33,6 +33,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     selectionMode?: 'single' | 'multiple';
     allRowsSelected?: boolean;
     onRowClick?: (row: T) => void;
+    onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
     onSelectAllRows?: (isSelected: boolean) => void;
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
@@ -59,5 +60,5 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     viewMode?: ViewMode;
     emptyConfig?: TableEmptyConfig;
 };
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
 export {};

package/dist/components/table/Table.js

@@ -18,7 +18,7 @@ function buildDefaultGridTemplate(args) {
         parts.push('minmax(120px, 1fr)');
     return parts.join(' ');
 }
-export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport = false, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
+export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport = false, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
     void viewportBottomOffset;
     void viewportMin;
     void viewportIncludeMarginTop;
@@ -115,7 +115,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                         e.preventDefault();
                         onRowClick(row);
                     }
-                }, onClick: e => {
+                }, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: e => {
                     const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
                     if (isModifierClick(e) && canSelect) {
                         e.preventDefault();
@@ -154,7 +154,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
     ]
         .filter(Boolean)
         .join(' ');
-    const tableShell = (_jsxs("div", { ...rest, className: tableClassName, role: "table", "aria-rowcount": data.length, children: [_jsx("div", { className: styles.header, role: "rowgroup", children: headerEl }), _jsx("div", { className: styles.bodyScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (bodyContent) })] }));
+    const tableShell = (_jsx("div", { ...rest, className: tableClassName, role: "table", "aria-rowcount": data.length, children: _jsxs("div", { className: styles.tableContent, children: [_jsx("div", { className: styles.header, role: "rowgroup", children: headerEl }), _jsx("div", { className: styles.bodyScroll, children: !data.length && !loading ? (_jsx("div", { className: styles.emptyStateSlot, children: _jsx(TableEmptyState, { config: emptyConfig }) })) : (bodyContent) })] }) }));
     const paginationEl = onPageChange && data.length > 0 ? (_jsx("div", { className: `${styles.paginationSlot} ${paginationPlacement === 'top' ? styles.paginationSlotTop : ''}`, children: _jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }) })) : null;
     if (fillViewport) {
         return (_jsxs("div", { className: styles.fillViewportRoot, style: {

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

@@ -74,7 +74,6 @@
   flex: 1 1 auto;
   min-block-size: 0;
   min-inline-size: 0;
-  max-inline-size: 100%;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -103,11 +102,15 @@
   display: none;
 }
 
+.tableContent {
+  inline-size: fit-content;
+  min-inline-size: 100%;
+}
+
 .headerCell {
   display: flex;
   align-items: center;
   position: relative;
-  min-block-size: 44px;
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
@@ -122,7 +125,6 @@
 }
 
 .sm .headerCell {
-  min-block-size: 40px;
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-sm);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",