@workday/canvas-kit-react 11.0.11 → 11.0.13

package/avatar/lib/Avatar.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
+import {styled, focusRing, hideMouseFocus, filterOutProps} from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
 import {SystemIconCircle, SystemIconCircleSize} from '@workday/canvas-kit-react/icon';
@@ -106,7 +106,9 @@ const StyledStack = styled('span')<Pick<AvatarProps, 'size'>>(
   })
 );
 
-const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
+const StyledIcon = styled(SystemIconCircle, {
+  shouldForwardProp: filterOutProps(['isImageLoaded']),
+})<{isImageLoaded: boolean}>(
   {
     transition: fadeTransition,
   },
@@ -115,7 +117,9 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
   })
 );
 
-const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
+const StyledImage = styled('img', {
+  shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
+})<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
   {
     width: '100%',
     height: '100%',

package/button/lib/DeleteButton.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {buttonStencil} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -22,12 +22,12 @@ const deleteButtonStencil = createStencil({
     [buttonStencil.vars.background]: brand.error.base,
     [buttonStencil.vars.borderRadius]: system.shape.round,
     [buttonStencil.vars.label]: brand.error.accent,
-    [systemIconStencil.vars.color]: brand.error.accent,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.error.accent),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: brand.error.base,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.error.accent),
       [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
     },
@@ -35,19 +35,19 @@ const deleteButtonStencil = createStencil({
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: brand.error.dark,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.error.accent),
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: brand.error.darkest,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.error.accent),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
       [buttonStencil.vars.background]: brand.error.base,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, brand.error.accent),
       [buttonStencil.vars.opacity]: system.opacity.disabled,
     },
   },

package/button/lib/PrimaryButton.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
-import {buttonStencil} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {Button, ButtonProps} from './Button';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
@@ -27,33 +27,36 @@ const primaryButtonStencil = createStencil({
     [buttonStencil.vars.background]: brand.primary.base,
     [buttonStencil.vars.borderRadius]: system.shape.round,
     [buttonStencil.vars.label]: brand.primary.accent,
-    [systemIconStencil.vars.color]: brand.primary.accent,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.primary.accent),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: brand.primary.base,
       [buttonStencil.vars.label]: brand.primary.accent,
       [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.primary.accent),
     },
     // Hover Styles
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: brand.primary.dark,
       [buttonStencil.vars.label]: brand.primary.accent,
-      [systemIconStencil.vars.color]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.accent),
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: brand.primary.darkest,
       [buttonStencil.vars.label]: brand.primary.accent,
-      [systemIconStencil.vars.color]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.accent),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
       [buttonStencil.vars.background]: brand.primary.base,
       [buttonStencil.vars.label]: brand.primary.accent,
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        brand.primary.accent
+      ),
     },
   },
   modifiers: {
@@ -63,32 +66,47 @@ const primaryButtonStencil = createStencil({
         [buttonStencil.vars.background]: system.color.bg.default,
         [buttonStencil.vars.borderRadius]: system.shape.round,
         [buttonStencil.vars.label]: system.color.fg.strong,
-        [systemIconStencil.vars.color]: system.color.fg.strong,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.strong
+        ),
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.color.bg.default,
           [buttonStencil.vars.label]: system.color.fg.strong,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
           [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
         },
         // Hover Styles
         '&:hover, &.hover': {
           [buttonStencil.vars.background]: system.color.bg.alt.default,
           [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.stronger
+          ),
         },
         // Active Styles
         '&:active, &.active': {
           [buttonStencil.vars.background]: system.color.bg.alt.strong,
           [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.stronger
+          ),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
           [buttonStencil.vars.background]: system.color.bg.default,
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.strong
+          ),
         },
       },
     },

