@workday/canvas-kit-react 10.0.4 → 10.0.6

package/dist/es6/button/lib/TertiaryButton.js

@@ -2,35 +2,36 @@ import * as React from 'react';
 import { buttonVars, getIconPosition } from './BaseButton';
 import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
 import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system, brand, base } from '@workday/canvas-tokens-web';
 import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
 import { Button } from './Button';
-const tertiaryStyles = createStyles({ name: "b9y4h", styles: "padding-inline:var(--cnvs-sys-space-x2, 0.5rem);min-width:auto;text-decoration:underline;border:0px;--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-vars-default-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
+const tertiaryStyles = createStyles({ name: "q08lh", styles: "padding-inline:var(--cnvs-sys-space-x2, 0.5rem);min-width:auto;text-decoration:underline;border:0px;--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-vars-default-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
 export const tertiaryButtonModifiers = createModifiers({
     isThemeable: {
-        true: createStyles({ name: "b9y4i", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
+        true: createStyles({ name: "q08li", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
     },
     variant: {
-        inverse: createStyles({ name: "b9y4j", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
+        inverse: createStyles({ name: "q08lj", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
     },
     iconPosition: {
-        largeOnly: createStyles({ name: "b9y4k", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
-        largeStart: createStyles({ name: "b9y4l", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        largeEnd: createStyles({ name: "b9y4m", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        mediumOnly: createStyles({ name: "b9y4n", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
-        mediumStart: createStyles({ name: "b9y4o", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        mediumEnd: createStyles({ name: "b9y4p", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        smallOnly: createStyles({ name: "b9y4q", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
-        smallStart: createStyles({ name: "b9y4r", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        smallEnd: createStyles({ name: "b9y4s", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        extraSmallOnly: createStyles({ name: "b9y4t", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
-        extraSmallStart: createStyles({ name: "b9y4u", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
-        extraSmallEnd: createStyles({ name: "b9y4v", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
+        largeOnly: createStyles({ name: "q08lk", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
+        largeStart: createStyles({ name: "q08ll", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        largeEnd: createStyles({ name: "q08lm", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        mediumOnly: createStyles({ name: "q08ln", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
+        mediumStart: createStyles({ name: "q08lo", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        mediumEnd: createStyles({ name: "q08lp", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        smallOnly: createStyles({ name: "q08lq", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
+        smallStart: createStyles({ name: "q08lr", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        smallEnd: createStyles({ name: "q08ls", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        extraSmallOnly: createStyles({ name: "q08lt", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
+        extraSmallStart: createStyles({ name: "q08lu", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
+        extraSmallEnd: createStyles({ name: "q08lv", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
     },
 });
 export const TertiaryButton = createComponent('button')({
     displayName: 'TertiaryButton',
-    Component: ({ children, icon, colors, size = 'medium', isThemeable, variant, iconPosition, cs, ...elemProps }, ref, Element) => {
+    Component: ({ children, icon, colors, size = 'medium', isThemeable, variant, iconPosition, ...elemProps }, ref, Element) => {
         const baseIconPosition = iconPosition
             ? iconPosition
             : icon
@@ -38,14 +39,13 @@ export const TertiaryButton = createComponent('button')({
                     ? 'start'
                     : 'only'
                 : undefined;
-        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, size: size, cs: [
-                tertiaryStyles,
-                tertiaryButtonModifiers({
-                    isThemeable: (isThemeable || baseIconPosition !== 'only'),
-                    variant: variant,
-                    iconPosition: getIconPosition(size, baseIconPosition),
-                }),
-                cs,
-            ] }, elemProps), children));
+        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, size: size }, mergeStyles(elemProps, [
+            tertiaryStyles,
+            tertiaryButtonModifiers({
+                isThemeable: (isThemeable || baseIconPosition !== 'only'),
+                variant: variant,
+                iconPosition: getIconPosition(size, baseIconPosition),
+            }),
+        ])), children));
     },
 });

package/dist/es6/common/lib/CanvasProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAGlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkCD,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAazD,CAAC"}
+{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAKlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkCD,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAezD,CAAC"}

package/dist/es6/common/lib/CanvasProvider.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider, CacheProvider } from '@emotion/react';
 import { InputProvider } from './InputProvider';
 import { defaultCanvasTheme, useTheme } from './theming';
 import { brand } from '@workday/canvas-tokens-web';
+// eslint-disable-next-line @emotion/no-vanilla
+import { cache } from '@emotion/css';
 const mappedKeys = {
     lightest: 'lightest',
     light: 'light',
@@ -30,7 +32,8 @@ const useCanvasThemeToCssVars = (theme, elemProps) => {
 export const CanvasProvider = ({ children, theme = { canvas: defaultCanvasTheme }, ...props }) => {
     var _a;
     const elemProps = useCanvasThemeToCssVars(theme, props);
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(InputProvider, null),
-        React.createElement("div", Object.assign({ dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || defaultCanvasTheme.direction }, elemProps), children)));
+    return (React.createElement(CacheProvider, { value: cache },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(InputProvider, null),
+            React.createElement("div", Object.assign({ dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || defaultCanvasTheme.direction }, elemProps), children))));
 };

package/dist/es6/layout/index.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/Box';
+export * from './lib/utils/mergeStyles';
 export * from './lib/utils/background';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
@@ -18,6 +19,6 @@ export * from './lib/Flex';
 export * from './lib/Grid';
 export type { FlexStyleProps } from './lib/utils/flex';
 export type { GridStyleProps } from './lib/utils/grid';
-export type { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
+export { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
 export * from './lib/utils/systemProps';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACvF,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACvE,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,YAAY,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AACrD,YAAY,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAC,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAChF,cAAc,yBAAyB,CAAC"}

package/dist/es6/layout/index.js

@@ -1,4 +1,5 @@
 export * from './lib/Box';
+export * from './lib/utils/mergeStyles';
 export * from './lib/utils/background';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
@@ -15,4 +16,5 @@ export { spaceStyleFnConfigs } from './lib/utils/space';
 export * from './lib/utils/text';
 export * from './lib/Flex';
 export * from './lib/Grid';
+export { gridItemStyleFnConfigs } from './lib/utils/gridItem';
 export * from './lib/utils/systemProps';

package/dist/es6/layout/lib/utils/mergeStyles.d.ts

@@ -0,0 +1,61 @@
+import { CSToPropsInput } from '@workday/canvas-kit-styling';
+import { CommonStyleProps } from './styleProps';
+/**
+ * This is an opinionated function that will force style merging with Emotion's runtime APIs,
+ * including [styled components](https://emotion.sh/docs/styled) and the [css
+ * prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
+ * supported. `mergeStyles` is exported from the layout package since it supports style props
+ * defined in the layout packages.
+ *
+ * It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
+ * of runtime APIs have been detected. If only `createStyles` were used to style a component, the
+ * faster non-runtime styling will be used.
+ *
+ * You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
+ * your components to be compatible with Emotion's runtime styling APIs.
+ *
+ * ```tsx
+ * import {createStyles, CSProps} from '@workday/canvas-kit-styling';
+ * import {mergeStyles} from '@workday/canvas-kit-react/layout';
+ *
+ * interface MyComponentProps extends CSProps {
+ *   // other props
+ * }
+ *
+ * const myStyles = createStyles({
+ *   background: 'green',
+ *   height: 40,
+ *   width: 40
+ * })
+ *
+ * const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
+ *   return (
+ *     <div
+ *       {...mergeStyles(elemProps, [myStyles])}
+ *     >
+ *       {children}
+ *     </div>
+ *   )
+ * }
+ *
+ * const StyledMyComponent(MyComponent)({
+ *   background: 'red'
+ * })
+ *
+ * const myOverridingStyles = createStyles({
+ *   background: 'blue'
+ * })
+ *
+ * // now everything works. Without `mergeStyles`, the last component would be a red box
+ * export default () => (
+ *   <>
+ *     <MyComponent>Green box</MyComponent>
+ *     <StyledMyComponent>Red box</StyledMyComponent>
+ *     <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
+ *   </>
+ * )
+ * ```
+ *
+ */
+export declare function mergeStyles<T extends {}>(allProps: T, cs: CSToPropsInput): Omit<T, 'cs' | keyof CommonStyleProps>;
+//# sourceMappingURL=mergeStyles.d.ts.map

package/dist/es6/layout/lib/utils/mergeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAY,cAAc,EAAoB,MAAM,6BAA6B,CAAC;AAYzF,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE,EACtC,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,cAAc,GACjB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CA4ExC"}

package/dist/es6/layout/lib/utils/mergeStyles.js

@@ -0,0 +1,156 @@
+import { getRegisteredStyles } from '@emotion/utils';
+// eslint-disable-next-line @emotion/no-vanilla
+import { cache, css } from '@emotion/css';
+import { csToProps, createStylesCache } from '@workday/canvas-kit-styling';
+import { boxStyleFn } from '../Box';
+import { backgroundStyleFnConfigs } from './background';
+import { borderStyleFnConfigs } from './border';
+import { colorStyleFnConfigs } from './color';
+import { depthStyleFnConfigs } from './depth';
+import { flexItemStyleFnConfigs } from './flexItem';
+import { gridItemStyleFnConfigs } from './gridItem';
+import { layoutStyleFnConfigs } from './layout';
+import { otherStyleFnConfigs } from './other';
+import { positionStyleFnConfigs } from './position';
+import { spaceStyleFnConfigs } from './space';
+import { textStyleFnConfigs } from './text';
+// get a hash of all the style props for a faster lookup
+const stylePropHash = [
+    ...backgroundStyleFnConfigs,
+    ...borderStyleFnConfigs,
+    ...colorStyleFnConfigs,
+    ...depthStyleFnConfigs,
+    ...flexItemStyleFnConfigs,
+    ...gridItemStyleFnConfigs,
+    ...layoutStyleFnConfigs,
+    ...otherStyleFnConfigs,
+    ...positionStyleFnConfigs,
+    ...spaceStyleFnConfigs,
+    ...textStyleFnConfigs,
+].reduce((result, prop) => {
+    //@ts-ignore
+    result[prop.name] = true;
+    return result;
+}, {});
+function isStyleProps(prop) {
+    return stylePropHash[prop] || false;
+}
+/**
+ * This is an opinionated function that will force style merging with Emotion's runtime APIs,
+ * including [styled components](https://emotion.sh/docs/styled) and the [css
+ * prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
+ * supported. `mergeStyles` is exported from the layout package since it supports style props
+ * defined in the layout packages.
+ *
+ * It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
+ * of runtime APIs have been detected. If only `createStyles` were used to style a component, the
+ * faster non-runtime styling will be used.
+ *
+ * You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
+ * your components to be compatible with Emotion's runtime styling APIs.
+ *
+ * ```tsx
+ * import {createStyles, CSProps} from '@workday/canvas-kit-styling';
+ * import {mergeStyles} from '@workday/canvas-kit-react/layout';
+ *
+ * interface MyComponentProps extends CSProps {
+ *   // other props
+ * }
+ *
+ * const myStyles = createStyles({
+ *   background: 'green',
+ *   height: 40,
+ *   width: 40
+ * })
+ *
+ * const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
+ *   return (
+ *     <div
+ *       {...mergeStyles(elemProps, [myStyles])}
+ *     >
+ *       {children}
+ *     </div>
+ *   )
+ * }
+ *
+ * const StyledMyComponent(MyComponent)({
+ *   background: 'red'
+ * })
+ *
+ * const myOverridingStyles = createStyles({
+ *   background: 'blue'
+ * })
+ *
+ * // now everything works. Without `mergeStyles`, the last component would be a red box
+ * export default () => (
+ *   <>
+ *     <MyComponent>Green box</MyComponent>
+ *     <StyledMyComponent>Red box</StyledMyComponent>
+ *     <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
+ *   </>
+ * )
+ * ```
+ *
+ */
+export function mergeStyles(allProps, cs) {
+    const styleProps = {};
+    let shouldRuntimeMergeStyles = false;
+    // TypeScript can't handle a type where I declare T extends `{className?: string}` for some
+    // reason, so we'll do a `as any` any time we check for possible props on `allProps`
+    let className = allProps.className || '';
+    // separate style props from all other props. `cs` is special and should be forwarded to the
+    // `handleCsProp` function.
+    const elemProps = Object.keys(allProps).reduce((result, prop) => {
+        if (isStyleProps(prop)) {
+            shouldRuntimeMergeStyles = true;
+            // @ts-ignore
+            styleProps[prop] = allProps[prop];
+        }
+        else {
+            if (prop !== 'cs') {
+                // @ts-ignore
+                result[prop] = allProps[prop];
+            }
+        }
+        return result;
+    }, {});
+    // We need to determine if style props have been used. If they have, we need to merge all the CSS
+    // classes into a single class name in the order that the class names are listed. This variable
+    // will collect the CSS class name created by Emotion if we detect style props.
+    let stylePropsClassName = '';
+    // We have style props. We need to create style and merge with our `csToProps` to get the correct
+    // merging order for styles
+    if (shouldRuntimeMergeStyles) {
+        const styles = boxStyleFn(styleProps);
+        stylePropsClassName = css(styles);
+    }
+    const returnProps = csToProps([
+        cs,
+        stylePropsClassName,
+        className,
+        allProps.cs,
+        allProps.style, // doesn't matter if `style` is undefined. csToProps will handle undefined. Thanks anyways, TypeScript
+    ]);
+    // see if we need to do style merging based off use of Emotion runtime APIs. We do this by testing
+    // the Emotion cache for a match to any class names we find, filtering out those created via
+    // `createStyles`. If only `createStyles` is detected, there is no reason to merge styles
+    (returnProps.className || '').split(' ').forEach(name => {
+        if (!createStylesCache[name] && cache.registered[name]) {
+            shouldRuntimeMergeStyles = true;
+        }
+    });
+    if (shouldRuntimeMergeStyles) {
+        const registeredStyles = [];
+        // We are using the raw `css` instead of `createStyles` because `css` uses style hashing and
+        // `createStyles` generates a new ID every time. We could use `createStyles` here, but it
+        // would be more wasteful and new styles would be generated each React render cycle. `css` is
+        // safe to use inside a render function while `createStyles` should always be used outside the
+        // React render cycle.
+        className = getRegisteredStyles(cache.registered, registeredStyles, returnProps.className || '');
+        className += css(registeredStyles);
+    }
+    else {
+        className = returnProps.className;
+    }
+    return { ...elemProps, ...returnProps, ...{ className } };
+}

package/dist/es6/menu/lib/MenuItem.d.ts

@@ -26,7 +26,7 @@ interface StyledMenuProps {
      */
     isDisabled?: boolean;
 }
-export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "cs"> & {
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "cs" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/dist/es6/tabs/lib/TabsItem.d.ts

@@ -53,7 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
      */
     tabIndex?: number;
 }
-export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "cs"> & {
+export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "cs" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
     ref?: React.Ref<HTMLButtonElement> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/layout/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/Box';
+export * from './lib/utils/mergeStyles';
 export * from './lib/utils/background';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
@@ -16,7 +17,7 @@ export {AllStyleProps, CommonStyleProps} from './lib/utils/styleProps';
 export * from './lib/utils/text';
 export * from './lib/Flex';
 export * from './lib/Grid';
-export type { FlexStyleProps } from './lib/utils/flex';
-export type { GridStyleProps } from './lib/utils/grid';
-export type { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
+export type {FlexStyleProps} from './lib/utils/flex';
+export type {GridStyleProps} from './lib/utils/grid';
+export {GridItemStyleProps, gridItemStyleFnConfigs} from './lib/utils/gridItem';
 export * from './lib/utils/systemProps';

package/layout/lib/utils/mergeStyles.ts

@@ -0,0 +1,178 @@
+import {getRegisteredStyles} from '@emotion/utils';
+// eslint-disable-next-line @emotion/no-vanilla
+import {cache, css} from '@emotion/css';
+import {csToProps, CSToPropsInput, createStylesCache} from '@workday/canvas-kit-styling';
+import {boxStyleFn} from '../Box';
+import {backgroundStyleFnConfigs} from './background';
+import {borderStyleFnConfigs} from './border';
+import {colorStyleFnConfigs} from './color';
+import {depthStyleFnConfigs} from './depth';
+import {flexItemStyleFnConfigs} from './flexItem';
+import {gridItemStyleFnConfigs} from './gridItem';
+import {layoutStyleFnConfigs} from './layout';
+import {otherStyleFnConfigs} from './other';
+import {positionStyleFnConfigs} from './position';
+import {spaceStyleFnConfigs} from './space';
+import {CommonStyleProps} from './styleProps';
+import {textStyleFnConfigs} from './text';
+
+// get a hash of all the style props for a faster lookup
+const stylePropHash = [
+  ...backgroundStyleFnConfigs,
+  ...borderStyleFnConfigs,
+  ...colorStyleFnConfigs,
+  ...depthStyleFnConfigs,
+  ...flexItemStyleFnConfigs,
+  ...gridItemStyleFnConfigs,
+  ...layoutStyleFnConfigs,
+  ...otherStyleFnConfigs,
+  ...positionStyleFnConfigs,
+  ...spaceStyleFnConfigs,
+  ...textStyleFnConfigs,
+].reduce((result, prop) => {
+  //@ts-ignore
+  result[prop.name] = true;
+  return result;
+}, {} as Record<string, boolean>);
+
+function isStyleProps(prop: string): boolean {
+  return stylePropHash[prop] || false;
+}
+
+/**
+ * This is an opinionated function that will force style merging with Emotion's runtime APIs,
+ * including [styled components](https://emotion.sh/docs/styled) and the [css
+ * prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
+ * supported. `mergeStyles` is exported from the layout package since it supports style props
+ * defined in the layout packages.
+ *
+ * It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
+ * of runtime APIs have been detected. If only `createStyles` were used to style a component, the
+ * faster non-runtime styling will be used.
+ *
+ * You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
+ * your components to be compatible with Emotion's runtime styling APIs.
+ *
+ * ```tsx
+ * import {createStyles, CSProps} from '@workday/canvas-kit-styling';
+ * import {mergeStyles} from '@workday/canvas-kit-react/layout';
+ *
+ * interface MyComponentProps extends CSProps {
+ *   // other props
+ * }
+ *
+ * const myStyles = createStyles({
+ *   background: 'green',
+ *   height: 40,
+ *   width: 40
+ * })
+ *
+ * const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
+ *   return (
+ *     <div
+ *       {...mergeStyles(elemProps, [myStyles])}
+ *     >
+ *       {children}
+ *     </div>
+ *   )
+ * }
+ *
+ * const StyledMyComponent(MyComponent)({
+ *   background: 'red'
+ * })
+ *
+ * const myOverridingStyles = createStyles({
+ *   background: 'blue'
+ * })
+ *
+ * // now everything works. Without `mergeStyles`, the last component would be a red box
+ * export default () => (
+ *   <>
+ *     <MyComponent>Green box</MyComponent>
+ *     <StyledMyComponent>Red box</StyledMyComponent>
+ *     <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
+ *   </>
+ * )
+ * ```
+ *
+ */
+export function mergeStyles<T extends {}>(
+  allProps: T,
+  cs: CSToPropsInput
+): Omit<T, 'cs' | keyof CommonStyleProps> {
+  const styleProps = {};
+  let shouldRuntimeMergeStyles = false;
+  // TypeScript can't handle a type where I declare T extends `{className?: string}` for some
+  // reason, so we'll do a `as any` any time we check for possible props on `allProps`
+  let className = (allProps as any).className || '';
+
+  // separate style props from all other props. `cs` is special and should be forwarded to the
+  // `handleCsProp` function.
+  const elemProps = Object.keys(allProps).reduce((result, prop) => {
+    if (isStyleProps(prop)) {
+      shouldRuntimeMergeStyles = true;
+      // @ts-ignore
+      styleProps[prop] = allProps[prop];
+    } else {
+      if (prop !== 'cs') {
+        // @ts-ignore
+        result[prop] = allProps[prop];
+      }
+    }
+
+    return result;
+  }, {});
+
+  // We need to determine if style props have been used. If they have, we need to merge all the CSS
+  // classes into a single class name in the order that the class names are listed. This variable
+  // will collect the CSS class name created by Emotion if we detect style props.
+  let stylePropsClassName = '';
+
+  // We have style props. We need to create style and merge with our `csToProps` to get the correct
+  // merging order for styles
+  if (shouldRuntimeMergeStyles) {
+    const styles = boxStyleFn(styleProps);
+    stylePropsClassName = css(styles);
+  }
+
+  const returnProps = csToProps([
+    cs,
+    stylePropsClassName, // if style props are not defined, this will be an empty string, which is fine
+    className, // This will come from `styled` components or the `css` prop or if a user manually sets the `className` prop
+    (allProps as any).cs, // doesn't matter if `cs` is undefined. csToProps will handle undefined. Thanks anyways, TypeScript
+    (allProps as any).style, // doesn't matter if `style` is undefined. csToProps will handle undefined. Thanks anyways, TypeScript
+  ]);
+
+  // see if we need to do style merging based off use of Emotion runtime APIs. We do this by testing
+  // the Emotion cache for a match to any class names we find, filtering out those created via
+  // `createStyles`. If only `createStyles` is detected, there is no reason to merge styles
+  (returnProps.className || '').split(' ').forEach(name => {
+    if (!createStylesCache[name] && cache.registered[name]) {
+      shouldRuntimeMergeStyles = true;
+    }
+  });
+
+  if (shouldRuntimeMergeStyles) {
+    const registeredStyles: string[] = [];
+
+    // We are using the raw `css` instead of `createStyles` because `css` uses style hashing and
+    // `createStyles` generates a new ID every time. We could use `createStyles` here, but it
+    // would be more wasteful and new styles would be generated each React render cycle. `css` is
+    // safe to use inside a render function while `createStyles` should always be used outside the
+    // React render cycle.
+    className = getRegisteredStyles(
+      cache.registered,
+      registeredStyles,
+      returnProps.className || ''
+    );
+
+    className += css(registeredStyles);
+  } else {
+    className = returnProps.className;
+  }
+
+  return {...elemProps, ...returnProps, ...{className}} as any as Omit<
+    T,
+    'cs' | keyof CommonStyleProps
+  >;
+}