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

package/dist/es6/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/es6/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/es6/icon/lib/SystemIcon.js

@@ -1,8 +1,19 @@
 import * as React from 'react';
 import { iconColors } from '@workday/canvas-kit-react/tokens';
 import { CanvasIconTypes } from '@workday/design-assets-types';
-import { Icon } from './Icon';
 import { createComponent, getColor } from '@workday/canvas-kit-react/common';
+import { cssVar, createStencil, handleCsProp, px2rem, createVars } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
+import { Svg, svgStencil, transformColorNameToToken } from './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
+ *
+ *   ```
+ */
 export const systemIconStyles = ({ accent, accentHover, background = 'transparent', backgroundHover = 'transparent', color = iconColors.standard, colorHover = iconColors.hover, fill, fillHover, }) => ({
     '& .wd-icon-fill': {
         fill: getColor(fill) || getColor(color),
@@ -23,19 +34,45 @@ export const systemIconStyles = ({ accent, accentHover, background = 'transparen
         fill: getColor(backgroundHover),
     },
 });
+/**
+ * @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 = createVars({ id: "cnvs-deprecated-system-icon", args: ["colorHover", "fillHover", "accentHover", "backgroundHover"] });
+export const systemIconStencil = createStencil({
+    extends: 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");
 export const SystemIcon = createComponent('span')({
     displayName: 'SystemIcon',
-    Component: ({ background = 'transparent', backgroundHover = 'transparent', color = iconColors.standard, colorHover = iconColors.hover, icon, accent, accentHover, fill, fillHover, size, shouldMirror, ...elemProps }, ref, Element) => {
-        const style = systemIconStyles({
-            accent,
-            accentHover,
-            background,
-            backgroundHover,
-            color,
-            colorHover,
-            fill,
-            fillHover,
-        });
-        return (React.createElement(Icon, Object.assign({ src: icon, type: 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, Object.assign({ as: Element, src: icon, type: CanvasIconTypes.System, ref: ref }, handleCsProp(elemProps, [
+            systemIconStencil({
+                size: typeof size === 'number' ? px2rem(size) : size,
+                color: transformColorNameToToken(fill || color),
+                accentColor: transformColorNameToToken(accent || color),
+                backgroundColor: transformColorNameToToken(background),
+            }),
+            {
+                [deprecatedSystemIconVars.colorHover]: colorHover && cssVar(colorHover),
+                [deprecatedSystemIconVars.fillHover]: fillHover && cssVar(fillHover),
+                [deprecatedSystemIconVars.accentHover]: accentHover && cssVar(accentHover),
+                [deprecatedSystemIconVars.backgroundHover]: backgroundHover && cssVar(backgroundHover),
+            },
+        ]))));
     },
 });

package/dist/es6/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/es6/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/es6/icon/lib/SystemIconCircle.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import { colors, borderRadius } from '@workday/canvas-kit-react/tokens';
-import { SystemIcon } from './SystemIcon';
-import { createComponent, getColor, pickForegroundColor } from '@workday/canvas-kit-react/common';
+import { colors } from '@workday/canvas-kit-react/tokens';
+import { SystemIcon, systemIconStencil } from './SystemIcon';
+import { createComponent, pickForegroundColor } from '@workday/canvas-kit-react/common';
+import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { transformColorNameToToken } from './Svg';
 export var SystemIconCircleSize;
 (function (SystemIconCircleSize) {
     SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
@@ -13,33 +14,25 @@ export var SystemIconCircleSize;
     SystemIconCircleSize[SystemIconCircleSize["xl"] = 64] = "xl";
     SystemIconCircleSize[SystemIconCircleSize["xxl"] = 120] = "xxl";
 })(SystemIconCircleSize || (SystemIconCircleSize = {}));
-const Container = styled('div', {
-    shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    borderRadius: borderRadius.circle,
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    '& img': {
-        width: '100%',
-        height: '100%',
+const systemIconCircleStencil = createStencil({
+    vars: {
+        containerSize: '',
+        backgroundColor: '',
+        iconColor: '',
     },
-}, ({ background }) => ({
-    background: 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");
 export const SystemIconCircle = createComponent('span')({
     displayName: 'SystemIconCircle',
-    Component: ({ background = colors.soap200, size = SystemIconCircleSize.l, icon, shouldMirror, ...elemProps }, ref, Element) => {
-        const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
-        const iconSize = size * 0.625;
-        return (React.createElement(Container, Object.assign({ background: background, size: size }, elemProps),
-            React.createElement(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 : colors.soap200;
+        const iconColor = pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
+        return (React.createElement("div", Object.assign({}, systemIconCircleStencil({
+            containerSize: typeof size === 'number' ? px2rem(size) : size,
+            backgroundColor: transformColorNameToToken(background),
+            iconColor,
+        })),
+            React.createElement(SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror })));
     },
 });

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

@@ -9,8 +9,8 @@ const ANIMATION_DURATION_MS = '1400';
 /**
  * Keyframe for the dots loading animation.
  */
-const keyframesLoading = keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
-const loadingDotStyles = 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 = keyframes({ name: "454a47", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
+const loadingDotStyles = 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.
  */
@@ -18,7 +18,7 @@ const LoadingAnimationDot = () => React.createElement("div", { className: `${loa
 /**
  * A simple container for the loading dots.
  */
-const containerStyles = createStyles({ name: "14lwp8w", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
+const containerStyles = 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/es6/menu/lib/MenuCard.js

@@ -12,8 +12,8 @@ export const menuCardStencil = 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");
 export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
     return {};
 });

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

@@ -13,14 +13,14 @@ export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model
     };
 }), useReturnFocus, useFocusRedirect);
 export const menuListStencil = 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");
 export const MenuList = createSubcomponent('div')({
     displayName: 'Menu.List',
     modelHook: useMenuModel,

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

@@ -11,14 +11,14 @@ import { useSelectModel } from './hooks/useSelectModel';
 import { createSubcomponent, createContainer, } from '@workday/canvas-kit-react/common';
 import { system } from '@workday/canvas-tokens-web';
 const selectInputStencil = 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 = 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 = 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");
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,
@@ -39,7 +39,7 @@ export const SelectItem = createSubcomponent('li')({
 })(({ children, ...elemProps }, Element, _model) => {
     return (React.createElement(Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
 });
-const selectCardStyles = createStyles({ name: "1621qa2", styles: "max-height:18.75rem;" });
+const selectCardStyles = createStyles({ name: "a8270c", styles: "max-height:18.75rem;" });
 export const SelectCard = createSubcomponent('div')({
     modelHook: useSelectModel,
     elemPropsHook: useSelectCard,

package/dist/es6/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/es6/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/es6/select/lib/hooks/useSelectInput.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { composeHooks, createElemPropsHook, useLocalRef, useResizeObserver, dispatchInputEvent, } from '@workday/canvas-kit-react/common';
 import { useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxMoveCursorToSelected, useComboboxResetCursorToSelected, } from '@workday/canvas-kit-react/combobox';
 import { useSelectModel } from './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/).
  */
@@ -35,6 +38,13 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
             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.
@@ -102,12 +112,11 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
         },
         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,
     };
 }), useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, useComboboxInput);

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

@@ -4,8 +4,8 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, brand, system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '../../layout';
 const switchContainerStencil = 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 = createComponent('div')({
     displayName: 'SwitchContainer',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -13,14 +13,14 @@ const SwitchContainer = createComponent('div')({
     },
 });
 const switchInputStencil = 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 = createComponent('input')({
     displayName: 'SwitchInput',
     Component: ({ error, ...elemProps }, ref, Element) => {
@@ -28,8 +28,8 @@ const SwitchInput = createComponent('input')({
     },
 });
 const switchBackgroundStencil = 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 = createComponent('div')({
     displayName: 'SwitchBackground',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -37,13 +37,13 @@ const SwitchBackground = createComponent('div')({
     },
 });
 const switchCircleStencil = 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 = createComponent('div')({
     displayName: 'SwitchCircle',
     Component: ({ checked, ...elemProps }, ref, Element) => {

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

@@ -11,8 +11,8 @@ import { TableCaption } from './TableCaption';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 const tableStencil = 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/es6/table/lib/TableBody.js

@@ -3,8 +3,8 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableBodyStencil = 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");
 export const TableBody = createComponent('tbody')({
     displayName: 'Table.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {

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

@@ -4,8 +4,8 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 const tableCaptionStencil = 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");
 export const TableCaption = createComponent('caption')({
     displayName: 'Table.Caption',
     Component: ({ children, ...elemProps }, ref, Element) => {

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

@@ -4,8 +4,8 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 const tableCellStencil = 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");
 export const TableCell = createComponent('td')({
     displayName: 'Table.Cell',
     Component: ({ children, ...elemProps }, ref, Element) => {

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

@@ -3,8 +3,8 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableFooterStencil = createStencil({
-    base: { name: "197vc7s", styles: "display:grid;box-sizing:border-box;" }
-}, "table-footer");
+    base: { name: "1b51ed", styles: "display:grid;box-sizing:border-box;" }
+}, "cnvs-table-footer");
 export const TableFooter = createComponent('tfoot')({
     displayName: 'Table.Footer',
     Component: ({ children, ...elemProps }, ref, Element) => {