@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,59 @@
+import { default as React, PropsWithChildren } from 'react';
+import { CellPosition } from './hooks/useTableKeyboardNavigation.js';
+interface TableKeyboardNavigationContextValue {
+    /** The currently focused cell position */
+    focusedCell: CellPosition;
+    /** Check if a specific cell is currently focused */
+    isCellFocused: (rowIndex: number, colIndex: number) => boolean;
+    /** Handle keyboard events on table cells */
+    handleCellKeyDown: (e: React.KeyboardEvent<HTMLTableCellElement>) => void;
+    /** Handle keyboard events on the table element */
+    handleTableKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void;
+    /** Handle focus events on the table element */
+    handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
+    /** Handle focus events on table cells */
+    handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void;
+    /** Reference to the table element */
+    tableRef: React.RefObject<HTMLTableElement>;
+    /** Focus a specific cell by its row and column indices */
+    focusCell: (rowIndex: number, colIndex: number) => void;
+    /** Focus a specific row by its index */
+    focusRow: (rowIndex: number) => void;
+}
+interface TableContextValue {
+    /** The total number of rows in the table */
+    rowCount: number;
+    /** The total number of columns in the table */
+    columnCount: number;
+    /** Keyboard navigation functionality */
+    keyboardNavigation: TableKeyboardNavigationContextValue;
+}
+/**
+ * React context for the table component.
+ */
+export declare const TableContext: React.Context<TableContextValue>;
+/**
+ * Hook to access the table context.
+ * @example
+ * ```tsx
+ * const { rowCount, columnCount, keyboardNavigation } = useTableContext()
+ * ```
+ */
+export declare function useTableContext(): TableContextValue;
+/**
+ * Provider component for the table context.
+ * This component initializes the keyboard navigation and provides it to all table components.
+ * @param props - The TableContext props
+ * @param props.rowCount - The total number of rows in the table
+ * @param props.columnCount - The total number of columns in the table
+ * @param props.children - The children to render
+ * @see {@link TableContextValue} for available props
+ * @example
+ * ```tsx
+ * <TableContextProvider rowCount={10} columnCount={5}>
+ *   <Table>...</Table>
+ * </TableContextProvider>
+ * ```
+ */
+export declare function TableContextProvider({ children, ...props }: PropsWithChildren<Omit<TableContextValue, 'keyboardNavigation'>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/table/Table.context.js

@@ -0,0 +1,42 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as r, useContext as d } from "react";
+import { useTableKeyboardNavigation as i } from "./hooks/useTableKeyboardNavigation.js";
+const u = {
+  focusedCell: { rowIndex: 0, colIndex: 0 },
+  isCellFocused: () => !1,
+  handleCellKeyDown: () => {
+  },
+  handleTableKeyDown: () => {
+  },
+  handleTableFocus: () => {
+  },
+  handleCellFocus: () => {
+  },
+  tableRef: { current: null },
+  focusCell: () => {
+  },
+  focusRow: () => {
+  }
+}, c = {
+  rowCount: 0,
+  columnCount: 0,
+  keyboardNavigation: u
+}, o = r(c);
+function f() {
+  return d(o);
+}
+function b({
+  children: e,
+  ...t
+}) {
+  const n = i(), l = {
+    ...t,
+    keyboardNavigation: n
+  };
+  return /* @__PURE__ */ a(o.Provider, { value: l, children: e });
+}
+export {
+  o as TableContext,
+  b as TableContextProvider,
+  f as useTableContext
+};

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

