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

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/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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.

package/ts3.5/dist/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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" | "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" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/ts3.5/dist/commonjs/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/commonjs/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" | "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" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

package/ts3.5/dist/commonjs/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" | "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" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;

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