@workday/canvas-kit-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.79-next.7

package/tokens/README.md

@@ -174,16 +174,19 @@ const buttonSyles = {
 
 ## Depth
 
-Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and priority with shadows and layering. There are five depth levels, `inset`, `1`, `2`, `3`, and `4`. Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and
+priority with shadows and layering. There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5`
+and `6`. `none` is a special value to remove depth styles. All other levels only apply box-shadow
+styles.
 
 ### Usage
 
 ```tsx
-import { depth } from '@workday/canvas-kit-react/tokens';
+import {depth} from '@workday/canvas-kit-react/tokens';
 
 const CustomCard = () => {
-  return <div css={depth[2]}>A standard-depth card</div>;
-}
+  return <div css={depth[1]}>A standard-depth card</div>;
+};
 ```
 
 ## Type
@@ -211,8 +214,8 @@ To use the Canvas Kit font
 
 Canvas Kit v5 introduced `rem` units (instead of `px`) to our type tokens. This update follows the
 guidance [from the WCAG spec](https://www.w3.org/TR/WCAG21/#resize-text) and provides better support
-for users who change their browser's default font size. If you'd like to learn more about `rem` and relative units, you can
-review this
+for users who change their browser's default font size. If you'd like to learn more about `rem` and
+relative units, you can review this
 [documentation](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#ems_and_rems).
 
 > **Note:** We are using `16px` as our base font-size for these values. This is a browser standard
@@ -299,8 +302,8 @@ _Intended for standard body text_
 
 _Intended for small subtext content or in tight spaces_
 
-| Size     | Properties                                            |
-| -------- | ----------------------------------------------------- |
+| Size     | Properties                                                   |
+| -------- | ------------------------------------------------------------ |
 | `large`  | fontSize: `14px` (`0.875rem`), fontWeight: `regular` (`400`) |
 | `medium` | fontSize: `12px` (`0.75rem`), fontWeight: `regular` (`400`)  |
 | `small`  | fontSize: `10px` (`0.625rem`), fontWeight: `regular` (`400`) |

package/tokens/lib/depth.ts

@@ -1,23 +1,23 @@
 export type CanvasDepth = {
   /**
-   * ### Depth Inset
-   * 	Used for inset containers
+   * ### Depth None
+   * 	Used for removing existing depth
    *
    * @example
    * ```ts
    * import { depth } from '@workday/canvas-kit-react/tokens';
    *