@@ -0,0 +1,93 @@
+import { default as React, PropsWithChildren } from 'react';
+export interface TableRootProps extends PropsWithChildren {
+    /**
+     * The minimum number of rows to display, affecting the minimum height
+     */
+    minRows?: number;
+    /**
+     * The maximum number of rows to display, affecting the maximum height
+     */
+    maxRows?: number;
+}
+/**
+ * @component
+ * The `TableRoot` component serves as the container for the table and its pagination controls.
+ * It provides styling and layout for the table, including min and max height constraints.
+ * @param {TableRootProps} props - The props for the `TableRoot` component
+ * @param {number} [props.minRows=10] - The minimum number of rows to display, affecting the minimum height
+ * @param {number} [props.maxRows=50] - The maximum number of rows to display, affecting the maximum height
+ * @param {ReactNode} props.children - The table and pagination components
+ * @example
+ * ```tsx
+ * import { TableRoot, Table } from '@payfit/unity-components'
+ *
+ * <TableRoot minRows={5} maxRows={20}>
+ *   <Table>
+ *     <TableHeader>...</TableHeader>
+ *     <TableBody>...</TableBody>
+ *   </Table>
+ *   <TablePagination pageCount={5} rowCount={100} rowsPerPage={20} currentPage={1} />
+ * </TableRoot>
+ * ```
+ * @see {@link TableRootProps} for all available props
+ * @see {@link Table} for the table component
+ * @see {@link TablePagination} for the pagination component
+ */
+declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * The label for the table. This is used for accessibility purposes.
+     */
+    label?: string;
+    /**
+     * The description for the table. This is used for accessibility purposes.
+     * ```
+     */
+    description?: string;
+}
+export interface TableImperativeHandler {
+    /**
+     * Scrolls the table contents to the top.
+     */
+    scrollToTop: () => void;
+}
+/**
+ * The `Table` component provides a fully accessible, keyboard-navigable data table with support for row and column headers,
+ * pagination, and empty states. It follows WAI-ARIA grid pattern for accessibility.
+ * @param {TableProps} props - The props for the `Table` component
+ * @example
+ * ```tsx
+ * import { Table, TableRoot, TableHeader, TableBody, TableRow, TableCell, TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableRoot>
+ *   <Table label="Employee data" description="List of employees with their details">
+ *     <TableHeader>
+ *       <TableColumnHeader>Name</TableColumnHeader>
+ *       <TableColumnHeader>Position</TableColumnHeader>
+ *       <TableColumnHeader>Department</TableColumnHeader>
+ *     </TableHeader>
+ *     <TableBody>
+ *       <TableRow>
+ *         <TableCell isRowHeader>John Doe</TableCell>
+ *         <TableCell>Developer</TableCell>
+ *         <TableCell>Engineering</TableCell>
+ *       </TableRow>
+ *     </TableBody>
+ *   </Table>
+ * </TableRoot>
+ * ```
+ * @see {@link TableProps} for all available props
+ * @see {@link TableRoot} for the container component
+ * @see {@link TableHeader} for the header component
+ * @see {@link TableBody} for the body component
+ * @see {@link TableRow} for the row component
+ * @see {@link TableCell} for the cell component
+ * @see {@link TableColumnHeader} for the column header component
+ * @see {@link TablePagination} for the pagination component
+ * @see {@link TableEmptyState} for the empty state component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table--default|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<TableImperativeHandler>>;
+export { Table, TableRoot };

package/dist/esm/components/table/Table.js

@@ -0,0 +1,148 @@
+import { jsx as i, jsxs as T } from "react/jsx-runtime";
+import r, { forwardRef as R, useRef as k, useMemo as H, useImperativeHandle as V, useCallback as $ } from "react";
+import { tv as N } from "tailwind-variants";
+import { useResizeObserver as D } from "usehooks-ts";
+import { TableContextProvider as M, useTableContext as P } from "./Table.context.js";
+const j = N({
+  slots: {
+    root: "uy-w-full uy-border uy-border-solid uy-border-border-neutral-enabled uy-rounded-100 uy-overflow-hidden",
+    scroller: [
+      "uy-relative uy-flex uy-flex-col",
+      "uy-min-h-[var(--uy-table-min-rows)] uy-max-h-[var(--uy-table-max-rows)]",
+      "uy-w-full"
+      // Ensure full width
+    ]
+  }
+}), A = R(
+  ({ minRows: u = 10, maxRows: c = 50, children: e }, o) => {
+    const { root: a, scroller: d } = j();
+    return /* @__PURE__ */ i("div", { ref: o, className: a(), "data-unity-slot": "table-root", children: /* @__PURE__ */ i(
+      "div",
+      {
+        className: d(),
+        "data-unity-slot": "table-scroller",
+        style: {
+          "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${u})`,
+          "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${c})`
+        },
+        children: e
+      }
+    ) });
+  }
+);
+A.displayName = "TableRoot";
+const K = N({
+  slots: {
+    wrapper: [
+      "uy-flex-1 uy-h-full uy-bg-surface-neutral",
+      "uy-overflow-auto",
+      "uy-w-full"
+    ],
+    table: [
+      "uy-min-w-full",
+      "uy-w-max",
+      "uy-text-left uy-typography-body uy-text-content-neutral uy-border-collapse",
+      "focus:uy-outline-2 focus:uy-outline-utility-focus-ring focus:uy-outline-offset-[-2px]"
+    ]
+  }
+}), U = R((u, c) => {
+  const { children: e, label: o, description: a, ...d } = u, n = k(null), { height: h = 0 } = D({
+    ref: n,
+    box: "border-box"
+  }), { rowCount: l, columnCount: b } = H(() => {
+    let y = 0, f = 0;
+    return r.Children.forEach(e, (m) => {
+      if (!r.isValidElement(m)) return;
+      const s = r.Children.toArray(
+        m.props.children
+      ).filter((t) => r.isValidElement(t));
+      f += s.length, s.forEach((t) => {
+        if (!r.isValidElement(t)) return;
+        const p = r.Children.toArray(
+          t.props.children
+        ).filter((w) => r.isValidElement(w));
+        y = Math.max(y, p.length);
+      });
+    }), { rowCount: f, columnCount: y };
+  }, [e]);
+  return V(c, () => ({
+    scrollToTop: () => {
+      n.current && n.current.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  })), /* @__PURE__ */ i(M, { rowCount: l, columnCount: b, children: /* @__PURE__ */ i(
+    E,
+    {
+      scrollContainerRef: n,
+      containerHeight: h,
+      rowCount: l,
+      columnCount: b,
+      label: o,
+      description: a,
+      ...d,
+      children: e
+    }
+  ) });
+});
+U.displayName = "Table";
+const E = (u) => {
+  var x, g, C;
+  const {
+    children: c,
+    label: e,
+    description: o,
+    scrollContainerRef: a,
+    containerHeight: d,
+    rowCount: n,
+    columnCount: h,
+    onKeyDown: l,
+    ...b
+  } = u, { wrapper: y, table: f } = K(), { keyboardNavigation: m } = P(), { tableRef: s, handleTableKeyDown: t } = m, p = $(
+    (v) => {
+      v.key !== "Tab" && (t(v), l == null || l(v));
+    },
+    [t, l]
+  ), w = (((x = a.current) == null ? void 0 : x.scrollHeight) ?? 0) > Math.floor(d);
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      className: y(),
+      ref: a,
+      style: {
+        "--uy-table-is-scrollable": w ? "1" : "0"
+      },
+      children: [
+        /* @__PURE__ */ T(
+          "table",
+          {
+            ref: s,
+            className: f(),
+            role: "grid",
+            "aria-rowcount": n,
+            "aria-colcount": h,
+            "aria-label": e,
+            "aria-describedby": o ? `table-desc-${(g = s.current) == null ? void 0 : g.id}` : void 0,
+            onKeyDown: p,
+            ...b,
+            children: [
+              c,
+              o && /* @__PURE__ */ i(
+                "caption",
+                {
+                  id: `table-desc-${(C = s.current) == null ? void 0 : C.id}`,
+                  className: "uy-sr-only",
+                  children: o
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: "uy-sr-only", "aria-live": "polite", children: "Table navigation: Use arrow keys to move between cells. Tab key exits the table. Home and End keys navigate to the first and last cell in a row. Page Up and Page Down move between rows." })
+      ]
+    }
+  );
+};
+E.displayName = "TableContent";
+export {
+  U as Table,
+  A as TableRoot
+};

package/dist/esm/components/table/assets/EmptyStateError.svg.js

@@ -0,0 +1,5 @@
+import * as l from "react";
+const a = (c) => /* @__PURE__ */ l.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 490 430", width: 80, height: 80, ...c }, /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", fillRule: "evenodd", d: "M92.7 74.6v.8c-.3 3.1-.6 11.1-1 22.7a2.6 2.6 0 0 1-5.3-.2 1098.8 1098.8 0 0 1 1-23.8v-.4h-.2a16 16 0 0 0-6.3 4.1c-2.3 2.3-3.9 5-4 7.6L76 98.2a2.6 2.6 0 1 1-5.3-.3l.8-12.9c.2-4.4 2.8-8.2 5.5-11 2.8-2.7 6.2-4.7 8.8-5.4a9 9 0 0 1 3.2-.4 4 4 0 0 1 3.2 2c.5 1 .5 2.1.5 2.8l-.1 1.6Zm-5.2-2.2Zm-15.8 71.5c1.5 0 2.6 1.3 2.6 2.7l-1 40.3a2.6 2.6 0 1 1-5.3 0l1-40.4c0-1.5 1.3-2.6 2.7-2.6Zm16 0c1.4 0 2.5 1.3 2.5 2.7L90 153l-1 34a2.6 2.6 0 0 1-5.2-.2l1-34 .1-6.3c0-1.5 1.3-2.6 2.7-2.6Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", d: "M85.3 231.6c1.5 0 2.7 1.2 2.6 2.7-.9 40.4-1.5 76.1-1.7 108.6L83 355.3c-1.7 0-2-5.6-2-7 0-34 .7-71.5 1.6-114.2 0-1.4 1.3-2.6 2.7-2.5Zm-15.4 0c1.5 0 2.6 1.2 2.6 2.6-.6 40.4-.9 79.4-1 114 0 .7-.2 1.3-.6 1.8l-4.6-6c0-33.5.4-71 1-109.8 0-1.5 1.1-2.7 2.6-2.6Z" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", fillRule: "evenodd", d: "M419.4 72.5a11 11 0 0 1 4.5 8.8l-.8 18a2.6 2.6 0 0 1-5.3-.2l.9-18c0-1.7-1-3.3-2.5-4.4a6 6 0 0 0-4.8-1.2c-.8.2-1.2.4-1.4.7-.2.2-.5.6-.7 1.4a24 24 0 0 0-.6 5.7l-.2 2-.8 14a2.6 2.6 0 0 1-5.2-.2 597.7 597.7 0 0 1 .9-15.8c.1-2.7.3-5.2.8-7.2.4-1.3 1-2.5 2-3.6a8 8 0 0 1 4-2.2c3.2-.8 6.7.3 9.2 2.2Zm-.5 72.6c1.5 0 2.6 1.2 2.6 2.7a8469 8469 0 0 0-1.2 43.2 2.6 2.6 0 0 1-5.3-.1l1.2-43.3c0-1.4 1.3-2.6 2.7-2.5Zm-15.2 0c1.5 0 2.6 1.2 2.6 2.7-.3 13.3-.5 27.8-.6 43.2a2.6 2.6 0 1 1-5.3 0l.6-43.3c0-1.5 1.2-2.7 2.7-2.6Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", d: "M402.5 235.6c1.5 0 2.6 1.3 2.6 2.7-.4 38-.8 75.9-1.8 117l-5-8c.8-37.4 1.2-74.5 1.5-109 0-1.5 1.3-2.7 2.7-2.7Zm11.5 2.6a2.6 2.6 0 1 1 5.2.1c-.6 34.1-1.1 70.4-1.3 105.3l-5.3 7.3c.1-37.2.6-76.2 1.3-112.7Z" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", fillRule: "evenodd", d: "M13.5 102.8a205 205 0 0 0 2.7 18.4 799 799 0 0 0 4 20.4c131.9 4.4 357.1 4.3 453.7 3.8h1.1a22.9 22.9 0 0 0 2-.1l.1-1.2-.6-2.7-2-4.8a319 319 0 0 0-17.3-29.8c-1.2-1.7-2-2.7-2.7-3.3a3 3 0 0 0-.7-.5l-.2-.1v-2.6 2.6h-4a28513 28513 0 0 0-183.5-1.9c-97.6-.6-206-.6-252.6 1.8Zm440.1-5.2h-4a17470.1 17470.1 0 0 0-52.4-.7l-131-1.2c-99.5-.6-210.3-.6-255.6 2a2.6 2.6 0 0 0-2.5 2.6c0 4.2 1.3 13 2.9 21.8 1.6 8.8 3.4 17.8 4.4 22.6.3 1.2 1.3 2 2.5 2 131.7 4.5 359 4.5 456 4h2.2c.8 0 1.8-.1 2.8-.5a5 5 0 0 0 2.7-2.3c.6-1 .8-2.4.8-3.8a41.4 41.4 0 0 0-3.1-9.7 322.5 322.5 0 0 0-17.8-30.6 26 26 0 0 0-3.5-4.2 6.3 6.3 0 0 0-4.4-2Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", fillRule: "evenodd", d: "M197.5 97c10 .2 20 .4 26.7.4a2.6 2.6 0 0 1 2.4 3.8L204.4 146c-.5.9-1.4 1.4-2.4 1.4-7.6 0-18.5-.3-29.3-.6h-2c-10.2-.3-20-.6-27-.6a2.6 2.6 0 0 1-2.3-4L166.6 98c.4-.8 1.3-1.3 2.3-1.3l27.6.4h1Zm-89.2 1c.5.8.4 1.8 0 2.6L80 145c-.5.8-1.4 1.3-2.3 1.3-7.3-.2-21.8-.9-35.1-1.5l-24.6-1a2.6 2.6 0 0 1-2-4.3l31.6-40.8c.4-.7 1.2-1 2-1 10.4-.3 43.8-.9 56.4-1 1 0 1.8.5 2.3 1.3Zm190.4.4c.5-.8 1.3-1.3 2.3-1.3 6.7 0 18.8.4 30.8.7h1.3l28.6.8a2.6 2.6 0 0 1 2.4 3.8l-22.8 44.7c-.5.9-1.4 1.4-2.4 1.4-7 0-19.8-.3-32.6-.6h-.5c-12.6-.4-25.2-.7-32.3-.7a2.6 2.6 0 0 1-2.3-4l27.5-44.8Zm115.6 1.1c.5-.8 1.3-1.3 2.3-1.3a18006.8 18006.8 0 0 1 30.5.4h1.7c3.3 0 12 2 16.1 12.2.2.6.3 1.3 0 2L451.2 148c-.4 1-1.3 1.7-2.4 1.7H390a2.6 2.6 0 0 1-2.3-4l26.5-46.2ZM254 190.6c-100-1.4-204.7-1.8-231.1.9h-.1c-2.4.1-4 1-5.3 2.1-1.3 1.3-2.3 3-3 5.4a53.5 53.5 0 0 0-1.5 16.8v4.3l.1 3.3c.1 2 .3 3.2.5 4 .2.6.4.8.8 1a9 9 0 0 0 3.6.7c13.3 1 117.9 3 220.4 4.4a33772.5 33772.5 0 0 0 201 2.1 258.5 258.5 0 0 0 4.1 0v-.3l1-4.8v-.7a254.8 254.8 0 0 1 6-28.2l.3-.8c.4-1.4.6-2.3 1-5.3l-3.6-.2-13.5-.7-45.3-1.4c-37-1-85.6-1.9-135.5-2.6Zm189.2 46Zm5.3-46.6c3.3.2 5.7.4 6.7.6 1.3.3 2.2 1.5 2 2.8a42 42 0 0 1-1.6 9.7c-.6 2-1.4 4.7-3 11.6-1.4 6.4-2.2 11.9-2.9 16v.6a99.2 99.2 0 0 1-1.5 7 4 4 0 0 1-1.2 1.8c-.4.4-.9.6-1.4.7l-6.2.1h-13.9l-47-.4c-38.3-.3-89-1-140.2-1.7a10478 10478 0 0 1-220.8-4.4c-2-.2-4-.5-5.5-1.3a6.8 6.8 0 0 1-3.4-4c-.5-1.6-.7-3.5-.7-5.5l-.1-3.5-.1-4a61 61 0 0 1 1.7-18.7c1-2.9 2.3-5.6 4.5-7.6s5-3.3 8.5-3.6c26.8-2.7 132-2.3 231.6-.9a12204 12204 0 0 1 180.9 4l13.6.7Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", fillRule: "evenodd", d: "M100.2 185.6c.4-.9 1.3-1.4 2.3-1.4h.8a54702 54702 0 0 1 65.4.2 2.6 2.6 0 0 1 2.4 3.9l-24 46.4c-.5.9-1.4 1.4-2.4 1.4a22886.4 22886.4 0 0 1-56.5-.8H76.6a2.6 2.6 0 0 1-2.3-4l25.8-45.7Zm-62.5 1c.5 1 .5 2 0 2.8l-24.8 38.2a2.6 2.6 0 0 1-4.8-1.5v-1.3l-.5-9.7v-1.8c.3-3.9.6-9.7 2-14.8 1.7-5.8 5.2-11.8 12.7-12.3 3.3-.4 7.7-.6 13-.9 1 0 1.9.5 2.4 1.4Zm231.7 1.2c.4-1 1.4-1.5 2.4-1.5l27.5.3c10.2 0 20.1 0 28.4.3a2.6 2.6 0 0 1 2.2 3.8l-24 46c-.4.9-1.3 1.4-2.3 1.4h-54.7a2.6 2.6 0 0 1-2.3-3.9l22.8-46.4Zm107.7 4c.5-1 1.4-1.5 2.5-1.5l30 .2h.9c10.7 0 21.2 0 29.2.2a2.6 2.6 0 0 1 2.3 3.8l-21.3 43.6c-.4.9-1.4 1.4-2.4 1.4-7.9 0-18.4-.3-29.2-.6h-.2c-10.8-.3-21.8-.6-30.6-.7a2.6 2.6 0 0 1-2.3-3.9l21.1-42.6Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", fillRule: "evenodd", d: "M227.5 90.2a396 396 0 0 1 42.4-8.2h.6l.6.2c3.4 2.2 8 6.4 13.1 11.6a345 345 0 0 1 16.4 18.2 293.3 293.3 0 0 1 26.4 35.3l.3.5v.5a311 311 0 0 1-7.5 42c-2 9-4.4 17.8-6.7 25.2-1.2 3.6-2.4 7-3.6 9.7-1.1 2.7-2.3 5-3.5 6.5l-.2.4-.4.1a93.8 93.8 0 0 1-15.5 5.6 471 471 0 0 1-70 14.5h-.5l-.6-.3a195.5 195.5 0 0 1-11.8-11.3 570 570 0 0 1-33.7-39.8 123 123 0 0 1-10-14.1l-.1-.4v-.5c0-3.5.8-9.8 2-17.2a452.1 452.1 0 0 1 11.9-50c1.2-3.7 2.3-7 3.4-9.7 1.1-2.6 2.3-4.9 3.4-6.4l.3-.4.5-.2c6.9-2.8 25-7.6 42.8-11.8Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#EBF4FF", fillRule: "evenodd", d: "M230.5 103.2c14.2-3.4 28.6-6.3 34-6.6h.5l.5.3a65 65 0 0 1 10.7 9.7 327.9 327.9 0 0 1 34.6 44.6l.3.5v.4c-.1 5.3-2.5 20.3-5.7 34.9-1.6 7.3-3.4 14.6-5.2 20.7a97 97 0 0 1-2.8 8c-1 2.3-1.9 4.2-2.8 5.5l-.3.3-.3.2a72.5 72.5 0 0 1-12.4 4.6 362.8 362.8 0 0 1-56 11.5h-.6l-.5-.3c-1-.7-2.4-2-4-3.5a478.7 478.7 0 0 1-41-51l-.1-.4v-.4c0-2.9.6-8.1 1.5-14.3a383 383 0 0 1 9.2-41.4c.9-3 1.8-5.7 2.7-7.9.8-2.2 1.7-4.1 2.7-5.4l.3-.4.4-.2c5.5-2.2 20-6 34.3-9.4Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", fillRule: "evenodd", d: "M267.2 205.5a9.6 9.6 0 0 1-4 7.3 12.5 12.5 0 0 1-10.2 2.1c-1.5-.3-3-.8-4-1.5-1-.6-2.2-1.5-2.8-2.8a14 14 0 0 1-1-7c.3-3.1 2-6.5 6.2-8.5a11 11 0 0 1 9.1.1 13.7 13.7 0 0 1 5.3 4.6c.8 1.3 1.5 3.4 1.4 5.7Zm-20.6-85.2c.6.3 1.2 1 1.6 2 .6 1.6 1.7 6.5 3.4 15.7 1.7 9.3 4 23.3 7 43.4a3 3 0 0 1-.3 1.7 9 9 0 0 1-7.8 5.2c-2.7.3-5.3-.5-7-1.2a3 3 0 0 1-1.4-1.6c-3-7.1-7.8-20.5-11.8-32.4-4-11.8-7.4-22.6-7.8-24.5-.5-2 .7-3.5 1.4-4.1a11 11 0 0 1 2.8-1.8 41.4 41.4 0 0 1 15-3.3c1 0 2.2 0 3.2.2.5.1 1.1.3 1.7.7Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M396.4 331.2c-.6-.2-1.2 0-1.5.6a11 11 0 0 0-1 3.6 48.7 48.7 0 0 0-.2 6c-3-5.6-7.5-9-10.1-10.2a1.2 1.2 0 0 0-1.5 1.9c2 2.4 3.5 6.7 4.6 11l1 4.3c-4-6-8.9-8.5-11.5-9a1.2 1.2 0 0 0-.9 2.3c7.9 5 8.4 13.3 7.8 18.7a1.2 1.2 0 1 0 2.5.3 26 26 0 0 0-2.1-13.7c2 2.1 3.9 5 5.4 9a1.2 1.2 0 0 0 2.4-.5 86.4 86.4 0 0 0-4.5-19c3.1 2.9 6.5 7.6 7.4 14.3a1.2 1.2 0 0 0 2.4-.3 89 89 0 0 1-.4-6.5 57.7 57.7 0 0 0 5.2 12.3 1.2 1.2 0 0 0 2.3-.6l.2-2.8v-1.5l.7-4.4c.4-1.3.9-2.5 1.6-3.6-.3 1.4-.4 2.9-.4 4.4.1 3.8 1 7.9 2.7 10.2a1.2 1.2 0 0 0 2.2-.4c.8-2.6 2.6-6.8 5-10.4 1.2-1.6 2.4-3 3.6-4.2l-.7 1.2a15.3 15.3 0 0 0-1.5 10 1.2 1.2 0 0 0 1.6.9c1.5-.5 4.2-2 6.1-5v.7c.2 1.8 0 3.3-.5 4.2a1.2 1.2 0 0 0 2.1 1.3 21.7 21.7 0 0 0 2-3.8l1.6-3.2.5-.9a29 29 0 0 0-1 8c.2 1.9.6 3.6 1.5 4.9a1.2 1.2 0 0 0 2-1.4c-.5-.8-.9-2-1-3.6 0-1.6 0-3.5.5-5.4.8-3.9 2.4-7.6 4.3-9.4a1.2 1.2 0 0 0-1.5-1.9 24.2 24.2 0 0 0-8 9.7l-.7-4a1.2 1.2 0 0 0-2.4 0 11 11 0 0 1-4.9 6.8c-.1-2.4.6-4.7 1.6-6.8a20 20 0 0 1 4-5.4 1.2 1.2 0 0 0-1.1-2.1c-4.1.7-7.5 4.3-10 8a46.6 46.6 0 0 0-4.4 8.3 21.8 21.8 0 0 1-.5-11.2c.4-1.4 1-2.4 1.8-3a1.2 1.2 0 0 0-1.2-2 11.9 11.9 0 0 0-7.3 8.4 30 30 0 0 0-.7 5c-.9-1.9-1.8-4.2-2.5-6.7-1.4-4.5-2.3-9-1.8-12 0-.7-.3-1.2-.8-1.4Zm-309 0c.5-.2 1.2 0 1.4.6.5.8.8 2.2 1 3.6a48.8 48.8 0 0 1 .2 6c3-5.6 7.5-9 10.2-10.2a1.2 1.2 0 0 1 1.5 1.9c-2 2.4-3.6 6.7-4.7 11l-1 4.3c4.1-6 9-8.5 11.5-9a1.2 1.2 0 0 1 1 2.3c-8 5-8.4 13.3-7.9 18.7a1.2 1.2 0 1 1-2.4.3 25 25 0 0 1 2-13.7c-1.9 2.1-3.8 5-5.4 9a1.2 1.2 0 0 1-2.4-.5 86.6 86.6 0 0 1 4.6-19 23.6 23.6 0 0 0-7.4 14.3 1.2 1.2 0 0 1-2.5-.3c.2-1.8.4-4.1.4-6.5a59.8 59.8 0 0 1-5.2 12.3 1.2 1.2 0 0 1-2.2-.6l-.3-2.8v-1.5c-.2-1.5-.3-3-.7-4.4a9.7 9.7 0 0 0-1.6-3.6c.3 1.4.4 2.9.4 4.4 0 3.8-1 7.9-2.7 10.2a1.2 1.2 0 0 1-2.2-.4c-.8-2.6-2.6-6.8-5-10.4-1.1-1.6-2.3-3-3.6-4.2l.7 1.2c1.4 2.8 2.3 6.3 1.5 10a1.2 1.2 0 0 1-1.6.9c-1.5-.5-4.2-2-6-5l-.1.7c-.1 1.8 0 3.3.5 4.2a1.2 1.2 0 0 1-2 1.3 21.7 21.7 0 0 1-2.1-3.8l-1.6-3.2-.5-.9a29.4 29.4 0 0 1 1 8 9.5 9.5 0 0 1-1.4 4.9 1.2 1.2 0 0 1-2-1.4c.5-.8.8-2 1-3.6 0-1.6-.2-3.5-.5-5.4-.8-3.9-2.5-7.6-4.4-9.4a1.2 1.2 0 0 1 1.6-1.9 24.2 24.2 0 0 1 8 9.7l.6-4a1.2 1.2 0 0 1 2.4 0c1 3.7 3.3 5.8 5 6.8 0-2.4-.6-4.7-1.6-6.8a20 20 0 0 0-4-5.4 1.2 1.2 0 0 1 1-2.1c4.1.7 7.6 4.3 10.1 8 1.8 2.8 3.3 5.8 4.4 8.3a21.8 21.8 0 0 0 .4-11.2c-.4-1.4-1-2.4-1.8-3a1.2 1.2 0 0 1 1.2-2c4.5 1.8 6.4 5 7.3 8.4.4 1.7.6 3.4.7 5 .9-1.9 1.8-4.2 2.6-6.7 1.4-4.5 2.2-9 1.7-12 0-.7.3-1.2.9-1.4Z", clipRule: "evenodd" }));
+export {
+  a as default
+};

