@multiplatform.one/table-primitives 6.1.0 → 6.3.0

package/src/table.spec.tsx

@@ -1,7 +1,9 @@
 /**
  * Table primitives tests - 5 focused tests for Task Group 1.
  *
- * Note: Tamagui + React Native Web renders elements with `tag="table"` etc.
+ * Note: tamagui 2.0.0-rc derives the DOM element from the `render` prop —
+ * the primitives emit REAL <table>/<thead>/<tbody>/<tfoot>/<tr>/<th>/<td>/
+ * <caption> elements on web (task 8.5 of the table first-principles spec).
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -9,7 +11,7 @@ import { describe, expect, it } from "vitest";
 import { Table } from "./index";
 
 describe("Table Primitives", () => {
-  it("renders semantic HTML structure via tag attributes (table, thead, tbody, tfoot, tr, td, th, caption)", () => {
+  it("renders real semantic HTML elements (table, thead, tbody, tfoot, tr, td, th, caption)", () => {
     const { container } = renderWithProviders(
       <Table>
         <Table.Caption>Test Caption</Table.Caption>
@@ -31,23 +33,41 @@ describe("Table Primitives", () => {
       </Table>,
     );
 
-    expect(container.querySelector('[tag="table"]')).not.toBeNull();
-    expect(container.querySelector('[tag="thead"]')).not.toBeNull();
-    expect(container.querySelector('[tag="tbody"]')).not.toBeNull();
-    expect(container.querySelector('[tag="tfoot"]')).not.toBeNull();
-    expect(container.querySelectorAll('[tag="tr"]').length).toBe(3);
-    expect(container.querySelector('[tag="td"]')).not.toBeNull();
-    expect(container.querySelector('[tag="th"]')).not.toBeNull();
-    expect(container.querySelector('[tag="caption"]')).not.toBeNull();
-
-    expect(container.querySelector(".is_Table")).not.toBeNull();
-    expect(container.querySelector(".is_TableHead")).not.toBeNull();
-    expect(container.querySelector(".is_TableBody")).not.toBeNull();
-    expect(container.querySelector(".is_TableFoot")).not.toBeNull();
-    expect(container.querySelector(".is_TableRow")).not.toBeNull();
-    expect(container.querySelector(".is_TableCell")).not.toBeNull();
-    expect(container.querySelector(".is_TableHeaderCell")).not.toBeNull();
-    expect(container.querySelector(".is_TableCaption")).not.toBeNull();
+    expect(container.querySelector("table")).not.toBeNull();
+    expect(container.querySelector("thead")).not.toBeNull();
+    expect(container.querySelector("tbody")).not.toBeNull();
+    expect(container.querySelector("tfoot")).not.toBeNull();
+    expect(container.querySelectorAll("tr").length).toBe(3);
+    expect(container.querySelector("td")).not.toBeNull();
+    expect(container.querySelector("th")).not.toBeNull();
+    expect(container.querySelector("caption")).not.toBeNull();
+
+    // the `render` prop must not leak into the DOM as an attribute
+    expect(container.querySelector("[render]")).toBeNull();
+
+    // strict nesting validity (SSR contract): sections/rows/cells directly
+    // under their required parents — no wrapper elements in between
+    expect(container.querySelector("table > thead > tr > th")).not.toBeNull();
+    expect(container.querySelector("table > tbody > tr > td")).not.toBeNull();
+    expect(container.querySelector("table > tfoot > tr > td")).not.toBeNull();
+    expect(container.querySelector("table > caption")).not.toBeNull();
+
+    // explicit ARIA roles survive display overrides (flex displayMode)
+    expect(container.querySelector("table")?.getAttribute("role")).toBe("table");
+    expect(container.querySelector("thead")?.getAttribute("role")).toBe("rowgroup");
+    expect(container.querySelector("tbody")?.getAttribute("role")).toBe("rowgroup");
+    expect(container.querySelector("tfoot")?.getAttribute("role")).toBe("rowgroup");
+    expect(container.querySelector("td")?.getAttribute("role")).toBe("cell");
+    expect(container.querySelector("th")?.getAttribute("role")).toBe("columnheader");
+
+    expect(container.querySelector("table.is_Table")).not.toBeNull();
+    expect(container.querySelector("thead.is_TableHead")).not.toBeNull();
+    expect(container.querySelector("tbody.is_TableBody")).not.toBeNull();
+    expect(container.querySelector("tfoot.is_TableFoot")).not.toBeNull();
+    expect(container.querySelector("tr.is_TableRow")).not.toBeNull();
+    expect(container.querySelector("td.is_TableCell")).not.toBeNull();
+    expect(container.querySelector("th.is_TableHeaderCell")).not.toBeNull();
+    expect(container.querySelector("caption.is_TableCaption")).not.toBeNull();
   });
 
   it("applies intent props on Table.Row with Theme wrapping", () => {
@@ -80,7 +100,7 @@ describe("Table Primitives", () => {
       </Table>,
     );
 
-    const rows = withIntent.querySelectorAll('[tag="tr"]');
+    const rows = withIntent.querySelectorAll("tr");
     expect(rows.length).toBe(4);
 
     expect(withIntent.textContent).toContain("Accent row");
@@ -88,10 +108,19 @@ describe("Table Primitives", () => {
     expect(withIntent.textContent).toContain("Warning row");
     expect(withIntent.textContent).toContain("Success row");
 
-    const intentThemeWrappers = withIntent.querySelectorAll(".is_Theme");
-    const normalThemeWrappers = withoutIntent.querySelectorAll(".is_Theme");
-
-    expect(intentThemeWrappers.length).toBeGreaterThan(normalThemeWrappers.length);
+    // The intent theme class lands on the <tr> itself (scopes the theme CSS
+    // variables) — a Theme span wrapper between <tbody> and <tr> would be
+    // invalid HTML and break SSR (parsers foster-parent it out of the table).
+    expect(withIntent.querySelector("tr.t_accent")).not.toBeNull();
+    expect(withIntent.querySelector("tr.t_error")).not.toBeNull();
+    expect(withIntent.querySelector("tr.t_warning")).not.toBeNull();
+    expect(withIntent.querySelector("tr.t_success")).not.toBeNull();
+    for (const row of withIntent.querySelectorAll("tr")) {
+      expect(row.parentElement?.tagName).toBe("TBODY");
+    }
+
+    const plainRow = withoutIntent.querySelector("tr");
+    expect(plainRow?.classList.contains("t_error")).toBe(false);
   });
 
   it("spreads knobProps from useResolvedKnobs on Table root", () => {
@@ -105,7 +134,7 @@ describe("Table Primitives", () => {
       </Table>,
     );
 
-    const table = container.querySelector('[tag="table"]');
+    const table = container.querySelector("table");
     expect(table).not.toBeNull();
     expect(table?.textContent).toContain("Content");
 
@@ -124,13 +153,13 @@ describe("Table Primitives", () => {
       </Table>,
     );
 
-    const caption = container.querySelector('[tag="caption"]');
+    const caption = container.querySelector("caption");
     expect(caption).not.toBeNull();
     expect(caption?.textContent).toContain("Monthly Sales Report");
     expect(caption?.classList.contains("is_TableCaption")).toBe(true);
 
-    const table = container.querySelector('[tag="table"]');
-    expect(table?.querySelector('[tag="caption"]')).not.toBeNull();
+    const table = container.querySelector("table");
+    expect(table?.querySelector("caption")).not.toBeNull();
   });
 
   it("exposes compound component API (Head, Body, Row, Cell, HeaderCell, Foot, Caption)", () => {

package/types/index.d.ts

@@ -0,0 +1,193 @@
+/**
+ * Table primitives — styled semantic table components.
+ *
+ * Layer 1 only: depends on theme + Tamagui (no forms, no data-table).
+ * Consumed by @multiplatform.one/table, @multiplatform.one/forms, etc.
+ */
+import type { SizeTokens } from "tamagui";
+export { TableCellContext, useIsInTableCell, useTableCellContext } from "./tableCellContext";
+export type { TableCellContextValue } from "./tableCellContext";
+type AlignCells = {
+    y: "center" | "start" | "end";
+    x: "center" | "start" | "end";
+};
+/**
+ * Element rendering: tamagui 2.0.0-rc derives the DOM element from the
+ * `render` prop (`tag:` passes through as a plain attribute), so every
+ * primitive sets `render:` to emit real `<table>/<thead>/<tbody>/<tfoot>/
+ * <tr>/<th>/<td>/<caption>` elements on web. On native `render` is inert
+ * (skipProps) and the components stay RN Views in the flex displayMode.
+ *
+ * Explicit ARIA roles stay on every element: consumers restyle these
+ * elements (`displayMode="flex"`, sticky cells), and browsers drop the
+ * implicit table roles when a table element's display is overridden.
+ */
+/** Table Components */
+declare const Row: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+    rowLocation?: "middle" | "first" | "last" | undefined;
+    displayMode?: "table" | "flex" | undefined;
+}, import("@tamagui/web").StaticConfigPublic>;
+declare const Cell: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    cellWidth?: number | "auto" | SizeTokens | undefined;
+    cellHeight?: SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+    displayMode?: "table" | "flex" | undefined;
+    alignCells?: AlignCells | undefined;
+    cellLocation?: "middle" | "first" | "last" | undefined;
+}, import("@tamagui/web").StaticConfigPublic>;
+declare const HeaderCell: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    cellWidth?: number | "auto" | SizeTokens | undefined;
+    cellHeight?: SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+    displayMode?: "table" | "flex" | undefined;
+    alignHeaderCells?: AlignCells | undefined;
+    cellLocation?: "middle" | "first" | "last" | undefined;
+}, import("@tamagui/web").StaticConfigPublic>;
+declare const TableBody: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+    displayMode?: "table" | "flex" | undefined;
+}, import("@tamagui/web").StaticConfigPublic>;
+declare const TableHead: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+    displayMode?: "table" | "flex" | undefined;
+}, import("@tamagui/web").StaticConfigPublic>;
+declare const TableFoot: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+    displayMode?: "table" | "flex" | undefined;
+}, import("@tamagui/web").StaticConfigPublic>;
+declare const TableCaption: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | import("@tamagui/core").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}, import("@tamagui/web").StaticConfigPublic>;
+declare const TableComp: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    cellWidth?: SizeTokens | undefined;
+    cellHeight?: SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+    displayMode?: "table" | "flex" | undefined;
+    alignHeaderCells?: any;
+    alignCells?: any;
+}, import("@tamagui/web").StaticConfigPublic>;
+export interface ThemedRowProps extends React.ComponentProps<typeof Row> {
+    accent?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    success?: boolean;
+}
+/**
+ * SP-EDGE row density: the `space` knob scales cell padding (row density)
+ * without adding an outer row inset (LC-18 / theme-propagation-spec SP-EDGE).
+ * `medium` matches the pre-knob defaults so default rendering is unchanged.
+ */
+export declare function getTableCellPadding(space: string): {
+    paddingHorizontal: string;
+    paddingVertical: string;
+};
+/**
+ * Responsive layout mode for the Table primitive.
+ * - `table`: always render the semantic table (default — Layer-1 consumers
+ *   like markdown tables and DataTable's grid own their responsive handling)
+ * - `cards`: render each body row as a stacked card of label/value pairs
+ * - `auto`: table on `$sm` and up, cards below (W11 compact class)
+ */
+export type TableLayout = "table" | "cards" | "auto";
+export interface ThemedTableProps extends React.ComponentProps<typeof TableComp> {
+    /** Responsive layout — see {@link TableLayout}. Default `table`. */
+    layout?: TableLayout;
+}
+declare function ThemedTableComp({ layout, ...props }: ThemedTableProps): import("react/jsx-runtime").JSX.Element;
+declare function ThemedTableHead(props: React.ComponentProps<typeof TableHead>): import("react/jsx-runtime").JSX.Element;
+declare function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps): import("react/jsx-runtime").JSX.Element;
+declare function ThemedCell({ children, style, ...props }: React.ComponentProps<typeof Cell>): import("react/jsx-runtime").JSX.Element;
+declare function ThemedHeaderCell({ children, style, ...props }: React.ComponentProps<typeof HeaderCell>): import("react/jsx-runtime").JSX.Element;
+export declare const Table: typeof ThemedTableComp & {
+    Head: typeof ThemedTableHead;
+    Body: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        displayMode?: "table" | "flex" | undefined;
+    }, import("@tamagui/web").StaticConfigPublic>;
+    Row: typeof ThemedRow;
+    Cell: typeof ThemedCell;
+    HeaderCell: typeof ThemedHeaderCell;
+    Foot: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+        displayMode?: "table" | "flex" | undefined;
+    }, import("@tamagui/web").StaticConfigPublic>;
+    Caption: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
+        elevation?: number | import("@tamagui/core").SizeTokens | undefined;
+        transparent?: boolean | undefined;
+        fullscreen?: boolean | undefined;
+        circular?: boolean | undefined;
+        elevate?: boolean | undefined;
+        bordered?: boolean | undefined;
+        chromeless?: boolean | "all" | undefined;
+    }, import("@tamagui/web").StaticConfigPublic>;
+};
+export type TableProps = ThemedTableProps;
+export type TableRowProps = ThemedRowProps;
+export type TableCellProps = React.ComponentProps<typeof Cell>;
+export type TableHeaderCellProps = React.ComponentProps<typeof HeaderCell>;
+export type TableBodyProps = React.ComponentProps<typeof TableBody>;
+export type TableHeadProps = React.ComponentProps<typeof TableHead>;
+export type TableFootProps = React.ComponentProps<typeof TableFoot>;
+export type TableCaptionProps = React.ComponentProps<typeof TableCaption>;
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/types/tableCellContext.d.ts

