@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/es6/skeleton/lib/parts/skeletonShape.js

@@ -1,43 +1,15 @@
-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 * as React from 'react';
 import styled from '@emotion/styled';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { colors, space } from '@workday/canvas-kit-react/tokens';
-var Shape = styled('div')(function (_a) {
-    var backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius, height = _a.height, width = _a.width;
-    return ({
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        height: height,
-        width: width,
-        marginBottom: space.s,
-    });
-});
-export var SkeletonShape = createComponent('div')({
+const Shape = styled('div')(({ backgroundColor, borderRadius, height, width }) => ({
+    backgroundColor,
+    borderRadius,
+    height,
+    width,
+    marginBottom: space.s,
+}));
+export const SkeletonShape = createComponent('div')({
     displayName: 'Skeleton.Shape',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? colors.soap200 : _b, _c = _a.borderRadius, borderRadius = _c === void 0 ? 0 : _c, _d = _a.height, height = _d === void 0 ? '100%' : _d, _e = _a.width, width = _e === void 0 ? '100%' : _e, elemProps = __rest(_a, ["backgroundColor", "borderRadius", "height", "width"]);
-        return (React.createElement(Shape, __assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width }, elemProps)));
-    },
+    Component: ({ backgroundColor = colors.soap200, borderRadius = 0, height = '100%', width = '100%', ...elemProps }, ref, Element) => (React.createElement(Shape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width }, elemProps))),
 });

package/dist/es6/skeleton/lib/parts/skeletonText.js

@@ -1,50 +1,24 @@
-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 * as React from 'react';
 import styled from '@emotion/styled';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
