@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/table/table-cell.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { cn } from '../../../utils/cn';
-import type { TableCellProps } from './types';
-
-/** @deprecated Use `DataTable` from `data-table` instead. */
-export function TableCell({ children, align = 'left', className, width }: TableCellProps) {
-  const getAlignment = () => {
-    switch (align) {
-      case 'center':
-        return 'justify-center text-center';
-      case 'right':
-        return 'justify-end text-right';
-      default:
-        return 'justify-start text-left';
-    }
-  };
-
-  return (
-    <div className={cn('flex flex-col overflow-hidden', getAlignment(), width || 'min-w-0 flex-1', className)}>
-      {typeof children === 'string' || typeof children === 'number' ? (
-        <span className="truncate text-ods-text-primary text-h4">{children}</span>
-      ) : (
-        children
-      )}
-    </div>
-  );
-}

package/src/components/ui/table/table-column-filter-dropdown.tsx

@@ -1,76 +0,0 @@
-'use client';
-
-import { cn } from '../../../utils/cn';
-import { FiltersDropdown } from '../../features';
-import { Filter02Icon } from '../../icons-v2-generated';
-import type { FilterOption, TableFilters } from './types';
-
-/** @deprecated Use `DataTableColumnFilter` from `data-table` instead. */
-export interface TableColumnFilterDropdownProps {
-  /** Column key used for filter state */
-  columnKey: string;
-  /** Column label for display and accessibility */
-  columnLabel: string;
-  /** Available filter options for the column */
-  filterOptions: FilterOption[];
-  /** Current filter state for all columns */
-  filters?: TableFilters;
-  /** Called when filters change */
-  onFilterChange: (filters: TableFilters) => void;
-  /** Dropdown placement */
-  placement?: 'bottom-start' | 'bottom-end' | 'bottom';
-  /** Additional class for the dropdown */
-  dropdownClassName?: string;
-}
-
-/** @deprecated Use `DataTableColumnFilter` from `data-table` instead. */
-export function TableColumnFilterDropdown({
-  columnKey,
-  columnLabel,
-  filterOptions,
-  filters,
-  onFilterChange,
-  placement = 'bottom-start',
-  dropdownClassName = 'min-w-[240px]',
-}: TableColumnFilterDropdownProps) {
-  const activeCount = filters?.[columnKey]?.length || 0;
-
-  return (
-    <FiltersDropdown
-      triggerElement={
-        <div
-          className="flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 transition-all duration-200 hover:bg-ods-bg-active"
-          aria-label={`Filter by ${columnLabel}`}
-        >
-          <span className="select-none text-ods-text-secondary text-h5">{columnLabel}</span>
-          <Filter02Icon
-            className={cn('h-4 w-4 transition-colors', activeCount > 0 ? 'text-ods-accent' : 'text-ods-text-secondary')}
-          />
-        </div>
-      }
-      sections={[
-        {
-          id: columnKey,
-          title: columnLabel,
-          type: 'checkbox',
-          options: filterOptions,
-          allowSelectAll: true,
-        },
-      ]}
-      onApply={appliedFilters => {
-        onFilterChange({
-          ...filters,
-          [columnKey]: appliedFilters[columnKey] || [],
-        });
-      }}
-      onReset={() => {
-        const newFilters = { ...filters };
-        delete newFilters[columnKey];
-        onFilterChange(newFilters);
-      }}
-      currentFilters={{ [columnKey]: filters?.[columnKey] || [] }}
-      placement={placement}
-      dropdownClassName={dropdownClassName}
-    />
-  );
-}