package/button/lib/SecondaryButton.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {buttonStencil} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -28,7 +28,10 @@ const secondaryButtonStencil = createStencil({
     [buttonStencil.vars.border]: system.color.border.contrast.default,
     [buttonStencil.vars.borderRadius]: system.shape.round,
     [buttonStencil.vars.label]: system.color.fg.strong,
-    [systemIconStencil.vars.color]: system.color.fg.strong,
+    [systemIconStencil.vars.color]: cssVar(
+      buttonColorPropVars.default.icon,
+      system.color.fg.strong
+    ),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: 'transparent',
@@ -36,21 +39,24 @@ const secondaryButtonStencil = createStencil({
       [buttonStencil.vars.label]: system.color.fg.strong,
       [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.focus.icon,
+        system.color.fg.strong
+      ),
     },
     // Hover Styles
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: system.color.bg.contrast.default,
       [buttonStencil.vars.border]: system.color.border.contrast.default,
       [buttonStencil.vars.label]: brand.primary.accent,
-      [systemIconStencil.vars.color]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.accent),
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: system.color.bg.contrast.strong,
       [buttonStencil.vars.border]: system.color.border.contrast.strong,
       [buttonStencil.vars.label]: brand.primary.accent,
-      [systemIconStencil.vars.color]: brand.primary.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.accent),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
@@ -58,7 +64,10 @@ const secondaryButtonStencil = createStencil({
       [buttonStencil.vars.border]: system.color.border.contrast.default,
       [buttonStencil.vars.label]: system.color.fg.strong,
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        system.color.fg.strong
+      ),
     },
   },
   modifiers: {
@@ -68,7 +77,10 @@ const secondaryButtonStencil = createStencil({
         [buttonStencil.vars.background]: 'transparent',
         [buttonStencil.vars.border]: system.color.border.inverse,
         [buttonStencil.vars.label]: system.color.fg.inverse,
-        [systemIconStencil.vars.color]: system.color.fg.inverse,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.inverse
+        ),
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.color.bg.default,
@@ -76,28 +88,40 @@ const secondaryButtonStencil = createStencil({
           [buttonStencil.vars.label]: system.color.fg.strong,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
           [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
         },
         // Hover Styles
         '&:hover, &.hover': {
           [buttonStencil.vars.background]: system.color.bg.alt.default,
           [buttonStencil.vars.border]: 'transparent',
           [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.stronger
+          ),
         },
         // Active Styles
         '&:active, &.active': {
           [buttonStencil.vars.background]: system.color.bg.alt.strong,
           [buttonStencil.vars.border]: 'transparent',
           [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.stronger
+          ),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
           [buttonStencil.vars.background]: 'transparent',
           [buttonStencil.vars.border]: system.color.border.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.inverse
+          ),
         },
       },
     },

package/button/lib/TertiaryButton.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {buttonStencil} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {system, brand} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -32,14 +32,14 @@ const tertiaryButtonStencil = createStencil({
     [buttonStencil.vars.background]: 'transparent',
     [buttonStencil.vars.borderRadius]: system.shape.x1,
     [buttonStencil.vars.label]: brand.primary.base,
-    [systemIconStencil.vars.color]: brand.primary.base,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.primary.base),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: 'transparent',
       [buttonStencil.vars.label]: brand.primary.base,
       [buttonStencil.vars.boxShadowInner]: brand.common.focusOutline,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: brand.primary.base,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.primary.base),
       ...focusRing({
         width: 2,
         separation: 0,
@@ -51,20 +51,23 @@ const tertiaryButtonStencil = createStencil({
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: system.color.bg.alt.default,
       [buttonStencil.vars.label]: brand.primary.dark,
-      [systemIconStencil.vars.color]: brand.primary.dark,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.primary.dark),
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: system.color.bg.alt.strong,
       [buttonStencil.vars.label]: brand.primary.darkest,
-      [systemIconStencil.vars.color]: brand.primary.darkest,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.active.icon,
+        brand.primary.darkest
+      ),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
       [buttonStencil.vars.background]: 'transparent',
       [buttonStencil.vars.label]: brand.primary.base,
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: brand.primary.base,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.primary.base),
     },
   },
   modifiers: {
@@ -73,18 +76,33 @@ const tertiaryButtonStencil = createStencil({
       only: {
         padding: 0,
         borderRadius: system.shape.round,
-        [systemIconStencil.vars.color]: system.color.fg.strong,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.strong
+        ),
         '&:focus-visible, &.focus': {
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
         },
         '&:hover, &.hover': {
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.strong
+          ),
         },
         '&:active, &.active': {
-          [systemIconStencil.vars.color]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.strong
+          ),
         },
         '&:disabled, &.disabled': {
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.strong
+          ),
         },
       },
       start: {},
@@ -92,18 +110,34 @@ const tertiaryButtonStencil = createStencil({
     },
     isThemeable: {
       true: {
-        [systemIconStencil.vars.color]: brand.primary.base,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          brand.primary.base
+        ),
+
         '&:focus-visible, &.focus': {
-          [systemIconStencil.vars.color]: brand.primary.base,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            brand.primary.base
+          ),
         },
         '&:hover, &.hover': {
-          [systemIconStencil.vars.color]: brand.primary.dark,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            brand.primary.dark
+          ),
         },
         '&:active, &.active': {
-          [systemIconStencil.vars.color]: brand.primary.darkest,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            brand.primary.darkest
+          ),
         },
         '&:disabled, &.disabled': {
-          [systemIconStencil.vars.color]: brand.primary.base,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            brand.primary.base
+          ),
         },
       },
     },
