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

package/ts3.5/dist/es6/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/es6/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

package/ts3.5/dist/es6/icon/lib/AppletIcon.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BrandingColor } from '@workday/canvas-kit-react/tokens';
 import { CanvasAppletIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
@@ -11,7 +10,7 @@ export interface AppletIconStyles {
     color?: BrandingColor;
 }
 export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
-export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'iconRef' | 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
     /**
      * The icon to display from `@workday/canvas-applet-icons-web`.
      */
@@ -22,8 +21,8 @@ export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'icon
      */
     size?: number;
 }
-export default class AppletIcon extends React.Component<AppletIconProps> {
-    static Colors: typeof BrandingColor;
-    render(): JSX.Element;
-}
+export declare const AppletIcon: import("../../common").ElementComponent<"span", AppletIconProps> & {
+    Colors: typeof BrandingColor;
+};
+export default AppletIcon;
 //# sourceMappingURL=AppletIcon.d.ts.map

package/ts3.5/dist/es6/icon/lib/Graphic.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CanvasGraphic } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { SvgProps } from './Svg';
@@ -19,14 +18,13 @@ export interface GraphicStyles {
      */
     grow?: boolean;
 }
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef' | 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
     /**
      * The graphic to display from `@workday/canvas-graphics-web`.
      */
     src: CanvasGraphic;
 }
 export declare const graphicStyles: ({ width, height, grow }: GraphicStyles) => CSSObject;
-export default class Graphic extends React.Component<GraphicProps> {
-    render(): JSX.Element;
-}
+declare const Graphic: import("../../common").ElementComponent<"span", GraphicProps>;
+export default Graphic;
 //# sourceMappingURL=Graphic.d.ts.map

package/ts3.5/dist/es6/icon/lib/Icon.d.ts

@@ -1,13 +1,10 @@
-import * as React from 'react';
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
 export interface IconProps extends SvgProps {
     src: CanvasIcon;
     size?: number;
     type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-    iconRef?: React.Ref<HTMLSpanElement>;
-}
-export default class Icon extends React.Component<IconProps> {
-    render(): JSX.Element;
 }
+export declare const Icon: import("../../common").ElementComponent<"span", IconProps>;
+export default Icon;
 //# sourceMappingURL=Icon.d.ts.map

package/ts3.5/dist/es6/icon/lib/Svg.d.ts

@@ -1,18 +1,16 @@
 import { CSSObject } from '@emotion/styled';
-import * as React from 'react';
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface SvgProps extends BoxProps {
     src: CanvasIcon;
     styles?: CSSObject;
     type: CanvasIconTypes;
-    iconRef?: React.Ref<HTMLSpanElement>;
     /**
      * If set to `true`, transform the SVG's x-axis to mirror the graphic
      * @default false
      */
     shouldMirror?: boolean;
 }
-export default class Svg extends React.Component<SvgProps> {
-    render(): JSX.Element | null;
-}
+export declare const Svg: import("../../common").ElementComponent<"span", SvgProps>;
+export default Svg;
 //# sourceMappingURL=Svg.d.ts.map

package/ts3.5/dist/es6/icon/lib/SystemIcon.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
@@ -40,7 +39,7 @@ export interface SystemIconStyles {
      */
     fillHover?: string;
 }
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */
@@ -48,10 +47,10 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
     /**
      * The size of the SystemIcon in `px`.
      */
-    size?: number;
+    size?: number | undefined;
+    className?: string;
 }
 export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;
-export default class SystemIcon extends React.Component<SystemIconProps> {
-    render(): JSX.Element;
-}
+declare const SystemIcon: import("../../common").ElementComponent<"span", SystemIconProps>;
+export default SystemIcon;
 //# sourceMappingURL=SystemIcon.d.ts.map

package/ts3.5/dist/es6/icon/lib/SystemIconCircle.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { SystemIconProps } from './SystemIcon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 export declare enum SystemIconCircleSize {
@@ -9,7 +8,7 @@ export declare enum SystemIconCircleSize {
     xl = 64,
     xxl = 120
 }
-export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' | 'shouldMirror'> {
+export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
     /**
      * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
      * @default colors.soap300
@@ -25,8 +24,6 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' |
      */
     size?: SystemIconCircleSize | number;
 }
-export default class SystemIconCircle extends React.Component<SystemIconCircleProps> {
-    static Size: typeof SystemIconCircleSize;
-    render(): JSX.Element;
-}
+declare const SystemIconCircle: import("../../common").ElementComponent<"span", SystemIconCircleProps>;
+export default SystemIconCircle;
 //# sourceMappingURL=SystemIconCircle.d.ts.map

package/ts3.5/dist/es6/layout/lib/Box.d.ts

@@ -10,6 +10,23 @@ import { SpaceStyleProps } from './utils/space';
 export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
     children?: React.ReactNode;
 };
