@workday/canvas-kit-react 10.0.5 → 10.0.6

package/button/lib/BaseButton.tsx

@@ -4,9 +4,9 @@ import {ButtonLabelIcon} from '../lib/parts/ButtonLabelIcon';
 import {ButtonLabel} from '../lib/parts/ButtonLabel';
 
 import {createComponent, GrowthBehavior, 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 {SystemIconProps} from '@workday/canvas-kit-react/icon';
-import {Box} from '@workday/canvas-kit-react/layout';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
@@ -314,40 +314,36 @@ export const BaseButton = createComponent('button')({
   Component: (
     {
       children,
-      cs,
       size,
       fillIcon,
       iconPosition,
       icon,
+      colors,
       shouldMirrorIcon = false,
       ...elemProps
     }: ButtonContainerProps,
     ref,
     Element
   ) => {
-    // console.log('iconPosition', children, getIconPosition(size, iconPosition));
     return (
-      <Box
-        as={Element}
+      <Element
         ref={ref}
         type="button"
-        cs={[
+        {...mergeStyles(elemProps, [
           baseButtonStyles,
           buttonModifiers({
             size: size,
             iconPosition: getIconPosition(size, iconPosition, children),
           }),
-          buttonVars.default(elemProps.colors?.default || {}),
-          buttonVars.focus(elemProps.colors?.focus || {}),
-          buttonVars.hover(elemProps.colors?.hover || {}),
-          buttonVars.active(elemProps.colors?.active || {}),
-          buttonVars.disabled(elemProps.colors?.disabled || {}),
-          cs,
-        ]}
-        {...elemProps}
+          buttonVars.default(colors?.default || {}),
+          buttonVars.focus(colors?.focus || {}),
+          buttonVars.hover(colors?.hover || {}),
+          buttonVars.active(colors?.active || {}),
+          buttonVars.disabled(colors?.disabled || {}),
+        ])}
       >
         {children}
-      </Box>
+      </Element>
     );
   },
   subComponents: {

package/button/lib/DeleteButton.tsx

@@ -3,6 +3,7 @@ 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, ButtonProps} from './Button';
 
@@ -49,9 +50,9 @@ const deleteStyles = createStyles({
  */
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
-  Component: ({children, cs, size, ...elemProps}: DeleteButtonProps, ref, Element) => {
+  Component: ({children, size, ...elemProps}: DeleteButtonProps, ref, Element) => {
     return (
-      <Button as={Element} ref={ref} size={size} cs={[deleteStyles, cs]} {...elemProps}>
+      <Button as={Element} ref={ref} size={size} {...mergeStyles(elemProps, [deleteStyles])}>
         {children}
       </Button>
     );

package/button/lib/PrimaryButton.tsx

@@ -2,6 +2,7 @@ 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, ButtonProps} from './Button';
@@ -82,20 +83,12 @@ export const primaryButtonModifiers = createModifiers({
 
 export const PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
-  Component: (
-    {children, icon, cs, iconPosition, variant, size, ...elemProps}: PrimaryButtonProps,
-    ref,
-    Element
-  ) => {
+  Component: ({children, variant, ...elemProps}: PrimaryButtonProps, ref, Element) => {
     return (
       <Button
         as={Element}
         ref={ref}
-        size={size}
-        icon={icon}
-        iconPosition={iconPosition}
-        cs={[primaryStyles, primaryButtonModifiers({variant: variant}), cs]}
-        {...elemProps}
+        {...mergeStyles(elemProps, [primaryStyles, primaryButtonModifiers({variant: variant})])}
       >
         {children}
       </Button>

package/button/lib/SecondaryButton.tsx

@@ -2,6 +2,7 @@ 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, ButtonProps} from './Button';
@@ -86,19 +87,12 @@ export const secondaryButtonModifiers = createModifiers({
 
 export const SecondaryButton = createComponent('button')({
   displayName: 'SecondaryButton',
-  Component: (
-    {children, icon, cs, iconPosition, variant, ...elemProps}: SecondaryButtonProps,
-    ref,
-    Element
-  ) => {
+  Component: ({children, variant, ...elemProps}: SecondaryButtonProps, ref, Element) => {
     return (
       <Button
         as={Element}
         ref={ref}
-        icon={icon}
-        iconPosition={iconPosition}
-        cs={[secondaryStyles, secondaryButtonModifiers({variant: variant}), cs]}
-        {...elemProps}
+        {...mergeStyles(elemProps, [secondaryStyles, secondaryButtonModifiers({variant: variant})])}
       >
         {children}
       </Button>

package/button/lib/TertiaryButton.tsx

@@ -3,6 +3,7 @@ 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, ButtonProps} from './Button';
@@ -152,7 +153,6 @@ export const TertiaryButton = createComponent('button')({
       isThemeable,
       variant,
       iconPosition,
-      cs,
       ...elemProps
     }: TertiaryButtonProps,
     ref,
@@ -173,16 +173,14 @@ export const TertiaryButton = createComponent('button')({
         icon={icon}
         iconPosition={iconPosition}
         size={size}
-        cs={[
+        {...mergeStyles(elemProps, [
           tertiaryStyles,
           tertiaryButtonModifiers({
             isThemeable: (isThemeable || baseIconPosition !== 'only') as any,
             variant: variant,
             iconPosition: getIconPosition(size, baseIconPosition),
           }),
-          cs,
-        ]}
-        {...elemProps}
+        ])}
       >
         {children}
       </Button>

package/common/lib/CanvasProvider.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import {Theme, ThemeProvider} from '@emotion/react';
+import {Theme, ThemeProvider, CacheProvider} from '@emotion/react';
 import {InputProvider} from './InputProvider';
 import {defaultCanvasTheme, PartialEmotionCanvasTheme, useTheme} from './theming';
 import {brand} from '@workday/canvas-tokens-web';
+// eslint-disable-next-line @emotion/no-vanilla
+import {cache} from '@emotion/css';
 
 export interface CanvasProviderProps {
   theme?: PartialEmotionCanvasTheme;
@@ -47,14 +49,16 @@ export const CanvasProvider = ({
 }: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => {
   const elemProps = useCanvasThemeToCssVars(theme, props);
   return (
-    <ThemeProvider theme={theme as Theme}>
-      <InputProvider />
-      <div
-        dir={theme?.canvas?.direction || defaultCanvasTheme.direction}
-        {...(elemProps as React.HTMLAttributes<HTMLDivElement>)}
-      >
-        {children}
-      </div>
-    </ThemeProvider>
+    <CacheProvider value={cache}>
+      <ThemeProvider theme={theme as Theme}>
+        <InputProvider />
+        <div
+          dir={theme?.canvas?.direction || defaultCanvasTheme.direction}
+          {...(elemProps as React.HTMLAttributes<HTMLDivElement>)}
+        >
+          {children}
+        </div>
+      </ThemeProvider>
+    </CacheProvider>
   );
 };

package/dist/commonjs/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/commonjs/button/lib/BaseButton.js

@@ -24,8 +24,8 @@ const React = __importStar(require("react"));
 const ButtonLabelIcon_1 = require("../lib/parts/ButtonLabelIcon");
 const ButtonLabel_1 = require("../lib/parts/ButtonLabel");
 const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 /**
  * Temporary css variables to be used across all Buttons.
@@ -40,7 +40,7 @@ exports.buttonVars = {
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "n7sg0", 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 = canvas_kit_styling_1.createStyles({ name: "r29b0", 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.
@@ -49,24 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "n7sg0", styl
  */
 exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
     size: {
-        large: canvas_kit_styling_1.createStyles({ name: "n7sg1", 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: canvas_kit_styling_1.createStyles({ name: "n7sg2", 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: canvas_kit_styling_1.createStyles({ name: "n7sg3", 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: canvas_kit_styling_1.createStyles({ name: "n7sg4", 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: canvas_kit_styling_1.createStyles({ name: "r29b1", 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: canvas_kit_styling_1.createStyles({ name: "r29b2", 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: canvas_kit_styling_1.createStyles({ name: "r29b3", 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: canvas_kit_styling_1.createStyles({ name: "r29b4", 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: canvas_kit_styling_1.createStyles({ name: "n7sg5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
-        largeStart: canvas_kit_styling_1.createStyles({ name: "n7sg6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
-        largeEnd: canvas_kit_styling_1.createStyles({ name: "n7sg7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumOnly: canvas_kit_styling_1.createStyles({ name: "n7sg8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
-        mediumStart: canvas_kit_styling_1.createStyles({ name: "n7sg9", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumEnd: canvas_kit_styling_1.createStyles({ name: "n7sga", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
-        smallOnly: canvas_kit_styling_1.createStyles({ name: "n7sgb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
-        smallStart: canvas_kit_styling_1.createStyles({ name: "n7sgc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
-        smallEnd: canvas_kit_styling_1.createStyles({ name: "n7sgd", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "n7sge", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "n7sgf", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "n7sgg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
+        largeOnly: canvas_kit_styling_1.createStyles({ name: "r29b5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
+        largeStart: canvas_kit_styling_1.createStyles({ name: "r29b6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
+        largeEnd: canvas_kit_styling_1.createStyles({ name: "r29b7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ name: "r29b8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
+        mediumStart: canvas_kit_styling_1.createStyles({ name: "r29b9", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ name: "r29ba", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
+        smallOnly: canvas_kit_styling_1.createStyles({ name: "r29bb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
+        smallStart: canvas_kit_styling_1.createStyles({ name: "r29bc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
+        smallEnd: canvas_kit_styling_1.createStyles({ name: "r29bd", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "r29be", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "r29bf", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "r29bg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
     },
 });
 function capitalize(string = '') {
@@ -82,22 +82,19 @@ exports.getIconPosition = getIconPosition;
  */
 exports.BaseButton = common_1.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(layout_1.Box, Object.assign({ as: Element, ref: ref, type: "button", cs: [
-                baseButtonStyles,
-                exports.buttonModifiers({
-                    size: size,
-                    iconPosition: getIconPosition(size, iconPosition, children),
-                }),
-                exports.buttonVars.default(((_a = elemProps.colors) === null || _a === void 0 ? void 0 : _a.default) || {}),
-                exports.buttonVars.focus(((_b = elemProps.colors) === null || _b === void 0 ? void 0 : _b.focus) || {}),
-                exports.buttonVars.hover(((_c = elemProps.colors) === null || _c === void 0 ? void 0 : _c.hover) || {}),
-                exports.buttonVars.active(((_d = elemProps.colors) === null || _d === void 0 ? void 0 : _d.active) || {}),
-                exports.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" }, layout_1.mergeStyles(elemProps, [
+            baseButtonStyles,
+            exports.buttonModifiers({
+                size: size,
+                iconPosition: getIconPosition(size, iconPosition, children),
+            }),
+            exports.buttonVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}),
+            exports.buttonVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
+            exports.buttonVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
+            exports.buttonVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}),
+            exports.buttonVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}),
+        ])), children));
     },
     subComponents: {
         Icon: ButtonLabelIcon_1.ButtonLabelIcon,

package/dist/commonjs/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/commonjs/button/lib/DeleteButton.js

@@ -24,9 +24,10 @@ const React = __importStar(require("react"));
 const BaseButton_1 = require("./BaseButton");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const deleteStyles = canvas_kit_styling_1.createStyles({ name: "n7sg10", 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 = canvas_kit_styling_1.createStyles({ name: "r29b10", 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
@@ -34,7 +35,7 @@ const deleteStyles = canvas_kit_styling_1.createStyles({ name: "n7sg10", styles:
  */
 exports.DeleteButton = common_1.createComponent('button')({
     displayName: 'DeleteButton',
-    Component: ({ children, cs, size, ...elemProps }, ref, Element) => {
-        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, size: size, cs: [deleteStyles, cs] }, elemProps), children));
+    Component: ({ children, size, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, size: size }, layout_1.mergeStyles(elemProps, [deleteStyles])), children));
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"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/commonjs/button/lib/PrimaryButton.js

@@ -23,18 +23,19 @@ exports.PrimaryButton = exports.primaryButtonModifiers = void 0;
 const React = __importStar(require("react"));
 const BaseButton_1 = require("./BaseButton");
 const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const primaryStyles = canvas_kit_styling_1.createStyles({ name: "n7sgw", 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 = canvas_kit_styling_1.createStyles({ name: "r29bw", 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);" });
 exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "n7sgx", 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: canvas_kit_styling_1.createStyles({ name: "r29bx", 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));" }),
     },
 });
 exports.PrimaryButton = common_1.createComponent('button')({
     displayName: 'PrimaryButton',
-    Component: ({ children, icon, cs, iconPosition, variant, size, ...elemProps }, ref, Element) => {
-        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, size: size, icon: icon, iconPosition: iconPosition, cs: [primaryStyles, exports.primaryButtonModifiers({ variant: variant }), cs] }, elemProps), children));
+    Component: ({ children, variant, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps, [primaryStyles, exports.primaryButtonModifiers({ variant: variant })])), children));
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;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/commonjs/button/lib/SecondaryButton.js

@@ -23,18 +23,19 @@ exports.SecondaryButton = exports.secondaryButtonModifiers = void 0;
 const React = __importStar(require("react"));
 const BaseButton_1 = require("./BaseButton");
 const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "n7sgy", 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 = canvas_kit_styling_1.createStyles({ name: "r29by", 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));" });
 exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "n7sgz", 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: canvas_kit_styling_1.createStyles({ name: "r29bz", 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));" }),
     },
 });
 exports.SecondaryButton = common_1.createComponent('button')({
     displayName: 'SecondaryButton',
-    Component: ({ children, icon, cs, iconPosition, variant, ...elemProps }, ref, Element) => {
-        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, cs: [secondaryStyles, exports.secondaryButtonModifiers({ variant: variant }), cs] }, elemProps), children));
+    Component: ({ children, variant, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref }, layout_1.mergeStyles(elemProps, [secondaryStyles, exports.secondaryButtonModifiers({ variant: variant })])), children));
     },
 });

package/dist/commonjs/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/commonjs/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"}

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

@@ -24,35 +24,36 @@ const React = __importStar(require("react"));
 const BaseButton_1 = require("./BaseButton");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const Button_1 = require("./Button");
-const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "n7sgh", 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 = canvas_kit_styling_1.createStyles({ name: "r29bh", 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));}" });
 exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     isThemeable: {
-        true: canvas_kit_styling_1.createStyles({ name: "n7sgi", 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: canvas_kit_styling_1.createStyles({ name: "r29bi", 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: canvas_kit_styling_1.createStyles({ name: "n7sgj", 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: canvas_kit_styling_1.createStyles({ name: "r29bj", 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: canvas_kit_styling_1.createStyles({ name: "n7sgk", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
-        largeStart: canvas_kit_styling_1.createStyles({ name: "n7sgl", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        largeEnd: canvas_kit_styling_1.createStyles({ name: "n7sgm", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        mediumOnly: canvas_kit_styling_1.createStyles({ name: "n7sgn", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
-        mediumStart: canvas_kit_styling_1.createStyles({ name: "n7sgo", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        mediumEnd: canvas_kit_styling_1.createStyles({ name: "n7sgp", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        smallOnly: canvas_kit_styling_1.createStyles({ name: "n7sgq", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
-        smallStart: canvas_kit_styling_1.createStyles({ name: "n7sgr", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        smallEnd: canvas_kit_styling_1.createStyles({ name: "n7sgs", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "n7sgt", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
-        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "n7sgu", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
-        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "n7sgv", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
+        largeOnly: canvas_kit_styling_1.createStyles({ name: "r29bk", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
+        largeStart: canvas_kit_styling_1.createStyles({ name: "r29bl", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        largeEnd: canvas_kit_styling_1.createStyles({ name: "r29bm", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ name: "r29bn", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
+        mediumStart: canvas_kit_styling_1.createStyles({ name: "r29bo", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ name: "r29bp", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        smallOnly: canvas_kit_styling_1.createStyles({ name: "r29bq", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
+        smallStart: canvas_kit_styling_1.createStyles({ name: "r29br", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        smallEnd: canvas_kit_styling_1.createStyles({ name: "r29bs", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "r29bt", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "r29bu", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "r29bv", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
     },
 });
 exports.TertiaryButton = common_1.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
@@ -60,14 +61,13 @@ exports.TertiaryButton = common_1.createComponent('button')({
                     ? 'start'
                     : 'only'
                 : undefined;
-        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, size: size, cs: [
-                tertiaryStyles,
-                exports.tertiaryButtonModifiers({
-                    isThemeable: (isThemeable || baseIconPosition !== 'only'),
-                    variant: variant,
-                    iconPosition: BaseButton_1.getIconPosition(size, baseIconPosition),
-                }),
-                cs,
-            ] }, elemProps), children));
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, size: size }, layout_1.mergeStyles(elemProps, [
+            tertiaryStyles,
+            exports.tertiaryButtonModifiers({
+                isThemeable: (isThemeable || baseIconPosition !== 'only'),
+                variant: variant,
+                iconPosition: BaseButton_1.getIconPosition(size, baseIconPosition),
+            }),
+        ])), children));
     },
 });

package/dist/commonjs/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"}