@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.80-next.8

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {BaseButton} from '@workday/canvas-kit-react/button';
 import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
 
-export interface DropdownButtonProps extends IconButtonProps {
+export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**
    * The accessibility label for the button
    */
@@ -22,35 +22,64 @@ export interface DropdownButtonProps extends IconButtonProps {
   toggled: boolean;
 }
 
-export const DropdownButton = createComponent(IconButton)({
+export const DropdownButton = createComponent('button')({
   displayName: 'DropdownButton',
   Component: (
-    {
-      buttonIcon = relatedActionsIcon,
-      toggled,
-      variant = 'plain',
-      ...elemProps
-    }: DropdownButtonProps,
+    {buttonIcon = relatedActionsIcon, toggled, ...elemProps}: DropdownButtonProps,
     ref,
     Element
   ) => {
-    const hasPlainVariant = variant === 'plain';
-
+    const theme = useTheme();
     return (
-      <Element
+      <BaseButton
+        as={Element}
         ref={ref}
-        type="button"
-        style={hasPlainVariant ? {margin: '0 1px'} : {}}
-        variant={variant}
-        icon={buttonIcon}
-        color={colors.licorice200}
-        toggled={toggled}
-        aria-pressed={undefined} // removing aria-pressed from IconButton and opting for aria-expanded
+        aria-pressed={undefined} // removing aria-pressed from button and opting for aria-expanded
         aria-expanded={toggled}
         aria-haspopup
         aria-controls="menu"
+        size="small"
+        height={space.l}
+        width={space.l}
+        padding={space.zero}
+        colors={getDropdownColors(toggled, theme)}
         {...elemProps}
-      />
+      >
+        <BaseButton.Icon icon={buttonIcon} />
+      </BaseButton>
     );
   },
 });
+
+const getDropdownColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
+  const {
+    canvas: {
+      palette: {primary: themePrimary},
+    },
+  } = theme;
+
+  return {
+    default: {
+      icon: toggled ? themePrimary.main : colors.blackPepper400,
+      label: themePrimary.main,
+    },
+    hover: {
+      background: colors.soap200,
+      icon: toggled ? themePrimary.dark : colors.blackPepper500,
+      label: themePrimary.dark,
+    },
+    active: {
+      background: colors.soap300,
+      icon: toggled ? themePrimary.dark : colors.blackPepper500,
+      label: themePrimary.dark,
+    },
+    focus: {
+      icon: toggled ? themePrimary.main : colors.blackPepper500,
+      label: themePrimary.main,
+    },
+    disabled: {
+      icon: toggled ? themePrimary.main : colors.blackPepper400,
+      label: themePrimary.main,
+    },
+  };
+};

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx

@@ -52,7 +52,7 @@ export interface DropdownMenuProps {
 
 const StyledDropdownMenu = styled(Box)<BoxProps>({
   ...type.levels.subtext.large,
-  ...depth[2],
+  ...depth[3],
   backgroundColor: commonColors.background,
   border: `1px solid ${colors.soap500}`,
   borderRadius: borderRadius.m,

package/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx

@@ -23,6 +23,7 @@ const ListItem = styled('li')(
     flexDirection: 'column',
     textAlign: 'left',
     ...type.levels.subtext.large,
+    fontWeight: 500,
   },
 
   ({maxWidth}: CurrentItemProps) => ({

package/breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx

@@ -19,6 +19,10 @@ export const BreadcrumbsListItem = ({children, ...props}: ListItemProps) => {
         icon={icon}
         color={colors.licorice200}
         colorHover={colors.licorice200}
+        size={20}
+        height={32}
+        width={32}
+        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
         aria-hidden
       />
     </Flex>

package/color-picker/lib/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
 import FormField from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
@@ -141,7 +141,7 @@ const ColorInputAndLabel = styled(FormField)({
   margin: 0,
 });
 
-const CheckButton = styled(IconButton)({
+const CheckButton = styled(SecondaryButton)({
   alignSelf: 'flex-end',
 });
 
@@ -207,7 +207,7 @@ const ColorPicker = ({
               showCheck={value === validHexValue || value === customHexValue}
             />
           </ColorInputAndLabel>
-          <CheckButton aria-label={submitLabel} variant="circleFilled" icon={checkIcon} />
+          <CheckButton aria-label={submitLabel} icon={checkIcon} />
         </ColorInputWrapper>
       )}
     </ColorPickerContainer>

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts

@@ -1,6 +1,6 @@
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface DropdownButtonProps extends IconButtonProps {
+export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * The accessibility label for the button
      */
@@ -16,5 +16,5 @@ export interface DropdownButtonProps extends IconButtonProps {
      */
     toggled: boolean;
 }
-export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"button", IconButtonProps>, DropdownButtonProps>;
+export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DropdownButtonProps>;
 //# sourceMappingURL=Button.d.ts.map

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0KA+BzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAClF;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,4FA2BzB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js

@@ -29,13 +29,41 @@ exports.DropdownButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = require("@workday/canvas-kit-react/button");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
-exports.DropdownButton = common_1.createComponent(button_1.IconButton)({
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+exports.DropdownButton = common_1.createComponent('button')({
     displayName: 'DropdownButton',
     Component: function (_a, ref, Element) {
-        var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? canvas_system_icons_web_1.relatedActionsIcon : _b, toggled = _a.toggled, _c = _a.variant, variant = _c === void 0 ? 'plain' : _c, elemProps = __rest(_a, ["buttonIcon", "toggled", "variant"]);
-        var hasPlainVariant = variant === 'plain';
-        return (react_1.default.createElement(Element, __assign({ ref: ref, type: "button", style: hasPlainVariant ? { margin: '0 1px' } : {}, variant: variant, icon: buttonIcon, color: tokens_1.colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
+        var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? canvas_system_icons_web_1.relatedActionsIcon : _b, toggled = _a.toggled, elemProps = __rest(_a, ["buttonIcon", "toggled"]);
+        var theme = common_1.useTheme();
+        return (react_1.default.createElement(button_1.BaseButton, __assign({ as: Element, ref: ref, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu", size: "small", height: tokens_1.space.l, width: tokens_1.space.l, padding: tokens_1.space.zero, colors: getDropdownColors(toggled, theme) }, elemProps),
+            react_1.default.createElement(button_1.BaseButton.Icon, { icon: buttonIcon })));
     },
 });
+var getDropdownColors = function (toggled, theme) {
+    var themePrimary = theme.canvas.palette.primary;
+    return {
+        default: {
+            icon: toggled ? themePrimary.main : tokens_1.colors.blackPepper400,
+            label: themePrimary.main,
+        },
+        hover: {
+            background: tokens_1.colors.soap200,
+            icon: toggled ? themePrimary.dark : tokens_1.colors.blackPepper500,
+            label: themePrimary.dark,
+        },
+        active: {
+            background: tokens_1.colors.soap300,
+            icon: toggled ? themePrimary.dark : tokens_1.colors.blackPepper500,
+            label: themePrimary.dark,
+        },
+        focus: {
+            icon: toggled ? themePrimary.main : tokens_1.colors.blackPepper500,
+            label: themePrimary.main,
+        },
+        disabled: {
+            icon: toggled ? themePrimary.main : tokens_1.colors.blackPepper400,
+            label: themePrimary.main,
+        },
+    };
+};

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js

@@ -32,7 +32,7 @@ var tokens_1 = require("@workday/canvas-kit-react/tokens");
 // local components
 var MenuItemLink_1 = require("./MenuItemLink");
 var layout_1 = require("@workday/canvas-kit-react/layout");
-var StyledDropdownMenu = common_1.styled(layout_1.Box)(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[2]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
+var StyledDropdownMenu = common_1.styled(layout_1.Box)(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[3]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
 var StyledMenuList = common_1.styled('ul')({
     boxSizing: 'border-box',
     listStyle: 'none',

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}
+{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js

@@ -33,7 +33,7 @@ var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
 var popup_1 = require("@workday/canvas-kit-react/popup");
 var hooks_1 = require("./hooks");
 var styles_1 = require("./styles");
-var ListItem = common_1.styled('li')(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, tokens_1.type.levels.subtext.large), function (_a) {
+var ListItem = common_1.styled('li')(__assign(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, tokens_1.type.levels.subtext.large), { fontWeight: 500 }), function (_a) {
     var maxWidth = _a.maxWidth;
     return (__assign({}, styles_1.truncateStyles(maxWidth)));
 });

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAmB/B,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.js

@@ -38,6 +38,6 @@ var BreadcrumbsListItem = function (_a) {
     var icon = shouldUseRTL ? canvas_system_icons_web_1.chevronLeftSmallIcon : canvas_system_icons_web_1.chevronRightSmallIcon;
     return (react_1.default.createElement(layout_1.Flex, __assign({ as: "li", alignItems: "center" }, props),
         children,
-        react_1.default.createElement(icon_1.SystemIcon, { icon: icon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, "aria-hidden": true })));
+        react_1.default.createElement(icon_1.SystemIcon, { icon: icon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, size: 20, height: 32, width: 32, styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
 };
 exports.BreadcrumbsListItem = BreadcrumbsListItem;

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -126,7 +126,7 @@ var ColorInputAndLabel = styled_1.default(form_field_1.default)({
     flexDirection: 'column',
     margin: 0,
 });
-var CheckButton = styled_1.default(button_1.IconButton)({
+var CheckButton = styled_1.default(button_1.SecondaryButton)({
     alignSelf: 'flex-end',
 });
 var HexColorInput = styled_1.default(color_picker_1.ColorInput)({
@@ -161,7 +161,7 @@ var ColorPicker = function (_a) {
         showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
             React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
                 React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
-            React.createElement(CheckButton, { "aria-label": submitLabel, variant: "circleFilled", icon: canvas_system_icons_web_1.checkIcon })))));
+            React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon })))));
 };
 ColorPicker.defaultColorSet = defaultColorSet;
 exports.default = ColorPicker;

package/dist/commonjs/menu/lib/Menu.js

@@ -268,7 +268,7 @@ var Menu = /** @class */ (function (_super) {
         var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
         var selectedItemIndex = this.state.selectedItemIndex;
         var cardWidth = grow ? '100%' : width;
-        return (React.createElement(card_1.Card, { style: { display: 'inline-block' }, padding: tokens_1.space.zero, width: cardWidth },
+        return (React.createElement(card_1.Card, { style: { display: 'inline-block' }, padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
             React.createElement(card_1.Card.Body, null,
                 React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
                     if (!React.isValidElement(menuItem)) {

package/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import * as React from 'react';
 import { jsx } from '@emotion/react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
-export declare type ToggleButtonProps = IconButtonProps & {
+export declare type ToggleButtonProps = TertiaryButtonProps & {
     /**
      * The tooltip text to expand the side panel
      * @default 'Expand'

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAY,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAM7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AA4BD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;sKAcZ,cAAc;mHAqGd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;+KAcZ,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -55,7 +55,6 @@ var button_1 = require("@workday/canvas-kit-react/button");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
-var layout_1 = require("@workday/canvas-kit-react/layout");
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -63,7 +62,13 @@ var createKeyframes = function (from, to) {
     };
     return react_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "], ["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
 };
-var StyledPanel = common_1.styled(layout_1.Box)({
+var containerVariantStyle = {
+    alternate: __assign({ backgroundColor: tokens_1.colors.frenchVanilla100 }, tokens_1.depth[5]),
+    standard: {
+        backgroundColor: tokens_1.colors.soap100,
+    },
+};
+var Panel = common_1.styled('section')({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
@@ -74,10 +79,8 @@ exports.SidePanelContext = React.createContext({
     origin: 'left',
 });
 var SidePanel = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, 
-    // variant = 'standard',
-    touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "touched"]);
-    var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
+    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
+    var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
     React.useEffect(function () {
         if (typeof onExpandedChange !== 'undefined') {
             onExpandedChange(expanded);
@@ -116,7 +119,18 @@ var SidePanel = function (_a) {
             onAnimationStart(event);
         }
     };
-    return (react_1.jsx(StyledPanel, __assign({ as: as, width: expanded ? expandedWidth : collapsedWidth, maxWidth: expanded ? expandedWidth : collapsedWidth, backgroundColor: elemProps.variant === 'alternate' ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.soap100, depth: elemProps.variant === 'alternate' ? 3 : undefined, animation: touched ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out" : undefined, onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
+    return (react_1.jsx(Panel, __assign({ as: as, css: [
+            {
+                width: expanded ? expandedWidth : collapsedWidth,
+                maxWidth: expanded ? expandedWidth : collapsedWidth,
+                // mounted.current will be false on the first render, thus you won't get an unwanted animation here
+                // Will animate again if you force a re-render (like in Storybook)
+                animation: touched
+                    ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out"
+                    : undefined,
+            },
+            containerVariantStyle[variant],
+        ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
         react_1.jsx(exports.SidePanelContext.Provider, { value: {
                 state: state,
                 origin: origin,
@@ -126,7 +140,7 @@ var SidePanel = function (_a) {
  * A toggle button styled specifically for the side panel container.
  */
 var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
+    var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
     var context = React.useContext(exports.SidePanelContext);
     var useRTLOrigin = function () {
         var isRTL = common_1.useIsRTL();
@@ -142,6 +156,7 @@ var ToggleButton = function (_a) {
     var buttonStyle = react_1.css({
         position: 'absolute',
         top: tokens_1.space.m,
+        width: tokens_1.space.l,
         right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? tokens_1.space.s : undefined,
         left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? tokens_1.space.s : undefined,
         margin: context.state === 'collapsed' ? 'auto' : 0,
@@ -150,7 +165,7 @@ var ToggleButton = function (_a) {
             : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
     });
     return (react_1.jsx(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
-        react_1.jsx(button_1.IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
+        react_1.jsx(button_1.TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
 exports.default = SidePanel;

package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts

@@ -1,6 +1,6 @@
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface DropdownButtonProps extends IconButtonProps {
+export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * The accessibility label for the button
      */
@@ -16,5 +16,5 @@ export interface DropdownButtonProps extends IconButtonProps {
      */
     toggled: boolean;
 }
-export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"button", IconButtonProps>, DropdownButtonProps>;
+export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DropdownButtonProps>;
 //# sourceMappingURL=Button.d.ts.map

package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0KA+BzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAClF;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,4FA2BzB,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js

@@ -21,15 +21,43 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { BaseButton } from '@workday/canvas-kit-react/button';
 import { relatedActionsIcon } from '@workday/canvas-system-icons-web';
-import { colors } from '@workday/canvas-kit-react/tokens';
-import { createComponent } from '@workday/canvas-kit-react/common';
-export var DropdownButton = createComponent(IconButton)({
+import { createComponent, useTheme } from '@workday/canvas-kit-react/common';
+import { colors, space } from '@workday/canvas-kit-react/tokens';
+export var DropdownButton = createComponent('button')({
     displayName: 'DropdownButton',
     Component: function (_a, ref, Element) {
-        var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? relatedActionsIcon : _b, toggled = _a.toggled, _c = _a.variant, variant = _c === void 0 ? 'plain' : _c, elemProps = __rest(_a, ["buttonIcon", "toggled", "variant"]);
-        var hasPlainVariant = variant === 'plain';
-        return (React.createElement(Element, __assign({ ref: ref, type: "button", style: hasPlainVariant ? { margin: '0 1px' } : {}, variant: variant, icon: buttonIcon, color: colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
+        var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? relatedActionsIcon : _b, toggled = _a.toggled, elemProps = __rest(_a, ["buttonIcon", "toggled"]);
+        var theme = useTheme();
+        return (React.createElement(BaseButton, __assign({ as: Element, ref: ref, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu", size: "small", height: space.l, width: space.l, padding: space.zero, colors: getDropdownColors(toggled, theme) }, elemProps),
+            React.createElement(BaseButton.Icon, { icon: buttonIcon })));
     },
 });
+var getDropdownColors = function (toggled, theme) {
+    var themePrimary = theme.canvas.palette.primary;
+    return {
+        default: {
+            icon: toggled ? themePrimary.main : colors.blackPepper400,
+            label: themePrimary.main,
+        },
+        hover: {
+            background: colors.soap200,
+            icon: toggled ? themePrimary.dark : colors.blackPepper500,
+            label: themePrimary.dark,
+        },
+        active: {
+            background: colors.soap300,
+            icon: toggled ? themePrimary.dark : colors.blackPepper500,
+            label: themePrimary.dark,
+        },
+        focus: {
+            icon: toggled ? themePrimary.main : colors.blackPepper500,
+            label: themePrimary.main,
+        },
+        disabled: {
+            icon: toggled ? themePrimary.main : colors.blackPepper400,
+            label: themePrimary.main,
+        },
+    };
+};

package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js

@@ -26,7 +26,7 @@ import { borderRadius, colors, commonColors, depth, space, type, } from '@workda
 // local components
 import { DropdownMenuItemLink } from './MenuItemLink';
 import { Box } from '@workday/canvas-kit-react/layout';
-var StyledDropdownMenu = styled(Box)(__assign(__assign(__assign({}, type.levels.subtext.large), depth[2]), { backgroundColor: commonColors.background, border: "1px solid " + colors.soap500, borderRadius: borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
+var StyledDropdownMenu = styled(Box)(__assign(__assign(__assign({}, type.levels.subtext.large), depth[3]), { backgroundColor: commonColors.background, border: "1px solid " + colors.soap500, borderRadius: borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
 var StyledMenuList = styled('ul')({
     boxSizing: 'border-box',
     listStyle: 'none',

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}
+{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js

@@ -27,7 +27,7 @@ import { TooltipContainer } from '@workday/canvas-kit-react/tooltip';
 import { Popper } from '@workday/canvas-kit-react/popup';
 import { useTruncateTooltip } from './hooks';
 import { truncateStyles } from './styles';
-var ListItem = styled('li')(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, type.levels.subtext.large), function (_a) {
+var ListItem = styled('li')(__assign(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, type.levels.subtext.large), { fontWeight: 500 }), function (_a) {
     var maxWidth = _a.maxWidth;
     return (__assign({}, truncateStyles(maxWidth)));
 });

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAmB/B,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.js

@@ -32,5 +32,5 @@ export var BreadcrumbsListItem = function (_a) {
     var icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
     return (React.createElement(Flex, __assign({ as: "li", alignItems: "center" }, props),
         children,
-        React.createElement(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, "aria-hidden": true })));
+        React.createElement(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, size: 20, height: 32, width: 32, styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
 };

package/dist/es6/color-picker/lib/ColorPicker.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { checkIcon } from '@workday/canvas-system-icons-web';
 import { ColorInput } from '@workday/canvas-kit-react/color-picker';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { SecondaryButton } from '@workday/canvas-kit-react/button';
 import * as React from 'react';
 import FormField from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
@@ -102,7 +102,7 @@ var ColorInputAndLabel = styled(FormField)({
     flexDirection: 'column',
     margin: 0,
 });
-var CheckButton = styled(IconButton)({
+var CheckButton = styled(SecondaryButton)({
     alignSelf: 'flex-end',
 });
 var HexColorInput = styled(ColorInput)({
@@ -137,7 +137,7 @@ var ColorPicker = function (_a) {
         showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
             React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
                 React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
-            React.createElement(CheckButton, { "aria-label": submitLabel, variant: "circleFilled", icon: checkIcon })))));
+            React.createElement(CheckButton, { "aria-label": submitLabel, icon: checkIcon })))));
 };
 ColorPicker.defaultColorSet = defaultColorSet;
 export default ColorPicker;

package/dist/es6/menu/lib/Menu.js

@@ -244,7 +244,7 @@ var Menu = /** @class */ (function (_super) {
         var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
         var selectedItemIndex = this.state.selectedItemIndex;
         var cardWidth = grow ? '100%' : width;
-        return (React.createElement(Card, { style: { display: 'inline-block' }, padding: space.zero, width: cardWidth },
+        return (React.createElement(Card, { style: { display: 'inline-block' }, padding: space.zero, width: cardWidth, depth: 3 },
             React.createElement(Card.Body, null,
                 React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
                     if (!React.isValidElement(menuItem)) {

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import * as React from 'react';
 import { jsx } from '@emotion/react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
-export declare type ToggleButtonProps = IconButtonProps & {
+export declare type ToggleButtonProps = TertiaryButtonProps & {
     /**
      * The tooltip text to expand the side panel
      * @default 'Expand'

package/dist/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAY,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAM7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AA4BD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;sKAcZ,cAAc;mHAqGd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;+KAcZ,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -29,11 +29,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { styled, useIsRTL } from '@workday/canvas-kit-react/common';
 import { css, jsx, keyframes } from '@emotion/react';
-import { IconButton } from '@workday/canvas-kit-react/button';
-import { space, colors } from '@workday/canvas-kit-react/tokens';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { space, colors, depth } from '@workday/canvas-kit-react/tokens';
 import { transformationImportIcon } from '@workday/canvas-system-icons-web';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { Box } from '@workday/canvas-kit-react/layout';
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -41,7 +40,13 @@ var createKeyframes = function (from, to) {
     };
     return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "], ["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
 };
-var StyledPanel = styled(Box)({
+var containerVariantStyle = {
+    alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[5]),
+    standard: {
+        backgroundColor: colors.soap100,
+    },
+};
+var Panel = styled('section')({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
@@ -52,10 +57,8 @@ export var SidePanelContext = React.createContext({
     origin: 'left',
 });
 var SidePanel = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, 
-    // variant = 'standard',
-    touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "touched"]);
-    var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
+    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
+    var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
     React.useEffect(function () {
         if (typeof onExpandedChange !== 'undefined') {
             onExpandedChange(expanded);
@@ -94,7 +97,18 @@ var SidePanel = function (_a) {
             onAnimationStart(event);
         }
     };
-    return (jsx(StyledPanel, __assign({ as: as, width: expanded ? expandedWidth : collapsedWidth, maxWidth: expanded ? expandedWidth : collapsedWidth, backgroundColor: elemProps.variant === 'alternate' ? colors.frenchVanilla100 : colors.soap100, depth: elemProps.variant === 'alternate' ? 3 : undefined, animation: touched ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out" : undefined, onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
+    return (jsx(Panel, __assign({ as: as, css: [
+            {
+                width: expanded ? expandedWidth : collapsedWidth,
+                maxWidth: expanded ? expandedWidth : collapsedWidth,
+                // mounted.current will be false on the first render, thus you won't get an unwanted animation here
+                // Will animate again if you force a re-render (like in Storybook)
+                animation: touched
+                    ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out"
+                    : undefined,
+            },
+            containerVariantStyle[variant],
+        ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
         jsx(SidePanelContext.Provider, { value: {
                 state: state,
                 origin: origin,
@@ -104,7 +118,7 @@ var SidePanel = function (_a) {
  * A toggle button styled specifically for the side panel container.
  */
 var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
+    var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
     var context = React.useContext(SidePanelContext);
     var useRTLOrigin = function () {
         var isRTL = useIsRTL();
@@ -120,6 +134,7 @@ var ToggleButton = function (_a) {
     var buttonStyle = css({
         position: 'absolute',
         top: space.m,
+        width: space.l,
         right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
         left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
         margin: context.state === 'collapsed' ? 'auto' : 0,
@@ -128,7 +143,7 @@ var ToggleButton = function (_a) {
             : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
     });
     return (jsx(Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
-        jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
+        jsx(TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
 export default SidePanel;

package/menu/lib/Menu.tsx

@@ -121,7 +121,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     const cardWidth = grow ? '100%' : width;
 
     return (
-      <Card style={{display: 'inline-block'}} padding={space.zero} width={cardWidth}>
+      <Card style={{display: 'inline-block'}} padding={space.zero} width={cardWidth} depth={3}>
         <Card.Body>
           <List
             role="menu"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "7.0.0-alpha.0-next.7+23568685",
+  "version": "7.0.0-alpha.80-next.8+3b8329ea",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -54,15 +54,15 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.7+23568685",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.80-next.8+3b8329ea",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.7+23568685",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.80-next.8+3b8329ea",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "23568685fec785046d37cb320289d8ab9e74e283"
+  "gitHead": "3b8329ea5b2bf21433f650155898b5b15c36a675"
 }

package/side-panel/lib/SidePanel.tsx

@@ -1,13 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
-import {styled, useIsRTL, StyledType} from '@workday/canvas-kit-react/common';
-import {css, jsx, keyframes} from '@emotion/react';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
-import {space, colors} from '@workday/canvas-kit-react/tokens';
+import {styled, useIsRTL} from '@workday/canvas-kit-react/common';
+import {css, jsx, keyframes, CSSObject} from '@emotion/react';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
+import {space, colors, depth} from '@workday/canvas-kit-react/tokens';
 import {transformationImportIcon} from '@workday/canvas-system-icons-web';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {Box} from '@workday/canvas-kit-react/layout';
 
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
@@ -57,7 +56,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   onStateTransition?: (state?: SidePanelTransitionStates) => void;
   /**
-   * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+   * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
    *
    * @default 'standard'
    */
@@ -89,7 +88,17 @@ const createKeyframes = (from: number | string, to: number | string) => {
   `;
 };
 
-const StyledPanel = styled(Box)<StyledType & Pick<SidePanelProps, 'as'>>({
+const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
+  alternate: {
+    backgroundColor: colors.frenchVanilla100,
+    ...depth[5],
+  },
+  standard: {
+    backgroundColor: colors.soap100,
+  },
+};
+
+const Panel = styled('section')<Pick<SidePanelProps, 'as'>>({
   overflow: 'hidden',
   position: 'relative',
   boxSizing: 'border-box',
@@ -112,7 +121,7 @@ const SidePanel = ({
   onExpandedChange,
   onStateTransition,
   origin = 'left',
-  // variant = 'standard',
+  variant = 'standard',
   touched,
   ...elemProps
 }: SidePanelProps) => {
@@ -169,15 +178,20 @@ const SidePanel = ({
   };
 
   return (
-    <StyledPanel
+    <Panel
       as={as}
-      width={expanded ? expandedWidth : collapsedWidth}
-      maxWidth={expanded ? expandedWidth : collapsedWidth}
-      backgroundColor={elemProps.variant === 'alternate' ? colors.frenchVanilla100 : colors.soap100}
-      depth={elemProps.variant === 'alternate' ? 3 : undefined}
-      animation={
-        touched ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out` : undefined
-      }
+      css={[
+        {
+          width: expanded ? expandedWidth : collapsedWidth,
+          maxWidth: expanded ? expandedWidth : collapsedWidth,
+          // mounted.current will be false on the first render, thus you won't get an unwanted animation here
+          // Will animate again if you force a re-render (like in Storybook)
+          animation: touched
+            ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
+            : undefined,
+        },
+        containerVariantStyle[variant],
+      ]}
       onAnimationEnd={handleAnimationEnd}
       onAnimationStart={handleAnimationStart}
       {...elemProps}
@@ -190,11 +204,11 @@ const SidePanel = ({
       >
         {children}
       </SidePanelContext.Provider>
-    </StyledPanel>
+    </Panel>
   );
 };
 
-export type ToggleButtonProps = IconButtonProps & {
+export type ToggleButtonProps = TertiaryButtonProps & {
   /**
    * The tooltip text to expand the side panel
    * @default 'Expand'
@@ -211,7 +225,7 @@ export type ToggleButtonProps = IconButtonProps & {
  * A toggle button styled specifically for the side panel container.
  */
 const ToggleButton = ({
-  variant = 'plain',
+  variant = undefined,
   icon = transformationImportIcon,
   tooltipTextExpand: expandLabel = 'Expand',
   tooltipTextCollapse: collapseLabel = 'Collapse',
@@ -235,9 +249,10 @@ const ToggleButton = ({
   const buttonStyle = css({
     position: 'absolute',
     top: space.m,
+    width: space.l,
     right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
     left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
-    margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for IconButton.Plain
+    margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for TertiaryButton.Plain
     transform:
       context.state === 'collapsed' || context.state === 'collapsing'
         ? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
@@ -246,7 +261,7 @@ const ToggleButton = ({
 
   return (
     <Tooltip title={context.state === 'collapsed' ? expandLabel : collapseLabel} type="muted">
-      <IconButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />
+      <TertiaryButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />
     </Tooltip>
   );
 };

package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts

@@ -1,6 +1,6 @@
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface DropdownButtonProps extends IconButtonProps {
+export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * The accessibility label for the button
      */
@@ -16,5 +16,5 @@ export interface DropdownButtonProps extends IconButtonProps {
      */
     toggled: boolean;
 }
-export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"button", IconButtonProps>, DropdownButtonProps>;
+export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DropdownButtonProps>;
 //# sourceMappingURL=Button.d.ts.map

package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import * as React from 'react';
 import { jsx } from '@emotion/react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
-export declare type ToggleButtonProps = IconButtonProps & {
+export declare type ToggleButtonProps = TertiaryButtonProps & {
     /**
      * The tooltip text to expand the side panel
      * @default 'Expand'

package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts

@@ -1,6 +1,6 @@
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface DropdownButtonProps extends IconButtonProps {
+export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * The accessibility label for the button
      */
@@ -16,5 +16,5 @@ export interface DropdownButtonProps extends IconButtonProps {
      */
     toggled: boolean;
 }
-export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"button", IconButtonProps>, DropdownButtonProps>;
+export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DropdownButtonProps>;
 //# sourceMappingURL=Button.d.ts.map

package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import * as React from 'react';
 import { jsx } from '@emotion/react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
-export declare type ToggleButtonProps = IconButtonProps & {
+export declare type ToggleButtonProps = TertiaryButtonProps & {
     /**
      * The tooltip text to expand the side panel
      * @default 'Expand'