@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.758-next.0

package/dist/commonjs/icon/lib/SystemIcon.d.ts

@@ -1,46 +1,73 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
-import { IconProps } from './Icon';
-import { SystemPropValues } from '@workday/canvas-kit-react/layout';
+import { SvgProps } from './Svg';
+/**
+ * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
+ */
 export interface SystemIconStyles {
     /**
      * The accent color of the SystemIcon. This overrides `color`.
      */
-    accent?: SystemPropValues['color'];
+    accent?: string;
     /**
      * The accent color of the SystemIcon on hover. This overrides `colorHover`.
+     * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
+     * }
+     * ```
      */
-    accentHover?: SystemPropValues['color'];
+    accentHover?: string;
     /**
      * The background color of the SystemIcon.
      * @default transparent
      */
-    background?: SystemPropValues['color'];
+    background?: string;
     /**
      * The background color of the SystemIcon on hover.
      * @default transparent
+     * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
+     * }
+     * ```
      */
-    backgroundHover?: SystemPropValues['color'];
+    backgroundHover?: string;
     /**
-     * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
-     * @default iconColors.standard
+     * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
+     * @default base.licorice200
      */
-    color?: SystemPropValues['color'];
+    color?: string;
     /**
-     * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
-     * @default iconColors.hover
+     * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
+     * @default base.licorice200
+     * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.color]: desiredColorHoverColor
+     * }
+     * ```
      */
-    colorHover?: SystemPropValues['color'];
+    colorHover?: string;
     /**
      * The fill color of the SystemIcon. This overrides `color`.
+     * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
      */
-    fill?: SystemPropValues['color'];
+    fill?: string;
     /**
      * The fill color of the SystemIcon on hover. This overrides `colorHover`.
+     * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+     * ```tsx
+     * '&:hover': {
+     *   [systemIconStencil.vars.fill]: desiredFillHoverColor
+     * }
+     * ```
      */
-    fillHover?: SystemPropValues['color'];
+    fillHover?: string;
 }
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'fill' | 'type'> {
+export interface SystemIconProps extends SystemIconStyles, Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */
@@ -48,8 +75,44 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
     /**
      * The size of the SystemIcon in `px`.
      */
-    size?: number | string | undefined;
+    size?: number | string;
 }
+/**
+ * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
+ * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
+ * - Style overrides using the `systemIconStencil`:
+ *   ```tsx
+ *   // styling container
+ *
+ *   ```
+ */
 export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;
+export declare const systemIconStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    /**
+     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+     * wish to change the accent layer independently, also set the `accentColor` variable
+     */
+    color: string;
+    accentColor: string;
+    backgroundColor: string;
+}, never>, {
+    /**
+     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+     * wish to change the accent layer independently, also set the `accentColor` variable
+     */
+    color: string;
+    accentColor: string;
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<{
+    shouldMirror: {
+        true: {
+            transform: "scaleX(-1)";
+        };
+    };
+}, {
+    size: string;
+}, never, never>, never>;
 export declare const SystemIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", SystemIconProps>;
 //# sourceMappingURL=SystemIcon.d.ts.map

package/dist/commonjs/icon/lib/SystemIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,sFA4CrB,CAAC"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;IAJH;;;;OAIG;;;;;;;;;;;;wBAmCL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA0CrB,CAAC"}

package/dist/commonjs/icon/lib/SystemIcon.js

