@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/table/parts/TableCell.js

@@ -0,0 +1,62 @@
+import { jsx as C } from "react/jsx-runtime";
+import { memo as v, forwardRef as g, useMemo as T } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { useTableContext as k } from "../Table.context.js";
+const D = w({
+  base: [
+    "uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
+  ],
+  variants: {
+    align: {
+      left: "uy:text-left",
+      center: "uy:text-center",
+      right: "uy:text-right"
+    }
+  }
+}), K = v(
+  g(
+    ({
+      children: s,
+      colIndex: t = 0,
+      rowIndex: u = 0,
+      align: o,
+      onKeyDown: i,
+      onFocus: r,
+      className: l,
+      isRowHeader: a = !1,
+      isFocusable: n = !0,
+      ...y
+    }, c) => {
+      const { keyboardNavigation: f } = k(), { isCellFocused: b, handleCellKeyDown: d, handleCellFocus: m } = f, p = T(
+        () => D({ align: o, className: l }),
+        [o, l]
+      ), x = n && b(u, t), h = (e) => {
+        e.key !== "Tab" && (d(e), i?.(e));
+      };
+      return /* @__PURE__ */ C(
+        a ? "th" : "td",
+        {
+          ref: c,
+          role: a ? "rowheader" : "gridcell",
+          "aria-colindex": t + 1,
+          tabIndex: x ? 0 : -1,
+          "data-focusable": n,
+          className: p,
+          onKeyDown: h,
+          onFocus: (e) => {
+            m(e), r?.(e);
+          },
+          "data-dd-privacy": "mask",
+          ...y,
+          children: s
+        }
+      );
+    }
+  )
+);
+K.displayName = "TableCell";
+export {
+  K as TableCell,
+  D as tableCell
+};

