reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Table/tests/Table.stories.js

@@ -1,315 +1,309 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.examples = exports.edgeCases = exports.className = exports.tabIndex = exports.tbody = exports.render = exports.rows = exports.border = exports.layout = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Card_1 = __importDefault(require("../../../components/Card"));
-const Checkbox_1 = __importDefault(require("../../../components/Checkbox"));
-const Table_1 = __importDefault(require("../../../components/Table"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect } from "storybook/test";
+import Card from "../../../components/Card/index.js";
+import Checkbox from "../../../components/Checkbox/index.js";
+import Table from "../../../components/Table/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Table",
-    component: Table_1.default,
+    component: Table,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/table",
         },
     },
 };
-exports.layout = {
+export const layout = {
     name: "base",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="base">
-				<Table_1.default>
-					<Table_1.default.Head>
-						<Table_1.default.Row>
-							<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-							<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-						</Table_1.default.Row>
-					</Table_1.default.Head>
-					<Table_1.default.Body>
-						<Table_1.default.Row>
-							<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-							<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-						</Table_1.default.Row>
-					</Table_1.default.Body>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="colspan: 2 for col 2, rowspan: 2 for cell 3">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading colSpan={2}>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-						<Table_1.default.Cell rowSpan={2}>Cell 3</Table_1.default.Cell>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: center for heading 1, align: end for heading 2">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading align="center">Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading align="end">Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="valign: center for cell 2, valign: end for cell 3">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>
-							<View_1.default height={15} backgroundColor="neutral-faded"/>
-						</Table_1.default.Cell>
-						<Table_1.default.Cell verticalAlign="center">Cell 2</Table_1.default.Cell>
-						<Table_1.default.Cell verticalAlign="end">Cell 3</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width: 40%, minWidth: 200px for col 1">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading width="40%" minWidth="200px">
+    render: () => (<Example>
+			<Example.Item title="base">
+				<Table>
+					<Table.Head>
+						<Table.Row>
+							<Table.Heading>Column 1</Table.Heading>
+							<Table.Heading>Column 2</Table.Heading>
+						</Table.Row>
+					</Table.Head>
+					<Table.Body>
+						<Table.Row>
+							<Table.Cell>Cell 1</Table.Cell>
+							<Table.Cell>Cell 2</Table.Cell>
+						</Table.Row>
+					</Table.Body>
+				</Table>
+			</Example.Item>
+			<Example.Item title="colspan: 2 for col 2, rowspan: 2 for cell 3">
+				<Table>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading colSpan={2}>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+						<Table.Cell rowSpan={2}>Cell 3</Table.Cell>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="align: center for heading 1, align: end for heading 2">
+				<Table>
+					<Table.Row>
+						<Table.Heading align="center">Column 1</Table.Heading>
+						<Table.Heading align="end">Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="valign: center for cell 2, valign: end for cell 3">
+				<Table>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>
+							<View height={15} backgroundColor="neutral-faded"/>
+						</Table.Cell>
+						<Table.Cell verticalAlign="center">Cell 2</Table.Cell>
+						<Table.Cell verticalAlign="end">Cell 3</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="width: 40%, minWidth: 200px for col 1">
+				<Table>
+					<Table.Row>
+						<Table.Heading width="40%" minWidth="200px">
 							Column 1
-						</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
 };
-exports.border = {
+export const border = {
     name: "border",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="border: true">
-				<Table_1.default border>
-					<Table_1.default.Row>
-						<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="columnBorder: true">
-				<Table_1.default columnBorder>
-					<Table_1.default.Row>
-						<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="columnBorder: true, border: true">
-				<Table_1.default columnBorder border>
-					<Table_1.default.Row>
-						<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="border: true">
+				<Table border>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="columnBorder: true">
+				<Table columnBorder>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="columnBorder: true, border: true">
+				<Table columnBorder border>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
 };
-exports.rows = {
+export const rows = {
     name: "rows",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="highlighted for row 2">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row highlighted>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="clickable row 2, focus ring">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row onClick={() => { }}>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="highlighted for row 2">
+				<Table>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row highlighted>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="clickable row 2, focus ring">
+				<Table>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row onClick={() => { }}>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
 };
-exports.render = {
+export const render = {
     name: "rendering",
-    render: () => (<Table_1.default>
-			<Table_1.default.Head>
-				<Table_1.default.Row>
-					<Table_1.default.Heading>Heading</Table_1.default.Heading>
-					<Table_1.default.Heading>Heading</Table_1.default.Heading>
-				</Table_1.default.Row>
-			</Table_1.default.Head>
-			<Table_1.default.Body>
-				<Table_1.default.Row>
-					<Table_1.default.Cell>Content</Table_1.default.Cell>
-					<Table_1.default.Cell>Content</Table_1.default.Cell>
-				</Table_1.default.Row>
-			</Table_1.default.Body>
-		</Table_1.default>),
+    render: () => (<Table>
+			<Table.Head>
+				<Table.Row>
+					<Table.Heading>Heading</Table.Heading>
+					<Table.Heading>Heading</Table.Heading>
+				</Table.Row>
+			</Table.Head>
+			<Table.Body>
+				<Table.Row>
+					<Table.Cell>Content</Table.Cell>
+					<Table.Cell>Content</Table.Cell>
+				</Table.Row>
+			</Table.Body>
+		</Table>),
     play: async ({ canvas }) => {
         const body = canvas.getAllByRole("rowgroup");
         const rows = canvas.getAllByRole("row");
         const headings = canvas.getAllByRole("columnheader");
         const cells = canvas.getAllByRole("cell");
-        (0, test_1.expect)(body).toHaveLength(2);
-        (0, test_1.expect)(rows).toHaveLength(2);
-        (0, test_1.expect)(headings).toHaveLength(2);
-        (0, test_1.expect)(cells).toHaveLength(2);
-        (0, test_1.expect)(canvas.getAllByText("Heading")).toHaveLength(2);
-        (0, test_1.expect)(canvas.getAllByText("Content")).toHaveLength(2);
+        expect(body).toHaveLength(2);
+        expect(rows).toHaveLength(2);
+        expect(headings).toHaveLength(2);
+        expect(cells).toHaveLength(2);
+        expect(canvas.getAllByText("Heading")).toHaveLength(2);
+        expect(canvas.getAllByText("Content")).toHaveLength(2);
     },
 };
-exports.tbody = {
+export const tbody = {
     name: "tbody rendering",
-    render: () => (<Table_1.default>
-			<Table_1.default.Row>
-				<Table_1.default.Heading>Heading</Table_1.default.Heading>
-				<Table_1.default.Heading>Heading</Table_1.default.Heading>
-			</Table_1.default.Row>
-		</Table_1.default>),
+    render: () => (<Table>
+			<Table.Row>
+				<Table.Heading>Heading</Table.Heading>
+				<Table.Heading>Heading</Table.Heading>
+			</Table.Row>
+		</Table>),
     play: async ({ canvas }) => {
         const body = canvas.getByRole("rowgroup");
-        (0, test_1.expect)(body).toBeInTheDocument();
+        expect(body).toBeInTheDocument();
     },
 };
-exports.tabIndex = {
+export const tabIndex = {
     name: "adds tabIndex for clickable rows",
-    render: () => (<Table_1.default>
-			<Table_1.default.Row>
-				<Table_1.default.Cell>Row 1</Table_1.default.Cell>
-			</Table_1.default.Row>
-			<Table_1.default.Row onClick={() => { }}>
-				<Table_1.default.Cell>Row 2</Table_1.default.Cell>
-			</Table_1.default.Row>
-			<Table_1.default.Row attributes={{ onClick: () => { } }}>
-				<Table_1.default.Cell>Row 3</Table_1.default.Cell>
-			</Table_1.default.Row>
-		</Table_1.default>),
+    render: () => (<Table>
+			<Table.Row>
+				<Table.Cell>Row 1</Table.Cell>
+			</Table.Row>
+			<Table.Row onClick={() => { }}>
+				<Table.Cell>Row 2</Table.Cell>
+			</Table.Row>
+			<Table.Row attributes={{ onClick: () => { } }}>
+				<Table.Cell>Row 3</Table.Cell>
+			</Table.Row>
+		</Table>),
     play: async ({ canvas }) => {
         const elRows = canvas.getAllByRole("row");
-        (0, test_1.expect)(elRows[0]).not.toHaveAttribute("tabIndex");
-        (0, test_1.expect)(elRows[1]).toHaveAttribute("tabIndex", "0");
-        (0, test_1.expect)(elRows[2]).toHaveAttribute("tabIndex", "0");
+        expect(elRows[0]).not.toHaveAttribute("tabIndex");
+        expect(elRows[1]).toHaveAttribute("tabIndex", "0");
+        expect(elRows[2]).toHaveAttribute("tabIndex", "0");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Table_1.default className="test-classname" attributes={{ id: "test-id" }}>
-				<Table_1.default.Row attributes={{ id: "test-row-id" }}>
-					<Table_1.default.Cell attributes={{ id: "test-cell-id" }}></Table_1.default.Cell>
-				</Table_1.default.Row>
-			</Table_1.default>
+			<Table className="test-classname" attributes={{ id: "test-id" }}>
+				<Table.Row attributes={{ id: "test-row-id" }}>
+					<Table.Cell attributes={{ id: "test-cell-id" }}></Table.Cell>
+				</Table.Row>
+			</Table>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const row = canvas.getByRole("row");
         const cell = canvas.getByRole("cell");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(row).toHaveAttribute("id", "test-row-id");
-        (0, test_1.expect)(cell).toHaveAttribute("id", "test-cell-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(row).toHaveAttribute("id", "test-row-id");
+        expect(cell).toHaveAttribute("id", "test-cell-id");
     },
 };
-exports.edgeCases = {
+export const edgeCases = {
     name: "test: edge cases",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="scroll fade">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading minWidth="300px">Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading minWidth="300px">Column 2</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="card with highlighted heading">
-				<Card_1.default raised padding={0}>
-					<Table_1.default>
-						<Table_1.default.Row highlighted>
-							<Table_1.default.Heading width="50%" minWidth="200px">
+    render: () => (<Example>
+			<Example.Item title="scroll fade">
+				<Table>
+					<Table.Row>
+						<Table.Heading minWidth="300px">Column 1</Table.Heading>
+						<Table.Heading minWidth="300px">Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="card with highlighted heading">
+				<Card raised padding={0}>
+					<Table>
+						<Table.Row highlighted>
+							<Table.Heading width="50%" minWidth="200px">
 								Column 1
-							</Table_1.default.Heading>
-							<Table_1.default.Heading colSpan={2} align="end">
+							</Table.Heading>
+							<Table.Heading colSpan={2} align="end">
 								Column 2
-							</Table_1.default.Heading>
-						</Table_1.default.Row>
-						<Table_1.default.Row>
-							<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-							<Table_1.default.Cell align="center">Cell 2</Table_1.default.Cell>
-							<Table_1.default.Cell align="end">Cell 3</Table_1.default.Cell>
-						</Table_1.default.Row>
-						<Table_1.default.Row>
-							<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-							<Table_1.default.Cell align="center">Cell 2</Table_1.default.Cell>
-							<Table_1.default.Cell align="end">Cell 3</Table_1.default.Cell>
-						</Table_1.default.Row>
-					</Table_1.default>
-				</Card_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="width: auto, nowrap">
-				<Table_1.default>
-					<Table_1.default.Row>
-						<Table_1.default.Heading width="50%">Column 1</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-						<Table_1.default.Heading>Column 3</Table_1.default.Heading>
-						<Table_1.default.Heading width="auto">Long heading title</Table_1.default.Heading>
-					</Table_1.default.Row>
-					<Table_1.default.Row>
-						<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 3</Table_1.default.Cell>
-						<Table_1.default.Cell>Cell 4</Table_1.default.Cell>
-					</Table_1.default.Row>
-				</Table_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+							</Table.Heading>
+						</Table.Row>
+						<Table.Row>
+							<Table.Cell>Cell 1</Table.Cell>
+							<Table.Cell align="center">Cell 2</Table.Cell>
+							<Table.Cell align="end">Cell 3</Table.Cell>
+						</Table.Row>
+						<Table.Row>
+							<Table.Cell>Cell 1</Table.Cell>
+							<Table.Cell align="center">Cell 2</Table.Cell>
+							<Table.Cell align="end">Cell 3</Table.Cell>
+						</Table.Row>
+					</Table>
+				</Card>
+			</Example.Item>
+			<Example.Item title="width: auto, nowrap">
+				<Table>
+					<Table.Row>
+						<Table.Heading width="50%">Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+						<Table.Heading>Column 3</Table.Heading>
+						<Table.Heading width="auto">Long heading title</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+						<Table.Cell>Cell 3</Table.Cell>
+						<Table.Cell>Cell 4</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
 };
 const SelectionDemo = () => {
-    const [value, setValue] = react_1.default.useState([]);
+    const [value, setValue] = React.useState([]);
     const rows = [
         {
             value: "1",
@@ -317,19 +311,19 @@ const SelectionDemo = () => {
         { value: "2" },
     ];
     const allSelected = value.length === rows.length;
-    return (<Table_1.default>
-			<Table_1.default.Row>
-				<Table_1.default.Heading width="auto">
-					<Checkbox_1.default inputAttributes={{ "aria-label": "Select all" }} name="hey" checked={allSelected} indeterminate={!!value.length && value.length < rows.length} onChange={() => {
+    return (<Table>
+			<Table.Row>
+				<Table.Heading width="auto">
+					<Checkbox inputAttributes={{ "aria-label": "Select all" }} name="hey" checked={allSelected} indeterminate={!!value.length && value.length < rows.length} onChange={() => {
             setValue(allSelected ? [] : rows.map((row) => row.value));
         }}/>
-				</Table_1.default.Heading>
-				<Table_1.default.Heading>Column 1</Table_1.default.Heading>
-				<Table_1.default.Heading>Column 2</Table_1.default.Heading>
-			</Table_1.default.Row>
-			{rows.map((row) => (<Table_1.default.Row key={row.value} highlighted={value.includes(row.value)}>
-					<Table_1.default.Cell>
-						<Checkbox_1.default name="hey" value={row.value} inputAttributes={{ "aria-label": "Select the row" }} checked={value.includes(row.value)} onChange={(args) => {
+				</Table.Heading>
+				<Table.Heading>Column 1</Table.Heading>
+				<Table.Heading>Column 2</Table.Heading>
+			</Table.Row>
+			{rows.map((row) => (<Table.Row key={row.value} highlighted={value.includes(row.value)}>
+					<Table.Cell>
+						<Checkbox name="hey" value={row.value} inputAttributes={{ "aria-label": "Select the row" }} checked={value.includes(row.value)} onChange={(args) => {
                 setValue((prev) => {
                     if (!args.value)
                         return prev;
@@ -338,17 +332,17 @@ const SelectionDemo = () => {
                     return prev.filter((item) => item !== args.value);
                 });
             }}/>
-					</Table_1.default.Cell>
-					<Table_1.default.Cell>Cell 1</Table_1.default.Cell>
-					<Table_1.default.Cell>Cell 2</Table_1.default.Cell>
-				</Table_1.default.Row>))}
-		</Table_1.default>);
+					</Table.Cell>
+					<Table.Cell>Cell 1</Table.Cell>
+					<Table.Cell>Cell 2</Table.Cell>
+				</Table.Row>))}
+		</Table>);
 };
-exports.examples = {
+export const examples = {
     name: "test: selectable",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="selectable">
+    render: () => (<Example>
+			<Example.Item title="selectable">
 				<SelectionDemo />
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };