@workday/canvas-kit-react 10.0.5 → 10.0.6

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

@@ -25,6 +25,8 @@ const react_1 = require("@emotion/react");
 const InputProvider_1 = require("./InputProvider");
 const theming_1 = require("./theming");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+// eslint-disable-next-line @emotion/no-vanilla
+const css_1 = require("@emotion/css");
 const mappedKeys = {
     lightest: 'lightest',
     light: 'light',
@@ -52,8 +54,9 @@ const useCanvasThemeToCssVars = (theme, elemProps) => {
 const CanvasProvider = ({ children, theme = { canvas: theming_1.defaultCanvasTheme }, ...props }) => {
     var _a;
     const elemProps = useCanvasThemeToCssVars(theme, props);
-    return (React.createElement(react_1.ThemeProvider, { theme: theme },
-        React.createElement(InputProvider_1.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) || theming_1.defaultCanvasTheme.direction }, elemProps), children)));
+    return (React.createElement(react_1.CacheProvider, { value: css_1.cache },
+        React.createElement(react_1.ThemeProvider, { theme: theme },
+            React.createElement(InputProvider_1.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) || theming_1.defaultCanvasTheme.direction }, elemProps), children))));
 };
 exports.CanvasProvider = CanvasProvider;

package/dist/commonjs/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/commonjs/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/commonjs/layout/index.js

@@ -10,8 +10,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spaceStyleFnConfigs = exports.depthStyleFnConfigs = void 0;
+exports.gridItemStyleFnConfigs = exports.spaceStyleFnConfigs = exports.depthStyleFnConfigs = void 0;
 __exportStar(require("./lib/Box"), exports);
+__exportStar(require("./lib/utils/mergeStyles"), exports);
 __exportStar(require("./lib/utils/background"), exports);
 __exportStar(require("./lib/utils/border"), exports);
 __exportStar(require("./lib/utils/color"), exports);