package/dist/esm/components/table/assets/EmptyStateNoData.svg.js

@@ -0,0 +1,5 @@
+import * as l from "react";
+const c = (e) => /* @__PURE__ */ l.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 490 430", width: 80, height: 80, ...e }, /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", d: "M211.5 56.1c-5.1-34-20.5-55.9-50-37.6-4.3-6.4-17.5-15.8-35.1-3-13.7 10-20 23.8-25.8 36.4C97 59.6 93.7 67 89 72.7c-11.3 14-7.5 28.7-3.6 43.6 1.5 5.7 3 11.5 3.6 17.3 1.1 10.3-4.3 17-9.6 23.6a46.7 46.7 0 0 0-8 12.3l4.8-1.2a95.3 95.3 0 0 1 31.1-9l4.5 7.6c6.9.6 14.3 1.7 22 3.5l25.6-41.2 5.8 6.6 4.4-8.8-1.4-7.4-4.4-10.2-11-16.9 1.4-4.4-7.5-3.2-3.2-8.6 2.4-9.5 6.9-4 58.7-6.7ZM218 103c1.1 3.5 2.5 6.3 4.2 9.7 2 4.1 4.5 9.2 7.5 17.2 7.7 20.3.6 30.3-5.3 38.7-2 2.8-3.8 5.4-5 8.2a41.3 41.3 0 0 0-.3 23.7L202 187.1l1.4-41.8-3.6-.7 8-26.4 5.9-8.8 2.2-7.4 2.1 1Z" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", fillRule: "evenodd", d: "M150.7 143.2c-7.3 13.3-20.5 37.3-21.8 39.2a2.2 2.2 0 0 1-3.1.6l-11.5-8.5-.4-.4a45.9 45.9 0 0 1-4.4-6.5l-2.4-5.9a2 2 0 0 1-.9-1.1l-.2-.7a2.2 2.2 0 0 1 1.5-2.8l.4-.4c.3-.3.7-.8 1-1.5a33 33 0 0 0 2.3-6.2 217 217 0 0 0 5.4-41.7 11 11 0 0 1-2.7-.8c-2-.9-4-2.3-6-4.2-1.7-2-3.3-4.7-3.8-7.9s0-7 2-11c3.2-6.3 7.3-9 11.5-9.3 2.7-.2 5 .6 7 1.7l3.3-8.9a90 90 0 0 1 9.3-20.9c4.5-7.4 10.7-14.5 18.5-17.1 16-5.3 36.3 3.3 42.7 28.1a2.2 2.2 0 0 1-1.9 2.8l-40.8 4.8-7.1 1.2-4.4 9.6 3.5 9.7 7.4 1.7c.7.3 1.2 1 1.3 1.7l1.4 7.6 13 21c.2.3.3.7.3 1.2l-.8 12.5c0 .4-.2.9-.5 1.2l-3.6 4.4a2.2 2.2 0 0 1-3.6-.2l-3.2-5.3-6.6 11.2a2.2 2.2 0 0 1-2 1.1Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M162.3 35.4c1.7 2.3 4.3 4.6 8.4 7 10.5 6 10.6 13 10 15a2.2 2.2 0 0 0 2.4 2.9l14.7-2.2a2.2 2.2 0 0 0 1.8-2.8c-7.3-27-28.2-32.4-38.1-31.7-10.8 0-19.8 8.4-26.5 18.1a120.3 120.3 0 0 0-14.6 30.4c-.4 1 .2 2.2 1.2 2.7l5.1 2.2.7.1c2.3.2 4.3 0 6-.8a9.3 9.3 0 0 0 4.2-3.3 27 27 0 0 0 4-11.1c.7-3 1.4-6 2.5-8.4a10 10 0 0 1 5.8-5.8c7-2.6 10.6-7.5 12.4-12.3Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", fillRule: "evenodd", d: "M153.3 106.8c1 .7 1.2 2 .6 3l-1.3 1.6a45 45 0 0 0 16.2 10.5 2.2 2.2 0 1 1-1.3 4.2 50 50 0 0 1-18.4-11.9l-1 .7a2.2 2.2 0 1 1-2.3-3.8c.5-.3 1.4-.8 2.3-1.6 1-.7 1.7-1.5 2.1-2 .7-1 2-1.4 3-.7Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M330.5 48.9a44.3 44.3 0 0 1 3.4 27 47.2 47.2 0 0 1-11.4 27.5c-5.3 5.6-11.4 8-16 7.5l-1.9-.4L280 105l1-4.3 15.2 3.4-.7-1c-3.3-5.1-5.3-13-4.1-24.7A49.4 49.4 0 0 1 306 47.2l-26.8 3.4-.6-4.4 38.3-4.9h.5c4.7-.5 9.7 1.9 13 7.6ZM318 45.6c2.7-.2 6.1 1 8.7 5.5 2.6 4.4 4.2 12.1 2.8 24.3a43.6 43.6 0 0 1-10.2 25c-4.6 4.9-9.4 6.4-12.2 6.1l-1.4-.3c-1.9-.6-4.4-2.2-6.5-5.4-2.6-4.1-4.5-11-3.4-22 1-10.9 5-19 9.6-24.6 4.5-5.4 9.3-8 12.2-8.5h.4Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M287.9 53.2a44.5 44.5 0 0 1 3.4 27.1 47.2 47.2 0 0 1-11.4 27.4c-5.3 5.6-11.4 8.1-16 7.5A19094.3 19094.3 0 0 1 151.4 90l-1.7-.5c-2-.8-4.3-2.1-6-4.7-1.6-2.5-2.3-6-2-10.7.4-4.2 2.6-7.3 5-9.3 2.4-2 5.1-3.2 7-3.6h.1l120.6-15.4h.5c4.7-.5 9.7 1.8 13 7.5ZM275.4 50c2.7-.3 6.1 1 8.7 5.4 2.6 4.5 4.2 12.2 2.8 24.4-1.4 12-5.7 20-10.2 25-4.6 4.8-9.4 6.4-12.2 6l-1.4-.2a13 13 0 0 1-6.5-5.5c-2.6-4-4.5-10.9-3.4-21.9 1-11 5-19.1 9.6-24.6 4.5-5.4 9.3-8 12.2-8.6h.4Zm-11.9 1.5a49.4 49.4 0 0 0-14.8 31.3c-1 11.7 1 19.5 4.2 24.7l.6 1a18464.4 18464.4 0 0 1-101.9-23 7.8 7.8 0 0 1-4.2-3c-.9-1.6-1.6-4-1.2-8.1a9.2 9.2 0 0 1 3.3-6.4 13 13 0 0 1 5.1-2.6l109-13.9Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", d: "M293.6 78.6c2.2-22.7 16.8-34.4 24.2-35.1 7.3-.8 16.8 7.3 13.9 32.2-3 25-17.6 33.9-25 33-5.2-.7-15.3-7.3-13.1-30Z" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M330.5 48.9a44.3 44.3 0 0 1 3.4 27 47.2 47.2 0 0 1-11.4 27.5c-5.3 5.6-11.4 8-16 7.5a16 16 0 0 1-11-7.8c-3.3-5.1-5.3-13-4.1-24.7a49.4 49.4 0 0 1 10.6-27c5-6.1 11-9.7 15.5-10.1 4.7-.5 9.7 1.9 13 7.6Zm-3.8 2.2c-2.6-4.4-6-5.7-8.7-5.4-2.9.2-8 2.9-12.6 8.5a45 45 0 0 0-9.6 24.6c-1.1 11 .8 17.9 3.4 22 2.6 4 5.9 5.5 7.8 5.7 2.8.3 7.6-1.2 12.3-6.1a42.9 42.9 0 0 0 10.2-25c1.4-12.2-.2-19.9-2.8-24.3Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", d: "M251 83c2.2-22.7 16.8-34.5 24.2-35.2 7.3-.7 16.8 7.3 13.9 32.3-3 24.9-17.6 33.9-25 33-5.2-.7-15.3-7.4-13.1-30.1Z" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M287.9 53.2a44.5 44.5 0 0 1 3.4 27.1 47.2 47.2 0 0 1-11.4 27.4c-5.3 5.6-11.4 8.1-16 7.5a16 16 0 0 1-11-7.7c-3.3-5.2-5.3-13-4.1-24.7a49.4 49.4 0 0 1 10.6-27c5-6.1 11-9.7 15.5-10.2 4.7-.4 9.7 2 13 7.6Zm-3.8 2.2c-2.6-4.4-6-5.7-8.7-5.4-2.9.3-8 3-12.6 8.6a45 45 0 0 0-9.6 24.6c-1.1 11 .8 17.8 3.4 22a12 12 0 0 0 7.8 5.7c2.8.3 7.6-1.2 12.3-6.2a42.9 42.9 0 0 0 10.2-24.9c1.4-12.2-.2-20-2.8-24.4Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M317.6 58c-2.2-.6-4.4-.3-6.1 0a2.2 2.2 0 1 1-.9-4.3c2-.4 4.9-.8 8 0 3.3.7 6.5 2.7 9 6.9a2.2 2.2 0 1 1-3.8 2.3 9.8 9.8 0 0 0-6.2-5Zm-49.4 8.2a16 16 0 0 0-5.2 4.2 2.2 2.2 0 1 1-3.5-2.7c1.3-1.7 3.7-4 6.8-5.5 3-1.5 7-2.4 11-1a2.2 2.2 0 1 1-1.4 4 10 10 0 0 0-7.7 1Zm47.4 2.1c1.2.1 2.1 1.2 2 2.4l-.7 9.5a2.2 2.2 0 1 1-4.4-.3l.8-9.5a2 2 0 0 1 2.3-2Zm-45.4 4.4c1.2.1 2.1 1.2 2 2.4l-.7 8.8a2.2 2.2 0 0 1-4.4-.4l.7-8.8a2.2 2.2 0 0 1 2.4-2Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", fillRule: "evenodd", d: "M217.5 49.6c0 .9-.2 1.7-.5 2.2a51.5 51.5 0 0 0-.7 10.4c0 3.5.2 7.5.4 11.7l.4 7.7c.2 7 .4 14.1 0 20-.3 3-.7 5.7-1.3 8a12 12 0 0 1-2.9 5.7 20.2 20.2 0 0 0-3.5 5.7 65 65 0 0 0-3.1 8.3c-1.9 6-3.1 12.4-3.7 16.3-.2 1-1 1.8-2 1.9-3.6.4-9.7.3-16.4-1-6.7-1.4-14.1-4-20.4-9a2.2 2.2 0 0 1-.3-3.2 18 18 0 0 0 2.6-17.5 30.8 30.8 0 0 0-7.9-10.3l-1.5-1.5a22.2 22.2 0 0 1-4.4-5.7 9.6 9.6 0 0 1-.5-7.5c.4-1 1.5-1.7 2.7-1.4l18.5 4.4c0-6.7.3-16.1 1.3-24.4.6-4.7 1.4-9.1 2.5-12.4.5-1.7 1.2-3.2 2-4.3 1-1.1 2.2-2.2 4-2.2 1.8 0 4.8-.5 8.5-1.3l5.2-1 6.2-1.3a59 59 0 0 1 11.6-1.2 4 4 0 0 1 1.8.7 3 3 0 0 1 1.4 2.2Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", fillRule: "evenodd", d: "M208.8 46.4c1.2.2 2 1.3 1.8 2.5-1 6.3-2.7 23.3-2.1 32.5a2.2 2.2 0 0 1-4.4.3c-.6-9.7 1.2-27.1 2.2-33.5.2-1.2 1.3-2 2.5-1.8Zm-10.9.7c1.2.3 2 1.4 1.7 2.6-.7 3.4-1.7 9-2.4 15.1s-1 12.5-.5 17.2a2.2 2.2 0 1 1-4.4.5 87 87 0 0 1 .5-18.2c.7-6.2 1.8-12 2.5-15.5.3-1.2 1.4-2 2.6-1.7Zm-11 2.2c1.2.3 2 1.4 1.7 2.6-1.2 6-3.4 18-2.9 31.7a2.2 2.2 0 1 1-4.4.2c-.6-14.3 1.8-26.6 3-32.8.3-1.1 1.4-2 2.6-1.7Zm-32.5 39.6c1.2 0 2.1 1.1 2 2.3-.3 3.5 1.5 6.3 4.6 10.1l1.2 1.5a47 47 0 0 1 8 12.4c4 9.8-.5 18.7-3.3 22a2.2 2.2 0 1 1-3.4-2.9 18 18 0 0 0 2.6-17.5 41.1 41.1 0 0 0-7.3-11.1l-1.3-1.6c-3-3.8-6-7.9-5.5-13.2a2.2 2.2 0 0 1 2.4-2Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#B4D5FA", fillRule: "evenodd", d: "M455.8 120.9c3.1.3 6.3 1.6 7 4.9.2 1.4-.2 2.8-.8 3.9-.6 1.1-1.6 2.2-2.6 3.2-2.1 2.1-5 4.2-8.3 6.3-5.6 3.5-12.4 7-17.5 9.3.8 2 1.7 5 2 9 .8 7.3.2 12.6-3.4 16.3a5.4 5.4 0 0 0 .2.5c.3.8.8 2.2.6 3.8-.2 2-1.3 4-3.5 6.2a51.6 51.6 0 0 1-12.2 7.9 44.8 44.8 0 0 0-21 4.1c-4 2.2-6 4.9-7.2 6.7-.4.6-1 1-1.8 1-8.4 0-15.1-4-20-8.7-5-4.6-8.3-10.2-9.9-14-.2-.6-.2-1.2 0-1.8 3.7-7.6 17.5-25.6 44.2-39.8a195.4 195.4 0 0 1 41.3-17.3c5.2-1.3 9.6-1.8 12.9-1.5Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#4A94E8", fillRule: "evenodd", d: "M436.2 152c1.2.2 1.9 1.4 1.6 2.6-.2 1-.8 1.6-1.3 2-.5.4-1.1.8-1.7 1-1.2.6-2.7 1-4.1 1.5l-4.7.9c.5 1.2.6 2.5-.1 3.8-.7 1.2-2 1.8-3 2-2 .7-4.9.9-7.8 1h-1c-2.7.2-5.6.3-8.3.7-3.1.4-5.8 1.2-7.8 2.4-8.2 5-18.4 5.7-22.6 5.4a2.2 2.2 0 0 1 .3-4.4c3.6.3 12.9-.4 20-4.8 2.7-1.7 6.1-2.5 9.5-3 3-.4 6-.5 8.8-.6h1a30.2 30.2 0 0 0 7-1c-.3-.3-.6-.8-1.5-1.3-2.1-1.4-6-2.4-10.4-3a79 79 0 0 0-11.8-1 2.2 2.2 0 0 1 0-4.3c3.2 0 7.9.2 12.4.9 4.2.6 8.5 1.6 11.5 3.3a60.5 60.5 0 0 0 10.7-2.4l.7-.4c.4-1 1.5-1.6 2.6-1.4Zm-2.5 1.2Zm-11.7 8.6Zm14 .4c1.2.2 2 1.3 1.8 2.5-1.3 7.5-8.4 11.8-14.6 13.7a34 34 0 0 1-7.3 1.6c-.1.5-.4 1.1-1 1.5-.7.6-2 2-2.6 3.3a3 3 0 0 0-.3 1.6c0 .3.2.6.7 1 .7.5 1.8.8 3.5.5 1.6-.2 3.6-1 5.5-2.1 4-2.3 7.2-6 8.1-9.5a2.2 2.2 0 1 1 4.3 1 21.5 21.5 0 0 1-10.2 12.3 20.6 20.6 0 0 1-7 2.7 9 9 0 0 1-6.7-1.2 6 6 0 0 1-2.6-4c-.2-1.5.2-3 .7-4 .6-1.3 1.4-2.5 2.2-3.4l-1-.5a4 4 0 0 1-1.5-1.4 9 9 0 0 1-1-4.2c0-1.3.4-2.8 1.7-3.7a2.2 2.2 0 0 1 2.7 3.4v.4c0 .4 0 1 .4 1.7h.1c.5.2 1.3.3 2.4.2 2 0 4.8-.5 7.6-1.4 5.8-1.8 10.7-5.3 11.6-10.2.2-1.2 1.3-2 2.5-1.8Zm-24.5 11v.1Z", clipRule: "evenodd" }), /* @__PURE__ */ l.createElement("path", { fill: "#0F6FDE", fillRule: "evenodd", d: "M159.5 125.5c.8 0 1.5.6 1.9 1.3a28 28 0 0 0 19.1 15 55 55 0 0 0 20.6 1.5l.5-.5c.3-.2.7-.5 1.4-.6.7 0 1.3.3 1.6.6.6.5.8 1.2.8 1.4a57 57 0 0 1 .3 5.8c0 5.7-.8 16.6-2.5 35.4 14.5 11.8 45.1 38.4 61.2 58.6 11.3-10 28.5-24.5 45.7-37.6 9-7 18.1-13.5 26.4-18.8a109 109 0 0 1 21.5-11.4 2.2 2.2 0 0 1 2.8 1.4c2.3 7.4 11.5 22.1 29.5 22.6a2.2 2.2 0 0 1 2 3c-8 22-24 55.2-46.3 83.2-22.1 28-50.7 51.2-84 52.4-12.4 0-20.5-3.3-25.5-7.7-2.2-1.9-3.7-4-4.8-6l-2.5 6-1.2 2.9c-2.2 5.3-4.3 11-5.7 17.7-1.7 8.5-1.7 21.3-1 34a397 397 0 0 0 3.3 32.6 2.2 2.2 0 0 1-4.4.7c-1.1-7.7-2.5-20.2-3.3-33-.7-12.8-.7-26.1 1.1-35.2 1.4-7 3.7-13 6-18.5l1.2-3c1.8-4.3 3.5-8.2 4.6-12.2a33 33 0 0 0 0-18.7 521 521 0 0 0-18.2-48.2 2.2 2.2 0 0 1 4-1.7c4.2 9.5 13.7 32.6 18.4 48.6 2.3 7.8 1.8 14.5.1 20.8.1 2.6 1.4 6.5 5.3 10 4 3.4 11 6.5 22.5 6.5 31.3-1.2 58.8-23.1 80.7-50.7 21-26.4 36.3-57.6 44.5-79.3-17-1.9-26.4-15-29.7-23.3-5 2-11.4 5.6-18.6 10.2-8 5.2-17 11.7-26 18.6a871.7 871.7 0 0 0-47.4 39 47 47 0 0 0-8.4 7.8 2.2 2.2 0 0 1-3.3-3c2.6-3 5.4-5.4 7.3-7a475.3 475.3 0 0 0-58.3-56l-3.8 37c-10.3 95.8-46.5 130-67.6 144.4a56.4 56.4 0 0 1-56.3 3c-.3 4-.8 8.6-1.4 13.6l-.4 3.4c-.9 8.1-1.8 17.2-1.8 26.6a2.2 2.2 0 1 1-4.4 0c0-9.7 1-19 1.9-27.1 0-1.2.2-2.3.3-3.4.7-6.2 1.4-11.4 1.5-15.7-18.7-12.2-35.2-39-41.8-90.6-7.4-58.2 10-89 30.8-105.5a98 98 0 0 1 45-18.8l2.8-.5c1.1-.3 2.3.3 2.6 1.4 1 2.8 3 7.2 6 11.3 2.7 3.6 6 6.8 10 8.6a673 673 0 0 1 31.4-52c.5-.6 1.3-1 2-.9ZM124 182.3c-4.8-2.2-8.6-6-11.5-10a48.7 48.7 0 0 1-5.9-10.5l-1.3.2a93 93 0 0 0-42.9 17.8C43.1 195.2 26 224.4 33.3 281.3c6.6 52 23.3 77.2 40.7 88.2 21 13 44 6.2 54.8-1 20-13.6 55.5-46.7 65.7-141.4a2605 2605 0 0 0 4.2-41 575.6 575.6 0 0 0 2.6-38.4c-5.7.7-14 .6-22-1.6a33.5 33.5 0 0 1-20.2-14.1 647 647 0 0 0-30 50.2 425.8 425.8 0 0 0-31.6 71.5 133.6 133.6 0 0 0-7 37.5 2.2 2.2 0 0 1-4.4-.1c.1-11.5 2.8-24.8 7.2-38.7.9-3 .8-7.7.2-12.5a91 91 0 0 0-2.2-12 2.2 2.2 0 1 1 4.2-1.1c.8 2.8 1.8 7.4 2.4 12.2 7-18.9 16.4-38.6 26-56.7Zm80.8-36.6Z", clipRule: "evenodd" }));
+export {
+  c as default
+};

