@dbcdk/react-components 0.0.185 → 0.0.186

package/dist/client.cjs

@@ -25,6 +25,9 @@ var usePersistentState = require('./hooks/usePersistentState');
 var Chip = require('./components/chip/Chip');
 var Panel = require('./components/panel/Panel');
 var Card = require('./components/card/Card');
+var PrintFriendlyCard = require('./components/print-friendly/PrintFriendlyCard');
+var PrintFriendlyMetaBar = require('./components/print-friendly/PrintFriendlyMetaBar');
+var PrintFriendlyTable = require('./components/print-friendly/PrintFriendlyTable');
 var CardContainer = require('./components/card-container/CardContainer');
 var SkeletonLoaderItem = require('./components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
 var SkeletonLoader = require('./components/skeleton-loader/SkeletonLoader');
@@ -81,6 +84,7 @@ var RadioButton = require('./components/forms/radio-buttons/RadioButton');
 var RadioButtonGroup = require('./components/forms/radio-buttons/RadioButtonGroup');
 var IntervalSelect = require('./components/interval-select/IntervalSelect');
 var Accordion = require('./components/accordion/Accordion');
+var Timeline = require('./components/timeline/Timeline');
 var StatePage = require('./components/state-page/StatePage');
 var StickyFooterLayout = require('./components/sticky-footer-layout/StickyFooterLayout');
 var Typeahead = require('./components/forms/typeahead/Typeahead');
@@ -243,6 +247,24 @@ Object.keys(Card).forEach(function (k) {
 		get: function () { return Card[k]; }
 	});
 });
+Object.keys(PrintFriendlyCard).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return PrintFriendlyCard[k]; }
+	});
+});
+Object.keys(PrintFriendlyMetaBar).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return PrintFriendlyMetaBar[k]; }
+	});
+});
+Object.keys(PrintFriendlyTable).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return PrintFriendlyTable[k]; }
+	});
+});
 Object.keys(CardContainer).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -579,6 +601,12 @@ Object.keys(Accordion).forEach(function (k) {
 		get: function () { return Accordion[k]; }
 	});
 });
+Object.keys(Timeline).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Timeline[k]; }
+	});
+});
 Object.keys(StatePage).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -22,6 +22,9 @@ export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';
+export * from './components/print-friendly/PrintFriendlyCard';
+export * from './components/print-friendly/PrintFriendlyMetaBar';
+export * from './components/print-friendly/PrintFriendlyTable';
 export * from './components/card-container/CardContainer';
 export * from './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 export * from './components/skeleton-loader/SkeletonLoader';
@@ -78,6 +81,7 @@ export * from './components/forms/radio-buttons/RadioButton';
 export * from './components/forms/radio-buttons/RadioButtonGroup';
 export * from './components/interval-select/IntervalSelect';
 export * from './components/accordion/Accordion';
+export * from './components/timeline/Timeline';
 export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';

package/dist/client.js

@@ -23,6 +23,9 @@ export * from './hooks/usePersistentState';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';
+export * from './components/print-friendly/PrintFriendlyCard';
+export * from './components/print-friendly/PrintFriendlyMetaBar';
+export * from './components/print-friendly/PrintFriendlyTable';
 export * from './components/card-container/CardContainer';
 export * from './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 export * from './components/skeleton-loader/SkeletonLoader';
@@ -79,6 +82,7 @@ export * from './components/forms/radio-buttons/RadioButton';
 export * from './components/forms/radio-buttons/RadioButtonGroup';
 export * from './components/interval-select/IntervalSelect';
 export * from './components/accordion/Accordion';
+export * from './components/timeline/Timeline';
 export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';

package/dist/components/accordion/components/AccordionRow.cjs

