@workday/canvas-kit-react 11.0.0-alpha.707-next.0 → 11.0.0-alpha.708-next.0

package/dist/es6/table/lib/Table.js

@@ -1,24 +1,227 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { colors, type } from '@workday/canvas-kit-react/tokens';
-export const borderWidth = 1;
-export const borderColor = colors.soap400;
-export const cellBorder = `${borderWidth}px solid ${borderColor}`;
-const TableComponent = styled('table')(type.levels.subtext.large, {
-    width: '100%',
-    border: cellBorder,
-    borderSpacing: 0,
-    textAlign: 'left',
-    thead: {
-        borderSpacing: 0,
-    },
-});
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { TableHead } from './TableHead';
+import { TableBody } from './TableBody';
+import { TableRow } from './TableRow';
+import { TableHeader } from './TableHeader';
+import { TableCell } from './TableCell';
+import { TableFooter } from './TableFooter';
+import { TableCaption } from './TableCaption';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+const tableStencil = createStencil({
+    base: { name: "1jt00fi", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));overflow:auto;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));box-sizing:border-box;" }
+}, "table");
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export class Table extends React.Component {
-    render() {
-        const { children, ...elemProps } = this.props;
-        return React.createElement(TableComponent, Object.assign({}, elemProps), children);
-    }
+ * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
+ *
+ *
+ * ```tsx
+import {Table} from '@workday/canvas-kit-react/table';
+
+export default function App() {
+  return (
+    <Table>
+      <Table.Caption>Table Caption</Table.Caption>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Header>Table Header</Table.Header>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+      <Table.Footer>
+        <Table.Row>
+          <Table.Header>Table Header</Table.Header>
+          <Table.Cell>Table Data Cell</Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    </Table>
+  );
 }
+```
+ */
+export const Table = createComponent('table')({
+    displayName: 'Table',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableStencil())), children));
+    },
+    subComponents: {
+        /**
+         * `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
+         *
+         *
+         * ```tsx
+          import {Table} from '@workday/canvas-kit-react/table';
+    
+          export default function App() {
+            return (
+              <Table>
+                <Table.Caption>Table Caption</Table.Caption>
+                <Table.Body>
+                  <Table.Row>
+                    <Table.Header>Table Header</Table.Header>
+                    <Table.Cell>Table Cell</Table.Cell>
+                  </Table.Row>
+                </Table.Body>
+              </Table>
+            );
+          }
+          ```
+        */
+        Caption: TableCaption,
+        /**
+        * `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
+        *
+        *
+        * ```tsx
+        import {Table} from '@workday/canvas-kit-react/table';
+    
+        export default function App() {
+          return (
+            <Table>
+              <Table.Head>
+                <Table.Row>
+                  <Table.Header>Table Header</Table.Header>
+                  <Table.Cell>Table Cell</Table.Cell>
+                </Table.Row>
+              </Table.Head>
+            </Table>
+          );
+        }
+        ```
+        */
+        Head: TableHead,
+        /**
+         * `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
+         *
+         *
+         * ```tsx
+        import {Table} from '@workday/canvas-kit-react/table';
+    
+        export default function App() {
+          return (
+            <Table>
+              <Table.Body>
+                <Table.Row>
+                  <Table.Header>Table Header</Table.Header>
+                  <Table.Cell>Table Cell</Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+          );
+        }
+        ```
+        */
+        Body: TableBody,
+        /**
+         * `Table.Row` renders a [tr](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) element.
+         *
+         * **Note**: `Table.Row` is built on [Grid](/docs/components-layout-grid--basic). It will look for
+         * how many children are there and if those children are valid React Elements. This will adjust the
+         * amount of columns automatically using the `gridTemplateColumns` style prop and the width of the
+         * columns is also set using a `minmax` function in the `gridTemplateColumns` style prop. If a user
+         * would like to adjust this, it can be overwritten on `Table.Row`. See the example below for how to
+         * overwrite `gridTemplateColumns`.
+         *
+         *
+         * ```tsx
+        import {Table} from '@workday/canvas-kit-react/table';
+    
+        export default function App() {
+          return (
+            <Table>
+              <Table.Head>
+                <Table.Row gridTemplateColumns="repeat(4, minmax(100px, 1fr))">
+                  <Table.Header>Table Header</Table.Header>
+                  <Table.Cell>Table Cell</Table.Cell>
+                </Table.Row>
+              </Table.Head>
+            </Table>
+          );
+        }
+        ```
+        */
+        Row: TableRow,
+        /**
+        * `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
+        *
+        *
+        * ```tsx
+        import {Table} from '@workday/canvas-kit-react/table';
+    
+        export default function App() {
+          return (
+            <Table>
+              <Table.Head>
+                <Table.Row>
+                  <Table.Header>Table Header</Table.Header>
+                  <Table.Cell>Table Cell</Table.Cell>
+                </Table.Row>
+              </Table.Head>
+            </Table>
+          );
+        }
+        ```
+        */
+        Header: TableHeader,
+        /**
+        * `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
+        *
+        *
+        * ```tsx
+        import {Table} from '@workday/canvas-kit-react/table';
+    
+        export default function App() {
+          return (
+            <Table>
+              <Table.Body>
+                <Table.Row>
+                  <Table.Header>Table Header</Table.Header>
+                  <Table.Cell>Table Cell</Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+          );
+        }
+        ```
+        */
+        Cell: TableCell,
+        /**
+        * `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
+        *
+        *
+        * ```tsx
+        import {Table} from '@workday/canvas-kit-react/table';
+    
+        export default function App() {
+          return (
+            <Table>
+              <Table.Footer>
+                <Table.Row>
+                  <Table.Header>Table Header</Table.Header>
+                  <Table.Cell>Table Cell</Table.Cell>
+                </Table.Row>
+              </Table.Footer>
+            </Table>
+          );
+        }
+        ```
+        */
+        Footer: TableFooter,
+    },
+});