@@ -0,0 +1,18 @@
+/**
+ * TableCellContext — shared between table-primitives, @multiplatform.one/table, and forms.
+ *
+ * Forms re-exports this context so field components can detect table cells
+ * and use chromeless rendering.
+ */
+export interface TableCellContextValue {
+    /** Whether the component is rendered inside a table cell */
+    inTableCell: boolean;
+    /** Whether the cell is in a header row */
+    isHeader?: boolean;
+    /** Whether the cell is editable */
+    editable?: boolean;
+}
+export declare const TableCellContext: import("react").Context<TableCellContextValue>;
+export declare function useTableCellContext(): TableCellContextValue;
+export declare function useIsInTableCell(): boolean;
+//# sourceMappingURL=tableCellContext.d.ts.map

package/types/tableCellContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableCellContext.d.ts","sourceRoot":"","sources":["../src/tableCellContext.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,WAAW,qBAAqB;IACpC,4DAA4D;IAC5D,WAAW,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,eAAO,MAAM,gBAAgB,gDAAqD,CAAC;AAEnF,wBAAgB,mBAAmB,IAAI,qBAAqB,CAE3D;AAED,wBAAgB,gBAAgB,IAAI,OAAO,CAG1C"}

package/dist/cjs/table.spec.cjs