package/dist/esm/components/table/hooks/useTableAnnouncer.d.ts

@@ -0,0 +1,5 @@
+export declare function useTableAnnouncer(): {
+    announce: (message: string) => void;
+    announceSelection: (isSelected: boolean, rowIndex: number) => void;
+    announceSort: (columnName: string, direction: "ascending" | "descending" | null) => void;
+};

package/dist/esm/components/table/hooks/useTableKeyboardNavigation.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Interface representing the position of a cell in the table.
+ */
+export interface CellPosition {
+    /** The row index (0-based) */
+    rowIndex: number;
+    /** The column index (0-based) */
+    colIndex: number;
+}
+/**
+ * Hook that provides keyboard navigation functionality for tables.
+ * This hook implements the WAI-ARIA grid keyboard interaction pattern, allowing users to:
+ * - Navigate between cells using arrow keys
+ * - Jump to the first/last cell in a row using Home/End
+ * - Jump to the first/last cell in the table using Ctrl+Home/Ctrl+End
+ * - Move between pages of rows using Page Up/Page Down
+ * @example
+ * ```tsx
+ * const {
+ *   focusedCell,
+ *   isCellFocused,
+ *   handleCellKeyDown,
+ *   handleTableKeyDown,
+ *   tableRef
+ * } = useTableKeyboardNavigation()
+ * ```
+ */
+export declare function useTableKeyboardNavigation(): {
+    focusedCell: CellPosition;
+    setFocusedCell: import('react').Dispatch<import('react').SetStateAction<CellPosition>>;
+    isCellFocused: (rowIndex: number, colIndex: number) => boolean;
+    handleCellKeyDown: (e: React.KeyboardEvent<HTMLTableCellElement>) => void;
+    handleTableKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void;
+    handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
+    handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void;
+    tableRef: import('react').MutableRefObject<HTMLTableElement | null>;
+    focusCell: (rowIndex: number, colIndex: number) => void;
+    focusRow: (rowIndex: number) => void;
+};