package/dist/esm/components/table/parts/TableColumnHeader.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { ActionableProps } from '../../actionable/Actionable.js';
+type BaseTableColumnHeaderProps = {
+    colIndex?: number;
+    rowIndex?: number;
+    align?: 'left' | 'center' | 'right';
+    isFocusable?: boolean;
+};
+type StaticTableColumnHeaderProps = BaseTableColumnHeaderProps & React.ThHTMLAttributes<HTMLTableCellElement>;
+type InteractiveTableColumnHeaderProps = BaseTableColumnHeaderProps & ActionableProps;
+export type TableColumnHeaderProps = (StaticTableColumnHeaderProps & {
+    onPress?: never;
+}) | InteractiveTableColumnHeaderProps;
+export declare const tableColumnHeader: import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], {
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    align: {
+        left: string;
+        center: string;
+        right: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * The `TableColumnHeader` component renders a header cell in the table's header row.
+ * It can be either static or interactive (clickable) and supports text alignment.
+ * @param {TableColumnHeaderProps} props - The props for the `TableColumnHeader` component
+ * @param {ReactNode} props.children - The content to render in the header cell
+ * @param {number} [props.colIndex=0] - The index of the column (automatically set by TableHeader)
+ * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableHeader)
+ * @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the header cell
+ * @param {Function} [props.onPress] - Optional callback for when the header is clicked (makes the header interactive)
+ * @example
+ * ```tsx
+ * import { TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableColumnHeader>Name</TableColumnHeader>
+ * ```
+ * @example
+ * ```tsx
+ * // Interactive header with center alignment
+ * import { TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableColumnHeader
+ *   align="center"
+ *   onPress={() => console.log('Header clicked')}
+ * >
+ *   Department
+ * </TableColumnHeader>
+ * ```
+ * @see {@link TableColumnHeaderProps} for all available props
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablecolumnheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableColumnHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>>;
+export { TableColumnHeader };

package/dist/esm/components/table/parts/TableColumnHeader.js

@@ -0,0 +1,78 @@
+import { jsx as n } from "react/jsx-runtime";
+import { memo as x, forwardRef as g } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { Actionable as C } from "../../actionable/Actionable.js";
+import { useTableContext as T } from "../Table.context.js";
+const d = w({
+  base: [
+    "uy:align-middle uy:leading-[1.00]",
+    "uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+    "uy:hover:bg-surface-neutral-hover"
+  ],
+  variants: {
+    align: {
+      left: "uy:text-left",
+      center: "uy:text-center",
+      right: "uy:text-right"
+    }
+  }
+}), D = x(
+  g(
+    ({
+      children: r,
+      colIndex: t = 0,
+      rowIndex: m = 0,
+      align: l,
+      onKeyDown: f,
+      onFocus: i,
+      className: u,
+      isFocusable: o = !0,
+      ...a
+    }, s) => {
+      const { keyboardNavigation: b } = T(), { isCellFocused: h, handleCellKeyDown: v, handleCellFocus: c } = b, p = o && h(m, t), y = (e) => {
+        e.key !== "Tab" && (v(e), f?.(
+          e
+        ));
+      };
+      return "onPress" in a ? /* @__PURE__ */ n(
+        "th",
+        {
+          ref: s,
+          role: "columnheader",
+          "aria-colindex": t + 1,
+          "data-focusable": o,
+          className: d({ align: l, className: u }),
+          "data-dd-privacy": "allow",
+          onKeyDown: y,
+          onFocus: (e) => {
+            c(e), i?.(e);
+          },
+          children: /* @__PURE__ */ n(C, { ...a, children: r })
+        }
+      ) : /* @__PURE__ */ n(
+        "th",
+        {
+          ref: s,
+          role: "columnheader",
+          "aria-colindex": t + 1,
+          tabIndex: p ? 0 : -1,
+          "data-focusable": o,
+          className: d({ align: l, className: u }),
+          onKeyDown: y,
+          onFocus: (e) => {
+            c(e), i?.(e);
+          },
+          "data-dd-privacy": "allow",
+          ...a,
+          children: r
+        }
+      );
+    }
+  )
+);
+D.displayName = "TableColumnHeader";
+export {
+  D as TableColumnHeader,
+  d as tableColumnHeader
+};

package/dist/esm/components/table/parts/TableEmptyState.d.ts

@@ -0,0 +1,187 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren, ReactNode } from 'react';
+export declare const tableEmptyState: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    wrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableEmptyStateProps = PropsWithChildren<VariantProps<typeof tableEmptyState>> & {
+    className?: string;
+};
+export interface TableEmptyStateTextProps extends PropsWithChildren {
+    /**
+     * The text's variant. It can be one of two options:
+     * - `title` renders an `h6` element with `bodyStrong` style
+     * - `description` renders a `p` element with `body` style
+     */
+    variant: 'title' | 'description';
+}
+/**
+ * The `TableEmptyStateText` component provides styled text elements for empty state messages.
+ * Use this component to create consistent text hierarchies within empty states, with support for titles and descriptions.
+ * @param {TableEmptyStateTextProps} props - The props for the `TableEmptyStateText` component
+ * @see {TableEmptyStateTextProps} for all available props
+ * @example
+ * ```tsx
+ * import { TableEmptyStateText } from '@payfit/unity-components'
+ *
+ * <TableEmptyStateText variant="title">No results found</TableEmptyStateText>
+ * <TableEmptyStateText variant="description">Try adjusting your search filters</TableEmptyStateText>
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs) • [Design docs]()
+ */
+declare const TableEmptyStateText: import('react').ForwardRefExoticComponent<TableEmptyStateTextProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * The `TableEmptyState` component provides a standardized way to display empty states in tables when there's no data to show.
+ * Use this component to improve user experience by providing clear feedback and guidance when a table has no content.
+ * @param {TableEmptyStateProps} props - The props for the `TableEmptyState` component
+ * @see {@link TableEmptyStateProps} for all available props
+ * @example
+ * ```tsx
+ * import { TableEmptyState } from '@payfit/unity-components'
+ *
+ * <TableEmptyState>
+ *   <img src="/images/empty-state.svg" alt="No data" />
+ *   <TableEmptyStateText>No data available</TableEmptyStateText>
+ * </TableEmptyState>
+ * ```
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs|API and Demos} • {@link https://payfit.design|Design docs}
+ */
+declare const TableEmptyState: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    wrapper: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    wrapper: string;
+}, undefined, unknown, unknown, undefined>>> & {
+    children?: ReactNode | undefined;
+} & {
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * A pre-configured loading state for tables.
+ * Use this component to indicate that data is being loaded.
+ * @see {TableEmptyState}
+ * @example
+ * ```tsx
+ * import { TableEmptyStateLoading } from '@payfit/unity-components'
+ *
+ * <TableBody renderEmptyState={() => <TableEmptyStateLoading />}>{[]}</TableBody>
+ * ```
+ */
+declare const TableEmptyStateLoading: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * A pre-configured empty state for tables with no data.
+ * Use this component to indicate that no results were found and provide guidance on how to adjust search or filters.
+ * @param props - The component props
+ * @param props.description - The description text to display explaining why there's no data
+ * @param props.onButtonPress - Optional callback fired when the "Enable settings" button is clicked. If not provided, the button won't be rendered.
+ * @see {TableEmptyState}
+ * @example
+ * ```tsx
+ * import { TableEmptyStateNoData } from '@payfit/unity-components'
+ *
+ * // Without button
+ * <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" />}>{[]}</TableBody>
+ *
+ * // With "Enable settings" button
+ * <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" onButtonPress={() => console.log('Enable settings')} />}>{[]}</TableBody>
+ * ```
+ */
+declare const TableEmptyStateNoData: ({ description, onButtonPress, }: {
+    description: ReactNode;
+    onButtonPress?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A pre-configured error state for tables.
+ * Use this component to indicate that an error occurred while loading data and provide guidance on how to resolve it.
+ * @param props - The component props
+ * @param props.onButtonPress - Optional callback fired when the "Go to dashboard" button is clicked. If not provided, the button won't be rendered.
+ * @see {TableEmptyState}
+ * @example
+ * ```tsx
+ * import { TableEmptyStateError } from '@payfit/unity-components'
+ *
+ * // Without button
+ * <TableBody renderEmptyState={() => <TableEmptyStateError />}>{[]}</TableBody>
+ *
+ * // With "Go to dashboard" button
+ * <TableBody renderEmptyState={() => <TableEmptyStateError onButtonPress={() => navigate('/dashboard')} />}>{[]}</TableBody>
+ * ```
+ */
+declare const TableEmptyStateError: ({ onButtonPress, }: {
+    onButtonPress?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A pre-configured empty state for tables when no search results are found.
+ * Use this component to indicate that the current filters or search didn't return any results.
+ * @param props - The component props
+ * @param props.onButtonPress - Optional callback fired when the "Reset filters" button is clicked. If not provided, the button won't be rendered.
+ * @see {TableEmptyState}
+ * @example
+ * ```tsx
+ * import { TableNoSearchResults } from '@payfit/unity-components'
+ *
+ * // Without button
+ * <TableBody renderEmptyState={() => <TableNoSearchResults />}>{[]}</TableBody>
+ *
+ * // With "Reset filters" button
+ * <TableBody renderEmptyState={() => <TableNoSearchResults onButtonPress={() => clearFilters()} />}>{[]}</TableBody>
+ * ```
+ */
+declare const TableNoSearchResults: ({ onButtonPress, }: {
+    onButtonPress?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export { TableEmptyState, TableEmptyStateText, TableEmptyStateLoading, TableEmptyStateNoData, TableEmptyStateError, TableNoSearchResults, };

package/dist/esm/components/table/parts/TableEmptyState.js

@@ -0,0 +1,161 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as f, useMemo as d } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { useIntl as b, FormattedMessage as a } from "react-intl";
+import { Button as c } from "../../button/Button.js";
+import { EmptyState as m } from "../../empty-state/EmptyState.js";
+import { EmptyStateActions as u } from "../../empty-state/parts/EmptyStateActions.js";
+import { EmptyStateContent as p } from "../../empty-state/parts/EmptyStateContent.js";
+import { EmptyStateIcon as y } from "../../empty-state/parts/EmptyStateIcon.js";
+import { Spinner as x } from "../../spinner/Spinner.js";
+import { Text as v } from "../../text/Text.js";
+const w = g({
+  slots: {
+    base: "uy:flex uy:flex-col uy:items-center uy:justify-center",
+    wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center uy:py-800"
+  }
+}), E = f(
+  (e, n) => {
+    const { variant: r, children: i } = e, s = d(() => {
+      switch (r) {
+        case "title":
+          return "bodyStrong";
+        case "description":
+        default:
+          return "body";
+      }
+    }, [r]), o = d(() => {
+      switch (r) {
+        case "title":
+          return "h6";
+        case "description":
+        default:
+          return "p";
+      }
+    }, [r]);
+    return /* @__PURE__ */ t(
+      v,
+      {
+        variant: s,
+        asElement: o,
+        ref: n,
+        className: "uy:text-center",
+        children: i
+      }
+    );
+  }
+);
+E.displayName = "TableEmptyStateText";
+const h = f(
+  ({ children: e, className: n, ...r }, i) => {
+    const { base: s, wrapper: o } = w();
+    return /* @__PURE__ */ t("div", { "data-dd-privacy": "allow", ...r, ref: i, className: s(), children: /* @__PURE__ */ t("div", { className: o({ className: n }), children: e }) });
+  }
+);
+h.displayName = "TableEmptyState";
+const G = () => {
+  const e = b();
+  return /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
+    x,
+    {
+      size: "medium",
+      label: e.formatMessage({
+        id: "unity:component:table:empty-state:loading:title"
+      })
+    }
+  ) });
+}, q = ({
+  description: e,
+  onButtonPress: n
+}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
+  /* @__PURE__ */ t(y, { icon: "InfoOutlined", variant: "neutral" }),
+  /* @__PURE__ */ t(
+    p,
+    {
+      title: /* @__PURE__ */ t(
+        a,
+        {
+          id: "unity:component:empty-state:waiting-for-data:title",
+          defaultMessage: "No available results yet"
+        }
+      ),
+      description: e
+    }
+  ),
+  n && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: n, children: /* @__PURE__ */ t(
+    a,
+    {
+      id: "unity:component:empty-state:waiting-for-data:button-label",
+      defaultMessage: "Enable settings"
+    }
+  ) }) })
+] }), z = ({
+  onButtonPress: e
+}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
+  /* @__PURE__ */ t(y, { icon: "WarningCircleOutlined", variant: "neutral" }),
+  /* @__PURE__ */ t(
+    p,
+    {
+      title: /* @__PURE__ */ t(
+        a,
+        {
+          id: "unity:component:error-state:common:main-title",
+          defaultMessage: "Something went wrong"
+        }
+      ),
+      description: /* @__PURE__ */ t(
+        a,
+        {
+          id: "unity:component:error-state:common:main-description-component",
+          defaultMessage: "Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+        }
+      )
+    }
+  ),
+  e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
+    a,
+    {
+      id: "unity:component:error-state:button:label",
+      defaultMessage: "Go to dashboard"
+    }
+  ) }) })
+] }), A = ({
+  onButtonPress: e
+}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
+  /* @__PURE__ */ t(y, { icon: "MagnifyingGlassOutlined", variant: "neutral" }),
+  /* @__PURE__ */ t(
+    p,
+    {
+      title: /* @__PURE__ */ t(
+        a,
+        {
+          id: "unity:component:empty-state:no-search-results:title",
+          defaultMessage: "We didn't find any results"
+        }
+      ),
+      description: /* @__PURE__ */ t(
+        a,
+        {
+          id: "unity:component:empty-state:no-search-results:description",
+          defaultMessage: "Try adjusting your search or filters to find what you're looking for."
+        }
+      )
+    }
+  ),
+  e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
+    a,
+    {
+      id: "unity:component:empty-state:no-search-results:button-label",
+      defaultMessage: "Reset filters"
+    }
+  ) }) })
+] });
+export {
+  h as TableEmptyState,
+  z as TableEmptyStateError,
+  G as TableEmptyStateLoading,
+  q as TableEmptyStateNoData,
+  E as TableEmptyStateText,
+  A as TableNoSearchResults,
+  w as tableEmptyState
+};