-var TextContainer = styled('div')({
+const TextContainer = styled('div')({
     marginBottom: space.m,
 });
-var Line = styled('div')(function (_a) {
-    var backgroundColor = _a.backgroundColor, width = _a.width;
+const Line = styled('div')(({ backgroundColor, width }) => {
     return {
-        backgroundColor: backgroundColor,
-        width: width,
+        backgroundColor,
+        width,
         borderRadius: borderRadius.s,
         height: '21px',
         marginBottom: space.xs,
     };
 });
-var createTextLines = function (lineCount, backgroundColor) {
-    var lines = new Array(lineCount).fill(null);
-    return lines.map(function (_value, index) { return (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })); });
+const createTextLines = (lineCount, backgroundColor) => {
+    const lines = new Array(lineCount).fill(null);
+    return lines.map((_value, index) => (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })));
 };
-export var SkeletonText = createComponent('div')({
+export const SkeletonText = createComponent('div')({
     displayName: 'Skeleton.Text',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? colors.soap200 : _b, _c = _a.lineCount, lineCount = _c === void 0 ? 2 : _c, elemProps = __rest(_a, ["backgroundColor", "lineCount"]);
-        return lineCount <= 0 ? null : (React.createElement(TextContainer, __assign({ ref: ref, as: Element }, elemProps), createTextLines(lineCount, backgroundColor)));
-    },
+    Component: ({ backgroundColor = colors.soap200, lineCount = 2, ...elemProps }, ref, Element) => lineCount <= 0 ? null : (React.createElement(TextContainer, Object.assign({ ref: ref, as: Element }, elemProps), createTextLines(lineCount, backgroundColor))),
 });

package/dist/es6/skeleton/lib/skeleton.js

@@ -1,25 +1,3 @@
-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 * as React from 'react';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -27,14 +5,14 @@ import { accessibleHide, createComponent } from '@workday/canvas-kit-react/commo
 import { SkeletonHeader } from './parts/skeletonHeader';
 import { SkeletonShape } from './parts/skeletonShape';
 import { SkeletonText } from './parts/skeletonText';
-var AccessibleHide = styled('div')(accessibleHide);
-var fade = keyframes({
+const AccessibleHide = styled('div')(accessibleHide);
+const fade = keyframes({
     from: { opacity: 0.4 },
     to: { opacity: 1 },
 });
-var animation = fade + " 0.8s linear infinite alternate";
-var SkeletonAnimator = styled('div')({
-    animation: animation,
+const animation = `${fade} 0.8s linear infinite alternate`;
+const SkeletonAnimator = styled('div')({
+    animation,
     overflow: 'hidden',
     width: '100%',
     height: '100%',
@@ -53,14 +31,11 @@ var SkeletonAnimator = styled('div')({
  * `Skeleton` places its children in a container element with `aria-hidden` set to `true` and
  * announces itself using a visually hidden element.
  */
-export var Skeleton = createComponent('div')({
+export const Skeleton = createComponent('div')({
     displayName: 'Skeleton',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a["aria-label"], loadingAriaLabel = _b === void 0 ? 'Loading' : _b, elemProps = __rest(_a, ["children", 'aria-label']);
-        return (React.createElement(SkeletonAnimator, __assign({ ref: ref, as: Element }, elemProps),
-            React.createElement(AccessibleHide, null, loadingAriaLabel),
-            React.createElement("div", { "aria-hidden": true }, children)));
-    },
+    Component: ({ children, 'aria-label': loadingAriaLabel = 'Loading', ...elemProps }, ref, Element) => (React.createElement(SkeletonAnimator, Object.assign({ ref: ref, as: Element }, elemProps),
+        React.createElement(AccessibleHide, null, loadingAriaLabel),
+        React.createElement("div", { "aria-hidden": true }, children))),
     subComponents: {
         /**
          * `Skeleton.Header` renders a placeholder for header content such as headings.

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

@@ -1,40 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 * as React from 'react';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { borderRadius, colors, type, space } from '@workday/canvas-kit-react/tokens';
@@ -53,9 +16,18 @@ export var StatusIndicatorEmphasis;
     StatusIndicatorEmphasis["High"] = "high";
     StatusIndicatorEmphasis["Low"] = "low";
 })(StatusIndicatorEmphasis || (StatusIndicatorEmphasis = {}));
-export var statusIndicatorStyles = {
+export const statusIndicatorStyles = {
     classname: 'status-indicator',
-    styles: __assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', height: space.s, padding: "1px " + space.xxxs, borderRadius: borderRadius.s, boxSizing: 'border-box' }),
+    styles: {
+        ...type.levels.subtext.medium,
+        display: 'inline-flex',
+        alignItems: 'center',
+        verticalAlign: 'middle',
+        height: space.s,
+        padding: `1px ${space.xxxs}`,
+        borderRadius: borderRadius.s,
+        boxSizing: 'border-box',
+    },
     variants: {
         gray: {
             high: {
@@ -120,11 +92,11 @@ export var statusIndicatorStyles = {
         },
     },
 };
-var Container = styled('span')(statusIndicatorStyles.styles, function (_a) {
-    var type = _a.type, emphasis = _a.emphasis, maxWidth = _a.maxWidth;
-    return (__assign(__assign({}, statusIndicatorStyles.variants[type][emphasis]), { maxWidth: maxWidth }));
-});
-var StatusLabel = styled('span')({
+const Container = styled('span')(statusIndicatorStyles.styles, ({ type, emphasis, maxWidth }) => ({
+    ...statusIndicatorStyles.variants[type][emphasis],
+    maxWidth: maxWidth,
+}));
+const StatusLabel = styled('span')({
     fontWeight: 'bold',
     WebkitFontSmoothing: 'antialiased',
     textTransform: 'uppercase',
@@ -132,20 +104,14 @@ var StatusLabel = styled('span')({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
 });
-var StatusIndicator = /** @class */ (function (_super) {
-    __extends(StatusIndicator, _super);
-    function StatusIndicator() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    StatusIndicator.prototype.render = function () {
-        var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 200 : _c, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "maxWidth", "type", "icon", "label"]);
-        var variant = statusIndicatorStyles.variants[type][emphasis];
-        return (React.createElement(Container, __assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
+export class StatusIndicator extends React.Component {
+    render() {
+        const { emphasis = StatusIndicatorEmphasis.High, maxWidth = 200, type, icon, label, ...elemProps } = this.props;
+        const variant = statusIndicatorStyles.variants[type][emphasis];
+        return (React.createElement(Container, Object.assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
             icon && (React.createElement(SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: space.xxxs } })),
             React.createElement(StatusLabel, null, label)));
-    };
-    StatusIndicator.Type = StatusIndicatorType;
-    StatusIndicator.Emphasis = StatusIndicatorEmphasis;
-    return StatusIndicator;
-}(React.Component));
-export { StatusIndicator };
+    }
+}
+StatusIndicator.Type = StatusIndicatorType;
+StatusIndicator.Emphasis = StatusIndicatorEmphasis;

package/dist/es6/switch/lib/Switch.js

@@ -1,39 +1,17 @@
-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 * as React from 'react';
 import { createComponent, ErrorType, focusRing, mouseFocusBehavior, getErrorColors, styled, useUniqueId, } from '@workday/canvas-kit-react/common';
 import { borderRadius, colors, depth, space } from '@workday/canvas-kit-react/tokens';
-var circleSize = space.xs;
-var switchWidth = space.l;
-var switchHeight = space.s;
-var switchTapArea = space.l;
-var translateLength = space.s;
-var SwitchContainer = styled('div')({
+const circleSize = space.xs;
+const switchWidth = space.l;
+const switchHeight = space.s;
+const switchTapArea = space.l;
+const translateLength = space.s;
+const SwitchContainer = styled('div')({
     position: 'relative',
     height: space.m,
     width: switchTapArea,
 });
-var SwitchInput = styled('input')({
+const SwitchInput = styled('input')({
     position: 'absolute',
     height: space.m,
     width: switchTapArea,
@@ -42,32 +20,45 @@ var SwitchInput = styled('input')({
     borderRadius: borderRadius.circle,
     opacity: 0,
     display: 'block',
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        cursor: disabled ? 'not-allowed' : 'pointer',
-    });
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    var errorColors = getErrorColors(error, theme);
+}, ({ disabled }) => ({
+    cursor: disabled ? 'not-allowed' : 'pointer',
+}), ({ error, theme }) => {
+    const errorColors = getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
-    var styles = {
+    const styles = {
         '&:focus': {
             outline: 'none',
-            '& ~ div:first-of-type': __assign({}, focusRing({ separation: 2, animate: false }, theme)),
+            '& ~ div:first-of-type': {
+                ...focusRing({ separation: 2, animate: false }, theme),
+            },
         },
         '& ~ div:first-of-type': {
-            boxShadow: "\n          0 0 0 2px " + colors.frenchVanilla100 + ",\n          0 0 0 4px " + errorColors.inner + ",\n          0 0 0 5px " + errorColors.outer,
+            boxShadow: `
+          0 0 0 2px ${colors.frenchVanilla100},
+          0 0 0 4px ${errorColors.inner},
+          0 0 0 5px ${errorColors.outer}`,
+        },
+        '&:focus ~ div:first-of-type': {
+            ...focusRing({ separation: 2, animate: false }, theme),
         },
-        '&:focus ~ div:first-of-type': __assign({}, focusRing({ separation: 2, animate: false }, theme)),
     };
-    return __assign(__assign({}, styles), mouseFocusBehavior(__assign(__assign({}, styles), { '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
-            boxShadow: "\n            0 0 0 2px " + colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
-        } })));
+    return {
+        ...styles,
+        // Error rings take precedence over focus
+        ...mouseFocusBehavior({
+            ...styles,
+            '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
+                boxShadow: `
+            0 0 0 2px ${colors.frenchVanilla100},
+            0 0 0 4px ${errorColors.inner},
+            0 0 0 5px ${errorColors.outer}`,
+            },
+        }),
+    };
 });
-var SwitchBackground = styled('div')({
+const SwitchBackground = styled('div')({
     boxSizing: 'border-box',
     position: 'absolute',
     display: 'flex',
@@ -79,8 +70,7 @@ var SwitchBackground = styled('div')({
     borderRadius: borderRadius.circle,
     padding: '0px 2px',
     transition: 'background-color 200ms ease',
-}, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, themePrimary = _a.theme.canvas.palette.primary;
+}, ({ checked, disabled, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => {
     if (checked) {
         return {
             backgroundColor: disabled ? themePrimary.light : themePrimary.main,
@@ -92,28 +82,28 @@ var SwitchBackground = styled('div')({
         };
     }
 });
-var SwitchCircle = styled('div')(__assign(__assign({ width: circleSize, height: circleSize, borderRadius: borderRadius.circle }, depth[1]), { transition: 'transform 150ms ease', pointerEvents: 'none' }), function (_a) {
-    var theme = _a.theme;
-    return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
-    });
-}, function (_a) {
-    var checked = _a.checked;
-    return ({
-        transform: checked ? "translateX(" + translateLength + ")" : 'translateX(0)',
-    });
-});
-export var Switch = createComponent('input')({
+const SwitchCircle = styled('div')({
+    width: circleSize,
+    height: circleSize,
+    borderRadius: borderRadius.circle,
+    ...depth[1],
+    transition: 'transform 150ms ease',
+    pointerEvents: 'none',
+}, ({ theme }) => ({
+    backgroundColor: theme.canvas.palette.primary.contrast,
+}), ({ checked }) => ({
+    transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
+}));
+export const Switch = createComponent('input')({
     displayName: 'Switch',
-    Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, elemProps = __rest(_a, ["checked", "id", "disabled", "onChange", "value"]);
-        var inputId = useUniqueId(id);
+    Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
+        const inputId = useUniqueId(id);
         return (React.createElement(SwitchContainer, null,
-            React.createElement(SwitchInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "checkbox", tabIndex: 0, type: "checkbox", value: value }, elemProps)),
+            React.createElement(SwitchInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "checkbox", tabIndex: 0, type: "checkbox", value: value }, elemProps)),
             React.createElement(SwitchBackground, { checked: checked, disabled: disabled },
                 React.createElement(SwitchCircle, { checked: checked }))));
     },
     subComponents: {
-        ErrorType: ErrorType,
+        ErrorType,
     },
 });

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

@@ -1,47 +1,10 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 * as React from 'react';
 import styled from '@emotion/styled';
 import { colors, type } from '@workday/canvas-kit-react/tokens';
-export var borderWidth = 1;
-export var borderColor = colors.soap400;
-export var cellBorder = borderWidth + "px solid " + borderColor;
-var TableComponent = styled('table')(type.levels.subtext.large, {
+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,
@@ -50,15 +13,9 @@ var TableComponent = styled('table')(type.levels.subtext.large, {
         borderSpacing: 0,
     },
 });
-var Table = /** @class */ (function (_super) {
-    __extends(Table, _super);
-    function Table() {
-        return _super !== null && _super.apply(this, arguments) || this;
+export class Table extends React.Component {
+    render() {
+        const { children, ...elemProps } = this.props;
+        return React.createElement(TableComponent, Object.assign({}, elemProps), children);
     }
-    Table.prototype.render = function () {
-        var _a = this.props, children = _a.children, elemProps = __rest(_a, ["children"]);
-        return React.createElement(TableComponent, __assign({}, elemProps), children);
-    };
-    return Table;
-}(React.Component));
-export { Table };
+}