@workday/canvas-kit-react 10.0.0-alpha.522-next.0 → 10.0.0-alpha.525-next.0

package/avatar/lib/Avatar.tsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {Property} from 'csstype';
 import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
@@ -35,6 +36,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
    * Will render an `div` tag instead of a `button` when defined.
    */
   as?: 'div';
+  /**
+   * The object-fit CSS property sets how the content of a replaced element,
+   * such as an <img> or <video>, should be resized to fit its container.
+   * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+   * If your image is not a square, you can use this property to ensure the image is rendered properly.
+   */
+  objectFit?: Property.ObjectFit;
 }
 
 /**
@@ -107,15 +115,16 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
   })
 );
 
-const StyledImage = styled('img')<{isLoaded: boolean}>(
+const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
   {
     width: '100%',
     height: '100%',
     borderRadius: borderRadius.circle,
     transition: fadeTransition,
   },
-  ({isLoaded}) => ({
+  ({isLoaded, objectFit}) => ({
     opacity: isLoaded ? 1 : 0,
+    objectFit,
   })
 );
 
@@ -127,6 +136,7 @@ export const Avatar: AvatarOverload = React.forwardRef(
       altText = 'Avatar',
       url,
       onClick,
+      objectFit,
       ...elemProps
     }: AvatarProps,
     ref: React.Ref<HTMLButtonElement>
@@ -164,7 +174,13 @@ export const Avatar: AvatarOverload = React.forwardRef(
         </StyledStack>
         {url && (
           <StyledStack size={size}>
-            <StyledImage src={url} alt={altText} onLoad={loadImage} isLoaded={imageLoaded} />
+            <StyledImage
+              src={url}
+              alt={altText}
+              onLoad={loadImage}
+              isLoaded={imageLoaded}
+              objectFit={objectFit}
+            />
           </StyledStack>
         )}
       </StyledContainer>

package/dist/commonjs/avatar/lib/Avatar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Property } from 'csstype';
 import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
 export declare enum AvatarVariant {
     Light = 0,
@@ -29,6 +30,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * Will render an `div` tag instead of a `button` when defined.
      */
     as?: 'div';
+    /**
+     * The object-fit CSS property sets how the content of a replaced element,
+     * such as an <img> or <video>, should be resized to fit its container.
+     * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+     * If your image is not a square, you can use this property to ensure the image is rendered properly.
+     */
+    objectFit?: Property.ObjectFit;
 }
 /**
  * Used to get the props of the div version of an avatar

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,eAAO,MAAM,MAAM,EAAE,cAmDb,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAqEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}

package/dist/commonjs/avatar/lib/Avatar.js

@@ -79,10 +79,11 @@ const StyledImage = common_1.styled('img')({
     height: '100%',
     borderRadius: tokens_1.borderRadius.circle,
     transition: fadeTransition,
-}, ({ isLoaded }) => ({
+}, ({ isLoaded, objectFit }) => ({
     opacity: isLoaded ? 1 : 0,
+    objectFit,
 }));
-exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, size = icon_1.SystemIconCircleSize.m, altText = 'Avatar', url, onClick, ...elemProps }, ref) => {
+exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, size = icon_1.SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
     const [imageLoaded, setImageLoaded] = react_1.useState(false);
     const loadImage = () => {
         if (!imageLoaded) {
@@ -97,7 +98,7 @@ exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, si
         react_1.default.createElement(StyledStack, { size: size },
             react_1.default.createElement(StyledIcon, { icon: canvas_system_icons_web_1.userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
         url && (react_1.default.createElement(StyledStack, { size: size },
-            react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded })))));
+            react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit })))));
 }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
 exports.Avatar.Variant = AvatarVariant;
 exports.Avatar.Size = icon_1.SystemIconCircleSize;

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

@@ -2,6 +2,10 @@ import * as React from 'react';
 export declare const borderWidth = 1;
 export declare const borderColor: string;
 export declare const cellBorder: string;
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export declare class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
     render(): JSX.Element;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,WAAW,QAAiB,CAAC;AAC1C,eAAO,MAAM,UAAU,QAA0C,CAAC;AAYlE,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9E,MAAM;CAKd"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,WAAW,QAAiB,CAAC;AAC1C,eAAO,MAAM,UAAU,QAA0C,CAAC;AAYlE;;;GAGG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9E,MAAM;CAKd"}

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

@@ -38,6 +38,10 @@ const TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.la
         borderSpacing: 0,
     },
 });
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 class Table extends React.Component {
     render() {
         const { children, ...elemProps } = this.props;

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

@@ -1,5 +1,9 @@
 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 consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export declare enum TableRowState {
     Error = 0,
     Alert = 1,
@@ -8,6 +12,10 @@ export declare enum TableRowState {
     Hover = 4,
     Selected = 5
 }
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * The state of the TableRow. Accepts `Error`, `Alert`, `InputError`, `InputAlert`, `Hover`, or `Selected`.
@@ -19,6 +27,10 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
      */
     header?: boolean;
 }
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export declare const TableRow: import("@workday/canvas-kit-react/common").ElementComponent<"tr", TableRowProps & StyledType> & {
     State: typeof TableRowState;
 };

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;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"}
+{"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;;;GAGG;AACH,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,KAAK,IAAA;IACL,UAAU,IAAA;IACV,UAAU,IAAA;IACV,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED;;;GAGG;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;;;GAGG;AACH,eAAO,MAAM,QAAQ;;CAgBnB,CAAC"}

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

