@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/skeleton/lib/skeleton.js

@@ -1,15 +1,4 @@
 "use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,53 +18,65 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("@emotion/react");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var skeletonHeader_1 = require("./parts/skeletonHeader");
-var skeletonShape_1 = require("./parts/skeletonShape");
-var skeletonText_1 = require("./parts/skeletonText");
-var AccessibleHide = styled_1.default('div')(common_1.accessibleHide);
-var fade = react_1.keyframes({
+const React = __importStar(require("react"));
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const skeletonHeader_1 = require("./parts/skeletonHeader");
+const skeletonShape_1 = require("./parts/skeletonShape");
+const skeletonText_1 = require("./parts/skeletonText");
+const AccessibleHide = styled_1.default('div')(common_1.accessibleHide);
+const fade = react_1.keyframes({
     from: { opacity: 0.4 },
     to: { opacity: 1 },
 });
-var animation = fade + " 0.8s linear infinite alternate";
-var SkeletonAnimator = styled_1.default('div')({
-    animation: animation,
+const animation = `${fade} 0.8s linear infinite alternate`;
+const SkeletonAnimator = styled_1.default('div')({
+    animation,
     overflow: 'hidden',
     width: '100%',
     height: '100%',
     position: 'relative',
 });
+/**
+ * Skeleton subcomponents **must** be wrapped by the `Skeleton` container component.
+ *
+ * ```tsx
+ * <Skeleton>
+ *   <Skeleton.Header />
+ *   <Skeleton.Text />
+ * </Skeleton>
+ * ```
+ *
+ * `Skeleton` places its children in a container element with `aria-hidden` set to `true` and
+ * announces itself using a visually hidden element.
+ */
 exports.Skeleton = common_1.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.
+         */
         Header: skeletonHeader_1.SkeletonHeader,
-        Shape: skeletonShape_1.SkeletonShape,
+        /**
+         * `Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder
+         * line has a width of `100%` and a fixed height of `21px`, with the last line having a width of
+         * `60%` if there are multiple lines.
+         */
         Text: skeletonText_1.SkeletonText,
+        /**
+         * `Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small
+         * images. Set the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create
+         * various rectangular and circular shapes.
+         */
+        Shape: skeletonShape_1.SkeletonShape,
     },
 });

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

@@ -1,28 +1,4 @@
 "use strict";
-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) {
-        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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -42,26 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusIndicator = exports.statusIndicatorStyles = exports.StatusIndicatorEmphasis = exports.StatusIndicatorType = void 0;
-var React = __importStar(require("react"));
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var styled_1 = __importDefault(require("@emotion/styled"));
+const React = __importStar(require("react"));
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const styled_1 = __importDefault(require("@emotion/styled"));
 var StatusIndicatorType;
 (function (StatusIndicatorType) {
     StatusIndicatorType["Gray"] = "gray";
@@ -78,7 +43,16 @@ var StatusIndicatorEmphasis;
 })(StatusIndicatorEmphasis = exports.StatusIndicatorEmphasis || (exports.StatusIndicatorEmphasis = {}));
 exports.statusIndicatorStyles = {
     classname: 'status-indicator',
-    styles: __assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', height: tokens_1.space.s, padding: "1px " + tokens_1.space.xxxs, borderRadius: tokens_1.borderRadius.s, boxSizing: 'border-box' }),
+    styles: {
+        ...tokens_1.type.levels.subtext.medium,
+        display: 'inline-flex',
+        alignItems: 'center',
+        verticalAlign: 'middle',
+        height: tokens_1.space.s,
+        padding: `1px ${tokens_1.space.xxxs}`,
+        borderRadius: tokens_1.borderRadius.s,
+        boxSizing: 'border-box',
+    },
     variants: {
         gray: {
             high: {
@@ -143,11 +117,11 @@ exports.statusIndicatorStyles = {
         },
     },
 };
-var Container = styled_1.default('span')(exports.statusIndicatorStyles.styles, function (_a) {
-    var type = _a.type, emphasis = _a.emphasis, maxWidth = _a.maxWidth;
-    return (__assign(__assign({}, exports.statusIndicatorStyles.variants[type][emphasis]), { maxWidth: maxWidth }));
-});
-var StatusLabel = styled_1.default('span')({
+const Container = styled_1.default('span')(exports.statusIndicatorStyles.styles, ({ type, emphasis, maxWidth }) => ({
+    ...exports.statusIndicatorStyles.variants[type][emphasis],
+    maxWidth: maxWidth,
+}));
+const StatusLabel = styled_1.default('span')({
     fontWeight: 'bold',
     WebkitFontSmoothing: 'antialiased',
     textTransform: 'uppercase',
@@ -155,20 +129,15 @@ var StatusLabel = styled_1.default('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 = exports.statusIndicatorStyles.variants[type][emphasis];
-        return (React.createElement(Container, __assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
+class StatusIndicator extends React.Component {
+    render() {
+        const { emphasis = StatusIndicatorEmphasis.High, maxWidth = 200, type, icon, label, ...elemProps } = this.props;
+        const variant = exports.statusIndicatorStyles.variants[type][emphasis];
+        return (React.createElement(Container, Object.assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
             icon && (React.createElement(icon_1.SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: tokens_1.space.xxxs } })),
             React.createElement(StatusLabel, null, label)));
-    };
-    StatusIndicator.Type = StatusIndicatorType;
-    StatusIndicator.Emphasis = StatusIndicatorEmphasis;
-    return StatusIndicator;
-}(React.Component));
+    }
+}
 exports.StatusIndicator = StatusIndicator;
+StatusIndicator.Type = StatusIndicatorType;
+StatusIndicator.Emphasis = StatusIndicatorEmphasis;

package/dist/commonjs/switch/lib/Switch.d.ts

@@ -29,7 +29,7 @@ export interface SwitchProps extends Themeable {
      */
     error?: ErrorType;
 }
-export declare const Switch: import("../../common").ElementComponent<"input", SwitchProps> & {
+export declare const Switch: import("@workday/canvas-kit-react/common").ElementComponent<"input", SwitchProps> & {
     ErrorType: typeof ErrorType;
 };
 //# sourceMappingURL=Switch.d.ts.map

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

@@ -1,15 +1,4 @@
 "use strict";
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,33 +18,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var circleSize = tokens_1.space.xs;
-var switchWidth = tokens_1.space.l;
-var switchHeight = tokens_1.space.s;
-var switchTapArea = tokens_1.space.l;
-var translateLength = tokens_1.space.s;
-var SwitchContainer = common_1.styled('div')({
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const circleSize = tokens_1.space.xs;
+const switchWidth = tokens_1.space.l;
+const switchHeight = tokens_1.space.s;
+const switchTapArea = tokens_1.space.l;
+const translateLength = tokens_1.space.s;
+const SwitchContainer = common_1.styled('div')({
     position: 'relative',
     height: tokens_1.space.m,
     width: switchTapArea,
 });
-var SwitchInput = common_1.styled('input')({
+const SwitchInput = common_1.styled('input')({
     position: 'absolute',
     height: tokens_1.space.m,
     width: switchTapArea,
@@ -64,32 +42,45 @@ var SwitchInput = common_1.styled('input')({
     borderRadius: tokens_1.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 = common_1.getErrorColors(error, theme);
+}, ({ disabled }) => ({
+    cursor: disabled ? 'not-allowed' : 'pointer',
+}), ({ error, theme }) => {
+    const errorColors = common_1.getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
-    var styles = {
+    const styles = {
         '&:focus': {
             outline: 'none',
-            '& ~ div:first-of-type': __assign({}, common_1.focusRing({ separation: 2, animate: false }, theme)),
+            '& ~ div:first-of-type': {
+                ...common_1.focusRing({ separation: 2, animate: false }, theme),
+            },
         },
         '& ~ div:first-of-type': {
-            boxShadow: "\n          0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n          0 0 0 4px " + errorColors.inner + ",\n          0 0 0 5px " + errorColors.outer,
+            boxShadow: `
+          0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+          0 0 0 4px ${errorColors.inner},
+          0 0 0 5px ${errorColors.outer}`,
         },
-        '&:focus ~ div:first-of-type': __assign({}, common_1.focusRing({ separation: 2, animate: false }, theme)),
+        '&:focus ~ div:first-of-type': {
+            ...common_1.focusRing({ separation: 2, animate: false }, theme),
+        },
+    };
+    return {
+        ...styles,
+        // Error rings take precedence over focus
+        ...common_1.mouseFocusBehavior({
+            ...styles,
+            '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
+                boxShadow: `
+            0 0 0 2px ${tokens_1.colors.frenchVanilla100},
+            0 0 0 4px ${errorColors.inner},
+            0 0 0 5px ${errorColors.outer}`,
+            },
+        }),
     };
-    return __assign(__assign({}, styles), common_1.mouseFocusBehavior(__assign(__assign({}, styles), { '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
-            boxShadow: "\n            0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
-        } })));
 });
-var SwitchBackground = common_1.styled('div')({
+const SwitchBackground = common_1.styled('div')({
     boxSizing: 'border-box',
     position: 'absolute',
     display: 'flex',
@@ -101,8 +92,7 @@ var SwitchBackground = common_1.styled('div')({
     borderRadius: tokens_1.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,
@@ -114,24 +104,24 @@ var SwitchBackground = common_1.styled('div')({
         };
     }
 });
-var SwitchCircle = common_1.styled('div')(__assign(__assign({ width: circleSize, height: circleSize, borderRadius: tokens_1.borderRadius.circle }, tokens_1.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)',
-    });
-});
+const SwitchCircle = common_1.styled('div')({
+    width: circleSize,
+    height: circleSize,
+    borderRadius: tokens_1.borderRadius.circle,
+    ...tokens_1.depth[1],
+    transition: 'transform 150ms ease',
+    pointerEvents: 'none',
+}, ({ theme }) => ({
+    backgroundColor: theme.canvas.palette.primary.contrast,
+}), ({ checked }) => ({
+    transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
+}));
 exports.Switch = common_1.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 = common_1.useUniqueId(id);
+    Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
+        const inputId = common_1.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 }))));
     },

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

@@ -1,28 +1,4 @@
 "use strict";
-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) {
-        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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -42,29 +18,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = exports.cellBorder = exports.borderColor = exports.borderWidth = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 exports.borderWidth = 1;
 exports.borderColor = tokens_1.colors.soap400;
-exports.cellBorder = exports.borderWidth + "px solid " + exports.borderColor;
-var TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.large, {
+exports.cellBorder = `${exports.borderWidth}px solid ${exports.borderColor}`;
+const TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.large, {
     width: '100%',
     border: exports.cellBorder,
     borderSpacing: 0,
@@ -73,15 +38,10 @@ var TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.larg
         borderSpacing: 0,
     },
 });
-var Table = /** @class */ (function (_super) {
-    __extends(Table, _super);
-    function Table() {
-        return _super !== null && _super.apply(this, arguments) || this;
+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));
+}
 exports.Table = Table;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { StyledType } from '@workday/canvas-kit-react/common';
 export declare enum TableRowState {
     Error = 0,
     Alert = 1,
@@ -18,7 +19,7 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
      */
     header?: boolean;
 }
-export declare const TableRow: import("../../common").ElementComponent<"tr", TableRowProps> & {
+export declare const TableRow: import("@workday/canvas-kit-react/common").ElementComponent<"tr", TableRowProps & StyledType> & {
     State: typeof TableRowState;
 };
 //# sourceMappingURL=TableRow.d.ts.map

package/dist/commonjs/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;AAO/B,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,KAAK,IAAA;IACL,UAAU,IAAA;IACV,UAAU,IAAA;IACV,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED,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,eAAO,MAAM,QAAQ;;CAgBnB,CAAC"}
+{"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,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,KAAK,IAAA;IACL,UAAU,IAAA;IACV,UAAU,IAAA;IACV,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED,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,eAAO,MAAM,QAAQ;;CAgBnB,CAAC"}