@@ -112,12 +146,18 @@ const tertiaryButtonStencil = createStencil({
       inverse: {
         [buttonStencil.vars.background]: 'transparent',
         [buttonStencil.vars.label]: system.color.fg.inverse,
-        [systemIconStencil.vars.color]: system.color.fg.inverse,
+        [systemIconStencil.vars.color]: cssVar(
+          buttonColorPropVars.default.icon,
+          system.color.fg.inverse
+        ),
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.color.bg.default,
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.focus.icon,
+            system.color.fg.strong
+          ),
           ...focusRing({
             inset: 'inner',
             width: 2,
@@ -130,19 +170,28 @@ const tertiaryButtonStencil = createStencil({
         '&:hover, &.hover': {
           [buttonStencil.vars.background]: system.color.bg.default,
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.hover.icon,
+            system.color.fg.strong
+          ),
         },
         // Active Styles
         '&:active, &.active': {
           [buttonStencil.vars.background]: system.color.bg.alt.soft,
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [systemIconStencil.vars.color]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.active.icon,
+            system.color.fg.strong
+          ),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
           [buttonStencil.vars.background]: 'transparent',
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: cssVar(
+            buttonColorPropVars.disabled.icon,
+            system.color.fg.inverse
+          ),
         },
       },
     },

package/common/lib/theming/index.ts

@@ -1,7 +1,7 @@
 export * from './breakpoints';
 export {createCanvasTheme} from './createCanvasTheme';
 export * from './types';
-export {default as styled, StyleRewriteFn} from './styled';
+export {default as styled, StyleRewriteFn, filterOutProps} from './styled';
 export * from './theme';
 export * from './useTheme';
 export * from './useThemedRing';

package/common/lib/theming/styled.ts

@@ -6,32 +6,39 @@ import rtlCSSJS from 'rtl-css-js';
 
 const noop = (styles: any) => styles;
 
+interface ThemingStyledOptions {
+  shouldForwardProp?: (prop: any) => boolean;
+}
+
+export const filterOutProps = (omittedProps: string[]) => {
+  return (prop: string) => !omittedProps.includes(prop);
+};
+
 // Pulled from https://github.com/emotion-js/emotion/blob/master/packages/styled-base/src/utils.js#L6 (not exported)
 type Interpolations = Array<any>;
 export type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
 
-function styled<Props>(node: any) {
+function styled<Props>(node: any, options?: ThemingStyledOptions) {
   return (...args: Interpolation<Props>[]) => {
     const newArgs: Interpolations = args.map(
-      interpolation => (
-        props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}
-      ) => {
-        props.theme = useTheme(props.theme);
-        const direction = props.theme.canvas.direction;
-        const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
-        const maybeConvert = props.theme._styleRewriteFn || noop;
-        try {
-          if (typeof interpolation === 'function') {
-            return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
+      interpolation =>
+        (props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}) => {
+          props.theme = useTheme(props.theme);
+          const direction = props.theme.canvas.direction;
+          const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
+          const maybeConvert = props.theme._styleRewriteFn || noop;
+          try {
+            if (typeof interpolation === 'function') {
+              return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
+            }
+            return maybeFlip(maybeConvert(interpolation) as CSSObject);
+          } catch (e) {
+            return maybeConvert(interpolation);
           }
-          return maybeFlip(maybeConvert(interpolation) as CSSObject);
-        } catch (e) {
-          return maybeConvert(interpolation);
         }
-      }
     );
 
-    return emotionStyled(node)(newArgs);
+    return emotionStyled(node, options)(newArgs);
   };
 }
 

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;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"}
+{"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;AAyEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}

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

@@ -69,12 +69,16 @@ const StyledStack = common_1.styled('span')({
     height: size,
     width: size,
 }));
-const StyledIcon = common_1.styled(icon_1.SystemIconCircle)({
+const StyledIcon = common_1.styled(icon_1.SystemIconCircle, {
+    shouldForwardProp: common_1.filterOutProps(['isImageLoaded']),
+})({
     transition: fadeTransition,
 }, ({ isImageLoaded }) => ({
     opacity: isImageLoaded ? 0 : 1,
 }));
-const StyledImage = common_1.styled('img')({
+const StyledImage = common_1.styled('img', {
+    shouldForwardProp: common_1.filterOutProps(['isLoaded', 'objectFit']),
+})({
     width: '100%',
     height: '100%',
     borderRadius: tokens_1.borderRadius.circle,

package/dist/commonjs/button/lib/DeleteButton.js

@@ -30,8 +30,8 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const deleteButtonStencil = canvas_kit_styling_1.createStencil({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "8e9d77", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--cnvs-brand-error-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--cnvs-brand-error-accent);}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--cnvs-brand-error-accent);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--cnvs-brand-error-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
-}, "delete-button-582c4f");
+    base: { name: "b70e28", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
+}, "delete-button-d069ff");
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
  * have significant consequences. They commonly appear in confirmation dialogs as the final

package/dist/commonjs/button/lib/PrimaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6ED,eAAO,MAAM,aAAa,2FASxB,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+FD,eAAO,MAAM,aAAa,2FASxB,CAAC"}

package/dist/commonjs/button/lib/PrimaryButton.js

@@ -30,14 +30,14 @@ const Button_1 = require("./Button");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const primaryButtonStencil = canvas_kit_styling_1.createStencil({
     extends: BaseButton_1.buttonStencil,
-    base: { name: "581e61", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--cnvs-brand-primary-accent);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--cnvs-brand-primary-accent);}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--cnvs-brand-primary-accent);}" },
+    base: { name: "3662fa", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
     modifiers: {
         variant: {
             // Inverse Styles
-            inverse: { name: "21544f", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--cnvs-sys-color-fg-strong);}" }
+            inverse: { name: "9c04ef", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
         }
     }
-}, "primary-button-1b34db");
+}, "primary-button-a56ed8");
 exports.PrimaryButton = common_1.createComponent('button')({
     displayName: 'PrimaryButton',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {

package/dist/commonjs/button/lib/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAsFD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8GD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}