@@ -4,47 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var Headline = require('../../../components/headline/Headline');
+var useCollapsibleHeight = require('../../../hooks/useCollapsibleHeight');
 var styles = require('./AccordionRow.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-function useCollapsibleHeight(isOpen, shouldAnimate) {
-  const innerRef = react.useRef(null);
-  const [height, setHeight] = react.useState("0px");
-  const prevIsOpenRef = react.useRef(isOpen);
-  react.useLayoutEffect(() => {
-    var _a, _b;
-    const el = innerRef.current;
-    if (!el) return;
-    const prevIsOpen = prevIsOpenRef.current;
-    prevIsOpenRef.current = isOpen;
-    const isOpenChanged = prevIsOpen !== isOpen;
-    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
-    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
-      setHeight(isOpen ? "auto" : "0px");
-      return;
-    }
-    if (isOpen) {
-      setHeight("0px");
-      requestAnimationFrame(() => {
-        setHeight(`${el.scrollHeight}px`);
-      });
-    } else {
-      setHeight(`${el.scrollHeight}px`);
-      requestAnimationFrame(() => {
-        setHeight("0px");
-      });
-    }
-  }, [isOpen, shouldAnimate]);
-  function onTransitionEnd(e) {
-    if (e.propertyName !== "height") return;
-    if (!innerRef.current) return;
-    if (isOpen) setHeight("auto");
-  }
-  return { innerRef, height, onTransitionEnd };
-}
 function AccordionRow({
   uid,
   index,
@@ -60,7 +26,7 @@ function AccordionRow({
   const headlineWeight = variant === "outlined" ? 400 : 500;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
-  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight.useCollapsibleHeight(isOpen, shouldAnimate);
   const [hasBeenOpened, setHasBeenOpened] = react.useState(isOpen);
   const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
   function handleToggle() {

package/dist/components/accordion/components/AccordionRow.js

@@ -1,44 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDown } from 'lucide-react';
-import { useState, useRef, useLayoutEffect } from 'react';
+import { useState } from 'react';
 import { Headline } from '../../../components/headline/Headline';
+import { useCollapsibleHeight } from '../../../hooks/useCollapsibleHeight';
 import styles from './AccordionRow.module.css';
 
-function useCollapsibleHeight(isOpen, shouldAnimate) {
-  const innerRef = useRef(null);
-  const [height, setHeight] = useState("0px");
-  const prevIsOpenRef = useRef(isOpen);
-  useLayoutEffect(() => {
-    var _a, _b;
-    const el = innerRef.current;
-    if (!el) return;
-    const prevIsOpen = prevIsOpenRef.current;
-    prevIsOpenRef.current = isOpen;
-    const isOpenChanged = prevIsOpen !== isOpen;
-    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
-    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
-      setHeight(isOpen ? "auto" : "0px");
-      return;
-    }
-    if (isOpen) {
-      setHeight("0px");
-      requestAnimationFrame(() => {
-        setHeight(`${el.scrollHeight}px`);
-      });
-    } else {
-      setHeight(`${el.scrollHeight}px`);
-      requestAnimationFrame(() => {
-        setHeight("0px");
-      });
-    }
-  }, [isOpen, shouldAnimate]);
-  function onTransitionEnd(e) {
-    if (e.propertyName !== "height") return;
-    if (!innerRef.current) return;
-    if (isOpen) setHeight("auto");
-  }
-  return { innerRef, height, onTransitionEnd };
-}
 function AccordionRow({
   uid,
   index,

package/dist/components/button-select/ButtonSelect.cjs

@@ -9,27 +9,36 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-function ButtonSelect({
-  options,
-  value,
-  onChange,
-  size = "md",
-  disabled
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-    Button.Button,
-    {
-      className: option.value === value ? `${styles__default.default.btn} ${styles__default.default.btnSelected}` : styles__default.default.btn,
-      variant: "outlined",
-      shape: "default",
-      size,
-      active: option.value === value,
-      disabled: disabled || option.disabled,
-      onClick: () => onChange(option.value),
-      children: option.label
-    },
-    option.value
-  )) });
+function ButtonSelect(props) {
+  const { options, size = "md", disabled } = props;
+  const selectedValues = Array.isArray(props.value) ? props.value : [props.value];
+  function handleSelect(optionValue) {
+    if (props.multiple) {
+      const currentValues = Array.isArray(props.value) ? props.value : [props.value];
+      const nextValue = currentValues.includes(optionValue) ? currentValues.filter((current) => current !== optionValue) : [...currentValues, optionValue];
+      props.onChange(nextValue);
+      return;
+    }
+    props.onChange(optionValue);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", children: options.map((option) => {
+    const isSelected = selectedValues.includes(option.value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        className: isSelected ? `${styles__default.default.btn} ${styles__default.default.btnSelected}` : styles__default.default.btn,
+        variant: "outlined",
+        shape: "default",
+        size,
+        active: isSelected,
+        "aria-pressed": isSelected,
+        disabled: disabled || option.disabled,
+        onClick: () => handleSelect(option.value),
+        children: option.label
+      },
+      option.value
+    );
+  }) });
 }
 
 exports.ButtonSelect = ButtonSelect;

