@workday/canvas-kit-preview-react 8.0.0-alpha.254-next.23 → 8.0.0-alpha.428-next.2

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAKxD,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC;IACvF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;OAO7B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;CAwB1B,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;EAO7B,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;IAKxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;;;;;;;CAmBL,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -1,49 +1,51 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
 import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
-import { HStack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { StatusIndicatorIcon, statusIndicatorColors } from './StatusIndicatorIcon';
 import { StatusIndicatorLabel } from './StatusIndicatorLabel';
 import { useStatusIndicatorModel } from './hooks';
-export var useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(function (_a) {
-    var state = _a.state;
-    var colors = statusIndicatorColors[state.variant][state.emphasis];
+export const useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(({ state }) => {
+    const colors = statusIndicatorColors[state.variant][state.emphasis];
     return {
         opacity: state.variant === 'transparent' ? '0.85' : undefined,
         color: colors.text,
         background: colors.background,
     };
 });
-export var StatusIndicator = createContainer('div')({
+/**
+ * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
+ * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ *
+ * ```tsx
+ * <StatusIndicator emphasis="low" variant="blue">
+ *   {Child components}
+ * </StatusIndicator>
+ * ```
+ */
+export const StatusIndicator = createContainer('div')({
     displayName: 'StatusIndicator',
     modelHook: useStatusIndicatorModel,
     elemPropsHook: useStatusIndicator,
     subComponents: {
-        Icon: StatusIndicatorIcon,
+        /**
+         * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
+         * contents exceed the component's maximum width.
+         *
+         * ```tsx
+         * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
+         * ```
+         */
         Label: StatusIndicatorLabel,
+        /**
+         * `StatusIndicator.Icon` renders {@link SystemIcon} under the hood. It's used as a decorative
+         * element to visually support the {@link StatusIndicatorLabel StatusIndicator.Label} text.
+         *
+         * ```tsx
+         * <StatusIndicator.Icon icon={uploadCloudIcon} />
+         * ```
+         */
+        Icon: StatusIndicatorIcon,
     },
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(HStack, __assign({ spacing: 4, as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
+})(({ children, ...elemProps }, Element, model) => {
+    return (React.createElement(Flex, Object.assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
 });

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts

@@ -63,6 +63,16 @@ export declare const statusIndicatorColors: {
         };
     };
 };
+export declare const useStatusIndicatorIcon: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}, {
+    color: string;
+    colorHover: string;
+}>;
 export declare const StatusIndicatorIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", StatusIndicatorIconProps, {
     state: {
         emphasis: import("./hooks").StatusIndicatorEmphasis;

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAUF,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}
+{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;EAMjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js

@@ -1,20 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { createElemPropsHook, createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { useStatusIndicatorModel } from './hooks';
 import { colors } from '@workday/canvas-kit-react/tokens';
-export var statusIndicatorColors = {
+export const statusIndicatorColors = {
     gray: {
         high: {
             text: colors.frenchVanilla100,
@@ -76,17 +65,16 @@ export var statusIndicatorColors = {
         },
     },
 };
-var useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(function (_a) {
-    var state = _a.state;
-    var colors = statusIndicatorColors[state.variant][state.emphasis];
+export const useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(({ state }) => {
+    const colors = statusIndicatorColors[state.variant][state.emphasis];
     return {
         color: colors.text,
         colorHover: colors.background,
     };
 });
-export var StatusIndicatorIcon = createSubcomponent('span')({
+export const StatusIndicatorIcon = createSubcomponent('span')({
     modelHook: useStatusIndicatorModel,
     elemPropsHook: useStatusIndicatorIcon,
-})(function (elemProps, Element, model) {
-    return React.createElement(SystemIcon, __assign({ as: Element, size: 20, role: "img" }, elemProps));
+})((elemProps, Element, model) => {
+    return React.createElement(SystemIcon, Object.assign({ as: Element, size: 20, role: "img" }, elemProps));
 });

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js

@@ -1,32 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Text } from '@workday/canvas-kit-react/text';
-export var StatusIndicatorLabel = createComponent('span')({
+export const StatusIndicatorLabel = createComponent('span')({
     displayName: 'StatusIndicator.Label',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Text, __assign({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", typeLevel: "subtext.large", fontWeight: "bold", textTransform: "capitalize", ref: ref, color: "inherit", as: Element }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Text, Object.assign({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", typeLevel: "subtext.large", fontWeight: "bold", textTransform: "capitalize", ref: ref, color: "inherit", as: Element }, elemProps), children));
     },
 });

package/dist/es6/status-indicator/lib/hooks/useStatusIndicatorModel.js

@@ -1,16 +1,5 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { createModelHook } from '@workday/canvas-kit-react/common';
-export var useStatusIndicatorModel = createModelHook({
+export const useStatusIndicatorModel = createModelHook({
     defaultConfig: {
         /**
          * Defines the emphasis of the `StatusIndicator`.
@@ -25,7 +14,9 @@ export var useStatusIndicatorModel = createModelHook({
          */
         variant: 'gray',
     },
-})(function (config) {
-    var state = __assign({}, config);
-    return { state: state, events: {} };
+})(config => {
+    const state = {
+        ...config,
+    };
+    return { state, events: {} };
 });

package/dist/es6/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/Table';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../table/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/es6/table/index.js

@@ -0,0 +1 @@
+export * from './lib/Table';

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

@@ -0,0 +1,207 @@
+/**
+ * `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-preview-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 declare const Table: import("@workday/canvas-kit-react/common").ElementComponent<"table", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps> & {
+    /**
+     * `Table.Caption` renders a [caption](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) element.
+     *
+     *
+     * ```tsx
+      import {Table} from '@workday/canvas-kit-preview-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: import("@workday/canvas-kit-react/common").ElementComponent<"caption", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps>;
+    /**
+    * `Table.Head` renders a [thead](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-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: import("@workday/canvas-kit-react/common").ElementComponent<"thead", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+    /**
+     * `Table.Body` renders a [tbody](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) element.
+     *
+     *
+     * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-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: import("@workday/canvas-kit-react/common").ElementComponent<"tbody", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+    /**
+     * `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-preview-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: import("@workday/canvas-kit-react/common").ElementComponent<"tr", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+    /**
+    * `Table.Header` renders a [th](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-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: import("@workday/canvas-kit-react/common").ElementComponent<"th", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+    /**
+    * `Table.Cell` renders a [td](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-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: import("@workday/canvas-kit-react/common").ElementComponent<"td", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+    /**
+    * `Table.Footer` renders a [tfoot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) element.
+    *
+    *
+    * ```tsx
+    import {Table} from '@workday/canvas-kit-preview-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: 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=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK;IAkBd;;;;;;;;;;;;;;;;;;;;;MAqBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;CAGJ,CAAC"}

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

@@ -0,0 +1,223 @@
+import React from 'react';
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { type, colors } from '@workday/canvas-kit-react/tokens';
+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';
+/**
+ * `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-preview-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(Grid, Object.assign({ as: Element, ref: ref, border: `1px solid ${colors.soap500}`, borderRadius: "l", overflow: "scroll" }, type.levels.subtext.large, elemProps), 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-preview-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-preview-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-preview-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-preview-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-preview-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-preview-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-preview-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,
+    },
+});