@@ -19,12 +19,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SystemIcon = exports.systemIconStyles = void 0;
+exports.SystemIcon = exports.systemIconStencil = exports.systemIconStyles = void 0;
 const React = __importStar(require("react"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const design_assets_types_1 = require("@workday/design-assets-types");
-const Icon_1 = require("./Icon");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const Svg_1 = require("./Svg");
+/**
+ * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
+ * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
+ * - Style overrides using the `systemIconStencil`:
+ *   ```tsx
+ *   // styling container
+ *
+ *   ```
+ */
 const systemIconStyles = ({ accent, accentHover, background = 'transparent', backgroundHover = 'transparent', color = tokens_1.iconColors.standard, colorHover = tokens_1.iconColors.hover, fill, fillHover, }) => ({
     '& .wd-icon-fill': {
         fill: common_1.getColor(fill) || common_1.getColor(color),
@@ -46,19 +57,45 @@ const systemIconStyles = ({ accent, accentHover, background = 'transparent', bac
     },
 });
 exports.systemIconStyles = systemIconStyles;
+/**
+ * @deprecated These variables are being used for backward compatibility with existing hover props. Please use the following instead:
+ * ```tsx
+ * '&:hover': {
+ *   [systemIconStencil.vars.color]: desiredHoverColor
+ * }
+ * ```
+ */
+const deprecatedSystemIconVars = canvas_kit_styling_1.createVars({ id: "cnvs-deprecated-system-icon", args: ["colorHover", "fillHover", "accentHover", "backgroundHover"] });
+exports.systemIconStencil = canvas_kit_styling_1.createStencil({
+    extends: Svg_1.svgStencil,
+    vars: {
+        /**
+         * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+         * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+         * wish to change the accent layer independently, also set the `accentColor` variable
+         */
+        color: '',
+        accentColor: '',
+        backgroundColor: 'transparent',
+    },
+    base: { name: "67a1c3", styles: "--cnvs-system-icon-backgroundColor:transparent;& .wd-icon-fill{fill:var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--cnvs-system-icon-accentColor, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)));}& .wd-icon-background{fill:var(--cnvs-system-icon-backgroundColor);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--cnvs-deprecated-system-icon-fillHover, var(--cnvs-deprecated-system-icon-colorHover, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--cnvs-deprecated-system-icon-accentHover, var(--cnvs-deprecated-system-icon-colorHover, var(--cnvs-system-icon-accentColor, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--cnvs-deprecated-system-icon-backgroundHover, var(--cnvs-system-icon-backgroundColor));}" }
+}, "cnvs-system-icon");
 exports.SystemIcon = common_1.createComponent('span')({
     displayName: 'SystemIcon',
-    Component: ({ background = 'transparent', backgroundHover = 'transparent', color = tokens_1.iconColors.standard, colorHover = tokens_1.iconColors.hover, icon, accent, accentHover, fill, fillHover, size, shouldMirror, ...elemProps }, ref, Element) => {
-        const style = exports.systemIconStyles({
-            accent,
-            accentHover,
-            background,
-            backgroundHover,
-            color,
-            colorHover,
-            fill,
-            fillHover,
-        });
-        return (React.createElement(Icon_1.Icon, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.System, size: size, as: Element, shouldMirror: shouldMirror, ref: ref, styles: style }, elemProps)));
+    Component: ({ size, background, backgroundHover, color, colorHover, icon, accent, accentHover, fill, fillHover, ...elemProps }, ref, Element) => {
+        return (React.createElement(Svg_1.Svg, Object.assign({ as: Element, src: icon, type: design_assets_types_1.CanvasIconTypes.System, ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [
+            exports.systemIconStencil({
+                size: typeof size === 'number' ? canvas_kit_styling_1.px2rem(size) : size,
+                color: Svg_1.transformColorNameToToken(fill || color),
+                accentColor: Svg_1.transformColorNameToToken(accent || color),
+                backgroundColor: Svg_1.transformColorNameToToken(background),
+            }),
+            {
+                [deprecatedSystemIconVars.colorHover]: colorHover && canvas_kit_styling_1.cssVar(colorHover),
+                [deprecatedSystemIconVars.fillHover]: fillHover && canvas_kit_styling_1.cssVar(fillHover),
+                [deprecatedSystemIconVars.accentHover]: accentHover && canvas_kit_styling_1.cssVar(accentHover),
+                [deprecatedSystemIconVars.backgroundHover]: backgroundHover && canvas_kit_styling_1.cssVar(backgroundHover),
+            },
+        ]))));
     },
 });

package/dist/commonjs/icon/lib/SystemIconCircle.d.ts

@@ -1,6 +1,5 @@
 import { SystemIconProps } from './SystemIcon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { SystemPropValues } from '@workday/canvas-kit-react/layout';
 export declare enum SystemIconCircleSize {
     xs = 16,
     s = 24,
@@ -12,9 +11,9 @@ export declare enum SystemIconCircleSize {
 export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
     /**
      * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
-     * @default colors.soap300
+     * @default base.soap300
      */
-    background?: SystemPropValues['color'];
+    background?: string;
     /**
      * The icon to display from `@workday/canvas-accent-icons-web`.
      */

package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FA8B3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAoB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA6BD,eAAO,MAAM,gBAAgB,4FAwB3B,CAAC"}

package/dist/commonjs/icon/lib/SystemIconCircle.js

@@ -18,17 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemIconCircle = exports.SystemIconCircleSize = void 0;
 const React = __importStar(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const SystemIcon_1 = require("./SystemIcon");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const Svg_1 = require("./Svg");
 var SystemIconCircleSize;
 (function (SystemIconCircleSize) {
     SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
@@ -38,33 +36,25 @@ var SystemIconCircleSize;
     SystemIconCircleSize[SystemIconCircleSize["xl"] = 64] = "xl";
     SystemIconCircleSize[SystemIconCircleSize["xxl"] = 120] = "xxl";
 })(SystemIconCircleSize = exports.SystemIconCircleSize || (exports.SystemIconCircleSize = {}));
-const Container = styled_1.default('div', {
-    shouldForwardProp: prop => is_prop_valid_1.default(prop) && prop !== 'size',
-})({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    borderRadius: tokens_1.borderRadius.circle,
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    '& img': {
-        width: '100%',
-        height: '100%',
+const systemIconCircleStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        containerSize: '',
+        backgroundColor: '',
+        iconColor: '',
     },
-}, ({ background }) => ({
-    background: common_1.getColor(background),
-}), ({ size }) => ({
-    width: size,
-    height: size,
-}));
+    base: { name: "8a694b", styles: "background:var(--cnvs-system-icon-circle-backgroundColor, var(--cnvs-base-palette-soap-200));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;overflow:hidden;width:var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10));height:var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10));--cnvs-svg-size:calc(var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10)) * 0.625);--cnvs-system-icon-color:var(--cnvs-system-icon-circle-iconColor);& img{width:100%;height:100%;}" }
+}, "cnvs-system-icon-circle");
 exports.SystemIconCircle = common_1.createComponent('span')({
     displayName: 'SystemIconCircle',
-    Component: ({ background = tokens_1.colors.soap200, size = SystemIconCircleSize.l, icon, shouldMirror, ...elemProps }, ref, Element) => {
-        const iconColor = common_1.pickForegroundColor(background, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
-        const iconSize = size * 0.625;
-        return (React.createElement(Container, Object.assign({ background: background, size: size }, elemProps),
-            React.createElement(SystemIcon_1.SystemIcon, { icon: icon, color: iconColor, colorHover: iconColor, as: Element, size: iconSize, ref: ref, shouldMirror: shouldMirror })));
+    Component: ({ background, size, icon, shouldMirror }, ref, Element) => {
+        // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
+        const backgroundFallback = background && !background.startsWith('--') ? background : tokens_1.colors.soap200;
+        const iconColor = common_1.pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
+        return (React.createElement("div", Object.assign({}, systemIconCircleStencil({
+            containerSize: typeof size === 'number' ? canvas_kit_styling_1.px2rem(size) : size,
+            backgroundColor: Svg_1.transformColorNameToToken(background),
+            iconColor,
+        })),
+            React.createElement(SystemIcon_1.SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror })));
     },
 });

package/dist/commonjs/loading-dots/lib/LoadingDots.js

@@ -31,8 +31,8 @@ const ANIMATION_DURATION_MS = '1400';
 /**
  * Keyframe for the dots loading animation.
  */
-const keyframesLoading = canvas_kit_styling_1.keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
-const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "1f3yrdb", styles: "background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));width:var(--cnvs-sys-space-x4, calc(0.25rem * 4));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));font-size:var(--cnvs-sys-space-zero, 0);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));transform:scale(0);display:inline-block;animation-name:animation-zl77bl;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
+const keyframesLoading = canvas_kit_styling_1.keyframes({ name: "454a47", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
+const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "d1522e", styles: "background-color:var(--cnvs-base-palette-soap-400);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-454a47;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
 /**
  * The actual loading dot div.
  */
@@ -40,7 +40,7 @@ const LoadingAnimationDot = () => React.createElement("div", { className: `${loa
 /**
  * A simple container for the loading dots.
  */
-const containerStyles = canvas_kit_styling_1.createStyles({ name: "14lwp8w", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
+const containerStyles = canvas_kit_styling_1.createStyles({ name: "0e8878", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2);" });
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */

package/dist/commonjs/menu/lib/MenuCard.js

@@ -34,8 +34,8 @@ exports.menuCardStencil = canvas_kit_styling_1.createStencil({
         transformOriginVertical: 'top',
         transformOriginHorizontal: 'left',
     },
-    base: { name: "fk6heg", styles: "--cnvs-menu-card-minWidth:0.0625rem;--cnvs-menu-card-transformOriginVertical:top;--cnvs-menu-card-transformOriginHorizontal:left;font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero, 0);max-width:calc(100vw - var(--cnvs-sys-space-x8, calc(0.25rem * 8)));box-shadow:var(--cnvs-sys-depth-3, 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12),0 0.375rem 1.5rem 0 rgba(31,38,46,0.08));min-width:var(--cnvs-menu-card-minWidth);box-sizing:border-box;transform-origin:var(--cnvs-menu-card-transformOriginVertical) var(--cnvs-menu-card-transformOriginHorizontal);.wd-no-animation &{animation:none;}" }
-}, "menu-card");
+    base: { name: "a0bf52", styles: "--cnvs-menu-card-minWidth:0.0625rem;--cnvs-menu-card-transformOriginVertical:top;--cnvs-menu-card-transformOriginHorizontal:left;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-base-palette-black-pepper-300);position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero);max-width:calc(100vw - var(--cnvs-sys-space-x8));box-shadow:var(--cnvs-sys-depth-3);min-width:var(--cnvs-menu-card-minWidth);box-sizing:border-box;transform-origin:var(--cnvs-menu-card-transformOriginVertical) var(--cnvs-menu-card-transformOriginHorizontal);.wd-no-animation &{animation:none;}" }
+}, "cnvs-menu-card");
 exports.useMenuCard = common_1.createElemPropsHook(useMenuModel_1.useMenuModel)(() => {
     return {};
 });

package/dist/commonjs/menu/lib/MenuList.js

@@ -35,14 +35,14 @@ exports.useMenuList = common_1.composeHooks(common_1.createElemPropsHook(useMenu
     };
 }), popup_1.useReturnFocus, popup_1.useFocusRedirect);
 exports.menuListStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1xutlrd", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-radius:var(--cnvs-sys-shape-zero, 0rem);padding:var(--cnvs-sys-space-zero, 0);gap:var(--cnvs-sys-space-zero, 0);" },
+    base: { name: "4a3778", styles: "background:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-zero);padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-zero);" },
     modifiers: {
-        modifiers: {
-            vertical: { name: "cgq59l", styles: "flex-direction:column;" },
-            horizontal: { name: "1l0z8uk", styles: "flex-direction:row;" }
+        orientation: {
+            vertical: { name: "db5d98", styles: "flex-direction:column;" },
+            horizontal: { name: "3f3c28", styles: "flex-direction:row;" }
         }
     }
-}, "menu-list");
+}, "cnvs-menu-list");
 exports.MenuList = common_1.createSubcomponent('div')({
     displayName: 'Menu.List',
     modelHook: useMenuModel_1.useMenuModel,

package/dist/commonjs/select/lib/Select.js

@@ -17,14 +17,14 @@ const useSelectModel_1 = require("./hooks/useSelectModel");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const selectInputStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
-}, "select-input");
+    base: { name: "a28279", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
+}, "cnvs-select-input");
 const selectIconsStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1isip6o", styles: "position:absolute;pointer-events:none;" }
-}, "select-icons");
+    base: { name: "482a82", styles: "position:absolute;pointer-events:none;" }
+}, "cnvs-select-icons");
 const hiddenSelectInputStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1xuodxn", styles: "position:absolute;top:var(--cnvs-sys-space-zero, 0);bottom:var(--cnvs-sys-space-zero, 0);left:var(--cnvs-sys-space-zero, 0);right:var(--cnvs-sys-space-zero, 0);opacity:0;cursor:default;pointer-events:none;" }
-}, "hidden-select-input");
+    base: { name: "926b2b", styles: "position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:0;cursor:default;pointer-events:none;" }
+}, "cnvs-hidden-select-input");
 exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectInput_1.useSelectInput,
@@ -45,7 +45,7 @@ exports.SelectItem = common_1.createSubcomponent('li')({
 })(({ children, ...elemProps }, Element, _model) => {
     return (react_1.default.createElement(combobox_1.Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
 });
-const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "1621qa2", styles: "max-height:18.75rem;" });
+const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "a8270c", styles: "max-height:18.75rem;" });
 exports.SelectCard = common_1.createSubcomponent('div')({
     modelHook: useSelectModel_1.useSelectModel,
     elemPropsHook: useSelectCard_1.useSelectCard,

package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+declare function noop(): void;
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
@@ -85,9 +86,10 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     readonly onFocus: () => void;
     readonly textInputProps: {
         readonly ref: React.RefObject<HTMLInputElement>;
+        readonly onChange: typeof noop;
+        readonly value: string;
     };
     readonly ref: (instance: HTMLInputElement | null) => void;
-    readonly defaultValue: string | undefined;
 } & {
     onKeyDown(event: React.KeyboardEvent<Element>): void;
     keySofar: string;
@@ -115,4 +117,5 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     ref: (instance: unknown) => void;
     onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
 }>;
+export {};
 //# sourceMappingURL=useSelectInput.d.ts.map

package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8EF,mBAAmB;+BAvEP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0HvE,CAAC"}
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4FF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsIvE,CAAC"}

package/dist/commonjs/select/lib/hooks/useSelectInput.js

@@ -8,6 +8,9 @@ const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const combobox_1 = require("@workday/canvas-kit-react/combobox");
 const useSelectModel_1 = require("./useSelectModel");
+function noop() {
+    // Do nothing
+}
 /**
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
@@ -41,6 +44,13 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
             model.state.items.length > 0 &&
             model.state.selectedIds[0]) {
             const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+            // force the hidden input to have the correct value
+            if (model.state.inputRef.current.value !== value) {
+                const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(model.state.inputRef.current), 'value');
+                if (nativeInputValue && nativeInputValue.set) {
+                    nativeInputValue.set.call(model.state.inputRef.current, value);
+                }
+            }
             if (model.state.selectedIds[0] !== value &&
                 model.state.inputRef.current.value !== value) {
                 // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
@@ -108,12 +118,11 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
         },
         textInputProps: {
             ref: textInputRef,
+            onChange: noop,
+            value: model.state.selectedIds.length > 0 && model.state.items.length > 0
+                ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
+                : '',
         },
         ref: elementRef,
-        // Account for the case where an initial item is selected when the Select first renders
-        defaultValue: model.state.selectedIds.length > 0 && model.state.items.length > 0
-            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
-                model.state.value
-            : undefined,
     };
 }), combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, combobox_1.useComboboxInput);

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

@@ -26,8 +26,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("../../layout");
 const switchContainerStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "hzoxkl", styles: "position:relative;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }
-}, "switch-container");
+    base: { name: "3c93da", styles: "position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
+}, "cnvs-switch-container");
 const SwitchContainer = common_1.createComponent('div')({
     displayName: 'SwitchContainer',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -35,14 +35,14 @@ const SwitchContainer = common_1.createComponent('div')({
     },
 });
 const switchInputStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "5rxser", styles: "display:flex;position:absolute;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));margin:var(--cnvs-sys-space-zero, 0);margin-left:var(--cnvs-sys-space-x1, 0.25rem);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled, &.disabled{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
+    base: { name: "509a50", styles: "display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-light);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-400);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
     modifiers: {
-        modifiers: {
-            error: { name: "1hlx7w2", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n              0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-error-base, rgba(222,46,33,1)),\n              0 0 0 0.3125rem transparent;}" },
-            alert: { name: "gisk2r", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n          0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-alert-base, rgba(255,161,38,1)),\n          0 0 0 0.3125rem var(--cnvs-brand-alert-darkest, rgba(192,108,0,1));}" }
+        error: {
+            error: { name: "518003", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),\n              0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n              0 0 0 0.3125rem transparent;}" },
+            alert: { name: "6a2682", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n          0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
         }
     }
-}, "switch-input");
+}, "cnvs-switch-input");
 const SwitchInput = common_1.createComponent('input')({
     displayName: 'SwitchInput',
     Component: ({ error, ...elemProps }, ref, Element) => {
@@ -50,8 +50,8 @@ const SwitchInput = common_1.createComponent('input')({
     },
 });
 const switchBackgroundStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "zbf8t", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1, 0.25rem);width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));padding:var(--cnvs-sys-space-zero, 0) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));" }
-}, "switch-background");
+    base: { name: "5d72ee", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-base-palette-licorice-200);" }
+}, "cnvs-switch-background");
 const SwitchBackground = common_1.createComponent('div')({
     displayName: 'SwitchBackground',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -59,13 +59,13 @@ const SwitchBackground = common_1.createComponent('div')({
     },
 });
 const switchCircleStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1ojn95k", styles: "width:var(--cnvs-sys-space-x3, calc(0.25rem * 3));height:var(--cnvs-sys-space-x3, calc(0.25rem * 3));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));transform:translateX(var(--cnvs-sys-space-zero, 0));" },
+    base: { name: "09e7dc", styles: "width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
     modifiers: {
-        modifiers: {
-            true: { name: "obbyya", styles: "transform:translateX(var(--cnvs-sys-space-x4, calc(0.25rem * 4)));" }
+        checked: {
+            true: { name: "202c6e", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
         }
     }
-}, "switch-circle");
+}, "cnvs-switch-circle");
 const SwitchCircle = common_1.createComponent('div')({
     displayName: 'SwitchCircle',
     Component: ({ checked, ...elemProps }, ref, Element) => {

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

@@ -17,8 +17,8 @@ const TableCaption_1 = require("./TableCaption");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const tableStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1jt00fi", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));overflow:auto;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));box-sizing:border-box;" }
-}, "table");
+    base: { name: "c93ea3", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-base-palette-black-pepper-300);box-sizing:border-box;" }
+}, "cnvs-table");
 /**
  * `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.
  *

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

@@ -9,8 +9,8 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const tableBodyStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1aq46he", styles: "display:grid;box-sizing:border-box;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
-}, "table-body");
+    base: { name: "afe05d", styles: "display:grid;box-sizing:border-box;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
+}, "cnvs-table-body");
 exports.TableBody = common_1.createComponent('tbody')({
     displayName: 'Table.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {

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

@@ -10,8 +10,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const tableCaptionStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "mnuok4", styles: "display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));box-sizing:border-box;" }
-}, "table-caption");
+    base: { name: "4d712b", styles: "display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);box-sizing:border-box;" }
+}, "cnvs-table-caption");
 exports.TableCaption = common_1.createComponent('caption')({
     displayName: 'Table.Caption',
     Component: ({ children, ...elemProps }, ref, Element) => {

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

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