package/dist/components/button-select/ButtonSelect.d.ts

@@ -6,11 +6,15 @@ export interface ButtonSelectOption<T extends string = string> {
     label: React.ReactNode;
     disabled?: boolean;
 }
-export interface ButtonSelectProps<T extends string = string> {
+interface ButtonSelectBaseProps<T extends string = string> {
     options: ButtonSelectOption<T>[];
-    value: T;
-    onChange: (value: T) => void;
     size?: ButtonSize;
     disabled?: boolean;
 }
-export declare function ButtonSelect<T extends string>({ options, value, onChange, size, disabled, }: ButtonSelectProps<T>): JSX.Element;
+export interface ButtonSelectProps<T extends string = string> extends ButtonSelectBaseProps<T> {
+    value: T | T[];
+    onChange: (value: T | T[]) => void;
+    multiple?: boolean;
+}
+export declare function ButtonSelect<T extends string>(props: ButtonSelectProps<T>): JSX.Element;
+export {};

package/dist/components/button-select/ButtonSelect.js

@@ -3,27 +3,36 @@ import { jsx } from 'react/jsx-runtime';
 import { Button } from '../../components/button/Button';
 import styles from './ButtonSelect.module.css';
 
-function ButtonSelect({
-  options,
-  value,
-  onChange,
-  size = "md",
-  disabled
-}) {
-  return /* @__PURE__ */ jsx("div", { className: styles.group, role: "group", children: options.map((option) => /* @__PURE__ */ jsx(
-    Button,
-    {
-      className: option.value === value ? `${styles.btn} ${styles.btnSelected}` : styles.btn,
-      variant: "outlined",
-      shape: "default",
-      size,
-      active: option.value === value,
-      disabled: disabled || option.disabled,
-      onClick: () => onChange(option.value),
-      children: option.label
-    },
-    option.value
-  )) });
+function ButtonSelect(props) {
+  const { options, size = "md", disabled } = props;
+  const selectedValues = Array.isArray(props.value) ? props.value : [props.value];
+  function handleSelect(optionValue) {
+    if (props.multiple) {
+      const currentValues = Array.isArray(props.value) ? props.value : [props.value];
+      const nextValue = currentValues.includes(optionValue) ? currentValues.filter((current) => current !== optionValue) : [...currentValues, optionValue];
+      props.onChange(nextValue);
+      return;
+    }
+    props.onChange(optionValue);
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles.group, role: "group", children: options.map((option) => {
+    const isSelected = selectedValues.includes(option.value);
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: isSelected ? `${styles.btn} ${styles.btnSelected}` : styles.btn,
+        variant: "outlined",
+        shape: "default",
+        size,
+        active: isSelected,
+        "aria-pressed": isSelected,
+        disabled: disabled || option.disabled,
+        onClick: () => handleSelect(option.value),
+        children: option.label
+      },
+      option.value
+    );
+  }) });
 }
 
 export { ButtonSelect };

package/dist/components/page/Page.module.css

@@ -63,6 +63,7 @@
 .content {
   min-height: 0;
   min-width: 0;
+  padding-block-end: var(--spacing-lg);
   overflow: auto;
 }
 

package/dist/components/pagination/Pagination.module.css

@@ -1,6 +1,7 @@
 .container {
   display: flex;
   gap: var(--spacing-xxs);
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   margin: 0 auto;

package/dist/components/panel/Panel.module.css

@@ -2,7 +2,6 @@
   border: var(--border-width-thin) solid var(--color-border-subtle);
   border-radius: var(--border-radius-md);
   background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-md);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/dist/components/popover/Popover.cjs