-   * const insetCardStyles = {
-   *   ...depth.inset,
+   * const noDepthCardStyles = {
+   *   ...depth.none,
    * };
    * ```
    */
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+  none: {
+    boxShadow: 'none';
   };
   /**
    * ### Depth 1
-   * Used for minimal offset
+   * Used for minimal offset and Cards
    *
    * @example
    * ```ts
@@ -29,11 +29,11 @@ export type CanvasDepth = {
    * ```
    */
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 2
-   * Used for Cards, Popups, and Menus — our most common depth
+   * Used for Top navigation, Bottom navigation
    *
    * @example
    * ```ts
@@ -45,11 +45,11 @@ export type CanvasDepth = {
    * ```
    */
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 3
-   * Used for interactive Cards on hover
+   * Used for FABs, Menus
    *
    * @example
    * ```ts
@@ -61,11 +61,11 @@ export type CanvasDepth = {
    * ```
    */
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 4
-   * Used for Cards on white backgrounds — adds border styles for more contrast
+   *
    *
    * @example
    * ```ts
@@ -77,8 +77,39 @@ export type CanvasDepth = {
    * ```
    */
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)';
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 5
+   * Used for Popups, Toast Messages, Dialogs, Side Panels without opacity overlay behavior
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[5],
+   * };
+   * ```
+   */
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 6
+   * Used for components with opacity overlay behavior such as Modal or Side Panels
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[6],
+   * };
+   * ```
+   */
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
   };
 };
 
@@ -90,8 +121,8 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  * Depth is the relative distance between surfaces in the z-axis.
  * It provides delineation, focus, and priority with shadows and layering.
- * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
- * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ * There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
+ * `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
  *
  * @example
  * ```tsx
@@ -108,20 +139,25 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  */
 export const depth: CanvasDepth = {
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
+  none: {
+    boxShadow: 'none',
   },
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)',
   },
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)',
   },
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)',
   },
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)',
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)',
+  },
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)',
+  },
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)',
   },
 };

package/tooltip/README.md

@@ -2,7 +2,8 @@
 
 A Tooltip component that renders information/text when the user hovers over an element. A tooltip is
 used to label or describe an element. By default, a tooltip will label an element. This is useful
-for IconButtons. A tooltip can also be used to describe additional information about an element
+for TertiaryButtons that render just an icon. A tooltip can also be used to describe additional
+information about an element
 
 [> Workday Design Reference](https://design.workday.com/components/popups/tooltips)
 
@@ -18,12 +19,12 @@ yarn add @workday/canvas-kit-react
 import * as React from 'react';
 
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 
 const TooltipExample = () => {
   return (
     <Tooltip title="Close">
-      <IconButton variant="circle" icon={xIcon} aria-label="Close" />
+      <TertiaryButton icon={xIcon} aria-label="Close" />
     </Tooltip>
   );
 };
@@ -60,8 +61,8 @@ const TooltipExample = () => {
 > Determines the tooltip type for accessibility.
 >
 > - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip `title`
->   prop is the same as the text content of the wrapped element. E.g. IconButtons or Ellipsis
->   tooltips.
+>   prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an
+>   icon or Ellipsis tooltips.
 > - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
 >   information about the target. **Note**: Assistive technology may ignore `describe` techniques
 >   based on verbosity settings. Consider an alternate way to inform a user of additional important

package/tooltip/lib/Tooltip.tsx

@@ -31,7 +31,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * Determines the tooltip type for accessibility.
    *
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-   *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+   *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
    *   Ellipsis tooltips.
    * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.

package/tooltip/lib/useTooltip.tsx

@@ -62,7 +62,7 @@ export function useTooltip<T extends Element = Element>({
    * Determines the tooltip type for accessibility.
    *
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-   *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+   *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
    *   Ellipsis tooltips.
    * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.

package/ts3.5/dist/commonjs/action-bar/lib/ActionBar.d.ts

@@ -1,4 +1,4 @@
-import { HStackProps, StackSpacing } from '@workday/canvas-kit-labs-react';
+import { HStackProps, StackSpacing } from '@workday/canvas-kit-react/layout';
 interface ActionBarProps extends Omit<HStackProps, 'spacing'> {
     spacing?: StackSpacing;
 }

package/ts3.5/dist/commonjs/banner/lib/Banner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { BannerModel, BannerModelConfig } from './hooks';
 export declare const BannerModelContext: React.Context<import("../../common").Model<{
     hasError?: boolean | undefined;

package/ts3.5/dist/commonjs/banner/lib/BannerActionText.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
 import { BannerModel } from './hooks';
 export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
     model?: BannerModel;

package/ts3.5/dist/commonjs/banner/lib/BannerLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { BannerModel } from './hooks';
 export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
     model?: BannerModel;

package/ts3.5/dist/commonjs/button/index.d.ts

@@ -3,9 +3,9 @@ export { SecondaryButton, SecondaryButtonProps } from './lib/SecondaryButton';
 export { TertiaryButton, TertiaryButtonProps } from './lib/TertiaryButton';
 export { DeleteButton, DeleteButtonProps } from './lib/DeleteButton';
 export { DeprecatedButton as deprecated_Button, DeprecatedButtonProps, } from './lib/deprecated_Button';
-export { IconButton, IconButtonProps } from './lib/IconButton';
 export { ToolbarIconButton, ToolbarIconButtonProps } from './lib/ToolbarIconButton';
 export { ToolbarDropdownButton, ToolbarDropdownButtonProps } from './lib/ToolbarDropdownButton';
 export { Hyperlink, HyperlinkProps } from './lib/Hyperlink';
+export { BaseButton, ButtonContainerProps } from './lib/BaseButton';
 export * from './lib/types';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/button/lib/BaseButton.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+import { ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes } from './types';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
+    colors?: ButtonColors;
+    /**
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
+     * @default 'medium'
+     */
+    size?: ButtonSizes;
+    /**
+     * The ref to the button that the styled component renders.
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+    /**
+     * Whether the icon should received filled (colored background layer) or regular styles.
+     * Corresponds to `toggled` in ToolbarIconButton
+     */
+    fillIcon?: boolean;
+}
+export declare const getMinWidthStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes) => "24px" | "32px" | "40px" | "80px" | "auto" | "48px" | "112px" | "96px";
+export declare const getPaddingStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes, icon: CanvasSystemIcon | undefined, iconPosition: IconPositions | undefined) => string | 0;
+export declare const BaseButton: import("../../common").ElementComponent<"button", ButtonContainerProps> & {
+    Icon: import("../../common").ElementComponent<"span", import("./parts/ButtonLabelIcon").ButtonLabelIconProps>;
+    Label: import("../../common").ElementComponent<"span", import("./parts/ButtonLabel").ButtonLabelProps>;
+};
+//# sourceMappingURL=BaseButton.d.ts.map

package/ts3.5/dist/commonjs/button/lib/PrimaryButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+import { GrowthBehavior, Themeable } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { ButtonSizes, IconPositions } from './types';
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
@@ -15,20 +15,15 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
      * @default 'medium'
      */
     size?: ButtonSizes;
-    /**
-     * The data label of the Button.
-     * Note: not displayed at `small` size
-     */
-    dataLabel?: String;
     /**
      * The icon of the Button.
      * Note: not displayed at `small` size
      */
     icon?: CanvasSystemIcon;
     /**
-     * Button icon positions can either be `left` or `right`.
-     * If no value is provided, it defaults to `left`.
-     * @default 'left'
+     * Button icon positions can either be `start` or `end`.
+     * If no value is provided, it defaults to `start`.
+     * @default 'start'
      */
     iconPosition?: IconPositions;
     /**
@@ -39,71 +34,4 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     children?: React.ReactNode;
 }
 export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
-export declare const getPrimaryButtonColors: (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => {
-    default: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData?: undefined;
-    };
-    hover: {
-        background: string;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-    };
-    active: {
-        background: string;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-    };
-    focus: {
-        background: string;
-        border?: undefined;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-        focusRing?: undefined;
-    };
-    disabled: {
-        background: string;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-    };
-} | {
-    default: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-    hover: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-    active: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-    focus: {
-        background: string;
-        border: string;
-        icon: string;
-        label: string;
-        labelData: string;
-        focusRing: import("@emotion/react").CSSObject;
-    };
-    disabled: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-};
 //# sourceMappingURL=PrimaryButton.d.ts.map

package/ts3.5/dist/commonjs/button/lib/SecondaryButton.d.ts

@@ -15,11 +15,6 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
      * @default 'medium'
      */
     size?: ButtonSizes;
-    /**
-     * The data label of the Button.
-     * Note: not displayed at `small` size
-     */
-    dataLabel?: String;
     /**
      * The icon of the Button.
      * Note: not displayed at `small` size

package/ts3.5/dist/commonjs/button/lib/TertiaryButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Themeable } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { TertiaryButtonSizes, IconPositions } from './types';
+import { IconPositions, ButtonSizes } from './types';
 export interface TertiaryButtonProps extends Themeable {
     /**
      * The variant of the TertiaryButton.
@@ -14,7 +14,7 @@ export interface TertiaryButtonProps extends Themeable {
      *
      * @default 'medium'
      */
-    size?: TertiaryButtonSizes;
+    size?: ButtonSizes;
     /**
      * Button icon positions can either be `left` or `right`.
      * If no value is provided, it defaults to `left`.

package/ts3.5/dist/commonjs/button/lib/ToolbarIconButton.d.ts

@@ -1,6 +1,9 @@
 import { Themeable } from '@workday/canvas-kit-react/common';
-import { IconButtonProps } from './IconButton';
-export interface ToolbarIconButtonProps extends Omit<IconButtonProps, 'size' | 'variant'>, Themeable {
+import { TertiaryButtonProps } from './TertiaryButton';
+export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size' | 'variant'>, Themeable {
+    onToggleChange?: (toggled: boolean | undefined) => void;
+    toggled?: boolean;
+    shouldMirrorIcon?: boolean;
 }
 export declare const ToolbarIconButton: import("../../common").ElementComponent<"button", ToolbarIconButtonProps>;
 //# sourceMappingURL=ToolbarIconButton.d.ts.map

package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabel.d.ts

@@ -1,5 +1,5 @@
-export declare const ButtonLabel: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface ButtonLabelProps extends BoxProps {
+}
+export declare const ButtonLabel: import("../../../common").ElementComponent<"span", ButtonLabelProps>;
 //# sourceMappingURL=ButtonLabel.d.ts.map

package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts

@@ -1,6 +1,7 @@
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { ButtonSizes, IconPositions } from '../types';
-export interface ButtonLabelIconProps {
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface ButtonLabelIconProps extends BoxProps {
     /**
      * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
      *
@@ -15,7 +16,7 @@ export interface ButtonLabelIconProps {
     /**
      * Button icon positions can either be `left` or `right`.
      * If no value is provided, it defaults to `left`.
-     * @default 'left'
+     * @default 'start'
      */
     iconPosition?: IconPositions;
     /**
@@ -24,5 +25,5 @@ export interface ButtonLabelIconProps {
      */
     shouldMirrorIcon?: boolean;
 }
-export declare const ButtonLabelIcon: ({ icon, size, iconPosition, shouldMirrorIcon, ...elemProps }: ButtonLabelIconProps) => JSX.Element | null;
+export declare const ButtonLabelIcon: import("../../../common").ElementComponent<"span", ButtonLabelIconProps>;
 //# sourceMappingURL=ButtonLabelIcon.d.ts.map

package/ts3.5/dist/commonjs/button/lib/parts/index.d.ts

@@ -1,5 +1,3 @@
-export { ButtonContainer } from './ButtonContainer';
 export { ButtonLabel } from './ButtonLabel';
-export { ButtonLabelData } from './ButtonLabelData';
 export { ButtonLabelIcon } from './ButtonLabelIcon';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/button/lib/types.d.ts

@@ -8,7 +8,7 @@ export interface ButtonStateColors {
     icon?: string;
     iconFill?: boolean;
     label?: string;
-    labelData?: string;
+    opacity?: string;
 }
 export interface ButtonColors {
     default: ButtonStateColors;
@@ -27,5 +27,5 @@ export interface ButtonColors {
  */
 export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
 export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
-export declare type IconPositions = 'left' | 'right';
+export declare type IconPositions = 'start' | 'end';
 //# sourceMappingURL=types.d.ts.map

package/ts3.5/dist/commonjs/card/lib/Card.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from '@workday/canvas-kit-labs-react/common';
+import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface CardProps extends BoxProps {
     /**
      * Children of the Card. Should contain a `<Card.Body>` and an optional `<Card.Heading>`
@@ -8,6 +8,6 @@ export interface CardProps extends BoxProps {
 }
 export declare const Card: import("../../common").ElementComponent<"div", CardProps> & {
     Heading: import("../../common").ElementComponent<"h3", import("./CardHeading").CardHeadingProps>;
-    Body: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react/common").ColorStyleProps & import("@workday/canvas-kit-labs-react/common").DepthStyleProps & import("@workday/canvas-kit-labs-react/common").FlexItemStyleProps & import("@workday/canvas-kit-labs-react/common").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
+    Body: import("../../common").ElementComponent<"div", import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
 };
 //# sourceMappingURL=Card.d.ts.map

package/ts3.5/dist/commonjs/card/lib/CardBody.d.ts

@@ -1,2 +1,2 @@
-export declare const CardBody: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react/common").ColorStyleProps & import("@workday/canvas-kit-labs-react/common").DepthStyleProps & import("@workday/canvas-kit-labs-react/common").FlexItemStyleProps & import("@workday/canvas-kit-labs-react/common").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
+export declare const CardBody: import("../../common").ElementComponent<"div", import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
 //# sourceMappingURL=CardBody.d.ts.map

package/ts3.5/dist/commonjs/card/lib/CardHeading.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from '@workday/canvas-kit-labs-react/common';
+import { BoxProps } from '@workday/canvas-kit-react/layout';
 export interface CardHeadingProps extends BoxProps {
     /**
      * The id of the Card heading. Tie this to an `aria-labelledby` for accessibility.

package/ts3.5/dist/commonjs/dialog/lib/Dialog.d.ts

@@ -15,7 +15,7 @@ export interface DialogProps extends PopupModelConfig {
     model?: PopupModel;
 }
 export declare const Dialog: import("../../common").Component<DialogProps> & {
-    Body: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react").ColorStyleProps & import("@workday/canvas-kit-labs-react").DepthStyleProps & import("@workday/canvas-kit-labs-react").FlexItemStyleProps & import("@workday/canvas-kit-labs-react").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
+    Body: import("../../common").ElementComponent<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
     Card: import("../../common").ElementComponent<"div", import("./DialogCard").DialogCardProps>;
     CloseIcon: import("../../common").ElementComponent<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps>;
     Target: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupTarget").PopupTargetProps>;

package/ts3.5/dist/commonjs/icon/lib/AccentIcon.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CanvasAccentIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
@@ -14,7 +13,7 @@ export interface AccentIconStyles {
      */
     transparent?: boolean;
 }
-export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type' | 'color'> {
     /**
      *  The icon to display from `@workday/canvas-accent-icons-web`.
      */
@@ -26,7 +25,6 @@ export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src'
     size?: number;
 }
 export declare const accentIconStyles: ({ color, transparent, }: AccentIconStyles) => CSSObject;
-export default class AccentIcon extends React.Component<AccentIconProps> {
-    render(): JSX.Element;
-}
+declare const AccentIcon: import("../../common").ElementComponent<"span", AccentIconProps>;
+export default AccentIcon;
 //# sourceMappingURL=AccentIcon.d.ts.map