package/src/components/ui/table/table-description-cell.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import { cn } from '../../../utils/cn';
-
-/** @deprecated Use `data-table` instead. */
-export interface TableDescriptionCellProps {
-  /**
-   * The description text to display
-   */
-  text: string;
-  /**
-   * Optional additional CSS classes
-   */
-  className?: string;
-  /**
-   * Maximum number of lines to display before truncating
-   * @default 3
-   */
-  maxLines?: number;
-}
-
-/**
- * @deprecated Use `data-table` instead.
- */
-export function TableDescriptionCell({ text, className, maxLines = 3 }: TableDescriptionCellProps) {
-  return (
-    <div className="flex-1">
-      <div className="flex flex-col justify-center">
-        <span
-          className={cn(
-            'break-words text-ods-text-secondary text-h6',
-            maxLines === 1 && 'truncate',
-            maxLines === 2 && 'line-clamp-2',
-            maxLines === 3 && 'line-clamp-3',
-            maxLines === 4 && 'line-clamp-4',
-            maxLines === 5 && 'line-clamp-5',
-            maxLines === 6 && 'line-clamp-6',
-            className,
-          )}
-        >
-          {text}
-        </span>
-      </div>
-    </div>
-  );
-}

package/src/components/ui/table/table-empty-state.tsx

@@ -1,24 +0,0 @@
-'use client';
-
-import { cn } from '../../../utils/cn';
-import { SearchIcon } from '../../icons-v2-generated';
-import { NoData } from '../no-data';
-import type { TableEmptyStateProps } from './types';
-
-/** @deprecated Use `DataTableEmpty` from `data-table` instead. */
-export function TableEmptyState({ message, description, emptyState, icon, action, className }: TableEmptyStateProps) {
-  // Two vocabularies, one component. `description` is the shipped single-line
-  // prop; `emptyState` is the full NoData bag (icon, title, description,
-  // actions) and, spread last, wins over both — exactly as in `DataTableBody`.
-  return (
-    <NoData
-      icon={icon ?? <SearchIcon />}
-      title={message ?? 'No results found'}
-      description={description ?? (message == null ? 'Try adjusting your search or filters' : undefined)}
-      buttonLabel={action?.label}
-      onButtonClick={action?.onClick}
-      className={cn('py-[var(--spacing-system-xxl)]', className)}
-      {...emptyState}
-    />
-  );
-}

package/src/components/ui/table/table-header.tsx