package/dist/esm/components/table/hooks/useTableKeyboardNavigation.js

@@ -0,0 +1,157 @@
+import { useState as F, useRef as I, useCallback as i } from "react";
+function E() {
+  const [w, f] = F({
+    rowIndex: 0,
+    colIndex: 0
+  }), c = I(null), r = i(
+    (e, n) => {
+      c.current && (f({ rowIndex: e, colIndex: n }), requestAnimationFrame(() => {
+        if (!c.current) return;
+        const l = Array.from(c.current.querySelectorAll("tr"));
+        if (e >= 0 && e < l.length) {
+          const o = l[e];
+          if (!o) return;
+          const t = Array.from(o.querySelectorAll("td, th"));
+          if (n >= 0 && n < t.length) {
+            const s = t[n];
+            document.activeElement !== s && s.focus({ preventScroll: !1 });
+          }
+        }
+      }));
+    },
+    [f]
+  ), p = i(
+    (e) => {
+      c.current && (f({ rowIndex: e, colIndex: 0 }), requestAnimationFrame(() => {
+        if (!c.current) return;
+        const n = Array.from(c.current.querySelectorAll("tr"));
+        if (e >= 0 && e < n.length) {
+          const l = n[e];
+          document.activeElement !== l && l.focus();
+        }
+      }));
+    },
+    [f]
+  ), b = i(
+    (e) => {
+      e.target === e.currentTarget && (e.preventDefault(), requestAnimationFrame(() => {
+        r(0, 0);
+      }));
+    },
+    [r]
+  ), k = i(
+    (e) => {
+      const n = e.target, l = n.closest("tr");
+      if (!l || !c.current) return;
+      const t = Array.from(c.current.querySelectorAll("tr")).indexOf(l), a = Array.from(l.querySelectorAll("td, th")).indexOf(n);
+      t >= 0 && a >= 0 && (f({ rowIndex: t, colIndex: a }), requestAnimationFrame(() => {
+        c.current && (c.current.querySelectorAll("td, th").forEach((m) => {
+          m.setAttribute("tabindex", "-1");
+        }), n && n.setAttribute("tabindex", "0"));
+      }));
+    },
+    [f]
+  ), D = i(
+    (e, n) => w.rowIndex === e && w.colIndex === n,
+    [w]
+  ), q = i(
+    (e) => {
+      if (e.key !== "Tab" && e.target === e.currentTarget && c.current)
+        switch (e.key) {
+          case "ArrowDown":
+          case "ArrowRight":
+            e.preventDefault(), r(0, 0);
+            break;
+          case "Home":
+            e.preventDefault(), r(0, 0);
+            break;
+          case "End":
+            e.preventDefault();
+            const n = Array.from(c.current.querySelectorAll("tr")), l = n.length - 1;
+            if (l >= 0) {
+              const o = n[l];
+              if (!o) break;
+              const t = Array.from(o.querySelectorAll("td, th"));
+              r(l, t.length - 1);
+            }
+            break;
+        }
+    },
+    [r]
+  ), v = i(
+    (e) => {
+      if (e.key === "Tab" || !c.current) return;
+      const n = e.currentTarget, l = n.closest("tr");
+      if (!l) return;
+      const o = Array.from(c.current.querySelectorAll("tr")), t = o.indexOf(l), s = Array.from(l.querySelectorAll("td, th")), a = s.indexOf(n);
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault(), a < s.length - 1 ? r(t, a + 1) : r(t, 0);
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), a > 0 ? r(t, a - 1) : r(t, s.length - 1);
+          break;
+        case "ArrowDown":
+          if (e.preventDefault(), t < o.length - 1) {
+            const u = o[t + 1];
+            if (!u) break;
+            const h = Array.from(u.querySelectorAll("td, th")), A = Math.min(a, h.length - 1);
+            r(t + 1, A);
+          }
+          break;
+        case "ArrowUp":
+          if (e.preventDefault(), t > 0) {
+            const u = o[t - 1];
+            if (!u) break;
+            const h = Array.from(u.querySelectorAll("td, th")), A = Math.min(a, h.length - 1);
+            r(t - 1, A);
+          }
+          break;
+        case "Home":
+          e.preventDefault(), e.ctrlKey ? r(0, 0) : r(t, 0);
+          break;
+        case "End":
+          if (e.preventDefault(), e.ctrlKey) {
+            const u = o.length - 1, h = o[u];
+            if (!h) break;
+            const A = Array.from(h.querySelectorAll("td, th"));
+            r(u, A.length - 1);
+          } else
+            r(t, s.length - 1);
+          break;
+        case "PageUp":
+          e.preventDefault();
+          const m = Math.max(0, t - 5), y = o[m];
+          if (!y) break;
+          const x = Array.from(y.querySelectorAll("td, th")), R = Math.min(a, x.length - 1);
+          r(m, R);
+          break;
+        case "PageDown":
+          e.preventDefault();
+          const g = Math.min(o.length - 1, t + 5), d = o[g];
+          if (!d) break;
+          const S = Array.from(
+            d.querySelectorAll("td, th")
+          ), C = Math.min(a, S.length - 1);
+          r(g, C);
+          break;
+      }
+    },
+    [r]
+  );
+  return {
+    focusedCell: w,
+    setFocusedCell: f,
+    isCellFocused: D,
+    handleCellKeyDown: v,
+    handleTableKeyDown: q,
+    handleTableFocus: b,
+    handleCellFocus: k,
+    tableRef: c,
+    focusCell: r,
+    focusRow: p
+  };
+}
+export {
+  E as useTableKeyboardNavigation
+};

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