@@ -29,6 +29,10 @@ const polished_1 = require("polished");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const Table_1 = require("./Table");
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 var TableRowState;
 (function (TableRowState) {
     TableRowState[TableRowState["Error"] = 0] = "Error";
@@ -189,6 +193,10 @@ const StyledTableRow = styled_1.default('tr')({
             };
     }
 });
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 exports.TableRow = common_1.createComponent('tr')({
     displayName: 'TableRow',
     Component: ({ state, header, children, ...elemProps }, ref, Element) => {

package/dist/es6/avatar/lib/Avatar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Property } from 'csstype';
 import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
 export declare enum AvatarVariant {
     Light = 0,
@@ -29,6 +30,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * Will render an `div` tag instead of a `button` when defined.
      */
     as?: 'div';
+    /**
+     * The object-fit CSS property sets how the content of a replaced element,
+     * such as an <img> or <video>, should be resized to fit its container.
+     * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+     * If your image is not a square, you can use this property to ensure the image is rendered properly.
+     */
+    objectFit?: Property.ObjectFit;
 }
 /**
  * Used to get the props of the div version of an avatar

package/dist/es6/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,eAAO,MAAM,MAAM,EAAE,cAmDb,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAqEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}

package/dist/es6/avatar/lib/Avatar.js

@@ -54,10 +54,11 @@ const StyledImage = styled('img')({
     height: '100%',
     borderRadius: borderRadius.circle,
     transition: fadeTransition,
-}, ({ isLoaded }) => ({
+}, ({ isLoaded, objectFit }) => ({
     opacity: isLoaded ? 1 : 0,
+    objectFit,
 }));
-export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, ...elemProps }, ref) => {
+export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
     const [imageLoaded, setImageLoaded] = useState(false);
     const loadImage = () => {
         if (!imageLoaded) {
@@ -72,7 +73,7 @@ export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size =
         React.createElement(StyledStack, { size: size },
             React.createElement(StyledIcon, { icon: userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
         url && (React.createElement(StyledStack, { size: size },
-            React.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded })))));
+            React.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit })))));
 }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
 Avatar.Variant = AvatarVariant;
 Avatar.Size = SystemIconCircleSize;

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

@@ -2,6 +2,10 @@ import * as React from 'react';
 export declare const borderWidth = 1;
 export declare const borderColor: string;
 export declare const cellBorder: string;
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export declare class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
     render(): JSX.Element;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,WAAW,QAAiB,CAAC;AAC1C,eAAO,MAAM,UAAU,QAA0C,CAAC;AAYlE,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9E,MAAM;CAKd"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,WAAW,QAAiB,CAAC;AAC1C,eAAO,MAAM,UAAU,QAA0C,CAAC;AAYlE;;;GAGG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9E,MAAM;CAKd"}

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

@@ -13,6 +13,10 @@ const TableComponent = styled('table')(type.levels.subtext.large, {
         borderSpacing: 0,
     },
 });
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export class Table extends React.Component {
     render() {
         const { children, ...elemProps } = this.props;

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

@@ -1,5 +1,9 @@
 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 consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export declare enum TableRowState {
     Error = 0,
     Alert = 1,
@@ -8,6 +12,10 @@ export declare enum TableRowState {
     Hover = 4,
     Selected = 5
 }
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * The state of the TableRow. Accepts `Error`, `Alert`, `InputError`, `InputAlert`, `Hover`, or `Selected`.
@@ -19,6 +27,10 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
      */
     header?: boolean;
 }
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export declare const TableRow: import("@workday/canvas-kit-react/common").ElementComponent<"tr", TableRowProps & StyledType> & {
     State: typeof TableRowState;
 };

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,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;;;GAGG;AACH,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,KAAK,IAAA;IACL,UAAU,IAAA;IACV,UAAU,IAAA;IACV,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED;;;GAGG;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;;;GAGG;AACH,eAAO,MAAM,QAAQ;;CAgBnB,CAAC"}

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

@@ -4,6 +4,10 @@ import { rgba } from 'polished';
 import { colors, space, spaceNumbers, statusColors } from '@workday/canvas-kit-react/tokens';
 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 consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export var TableRowState;
 (function (TableRowState) {
     TableRowState[TableRowState["Error"] = 0] = "Error";
@@ -164,6 +168,10 @@ const StyledTableRow = styled('tr')({
             };
     }
 });
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export const TableRow = createComponent('tr')({
     displayName: 'TableRow',
     Component: ({ state, header, children, ...elemProps }, ref, Element) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.0.0-alpha.522-next.0",
+  "version": "10.0.0-alpha.525-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.522-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.525-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "9c5d040b01d2f7fd689d34069b45572221b9781b"
+  "gitHead": "a7a213818a44c659130da784eef3915d8f0f15c5"
 }

package/table/lib/Table.tsx

@@ -16,6 +16,10 @@ const TableComponent = styled('table')(type.levels.subtext.large, {
   },
 });
 
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
   public render() {
     const {children, ...elemProps} = this.props;

package/table/lib/TableRow.tsx

@@ -5,6 +5,10 @@ import {colors, space, spaceNumbers, statusColors} from '@workday/canvas-kit-rea
 import {createComponent, StyledType} 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 consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export enum TableRowState {
   Error,
   Alert,
@@ -14,6 +18,10 @@ export enum TableRowState {
   Selected,
 }
 
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
    * The state of the TableRow. Accepts `Error`, `Alert`, `InputError`, `InputAlert`, `Hover`, or `Selected`.
@@ -192,6 +200,10 @@ const StyledTableRow = styled('tr')<TableRowProps>(
   }
 );
 
+/**
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
+ * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ */
 export const TableRow = createComponent('tr')({
   displayName: 'TableRow',
   Component: (