@@ -1,183 +0,0 @@
-var import_test_utils = require("@multiplatform.one/test-utils");
-var import_vitest = require("vitest");
-var import_index = require("./index.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-(0, import_vitest.describe)("Table Primitives", () => {
-  (0, import_vitest.it)("renders semantic HTML structure via tag attributes (table, thead, tbody, tfoot, tr, td, th, caption)", () => {
-    const {
-      container
-    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Table, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Caption, {
-        children: "Test Caption"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Head, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.HeaderCell, {
-            children: "Header"
-          })
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Body, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Cell"
-          })
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Foot, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Footer"
-          })
-        })
-      })]
-    }));
-    (0, import_vitest.expect)(container.querySelector('[tag="table"]')).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector('[tag="thead"]')).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector('[tag="tbody"]')).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector('[tag="tfoot"]')).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelectorAll('[tag="tr"]').length).toBe(3);
-    (0, import_vitest.expect)(container.querySelector('[tag="td"]')).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector('[tag="th"]')).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector('[tag="caption"]')).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_Table")).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_TableHead")).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_TableBody")).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_TableFoot")).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_TableRow")).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_TableCell")).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_TableHeaderCell")).not.toBeNull();
-    (0, import_vitest.expect)(container.querySelector(".is_TableCaption")).not.toBeNull();
-  });
-  (0, import_vitest.it)("applies intent props on Table.Row with Theme wrapping", () => {
-    const {
-      container: withIntent
-    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Table.Body, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          accent: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Accent row"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          error: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Error row"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          warning: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Warning row"
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          success: true,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Success row"
-          })
-        })]
-      })
-    }));
-    const {
-      container: withoutIntent
-    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Body, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Normal row"
-          })
-        })
-      })
-    }));
-    const rows = withIntent.querySelectorAll('[tag="tr"]');
-    (0, import_vitest.expect)(rows.length).toBe(4);
-    (0, import_vitest.expect)(withIntent.textContent).toContain("Accent row");
-    (0, import_vitest.expect)(withIntent.textContent).toContain("Error row");
-    (0, import_vitest.expect)(withIntent.textContent).toContain("Warning row");
-    (0, import_vitest.expect)(withIntent.textContent).toContain("Success row");
-    const intentThemeWrappers = withIntent.querySelectorAll(".is_Theme");
-    const normalThemeWrappers = withoutIntent.querySelectorAll(".is_Theme");
-    (0, import_vitest.expect)(intentThemeWrappers.length).toBeGreaterThan(normalThemeWrappers.length);
-  });
-  (0, import_vitest.it)("spreads knobProps from useResolvedKnobs on Table root", () => {
-    const {
-      container
-    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Body, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Content"
-          })
-        })
-      })
-    }));
-    const table = container.querySelector('[tag="table"]');
-    (0, import_vitest.expect)(table).not.toBeNull();
-    (0, import_vitest.expect)(table?.textContent).toContain("Content");
-    (0, import_vitest.expect)(table?.classList.contains("is_Table")).toBe(true);
-  });
-  (0, import_vitest.it)("renders Table.Caption as a caption element", () => {
-    const {
-      container
-    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Table, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Caption, {
-        children: "Monthly Sales Report"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Body, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Row, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "Data"
-          })
-        })
-      })]
-    }));
-    const caption = container.querySelector('[tag="caption"]');
-    (0, import_vitest.expect)(caption).not.toBeNull();
-    (0, import_vitest.expect)(caption?.textContent).toContain("Monthly Sales Report");
-    (0, import_vitest.expect)(caption?.classList.contains("is_TableCaption")).toBe(true);
-    const table = container.querySelector('[tag="table"]');
-    (0, import_vitest.expect)(table?.querySelector('[tag="caption"]')).not.toBeNull();
-  });
-  (0, import_vitest.it)("exposes compound component API (Head, Body, Row, Cell, HeaderCell, Foot, Caption)", () => {
-    (0, import_vitest.expect)(import_index.Table.Head).toBeDefined();
-    (0, import_vitest.expect)(import_index.Table.Body).toBeDefined();
-    (0, import_vitest.expect)(import_index.Table.Row).toBeDefined();
-    (0, import_vitest.expect)(import_index.Table.Cell).toBeDefined();
-    (0, import_vitest.expect)(import_index.Table.HeaderCell).toBeDefined();
-    (0, import_vitest.expect)(import_index.Table.Foot).toBeDefined();
-    (0, import_vitest.expect)(import_index.Table.Caption).toBeDefined();
-    const {
-      getByText
-    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Table, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Caption, {
-        children: "Caption"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Head, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Table.Row, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.HeaderCell, {
-            children: "H1"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.HeaderCell, {
-            children: "H2"
-          })]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Body, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Table.Row, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "A1"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "A2"
-          })]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Foot, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_index.Table.Row, {
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "F1"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.Table.Cell, {
-            children: "F2"
-          })]
-        })
-      })]
-    }));
-    (0, import_vitest.expect)(getByText("Caption")).toBeDefined();
-    (0, import_vitest.expect)(getByText("H1")).toBeDefined();
-    (0, import_vitest.expect)(getByText("H2")).toBeDefined();
-    (0, import_vitest.expect)(getByText("A1")).toBeDefined();
-    (0, import_vitest.expect)(getByText("A2")).toBeDefined();
-    (0, import_vitest.expect)(getByText("F1")).toBeDefined();
-    (0, import_vitest.expect)(getByText("F2")).toBeDefined();
-  });
-});