@@ -30,4 +31,6 @@ Object.defineProperty(exports, "spaceStyleFnConfigs", { enumerable: true, get: f
 __exportStar(require("./lib/utils/text"), exports);
 __exportStar(require("./lib/Flex"), exports);
 __exportStar(require("./lib/Grid"), exports);
+var gridItem_1 = require("./lib/utils/gridItem");
+Object.defineProperty(exports, "gridItemStyleFnConfigs", { enumerable: true, get: function () { return gridItem_1.gridItemStyleFnConfigs; } });
 __exportStar(require("./lib/utils/systemProps"), exports);

package/dist/commonjs/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/commonjs/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/commonjs/layout/lib/utils/mergeStyles.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeStyles = void 0;
+const utils_1 = require("@emotion/utils");
+// eslint-disable-next-line @emotion/no-vanilla
+const css_1 = require("@emotion/css");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const Box_1 = require("../Box");
+const background_1 = require("./background");
+const border_1 = require("./border");
+const color_1 = require("./color");
+const depth_1 = require("./depth");
+const flexItem_1 = require("./flexItem");
+const gridItem_1 = require("./gridItem");
+const layout_1 = require("./layout");
+const other_1 = require("./other");
+const position_1 = require("./position");
+const space_1 = require("./space");
+const text_1 = require("./text");
+// get a hash of all the style props for a faster lookup
+const stylePropHash = [
+    ...background_1.backgroundStyleFnConfigs,
+    ...border_1.borderStyleFnConfigs,
+    ...color_1.colorStyleFnConfigs,
+    ...depth_1.depthStyleFnConfigs,
+    ...flexItem_1.flexItemStyleFnConfigs,
+    ...gridItem_1.gridItemStyleFnConfigs,
+    ...layout_1.layoutStyleFnConfigs,
+    ...other_1.otherStyleFnConfigs,
+    ...position_1.positionStyleFnConfigs,
+    ...space_1.spaceStyleFnConfigs,
+    ...text_1.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>
+ *   </>
+ * )
+ * ```
+ *
+ */
+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 = Box_1.boxStyleFn(styleProps);
+        stylePropsClassName = css_1.css(styles);
+    }
+    const returnProps = canvas_kit_styling_1.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 (!canvas_kit_styling_1.createStylesCache[name] && css_1.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 = utils_1.getRegisteredStyles(css_1.cache.registered, registeredStyles, returnProps.className || '');
+        className += css_1.css(registeredStyles);
+    }
+    else {
+        className = returnProps.className;
+    }
+    return { ...elemProps, ...returnProps, ...{ className } };
+}
+exports.mergeStyles = mergeStyles;

package/dist/es6/button/lib/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;cA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CA6CrB,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;cA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { ButtonLabelIcon } from '../lib/parts/ButtonLabelIcon';
 import { ButtonLabel } from '../lib/parts/ButtonLabel';
 import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStyles, createVars, cssVar, createModifiers } from '@workday/canvas-kit-styling';
-import { Box } from '@workday/canvas-kit-react/layout';
 import { base, brand, system } from '@workday/canvas-tokens-web';
 /**
  * Temporary css variables to be used across all Buttons.
@@ -18,7 +18,7 @@ export const buttonVars = {
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = createStyles({ name: "ncae0", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
+const baseButtonStyles = createStyles({ name: "q08l0", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
 /**
  * Button modifiers that will overwrite the base styles of Buttons.
  * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
@@ -27,24 +27,24 @@ const baseButtonStyles = createStyles({ name: "ncae0", styles: "font-family:\"Ro
  */
 export const buttonModifiers = createModifiers({
     size: {
-        large: createStyles({ name: "ncae1", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
-        medium: createStyles({ name: "ncae2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
-        small: createStyles({ name: "ncae3", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
-        extraSmall: createStyles({ name: "ncae4", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        large: createStyles({ name: "q08l1", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
+        medium: createStyles({ name: "q08l2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
+        small: createStyles({ name: "q08l3", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        extraSmall: createStyles({ name: "q08l4", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
     },
     iconPosition: {
-        largeOnly: createStyles({ name: "ncae5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
-        largeStart: createStyles({ name: "ncae6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
-        largeEnd: createStyles({ name: "ncae7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumOnly: createStyles({ name: "ncae8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
-        mediumStart: createStyles({ name: "ncae9", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumEnd: createStyles({ name: "ncaea", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
-        smallOnly: createStyles({ name: "ncaeb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
-        smallStart: createStyles({ name: "ncaec", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
-        smallEnd: createStyles({ name: "ncaed", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallOnly: createStyles({ name: "ncaee", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        extraSmallStart: createStyles({ name: "ncaef", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallEnd: createStyles({ name: "ncaeg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
+        largeOnly: createStyles({ name: "q08l5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
+        largeStart: createStyles({ name: "q08l6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
+        largeEnd: createStyles({ name: "q08l7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        mediumOnly: createStyles({ name: "q08l8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
+        mediumStart: createStyles({ name: "q08l9", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        mediumEnd: createStyles({ name: "q08la", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
+        smallOnly: createStyles({ name: "q08lb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
+        smallStart: createStyles({ name: "q08lc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
+        smallEnd: createStyles({ name: "q08ld", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
+        extraSmallOnly: createStyles({ name: "q08le", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        extraSmallStart: createStyles({ name: "q08lf", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
+        extraSmallEnd: createStyles({ name: "q08lg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
     },
 });
 export function capitalize(string = '') {
@@ -58,22 +58,19 @@ export function getIconPosition(size, iconPosition, children) {
  */
 export const BaseButton = createComponent('button')({
     displayName: 'BaseButton',
-    Component: ({ children, cs, size, fillIcon, iconPosition, icon, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
-        var _a, _b, _c, _d, _e;
-        // console.log('iconPosition', children, getIconPosition(size, iconPosition));
-        return (React.createElement(Box, Object.assign({ as: Element, ref: ref, type: "button", cs: [
-                baseButtonStyles,
-                buttonModifiers({
-                    size: size,
-                    iconPosition: getIconPosition(size, iconPosition, children),
-                }),
-                buttonVars.default(((_a = elemProps.colors) === null || _a === void 0 ? void 0 : _a.default) || {}),
-                buttonVars.focus(((_b = elemProps.colors) === null || _b === void 0 ? void 0 : _b.focus) || {}),
-                buttonVars.hover(((_c = elemProps.colors) === null || _c === void 0 ? void 0 : _c.hover) || {}),
-                buttonVars.active(((_d = elemProps.colors) === null || _d === void 0 ? void 0 : _d.active) || {}),
-                buttonVars.disabled(((_e = elemProps.colors) === null || _e === void 0 ? void 0 : _e.disabled) || {}),
-                cs,
-            ] }, elemProps), children));
+    Component: ({ children, size, fillIcon, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, Object.assign({ ref: ref, type: "button" }, mergeStyles(elemProps, [
+            baseButtonStyles,
+            buttonModifiers({
+                size: size,
+                iconPosition: getIconPosition(size, iconPosition, children),
+            }),
+            buttonVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}),
+            buttonVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
+            buttonVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
+            buttonVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}),
+            buttonVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}),
+        ])), children));
     },
     subComponents: {
         Icon: ButtonLabelIcon,

package/dist/es6/button/lib/DeleteButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AA+BzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FASvB,CAAC"}
+{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AA+BzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FASvB,CAAC"}

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

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { buttonVars } from './BaseButton';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStyles, cssVar } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { base, brand, system } from '@workday/canvas-tokens-web';
 import { Button } from './Button';
-const deleteStyles = createStyles({ name: "ncae10", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
+const deleteStyles = createStyles({ name: "q08l10", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
 /**
  * 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
@@ -12,7 +13,7 @@ const deleteStyles = createStyles({ name: "ncae10", styles: "--css-button-vars-d
  */
 export const DeleteButton = createComponent('button')({
     displayName: 'DeleteButton',
-    Component: ({ children, cs, size, ...elemProps }, ref, Element) => {
-        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, size: size, cs: [deleteStyles, cs] }, elemProps), children));
+    Component: ({ children, size, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, size: size }, mergeStyles(elemProps, [deleteStyles])), children));
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD,eAAO,MAAM,sBAAsB;;;;;;cA4BjC,CAAC;AAEH,eAAO,MAAM,aAAa,2FAqBxB,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD,eAAO,MAAM,sBAAsB;;;;;;cA4BjC,CAAC;AAEH,eAAO,MAAM,aAAa,2FAaxB,CAAC"}

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

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import { buttonVars } from './BaseButton';
 import { createComponent } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
 import { base, brand, system } from '@workday/canvas-tokens-web';
 import { Button } from './Button';
-const primaryStyles = createStyles({ name: "ncaew", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
+const primaryStyles = createStyles({ name: "q08lw", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
 export const primaryButtonModifiers = createModifiers({
     variant: {
-        inverse: createStyles({ name: "ncaex", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,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-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--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-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        inverse: createStyles({ name: "q08lx", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,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-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--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-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
     },
 });
 export const PrimaryButton = createComponent('button')({
     displayName: 'PrimaryButton',
-    Component: ({ children, icon, cs, iconPosition, variant, size, ...elemProps }, ref, Element) => {
-        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, size: size, icon: icon, iconPosition: iconPosition, cs: [primaryStyles, primaryButtonModifiers({ variant: variant }), cs] }, elemProps), children));
+    Component: ({ children, variant, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, [primaryStyles, primaryButtonModifiers({ variant: variant })])), children));
     },
 });

package/dist/es6/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;AAE7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD,eAAO,MAAM,wBAAwB;;;;;;cAgCnC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAoB1B,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD,eAAO,MAAM,wBAAwB;;;;;;cAgCnC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAa1B,CAAC"}

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

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import { buttonVars } from './BaseButton';
 import { createComponent } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
 import { base, brand, system } from '@workday/canvas-tokens-web';
 import { Button } from './Button';
-const secondaryStyles = createStyles({ name: "ncaey", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,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-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--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-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,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-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
+const secondaryStyles = createStyles({ name: "q08ly", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,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-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--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-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,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-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
 export const secondaryButtonModifiers = createModifiers({
     variant: {
-        inverse: createStyles({ name: "ncaez", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,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-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,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, rgba(255,255,255,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
+        inverse: createStyles({ name: "q08lz", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,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-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,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, rgba(255,255,255,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
     },
 });
 export const SecondaryButton = createComponent('button')({
     displayName: 'SecondaryButton',
-    Component: ({ children, icon, cs, iconPosition, variant, ...elemProps }, ref, Element) => {
-        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, cs: [secondaryStyles, secondaryButtonModifiers({ variant: variant }), cs] }, elemProps), children));
+    Component: ({ children, variant, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, [secondaryStyles, secondaryButtonModifiers({ variant: variant })])), children));
     },
 });

package/dist/es6/button/lib/TertiaryButton.d.ts

@@ -33,7 +33,7 @@ export declare const tertiaryButtonModifiers: {
         extraSmallEnd: string;
     };
 } & ((modifiers: Partial<{
-    isThemeable: "true";
+    isThemeable: true;
     variant: "inverse";
     iconPosition: "largeOnly" | "largeStart" | "largeEnd" | "mediumOnly" | "mediumStart" | "mediumEnd" | "smallOnly" | "smallStart" | "smallEnd" | "extraSmallOnly" | "extraSmallStart" | "extraSmallEnd";
 }>) => string);

package/dist/es6/button/lib/TertiaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+CD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;cA0ElC,CAAC;AAEH,eAAO,MAAM,cAAc,4FA+CzB,CAAC"}
+{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA+CD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;cA0ElC,CAAC;AAEH,eAAO,MAAM,cAAc,4FA4CzB,CAAC"}