package/dist/es6/table/lib/TableBody.d.ts

@@ -0,0 +1,2 @@
+export declare const TableBody: import("@workday/canvas-kit-react/common").ElementComponent<"tbody", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableBody.d.ts.map

package/dist/es6/table/lib/TableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

package/dist/es6/table/lib/TableBody.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil } from '@workday/canvas-kit-styling';
+const tableBodyStencil = createStencil({
+    base: { name: "1aq46he", styles: "display:grid;box-sizing:border-box;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
+}, "table-body");
+export const TableBody = createComponent('tbody')({
+    displayName: 'Table.Body',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableBodyStencil())), children));
+    },
+});

package/dist/es6/table/lib/TableCaption.d.ts

@@ -0,0 +1,2 @@
+export declare const TableCaption: import("@workday/canvas-kit-react/common").ElementComponent<"caption", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps>;
+//# sourceMappingURL=TableCaption.d.ts.map

package/dist/es6/table/lib/TableCaption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,0MASvB,CAAC"}

package/dist/es6/table/lib/TableCaption.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+const tableCaptionStencil = createStencil({
+    base: { name: "mnuok4", styles: "display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));box-sizing:border-box;" }
+}, "table-caption");
+export const TableCaption = createComponent('caption')({
+    displayName: 'Table.Caption',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableCaptionStencil())), children));
+    },
+});

package/dist/es6/table/lib/TableCell.d.ts

@@ -0,0 +1,2 @@
+export declare const TableCell: import("@workday/canvas-kit-react/common").ElementComponent<"td", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableCell.d.ts.map

package/dist/es6/table/lib/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,SAAS,qMASpB,CAAC"}

package/dist/es6/table/lib/TableCell.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+const tableCellStencil = createStencil({
+    base: { name: "iww62y", styles: "display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));word-break:break-word;box-sizing:border-box;" }
+}, "table-cell");
+export const TableCell = createComponent('td')({
+    displayName: 'Table.Cell',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableCellStencil())), children));
+    },
+});

package/dist/es6/table/lib/TableFooter.d.ts

@@ -0,0 +1,2 @@
+export declare const TableFooter: import("@workday/canvas-kit-react/common").ElementComponent<"tfoot", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableFooter.d.ts.map

package/dist/es6/table/lib/TableFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableFooter.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,WAAW,wMAStB,CAAC"}

package/dist/es6/table/lib/TableFooter.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil } from '@workday/canvas-kit-styling';
+const tableFooterStencil = createStencil({
+    base: { name: "197vc7s", styles: "display:grid;box-sizing:border-box;" }
+}, "table-footer");
+export const TableFooter = createComponent('tfoot')({
+    displayName: 'Table.Footer',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableFooterStencil())), children));
+    },
+});

package/dist/es6/table/lib/TableHead.d.ts

@@ -0,0 +1,2 @@
+export declare const TableHead: import("@workday/canvas-kit-react/common").ElementComponent<"thead", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableHead.d.ts.map