@@ -267,7 +267,7 @@ const Popover = React.forwardRef(function Popover2({
     if (lastCloseReasonRef.current === "outside") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
-  const chevronClassName = variant === "header" ? styles__default.default.chevronHeader : "dbc-muted-text";
+  const chevronClassName = variant === "header" ? styles__default.default.chevronHeader : void 0;
   const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: chevronClassName, size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chevronClassName, size: 20 });
   const setOverlayRef = React__namespace.useCallback(
     (node) => {

package/dist/components/popover/Popover.js

@@ -243,7 +243,7 @@ const Popover = forwardRef(function Popover2({
     if (lastCloseReasonRef.current === "outside") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
-  const chevronClassName = variant === "header" ? styles.chevronHeader : "dbc-muted-text";
+  const chevronClassName = variant === "header" ? styles.chevronHeader : void 0;
   const icon = isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: chevronClassName, size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { className: chevronClassName, size: 20 });
   const setOverlayRef = React.useCallback(
     (node) => {

package/dist/components/print-friendly/PrintFriendlyCard.cjs

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var emptyValue = require('./emptyValue');
+
+function PrintFriendlyCard({
+  title,
+  rows = [],
+  containerCy,
+  emptyPlaceholder = emptyValue.EMPTY_VALUE_PLACEHOLDER,
+  showEmpty = true
+}) {
+  const isEmpty = react.useMemo(
+    () => rows.every((row) => emptyValue.isValueEmpty(typeof row.value === "function" ? row.value() : row.value)),
+    [rows]
+  );
+  if (isEmpty && !showEmpty) return null;
+  function renderValue(row) {
+    const value = typeof row.value === "function" ? row.value() : row.value;
+    if (emptyValue.isValueEmpty(value) && row.showEmptyPlaceholder !== false) {
+      return emptyPlaceholder;
+    }
+    return value;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("h4", { children: title }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cy": containerCy, children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cy": row.dataCy, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+        row.label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderValue(row) })
+    ] }, row.key)) })
+  ] });
+}
+
+exports.PrintFriendlyCard = PrintFriendlyCard;

package/dist/components/print-friendly/PrintFriendlyCard.d.ts

@@ -0,0 +1,23 @@
+import { type JSX, type ReactNode } from 'react';
+export interface PrintFriendlyCardRow {
+    key: string | number;
+    label: ReactNode;
+    value: ReactNode | (() => ReactNode);
+    dataCy?: string;
+    showEmptyPlaceholder?: boolean;
+}
+interface PrintFriendlyCardProps {
+    title?: string;
+    rows?: PrintFriendlyCardRow[];
+    containerCy?: string;
+    emptyPlaceholder?: string;
+    showEmpty?: boolean;
+}
+/**
+ * Displays key-value pairs in a compact card, optimized for print: tight
+ * spacing, a clear heading, and strong label/value separation. Empty values
+ * fall back to a placeholder rather than leaving a blank line; set
+ * `showEmpty={false}` to hide the whole card instead when every row is empty.
+ */
+export declare function PrintFriendlyCard({ title, rows, containerCy, emptyPlaceholder, showEmpty, }: PrintFriendlyCardProps): JSX.Element | null;
+export {};

package/dist/components/print-friendly/PrintFriendlyCard.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { isValueEmpty, EMPTY_VALUE_PLACEHOLDER } from './emptyValue';
+
+function PrintFriendlyCard({
+  title,
+  rows = [],
+  containerCy,
+  emptyPlaceholder = EMPTY_VALUE_PLACEHOLDER,
+  showEmpty = true
+}) {
+  const isEmpty = useMemo(
+    () => rows.every((row) => isValueEmpty(typeof row.value === "function" ? row.value() : row.value)),
+    [rows]
+  );
+  if (isEmpty && !showEmpty) return null;
+  function renderValue(row) {
+    const value = typeof row.value === "function" ? row.value() : row.value;
+    if (isValueEmpty(value) && row.showEmptyPlaceholder !== false) {
+      return emptyPlaceholder;
+    }
+    return value;
+  }
+  return /* @__PURE__ */ jsxs("section", { children: [
+    title ? /* @__PURE__ */ jsx("h4", { children: title }) : null,
+    /* @__PURE__ */ jsx("div", { "data-cy": containerCy, children: rows.map((row) => /* @__PURE__ */ jsxs("div", { "data-cy": row.dataCy, children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        row.label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: renderValue(row) })
+    ] }, row.key)) })
+  ] });
+}
+
+export { PrintFriendlyCard };

package/dist/components/print-friendly/PrintFriendlyMetaBar.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function PrintFriendlyMetaBar({
+  items = [],
+  dataCy
+}) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cy": dataCy, children: [
+    items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        item.label,
+        ":"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.value }),
+      index < items.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xA0\xA0" }) : null
+    ] }, item.key)),
+    /* @__PURE__ */ jsxRuntime.jsx("hr", {})
+  ] });
+}
+
+exports.PrintFriendlyMetaBar = PrintFriendlyMetaBar;

package/dist/components/print-friendly/PrintFriendlyMetaBar.d.ts