+/**
+ * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
+ * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
+ * @example
+ * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
+ * const StyledHeader = styled('h1')(
+ *  boxStyleFn,
+ *  {
+ *    fontWeight: 400,
+ *  }
+ * )
+ *
+ * ....
+ *
+ * <StyledHeader color='red'>Hello World</StyledHeader>
+ */
+export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
 /**
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
  * It is highly flexible, and its primary purpose is to build other components.
@@ -23,7 +40,7 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
  *
  * // `Card`'s default values are set using `BoxProps`
  * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
+ *   <Box depth={1} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
  * );
  *
  */

package/ts3.5/dist/es6/layout/lib/Flex.d.ts

@@ -15,7 +15,7 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  *
  * // `Card`'s default values are set using `FlexProps`
  * const Card = (props: CardProps) => (
- *   <Flex flexDirection="column" alignItems="flex-start" depth={2} space="m" {...props}>
+ *   <Flex flexDirection="column" alignItems="flex-start" depth={1} space="m" {...props}>
  *     <h1>Hello, Card!</h1>
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>

package/ts3.5/dist/es6/pagination/lib/Pagination/Controls.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { PaginationModel } from './types';
-export declare type ControlButtonProps = IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare type ControlButtonProps = TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
 };
 export declare type ControlsProps = React.HTMLAttributes<HTMLDivElement>;

package/ts3.5/dist/es6/pagination/lib/Pagination/PageButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
 import { PaginationModel } from './types';
-export declare type PageButtonProps = IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare type PageButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
     pageNumber: number;
 };

package/ts3.5/dist/es6/pagination/lib/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { PaginationModel } from './types';
 import { PaginationNavProps } from './Nav';
 import { ControlsProps } from './Controls';