package/dist/es6/table/lib/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHead.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

package/dist/es6/table/lib/TableHead.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
+const tableHeadStencil = createStencil({
+    base: { name: "sv3y8l", styles: "display:grid;background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));min-height:3rem;box-sizing:border-box;th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
+}, "table-head");
+export const TableHead = createComponent('thead')({
+    displayName: 'Table.Head',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableHeadStencil())), children));
+    },
+});

package/dist/es6/table/lib/TableHeader.d.ts

@@ -0,0 +1,2 @@
+export declare const TableHeader: import("@workday/canvas-kit-react/common").ElementComponent<"th", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/es6/table/lib/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHeader.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,WAAW,qMAStB,CAAC"}

package/dist/es6/table/lib/TableHeader.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+const tableHeaderStencil = createStencil({
+    base: { name: "mt03mc", styles: "display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium, 500);box-sizing:border-box;" }
+}, "table-header");
+export const TableHeader = createComponent('th')({
+    displayName: 'Table.Header',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableHeaderStencil())), children));
+    },
+});

package/dist/es6/table/lib/TableRow.d.ts

@@ -1,34 +1,2 @@
-import * as React from 'react';
-import { StyledType } from '@workday/canvas-kit-react/common';
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export declare enum TableRowState {
-    Error = 0,
-    Alert = 1,
-    InputError = 2,
-    InputAlert = 3,
-    Hover = 4,
-    Selected = 5
-}
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-    /**
-     * The state of the TableRow. Accepts `Error`, `Alert`, `InputError`, `InputAlert`, `Hover`, or `Selected`.
-     */
-    state?: TableRowState;
-    /**
-     * If true, render the TableRow with header elements.
-     * @default false
-     */
-    header?: boolean;
-}
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export declare const TableRow: import("@workday/canvas-kit-react/common").ElementComponent<"tr", TableRowProps & StyledType> & {
-    State: typeof TableRowState;
-};
+export declare const TableRow: import("@workday/canvas-kit-react/common").ElementComponent<"tr", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
 //# sourceMappingURL=TableRow.d.ts.map

package/dist/es6/table/lib/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAkB,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAG7E;;GAEG;AACH,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,KAAK,IAAA;IACL,UAAU,IAAA;IACV,UAAU,IAAA;IACV,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuKD;;GAEG;AACH,eAAO,MAAM,QAAQ;;CAgBnB,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,QAAQ,qMAuBnB,CAAC"}

package/dist/es6/table/lib/TableRow.js