package/dist/esm/components/table/parts/TableHeader.d.ts

@@ -0,0 +1,29 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+export declare const tableHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader>>;
+/**
+ * The `TableHeader` component renders the header section of a table, containing column headers.
+ * It automatically processes its children to add row indices and applies appropriate styling.
+ * @param {TableHeaderProps} props - The props for the `TableHeader` component
+ * @param {ReactNode} props.children - The column headers to render (typically TableColumnHeader components)
+ * @example
+ * ```tsx
+ * import { TableHeader, TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableHeader>
+ *   <TableColumnHeader>Name</TableColumnHeader>
+ *   <TableColumnHeader>Email</TableColumnHeader>
+ *   <TableColumnHeader>Department</TableColumnHeader>
+ * </TableHeader>
+ * ```
+ * @see {@link TableHeaderProps} for all available props
+ * @see {@link TableColumnHeader} for the column header component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>>;
+export { TableHeader };

package/dist/esm/components/table/parts/TableHeader.js

@@ -0,0 +1,37 @@
+import { jsx as t } from "react/jsx-runtime";
+import r, { memo as l, forwardRef as s, useMemo as y } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+const b = m({
+  base: [
+    "uy:h-500 uy:bg-surface-neutral-low uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
+    "uy:sticky uy:top-0 uy:z-[1]",
+    "uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
+  ]
+}), i = l(
+  s(
+    ({ children: o, ...a }, d) => {
+      const u = y(() => r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
+        e,
+        {
+          rowIndex: n,
+          ...e.props
+        }
+      ) : e), [o]);
+      return /* @__PURE__ */ t(
+        "thead",
+        {
+          ref: d,
+          className: b(),
+          "data-dd-privacy": "allow",
+          ...a,
+          children: /* @__PURE__ */ t("tr", { children: u })
+        }
+      );
+    }
+  )
+);
+i.displayName = "TableHeader";
+export {
+  i as TableHeader,
+  b as tableHeader
+};