@@ -1,182 +0,0 @@
-'use client';
-
-import { useContentLgUp } from '../../../hooks/ui/use-content-breakpoint';
-import { cn } from '../../../utils/cn';
-import { Arrow01DownIcon } from '../../icons-v2-generated/arrows/arrow-01-down-icon';
-import { Arrow01UpIcon } from '../../icons-v2-generated/arrows/arrow-01-up-icon';
-import { SwitchVrIcon } from '../../icons-v2-generated/arrows/switch-vr-icon';
-import { Checkbox } from '../checkbox';
-import { InfoHint } from '../info-hint';
-import { TableColumnFilterDropdown } from './table-column-filter-dropdown';
-import type { TableColumn, TableHeaderProps, TableRowData } from './types';
-
-/** The default header label: wraps inside its cell with a balanced split. */
-const TABLE_HEADER_LABEL_CLASS = 'min-w-0 text-balance uppercase text-ods-text-secondary text-h5';
-import { getHideClasses, TABLE_ACTIONS_COLUMN_KEY } from './utils';
-
-/** @deprecated Use `DataTableHeader` from `data-table` instead. */
-export function TableHeader<T = TableRowData>({
-  columns,
-  className,
-  sortBy,
-  sortDirection,
-  onSort,
-  filters,
-  onFilterChange,
-  selectable,
-  allSelected,
-  someSelected,
-  onSelectAll,
-  totalItemsCount,
-  stickyHeader,
-  stickyHeaderOffset,
-}: TableHeaderProps<T>) {
-  const getAlignment = (align?: 'left' | 'center' | 'right') => {
-    switch (align) {
-      case 'center':
-        return 'justify-center';
-      case 'right':
-        return 'justify-end';
-      default:
-        return 'justify-start';
-    }
-  };
-
-  const handleSort = (column: TableColumn<T>) => {
-    if (!column.sortable || !onSort) return;
-
-    const columnKey = column.sortKey || column.key;
-    let newDirection: 'asc' | 'desc' = 'asc';
-
-    if (sortBy === columnKey) {
-      newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-    }
-
-    onSort(columnKey, newDirection);
-  };
-
-  const getSortIcon = (column: TableColumn<T>) => {
-    if (!column.sortable) return null;
-
-    const columnKey = column.sortKey || column.key;
-    const isActive = sortBy === columnKey;
-
-    if (!isActive) {
-      return <SwitchVrIcon className="h-4 w-4 text-ods-text-secondary" />;
-    }
-
-    return sortDirection === 'asc' ? (
-      <Arrow01UpIcon className="h-4 w-4 text-ods-accent" />
-    ) : (
-      <Arrow01DownIcon className="h-4 w-4 text-ods-accent" />
-    );
-  };
-
-  const isLgUp = useContentLgUp() ?? false;
-
-  return (
-    <div
-      className={cn(
-        'relative hidden h-11 items-center gap-4 px-4 py-3 content-md:flex',
-        stickyHeader && `sticky z-10 bg-ods-bg ${stickyHeaderOffset || 'top-0'}`,
-        className,
-      )}
-    >
-      {/* Selection checkbox */}
-      {selectable && (
-        <div className="flex w-10 shrink-0 items-center justify-center">
-          <Checkbox
-            checked={allSelected || (someSelected && !allSelected) ? true : false}
-            onCheckedChange={onSelectAll}
-            className="border-ods-border"
-          />
-        </div>
-      )}
-
-      {columns.map(column => {
-        const isActionsColumn = column.key === TABLE_ACTIONS_COLUMN_KEY;
-        const filterable = column.filterable && column.filterOptions && onFilterChange;
-
-        // Hide columns on mobile if they are not actions or filterable
-        if (!isLgUp && !isActionsColumn && !filterable) {
-          return null;
-        }
-
-        return (
-          <div
-            key={column.key}
-            className={cn(
-              'flex items-center gap-2',
-              isLgUp && getAlignment(column.align),
-              isLgUp && (column.width || 'min-w-0 flex-1'),
-              column.className,
-              // Only apply hide classes if the column is not filterable or on tablet
-              !(filterable && !isLgUp) && getHideClasses(column.hideAt),
-              isActionsColumn && 'ml-auto',
-            )}
-          >
-            {isActionsColumn ? (
-              // Render total items count in actions column
-              totalItemsCount > 0 && (
-                <span className="whitespace-nowrap text-ods-text-secondary text-h6">
-                  Showing {totalItemsCount} {totalItemsCount === 1 ? 'result' : 'results'}
-                </span>
-              )
-            ) : column.filterable && column.filterOptions && onFilterChange ? (
-              /* Filterable column — label + icon are both inside the dropdown trigger */
-              <>
-                <TableColumnFilterDropdown
-                  columnKey={column.key}
-                  columnLabel={column.label}
-                  filterOptions={column.filterOptions}
-                  filters={filters}
-                  onFilterChange={onFilterChange}
-                />
-                {column.hint ? <InfoHint label={column.label}>{column.hint}</InfoHint> : null}
-              </>
-            ) : (
-              /* Non-filterable column — regular label with optional sort */
-              <div
-                className={cn(
-                  // `min-w-0` lets the row shrink to its column, so a long label
-                  // wraps inside the cell instead of forcing the row past it.
-                  'flex min-w-0 items-center gap-2',
-                  column.sortable && 'cursor-pointer transition-colors hover:text-ods-text-primary',
-                )}
-                onClick={() => handleSort(column)}
-              >
-                {column.renderHeader ? (
-                  <>
-                    {column.renderHeader()}
-                    {getSortIcon(column)}
-                  </>
-                ) : (
-                  <>
-                    {/* Wraps inside the cell, with a BALANCED split — "IMPLEMENTATION
-                        / OWNERS", never one word stranded on a line of its own. A
-                        nowrapped label longer than its column paints straight
-                        across the next column's header. */}
-                    {column.hint ? (
-                      /* The hint sits in a LABEL GROUP with the text, pinned to the
-                        FIRST line (`items-start`): on a label that breaks onto a
-                        second line it reads beside the opening word instead of
-                        floating in the gap between the two. Added only when a
-                        hint exists, so a hint-less header keeps its DOM. */
-                      <span className="flex min-w-0 items-start gap-[var(--spacing-system-xxs)]">
-                        <span className={TABLE_HEADER_LABEL_CLASS}>{column.label}</span>
-                        <InfoHint label={column.label}>{column.hint}</InfoHint>
-                      </span>
-                    ) : (
-                      <span className={TABLE_HEADER_LABEL_CLASS}>{column.label}</span>
-                    )}
-                    {getSortIcon(column)}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/ui/table/table-row.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import type React from 'react';
-import Link from '../../../embed-shims/next-link';
-import { cn } from '../../../utils/cn';
-import { isOwnClick } from '../../../utils/own-click';
-import { Checkbox } from '../checkbox';
-import { TableCell } from './table-cell';
-import { COMPACT_ROW_MIN_HEIGHT, ROW_HEIGHT_DESKTOP } from './table-skeleton';
-import type { TableRowData, TableRowProps } from './types';
-import { getHideClasses } from './utils';
-
-/** Narrow an unknown to something a dot-path segment can index into. */
-function isIndexable(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null;
-}
-
-/** @deprecated Use `DataTableRow` from `data-table` instead. */
-export function TableRow<T = TableRowData>({
-  item,
-  columns,
-  onClick,
-  href,
-  className,
-  index,
-  compact,
-  selectable,
-  selected,
-  onSelect,
-  animateRowReorder,
-  motionDiv,
-}: TableRowProps<T>) {
-  const isLinkMode = Boolean(href) && !onClick;
-  // Opt-in FLIP: the outer row becomes a `motion.div` (passed down lazily from
-  // Table, so framer-motion stays out of the default bundle) that animates only
-  // its position (`layout="position"`) so reordering doesn't distort inner cell
-  // content (CircularProgress / ProgressBar). Plain `<div>` when off, or until
-  // framer-motion has loaded — zero cost on the default path.
-  const animate = Boolean(animateRowReorder && motionDiv);
-  const Row: React.ElementType = animate && motionDiv ? motionDiv : 'div';
-  const motionProps = animate
-    ? { layout: 'position' as const, transition: { layout: { duration: 0.35, ease: [0.22, 1, 0.36, 1] as const } } }
-    : {};
-
-  const handleRowClick = (e: React.MouseEvent) => {
-    if (!isOwnClick(e.target, e.currentTarget)) return;
-
-    if (onClick) {
-      onClick(item);
-    }
-  };
-
-  const handleSelect = () => {
-    if (onSelect) {
-      onSelect(item);
-    }
-  };
-
-  const getCellValue = (column: (typeof columns)[0]): React.ReactNode => {
-    if (column.renderCell) {
-      return column.renderCell(item, column);
-    }
-
-    // Access nested properties using dot notation
-    const keys = column.key.split('.');
-    let value: unknown = item;
-    for (const key of keys) {
-      if (!isIndexable(value)) {
-        value = undefined;
-        break;
-      }
-      value = value[key];
-    }
-
-    if (value === null || value === undefined) {
-      return '-';
-    }
-    if (typeof value === 'boolean') {
-      return value ? 'Yes' : 'No';
-    }
-    if (typeof value === 'object') {
-      return JSON.stringify(value);
-    }
-
-    return String(value);
-  };
-
-  return (
-    <Row
-      {...motionProps}
-      className={cn(
-        'relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card',
-        (onClick || isLinkMode) && 'cursor-pointer transition-colors hover:bg-ods-bg-active',
-        typeof className === 'function' ? className(item, index) : className,
-      )}
-      onClick={isLinkMode ? undefined : handleRowClick}
-    >
-      {isLinkMode && href && (
-        <Link href={href} prefetch={false} className="absolute inset-0" aria-label="View details" />
-      )}
-      <div
-        className={cn(
-          'relative flex items-center gap-4 px-4',
-          // `compact` rows are content-sized, but every row in a table shows
-          // the same cell shapes, so a MIN height makes the body's height a
-          // function of the row COUNT alone. That is what lets a host reserve
-          // space for a full page and stop the layout jumping between a full
-          // page, a short last page and the skeleton.
-          compact ? cn('py-2', COMPACT_ROW_MIN_HEIGHT) : cn('py-0', ROW_HEIGHT_DESKTOP),
-          isLinkMode && 'pointer-events-none',
-        )}
-      >
-        {/* Selection checkbox */}
-        {selectable && (
-          <div className="pointer-events-auto flex w-10 shrink-0 items-center justify-center" data-no-row-click>
-            <Checkbox checked={selected} onCheckedChange={handleSelect} className="border-ods-border" />
-          </div>
-        )}
-
-        {columns.map(column => (
-          <TableCell
-            key={column.key}
-            align={column.align}
-            width={column.width || 'flex-1 min-w-0'}
-            className={cn(column.className, getHideClasses(column.hideAt))}
-          >
-            {getCellValue(column)}
-          </TableCell>
-        ))}
-      </div>
-    </Row>
-  );
-}

package/src/components/ui/table/table-skeleton.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import { cn } from '../../../utils/cn';
-import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
-import { CHECKBOX_BOX_CLASS } from '../checkbox';
-import type { TableCardSkeletonProps } from './types';
-import { getHideClasses, TABLE_ACTIONS_COLUMN_KEY, TABLE_CHEVRON_COLUMN_KEY } from './utils';
-
-// INNER row heights: the bordered row card adds 1px top + bottom, so the
-// outer block totals the designed 68px / 80px.
-const ROW_HEIGHT_DESKTOP = 'h-[66px] content-md:h-[78px]';
-/**
- * A `compact` row's floor. Compact rows are content-sized (`py-2`), but every
- * row in one table renders the same cell shapes, so pinning a minimum makes the
- * body's height a function of the ROW COUNT alone. Hosts do NOT reserve
- * `rows × 56` themselves any more: `skeletonRows` + `minRows` hold
- * a full page's height in every state (placeholders below), and a cell taller
- * than this floor (avatar + two lines) wants a non-compact, fixed-height row.
- */
-const COMPACT_ROW_MIN_HEIGHT = 'min-h-[56px]';
-const ROW_HEIGHT_MOBILE = 'h-[66px]';
-
-/** @deprecated Use `DataTableSkeleton` from `data-table` instead. */
-/**
- * Rows a table's skeleton draws when it knows no page size: a typical count for an UNPAGED table. A table with page
- * pagination draws its `pageSize` instead (one full page, at every width), and a host may state `skeletonRows`.
- */
-export const TABLE_SKELETON_ROWS = 10;
-
-export function TableCardSkeleton({
-  columns,
-  rows = TABLE_SKELETON_ROWS,
-  compact = false,
-  actions,
-  selectable = false,
-  className,
-  rowClassName,
-}: TableCardSkeletonProps) {
-  // The multi-line placeholder belongs to the primary text column — the wide,
-  // GROWING one (`flex-1` / `flex-[n]`), not necessarily the first column, which
-  // may be a narrow leading action/icon column. Falls back to the first column.
-  const primaryKey = (columns.find(c => /flex-(1|\[)/.test(c.width || '')) ?? columns[0])?.key;
-  return (
-    <>
-      {Array.from({ length: rows }).map((_, index) => (
-        <div
-          key={index}
-          className={cn('relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card', className)}
-        >
-          {/* `TableRow`'s own row: the same frame, gap and height at every breakpoint, each column in its own cell
-              width (the synthetic actions and chevron columns included), so a loaded row takes the skeleton's place. */}
-          <div
-            className={cn(
-              'relative flex items-center gap-4 px-4',
-              compact ? cn('py-2', COMPACT_ROW_MIN_HEIGHT) : cn('py-0', ROW_HEIGHT_DESKTOP),
-              rowClassName,
-            )}
-          >
-            {selectable && (
-              <div className="flex w-10 shrink-0 items-center justify-center">
-                <UnifiedSkeleton className={CHECKBOX_BOX_CLASS} />
-              </div>
-            )}
-            {columns.map(column => {
-              const cellClass = cn('flex shrink-0', column.width || 'min-w-0 flex-1', getHideClasses(column.hideAt));
-              if (column.key === TABLE_ACTIONS_COLUMN_KEY) {
-                // One button per row action, at the real buttons' size: an icon-only action an icon button. A host
-                // that renders its own actions (`renderRowActions`) gets one icon button in the column's width.
-                return (
-                  <div key={column.key} className={cn(cellClass, 'items-center justify-end gap-2')}>
-                    {(actions ?? [{ iconOnly: true }]).map((action, i) => (
-                      // biome-ignore lint/suspicious/noArrayIndexKey: skeleton buttons never reorder
-                      <InteractiveSkeleton.Button key={i} size={action.iconOnly ? 'icon' : 'default'} />
-                    ))}
-                  </div>
-                );
-              }
-              if (column.key === TABLE_CHEVRON_COLUMN_KEY) {
-                return (
-                  <div key={column.key} className={cn(cellClass, 'items-center justify-end')}>
-                    <InteractiveSkeleton.Button size="icon" />
-                  </div>
-                );
-              }
-              return (
-                <div key={column.key} className={cn(cellClass, 'flex-col justify-center overflow-hidden')}>
-                  {/* A cell's text (`TableCell`: the primary face), and on the primary column every other row a
-                      second, secondary line (a description or an id under it). */}
-                  <TextLineSkeleton type="h4" className="w-3/4" />
-                  {index % 2 === 0 && column.key === primaryKey && <TextLineSkeleton type="h6" className="w-1/2" />}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </>
-  );
-}
-
-/** @deprecated */
-export { COMPACT_ROW_MIN_HEIGHT, ROW_HEIGHT_DESKTOP, ROW_HEIGHT_MOBILE };

package/src/components/ui/table/table-timestamp-cell.tsx

@@ -1,81 +0,0 @@
-'use client';
-
-import { cn } from '../../../utils/cn';
-import { formatDateWithTimezone, VIEWER_TIMEZONE } from '../../../utils/format';
-
-/** @deprecated Use `data-table` instead. */
-export interface TableTimestampCellProps {
-  /**
-   * The timestamp to display (can be a Date, ISO string, or formatted string)
-   */
-  timestamp: string | Date;
-  /**
-   * The ID to display below the timestamp
-   */
-  id: string;
-  /**
-   * Optional label for the ID (e.g., "Log ID", "Chat ID")
-   * If not provided, just shows the ID
-   */
-  idLabel?: string;
-  /**
-   * Optional additional CSS classes for the container
-   */
-  className?: string;
-  /**
-   * Format the timestamp automatically if it's an ISO string or Date
-   * @default true
-   */
-  formatTimestamp?: boolean;
-}
-
-/** The viewer's own date-time shape, in their zone and locale — the meaning of a
- *  dashboard table timestamp. Rendered by the one renderer, not `toLocaleString`. */
-const formatLocalTimestamp = (date: Date): string =>
-  formatDateWithTimezone(date, VIEWER_TIMEZONE, 'localeDateTime', { viewerLocale: true });
-
-/**
- * Formats a timestamp for display
- * If already formatted (contains space or comma), returns as-is
- * Otherwise formats as locale string
- */
-function formatTimestampValue(timestamp: string | Date): string {
-  if (timestamp instanceof Date) {
-    return formatLocalTimestamp(timestamp);
-  }
-
-  // If it looks like an ISO string, format it
-  if (typeof timestamp === 'string') {
-    // Check if already formatted (contains typical formatting chars)
-    if (timestamp.includes(',') || (timestamp.includes('/') && timestamp.includes(':'))) {
-      return timestamp;
-    }
-
-    // Try to parse and format ISO strings
-    const date = new Date(timestamp);
-    if (!isNaN(date.getTime())) {
-      return formatLocalTimestamp(date);
-    }
-  }
-
-  // Return as-is if we can't parse it
-  return String(timestamp);
-}
-
-/** @deprecated Use `data-table` instead. */
-export function TableTimestampCell({
-  timestamp,
-  id,
-  idLabel,
-  className,
-  formatTimestamp = true,
-}: TableTimestampCellProps) {
-  const displayTimestamp = formatTimestamp ? formatTimestampValue(timestamp) : String(timestamp);
-
-  return (
-    <div className={cn('flex shrink-0 flex-col justify-center', className)}>
-      <span className="truncate text-ods-text-primary text-h4">{displayTimestamp}</span>
-      <span className="truncate text-ods-text-secondary text-h6">{idLabel ? `${idLabel}: ${id}` : id}</span>
-    </div>
-  );
-}