@@ -1,181 +1,23 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { rgba } from 'polished';
-import { colors, space, statusColors } from '@workday/canvas-kit-react/tokens';
+import React from 'react';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { borderColor, borderWidth, cellBorder } from './Table';
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
-export var TableRowState;
-(function (TableRowState) {
-    TableRowState[TableRowState["Error"] = 0] = "Error";
-    TableRowState[TableRowState["Alert"] = 1] = "Alert";
-    TableRowState[TableRowState["InputError"] = 2] = "InputError";
-    TableRowState[TableRowState["InputAlert"] = 3] = "InputAlert";
-    TableRowState[TableRowState["Hover"] = 4] = "Hover";
-    TableRowState[TableRowState["Selected"] = 5] = "Selected";
-})(TableRowState || (TableRowState = {}));
-const errorColor = statusColors.error;
-const errorColorLight = colors.cinnamon200;
-const alertColor = statusColors.warning;
-const alertColorLight = colors.cantaloupe200;
-function makeColoredRow(_bgColor, _borderColor) {
-    return {
-        backgroundColor: _bgColor,
-        position: 'relative',
-        // Bottom border
-        '&:before, &:after': {
-            position: 'absolute',
-            left: 0,
-            top: -borderWidth,
-            content: '""',
-            width: `calc(100% + ${borderWidth}px)`,
-            height: borderWidth,
-            backgroundColor: _borderColor,
-        },
-        '&:after': {
-            top: 'auto',
-            bottom: -borderWidth,
-        },
-        '&:first-of-type': {
-            boxShadow: `inset ${borderWidth}px 0 0 ${_borderColor}`,
-        },
-        '&:last-child': {
-            boxShadow: `inset -${borderWidth}px 0 0 ${_borderColor}`,
-            '&:before, &:after': {
-                width: '100%',
-            },
-        },
-    };
-}
-function makeColoredRowStyle(_bgColor, _borderColor) {
-    const lightenedBg = rgba(_bgColor, 0.2);
-    return {
-        'th, td': [
-            makeColoredRow(lightenedBg, _bgColor),
-            {
-                borderLeftColor: _borderColor,
-                borderRightColor: _borderColor,
-            },
-        ],
-        '&:hover': {
-            'th, td': {
-                backgroundColor: lightenedBg,
-            },
-        },
-    };
-}
-function makeBorderlessStyle(_bgColor) {
-    return {
-        'th, td': {
-            backgroundColor: rgba(_bgColor, 0.2),
-        },
-    };
-}
-const StyledTableRow = styled('tr')({
-    'th, td': {
-        backgroundColor: colors.frenchVanilla100,
-        padding: `${space.xs} ${space.xxs}`,
-        fontSize: 13,
-        borderRight: cellBorder,
-        borderBottom: cellBorder,
-        height: `calc(${space.xl} + ${space.xxs})`,
-        boxSizing: 'border-box',
-        transition: 'background-color 0.2s',
-    },
-    td: {
-        '&:last-child': {
-            borderRight: 'none',
-        },
-    },
-    th: {
-        height: space.xxl,
-        '&:last-child': {
-            borderRight: 'none',
-        },
-    },
-    '&:last-child': {
-        'th, td': {
-            borderBottom: 'none',
-        },
-    },
-}, ({ header }) => header && {
-    '&:last-child': {
-        'th, td': {
-            borderBottom: '1px solid transparent',
-        },
-    },
-    'th, td': {
-        position: 'relative',
-        backgroundColor: colors.frenchVanilla100,
-        verticalAlign: 'middle',
-        '&:after': {
-            position: 'absolute',
-            left: 0,
-            bottom: -borderWidth,
-            content: '""',
-            width: `calc(100% + ${borderWidth}px)`,
-            height: borderWidth,
-            backgroundColor: borderColor,
-        },
-        '&:last-child': {
-            '&:after': {
-                width: '100%',
-            },
-        },
-    },
-}, ({ state }) => {
-    switch (state) {
-        case TableRowState.InputError:
-            return makeBorderlessStyle(errorColor);
-        case TableRowState.Error:
-            return makeColoredRowStyle(errorColor, errorColorLight);
-        case TableRowState.InputAlert:
-            return makeBorderlessStyle(alertColor);
-        case TableRowState.Alert:
-            return makeColoredRowStyle(alertColor, alertColorLight);
-        case TableRowState.Selected:
-            return {
-                'th, td': [
-                    makeColoredRow(colors.blueberry100, colors.blueberry500),
-                    {
-                        '&:after': {
-                            zIndex: 2,
-                        },
-                    },
-                ],
-            };
-        default:
-            return {
-                '&:hover': {
-                    'th, td': {
-                        backgroundColor: colors.soap300,
-                    },
-                },
-                '&:focus': {
-                    outline: 'none',
-                    'th, td': [
-                        makeColoredRow(colors.blueberry100, colors.blueberry500),
-                        {
-                            '&:after': {
-                                zIndex: 2,
-                            },
-                        },
-                    ],
-                },
-            };
-    }
-});
-/**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
- */
+import { createStencil, createVars } from '@workday/canvas-kit-styling';
+const childrenVars = createVars({ id: "cnvs-children", args: ["cellNumber"] });
+// Styles for rows including dynamic sizing for amount of cells within a row
+const tableRowStencil = createStencil({
+    base: { name: "s9e95c", styles: "display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cnvs-children-cellNumber), minmax(10rem, 1fr));box-sizing:border-box;" }
+}, "table-row");
 export const TableRow = createComponent('tr')({
-    displayName: 'TableRow',
-    Component: ({ state, header, children, ...elemProps }, ref, Element) => {
-        return (React.createElement(StyledTableRow, Object.assign({ as: Element, ref: ref, state: state, header: header }, elemProps), children));
-    },
-    subComponents: {
-        State: TableRowState,
+    displayName: 'Table.Row',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        // This calculates the amount of valid React children cells within the row and will update the gridTemplateColumns style property with that amount of cells within the row
+        const validChildren = (children) => {
+            return React.Children.toArray(children).filter(child => React.isValidElement(child));
+        };
+        /**
+         * This is the calculated amount of valid React children
+         */
+        const childrenArray = validChildren(children).length;
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, [tableRowStencil(), { [childrenVars.cellNumber]: childrenArray }])), children));
     },
 });