@workday/canvas-kit-react 10.3.2 → 10.3.5

package/collection/lib/useCursorListModel.tsx

@@ -135,112 +135,108 @@ const getItem: (id: string, model: NavigationInput) => Item<Generic> = (id, {sta
   return item;
 };
 
-export const getWrappingOffsetItem = (offset: number) => (
-  index: number,
-  {state}: NavigationInput,
-  tries = state.items.length
-): number => {
-  if (Number.isNaN(index)) {
-    // we have no valid index. If the offset is positive, we'll return the first item
-    if (offset === 1) {
-      return getFirst(index, {state});
-    }
-    if (offset === -1) {
-      return getLast(index, {state});
-    }
-  }
-  const items = state.items;
-
-  let nextIndex = index + offset;
-
-  // calculate idealLength as in if the grid was a perfect rectangle
-  const rows = Math.ceil(items.length / state.columnCount);
-  const idealLength = rows * state.columnCount;
-  if (nextIndex < 0) {
-    if (offset === -1) {
-      // if the offset is -1, we want to wrap to the end
-      nextIndex = items.length - 1;
-    } else {
-      // if the offset is smaller than -1, we want to wrap by column
-      if (idealLength + nextIndex >= items.length) {
-        // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
-        // the right spot
-        nextIndex -= state.columnCount;
+export const getWrappingOffsetItem =
+  (offset: number) =>
+  (index: number, {state}: NavigationInput, tries = state.items.length): number => {
+    if (Number.isNaN(index)) {
+      // we have no valid index. If the offset is positive, we'll return the first item
+      if (offset === 1) {
+        return getFirst(index, {state});
+      }
+      if (offset === -1) {
+        return getLast(index, {state});
       }
-      nextIndex = idealLength + nextIndex;
     }
-  } else if (nextIndex >= items.length) {
-    if (offset === 1) {
-      // if the offset is 1, we want to wrap to the beginning
-      nextIndex = 0;
-    } else {
-      // if the offset is larger than 1, we want to wrap by column
-      if (nextIndex - idealLength < 0) {
-        // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
-        // the missing item in the next row. This way we'll end up wrapping in the right spot
-        nextIndex += state.columnCount;
+    const items = state.items;
+
+    let nextIndex = index + offset;
+
+    // calculate idealLength as in if the grid was a perfect rectangle
+    const rows = Math.ceil(items.length / state.columnCount);
+    const idealLength = rows * state.columnCount;
+    if (nextIndex < 0) {
+      if (offset === -1) {
+        // if the offset is -1, we want to wrap to the end
+        nextIndex = items.length - 1;
+      } else {
+        // if the offset is smaller than -1, we want to wrap by column
+        if (idealLength + nextIndex >= items.length) {
+          // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
+          // the right spot
+          nextIndex -= state.columnCount;
+        }
+        nextIndex = idealLength + nextIndex;
+      }
+    } else if (nextIndex >= items.length) {
+      if (offset === 1) {
+        // if the offset is 1, we want to wrap to the beginning
+        nextIndex = 0;
+      } else {
+        // if the offset is larger than 1, we want to wrap by column
+        if (nextIndex - idealLength < 0) {
+          // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
+          // the missing item in the next row. This way we'll end up wrapping in the right spot
+          nextIndex += state.columnCount;
+        }
+        nextIndex = nextIndex - idealLength;
       }
-      nextIndex = nextIndex - idealLength;
     }
-  }
 
-  if (items.length > 1 && state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
-    // The next item is disabled, try again, but only if we haven't already tried everything.
-    // Avoid an infinite loop with `tries`
-    return getWrappingOffsetItem(offset)(nextIndex, {state}, tries - 1);
-  }
+    if (items.length > 1 && state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
+      // The next item is disabled, try again, but only if we haven't already tried everything.
+      // Avoid an infinite loop with `tries`
+      return getWrappingOffsetItem(offset)(nextIndex, {state}, tries - 1);
+    }
 
-  return nextIndex;
-};
+    return nextIndex;
+  };
 
-export const getOffsetItem = (offset: number) => (
-  index: number,
-  {state}: NavigationInput,
-  tries = state.items.length
-): number => {
-  const {items, columnCount} = state;
+export const getOffsetItem =
+  (offset: number) =>
+  (index: number, {state}: NavigationInput, tries = state.items.length): number => {
+    const {items, columnCount} = state;
 
-  let nextIndex = index + offset;
+    let nextIndex = index + offset;
 
-  if (Math.abs(offset) < columnCount) {
-    // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
-    // column count. We don't want to wrap, so we'll bound within the row
+    if (Math.abs(offset) < columnCount) {
+      // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
+      // column count. We don't want to wrap, so we'll bound within the row
 
-    const currentIndexInRow = index % columnCount;
-    const nextIndexInRow = nextIndex - index + currentIndexInRow;
-    if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
-      nextIndex = index;
-    }
-  } else if (columnCount) {
-    // if we're here, there's a column count, but the offset will move into another row. We need to
-    // bound to row values
-    const nextRow = Math.floor(nextIndex / columnCount);
+      const currentIndexInRow = index % columnCount;
+      const nextIndexInRow = nextIndex - index + currentIndexInRow;
+      if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
+        nextIndex = index;
+      }
+    } else if (columnCount) {
+      // if we're here, there's a column count, but the offset will move into another row. We need to
+      // bound to row values
+      const nextRow = Math.floor(nextIndex / columnCount);
 
-    if (nextRow < 0 || nextRow >= columnCount) {
-      nextIndex = index;
-    }
+      if (nextRow < 0 || nextRow >= columnCount) {
+        nextIndex = index;
+      }
 
-    // make sure we don't go out of bounds if the grid isn't a perfect rectangle
-    if (nextIndex > items.length - 1) {
-      nextIndex = index;
+      // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+      if (nextIndex > items.length - 1) {
+        nextIndex = index;
+      }
     }
-  }
 
-  // make sure we're always in bounds
-  if (nextIndex < 0) {
-    nextIndex = 0;
-  } else if (nextIndex >= items.length) {
-    nextIndex = items.length - 1;
-  }
+    // make sure we're always in bounds
+    if (nextIndex < 0) {
+      nextIndex = 0;
+    } else if (nextIndex >= items.length) {
+      nextIndex = items.length - 1;
+    }
 
-  if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
-    // The next item is disabled, try again, but only if we haven't already tried everything.
-    // Avoid an infinite loop with `tries`
-    return getOffsetItem(offset)(nextIndex, {state}, tries - 1);
-  }
+    if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
+      // The next item is disabled, try again, but only if we haven't already tried everything.
+      // Avoid an infinite loop with `tries`
+      return getOffsetItem(offset)(nextIndex, {state}, tries - 1);
+    }
 
-  return nextIndex;
-};
+    return nextIndex;
+  };
 
 /**
  * The default navigation manager of lists. This navigation manager will wrap around when the edge

package/collection/lib/useListItemAllowChildStrings.ts

@@ -1,5 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
-import {useListModel} from '@workday/canvas-kit-react/collection';
+import {useListModel, Item} from '@workday/canvas-kit-react/collection';
 
 /**
  * This elemProps hook allows for children values to be considered identifiers if the children are
@@ -27,9 +27,9 @@ import {useListModel} from '@workday/canvas-kit-react/collection';
  * ```
  */
 export const useListItemAllowChildStrings = createElemPropsHook(useListModel)(
-  (_, __, elemProps: {'data-id'?: string; children?: React.ReactNode} = {}) => {
+  (_, __, elemProps: {'data-id'?: string; children?: React.ReactNode; item?: Item<any>} = {}) => {
     const props: {'data-id'?: string} = {};
-    if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
+    if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
       props['data-id'] = elemProps.children;
     }
 

package/collection/lib/useListRenderItem.tsx

@@ -45,7 +45,7 @@ export function useListRenderItems<T>(
             if (React.isValidElement(child)) {
               return React.cloneElement(child, {
                 key: item.id || item.index,
-                item: item.value,
+                item: item,
               });
             }
             return child;

package/combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts

@@ -57,13 +57,13 @@ export const useComboboxKeyboardTypeAhead = createElemPropsHook(useComboboxModel
     return -1;
   };
 
-  const currentItem = model.navigation.getItem(model.state.cursorId, model);
-  const cursorFocusedIndex = currentItem.index;
+  const currentItemIndex =
+    model.state.items.length > 0 ? model.navigation.getItem(model.state.cursorId, model).index : 0;
 
   const handleKeyboardTypeAhead = (key: string, numOptions: number) => {
     // If the starting point is beyond the list of options, reset it
     // to the beginning of the list
-    const startNumber = keySofar.current.length === 0 ? cursorFocusedIndex + 1 : cursorFocusedIndex;
+    const startNumber = keySofar.current.length === 0 ? currentItemIndex + 1 : currentItemIndex;
 
     const start = startNumber === numOptions ? 0 : startNumber;
 

package/combobox/lib/hooks/useComboboxModel.tsx

@@ -56,8 +56,7 @@ export const useComboboxModel = createModelHook({
   const menu = useMenuModel(
     useMenuModel.mergeConfig(config, {
       onSelect({id}) {
-        const textValue = menu.navigation.getItem(id, menu).textValue || id;
-        dispatchInputEvent(menu.state.targetRef.current, textValue);
+        dispatchInputEvent(menu.state.targetRef.current, id);
       },
     })
   );

package/common/README.md

@@ -10,16 +10,32 @@ yarn add @workday/canvas-kit-react
 
 Includes:
 
-- [CanvasProvider](#canvasprovider)
-- [InputProvider](#inputprovider)
-- [Theming](#theming)
-- [Bidirectionality](#bidirectionality)
-- [Component Functions](#component-functions)
-  - [createComponent](#createcomponent)
-  - [ExtractProps](#extractprops)
-- [Common Hooks](#common-hooks)
-  - [useUniqueId](#useuniqueid)
-- [Utility Functions](#utility-functions)
+- [Canvas Kit Common](#canvas-kit-common)
+  - [Installation](#installation)
+  - [CanvasProvider](#canvasprovider)
+      - [Storybook Decorator](#storybook-decorator)
+    - [Input Provider](#input-provider)
+      - [Definitions](#definitions)
+      - [Usage](#usage)
+      - [Static Properties](#static-properties)
+        - [`InputTypes`](#inputtypes)
+      - [Component Props](#component-props)
+        - [Required](#required)
+        - [Optional](#optional)
+          - [`provideIntent: boolean`](#provideintent-boolean)
+          - [`container: HTMLElement | React.RefObject<HTMLElement>`](#container-htmlelement--reactrefobjecthtmlelement)
+      - [Storybook Decorator](#storybook-decorator-1)
+  - [Theming](#theming)
+  - [Bidirectionality](#bidirectionality)
+  - [Component Functions](#component-functions)
+    - [`createComponent`](#createcomponent)
+    - [`ExtractProps`](#extractprops)
+  - [Common Hooks](#common-hooks)
+    - [useUniqueId](#useuniqueid)
+  - [Utility Functions](#utility-functions)
+    - [generateUniqueId](#generateuniqueid)
+    - [setUniqueSeed](#setuniqueseed)
+    - [resetUniqueIdCount](#resetuniqueidcount)
 
 ## CanvasProvider
 
@@ -71,7 +87,7 @@ MyStory.decorators = [CanvasProviderDecorator];
 ### Input Provider
 
 This is a higher order (wrapping) component for providing css-referencable data attributes for the
-users current input. Focus outlines are required for accesibility, but they can be unnecessary
+users current input. Focus outlines are required for accessibility, but they can be unnecessary
 visual noise when using a mouse. This allows us to hide focus outlines (as desired) while the user
 is interacting with components using a mouse, touch, etc. and show them when keyboard navigation
 begins. This logic is heavily influenced by [what-input](https://github.com/ten1seven/what-input).
@@ -344,7 +360,7 @@ this example, `onClick` doesn't exist on `MyComponent`, but since `MyComponent`
 If we inspect the `MyNewComponentProps` type, it will return the following:
 
 ```tsx
-MyComponentProps & React.HTMLAttributes<HTMLElement>
+MyComponentProps & React.HTMLAttributes<HTMLElement>;
 ```
 
 Inside Canvas Kit components, we use `ExtractProps` when we need to extend from the interfaces of
@@ -377,9 +393,11 @@ be returned since there is not HTML attribute interface associated with `Compone
 
 ### useUniqueId
 
-A hook to generate a unique identifier for an element. Most commonly used for accessibility. The
+A hook to generate a unique identifier for an element – most commonly used for accessibility. The
 hook will generate a unique id the first render and always return the same id every render. This
-uses [generateUniqueId](#generateuniqueid) internally.
+uses [generateUniqueId](#generateuniqueid) internally. You should use `useUniqueId` when you need to
+create a unique ID within a component's render loop. Otherwise, you should opt for
+`generateUniqueId`.
 
 ```tsx
 const MyComponent = () => {

package/common/lib/styles/errorRing.ts

@@ -53,10 +53,10 @@ export function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme): CSSObj
     borderColor: errorColors.outer,
     transition: '100ms box-shadow',
     boxShadow: errorBoxShadow,
-    '&:hover, &:disabled': {
+    '&:hover, &:disabled, &.hover, &.disabled': {
       borderColor: errorColors.outer,
     },
-    '&:focus:not([disabled])': {
+    '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
       borderColor: errorColors.outer,
       boxShadow: `${errorBoxShadow},
         0 0 0 2px ${colors.frenchVanilla100},

package/common/lib/styles/focusRing.ts

@@ -1,7 +1,6 @@
-import {keyframes, Theme, CSSObject} from '@emotion/react';
-import {canvas} from '@workday/canvas-kit-react/tokens';
+import {Theme, CSSObject} from '@emotion/react';
 import {cssVar} from '@workday/canvas-kit-styling';
-import {defaultCanvasTheme} from '../theming/index';
+import {base, brand} from '@workday/canvas-tokens-web';
 
 interface FocusRingOptions {
   width?: number;
@@ -21,7 +20,6 @@ interface FocusRingOptions {
 function calculateFocusRing({
   width,
   separation,
-  animate,
   inset,
   innerColor,
   outerColor,
@@ -57,15 +55,6 @@ function calculateFocusRing({
       break;
   }
 
-  if (animate) {
-    const fadeIn = keyframes({
-      '0%': {boxShadow},
-      '100%': {boxShadow},
-    });
-
-    return {animation: `${fadeIn} 100ms`, boxShadow};
-  }
-
   return {boxShadow};
 }
 
@@ -97,10 +86,8 @@ export function focusRing(options: FocusRingOptions = {}, theme?: Theme): CSSObj
     width = 2,
     separation = 0,
     animate = true,
-    innerColor = canvas.colors.frenchVanilla100,
-    outerColor = theme && theme.canvas
-      ? theme.canvas.palette.common.focusOutline
-      : defaultCanvasTheme.palette.common.focusOutline,
+    innerColor = base.frenchVanilla100,
+    outerColor = brand.common.focusOutline,
     inset,
   } = options;
 

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

@@ -51,7 +51,7 @@ const StyledContainer = common_1.styled('button', {
     '&:not([disabled])': {
         '&:focus': {
             outline: 'none',
-            ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+            ...common_1.focusRing({ separation: 2 }),
         },
     },
     ...common_1.hideMouseFocus,

package/dist/commonjs/banner/lib/Banner.js

@@ -16,7 +16,7 @@ const styles = {
     transition: 'background-color 120ms',
     '&:focus': {
         outline: 'none',
-        ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+        ...common_1.focusRing({ separation: 2 }),
     },
     ...common_1.hideMouseFocus,
 };

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

@@ -31,16 +31,16 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
  * Temporary css variables to be used across all Buttons.
  */
 exports.buttonVars = {
-    default: canvas_kit_styling_1.createVars({ id: "css-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    hover: canvas_kit_styling_1.createVars({ id: "css-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    active: canvas_kit_styling_1.createVars({ id: "css-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    focus: canvas_kit_styling_1.createVars({ id: "css-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    disabled: canvas_kit_styling_1.createVars({ id: "css-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    default: canvas_kit_styling_1.createVars({ id: "cnvs-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    hover: canvas_kit_styling_1.createVars({ id: "cnvs-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    active: canvas_kit_styling_1.createVars({ id: "cnvs-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    focus: canvas_kit_styling_1.createVars({ id: "cnvs-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    disabled: canvas_kit_styling_1.createVars({ id: "cnvs-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
 };
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "usvn2", 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-default-background, transparent);color:var(--css-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--css-button-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-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));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, &.disabled{cursor:default;box-shadow:none;opacity:var(--css-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--css-button-focus-background, transparent);border-color:var(--css-button-focus-border, transparent);color:var(--css-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--css-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 calc(2px + 2px) var(--css-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--css-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--css-button-hover-border, transparent);color:var(--css-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-active-background, transparent);border-color:var(--css-button-active-border, transparent);color:var(--css-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--css-button-disabled-background, transparent);border-color:var(--css-button-disabled-border, transparent);color:var(--css-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
+const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "ejxkmr", 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(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-button-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(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));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, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));& span .wd-icon-fill{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}}" });
 /**
  * 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: "usvn2", styl
  */
 exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
     size: {
-        large: canvas_kit_styling_1.createStyles({ name: "usvn3", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
-        medium: canvas_kit_styling_1.createStyles({ name: "usvn4", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
-        small: canvas_kit_styling_1.createStyles({ name: "usvn5", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
-        extraSmall: canvas_kit_styling_1.createStyles({ name: "usvn6", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        large: canvas_kit_styling_1.createStyles({ name: "1vuu82a", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
+        medium: canvas_kit_styling_1.createStyles({ name: "1tv5kp2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
+        small: canvas_kit_styling_1.createStyles({ name: "1bibd9a", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        extraSmall: canvas_kit_styling_1.createStyles({ name: "jxl8ry", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
     },
     iconPosition: {
-        largeOnly: canvas_kit_styling_1.createStyles({ name: "usvn7", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
-        largeStart: canvas_kit_styling_1.createStyles({ name: "usvn8", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
-        largeEnd: canvas_kit_styling_1.createStyles({ name: "usvn9", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        mediumOnly: canvas_kit_styling_1.createStyles({ name: "usvna", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
-        mediumStart: canvas_kit_styling_1.createStyles({ name: "usvnb", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        mediumEnd: canvas_kit_styling_1.createStyles({ name: "usvnc", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
-        smallOnly: canvas_kit_styling_1.createStyles({ name: "usvnd", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
-        smallStart: canvas_kit_styling_1.createStyles({ name: "usvne", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
-        smallEnd: canvas_kit_styling_1.createStyles({ name: "usvnf", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
-        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "usvng", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
-        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "usvnh", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
-        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "usvni", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
+        largeOnly: canvas_kit_styling_1.createStyles({ name: "17x7zv9", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
+        largeStart: canvas_kit_styling_1.createStyles({ name: "6nuy87", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
+        largeEnd: canvas_kit_styling_1.createStyles({ name: "sco5n0", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ name: "184b2d3", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
+        mediumStart: canvas_kit_styling_1.createStyles({ name: "1spsu3s", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ name: "aawort", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
+        smallOnly: canvas_kit_styling_1.createStyles({ name: "4un8za", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
+        smallStart: canvas_kit_styling_1.createStyles({ name: "996eys", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
+        smallEnd: canvas_kit_styling_1.createStyles({ name: "1khaens", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "uyhf8a", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "1m2nnkm", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "11knxyn", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
     },
 });
 function capitalize(string = '') {

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

@@ -27,7 +27,7 @@ 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: "usvn12", styles: "--css-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--css-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--css-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--css-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-disabled-background:var(--cnvs-brand-error-light, rgba(252,201,197,1));--css-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));opacity:1px;}" });
+const deleteStyles = canvas_kit_styling_1.createStyles({ name: "vj7j6z", styles: "--cnvs-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--cnvs-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--cnvs-button-disabled-background:var(--cnvs-brand-error-light, rgba(252,201,197,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));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

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

@@ -27,10 +27,10 @@ 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: "usvny", styles: "--css-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
+const primaryStyles = canvas_kit_styling_1.createStyles({ name: "1pt3ej4", styles: "--cnvs-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
 exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "usvnz", styles: "--css-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "a2rvr", styles: "--cnvs-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
     },
 });
 exports.PrimaryButton = common_1.createComponent('button')({

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

@@ -27,10 +27,10 @@ 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: "usvn10", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:transparent;--css-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
+const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "193160q", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-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: "usvn11", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "tuwrzc", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
     },
 });
 exports.SecondaryButton = common_1.createComponent('button')({