@@ -0,0 +1,56 @@
+import { default as React, ReactNode } from 'react';
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * Render prop that shows an empty state when there are no rows.
+     */
+    renderEmptyState?: () => ReactNode;
+    /**
+     * Render prop that shows an empty or update state that takes precedence over children. Use this to show a state inside the table body when there is already data in the table.
+     */
+    renderDataState?: () => ReactNode | undefined;
+}
+export declare const tableBody: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * The `TableBody` component renders the body section of a table, containing rows of data.
+ * It automatically processes its children to add row indices and handles empty states.
+ * @component
+ * @param {TableBodyProps} props - The props for the `TableBody` component
+ * @param {ReactNode} props.children - The rows to render (typically TableRow components)
+ * @param {Function} [props.renderEmptyState] - Optional function to render custom content when there are no rows
+ * @example
+ * ```tsx
+ * import { TableBody, TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John Doe</TableCell>
+ *     <TableCell>john.doe@example.com</TableCell>
+ *   </TableRow>
+ *   <TableRow>
+ *     <TableCell>Jane Smith</TableCell>
+ *     <TableCell>jane.smith@example.com</TableCell>
+ *   </TableRow>
+ * </TableBody>
+ * ```
+ * @example
+ * ```tsx
+ * // With empty state
+ * import { TableBody, TableEmptyState } from '@payfit/unity-components'
+ *
+ * <TableBody
+ *   renderEmptyState={() => (
+ *     <TableEmptyState>
+ *       <TableEmptyStateText variant="title">No data available</TableEmptyStateText>
+ *     </TableEmptyState>
+ *   )}
+ * />
+ * ```
+ * @see {@link TableBodyProps} for all available props
+ * @see {@link TableRow} for the row component
+ * @see {@link TableEmptyState} for the empty state component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablebody--default|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { TableBody };