@@ -0,0 +1,19 @@
+import type { JSX, ReactNode } from 'react';
+export interface PrintFriendlyMetaItem {
+    key: string | number;
+    label: ReactNode;
+    value: ReactNode;
+}
+interface PrintFriendlyMetaBarProps {
+    items?: PrintFriendlyMetaItem[];
+    dataCy?: string;
+}
+/**
+ * A horizontal bar of label/value pairs, styled for print rather than
+ * screen: a visible divider and generous spacing instead of a subtle dot
+ * separator, so it reads well on paper. Pair with a `page-break-before`
+ * class (see styles/styles.css) on a wrapping element to start each one on
+ * its own page.
+ */
+export declare function PrintFriendlyMetaBar({ items, dataCy, }: PrintFriendlyMetaBarProps): JSX.Element | null;
+export {};

package/dist/components/print-friendly/PrintFriendlyMetaBar.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PrintFriendlyMetaBar({
+  items = [],
+  dataCy
+}) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-cy": dataCy, children: [
+    items.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        item.label,
+        ":"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { children: item.value }),
+      index < items.length - 1 ? /* @__PURE__ */ jsx("span", { children: "\xA0\xA0" }) : null
+    ] }, item.key)),
+    /* @__PURE__ */ jsx("hr", {})
+  ] });
+}
+
+export { PrintFriendlyMetaBar };

package/dist/components/print-friendly/PrintFriendlyTable.cjs

@@ -0,0 +1,51 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var AccumulationFooter = require('./components/AccumulationFooter');
+var emptyValue = require('./emptyValue');
+
+function PrintFriendlyTable({
+  rows = [],
+  cols = [],
+  tableCy,
+  id
+}) {
+  const safeRows = react.useMemo(
+    () => rows.filter((row) => row.renderEmpty !== false || !emptyValue.isValueEmpty(row.value)),
+    [rows]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("table", { "data-cy": tableCy, id, children: [
+    cols.length ? /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: cols.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: { width: col.width, textAlign: col.alignment }, children: col.label }, col.key)) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("col", {}),
+      /* @__PURE__ */ jsxRuntime.jsx("col", {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: safeRows.map((row) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsx("tr", { "data-cy": row.dataCy, children: cols.length ? cols.map((col) => {
+        var _a2;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            style: {
+              textAlign: col.alignment,
+              whiteSpace: col.fitContent ? "nowrap" : void 0
+            },
+            children: (_a2 = row[col.key]) != null ? _a2 : emptyValue.EMPTY_VALUE_PLACEHOLDER
+          },
+          col.key
+        );
+      }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("th", { style: { whiteSpace: "nowrap" }, scope: "row", children: [
+          row.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { children: (_a = row.value) != null ? _a : emptyValue.EMPTY_VALUE_PLACEHOLDER })
+      ] }) }, row.key);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(AccumulationFooter.AccumulationFooter, { rows: safeRows, cols })
+  ] }) }) });
+}
+
+exports.PrintFriendlyTable = PrintFriendlyTable;

package/dist/components/print-friendly/PrintFriendlyTable.d.ts

@@ -0,0 +1,34 @@
+import { type JSX, type ReactNode } from 'react';
+export interface PrintFriendlyTableCol {
+    key: string;
+    label: ReactNode;
+    width?: string | number;
+    alignment?: 'left' | 'right' | 'center';
+    fitContent?: boolean;
+    accumulate?: boolean;
+}
+export interface PrintFriendlyTableRow {
+    key: string | number;
+    dataCy?: string;
+    /** Used when no `cols` are given: a plain label/value row. */
+    label?: ReactNode;
+    value?: ReactNode;
+    /** If false, the row is omitted entirely when its value is empty. */
+    renderEmpty?: boolean;
+    /** Used when `cols` are given: one field per column key. */
+    [columnKey: string]: unknown;
+}
+interface PrintFriendlyTableProps {
+    rows?: PrintFriendlyTableRow[];
+    cols?: PrintFriendlyTableCol[];
+    tableCy?: string;
+    id?: string | number;
+}
+/**
+ * Renders a table optimized for printing: controlled spacing that avoids
+ * overflow on paper, and rows with an empty value omitted (unless
+ * `renderEmpty` is set) so printouts don't carry empty clutter. Columns
+ * flagged `accumulate` get a totals row via AccumulationFooter.
+ */
+export declare function PrintFriendlyTable({ rows, cols, tableCy, id, }: PrintFriendlyTableProps): JSX.Element;
+export {};