@@ -30,10 +30,10 @@ export declare type PaginationProps = PaginationConfigurationProps | PaginationM
 export declare const Pagination: {
     (props: PaginationProps): JSX.Element;
     Controls(props: ControlsProps): JSX.Element;
-    JumpToFirstButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    StepToPreviousButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    StepToNextButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-    JumpToLastButton(props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    JumpToFirstButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    StepToPreviousButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    StepToNextButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+    JumpToLastButton(props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
     PageList(props: Pick<PageListProps, Exclude<keyof PageListProps, 'model'>>): JSX.Element;
     PageListItem(props: PageListItemProps): JSX.Element;
     PageButton({ "aria-label": ariaLabel, ...elemProps }: Pick<PageButtonProps, Exclude<keyof PageButtonProps, 'model'>>): JSX.Element;

package/ts3.5/dist/es6/popup/lib/PopupCloseIcon.d.ts

@@ -1,7 +1,7 @@
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { PopupModel } from './hooks';
-export interface PopupCloseIconProps extends ExtractProps<typeof IconButton, never> {
+export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {
     /**
      * Optionally pass a model directly to this component. Default is to implicitly use the same
      * model as the container component which uses React context. Only use this for advanced use-cases

package/ts3.5/dist/es6/segmented-control/lib/SegmentedControl.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { SegmentedControlButtonProps } from './SegmentedControlButton';
 export interface SegmentedControlProps {
     /**
-     * The IconButton children of the SegmentedControl (must be at least two).
+     * The Button children of the SegmentedControl (must be at least two).
      * TODO: Add support for text children
      */
-    children: React.ReactElement<IconButtonProps>[];
+    children: React.ReactElement<SegmentedControlButtonProps>[];
     /**
-     * The value or index of the IconButton that the SegmentedControl should be toggled on to.
-     * If a string is provided, the IconButton with the corresponding value will be selected.
-     * If a number is provided, the IconButton with the corresponding index will be selected.
+     * The value or index of the Button that the SegmentedControl should be toggled on to.
+     * If a string is provided, the Button with the corresponding value will be selected.
+     * If a number is provided, the Button with the corresponding index will be selected.
      * @default 0
      */
     value?: string | number;
@@ -20,6 +20,8 @@ export interface SegmentedControlProps {
      */
     onChange?: (value: string | number) => void;
 }
-declare const SegmentedControl: ({ value, children, onChange, ...elemProps }: SegmentedControlProps) => JSX.Element;
+export declare const SegmentedControl: import("../../common").ElementComponent<"div", SegmentedControlProps> & {
+    Button: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
+};
 export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.d.ts.map

package/ts3.5/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts

@@ -0,0 +1,8 @@
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface SegmentedControlButtonProps {
+    toggled?: boolean;
+    icon: CanvasSystemIcon;
+    value?: string | number;
+}
+export declare const SegmentedControlButton: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
+//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/ts3.5/dist/es6/tabs/lib/Tabs.d.ts

@@ -16,7 +16,7 @@ export interface TabsProps<T = any> extends TabsModelConfig<T> {
 export declare const Tabs: import("../../common").Component<TabsProps<any>> & {
     List: import("../../common").ElementComponent<"div", import("./TabsList").TabListProps<unknown>>;
     Item: import("../../common").ElementComponent<"button", import("./TabsItem").TabsItemProps> & {
-        Icon: typeof import("../..").SystemIcon;
+        Icon: import("../../common").ElementComponent<"span", import("../..").SystemIconProps>;
         Text: import("../../common").ElementComponent<"span", {}>;
     };
     Panel: import("../../common").ElementComponent<"div", import("./TabsPanel").TabPanelProps<unknown>>;
@@ -39,7 +39,7 @@ export declare const Tabs: import("../../common").Component<TabsProps<any>> & {
         Card: import("../../common").ElementComponent<"div", import("./menu/MenuCard").MenuCardProps<unknown>>;
         List: import("../../common").ElementComponent<"div", import("./menu/MenuList").MenuListProps<unknown>>;
         Item: import("../../common").ElementComponent<"button", import("./menu/MenuItem").MenuItemProps<unknown>> & {
-            Icon: typeof import("../..").SystemIcon;
+            Icon: import("../../common").ElementComponent<"span", import("../..").SystemIconProps>;
             Text: import("@emotion/styled").StyledComponent<{
                 theme?: import("@emotion/react").Theme | undefined;
                 as?: "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "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" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/ts3.5/dist/es6/tabs/lib/TabsItem.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyledType, ExtractProps } from '@workday/canvas-kit-react/common';
 import { Box, StackProps } from '@workday/canvas-kit-react/layout';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { TabsModel } from './useTabsModel';
 export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<Pick<StackProps, 'spacing'>> {
     /**
@@ -79,7 +78,7 @@ export declare const StyledTabItem: import("@emotion/styled").StyledComponent<im
     hasIcon?: boolean | undefined;
 } & Pick<TabsItemProps, "spacing">, {}, {}>;
 export declare const TabsItem: import("../../common").ElementComponent<"button", TabsItemProps> & {
-    Icon: typeof SystemIcon;
+    Icon: import("../../common").ElementComponent<"span", import("../../icon").SystemIconProps>;
     Text: import("../../common").ElementComponent<"span", {}>;
 };
 export declare const useTabsItem: <P extends {}, R>(model: import("./list").ListModel<unknown>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {

package/ts3.5/dist/es6/tabs/lib/menu/Menu.d.ts

@@ -65,7 +65,7 @@ export declare const Menu: import("../../../common").Component<MenuProps<any>> &
      * HTML. If more complex HTML is provided, consider
      */
     Item: import("../../../common").ElementComponent<"button", import("./MenuItem").MenuItemProps<unknown>> & {
-        Icon: typeof import("../../..").SystemIcon;
+        Icon: import("../../../common").ElementComponent<"span", import("../../..").SystemIconProps>;
         Text: import("@emotion/styled").StyledComponent<{
             theme?: import("@emotion/react").Theme | undefined;
             as?: "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "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" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/ts3.5/dist/es6/tabs/lib/menu/MenuItem.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { MenuModel } from './useMenuModel';
 export interface MenuItemProps<T = unknown> {
     /**
@@ -38,7 +37,7 @@ export interface MenuItemProps<T = unknown> {
     hasIcon?: boolean;
 }
 export declare const MenuItem: import("../../../common").ElementComponent<"button", MenuItemProps<unknown>> & {
-    Icon: typeof SystemIcon;
+    Icon: import("../../../common").ElementComponent<"span", import("../../../icon").SystemIconProps>;
     Text: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;
         as?: "symbol" | "object" | "button" | "meter" | "textarea" | "style" | "progress" | "text" | "ruby" | "table" | "small" | "sub" | "circle" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "clipPath" | "filter" | "mask" | "marker" | "big" | "link" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "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" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/ts3.5/dist/es6/text-input/lib/InputIconContainer.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 export interface InputIconContainerProps extends GrowthBehavior {
-    icon?: React.ReactElement<SystemIcon>;
+    icon?: React.ReactElement<typeof SystemIcon>;
 }
 declare const InputIconContainer: React.FunctionComponent<InputIconContainerProps>;
 export default InputIconContainer;

package/ts3.5/dist/es6/tokens/lib/depth.d.ts

@@ -1,23 +1,23 @@
 export declare 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 declare 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 declare 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 declare 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 declare 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)';
     };
 };
 declare type ValueOf<T> = T[keyof T];
@@ -88,8 +119,8 @@ export declare 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

package/ts3.5/dist/es6/tooltip/lib/Tooltip.d.ts

@@ -24,7 +24,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/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -8,7 +8,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
      * 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.